@getflip/swirl-components-react 0.55.0 → 0.56.1

package/dist/{swirl-modal.entry.1ec4a756.js → swirl-modal.entry.9ce7be64.js}

@@ -1,4 +1,4 @@
-import { r as ie, c as x, h as m, H as ne, g as se } from "./index.f913dab2.js";
+import { r as ie, c as E, h as m, H as ne, g as se } from "./index.20393dfd.js";
 import { d as le, e as de } from "./bodyScrollLock.esm-ce6356d8.2c600fb9.js";
 import { c as ce } from "./index-d280dafb.186cdb0e.js";
 import "react";
@@ -25,10 +25,10 @@ var Z = ["input", "select", "textarea", "a[href]", "button", "[tabindex]:not(slo
         candidates: b
       });
     } else {
-      var S = T.call(r, A);
-      S && a.filter(r) && (t || !e.includes(r)) && s.push(r);
-      var w = r.shadowRoot || typeof a.getShadowRoot == "function" && a.getShadowRoot(r), _ = !a.shadowRootFilter || a.shadowRootFilter(r);
-      if (w && _) {
+      var C = T.call(r, A);
+      C && a.filter(r) && (t || !e.includes(r)) && s.push(r);
+      var w = r.shadowRoot || typeof a.getShadowRoot == "function" && a.getShadowRoot(r), S = !a.shadowRootFilter || a.shadowRootFilter(r);
+      if (w && S) {
         var y = n(w === !0 ? r.children : w.children, !0, a);
         a.flatten ? s.push.apply(s, y) : s.push({
           scopeParent: r,
@@ -82,7 +82,7 @@ var Z = ["input", "select", "textarea", "a[href]", "button", "[tabindex]:not(slo
     a = R(a).host, s = !!((l = a) !== null && l !== void 0 && l.ownerDocument.contains(a));
   }
   return s;
-}, z = function(e) {
+}, K = function(e) {
   var t = e.getBoundingClientRect(), a = t.width, s = t.height;
   return a === 0 && s === 0;
 }, we = function(e, t) {
@@ -97,7 +97,7 @@ var Z = ["input", "select", "textarea", "a[href]", "button", "[tabindex]:not(slo
       for (var c = e; e; ) {
         var u = e.parentElement, b = R(e);
         if (u && !u.shadowRoot && s(u) === !0)
-          return z(e);
+          return K(e);
         e.assignedSlot ? e = e.assignedSlot : !u && b !== e.ownerDocument ? e = b.host : e = u;
       }
       e = c;
@@ -107,7 +107,7 @@ var Z = ["input", "select", "textarea", "a[href]", "button", "[tabindex]:not(slo
     if (a !== "legacy-full")
       return !0;
   } else if (a === "non-zero-area")
-    return z(e);
+    return K(e);
   return !1;
 }, ye = function(e) {
   if (/^(INPUT|BUTTON|SELECT|TEXTAREA)$/.test(e.tagName))
@@ -127,10 +127,10 @@ var Z = ["input", "select", "textarea", "a[href]", "button", "[tabindex]:not(slo
   return !(t.disabled || fe(t) || we(t, e) || he(t) || ye(t));
 }, B = function(e, t) {
   return !(pe(t) || ee(t) < 0 || !O(e, t));
-}, Ce = function(e) {
+}, _e = function(e) {
   var t = parseInt(e.getAttribute("tabindex"), 10);
   return !!(isNaN(t) || t >= 0);
-}, Se = function n(e) {
+}, Ce = function n(e) {
   var t = [], a = [];
   return e.forEach(function(s, l) {
     var r = !!s.scopeParent, c = r ? s.scopeParent : s, u = ee(c, r), b = r ? n(s.candidates) : c;
@@ -144,15 +144,15 @@ var Z = ["input", "select", "textarea", "a[href]", "button", "[tabindex]:not(slo
   }), a.sort(ue).reduce(function(s, l) {
     return l.isScope ? s.push.apply(s, l.content) : s.push(l.content), s;
   }, []).concat(t);
-}, _e = function(e, t) {
+}, Se = function(e, t) {
   t = t || {};
   var a;
   return t.getShadowRoot ? a = Q([e], t.includeContainer, {
     filter: B.bind(null, t),
     flatten: !1,
     getShadowRoot: t.getShadowRoot,
-    shadowRootFilter: Ce
-  }) : a = J(e, t.includeContainer, B.bind(null, t)), Se(a);
+    shadowRootFilter: _e
+  }) : a = J(e, t.includeContainer, B.bind(null, t)), Ce(a);
 }, Te = function(e, t) {
   t = t || {};
   var a;
@@ -203,7 +203,7 @@ function Fe(n, e, t) {
     writable: !0
   }) : n[e] = t, n;
 }
-var Ee = [], V = {
+var xe = [], V = {
   activateTrap: function(e, t) {
     if (e.length > 0) {
       var a = e[e.length - 1];
@@ -216,7 +216,7 @@ var Ee = [], V = {
     var a = e.indexOf(t);
     a !== -1 && e.splice(a, 1), e.length > 0 && e[e.length - 1].unpause();
   }
-}, xe = function(e) {
+}, Ee = function(e) {
   return e.tagName && e.tagName.toLowerCase() === "input" && typeof e.select == "function";
 }, Ne = function(e) {
   return e.key === "Escape" || e.key === "Esc" || e.keyCode === 27;
@@ -236,7 +236,7 @@ var Ee = [], V = {
 }, D = function(e) {
   return e.target.shadowRoot && typeof e.composedPath == "function" ? e.composedPath()[0] : e.target;
 }, Ae = function(e, t) {
-  var a = (t == null ? void 0 : t.document) || document, s = (t == null ? void 0 : t.trapStack) || Ee, l = W({
+  var a = (t == null ? void 0 : t.document) || document, s = (t == null ? void 0 : t.trapStack) || xe, l = W({
     returnFocusOnDeactivate: !0,
     escapeDeactivates: !0,
     delayInitialFocus: !0
@@ -258,7 +258,7 @@ var Ee = [], V = {
         return f === o;
       });
     });
-  }, S = function(o) {
+  }, C = function(o) {
     var i = l[o];
     if (typeof i == "function") {
       for (var d = arguments.length, v = new Array(d > 1 ? d - 1 : 0), f = 1; f < d; f++)
@@ -275,7 +275,7 @@ var Ee = [], V = {
       throw new Error("`".concat(o, "` as selector refers to no known node"));
     return p;
   }, w = function() {
-    var o = S("initialFocus");
+    var o = C("initialFocus");
     if (o === !1)
       return !1;
     if (o === void 0)
@@ -283,14 +283,14 @@ var Ee = [], V = {
         o = a.activeElement;
       else {
         var i = r.tabbableGroups[0], d = i && i.firstTabbableNode;
-        o = d || S("fallbackFocus");
+        o = d || C("fallbackFocus");
       }
     if (!o)
       throw new Error("Your focus-trap needs to have at least one focusable element");
     return o;
-  }, _ = function() {
+  }, S = function() {
     if (r.containerGroups = r.containers.map(function(o) {
-      var i = _e(o, l.tabbableOptions), d = Te(o, l.tabbableOptions);
+      var i = Se(o, l.tabbableOptions), d = Te(o, l.tabbableOptions);
       return {
         container: o,
         tabbableNodes: i,
@@ -298,20 +298,20 @@ var Ee = [], V = {
         firstTabbableNode: i.length > 0 ? i[0] : null,
         lastTabbableNode: i.length > 0 ? i[i.length - 1] : null,
         nextTabbableNode: function(f) {
-          var p = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : !0, g = d.findIndex(function(C) {
-            return C === f;
+          var p = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : !0, g = d.findIndex(function(_) {
+            return _ === f;
           });
           if (!(g < 0))
-            return p ? d.slice(g + 1).find(function(C) {
-              return N(C, l.tabbableOptions);
-            }) : d.slice(0, g).reverse().find(function(C) {
-              return N(C, l.tabbableOptions);
+            return p ? d.slice(g + 1).find(function(_) {
+              return N(_, l.tabbableOptions);
+            }) : d.slice(0, g).reverse().find(function(_) {
+              return N(_, l.tabbableOptions);
             });
         }
       };
     }), r.tabbableGroups = r.containerGroups.filter(function(o) {
       return o.tabbableNodes.length > 0;
-    }), r.tabbableGroups.length <= 0 && !S("fallbackFocus"))
+    }), r.tabbableGroups.length <= 0 && !C("fallbackFocus"))
       throw new Error("Your focus-trap must have at least one container with at least one tabbable node in it at all times");
   }, y = function h(o) {
     if (o !== !1 && o !== a.activeElement) {
@@ -321,12 +321,12 @@ var Ee = [], V = {
       }
       o.focus({
         preventScroll: !!l.preventScroll
-      }), r.mostRecentlyFocusedNode = o, xe(o) && o.select();
+      }), r.mostRecentlyFocusedNode = o, Ee(o) && o.select();
     }
   }, H = function(o) {
-    var i = S("setReturnFocus", o);
+    var i = C("setReturnFocus", o);
     return i || (i === !1 ? !1 : o);
-  }, E = function(o) {
+  }, x = function(o) {
     var i = D(o);
     if (!(b(i) >= 0)) {
       if (F(l.clickOutsideDeactivates, o)) {
@@ -342,7 +342,7 @@ var Ee = [], V = {
     d || i instanceof Document ? d && (r.mostRecentlyFocusedNode = i) : (o.stopImmediatePropagation(), y(r.mostRecentlyFocusedNode || w()));
   }, ae = function(o) {
     var i = D(o);
-    _();
+    S();
     var d = null;
     if (r.tabbableGroups.length > 0) {
       var v = b(i), f = v >= 0 ? r.containerGroups[v] : void 0;
@@ -354,8 +354,8 @@ var Ee = [], V = {
           return i === L;
         });
         if (p < 0 && (f.container === i || P(i, l.tabbableOptions) && !N(i, l.tabbableOptions) && !f.nextTabbableNode(i, !1)) && (p = v), p >= 0) {
-          var g = p === 0 ? r.tabbableGroups.length - 1 : p - 1, C = r.tabbableGroups[g];
-          d = C.lastTabbableNode;
+          var g = p === 0 ? r.tabbableGroups.length - 1 : p - 1, _ = r.tabbableGroups[g];
+          d = _.lastTabbableNode;
         }
       } else {
         var k = Y(r.tabbableGroups, function(I) {
@@ -368,7 +368,7 @@ var Ee = [], V = {
         }
       }
     } else
-      d = S("fallbackFocus");
+      d = C("fallbackFocus");
     d && (o.preventDefault(), y(d));
   }, M = function(o) {
     if (Ne(o) && F(l.escapeDeactivates, o) !== !1) {
@@ -382,14 +382,14 @@ var Ee = [], V = {
   }, q = function(o) {
     var i = D(o);
     b(i) >= 0 || F(l.clickOutsideDeactivates, o) || F(l.allowOutsideClick, o) || (o.preventDefault(), o.stopImmediatePropagation());
-  }, G = function() {
+  }, z = function() {
     if (!!r.active)
       return V.activateTrap(s, c), r.delayInitialFocusTimer = l.delayInitialFocus ? $(function() {
         y(w());
-      }) : y(w()), a.addEventListener("focusin", j, !0), a.addEventListener("mousedown", E, {
+      }) : y(w()), a.addEventListener("focusin", j, !0), a.addEventListener("mousedown", x, {
         capture: !0,
         passive: !1
-      }), a.addEventListener("touchstart", E, {
+      }), a.addEventListener("touchstart", x, {
         capture: !0,
         passive: !1
       }), a.addEventListener("click", q, {
@@ -399,9 +399,9 @@ var Ee = [], V = {
         capture: !0,
         passive: !1
       }), c;
-  }, K = function() {
+  }, G = function() {
     if (!!r.active)
-      return a.removeEventListener("focusin", j, !0), a.removeEventListener("mousedown", E, !0), a.removeEventListener("touchstart", E, !0), a.removeEventListener("click", q, !0), a.removeEventListener("keydown", M, !0), c;
+      return a.removeEventListener("focusin", j, !0), a.removeEventListener("mousedown", x, !0), a.removeEventListener("touchstart", x, !0), a.removeEventListener("click", q, !0), a.removeEventListener("keydown", M, !0), c;
   };
   return c = {
     get active() {
@@ -414,9 +414,9 @@ var Ee = [], V = {
       if (r.active)
         return this;
       var i = u(o, "onActivate"), d = u(o, "onPostActivate"), v = u(o, "checkCanFocusTrap");
-      v || _(), r.active = !0, r.paused = !1, r.nodeFocusedBeforeActivation = a.activeElement, i && i();
+      v || S(), r.active = !0, r.paused = !1, r.nodeFocusedBeforeActivation = a.activeElement, i && i();
       var f = function() {
-        v && _(), G(), d && d();
+        v && S(), z(), d && d();
       };
       return v ? (v(r.containers.concat()).then(f, f), this) : (f(), this);
     },
@@ -428,7 +428,7 @@ var Ee = [], V = {
         onPostDeactivate: l.onPostDeactivate,
         checkCanReturnFocus: l.checkCanReturnFocus
       }, o);
-      clearTimeout(r.delayInitialFocusTimer), r.delayInitialFocusTimer = void 0, K(), r.active = !1, r.paused = !1, V.deactivateTrap(s, c);
+      clearTimeout(r.delayInitialFocusTimer), r.delayInitialFocusTimer = void 0, G(), r.active = !1, r.paused = !1, V.deactivateTrap(s, c);
       var d = u(i, "onDeactivate"), v = u(i, "onPostDeactivate"), f = u(i, "checkCanReturnFocus"), p = u(i, "returnFocus", "returnFocusOnDeactivate");
       d && d();
       var g = function() {
@@ -439,22 +439,22 @@ var Ee = [], V = {
       return p && f ? (f(H(r.nodeFocusedBeforeActivation)).then(g, g), this) : (g(), this);
     },
     pause: function() {
-      return r.paused || !r.active ? this : (r.paused = !0, K(), this);
+      return r.paused || !r.active ? this : (r.paused = !0, G(), this);
     },
     unpause: function() {
-      return !r.paused || !r.active ? this : (r.paused = !1, _(), G(), this);
+      return !r.paused || !r.active ? this : (r.paused = !1, S(), z(), this);
     },
     updateContainerElements: function(o) {
       var i = [].concat(o).filter(Boolean);
       return r.containers = i.map(function(d) {
         return typeof d == "string" ? a.querySelector(d) : d;
-      }), r.active && _(), this;
+      }), r.active && S(), this;
     }
   }, c.updateContainerElements(e), c;
 };
-const Re = ':host{display:block}:host *{box-sizing:border-box}.modal{--swirl-ghost-button-background-default:var(--s-surface-overlay-default);--swirl-ghost-button-background-hovered:var(--s-surface-overlay-hovered);--swirl-ghost-button-background-pressed:var(--s-surface-overlay-pressed);position:fixed;z-index:var(--s-z-40);display:flex;justify-content:center;align-items:center;inset:0}.modal[aria-hidden="true"]{display:none}.modal--variant-default.modal--closing{animation:0.15s modal-fade-out;animation-fill-mode:forwards}@media (prefers-reduced-motion){.modal--variant-default.modal--closing{animation:none}}.modal--variant-default:not(.modal--closing) .modal__backdrop{animation:0.15s modal-backdrop-fade-in}@media (prefers-reduced-motion){.modal--variant-default:not(.modal--closing) .modal__backdrop{animation:none}}.modal--variant-default:not(.modal--closing) .modal__body{animation:0.15s modal-scale-in}@media (prefers-reduced-motion){.modal--variant-default:not(.modal--closing) .modal__body{animation:none}}.modal--variant-drawer{justify-content:end;align-items:stretch}.modal--variant-drawer.modal--closing{animation:0.15s modal-drawer-slide-out;animation-fill-mode:forwards}@media (prefers-reduced-motion){.modal--variant-drawer.modal--closing{animation:none}}.modal--variant-drawer.modal--hide-label .modal__content{padding-top:calc(3.5rem + var(--s-space-8))}.modal--variant-drawer .modal__backdrop{background-color:transparent;animation:none}.modal--variant-drawer .modal__body{height:100%;max-height:none;border-radius:0;animation:0.15s modal-drawer-slide-in;box-shadow:var(--s-shadow-level-3)}@media (prefers-reduced-motion){.modal--variant-drawer .modal__body{animation:none}}.modal--variant-drawer .modal__close-button{right:auto;left:var(--s-space-8)}@media (min-width: 768px){.modal--variant-drawer .modal__close-button{left:var(--s-space-16)}}.modal--variant-drawer .modal__header{padding-left:calc(var(--s-space-8) + 2.5rem + var(--s-space-8));padding-right:var(--s-space-16)}@media (min-width: 768px){.modal--variant-drawer .modal__header{padding-top:var(--s-space-16);padding-right:var(--s-space-24);padding-left:calc(var(--s-space-16) + 2.5rem + var(--s-space-8))}}.modal--padded .modal__content{padding-top:var(--s-space-24);padding-right:var(--s-space-16);padding-bottom:var(--s-space-24);padding-left:var(--s-space-16)}@media (min-width: 768px){.modal--padded .modal__content{padding-top:0;padding-right:var(--s-space-24);padding-bottom:var(--s-space-16);padding-left:var(--s-space-24)}}@media (min-width: 768px){.modal--scrollable .modal__content{padding-bottom:0}}.modal--scrollable:not(.modal--scrolled-down).modal--has-custom-footer .modal__custom-footer{border-top:var(--s-border-width-default) solid var(--s-border-default)}.modal--scrollable:not(.modal--scrolled-down):not(.modal--has-custom-footer) .modal__controls{border-top:var(--s-border-width-default) solid var(--s-border-default)}.modal--has-custom-header .modal__content{padding-top:var(--s-space-16)}@media (min-width: 768px){.modal--scrolled .modal__header{border-bottom-color:var(--s-border-default)}}.modal__backdrop{position:fixed;background-color:rgba(0, 0, 0, 0.2);inset:0}.modal__body{position:relative;z-index:var(--s-z-40);display:flex;overflow:hidden;width:100vw;max-width:40rem;height:100vh;background-color:var(--s-surface-overlay-default);flex-direction:column}@media (min-width: 768px){.modal__body{width:90vw;height:auto;max-height:90vh;border-radius:var(--s-border-radius-base);box-shadow:var(--s-shadow-level-3)}}.modal__close-button{position:absolute;top:var(--s-space-8);left:var(--s-space-8)}@media (min-width: 768px){.modal__close-button{top:var(--s-space-16);right:var(--s-space-16);left:auto}}.modal__header{display:flex;height:3.5rem;padding-top:var(--s-space-8);padding-right:var(--s-space-16);padding-bottom:var(--s-space-8);padding-left:calc(var(--s-space-8) + 2.5rem + var(--s-space-8));flex-shrink:0;align-items:center;border-bottom:var(--s-border-width-default) solid var(--s-border-default);gap:var(--s-space-16)}@media (min-width: 768px){.modal__header{height:4.125rem;padding-top:var(--s-space-24);padding-right:calc(var(--s-space-16) + 2.5rem + var(--s-space-8));padding-bottom:var(--s-space-16);padding-left:var(--s-space-24);border-bottom:var(--s-border-width-default) solid transparent}}.modal__custom-header{flex-shrink:0;border-bottom:var(--s-border-width-default) solid var(--s-border-default)}.modal__heading{overflow:hidden}.modal__heading .heading{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.modal__content{overflow-x:hidden;overflow-y:auto;flex-grow:1;line-height:var(--s-line-height-base)}.modal__content ::slotted(*){margin:0}.modal__custom-footer{padding-top:var(--s-space-16);padding-right:var(--s-space-24);padding-bottom:var(--s-space-16);padding-left:var(--s-space-24);flex-shrink:0}.modal__controls{display:flex;padding-top:var(--s-space-16);padding-right:var(--s-space-24);padding-bottom:var(--s-space-16);padding-left:var(--s-space-24);flex-shrink:0;justify-content:flex-end}@keyframes modal-scale-in{from{transform:scale(0)}to{transform:scale(1)}}@keyframes modal-backdrop-fade-in{from{opacity:0}to{opacity:1}}@keyframes modal-fade-out{from{opacity:1}to{opacity:0}}@keyframes modal-drawer-slide-in{from{transform:translate3d(100%, 0, 0)}to{transform:translate3d(0, 0, 0)}}@keyframes modal-drawer-slide-out{from{transform:translate3d(0, 0, 0)}to{transform:translate3d(100%, 0, 0)}}', Oe = class {
+const Re = ':host{display:block}:host *{box-sizing:border-box}.modal{--swirl-ghost-button-background-default:var(--s-surface-overlay-default);--swirl-ghost-button-background-hovered:var(--s-surface-overlay-hovered);--swirl-ghost-button-background-pressed:var(--s-surface-overlay-pressed);position:fixed;z-index:var(--s-z-40);display:flex;justify-content:center;align-items:center;inset:0}.modal[aria-hidden="true"]{display:none}.modal--variant-default.modal--closing{animation:0.15s modal-fade-out;animation-fill-mode:forwards}@media (prefers-reduced-motion){.modal--variant-default.modal--closing{animation:none}}.modal--variant-default:not(.modal--closing) .modal__backdrop{animation:0.15s modal-backdrop-fade-in}@media (prefers-reduced-motion){.modal--variant-default:not(.modal--closing) .modal__backdrop{animation:none}}.modal--variant-default:not(.modal--closing) .modal__body{animation:0.15s modal-scale-in}@media (prefers-reduced-motion){.modal--variant-default:not(.modal--closing) .modal__body{animation:none}}.modal--variant-drawer{justify-content:end;align-items:stretch}.modal--variant-drawer.modal--closing{animation:0.15s modal-drawer-slide-out;animation-fill-mode:forwards}@media (prefers-reduced-motion){.modal--variant-drawer.modal--closing{animation:none}}.modal--variant-drawer.modal--hide-label .modal__content{padding-top:calc(3.5rem + var(--s-space-8))}.modal--variant-drawer .modal__backdrop{background-color:transparent;animation:none}.modal--variant-drawer .modal__body{height:100%;max-height:none;border-radius:0;animation:0.15s modal-drawer-slide-in;box-shadow:var(--s-shadow-level-3)}@media (prefers-reduced-motion){.modal--variant-drawer .modal__body{animation:none}}.modal--variant-drawer .modal__close-button{right:auto;left:var(--s-space-8)}@media (min-width: 768px){.modal--variant-drawer .modal__close-button{left:var(--s-space-16)}}.modal--variant-drawer .modal__header{padding-right:var(--s-space-16);padding-left:calc(var(--s-space-8) + 2.5rem + var(--s-space-8))}@media (min-width: 768px){.modal--variant-drawer .modal__header{padding-top:var(--s-space-16);padding-right:var(--s-space-24);padding-left:calc(var(--s-space-16) + 2.5rem + var(--s-space-8))}}.modal--padded .modal__content{padding-top:var(--s-space-24);padding-right:var(--s-space-16);padding-bottom:var(--s-space-24);padding-left:var(--s-space-16)}@media (min-width: 768px){.modal--padded .modal__content{padding-top:0;padding-right:var(--s-space-24);padding-bottom:var(--s-space-16);padding-left:var(--s-space-24)}}@media (min-width: 768px){.modal--scrollable .modal__content{padding-bottom:0}}.modal--scrollable:not(.modal--scrolled-down).modal--has-custom-footer .modal__custom-footer{border-top:var(--s-border-width-default) solid var(--s-border-default)}.modal--scrollable:not(.modal--scrolled-down):not(.modal--has-custom-footer) .modal__controls{border-top:var(--s-border-width-default) solid var(--s-border-default)}.modal--has-custom-header .modal__content{padding-top:var(--s-space-16)}.modal--has-custom-footer .modal__custom-footer{padding-top:var(--s-space-16);padding-right:var(--s-space-24);padding-bottom:var(--s-space-16);padding-left:var(--s-space-24)}@media (min-width: 768px){.modal--scrolled .modal__header{border-bottom-color:var(--s-border-default)}}.modal__backdrop{position:fixed;background-color:rgba(0, 0, 0, 0.2);inset:0}.modal__body{position:relative;z-index:var(--s-z-40);display:flex;overflow:hidden;width:100vw;max-width:40rem;height:100vh;background-color:var(--s-surface-overlay-default);flex-direction:column}@media (min-width: 768px){.modal__body{width:90vw;height:auto;max-height:90vh;border-radius:var(--s-border-radius-base);box-shadow:var(--s-shadow-level-3)}}.modal__close-button{position:absolute;z-index:1;top:var(--s-space-8);left:var(--s-space-8)}@media (min-width: 768px){.modal__close-button{top:var(--s-space-16);right:var(--s-space-16);left:auto}}.modal__header{display:flex;height:3.5rem;padding-top:var(--s-space-8);padding-right:var(--s-space-16);padding-bottom:var(--s-space-8);padding-left:calc(var(--s-space-8) + 2.5rem + var(--s-space-8));flex-shrink:0;align-items:center;border-bottom:var(--s-border-width-default) solid var(--s-border-default);gap:var(--s-space-16)}@media (min-width: 768px){.modal__header{height:4.125rem;padding-top:var(--s-space-24);padding-right:calc(var(--s-space-16) + 2.5rem + var(--s-space-8));padding-bottom:var(--s-space-16);padding-left:var(--s-space-24);border-bottom:var(--s-border-width-default) solid transparent}}.modal__custom-header{flex-shrink:0;border-bottom:var(--s-border-width-default) solid var(--s-border-default)}.modal__heading{overflow:hidden}.modal__heading .heading{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.modal__content{overflow-x:hidden;overflow-y:auto;flex-grow:1;line-height:var(--s-line-height-base)}.modal__content ::slotted(*){margin:0}.modal__custom-footer{flex-shrink:0}.modal__controls{display:flex;padding-top:var(--s-space-16);padding-right:var(--s-space-24);padding-bottom:var(--s-space-16);padding-left:var(--s-space-24);flex-shrink:0;justify-content:flex-end}@keyframes modal-scale-in{from{transform:scale(0)}to{transform:scale(1)}}@keyframes modal-backdrop-fade-in{from{opacity:0}to{opacity:1}}@keyframes modal-fade-out{from{opacity:1}to{opacity:0}}@keyframes modal-drawer-slide-in{from{transform:translate3d(100%, 0, 0)}to{transform:translate3d(0, 0, 0)}}@keyframes modal-drawer-slide-out{from{transform:translate3d(0, 0, 0)}to{transform:translate3d(100%, 0, 0)}}', Oe = class {
   constructor(n) {
-    ie(this, n), this.modalClose = x(this, "modalClose", 7), this.modalOpen = x(this, "modalOpen", 7), this.primaryAction = x(this, "primaryAction", 7), this.secondaryAction = x(this, "secondaryAction", 7), this.onKeyDown = (e) => {
+    ie(this, n), this.modalClose = E(this, "modalClose", 7), this.modalOpen = E(this, "modalOpen", 7), this.primaryAction = E(this, "primaryAction", 7), this.secondaryAction = E(this, "secondaryAction", 7), this.onKeyDown = (e) => {
       e.code === "Escape" && this.close();
     }, this.onBackdropClick = () => {
       this.close();

package/dist/{swirl-option-list-section.entry.ec730f83.js → swirl-option-list-section.entry.a2b6083c.js}

@@ -1,4 +1,4 @@
-import { r as s, h as t, H as e } from "./index.f913dab2.js";
+import { r as s, h as t, H as e } from "./index.20393dfd.js";
 import "react";
 import "react-dom";
 const o = ":host{display:block}:host *{box-sizing:border-box}.option-list-section{background-color:var(--s-surface-overlay-default)}.option-list-section__label{display:block;width:100%;padding:var(--s-space-8) var(--s-space-16);border-bottom:var(--s-border-width-default) solid var(--s-border-default);color:var(--s-text-subdued);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);text-align:left}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.option-list-section__label{padding:var(--s-space-8) var(--s-space-12);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}", l = class {

package/dist/{swirl-pagination.entry.04fd9b96.js → swirl-pagination.entry.77773fd8.js}

@@ -1,4 +1,4 @@
-import { r as l, c as s, h as i, H as r } from "./index.f913dab2.js";
+import { r as l, c as s, h as i, H as r } from "./index.20393dfd.js";
 import { c as p } from "./index-d280dafb.186cdb0e.js";
 import { d as g } from "./utils-61f188cc.4a43deab.js";
 import "react";

package/dist/{swirl-pdf-reader.entry.81e7faac.js → swirl-pdf-reader.entry.026530de.js}

@@ -1,4 +1,4 @@
-import { r as l, h as e, H as n, g as d } from "./index.f913dab2.js";
+import { r as l, h as e, H as n, g as d } from "./index.20393dfd.js";
 import { A as c } from "./a11y-dialog.esm-d7a94c8c.bd6ae411.js";
 import { d as h, e as p } from "./bodyScrollLock.esm-ce6356d8.2c600fb9.js";
 import { c as r } from "./index-d280dafb.186cdb0e.js";

package/dist/{swirl-popover.entry.8bd46638.js → swirl-popover.entry.f1895e52.js}

@@ -1,4 +1,4 @@
-import { r as h, c as p, h as s, H as v, g as m } from "./index.f913dab2.js";
+import { r as h, c as p, h as s, H as v, g as m } from "./index.20393dfd.js";
 import { o as l, s as c, f, c as u, a as g } from "./floating-ui.dom.esm-ac7cc24e.79b318e4.js";
 import { d as b, e as _ } from "./bodyScrollLock.esm-ce6356d8.2c600fb9.js";
 import { c as y } from "./index-d280dafb.186cdb0e.js";

package/dist/{swirl-progress-indicator.entry.3fb372cf.js → swirl-progress-indicator.entry.88c7165b.js}

@@ -1,4 +1,4 @@
-import { r as t, h as s, H as n } from "./index.f913dab2.js";
+import { r as t, h as s, H as n } from "./index.20393dfd.js";
 import { c } from "./index-d280dafb.186cdb0e.js";
 import "react";
 import "react-dom";

package/dist/{swirl-radio-group.entry.e18b352d.js → swirl-radio-group.entry.bf80ec07.js}

@@ -1,4 +1,4 @@
-import { r as a, c as o, h as i, H as l, g as n } from "./index.f913dab2.js";
+import { r as a, c as o, h as i, H as l, g as n } from "./index.20393dfd.js";
 import "react";
 import "react-dom";
 const u = ".sc-swirl-radio-group-h{display:block}.sc-swirl-radio-group-h *.sc-swirl-radio-group{box-sizing:border-box}.radio-group.sc-swirl-radio-group{display:flex;flex-direction:column;gap:var(--s-space-12)}", d = class {

package/dist/{swirl-radio.entry.f7bfc4ce.js → swirl-radio.entry.ae612547.js}

@@ -1,4 +1,4 @@
-import { r as e, c as l, h as i, H as c } from "./index.f913dab2.js";
+import { r as e, c as l, h as i, H as c } from "./index.20393dfd.js";
 import { c as t } from "./index-d280dafb.186cdb0e.js";
 import "react";
 import "react-dom";

package/dist/{swirl-resource-list-file-item.entry.69e25587.js → swirl-resource-list-file-item.entry.6a1a57ac.js}

@@ -1,4 +1,4 @@
-import { r as n, c as a, h as s, H as c } from "./index.f913dab2.js";
+import { r as n, c as a, h as s, H as c } from "./index.20393dfd.js";
 import { c as d } from "./index-d280dafb.186cdb0e.js";
 import { a as h } from "./utils-61f188cc.4a43deab.js";
 import "react";

package/dist/{swirl-search.entry.4cf8437d.js → swirl-search.entry.70510075.js}

@@ -1,4 +1,4 @@
-import { r as i, c as r, h as a, H as t } from "./index.f913dab2.js";
+import { r as i, c as r, h as a, H as t } from "./index.20393dfd.js";
 import { c } from "./index-d280dafb.186cdb0e.js";
 import { a as n } from "./utils-61f188cc.4a43deab.js";
 import "react";

package/dist/{swirl-select.entry.59b4330c.js → swirl-select.entry.f6f716d6.js}

@@ -1,4 +1,4 @@
-import { r as a, c as r, h as e, H as c, g as d } from "./index.f913dab2.js";
+import { r as a, c as r, h as e, H as c, g as d } from "./index.20393dfd.js";
 import { c as h } from "./index-d280dafb.186cdb0e.js";
 import { q as p } from "./utils-61f188cc.4a43deab.js";
 import "react";
@@ -15,7 +15,7 @@ const u = ".sc-swirl-select-h{display:block;width:100%}.sc-swirl-select-h *.sc-s
       this.open = !1;
     }, this.onKeyDown = (i) => {
       (i.code === "Space" || i.code === "Enter") && (i.preventDefault(), this.popover.open());
-    }, this.disabled = void 0, this.inline = void 0, this.invalid = void 0, this.label = void 0, this.multiSelect = void 0, this.required = void 0, this.swirlAriaDescribedby = void 0, this.value = void 0, this.options = [], this.open = void 0;
+    }, this.disabled = void 0, this.inline = void 0, this.invalid = void 0, this.label = void 0, this.multiSelect = void 0, this.required = void 0, this.selectId = Math.round(Math.random() * 1e6).toString(), this.swirlAriaDescribedby = void 0, this.value = void 0, this.options = [], this.open = void 0;
   }
   componentWillLoad() {
     queueMicrotask(() => {
@@ -36,7 +36,7 @@ const u = ".sc-swirl-select-h{display:block;width:100%}.sc-swirl-select-h *.sc-s
       "select--disabled": this.disabled,
       "select--inline": this.inline
     });
-    return e(c, { onKeyDown: this.onKeyDown }, e("div", { class: n }, e("input", { "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : void 0, "aria-invalid": i, class: "select__label", disabled: this.disabled, id: "trigger", readOnly: !0, type: "text", value: s }), e("span", { class: "select__indicator" }, this.open ? e("swirl-icon-expand-less", null) : e("swirl-icon-expand-more", null)), e("swirl-popover", { animation: "scale-in-y", class: "select__popover", enableFlip: !1, label: this.label, offset: [16, -16], onPopoverClose: this.onClose, onPopoverOpen: this.onOpen, popoverId: "select-options", ref: (t) => this.popover = t, trigger: "trigger", useContainerWidth: "swirl-form-control" }, e("swirl-option-list", { onValueChange: this.select, multiSelect: this.multiSelect, value: this.value }, e("slot", { onSlotchange: this.onSlotChange })))));
+    return e(c, { onKeyDown: this.onKeyDown }, e("div", { class: n }, e("input", { "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : void 0, "aria-invalid": i, class: "select__label", disabled: this.disabled, id: `trigger-${this.selectId}`, readOnly: !0, type: "text", value: s }), e("span", { class: "select__indicator" }, this.open ? e("swirl-icon-expand-less", null) : e("swirl-icon-expand-more", null)), e("swirl-popover", { animation: "scale-in-y", class: "select__popover", enableFlip: !1, label: this.label, offset: [16, -16], onPopoverClose: this.onClose, onPopoverOpen: this.onOpen, popoverId: `select-options-${this.selectId}`, ref: (t) => this.popover = t, trigger: `trigger-${this.selectId}`, useContainerWidth: "swirl-form-control" }, e("swirl-option-list", { onValueChange: this.select, multiSelect: this.multiSelect, value: this.value }, e("slot", { onSlotchange: this.onSlotChange })))));
   }
   get el() {
     return d(this);

package/dist/{swirl-shell-layout.entry.7405b175.js → swirl-shell-layout.entry.b0786f64.js}

@@ -1,4 +1,4 @@
-import { r as o, h as e, H as t } from "./index.f913dab2.js";
+import { r as o, h as e, H as t } from "./index.20393dfd.js";
 import { c as i } from "./index-d280dafb.186cdb0e.js";
 import { a as r, g as d } from "./utils-61f188cc.4a43deab.js";
 import "react";

package/dist/{swirl-shell-navigation-item.entry.5fd6c406.js → swirl-shell-navigation-item.entry.3878055a.js}

@@ -1,4 +1,4 @@
-import { r as t, h as n, H as a, g as s } from "./index.f913dab2.js";
+import { r as t, h as n, H as a, g as s } from "./index.20393dfd.js";
 import { c as o } from "./index-d280dafb.186cdb0e.js";
 import "react";
 import "react-dom";

package/dist/{swirl-skeleton-box.entry.6257b09a.js → swirl-skeleton-box.entry.3ec82300.js}

@@ -1,4 +1,4 @@
-import { r as t, h as s, H as i } from "./index.f913dab2.js";
+import { r as t, h as s, H as i } from "./index.20393dfd.js";
 import { c as o } from "./index-d280dafb.186cdb0e.js";
 import "react";
 import "react-dom";

package/dist/{swirl-skeleton-text.entry.91718b77.js → swirl-skeleton-text.entry.a2a5933e.js}

@@ -1,4 +1,4 @@
-import { r as l, h as t, H as a } from "./index.f913dab2.js";
+import { r as l, h as t, H as a } from "./index.20393dfd.js";
 import { c as s } from "./index-d280dafb.186cdb0e.js";
 import "react";
 import "react-dom";

package/dist/{swirl-stack.entry.77d5f1da.js → swirl-stack.entry.e33bd2bd.js}

@@ -1,4 +1,4 @@
-import { r as i, h as s, H as e } from "./index.f913dab2.js";
+import { r as i, h as s, H as e } from "./index.20393dfd.js";
 import { c as n } from "./index-d280dafb.186cdb0e.js";
 import "react";
 import "react-dom";

package/dist/{swirl-switch.entry.05d8d547.js → swirl-switch.entry.dafa3ed6.js}

@@ -1,4 +1,4 @@
-import { r as h, c as n, h as e, H as a, g as l } from "./index.f913dab2.js";
+import { r as h, c as n, h as e, H as a, g as l } from "./index.20393dfd.js";
 import { c as o } from "./index-d280dafb.186cdb0e.js";
 import "react";
 import "react-dom";

package/dist/{swirl-tab-bar.entry.d4f0508e.js → swirl-tab-bar.entry.ae9b1a86.js}

@@ -1,4 +1,4 @@
-import { r, c as i, h as e, H as s } from "./index.f913dab2.js";
+import { r, c as i, h as e, H as s } from "./index.20393dfd.js";
 import { c as b } from "./index-d280dafb.186cdb0e.js";
 import "react";
 import "react-dom";

package/dist/{swirl-tab.entry.c1577657.js → swirl-tab.entry.8018a2b1.js}

@@ -1,4 +1,4 @@
-import { r as a, h as s, H as i } from "./index.f913dab2.js";
+import { r as a, h as s, H as i } from "./index.20393dfd.js";
 import { c as e } from "./index-d280dafb.186cdb0e.js";
 import "react";
 import "react-dom";

package/dist/{swirl-table-cell.entry.c225ef3c.js → swirl-table-cell.entry.1850764d.js}

@@ -1,4 +1,4 @@
-import { r as e, h as s, H as l } from "./index.f913dab2.js";
+import { r as e, h as s, H as l } from "./index.20393dfd.js";
 import "react";
 import "react-dom";
 const o = ":host{display:flex;overflow:auto;padding-top:var(--s-space-8);padding-right:var(--s-space-16);padding-bottom:var(--s-space-8);padding-left:var(--s-space-16);flex-basis:0;flex-grow:1;flex-shrink:1;align-items:center;background-color:var(--s-background-default);word-break:break-word;-webkit-hyphens:auto;hyphens:auto;transition:box-shadow 0.15s}:host(.table-cell--has-shadow-right){box-shadow:var(--swirl-table-sticky-right-shadow)}:host(.table-cell--has-shadow-left){box-shadow:var(--swirl-table-sticky-left-shadow)}:host *{box-sizing:border-box}", t = class {

package/dist/{swirl-table-column.entry.7112af3e.js → swirl-table-column.entry.d94b2504.js}

@@ -1,4 +1,4 @@
-import { r as e, h as t, H as i, g as r } from "./index.f913dab2.js";
+import { r as e, h as t, H as i, g as r } from "./index.20393dfd.js";
 import { c as o } from "./utils-61f188cc.4a43deab.js";
 import "react";
 import "react-dom";

package/dist/{swirl-table-row-group.entry.c7e0a89a.js → swirl-table-row-group.entry.dd41132e.js}

@@ -1,4 +1,4 @@
-import { r as o, h as r, H as s, g as t } from "./index.f913dab2.js";
+import { r as o, h as r, H as s, g as t } from "./index.20393dfd.js";
 import "react";
 import "react-dom";
 const a = ":host{position:relative;z-index:1;display:block}:host *{box-sizing:border-box}.table-row-group__header-row{padding:var(--s-space-12) var(--s-space-16);border-bottom:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-surface-raised-default);font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-sm)}@media (min-width: 768px){.table-row-group__label{position:sticky;left:var(--s-space-16)}}", l = class {

package/dist/{swirl-table-row.entry.4d68cca4.js → swirl-table-row.entry.40ebd59f.js}

@@ -1,4 +1,4 @@
-import { r as o, h as e, H as s, g as r } from "./index.f913dab2.js";
+import { r as o, h as e, H as s, g as r } from "./index.20393dfd.js";
 import { c as l } from "./index-d280dafb.186cdb0e.js";
 import { c as i } from "./utils-61f188cc.4a43deab.js";
 import "react";

package/dist/{swirl-table.entry.b56d623a.js → swirl-table.entry.5d2bb19f.js}

@@ -1,4 +1,4 @@
-import { r as g, h as r, H as v, g as _ } from "./index.f913dab2.js";
+import { r as g, h as r, H as v, g as _ } from "./index.20393dfd.js";
 import { d as S, i as R } from "./utils-61f188cc.4a43deab.js";
 import "react";
 import "react-dom";

package/dist/{swirl-tabs.entry.bfcd5d27.js → swirl-tabs.entry.f31162ea.js}

@@ -1,4 +1,4 @@
-import { r as e, c as b, h as s, H as r, g as n } from "./index.f913dab2.js";
+import { r as e, c as b, h as s, H as r, g as n } from "./index.20393dfd.js";
 import "react";
 import "react-dom";
 const c = ".sc-swirl-tabs-h{display:block;width:100%}.sc-swirl-tabs-h *.sc-swirl-tabs{box-sizing:border-box}.tabs.sc-swirl-tabs{width:100%}", h = class {

package/dist/{swirl-tag.entry.37ffa861.js → swirl-tag.entry.60143c36.js}

@@ -1,4 +1,4 @@
-import { r, c as s, h as t, H as n } from "./index.f913dab2.js";
+import { r, c as s, h as t, H as n } from "./index.20393dfd.js";
 import { c as i } from "./index-d280dafb.186cdb0e.js";
 import "react";
 import "react-dom";

package/dist/{swirl-text-input.entry.b7f4523a.js → swirl-text-input.entry.ba4a4801.js}

@@ -1,4 +1,4 @@
-import { r as h, c as n, h as i, H as d } from "./index.f913dab2.js";
+import { r as h, c as n, h as i, H as d } from "./index.20393dfd.js";
 import { c } from "./index-d280dafb.186cdb0e.js";
 import { a as x } from "./utils-61f188cc.4a43deab.js";
 import "react";

package/dist/{swirl-text.entry.a056a531.js → swirl-text.entry.6baa86a8.js}

@@ -1,4 +1,4 @@
-import { r as I, h as p, H as J, g as T } from "./index.f913dab2.js";
+import { r as I, h as p, H as J, g as T } from "./index.20393dfd.js";
 import { c as V } from "./index-d280dafb.186cdb0e.js";
 import { b as G } from "./balancetext-fa49c64f.754e913c.js";
 import "react";

package/dist/{swirl-theme-provider.entry.51343025.js → swirl-theme-provider.entry.f1e04902.js}

@@ -1,4 +1,4 @@
-import { r as j, c as E, h as w, H } from "./index.f913dab2.js";
+import { r as j, c as E, h as w, H } from "./index.20393dfd.js";
 import "react";
 import "react-dom";
 function d(e, t, o) {

package/dist/{swirl-toast-provider.entry.62e665d0.js → swirl-toast-provider.entry.0d94f996.js}

@@ -1,4 +1,4 @@
-import { r as n, h as a, H as r } from "./index.f913dab2.js";
+import { r as n, h as a, H as r } from "./index.20393dfd.js";
 import "react";
 import "react-dom";
 const c = class {

package/dist/{swirl-toast.entry.0426db2e.js → swirl-toast.entry.646abea2.js}

@@ -1,4 +1,4 @@
-import { r as a, c as n, h as i, H as r } from "./index.f913dab2.js";
+import { r as a, c as n, h as i, H as r } from "./index.20393dfd.js";
 import { c as d } from "./index-d280dafb.186cdb0e.js";
 import { a as c } from "./utils-61f188cc.4a43deab.js";
 import "react";

package/dist/{swirl-tooltip.entry.4b6d366a.js → swirl-tooltip.entry.70602095.js}

@@ -1,4 +1,4 @@
-import { r as n, h as i, H as l } from "./index.f913dab2.js";
+import { r as n, h as i, H as l } from "./index.20393dfd.js";
 import { c as r, o as p, s as h, f as d } from "./floating-ui.dom.esm-ac7cc24e.79b318e4.js";
 import "react";
 import "react-dom";

package/dist/{swirl-tree-navigation-item.entry.46fe4f6f.js → swirl-tree-navigation-item.entry.e379bcd5.js}

@@ -1,4 +1,4 @@
-import { r as t, h as i, H as s, g as r } from "./index.f913dab2.js";
+import { r as t, h as i, H as s, g as r } from "./index.20393dfd.js";
 import { c as o } from "./index-d280dafb.186cdb0e.js";
 import "react";
 import "react-dom";

package/dist/{swirl-video-thumbnail.entry.16fe308b.js → swirl-video-thumbnail.entry.f49dc6f2.js}

@@ -1,4 +1,4 @@
-import { r as t, h as n, H as e } from "./index.f913dab2.js";
+import { r as t, h as n, H as e } from "./index.20393dfd.js";
 import "react";
 import "react-dom";
 const a = `:host {

package/dist/{swirl-visually-hidden.entry.0b84f991.js → swirl-visually-hidden.entry.1e5c609d.js}

@@ -1,4 +1,4 @@
-import { r as s, h as i, H as l } from "./index.f913dab2.js";
+import { r as s, h as i, H as l } from "./index.20393dfd.js";
 import "react";
 import "react-dom";
 const t = ":host{position:absolute;display:inline;overflow:hidden;width:1px;height:1px;margin:-1px;padding:0;border:0;white-space:nowrap;word-wrap:normal;clip:rect(0, 0, 0, 0)}", o = class {

package/dist/{wc-datepicker.entry.336da101.js → wc-datepicker.entry.5536f5b7.js}

@@ -1,4 +1,4 @@
-import { r as R, c as S, h as n, H, g as E } from "./index.f913dab2.js";
+import { r as R, c as S, h as n, H, g as E } from "./index.20393dfd.js";
 import "react";
 import "react-dom";
 function T(e, t) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getflip/swirl-components-react",
-  "version": "0.55.0",
+  "version": "0.56.1",
   "type": "module",
   "files": [
     "dist"
@@ -18,7 +18,7 @@
     "build": "tsc && vite build"
   },
   "dependencies": {
-    "@getflip/swirl-components": "^0.56.0",
+    "@getflip/swirl-components": "^0.57.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },