@getflip/swirl-components-react 0.87.0 → 0.88.0

package/dist/{swirl-toast.entry.7ba7fa51.js → swirl-toast.entry.ec1a231c.js}

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

package/dist/{swirl-tooltip.entry.fa1ee8ca.js → swirl-tooltip.entry.01a0e8c9.js}

@@ -1,4 +1,4 @@
-import { r as n, h as i, H as r } from "./index.7bb93222.js";
+import { r as n, h as i, H as r } from "./index.14306018.js";
 import { c as l, a as p, o as h, s as d, f as c } from "./floating-ui.dom.esm-ac7cc24e.79b318e4.js";
 import "react";
 import "react-dom";

package/dist/{swirl-tree-navigation-item.entry.e2cbcb0a.js → swirl-tree-navigation-item.entry.bccb9b7b.js}

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

package/dist/{swirl-video-thumbnail.entry.59cd6cf7.js → swirl-video-thumbnail.entry.c60e7c02.js}

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

package/dist/{swirl-visually-hidden.entry.8683f690.js → swirl-visually-hidden.entry.e615419e.js}

@@ -1,4 +1,4 @@
-import { r as s, h as i, H as l } from "./index.7bb93222.js";
+import { r as s, h as i, H as l } from "./index.14306018.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.c138846e.js → wc-datepicker.entry.d2d75038.js}

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

package/package.json

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

package/dist/swirl-checkbox.entry.b77bae78.js

