@getflip/swirl-components-react 0.3.0 → 0.5.0

package/dist/flip-popover.entry.712ebb5b.js

@@ -0,0 +1,115 @@
+import { r as m, c as s, h as n, H as v, g as f } from "./index.ac96d2b2.js";
+import { o as a, s as p, f as u, c as g, a as b } from "./floating-ui.dom.esm-1a4e8b8a.87557233.js";
+import { e as l, d as y } from "./bodyScrollLock.esm-ce6356d8.2c600fb9.js";
+import { c as k } from "./index-6d2e18c6.289636d4.js";
+import { i as c, q as d } from "./utils-39b2afe8.37b54ba4.js";
+import "react";
+import "react-dom";
+import "./_commonjsHelpers-44457d8d.ba94af77.js";
+const _ = ":host{position:relative;z-index:var(--s-z-40);display:inline-flex}:host *{box-sizing:border-box}.popover--active:not(.popover--closing) .popover__backdrop{-webkit-animation:0.15s popover-fade-in;animation:0.15s popover-fade-in}@media (prefers-reduced-motion){.popover--active:not(.popover--closing) .popover__backdrop{-webkit-animation:none;animation:none}}.popover--active:not(.popover--closing) .popover__content{-webkit-animation:0.15s popover-slide-in;animation:0.15s popover-slide-in}@media (min-width: 768px){.popover--active:not(.popover--closing) .popover__content{transform-origin:top left;-webkit-animation:0.15s popover-fade-scale-in-xy;animation:0.15s popover-fade-scale-in-xy}}@media (prefers-reduced-motion){.popover--active:not(.popover--closing) .popover__content{-webkit-animation:none;animation:none}}.popover--closing .popover__backdrop{-webkit-animation:0.15s popover-fade-out;animation:0.15s popover-fade-out;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}@media (prefers-reduced-motion){.popover--closing .popover__backdrop{-webkit-animation:none;animation:none}}.popover--closing .popover__content{-webkit-animation:0.15s popover-slide-out;animation:0.15s popover-slide-out;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}@media (min-width: 768px){.popover--closing .popover__content{-webkit-animation:0.15s popover-fade-out;animation:0.15s popover-fade-out}}@media (prefers-reduced-motion){.popover--closing .popover__content{-webkit-animation:none;animation:none}}.popover--inactive .popover__content{display:none}@media (min-width: 768px){.popover--animation-scale-in-y.popover--active:not(.popover--closing) .popover__content{-webkit-animation:0.15s popover-fade-scale-in-y;animation:0.15s popover-fade-scale-in-y}}@media (prefers-reduced-motion){.popover--animation-scale-in-y.popover--active:not(.popover--closing) .popover__content{-webkit-animation:none;animation:none}}.popover__backdrop{position:fixed;z-index:0;background-color:rgba(0, 0, 0, 0.2);-webkit-animation:0.15s popover-backdrop-fade-in;animation:0.15s popover-backdrop-fade-in;inset:0}@media (prefers-reduced-motion){.popover__backdrop{-webkit-animation:none;animation:none}}@media (min-width: 768px){.popover__backdrop{display:none}}.popover__content{position:fixed;z-index:2;right:0;bottom:0;left:0;overflow:hidden;border-top-left-radius:var(--s-border-radius-xl);border-top-right-radius:var(--s-border-radius-xl);background-color:var(--s-surface-overlay-default)}@media (min-width: 768px){.popover__content{right:unset;bottom:unset;left:unset;max-width:22.5rem;border-radius:var(--s-border-radius-sm);-webkit-animation:none;animation:none;box-shadow:0.125rem 0.25rem 2.5rem rgba(0, 0, 0, 0.14)}}.popover__scroll-container{overflow-x:hidden;overflow-y:auto;width:100%;max-height:90vh;padding-top:var(--s-space-24);padding-bottom:var(--s-space-24);overscroll-behavior:contain}@media (min-width: 768px){.popover__scroll-container{max-height:22rem;padding-top:var(--s-space-8);padding-bottom:var(--s-space-8)}}.popover__handle{position:absolute;top:var(--s-space-8);left:50%;width:2.5rem;height:0.375rem;border-radius:0.1875rem;background-color:var(--s-border-default);transform:translatex(-50%)}@media (min-width: 768px){.popover__handle{display:none}}@-webkit-keyframes popover-slide-in{from{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes popover-slide-in{from{transform:translateY(100%)}to{transform:translateY(0)}}@-webkit-keyframes popover-slide-out{from{transform:translateY(0)}to{transform:translateY(100%)}}@keyframes popover-slide-out{from{transform:translateY(0)}to{transform:translateY(100%)}}@-webkit-keyframes popover-fade-in{from{opacity:0}to{opacity:1}}@keyframes popover-fade-in{from{opacity:0}to{opacity:1}}@-webkit-keyframes popover-fade-out{from{opacity:1}to{opacity:0}}@keyframes popover-fade-out{from{opacity:1}to{opacity:0}}@-webkit-keyframes popover-fade-scale-in-xy{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}@keyframes popover-fade-scale-in-xy{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}@-webkit-keyframes popover-fade-scale-in-y{from{transform:scaleY(0);opacity:0}to{transform:scaleY(1);opacity:1}}@keyframes popover-fade-scale-in-y{from{transform:scaleY(0);opacity:0}to{transform:scaleY(1);opacity:1}}", w = class {
+  constructor(o) {
+    m(this, o), this.popoverClose = s(this, "popoverClose", 7), this.popoverOpen = s(this, "popoverOpen", 7), this.animation = "scale-in-xy", this.enableFlip = !0, this.offset = 8, this.placement = "bottom-start", this.active = !1, this.closing = !1, this.toggle = (e) => {
+      e.stopPropagation(), this.active ? this.close() : this.open();
+    }, this.onKeydown = (e) => {
+      e.code === "Escape" && this.active && this.close();
+    }, this.reposition = async () => {
+      const e = c();
+      if (!Boolean(this.triggerEl) || !Boolean(this.contentContainer))
+        return;
+      if (e) {
+        this.position = void 0;
+        return;
+      }
+      const t = typeof this.offset == "number" ? { mainAxis: this.offset, crossAxis: 0 } : { mainAxis: this.offset[0], crossAxis: this.offset[1] }, i = this.enableFlip ? [a(t), p(), u()] : [a(t), p()];
+      this.position = await g(this.triggerEl, this.contentContainer, {
+        middleware: i,
+        placement: this.placement,
+        strategy: "fixed"
+      });
+    }, this.onCloseButtonClick = () => {
+      this.close();
+    };
+  }
+  componentDidLoad() {
+    this.connectTrigger(), this.updateFocusableChildren(), this.updateTriggerAttributes();
+  }
+  disconnectedCallback() {
+    l(this.scrollContainer);
+  }
+  onWindowFocusIn(o) {
+    if (!this.active)
+      return;
+    const e = o.target;
+    !this.el.contains(e) && this.close();
+  }
+  onWindowClick(o) {
+    if (!this.active)
+      return;
+    const e = o.target, t = this.el.contains(e), i = o.composedPath().some((r) => Boolean(r) && r instanceof Node ? this.el.contains(r) : !1), h = o.target === this.triggerEl;
+    !t && !i && !h && this.close();
+  }
+  async close() {
+    var o;
+    this.closing || !this.active || (this.popoverClose.emit(), this.disableAutoUpdate && this.disableAutoUpdate(), this.closing = !0, setTimeout(() => {
+      this.active = !1, this.closing = !1, this.updateTriggerAttributes();
+    }, 150), this.unlockBodyScroll(), (o = this.getNativeTriggerElement()) === null || o === void 0 || o.focus());
+  }
+  async open() {
+    this.active || (this.adjustWidth(), this.active = !0, this.popoverOpen.emit(), this.updateFocusableChildren(), this.updateTriggerAttributes(), requestAnimationFrame(async () => {
+      await this.reposition(), this.focusableChildren.length > 0 ? this.focusableChildren[0].focus() : this.contentContainer.focus(), this.disableAutoUpdate && this.disableAutoUpdate(), this.disableAutoUpdate = b(this.triggerEl, this.contentContainer, this.reposition), this.scrollContainer.scrollTop = 0, this.lockBodyScroll();
+    }));
+  }
+  connectTrigger() {
+    this.triggerEl = d(document.body, `#${this.trigger}`)[0], Boolean(this.triggerEl) && this.triggerEl.addEventListener("click", (o) => {
+      this.toggle(o);
+    });
+  }
+  getNativeTriggerElement() {
+    var o, e, t;
+    return this.triggerEl.tagName.startsWith("FLIP-") ? ((o = this.triggerEl) === null || o === void 0 ? void 0 : o.children[0]) || ((t = (e = this.triggerEl) === null || e === void 0 ? void 0 : e.shadowRoot) === null || t === void 0 ? void 0 : t.children[0]) || this.triggerEl : this.triggerEl;
+  }
+  updateTriggerAttributes() {
+    if (!Boolean(this.triggerEl))
+      return;
+    const o = this.getNativeTriggerElement();
+    o.setAttribute("aria-controls", this.popoverId), o.setAttribute("aria-expanded", String(this.active)), o.setAttribute("aria-haspopup", "dialog");
+  }
+  updateFocusableChildren() {
+    this.focusableChildren = d(this.el, '[role="menuitem"], [role="listbox"]');
+  }
+  adjustWidth() {
+    let o = this.useContainerWidth;
+    [!0, "true"].includes(this.useContainerWidth) ? o = !0 : [!1, "false"].includes(this.useContainerWidth) && (o = !1);
+    const e = !window.matchMedia("(min-width: 768px)").matches;
+    if (Boolean(o) && !e) {
+      const t = typeof o == "string" ? this.el.closest(o) || this.el.parentElement : this.el.parentElement;
+      this.contentContainer.style.maxWidth = "none", this.contentContainer.style.width = t.getBoundingClientRect().width + "px";
+    } else
+      this.contentContainer.style.maxWidth = "", this.contentContainer.style.width = "";
+  }
+  lockBodyScroll() {
+    !c() || y(this.scrollContainer);
+  }
+  unlockBodyScroll() {
+    l(this.scrollContainer);
+  }
+  render() {
+    var o, e;
+    const t = k("popover", `popover--animation-${this.animation}`, {
+      "popover--closing": this.closing,
+      "popover--active": this.active,
+      "popover--inactive": !this.active
+    });
+    return n(v, { id: this.popoverId }, n("div", { class: t, onKeyDown: this.onKeydown }, n("div", { "aria-hidden": this.active ? "false" : "true", "aria-label": this.label, class: "popover__content", role: "dialog", ref: (i) => this.contentContainer = i, style: {
+      top: Boolean(this.position) ? `${(o = this.position) === null || o === void 0 ? void 0 : o.y}px` : "",
+      left: Boolean(this.position) ? `${(e = this.position) === null || e === void 0 ? void 0 : e.x}px` : ""
+    }, tabindex: "-1" }, n("span", { class: "popover__handle" }), n("div", { class: "popover__scroll-container", ref: (i) => this.scrollContainer = i }, n("slot", null))), this.active && n("div", { class: "popover__backdrop", onClick: this.onCloseButtonClick })));
+  }
+  get el() {
+    return f(this);
+  }
+};
+w.style = _;
+export {
+  w as flip_popover
+};

