@getflip/swirl-components-react 0.287.0 → 0.289.0

package/dist/{swirl-symbol-xing.entry.a85431df.js → swirl-symbol-xing.entry.a6a84d69.js}

@@ -1,4 +1,4 @@
-import { r as t, h as e, F as C } from "./index.35faa157.js";
+import { r as t, h as e, F as C } from "./index.ddfd77f4.js";
 import { c as l } from "./index-267776a4.6beb4f4b.js";
 import "react";
 import "react-dom";

package/dist/{swirl-symbol-youtube.entry.ce493391.js → swirl-symbol-youtube.entry.57ac9beb.js}

@@ -1,4 +1,4 @@
-import { r as i, h as e, F as o } from "./index.35faa157.js";
+import { r as i, h as e, F as o } from "./index.ddfd77f4.js";
 import { c as l } from "./index-267776a4.6beb4f4b.js";
 import "react";
 import "react-dom";

package/dist/{swirl-symbol.entry.ae621178.js → swirl-symbol.entry.1a00c52f.js}

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

package/dist/swirl-tab-bar.entry.5f27ff4a.js

@@ -0,0 +1,58 @@
+import { r as l, c as b, h as i, H as d, g as o } from "./index.ddfd77f4.js";
+import { c as n } from "./index-267776a4.6beb4f4b.js";
+import { f as c } from "./utils-877a768f.c277f897.js";
+import "react";
+import "react-dom";
+const v = `.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;overflow-x:auto;scrollbar-width:none}.tab-bar.tab-bar--variant-default.sc-swirl-tab-bar{border-bottom:var(--swirl-tab-bar-border-width) solid
+      var(--s-border-default)}.tab-bar.tab-bar--variant-pill.sc-swirl-tab-bar{gap:var(--s-space-8)}.tab-bar--justify-evenly.sc-swirl-tab-bar>*.sc-swirl-tab-bar{flex:1}.tab-bar__tab.sc-swirl-tab-bar{position:relative;display:flex;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content;margin:0;align-items:center;border:none;font:inherit;font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-lg);cursor:pointer;justify-content:center}.tab-bar__tab.tab-bar__tab--variant-default.sc-swirl-tab-bar{background-color:transparent;color:var(--s-interactive-neutral-default);padding:var(--s-space-4) var(--s-space-8)}.tab-bar__tab.tab-bar__tab--variant-default.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}.tab-bar__tab.tab-bar__tab--variant-default.tab-bar__tab--active.sc-swirl-tab-bar{color:var(--s-text-highlight)}.tab-bar__tab.tab-bar__tab--variant-default.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}.tab-bar__tab.tab-bar__tab--variant-default.sc-swirl-tab-bar:focus{outline:none}.tab-bar__tab.tab-bar__tab--variant-default.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.tab-bar__tab--variant-pill.sc-swirl-tab-bar{border-radius:var(--s-border-radius-full-round);background:var(--s-action-neutral-default);color:var(--s-text-default);padding:var(--s-space-8) var(--s-space-16);gap:var(--s-space-8)}.tab-bar__tab.tab-bar__tab--variant-pill.sc-swirl-tab-bar:hover{background:var(--s-action-neutral-hovered)}.tab-bar__tab.tab-bar__tab--variant-pill.sc-swirl-tab-bar:active{background:var(--s-action-neutral-pressed)}.tab-bar__tab.tab-bar__tab--variant-pill.tab-bar__tab--active.sc-swirl-tab-bar{background:var(--s-action-primary-default);color:var(--s-text-on-action-primary)}.tab-bar__tab.tab-bar__tab--variant-pill.sc-swirl-tab-bar:focus-visible{outline-color:var(--s-focus-default);outline-offset:var(--s-space-2)}@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);padding:calc(var(--s-space-4) + var(--s-space-2)) var(--s-space-8)}}.tab-bar__tab-icon.sc-swirl-tab-bar{display:inline-flex}.tab-bar__tab-label.sc-swirl-tab-bar{display:inline-flex;padding:var(--s-space-8) var(--s-space-8);text-align:center}.tab-bar__tab-label.tab-bar__tab-label--variant-pill.sc-swirl-tab-bar{padding:0}`, f = v, h = class {
+  constructor(r) {
+    l(this, r), this.activateNextTab = b(this, "activateNextTab", 7), this.activatePreviousTab = b(this, "activatePreviousTab", 7), this.activateTab = b(this, "activateTab", 7), this.onKeyDown = (t) => {
+      t.code === "ArrowLeft" ? (t.preventDefault(), this.focusAdjacentTab(!0), this.activatePreviousTab.emit()) : t.code === "ArrowRight" && (t.preventDefault(), this.focusAdjacentTab(!1), this.activateNextTab.emit());
+    }, this.disableTabSemantics = void 0, this.label = void 0, this.justify = "start", this.paddingBlockEnd = void 0, this.paddingBlockStart = void 0, this.paddingInlineEnd = void 0, this.paddingInlineStart = void 0, this.tabs = [], this.variant = "default";
+  }
+  focusAdjacentTab(r) {
+    const t = this.getTabs(), a = t.findIndex((s) => s.ariaSelected === "true"), e = c(r ? a - 1 : a + 1, t.length);
+    t[e].focus();
+  }
+  getTabs() {
+    return Array.from(this.el.querySelectorAll('[role="tab"]'));
+  }
+  render() {
+    const r = n("tab-bar", `tab-bar--justify-${this.justify}`, {
+      "tab-bar--variant-pill": this.variant === "pill",
+      "tab-bar--variant-default": this.variant === "default"
+    }), t = {
+      paddingInlineEnd: Boolean(this.paddingInlineEnd) ? `var(--s-space-${this.paddingInlineEnd})` : void 0,
+      paddingInlineStart: Boolean(this.paddingInlineStart) ? `var(--s-space-${this.paddingInlineStart})` : void 0,
+      paddingBlockEnd: Boolean(this.paddingBlockEnd) ? `var(--s-space-${this.paddingBlockEnd})` : void 0,
+      paddingBlockStart: Boolean(this.paddingBlockStart) ? `var(--s-space-${this.paddingBlockStart})` : void 0
+    };
+    return i(d, { key: "deb50eba4e47565ae6338a5af43b7a0a1054e6b1" }, i("div", { key: "75cc9b8e1ffbe76ff00165fb3428799fcd7ea2ac", "aria-label": this.label, class: r, onKeyDown: this.onKeyDown, role: this.disableTabSemantics ? void 0 : "tablist", style: t }, this.tabs.map((a) => {
+      const e = n("tab-bar__tab", {
+        "tab-bar__tab--active": a.active,
+        "tab-bar__tab--variant-pill": this.variant === "pill",
+        "tab-bar__tab--variant-default": this.variant === "default"
+      }), s = n("tab-bar__tab-label", {
+        "tab-bar__tab-label--variant-pill": this.variant === "pill"
+      });
+      return i("button", {
+        "aria-controls": this.disableTabSemantics ? void 0 : a.id,
+        "aria-selected": this.disableTabSemantics ? void 0 : a.active ? "true" : "false",
+        class: e,
+        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 && i("span", { class: "tab-bar__tab-icon", innerHTML: a.icon }), i("span", { class: s }, a.label));
+    })));
+  }
+  get el() {
+    return o(this);
+  }
+};
+h.style = f;
+export {
+  h as swirl_tab_bar
+};

package/dist/{swirl-tab.entry.640f7a5a.js → swirl-tab.entry.49062ac7.js}

@@ -1,4 +1,4 @@
-import { r as a, h as s, H as e } from "./index.35faa157.js";
+import { r as a, h as s, H as e } from "./index.ddfd77f4.js";
 import { c as i } from "./index-267776a4.6beb4f4b.js";
 import "react";
 import "react-dom";

package/dist/{swirl-table-cell.entry.b992d727.js → swirl-table-cell.entry.7efd81ca.js}

@@ -1,4 +1,4 @@
-import { r as t, h as s, H as a } from "./index.35faa157.js";
+import { r as t, h as s, H as a } from "./index.ddfd77f4.js";
 import "react";
 import "react-dom";
 const l = ":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--is-sticky){position:sticky;z-index:1}:host(.table-cell--is-sticky-right){position:sticky;z-index:1;right:0;overflow:hidden}: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 = l, r = class {

package/dist/{swirl-table-column.entry.6f6108ba.js → swirl-table-column.entry.4faa39e0.js}

@@ -1,5 +1,5 @@
-import { r as t, h as s, H as i, g as a } from "./index.35faa157.js";
-import { c as o } from "./utils-fbb8b494.acf1ae9e.js";
+import { r as t, h as s, H as i, g as a } from "./index.ddfd77f4.js";
+import { c as o } from "./utils-877a768f.c277f897.js";
 import "react";
 import "react-dom";
 const r = ":host{display:flex;overflow:hidden;padding-top:var(--s-space-12);padding-right:var(--s-space-16);padding-bottom:var(--s-space-12);padding-left:var(--s-space-16);flex-basis:0;flex-grow:1;flex-shrink:1;align-items:center;border-bottom:var(--s-border-width-default) solid var(--s-border-default);color:var(--s-text-subdued);background-color:var(--s-surface-default);font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-sm);white-space:nowrap;letter-spacing:var(--s-letter-spacing-tighter);text-overflow:ellipsis;transition:box-shadow 0.15s;gap:var(--s-space-8)}:host(.table-column--is-sticky){position:sticky;z-index:1}:host(.table-column--is-sticky-right){position:sticky;z-index:1;right:0}:host(.table-column--has-shadow-right){box-shadow:var(--swirl-table-sticky-right-shadow)}:host(.table-column--has-shadow-left){box-shadow:var(--swirl-table-sticky-left-shadow)}:host *{box-sizing:border-box}.table-column__sort-indicator{display:inline-flex;width:1.25rem;height:1.25rem;flex-grow:0;flex-shrink:0}", d = r, n = class {

package/dist/{swirl-table-row-group.entry.66f4482d.js → swirl-table-row-group.entry.287f9279.js}

@@ -1,4 +1,4 @@
-import { r as o, h as e, H as l, g as r } from "./index.35faa157.js";
+import { r as o, h as e, H as l, g as r } from "./index.ddfd77f4.js";
 import "react";
 import "react-dom";
 const a = ":host{position:relative;z-index:1;display:block}:host *{box-sizing:border-box}:host(:hover),:host(:focus-within){z-index:2}.table-row-group__header-row{position:relative;z-index:var(--s-z-10);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);display:flex;align-items:center}.table-row-group__label{position:sticky;left:var(--s-space-16)}.table-row-group__tooltip{display:inline-flex;margin-left:var(--s-space-4);vertical-align:middle}.table-row-group__tooltip-icon{color:var(--s-icon-default)}.table-row-group__collapse-icon{color:var(--s-icon-default);padding-right:var(--s-space-20)}.table-row-group__rows-container{display:contents;transition:height 0.3s ease-out}.table-row-group__rows-container.is-hidden{height:0}.sc-swirl-button-h{display:flex}", n = a, c = class {

package/dist/{swirl-table-row.entry.4338f58f.js → swirl-table-row.entry.62d3cf9e.js}

@@ -1,6 +1,6 @@
-import { r as s, h as t, H as o, g as r } from "./index.35faa157.js";
+import { r as s, h as t, H as o, g as r } from "./index.ddfd77f4.js";
 import { c as l } from "./index-267776a4.6beb4f4b.js";
-import { c as a } from "./utils-fbb8b494.acf1ae9e.js";
+import { c as a } from "./utils-877a768f.c277f897.js";
 import "react";
 import "react-dom";
 const i = ":host{display:flex}:host(.table-row--highlighted){--swirl-ghost-button-background-default:transparent}:host(.table-row--highlighted) ::slotted(.table-cell){background-color:rgba(240, 242, 255, 1);}:host ::slotted(.table-cell){border-bottom:var(--s-border-width-default) solid var(--s-border-default)}:host *{box-sizing:border-box}", d = i, h = class {

package/dist/{swirl-table.entry.763a797b.js → swirl-table.entry.b8999e48.js}

@@ -1,5 +1,5 @@
-import { r as S, h as a, H as _, g as v } from "./index.35faa157.js";
-import { d as C, i as y } from "./utils-fbb8b494.acf1ae9e.js";
+import { r as S, h as a, H as _, g as v } from "./index.ddfd77f4.js";
+import { d as C, i as y } from "./utils-877a768f.c277f897.js";
 import "react";
 import "react-dom";
 var k = function(t) {

package/dist/{swirl-tabs.entry.5b662115.js → swirl-tabs.entry.59beba82.js}

@@ -1,15 +1,16 @@
-import { r as s, c as b, h as e, H as n, g as c } from "./index.35faa157.js";
+import { r as n, c as b, h as s, H as r, g as d } from "./index.ddfd77f4.js";
+import { f as e } from "./utils-877a768f.c277f897.js";
 import "react";
 import "react-dom";
-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%}", d = r, h = class {
+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 = c, l = class {
   constructor(t) {
-    s(this, t), this.tabActivated = b(this, "tabActivated", 7), this.tabs = [], this.onActivateNextTab = () => {
+    n(this, t), this.tabActivated = b(this, "tabActivated", 7), this.tabs = [], this.onActivateNextTab = () => {
       this.activateNextTab();
     }, this.onActivatePreviousTab = () => {
       this.activatePreviousTab();
     }, this.onActivateTab = (i) => {
       this.activateTab(i.detail);
-    }, this.initialTab = void 0, this.label = void 0, this.justifyTabBar = void 0, this.tabBarPaddingInlineEnd = void 0, this.tabBarPaddingInlineStart = void 0, this.activeTab = void 0, this.tabBarTabs = [];
+    }, this.initialTab = void 0, this.label = void 0, this.justifyTabBar = void 0, this.tabBarPaddingBlockEnd = void 0, this.tabBarPaddingBlockStart = void 0, this.tabBarPaddingInlineEnd = void 0, this.tabBarPaddingInlineStart = void 0, this.tabBarVariant = "default", this.activeTab = void 0, this.tabBarTabs = [];
   }
   componentWillLoad() {
     this.collectTabs(), this.updateTabBarTabs();
@@ -22,14 +23,14 @@ const r = ".sc-swirl-tabs-h{display:block;width:100%}.sc-swirl-tabs-h *.sc-swirl
     !Boolean(i) || (i.active = !0, this.tabActivated.emit(i), this.updateTabBarTabs());
   }
   activateNextTab() {
-    const t = this.tabs.findIndex((a) => a.tabId === this.activeTab), i = Math.min(this.tabs.length - 1, t + 1);
+    const t = this.tabs.findIndex((a) => a.tabId === this.activeTab), i = e(t + 1, this.tabs.length);
     this.activateTab(this.tabs[i].tabId), requestAnimationFrame(() => {
       var a;
       (a = this.el.querySelector(".tabs__tab--active")) == null || a.focus();
     });
   }
   activatePreviousTab() {
-    const t = this.tabs.findIndex((a) => a.tabId === this.activeTab), i = Math.max(0, t - 1);
+    const t = this.tabs.findIndex((a) => a.tabId === this.activeTab), i = e(t - 1, this.tabs.length);
     this.activateTab(this.tabs[i].tabId), requestAnimationFrame(() => {
       var a;
       (a = this.el.querySelector(".tabs__tab--active")) == null || a.focus();
@@ -50,13 +51,13 @@ const r = ".sc-swirl-tabs-h{display:block;width:100%}.sc-swirl-tabs-h *.sc-swirl
     }));
   }
   render() {
-    return e(n, { key: "44caea9a926dc297cd030eb005fc3f6123a8d505" }, e("div", { key: "34a91794a16c5bf3f274edafd9a9cba4d4784ce0", class: "tabs" }, e("swirl-tab-bar", { key: "7d7351ea490ba3cd2d8863da2ce302bd4761fc6f", label: this.label, onActivateNextTab: this.onActivateNextTab, onActivatePreviousTab: this.onActivatePreviousTab, onActivateTab: this.onActivateTab, tabs: this.tabBarTabs, justify: this.justifyTabBar, paddingInlineEnd: this.tabBarPaddingInlineEnd, paddingInlineStart: this.tabBarPaddingInlineStart })), e("slot", { key: "35a4ab2fe39e56da291bfe5e3b624ffed3ce6220" }));
+    return s(r, { key: "1ac2dfa2ae746878117dd5a9d084c4f01b3bfea8" }, s("div", { key: "01e1a9a7f5fd4801af2bd54750f3e7954a6fff50", class: "tabs" }, s("swirl-tab-bar", { key: "9435cfed3336d04ae4f531992c26e1fbd54c4520", label: this.label, onActivateNextTab: this.onActivateNextTab, onActivatePreviousTab: this.onActivatePreviousTab, onActivateTab: this.onActivateTab, tabs: this.tabBarTabs, justify: this.justifyTabBar, paddingBlockEnd: this.tabBarPaddingBlockEnd, paddingBlockStart: this.tabBarPaddingBlockStart, paddingInlineEnd: this.tabBarPaddingInlineEnd, paddingInlineStart: this.tabBarPaddingInlineStart, variant: this.tabBarVariant })), s("slot", { key: "649844c197a13ebc8cd4a7925acb1cf48d728404" }));
   }
   get el() {
-    return c(this);
+    return d(this);
   }
 };
-h.style = d;
+l.style = h;
 export {
-  h as swirl_tabs
+  l as swirl_tabs
 };

package/dist/{swirl-text-input.entry.cf70b1a2.js → swirl-text-input.entry.47173a48.js}

@@ -1,6 +1,6 @@
-import { r as h, c as n, h as i, H as d } from "./index.35faa157.js";
+import { r as h, c as n, h as i, H as d } from "./index.ddfd77f4.js";
 import { c } from "./index-267776a4.6beb4f4b.js";
-import { g as x } from "./utils-fbb8b494.acf1ae9e.js";
+import { g as x } from "./utils-877a768f.c277f897.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--font-size-sm.sc-swirl-text-input{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input--font-size-sm.sc-swirl-text-input .text-input__input.sc-swirl-text-input{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.text-input--font-size-base.sc-swirl-text-input{--swirl-text-input-placeholder-size:var(--s-font-size-base);font-size:var(--s-font-size-base);line-height:var(--s-line-height-base)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input--font-size-base.sc-swirl-text-input .text-input__input.sc-swirl-text-input{font-size:var(--s-font-size-base);line-height:var(--s-line-height-base)}}.text-input--has-suffix.sc-swirl-text-input input.text-input__input.sc-swirl-text-input:not([type="password"]){width:0.25rem;min-width:0.25rem}.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)}}.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)}', f = w, b = class {

package/dist/{swirl-text.entry.d8d6e450.js → swirl-text.entry.d34e0bde.js}

@@ -1,4 +1,4 @@
-import { r as at, h as Y, H as lt, g as ct } from "./index.35faa157.js";
+import { r as at, h as Y, H as lt, g as ct } from "./index.ddfd77f4.js";
 import { c as ht } from "./_commonjsHelpers-d20b9603.2d9b8855.js";
 import { c as dt } from "./index-267776a4.6beb4f4b.js";
 import "react";

package/dist/{swirl-theme-provider.entry.498ad3ec.js → swirl-theme-provider.entry.182a379b.js}

@@ -1,4 +1,4 @@
-import { r as m, c as a, h as o, H as d } from "./index.35faa157.js";
+import { r as m, c as a, h as o, H as d } from "./index.ddfd77f4.js";
 import "react";
 import "react-dom";
 const l = ".sc-swirl-theme-provider-h{display:block}", c = l, i = "swirl-preferred-theme", g = class {

package/dist/{swirl-time-input.entry.8ae166ea.js → swirl-time-input.entry.d80d6f7e.js}

@@ -1,7 +1,7 @@
-import { r as c, c as u, h as a, H as p, g as m } from "./index.35faa157.js";
+import { r as c, c as u, h as a, H as p, g as m } from "./index.ddfd77f4.js";
 import { c as f } from "./index-267776a4.6beb4f4b.js";
 import { p as r, i as o, f as d, m as v } from "./maska-c5119b9a.aa658697.js";
-import { g as w } from "./utils-fbb8b494.acf1ae9e.js";
+import { g as w } from "./utils-877a768f.c277f897.js";
 import "react";
 import "react-dom";
 import "./_commonjsHelpers-d20b9603.2d9b8855.js";

package/dist/{swirl-toast-provider.entry.65d16bd5.js → swirl-toast-provider.entry.2b5ff7c2.js}

@@ -1,4 +1,4 @@
-import { r, h as o, H as e } from "./index.35faa157.js";
+import { r, h as o, H as e } from "./index.ddfd77f4.js";
 import "react";
 import "react-dom";
 const c = class {

package/dist/{swirl-toast.entry.15e43f66.js → swirl-toast.entry.a8426cf8.js}

@@ -1,6 +1,6 @@
-import { r as o, c as n, h as e, H as r } from "./index.35faa157.js";
+import { r as o, c as n, h as e, H as r } from "./index.ddfd77f4.js";
 import { c } from "./index-267776a4.6beb4f4b.js";
-import { g as d } from "./utils-fbb8b494.acf1ae9e.js";
+import { g as d } from "./utils-877a768f.c277f897.js";
 import "react";
 import "react-dom";
 const h = ":host{display:flex}:host *{box-sizing:border-box}.toast{display:flex;width:100%;max-width:28rem;padding:var(--s-space-16);border-radius:var(--s-border-radius-sm);color:var(--s-text-on-status);background-color:var(--s-surface-neutral-default);box-shadow:var(--s-shadow-level-2)}.toast--intent-critical{background-color:var(--s-surface-critical-default)}.toast--intent-success{background-color:var(--s-surface-success-default)}.toast__icon{display:inline-flex;width:1.5rem;height:1.5rem;margin-top:calc(-1 * var(--s-space-2));margin-right:0.625rem;flex-shrink:0}.toast__icon ::part(icon){color:var(--s-icon-on-status)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.toast__icon{width:1.25rem;height:1.25rem;margin-top:0}}.toast__content{flex-grow:1;line-height:var(--s-line-height-base);text-align:left;align-self:flex-start}.toast__content ::part(link){color:var(--text-default)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.toast__content{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.toast__dismiss-button{display:inline-flex;min-width:1.5rem;height:1.5rem;margin-top:calc(-1 * var(--s-space-2));margin-left:var(--s-space-16);padding:0;flex-shrink:0;justify-content:center;align-items:center;border:none;color:var(--s-text-on-status);background-color:transparent;font:inherit;font-weight:var(--s-font-weight-semibold);cursor:pointer}.toast__dismiss-button ::part(icon){color:var(--s-icon-on-status)}", l = h, m = class {

package/dist/{swirl-toggle-button.entry.557a9ffd.js → swirl-toggle-button.entry.9a41e461.js}

@@ -1,4 +1,4 @@
-import { r as e, h as o } from "./index.35faa157.js";
+import { r as e, h as o } from "./index.ddfd77f4.js";
 import { c as r } from "./index-267776a4.6beb4f4b.js";
 import "react";
 import "react-dom";

package/dist/{swirl-toggle-group.entry.4c698292.js → swirl-toggle-group.entry.4a3c8733.js}

@@ -1,4 +1,4 @@
-import { r as g, c as i, h as o, g as r } from "./index.35faa157.js";
+import { r as g, c as i, h as o, g as r } from "./index.ddfd77f4.js";
 import "react";
 import "react-dom";
 const l = ":host{display:inline-block}:host *{box-sizing:border-box}.toggle-group{padding:var(--s-space-4);background-color:var(--s-surface-default);border-radius:var(--s-border-radius-base);box-shadow:var(--s-shadow-level-1)}", n = l, d = class {

package/dist/{swirl-toolbar.entry.b997cfe6.js → swirl-toolbar.entry.2d25e9a8.js}

@@ -1,5 +1,5 @@
-import { r as n, h as s, H as r, g as i } from "./index.35faa157.js";
-import { b as c } from "./utils-fbb8b494.acf1ae9e.js";
+import { r as n, h as s, H as r, g as i } from "./index.ddfd77f4.js";
+import { b as c } from "./utils-877a768f.c277f897.js";
 import "react";
 import "react-dom";
 const a = ":host{display:block}:host *{box-sizing:border-box}", l = a, d = class {

package/dist/{swirl-tooltip.entry.5017f398.js → swirl-tooltip.entry.645ec0fd.js}

@@ -1,4 +1,4 @@
-import { r as p, h as i, H as c, g as d } from "./index.35faa157.js";
+import { r as p, h as i, H as c, g as d } from "./index.ddfd77f4.js";
 import { b as h, c as m, a as u, o as f, s as b, f as w } from "./floating-ui.dom.esm-bef21834.ec4a9cbf.js";
 import { c as y } from "./index-267776a4.6beb4f4b.js";
 import "react";

package/dist/{swirl-tree-navigation-item.entry.1e2ed8ea.js → swirl-tree-navigation-item.entry.03c9cc19.js}

@@ -1,4 +1,4 @@
-import { r, c as s, h as e, H as d, g as o } from "./index.35faa157.js";
+import { r, c as s, h as e, H as d, g as o } from "./index.ddfd77f4.js";
 import { c as l } from "./index-267776a4.6beb4f4b.js";
 import "react";
 import "react-dom";

package/dist/{swirl-tree-navigation.entry.7c4b1613.js → swirl-tree-navigation.entry.eea74cbe.js}

@@ -1,4 +1,4 @@
-import { r as t, h as e, H as i } from "./index.35faa157.js";
+import { r as t, h as e, H as i } from "./index.ddfd77f4.js";
 import "react";
 import "react-dom";
 const r = ":host{display:block}:host *{box-sizing:border-box}.tree-navigation{margin:0;padding:0}", s = r, o = class {

package/dist/{swirl-tree-view-item.entry.56713844.js → swirl-tree-view-item.entry.9c2d5531.js}

@@ -1,4 +1,4 @@
-import { r as c, c as a, h as e, F as l, H as d, g as o } from "./index.35faa157.js";
+import { r as c, c as a, h as e, F as l, H as d, g as o } from "./index.ddfd77f4.js";
 import { c as h } from "./index-267776a4.6beb4f4b.js";
 import "react";
 import "react-dom";

package/dist/{swirl-tree-view.entry.3a9fd17c.js → swirl-tree-view.entry.6a9fb610.js}

@@ -1,4 +1,4 @@
-import { r as p, c as u, h as o, H as I, g as h } from "./index.35faa157.js";
+import { r as p, c as u, h as o, H as I, g as h } from "./index.ddfd77f4.js";
 import "react";
 import "react-dom";
 const E = ":host{display:block}:host *{box-sizing:border-box}.tree-view{display:flex;margin:0;padding:0;flex-direction:column;gap:var(--s-space-2)}", f = E, w = class {

package/dist/{swirl-video-thumbnail.entry.a4995b8d.js → swirl-video-thumbnail.entry.4b4b4adf.js}

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

package/dist/{swirl-visually-hidden.entry.8c965e85.js → swirl-visually-hidden.entry.c7bebe58.js}

@@ -1,4 +1,4 @@
-import { r as e, h as i, H as d } from "./index.35faa157.js";
+import { r as e, h as i, H as d } from "./index.ddfd77f4.js";
 import "react";
 import "react-dom";
 const r = ".sc-swirl-visually-hidden-h{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)}", l = r, t = class {

package/dist/{utils-fbb8b494.acf1ae9e.js → utils-877a768f.c277f897.js}

@@ -17,22 +17,22 @@ function m(t = document) {
 }
 const g = () => document.documentElement.classList.contains("disable-desktop-style-tweaks") ? window.matchMedia(null) : window.matchMedia("(min-width: 992px) and (max-width: 1439px) and (hover: hover), (min-width: 1440px)");
 function M(t, e, n = !1) {
-  let a;
+  let r;
   return async function() {
     const o = this, c = arguments, s = function() {
-      a = null, n || t.apply(o, c);
-    }, r = n && !Boolean(a);
-    clearTimeout(a), a = setTimeout(s, e), r && t.apply(o, c);
+      r = null, n || t.apply(o, c);
+    }, a = n && !Boolean(r);
+    clearTimeout(r), r = setTimeout(s, e), a && t.apply(o, c);
   };
 }
 function S(t, e) {
-  const n = e.scrollTop, a = n + e.clientHeight, i = e.getBoundingClientRect(), o = t.getBoundingClientRect(), s = {
+  const n = e.scrollTop, r = n + e.clientHeight, i = e.getBoundingClientRect(), o = t.getBoundingClientRect(), s = {
     top: o.top - i.top,
     right: o.right - i.right,
     bottom: o.bottom - i.bottom,
     left: o.left - i.left
-  }.top + n, r = s + t.offsetHeight, u = s < n ? n : s;
-  return (r > a ? a : r) - u;
+  }.top + n, a = s + t.offsetHeight, u = s < n ? n : s;
+  return (a > r ? r : a) - u;
 }
 function R() {
   return !window.matchMedia("(min-width: 768px)").matches;
@@ -50,14 +50,14 @@ function B(t, e) {
   function n(i, o) {
     if (!Boolean(o))
       return [];
-    const c = Array.from(o.querySelectorAll(i)), s = Boolean(window.HTMLSlotElement) && o instanceof HTMLSlotElement ? o.assignedElements() : [], r = [...Array.from(o.children), ...s], u = o.shadowRoot, h = n(i, u);
+    const c = Array.from(o.querySelectorAll(i)), s = Boolean(window.HTMLSlotElement) && o instanceof HTMLSlotElement ? o.assignedElements() : [], a = [...Array.from(o.children), ...s], u = o.shadowRoot, d = n(i, u);
     return [
       ...c,
-      ...r.map((d) => n(i, d)).flat(),
-      ...h
+      ...a.map((h) => n(i, h)).flat(),
+      ...d
     ];
   }
-  return n(e, t).filter((i, o, c) => !c.some((s, r) => s.isSameNode(i) && r > o));
+  return n(e, t).filter((i, o, c) => !c.some((s, a) => s.isSameNode(i) && a > o));
 }
 function D(t) {
   const e = new Date(t);
@@ -67,17 +67,21 @@ function E(t) {
   if (t instanceof Date)
     return `${t.getFullYear()}-${String(t.getMonth() + 1).padStart(2, "0")}-${String(t.getDate()).padStart(2, "0")}`;
 }
+function x(t, e) {
+  return (t % e + e) % e;
+}
 export {
   w as a,
   m as b,
   f as c,
   M as d,
   T as e,
-  b as f,
+  x as f,
   g,
-  E as h,
+  b as h,
   R as i,
-  S as j,
+  E as j,
+  S as k,
   l as p,
   B as q,
   D as r

package/dist/{wc-datepicker.entry.2f6ed33a.js → wc-datepicker.entry.55213883.js}

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

package/package.json

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

package/dist/swirl-tab-bar.entry.b8b98899.js

@@ -1,37 +0,0 @@
-import { r as b, c as s, h as e, H as l } from "./index.35faa157.js";
-import { c as r } from "./index-267776a4.6beb4f4b.js";
-import "react";
-import "react-dom";
-const o = '.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--justify-evenly.sc-swirl-tab-bar>*.sc-swirl-tab-bar{flex:1}.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-lg);cursor:pointer;justify-content:center}.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);padding:calc(var(--s-space-4) + var(--s-space-2)) var(--s-space-8)}}.tab-bar__tab-icon.sc-swirl-tab-bar{display:inline-flex}.tab-bar__tab-label.sc-swirl-tab-bar{display:inline-flex;overflow:hidden;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}', d = o, c = class {
-  constructor(i) {
-    b(this, i), this.activateNextTab = s(this, "activateNextTab", 7), this.activatePreviousTab = s(this, "activatePreviousTab", 7), this.activateTab = s(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.justify = "start", this.paddingInlineEnd = void 0, this.paddingInlineStart = void 0, this.tabs = [];
-  }
-  render() {
-    const i = r("tab-bar", `tab-bar--justify-${this.justify}`), t = {
-      paddingInlineEnd: Boolean(this.paddingInlineEnd) ? `var(--s-space-${this.paddingInlineEnd})` : void 0,
-      paddingInlineStart: Boolean(this.paddingInlineStart) ? `var(--s-space-${this.paddingInlineStart})` : void 0
-    };
-    return e(l, { key: "d883f7af119dd81a09081301e1e48c9f65e4a822" }, e("div", { key: "016e1125ef12dac89655aee9cae6e7514ba42e67", "aria-label": this.label, class: i, onKeyDown: this.onKeyDown, role: this.disableTabSemantics ? void 0 : "tablist", style: t }, this.tabs.map((a) => {
-      const n = r("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: n,
-        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));
-    })));
-  }
-};
-c.style = d;
-export {
-  c as swirl_tab_bar
-};