@@ -1,29 +0,0 @@
-import { r as t, c as a, h as c, H as b } from "./index.7bb93222.js";
-import { c as n } from "./index-d280dafb.186cdb0e.js";
-import "react";
-import "react-dom";
-const d = `.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),
-      0 0 0 0.1875rem var(--s-focus-default)}.checkbox--checked.sc-swirl-checkbox .checkbox__control.sc-swirl-checkbox:hover .checkbox__box.sc-swirl-checkbox,.checkbox--indeterminate.sc-swirl-checkbox .checkbox__control.sc-swirl-checkbox:hover .checkbox__box.sc-swirl-checkbox{border-color:var(--s-interactive-primary-hovered);background-color:var(--s-interactive-primary-hovered)}.checkbox--checked.sc-swirl-checkbox .checkbox__box.sc-swirl-checkbox,.checkbox--indeterminate.sc-swirl-checkbox .checkbox__box.sc-swirl-checkbox{border-color:var(--s-icon-highlight);color:var(--s-text-on-status);background-color:var(--s-icon-highlight)}.checkbox--invalid.checkbox--checked.sc-swirl-checkbox .checkbox__box.sc-swirl-checkbox,.checkbox--invalid.checkbox--indeterminate.sc-swirl-checkbox .checkbox__box.sc-swirl-checkbox{background-color:var(--s-icon-critical)}.checkbox--invalid.sc-swirl-checkbox .checkbox__box.sc-swirl-checkbox{border-color:var(--s-icon-critical)}.checkbox--disabled.sc-swirl-checkbox{cursor:default}.checkbox--disabled.checkbox--checked.sc-swirl-checkbox .checkbox__control.sc-swirl-checkbox:hover .checkbox__box.sc-swirl-checkbox,.checkbox--disabled.checkbox--indeterminate.sc-swirl-checkbox .checkbox__control.sc-swirl-checkbox:hover .checkbox__box.sc-swirl-checkbox{border-color:var(--s-icon-disabled);background-color:var(--s-icon-disabled)}.checkbox--disabled.checkbox--checked.sc-swirl-checkbox .checkbox__box.sc-swirl-checkbox,.checkbox--disabled.checkbox--indeterminate.sc-swirl-checkbox .checkbox__box.sc-swirl-checkbox{background-color:var(--s-icon-disabled)}.checkbox--disabled.sc-swirl-checkbox .checkbox__control.sc-swirl-checkbox:hover .checkbox__box.sc-swirl-checkbox{background-color:transparent}.checkbox--disabled.sc-swirl-checkbox .checkbox__box.sc-swirl-checkbox{border-color:var(--s-icon-disabled)}.checkbox--disabled.sc-swirl-checkbox .checkbox__label.sc-swirl-checkbox,.checkbox--disabled.sc-swirl-checkbox .checkbox__description.sc-swirl-checkbox{color:var(--s-text-disabled)}.checkbox--label-weight-regular.sc-swirl-checkbox .checkbox__label.sc-swirl-checkbox{font-weight:var(--s-font-weight-regular)}.checkbox__control.sc-swirl-checkbox{position:relative;width:1.5rem;height:1.5rem;padding:var(--s-space-2);flex-shrink:0}.checkbox__control.sc-swirl-checkbox:hover .checkbox__box.sc-swirl-checkbox{background-color:var(--s-action-neutral-hovered)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.checkbox__control.sc-swirl-checkbox{width:1.375rem;height:1.375rem}}.checkbox__box.sc-swirl-checkbox{position:relative;z-index:1;display:flex;width:100%;height:100%;justify-content:center;align-items:center;border:0.125rem solid var(--s-icon-default);border-radius:var(--s-border-radius-s)}.checkbox__icon.sc-swirl-checkbox{display:inline-flex;width:1.0625rem;height:1.0625rem}.checkbox__icon.sc-swirl-checkbox>*.sc-swirl-checkbox::part(icon){width:1.0625rem;height:1.0625rem}.checkbox__indeterminate-icon.sc-swirl-checkbox{position:relative;width:100%;height:100%}.checkbox__indeterminate-icon.sc-swirl-checkbox:after{position:absolute;top:50%;left:50%;width:0.625rem;height:0.125rem;border-radius:0.0625rem;background-color:currentColor;content:"";transform:translate3d(-50%, -50%, 0)}.checkbox__label-container.sc-swirl-checkbox{display:inline-flex;margin-left:var(--s-space-8);padding-top:var(--s-space-2);align-items:flex-start;flex-direction:column}.checkbox__label.sc-swirl-checkbox{font-weight:var(--s-font-weight-medium)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.checkbox__label.sc-swirl-checkbox{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.checkbox__description.sc-swirl-checkbox{color:var(--s-text-subdued)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.checkbox__description.sc-swirl-checkbox{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}`, x = class {
-  constructor(e) {
-    t(this, e), this.valueChange = a(this, "valueChange", 7), this.onChange = () => {
-      this.checked = !(this.checked === !0 || this.checked === "true"), this.valueChange.emit(this.checked);
-    }, this.checked = !1, this.description = void 0, this.disabled = !1, this.swirlAriaDescribedby = void 0, this.swirlAriaLabel = void 0, this.inputId = void 0, this.inputName = void 0, this.invalid = void 0, this.label = void 0, this.labelWeight = "medium", this.value = void 0;
-  }
-  getAriaCheckedLabel(e, i) {
-    return e ? "true" : i ? "false" : "mixed";
-  }
-  render() {
-    const e = this.checked === !1 || this.checked === "false", i = this.checked === !0 || this.checked === "true", s = this.checked === "indeterminate", o = Boolean(this.label) || Boolean(this.description), h = this.getAriaCheckedLabel(i, e), r = this.invalid === !0 || this.invalid === !1 ? String(this.invalid) : void 0, l = n("checkbox", `checkbox--label-weight-${this.labelWeight}`, {
-      "checkbox--checked": i,
-      "checkbox--disabled": this.disabled,
-      "checkbox--indeterminate": s,
-      "checkbox--invalid": this.invalid,
-      "checkbox--unchecked": e
-    });
-    return c(b, null, c("label", { class: l, htmlFor: this.inputId }, c("span", { class: "checkbox__control" }, c("swirl-visually-hidden", null, c("input", { "aria-checked": h, "aria-describedby": this.swirlAriaDescribedby, "aria-invalid": r, "aria-label": this.swirlAriaLabel, checked: i, class: "checkbox__input", disabled: this.disabled, id: this.inputId, indeterminate: s, name: this.inputName, onChange: this.onChange, type: "checkbox", value: this.value })), c("span", { "aria-hidden": "true", class: "checkbox__box" }, c("span", { class: "checkbox__icon" }, i && c("swirl-icon-check-strong", null), s && c("span", { class: "checkbox__indeterminate-icon" })))), o && c("span", { class: "checkbox__label-container" }, this.label && c("span", { class: "checkbox__label" }, this.label), this.description && c("span", { class: "checkbox__description" }, this.description))));
-  }
-};
-x.style = d;
-export {
-  x as swirl_checkbox
-};

package/dist/swirl-chip.entry.494aaa6a.js