package/dist/{flip-progress-indicator.entry.8069914b.js → flip-progress-indicator.entry.342c1c4c.js}

@@ -1,4 +1,4 @@
-import { r as t, h as s, H as n } from "./index.0ccdd659.js";
+import { r as t, h as s, H as n } from "./index.ac96d2b2.js";
 import { c } from "./index-6d2e18c6.289636d4.js";
 import "react";
 import "react-dom";

package/dist/{flip-radio-group.entry.4046ee83.js → flip-radio-group.entry.ab35d743.js}

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

package/dist/{flip-radio.entry.941e407b.js → flip-radio.entry.35aa66f2.js}

@@ -1,17 +1,20 @@
-import { r as s, c as l, h as i, H as c } from "./index.0ccdd659.js";
+import { r as s, c as l, h as i, H as c } from "./index.ac96d2b2.js";
 import { c as t } from "./index-6d2e18c6.289636d4.js";
 import "react";
 import "react-dom";
 import "./_commonjsHelpers-44457d8d.ba94af77.js";
 const n = `.sc-flip-radio-h{display:inline-flex}.sc-flip-radio-h *.sc-flip-radio{box-sizing:border-box}.radio.sc-flip-radio{display:inline-flex;cursor:pointer;line-height:var(--s-line-height-base)}.radio.sc-flip-radio:focus-within .radio__box.sc-flip-radio{box-shadow:0 0 0 0.0625rem var(--s-background-default),
-      0 0 0 0.1875rem var(--s-focus-default)}.radio--checked.sc-flip-radio .radio__control.sc-flip-radio:hover .radio__box.sc-flip-radio{border-color:var(--s-interactive-primary-hovered);background-color:var(--s-interactive-primary-hovered)}.radio--checked.sc-flip-radio .radio__box.sc-flip-radio{position:relative;border-color:var(--s-icon-highlight);background-color:var(--s-icon-highlight)}.radio--checked.sc-flip-radio .radio__box.sc-flip-radio:after{position:absolute;top:50%;left:50%;width:0.5rem;height:0.5rem;border-radius:50%;background-color:var(--s-background-default);content:"";transform:translate3d(-50%, -50%, 0)}.radio--invalid.radio--checked.sc-flip-radio .radio__box.sc-flip-radio,.radio--invalid.radio--indeterminate.sc-flip-radio .radio__box.sc-flip-radio{background-color:var(--s-icon-critical)}.radio--invalid.sc-flip-radio .radio__box.sc-flip-radio{border-color:var(--s-icon-critical)}.radio--disabled.sc-flip-radio{cursor:default}.radio--disabled.radio--checked.sc-flip-radio .radio__control.sc-flip-radio:hover .radio__box.sc-flip-radio{border-color:var(--s-icon-disabled);background-color:transparent}.radio--disabled.radio--checked.sc-flip-radio .radio__box.sc-flip-radio{border-color:var(--s-icon-disabled);background-color:var(--s-background-default)}.radio--disabled.radio--checked.sc-flip-radio .radio__box.sc-flip-radio:after{background-color:var(--s-icon-disabled)}.radio--disabled.sc-flip-radio .radio__control.sc-flip-radio:hover .radio__box.sc-flip-radio{background-color:transparent}.radio--disabled.sc-flip-radio .radio__box.sc-flip-radio{border-color:var(--s-icon-disabled);backround-color:var(--s-icon-disabled)}.radio--disabled.sc-flip-radio .radio__description.sc-flip-radio,.radio--disabled.sc-flip-radio .radio__label.sc-flip-radio{color:var(--s-text-disabled)}.radio__control.sc-flip-radio{position:relative;display:inline-flex;width:1.5rem;height:1.5rem;padding:var(--s-space-2);flex-shrink:0}.radio__control.sc-flip-radio:hover .radio__box.sc-flip-radio{background-color:var(--s-action-neutral-hovered)}.radio__box.sc-flip-radio{position:relative;display:flex;width:100%;height:100%;justify-content:center;align-items:center;border:0.125rem solid var(--s-icon-default);border-radius:50%}.radio__label-container.sc-flip-radio{display:inline-flex;margin-left:var(--s-space-8);padding-top:var(--s-space-2);flex-direction:column}.radio__label.sc-flip-radio{font-weight:var(--s-font-weight-medium)}.radio__description.sc-flip-radio{color:var(--s-text-subdued)}`, p = class {
+      0 0 0 0.1875rem var(--s-focus-default)}.radio--checked.sc-flip-radio .radio__control.sc-flip-radio:hover .radio__box.sc-flip-radio{border-color:var(--s-interactive-primary-hovered);background-color:var(--s-interactive-primary-hovered)}.radio--checked.sc-flip-radio .radio__box.sc-flip-radio{position:relative;border-color:var(--s-icon-highlight);background-color:var(--s-icon-highlight)}.radio--checked.sc-flip-radio .radio__box.sc-flip-radio:after{position:absolute;top:50%;left:50%;width:0.5rem;height:0.5rem;border-radius:50%;background-color:var(--s-background-default);content:"";transform:translate3d(-50%, -50%, 0)}.radio--invalid.radio--checked.sc-flip-radio .radio__box.sc-flip-radio,.radio--invalid.radio--indeterminate.sc-flip-radio .radio__box.sc-flip-radio{background-color:var(--s-icon-critical)}.radio--invalid.sc-flip-radio .radio__box.sc-flip-radio{border-color:var(--s-icon-critical)}.radio--disabled.sc-flip-radio{cursor:default}.radio--disabled.radio--checked.sc-flip-radio .radio__control.sc-flip-radio:hover .radio__box.sc-flip-radio{border-color:var(--s-icon-disabled);background-color:transparent}.radio--disabled.radio--checked.sc-flip-radio .radio__box.sc-flip-radio{border-color:var(--s-icon-disabled);background-color:var(--s-background-default)}.radio--disabled.radio--checked.sc-flip-radio .radio__box.sc-flip-radio:after{background-color:var(--s-icon-disabled)}.radio--disabled.sc-flip-radio .radio__control.sc-flip-radio:hover .radio__box.sc-flip-radio{background-color:transparent}.radio--disabled.sc-flip-radio .radio__box.sc-flip-radio{border-color:var(--s-icon-disabled)}.radio--disabled.sc-flip-radio .radio__description.sc-flip-radio,.radio--disabled.sc-flip-radio .radio__label.sc-flip-radio{color:var(--s-text-disabled)}.radio__control.sc-flip-radio{position:relative;display:inline-flex;width:1.5rem;height:1.5rem;padding:var(--s-space-2);flex-shrink:0}.radio__control.sc-flip-radio:hover .radio__box.sc-flip-radio{background-color:var(--s-action-neutral-hovered)}.radio__box.sc-flip-radio{position:relative;display:flex;width:100%;height:100%;justify-content:center;align-items:center;border:0.125rem solid var(--s-icon-default);border-radius:50%}.radio__label-container.sc-flip-radio{display:inline-flex;margin-left:var(--s-space-8);padding-top:var(--s-space-2);flex-direction:column}.radio__label.sc-flip-radio{font-weight:var(--s-font-weight-medium)}.radio__description.sc-flip-radio{color:var(--s-text-subdued)}`, h = class {
   constructor(a) {
     s(this, a), this.valueChange = l(this, "valueChange", 7), this.checked = !1, this.disabled = !1, this.onChange = () => {
       this.checked = !0, this.valueChange.emit(this.value);
     };
   }
+  getAriaCheckedLabel(a, r) {
+    return a ? "true" : r ? "false" : "mixed";
+  }
   render() {
-    const a = this.checked === !1 || this.checked === "false", r = this.checked === !0 || this.checked === "true", o = r ? "true" : a ? "false" : "mixed", d = this.invalid, e = t("radio", {
+    const a = this.checked === !1 || this.checked === "false", r = this.checked === !0 || this.checked === "true", o = this.getAriaCheckedLabel(r, a), d = this.invalid, e = t("radio", {
       "radio--checked": r,
       "radio--disabled": this.disabled,
       "radio--invalid": this.invalid,
@@ -20,7 +23,7 @@ const n = `.sc-flip-radio-h{display:inline-flex}.sc-flip-radio-h *.sc-flip-radio
     return i(c, null, i("label", { class: e, htmlFor: this.inputId }, i("span", { class: "radio__control" }, i("flip-visually-hidden", null, i("input", { "aria-checked": o, "aria-invalid": d, checked: r, class: "radio__input", disabled: this.disabled, id: this.inputId, name: this.inputName, onChange: this.onChange, type: "radio", value: this.value })), i("span", { "aria-hidden": "true", class: "radio__box" })), i("span", { class: "radio__label-container" }, this.label && i("span", { class: "radio__label" }, this.label), this.description && i("span", { class: "radio__description" }, this.description))));
   }
 };
