@getflip/swirl-components-react 0.285.0 → 0.287.0

package/dist/{swirl-button-group.entry.21794f7f.js → swirl-button-group.entry.8a9da8cf.js}

@@ -1,8 +1,8 @@
-import { r as s, h as r, H as i } from "./index.aafcbece.js";
+import { r as s, h as r, H as i } from "./index.35faa157.js";
 import { c as e } from "./index-267776a4.6beb4f4b.js";
 import "react";
 import "react-dom";
-const n = ':host{display:block}:host *{box-sizing:border-box}.button-group--segmented ::slotted(*:not(:last-child)){position:relative}.button-group--segmented ::slotted(*:not(:last-child)):after{position:absolute;z-index:1;top:50%;left:100%;width:var(--s-border-width-default);height:calc(100% - var(--s-space-16));background-color:var(--s-border-strong);content:"";transform:translate3d(-50%, -50%, 0);pointer-events:none}.button-group--segmented ::slotted(*:not(:last-child):not([disabled])[intent="primary"]):after{background-color:var(--s-text-on-action-primary)}.button-group--segmented ::slotted(*:not(:last-child)[disabled="false"][intent="primary"]):after{background-color:var(--s-text-on-action-primary)}.button-group--segmented ::slotted(*:not(:first-child):not(:last-child)){--swirl-button-border-top-right-radius:0;--swirl-button-border-top-left-radius:0;--swirl-button-border-bottom-right-radius:0;--swirl-button-border-bottom-left-radius:0;--swirl-icon-button-border-top-right-radius:0;--swirl-icon-button-border-top-left-radius:0;--swirl-icon-button-border-bottom-right-radius:0;--swirl-icon-button-border-bottom-left-radius:0}.button-group--segmented ::slotted(*:first-child){--swirl-button-border-top-right-radius:0;--swirl-button-border-bottom-right-radius:0;--swirl-icon-button-border-top-right-radius:0;--swirl-icon-button-border-bottom-right-radius:0;--swirl-icon-button-border-top-left-radius:var(--s-border-radius-base);--swirl-icon-button-border-bottom-left-radius:var(--s-border-radius-base)}.button-group--segmented ::slotted(*:last-child){--swirl-button-border-top-left-radius:0;--swirl-button-border-bottom-left-radius:0;--swirl-icon-button-border-top-right-radius:var(--s-border-radius-base);--swirl-icon-button-border-bottom-right-radius:var(--s-border-radius-base);--swirl-icon-button-border-top-left-radius:0;--swirl-icon-button-border-bottom-left-radius:0}', d = n, a = class {
+const n = ':host{display:block}:host *{box-sizing:border-box}.button-group--segmented ::slotted(*:not(:last-child)){position:relative}.button-group--segmented ::slotted(*:not(:last-child)):after{position:absolute;z-index:1;top:50%;left:100%;width:var(--s-border-width-default);height:calc(100% - var(--s-space-16));background-color:var(--s-border-strong);content:"";transform:translate3d(-50%, -50%, 0);pointer-events:none}.button-group--segmented ::slotted(*:not(:last-child):not([disabled])[intent="primary"]):after{background-color:var(--s-text-on-action-primary)}.button-group--segmented ::slotted(*:not(:last-child)[disabled="false"][intent="primary"]):after{background-color:var(--s-text-on-action-primary)}.button-group--segmented ::slotted(*:not(:first-child):not(:last-child)){--swirl-button-border-top-right-radius:0;--swirl-button-border-top-left-radius:0;--swirl-button-border-bottom-right-radius:0;--swirl-button-border-bottom-left-radius:0;--swirl-icon-button-border-top-right-radius:0;--swirl-icon-button-border-top-left-radius:0;--swirl-icon-button-border-bottom-right-radius:0;--swirl-icon-button-border-bottom-left-radius:0}.button-group--segmented ::slotted(*:first-child){--swirl-button-border-top-right-radius:0;--swirl-button-border-bottom-right-radius:0;--swirl-icon-button-border-top-right-radius:0;--swirl-icon-button-border-bottom-right-radius:0;--swirl-icon-button-border-top-left-radius:var(--s-border-radius-base);--swirl-icon-button-border-bottom-left-radius:var(--s-border-radius-base)}.button-group--segmented ::slotted(*:last-child){--swirl-button-border-top-left-radius:0;--swirl-button-border-bottom-left-radius:0;--swirl-icon-button-border-top-right-radius:var(--s-border-radius-base);--swirl-icon-button-border-bottom-right-radius:var(--s-border-radius-base);--swirl-icon-button-border-top-left-radius:0;--swirl-icon-button-border-bottom-left-radius:0}', a = n, d = class {
   constructor(t) {
     s(this, t), this.orientation = "horizontal", this.segmented = void 0, this.spacing = "8", this.stretch = void 0, this.wrap = void 0;
   }
@@ -10,10 +10,10 @@ const n = ':host{display:block}:host *{box-sizing:border-box}.button-group--segm
     const t = this.segmented ? "0" : this.spacing, o = e("button-group", {
       "button-group--segmented": this.segmented
     });
-    return r(i, { key: "663df05c0ea2f6abeb84e5e8d505d86182b8db03" }, r("swirl-stack", { key: "24b8bfa87aedd82c415c09ef003ba5fcfc77d65a", align: this.orientation === "vertical" && this.stretch ? "stretch" : "start", class: o, justify: this.orientation === "horizontal" && this.stretch ? "stretch" : "start", orientation: this.orientation, role: "group", spacing: t, wrap: this.wrap }, r("slot", { key: "06f198d3ec7d7a064a074358ba446fdc66595f0b" })));
+    return r(i, { key: "9d7e0ea4b44869f77fa372f4ae4621b9f9dfe8dd" }, r("swirl-stack", { key: "6fbf8996d24abf7adbaa39d23b3db4eaa2b1bc60", align: this.orientation === "vertical" && this.stretch ? "stretch" : "start", class: o, justify: this.orientation === "horizontal" && this.stretch ? "stretch" : "start", orientation: this.orientation, role: "group", spacing: t, wrap: this.wrap }, r("slot", { key: "6b9ba670905fae3fca44b764be75208ae03c9714" })));
   }
 };
-a.style = d;
+d.style = a;
 export {
-  a as swirl_button_group
+  d as swirl_button_group
 };

package/dist/{swirl-button.entry.600106eb.js → swirl-button.entry.7a8d32bc.js}

@@ -1,4 +1,4 @@
-import { r as l, h as o, H as u, g as d } from "./index.aafcbece.js";
+import { r as l, h as o, H as u, g as d } from "./index.35faa157.js";
 import { c } from "./index-267776a4.6beb4f4b.js";
 import { g as v } from "./utils-fbb8b494.acf1ae9e.js";
 import "react";
@@ -50,7 +50,7 @@ const h = `.sc-swirl-button-h{display:inline-block;max-width:100%;flex-shrink:0}
       "button--pill": this.pill,
       "button--pressed": this.pressed
     }), b = t ? "a" : "button";
-    return o(u, { key: "9f7e6331c399db3c4bfd13decb2122be60e5e065", style: { pointerEvents: this.disabled ? "none" : "" } }, o(b, { key: "859b6ac29de2c34bb8d83195f15204e533e6def2", "aria-controls": this.swirlAriaControls, "aria-current": this.swirlAriaCurrent, "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled && !t ? "true" : void 0, "aria-expanded": this.swirlAriaExpanded, "aria-haspopup": this.swirlAriaHaspopup, "aria-label": r, "aria-pressed": this.pressed ? "true" : void 0, class: e, disabled: t ? void 0 : this.disabled, download: t ? void 0 : this.download, form: t ? void 0 : this.form, href: this.href, name: t ? void 0 : this.name, ref: (i) => this.buttonEl = i, target: t ? this.target : void 0, type: t ? void 0 : this.type, value: t ? void 0 : this.value, style: this.inheritFontSize ? { fontSize: "inherit", lineHeight: "inherit" } : {} }, Boolean(this.icon) && o("span", { key: "5c7f0e5a64b7a340f2150f389f20cd9316b187aa", class: "button__icon", innerHTML: this.icon, ref: (i) => this.iconEl = i }), !Boolean(this.icon) && o("span", { key: "d6a785644558af85728463ae5a91a0356597f234", class: "button__icon", ref: (i) => this.iconEl = i }, o("slot", { key: "fc0967d404034583af2e3de17f466cd16bb7a9b0", name: "icon" })), !n && o("span", { key: "adffba35ce4ab6113dbdcf9250d288f5ee0755d2", class: "button__label" }, this.label), s && o("span", { key: "e9fd1d4ab56df41b7c20b54fd830735571273f4d", class: "button__tag" }, o("slot", { key: "b102bba403ef8ec9f380fca6153ba242d789e0f0", name: "tag" }))));
+    return o(u, { key: "635a1065811fc352a9be9a8afcd3214a9650282d", style: { pointerEvents: this.disabled ? "none" : "" } }, o(b, { key: "ff06cd64a1d8eea339c9ab0afea3e69623bd1b2f", "aria-controls": this.swirlAriaControls, "aria-current": this.swirlAriaCurrent, "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled && !t ? "true" : void 0, "aria-expanded": this.swirlAriaExpanded, "aria-haspopup": this.swirlAriaHaspopup, "aria-label": r, "aria-pressed": this.pressed ? "true" : void 0, class: e, disabled: t ? void 0 : this.disabled, download: t ? void 0 : this.download, form: t ? void 0 : this.form, href: this.href, name: t ? void 0 : this.name, ref: (i) => this.buttonEl = i, target: t ? this.target : void 0, type: t ? void 0 : this.type, value: t ? void 0 : this.value, style: this.inheritFontSize ? { fontSize: "inherit", lineHeight: "inherit" } : {} }, Boolean(this.icon) && o("span", { key: "51b0054616c9b26f5217591384fcef5f634d0a07", class: "button__icon", innerHTML: this.icon, ref: (i) => this.iconEl = i }), !Boolean(this.icon) && o("span", { key: "18bf3a811562dbb9489d9fae2fb192b7e178bad1", class: "button__icon", ref: (i) => this.iconEl = i }, o("slot", { key: "40d9cf93df9ff77687d3410ef1a4178a7a82a627", name: "icon" })), !n && o("span", { key: "d629db6c30a294022b29ae2ba1214e22f5581a53", class: "button__label" }, this.label), s && o("span", { key: "1e11954dd364ba68414048dd133b0429c049964a", class: "button__tag" }, o("slot", { key: "07bfc30e7f989e134e5733ba0c3c2251d1668a51", name: "tag" }))));
   }
   get el() {
     return d(this);

package/dist/{swirl-card.entry.43287555.js → swirl-card.entry.67be0b78.js}

@@ -1,4 +1,4 @@
-import { r as t, c as n, h as e, H as o, g as c } from "./index.aafcbece.js";
+import { r as t, c as n, h as e, H as o, g as c } from "./index.35faa157.js";
 import { c as l } from "./index-267776a4.6beb4f4b.js";
 import "react";
 import "react-dom";
@@ -40,7 +40,7 @@ const u = `:host{display:contents}:host *{box-sizing:border-box}.card{--swirl-gh
       "card--interactive": this.interactive || this.href,
       "card--is--borderless": this.isBorderless
     });
-    return e(o, { key: "4d6f94076fcdb889d3ce746039607d59be1cd2b8", styles: { height: this.height } }, e(a, { key: "e90f4f6e05f6bce9dc7529e994ac20b78288075f", "aria-label": this.swirlAriaLabel, "aria-labelledby": this.swirlAriaLabelledby, class: i, href: this.href, rel: Boolean(this.href) && this.linkTarget === "_blank" ? "noreferrer" : void 0, style: s, target: this.linkTarget }, e("div", { key: "b807d3babd972a8fe3ea78cf09f85a9ba3ef0c60", class: "card__image", style: { aspectRatio: this.imageAspectRatio } }, e("slot", { key: "50785ca3afed12023065baf6f2a6a11d0fc694b2", name: "image" })), e("div", { key: "9cfb96ea5290cbb124c830bb3fb9b24db8d22764", class: "card__body", style: d }, e("div", { key: "b499e82609144d547db7ac0c3a9155d2f5c2edd5", class: "card__content" }, e("slot", { key: "5de143023d98501f3c98c319223aab370d42c46f", name: "content" })))));
+    return e(o, { key: "9a0dc5d885be38ee2e94c7641257eb018e258ad3", styles: { height: this.height } }, e(a, { key: "d863db3119f975a3f96e679b5a164c1ed792177c", "aria-label": this.swirlAriaLabel, "aria-labelledby": this.swirlAriaLabelledby, class: i, href: this.href, rel: Boolean(this.href) && this.linkTarget === "_blank" ? "noreferrer" : void 0, style: s, target: this.linkTarget }, e("div", { key: "02f660fa638a355f0bf9cc3fb57a9f728df27ef9", class: "card__image", style: { aspectRatio: this.imageAspectRatio } }, e("slot", { key: "73c1a1cf4914865e23f5dc0a37d298b226673040", name: "image" })), e("div", { key: "ed7413be702708dc44ed0b54c052602ec46aef43", class: "card__body", style: d }, e("div", { key: "0ac40a967d3a3df98cb2094b9bbc76ef59c4c5d5", class: "card__content" }, e("slot", { key: "beea6852b0cd7c32430e42c7bab74ae6990ec37f", name: "content" })))));
   }
   get el() {
     return c(this);

package/dist/{swirl-carousel-slide.entry.2f94fa6a.js → swirl-carousel-slide.entry.d8937424.js}

@@ -1,4 +1,4 @@
-import { r as i, h as e, H as t } from "./index.aafcbece.js";
+import { r as i, h as e, H as t } from "./index.35faa157.js";
 import { c as l } from "./index-267776a4.6beb4f4b.js";
 import "react";
 import "react-dom";
@@ -10,7 +10,7 @@ const o = ":host{display:block;min-width:0}:host(.carousel-slide--has-min-height
     const s = l("carousel-slide", {
       "carousel-slide--has-min-height": Boolean(this.minHeight)
     });
-    return e(t, { key: "1e818397fe4302ceaba585b537c123317307452d", "aria-roledescription": "slide", "aria-label": this.label, class: s, role: "group", style: { flexBasis: this.width, minHeight: this.minHeight }, tabIndex: 0 }, e("slot", { key: "0dfc63ca13321615bb5b3295e767c9e4ed82bac2" }));
+    return e(t, { key: "8e51a221c5008156f57a983719cb0f4e89309975", "aria-roledescription": "slide", "aria-label": this.label, class: s, role: "group", style: { flexBasis: this.width, minHeight: this.minHeight }, tabIndex: 0 }, e("slot", { key: "68acc357fb4c3ea6f69e12e946e3cd13234b4fdf" }));
   }
 };
 a.style = r;

package/dist/{swirl-carousel.entry.b22cacb6.js → swirl-carousel.entry.77532e6e.js}

@@ -1,4 +1,4 @@
-import { r as o, c as a, h as l, H as r, g as d } from "./index.aafcbece.js";
+import { r as o, c as a, h as l, H as r, g as d } from "./index.35faa157.js";
 import { d as c } from "./utils-fbb8b494.acf1ae9e.js";
 import { c as h } from "./index-267776a4.6beb4f4b.js";
 import "react";
@@ -70,7 +70,7 @@ const u = ":host{--swirl-carousel-spacing:var(--s-space-16);position:relative;di
       "carousel--is-at-start": this.isAtStart,
       "carousel--is-at-end": this.isAtEnd
     });
