@getflip/swirl-components-react 0.23.1 → 0.24.0

package/dist/swirl-banner.entry.b3369734.js

@@ -0,0 +1,48 @@
+import { r as o, c as r, h as i, H as c, g as l } from "./index.2a7aeb8a.js";
+import { c as b } from "./index-d280dafb.186cdb0e.js";
+import { a as d } from "./utils-61f188cc.4a43deab.js";
+import "react";
+import "react-dom";
+const h = ":host{display:block}:host *{box-sizing:border-box}.banner{display:flex;max-width:100%;padding:var(--s-space-12);align-items:baseline}.banner:focus:not(:focus-visible){outline:none}.banner:focus-visible{outline-color:var(--s-focus-default);outline-offset:var(--s-space-4)}@media (min-width: 768px){.banner{padding:var(--s-space-16)}}.banner--size-s{padding:var(--s-space-8);justify-content:center}.banner--size-s .banner__content{flex-grow:0;text-align:center;margin-right:var(--s-space-8)}.banner--size-s .banner__controls{margin-left:0;margin-right:var(--s-space-4)}.banner--intent-default .banner__icon,.banner--intent-default .banner__content,.banner--intent-default .banner__action-button,.banner--intent-default .banner__dismiss-button,.banner--intent-critical .banner__icon,.banner--intent-critical .banner__content,.banner--intent-critical .banner__action-button,.banner--intent-critical .banner__dismiss-button,.banner--intent-success .banner__icon,.banner--intent-success .banner__content,.banner--intent-success .banner__action-button,.banner--intent-success .banner__dismiss-button,.banner--intent-info .banner__icon,.banner--intent-info .banner__content,.banner--intent-info .banner__action-button,.banner--intent-info .banner__dismiss-button{color:var(--s-text-on-status)}.banner--intent-default{background-color:var(--s-surface-neutral-default)}.banner--intent-critical{background-color:var(--s-surface-critical-default)}.banner--intent-success{background-color:var(--s-surface-success-default)}.banner--intent-info{background-color:var(--s-surface-info-default)}.banner--intent-warning{background-color:var(--s-surface-warning-default)}.banner--intent-warning .banner__icon{color:var(--s-icon-strong)}.banner--intent-warning .banner__content,.banner--intent-warning .banner__action-button,.banner--intent-warning .banner__dismiss-button{color:var(--s-text-default)}@media (min-width: 375px){.banner--has-icon .banner__content{padding-top:var(--s-space-2)}}.banner__icon{position:relative;top:var(--s-space-2);display:none;margin-right:var(--s-space-8);color:var(--s-icon-on-status)}@media (min-width: 375px){.banner__icon{display:inline-flex}}.banner__content{min-height:1.5rem;margin-right:var(--s-space-12);flex-grow:1;line-height:var(--s-line-height-base)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.banner__content{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.banner__controls{display:inline-flex;margin-left:var(--s-space-16);align-items:center;line-height:var(--s-line-height-base);gap:var(--s-space-16)}@media (min-width: 768px){.banner__controls{gap:var(--s-space-24)}}.banner__action-button,.banner__dismiss-button{display:inline-flex;overflow:hidden;max-width:7rem;height:1.5rem;padding:0;flex-shrink:0;align-items:center;border:none;background-color:transparent;font:inherit;font-weight:var(--s-font-weight-semibold);white-space:nowrap;text-overflow:ellipsis;cursor:pointer}.banner__action-button:focus,.banner__dismiss-button:focus{outline-color:var(--s-focus-default)}@media (min-width: 768px){.banner__action-button,.banner__dismiss-button{max-width:12rem}}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.banner__action-button,.banner__dismiss-button{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}", u = {
+  default: void 0,
+  critical: "<swirl-icon-error></swirl-icon-error>",
+  success: "<swirl-icon-check-circle></swirl-icon-check-circle>",
+  warning: "<swirl-icon-warning></swirl-icon-warning>",
+  info: "<swirl-icon-info></swirl-icon-info>"
+}, _ = class {
+  constructor(e) {
+    o(this, e), this.action = r(this, "action", 7), this.dismiss = r(this, "dismiss", 7), this.desktopMediaQuery = d(), this.desktopMediaQueryHandler = (n) => {
+      this.forceIconProps(n.matches);
+    }, this.onAction = (n) => {
+      this.action.emit(n);
+    }, this.onDismiss = (n) => {
+      this.dismiss.emit(n);
+    }, this.actionLabel = void 0, this.content = void 0, this.dismissable = !1, this.dismissLabel = "Dismiss", this.importance = "status", this.intent = "default", this.showIcon = !1, this.size = "m";
+  }
+  componentDidLoad() {
+    var e, n;
+    this.forceIconProps(this.desktopMediaQuery.matches), (n = (e = this.desktopMediaQuery).addEventListener) === null || n === void 0 || n.call(e, "change", this.desktopMediaQueryHandler);
+  }
+  disconnectedCallback() {
+    var e, n;
+    (n = (e = this.desktopMediaQuery).removeEventListener) === null || n === void 0 || n.call(e, "change", this.desktopMediaQueryHandler);
+  }
+  forceIconProps(e) {
+    var n, s;
+    const a = (n = this.iconEl) === null || n === void 0 ? void 0 : n.children[0], t = (s = this.dismissButtonEl) === null || s === void 0 ? void 0 : s.children[0];
+    a == null || a.setAttribute("size", e ? "20" : "24"), t == null || t.setAttribute("size", e ? "20" : "24");
+  }
+  render() {
+    const e = u[this.intent], n = Boolean(this.actionLabel) || this.dismissable, s = this.showIcon && Boolean(e), a = b("banner", `banner--intent-${this.intent}`, `banner--size-${this.size}`, {
+      "banner--has-icon": s
+    });
+    return i(c, null, i("div", { "aria-describedby": "content", class: a, role: this.importance, tabIndex: 0 }, s && i("span", { "aria-hidden": "true", class: "banner__icon", innerHTML: e, ref: (t) => this.iconEl = t }), i("span", { class: "banner__content", id: "content", part: "banner__content" }, this.content), n && i("span", { class: "banner__controls" }, this.actionLabel && i("button", { class: "banner__action-button", onClick: this.onAction, part: "banner__action-button", type: "button" }, this.actionLabel), this.dismissable && i("button", { "aria-label": this.dismissLabel, class: "banner__dismiss-button", onClick: this.onDismiss, part: "banner__dismiss-button", ref: (t) => this.dismissButtonEl = t, type: "button" }, i("swirl-icon-close", null)))));
+  }
+  get element() {
+    return l(this);
+  }
+};
+_.style = h;
+export {
+  _ as swirl_banner
+};