-p.style = n;
+h.style = n;
 export {
-  p as flip_radio
+  h as flip_radio
 };

package/dist/{flip-resource-list-file-item.entry.678596e2.js → flip-resource-list-file-item.entry.b56f8795.js}

@@ -1,4 +1,4 @@
-import { r as l, c as a, h as e, H as n } from "./index.0ccdd659.js";
+import { r as l, c as a, h as e, H as n } from "./index.ac96d2b2.js";
 import { c } from "./index-6d2e18c6.289636d4.js";
 import "react";
 import "react-dom";

package/dist/{flip-search.entry.05617d72.js → flip-search.entry.cb0d0faa.js}

@@ -1,4 +1,4 @@
-import { r as c, c as r, h as a, H as i } from "./index.0ccdd659.js";
+import { r as c, c as r, h as a, H as i } from "./index.ac96d2b2.js";
 import { c as t } from "./index-6d2e18c6.289636d4.js";
 import "react";
 import "react-dom";

package/dist/flip-select.entry.67d74a11.js

@@ -0,0 +1,48 @@
+import { r as n, c, h as e, H as r, g as p } from "./index.ac96d2b2.js";
+import { c as d } from "./index-6d2e18c6.289636d4.js";
+import { q as h } from "./utils-39b2afe8.37b54ba4.js";
+import "react";
+import "react-dom";
+import "./_commonjsHelpers-44457d8d.ba94af77.js";
+const u = ".sc-flip-select-h{display:block;width:100%}.sc-flip-select-h *.sc-flip-select{box-sizing:border-box}.select.sc-flip-select{position:relative;display:flex;width:100%}.select--disabled.sc-flip-select .select__label.sc-flip-select{color:var(--s-text-disabled)}.select--disabled.sc-flip-select .select__indicator.sc-flip-select{color:var(--s-icon-disabled)}.select__label.sc-flip-select{display:block;overflow:hidden;width:100%;height:1.375rem;margin:0;padding:0;padding-right:calc(1.5rem + var(--s-space-8));border:none;background-color:transparent;font:inherit;line-height:var(--s-line-height-base);text-align:left;white-space:nowrap;text-overflow:ellipsis;cursor:default}.select__label.sc-flip-select:focus{outline:none}.select__indicator.sc-flip-select{position:absolute;top:calc(-1 * var(--s-space-12));right:0;display:inline-flex;color:var(--s-icon-default)}", f = class {
+  constructor(t) {
+    n(this, t), this.valueChange = c(this, "valueChange", 7), this.options = [], this.select = (i) => {
+      this.value = i.detail, this.valueChange.emit(this.value), this.multiSelect || this.popover.close();
+    }, this.onSlotChange = () => {
+      this.updateOptions();
+    }, this.onOpen = () => {
+      this.open = !0;
+    }, this.onClose = () => {
+      this.open = !1;
+    }, this.onKeyDown = (i) => {
+      (i.code === "Space" || i.code === "Enter") && (i.preventDefault(), this.popover.open());
+    };
+  }
+  componentWillLoad() {
+    queueMicrotask(() => {
+      this.updateOptions();
+    });
+  }
+  onWindowFocusIn(t) {
+    t.target === this.el.querySelector("input") && t.stopImmediatePropagation();
+  }
+  updateOptions() {
+    this.options = h(this.el, "flip-option-list-item");
+  }
+  render() {
+    const t = Boolean(this.value) ? this.value.map((s) => {
+      var l;
+      return (l = this.options.find((a) => a.value === s)) === null || l === void 0 ? void 0 : l.label;
+    }).join(", ") : "", i = this.invalid === !0 || this.invalid === !1 ? String(this.invalid) : void 0, o = d("select", {
+      "select--disabled": this.disabled
+    });
+    return e(r, { onKeyDown: this.onKeyDown }, e("div", { class: o }, e("input", { "aria-describedby": this.flipAriaDescribedby, "aria-disabled": this.disabled ? "true" : void 0, "aria-invalid": i, class: "select__label", disabled: this.disabled, id: "trigger", readOnly: !0, type: "text", value: t }), e("span", { class: "select__indicator" }, this.open ? e("flip-icon-expand-less", null) : e("flip-icon-expand-more", null)), e("flip-popover", { animation: "scale-in-y", class: "select__popover", enableFlip: !1, label: this.label, offset: [16, -16], onPopoverClose: this.onClose, onPopoverOpen: this.onOpen, popoverId: "select-options", ref: (s) => this.popover = s, trigger: "trigger", useContainerWidth: "flip-form-control" }, e("flip-option-list", { onValueChange: this.select, multiSelect: this.multiSelect, value: this.value }, e("slot", { onSlotchange: this.onSlotChange })))));
+  }
+  get el() {
+    return p(this);
+  }
+};
+f.style = u;
+export {
+  f as flip_select
+};

