@warp-ds/elements 1.4.0 → 1.4.1-next.1

package/dist/packages/attention/index.js

@@ -1029,334 +1029,383 @@ var require_parser = __commonJS({
 
 // packages/attention/index.js
 import { css, html as html2, nothing } from "lit";
-import WarpElement from "@warp-ds/elements-core";
-import { ifDefined } from "lit/directives/if-defined.js";
 
-// packages/utils/index.js
-import { classMap } from "lit/directives/class-map.js";
-var camelCaseToKebabCase = (str) => str.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
-function kebabCaseAttributes(constructor) {
-  return class extends constructor {
-    static createProperty(name, options) {
-      let customOptions = options;
-      if (typeof (options == null ? void 0 : options.attribute) === "undefined" || (options == null ? void 0 : options.attribute) === true) {
-        customOptions = Object.assign({}, options, {
-          attribute: camelCaseToKebabCase(name.toString())
-        });
+// 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.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) {
+    return tokens.map((token) => mapText(token.value)).join("");
+  }
+  return tokens.map((token) => {
+    var _a;
+    if (token.type === "content") {
+      return mapText(token.value);
+    } else if (token.type === "octothorpe") {
+      return "#";
+    } else if (token.type === "argument") {
+      return [token.arg];
+    } else if (token.type === "function") {
+      const _param = (_a = token == null ? void 0 : token.param) == null ? void 0 : _a[0];
+      if (_param) {
+        return [token.arg, token.key, _param.value.trim()];
+      } else {
+        return [token.arg, token.key];
       }
-      super.createProperty(name, customOptions);
     }
-  };
+    const offset2 = token.pluralOffset;
+    const formatProps = {};
+    token.cases.forEach((item) => {
+      formatProps[item.key.replace(/^=(.)+/, "$1")] = processTokens(
+        item.tokens,
+        mapText
+      );
+    });
+    return [
+      token.arg,
+      token.type,
+      __spreadValues({
+        offset: offset2
+      }, formatProps)
+    ];
+  });
 }
-function classes(defn) {
-  const classes2 = [];
-  for (const [key, value] of Object.entries(defn)) {
-    if (value)
-      classes2.push(key);
+function compileMessage(message, mapText = (v) => v) {
+  try {
+    return processTokens((0, import_parser.parse)(message), mapText);
+  } catch (e) {
+    console.error(`${e.message} 
+
+Message: ${message}`);
+    return message;
   }
-  return classes2.join(" ");
-}
-function generateRandomId() {
-  return `m${Math.random().toString(36).slice(2)}`;
 }
 
-// node_modules/.pnpm/@warp-ds+css@1.9.6/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: "s-bg-info-subtle",
-  neutral: "s-surface-sunken",
-  bordered: "border-2 s-border s-bg",
-  infoClickable: "hover:s-bg-info-subtle-hover active:s-bg-info-subtle-active",
-  // Deprecated - Remove in v2 (after removing Clickable prop in the Box components)
-  neutralClickable: "hover:s-bg-hover active:s-bg-active",
-  // Deprecated - Remove in v2 (after removing Clickable prop in the Box components)
-  borderedClickable: "hover:s-bg-hover active:s-bg-active hover:s-border-hover active:s-border-active"
-  // Deprecated - Remove in v2 (after removing Clickable prop in the Box components)
+// 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();
+var defaultLocale = "en";
+function normalizeLocales(locales) {
+  const out = Array.isArray(locales) ? locales : [locales];
+  return [...out, defaultLocale];
+}
+function date(locales, value, format) {
+  const _locales = normalizeLocales(locales);
+  const formatter = getMemoized(
+    () => cacheKey("date", _locales, format),
+    () => new Intl.DateTimeFormat(_locales, format)
+  );
+  return formatter.format(isString(value) ? new Date(value) : value);
+}
+function number(locales, value, format) {
+  const _locales = normalizeLocales(locales);
+  const formatter = getMemoized(
+    () => cacheKey("number", _locales, format),
+    () => new Intl.NumberFormat(_locales, format)
+  );
+  return formatter.format(value);
+}
+function plural(locales, ordinal, value, _a) {
+  var _b = _a, { offset: offset2 = 0 } = _b, rules = __objRest(_b, ["offset"]);
+  var _a2, _b2;
+  const _locales = normalizeLocales(locales);
+  const plurals = ordinal ? getMemoized(
+    () => cacheKey("plural-ordinal", _locales),
+    () => new Intl.PluralRules(_locales, { type: "ordinal" })
+  ) : getMemoized(
+    () => cacheKey("plural-cardinal", _locales),
+    () => new Intl.PluralRules(_locales, { type: "cardinal" })
+  );
+  return (_b2 = (_a2 = rules[value]) != null ? _a2 : rules[plurals.select(value - offset2)]) != null ? _b2 : rules.other;
+}
+function getMemoized(getKey, construct) {
+  const key = getKey();
+  let formatter = cache.get(key);
+  if (!formatter) {
+    formatter = construct();
+    cache.set(key, formatter);
+  }
+  return formatter;
+}
+function cacheKey(type, locales, options) {
+  const localeKey = locales.join("-");
+  return `${type}-${localeKey}-${JSON.stringify(options)}`;
+}
+var UNICODE_REGEX = /\\u[a-fA-F0-9]{4}|\\x[a-fA-F0-9]{2}/g;
+var OCTOTHORPE_PH = "%__lingui_octothorpe__%";
+var getDefaultFormats = (locale, passedLocales, formats = {}) => {
+  const locales = passedLocales || locale;
+  const style = (format) => {
+    return typeof format === "object" ? format : formats[format] || { style: format };
+  };
+  const replaceOctothorpe = (value, message) => {
+    const numberFormat = Object.keys(formats).length ? style("number") : void 0;
+    const valueStr = number(locales, value, numberFormat);
+    return message.replace(new RegExp(OCTOTHORPE_PH, "g"), valueStr);
+  };
+  return {
+    plural: (value, cases) => {
+      const { offset: offset2 = 0 } = cases;
+      const message = plural(locales, false, value, cases);
+      return replaceOctothorpe(value - offset2, message);
+    },
+    selectordinal: (value, cases) => {
+      const { offset: offset2 = 0 } = cases;
+      const message = plural(locales, true, value, cases);
+      return replaceOctothorpe(value - offset2, message);
+    },
+    select: selectFormatter,
+    number: (value, format) => number(locales, value, style(format)),
+    date: (value, format) => date(locales, value, style(format))
+  };
 };
-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 s-text",
-  expandableBox: "s-surface-sunken hover:s-bg-hover active:s-bg-active 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 s-icon",
-  chevronNonBox: "ml-8",
-  chevronBox: "",
-  chevronTransform: "transform transition-transform transform-gpu ease-in-out",
-  chevronExpand: "-rotate-180",
-  chevronCollapse: "rotate-180",
-  elementsTransformChevronDownPart: "part-[w-icon-chevron-down-16-part]:transform part-[w-icon-chevron-down-16-part]:transition-transform part-[w-icon-chevron-down-16-part]:transform-gpu part-[w-icon-chevron-down-16-part]:ease-in-out",
-  elementsChevronDownExpandPart: "part-[w-icon-chevron-down-16-part]:-rotate-180",
-  elementsTransformChevronUpPart: "part-[w-icon-chevron-up-16-part]:transform part-[w-icon-chevron-up-16-part]:transition-transform part-[w-icon-chevron-up-16-part]:transform-gpu part-[w-icon-chevron-up-16-part]:ease-in-out",
-  elementsChevronUpCollapsePart: "part-[w-icon-chevron-up-16-part]:rotate-180",
-  expansion: "overflow-hidden",
-  expansionNotExpanded: "h-0 invisible",
-  button: buttonReset + " hover:underline focus-visible:underline",
-  buttonBox: "w-full text-left relative inline-flex items-center justify-between " + box.box,
-  paddingTop: "pt-0",
-  title: "flex w-full justify-between items-center",
-  titleType: "h4"
+var selectFormatter = (value, rules) => {
+  var _a;
+  return (_a = rules[value]) != null ? _a : rules.other;
 };
-var buttonDefaultStyling = "font-bold focusable justify-center transition-colors ease-in-out";
-var buttonColors = {
-  primary: "s-text-inverted bg-[--w-color-button-primary-background] hover:bg-[--w-color-button-primary-background-hover] active:bg-[--w-color-button-primary-background-active]",
-  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"
+function interpolate(translation, locale, locales) {
+  return (values = {}, formats) => {
+    const formatters = getDefaultFormats(locale, locales, formats);
+    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 (type === "plural" || type === "selectordinal" || type === "select") {
+          Object.entries(format).forEach(
+            ([key, value2]) => {
+              interpolatedFormat[key] = formatMessage(value2);
+            }
+          );
+        } else {
+          interpolatedFormat = format;
+        }
+        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.unraw)(result.trim());
+    }
+    if (isString(result))
+      return result.trim();
+    return result ? String(result) : "";
+  };
+}
+var __defProp$1 = Object.defineProperty;
+var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$1 = (obj, key, value) => {
+  __defNormalProp$1(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
 };
-var buttonTypes = {
-  primary: `border-0 rounded-8 ${buttonDefaultStyling}`,
-  secondary: `border-2 rounded-8 ${buttonDefaultStyling}`,
-  utility: `border rounded-4 ${buttonDefaultStyling}`,
-  negative: `border-0 rounded-8 ${buttonDefaultStyling}`,
-  pill: `p-4 rounded-full border-0 inline-flex items-center justify-center hover:bg-clip-padding ${buttonDefaultStyling}`,
-  link: `bg-transparent focusable ease-in-out inline active:underline hover:underline focus:underline ${buttonColors.link}`
+var EventEmitter = class {
+  constructor() {
+    __publicField$1(this, "_events", {});
+  }
+  on(event, listener) {
+    var _a2;
+    var _a;
+    (_a2 = (_a = this._events)[event]) != null ? _a2 : _a[event] = [];
+    this._events[event].push(listener);
+    return () => this.removeListener(event, listener);
+  }
+  removeListener(event, listener) {
+    const maybeListeners = this._getListeners(event);
+    if (!maybeListeners)
+      return;
+    const index = maybeListeners.indexOf(listener);
+    if (~index)
+      maybeListeners.splice(index, 1);
+  }
+  emit(event, ...args) {
+    const maybeListeners = this._getListeners(event);
+    if (!maybeListeners)
+      return;
+    maybeListeners.map((listener) => listener.apply(this, args));
+  }
+  _getListeners(event) {
+    const maybeListeners = this._events[event];
+    return Array.isArray(maybeListeners) ? maybeListeners : false;
+  }
 };
-var buttonSizes = {
-  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"
+var __defProp2 = Object.defineProperty;
+var __defNormalProp2 = (obj, key, value) => key in obj ? __defProp2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField2 = (obj, key, value) => {
+  __defNormalProp2(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
 };
-var buttonTextSizes = {
-  medium: "text-m leading-[24]",
-  xsmall: "text-xs"
+var I18n = class extends EventEmitter {
+  constructor(params) {
+    var _a;
+    super();
+    __publicField2(this, "_locale", "");
+    __publicField2(this, "_locales");
+    __publicField2(this, "_localeData", {});
+    __publicField2(this, "_messages", {});
+    __publicField2(this, "_missing");
+    __publicField2(this, "t", this._.bind(this));
+    if (params.missing != null)
+      this._missing = params.missing;
+    if (params.messages != null)
+      this.load(params.messages);
+    if (params.localeData != null)
+      this.loadLocaleData(params.localeData);
+    if (typeof params.locale === "string" || params.locales) {
+      this.activate((_a = params.locale) != null ? _a : defaultLocale, params.locales);
+    }
+  }
+  get locale() {
+    return this._locale;
+  }
+  get locales() {
+    return this._locales;
+  }
+  get messages() {
+    var _a;
+    return (_a = this._messages[this._locale]) != null ? _a : {};
+  }
+  /**
+   * @deprecated this has no effect. Please remove this from the code. Deprecated in v4
+   */
+  get localeData() {
+    var _a;
+    return (_a = this._localeData[this._locale]) != null ? _a : {};
+  }
+  _loadLocaleData(locale, localeData) {
+    const maybeLocaleData = this._localeData[locale];
+    if (!maybeLocaleData) {
+      this._localeData[locale] = localeData;
+    } else {
+      Object.assign(maybeLocaleData, localeData);
+    }
+  }
+  /**
+   * @deprecated Plurals automatically used from Intl.PluralRules you can safely remove this call. Deprecated in v4
+   */
+  // @ts-ignore deprecated, so ignore the reported error
+  loadLocaleData(localeOrAllData, localeData) {
+    if (localeData != null) {
+      this._loadLocaleData(localeOrAllData, localeData);
+    } else {
+      Object.keys(localeOrAllData).forEach(
+        (locale) => this._loadLocaleData(locale, localeOrAllData[locale])
+      );
+    }
+    this.emit("change");
+  }
+  _load(locale, messages5) {
+    const maybeMessages = this._messages[locale];
+    if (!maybeMessages) {
+      this._messages[locale] = messages5;
+    } else {
+      Object.assign(maybeMessages, messages5);
+    }
+  }
+  load(localeOrMessages, messages5) {
+    if (typeof localeOrMessages == "string" && typeof messages5 === "object") {
+      this._load(localeOrMessages, messages5);
+    } else {
+      Object.entries(localeOrMessages).forEach(
+        ([locale, messages23]) => this._load(locale, messages23)
+      );
+    }
+    this.emit("change");
+  }
+  /**
+   * @param options {@link LoadAndActivateOptions}
+   */
+  loadAndActivate({ locale, locales, messages: messages5 }) {
+    this._locale = locale;
+    this._locales = locales || void 0;
+    this._messages[this._locale] = messages5;
+    this.emit("change");
+  }
+  activate(locale, locales) {
+    if (true) {
+      if (!this._messages[locale]) {
+        console.warn(`Messages for locale "${locale}" not loaded.`);
+      }
+    }
+    this._locale = locale;
+    this._locales = locales;
+    this.emit("change");
+  }
+  _(id, values, options) {
+    let message = options == null ? void 0 : options.message;
+    if (!isString(id)) {
+      values = id.values || values;
+      message = id.message;
+      id = id.id;
+    }
+    const messageForId = this.messages[id];
+    const messageMissing = messageForId === void 0;
+    const missing = this._missing;
+    if (missing && messageMissing) {
+      return isFunction(missing) ? missing(this._locale, id) : missing;
+    }
+    if (messageMissing) {
+      this.emit("missing", { id, locale: this._locale });
+    }
+    let translation = messageForId || message || id;
+    if (true) {
+      translation = isString(translation) ? compileMessage(translation) : translation;
+    }
+    if (isString(translation) && UNICODE_REGEX.test(translation))
+      return JSON.parse(`"${translation}"`);
+    if (isString(translation))
+      return translation;
+    return interpolate(
+      translation,
+      this._locale,
+      this._locales
+    )(values, options == null ? void 0 : options.formats);
+  }
+  date(value, format) {
+    return date(this._locales || this._locale, value, format);
+  }
+  number(value, format) {
+    return number(this._locales || this._locale, value, format);
+  }
 };
-var buttonVariants = {
-  inProgress: `border-transparent animate-inprogress pointer-events-none ${buttonColors.loading}`,
-  // .button--in-progress, a.button--in-progress:visited
-  quiet: `border-0 rounded-8 ${buttonDefaultStyling}`,
-  utilityQuiet: `border-0 rounded-4 ${buttonDefaultStyling}`,
-  negativeQuiet: `border-0 rounded-8 ${buttonDefaultStyling}`,
-  isDisabled: `font-bold justify-center transition-colors ease-in-out cursor-default pointer-events-none ${buttonColors.disabled}`
-  // .button:disabled, .button--is-disabled
-};
-var button = {
-  // Buttontypes
-  secondary: `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonTypes.secondary} ${buttonColors.secondary}`,
-  // .button--secondary, .button--default, .button
-  secondaryHref: `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonTypes.secondary} ${buttonColors.secondary}`,
-  secondaryDisabled: `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonTypes.secondary} ${buttonVariants.isDisabled}`,
-  secondarySmall: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonTypes.secondary} ${buttonColors.secondary}`,
-  secondarySmallDisabled: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonTypes.secondary} ${buttonVariants.isDisabled}`,
-  secondaryQuiet: `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonColors.quiet}`,
-  secondaryQuietDisabled: `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonVariants.isDisabled}`,
-  secondarySmallQuiet: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonVariants.quiet} ${buttonColors.quiet}`,
-  secondarySmallQuietDisabled: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonVariants.quiet} ${buttonVariants.isDisabled}`,
-  secondaryLoading: `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonTypes.secondary} ${buttonVariants.inProgress}`,
-  secondarySmallLoading: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall}  ${buttonTypes.secondary} ${buttonVariants.inProgress}`,
-  secondarySmallQuietLoading: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonVariants.quiet} ${buttonVariants.inProgress}`,
-  secondaryQuietLoading: `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonVariants.inProgress}`,
-  primary: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonTypes.primary} ${buttonColors.primary}`,
-  // .button--primary, .button--cta
-  primaryDisabled: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.isDisabled} ${buttonTypes.primary}`,
-  primarySmall: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonTypes.primary} ${buttonColors.primary}`,
-  primarySmallDisabled: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.isDisabled} ${buttonTypes.primary} `,
-  primaryQuiet: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonColors.quiet}`,
-  primaryQuietDisabled: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonVariants.isDisabled}`,
-  primarySmallQuiet: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.quiet} ${buttonColors.quiet}`,
-  primarySmallQuietDisabled: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.quiet} ${buttonVariants.isDisabled}`,
-  primaryLoading: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.inProgress} ${buttonTypes.primary}`,
-  primarySmallLoading: `${buttonSizes.small} ${buttonTextSizes.xsmall}  ${buttonVariants.inProgress} ${buttonTypes.primary}`,
-  primarySmallQuietLoading: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.quiet} ${buttonVariants.inProgress} ${buttonTypes.primary}`,
-  primaryQuietLoading: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonVariants.inProgress}`,
-  utility: `${buttonSizes.utility} ${buttonTextSizes.medium} ${buttonTypes.utility} ${buttonColors.utility}`,
-  // .button--utility
-  utilityDisabled: `${buttonSizes.utility} ${buttonTextSizes.medium} ${buttonTypes.utility} ${buttonVariants.isDisabled}`,
-  utilityQuiet: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.utilityQuiet} ${buttonColors.utilityQuiet}`,
-  // .button--utility-flat
-  utilityQuietDisabled: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.utilityQuiet} ${buttonVariants.isDisabled}`,
-  utilitySmall: `${buttonSizes.smallUtility} ${buttonTextSizes.xsmall} ${buttonTypes.utility} ${buttonColors.utility}`,
-  utilitySmallDisabled: `${buttonSizes.smallUtility} ${buttonTextSizes.xsmall} ${buttonTypes.utility} ${buttonVariants.isDisabled}`,
-  utilitySmallQuiet: `${buttonSizes.smallUtility} ${buttonTextSizes.xsmall} ${buttonVariants.utilityQuiet} ${buttonColors.utilityQuiet}`,
-  utilitySmallQuietDisabled: `${buttonSizes.smallUtility} ${buttonTextSizes.xsmall} ${buttonVariants.utilityQuiet} ${buttonVariants.isDisabled}`,
-  utilityLoading: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonTypes.utility} ${buttonVariants.inProgress}`,
-  utilitySmallLoading: `${buttonSizes.smallUtility} ${buttonTextSizes.xsmall} ${buttonTypes.utility} ${buttonVariants.inProgress}`,
-  utilityQuietLoading: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.inProgress} ${buttonVariants.utilityQuiet}`,
-  utilitySmallQuietLoading: `${buttonSizes.smallUtility} ${buttonTextSizes.xsmall} ${buttonVariants.inProgress} ${buttonVariants.utilityQuiet}`,
-  negative: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonTypes.negative} ${buttonColors.destructive}`,
-  // .button--destructive
-  negativeDisabled: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonTypes.negative} ${buttonVariants.isDisabled}`,
-  negativeQuiet: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.negativeQuiet} ${buttonColors.negativeQuiet}`,
-  // .button--destructive-flat
-  negativeQuietDisabled: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.negativeQuiet}${buttonVariants.isDisabled}`,
-  negativeSmall: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonTypes.negative} ${buttonColors.destructive}`,
-  negativeSmallDisabled: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonTypes.negative} ${buttonVariants.isDisabled}`,
-  negativeSmallQuiet: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.negativeQuiet} ${buttonColors.negativeQuiet}`,
-  negativeSmallQuietDisabled: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.negativeQuiet} ${buttonVariants.isDisabled}`,
-  negativeLoading: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonTypes.negative} ${buttonVariants.inProgress}`,
-  negativeSmallLoading: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.inProgress} ${buttonTypes.negative}`,
-  negativeQuietLoading: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.negativeQuiet} ${buttonTypes.negative} ${buttonVariants.inProgress}`,
-  negativeSmallQuietLoading: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.negativeQuiet} ${buttonVariants.inProgress}`,
-  pill: `${buttonSizes.pill} ${buttonTextSizes.medium} ${buttonTypes.pill} ${buttonColors.pill}`,
-  // .button--pill
-  pillSmall: `${buttonSizes.pillSmall} ${buttonTextSizes.xsmall} ${buttonTypes.pill} ${buttonColors.pill}`,
-  pillLoading: `${buttonSizes.pill} ${buttonTextSizes.medium} ${buttonTypes.pill} ${buttonVariants.inProgress}`,
-  pillSmallLoading: `${buttonSizes.pillSmall} ${buttonTextSizes.xsmall} ${buttonTypes.pill} ${buttonVariants.inProgress}`,
-  link: `${buttonSizes.link} ${buttonTextSizes.medium} ${buttonTypes.link}`,
-  linkSmall: `${buttonSizes.link} ${buttonTextSizes.xsmall} ${buttonTypes.link}`,
-  linkAsButton: "inline-block active:no-underline hover:no-underline focus:no-underline text-center",
-  a11y: "sr-only",
-  fullWidth: "w-full max-w-full",
-  contentWidth: "max-w-max"
-};
-var modal = {
-  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",
-  transitionTitleCenter: "justify-self-center self-center",
-  transitionTitleColSpan: "col-span-2",
-  title: "py-8 sm:py-0 -mt-4 sm:-mt-8 min-h-40 sm:min-h-48 grid gap-8 sm:gap-16 grid-cols-[auto_1fr_auto] items-start px-16 sm:px-32 border-b sm:border-b-0 shrink-0",
-  titleText: "mb-0 h4 sm:h3",
-  titleButton: `${buttonTextSizes.medium} ${buttonTypes.pill} ${buttonColors.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 label = {
-  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 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 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 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",
-  label: `px-12 ${label.label} py-8! cursor-pointer focusable focusable-inset`,
-  buttonOrLink: "bg-transparent focusable",
-  buttonOrLinkStretch: "inset-0 absolute"
-};
-var attention = {
-  base: "border-2 relative flex items-start",
-  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]",
-  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`
-};
-
-// node_modules/.pnpm/@floating-ui+utils@0.2.1/node_modules/@floating-ui/utils/dist/floating-ui.utils.mjs
-var sides = ["top", "right", "bottom", "left"];
-var min = Math.min;
-var max = Math.max;
-var round = Math.round;
-var createCoords = (v) => ({
-  x: v,
-  y: v
-});
-var oppositeSideMap = {
-  left: "right",
-  right: "left",
-  bottom: "top",
-  top: "bottom"
+function setupI18n(params = {}) {
+  return new I18n(params);
+}
+var i18n = setupI18n();
+
+// node_modules/.pnpm/@floating-ui+utils@0.2.1/node_modules/@floating-ui/utils/dist/floating-ui.utils.mjs
+var sides = ["top", "right", "bottom", "left"];
+var min = Math.min;
+var max = Math.max;
+var round = Math.round;
+var createCoords = (v) => ({
+  x: v,
+  y: v
+});
+var oppositeSideMap = {
+  left: "right",
+  right: "left",
+  bottom: "top",
+  top: "bottom"
 };
 var oppositeAlignmentMap = {
   start: "end",
@@ -2633,376 +2682,292 @@ async function useRecompute(state) {
   return state;
 }
 
-// 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.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) {
-    return tokens.map((token) => mapText(token.value)).join("");
-  }
-  return tokens.map((token) => {
-    var _a;
-    if (token.type === "content") {
-      return mapText(token.value);
-    } else if (token.type === "octothorpe") {
-      return "#";
-    } else if (token.type === "argument") {
-      return [token.arg];
-    } else if (token.type === "function") {
-      const _param = (_a = token == null ? void 0 : token.param) == null ? void 0 : _a[0];
-      if (_param) {
-        return [token.arg, token.key, _param.value.trim()];
-      } else {
-        return [token.arg, token.key];
-      }
-    }
-    const offset2 = token.pluralOffset;
-    const formatProps = {};
-    token.cases.forEach((item) => {
-      formatProps[item.key.replace(/^=(.)+/, "$1")] = processTokens(
-        item.tokens,
-        mapText
-      );
-    });
-    return [
-      token.arg,
-      token.type,
-      __spreadValues({
-        offset: offset2
-      }, formatProps)
-    ];
-  });
-}
-function compileMessage(message, mapText = (v) => v) {
-  try {
-    return processTokens((0, import_parser.parse)(message), mapText);
-  } catch (e) {
-    console.error(`${e.message} 
-
-Message: ${message}`);
-    return message;
-  }
-}
-
-// 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();
-var defaultLocale = "en";
-function normalizeLocales(locales) {
-  const out = Array.isArray(locales) ? locales : [locales];
-  return [...out, defaultLocale];
-}
-function date(locales, value, format) {
-  const _locales = normalizeLocales(locales);
-  const formatter = getMemoized(
-    () => cacheKey("date", _locales, format),
-    () => new Intl.DateTimeFormat(_locales, format)
-  );
-  return formatter.format(isString(value) ? new Date(value) : value);
-}
-function number(locales, value, format) {
-  const _locales = normalizeLocales(locales);
-  const formatter = getMemoized(
-    () => cacheKey("number", _locales, format),
-    () => new Intl.NumberFormat(_locales, format)
-  );
-  return formatter.format(value);
-}
-function plural(locales, ordinal, value, _a) {
-  var _b = _a, { offset: offset2 = 0 } = _b, rules = __objRest(_b, ["offset"]);
-  var _a2, _b2;
-  const _locales = normalizeLocales(locales);
-  const plurals = ordinal ? getMemoized(
-    () => cacheKey("plural-ordinal", _locales),
-    () => new Intl.PluralRules(_locales, { type: "ordinal" })
-  ) : getMemoized(
-    () => cacheKey("plural-cardinal", _locales),
-    () => new Intl.PluralRules(_locales, { type: "cardinal" })
-  );
-  return (_b2 = (_a2 = rules[value]) != null ? _a2 : rules[plurals.select(value - offset2)]) != null ? _b2 : rules.other;
-}
-function getMemoized(getKey, construct) {
-  const key = getKey();
-  let formatter = cache.get(key);
-  if (!formatter) {
-    formatter = construct();
-    cache.set(key, formatter);
-  }
-  return formatter;
-}
-function cacheKey(type, locales, options) {
-  const localeKey = locales.join("-");
-  return `${type}-${localeKey}-${JSON.stringify(options)}`;
-}
-var UNICODE_REGEX = /\\u[a-fA-F0-9]{4}|\\x[a-fA-F0-9]{2}/g;
-var OCTOTHORPE_PH = "%__lingui_octothorpe__%";
-var getDefaultFormats = (locale, passedLocales, formats = {}) => {
-  const locales = passedLocales || locale;
-  const style = (format) => {
-    return typeof format === "object" ? format : formats[format] || { style: format };
-  };
-  const replaceOctothorpe = (value, message) => {
-    const numberFormat = Object.keys(formats).length ? style("number") : void 0;
-    const valueStr = number(locales, value, numberFormat);
-    return message.replace(new RegExp(OCTOTHORPE_PH, "g"), valueStr);
-  };
-  return {
-    plural: (value, cases) => {
-      const { offset: offset2 = 0 } = cases;
-      const message = plural(locales, false, value, cases);
-      return replaceOctothorpe(value - offset2, message);
-    },
-    selectordinal: (value, cases) => {
-      const { offset: offset2 = 0 } = cases;
-      const message = plural(locales, true, value, cases);
-      return replaceOctothorpe(value - offset2, message);
-    },
-    select: selectFormatter,
-    number: (value, format) => number(locales, value, style(format)),
-    date: (value, format) => date(locales, value, style(format))
-  };
+// node_modules/.pnpm/@warp-ds+css@1.9.6/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: "s-bg-info-subtle",
+  neutral: "s-surface-sunken",
+  bordered: "border-2 s-border s-bg",
+  infoClickable: "hover:s-bg-info-subtle-hover active:s-bg-info-subtle-active",
+  // Deprecated - Remove in v2 (after removing Clickable prop in the Box components)
+  neutralClickable: "hover:s-bg-hover active:s-bg-active",
+  // Deprecated - Remove in v2 (after removing Clickable prop in the Box components)
+  borderedClickable: "hover:s-bg-hover active:s-bg-active hover:s-border-hover active:s-border-active"
+  // Deprecated - Remove in v2 (after removing Clickable prop in the Box components)
 };
-var selectFormatter = (value, rules) => {
-  var _a;
-  return (_a = rules[value]) != null ? _a : rules.other;
+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 s-text",
+  expandableBox: "s-surface-sunken hover:s-bg-hover active:s-bg-active 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 s-icon",
+  chevronNonBox: "ml-8",
+  chevronBox: "",
+  chevronTransform: "transform transition-transform transform-gpu ease-in-out",
+  chevronExpand: "-rotate-180",
+  chevronCollapse: "rotate-180",
+  elementsTransformChevronDownPart: "part-[w-icon-chevron-down-16-part]:transform part-[w-icon-chevron-down-16-part]:transition-transform part-[w-icon-chevron-down-16-part]:transform-gpu part-[w-icon-chevron-down-16-part]:ease-in-out",
+  elementsChevronDownExpandPart: "part-[w-icon-chevron-down-16-part]:-rotate-180",
+  elementsTransformChevronUpPart: "part-[w-icon-chevron-up-16-part]:transform part-[w-icon-chevron-up-16-part]:transition-transform part-[w-icon-chevron-up-16-part]:transform-gpu part-[w-icon-chevron-up-16-part]:ease-in-out",
+  elementsChevronUpCollapsePart: "part-[w-icon-chevron-up-16-part]:rotate-180",
+  expansion: "overflow-hidden",
+  expansionNotExpanded: "h-0 invisible",
+  button: buttonReset + " hover:underline focus-visible:underline",
+  buttonBox: "w-full text-left relative inline-flex items-center justify-between " + box.box,
+  paddingTop: "pt-0",
+  title: "flex w-full justify-between items-center",
+  titleType: "h4"
 };
-function interpolate(translation, locale, locales) {
-  return (values = {}, formats) => {
-    const formatters = getDefaultFormats(locale, locales, formats);
-    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 (type === "plural" || type === "selectordinal" || type === "select") {
-          Object.entries(format).forEach(
-            ([key, value2]) => {
-              interpolatedFormat[key] = formatMessage(value2);
-            }
-          );
-        } else {
-          interpolatedFormat = format;
-        }
-        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.unraw)(result.trim());
-    }
-    if (isString(result))
-      return result.trim();
-    return result ? String(result) : "";
-  };
-}
-var __defProp$1 = Object.defineProperty;
-var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField$1 = (obj, key, value) => {
-  __defNormalProp$1(obj, typeof key !== "symbol" ? key + "" : key, value);
-  return value;
+var buttonDefaultStyling = "font-bold focusable justify-center transition-colors ease-in-out";
+var buttonColors = {
+  primary: "s-text-inverted bg-[--w-color-button-primary-background] hover:bg-[--w-color-button-primary-background-hover] active:bg-[--w-color-button-primary-background-active]",
+  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}`,
+  secondary: `border-2 rounded-8 ${buttonDefaultStyling}`,
+  utility: `border rounded-4 ${buttonDefaultStyling}`,
+  negative: `border-0 rounded-8 ${buttonDefaultStyling}`,
+  pill: `p-4 rounded-full border-0 inline-flex items-center justify-center hover:bg-clip-padding ${buttonDefaultStyling}`,
+  link: `bg-transparent focusable ease-in-out inline active:underline hover:underline focus:underline ${buttonColors.link}`
+};
+var buttonSizes = {
+  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"
+};
+var buttonTextSizes = {
+  medium: "text-m leading-[24]",
+  xsmall: "text-xs"
+};
+var buttonVariants = {
+  inProgress: `border-transparent animate-inprogress pointer-events-none ${buttonColors.loading}`,
+  // .button--in-progress, a.button--in-progress:visited
+  quiet: `border-0 rounded-8 ${buttonDefaultStyling}`,
+  utilityQuiet: `border-0 rounded-4 ${buttonDefaultStyling}`,
+  negativeQuiet: `border-0 rounded-8 ${buttonDefaultStyling}`,
+  isDisabled: `font-bold justify-center transition-colors ease-in-out cursor-default pointer-events-none ${buttonColors.disabled}`
+  // .button:disabled, .button--is-disabled
+};
+var button = {
+  // Buttontypes
+  secondary: `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonTypes.secondary} ${buttonColors.secondary}`,
+  // .button--secondary, .button--default, .button
+  secondaryHref: `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonTypes.secondary} ${buttonColors.secondary}`,
+  secondaryDisabled: `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonTypes.secondary} ${buttonVariants.isDisabled}`,
+  secondarySmall: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonTypes.secondary} ${buttonColors.secondary}`,
+  secondarySmallDisabled: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonTypes.secondary} ${buttonVariants.isDisabled}`,
+  secondaryQuiet: `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonColors.quiet}`,
+  secondaryQuietDisabled: `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonVariants.isDisabled}`,
+  secondarySmallQuiet: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonVariants.quiet} ${buttonColors.quiet}`,
+  secondarySmallQuietDisabled: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonVariants.quiet} ${buttonVariants.isDisabled}`,
+  secondaryLoading: `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonTypes.secondary} ${buttonVariants.inProgress}`,
+  secondarySmallLoading: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall}  ${buttonTypes.secondary} ${buttonVariants.inProgress}`,
+  secondarySmallQuietLoading: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonVariants.quiet} ${buttonVariants.inProgress}`,
+  secondaryQuietLoading: `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonVariants.inProgress}`,
+  primary: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonTypes.primary} ${buttonColors.primary}`,
+  // .button--primary, .button--cta
+  primaryDisabled: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.isDisabled} ${buttonTypes.primary}`,
+  primarySmall: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonTypes.primary} ${buttonColors.primary}`,
+  primarySmallDisabled: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.isDisabled} ${buttonTypes.primary} `,
+  primaryQuiet: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonColors.quiet}`,
+  primaryQuietDisabled: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonVariants.isDisabled}`,
+  primarySmallQuiet: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.quiet} ${buttonColors.quiet}`,
+  primarySmallQuietDisabled: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.quiet} ${buttonVariants.isDisabled}`,
+  primaryLoading: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.inProgress} ${buttonTypes.primary}`,
+  primarySmallLoading: `${buttonSizes.small} ${buttonTextSizes.xsmall}  ${buttonVariants.inProgress} ${buttonTypes.primary}`,
+  primarySmallQuietLoading: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.quiet} ${buttonVariants.inProgress} ${buttonTypes.primary}`,
+  primaryQuietLoading: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonVariants.inProgress}`,
+  utility: `${buttonSizes.utility} ${buttonTextSizes.medium} ${buttonTypes.utility} ${buttonColors.utility}`,
+  // .button--utility
+  utilityDisabled: `${buttonSizes.utility} ${buttonTextSizes.medium} ${buttonTypes.utility} ${buttonVariants.isDisabled}`,
+  utilityQuiet: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.utilityQuiet} ${buttonColors.utilityQuiet}`,
+  // .button--utility-flat
+  utilityQuietDisabled: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.utilityQuiet} ${buttonVariants.isDisabled}`,
+  utilitySmall: `${buttonSizes.smallUtility} ${buttonTextSizes.xsmall} ${buttonTypes.utility} ${buttonColors.utility}`,
+  utilitySmallDisabled: `${buttonSizes.smallUtility} ${buttonTextSizes.xsmall} ${buttonTypes.utility} ${buttonVariants.isDisabled}`,
+  utilitySmallQuiet: `${buttonSizes.smallUtility} ${buttonTextSizes.xsmall} ${buttonVariants.utilityQuiet} ${buttonColors.utilityQuiet}`,
+  utilitySmallQuietDisabled: `${buttonSizes.smallUtility} ${buttonTextSizes.xsmall} ${buttonVariants.utilityQuiet} ${buttonVariants.isDisabled}`,
+  utilityLoading: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonTypes.utility} ${buttonVariants.inProgress}`,
+  utilitySmallLoading: `${buttonSizes.smallUtility} ${buttonTextSizes.xsmall} ${buttonTypes.utility} ${buttonVariants.inProgress}`,
+  utilityQuietLoading: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.inProgress} ${buttonVariants.utilityQuiet}`,
+  utilitySmallQuietLoading: `${buttonSizes.smallUtility} ${buttonTextSizes.xsmall} ${buttonVariants.inProgress} ${buttonVariants.utilityQuiet}`,
+  negative: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonTypes.negative} ${buttonColors.destructive}`,
+  // .button--destructive
+  negativeDisabled: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonTypes.negative} ${buttonVariants.isDisabled}`,
+  negativeQuiet: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.negativeQuiet} ${buttonColors.negativeQuiet}`,
+  // .button--destructive-flat
+  negativeQuietDisabled: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.negativeQuiet}${buttonVariants.isDisabled}`,
+  negativeSmall: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonTypes.negative} ${buttonColors.destructive}`,
+  negativeSmallDisabled: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonTypes.negative} ${buttonVariants.isDisabled}`,
+  negativeSmallQuiet: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.negativeQuiet} ${buttonColors.negativeQuiet}`,
+  negativeSmallQuietDisabled: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.negativeQuiet} ${buttonVariants.isDisabled}`,
+  negativeLoading: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonTypes.negative} ${buttonVariants.inProgress}`,
+  negativeSmallLoading: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.inProgress} ${buttonTypes.negative}`,
+  negativeQuietLoading: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.negativeQuiet} ${buttonTypes.negative} ${buttonVariants.inProgress}`,
+  negativeSmallQuietLoading: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.negativeQuiet} ${buttonVariants.inProgress}`,
+  pill: `${buttonSizes.pill} ${buttonTextSizes.medium} ${buttonTypes.pill} ${buttonColors.pill}`,
+  // .button--pill
+  pillSmall: `${buttonSizes.pillSmall} ${buttonTextSizes.xsmall} ${buttonTypes.pill} ${buttonColors.pill}`,
+  pillLoading: `${buttonSizes.pill} ${buttonTextSizes.medium} ${buttonTypes.pill} ${buttonVariants.inProgress}`,
+  pillSmallLoading: `${buttonSizes.pillSmall} ${buttonTextSizes.xsmall} ${buttonTypes.pill} ${buttonVariants.inProgress}`,
+  link: `${buttonSizes.link} ${buttonTextSizes.medium} ${buttonTypes.link}`,
+  linkSmall: `${buttonSizes.link} ${buttonTextSizes.xsmall} ${buttonTypes.link}`,
+  linkAsButton: "inline-block active:no-underline hover:no-underline focus:no-underline text-center",
+  a11y: "sr-only",
+  fullWidth: "w-full max-w-full",
+  contentWidth: "max-w-max"
+};
+var modal = {
+  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",
+  transitionTitleCenter: "justify-self-center self-center",
+  transitionTitleColSpan: "col-span-2",
+  title: "py-8 sm:py-0 -mt-4 sm:-mt-8 min-h-40 sm:min-h-48 grid gap-8 sm:gap-16 grid-cols-[auto_1fr_auto] items-start px-16 sm:px-32 border-b sm:border-b-0 shrink-0",
+  titleText: "mb-0 h4 sm:h3",
+  titleButton: `${buttonTextSizes.medium} ${buttonTypes.pill} ${buttonColors.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 label = {
+  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 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 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 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 EventEmitter = class {
-  constructor() {
-    __publicField$1(this, "_events", {});
-  }
-  on(event, listener) {
-    var _a2;
-    var _a;
-    (_a2 = (_a = this._events)[event]) != null ? _a2 : _a[event] = [];
-    this._events[event].push(listener);
-    return () => this.removeListener(event, listener);
-  }
-  removeListener(event, listener) {
-    const maybeListeners = this._getListeners(event);
-    if (!maybeListeners)
-      return;
-    const index = maybeListeners.indexOf(listener);
-    if (~index)
-      maybeListeners.splice(index, 1);
-  }
-  emit(event, ...args) {
-    const maybeListeners = this._getListeners(event);
-    if (!maybeListeners)
-      return;
-    maybeListeners.map((listener) => listener.apply(this, args));
-  }
-  _getListeners(event) {
-    const maybeListeners = this._events[event];
-    return Array.isArray(maybeListeners) ? maybeListeners : false;
-  }
+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 __defProp2 = Object.defineProperty;
-var __defNormalProp2 = (obj, key, value) => key in obj ? __defProp2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField2 = (obj, key, value) => {
-  __defNormalProp2(obj, typeof key !== "symbol" ? key + "" : key, value);
-  return value;
+var clickable = {
+  toggle: "absolute inset-0 h-full w-full appearance-none cursor-pointer focusable focusable-inset",
+  label: `px-12 ${label.label} py-8! cursor-pointer focusable focusable-inset`,
+  buttonOrLink: "bg-transparent focusable",
+  buttonOrLinkStretch: "inset-0 absolute"
 };
-var I18n = class extends EventEmitter {
-  constructor(params) {
-    var _a;
-    super();
-    __publicField2(this, "_locale", "");
-    __publicField2(this, "_locales");
-    __publicField2(this, "_localeData", {});
-    __publicField2(this, "_messages", {});
-    __publicField2(this, "_missing");
-    __publicField2(this, "t", this._.bind(this));
-    if (params.missing != null)
-      this._missing = params.missing;
-    if (params.messages != null)
-      this.load(params.messages);
-    if (params.localeData != null)
-      this.loadLocaleData(params.localeData);
-    if (typeof params.locale === "string" || params.locales) {
-      this.activate((_a = params.locale) != null ? _a : defaultLocale, params.locales);
-    }
-  }
-  get locale() {
-    return this._locale;
-  }
-  get locales() {
-    return this._locales;
-  }
-  get messages() {
-    var _a;
-    return (_a = this._messages[this._locale]) != null ? _a : {};
-  }
-  /**
-   * @deprecated this has no effect. Please remove this from the code. Deprecated in v4
-   */
-  get localeData() {
-    var _a;
-    return (_a = this._localeData[this._locale]) != null ? _a : {};
-  }
-  _loadLocaleData(locale, localeData) {
-    const maybeLocaleData = this._localeData[locale];
-    if (!maybeLocaleData) {
-      this._localeData[locale] = localeData;
-    } else {
-      Object.assign(maybeLocaleData, localeData);
-    }
-  }
-  /**
-   * @deprecated Plurals automatically used from Intl.PluralRules you can safely remove this call. Deprecated in v4
-   */
-  // @ts-ignore deprecated, so ignore the reported error
-  loadLocaleData(localeOrAllData, localeData) {
-    if (localeData != null) {
-      this._loadLocaleData(localeOrAllData, localeData);
-    } else {
-      Object.keys(localeOrAllData).forEach(
-        (locale) => this._loadLocaleData(locale, localeOrAllData[locale])
-      );
-    }
-    this.emit("change");
-  }
-  _load(locale, messages5) {
-    const maybeMessages = this._messages[locale];
-    if (!maybeMessages) {
-      this._messages[locale] = messages5;
-    } else {
-      Object.assign(maybeMessages, messages5);
-    }
-  }
-  load(localeOrMessages, messages5) {
-    if (typeof localeOrMessages == "string" && typeof messages5 === "object") {
-      this._load(localeOrMessages, messages5);
-    } else {
-      Object.entries(localeOrMessages).forEach(
-        ([locale, messages23]) => this._load(locale, messages23)
-      );
-    }
-    this.emit("change");
-  }
-  /**
-   * @param options {@link LoadAndActivateOptions}
-   */
-  loadAndActivate({ locale, locales, messages: messages5 }) {
-    this._locale = locale;
-    this._locales = locales || void 0;
-    this._messages[this._locale] = messages5;
-    this.emit("change");
-  }
-  activate(locale, locales) {
-    if (true) {
-      if (!this._messages[locale]) {
-        console.warn(`Messages for locale "${locale}" not loaded.`);
-      }
-    }
-    this._locale = locale;
-    this._locales = locales;
-    this.emit("change");
-  }
-  _(id, values, options) {
-    let message = options == null ? void 0 : options.message;
-    if (!isString(id)) {
-      values = id.values || values;
-      message = id.message;
-      id = id.id;
-    }
-    const messageForId = this.messages[id];
-    const messageMissing = messageForId === void 0;
-    const missing = this._missing;
-    if (missing && messageMissing) {
-      return isFunction(missing) ? missing(this._locale, id) : missing;
-    }
-    if (messageMissing) {
-      this.emit("missing", { id, locale: this._locale });
-    }
-    let translation = messageForId || message || id;
-    if (true) {
-      translation = isString(translation) ? compileMessage(translation) : translation;
-    }
-    if (isString(translation) && UNICODE_REGEX.test(translation))
-      return JSON.parse(`"${translation}"`);
-    if (isString(translation))
-      return translation;
-    return interpolate(
-      translation,
-      this._locale,
-      this._locales
-    )(values, options == null ? void 0 : options.formats);
-  }
-  date(value, format) {
-    return date(this._locales || this._locale, value, format);
-  }
-  number(value, format) {
-    return number(this._locales || this._locale, value, format);
-  }
+var attention = {
+  base: "border-2 relative flex items-start",
+  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]",
+  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`
 };
-function setupI18n(params = {}) {
-  return new I18n(params);
-}
-var i18n = setupI18n();
-
-// packages/attention/locales/en/messages.mjs
-var messages = 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"}');
-
-// packages/attention/locales/nb/messages.mjs
-var messages2 = 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"}');
 
-// packages/attention/locales/fi/messages.mjs
-var messages3 = 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"}');
+// packages/attention/index.js
+import WarpElement from "@warp-ds/elements-core";
+import { ifDefined } from "lit/directives/if-defined.js";
 
 // packages/i18n.ts
 var supportedLocales = ["en", "nb", "fi"];
@@ -3039,6 +3004,43 @@ var activateI18n = (enMessages, nbMessages, fiMessages) => {
   i18n.activate(locale);
 };
 
+// packages/utils/index.js
+import { classMap } from "lit/directives/class-map.js";
+var camelCaseToKebabCase = (str) => str.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+function kebabCaseAttributes(constructor) {
+  return class extends constructor {
+    static createProperty(name, options) {
+      let customOptions = options;
+      if (typeof (options == null ? void 0 : options.attribute) === "undefined" || (options == null ? void 0 : options.attribute) === true) {
+        customOptions = Object.assign({}, options, {
+          attribute: camelCaseToKebabCase(name.toString())
+        });
+      }
+      super.createProperty(name, customOptions);
+    }
+  };
+}
+function classes(defn) {
+  const classes2 = [];
+  for (const [key, value] of Object.entries(defn)) {
+    if (value)
+      classes2.push(key);
+  }
+  return classes2.join(" ");
+}
+function generateRandomId() {
+  return `m${Math.random().toString(36).slice(2)}`;
+}
+
+// packages/attention/locales/en/messages.mjs
+var messages = 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"}');
+
+// packages/attention/locales/fi/messages.mjs
+var messages2 = 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"}');
+
+// packages/attention/locales/nb/messages.mjs
+var messages3 = 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"}');
+
 // node_modules/.pnpm/@warp-ds+icons@2.0.0/node_modules/@warp-ds/icons/dist/elements/close-16.js
 import { LitElement } from "lit";
 import { unsafeStatic, html } from "lit/static-html.js";
@@ -3134,7 +3136,7 @@ if (!customElements.get("w-icon-close-16")) {
 var WarpAttention = class extends kebabCaseAttributes(WarpElement) {
   constructor() {
     super();
-    activateI18n(messages, messages2, messages3);
+    activateI18n(messages, messages3, messages2);
     this.handleDone = this.handleDone.bind(this);
     this.show = false;
     this.placement = "bottom";
@@ -3158,8 +3160,10 @@ var WarpAttention = class extends kebabCaseAttributes(WarpElement) {
 ${JSON.stringify(Object.keys(opposites))}`);
     }
     if (this.fallbackPlacements && !this.fallbackPlacements.every((fallbackPlacement) => directions.includes(fallbackPlacement))) {
-      throw new Error(`Invalid "fallbackPlacements" attribute. Set its value to an array with one or more of the following:
-${JSON.stringify(directions)}`);
+      throw new Error(
+        `Invalid "fallbackPlacements" attribute. Set its value to an array with one or more of the following:
+${JSON.stringify(directions)}`
+      );
     }
     setTimeout(() => this.requestUpdate(), 0);
     if (!this.callout) {
@@ -3213,7 +3217,7 @@ ${JSON.stringify(directions)}`);
     });
   }
   get _arrowHtml() {
-    return this.noArrow ? "" : html2`<div id="arrow" role="img" class="${this._arrowClasses}" />`;
+    return this.noArrow ? "" : html2`<div id="arrow" role="img" class="${this._arrowClasses}"></div>`;
   }
   get _activeVariantClasses() {
     const variantProps = {
@@ -3256,7 +3260,7 @@ ${JSON.stringify(directions)}`);
   get _closeBtnHtml() {
     return html2`
       <button aria-label="${this._ariaClose}" @click="${this.close}" @keydown=${this.keypressed} class="${attention.closeBtn}">
-        <w-icon-close-16 />
+        <w-icon-close-16></w-icon-close-16>
       </button>
     `;
   }
@@ -3391,7 +3395,11 @@ ${JSON.stringify(directions)}`);
         ${this.placement === "right-start" || this.placement === "right" || this.placement === "right-end" || this.placement === "bottom-start" || this.placement === "bottom" || this.placement === "bottom-end" ? html2`
               <slot name="target"></slot>
 
-              <div id="attention" role="${this.tooltip ? "tooltip" : "img"}" aria-label="${this.defaultAriaLabel()}" class="${this._wrapperClasses}">
+              <div
+                id="attention"
+                role="${this.tooltip ? "tooltip" : "img"}"
+                aria-label="${this.defaultAriaLabel()}"
+                class="${this._wrapperClasses}">
                 ${this._arrowHtml}
                 <slot name="message"></slot>
                 ${this.canClose ? this._closeBtnHtml : nothing}