@getflip/swirl-components-react 0.84.1 → 0.86.0

package/dist/{swirl-symbol-restaurant.entry.9dfae4e2.js → swirl-symbol-restaurant.entry.63f03371.js}

@@ -1,4 +1,4 @@
-import { r as C, h as t, F as r } from "./index.b2639202.js";
+import { r as C, h as t, F as r } from "./index.3e13cbcd.js";
 import { c as e } from "./index-d280dafb.186cdb0e.js";
 import "react";
 import "react-dom";

package/dist/{swirl-symbol-roadmap.entry.c03349c5.js → swirl-symbol-roadmap.entry.766e914f.js}

@@ -1,4 +1,4 @@
-import { r as o, h as i, F as r } from "./index.b2639202.js";
+import { r as o, h as i, F as r } from "./index.3e13cbcd.js";
 import { c as l } from "./index-d280dafb.186cdb0e.js";
 import "react";
 import "react-dom";

package/dist/{swirl-symbol-room.entry.3c11cef2.js → swirl-symbol-room.entry.12c39cde.js}

@@ -1,4 +1,4 @@
-import { r as o, h as i, F as r } from "./index.b2639202.js";
+import { r as o, h as i, F as r } from "./index.3e13cbcd.js";
 import { c as l } from "./index-d280dafb.186cdb0e.js";
 import "react";
 import "react-dom";

package/dist/{swirl-symbol-savings.entry.a7dda9ad.js → swirl-symbol-savings.entry.9a0f890e.js}

@@ -1,4 +1,4 @@
-import { r as t, h as C, F as l } from "./index.b2639202.js";
+import { r as t, h as C, F as l } from "./index.3e13cbcd.js";
 import { c as r } from "./index-d280dafb.186cdb0e.js";
 import "react";
 import "react-dom";

package/dist/{swirl-symbol-settings-voice.entry.5fb9bab7.js → swirl-symbol-settings-voice.entry.424ce9ce.js}

@@ -1,4 +1,4 @@
-import { r as t, h as s, F as e } from "./index.b2639202.js";
+import { r as t, h as s, F as e } from "./index.3e13cbcd.js";
 import { c as o } from "./index-d280dafb.186cdb0e.js";
 import "react";
 import "react-dom";

package/dist/{swirl-symbol-shopping-cart.entry.cfc00400.js → swirl-symbol-shopping-cart.entry.b1993352.js}

@@ -1,4 +1,4 @@
-import { r as t, h as C, F as r } from "./index.b2639202.js";
+import { r as t, h as C, F as r } from "./index.3e13cbcd.js";
 import { c as o } from "./index-d280dafb.186cdb0e.js";
 import "react";
 import "react-dom";

package/dist/{swirl-symbol-smartphone.entry.832e6ab2.js → swirl-symbol-smartphone.entry.bc4a8a30.js}

@@ -1,4 +1,4 @@
-import { r, h as i, F as e } from "./index.b2639202.js";
+import { r, h as i, F as e } from "./index.3e13cbcd.js";
 import { c as o } from "./index-d280dafb.186cdb0e.js";
 import "react";
 import "react-dom";

package/dist/{swirl-symbol-star.entry.3783a54f.js → swirl-symbol-star.entry.aef2230a.js}

@@ -1,4 +1,4 @@
-import { r, h as i, F as l } from "./index.b2639202.js";
+import { r, h as i, F as l } from "./index.3e13cbcd.js";
 import { c as e } from "./index-d280dafb.186cdb0e.js";
 import "react";
 import "react-dom";

package/dist/{swirl-symbol-supervisor-account.entry.95b3914d.js → swirl-symbol-supervisor-account.entry.488e2eb5.js}

@@ -1,4 +1,4 @@
-import { r as t, h as C, F as r } from "./index.b2639202.js";
+import { r as t, h as C, F as r } from "./index.3e13cbcd.js";
 import { c as o } from "./index-d280dafb.186cdb0e.js";
 import "react";
 import "react-dom";

package/dist/{swirl-symbol-thumbs-up-down.entry.61ddfe2d.js → swirl-symbol-thumbs-up-down.entry.581ce2de.js}

@@ -1,4 +1,4 @@
-import { r as l, h as s, F as C } from "./index.b2639202.js";
+import { r as l, h as s, F as C } from "./index.3e13cbcd.js";
 import { c as r } from "./index-d280dafb.186cdb0e.js";
 import "react";
 import "react-dom";

package/dist/{swirl-symbol-twitter.entry.4cc61a0a.js → swirl-symbol-twitter.entry.b8fe8d92.js}

@@ -1,4 +1,4 @@
-import { r, h as i, F as C } from "./index.b2639202.js";
+import { r, h as i, F as C } from "./index.3e13cbcd.js";
 import { c as e } from "./index-d280dafb.186cdb0e.js";
 import "react";
 import "react-dom";