package/dist/{flip-stack.entry.60b7e7d8.js → flip-stack.entry.b7e0326d.js}

@@ -1,4 +1,4 @@
-import { r as i, h as s, H as e } from "./index.0ccdd659.js";
+import { r as i, h as s, H as e } from "./index.ac96d2b2.js";
 import { c as n } from "./index-6d2e18c6.289636d4.js";
 import "react";
 import "react-dom";

package/dist/{flip-switch.entry.51a1856d.js → flip-switch.entry.a5b1c2c6.js}

@@ -1,4 +1,4 @@
-import { r as n, c as r, h as e, H as a, g as o } from "./index.0ccdd659.js";
+import { r as n, c as r, h as e, H as a, g as o } from "./index.ac96d2b2.js";
 import { c as l } from "./index-6d2e18c6.289636d4.js";
 import "react";
 import "react-dom";

package/dist/{flip-tab.entry.fd12f894.js → flip-tab.entry.97e217ad.js}

@@ -1,4 +1,4 @@
-import { r as s, h as a, H as i } from "./index.0ccdd659.js";
+import { r as s, h as a, H as i } from "./index.ac96d2b2.js";
 import { c as o } from "./index-6d2e18c6.289636d4.js";
 import "react";
 import "react-dom";

package/dist/{flip-tabs.entry.9462dbaa.js → flip-tabs.entry.ad810ab3.js}

