@warp-ds/elements 1.3.1 → 1.3.2

package/dist/packages/pill/index.js

@@ -1028,10 +1028,10 @@ var require_parser = __commonJS({
 import { LitElement } from "lit";
 import { unsafeStatic, html } from "lit/static-html.js";
 
-// 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) {
@@ -1081,7 +1081,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();
@@ -1133,6 +1133,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) => {
@@ -1141,7 +1142,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) => {
@@ -1156,43 +1157,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();
@@ -1543,24 +1554,24 @@ var messages5 = JSON.parse('{"pill.aria.openFilter":"Avaa suodatin","pill.aria.r
 // packages/pill/locales/nb/messages.mjs
 var messages6 = JSON.parse('{"pill.aria.openFilter":"\xC5pne filter","pill.aria.removeFilter":["Fjern filter ",["label"]]}');
 
-// 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 pill = {
   pill: "flex items-center",
   button: "inline-flex items-center focusable text-xs transition-all",
-  suggestion: "i-bg-$color-pill-suggestion-background hover:i-bg-$color-pill-suggestion-background-hover active:i-bg-$color-pill-suggestion-background-active i-text-$color-pill-suggestion-text font-bold",
-  filter: "i-bg-$color-pill-filter-background hover:i-bg-$color-pill-filter-background-hover active:i-bg-$color-pill-filter-background-active i-text-$color-pill-filter-text",
+  suggestion: "bg-[--w-color-pill-suggestion-background] hover:bg-[--w-color-pill-suggestion-background-hover] active:bg-[--w-color-pill-suggestion-background-active] s-text font-bold",
+  filter: "s-bg-primary hover:s-bg-primary-hover active:s-bg-primary-active s-text-inverted",
   label: "pl-12 py-8 rounded-l-full",
   labelWithoutClose: "pr-12 rounded-r-full",
   labelWithClose: "pr-2",
@@ -1570,10 +1581,11 @@ var pill = {
 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",
@@ -1593,17 +1605,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}`,
@@ -1707,10 +1719,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",
@@ -1725,22 +1737,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",
@@ -1750,19 +1819,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`