package/dist/{swirl-button-group.entry.82324714.js → swirl-button-group.entry.c4ff62ba.js}

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

package/dist/{swirl-button.entry.a345922e.js → swirl-button.entry.15aac267.js}

@@ -1,4 +1,4 @@
-import { r as s, h as o, H as e } from "./index.2ccacc62.js";
+import { r as s, h as o, H as e } from "./index.2a7aeb8a.js";
 import { c as l } from "./index-d280dafb.186cdb0e.js";
 import { a as u } from "./utils-61f188cc.4a43deab.js";
 import "react";

package/dist/{swirl-card.entry.9babe51a.js → swirl-card.entry.b7a185ad.js}

@@ -1,4 +1,4 @@
-import { r as t, h as e, H as s } from "./index.2ccacc62.js";
+import { r as t, h as e, H as s } from "./index.2a7aeb8a.js";
 import { c as o } from "./index-d280dafb.186cdb0e.js";
 import "react";
 import "react-dom";

package/dist/{swirl-checkbox.entry.202c116d.js → swirl-checkbox.entry.2abcea20.js}

@@ -1,4 +1,4 @@
-import { r as t, c as a, h as c, H as n } from "./index.2ccacc62.js";
+import { r as t, c as a, h as c, H as n } from "./index.2a7aeb8a.js";
 import { c as b } from "./index-d280dafb.186cdb0e.js";
 import "react";
 import "react-dom";

package/dist/{swirl-chip.entry.bb554a61.js → swirl-chip.entry.b5221a40.js}

@@ -1,4 +1,4 @@
-import { r as o, h as r, H as c } from "./index.2ccacc62.js";
+import { r as o, h as r, H as c } from "./index.2a7aeb8a.js";
 import { c as n } from "./index-d280dafb.186cdb0e.js";
 import { a as l } from "./utils-61f188cc.4a43deab.js";
 import "react";

package/dist/{swirl-columns.entry.2eab6755.js → swirl-columns.entry.79bc3c13.js}