@@ -1,4 +1,4 @@
-import { r as i, c as r, h as e, H as o, g as b } from "./index.0ccdd659.js";
+import { r as i, c as r, h as e, H as o, g as b } from "./index.ac96d2b2.js";
 import { c as l } from "./index-6d2e18c6.289636d4.js";
 import "react";
 import "react-dom";

package/dist/{flip-tag.entry.923d754e.js → flip-tag.entry.8d4916e7.js}

@@ -1,4 +1,4 @@
-import { r as e, c as s, h as t, H as n } from "./index.0ccdd659.js";
+import { r as e, c as s, h as t, H as n } from "./index.ac96d2b2.js";
 import { c as i } from "./index-6d2e18c6.289636d4.js";
 import "react";
 import "react-dom";

package/dist/flip-text-input.entry.b963e731.js

@@ -0,0 +1,60 @@
+import { r as h, c as n, h as i, H as c } from "./index.ac96d2b2.js";
+import { c as d } from "./index-6d2e18c6.289636d4.js";
+import "react";
+import "react-dom";
+import "./_commonjsHelpers-44457d8d.ba94af77.js";
+const x = '.sc-flip-text-input-h{display:block;width:100%}.sc-flip-text-input-h *.sc-flip-text-input{box-sizing:border-box}.text-input.sc-flip-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)}.text-input--clearable.sc-flip-text-input,.text-input--type-number.sc-flip-text-input,.text-input--type-password.sc-flip-text-input{padding-right:calc(1.5rem + var(--s-space-8))}.text-input--show-password.sc-flip-text-input .text-input__input.sc-flip-text-input{width:100%}.text-input--disabled.sc-flip-text-input .text-input__character-counter.sc-flip-text-input{color:var(--s-text-disabled)}.text-input__input.sc-flip-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-flip-text-input:focus{outline:none}.text-input__input.sc-flip-text-input:disabled{color:var(--s-text-disabled);background-color:transparent}.text-input__input.sc-flip-text-input::-webkit-outer-spin-button,.text-input__input.sc-flip-text-input::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}.text-input__input[type="number"].sc-flip-text-input{-moz-appearance:textfield}input.text-input__input.sc-flip-text-input:not([type="password"]){width:0.25rem;min-width:0.25rem}.text-input--disable-dynamic-width.sc-flip-text-input input.text-input__input.sc-flip-text-input:not([type="password"]){width:100%;min-width:0}.text-input__clear-button.sc-flip-text-input,.text-input__password-toggle.sc-flip-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-flip-text-input:focus,.text-input__password-toggle.sc-flip-text-input:focus{outline-color:var(--s-focus-default)}.text-input__stepper.sc-flip-text-input{position:absolute;top:-1.4375rem;right:0;display:flex;flex-direction:column}.text-input__step-button.sc-flip-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-flip-text-input:focus{outline-color:var(--s-focus-default)}.text-input__character-counter.sc-flip-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}.text-input__prefix.sc-flip-text-input{padding-right:var(--s-space-4);color:var(--s-text-subdued);font-size:var(--s-font-size-base)}.text-input__suffix.sc-flip-text-input{padding-left:var(--s-space-4);color:var(--s-text-subdued);font-size:var(--s-font-size-base)}', f = 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.autoComplete = "on", this.clearButtonLabel = "Clear input", this.rows = 1, this.passwordToggleLabel = "Toggle password display", this.type = "text", this.showPassword = !1, this.clear = () => {
+      this.inputEl.value = "", this.value = "", this.valueChange.emit(""), this.inputEl.focus();
+    }, this.onChange = (t) => {
+      const e = t.target;
+      this.value = e.value, this.valueChange.emit(e.value);
+    }, this.onBlur = (t) => {
+      this.inputBlur.emit(t);
+    }, this.onFocus = (t) => {
+      this.inputFocus.emit(t), this.handleAutoSelect(t);
+    }, this.onInput = (t) => {
+      this.onChange(t);
+    }, this.onKeyPress = (t) => {
+      this.type === "number" && ["+", "-", "e"].includes(t.key) && t.preventDefault();
+    }, this.decreaseValue = () => {
+      if (this.type !== "number")
+        return;
+      const t = this.step || 1;
+      let e = this.inputEl.valueAsNumber;
+      isNaN(this.inputEl.valueAsNumber) && (e = this.min !== void 0 ? this.min + 1 : 1), this.value = String(Math.max(this.min || -1 / 0, e - t)), this.valueChange.emit(this.value);
+    }, this.increaseValue = () => {
+      if (this.type !== "number")
+        return;
+      const t = this.step || 1;
+      let e = this.inputEl.valueAsNumber;
+      isNaN(this.inputEl.valueAsNumber) && (e = this.min !== void 0 ? this.min - 1 : -1), this.value = String(Math.min(this.max || 1 / 0, e + t)), this.valueChange.emit(this.value);
+    }, this.togglePassword = () => {
+      this.type === "password" && (this.showPassword = !this.showPassword);
+    };
+  }
+  componentDidRender() {
+    this.adjustInputSize();
+  }
+  adjustInputSize() {
+    this.rows > 1 && (this.inputEl.style.width = "", this.inputEl.style.height = "", this.inputEl.style.height = this.inputEl.scrollHeight / 16 + "rem"), this.rows === 1 && (this.inputEl.style.height = "", this.inputEl.style.width = "", this.type !== "password" && !this.disableDynamicWidth && (this.inputEl.style.width = this.inputEl.scrollWidth / 16 + "rem"));
+  }
+  handleAutoSelect(s) {
+    !this.autoSelect || s.target.select();
+  }
+  render() {
+    var s;
+    const t = this.rows === 1 ? "input" : "textarea", e = this.invalid === !0 || this.invalid === !1 ? String(this.invalid) : void 0, a = this.type === "number" && !this.disabled, l = this.type === "password" && !this.disabled, p = this.clearable && !this.disabled && Boolean(this.value) && !l && !a && !this.showCharacterCounter, u = this.type === "password" && this.showPassword ? "text" : this.type, o = d("text-input", `text-input--type-${this.type}`, {
+      "text-input--clearable": this.clearable,
+      "text-input--disabled": this.disabled,
+      "text-input--disable-dynamic-width": this.disableDynamicWidth,
+      "text-input--show-password": this.type === "password" && this.showPassword
+    });
+    return i(c, null, i("div", { class: o }, this.prefixLabel && i("span", { class: "text-input__prefix" }, this.prefixLabel), i(t, { "aria-autocomplete": this.flipAriaAutocomplete, "aria-controls": this.flipAriaControls, "aria-describedby": this.flipAriaDescribedby, "aria-disabled": this.disabled ? "true" : void 0, "aria-expanded": this.flipAriaExpanded, "aria-invalid": e, 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, ref: (r) => this.inputEl = r, required: this.required, role: this.flipRole, rows: this.rows > 1 ? this.rows : void 0, spellcheck: this.spellCheck, step: this.type === "number" ? this.step : void 0, type: u, value: this.rows === 1 ? this.value : void 0 }, this.rows > 1 && this.value), this.suffixLabel && i("span", { class: "text-input__suffix" }, this.suffixLabel), p && i("button", { "aria-label": this.clearButtonLabel, class: "text-input__clear-button", onClick: this.clear, type: "button" }, i("flip-icon-cancel", null)), l && i("button", { "aria-label": this.passwordToggleLabel, class: "text-input__password-toggle", onClick: this.togglePassword, type: "button" }, this.showPassword ? i("flip-icon-visibility-off", null) : i("flip-icon-visibility", null)), a && i("span", { class: "text-input__stepper" }, i("button", { "aria-hidden": "true", class: "text-input__step-button", onClick: this.increaseValue, tabIndex: -1, type: "button" }, i("flip-icon-expand-less", null)), i("button", { "aria-hidden": "true", class: "text-input__step-button", onClick: this.decreaseValue, tabIndex: -1, type: "button" }, i("flip-icon-expand-more", null))), this.showCharacterCounter && i("span", { class: "text-input__character-counter" }, ((s = this.value) === null || s === void 0 ? void 0 : s.length) || 0, " ", Boolean(this.maxLength) ? `/ ${this.maxLength}` : "")));
+  }
+};
+f.style = x;
+export {
+  f as flip_text_input
+};