@@ -1,40 +0,0 @@
-import { r as o, c, h as i, H as n, g as h } from "./index.7bb93222.js";
-import { c as p } from "./index-d280dafb.186cdb0e.js";
-import { g as l } from "./utils-bc84f36e.1fee9865.js";
-import "react";
-import "react-dom";
-const d = ":host{position:relative;display:inline-flex;max-width:100%}:host *{box-sizing:border-box}.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{height:2rem}.chip--size-s.chip--removable .chip__inner{padding-right:calc(1.5rem + var(--s-space-12))}.chip--size-s .chip__inner{padding-right:var(--s-space-12);padding-left:var(--s-space-12)}.chip--size-s+.chip__remove-button{top:var(--s-space-4);width:1.5rem;height:1.5rem}.chip--interactive{cursor:pointer}.chip--interactive:hover{background-color:var(--s-surface-overlay-hovered)}.chip--interactive:hover ::part(avatar){background-color:var(--s-surface-raised-hovered)}.chip--interactive:hover+.chip__remove-button{background-color:var(--s-surface-raised-default)}.chip--interactive:hover+.chip__remove-button:hover{background-color:var(--s-surface-raised-hovered)}.chip--interactive:hover+.chip__remove-button:active{background-color:var(--s-surface-overlay-pressed)}.chip--interactive:active{background-color:var(--s-surface-overlay-pressed)}.chip--interactive:active ::part(avatar){background-color:var(--s-surface-raised-pressed)}.chip--interactive:active+.chip__remove-button{background-color:var(--s-surface-overlay-pressed)}.chip--icon-color-highlight .chip__icon{color:var(--s-icon-highlight)}.chip--removable .chip__inner{padding-right:calc(1.875rem + var(--s-space-12))}.chip--intent-critical{border-color:var(--s-border-critical);color:var(--s-text-critical)}.chip--intent-critical .chip__icon{color:var(--s-icon-critical)}.chip--border-radius-sm{border-radius:var(--s-border-radius-sm)}.chip--intent-success{border-color:var(--s-border-success);color:var(--s-text-success)}.chip--intent-success .chip__icon{color:var(--s-icon-success)}.chip--variant-plain{height:auto;border:none;border-radius:0;background-color:transparent}.chip--variant-plain.chip--interactive:hover{background-color:transparent;text-decoration:underline;text-underline-offset:var(--s-space-4)}.chip--variant-plain.chip--interactive:hover ::part(avatar){background-color:var(--s-surface-raised-hovered)}.chip--variant-plain.chip--interactive:active{background-color:transparent}.chip--variant-plain.chip--interactive:active ::part(avatar){background-color:var(--s-surface-raised-pressed)}.chip--variant-plain.chip--removable .chip__inner{padding-right:var(--s-space-12)}.chip--variant-plain+.chip__remove-button{position:relative;top:0;right:auto}.chip--variant-plain .chip__inner{padding-right:0;padding-left:0}.chip--has-progress+.chip__remove-button{top:0.1875rem}.chip__inner{display:inline-flex;height:100%;padding-right:var(--s-space-16);padding-left:var(--s-space-16);align-items:center}.chip__avatar,.chip__icon{display:inline-flex;margin-right:var(--s-space-8);flex-shrink:0}.chip__avatar{overflow:hidden;width:1.75rem;height:1.75rem;margin-left:-0.625rem}.chip__icon{margin-left:-0.25rem;color:var(--s-icon-default)}.chip__label{overflow:hidden;flex-grow:1;white-space:nowrap;text-overflow:ellipsis}.chip__progress-indicator{width:100%}.chip__remove-button{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:hover{background-color:var(--s-surface-overlay-hovered)}.chip__remove-button:active{background-color:var(--s-surface-overlay-pressed)}", v = class {
-  constructor(r) {
-    o(this, r), this.remove = c(this, "remove", 7), this.desktopMediaQuery = l(), this.desktopMediaQueryHandler = (e) => {
-      this.forceIconProps(e.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.progressBarLabel = "Loading progress", this.removable = void 0, this.removeButtonLabel = "Remove", this.size = "m", this.variant = "outline";
-  }
-  componentDidLoad() {
-    this.forceIconProps(this.desktopMediaQuery.matches), this.desktopMediaQuery.onchange = this.desktopMediaQueryHandler;
-  }
-  disconnectedCallback() {
-    var r, e;
-    (e = (r = this.desktopMediaQuery).removeEventListener) == null || e.call(r, "change", this.desktopMediaQueryHandler);
-  }
-  forceIconProps(r) {
-    if (!Boolean(this.iconEl))
-      return;
-    const e = this.iconEl.children[0], a = this.size === "s" ? "16" : r ? "20" : "24";
-    e == null || e.setAttribute("size", a);
-  }
-  render() {
-    const r = this.interactive ? "button" : "span", e = Boolean(this.el.querySelector('[slot="avatar"]')), a = !e && Boolean(this.icon), t = 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--has-progress": this.progress !== void 0,
-      "chip--interactive": this.interactive,
-      "chip--removable": this.removable
-    });
-    return i(n, null, i(r, { class: t, type: this.interactive ? "button" : void 0 }, i("span", { class: "chip__inner" }, e && i("span", { class: "chip__avatar" }, i("slot", { name: "avatar" })), a && i("span", { class: "chip__icon", innerHTML: this.icon, ref: (s) => this.iconEl = s }), i("span", { class: "chip__label" }, this.label)), this.progress !== void 0 && i("span", { class: "chip__progress-indicator" }, i("swirl-progress-indicator", { label: this.progressBarLabel, value: this.progress }))), this.removable && i("button", { "aria-label": this.removeButtonLabel, class: "chip__remove-button", onClick: this.remove.emit }, i("swirl-icon-close", { size: 20 })));
-  }
-  get el() {
-    return h(this);
-  }
-};
-v.style = d;
-export {
-  v as swirl_chip
-};

