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

package/dist/packages/attention/index.js

@@ -9,18 +9,18 @@ var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a3, b3) => {
-  for (var prop in b3 || (b3 = {}))
-    if (__hasOwnProp.call(b3, prop))
-      __defNormalProp(a3, prop, b3[prop]);
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
   if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b3)) {
-      if (__propIsEnum.call(b3, prop))
-        __defNormalProp(a3, prop, b3[prop]);
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
     }
-  return a3;
+  return a;
 };
-var __spreadProps = (a3, b3) => __defProps(a3, __getOwnPropDescs(b3));
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 var __objRest = (source, exclude) => {
   var target = {};
   for (var prop in source)
@@ -211,27 +211,27 @@ var require_moo = __commonJS({
       var hasOwnProperty = Object.prototype.hasOwnProperty;
       var toString = Object.prototype.toString;
       var hasSticky = typeof new RegExp().sticky === "boolean";
-      function isRegExp(o3) {
-        return o3 && toString.call(o3) === "[object RegExp]";
+      function isRegExp(o) {
+        return o && toString.call(o) === "[object RegExp]";
       }
-      function isObject(o3) {
-        return o3 && typeof o3 === "object" && !isRegExp(o3) && !Array.isArray(o3);
+      function isObject(o) {
+        return o && typeof o === "object" && !isRegExp(o) && !Array.isArray(o);
       }
-      function reEscape(s3) {
-        return s3.replace(/[-\/\\^$*+?.()|[\]{}]/g, "\\$&");
+      function reEscape(s) {
+        return s.replace(/[-\/\\^$*+?.()|[\]{}]/g, "\\$&");
       }
-      function reGroups(s3) {
-        var re = new RegExp("|" + s3);
+      function reGroups(s) {
+        var re = new RegExp("|" + s);
         return re.exec("").length - 1;
       }
-      function reCapture(s3) {
-        return "(" + s3 + ")";
+      function reCapture(s) {
+        return "(" + s + ")";
       }
       function reUnion(regexps) {
         if (!regexps.length)
           return "(?!)";
-        var source = regexps.map(function(s3) {
-          return "(?:" + s3 + ")";
+        var source = regexps.map(function(s) {
+          return "(?:" + s + ")";
         }).join("|");
         return "(?:" + source + ")";
       }
@@ -252,11 +252,11 @@ var require_moo = __commonJS({
           throw new Error("Not a pattern: " + obj);
         }
       }
-      function pad(s3, length) {
-        if (s3.length > length) {
-          return s3;
+      function pad(s, length) {
+        if (s.length > length) {
+          return s;
         }
-        return Array(length - s3.length + 1).join(" ") + s3;
+        return Array(length - s.length + 1).join(" ") + s;
       }
       function lastNLines(string, numLines) {
         var position = string.length;
@@ -282,8 +282,8 @@ var require_moo = __commonJS({
       function objectToRules(object) {
         var keys = Object.getOwnPropertyNames(object);
         var result = [];
-        for (var i3 = 0; i3 < keys.length; i3++) {
-          var key = keys[i3];
+        for (var i = 0; i < keys.length; i++) {
+          var key = keys[i];
           var thing = object[key];
           var rules = [].concat(thing);
           if (key === "include") {
@@ -310,8 +310,8 @@ var require_moo = __commonJS({
       }
       function arrayToRules(array) {
         var result = [];
-        for (var i3 = 0; i3 < array.length; i3++) {
-          var obj = array[i3];
+        for (var i = 0; i < array.length; i++) {
+          var obj = array[i];
           if (obj.include) {
             var include = [].concat(obj.include);
             for (var j = 0; j < include.length; j++) {
@@ -355,8 +355,8 @@ var require_moo = __commonJS({
         }
         var match = options.match;
         options.match = Array.isArray(match) ? match : match ? [match] : [];
-        options.match.sort(function(a3, b3) {
-          return isRegExp(a3) && isRegExp(b3) ? 0 : isRegExp(b3) ? -1 : isRegExp(a3) ? 1 : b3.length - a3.length;
+        options.match.sort(function(a, b) {
+          return isRegExp(a) && isRegExp(b) ? 0 : isRegExp(b) ? -1 : isRegExp(a) ? 1 : b.length - a.length;
         });
         return options;
       }
@@ -371,13 +371,13 @@ var require_moo = __commonJS({
         var unicodeFlag = null;
         var groups = [];
         var parts = [];
-        for (var i3 = 0; i3 < rules.length; i3++) {
-          if (rules[i3].fallback) {
+        for (var i = 0; i < rules.length; i++) {
+          if (rules[i].fallback) {
             fastAllowed = false;
           }
         }
-        for (var i3 = 0; i3 < rules.length; i3++) {
-          var options = rules[i3];
+        for (var i = 0; i < rules.length; i++) {
+          var options = rules[i];
           if (options.include) {
             throw new Error("Inheritance is not allowed in stateless lexers");
           }
@@ -448,13 +448,13 @@ var require_moo = __commonJS({
         var result = compileRules(toRules(rules));
         return new Lexer({ start: result }, "start");
       }
-      function checkStateGroup(g3, name, map) {
-        var state = g3 && (g3.push || g3.next);
+      function checkStateGroup(g, name, map) {
+        var state = g && (g.push || g.next);
         if (state && !map[state]) {
-          throw new Error("Missing state '" + state + "' (in token '" + g3.defaultType + "' of state '" + name + "')");
+          throw new Error("Missing state '" + state + "' (in token '" + g.defaultType + "' of state '" + name + "')");
         }
-        if (g3 && g3.pop && +g3.pop !== 1) {
-          throw new Error("pop must be 1 (in token '" + g3.defaultType + "' of state '" + name + "')");
+        if (g && g.pop && +g.pop !== 1) {
+          throw new Error("pop must be 1 (in token '" + g.defaultType + "' of state '" + name + "')");
         }
       }
       function compileStates(states, start) {
@@ -464,12 +464,12 @@ var require_moo = __commonJS({
         if (!start)
           start = keys[0];
         var ruleMap = /* @__PURE__ */ Object.create(null);
-        for (var i3 = 0; i3 < keys.length; i3++) {
-          var key = keys[i3];
+        for (var i = 0; i < keys.length; i++) {
+          var key = keys[i];
           ruleMap[key] = toRules(states[key]).concat(all);
         }
-        for (var i3 = 0; i3 < keys.length; i3++) {
-          var key = keys[i3];
+        for (var i = 0; i < keys.length; i++) {
+          var key = keys[i];
           var rules = ruleMap[key];
           var included = /* @__PURE__ */ Object.create(null);
           for (var j = 0; j < rules.length; j++) {
@@ -483,8 +483,8 @@ var require_moo = __commonJS({
               if (!newRules) {
                 throw new Error("Cannot include nonexistent state '" + rule.include + "' (in state '" + key + "')");
               }
-              for (var k2 = 0; k2 < newRules.length; k2++) {
-                var newRule = newRules[k2];
+              for (var k = 0; k < newRules.length; k++) {
+                var newRule = newRules[k];
                 if (rules.indexOf(newRule) !== -1)
                   continue;
                 splice.push(newRule);
@@ -495,12 +495,12 @@ var require_moo = __commonJS({
           }
         }
         var map = /* @__PURE__ */ Object.create(null);
-        for (var i3 = 0; i3 < keys.length; i3++) {
-          var key = keys[i3];
+        for (var i = 0; i < keys.length; i++) {
+          var key = keys[i];
           map[key] = compileRules(ruleMap[key], true);
         }
-        for (var i3 = 0; i3 < keys.length; i3++) {
-          var name = keys[i3];
+        for (var i = 0; i < keys.length; i++) {
+          var name = keys[i];
           var state = map[name];
           var groups = state.groups;
           for (var j = 0; j < groups.length; j++) {
@@ -517,8 +517,8 @@ var require_moo = __commonJS({
         var isMap = typeof Map !== "undefined";
         var reverseMap = isMap ? /* @__PURE__ */ new Map() : /* @__PURE__ */ Object.create(null);
         var types = Object.getOwnPropertyNames(map);
-        for (var i3 = 0; i3 < types.length; i3++) {
-          var tokenType = types[i3];
+        for (var i = 0; i < types.length; i++) {
+          var tokenType = types[i];
           var item = map[tokenType];
           var keywordList = Array.isArray(item) ? item : [item];
           keywordList.forEach(function(keyword) {
@@ -532,8 +532,8 @@ var require_moo = __commonJS({
             }
           });
         }
-        return function(k2) {
-          return isMap ? reverseMap.get(k2) : reverseMap[k2];
+        return function(k) {
+          return isMap ? reverseMap.get(k) : reverseMap[k];
         };
       }
       var Lexer = function(states, state) {
@@ -594,9 +594,9 @@ var require_moo = __commonJS({
       };
       Lexer.prototype._getGroup = function(match) {
         var groupCount = this.groups.length;
-        for (var i3 = 0; i3 < groupCount; i3++) {
-          if (match[i3 + 1] !== void 0) {
-            return this.groups[i3];
+        for (var i = 0; i < groupCount; i++) {
+          if (match[i + 1] !== void 0) {
+            return this.groups[i];
           }
         }
         throw new Error("Cannot find token type for matched text");
@@ -636,7 +636,7 @@ var require_moo = __commonJS({
         }
         return this._token(group, text, index);
       };
-      Lexer.prototype._token = function(group, text, offset) {
+      Lexer.prototype._token = function(group, text, offset2) {
         var lineBreaks = 0;
         if (group.lineBreaks) {
           var matchNL = /\n/g;
@@ -655,18 +655,18 @@ var require_moo = __commonJS({
           value: typeof group.value === "function" ? group.value(text) : text,
           text,
           toString: tokenToString,
-          offset,
+          offset: offset2,
           lineBreaks,
           line: this.line,
           col: this.col
         };
-        var size = text.length;
-        this.index += size;
+        var size2 = text.length;
+        this.index += size2;
         this.line += lineBreaks;
         if (lineBreaks !== 0) {
-          this.col = size - nl + 1;
+          this.col = size2 - nl + 1;
         } else {
-          this.col += size;
+          this.col += size2;
         }
         if (group.shouldThrow) {
           var err = new Error(this.formatError(token, "invalid syntax"));
@@ -717,9 +717,9 @@ var require_moo = __commonJS({
         var errorLines = [];
         errorLines.push(message + " at line " + token.line + " col " + token.col + ":");
         errorLines.push("");
-        for (var i3 = 0; i3 < displayedLines.length; i3++) {
-          var line = displayedLines[i3];
-          var lineNo = firstDisplayedLine + i3;
+        for (var i = 0; i < displayedLines.length; i++) {
+          var line = displayedLines[i];
+          var lineNo = firstDisplayedLine + i;
           errorLines.push(pad(String(lineNo), lastLineDigits) + "  " + line);
           if (lineNo === token.line) {
             errorLines.push(pad("", lastLineDigits + token.col + 1) + "^");
@@ -829,12 +829,12 @@ var require_parser = __commonJS({
     function strictArgStyleParam(lt, param) {
       let value = "";
       let text = "";
-      for (const p3 of param) {
-        const pText = p3.ctx.text;
+      for (const p of param) {
+        const pText = p.ctx.text;
         text += pText;
-        switch (p3.type) {
+        switch (p.type) {
           case "content":
-            value += p3.value;
+            value += p.value;
             break;
           case "argument":
           case "function":
@@ -845,12 +845,12 @@ var require_parser = __commonJS({
             throw new ParseError(lt, `Unsupported part in strict mode function arg style: ${pText}`);
         }
       }
-      const c3 = {
+      const c = {
         type: "content",
         value: value.trim(),
         ctx: Object.assign({}, param[0].ctx, { text })
       };
-      return [c3];
+      return [c];
     }
     var strictArgTypes = [
       "number",
@@ -1060,24 +1060,27 @@ function generateRandomId() {
   return `m${Math.random().toString(36).slice(2)}`;
 }
 
-// node_modules/.pnpm/@warp-ds+css@1.9.1/node_modules/@warp-ds/css/component-classes/index.js
+// node_modules/.pnpm/@warp-ds+css@1.9.3/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: "bg-[--w-s-color-surface-sunken]",
+  neutral: "s-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"
+  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 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-bg-subtle hover:s-bg-subtle-hover py-0 px-0 " + box.box,
+  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",
@@ -1118,7 +1121,7 @@ var buttonTypes = {
   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 ${buttonColors.link}`
+  link: `bg-transparent focusable ease-in-out inline active:underline hover:underline focus:underline ${buttonColors.link}`
 };
 var buttonSizes = {
   xsmall: "py-6 px-16",
@@ -1208,7 +1211,7 @@ var button = {
   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 hover:no-underline text-center",
+  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"
@@ -1340,417 +1343,1401 @@ var attention = {
   closeBtn: `${buttonTextSizes.medium} ${buttonTypes.pill} ${buttonColors.pill} justify-self-end -mr-8 ml-8`
 };
 
-// node_modules/.pnpm/@floating-ui+core@0.7.3/node_modules/@floating-ui/core/dist/floating-ui.core.browser.min.mjs
-function t(t2) {
-  return t2.split("-")[0];
+// 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 alignments = ["start", "end"];
+var placements = /* @__PURE__ */ sides.reduce((acc, side2) => acc.concat(side2, side2 + "-" + alignments[0], side2 + "-" + alignments[1]), []);
+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",
+  end: "start"
+};
+function clamp(start, value, end) {
+  return max(start, min(value, end));
+}
+function evaluate(value, param) {
+  return typeof value === "function" ? value(param) : value;
+}
+function getSide(placement) {
+  return placement.split("-")[0];
+}
+function getAlignment(placement) {
+  return placement.split("-")[1];
+}
+function getOppositeAxis(axis) {
+  return axis === "x" ? "y" : "x";
+}
+function getAxisLength(axis) {
+  return axis === "y" ? "height" : "width";
+}
+function getSideAxis(placement) {
+  return ["top", "bottom"].includes(getSide(placement)) ? "y" : "x";
+}
+function getAlignmentAxis(placement) {
+  return getOppositeAxis(getSideAxis(placement));
+}
+function getAlignmentSides(placement, rects, rtl) {
+  if (rtl === void 0) {
+    rtl = false;
+  }
+  const alignment = getAlignment(placement);
+  const alignmentAxis = getAlignmentAxis(placement);
+  const length = getAxisLength(alignmentAxis);
+  let mainAlignmentSide = alignmentAxis === "x" ? alignment === (rtl ? "end" : "start") ? "right" : "left" : alignment === "start" ? "bottom" : "top";
+  if (rects.reference[length] > rects.floating[length]) {
+    mainAlignmentSide = getOppositePlacement(mainAlignmentSide);
+  }
+  return [mainAlignmentSide, getOppositePlacement(mainAlignmentSide)];
+}
+function getExpandedPlacements(placement) {
+  const oppositePlacement = getOppositePlacement(placement);
+  return [getOppositeAlignmentPlacement(placement), oppositePlacement, getOppositeAlignmentPlacement(oppositePlacement)];
+}
+function getOppositeAlignmentPlacement(placement) {
+  return placement.replace(/start|end/g, (alignment) => oppositeAlignmentMap[alignment]);
+}
+function getSideList(side2, isStart, rtl) {
+  const lr = ["left", "right"];
+  const rl = ["right", "left"];
+  const tb = ["top", "bottom"];
+  const bt = ["bottom", "top"];
+  switch (side2) {
+    case "top":
+    case "bottom":
+      if (rtl)
+        return isStart ? rl : lr;
+      return isStart ? lr : rl;
+    case "left":
+    case "right":
+      return isStart ? tb : bt;
+    default:
+      return [];
+  }
+}
+function getOppositeAxisPlacements(placement, flipAlignment, direction, rtl) {
+  const alignment = getAlignment(placement);
+  let list = getSideList(getSide(placement), direction === "start", rtl);
+  if (alignment) {
+    list = list.map((side2) => side2 + "-" + alignment);
+    if (flipAlignment) {
+      list = list.concat(list.map(getOppositeAlignmentPlacement));
+    }
+  }
+  return list;
+}
+function getOppositePlacement(placement) {
+  return placement.replace(/left|right|bottom|top/g, (side2) => oppositeSideMap[side2]);
 }
-function e(t2) {
-  return t2.split("-")[1];
+function expandPaddingObject(padding) {
+  return __spreadValues({
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0
+  }, padding);
 }
-function n(e2) {
-  return ["top", "bottom"].includes(t(e2)) ? "x" : "y";
+function getPaddingObject(padding) {
+  return typeof padding !== "number" ? expandPaddingObject(padding) : {
+    top: padding,
+    right: padding,
+    bottom: padding,
+    left: padding
+  };
 }
-function r(t2) {
-  return "y" === t2 ? "height" : "width";
+function rectToClientRect(rect) {
+  return __spreadProps(__spreadValues({}, rect), {
+    top: rect.y,
+    left: rect.x,
+    right: rect.x + rect.width,
+    bottom: rect.y + rect.height
+  });
 }
-function i(i3, o3, a3) {
-  let { reference: l3, floating: s3 } = i3;
-  const c3 = l3.x + l3.width / 2 - s3.width / 2, f3 = l3.y + l3.height / 2 - s3.height / 2, u3 = n(o3), m3 = r(u3), g3 = l3[m3] / 2 - s3[m3] / 2, d3 = "x" === u3;
-  let p3;
-  switch (t(o3)) {
+
+// node_modules/.pnpm/@floating-ui+core@1.6.0/node_modules/@floating-ui/core/dist/floating-ui.core.mjs
+function computeCoordsFromPlacement(_ref, placement, rtl) {
+  let {
+    reference,
+    floating
+  } = _ref;
+  const sideAxis = getSideAxis(placement);
+  const alignmentAxis = getAlignmentAxis(placement);
+  const alignLength = getAxisLength(alignmentAxis);
+  const side2 = getSide(placement);
+  const isVertical = sideAxis === "y";
+  const commonX = reference.x + reference.width / 2 - floating.width / 2;
+  const commonY = reference.y + reference.height / 2 - floating.height / 2;
+  const commonAlign = reference[alignLength] / 2 - floating[alignLength] / 2;
+  let coords;
+  switch (side2) {
     case "top":
-      p3 = { x: c3, y: l3.y - s3.height };
+      coords = {
+        x: commonX,
+        y: reference.y - floating.height
+      };
       break;
     case "bottom":
-      p3 = { x: c3, y: l3.y + l3.height };
+      coords = {
+        x: commonX,
+        y: reference.y + reference.height
+      };
       break;
     case "right":
-      p3 = { x: l3.x + l3.width, y: f3 };
+      coords = {
+        x: reference.x + reference.width,
+        y: commonY
+      };
       break;
     case "left":
-      p3 = { x: l3.x - s3.width, y: f3 };
+      coords = {
+        x: reference.x - floating.width,
+        y: commonY
+      };
       break;
     default:
-      p3 = { x: l3.x, y: l3.y };
+      coords = {
+        x: reference.x,
+        y: reference.y
+      };
   }
-  switch (e(o3)) {
+  switch (getAlignment(placement)) {
     case "start":
-      p3[u3] -= g3 * (a3 && d3 ? -1 : 1);
+      coords[alignmentAxis] -= commonAlign * (rtl && isVertical ? -1 : 1);
       break;
     case "end":
-      p3[u3] += g3 * (a3 && d3 ? -1 : 1);
+      coords[alignmentAxis] += commonAlign * (rtl && isVertical ? -1 : 1);
+      break;
   }
-  return p3;
+  return coords;
 }
-var o = async (t2, e2, n3) => {
-  const { placement: r3 = "bottom", strategy: o3 = "absolute", middleware: a3 = [], platform: l3 } = n3, s3 = await (null == l3.isRTL ? void 0 : l3.isRTL(e2));
-  let c3 = await l3.getElementRects({ reference: t2, floating: e2, strategy: o3 }), { x: f3, y: u3 } = i(c3, r3, s3), m3 = r3, g3 = {}, d3 = 0;
-  for (let n4 = 0; n4 < a3.length; n4++) {
-    const { name: p3, fn: h3 } = a3[n4], { x: y3, y: x3, data: w3, reset: v3 } = await h3({ x: f3, y: u3, initialPlacement: r3, placement: m3, strategy: o3, middlewareData: g3, rects: c3, platform: l3, elements: { reference: t2, floating: e2 } });
-    f3 = null != y3 ? y3 : f3, u3 = null != x3 ? x3 : u3, g3 = __spreadProps(__spreadValues({}, g3), { [p3]: __spreadValues(__spreadValues({}, g3[p3]), w3) }), v3 && d3 <= 50 && (d3++, "object" == typeof v3 && (v3.placement && (m3 = v3.placement), v3.rects && (c3 = true === v3.rects ? await l3.getElementRects({ reference: t2, floating: e2, strategy: o3 }) : v3.rects), { x: f3, y: u3 } = i(c3, m3, s3)), n4 = -1);
+var computePosition = async (reference, floating, config) => {
+  const {
+    placement = "bottom",
+    strategy = "absolute",
+    middleware = [],
+    platform: platform2
+  } = config;
+  const validMiddleware = middleware.filter(Boolean);
+  const rtl = await (platform2.isRTL == null ? void 0 : platform2.isRTL(floating));
+  let rects = await platform2.getElementRects({
+    reference,
+    floating,
+    strategy
+  });
+  let {
+    x,
+    y
+  } = computeCoordsFromPlacement(rects, placement, rtl);
+  let statefulPlacement = placement;
+  let middlewareData = {};
+  let resetCount = 0;
+  for (let i = 0; i < validMiddleware.length; i++) {
+    const {
+      name,
+      fn
+    } = validMiddleware[i];
+    const {
+      x: nextX,
+      y: nextY,
+      data,
+      reset
+    } = await fn({
+      x,
+      y,
+      initialPlacement: placement,
+      placement: statefulPlacement,
+      strategy,
+      middlewareData,
+      rects,
+      platform: platform2,
+      elements: {
+        reference,
+        floating
+      }
+    });
+    x = nextX != null ? nextX : x;
+    y = nextY != null ? nextY : y;
+    middlewareData = __spreadProps(__spreadValues({}, middlewareData), {
+      [name]: __spreadValues(__spreadValues({}, middlewareData[name]), data)
+    });
+    if (reset && resetCount <= 50) {
+      resetCount++;
+      if (typeof reset === "object") {
+        if (reset.placement) {
+          statefulPlacement = reset.placement;
+        }
+        if (reset.rects) {
+          rects = reset.rects === true ? await platform2.getElementRects({
+            reference,
+            floating,
+            strategy
+          }) : reset.rects;
+        }
+        ({
+          x,
+          y
+        } = computeCoordsFromPlacement(rects, statefulPlacement, rtl));
+      }
+      i = -1;
+    }
   }
-  return { x: f3, y: u3, placement: m3, strategy: o3, middlewareData: g3 };
+  return {
+    x,
+    y,
+    placement: statefulPlacement,
+    strategy,
+    middlewareData
+  };
 };
-function a(t2) {
-  return "number" != typeof t2 ? function(t3) {
-    return __spreadValues({ top: 0, right: 0, bottom: 0, left: 0 }, t3);
-  }(t2) : { top: t2, right: t2, bottom: t2, left: t2 };
-}
-function l(t2) {
-  return __spreadProps(__spreadValues({}, t2), { top: t2.y, left: t2.x, right: t2.x + t2.width, bottom: t2.y + t2.height });
-}
-async function s(t2, e2) {
-  var n3;
-  void 0 === e2 && (e2 = {});
-  const { x: r3, y: i3, platform: o3, rects: s3, elements: c3, strategy: f3 } = t2, { boundary: u3 = "clippingAncestors", rootBoundary: m3 = "viewport", elementContext: g3 = "floating", altBoundary: d3 = false, padding: p3 = 0 } = e2, h3 = a(p3), y3 = c3[d3 ? "floating" === g3 ? "reference" : "floating" : g3], x3 = l(await o3.getClippingRect({ element: null == (n3 = await (null == o3.isElement ? void 0 : o3.isElement(y3))) || n3 ? y3 : y3.contextElement || await (null == o3.getDocumentElement ? void 0 : o3.getDocumentElement(c3.floating)), boundary: u3, rootBoundary: m3, strategy: f3 })), w3 = l(o3.convertOffsetParentRelativeRectToViewportRelativeRect ? await o3.convertOffsetParentRelativeRectToViewportRelativeRect({ rect: "floating" === g3 ? __spreadProps(__spreadValues({}, s3.floating), { x: r3, y: i3 }) : s3.reference, offsetParent: await (null == o3.getOffsetParent ? void 0 : o3.getOffsetParent(c3.floating)), strategy: f3 }) : s3[g3]);
-  return { top: x3.top - w3.top + h3.top, bottom: w3.bottom - x3.bottom + h3.bottom, left: x3.left - w3.left + h3.left, right: w3.right - x3.right + h3.right };
-}
-var c = Math.min;
-var f = Math.max;
-function u(t2, e2, n3) {
-  return f(t2, c(e2, n3));
-}
-var m = (t2) => ({ name: "arrow", options: t2, async fn(i3) {
-  const { element: o3, padding: l3 = 0 } = null != t2 ? t2 : {}, { x: s3, y: c3, placement: f3, rects: m3, platform: g3 } = i3;
-  if (null == o3)
-    return {};
-  const d3 = a(l3), p3 = { x: s3, y: c3 }, h3 = n(f3), y3 = e(f3), x3 = r(h3), w3 = await g3.getDimensions(o3), v3 = "y" === h3 ? "top" : "left", b3 = "y" === h3 ? "bottom" : "right", R2 = m3.reference[x3] + m3.reference[h3] - p3[h3] - m3.floating[x3], A = p3[h3] - m3.reference[h3], P2 = await (null == g3.getOffsetParent ? void 0 : g3.getOffsetParent(o3));
-  let T3 = P2 ? "y" === h3 ? P2.clientHeight || 0 : P2.clientWidth || 0 : 0;
-  0 === T3 && (T3 = m3.floating[x3]);
-  const O2 = R2 / 2 - A / 2, D3 = d3[v3], L3 = T3 - w3[x3] - d3[b3], k2 = T3 / 2 - w3[x3] / 2 + O2, E3 = u(D3, k2, L3), C2 = ("start" === y3 ? d3[v3] : d3[b3]) > 0 && k2 !== E3 && m3.reference[x3] <= m3.floating[x3];
-  return { [h3]: p3[h3] - (C2 ? k2 < D3 ? D3 - k2 : L3 - k2 : 0), data: { [h3]: E3, centerOffset: k2 - E3 } };
-} });
-var g = { left: "right", right: "left", bottom: "top", top: "bottom" };
-function d(t2) {
-  return t2.replace(/left|right|bottom|top/g, (t3) => g[t3]);
-}
-function p(t2, i3, o3) {
-  void 0 === o3 && (o3 = false);
-  const a3 = e(t2), l3 = n(t2), s3 = r(l3);
-  let c3 = "x" === l3 ? a3 === (o3 ? "end" : "start") ? "right" : "left" : "start" === a3 ? "bottom" : "top";
-  return i3.reference[s3] > i3.floating[s3] && (c3 = d(c3)), { main: c3, cross: d(c3) };
-}
-var h = { start: "end", end: "start" };
-function y(t2) {
-  return t2.replace(/start|end/g, (t3) => h[t3]);
-}
-var x = ["top", "right", "bottom", "left"];
-var w = x.reduce((t2, e2) => t2.concat(e2, e2 + "-start", e2 + "-end"), []);
-var b = function(e2) {
-  return void 0 === e2 && (e2 = {}), { name: "flip", options: e2, async fn(n3) {
-    var r3;
-    const { placement: i3, middlewareData: o3, rects: a3, initialPlacement: l3, platform: c3, elements: f3 } = n3, _a = e2, { mainAxis: u3 = true, crossAxis: m3 = true, fallbackPlacements: g3, fallbackStrategy: h3 = "bestFit", flipAlignment: x3 = true } = _a, w3 = __objRest(_a, ["mainAxis", "crossAxis", "fallbackPlacements", "fallbackStrategy", "flipAlignment"]), v3 = t(i3), b3 = g3 || (v3 === l3 || !x3 ? [d(l3)] : function(t2) {
-      const e3 = d(t2);
-      return [y(t2), e3, y(e3)];
-    }(l3)), R2 = [l3, ...b3], A = await s(n3, w3), P2 = [];
-    let T3 = (null == (r3 = o3.flip) ? void 0 : r3.overflows) || [];
-    if (u3 && P2.push(A[v3]), m3) {
-      const { main: t2, cross: e3 } = p(i3, a3, await (null == c3.isRTL ? void 0 : c3.isRTL(f3.floating)));
-      P2.push(A[t2], A[e3]);
+async function detectOverflow(state, options) {
+  var _await$platform$isEle;
+  if (options === void 0) {
+    options = {};
+  }
+  const {
+    x,
+    y,
+    platform: platform2,
+    rects,
+    elements,
+    strategy
+  } = state;
+  const {
+    boundary = "clippingAncestors",
+    rootBoundary = "viewport",
+    elementContext = "floating",
+    altBoundary = false,
+    padding = 0
+  } = evaluate(options, state);
+  const paddingObject = getPaddingObject(padding);
+  const altContext = elementContext === "floating" ? "reference" : "floating";
+  const element = elements[altBoundary ? altContext : elementContext];
+  const clippingClientRect = rectToClientRect(await platform2.getClippingRect({
+    element: ((_await$platform$isEle = await (platform2.isElement == null ? void 0 : platform2.isElement(element))) != null ? _await$platform$isEle : true) ? element : element.contextElement || await (platform2.getDocumentElement == null ? void 0 : platform2.getDocumentElement(elements.floating)),
+    boundary,
+    rootBoundary,
+    strategy
+  }));
+  const rect = elementContext === "floating" ? __spreadProps(__spreadValues({}, rects.floating), {
+    x,
+    y
+  }) : rects.reference;
+  const offsetParent = await (platform2.getOffsetParent == null ? void 0 : platform2.getOffsetParent(elements.floating));
+  const offsetScale = await (platform2.isElement == null ? void 0 : platform2.isElement(offsetParent)) ? await (platform2.getScale == null ? void 0 : platform2.getScale(offsetParent)) || {
+    x: 1,
+    y: 1
+  } : {
+    x: 1,
+    y: 1
+  };
+  const elementClientRect = rectToClientRect(platform2.convertOffsetParentRelativeRectToViewportRelativeRect ? await platform2.convertOffsetParentRelativeRectToViewportRelativeRect({
+    elements,
+    rect,
+    offsetParent,
+    strategy
+  }) : rect);
+  return {
+    top: (clippingClientRect.top - elementClientRect.top + paddingObject.top) / offsetScale.y,
+    bottom: (elementClientRect.bottom - clippingClientRect.bottom + paddingObject.bottom) / offsetScale.y,
+    left: (clippingClientRect.left - elementClientRect.left + paddingObject.left) / offsetScale.x,
+    right: (elementClientRect.right - clippingClientRect.right + paddingObject.right) / offsetScale.x
+  };
+}
+var arrow = (options) => ({
+  name: "arrow",
+  options,
+  async fn(state) {
+    const {
+      x,
+      y,
+      placement,
+      rects,
+      platform: platform2,
+      elements,
+      middlewareData
+    } = state;
+    const {
+      element,
+      padding = 0
+    } = evaluate(options, state) || {};
+    if (element == null) {
+      return {};
     }
-    if (T3 = [...T3, { placement: i3, overflows: P2 }], !P2.every((t2) => t2 <= 0)) {
-      var O2, D3;
-      const t2 = (null != (O2 = null == (D3 = o3.flip) ? void 0 : D3.index) ? O2 : 0) + 1, e3 = R2[t2];
-      if (e3)
-        return { data: { index: t2, overflows: T3 }, reset: { placement: e3 } };
-      let n4 = "bottom";
-      switch (h3) {
-        case "bestFit": {
-          var L3;
-          const t3 = null == (L3 = T3.map((t4) => [t4, t4.overflows.filter((t5) => t5 > 0).reduce((t5, e4) => t5 + e4, 0)]).sort((t4, e4) => t4[1] - e4[1])[0]) ? void 0 : L3[0].placement;
-          t3 && (n4 = t3);
-          break;
-        }
-        case "initialPlacement":
-          n4 = l3;
+    const paddingObject = getPaddingObject(padding);
+    const coords = {
+      x,
+      y
+    };
+    const axis = getAlignmentAxis(placement);
+    const length = getAxisLength(axis);
+    const arrowDimensions = await platform2.getDimensions(element);
+    const isYAxis = axis === "y";
+    const minProp = isYAxis ? "top" : "left";
+    const maxProp = isYAxis ? "bottom" : "right";
+    const clientProp = isYAxis ? "clientHeight" : "clientWidth";
+    const endDiff = rects.reference[length] + rects.reference[axis] - coords[axis] - rects.floating[length];
+    const startDiff = coords[axis] - rects.reference[axis];
+    const arrowOffsetParent = await (platform2.getOffsetParent == null ? void 0 : platform2.getOffsetParent(element));
+    let clientSize = arrowOffsetParent ? arrowOffsetParent[clientProp] : 0;
+    if (!clientSize || !await (platform2.isElement == null ? void 0 : platform2.isElement(arrowOffsetParent))) {
+      clientSize = elements.floating[clientProp] || rects.floating[length];
+    }
+    const centerToReference = endDiff / 2 - startDiff / 2;
+    const largestPossiblePadding = clientSize / 2 - arrowDimensions[length] / 2 - 1;
+    const minPadding = min(paddingObject[minProp], largestPossiblePadding);
+    const maxPadding = min(paddingObject[maxProp], largestPossiblePadding);
+    const min$1 = minPadding;
+    const max2 = clientSize - arrowDimensions[length] - maxPadding;
+    const center = clientSize / 2 - arrowDimensions[length] / 2 + centerToReference;
+    const offset2 = clamp(min$1, center, max2);
+    const shouldAddOffset = !middlewareData.arrow && getAlignment(placement) != null && center !== offset2 && rects.reference[length] / 2 - (center < min$1 ? minPadding : maxPadding) - arrowDimensions[length] / 2 < 0;
+    const alignmentOffset = shouldAddOffset ? center < min$1 ? center - min$1 : center - max2 : 0;
+    return {
+      [axis]: coords[axis] + alignmentOffset,
+      data: __spreadValues({
+        [axis]: offset2,
+        centerOffset: center - offset2 - alignmentOffset
+      }, shouldAddOffset && {
+        alignmentOffset
+      }),
+      reset: shouldAddOffset
+    };
+  }
+});
+function getPlacementList(alignment, autoAlignment, allowedPlacements) {
+  const allowedPlacementsSortedByAlignment = alignment ? [...allowedPlacements.filter((placement) => getAlignment(placement) === alignment), ...allowedPlacements.filter((placement) => getAlignment(placement) !== alignment)] : allowedPlacements.filter((placement) => getSide(placement) === placement);
+  return allowedPlacementsSortedByAlignment.filter((placement) => {
+    if (alignment) {
+      return getAlignment(placement) === alignment || (autoAlignment ? getOppositeAlignmentPlacement(placement) !== placement : false);
+    }
+    return true;
+  });
+}
+var autoPlacement = function(options) {
+  if (options === void 0) {
+    options = {};
+  }
+  return {
+    name: "autoPlacement",
+    options,
+    async fn(state) {
+      var _middlewareData$autoP, _middlewareData$autoP2, _placementsThatFitOnE;
+      const {
+        rects,
+        middlewareData,
+        placement,
+        platform: platform2,
+        elements
+      } = state;
+      const _a = evaluate(options, state), {
+        crossAxis = false,
+        alignment,
+        allowedPlacements = placements,
+        autoAlignment = true
+      } = _a, detectOverflowOptions = __objRest(_a, [
+        "crossAxis",
+        "alignment",
+        "allowedPlacements",
+        "autoAlignment"
+      ]);
+      const placements$1 = alignment !== void 0 || allowedPlacements === placements ? getPlacementList(alignment || null, autoAlignment, allowedPlacements) : allowedPlacements;
+      const overflow = await detectOverflow(state, detectOverflowOptions);
+      const currentIndex = ((_middlewareData$autoP = middlewareData.autoPlacement) == null ? void 0 : _middlewareData$autoP.index) || 0;
+      const currentPlacement = placements$1[currentIndex];
+      if (currentPlacement == null) {
+        return {};
+      }
+      const alignmentSides = getAlignmentSides(currentPlacement, rects, await (platform2.isRTL == null ? void 0 : platform2.isRTL(elements.floating)));
+      if (placement !== currentPlacement) {
+        return {
+          reset: {
+            placement: placements$1[0]
+          }
+        };
+      }
+      const currentOverflows = [overflow[getSide(currentPlacement)], overflow[alignmentSides[0]], overflow[alignmentSides[1]]];
+      const allOverflows = [...((_middlewareData$autoP2 = middlewareData.autoPlacement) == null ? void 0 : _middlewareData$autoP2.overflows) || [], {
+        placement: currentPlacement,
+        overflows: currentOverflows
+      }];
+      const nextPlacement = placements$1[currentIndex + 1];
+      if (nextPlacement) {
+        return {
+          data: {
+            index: currentIndex + 1,
+            overflows: allOverflows
+          },
+          reset: {
+            placement: nextPlacement
+          }
+        };
+      }
+      const placementsSortedByMostSpace = allOverflows.map((d) => {
+        const alignment2 = getAlignment(d.placement);
+        return [d.placement, alignment2 && crossAxis ? (
+          // Check along the mainAxis and main crossAxis side.
+          d.overflows.slice(0, 2).reduce((acc, v) => acc + v, 0)
+        ) : (
+          // Check only the mainAxis.
+          d.overflows[0]
+        ), d.overflows];
+      }).sort((a, b) => a[1] - b[1]);
+      const placementsThatFitOnEachSide = placementsSortedByMostSpace.filter((d) => d[2].slice(
+        0,
+        // Aligned placements should not check their opposite crossAxis
+        // side.
+        getAlignment(d[0]) ? 2 : 3
+      ).every((v) => v <= 0));
+      const resetPlacement = ((_placementsThatFitOnE = placementsThatFitOnEachSide[0]) == null ? void 0 : _placementsThatFitOnE[0]) || placementsSortedByMostSpace[0][0];
+      if (resetPlacement !== placement) {
+        return {
+          data: {
+            index: currentIndex + 1,
+            overflows: allOverflows
+          },
+          reset: {
+            placement: resetPlacement
+          }
+        };
       }
-      if (i3 !== n4)
-        return { reset: { placement: n4 } };
+      return {};
     }
-    return {};
-  } };
+  };
 };
-var T = function(r3) {
-  return void 0 === r3 && (r3 = 0), { name: "offset", options: r3, async fn(i3) {
-    const { x: o3, y: a3 } = i3, l3 = await async function(r4, i4) {
-      const { placement: o4, platform: a4, elements: l4 } = r4, s3 = await (null == a4.isRTL ? void 0 : a4.isRTL(l4.floating)), c3 = t(o4), f3 = e(o4), u3 = "x" === n(o4), m3 = ["left", "top"].includes(c3) ? -1 : 1, g3 = s3 && u3 ? -1 : 1, d3 = "function" == typeof i4 ? i4(r4) : i4;
-      let { mainAxis: p3, crossAxis: h3, alignmentAxis: y3 } = "number" == typeof d3 ? { mainAxis: d3, crossAxis: 0, alignmentAxis: null } : __spreadValues({ mainAxis: 0, crossAxis: 0, alignmentAxis: null }, d3);
-      return f3 && "number" == typeof y3 && (h3 = "end" === f3 ? -1 * y3 : y3), u3 ? { x: h3 * g3, y: p3 * m3 } : { x: p3 * m3, y: h3 * g3 };
-    }(i3, r3);
-    return { x: o3 + l3.x, y: a3 + l3.y, data: l3 };
-  } };
+var flip = function(options) {
+  if (options === void 0) {
+    options = {};
+  }
+  return {
+    name: "flip",
+    options,
+    async fn(state) {
+      var _middlewareData$arrow, _middlewareData$flip;
+      const {
+        placement,
+        middlewareData,
+        rects,
+        initialPlacement,
+        platform: platform2,
+        elements
+      } = state;
+      const _a = evaluate(options, state), {
+        mainAxis: checkMainAxis = true,
+        crossAxis: checkCrossAxis = true,
+        fallbackPlacements: specifiedFallbackPlacements,
+        fallbackStrategy = "bestFit",
+        fallbackAxisSideDirection = "none",
+        flipAlignment = true
+      } = _a, detectOverflowOptions = __objRest(_a, [
+        "mainAxis",
+        "crossAxis",
+        "fallbackPlacements",
+        "fallbackStrategy",
+        "fallbackAxisSideDirection",
+        "flipAlignment"
+      ]);
+      if ((_middlewareData$arrow = middlewareData.arrow) != null && _middlewareData$arrow.alignmentOffset) {
+        return {};
+      }
+      const side2 = getSide(placement);
+      const isBasePlacement = getSide(initialPlacement) === initialPlacement;
+      const rtl = await (platform2.isRTL == null ? void 0 : platform2.isRTL(elements.floating));
+      const fallbackPlacements = specifiedFallbackPlacements || (isBasePlacement || !flipAlignment ? [getOppositePlacement(initialPlacement)] : getExpandedPlacements(initialPlacement));
+      if (!specifiedFallbackPlacements && fallbackAxisSideDirection !== "none") {
+        fallbackPlacements.push(...getOppositeAxisPlacements(initialPlacement, flipAlignment, fallbackAxisSideDirection, rtl));
+      }
+      const placements2 = [initialPlacement, ...fallbackPlacements];
+      const overflow = await detectOverflow(state, detectOverflowOptions);
+      const overflows = [];
+      let overflowsData = ((_middlewareData$flip = middlewareData.flip) == null ? void 0 : _middlewareData$flip.overflows) || [];
+      if (checkMainAxis) {
+        overflows.push(overflow[side2]);
+      }
+      if (checkCrossAxis) {
+        const sides2 = getAlignmentSides(placement, rects, rtl);
+        overflows.push(overflow[sides2[0]], overflow[sides2[1]]);
+      }
+      overflowsData = [...overflowsData, {
+        placement,
+        overflows
+      }];
+      if (!overflows.every((side3) => side3 <= 0)) {
+        var _middlewareData$flip2, _overflowsData$filter;
+        const nextIndex = (((_middlewareData$flip2 = middlewareData.flip) == null ? void 0 : _middlewareData$flip2.index) || 0) + 1;
+        const nextPlacement = placements2[nextIndex];
+        if (nextPlacement) {
+          return {
+            data: {
+              index: nextIndex,
+              overflows: overflowsData
+            },
+            reset: {
+              placement: nextPlacement
+            }
+          };
+        }
+        let resetPlacement = (_overflowsData$filter = overflowsData.filter((d) => d.overflows[0] <= 0).sort((a, b) => a.overflows[1] - b.overflows[1])[0]) == null ? void 0 : _overflowsData$filter.placement;
+        if (!resetPlacement) {
+          switch (fallbackStrategy) {
+            case "bestFit": {
+              var _overflowsData$map$so;
+              const placement2 = (_overflowsData$map$so = overflowsData.map((d) => [d.placement, d.overflows.filter((overflow2) => overflow2 > 0).reduce((acc, overflow2) => acc + overflow2, 0)]).sort((a, b) => a[1] - b[1])[0]) == null ? void 0 : _overflowsData$map$so[0];
+              if (placement2) {
+                resetPlacement = placement2;
+              }
+              break;
+            }
+            case "initialPlacement":
+              resetPlacement = initialPlacement;
+              break;
+          }
+        }
+        if (placement !== resetPlacement) {
+          return {
+            reset: {
+              placement: resetPlacement
+            }
+          };
+        }
+      }
+      return {};
+    }
+  };
 };
-function O(t2) {
-  return "x" === t2 ? "y" : "x";
-}
-var D = function(e2) {
-  return void 0 === e2 && (e2 = {}), { name: "shift", options: e2, async fn(r3) {
-    const { x: i3, y: o3, placement: a3 } = r3, _a = e2, { mainAxis: l3 = true, crossAxis: c3 = false, limiter: f3 = { fn: (t2) => {
-      let { x: e3, y: n3 } = t2;
-      return { x: e3, y: n3 };
-    } } } = _a, m3 = __objRest(_a, ["mainAxis", "crossAxis", "limiter"]), g3 = { x: i3, y: o3 }, d3 = await s(r3, m3), p3 = n(t(a3)), h3 = O(p3);
-    let y3 = g3[p3], x3 = g3[h3];
-    if (l3) {
-      const t2 = "y" === p3 ? "bottom" : "right";
-      y3 = u(y3 + d3["y" === p3 ? "top" : "left"], y3, y3 - d3[t2]);
+async function convertValueToCoords(state, options) {
+  const {
+    placement,
+    platform: platform2,
+    elements
+  } = state;
+  const rtl = await (platform2.isRTL == null ? void 0 : platform2.isRTL(elements.floating));
+  const side2 = getSide(placement);
+  const alignment = getAlignment(placement);
+  const isVertical = getSideAxis(placement) === "y";
+  const mainAxisMulti = ["left", "top"].includes(side2) ? -1 : 1;
+  const crossAxisMulti = rtl && isVertical ? -1 : 1;
+  const rawValue = evaluate(options, state);
+  let {
+    mainAxis,
+    crossAxis,
+    alignmentAxis
+  } = typeof rawValue === "number" ? {
+    mainAxis: rawValue,
+    crossAxis: 0,
+    alignmentAxis: null
+  } : __spreadValues({
+    mainAxis: 0,
+    crossAxis: 0,
+    alignmentAxis: null
+  }, rawValue);
+  if (alignment && typeof alignmentAxis === "number") {
+    crossAxis = alignment === "end" ? alignmentAxis * -1 : alignmentAxis;
+  }
+  return isVertical ? {
+    x: crossAxis * crossAxisMulti,
+    y: mainAxis * mainAxisMulti
+  } : {
+    x: mainAxis * mainAxisMulti,
+    y: crossAxis * crossAxisMulti
+  };
+}
+var offset = function(options) {
+  if (options === void 0) {
+    options = 0;
+  }
+  return {
+    name: "offset",
+    options,
+    async fn(state) {
+      var _middlewareData$offse, _middlewareData$arrow;
+      const {
+        x,
+        y,
+        placement,
+        middlewareData
+      } = state;
+      const diffCoords = await convertValueToCoords(state, options);
+      if (placement === ((_middlewareData$offse = middlewareData.offset) == null ? void 0 : _middlewareData$offse.placement) && (_middlewareData$arrow = middlewareData.arrow) != null && _middlewareData$arrow.alignmentOffset) {
+        return {};
+      }
+      return {
+        x: x + diffCoords.x,
+        y: y + diffCoords.y,
+        data: __spreadProps(__spreadValues({}, diffCoords), {
+          placement
+        })
+      };
     }
-    if (c3) {
-      const t2 = "y" === h3 ? "bottom" : "right";
-      x3 = u(x3 + d3["y" === h3 ? "top" : "left"], x3, x3 - d3[t2]);
+  };
+};
+var shift = function(options) {
+  if (options === void 0) {
+    options = {};
+  }
+  return {
+    name: "shift",
+    options,
+    async fn(state) {
+      const {
+        x,
+        y,
+        placement
+      } = state;
+      const _a = evaluate(options, state), {
+        mainAxis: checkMainAxis = true,
+        crossAxis: checkCrossAxis = false,
+        limiter = {
+          fn: (_ref) => {
+            let {
+              x: x2,
+              y: y2
+            } = _ref;
+            return {
+              x: x2,
+              y: y2
+            };
+          }
+        }
+      } = _a, detectOverflowOptions = __objRest(_a, [
+        "mainAxis",
+        "crossAxis",
+        "limiter"
+      ]);
+      const coords = {
+        x,
+        y
+      };
+      const overflow = await detectOverflow(state, detectOverflowOptions);
+      const crossAxis = getSideAxis(getSide(placement));
+      const mainAxis = getOppositeAxis(crossAxis);
+      let mainAxisCoord = coords[mainAxis];
+      let crossAxisCoord = coords[crossAxis];
+      if (checkMainAxis) {
+        const minSide = mainAxis === "y" ? "top" : "left";
+        const maxSide = mainAxis === "y" ? "bottom" : "right";
+        const min2 = mainAxisCoord + overflow[minSide];
+        const max2 = mainAxisCoord - overflow[maxSide];
+        mainAxisCoord = clamp(min2, mainAxisCoord, max2);
+      }
+      if (checkCrossAxis) {
+        const minSide = crossAxis === "y" ? "top" : "left";
+        const maxSide = crossAxis === "y" ? "bottom" : "right";
+        const min2 = crossAxisCoord + overflow[minSide];
+        const max2 = crossAxisCoord - overflow[maxSide];
+        crossAxisCoord = clamp(min2, crossAxisCoord, max2);
+      }
+      const limitedCoords = limiter.fn(__spreadProps(__spreadValues({}, state), {
+        [mainAxis]: mainAxisCoord,
+        [crossAxis]: crossAxisCoord
+      }));
+      return __spreadProps(__spreadValues({}, limitedCoords), {
+        data: {
+          x: limitedCoords.x - x,
+          y: limitedCoords.y - y
+        }
+      });
     }
-    const w3 = f3.fn(__spreadProps(__spreadValues({}, r3), { [p3]: y3, [h3]: x3 }));
-    return __spreadProps(__spreadValues({}, w3), { data: { x: w3.x - i3, y: w3.y - o3 } });
-  } };
+  };
 };
 
-// node_modules/.pnpm/@floating-ui+dom@0.5.4/node_modules/@floating-ui/dom/dist/floating-ui.dom.browser.min.mjs
-function n2(t2) {
-  return t2 && t2.document && t2.location && t2.alert && t2.setInterval;
+// node_modules/.pnpm/@floating-ui+utils@0.2.1/node_modules/@floating-ui/utils/dist/floating-ui.utils.dom.mjs
+function getNodeName(node) {
+  if (isNode(node)) {
+    return (node.nodeName || "").toLowerCase();
+  }
+  return "#document";
+}
+function getWindow(node) {
+  var _node$ownerDocument;
+  return (node == null || (_node$ownerDocument = node.ownerDocument) == null ? void 0 : _node$ownerDocument.defaultView) || window;
+}
+function getDocumentElement(node) {
+  var _ref;
+  return (_ref = (isNode(node) ? node.ownerDocument : node.document) || window.document) == null ? void 0 : _ref.documentElement;
+}
+function isNode(value) {
+  return value instanceof Node || value instanceof getWindow(value).Node;
+}
+function isElement(value) {
+  return value instanceof Element || value instanceof getWindow(value).Element;
+}
+function isHTMLElement(value) {
+  return value instanceof HTMLElement || value instanceof getWindow(value).HTMLElement;
+}
+function isShadowRoot(value) {
+  if (typeof ShadowRoot === "undefined") {
+    return false;
+  }
+  return value instanceof ShadowRoot || value instanceof getWindow(value).ShadowRoot;
+}
+function isOverflowElement(element) {
+  const {
+    overflow,
+    overflowX,
+    overflowY,
+    display
+  } = getComputedStyle(element);
+  return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && !["inline", "contents"].includes(display);
+}
+function isTableElement(element) {
+  return ["table", "td", "th"].includes(getNodeName(element));
+}
+function isContainingBlock(element) {
+  const webkit = isWebKit();
+  const css2 = getComputedStyle(element);
+  return css2.transform !== "none" || css2.perspective !== "none" || (css2.containerType ? css2.containerType !== "normal" : false) || !webkit && (css2.backdropFilter ? css2.backdropFilter !== "none" : false) || !webkit && (css2.filter ? css2.filter !== "none" : false) || ["transform", "perspective", "filter"].some((value) => (css2.willChange || "").includes(value)) || ["paint", "layout", "strict", "content"].some((value) => (css2.contain || "").includes(value));
+}
+function getContainingBlock(element) {
+  let currentNode = getParentNode(element);
+  while (isHTMLElement(currentNode) && !isLastTraversableNode(currentNode)) {
+    if (isContainingBlock(currentNode)) {
+      return currentNode;
+    } else {
+      currentNode = getParentNode(currentNode);
+    }
+  }
+  return null;
+}
+function isWebKit() {
+  if (typeof CSS === "undefined" || !CSS.supports)
+    return false;
+  return CSS.supports("-webkit-backdrop-filter", "none");
 }
-function o2(t2) {
-  if (null == t2)
-    return window;
-  if (!n2(t2)) {
-    const e2 = t2.ownerDocument;
-    return e2 && e2.defaultView || window;
+function isLastTraversableNode(node) {
+  return ["html", "body", "#document"].includes(getNodeName(node));
+}
+function getComputedStyle(element) {
+  return getWindow(element).getComputedStyle(element);
+}
+function getNodeScroll(element) {
+  if (isElement(element)) {
+    return {
+      scrollLeft: element.scrollLeft,
+      scrollTop: element.scrollTop
+    };
+  }
+  return {
+    scrollLeft: element.pageXOffset,
+    scrollTop: element.pageYOffset
+  };
+}
+function getParentNode(node) {
+  if (getNodeName(node) === "html") {
+    return node;
+  }
+  const result = (
+    // Step into the shadow DOM of the parent of a slotted node.
+    node.assignedSlot || // DOM Element detected.
+    node.parentNode || // ShadowRoot detected.
+    isShadowRoot(node) && node.host || // Fallback.
+    getDocumentElement(node)
+  );
+  return isShadowRoot(result) ? result.host : result;
+}
+function getNearestOverflowAncestor(node) {
+  const parentNode = getParentNode(node);
+  if (isLastTraversableNode(parentNode)) {
+    return node.ownerDocument ? node.ownerDocument.body : node.body;
+  }
+  if (isHTMLElement(parentNode) && isOverflowElement(parentNode)) {
+    return parentNode;
   }
-  return t2;
+  return getNearestOverflowAncestor(parentNode);
 }
-function i2(t2) {
-  return o2(t2).getComputedStyle(t2);
+function getOverflowAncestors(node, list, traverseIframes) {
+  var _node$ownerDocument2;
+  if (list === void 0) {
+    list = [];
+  }
+  if (traverseIframes === void 0) {
+    traverseIframes = true;
+  }
+  const scrollableAncestor = getNearestOverflowAncestor(node);
+  const isBody = scrollableAncestor === ((_node$ownerDocument2 = node.ownerDocument) == null ? void 0 : _node$ownerDocument2.body);
+  const win = getWindow(scrollableAncestor);
+  if (isBody) {
+    return list.concat(win, win.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : [], win.frameElement && traverseIframes ? getOverflowAncestors(win.frameElement) : []);
+  }
+  return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor, [], traverseIframes));
 }
-function r2(t2) {
-  return n2(t2) ? "" : t2 ? (t2.nodeName || "").toLowerCase() : "";
+
+// node_modules/.pnpm/@floating-ui+dom@1.6.3/node_modules/@floating-ui/dom/dist/floating-ui.dom.mjs
+function getCssDimensions(element) {
+  const css2 = getComputedStyle(element);
+  let width = parseFloat(css2.width) || 0;
+  let height = parseFloat(css2.height) || 0;
+  const hasOffset = isHTMLElement(element);
+  const offsetWidth = hasOffset ? element.offsetWidth : width;
+  const offsetHeight = hasOffset ? element.offsetHeight : height;
+  const shouldFallback = round(width) !== offsetWidth || round(height) !== offsetHeight;
+  if (shouldFallback) {
+    width = offsetWidth;
+    height = offsetHeight;
+  }
+  return {
+    width,
+    height,
+    $: shouldFallback
+  };
 }
-function l2() {
-  const t2 = navigator.userAgentData;
-  return null != t2 && t2.brands ? t2.brands.map((t3) => t3.brand + "/" + t3.version).join(" ") : navigator.userAgent;
+function unwrapElement(element) {
+  return !isElement(element) ? element.contextElement : element;
 }
-function c2(t2) {
-  return t2 instanceof o2(t2).HTMLElement;
+function getScale(element) {
+  const domElement = unwrapElement(element);
+  if (!isHTMLElement(domElement)) {
+    return createCoords(1);
+  }
+  const rect = domElement.getBoundingClientRect();
+  const {
+    width,
+    height,
+    $
+  } = getCssDimensions(domElement);
+  let x = ($ ? round(rect.width) : rect.width) / width;
+  let y = ($ ? round(rect.height) : rect.height) / height;
+  if (!x || !Number.isFinite(x)) {
+    x = 1;
+  }
+  if (!y || !Number.isFinite(y)) {
+    y = 1;
+  }
+  return {
+    x,
+    y
+  };
 }
-function f2(t2) {
-  return t2 instanceof o2(t2).Element;
+var noOffsets = /* @__PURE__ */ createCoords(0);
+function getVisualOffsets(element) {
+  const win = getWindow(element);
+  if (!isWebKit() || !win.visualViewport) {
+    return noOffsets;
+  }
+  return {
+    x: win.visualViewport.offsetLeft,
+    y: win.visualViewport.offsetTop
+  };
 }
-function s2(t2) {
-  if ("undefined" == typeof ShadowRoot)
+function shouldAddVisualOffsets(element, isFixed, floatingOffsetParent) {
+  if (isFixed === void 0) {
+    isFixed = false;
+  }
+  if (!floatingOffsetParent || isFixed && floatingOffsetParent !== getWindow(element)) {
     return false;
-  return t2 instanceof o2(t2).ShadowRoot || t2 instanceof ShadowRoot;
-}
-function u2(t2) {
-  const { overflow: e2, overflowX: n3, overflowY: o3 } = i2(t2);
-  return /auto|scroll|overlay|hidden/.test(e2 + o3 + n3);
-}
-function d2(t2) {
-  return ["table", "td", "th"].includes(r2(t2));
-}
-function h2(t2) {
-  const e2 = /firefox/i.test(l2()), n3 = i2(t2);
-  return "none" !== n3.transform || "none" !== n3.perspective || "paint" === n3.contain || ["transform", "perspective"].includes(n3.willChange) || e2 && "filter" === n3.willChange || e2 && !!n3.filter && "none" !== n3.filter;
-}
-function a2() {
-  return !/^((?!chrome|android).)*safari/i.test(l2());
-}
-var g2 = Math.min;
-var p2 = Math.max;
-var m2 = Math.round;
-function w2(t2, e2, n3) {
-  var i3, r3, l3, s3;
-  void 0 === e2 && (e2 = false), void 0 === n3 && (n3 = false);
-  const u3 = t2.getBoundingClientRect();
-  let d3 = 1, h3 = 1;
-  e2 && c2(t2) && (d3 = t2.offsetWidth > 0 && m2(u3.width) / t2.offsetWidth || 1, h3 = t2.offsetHeight > 0 && m2(u3.height) / t2.offsetHeight || 1);
-  const g3 = f2(t2) ? o2(t2) : window, p3 = !a2() && n3, w3 = (u3.left + (p3 && null != (i3 = null == (r3 = g3.visualViewport) ? void 0 : r3.offsetLeft) ? i3 : 0)) / d3, v3 = (u3.top + (p3 && null != (l3 = null == (s3 = g3.visualViewport) ? void 0 : s3.offsetTop) ? l3 : 0)) / h3, y3 = u3.width / d3, x3 = u3.height / h3;
-  return { width: y3, height: x3, top: v3, right: w3 + y3, bottom: v3 + x3, left: w3, x: w3, y: v3 };
-}
-function v2(t2) {
-  return (e2 = t2, (e2 instanceof o2(e2).Node ? t2.ownerDocument : t2.document) || window.document).documentElement;
-  var e2;
-}
-function y2(t2) {
-  return f2(t2) ? { scrollLeft: t2.scrollLeft, scrollTop: t2.scrollTop } : { scrollLeft: t2.pageXOffset, scrollTop: t2.pageYOffset };
-}
-function x2(t2) {
-  return w2(v2(t2)).left + y2(t2).scrollLeft;
-}
-function b2(t2, e2, n3) {
-  const o3 = c2(e2), i3 = v2(e2), l3 = w2(t2, o3 && function(t3) {
-    const e3 = w2(t3);
-    return m2(e3.width) !== t3.offsetWidth || m2(e3.height) !== t3.offsetHeight;
-  }(e2), "fixed" === n3);
-  let f3 = { scrollLeft: 0, scrollTop: 0 };
-  const s3 = { x: 0, y: 0 };
-  if (o3 || !o3 && "fixed" !== n3)
-    if (("body" !== r2(e2) || u2(i3)) && (f3 = y2(e2)), c2(e2)) {
-      const t3 = w2(e2, true);
-      s3.x = t3.x + e2.clientLeft, s3.y = t3.y + e2.clientTop;
-    } else
-      i3 && (s3.x = x2(i3));
-  return { x: l3.left + f3.scrollLeft - s3.x, y: l3.top + f3.scrollTop - s3.y, width: l3.width, height: l3.height };
-}
-function L2(t2) {
-  return "html" === r2(t2) ? t2 : t2.assignedSlot || t2.parentNode || (s2(t2) ? t2.host : null) || v2(t2);
-}
-function R(t2) {
-  return c2(t2) && "fixed" !== getComputedStyle(t2).position ? t2.offsetParent : null;
-}
-function T2(t2) {
-  const e2 = o2(t2);
-  let n3 = R(t2);
-  for (; n3 && d2(n3) && "static" === getComputedStyle(n3).position; )
-    n3 = R(n3);
-  return n3 && ("html" === r2(n3) || "body" === r2(n3) && "static" === getComputedStyle(n3).position && !h2(n3)) ? e2 : n3 || function(t3) {
-    let e3 = L2(t3);
-    for (s2(e3) && (e3 = e3.host); c2(e3) && !["html", "body"].includes(r2(e3)); ) {
-      if (h2(e3))
-        return e3;
-      e3 = e3.parentNode;
+  }
+  return isFixed;
+}
+function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetParent) {
+  if (includeScale === void 0) {
+    includeScale = false;
+  }
+  if (isFixedStrategy === void 0) {
+    isFixedStrategy = false;
+  }
+  const clientRect = element.getBoundingClientRect();
+  const domElement = unwrapElement(element);
+  let scale = createCoords(1);
+  if (includeScale) {
+    if (offsetParent) {
+      if (isElement(offsetParent)) {
+        scale = getScale(offsetParent);
+      }
+    } else {
+      scale = getScale(element);
     }
-    return null;
-  }(t2) || e2;
-}
-function W(t2) {
-  if (c2(t2))
-    return { width: t2.offsetWidth, height: t2.offsetHeight };
-  const e2 = w2(t2);
-  return { width: e2.width, height: e2.height };
-}
-function E2(t2) {
-  const e2 = L2(t2);
-  return ["html", "body", "#document"].includes(r2(e2)) ? t2.ownerDocument.body : c2(e2) && u2(e2) ? e2 : E2(e2);
-}
-function H(t2, e2) {
-  var n3;
-  void 0 === e2 && (e2 = []);
-  const i3 = E2(t2), r3 = i3 === (null == (n3 = t2.ownerDocument) ? void 0 : n3.body), l3 = o2(i3), c3 = r3 ? [l3].concat(l3.visualViewport || [], u2(i3) ? i3 : []) : i3, f3 = e2.concat(c3);
-  return r3 ? f3 : f3.concat(H(c3));
-}
-function C(e2, n3, r3) {
-  return "viewport" === n3 ? l(function(t2, e3) {
-    const n4 = o2(t2), i3 = v2(t2), r4 = n4.visualViewport;
-    let l3 = i3.clientWidth, c3 = i3.clientHeight, f3 = 0, s3 = 0;
-    if (r4) {
-      l3 = r4.width, c3 = r4.height;
-      const t3 = a2();
-      (t3 || !t3 && "fixed" === e3) && (f3 = r4.offsetLeft, s3 = r4.offsetTop);
+  }
+  const visualOffsets = shouldAddVisualOffsets(domElement, isFixedStrategy, offsetParent) ? getVisualOffsets(domElement) : createCoords(0);
+  let x = (clientRect.left + visualOffsets.x) / scale.x;
+  let y = (clientRect.top + visualOffsets.y) / scale.y;
+  let width = clientRect.width / scale.x;
+  let height = clientRect.height / scale.y;
+  if (domElement) {
+    const win = getWindow(domElement);
+    const offsetWin = offsetParent && isElement(offsetParent) ? getWindow(offsetParent) : offsetParent;
+    let currentWin = win;
+    let currentIFrame = currentWin.frameElement;
+    while (currentIFrame && offsetParent && offsetWin !== currentWin) {
+      const iframeScale = getScale(currentIFrame);
+      const iframeRect = currentIFrame.getBoundingClientRect();
+      const css2 = getComputedStyle(currentIFrame);
+      const left = iframeRect.left + (currentIFrame.clientLeft + parseFloat(css2.paddingLeft)) * iframeScale.x;
+      const top = iframeRect.top + (currentIFrame.clientTop + parseFloat(css2.paddingTop)) * iframeScale.y;
+      x *= iframeScale.x;
+      y *= iframeScale.y;
+      width *= iframeScale.x;
+      height *= iframeScale.y;
+      x += left;
+      y += top;
+      currentWin = getWindow(currentIFrame);
+      currentIFrame = currentWin.frameElement;
+    }
+  }
+  return rectToClientRect({
+    width,
+    height,
+    x,
+    y
+  });
+}
+var topLayerSelectors = [":popover-open", ":modal"];
+function isTopLayer(floating) {
+  return topLayerSelectors.some((selector) => {
+    try {
+      return floating.matches(selector);
+    } catch (e) {
+      return false;
+    }
+  });
+}
+function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
+  let {
+    elements,
+    rect,
+    offsetParent,
+    strategy
+  } = _ref;
+  const isFixed = strategy === "fixed";
+  const documentElement = getDocumentElement(offsetParent);
+  const topLayer = elements ? isTopLayer(elements.floating) : false;
+  if (offsetParent === documentElement || topLayer && isFixed) {
+    return rect;
+  }
+  let scroll = {
+    scrollLeft: 0,
+    scrollTop: 0
+  };
+  let scale = createCoords(1);
+  const offsets = createCoords(0);
+  const isOffsetParentAnElement = isHTMLElement(offsetParent);
+  if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
+    if (getNodeName(offsetParent) !== "body" || isOverflowElement(documentElement)) {
+      scroll = getNodeScroll(offsetParent);
     }
-    return { width: l3, height: c3, x: f3, y: s3 };
-  }(e2, r3)) : f2(n3) ? function(t2, e3) {
-    const n4 = w2(t2, false, "fixed" === e3), o3 = n4.top + t2.clientTop, i3 = n4.left + t2.clientLeft;
-    return { top: o3, left: i3, x: i3, y: o3, right: i3 + t2.clientWidth, bottom: o3 + t2.clientHeight, width: t2.clientWidth, height: t2.clientHeight };
-  }(n3, r3) : l(function(t2) {
-    var e3;
-    const n4 = v2(t2), o3 = y2(t2), r4 = null == (e3 = t2.ownerDocument) ? void 0 : e3.body, l3 = p2(n4.scrollWidth, n4.clientWidth, r4 ? r4.scrollWidth : 0, r4 ? r4.clientWidth : 0), c3 = p2(n4.scrollHeight, n4.clientHeight, r4 ? r4.scrollHeight : 0, r4 ? r4.clientHeight : 0);
-    let f3 = -o3.scrollLeft + x2(t2);
-    const s3 = -o3.scrollTop;
-    return "rtl" === i2(r4 || n4).direction && (f3 += p2(n4.clientWidth, r4 ? r4.clientWidth : 0) - l3), { width: l3, height: c3, x: f3, y: s3 };
-  }(v2(e2)));
-}
-function S(t2) {
-  const e2 = H(t2), n3 = ["absolute", "fixed"].includes(i2(t2).position) && c2(t2) ? T2(t2) : t2;
-  return f2(n3) ? e2.filter((t3) => f2(t3) && function(t4, e3) {
-    const n4 = null == e3.getRootNode ? void 0 : e3.getRootNode();
-    if (t4.contains(e3))
-      return true;
-    if (n4 && s2(n4)) {
-      let n5 = e3;
-      do {
-        if (n5 && t4 === n5)
-          return true;
-        n5 = n5.parentNode || n5.host;
-      } while (n5);
+    if (isHTMLElement(offsetParent)) {
+      const offsetRect = getBoundingClientRect(offsetParent);
+      scale = getScale(offsetParent);
+      offsets.x = offsetRect.x + offsetParent.clientLeft;
+      offsets.y = offsetRect.y + offsetParent.clientTop;
+    }
+  }
+  return {
+    width: rect.width * scale.x,
+    height: rect.height * scale.y,
+    x: rect.x * scale.x - scroll.scrollLeft * scale.x + offsets.x,
+    y: rect.y * scale.y - scroll.scrollTop * scale.y + offsets.y
+  };
+}
+function getClientRects(element) {
+  return Array.from(element.getClientRects());
+}
+function getWindowScrollBarX(element) {
+  return getBoundingClientRect(getDocumentElement(element)).left + getNodeScroll(element).scrollLeft;
+}
+function getDocumentRect(element) {
+  const html3 = getDocumentElement(element);
+  const scroll = getNodeScroll(element);
+  const body = element.ownerDocument.body;
+  const width = max(html3.scrollWidth, html3.clientWidth, body.scrollWidth, body.clientWidth);
+  const height = max(html3.scrollHeight, html3.clientHeight, body.scrollHeight, body.clientHeight);
+  let x = -scroll.scrollLeft + getWindowScrollBarX(element);
+  const y = -scroll.scrollTop;
+  if (getComputedStyle(body).direction === "rtl") {
+    x += max(html3.clientWidth, body.clientWidth) - width;
+  }
+  return {
+    width,
+    height,
+    x,
+    y
+  };
+}
+function getViewportRect(element, strategy) {
+  const win = getWindow(element);
+  const html3 = getDocumentElement(element);
+  const visualViewport = win.visualViewport;
+  let width = html3.clientWidth;
+  let height = html3.clientHeight;
+  let x = 0;
+  let y = 0;
+  if (visualViewport) {
+    width = visualViewport.width;
+    height = visualViewport.height;
+    const visualViewportBased = isWebKit();
+    if (!visualViewportBased || visualViewportBased && strategy === "fixed") {
+      x = visualViewport.offsetLeft;
+      y = visualViewport.offsetTop;
     }
+  }
+  return {
+    width,
+    height,
+    x,
+    y
+  };
+}
+function getInnerBoundingClientRect(element, strategy) {
+  const clientRect = getBoundingClientRect(element, true, strategy === "fixed");
+  const top = clientRect.top + element.clientTop;
+  const left = clientRect.left + element.clientLeft;
+  const scale = isHTMLElement(element) ? getScale(element) : createCoords(1);
+  const width = element.clientWidth * scale.x;
+  const height = element.clientHeight * scale.y;
+  const x = left * scale.x;
+  const y = top * scale.y;
+  return {
+    width,
+    height,
+    x,
+    y
+  };
+}
+function getClientRectFromClippingAncestor(element, clippingAncestor, strategy) {
+  let rect;
+  if (clippingAncestor === "viewport") {
+    rect = getViewportRect(element, strategy);
+  } else if (clippingAncestor === "document") {
+    rect = getDocumentRect(getDocumentElement(element));
+  } else if (isElement(clippingAncestor)) {
+    rect = getInnerBoundingClientRect(clippingAncestor, strategy);
+  } else {
+    const visualOffsets = getVisualOffsets(element);
+    rect = __spreadProps(__spreadValues({}, clippingAncestor), {
+      x: clippingAncestor.x - visualOffsets.x,
+      y: clippingAncestor.y - visualOffsets.y
+    });
+  }
+  return rectToClientRect(rect);
+}
+function hasFixedPositionAncestor(element, stopNode) {
+  const parentNode = getParentNode(element);
+  if (parentNode === stopNode || !isElement(parentNode) || isLastTraversableNode(parentNode)) {
     return false;
-  }(t3, n3) && "body" !== r2(t3)) : [];
-}
-var D2 = { getClippingRect: function(t2) {
-  let { element: e2, boundary: n3, rootBoundary: o3, strategy: i3 } = t2;
-  const r3 = [..."clippingAncestors" === n3 ? S(e2) : [].concat(n3), o3], l3 = r3[0], c3 = r3.reduce((t3, n4) => {
-    const o4 = C(e2, n4, i3);
-    return t3.top = p2(o4.top, t3.top), t3.right = g2(o4.right, t3.right), t3.bottom = g2(o4.bottom, t3.bottom), t3.left = p2(o4.left, t3.left), t3;
-  }, C(e2, l3, i3));
-  return { width: c3.right - c3.left, height: c3.bottom - c3.top, x: c3.left, y: c3.top };
-}, convertOffsetParentRelativeRectToViewportRelativeRect: function(t2) {
-  let { rect: e2, offsetParent: n3, strategy: o3 } = t2;
-  const i3 = c2(n3), l3 = v2(n3);
-  if (n3 === l3)
-    return e2;
-  let f3 = { scrollLeft: 0, scrollTop: 0 };
-  const s3 = { x: 0, y: 0 };
-  if ((i3 || !i3 && "fixed" !== o3) && (("body" !== r2(n3) || u2(l3)) && (f3 = y2(n3)), c2(n3))) {
-    const t3 = w2(n3, true);
-    s3.x = t3.x + n3.clientLeft, s3.y = t3.y + n3.clientTop;
-  }
-  return __spreadProps(__spreadValues({}, e2), { x: e2.x - f3.scrollLeft + s3.x, y: e2.y - f3.scrollTop + s3.y });
-}, isElement: f2, getDimensions: W, getOffsetParent: T2, getDocumentElement: v2, getElementRects: (t2) => {
-  let { reference: e2, floating: n3, strategy: o3 } = t2;
-  return { reference: b2(e2, T2(n3), o3), floating: __spreadProps(__spreadValues({}, W(n3)), { x: 0, y: 0 }) };
-}, getClientRects: (t2) => Array.from(t2.getClientRects()), isRTL: (t2) => "rtl" === i2(t2).direction };
-var z = (t2, n3, o3) => o(t2, n3, __spreadValues({ platform: D2 }, o3));
+  }
+  return getComputedStyle(parentNode).position === "fixed" || hasFixedPositionAncestor(parentNode, stopNode);
+}
+function getClippingElementAncestors(element, cache2) {
+  const cachedResult = cache2.get(element);
+  if (cachedResult) {
+    return cachedResult;
+  }
+  let result = getOverflowAncestors(element, [], false).filter((el) => isElement(el) && getNodeName(el) !== "body");
+  let currentContainingBlockComputedStyle = null;
+  const elementIsFixed = getComputedStyle(element).position === "fixed";
+  let currentNode = elementIsFixed ? getParentNode(element) : element;
+  while (isElement(currentNode) && !isLastTraversableNode(currentNode)) {
+    const computedStyle = getComputedStyle(currentNode);
+    const currentNodeIsContaining = isContainingBlock(currentNode);
+    if (!currentNodeIsContaining && computedStyle.position === "fixed") {
+      currentContainingBlockComputedStyle = null;
+    }
+    const shouldDropCurrentNode = elementIsFixed ? !currentNodeIsContaining && !currentContainingBlockComputedStyle : !currentNodeIsContaining && computedStyle.position === "static" && !!currentContainingBlockComputedStyle && ["absolute", "fixed"].includes(currentContainingBlockComputedStyle.position) || isOverflowElement(currentNode) && !currentNodeIsContaining && hasFixedPositionAncestor(element, currentNode);
+    if (shouldDropCurrentNode) {
+      result = result.filter((ancestor) => ancestor !== currentNode);
+    } else {
+      currentContainingBlockComputedStyle = computedStyle;
+    }
+    currentNode = getParentNode(currentNode);
+  }
+  cache2.set(element, result);
+  return result;
+}
+function getClippingRect(_ref) {
+  let {
+    element,
+    boundary,
+    rootBoundary,
+    strategy
+  } = _ref;
+  const elementClippingAncestors = boundary === "clippingAncestors" ? getClippingElementAncestors(element, this._c) : [].concat(boundary);
+  const clippingAncestors = [...elementClippingAncestors, rootBoundary];
+  const firstClippingAncestor = clippingAncestors[0];
+  const clippingRect = clippingAncestors.reduce((accRect, clippingAncestor) => {
+    const rect = getClientRectFromClippingAncestor(element, clippingAncestor, strategy);
+    accRect.top = max(rect.top, accRect.top);
+    accRect.right = min(rect.right, accRect.right);
+    accRect.bottom = min(rect.bottom, accRect.bottom);
+    accRect.left = max(rect.left, accRect.left);
+    return accRect;
+  }, getClientRectFromClippingAncestor(element, firstClippingAncestor, strategy));
+  return {
+    width: clippingRect.right - clippingRect.left,
+    height: clippingRect.bottom - clippingRect.top,
+    x: clippingRect.left,
+    y: clippingRect.top
+  };
+}
+function getDimensions(element) {
+  const {
+    width,
+    height
+  } = getCssDimensions(element);
+  return {
+    width,
+    height
+  };
+}
+function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
+  const isOffsetParentAnElement = isHTMLElement(offsetParent);
+  const documentElement = getDocumentElement(offsetParent);
+  const isFixed = strategy === "fixed";
+  const rect = getBoundingClientRect(element, true, isFixed, offsetParent);
+  let scroll = {
+    scrollLeft: 0,
+    scrollTop: 0
+  };
+  const offsets = createCoords(0);
+  if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
+    if (getNodeName(offsetParent) !== "body" || isOverflowElement(documentElement)) {
+      scroll = getNodeScroll(offsetParent);
+    }
+    if (isOffsetParentAnElement) {
+      const offsetRect = getBoundingClientRect(offsetParent, true, isFixed, offsetParent);
+      offsets.x = offsetRect.x + offsetParent.clientLeft;
+      offsets.y = offsetRect.y + offsetParent.clientTop;
+    } else if (documentElement) {
+      offsets.x = getWindowScrollBarX(documentElement);
+    }
+  }
+  const x = rect.left + scroll.scrollLeft - offsets.x;
+  const y = rect.top + scroll.scrollTop - offsets.y;
+  return {
+    x,
+    y,
+    width: rect.width,
+    height: rect.height
+  };
+}
+function getTrueOffsetParent(element, polyfill) {
+  if (!isHTMLElement(element) || getComputedStyle(element).position === "fixed") {
+    return null;
+  }
+  if (polyfill) {
+    return polyfill(element);
+  }
+  return element.offsetParent;
+}
+function getOffsetParent(element, polyfill) {
+  const window2 = getWindow(element);
+  if (!isHTMLElement(element) || isTopLayer(element)) {
+    return window2;
+  }
+  let offsetParent = getTrueOffsetParent(element, polyfill);
+  while (offsetParent && isTableElement(offsetParent) && getComputedStyle(offsetParent).position === "static") {
+    offsetParent = getTrueOffsetParent(offsetParent, polyfill);
+  }
+  if (offsetParent && (getNodeName(offsetParent) === "html" || getNodeName(offsetParent) === "body" && getComputedStyle(offsetParent).position === "static" && !isContainingBlock(offsetParent))) {
+    return window2;
+  }
+  return offsetParent || getContainingBlock(element) || window2;
+}
+var getElementRects = async function(data) {
+  const getOffsetParentFn = this.getOffsetParent || getOffsetParent;
+  const getDimensionsFn = this.getDimensions;
+  return {
+    reference: getRectRelativeToOffsetParent(data.reference, await getOffsetParentFn(data.floating), data.strategy),
+    floating: __spreadValues({
+      x: 0,
+      y: 0
+    }, await getDimensionsFn(data.floating))
+  };
+};
+function isRTL(element) {
+  return getComputedStyle(element).direction === "rtl";
+}
+var platform = {
+  convertOffsetParentRelativeRectToViewportRelativeRect,
+  getDocumentElement,
+  getClippingRect,
+  getOffsetParent,
+  getElementRects,
+  getClientRects,
+  getDimensions,
+  getScale,
+  isElement,
+  isRTL
+};
+var autoPlacement2 = autoPlacement;
+var shift2 = shift;
+var flip2 = flip;
+var arrow2 = arrow;
+var computePosition2 = (reference, floating, options) => {
+  const cache2 = /* @__PURE__ */ new Map();
+  const mergedOptions = __spreadValues({
+    platform
+  }, options);
+  const platformWithCache = __spreadProps(__spreadValues({}, mergedOptions.platform), {
+    _c: cache2
+  });
+  return computePosition(reference, floating, __spreadProps(__spreadValues({}, mergedOptions), {
+    platform: platformWithCache
+  }));
+};
 
-// node_modules/.pnpm/@warp-ds+core@1.0.2/node_modules/@warp-ds/core/dist/attention/utils/helpers.js
+// node_modules/.pnpm/@warp-ds+core@1.1.0_@floating-ui+dom@1.6.3/node_modules/@warp-ds/core/dist/attention/utils/helpers.js
+var TOP_START = "top-start";
 var TOP = "top";
+var TOP_END = "top-end";
+var RIGHT_START = "right-start";
+var RIGHT = "right";
+var RIGHT_END = "right-end";
+var BOTTOM_START = "bottom-start";
 var BOTTOM = "bottom";
+var BOTTOM_END = "bottom-end";
+var LEFT_START = "left-start";
 var LEFT = "left";
-var RIGHT = "right";
+var LEFT_END = "left-end";
+var directions = [
+  TOP_START,
+  TOP,
+  TOP_END,
+  RIGHT_START,
+  RIGHT,
+  RIGHT_END,
+  BOTTOM_START,
+  BOTTOM,
+  BOTTOM_END,
+  LEFT_START,
+  LEFT,
+  LEFT_END
+];
 var opposites = {
+  [TOP_START]: BOTTOM_START,
   [TOP]: BOTTOM,
+  [TOP_END]: BOTTOM_END,
+  [BOTTOM_START]: TOP_START,
   [BOTTOM]: TOP,
+  [BOTTOM_END]: TOP_END,
+  [LEFT_START]: RIGHT_START,
   [LEFT]: RIGHT,
-  [RIGHT]: LEFT
-};
-var arrowLabels = {
-  [TOP]: "\u2191",
-  [BOTTOM]: "\u2193",
-  [LEFT]: "\u2190",
-  [RIGHT]: "\u2192"
+  [LEFT_END]: RIGHT_END,
+  [RIGHT_START]: LEFT_START,
+  [RIGHT]: LEFT,
+  [RIGHT_END]: LEFT_END
 };
 var rotation = {
+  [LEFT_START]: -45,
   [LEFT]: -45,
+  [LEFT_END]: -45,
+  [TOP_START]: 45,
   [TOP]: 45,
+  [TOP_END]: 45,
+  [RIGHT_START]: 135,
   [RIGHT]: 135,
-  [BOTTOM]: -135
+  [RIGHT_END]: 135,
+  [BOTTOM_START]: -135,
+  [BOTTOM]: -135,
+  [BOTTOM_END]: -135
 };
 var middlePosition = "calc(50% - 7px)";
-var isDirectionVertical = (name) => [TOP, BOTTOM].includes(name);
-function computeCalloutArrow({ actualDirection, directionName, arrowEl }) {
+var isDirectionVertical = (name) => [TOP_START, TOP, TOP_END, BOTTOM_START, BOTTOM, BOTTOM_END].includes(name);
+var arrowDirectionClassname = (dir) => {
+  let direction;
+  if (/-/.test(dir)) {
+    direction = dir.split("-").map((d) => d.charAt(0).toUpperCase() + d.slice(1)).join("");
+  } else {
+    direction = dir.charAt(0).toUpperCase() + dir.slice(1);
+  }
+  return direction;
+};
+var side = (dir) => dir.split("-")[0];
+var staticSide = (dir) => opposites[side(dir)];
+var arrowDirection = (dir) => opposites[dir];
+var arrowRotation = (dir) => rotation[arrowDirection(dir)];
+var applyArrowStyles = (arrowEl, arrowRotation2, dir) => {
+  Object.assign(arrowEl == null ? void 0 : arrowEl.style, {
+    borderTopLeftRadius: "4px",
+    zIndex: 1,
+    // border alignment is off by a fraction of a pixel, this fixes it
+    [`margin${arrowDirectionClassname(staticSide(dir))}`]: "-0.5px",
+    transform: `rotate(${arrowRotation2}deg)`
+  });
+};
+function computeCalloutArrow({ actualDirection, directionName = BOTTOM, arrowEl }) {
   if (!arrowEl)
     return;
   actualDirection = directionName;
   const directionIsVertical = isDirectionVertical(directionName);
-  arrowEl.style.left = directionIsVertical ? middlePosition : "";
-  arrowEl.style.top = !directionIsVertical ? middlePosition : "";
+  Object.assign((arrowEl == null ? void 0 : arrowEl.style) || {}, {
+    left: directionIsVertical ? middlePosition : "",
+    top: !directionIsVertical ? middlePosition : ""
+  });
+  applyArrowStyles(arrowEl, arrowRotation(actualDirection), actualDirection);
 }
 async function useRecompute(state) {
-  var _a, _b;
-  if (!state.isShowing)
+  var _a, _b, _c;
+  if (!(state == null ? void 0 : state.isShowing))
     return;
-  await ((_a = state == null ? void 0 : state.waitForDOM) == null ? void 0 : _a.call(state));
-  if (state.isCallout)
+  if (state == null ? void 0 : state.waitForDOM) {
+    await (state == null ? void 0 : state.waitForDOM());
+  }
+  if (state == null ? void 0 : state.isCallout)
     return computeCalloutArrow(state);
-  const position = await z(state.targetEl, state.attentionEl, {
-    placement: state.directionName,
+  if (!(state == null ? void 0 : state.targetEl) || !(state == null ? void 0 : state.attentionEl))
+    return;
+  const targetEl = state == null ? void 0 : state.targetEl;
+  const attentionEl = state == null ? void 0 : state.attentionEl;
+  computePosition2(targetEl, attentionEl, {
+    placement: (_a = state == null ? void 0 : state.directionName) != null ? _a : BOTTOM,
     middleware: [
-      // Should we make this configurable, but have these as sane defaults?
-      b(),
-      T(8),
-      D({ padding: 16 }),
-      // @ts-ignore
-      m({ element: state.noArrow ? void 0 : state.arrowEl })
-      // FIXME
+      offset({ mainAxis: (_b = state == null ? void 0 : state.distance) != null ? _b : 8, crossAxis: (_c = state == null ? void 0 : state.skidding) != null ? _c : 0 }),
+      (state == null ? void 0 : state.flip) && flip2({
+        fallbackAxisSideDirection: "start",
+        fallbackPlacements: state == null ? void 0 : state.fallbackPlacements
+      }),
+      !(state == null ? void 0 : state.flip) && autoPlacement2(),
+      shift2({ padding: 16 }),
+      !(state == null ? void 0 : state.noArrow) && (state == null ? void 0 : state.arrowEl) && arrow2({ element: state == null ? void 0 : state.arrowEl })
     ]
+  }).then(({ x, y, middlewareData, placement }) => {
+    state.actualDirection = placement;
+    Object.assign(attentionEl == null ? void 0 : attentionEl.style, {
+      left: `${x}px`,
+      top: `${y}px`
+    });
+    const isRtl = window.getComputedStyle(attentionEl).direction === "rtl";
+    const arrowPlacement = arrowDirection(placement).split("-")[1];
+    if ((middlewareData == null ? void 0 : middlewareData.arrow) && (state == null ? void 0 : state.arrowEl)) {
+      const arrowEl = state == null ? void 0 : state.arrowEl;
+      const { x: x2, y: y2 } = middlewareData == null ? void 0 : middlewareData.arrow;
+      let top = "";
+      let right = "";
+      let bottom = "";
+      let left = "";
+      if (arrowPlacement === "start") {
+        const value = typeof x2 === "number" ? `calc(33px - ${(arrowEl == null ? void 0 : arrowEl.offsetWidth) / 2}px)` : "";
+        top = typeof y2 === "number" ? `calc(33px -  ${(arrowEl == null ? void 0 : arrowEl.offsetWidth) / 2}px)` : "";
+        right = isRtl ? value : "";
+        left = isRtl ? "" : value;
+      } else if (arrowPlacement === "end") {
+        const value = typeof x2 === "number" ? `calc(33px - ${(arrowEl == null ? void 0 : arrowEl.offsetWidth) / 2}px)` : "";
+        right = isRtl ? "" : value;
+        left = isRtl ? value : "";
+        bottom = typeof y2 === "number" ? `calc(33px - ${(arrowEl == null ? void 0 : arrowEl.offsetWidth) / 2}px)` : "";
+      } else {
+        left = typeof x2 === "number" ? `${x2}px` : "";
+        top = typeof y2 === "number" ? `${y2}px` : "";
+      }
+      Object.assign((arrowEl == null ? void 0 : arrowEl.style) || {}, {
+        top,
+        right,
+        bottom,
+        left
+      });
+      applyArrowStyles(arrowEl, arrowRotation(placement), placement);
+    }
   });
-  state.actualDirection = position.placement;
-  Object.assign(((_b = state.attentionEl) == null ? void 0 : _b.style) || {}, {
-    left: "0",
-    top: "0",
-    transform: `translate3d(${Math.round(position.x)}px, ${Math.round(position.y)}px, 0)`
-  });
-  let { x: x3, y: y3 } = position.middlewareData.arrow;
-  if (state.arrowEl) {
-    state.arrowEl.style.left = x3 ? x3 + "px" : "";
-    state.arrowEl.style.top = y3 ? y3 + "px" : "";
-  }
+  return state;
 }
 
 // node_modules/.pnpm/@lingui+core@4.7.1/node_modules/@lingui/core/dist/index.mjs
@@ -1778,7 +2765,7 @@ function processTokens(tokens, mapText) {
         return [token.arg, token.key];
       }
     }
-    const offset = token.pluralOffset;
+    const offset2 = token.pluralOffset;
     const formatProps = {};
     token.cases.forEach((item) => {
       formatProps[item.key.replace(/^=(.)+/, "$1")] = processTokens(
@@ -1790,16 +2777,16 @@ function processTokens(tokens, mapText) {
       token.arg,
       token.type,
       __spreadValues({
-        offset
+        offset: offset2
       }, formatProps)
     ];
   });
 }
-function compileMessage(message, mapText = (v3) => v3) {
+function compileMessage(message, mapText = (v) => v) {
   try {
     return processTokens((0, import_parser.parse)(message), mapText);
-  } catch (e2) {
-    console.error(`${e2.message} 
+  } catch (e) {
+    console.error(`${e.message} 
 
 Message: ${message}`);
     return message;
@@ -1807,8 +2794,8 @@ Message: ${message}`);
 }
 
 // node_modules/.pnpm/@lingui+core@4.7.1/node_modules/@lingui/core/dist/index.mjs
-var isString = (s3) => typeof s3 === "string";
-var isFunction = (f3) => typeof f3 === "function";
+var isString = (s) => typeof s === "string";
+var isFunction = (f) => typeof f === "function";
 var cache = /* @__PURE__ */ new Map();
 var defaultLocale = "en";
 function normalizeLocales(locales) {
@@ -1832,7 +2819,7 @@ function number(locales, value, format) {
   return formatter.format(value);
 }
 function plural(locales, ordinal, value, _a) {
-  var _b = _a, { offset = 0 } = _b, rules = __objRest(_b, ["offset"]);
+  var _b = _a, { offset: offset2 = 0 } = _b, rules = __objRest(_b, ["offset"]);
   var _a2, _b2;
   const _locales = normalizeLocales(locales);
   const plurals = ordinal ? getMemoized(
@@ -1842,7 +2829,7 @@ function plural(locales, ordinal, value, _a) {
     () => cacheKey("plural-cardinal", _locales),
     () => new Intl.PluralRules(_locales, { type: "cardinal" })
   );
-  return (_b2 = (_a2 = rules[value]) != null ? _a2 : rules[plurals.select(value - offset)]) != null ? _b2 : rules.other;
+  return (_b2 = (_a2 = rules[value]) != null ? _a2 : rules[plurals.select(value - offset2)]) != null ? _b2 : rules.other;
 }
 function getMemoized(getKey, construct) {
   const key = getKey();
@@ -1871,14 +2858,14 @@ var getDefaultFormats = (locale, passedLocales, formats = {}) => {
   };
   return {
     plural: (value, cases) => {
-      const { offset = 0 } = cases;
+      const { offset: offset2 = 0 } = cases;
       const message = plural(locales, false, value, cases);
-      return replaceOctothorpe(value - offset, message);
+      return replaceOctothorpe(value - offset2, message);
     },
     selectordinal: (value, cases) => {
-      const { offset = 0 } = cases;
+      const { offset: offset2 = 0 } = cases;
       const message = plural(locales, true, value, cases);
-      return replaceOctothorpe(value - offset, message);
+      return replaceOctothorpe(value - offset2, message);
     },
     select: selectFormatter,
     number: (value, format) => number(locales, value, style(format)),
@@ -2140,8 +3127,8 @@ function detectLocale() {
   try {
     const htmlLocale = document.documentElement.lang;
     return getSupportedLocale(htmlLocale);
-  } catch (e2) {
-    console.warn("could not detect locale, falling back to source locale", e2);
+  } catch (e) {
+    console.warn("could not detect locale, falling back to source locale", e);
     return defaultLocale2;
   }
 }
@@ -2221,8 +3208,8 @@ function detectLocale2() {
       return getSupportedLocale2(hostLocale);
     }
     return getSupportedLocale2(htmlLocale != null ? htmlLocale : hostLocale);
-  } catch (e2) {
-    console.warn("could not detect locale, falling back to source locale", e2);
+  } catch (e) {
+    console.warn("could not detect locale, falling back to source locale", e);
     return defaultLocale3;
   }
 }
@@ -2255,30 +3242,128 @@ var WarpAttention = class extends kebabCaseAttributes(WarpElement) {
   constructor() {
     super();
     activateI18n(messages, messages2, messages3);
+    this.handleDone = this.handleDone.bind(this);
     this.show = false;
+    this.placement = "bottom";
     this.tooltip = false;
     this.callout = false;
     this.popover = false;
     this.highlight = false;
     this.canClose = false;
     this.noArrow = false;
+    this.distance = 8;
+    this.skidding = 0;
+    this.flip = false;
+    this._initialPlacement = this.placement;
+    this._actualDirection = this.placement;
   }
   connectedCallback() {
     super.connectedCallback();
-    if (!this.placement || !Object.keys(opposites).includes(this.placement)) {
+    if (this.placement && !Object.keys(opposites).includes(this.placement)) {
       throw new Error(`Invalid "placement" attribute. Set its value to one of the following:
 ${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)}`);
     }
     setTimeout(() => this.requestUpdate(), 0);
+    if (!this.callout) {
+      window.addEventListener("click", this.handleDone);
+      window.addEventListener("scroll", this.handleDone);
+      window.addEventListener("resize", this.handleDone);
+      window.addEventListener("touch", this.handleDone);
+    }
+    if (this.tooltip) {
+      window.addEventListener("mouseover", this.handleDone);
+      window.addEventListener("mouseout", this.handleDone);
+    }
+  }
+  disconnectedCallback() {
+    window.removeEventListener("click", this.handleDone);
+    window.removeEventListener("scroll", this.handleDone);
+    window.removeEventListener("resize", this.handleDone);
+    window.removeEventListener("touch", this.handleDone);
+    window.removeEventListener("mouseover", this.handleDone);
+    window.removeEventListener("mouseout", this.handleDone);
+    super.disconnectedCallback();
+  }
+  handleDone() {
+    window.requestAnimationFrame(() => {
+      if (this.show && this._targetEl && this._attentionEl) {
+        useRecompute(this.attentionState).then((state) => {
+          this._actualDirection = state == null ? void 0 : state.actualDirection;
+        });
+      } else {
+        this._actualDirection = this._initialPlacement;
+      }
+    });
   }
   get _actualDirection() {
     return this.placement;
   }
-  set _actualDirection(v3) {
-    this.placement = v3;
+  set _actualDirection(v) {
+    this.placement = v;
+  }
+  get _arrowEl() {
+    return this.renderRoot.querySelector("#arrow");
   }
   get _arrowDirection() {
-    return opposites[this.placement];
+    return opposites[this._actualDirection];
+  }
+  get _arrowClasses() {
+    return classes({
+      [attention.arrowBase]: true,
+      [attention[`arrowDirection${arrowDirectionClassname(this._arrowDirection)}`]]: true,
+      [this._activeVariantClasses.arrow]: true
+    });
+  }
+  get _arrowHtml() {
+    return this.noArrow ? "" : html2`<div id="arrow" role="img" class="${this._arrowClasses}" />`;
+  }
+  get _activeVariantClasses() {
+    const variantProps = {
+      callout: this.callout,
+      popover: this.popover,
+      tooltip: this.tooltip,
+      highlight: this.highlight
+    };
+    const activeVariant = Object.keys(variantProps).find((b) => !!variantProps[b]) || "";
+    return {
+      wrapper: attention[activeVariant],
+      arrow: attention[`arrow${activeVariant.charAt(0).toUpperCase() + activeVariant.slice(1)}`]
+    };
+  }
+  get _attentionEl() {
+    return this.renderRoot.querySelector("#attention");
+  }
+  get _targetEl() {
+    const targetSlot = this.renderRoot.querySelector("slot[name='target']");
+    return targetSlot ? targetSlot.assignedNodes()[0] : null;
+  }
+  get _messageEl() {
+    const messageSlot = this.renderRoot.querySelector("slot[name='message']");
+    return messageSlot ? messageSlot.assignedNodes()[0] : null;
+  }
+  get _wrapperClasses() {
+    return classes({
+      [attention.base]: true,
+      [this._activeVariantClasses.wrapper]: true
+    });
+  }
+  get _ariaClose() {
+    return i18n._({
+      id: "attention.aria.close",
+      message: "Close",
+      comment: "Aria label for the close button in attention"
+    });
+  }
+  get _closeBtnHtml() {
+    return html2`
+      <button aria-label="${this._ariaClose}" @click="${this.close}" @keydown=${this.keypressed} class="${attention.closeBtn}">
+        <w-icon-close-16 />
+      </button>
+    `;
   }
   updated() {
     if (!this.callout) {
@@ -2292,34 +3377,46 @@ ${JSON.stringify(Object.keys(opposites))}`);
       isCallout: this.callout,
       actualDirection: this._actualDirection,
       directionName: this.placement,
-      arrowEl: this.renderRoot.querySelector("#arrow"),
+      arrowEl: this._arrowEl,
       attentionEl: this._attentionEl,
       targetEl: this._targetEl,
-      noArrow: this.noArrow
+      noArrow: this.noArrow,
+      distance: this.distance,
+      skidding: this.skidding,
+      flip: this.flip,
+      fallbackPlacements: this.fallbackPlacements
     };
     useRecompute(this.attentionState);
   }
   pointingAtDirection() {
     switch (opposites[this._actualDirection]) {
+      case "top-start":
       case "top":
+      case "top-end":
         return i18n._({
           id: "attention.aria.pointingUp",
           message: "pointing up",
           comment: "Default screenreader message for top direction in the attention component"
         });
+      case "right-start":
       case "right":
+      case "right-end":
         return i18n._({
           id: "attention.aria.pointingRight",
           message: "pointing right",
           comment: "Default screenreader message for right direction in the attention component"
         });
+      case "bottom-start":
       case "bottom":
+      case "bottom-end":
         return i18n._({
           id: "attention.aria.pointingDown",
           message: "pointing down",
           comment: "Default screenreader message for bottom direction in the attention component"
         });
+      case "left-start":
       case "left":
+      case "left-end":
         return i18n._({
           id: "attention.aria.pointingLeft",
           message: "pointing left",
@@ -2368,64 +3465,13 @@ ${JSON.stringify(Object.keys(opposites))}`);
       this._targetEl.setAttribute("aria-details", attentionMessageId);
     }
   }
-  get _activeVariantClasses() {
-    const variantProps = {
-      callout: this.callout,
-      popover: this.popover,
-      tooltip: this.tooltip,
-      highlight: this.highlight
-    };
-    const activeVariant = Object.keys(variantProps).find((b3) => !!variantProps[b3]) || "";
-    return {
-      wrapper: attention[activeVariant],
-      arrow: attention[`arrow${activeVariant.charAt(0).toUpperCase() + activeVariant.slice(1)}`]
-    };
-  }
-  get _ariaClose() {
-    return i18n._({
-      id: "attention.aria.close",
-      message: "Close",
-      comment: "Aria label for the close button in attention"
-    });
-  }
   firstUpdated() {
+    this._initialPlacement = this.placement;
     this.setAriaLabels();
     if (this.callout) {
       this._attentionEl.style.position = "relative";
     }
   }
-  get _attentionEl() {
-    return this.renderRoot.querySelector("#attention");
-  }
-  get _targetEl() {
-    return this.renderRoot.querySelector("slot[name='target']").assignedNodes()[0];
-  }
-  get _messageEl() {
-    return this.renderRoot.querySelector("slot[name='message']").assignedNodes()[0];
-  }
-  get _wrapperClasses() {
-    return classes({
-      [attention.base]: true,
-      [this._activeVariantClasses.wrapper]: true
-    });
-  }
-  get _arrowClasses() {
-    return classes({
-      [attention.arrowBase]: true,
-      [attention[`arrowDirection${this._arrowDirection.charAt(0).toUpperCase() + this._arrowDirection.slice(1)}`]]: true,
-      [this._activeVariantClasses.arrow]: true
-    });
-  }
-  get _arrowHtml() {
-    return this.noArrow ? "" : html2`<div
-          id="arrow"
-          role="img"
-          class="${this._arrowClasses}"
-          style="transform:rotate(${rotation[this._arrowDirection]}deg);
-          margin-${// border alignment is off by a fraction of a pixel, this fixes it
-    this._arrowDirection.charAt(0).toLowerCase() + this._arrowDirection.slice(1)}:-0.5px;"
-        />`;
-  }
   close() {
     const event = new CustomEvent("close", {
       bubbles: true,
@@ -2433,25 +3479,18 @@ ${JSON.stringify(Object.keys(opposites))}`);
     });
     this.updateComplete.then(() => this.dispatchEvent(event));
   }
-  keypressed(e2) {
+  keypressed(e) {
     if (!this.canClose)
       return;
-    if (e2.key === "Escape") {
-      e2.preventDefault();
+    if (e.key === "Escape") {
+      e.preventDefault();
       this.close();
     }
   }
-  get _closeBtnHtml() {
-    return html2`
-      <button aria-label="${this._ariaClose}" @click="${this.close}" @keydown=${this.keypressed} class="${attention.closeBtn}">
-        <w-icon-close-16 />
-      </button>
-    `;
-  }
   render() {
     return html2`
       <div class=${ifDefined(this.className ? this.className : void 0)}>
-        ${this.placement === "right" || this.placement === "bottom" ? html2`
+        ${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}">
@@ -2475,7 +3514,7 @@ __publicField(WarpAttention, "properties", {
   show: { type: Boolean, reflect: true },
   // Placement according to the target element
   // Arrow would be on the opposite side of this position
-  placement: { type: String },
+  placement: { type: String, reflect: true },
   // Whether Attention element is rendered as a tooltip
   tooltip: { type: Boolean, reflect: true },
   // Whether Attention element is rendered as an inline callout
@@ -2487,7 +3526,15 @@ __publicField(WarpAttention, "properties", {
   // Render Attention element with a close button
   canClose: { type: Boolean, reflect: true },
   // Render Attention element without an arrow
-  noArrow: { type: Boolean, reflect: true }
+  noArrow: { type: Boolean, reflect: true },
+  // Distance from which to offset the attentionEl from the targetEl vertically
+  distance: { type: Number, reflect: true },
+  // Distance from which to offset the attentionEl along its targetEl horizontally
+  skidding: { type: Number, reflect: true },
+  // Whether Attention element should flip its placement in order to keep it in view
+  flip: { type: Boolean, reflect: true },
+  // Choose which preferred placements the Attention element should flip to
+  fallbackPlacements: { type: Array, reflect: true }
 });
 __publicField(WarpAttention, "styles", [
   WarpElement.styles,
@@ -2502,11 +3549,6 @@ __publicField(WarpAttention, "styles", [
       :host([popover]:not(:popover-open):not(dialog[open])) {
         display: contents;
       }
-
-      #arrow {
-        border-top-left-radius: 4px;
-        z-index: 1;
-      }
     `
 ]);
 if (!customElements.get("w-attention")) {