package/dist/{flip-theme-provider.entry.ab641668.js → flip-theme-provider.entry.d5dd8213.js}

@@ -1,4 +1,4 @@
-import { r as C, h as b, H } from "./index.0ccdd659.js";
+import { r as C, h as b, H } from "./index.ac96d2b2.js";
 import "react";
 import "react-dom";
 function h(e, t, n) {

package/dist/{flip-thumbnail.entry.9d00d2f8.js → flip-thumbnail.entry.5f5e44d2.js}

@@ -1,4 +1,4 @@
-import { r as t, h as a, H as s } from "./index.0ccdd659.js";
+import { r as t, h as a, H as s } from "./index.ac96d2b2.js";
 import { c as l } from "./index-6d2e18c6.289636d4.js";
 import "react";
 import "react-dom";

package/dist/{flip-toast-provider.entry.d0391c9a.js → flip-toast-provider.entry.4c55da45.js}

@@ -1,4 +1,4 @@
-import { r, h as a, H as n } from "./index.0ccdd659.js";
+import { r, h as a, H as e } from "./index.ac96d2b2.js";
 import "react";
 import "react-dom";
 const l = class {
@@ -16,11 +16,13 @@ const l = class {
   async toast(t) {
     if (this.toasts.some((o) => o.toastId === t.toastId))
       return;
-    const s = this.globalDuration === void 0 ? t.duration : this.globalDuration === 0 ? void 0 : this.globalDuration, i = Object.assign(Object.assign({}, t), { createdAt: new Date(), duration: s, toastId: t.toastId || String(Math.round(Math.random() * 1e4)) });
+    let s = this.globalDuration;
+    this.globalDuration === void 0 ? s = t.duration : this.globalDuration === 0 && (s = void 0);
+    const i = Object.assign(Object.assign({}, t), { createdAt: new Date(), duration: s, toastId: t.toastId || String(Math.round(Math.random() * 1e4)) });
     return this.toasts = [...this.toasts, i], i;
   }
   render() {
-    return a(n, { role: "status" }, a("flip-stack", { spacing: "12" }, this.toasts.map((t) => a("flip-toast", Object.assign({ key: t.toastId, onDismiss: this.onDismiss }, t)))));
+    return a(e, { role: "status" }, a("flip-stack", { spacing: "12" }, this.toasts.map((t) => a("flip-toast", Object.assign({ key: t.toastId, onDismiss: this.onDismiss }, t)))));
   }
 };
 export {

package/dist/{flip-toast.entry.fac8df58.js → flip-toast.entry.c306c0f6.js}

@@ -1,4 +1,4 @@
-import { r as i, c as a, h as t, H as e } from "./index.0ccdd659.js";
+import { r as i, c as a, h as t, H as e } from "./index.ac96d2b2.js";
 import { c as o } from "./index-6d2e18c6.289636d4.js";
 import "react";
 import "react-dom";

package/dist/{flip-tooltip.entry.f7d80b92.js → flip-tooltip.entry.4544c9e8.js}

@@ -1,8 +1,8 @@
-import { r as n, h as o, H as l } from "./index.0ccdd659.js";
+import { r as n, h as o, H as l } from "./index.ac96d2b2.js";
 import { c as r, o as p, s as h, f as d } from "./floating-ui.dom.esm-1a4e8b8a.87557233.js";
 import "react";
 import "react-dom";
-const c = ":host{display:inline-flex}:host *{box-sizing:border-box}.tooltip{display:inline-flex}.tooltip .tooltip__reference{display:inline-flex}.tooltip__popper{position:fixed;z-index:var(--s-z-40);max-width:17.5rem}.tooltip__bubble{position:relative;display:block;padding-top:var(--s-space-8);padding-right:var(--s-space-12);padding-bottom:var(--s-space-8);padding-left:var(--s-space-12);border-radius:var(--s-border-radius-sm);color:var(--s-text-on-status);background-color:var(--s-surface-neutral-default);line-height:var(--s-line-height-base);-webkit-animation:tooltip-fade-in 0.1s;animation:tooltip-fade-in 0.1s;backgrund-color:red}.tooltip__arrow{position:absolute;width:0.5rem;height:0.5rem;background-color:var(--s-surface-neutral-default)}@-webkit-keyframes tooltip-fade-in{from{opacity:0}to{opacity:1}}@keyframes tooltip-fade-in{from{opacity:0}to{opacity:1}}", u = class {
+const c = ":host{display:inline-flex}:host *{box-sizing:border-box}.tooltip{display:inline-flex}.tooltip .tooltip__reference{display:inline-flex}.tooltip__popper{position:fixed;z-index:var(--s-z-40);max-width:17.5rem}.tooltip__bubble{position:relative;display:block;padding-top:var(--s-space-8);padding-right:var(--s-space-12);padding-bottom:var(--s-space-8);padding-left:var(--s-space-12);border-radius:var(--s-border-radius-sm);color:var(--s-text-on-status);background-color:var(--s-surface-neutral-default);line-height:var(--s-line-height-base);-webkit-animation:tooltip-fade-in 0.1s;animation:tooltip-fade-in 0.1s}.tooltip__arrow{position:absolute;width:0.5rem;height:0.5rem;background-color:var(--s-surface-neutral-default)}@-webkit-keyframes tooltip-fade-in{from{opacity:0}to{opacity:1}}@keyframes tooltip-fade-in{from{opacity:0}to{opacity:1}}", u = class {
   constructor(e) {
     n(this, e), this.delay = 300, this.position = "top", this.visible = !1, this.onKeydown = (t) => {
       t.code === "Escape" && this.hide();

package/dist/{flip-video-thumbnail.entry.f45c61bc.js → flip-video-thumbnail.entry.7e6a70de.js}

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

package/dist/{flip-visually-hidden.entry.1099adf3.js → flip-visually-hidden.entry.59b6f888.js}

@@ -1,4 +1,4 @@
-import { r, h as i, H as l } from "./index.0ccdd659.js";
+import { r, h as i, H as l } from "./index.ac96d2b2.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 {