package/dist/{swirl-symbol-wb-sunny.entry.78b99b07.js → swirl-symbol-wb-sunny.entry.e78aa632.js}

@@ -1,4 +1,4 @@
-import { r as t, h as s, F as l } from "./index.b2639202.js";
+import { r as t, h as s, F as l } from "./index.3e13cbcd.js";
 import { c as r } from "./index-d280dafb.186cdb0e.js";
 import "react";
 import "react-dom";

package/dist/{swirl-symbol-wechat.entry.aa6a5b93.js → swirl-symbol-wechat.entry.0f4ede56.js}

@@ -1,4 +1,4 @@
-import { r as t, h as s, F as e } from "./index.b2639202.js";
+import { r as t, h as s, F as e } from "./index.3e13cbcd.js";
 import { c as l } from "./index-d280dafb.186cdb0e.js";
 import "react";
 import "react-dom";

package/dist/{swirl-symbol-weibo.entry.859c7351.js → swirl-symbol-weibo.entry.1c3ae705.js}

@@ -1,4 +1,4 @@
-import { r as t, h as s, F as e } from "./index.b2639202.js";
+import { r as t, h as s, F as e } from "./index.3e13cbcd.js";
 import { c as o } from "./index-d280dafb.186cdb0e.js";
 import "react";
 import "react-dom";

package/dist/{swirl-symbol-work.entry.18079c62.js → swirl-symbol-work.entry.ccee9511.js}

@@ -1,4 +1,4 @@
-import { r, h as i, F as o } from "./index.b2639202.js";
+import { r, h as i, F as o } from "./index.3e13cbcd.js";
 import { c as l } from "./index-d280dafb.186cdb0e.js";
 import "react";
 import "react-dom";

package/dist/{swirl-symbol-xing.entry.e8a4c307.js → swirl-symbol-xing.entry.27e73fe5.js}

@@ -1,4 +1,4 @@
-import { r as C, h as i, F as l } from "./index.b2639202.js";
+import { r as C, h as i, F as l } from "./index.3e13cbcd.js";
 import { c as r } from "./index-d280dafb.186cdb0e.js";
 import "react";
 import "react-dom";

package/dist/{swirl-symbol-youtube.entry.05a97cad.js → swirl-symbol-youtube.entry.a51f5035.js}

@@ -1,4 +1,4 @@
-import { r as e, h as i, F as o } from "./index.b2639202.js";
+import { r as e, h as i, F as o } from "./index.3e13cbcd.js";
 import { c as l } from "./index-d280dafb.186cdb0e.js";
 import "react";
 import "react-dom";

package/dist/{swirl-symbol.entry.d03817ae.js → swirl-symbol.entry.2e7bd060.js}