@@ -1,4 +1,4 @@
-import { r as t, h as s, H as i } from "./index.2ccacc62.js";
+import { r as t, h as s, H as i } from "./index.2a7aeb8a.js";
 import "react";
 import "react-dom";
 const l = ":host{display:block}:host *{box-sizing:border-box}.columns{display:grid;width:100%}", r = class {

package/dist/swirl-components-react.js

@@ -1,4 +1,4 @@
-import { a as s, S as o, b as w, d as S, e as n, f as e, i as c, j as t, k as I, l as b, m as d, n as u, o as p, p as m, q as C, s as h, t as g, u as A, v as F, w as L, x as T, y as k, z as f, A as P, B as R, C as v, D as M, E as V, G as D, I as O, J as x, K as y, L as B, M as G, N as E, O as N, P as H, Q as U, R as j, T as z, U as W, V as q, W as J, X as K, Y as Q, Z as X, _ as Y, $ as Z, a0 as _, a1 as $, a2 as aa, a3 as ia, a4 as ra, a5 as la, a6 as sa, a7 as oa, a8 as wa, a9 as Sa, aa as na, ab as ea, ac as ca, ad as ta, ae as Ia, af as ba, ag as da, ah as ua, ai as pa, aj as ma, ak as Ca, al as ha, am as ga, an as Aa, ao as Fa, ap as La, aq as Ta, ar as ka, as as fa, at as Pa, au as Ra, av as va, aw as Ma, ax as Va, ay as Da, az as Oa, aA as xa, aB as ya, aC as Ba, aD as Ga, aE as Ea, aF as Na, aG as Ha, aH as Ua, aI as ja, aJ as za, aK as Wa, aL as qa, aM as Ja, aN as Ka, aO as Qa, aP as Xa, aQ as Ya, aR as Za, aS as _a, aT as $a, aU as ai, aV as ii, aW as ri, aX as li, aY as si, aZ as oi, a_ as wi, a$ as Si, b0 as ni, b1 as ei, b2 as ci, b3 as ti, b4 as Ii, b5 as bi, b6 as di, b7 as ui, b8 as pi, b9 as mi, ba as Ci, bb as hi, bc as gi, bd as Ai, be as Fi, bf as Li, bg as Ti, bh as ki, bi as fi, bj as Pi, bk as Ri, bl as vi, bm as Mi, bn as Vi, bo as Di, bp as Oi, bq as xi, br as yi, bs as Bi, bt as Gi, bu as Ei, bv as Ni, bw as Hi, bx as Ui, by as ji, bz as zi, bA as Wi, bB as qi, bC as Ji, bD as Ki, bE as Qi, bF as Xi, bG as Yi, bH as Zi, bI as _i, bJ as $i, bK as ar, bL as ir, bM as rr, bN as lr, bO as sr, bP as or, bQ as wr, bR as Sr, bS as nr, bT as er, bU as cr, bV as tr, bW as Ir, bX as br, bY as dr, bZ as ur, b_ as pr, b$ as mr, c0 as Cr, c1 as hr, c2 as gr, c3 as Ar, c4 as Fr, c5 as Lr } from "./index.2ccacc62.js";
+import { a as s, S as o, b as w, d as S, e as n, f as e, i as c, j as t, k as I, l as b, m as d, n as u, o as p, p as m, q as C, s as h, t as g, u as A, v as F, w as L, x as T, y as k, z as f, A as P, B as R, C as v, D as M, E as V, G as D, I as O, J as x, K as y, L as B, M as G, N as E, O as N, P as H, Q as U, R as j, T as z, U as W, V as q, W as J, X as K, Y as Q, Z as X, _ as Y, $ as Z, a0 as _, a1 as $, a2 as aa, a3 as ia, a4 as ra, a5 as la, a6 as sa, a7 as oa, a8 as wa, a9 as Sa, aa as na, ab as ea, ac as ca, ad as ta, ae as Ia, af as ba, ag as da, ah as ua, ai as pa, aj as ma, ak as Ca, al as ha, am as ga, an as Aa, ao as Fa, ap as La, aq as Ta, ar as ka, as as fa, at as Pa, au as Ra, av as va, aw as Ma, ax as Va, ay as Da, az as Oa, aA as xa, aB as ya, aC as Ba, aD as Ga, aE as Ea, aF as Na, aG as Ha, aH as Ua, aI as ja, aJ as za, aK as Wa, aL as qa, aM as Ja, aN as Ka, aO as Qa, aP as Xa, aQ as Ya, aR as Za, aS as _a, aT as $a, aU as ai, aV as ii, aW as ri, aX as li, aY as si, aZ as oi, a_ as wi, a$ as Si, b0 as ni, b1 as ei, b2 as ci, b3 as ti, b4 as Ii, b5 as bi, b6 as di, b7 as ui, b8 as pi, b9 as mi, ba as Ci, bb as hi, bc as gi, bd as Ai, be as Fi, bf as Li, bg as Ti, bh as ki, bi as fi, bj as Pi, bk as Ri, bl as vi, bm as Mi, bn as Vi, bo as Di, bp as Oi, bq as xi, br as yi, bs as Bi, bt as Gi, bu as Ei, bv as Ni, bw as Hi, bx as Ui, by as ji, bz as zi, bA as Wi, bB as qi, bC as Ji, bD as Ki, bE as Qi, bF as Xi, bG as Yi, bH as Zi, bI as _i, bJ as $i, bK as ar, bL as ir, bM as rr, bN as lr, bO as sr, bP as or, bQ as wr, bR as Sr, bS as nr, bT as er, bU as cr, bV as tr, bW as Ir, bX as br, bY as dr, bZ as ur, b_ as pr, b$ as mr, c0 as Cr, c1 as hr, c2 as gr, c3 as Ar, c4 as Fr, c5 as Lr } from "./index.2a7aeb8a.js";
 import "react";
 import "react-dom";
 export {