package/dist/swirl-radio.entry.8060bbbd.js

@@ -1,28 +0,0 @@
-import { r as e, c as l, h as i, H as c } from "./index.7bb93222.js";
-import { c as t } from "./index-d280dafb.186cdb0e.js";
-import "react";
-import "react-dom";
-const n = `.sc-swirl-radio-h{display:inline-flex}.sc-swirl-radio-h *.sc-swirl-radio{box-sizing:border-box}.radio.sc-swirl-radio{display:inline-flex;line-height:var(--s-line-height-base);cursor:pointer}.radio.sc-swirl-radio:focus-within .radio__box.sc-swirl-radio{box-shadow:0 0 0 0.0625rem var(--s-background-default),
-      0 0 0 0.1875rem var(--s-focus-default)}.radio--checked.sc-swirl-radio .radio__control.sc-swirl-radio:hover .radio__box.sc-swirl-radio{border-color:var(--s-interactive-primary-hovered);background-color:var(--s-interactive-primary-hovered)}.radio--checked.sc-swirl-radio .radio__box.sc-swirl-radio{position:relative;border-color:var(--s-icon-highlight);background-color:var(--s-icon-highlight)}.radio--checked.sc-swirl-radio .radio__box.sc-swirl-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-swirl-radio .radio__box.sc-swirl-radio,.radio--invalid.radio--indeterminate.sc-swirl-radio .radio__box.sc-swirl-radio{background-color:var(--s-icon-critical)}.radio--invalid.sc-swirl-radio .radio__box.sc-swirl-radio{border-color:var(--s-icon-critical)}.radio--disabled.sc-swirl-radio{cursor:default}.radio--disabled.radio--checked.sc-swirl-radio .radio__control.sc-swirl-radio:hover .radio__box.sc-swirl-radio{border-color:var(--s-icon-disabled);background-color:transparent}.radio--disabled.radio--checked.sc-swirl-radio .radio__box.sc-swirl-radio{border-color:var(--s-icon-disabled);background-color:var(--s-background-default)}.radio--disabled.radio--checked.sc-swirl-radio .radio__box.sc-swirl-radio:after{background-color:var(--s-icon-disabled)}.radio--disabled.sc-swirl-radio .radio__control.sc-swirl-radio:hover .radio__box.sc-swirl-radio{background-color:transparent}.radio--disabled.sc-swirl-radio .radio__box.sc-swirl-radio{border-color:var(--s-icon-disabled)}.radio--disabled.sc-swirl-radio .radio__description.sc-swirl-radio,.radio--disabled.sc-swirl-radio .radio__label.sc-swirl-radio{color:var(--s-text-disabled)}.radio__control.sc-swirl-radio{position:relative;display:inline-flex;width:1.5rem;height:1.5rem;padding:var(--s-space-2);flex-shrink:0}.radio__control.sc-swirl-radio:hover .radio__box.sc-swirl-radio{background-color:var(--s-action-neutral-hovered)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.radio__control.sc-swirl-radio{width:1.375rem;height:1.375rem}}.radio__box.sc-swirl-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-swirl-radio{display:inline-flex;margin-left:var(--s-space-8);padding-top:var(--s-space-2);flex-direction:column}.radio__label.sc-swirl-radio{font-weight:var(--s-font-weight-medium)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.radio__label.sc-swirl-radio{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.radio__description.sc-swirl-radio{color:var(--s-text-subdued)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.radio__description.sc-swirl-radio{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}`, h = class {
-  constructor(r) {
-    e(this, r), this.valueChange = l(this, "valueChange", 7), this.onChange = () => {
-      this.checked = !0, this.valueChange.emit(this.value);
-    }, this.checked = !1, this.description = void 0, this.disabled = !1, this.inputId = void 0, this.inputName = void 0, this.invalid = void 0, this.label = void 0, this.value = void 0;
-  }
-  getAriaCheckedLabel(r, a) {
-    return r ? "true" : a ? "false" : "mixed";
-  }
-  render() {
-    const r = this.checked === !1 || this.checked === "false", a = this.checked === !0 || this.checked === "true", o = this.getAriaCheckedLabel(a, r), d = this.invalid, s = t("radio", {
-      "radio--checked": a,
-      "radio--disabled": this.disabled,
-      "radio--invalid": this.invalid,
-      "radio--unchecked": r
-    });
-    return i(c, null, i("label", { class: s, htmlFor: this.inputId }, i("span", { class: "radio__control" }, i("swirl-visually-hidden", null, i("input", { "aria-checked": o, "aria-invalid": d, checked: a, 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", innerHTML: this.description }))));
-  }
-};
-h.style = n;
-export {
-  h as swirl_radio
-};