-    return l(r, { key: "7a23607d98ec5bc759fdcae7ba70df9a6940f187", "aria-label": this.label, "aria-roledescription": "carousel", role: "group" }, l("div", { key: "1223f0cd4acd6556cce428276f2664201bddbad0", class: e }, this.isScrollable && !this.isAtStart && l("swirl-button", { key: "86a5e0b334e7bff828bb2477cf912d54b9489f2e", class: "carousel__previous-slide-button", hideLabel: !0, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.previousSlideButtonLabel, onClick: this.onPreviousSlideButtonClick, pill: !0, variant: "floating" }), this.isScrollable && !this.isAtEnd && l("swirl-button", { key: "794a310026cec6b9203a99207e2aa4e732ff9e01", class: "carousel__next-slide-button", hideLabel: !0, icon: "<swirl-icon-arrow-forward></swirl-icon-arrow-forward>", label: this.nextSlideButtonLabel, onClick: this.onNextSlideButtonClick, pill: !0, variant: "floating" }), l("div", { key: "98179d7a5467375248823e59e5f8d1f080d5b39c", "aria-live": "polite", class: "carousel__slides", style: i, onScroll: this.onScroll, ref: (t) => this.slidesContainer = t }, l("slot", { key: "0ff0113a8d91b2366b517da4ef9d9219062d32b0", onSlotchange: this.onSlotChange }))));
+    return l(r, { key: "8c8ca585ecff7b41f8dfdc9e66bbcec0ed60a20e", "aria-label": this.label, "aria-roledescription": "carousel", role: "group" }, l("div", { key: "e6370b762f1822d608c395a1ab5e257688b04de3", class: e }, this.isScrollable && !this.isAtStart && l("swirl-button", { key: "7958568cc3a087979a061cc8ab8e920a4b4cc4c0", class: "carousel__previous-slide-button", hideLabel: !0, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.previousSlideButtonLabel, onClick: this.onPreviousSlideButtonClick, pill: !0, variant: "floating" }), this.isScrollable && !this.isAtEnd && l("swirl-button", { key: "faa888df896a1517ed6d4ad0ef411504fc9af373", class: "carousel__next-slide-button", hideLabel: !0, icon: "<swirl-icon-arrow-forward></swirl-icon-arrow-forward>", label: this.nextSlideButtonLabel, onClick: this.onNextSlideButtonClick, pill: !0, variant: "floating" }), l("div", { key: "4ec9cec82b7d3b57c27606ba147147fee4908009", "aria-live": "polite", class: "carousel__slides", style: i, onScroll: this.onScroll, ref: (t) => this.slidesContainer = t }, l("slot", { key: "751e7e966e6f7b5b6051a83cd566e96a46424526", onSlotchange: this.onSlotChange }))));
   }
   get el() {
     return d(this);

package/dist/{swirl-checkbox.entry.1d48a998.js → swirl-checkbox.entry.fe5df08b.js}

@@ -1,5 +1,5 @@
-import { r as b, c as t, h as c, H as d } from "./index.aafcbece.js";
-import { c as l } from "./index-267776a4.6beb4f4b.js";
+import { r as b, c as t, h as c, H as l } from "./index.35faa157.js";
+import { c as d } from "./index-267776a4.6beb4f4b.js";
 import "react";
 import "react-dom";
 const n = `.sc-swirl-checkbox-h{display:inline-flex}.sc-swirl-checkbox-h *.sc-swirl-checkbox{box-sizing:border-box}.checkbox.sc-swirl-checkbox{display:inline-flex;line-height:var(--s-line-height-base);cursor:pointer}.checkbox.sc-swirl-checkbox:focus-within .checkbox__box.sc-swirl-checkbox{box-shadow:0 0 0 0.0625rem var(--s-background-default),
@@ -14,14 +14,14 @@ const n = `.sc-swirl-checkbox-h{display:inline-flex}.sc-swirl-checkbox-h *.sc-sw
     return e ? "true" : i ? "false" : "mixed";
   }
   render() {
-    const e = this.checked === !1 || this.checked === "false", i = this.checked === !0 || this.checked === "true", o = this.checked === "indeterminate", s = Boolean(this.label) || Boolean(this.description), r = this.getAriaCheckedLabel(i, e), h = this.invalid === !0 || this.invalid === !1 ? String(this.invalid) : void 0, a = l("checkbox", `checkbox--label-weight-${this.labelWeight}`, `checkbox--variant-${this.variant}`, {
+    const e = this.checked === !1 || this.checked === "false", i = this.checked === !0 || this.checked === "true", o = this.checked === "indeterminate", s = Boolean(this.label) || Boolean(this.description), r = this.getAriaCheckedLabel(i, e), a = this.invalid === !0 || this.invalid === !1 ? String(this.invalid) : void 0, h = d("checkbox", `checkbox--label-weight-${this.labelWeight}`, `checkbox--variant-${this.variant}`, {
       "checkbox--checked": i,
       "checkbox--disabled": this.disabled,
       "checkbox--indeterminate": o,
       "checkbox--invalid": this.invalid,
       "checkbox--unchecked": e
     });
-    return c(d, { key: "3f791853cc40f9cea14b696c97a7e0ffcbe83b2f", style: { width: this.variant === "card" ? "100%" : void 0 } }, c("label", { key: "5343b2eb0c188c8bba2ac717d62de26711b29aa3", class: a, htmlFor: this.inputId }, c("span", { key: "0e3c767e4cf73aa2daddfb574f48a24f8753bc32", class: "checkbox__control" }, c("swirl-visually-hidden", { key: "518d7373a43419fb06b5f4a5cee587bfe469ff89" }, c("input", { key: "389abda596f18256d386f233e6472bd3e091f63a", "aria-checked": r, "aria-describedby": this.swirlAriaDescribedby, "aria-invalid": h, "aria-label": this.swirlAriaLabel, checked: i, class: "checkbox__input", disabled: this.disabled, id: this.inputId, indeterminate: o, name: this.inputName, onChange: this.onChange, type: "checkbox", value: this.value })), c("span", { key: "c3ea514dbc59eb64e8e9f58f8d66c9460e09fc12", "aria-hidden": "true", class: "checkbox__box" }, c("span", { key: "03f2234bf274c734f1ddcd30e3e7fcb03f7c0e9e", class: "checkbox__icon" }, i && c("swirl-icon-check-strong", { key: "3676909668e487ad3eced64ca05aef2617e6c99a" }), o && c("span", { key: "8b114f66464a5c125888ad3571993b71a4c51a6b", class: "checkbox__indeterminate-icon" })))), s && c("span", { key: "5d28ddb318680a3373d4ca771c972ff223d38b25", class: "checkbox__label-container" }, this.label && c("span", { key: "4baefd6cb705a6b9181c4e3c5653016f2713d653", class: "checkbox__label" }, this.label), this.description && c("span", { key: "4beba68c4124354bcb15251332bf25c666787b9d", class: "checkbox__description" }, this.description))));
+    return c(l, { key: "aac65bf193091a8bea9fba0400ba73214b59e3e0", style: { width: this.variant === "card" ? "100%" : void 0 } }, c("label", { key: "07c5b04f6809c2a96796ae899305d6197e34948b", class: h, htmlFor: this.inputId }, c("span", { key: "b6ff60df3a61f63c11880f553d65aef8aa5fd12f", class: "checkbox__control" }, c("swirl-visually-hidden", { key: "c53b3f70f0137c69003fd7098b235fa2bcf37f33" }, c("input", { key: "aacb2b661d7c7f90710b4c115730609a4e6305d2", "aria-checked": r, "aria-describedby": this.swirlAriaDescribedby, "aria-invalid": a, "aria-label": this.swirlAriaLabel, checked: i, class: "checkbox__input", disabled: this.disabled, id: this.inputId, indeterminate: o, name: this.inputName, onChange: this.onChange, type: "checkbox", value: this.value })), c("span", { key: "ef9cc2b5a745021f67f78f985146e325da793e44", "aria-hidden": "true", class: "checkbox__box" }, c("span", { key: "07f423ba9b9a5b43b89114a7b9a09287197ba09f", class: "checkbox__icon" }, i && c("swirl-icon-check-strong", { key: "c2583703af27ed11acc996cf7e0beefc99149923" }), o && c("span", { key: "90398aa1acb1cebf30ce3ae518ce8d0eec017410", class: "checkbox__indeterminate-icon" })))), s && c("span", { key: "5a5aaf43dcc186aa21934f5150f1f76445945a3d", class: "checkbox__label-container" }, this.label && c("span", { key: "fee226c02adbd1b677a3e4657c0c8056c260daa4", class: "checkbox__label" }, this.label), this.description && c("span", { key: "2e1bc11d4e655d1ca517531625ad2ea953753a07", class: "checkbox__description" }, this.description))));
   }
 };
 x.style = k;

package/dist/{swirl-chip.entry.7d8c037a.js → swirl-chip.entry.11b78013.js}

@@ -1,11 +1,11 @@
-import { r as o, c, h as e, H as h, g as n } from "./index.aafcbece.js";
+import { r as o, c, h as r, H as h, g as n } from "./index.35faa157.js";
 import { c as p } from "./index-267776a4.6beb4f4b.js";
 import { g as l } from "./utils-fbb8b494.acf1ae9e.js";
 import "react";
 import "react-dom";
 const d = ".sc-swirl-chip-h{position:relative;display:inline-flex;max-width:100%}.sc-swirl-chip-h *.sc-swirl-chip{box-sizing:border-box}.chip.sc-swirl-chip{display:inline-flex;overflow:hidden;max-width:100%;height:2.5rem;padding:0;border:0.0625rem solid var(--s-border-default);border-radius:1.25rem;color:var(--s-text-subdued);background-color:var(--s-surface-overlay-default);font:inherit;font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-sm);flex-direction:column}.chip--size-s.sc-swirl-chip{height:2rem}.chip--size-s.chip--removable.sc-swirl-chip .chip__inner.sc-swirl-chip{padding-right:calc(1.5rem + var(--s-space-12))}.chip--size-s.sc-swirl-chip .chip__inner.sc-swirl-chip{padding-right:var(--s-space-12);padding-left:var(--s-space-12)}.chip--size-s.sc-swirl-chip+.chip__remove-button.sc-swirl-chip{top:var(--s-space-4);width:1.5rem;height:1.5rem}.chip--interactive.sc-swirl-chip{cursor:pointer}.chip--interactive.sc-swirl-chip:hover{background-color:var(--s-surface-overlay-hovered)}.chip--interactive.sc-swirl-chip:hover .sc-swirl-chip::part(avatar){background-color:var(--s-surface-raised-hovered)}.chip--interactive.sc-swirl-chip:hover+.chip__remove-button.sc-swirl-chip{background-color:var(--s-surface-raised-default)}.chip--interactive.sc-swirl-chip:hover+.chip__remove-button.sc-swirl-chip:hover{background-color:var(--s-surface-raised-hovered)}.chip--interactive.sc-swirl-chip:hover+.chip__remove-button.sc-swirl-chip:active{background-color:var(--s-surface-overlay-pressed)}.chip--interactive.sc-swirl-chip:active{background-color:var(--s-surface-overlay-pressed)}.chip--interactive.sc-swirl-chip:active .sc-swirl-chip::part(avatar){background-color:var(--s-surface-raised-pressed)}.chip--interactive.sc-swirl-chip:active+.chip__remove-button.sc-swirl-chip{background-color:var(--s-surface-overlay-pressed)}.chip--icon-color-highlight.sc-swirl-chip .chip__icon.sc-swirl-chip{color:var(--s-icon-highlight)}.chip--removable.sc-swirl-chip .chip__inner.sc-swirl-chip{padding-right:calc(1.875rem + var(--s-space-12))}.chip--intent-critical.sc-swirl-chip{border-color:var(--s-border-critical);color:var(--s-text-critical)}.chip--intent-critical.sc-swirl-chip .chip__icon.sc-swirl-chip{color:var(--s-icon-critical)}.chip--border-radius-sm.sc-swirl-chip{border-radius:var(--s-border-radius-sm)}.chip--intent-success.sc-swirl-chip{border-color:var(--s-border-success);color:var(--s-text-success)}.chip--intent-success.sc-swirl-chip .chip__icon.sc-swirl-chip{color:var(--s-icon-success)}.chip--variant-outline.chip--pressed.sc-swirl-chip{color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-default)}.chip--variant-outline.chip--pressed.sc-swirl-chip:hover{background-color:var(--s-action-primary-hovered)}.chip--variant-outline.chip--pressed.sc-swirl-chip:hover+.chip__remove-button.sc-swirl-chip{background-color:var(--s-action-primary-hovered)}.chip--variant-outline.chip--pressed.sc-swirl-chip:active{background-color:var(--s-action-primary-pressed)}.chip--variant-outline.chip--pressed.sc-swirl-chip:active+.chip__remove-button.sc-swirl-chip{background-color:var(--s-action-primary-pressed)}.chip--variant-outline.chip--pressed.sc-swirl-chip+.chip__remove-button.sc-swirl-chip{color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-default)}.chip--variant-outline.chip--pressed.sc-swirl-chip+.chip__remove-button.sc-swirl-chip:hover{background-color:var(--s-action-primary-hovered)}.chip--variant-outline.chip--pressed.sc-swirl-chip+.chip__remove-button.sc-swirl-chip:active{background-color:var(--s-action-primary-pressed)}.chip--variant-plain.sc-swirl-chip{height:auto;border:none;border-radius:0;background-color:transparent}.chip--variant-plain.chip--interactive.sc-swirl-chip:hover{background-color:transparent;text-decoration:underline;text-underline-offset:var(--s-space-4)}.chip--variant-plain.chip--interactive.sc-swirl-chip:hover .sc-swirl-chip::part(avatar){background-color:var(--s-surface-raised-hovered)}.chip--variant-plain.chip--interactive.sc-swirl-chip:active{background-color:transparent}.chip--variant-plain.chip--interactive.sc-swirl-chip:active .sc-swirl-chip::part(avatar){background-color:var(--s-surface-raised-pressed)}.chip--variant-plain.chip--removable.sc-swirl-chip .chip__inner.sc-swirl-chip{padding-right:var(--s-space-12)}.chip--variant-plain.sc-swirl-chip+.chip__remove-button.sc-swirl-chip{position:relative;top:0;right:auto}.chip--variant-plain.sc-swirl-chip .chip__inner.sc-swirl-chip{padding-right:0;padding-left:0}.chip--has-progress.sc-swirl-chip+.chip__remove-button.sc-swirl-chip{top:0.1875rem}.chip__inner.sc-swirl-chip{display:inline-flex;max-width:100%;height:100%;padding-right:var(--s-space-16);padding-left:var(--s-space-16);align-items:center}.chip__avatar.sc-swirl-chip,.chip__icon.sc-swirl-chip{display:inline-flex;margin-right:var(--s-space-8);flex-shrink:0}.chip__avatar.sc-swirl-chip{overflow:hidden;width:1.75rem;height:1.75rem;margin-left:-0.625rem}.chip__icon.sc-swirl-chip{margin-left:-0.25rem;color:var(--s-icon-default)}.chip__label.sc-swirl-chip{overflow:hidden;flex-grow:1;white-space:nowrap;text-overflow:ellipsis}.chip__progress-indicator.sc-swirl-chip{width:100%}.chip__remove-button.sc-swirl-chip{position:absolute;top:0.3125rem;right:var(--s-space-4);display:inline-flex;width:1.875rem;height:1.875rem;padding:0;justify-content:center;align-items:center;border:none;border-radius:50%;color:var(--s-icon-default);background-color:var(--s-surface-overlay-default);cursor:pointer}.chip__remove-button.sc-swirl-chip:hover{background-color:var(--s-surface-overlay-hovered)}.chip__remove-button.sc-swirl-chip:active{background-color:var(--s-surface-overlay-pressed)}", v = d, u = class {
-  constructor(r) {
-    o(this, r), this.chipClick = c(this, "chipClick", 7), this.remove = c(this, "remove", 7), this.desktopMediaQuery = l(), this.desktopMediaQueryHandler = (i) => {
+  constructor(e) {
+    o(this, e), this.chipClick = c(this, "chipClick", 7), this.remove = c(this, "remove", 7), this.desktopMediaQuery = l(), this.desktopMediaQueryHandler = (i) => {
       this.forceIconProps(i.matches);
     }, this.borderRadius = "pill", this.icon = void 0, this.iconColor = "default", this.intent = "default", this.interactive = !1, this.label = void 0, this.progress = void 0, this.pressed = void 0, this.progressBarLabel = "Loading progress", this.removable = void 0, this.removeButtonLabel = "Remove", this.size = "m", this.variant = "outline";
   }
@@ -13,23 +13,23 @@ const d = ".sc-swirl-chip-h{position:relative;display:inline-flex;max-width:100%
     this.forceIconProps(this.desktopMediaQuery.matches), this.desktopMediaQuery.onchange = this.desktopMediaQueryHandler;
   }
   disconnectedCallback() {
-    var r, i;
-    (i = (r = this.desktopMediaQuery).removeEventListener) == null || i.call(r, "change", this.desktopMediaQueryHandler);
+    var e, i;
+    (i = (e = this.desktopMediaQuery).removeEventListener) == null || i.call(e, "change", this.desktopMediaQueryHandler);
   }
-  forceIconProps(r) {
+  forceIconProps(e) {
     if (!Boolean(this.iconEl))
       return;
-    const i = this.iconEl.children[0], s = this.size === "s" ? "16" : r ? "20" : "24";
+    const i = this.iconEl.children[0], s = this.size === "s" ? "16" : e ? "20" : "24";
     i == null || i.setAttribute("size", s);
   }
   render() {
-    const r = this.interactive || this.pressed !== void 0 ? "button" : "span", i = Boolean(this.el.querySelector('[slot="avatar"]')), s = !i && Boolean(this.icon), a = p("chip", `chip--border-radius-${this.borderRadius}`, `chip--icon-color-${this.iconColor}`, `chip--intent-${this.intent}`, `chip--size-${this.size}`, `chip--variant-${this.variant}`, {
+    const e = this.interactive || this.pressed !== void 0 ? "button" : "span", i = Boolean(this.el.querySelector('[slot="avatar"]')), s = !i && Boolean(this.icon), a = p("chip", `chip--border-radius-${this.borderRadius}`, `chip--icon-color-${this.iconColor}`, `chip--intent-${this.intent}`, `chip--size-${this.size}`, `chip--variant-${this.variant}`, {
       "chip--pressed": this.pressed,
       "chip--has-progress": this.progress !== void 0,
       "chip--interactive": this.interactive || this.pressed !== void 0,
       "chip--removable": this.removable
     });
-    return e(h, { key: "be1a929a9efe4fe6a6fee27f08218063ac03a8ba" }, e(r, { key: "2c816c3c7ba603c3c403947d9e2f043ea00c4061", "aria-pressed": this.pressed !== void 0 ? String(this.pressed) : void 0, class: a, onClick: this.chipClick.emit, type: this.interactive ? "button" : void 0 }, e("span", { key: "e570bc840be98fd23d6ff46517115e1ea6e1a111", class: "chip__inner" }, i && e("span", { key: "18e721ec9c55170f398e2b9d2df0be97a54626a4", class: "chip__avatar" }, e("slot", { key: "952ae3c808156b4a3f9d53e45d00af33d8f1d070", name: "avatar" })), s && e("span", { key: "179d91ff81b35f53469f8f5816b73b7fe324f744", class: "chip__icon", innerHTML: this.icon, ref: (t) => this.iconEl = t }), e("span", { key: "fa57586bd59ebd9c9722f3bbf64c5c37ab1ab5e6", class: "chip__label" }, this.label)), this.progress !== void 0 && e("span", { key: "4f15b8329caa1ff0de30812340c1ef6efead3797", class: "chip__progress-indicator" }, e("swirl-progress-indicator", { key: "5e349c092244b2aae8b33e485aa8794e22745a2a", label: this.progressBarLabel, value: this.progress }))), this.removable && e("button", { key: "94d8906bbef7392a08326f0e6ab6c63c98b6979d", "aria-label": this.removeButtonLabel, class: "chip__remove-button", onClick: this.remove.emit, type: "button" }, e("swirl-icon-close", { key: "d2ebf4e2cb3ad637ccd42fdefc4ce1d2e4b27950", size: 20 })));
+    return r(h, { key: "285e189df4a4358b7d07fc91b9f06ea562d295af" }, r(e, { key: "fb4d13ac4afbeffebc9b44b8cf5800e7f6063839", "aria-pressed": this.pressed !== void 0 ? String(this.pressed) : void 0, class: a, onClick: this.chipClick.emit, type: this.interactive ? "button" : void 0 }, r("span", { key: "bee9a24a811db37cdf02f1b3fba4f82a213154ee", class: "chip__inner" }, i && r("span", { key: "0887a96c9e1b4fe697d7d53a9df24baab62fd33b", class: "chip__avatar" }, r("slot", { key: "b9f4d49ebba68e3102792392efc6cf3d1401af40", name: "avatar" })), s && r("span", { key: "577e4bdfbc406cfd54fe507e3e75c1d9a0693933", class: "chip__icon", innerHTML: this.icon, ref: (t) => this.iconEl = t }), r("span", { key: "b6660e15ca44dea2ab591a7ac292c567d4073c56", class: "chip__label" }, this.label)), this.progress !== void 0 && r("span", { key: "fb2eba1ae34bc3e7b137044c4bd5814fc68493e1", class: "chip__progress-indicator" }, r("swirl-progress-indicator", { key: "93eed0c553045420b30d05f660c93dae3b431ad5", label: this.progressBarLabel, value: this.progress }))), this.removable && r("button", { key: "abff273245b609e14c2e7bfaa505aff50ff9bc92", "aria-label": this.removeButtonLabel, class: "chip__remove-button", onClick: this.remove.emit, type: "button" }, r("swirl-icon-close", { key: "22482cfa3b2da13e5a93a4fea5487b26850da6d4", size: 20 })));
   }
   get el() {
     return n(this);

package/dist/{swirl-color-input.entry.0da7d561.js → swirl-color-input.entry.020b0766.js}

@@ -1,4 +1,4 @@
-import { r as L, c as b, h as l, H as B } from "./index.aafcbece.js";
+import { r as L, c as f, h as l, H as B } from "./index.35faa157.js";
 import { c as T } from "./index-267776a4.6beb4f4b.js";
 import { v as z } from "./v4-23648a96.77c7c20f.js";
 import "react";
@@ -26,11 +26,11 @@ const d = (e, t = 0, o = 1) => e > o ? o : e < t ? t : e, s = (e, t = 0, o = Mat
   return `hsl(${t}, ${o}%, ${i}%)`;
 }, P = ({ h: e, s: t, v: o, a: i }) => {
   e = e / 360 * 6, t = t / 100, o = o / 100;
-  const r = Math.floor(e), n = o * (1 - t), a = o * (1 - (e - r) * t), p = o * (1 - (1 - e + r) * t), f = r % 6;
+  const r = Math.floor(e), n = o * (1 - t), a = o * (1 - (e - r) * t), p = o * (1 - (1 - e + r) * t), b = r % 6;
   return {
-    r: s([o, a, n, n, p, o][f] * 255),
-    g: s([p, o, o, a, n, n][f] * 255),
-    b: s([n, n, p, o, o, a][f] * 255),
+    r: s([o, a, n, n, p, o][b] * 255),
+    g: s([p, o, o, a, n, n][b] * 255),
+    b: s([n, n, p, o, o, a][b] * 255),
     a: s(i, 2)
   };
 }, u = (e) => {
@@ -221,7 +221,7 @@ class W extends U {
 customElements.define("hex-color-picker", W);
 const Z = ".sc-swirl-color-input-h{display:block;width:100%}.sc-swirl-color-input-h *.sc-swirl-color-input{box-sizing:border-box}.color-input.sc-swirl-color-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}.color-input--inline.sc-swirl-color-input .color-input__preview-button.sc-swirl-color-input{width:1.5rem;height:1.5rem;margin-top:-0.125rem;margin-right:-0.25rem;margin-bottom:-0.125rem}.color-input__input.sc-swirl-color-input{display:inline-flex;width:100%;margin:0;padding:0;flex-grow:1;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);caret-color:var(--s-border-highlight)}.color-input__input.sc-swirl-color-input:focus{outline:none}.color-input__input.sc-swirl-color-input:disabled{color:var(--s-text-disabled);background-color:transparent}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.color-input__input.sc-swirl-color-input{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.color-input__preview-button.sc-swirl-color-input{width:2.75rem;height:2.75rem;margin-top:-1.25rem;flex-shrink:0;border:0.0625rem solid var(--s-border-default);border-radius:var(--s-border-radius-s);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}", tt = Z, et = class {
   constructor(e) {
-    L(this, e), this.inputBlur = b(this, "inputBlur", 7), this.inputFocus = b(this, "inputFocus", 7), this.valueChange = b(this, "valueChange", 7), this.pickerId = `color-picker-${z()}`, this.onPickerChange = (t) => {
+    L(this, e), this.inputBlur = f(this, "inputBlur", 7), this.inputFocus = f(this, "inputFocus", 7), this.valueChange = f(this, "valueChange", 7), this.pickerId = `color-picker-${z()}`, this.onPickerChange = (t) => {
       this.value = t.detail.value;
     }, this.onChange = (t) => {
       const o = t.target;
@@ -253,9 +253,9 @@ const Z = ".sc-swirl-color-input-h{display:block;width:100%}.sc-swirl-color-inpu
     const e = this.invalid === !0 || this.invalid === !1 ? String(this.invalid) : void 0, t = T("color-input", {
       "color-input--inline": this.inline
     });
-    return l(B, { key: "9c6c2ae8eea70b1c7a3d655966f01eb10fa02126" }, l("div", { key: "9e9952887c16d3b416c733ce3f4b296f1a20bd84", class: t }, l("input", { key: "11f9f1059e8d0794b977d9de4092d3a663088c95", "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : void 0, "aria-invalid": e, autoFocus: this.autoFocus, class: "color-input__input", disabled: this.disabled, maxLength: 7, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, placeholder: this.placeholder, ref: (o) => this.inputEl = o, required: this.required, spellcheck: "false", type: "text", value: this.value }), l("swirl-popover-trigger", { key: "e1eaf6acc5216eac9720e49b0da4db3ed3d44263", swirlPopover: this.pickerId }, l("button", { key: "2835b722d009daf3018de69061a67274f6cf66a0", "aria-label": this.pickerButtonLabel, class: "color-input__preview-button", style: {
+    return l(B, { key: "914da429bdcdd6576cecfcf3dd90bf104d803a09" }, l("div", { key: "dc9f505383021faba447463c50811027d4b0be6b", class: t }, l("input", { key: "909c98a18b7fda96f7ebe7341180736a91697f71", "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : void 0, "aria-invalid": e, autoFocus: this.autoFocus, class: "color-input__input", disabled: this.disabled, maxLength: 7, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, placeholder: this.placeholder, ref: (o) => this.inputEl = o, required: this.required, spellcheck: "false", type: "text", value: this.value }), l("swirl-popover-trigger", { key: "906c3aba8ba37be0a08d19ac203ecadafd109ea3", swirlPopover: this.pickerId }, l("button", { key: "d770b523445bc12b7171bc30eadd66ae922f6119", "aria-label": this.pickerButtonLabel, class: "color-input__preview-button", style: {
       backgroundColor: this.disabled ? "var(--s-border-subdued)" : this.value
-    }, type: "button" })), l("swirl-popover", { key: "bc1d9f94ef65a8307e6e006f013d9a354576cbe7", animation: "scale-in-y", id: this.pickerId, label: this.pickerLabel, placement: "bottom-end" }, l("swirl-box", { key: "d2e9af494473cfdc2031f77d39e4fa3c5fffb2ae", centerInline: !0, paddingBlockEnd: "8", paddingBlockStart: "8", paddingInlineEnd: "16", paddingInlineStart: "16" }, l("hex-color-picker", { key: "d90d1d25866639f722abd765de86985d865931f0", color: this.value, ref: (o) => this.picker = o })))));
+    }, type: "button" })), l("swirl-popover", { key: "da0f865759500a54152e98eaf4dff87f0f7b9d1e", animation: "scale-in-y", id: this.pickerId, label: this.pickerLabel, placement: "bottom-end" }, l("swirl-box", { key: "025409345855e9cd4d601c9b14a077b347f72c2d", centerInline: !0, paddingBlockEnd: "8", paddingBlockStart: "8", paddingInlineEnd: "16", paddingInlineStart: "16" }, l("hex-color-picker", { key: "635cfa8885c5de97f240f5def31e6bfb72afb42f", color: this.value, ref: (o) => this.picker = o })))));
   }
   static get watchers() {
     return {

package/dist/swirl-columns.entry.18a6cc50.js

@@ -0,0 +1,18 @@
+import { r as o, h as s, H as t } from "./index.35faa157.js";
+import "react";
+import "react-dom";
+const a = ":host{display:block}:host *{box-sizing:border-box}.columns{display:grid;width:100%}", c = a, i = class {
+  constructor(e) {
+    o(this, e), this.columns = "repeat(3, minmax(0, 1fr))", this.spacing = void 0;
+  }
+  render() {
+    return s(t, { key: "e03996b556c972c081c2bd4283d006579cf3a1ba" }, s("div", { key: "95eee3bf0911dd60c08223ab389bc9a3e0a2a1a2", class: "columns", style: {
+      gridTemplateColumns: this.columns,
+      gap: `var(--s-space-${this.spacing})`
+    } }, s("slot", { key: "0d364bfbce8fda3431817a1cf2b35b71160d46ae" })));
+  }
+};
+i.style = c;
+export {
+  i as swirl_columns
+};