@getflip/swirl-components-react 0.80.2 → 0.80.4

package/dist/{swirl-tabs.entry.bd70121d.js → swirl-tabs.entry.137ccd38.js}

@@ -1,4 +1,4 @@
-import { r as e, c as b, h as s, H as r, g as n } from "./index.a360830a.js";
+import { r as e, c as b, h as s, H as r, g as n } from "./index.1508b8d7.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.ecc808d3.js → swirl-tag.entry.0af7a86c.js}

@@ -1,17 +1,17 @@
-import { r, c as s, h as t, H as n, g as i } from "./index.a360830a.js";
+import { r as o, c as s, h as t, H as n, g as i } from "./index.1508b8d7.js";
 import { c } from "./index-d280dafb.186cdb0e.js";
 import "react";
 import "react-dom";
 const l = ":host{display:inline-flex}:host *{box-sizing:border-box}.tag{display:inline-flex;padding:var(--s-space-2) var(--s-space-8);align-items:center;border-radius:var(--s-border-radius-s);color:var(--s-text-default);background-color:var(--s-surface-neutral-subdued);font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-sm);white-space:nowrap;gap:var(--s-space-4)}.tag--intent-info{color:var(--s-text-info);background-color:var(--s-surface-info-subdued)}.tag--intent-info .tag__removal-button{color:var(--icon-info)}.tag--intent-critical{color:var(--s-text-critical);background-color:var(--s-surface-critical-subdued)}.tag--intent-critical .tag__removal-button{color:var(--icon-critical)}.tag--intent-warning{color:var(--s-text-warning);background-color:var(--s-surface-warning-subdued)}.tag--intent-warning .tag__removal-button{color:var(--icon-warning)}.tag--intent-success{color:var(--s-text-success);background-color:var(--s-surface-success-subdued)}.tag--intent-success .tag__removal-button{color:var(--icon-success)}.tag__removal-button{display:inline-flex;margin-right:calc(-1 * var(--s-space-4));padding:0;border:none;color:var(--s-icon-strong);background-color:transparent;cursor:pointer}.tag__removal-button:focus:not(:focus-visible){outline:none}.tag__removal-button:focus-visible{outline-color:var(--s-focus-default)}", u = class {
   constructor(e) {
-    r(this, e), this.remove = s(this, "remove", 7), this.onRemove = (o) => {
+    o(this, e), this.remove = s(this, "remove", 7), this.onRemove = (r) => {
       var a;
-      (a = this.remove) === null || a === void 0 || a.emit(o);
+      (a = this.remove) === null || a === void 0 || a.emit(r);
     }, this.intent = "default", this.label = void 0, this.removable = void 0, this.removalButtonLabel = "Remove";
   }
   render() {
     const e = c("tag", `tag--intent-${this.intent}`);
-    return t(n, null, t("span", { class: e }, this.label, this.removable && t("button", { "aria-label": this.removalButtonLabel, class: "tag__removal-button", onClick: this.onRemove, tabIndex: this.el.ariaHidden === "true" ? -1 : void 0, type: "button" }, t("swirl-icon-close", { size: 16 }))));
+    return t(n, null, t("span", { class: e, part: "tag" }, this.label, this.removable && t("button", { "aria-label": this.removalButtonLabel, class: "tag__removal-button", onClick: this.onRemove, tabIndex: this.el.ariaHidden === "true" ? -1 : void 0, type: "button" }, t("swirl-icon-close", { size: 16 }))));
   }
   get el() {
     return i(this);

package/dist/{swirl-text-input.entry.6bc9bc7c.js → swirl-text-input.entry.fac3abf5.js}

@@ -1,4 +1,4 @@
-import { r as h, c as n, h as i, H as d } from "./index.a360830a.js";
+import { r as h, c as n, h as i, H as d } from "./index.1508b8d7.js";
 import { c } from "./index-d280dafb.186cdb0e.js";
 import { g as x } from "./utils-bc84f36e.1fee9865.js";
 import "react";
@@ -37,7 +37,9 @@ const w = '.sc-swirl-text-input-h{display:block;width:100%}.sc-swirl-text-input-
     }, this.autoComplete = "on", this.autoFocus = void 0, this.autoGrow = void 0, this.autoSelect = void 0, this.clearable = void 0, this.clearButtonLabel = "Clear input", this.disabled = void 0, this.disableDynamicWidth = void 0, this.swirlAriaAutocomplete = void 0, this.swirlAriaControls = void 0, this.swirlAriaDescribedby = void 0, this.swirlAriaExpanded = void 0, this.swirlRole = void 0, this.inline = void 0, this.invalid = void 0, this.maxLength = void 0, this.max = void 0, this.min = void 0, this.mode = void 0, this.placeholder = void 0, this.prefixLabel = void 0, this.required = void 0, this.rows = 1, this.showCharacterCounter = void 0, this.spellCheck = void 0, this.suffixLabel = void 0, this.step = void 0, this.passwordToggleLabel = "Toggle password display", this.type = "text", this.value = void 0, this.iconSize = 24, this.showPassword = !1;
   }
   componentDidLoad() {
-    this.updateIconSize(this.desktopMediaQuery.matches), this.desktopMediaQuery.onchange = this.desktopMediaQueryHandler;
+    this.updateIconSize(this.desktopMediaQuery.matches), this.desktopMediaQuery.onchange = this.desktopMediaQueryHandler, this.autoFocus && setTimeout(() => {
+      this.inputEl.focus();
+    });
   }
   componentDidRender() {
     this.adjustInputSize();
@@ -57,7 +59,7 @@ const w = '.sc-swirl-text-input-h{display:block;width:100%}.sc-swirl-text-input-
   }
   render() {
     var e;
-    const t = this.rows === 1 && !this.autoGrow ? "input" : "textarea", s = this.invalid === !0 || this.invalid === !1 ? String(this.invalid) : void 0, r = this.type === "number" && !this.disabled, a = this.type === "password" && !this.disabled, u = this.clearable && !this.disabled && Boolean(this.value) && !a && !r && !this.showCharacterCounter, l = this.type === "password" && this.showPassword ? "text" : this.type, o = c("text-input", `text-input--type-${this.type}`, {
+    const t = this.rows === 1 && !this.autoGrow ? "input" : "textarea", s = this.invalid === !0 || this.invalid === !1 ? String(this.invalid) : void 0, r = this.type === "number" && !this.disabled, a = this.type === "password" && !this.disabled, u = this.clearable && !this.disabled && Boolean(this.value) && !a && !r && !this.showCharacterCounter, o = this.type === "password" && this.showPassword ? "text" : this.type, l = c("text-input", `text-input--type-${this.type}`, {
       "text-input--auto-grow": this.autoGrow,
       "text-input--clearable": this.clearable,
       "text-input--disabled": this.disabled,
@@ -66,7 +68,7 @@ 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: o }, this.prefixLabel && i("span", { class: "text-input__prefix" }, this.prefixLabel), i(t, { "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": s, 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), u && 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 })), a && 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 })), r && 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" }, ((e = this.value) === null || e === void 0 ? void 0 : e.length) || 0, " ", Boolean(this.maxLength) ? `/ ${this.maxLength}` : "")));
+    return i(d, null, i("div", { class: l }, this.prefixLabel && i("span", { class: "text-input__prefix" }, this.prefixLabel), i(t, { "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": s, 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), u && 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 })), a && 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 })), r && 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" }, ((e = this.value) === null || e === void 0 ? void 0 : e.length) || 0, " ", Boolean(this.maxLength) ? `/ ${this.maxLength}` : "")));
   }
 };
 b.style = w;

