@getflip/swirl-components-react 0.21.0 → 0.22.1

package/dist/swirl-app-bar.entry.868abf06.js

@@ -0,0 +1,44 @@
+import { r as e, c as o, h as t, H as n, g as a } from "./index.813b4e41.js";
+import { c as l } from "./index-d280dafb.186cdb0e.js";
+import "react";
+import "react-dom";
+const r = ':host{display:block;overflow-x:auto;width:100%}:host *{box-sizing:border-box}.app-bar{display:flex;min-width:-webkit-min-content;min-width:-moz-min-content;min-width:min-content;min-height:3.5rem;padding-right:var(--s-space-16);padding-left:var(--s-space-16);align-items:center;gap:var(--s-space-16)}.app-bar--has-cta .app-bar__cta{display:block}.app-bar__left-controls{display:flex;min-width:0;flex-shrink:0;align-items:center;gap:var(--s-space-16)}.app-bar__main-navigation-control{flex-shrink:0}.app-bar__cta{display:none}.app-bar__heading{display:flex;min-width:-webkit-min-content;min-width:-moz-min-content;min-width:min-content;flex-grow:1;align-items:center}@media (min-width: 992px){.app-bar__heading{flex-grow:0}}.app-bar__stepper-controls{position:relative;display:flex;flex-shrink:0;gap:var(--s-space-4)}.app-bar__stepper-controls:not(:first-child){padding-left:var(--s-space-16)}.app-bar__stepper-controls:not(:first-child):after{position:absolute;top:50%;left:0;width:var(--s-border-width-default);height:1.25rem;background-color:var(--s-border-default);content:"";transform:translateY(-50%)}.app-bar__center-controls{display:none;flex-grow:1;justify-content:center;align-items:center}@media (min-width: 992px){.app-bar__center-controls{display:flex}}.app-bar__right-controls{display:flex;min-width:0;flex-shrink:0;justify-content:flex-end;align-items:center}', c = class {
+  constructor(s) {
+    e(this, s), this.backButtonClick = o(this, "backButtonClick", 7), this.closeButtonClick = o(this, "closeButtonClick", 7), this.stepUpButtonClick = o(this, "stepUpButtonClick", 7), this.stepDownButtonClick = o(this, "stepDownButtonClick", 7), this.onBackButtonClick = (i) => {
+      this.backButtonClick.emit(i);
+    }, this.onCloseButtonClick = (i) => {
+      this.closeButtonClick.emit(i);
+    }, this.onStepUpButtonClick = (i) => {
+      this.stepUpButtonClick.emit(i);
+    }, this.onStepDownButtonClick = (i) => {
+      this.stepDownButtonClick.emit(i);
+    }, this.backButtonLabel = "Go back", this.closeButtonLabel = "Close", this.stepUpButtonLabel = "Previous item", this.stepDownButtonLabel = "Next item", this.showBackButton = void 0, this.showCloseButton = void 0, this.showStepperControls = void 0, this.hasCta = void 0;
+  }
+  componentWillLoad() {
+    this.mutationObserver = new MutationObserver(() => {
+      this.updateCtaStatus();
+    }), this.mutationObserver.observe(this.el, { childList: !0 }), queueMicrotask(() => {
+      this.updateCtaStatus();
+    });
+  }
+  disconnectedCallback() {
+    var s;
+    (s = this.mutationObserver) === null || s === void 0 || s.disconnect();
+  }
+  updateCtaStatus() {
+    this.hasCta = Boolean(this.el.querySelector('[slot="cta"]'));
+  }
+  render() {
+    const s = this.showBackButton || this.showCloseButton || this.showStepperControls, i = l("app-bar", {
+      "app-bar--has-cta": this.hasCta
+    });
+    return t(n, null, t("div", { class: i }, s && t("div", { class: "app-bar__left-controls" }, (this.showBackButton || this.showCloseButton) && t("div", { class: "app-bar__main-navigation-control" }, this.showBackButton && t("swirl-button", { hideLabel: !0, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.backButtonLabel, onClick: this.onBackButtonClick }), this.showCloseButton && t("swirl-button", { hideLabel: !0, icon: "<swirl-icon-close></swirl-icon-close>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick })), this.showStepperControls && t("div", { class: "app-bar__stepper-controls" }, t("swirl-button", { hideLabel: !0, icon: "<swirl-icon-arrow-upward></swirl-icon-arrow-upward>", label: this.stepUpButtonLabel, onClick: this.onStepUpButtonClick }), t("swirl-button", { hideLabel: !0, icon: "<swirl-icon-arrow-downward></swirl-icon-arrow-downward>", label: this.stepDownButtonLabel, onClick: this.onStepDownButtonClick }))), t("div", { class: "app-bar__cta" }, t("slot", { name: "cta" })), t("div", { class: "app-bar__heading" }, t("slot", { name: "heading" })), t("div", { class: "app-bar__center-controls" }, t("slot", { name: "center-controls" })), t("div", { class: "app-bar__right-controls" }, t("slot", { name: "right-controls" }))));
+  }
+  get el() {
+    return a(this);
+  }
+};
+c.style = r;
+export {
+  c as swirl_app_bar
+};

package/dist/{swirl-app-layout_7.entry.358ac341.js → swirl-app-layout_7.entry.d668d866.js}

@@ -1,5 +1,5 @@
-import { r as o, c as r, h as a, H as l, g as d, F as s } from "./index.9b20d5f3.js";
-import { c as p } from "./index-d280dafb.186cdb0e.js";
+import { r as o, c as r, h as a, H as l, g as p, F as s } from "./index.813b4e41.js";
+import { c as d } from "./index-d280dafb.186cdb0e.js";
 import { i as u } from "./utils-61f188cc.4a43deab.js";
 import "react";
 import "react-dom";
@@ -87,7 +87,7 @@ const m = `:host{position:relative;z-index:1;display:flex;width:100%;height:100%
     this.hasSidebar = Boolean(this.el.querySelector('[slot="sidebar"]'));
   }
   render() {
-    const i = (this.mobileView === "body" || this.transitioningTo) && this.hasNavigation, t = p("app-layout", `app-layout--mobile-view-${this.mobileView}`, `app-layout--transitioning-from-${this.transitioningFrom}`, `app-layout--transitioning-to-${this.transitioningTo}`, `app-layout--transition-style-${this.transitionStyle}`, {
+    const i = (this.mobileView === "body" || this.transitioningTo) && this.hasNavigation, t = d("app-layout", `app-layout--mobile-view-${this.mobileView}`, `app-layout--transitioning-from-${this.transitioningFrom}`, `app-layout--transitioning-to-${this.transitioningTo}`, `app-layout--transition-style-${this.transitionStyle}`, {
       "app-layout--has-navigation": this.hasNavigation,
       "app-layout--has-sidebar": this.hasSidebar,
       "app-layout--sidebar-active": this.mobileView === "sidebar" || this.sidebarActive,
@@ -96,7 +96,7 @@ const m = `:host{position:relative;z-index:1;display:flex;width:100%;height:100%
     return a(l, null, a("section", { "aria-labelledby": "app-name", class: t, role: "document", tabIndex: 0 }, a("div", { class: "app-layout__grid" }, a("header", { class: "app-layout__header" }, a("span", { class: "app-layout__navigation-mobile-menu-button" }, a("slot", { name: "navigation-mobile-menu-button" })), this.showNavigationBackButton && a("span", { class: "app-layout__navigation-back-button" }, a("swirl-button", { hideLabel: !0, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.navigationBackButtonLabel, onClick: this.onNavigationBackButtonClick })), a("swirl-heading", { as: "h1", class: "app-layout__app-name", headingId: "app-name", level: 3, text: this.appName }), this.hasNavigation && a("span", { class: "app-layout__navigation-controls" }, a("slot", { name: "navigation-controls" }))), a("nav", { "aria-label": this.navigationLabel, class: "app-layout__navigation" }, a("slot", { name: "navigation" })), a("section", { "aria-labelledby": "app-name", class: "app-layout__body" }, a("header", { class: "app-layout__app-bar" }, a("span", { class: "app-layout__app-bar-mobile-menu-button" }, a("slot", { name: "app-bar-mobile-menu-button" })), i && a("span", { class: "app-layout__back-to-navigation-button" }, a("swirl-button", { hideLabel: !0, icon: this.transitionStyle === "dialog" ? "<swirl-icon-close></swirl-icon-close>" : "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.backToNavigationViewButtonLabel, onClick: this.onBackToNavigationViewButtonClick })), a("div", { class: "app-layout__app-bar-content" }, a("slot", { name: "app-bar" })), a("div", { class: "app-layout__app-bar-controls" }, a("slot", { name: "app-bar-controls" }))), a("div", { class: "app-layout__content" }, a("slot", { name: "content" }))), a("aside", { class: "app-layout__sidebar" }, a("header", { class: "app-layout__sidebar-header" }, a("swirl-button", { class: "app-layout__sidebar-close-button", hideLabel: !0, icon: "<swirl-icon-close></swirl-icon-close>", label: this.sidebarCloseButtonLabel, onClick: this.onSidebarCloseButtonClick }), a("swirl-heading", { as: "h3", class: "app-layout__sidebar-heading", headingId: "sidebar-heading", level: 3, text: this.sidebarHeading })), a("div", { class: "app-layout__sidebar-content" }, a("slot", { name: "sidebar" }))), this.ctaLabel && a("span", { class: "app-layout__floating-cta" }, a("swirl-button", { hideLabel: Boolean(this.ctaIcon), icon: this.ctaIcon, intent: "primary", label: this.ctaLabel, onClick: this.onCtaClick, variant: "floating" })))));
   }
   get el() {
-    return d(this);
+    return p(this);
   }
   static get watchers() {
     return {
@@ -120,7 +120,7 @@ const v = ":host{display:block;width:100%}:host(.box--bordered){border:var(--s-b
       position: Boolean(this.overflow) ? "relative" : "",
       maxWidth: this.maxWidth,
       width: this.cover ? "100%" : void 0
-    }, t = p("box", {
+    }, t = d("box", {
       "box--bordered": this.bordered,
       "box--cover": this.cover
     });
@@ -142,22 +142,22 @@ const x = ":host{display:inline-flex}", k = class {
     o(this, i), this.size = 24;
   }
   render() {
-    const i = this.size === 20 ? 24 : this.size, t = p("swirl-icon", `swirl-icon--size-${this.size}`);
+    const i = this.size === 20 ? 24 : this.size, t = d("swirl-icon", `swirl-icon--size-${this.size}`);
     return a("svg", { class: t, fill: "none", height: this.size, part: "icon", viewBox: `0 0 ${i} ${i}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, this.size === 16 && a(s, null, a("path", { d: "M3.99999 1.33334C3.26666 1.33334 2.67332 1.93334 2.67332 2.66668L2.66666 13.3333C2.66666 14.0667 3.25999 14.6667 3.99332 14.6667H12C12.7333 14.6667 13.3333 14.0667 13.3333 13.3333V5.88668C13.3333 5.53334 13.1933 5.19334 12.94 4.94668L9.71999 1.72668C9.47332 1.47334 9.13332 1.33334 8.77999 1.33334H3.99999ZM8.66666 5.33334V2.33334L12.3333 6.00001H9.33332C8.96666 6.00001 8.66666 5.70001 8.66666 5.33334Z", fill: "currentColor" })), (this.size === 20 || this.size === 24) && a(s, null, a("path", { d: "M6 2C4.9 2 4.01 2.9 4.01 4L4 20C4 21.1 4.89 22 5.99 22H18C19.1 22 20 21.1 20 20V8.83C20 8.3 19.79 7.79 19.41 7.42L14.58 2.59C14.21 2.21 13.7 2 13.17 2H6ZM13 8V3.5L18.5 9H14C13.45 9 13 8.55 13 8Z", fill: "currentColor" })), this.size === 28 && a(s, null, a("path", { d: "M6.99999 2.33334C5.71666 2.33334 4.67832 3.38334 4.67832 4.66668L4.66666 23.3333C4.66666 24.6167 5.70499 25.6667 6.98832 25.6667H21C22.2833 25.6667 23.3333 24.6167 23.3333 23.3333V10.3017C23.3333 9.68334 23.0883 9.08834 22.645 8.65668L17.01 3.02168C16.5783 2.57834 15.9833 2.33334 15.365 2.33334H6.99999ZM15.1667 9.33334V4.08334L21.5833 10.5H16.3333C15.6917 10.5 15.1667 9.97501 15.1667 9.33334Z", fill: "currentColor" })));
   }
 };
 k.style = x;
-const C = ":host{display:inline-flex}", B = class {
+const C = ":host{display:inline-flex}", S = class {
   constructor(i) {
     o(this, i), this.size = 24;
   }
   render() {
-    const i = this.size === 20 ? 24 : this.size, t = p("swirl-icon", `swirl-icon--size-${this.size}`);
+    const i = this.size === 20 ? 24 : this.size, t = d("swirl-icon", `swirl-icon--size-${this.size}`);
     return a("svg", { class: t, fill: "none", height: this.size, part: "icon", viewBox: `0 0 ${i} ${i}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, this.size === 16 && a(s, null, a("path", { d: "M13.3333 3.99996H8.00001L7.06001 3.05996C6.80668 2.80663 6.46668 2.66663 6.11334 2.66663H2.66668C1.93334 2.66663 1.34001 3.26663 1.34001 3.99996L1.33334 12C1.33334 12.7333 1.93334 13.3333 2.66668 13.3333H13.3333C14.0667 13.3333 14.6667 12.7333 14.6667 12V5.33329C14.6667 4.59996 14.0667 3.99996 13.3333 3.99996ZM10 5.99996C10.7333 5.99996 11.3333 6.59996 11.3333 7.33329C11.3333 8.06663 10.7333 8.66663 10 8.66663C9.26668 8.66663 8.66668 8.06663 8.66668 7.33329C8.66668 6.59996 9.26668 5.99996 10 5.99996ZM12.6667 11.3333H7.33334V10.6666C7.33334 9.77996 9.11334 9.33329 10 9.33329C10.8867 9.33329 12.6667 9.77996 12.6667 10.6666V11.3333Z", fill: "currentColor" })), (this.size === 20 || this.size === 24) && a(s, null, a("path", { d: "M20 6H12L10.59 4.59C10.21 4.21 9.7 4 9.17 4H4C2.9 4 2.01 4.9 2.01 6L2 18C2 19.1 2.9 20 4 20H20C21.1 20 22 19.1 22 18V8C22 6.9 21.1 6 20 6ZM15 9C16.1 9 17 9.9 17 11C17 12.1 16.1 13 15 13C13.9 13 13 12.1 13 11C13 9.9 13.9 9 15 9ZM19 17H11V16C11 14.67 13.67 14 15 14C16.33 14 19 14.67 19 16V17Z", fill: "currentColor" })), this.size === 28 && a(s, null, a("path", { d: "M23.3333 6.99996H14L12.355 5.35496C11.9117 4.91163 11.3167 4.66663 10.6983 4.66663H4.66668C3.38334 4.66663 2.34501 5.71663 2.34501 6.99996L2.33334 21C2.33334 22.2833 3.38334 23.3333 4.66668 23.3333H23.3333C24.6167 23.3333 25.6667 22.2833 25.6667 21V9.33329C25.6667 8.04996 24.6167 6.99996 23.3333 6.99996ZM17.5 10.5C18.7833 10.5 19.8333 11.55 19.8333 12.8333C19.8333 14.1166 18.7833 15.1666 17.5 15.1666C16.2167 15.1666 15.1667 14.1166 15.1667 12.8333C15.1667 11.55 16.2167 10.5 17.5 10.5ZM22.1667 19.8333H12.8333V18.6666C12.8333 17.115 15.9483 16.3333 17.5 16.3333C19.0517 16.3333 22.1667 17.115 22.1667 18.6666V19.8333Z", fill: "currentColor" })));
   }
 };
-B.style = C;
-const S = ":host{display:block;width:100%}:host *{box-sizing:border-box}", I = class {
+S.style = C;
+const B = ":host{display:block;width:100%}:host *{box-sizing:border-box}", I = class {
   constructor(i) {
     o(this, i), this.focusedIndex = 0, this.onFocus = () => {
       this.focusItemAtIndex(this.focusedIndex);
@@ -170,13 +170,17 @@ const S = ":host{display:block;width:100%}:host *{box-sizing:border-box}", I = c
         this.focusItemAtIndex(e);
       } else
         t.key === "Home" ? (t.preventDefault(), this.focusItemAtIndex(0)) : t.key === "End" && (t.preventDefault(), this.focusItemAtIndex(this.items.length - 1));
+    }, this.onSlotChange = () => {
+      this.collectItems(), setTimeout(() => {
+        this.focusItemAtIndex(this.focusedIndex);
+      }, 16);
     }, this.label = void 0;
   }
   componentDidLoad() {
     this.collectItems(), this.removeItemsFromTabOrder();
   }
   collectItems() {
-    this.items = Array.from(this.el.querySelectorAll("swirl-resource-list-item, swirl-resource-list-file-item"));
+    this.items = Array.from(this.el.querySelectorAll("swirl-resource-list-item, swirl-resource-list-file-item")).filter((i) => i.isConnected);
   }
   removeItemsFromTabOrder() {
     this.items.forEach((i) => {
@@ -187,19 +191,19 @@ const S = ":host{display:block;width:100%}:host *{box-sizing:border-box}", I = c
   focusItemAtIndex(i) {
     this.removeItemsFromTabOrder();
     const t = this.items[i];
-    if (!Boolean(t))
+    if (!Boolean(t) || !t.isConnected)
       return;
     const e = t.shadowRoot.querySelector(".resource-list-item__content, .resource-list-file-item");
     e.setAttribute("tabIndex", "0"), e.focus(), this.focusedIndex = i;
   }
   render() {
-    return a(l, { onKeyDown: this.onKeyDown }, a("swirl-stack", { "aria-label": this.label, onFocus: this.onFocus, role: "grid", tabIndex: 0 }, a("slot", null)));
+    return a(l, { onKeyDown: this.onKeyDown }, a("swirl-stack", { "aria-label": this.label, onFocus: this.onFocus, role: "grid", tabIndex: 0 }, a("slot", { onSlotchange: this.onSlotChange })));
   }
   get el() {
-    return d(this);
+    return p(this);
   }
 };
-I.style = S;
+I.style = B;
 const z = ':host{display:block;width:100%}:host *{box-sizing:border-box}.resource-list-item{position:relative;width:100%}.resource-list-item--checked .resource-list-item__checkbox{border-color:var(--s-icon-highlight);color:var(--s-text-on-status);background-color:var(--s-icon-highlight)}.resource-list-item--has-menu .resource-list-item__label-container{padding-right:calc(var(--s-space-16) + 2.5rem + var(--s-space-12))}@media (min-width: 768px){.resource-list-item--selectable .resource-list-item__content{padding-left:calc(var(--s-space-16) + 1.5rem + var(--s-space-12))}}.resource-list-item--selectable .resource-list-item__label-container{padding-right:calc(var(--s-space-16) + 1.5rem + var(--s-space-12))}@media (min-width: 768px){.resource-list-item--selectable .resource-list-item__label-container{padding-right:var(--s-space-16)}}.resource-list-item--hide-divider .resource-list-item__label-container:after{display:none}.resource-list-item__content{--swirl-avatar-group-border-color:var(--s-background-default);--swirl-badge-border-color:var(--s-background-default);display:flex;width:100%;margin:0;padding-top:var(--s-space-12);padding-right:0;padding-bottom:var(--s-space-12);padding-left:var(--s-space-16);align-items:center;border:none;color:var(--s-text-default);background-color:var(--s-background-default);font:inherit;line-height:var(--s-line-height-base);text-align:left;text-decoration:none;cursor:pointer;gap:var(--s-space-12)}.resource-list-item__content:hover:not(:disabled){background-color:var(--s-background-hovered)}.resource-list-item__content:hover:not(:disabled) .resource-list-item__media{--swirl-avatar-group-border-color:var(--s-background-hovered);--swirl-badge-border-color:var(--s-background-hovered)}.resource-list-item__content:active:not(:disabled){background-color:var(--s-background-pressed)}.resource-list-item__content:active:not(:disabled) .resource-list-item__media{--swirl-avatar-group-border-color:var(--s-background-pressed);--swirl-badge-border-color:var(--s-background-pressed)}.resource-list-item__content:focus{outline:none}.resource-list-item__content:focus-visible{background-color:var(--s-background-hovered)}.resource-list-item__content:focus-visible .resource-list-item__media{--swirl-avatar-group-border-color:var(--s-background-hovered);--swirl-badge-border-color:var(--s-background-hovered)}.resource-list-item__content:disabled{color:var(--s-text-disabled);background-color:var(--s-background-default);cursor:default}.resource-list-item__content:disabled .resource-list-item__description{color:var(--s-text-disabled)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.resource-list-item__content{padding:var(--s-space-12);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.resource-list-item__media{display:inline-flex}.resource-list-item__label-container{position:relative;display:flex;min-width:0;min-height:2.875rem;padding-right:var(--s-space-16);flex-grow:1;justify-content:center;flex-direction:column}.resource-list-item__label-container:after{position:absolute;right:0;bottom:calc(-1 * var(--s-space-12));left:0;height:0.0625rem;background-color:var(--s-border-default);content:""}.resource-list-item__label{overflow:hidden;font-weight:var(--s-font-weight-medium);white-space:nowrap;text-overflow:ellipsis}.resource-list-item__description{overflow:hidden;margin-top:var(--s-space-2);color:var(--s-text-subdued);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);white-space:nowrap;text-overflow:ellipsis}.resource-list-item__menu-trigger{position:absolute;top:50%;right:var(--s-space-16);transform:translateY(-50%)}.resource-list-item__checkbox{position:absolute;top:50%;right:var(--s-space-16);display:flex;width:1.25rem;height:1.25rem;justify-content:center;align-items:center;border:0.125rem solid var(--s-icon-default);border-radius:var(--s-border-radius-s);transform:translateY(-50%)}@media (min-width: 768px){.resource-list-item__checkbox{right:auto;left:var(--s-space-16)}}.resource-list-item__checkbox-icon{display:inline-flex;width:1.0625rem;height:1.0625rem}.resource-list-item__checkbox-icon>*::part(icon){width:1.0625rem;height:1.0625rem}.resource-list-item__meta{position:absolute;top:calc(var(--s-space-12) + var(--s-space-4));right:var(--s-space-16);color:var(--s-text-subdued);font-size:var(--s-font-size-sm)}', L = class {
   constructor(i) {
     o(this, i), this.valueChange = r(this, "valueChange", 7), this.onClick = () => {
@@ -216,7 +220,7 @@ const z = ':host{display:block;width:100%}:host *{box-sizing:border-box}.resourc
     t !== this.hasMedia && (this.hasMedia = t);
   }
   render() {
-    const i = Boolean(this.href) && !this.selectable ? "a" : "button", t = this.disabled && !Boolean(this.href), e = Boolean(this.menuTriggerId), n = e && !Boolean(this.meta) && !this.selectable, c = Boolean(this.meta) && !this.selectable, b = this.selectable ? String(this.checked) : void 0, y = this.selectable ? "checkbox" : void 0, h = p("resource-list-item", {
+    const i = Boolean(this.href) && !this.selectable ? "a" : "button", t = this.disabled && !Boolean(this.href), e = Boolean(this.menuTriggerId), n = e && !Boolean(this.meta) && !this.selectable, c = Boolean(this.meta) && !this.selectable, b = this.selectable ? String(this.checked) : void 0, y = this.selectable ? "checkbox" : void 0, h = d("resource-list-item", {
       "resource-list-item--checked": this.checked,
       "resource-list-item--has-menu": e,
       "resource-list-item--hide-divider": this.hideDivider,
@@ -225,7 +229,7 @@ const z = ':host{display:block;width:100%}:host *{box-sizing:border-box}.resourc
     return a(l, { role: "row" }, a("div", { class: h, role: "gridcell" }, a(i, { "aria-checked": b, "aria-disabled": t ? "true" : void 0, "aria-labelledby": "label", class: "resource-list-item__content", href: this.href, disabled: t, onClick: this.onClick, part: "resource-list-item__content", role: y, tabIndex: 0 }, this.hasMedia && a("span", { class: "resource-list-item__media" }, a("slot", { name: "media" })), a("span", { class: "resource-list-item__label-container" }, a("span", { class: "resource-list-item__label", id: "label" }, this.label), this.description && a("span", { class: "resource-list-item__description" }, this.description))), this.selectable && a("span", { "aria-hidden": "true", class: "resource-list-item__checkbox" }, a("span", { class: "resource-list-item__checkbox-icon" }, this.checked && a("swirl-icon-check-strong", null))), c && a("span", { class: "resource-list-item__meta" }, this.meta), n && a("swirl-button", { "aria-disabled": t ? "true" : void 0, class: "resource-list-item__menu-trigger", disabled: t, hideLabel: !0, icon: "<swirl-icon-more-horizontal></swirl-icon-more-horizontal>", id: this.menuTriggerId, intent: "primary", label: this.menuTriggerLabel, onClick: this.onMenuTriggerClick })));
   }
   get el() {
-    return d(this);
+    return p(this);
   }
 };
 L.style = z;
@@ -234,7 +238,7 @@ export {
   _ as swirl_box,
   w as swirl_empty_state,
   k as swirl_icon_file,
-  B as swirl_icon_folder_shared,
+  S as swirl_icon_folder_shared,
   I as swirl_resource_list,
   L as swirl_resource_list_item
 };

package/dist/{swirl-autocomplete.entry.5e54dbb4.js → swirl-autocomplete.entry.383b34f1.js}

@@ -1,4 +1,4 @@
-import { r as n, c as r, h as o, H as u, g as c } from "./index.9b20d5f3.js";
+import { r as n, c as r, h as o, H as u, g as c } from "./index.813b4e41.js";
 import { a as h, c as d, o as p } from "./floating-ui.dom.esm-b9f28f6d.15013ef7.js";
 import { c as m } from "./index-d280dafb.186cdb0e.js";
 import { d as b } from "./utils-61f188cc.4a43deab.js";

package/dist/{swirl-avatar-group.entry.7ca8c376.js → swirl-avatar-group.entry.15274fa9.js}

@@ -1,4 +1,4 @@
-import { r as s, h as a, H as i } from "./index.9b20d5f3.js";
+import { r as s, h as a, H as i } from "./index.813b4e41.js";
 import { c as e } from "./index-d280dafb.186cdb0e.js";
 import "react";
 import "react-dom";

package/dist/{swirl-avatar.entry.da85420a.js → swirl-avatar.entry.563007fd.js}

@@ -1,4 +1,4 @@
-import { r as h, h as i, H as u, g } from "./index.9b20d5f3.js";
+import { r as h, h as i, H as u, g } from "./index.813b4e41.js";
 import { c as s } from "./index-d280dafb.186cdb0e.js";
 import "react";
 import "react-dom";

package/dist/{swirl-badge.entry.c865e18f.js → swirl-badge.entry.a8365ec9.js}

@@ -1,4 +1,4 @@
-import { r as t, h as e, H as i } from "./index.9b20d5f3.js";
+import { r as t, h as e, H as i } from "./index.813b4e41.js";
 import { c as r } from "./index-d280dafb.186cdb0e.js";
 import "react";
 import "react-dom";

package/dist/{swirl-banner.entry.2da45a09.js → swirl-banner.entry.d7a72f07.js}

@@ -1,4 +1,4 @@
-import { r as o, c as r, h as t, H as c, g as l } from "./index.9b20d5f3.js";
+import { r as o, c as r, h as t, H as c, g as l } from "./index.813b4e41.js";
 import { c as d } from "./index-d280dafb.186cdb0e.js";
 import { a as b } from "./utils-61f188cc.4a43deab.js";
 import "react";

package/dist/{swirl-button-group.entry.8e7bae41.js → swirl-button-group.entry.773a5f4d.js}

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

package/dist/{swirl-button.entry.5e3b5a9d.js → swirl-button.entry.c006f9c5.js}

@@ -1,4 +1,4 @@
-import { r as s, h as o, H as e } from "./index.9b20d5f3.js";
+import { r as s, h as o, H as e } from "./index.813b4e41.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.9e2c650d.js → swirl-card.entry.da2f235e.js}

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

package/dist/{swirl-checkbox.entry.f92b472c.js → swirl-checkbox.entry.4a87a82e.js}

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

package/dist/{swirl-chip.entry.d53bfc97.js → swirl-chip.entry.c947e66b.js}

@@ -1,4 +1,4 @@
-import { r as o, h as r, H as c } from "./index.9b20d5f3.js";
+import { r as o, h as r, H as c } from "./index.813b4e41.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.fb57bd4b.js → swirl-columns.entry.4f31da8c.js}

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