@@ -1,4 +1,4 @@
-import { r as t, h as i, H as r } from "./index.b2639202.js";
+import { r as t, h as i, H as r } from "./index.3e13cbcd.js";
 import "react";
 import "react-dom";
 const e = ":host{display:inline-flex}", l = class {

package/dist/swirl-tab-bar.entry.0753b841.js

@@ -0,0 +1,33 @@
+import { r, c as i, h as e, H as s } from "./index.3e13cbcd.js";
+import { c as b } from "./index-d280dafb.186cdb0e.js";
+import "react";
+import "react-dom";
+const n = '.sc-swirl-tab-bar-h{display:flex;height:var(--swirl-tab-bar-height)}.sc-swirl-tab-bar-h *.sc-swirl-tab-bar{box-sizing:border-box}.tab-bar.sc-swirl-tab-bar{position:relative;display:flex;width:100%;justify-content:flex-start;border-bottom:var(--swirl-tab-bar-border-width) solid var(--s-border-default)}.tab-bar__tab.sc-swirl-tab-bar{position:relative;display:flex;min-width:0;margin:0;padding:var(--s-space-4) var(--s-space-8);align-items:center;border:none;color:var(--s-interactive-neutral-default);background-color:transparent;font:inherit;font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);cursor:pointer}.tab-bar__tab.sc-swirl-tab-bar:focus{outline:none}.tab-bar__tab.sc-swirl-tab-bar:focus-visible .tab-bar__tab-label.sc-swirl-tab-bar{border-radius:var(--s-border-radius-s);box-shadow:inset 0 0 0 0.125rem var(--s-focus-default)}.tab-bar__tab.sc-swirl-tab-bar:not(.tab-bar__tab--active):hover:after{position:absolute;bottom:0;left:50%;width:calc(100% - var(--s-space-8));height:0.1875rem;border-radius:0.125rem;background-color:var(--s-border-default);content:"";transform:translateX(-50%);pointer-events:none}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.tab-bar__tab.sc-swirl-tab-bar{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.tab-bar__tab-icon.sc-swirl-tab-bar{display:inline-flex}.tab-bar__tab-label.sc-swirl-tab-bar{display:inline-flex;overflow:hidden;width:100%;padding:var(--s-space-8) var(--s-space-8);text-align:center;white-space:nowrap;text-overflow:ellipsis}.tab-bar__tab--active.sc-swirl-tab-bar{color:var(--s-text-highlight)}.tab-bar__tab--active.sc-swirl-tab-bar:after{position:absolute;bottom:0;left:50%;width:calc(100% - var(--s-space-8));height:0.1875rem;border-radius:0.125rem;background-color:var(--s-border-highlight);content:"";transform:translateX(-50%);pointer-events:none}', o = class {
+  constructor(a) {
+    r(this, a), this.activateNextTab = i(this, "activateNextTab", 7), this.activatePreviousTab = i(this, "activatePreviousTab", 7), this.activateTab = i(this, "activateTab", 7), this.onKeyDown = (t) => {
+      t.code === "ArrowLeft" ? (t.preventDefault(), this.activatePreviousTab.emit()) : t.code === "ArrowRight" && (t.preventDefault(), this.activateNextTab.emit());
+    }, this.disableTabSemantics = void 0, this.label = void 0, this.tabs = [];
+  }
+  render() {
+    return e(s, null, e("div", { "aria-label": this.label, class: "tab-bar", onKeyDown: this.onKeyDown, role: this.disableTabSemantics ? void 0 : "tablist" }, this.tabs.map((a) => {
+      const t = b("tab-bar__tab", {
+        "tab-bar__tab--active": a.active
+      });
+      return e("button", {
+        "aria-controls": this.disableTabSemantics ? void 0 : a.id,
+        "aria-selected": this.disableTabSemantics ? void 0 : a.active ? "true" : "false",
+        class: t,
+        id: `tab-${a.id}`,
+        key: a.id,
+        onClick: () => this.activateTab.emit(a.id),
+        role: this.disableTabSemantics ? void 0 : "tab",
+        tabIndex: this.disableTabSemantics ? void 0 : a.active ? 0 : -1,
+        type: "button"
+      }, a.icon && e("span", { class: "tab-bar__tab-icon", innerHTML: a.icon }), e("span", { class: "tab-bar__tab-label" }, a.label));
+    })));
+  }
+};
+o.style = n;
+export {
+  o as swirl_tab_bar
+};

package/dist/{swirl-tab.entry.34fcf0c1.js → swirl-tab.entry.95278952.js}

@@ -1,17 +1,17 @@
-import { r as a, h as s, H as i } from "./index.b2639202.js";
+import { r as a, h as s, H as i } from "./index.3e13cbcd.js";
 import { c as e } from "./index-d280dafb.186cdb0e.js";
 import "react";
 import "react-dom";
-const r = ":host{display:block;width:100%}:host *{box-sizing:border-box}.tab{display:none;width:100%;padding:var(--s-space-8)}.tab--active{display:block}", l = class {
+const n = ":host{display:block;width:100%}:host *{box-sizing:border-box}.tab{display:none;width:100%;padding:var(--s-space-8)}.tab--active{display:block}", d = class {
   constructor(t) {
-    a(this, t), this.active = void 0, this.label = void 0, this.tabId = void 0;
+    a(this, t), this.active = void 0, this.icon = void 0, this.label = void 0, this.tabId = void 0;
   }
   render() {
     const t = e("tab", { "tab--active": this.active });
     return s(i, { "aria-labelledby": `tab-${this.tabId}`, id: this.tabId, role: "tabpanel", tabIndex: this.active ? 0 : -1 }, s("div", { class: t }, s("slot", null)));
   }
 };
-l.style = r;
+d.style = n;
 export {
-  l as swirl_tab
+  d as swirl_tab
 };

package/dist/{swirl-table-cell.entry.4bbcd337.js → swirl-table-cell.entry.e76f52c5.js}

@@ -1,4 +1,4 @@
-import { r as e, h as s, H as l } from "./index.b2639202.js";
+import { r as e, h as s, H as l } from "./index.3e13cbcd.js";
 import "react";
 import "react-dom";
 const t = ":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-surface-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}", o = class {

package/dist/{swirl-table-column.entry.379986f2.js → swirl-table-column.entry.c099f65e.js}

@@ -1,4 +1,4 @@
-import { r as e, h as t, H as i, g as r } from "./index.b2639202.js";
+import { r as e, h as t, H as i, g as r } from "./index.3e13cbcd.js";
 import { c as o } from "./utils-bc84f36e.1fee9865.js";
 import "react";
 import "react-dom";

package/dist/{swirl-table-row-group.entry.9d98e6b1.js → swirl-table-row-group.entry.0d39f5c7.js}

@@ -1,4 +1,4 @@
-import { r as o, h as r, H as s, g as t } from "./index.b2639202.js";
+import { r as o, h as r, H as s, g as t } from "./index.3e13cbcd.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.10ad2a39.js → swirl-table-row.entry.14be267f.js}

@@ -1,4 +1,4 @@
-import { r as s, h as e, H as o, g as r } from "./index.b2639202.js";
+import { r as s, h as e, H as o, g as r } from "./index.3e13cbcd.js";
 import { c as l } from "./index-d280dafb.186cdb0e.js";
 import { c as i } from "./utils-bc84f36e.1fee9865.js";
 import "react";

package/dist/{swirl-table.entry.cc1b1aea.js → swirl-table.entry.2051e0c3.js}

@@ -1,4 +1,4 @@
-import { r as g, h as r, H as _, g as v } from "./index.b2639202.js";
+import { r as g, h as r, H as _, g as v } from "./index.3e13cbcd.js";
 import { d as S, i as R } from "./utils-bc84f36e.1fee9865.js";
 import "react";
 import "react-dom";

package/dist/{swirl-tabs.entry.79270dee.js → swirl-tabs.entry.a05a8737.js}

@@ -1,7 +1,7 @@
-import { r as e, c as b, h as s, H as c, g as r } from "./index.b2639202.js";
+import { r as e, c as b, h as s, H as c, g as n } from "./index.3e13cbcd.js";
 import "react";
 import "react-dom";
-const n = ".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 {
+const r = ".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 {
   constructor(t) {
     e(this, t), this.tabActivated = b(this, "tabActivated", 7), this.tabs = [], this.onActivateNextTab = () => {
       this.activateNextTab();
@@ -43,6 +43,7 @@ const n = ".sc-swirl-tabs-h{display:block;width:100%}.sc-swirl-tabs-h *.sc-swirl
   }
   updateTabBarTabs() {
     this.tabBarTabs = this.tabs.map((t) => ({
+      icon: t.icon,
       id: t.tabId,
       label: t.label,
       active: this.activeTab === t.tabId
@@ -52,10 +53,10 @@ const n = ".sc-swirl-tabs-h{display:block;width:100%}.sc-swirl-tabs-h *.sc-swirl
     return s(c, null, s("div", { class: "tabs" }, s("swirl-tab-bar", { label: this.label, onActivateNextTab: this.onActivateNextTab, onActivatePreviousTab: this.onActivatePreviousTab, onActivateTab: this.onActivateTab, tabs: this.tabBarTabs })), s("slot", null));
   }
   get el() {
-    return r(this);
+    return n(this);
   }
 };
-h.style = n;
+h.style = r;
 export {
   h as swirl_tabs
 };

package/dist/{swirl-text-input.entry.563ae85d.js → swirl-text-input.entry.cd50fa7b.js}

@@ -1,9 +1,9 @@
-import { r as h, c as n, h as i, H as d } from "./index.b2639202.js";
+import { r as h, c as n, h as i, H as d } from "./index.3e13cbcd.js";
 import { c } from "./index-d280dafb.186cdb0e.js";
 import { g as x } from "./utils-bc84f36e.1fee9865.js";
 import "react";
 import "react-dom";
-const w = '.sc-swirl-text-input-h{display:block;width:100%}.sc-swirl-text-input-h *.sc-swirl-text-input{box-sizing:border-box}.text-input.sc-swirl-text-input{position:relative;display:flex;width:100%;align-items:center;color:var(--s-text-default);font:inherit;line-height:var(--s-line-height-sm);cursor:text}.text-input--auto-grow.sc-swirl-text-input .text-input__input.sc-swirl-text-input{max-height:none}.text-input--clearable.sc-swirl-text-input,.text-input--type-number.sc-swirl-text-input,.text-input--type-password.sc-swirl-text-input{padding-right:calc(1.5rem + var(--s-space-8))}.text-input--show-password.sc-swirl-text-input .text-input__input.sc-swirl-text-input{width:100%}.text-input--disabled.sc-swirl-text-input .text-input__character-counter.sc-swirl-text-input{color:var(--s-text-disabled)}.text-input--inline.sc-swirl-text-input .text-input__stepper.sc-swirl-text-input{top:calc(-1 * var(--s-space-8));right:calc(-1 * var(--s-space-12))}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input--inline.sc-swirl-text-input .text-input__stepper.sc-swirl-text-input{top:calc(-1 * var(--s-space-8));right:calc(-1 * var(--s-space-12))}}.text-input--inline.sc-swirl-text-input .text-input__step-button.sc-swirl-text-input{width:2rem;height:1.125rem;justify-content:center;background-color:var(--s-surface-raised-default)}.text-input--inline.sc-swirl-text-input .text-input__step-button.sc-swirl-text-input:first-of-type{border-top-right-radius:var(--s-border-radius-sm)}.text-input--inline.sc-swirl-text-input .text-input__step-button.sc-swirl-text-input:last-of-type{border-bottom-right-radius:var(--s-border-radius-sm)}.text-input--inline.sc-swirl-text-input .text-input__step-button.sc-swirl-text-input:hover{background-color:var(--s-surface-raised-hovered)}.text-input--inline.sc-swirl-text-input .text-input__step-button.sc-swirl-text-input swirl-icon-expand-less.sc-swirl-text-input,.text-input--inline.sc-swirl-text-input .text-input__step-button.sc-swirl-text-input swirl-icon-expand-more.sc-swirl-text-input{width:1rem}.text-input--inline.sc-swirl-text-input .text-input__clear-button.sc-swirl-text-input,.text-input--inline.sc-swirl-text-input .text-input__password-toggle.sc-swirl-text-input{top:-0.0625rem}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input--inline.sc-swirl-text-input .text-input__clear-button.sc-swirl-text-input,.text-input--inline.sc-swirl-text-input .text-input__password-toggle.sc-swirl-text-input{top:0}}.text-input--inline.sc-swirl-text-input .text-input__character-counter.sc-swirl-text-input{top:calc(100% + var(--s-space-12) + var(--s-border-width-default));right:calc(-1 * var(--s-space-12));max-width:6rem}.text-input__input.sc-swirl-text-input{display:inline-flex;width:100%;max-height:13.75rem;margin:0;padding:0;border:none;color:var(--s-text-default);background-color:transparent;font:inherit;font-size:var(--s-font-size-base);line-height:var(--s-line-height-base);resize:none;caret-color:var(--s-border-highlight)}.text-input__input.sc-swirl-text-input:focus{outline:none}.text-input__input.sc-swirl-text-input:disabled{color:var(--s-text-disabled);background-color:transparent}.text-input__input.sc-swirl-text-input::-webkit-outer-spin-button,.text-input__input.sc-swirl-text-input::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}.text-input__input[type="number"].sc-swirl-text-input{-moz-appearance:textfield}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input__input.sc-swirl-text-input{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}input.text-input__input.sc-swirl-text-input:not([type="password"]){width:0.25rem;min-width:0.25rem}.text-input--disable-dynamic-width.sc-swirl-text-input input.text-input__input.sc-swirl-text-input:not([type="password"]){width:100%;min-width:0}.text-input__clear-button.sc-swirl-text-input,.text-input__password-toggle.sc-swirl-text-input{position:absolute;top:calc(-1 * var(--s-space-12));right:0;display:inline-flex;margin:0;padding:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:pointer}.text-input__clear-button.sc-swirl-text-input:focus:not(:focus-visible),.text-input__password-toggle.sc-swirl-text-input:focus:not(:focus-visible){outline:none}.text-input__clear-button.sc-swirl-text-input:focus-visible,.text-input__password-toggle.sc-swirl-text-input:focus-visible{outline-color:var(--s-focus-default)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input__clear-button.sc-swirl-text-input,.text-input__password-toggle.sc-swirl-text-input{top:-0.625rem}}.text-input__stepper.sc-swirl-text-input{position:absolute;top:-1.4375rem;right:0;display:flex;flex-direction:column}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input__stepper.sc-swirl-text-input{top:-1.25rem}}.text-input__step-button.sc-swirl-text-input{display:inline-flex;margin:0;padding:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:pointer}.text-input__step-button.sc-swirl-text-input:focus:not(:focus-visible){outline:none}.text-input__step-button.sc-swirl-text-input:focus-visible{outline-color:var(--s-focus-default)}.text-input__character-counter.sc-swirl-text-input{position:absolute;top:-1.375rem;right:0;display:flex;color:var(--s-text-subdued);line-height:var(--s-line-height-sm);flex-direction:column}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input__character-counter.sc-swirl-text-input{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.text-input__prefix.sc-swirl-text-input{padding-right:var(--s-space-4);color:var(--s-text-subdued);font-size:var(--s-font-size-base)}.text-input__suffix.sc-swirl-text-input{padding-left:var(--s-space-4);color:var(--s-text-subdued);font-size:var(--s-font-size-base)}', b = class {
+const w = '.sc-swirl-text-input-h{display:block;width:100%}.sc-swirl-text-input-h *.sc-swirl-text-input{box-sizing:border-box}.text-input.sc-swirl-text-input{position:relative;display:flex;width:100%;align-items:center;color:var(--s-text-default);font:inherit;line-height:var(--s-line-height-sm);cursor:text}.text-input--auto-grow.sc-swirl-text-input .text-input__input.sc-swirl-text-input{max-height:none}.text-input--clearable.sc-swirl-text-input,.text-input--type-number.sc-swirl-text-input,.text-input--type-password.sc-swirl-text-input{padding-right:calc(1.5rem + var(--s-space-8))}.text-input--show-password.sc-swirl-text-input .text-input__input.sc-swirl-text-input{width:100%}.text-input--disabled.sc-swirl-text-input .text-input__character-counter.sc-swirl-text-input{color:var(--s-text-disabled)}.text-input--inline.sc-swirl-text-input .text-input__stepper.sc-swirl-text-input{top:calc(-1 * var(--s-space-8));right:calc(-1 * var(--s-space-12))}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input--inline.sc-swirl-text-input .text-input__stepper.sc-swirl-text-input{top:calc(-1 * var(--s-space-8));right:calc(-1 * var(--s-space-12))}}.text-input--inline.sc-swirl-text-input .text-input__step-button.sc-swirl-text-input{width:2rem;height:1.125rem;justify-content:center;background-color:var(--s-surface-raised-default)}.text-input--inline.sc-swirl-text-input .text-input__step-button.sc-swirl-text-input:first-of-type{border-top-right-radius:var(--s-border-radius-sm)}.text-input--inline.sc-swirl-text-input .text-input__step-button.sc-swirl-text-input:last-of-type{border-bottom-right-radius:var(--s-border-radius-sm)}.text-input--inline.sc-swirl-text-input .text-input__step-button.sc-swirl-text-input:hover{background-color:var(--s-surface-raised-hovered)}.text-input--inline.sc-swirl-text-input .text-input__step-button.sc-swirl-text-input swirl-icon-expand-less.sc-swirl-text-input,.text-input--inline.sc-swirl-text-input .text-input__step-button.sc-swirl-text-input swirl-icon-expand-more.sc-swirl-text-input{width:1rem}.text-input--inline.sc-swirl-text-input .text-input__clear-button.sc-swirl-text-input,.text-input--inline.sc-swirl-text-input .text-input__password-toggle.sc-swirl-text-input{top:-0.0625rem}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input--inline.sc-swirl-text-input .text-input__clear-button.sc-swirl-text-input,.text-input--inline.sc-swirl-text-input .text-input__password-toggle.sc-swirl-text-input{top:0}}.text-input--inline.sc-swirl-text-input .text-input__character-counter.sc-swirl-text-input{top:calc(100% + var(--s-space-12) + var(--s-border-width-default));right:calc(-1 * var(--s-space-12));max-width:6rem}.text-input__input.sc-swirl-text-input{display:inline-flex;width:100%;max-height:13.75rem;margin:0;padding:0;border:none;color:var(--s-text-default);background-color:transparent;font:inherit;font-size:var(--s-font-size-base);line-height:var(--s-line-height-base);resize:none;caret-color:var(--s-border-highlight)}.text-input__input.sc-swirl-text-input:focus{outline:none}.text-input__input.sc-swirl-text-input:disabled{color:var(--s-text-disabled);background-color:transparent}.text-input__input.sc-swirl-text-input::-webkit-outer-spin-button,.text-input__input.sc-swirl-text-input::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}.text-input__input[type="number"].sc-swirl-text-input{-moz-appearance:textfield}.text-input__input.sc-swirl-text-input::-moz-placeholder{font-size:var(--swirl-text-input-placeholder-size)}.text-input__input.sc-swirl-text-input::placeholder{font-size:var(--swirl-text-input-placeholder-size)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input__input.sc-swirl-text-input{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}input.text-input__input.sc-swirl-text-input:not([type="password"]){width:0.25rem;min-width:0.25rem}.text-input--disable-dynamic-width.sc-swirl-text-input input.text-input__input.sc-swirl-text-input:not([type="password"]){width:100%;min-width:0}.text-input__clear-button.sc-swirl-text-input,.text-input__password-toggle.sc-swirl-text-input{position:absolute;top:calc(-1 * var(--s-space-12));right:0;display:inline-flex;margin:0;padding:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:pointer}.text-input__clear-button.sc-swirl-text-input:focus:not(:focus-visible),.text-input__password-toggle.sc-swirl-text-input:focus:not(:focus-visible){outline:none}.text-input__clear-button.sc-swirl-text-input:focus-visible,.text-input__password-toggle.sc-swirl-text-input:focus-visible{outline-color:var(--s-focus-default)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input__clear-button.sc-swirl-text-input,.text-input__password-toggle.sc-swirl-text-input{top:-0.625rem}}.text-input__stepper.sc-swirl-text-input{position:absolute;top:-1.4375rem;right:0;display:flex;flex-direction:column}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input__stepper.sc-swirl-text-input{top:-1.25rem}}.text-input__step-button.sc-swirl-text-input{display:inline-flex;margin:0;padding:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:pointer}.text-input__step-button.sc-swirl-text-input:focus:not(:focus-visible){outline:none}.text-input__step-button.sc-swirl-text-input:focus-visible{outline-color:var(--s-focus-default)}.text-input__character-counter.sc-swirl-text-input{position:absolute;top:-1.375rem;right:0;display:flex;color:var(--s-text-subdued);line-height:var(--s-line-height-sm);flex-direction:column}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input__character-counter.sc-swirl-text-input{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.text-input__prefix.sc-swirl-text-input{padding-right:var(--s-space-4);color:var(--s-text-subdued);font-size:var(--s-font-size-base)}.text-input__suffix.sc-swirl-text-input{padding-left:var(--s-space-4);color:var(--s-text-subdued);font-size:var(--s-font-size-base)}', m = class {
   constructor(s) {
     h(this, s), this.inputBlur = n(this, "inputBlur", 7), this.inputFocus = n(this, "inputFocus", 7), this.valueChange = n(this, "valueChange", 7), this.desktopMediaQuery = x(), this.desktopMediaQueryHandler = (t) => {
       this.updateIconSize(t.matches);
@@ -59,7 +59,7 @@ const w = '.sc-swirl-text-input-h{display:block;width:100%}.sc-swirl-text-input-
   }
   render() {
     var u;
-    const s = this.rows === 1 && !this.autoGrow ? "input" : "textarea", t = this.invalid === !0 || this.invalid === !1 ? String(this.invalid) : void 0, e = this.type === "number" && !this.disabled, r = this.type === "password" && !this.disabled, a = this.clearable && !this.disabled && Boolean(this.value) && !r && !e && !this.showCharacterCounter, o = this.type === "password" && this.showPassword ? "text" : this.type, l = c("text-input", `text-input--type-${this.type}`, {
+    const s = this.rows === 1 && !this.autoGrow ? "input" : "textarea", t = this.invalid === !0 || this.invalid === !1 ? String(this.invalid) : void 0, e = this.type === "number" && !this.disabled, r = this.type === "password" && !this.disabled, a = this.clearable && !this.disabled && Boolean(this.value) && !r && !e && !this.showCharacterCounter, l = this.type === "password" && this.showPassword ? "text" : this.type, o = c("text-input", `text-input--type-${this.type}`, {
       "text-input--auto-grow": this.autoGrow,
       "text-input--clearable": this.clearable,
       "text-input--disabled": this.disabled,
@@ -68,10 +68,10 @@ const w = '.sc-swirl-text-input-h{display:block;width:100%}.sc-swirl-text-input-
       "text-input--inline": this.inline,
       "text-input--show-password": this.type === "password" && this.showPassword
     });
-    return i(d, null, i("div", { class: l }, this.prefixLabel && i("span", { class: "text-input__prefix" }, this.prefixLabel), i(s, { "aria-autocomplete": this.swirlAriaAutocomplete, "aria-controls": this.swirlAriaControls, "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : void 0, "aria-expanded": this.swirlAriaExpanded, "aria-invalid": t, autoComplete: this.autoComplete, autoFocus: this.autoFocus, class: "text-input__input", disabled: this.disabled, inputMode: this.mode, maxLength: this.maxLength, max: this.type === "number" ? this.max : void 0, min: this.type === "number" ? this.min : void 0, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, onKeyPress: this.onKeyPress, placeholder: Boolean(this.suffixLabel) ? void 0 : this.placeholder, ref: (p) => this.inputEl = p, required: this.required, role: this.swirlRole, rows: this.rows > 1 ? this.rows : this.autoGrow ? 1 : void 0, spellcheck: this.spellCheck, step: this.type === "number" ? this.step : void 0, type: o, value: this.value }, this.rows > 1 && this.value), this.suffixLabel && i("span", { class: "text-input__suffix" }, this.suffixLabel), a && i("button", { "aria-label": this.clearButtonLabel, class: "text-input__clear-button", onClick: this.clear, part: "text-input__clear-button", type: "button" }, i("swirl-icon-cancel", { size: this.iconSize })), r && i("button", { "aria-label": this.passwordToggleLabel, class: "text-input__password-toggle", onClick: this.togglePassword, type: "button" }, this.showPassword ? i("swirl-icon-visibility-off", { size: this.iconSize }) : i("swirl-icon-visibility", { size: this.iconSize })), e && i("span", { class: "text-input__stepper" }, i("button", { "aria-hidden": "true", class: "text-input__step-button", onClick: this.increaseValue, tabIndex: -1, type: "button" }, i("swirl-icon-expand-less", { size: this.iconSize })), i("button", { "aria-hidden": "true", class: "text-input__step-button", onClick: this.decreaseValue, tabIndex: -1, type: "button" }, i("swirl-icon-expand-more", { size: this.iconSize }))), this.showCharacterCounter && i("span", { class: "text-input__character-counter" }, ((u = this.value) == null ? void 0 : u.length) || 0, " ", Boolean(this.maxLength) ? `/ ${this.maxLength}` : "")));
+    return i(d, null, i("div", { class: o }, this.prefixLabel && i("span", { class: "text-input__prefix" }, this.prefixLabel), i(s, { "aria-autocomplete": this.swirlAriaAutocomplete, "aria-controls": this.swirlAriaControls, "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : void 0, "aria-expanded": this.swirlAriaExpanded, "aria-invalid": t, autoComplete: this.autoComplete, autoFocus: this.autoFocus, class: "text-input__input", disabled: this.disabled, inputMode: this.mode, maxLength: this.maxLength, max: this.type === "number" ? this.max : void 0, min: this.type === "number" ? this.min : void 0, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, onKeyPress: this.onKeyPress, placeholder: Boolean(this.suffixLabel) ? void 0 : this.placeholder, ref: (p) => this.inputEl = p, required: this.required, role: this.swirlRole, rows: this.rows > 1 ? this.rows : this.autoGrow ? 1 : void 0, spellcheck: this.spellCheck, step: this.type === "number" ? this.step : void 0, type: l, value: this.value }, this.rows > 1 && this.value), this.suffixLabel && i("span", { class: "text-input__suffix" }, this.suffixLabel), a && i("button", { "aria-label": this.clearButtonLabel, class: "text-input__clear-button", onClick: this.clear, part: "text-input__clear-button", type: "button" }, i("swirl-icon-cancel", { size: this.iconSize })), r && i("button", { "aria-label": this.passwordToggleLabel, class: "text-input__password-toggle", onClick: this.togglePassword, type: "button" }, this.showPassword ? i("swirl-icon-visibility-off", { size: this.iconSize }) : i("swirl-icon-visibility", { size: this.iconSize })), e && i("span", { class: "text-input__stepper" }, i("button", { "aria-hidden": "true", class: "text-input__step-button", onClick: this.increaseValue, tabIndex: -1, type: "button" }, i("swirl-icon-expand-less", { size: this.iconSize })), i("button", { "aria-hidden": "true", class: "text-input__step-button", onClick: this.decreaseValue, tabIndex: -1, type: "button" }, i("swirl-icon-expand-more", { size: this.iconSize }))), this.showCharacterCounter && i("span", { class: "text-input__character-counter" }, ((u = this.value) == null ? void 0 : u.length) || 0, " ", Boolean(this.maxLength) ? `/ ${this.maxLength}` : "")));
   }
 };
-b.style = w;
+m.style = w;
 export {
-  b as swirl_text_input
+  m as swirl_text_input
 };

package/dist/{swirl-text.entry.0ac7e73a.js → swirl-text.entry.659a273a.js}

@@ -1,4 +1,4 @@
-import { r as I, h as b, H as J, g as T } from "./index.b2639202.js";
+import { r as I, h as b, H as J, g as T } from "./index.3e13cbcd.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.c1a5a6dc.js → swirl-theme-provider.entry.e3b6e27e.js}

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

package/dist/{swirl-time-input.entry.be8b4bfe.js → swirl-time-input.entry.47b2d112.js}

@@ -1,4 +1,4 @@
-import { r as h, c, h as a, H as m, g as p } from "./index.b2639202.js";
+import { r as h, c, h as a, H as m, g as p } from "./index.3e13cbcd.js";
 import { c as f } from "./index-d280dafb.186cdb0e.js";
 import { p as r, i as o, f as l, m as v } from "./maska-4866b970.5336f9cb.js";
 import { g as w } from "./utils-bc84f36e.1fee9865.js";

package/dist/{swirl-toast-provider.entry.118fb4bf.js → swirl-toast-provider.entry.9f9e2ca4.js}

@@ -1,4 +1,4 @@
-import { r, h as o, H as n } from "./index.b2639202.js";
+import { r, h as o, H as n } from "./index.3e13cbcd.js";
 import "react";
 import "react-dom";
 const h = class {

package/dist/{swirl-toast.entry.ad010649.js → swirl-toast.entry.700d56b2.js}

@@ -1,4 +1,4 @@
-import { r as o, c as n, h as i, H as r } from "./index.b2639202.js";
+import { r as o, c as n, h as i, H as r } from "./index.3e13cbcd.js";
 import { c } from "./index-d280dafb.186cdb0e.js";
 import { g as d } from "./utils-bc84f36e.1fee9865.js";
 import "react";

package/dist/{swirl-tooltip.entry.6517efa5.js → swirl-tooltip.entry.2f88afcb.js}

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

package/dist/{swirl-tree-navigation-item.entry.fcae79a1.js → swirl-tree-navigation-item.entry.12309124.js}

@@ -1,4 +1,4 @@
-import { r as a, h as i, H as s, g as r } from "./index.b2639202.js";
+import { r as a, h as i, H as s, g as r } from "./index.3e13cbcd.js";
 import { c as o } from "./index-d280dafb.186cdb0e.js";
 import "react";
 import "react-dom";

package/dist/{swirl-video-thumbnail.entry.dd3154d0.js → swirl-video-thumbnail.entry.41fcc4e6.js}

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

package/dist/{swirl-visually-hidden.entry.7c3f627a.js → swirl-visually-hidden.entry.fe592f49.js}

@@ -1,4 +1,4 @@
-import { r as s, h as i, H as l } from "./index.b2639202.js";
+import { r as s, h as i, H as l } from "./index.3e13cbcd.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.7eb44c98.js → wc-datepicker.entry.1d53db37.js}

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

package/package.json

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