package/dist/{swirl-text.entry.ce164101.js → swirl-text.entry.d6ecdb8b.js}

@@ -1,4 +1,4 @@
-import { r as I, h as b, H as J, g as T } from "./index.a360830a.js";
+import { r as I, h as b, H as J, g as T } from "./index.1508b8d7.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.b970d8c4.js → swirl-theme-provider.entry.a1b01352.js}

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

package/dist/{swirl-time-input.entry.ac864335.js → swirl-time-input.entry.5ae15bb9.js}

@@ -1,6 +1,6 @@
-import { r as h, c, h as a, H as m, g as p } from "./index.a360830a.js";
-import { c as v } from "./index-d280dafb.186cdb0e.js";
-import { p as r, i as o, f as l, m as f } from "./maska-4866b970.5336f9cb.js";
+import { r as h, c, h as a, H as m, g as p } from "./index.1508b8d7.js";
+import { c as f } from "./index-d280dafb.186cdb0e.js";
+import { p as o, i as r, f as l, m as v } from "./maska-4866b970.5336f9cb.js";
 import { g as w } from "./utils-bc84f36e.1fee9865.js";
 import "react";
 import "react-dom";
@@ -10,15 +10,15 @@ const g = ".sc-swirl-time-input-h{display:flex;width:100%}.sc-swirl-time-input-h
       this.updateIconSize(e.matches);
     }, this.onChange = (e) => {
       const t = e.target.value;
-      let n;
+      let s;
       t === "" && (this.value = void 0, this.valueChange.emit(void 0));
-      const s = r(t, this.format, new Date()), u = new RegExp(`^${this.format.replace(/[Hhms]/g, "\\d")}$`);
-      !Boolean(t.match(u)) || (o(s) ? n = l(s, d) : n = l(new Date(), d), this.value = n, this.valueChange.emit(n));
+      const n = o(t, this.format, new Date()), u = new RegExp(`^${this.format.replace(/[Hhms]/g, "\\d")}$`);
+      !Boolean(t.match(u)) || (r(n) ? s = l(n, d) : s = l(new Date(), d), this.value = s, this.valueChange.emit(s));
     }, this.onBlur = (e) => {
-      const t = e.target, n = r(t.value, this.format, new Date());
-      if (!o(n) && Boolean(this.value)) {
-        const s = Boolean(this.value) ? r(this.value, d, new Date()) : void 0;
-        (!Boolean(s) || !o(s)) && (this.value = ""), t.value = l(s, this.format);
+      const t = e.target, s = o(t.value, this.format, new Date());
+      if (!r(s) && Boolean(this.value)) {
+        const n = Boolean(this.value) ? o(this.value, d, new Date()) : void 0;
+        (!Boolean(n) || !r(n)) && (this.value = ""), t.value = l(n, this.format);
       }
     }, this.onInput = (e) => {
       this.onChange(e);
@@ -33,7 +33,9 @@ const g = ".sc-swirl-time-input-h{display:flex;width:100%}.sc-swirl-time-input-h
     this.id = `swirl-time-input-${i}`;
   }
   componentDidLoad() {
-    this.setupMask(), this.updateIconSize(this.desktopMediaQuery.matches), this.desktopMediaQuery.onchange = this.desktopMediaQueryHandler;
+    this.setupMask(), this.updateIconSize(this.desktopMediaQuery.matches), this.desktopMediaQuery.onchange = this.desktopMediaQueryHandler, this.autoFocus && setTimeout(() => {
+      this.inputEl.focus();
+    });
   }
   disconnectedCallback() {
     var i, e, t;
@@ -50,15 +52,15 @@ const g = ".sc-swirl-time-input-h{display:flex;width:100%}.sc-swirl-time-input-h
   }
   setupMask() {
     var i;
-    (i = this.mask) === null || i === void 0 || i.destroy(), this.mask = f.create(`#${this.id}`, {
+    (i = this.mask) === null || i === void 0 || i.destroy(), this.mask = v.create(`#${this.id}`, {
       mask: this.format.replace(/[Hhms]/g, "#")
     });
   }
   render() {
-    const i = this.invalid === !0 || this.invalid === !1 ? String(this.invalid) : void 0, e = Boolean(this.value) ? r(this.value, d, new Date()) : void 0, t = o(e) ? l(e, this.format) : void 0, n = v("time-input", {
+    const i = this.invalid === !0 || this.invalid === !1 ? String(this.invalid) : void 0, e = Boolean(this.value) ? o(this.value, d, new Date()) : void 0, t = r(e) ? l(e, this.format) : void 0, s = f("time-input", {
       "time-input--inline": this.inline
     });
-    return a(m, null, a("div", { class: n }, a("input", { "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : void 0, "aria-invalid": i, autoFocus: this.autoFocus, class: "time-input__input", disabled: this.disabled, id: this.id, onBlur: this.onBlur, onClick: this.onClick, onFocus: this.onFocus, onInput: this.onInput, placeholder: this.placeholder, required: this.required, type: "text", value: t }), a("span", { class: "time-input__icon" }, a("swirl-icon-time-outlined", { size: this.iconSize }))));
+    return a(m, null, a("div", { class: s }, a("input", { "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : void 0, "aria-invalid": i, autoFocus: this.autoFocus, class: "time-input__input", disabled: this.disabled, id: this.id, onBlur: this.onBlur, onClick: this.onClick, onFocus: this.onFocus, onInput: this.onInput, placeholder: this.placeholder, ref: (n) => this.inputEl = n, required: this.required, type: "text", value: t }), a("span", { class: "time-input__icon" }, a("swirl-icon-time-outlined", { size: this.iconSize }))));
   }
   get el() {
     return p(this);

package/dist/{swirl-toast-provider.entry.80dbf546.js → swirl-toast-provider.entry.2384e474.js}

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

package/dist/{swirl-toast.entry.a38857a2.js → swirl-toast.entry.ae7fa515.js}

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

package/dist/{swirl-tooltip.entry.504bc12c.js → swirl-tooltip.entry.c6ec88dc.js}

@@ -1,4 +1,4 @@
-import { r as n, h as i, H as l } from "./index.a360830a.js";
+import { r as n, h as i, H as l } from "./index.1508b8d7.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.f922cd07.js → swirl-tree-navigation-item.entry.9521165f.js}

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

package/dist/{swirl-video-thumbnail.entry.962a901b.js → swirl-video-thumbnail.entry.7c8ea11b.js}

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

package/dist/{swirl-visually-hidden.entry.fa7d3e2a.js → swirl-visually-hidden.entry.78ae7a3a.js}

@@ -1,4 +1,4 @@
-import { r as s, h as i, H as l } from "./index.a360830a.js";
+import { r as s, h as i, H as l } from "./index.1508b8d7.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.6ae5b31c.js → wc-datepicker.entry.54e595d6.js}

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

package/package.json

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