@getflip/swirl-components-react 0.10.0 → 0.12.0

package/dist/wc-datepicker.entry.d105e9ee.js

@@ -0,0 +1,269 @@
+import { r as R, c as S, h as n, H, g as E } from "./index.149af511.js";
+import "react";
+import "react-dom";
+function T(e, t) {
+  const a = new Date(e);
+  return a.setDate(a.getDate() + t), a;
+}
+function V(e, t, a) {
+  const s = [], i = b(e), d = i.getDay() === 0 ? 7 : i.getDay(), l = F(e), D = l.getDay() === 0 ? 7 : l.getDay(), g = a === 1 ? 7 : a - 1, f = [], v = [];
+  if (t) {
+    let p = (7 - a + d) % 7, m = y(i);
+    for (; p > 0; )
+      f.push(m), m = y(m), p -= 1;
+    f.reverse();
+    let w = (7 - D + g) % 7, c = C(l);
+    for (; w > 0; )
+      v.push(c), c = C(c), w -= 1;
+  }
+  let r = i;
+  for (; r.getMonth() === e.getMonth(); )
+    s.push(r), r = C(r);
+  return [...f, ...s, ...v];
+}
+function b(e) {
+  return u(new Date(`${P(e)}-${String(O(e)).padStart(2, "0")}-01`));
+}
+function h(e) {
+  if (e instanceof Date)
+    return `${e.getFullYear()}-${String(e.getMonth() + 1).padStart(2, "0")}-${String(e.getDate()).padStart(2, "0")}`;
+}
+function F(e) {
+  const t = b(e);
+  return t.setMonth(t.getMonth() + 1), t.setDate(t.getDate() - 1), t;
+}
+function O(e) {
+  return e.getMonth() + 1;
+}
+function K(e) {
+  return new Array(12).fill(void 0).map((t, a) => {
+    const s = u(new Date(`2006-${String(a + 1).padStart(2, "0")}-01`));
+    return Intl.DateTimeFormat(e, {
+      month: "long"
+    }).format(s);
+  });
+}
+function C(e) {
+  return T(e, 1);
+}
+function N(e) {
+  const t = new Date(e);
+  return t.setMonth(t.getMonth() + 1), t;
+}
+function B(e) {
+  const t = new Date(e);
+  return t.setFullYear(t.getFullYear() + 1), t;
+}
+function y(e) {
+  return A(e, 1);
+}
+function Y(e) {
+  const t = new Date(e);
+  return t.setMonth(t.getMonth() - 1), t;
+}
+function x(e) {
+  const t = new Date(e);
+  return t.setFullYear(t.getFullYear() - 1), t;
+}
+function j(e, t) {
+  return new Array(7).fill(void 0).map((a, s) => (e + s) % 7 + 1).map((a) => {
+    const s = u(new Date(`2006-01-0${a}`));
+    return [
+      Intl.DateTimeFormat(t, {
+        weekday: "short"
+      }).format(s),
+      Intl.DateTimeFormat(t, {
+        weekday: "long"
+      }).format(s)
+    ];
+  });
+}
+function P(e) {
+  return e.getFullYear();
+}
+function U(e, t) {
+  if (!e || !t || !t.from || !t.to)
+    return !1;
+  const a = t.from < t.to ? t.from : t.to, s = t.from < t.to ? t.to : t.from;
+  return e >= a && e <= s;
+}
+function o(e, t) {
+  return !e || !t ? !1 : e.getFullYear() === t.getFullYear() && e.getMonth() === t.getMonth() && e.getDate() === t.getDate();
+}
+function u(e) {
+  const t = new Date(e);
+  return t.setMinutes(t.getMinutes() + t.getTimezoneOffset()), t;
+}
+function A(e, t) {
+  const a = new Date(e);
+  return a.setDate(a.getDate() - t), a;
+}
+const z = ".visually-hidden.sc-wc-datepicker{position:absolute;overflow:hidden;width:1px;height:1px;white-space:nowrap;clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%)}", q = {
+  clearButton: "Clear value",
+  monthSelect: "Select month",
+  nextMonthButton: "Next month",
+  nextYearButton: "Next year",
+  picker: "Choose date",
+  previousMonthButton: "Previous month",
+  previousYearButton: "Previous year",
+  todayButton: "Show today",
+  yearSelect: "Select year"
+}, G = class {
+  constructor(e) {
+    R(this, e), this.selectDate = S(this, "selectDate", 7), this.changeMonth = S(this, "changeMonth", 7), this.disabled = !1, this.disableDate = () => !1, this.elementClassName = "wc-datepicker", this.firstDayOfWeek = 0, this.labels = q, this.locale = (navigator == null ? void 0 : navigator.language) || "en-US", this.showClearButton = !1, this.showMonthStepper = !0, this.showTodayButton = !1, this.showYearStepper = !1, this.startDate = h(new Date()), this.init = () => {
+      this.currentDate = this.startDate ? u(new Date(this.startDate)) : new Date(), this.updateWeekdays();
+    }, this.nextMonth = () => {
+      this.updateCurrentDate(N(this.currentDate));
+    }, this.nextYear = () => {
+      this.updateCurrentDate(B(this.currentDate));
+    }, this.previousMonth = () => {
+      this.updateCurrentDate(Y(this.currentDate));
+    }, this.previousYear = () => {
+      this.updateCurrentDate(x(this.currentDate));
+    }, this.showToday = () => {
+      this.updateCurrentDate(new Date());
+    }, this.clear = () => {
+      this.value = void 0, this.selectDate.emit(void 0);
+    }, this.onClick = (t) => {
+      if (this.disabled)
+        return;
+      const a = t.target.closest("[data-date]");
+      if (!Boolean(a))
+        return;
+      const s = u(new Date(a.dataset.date));
+      this.updateCurrentDate(s), this.onSelectDate(s);
+    }, this.onMonthSelect = (t) => {
+      const a = +t.target.value - 1, s = new Date(this.currentDate);
+      s.setMonth(a), this.updateCurrentDate(s);
+    }, this.onYearSelect = (t) => {
+      const a = +t.target.value, s = new Date(this.currentDate);
+      s.setFullYear(a), this.updateCurrentDate(s);
+    }, this.onKeyDown = (t) => {
+      this.disabled || (t.code === "ArrowLeft" ? (t.preventDefault(), this.updateCurrentDate(y(this.currentDate), !0)) : t.code === "ArrowRight" ? (t.preventDefault(), this.updateCurrentDate(C(this.currentDate), !0)) : t.code === "ArrowUp" ? (t.preventDefault(), this.updateCurrentDate(A(this.currentDate, 7), !0)) : t.code === "ArrowDown" ? (t.preventDefault(), this.updateCurrentDate(T(this.currentDate, 7), !0)) : t.code === "PageUp" ? (t.preventDefault(), t.shiftKey ? this.updateCurrentDate(x(this.currentDate), !0) : this.updateCurrentDate(Y(this.currentDate), !0)) : t.code === "PageDown" ? (t.preventDefault(), t.shiftKey ? this.updateCurrentDate(B(this.currentDate), !0) : this.updateCurrentDate(N(this.currentDate), !0)) : t.code === "Home" ? (t.preventDefault(), this.updateCurrentDate(b(this.currentDate), !0)) : t.code === "End" ? (t.preventDefault(), this.updateCurrentDate(F(this.currentDate), !0)) : (t.code === "Space" || t.code === "Enter") && (t.preventDefault(), this.onSelectDate(this.currentDate)));
+    }, this.onMouseEnter = (t) => {
+      if (this.disabled)
+        return;
+      const a = u(new Date(t.target.closest("td").dataset.date));
+      this.hoveredDate = a;
+    }, this.onMouseLeave = () => {
+      this.hoveredDate = void 0;
+    };
+  }
+  componentWillLoad() {
+    this.init();
+  }
+  watchFirstDayOfWeek() {
+    this.updateWeekdays();
+  }
+  watchLocale() {
+    Boolean(this.locale) || (this.locale = (navigator == null ? void 0 : navigator.language) || "en-US"), this.updateWeekdays();
+  }
+  watchRange() {
+    this.value = void 0, this.selectDate.emit(void 0);
+  }
+  watchStartDate() {
+    this.currentDate = this.startDate ? u(new Date(this.startDate)) : new Date();
+  }
+  watchValue() {
+    Boolean(this.value) && (Array.isArray(this.value) && this.value.length >= 1 ? this.currentDate = this.value[0] : this.value instanceof Date && (this.currentDate = this.value));
+  }
+  componentDidRender() {
+    this.moveFocusAfterMonthChanged && (this.focusDate(this.currentDate), this.moveFocusAfterMonthChanged = !1);
+  }
+  updateWeekdays() {
+    this.weekdays = j(this.firstDayOfWeek === 0 ? 7 : this.firstDayOfWeek, this.locale);
+  }
+  getClassName(e) {
+    return Boolean(e) ? `${this.elementClassName}__${e}` : this.elementClassName;
+  }
+  getCalendarRows() {
+    const e = V(this.currentDate, !0, this.firstDayOfWeek === 0 ? 7 : this.firstDayOfWeek), t = [];
+    for (let a = 0; a < e.length; a += 7) {
+      const s = e.slice(a, a + 7);
+      t.push(s);
+    }
+    return t;
+  }
+  getTitle() {
+    if (!!Boolean(this.currentDate))
+      return Intl.DateTimeFormat(this.locale, {
+        day: "numeric",
+        month: "long",
+        year: "numeric"
+      }).format(this.currentDate);
+  }
+  focusDate(e) {
+    var t;
+    (t = this.el.querySelector(`[data-date="${h(e)}"]`)) === null || t === void 0 || t.focus();
+  }
+  updateCurrentDate(e, t) {
+    const a = e.getMonth(), s = e.getFullYear();
+    (a !== this.currentDate.getMonth() || s !== this.currentDate.getFullYear()) && (this.changeMonth.emit({ month: O(e), year: P(e) }), t && (this.moveFocusAfterMonthChanged = !0)), this.currentDate = e, t && this.focusDate(this.currentDate);
+  }
+  onSelectDate(e) {
+    var t, a;
+    if (!this.disableDate(e))
+      if (this.isRangeValue(this.value)) {
+        const s = ((t = this.value) === null || t === void 0 ? void 0 : t[0]) === void 0 || this.value.length === 2 ? [e] : [this.value[0], e];
+        s.length === 2 && s[0] > s[1] && s.reverse();
+        const i = s[1] === void 0 ? [h(s[0])] : [h(s[0]), h(s[1])];
+        this.value = s, this.selectDate.emit(i);
+      } else {
+        if (((a = this.value) === null || a === void 0 ? void 0 : a.getTime()) === e.getTime())
+          return;
+        this.value = e, this.selectDate.emit(h(e));
+      }
+  }
+  isRangeValue(e) {
+    return this.range;
+  }
+  render() {
+    const e = this.showTodayButton || this.showClearButton;
+    return n(H, null, n("div", { "aria-disabled": String(this.disabled), "aria-label": this.labels.picker, class: {
+      [this.getClassName()]: !0,
+      [`${this.getClassName()}--disabled`]: this.disabled
+    }, role: "group" }, n("div", { class: this.getClassName("header") }, n("span", { "aria-atomic": "true", "aria-live": "polite", class: "visually-hidden" }, this.getTitle()), this.showYearStepper && n("button", { "aria-label": this.labels.previousYearButton, class: this.getClassName("previous-year-button"), disabled: this.disabled, innerHTML: this.previousYearButtonContent || void 0, onClick: this.previousYear, type: "button" }, n("svg", { fill: "none", height: "24", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", stroke: "currentColor", viewBox: "0 0 24 24", width: "24" }, n("polyline", { points: "11 17 6 12 11 7" }), n("polyline", { points: "18 17 13 12 18 7" }))), this.showMonthStepper && n("button", { "aria-label": this.labels.previousMonthButton, class: this.getClassName("previous-month-button"), disabled: this.disabled, innerHTML: this.previousMonthButtonContent || void 0, onClick: this.previousMonth, type: "button" }, n("svg", { fill: "none", height: "24", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", stroke: "currentColor", viewBox: "0 0 24 24", width: "24" }, n("polyline", { points: "15 18 9 12 15 6" }))), n("span", { class: this.getClassName("current-month") }, n("select", { "aria-label": this.labels.monthSelect, class: this.getClassName("month-select"), disabled: this.disabled, name: "month", onChange: this.onMonthSelect }, K(this.locale).map((t, a) => n("option", { key: t, selected: this.currentDate.getMonth() === a, value: a + 1 }, t))), n("input", { "aria-label": this.labels.yearSelect, class: this.getClassName("year-select"), disabled: this.disabled, max: 9999, min: 1, name: "year", onChange: this.onYearSelect, type: "number", value: this.currentDate.getFullYear() })), this.showMonthStepper && n("button", { "aria-label": this.labels.nextMonthButton, class: this.getClassName("next-month-button"), disabled: this.disabled, innerHTML: this.nextMonthButtonContent || void 0, onClick: this.nextMonth, type: "button" }, n("svg", { fill: "none", height: "24", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", stroke: "currentColor", viewBox: "0 0 24 24", width: "24" }, n("polyline", { points: "9 18 15 12 9 6" }))), this.showYearStepper && n("button", { "aria-label": this.labels.nextYearButton, class: this.getClassName("next-year-button"), disabled: this.disabled, innerHTML: this.nextYearButtonContent || void 0, onClick: this.nextYear, type: "button" }, n("svg", { fill: "none", height: "24", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", stroke: "currentColor", viewBox: "0 0 24 24", width: "24" }, n("polyline", { points: "13 17 18 12 13 7" }), n("polyline", { points: "6 17 11 12 6 7" })))), n("div", { class: this.getClassName("body") }, n("table", { class: this.getClassName("calendar"), onKeyDown: this.onKeyDown, role: "grid" }, n("thead", { class: this.getClassName("calendar-header") }, n("tr", { class: this.getClassName("weekday-row") }, this.weekdays.map((t) => n("th", { abbr: t[1], class: this.getClassName("weekday"), key: t[0], scope: "col" }, n("span", null, t[0]))))), n("tbody", null, this.getCalendarRows().map((t) => {
+      const a = `row-${t[0].getMonth()}-${t[0].getDate()}`;
+      return n("tr", { class: this.getClassName("calendar-row"), key: a }, t.map((s) => {
+        var i, d, l, D, g;
+        const f = o(s, this.currentDate), v = s.getMonth() !== this.currentDate.getMonth(), r = Array.isArray(this.value) ? o(s, this.value[0]) || o(s, this.value[1]) : o(s, this.value), M = this.isRangeValue ? U(s, {
+          from: (i = this.value) === null || i === void 0 ? void 0 : i[0],
+          to: ((d = this.value) === null || d === void 0 ? void 0 : d[1]) || this.hoveredDate || this.currentDate
+        }) : !1, p = Boolean((l = this.value) === null || l === void 0 ? void 0 : l[0]) ? [
+          (D = this.value) === null || D === void 0 ? void 0 : D[0],
+          ((g = this.value) === null || g === void 0 ? void 0 : g[1]) || this.hoveredDate
+        ].sort((_, I) => _ - I) : [], m = this.range && o(p[0], s), k = this.range && o(p[1], s), w = o(s, new Date()), c = this.disableDate(s), L = `cell-${s.getMonth()}-${s.getDate()}`, $ = {
+          [this.getClassName("date")]: !0,
+          [this.getClassName("date--current")]: f,
+          [this.getClassName("date--disabled")]: c,
+          [this.getClassName("date--overflowing")]: v,
+          [this.getClassName("date--today")]: w,
+          [this.getClassName("date--selected")]: r,
+          [this.getClassName("date--in-range")]: M,
+          [this.getClassName("date--start")]: m,
+          [this.getClassName("date--end")]: k
+        }, W = r ? "strong" : w ? "em" : "span";
+        return n("td", { "aria-disabled": String(c), "aria-selected": r ? "true" : void 0, class: $, "data-date": h(s), key: L, onClick: this.onClick, onMouseEnter: this.onMouseEnter, onMouseLeave: this.onMouseLeave, role: "gridcell", tabIndex: o(s, this.currentDate) && !this.disabled ? 0 : -1 }, n(W, { "aria-hidden": "true" }, s.getDate()), n("span", { class: "visually-hidden" }, Intl.DateTimeFormat(this.locale, {
+          day: "numeric",
+          month: "long"
+        }).format(s)));
+      }));
+    })))), e && n("div", { class: this.getClassName("footer") }, this.showTodayButton && n("button", { class: this.getClassName("today-button"), disabled: this.disabled, innerHTML: this.todayButtonContent || void 0, onClick: this.showToday, type: "button" }, this.labels.todayButton), this.showClearButton && n("button", { class: this.getClassName("clear-button"), disabled: this.disabled, innerHTML: this.clearButtonContent || void 0, onClick: this.clear, type: "button" }, this.labels.clearButton))));
+  }
+  get el() {
+    return E(this);
+  }
+  static get watchers() {
+    return {
+      firstDayOfWeek: ["watchFirstDayOfWeek"],
+      locale: ["watchLocale"],
+      range: ["watchRange"],
+      startDate: ["watchStartDate"],
+      value: ["watchValue"]
+    };
+  }
+};
+G.style = z;
+export {
+  G as wc_datepicker
+};

package/package.json

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

package/dist/file-manager.entry.8bb8e04c.js

@@ -1,58 +0,0 @@
-import { r as o, h as e, H as n } from "./index.6f8c9509.js";
-import "react";
-import "react-dom";
-const a = {
-  directories: [
-    {
-      name: "Development",
-      description: "Updated 2 days ago.",
-      children: [
-        {
-          description: "1.02 MB, updated 2 days ago.",
-          name: "sample.pdf",
-          type: "application/pdf",
-          url: "/sample.pdf"
-        },
-        {
-          description: "124 KB, updated a month ago.",
-          name: "sample.jpg",
-          type: "image/jpeg",
-          url: "/sample.jpg"
-        }
-      ]
-    },
-    {
-      name: "People",
-      description: "Updated just now.",
-      children: []
-    }
-  ]
-}, c = class {
-  constructor(t) {
-    o(this, t), this.selectItem = (i) => {
-      "type" in i ? (this.selectedFile = i, this.layout.changeMobileView("body")) : this.selectedDirectory = i;
-    }, this.resetSelectedDirectory = () => {
-      this.selectedDirectory = void 0;
-    }, this.toggleSidebar = () => {
-      var i;
-      (i = this.layout) === null || i === void 0 || i.toggleSidebar();
-    };
-  }
-  renderNavigation() {
-    const t = Boolean(this.selectedDirectory) ? this.selectedDirectory.children : a.directories;
-    return t.length > 0 ? t.map((i) => e("flip-resource-list-item", {
-      description: i.description,
-      key: i.name,
-      label: i.name,
-      media: "type" in i ? "<flip-icon-file></flip-icon-file>" : "<flip-icon-folder-shared></flip-icon-folder-shared>",
-      onClick: () => this.selectItem(i)
-    })) : e("flip-box", { padding: "16" }, e("flip-text", { color: "subdued", weight: "medium" }, "This directory is empty."));
-  }
-  render() {
-    var t, i;
-    return e(n, null, e("flip-app-layout", { appName: "Documents", backToNavigationViewButtonLabel: "Back to documents list", ctaIcon: "<flip-icon-add></flip-icon-add>", ctaLabel: "Upload file", heading: (t = this.selectedFile) === null || t === void 0 ? void 0 : t.name, navigationLabel: "Documents", onNavigationBackButtonClick: this.resetSelectedDirectory, ref: (l) => this.layout = l, sidebarCloseButtonLabel: "Close file info", sidebarHeading: "File info", showNavigationBackButton: Boolean(this.selectedDirectory), subheading: (i = this.selectedFile) === null || i === void 0 ? void 0 : i.description, transitionStyle: "dialog" }, e("flip-resource-list", { label: "Documents", slot: "navigation" }, this.renderNavigation()), e("flip-button", { id: "sort-button", label: "Sort items", slot: "navigation-controls" }), Boolean(this.selectedFile) ? e("flip-file-viewer", { file: this.selectedFile.url, slot: "content", type: this.selectedFile.type }) : e("flip-box", { cover: !0, centerBlock: !0, centerInline: !0, padding: "16", slot: "content" }, e("flip-empty-state", { heading: "Nothing to see here.", illustration: "/images/empty-state-1.svg" }, "Please select a file from the list.")), e("div", { slot: "app-bar-controls" }, this.selectedFile && e("flip-button", { "hide-label": !0, class: "info-button", icon: "<flip-icon-info></flip-icon-info>", label: "Open file info", onClick: this.toggleSidebar })), e("flip-box", { padding: "16", slot: "sidebar" }, e("flip-text", { color: "subdued", weight: "medium" }, "File info goes here \u2026"))), e("flip-popover", { label: "Sort items", popoverId: "sort-menu", trigger: "sort-button" }, e("flip-option-list", { value: ["ascending"] }, e("flip-option-list-item", { icon: "<flip-icon-expand-less></flip-icon-expand-less>", label: "Ascending", value: "ascending" }), e("flip-option-list-item", { icon: "<flip-icon-expand-more></flip-icon-expand-more>", label: "Descending", value: "descending" }), e("flip-option-list-item", { icon: "<flip-icon-time-outlined></flip-icon-time-outlined>", label: "By date", value: "date" }))));
-  }
-};
-export {
-  c as file_manager
-};

package/dist/flip-action-list-item.entry.56f1f1ef.js

@@ -1,18 +0,0 @@
-import { r as e, h as i, H as a } from "./index.6f8c9509.js";
-import { c as o } from "./index-6d2e18c6.289636d4.js";
-import "react";
-import "react-dom";
-import "./_commonjsHelpers-44457d8d.ba94af77.js";
-const l = ":host{display:block}:host *{box-sizing:border-box}.action-list-item{display:inline-flex;width:100%;min-width:15rem;margin:0;padding:var(--s-space-12) var(--s-space-16);justify-content:flex-start;align-items:center;border:none;color:var(--s-text-default);background-color:var(--s-surface-overlay-default);font:inherit;line-height:var(--s-line-height-base);text-align:left;cursor:pointer;gap:var(--s-space-12)}.action-list-item:hover{background-color:var(--s-surface-overlay-hovered)}.action-list-item:focus{outline:none}.action-list-item:focus-visible{background-color:var(--s-surface-overlay-hovered)}.action-list-item:active{background-color:var(--s-surface-overlay-pressed)}.action-list-item:disabled{background-color:var(--s-surface-overlay-default);cursor:default}.action-list-item:disabled .action-list-item__label,.action-list-item:disabled .action-list-item__description{color:var(--s-text-disabled)}.action-list-item:disabled .action-list-item__icon{color:var(--s-icon-disabled)}.action-list-item--size-l{padding:var(--s-space-16)}.action-list-item--intent-critical ::part(icon){color:var(--s-icon-critical)}.action-list-item--intent-critical:not(:disabled) .action-list-item__label{color:var(--s-text-critical)}.action-list-item--intent-critical:not(:disabled) .action-list-item__icon{color:var(--s-icon-critical)}.action-list-item__icon{display:inline-flex;flex-shrink:0;color:var(--s-icon-default)}.action-list-item__label-container{display:inline-flex;min-width:0;flex-grow:1;align-items:flex-start;flex-direction:column}.action-list-item__label{overflow:hidden;max-width:100%;padding-top:0.0625rem;font-weight:var(--s-font-weight-medium);white-space:nowrap;text-overflow:ellipsis}.action-list-item__description{color:var(--s-text-subdued)}.action-list-item__suffix{display:inline-flex;flex-shrink:0;color:var(--s-icon-highlight)}", n = class {
-  constructor(t) {
-    e(this, t), this.intent = "default", this.size = "m";
-  }
-  render() {
-    const t = Boolean(this.suffix) && !this.disabled, s = o("action-list-item", `action-list-item--intent-${this.intent}`, `action-list-item--size-${this.size}`);
-    return i(a, null, i("button", { class: s, disabled: this.disabled, role: "menuitem", tabIndex: -1, type: "button" }, this.icon && i("span", { class: "action-list-item__icon", innerHTML: this.icon }), i("span", { class: "action-list-item__label-container" }, i("span", { class: "action-list-item__label" }, this.label), this.description && i("span", { class: "action-list-item__description" }, this.description)), t && i("span", { class: "action-list-item__suffix", innerHTML: this.suffix })));
-  }
-};
-n.style = l;
-export {
-  n as flip_action_list_item
-};

package/dist/flip-action-list-section.entry.a99c7d3e.js

@@ -1,15 +0,0 @@
-import { r as i, h as t, H as o } from "./index.6f8c9509.js";
-import "react";
-import "react-dom";
-const e = ":host{display:block}:host *{box-sizing:border-box}.action-list-section{background-color:var(--s-surface-overlay-default)}.action-list-section__label{display:block;width:100%;padding:var(--s-space-8) var(--s-space-16);border-bottom:var(--s-border-width-default) solid var(--s-border-default);color:var(--s-text-subdued);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);text-align:left}", l = class {
-  constructor(s) {
-    i(this, s);
-  }
-  render() {
-    return t(o, null, t("div", { "aria-labelledby": "label", class: "action-list-section", role: "group" }, t("span", { class: "action-list-section__label", id: "label" }, this.label), t("div", { class: "action-list-section__items" }, t("slot", null))));
-  }
-};
-l.style = e;
-export {
-  l as flip_action_list_section
-};

package/dist/flip-autocomplete.entry.309d4ae7.js

@@ -1,70 +0,0 @@
-import { r as n, c, h as o, H as u, g as r } from "./index.6f8c9509.js";
-import { a as h, c as p, o as d } from "./floating-ui.dom.esm-1a4e8b8a.87557233.js";
-import { c as m } from "./index-6d2e18c6.289636d4.js";
-import { d as f } from "./utils-39b2afe8.37b54ba4.js";
-import "react";
-import "react-dom";
-import "./_commonjsHelpers-44457d8d.ba94af77.js";
-const b = ".sc-flip-autocomplete-h{display:block}.sc-flip-autocomplete-h *.sc-flip-autocomplete{box-sizing:border-box}.autocomplete--inactive.sc-flip-autocomplete .autocomplete__listbox-container.sc-flip-autocomplete{display:none}.autocomplete__listbox-container.sc-flip-autocomplete{position:fixed;z-index:var(--s-z-40);overflow:hidden;border-radius:var(--s-border-radius-sm);background-color:var(--s-surface-overlay-default);box-shadow:var(--s-shadow-level-1)}.autocomplete__spinner.sc-flip-autocomplete{display:flex;padding:var(--s-space-16);justify-content:center;align-items:center}", g = class {
-  constructor(s) {
-    n(this, s), this.valueChange = c(this, "valueChange", 7), this.clearable = !0, this.clearButtonLabel = "Clear input", this.generateSuggestions = async () => [], this.menuLabel = "Suggestions", this.active = !1, this.loading = !1, this.suggestions = [], this.onChange = f(async (t) => {
-      this.value = t.detail, this.valueChange.emit(this.value), this.updateSuggestions(), this.open();
-    }, 250, !1), this.onSelect = (t) => {
-      var i;
-      Boolean(t.detail[0]) && (this.value = t.detail[0], this.valueChange.emit(this.value)), (i = this.inputEl.querySelector("input")) === null || i === void 0 || i.focus(), this.close();
-    }, this.onFocusOut = (t) => {
-      const i = t.relatedTarget;
-      Boolean(i) && !this.el.contains(i) && this.close();
-    }, this.onFocus = () => {
-      this.updateSuggestions(), this.open();
-    }, this.onKeyDown = (t) => {
-      t.code === "Escape" && (t.preventDefault(), this.inputEl.querySelector("input").focus(), this.close());
-    }, this.onInputKeyDown = (t) => {
-      t.code === "ArrowDown" && (t.preventDefault(), this.listboxEl.querySelector('[role="listbox"]').focus());
-    };
-  }
-  componentWillLoad() {
-    const s = document.querySelectorAll("flip-datepicker").length;
-    this.id = `autocomplete-${s}`;
-  }
-  onWindowClick(s) {
-    const t = s.target;
-    this.el.contains(t) || this.close();
-  }
-  async close() {
-    !this.active || (this.disableAutoUpdate && this.disableAutoUpdate(), this.active = !1);
-  }
-  async open() {
-    this.active || (this.active = !0, requestAnimationFrame(async () => {
-      await this.reposition(), this.disableAutoUpdate && this.disableAutoUpdate(), this.disableAutoUpdate = h(this.inputEl, this.listboxContainerEl, this.reposition.bind(this)), this.listboxContainerEl.scrollTop = 0;
-    }));
-  }
-  async reposition() {
-    !Boolean(this.listboxContainerEl) || (this.position = await p(this.inputEl, this.listboxContainerEl, {
-      middleware: [d({ crossAxis: -16, mainAxis: 16 })],
-      placement: "bottom-start",
-      strategy: "fixed"
-    }));
-  }
-  async updateSuggestions() {
-    this.loading = !0, this.suggestions = [], this.suggestions = await this.generateSuggestions(this.value), this.loading = !1;
-  }
-  render() {
-    var s, t, i;
-    const l = `${this.id}-suggestions`, a = m("autocomplete", {
-      "autocomplete--inactive": !this.active
-    });
-    return o(u, null, o("div", { class: a, onFocusout: this.onFocusOut, onKeyDown: this.onKeyDown }, o("flip-text-input", { autoSelect: this.autoSelect, class: "autocomplete__input", clearable: this.clearable, clearButtonLabel: this.clearButtonLabel, disabled: this.disabled, disableDynamicWidth: !0, flipAriaAutocomplete: "list", flipAriaControls: l, flipAriaDescribedby: this.flipAriaDescribedby, flipAriaExpanded: String(this.active), flipRole: "combobox", id: this.id, invalid: this.invalid, onInputFocus: this.onFocus, onKeyDown: this.onInputKeyDown, onValueChange: this.onChange, maxLength: this.maxLength, mode: this.mode, ref: (e) => this.inputEl = e, required: this.required, spellCheck: this.spellCheck, value: this.value }), o("div", { class: "autocomplete__listbox-container", ref: (e) => this.listboxContainerEl = e, style: {
-      top: Boolean(this.position) ? `${(s = this.position) === null || s === void 0 ? void 0 : s.y}px` : "",
-      left: Boolean(this.position) ? `${(t = this.position) === null || t === void 0 ? void 0 : t.x}px` : "",
-      width: `${((i = this.inputEl) === null || i === void 0 ? void 0 : i.getBoundingClientRect().width) + 32}px`
-    } }, this.loading && o("div", { class: "autocomplete__spinner" }, o("flip-spinner", null)), o("flip-option-list", { label: this.menuLabel, onValueChange: this.onSelect, optionListId: l, ref: (e) => this.listboxEl = e, value: [this.value] }, this.suggestions.map((e) => o("flip-option-list-item", { selected: this.value === e.label, key: e.id, disabled: e.disabled, label: e.label, value: e.label }))))));
-  }
-  get el() {
-    return r(this);
-  }
-};
-g.style = b;
-export {
-  g as flip_autocomplete
-};

package/dist/flip-avatar-group.entry.4192d45c.js

@@ -1,29 +0,0 @@
-import { r as i, h as a, H as s } from "./index.6f8c9509.js";
-import { c as e } from "./index-6d2e18c6.289636d4.js";
-import "react";
-import "react-dom";
-import "./_commonjsHelpers-44457d8d.ba94af77.js";
-const d = ":host{display:inline-flex}:host *{box-sizing:border-box}.avatar-group{position:relative;display:inline-grid;grid-template-rows:repeat(8, 1fr);grid-template-columns:repeat(8, 1fr)}.avatar-group ::slotted(*:first-of-type){z-index:1;display:inline-flex;border:0.25rem solid var(--flip-avatar-group-border-color);border-radius:50%;grid-column-start:1;grid-column-end:7;grid-row-start:3;grid-row-end:9}.avatar-group ::slotted(*:nth-of-type(2)){z-index:0;display:inline-flex;border:0.25rem solid var(--flip-avatar-group-border-color);border-radius:50%;grid-column-start:3;grid-column-end:9;grid-row-start:1;grid-row-end:7}.avatar-group__badge{position:absolute;z-index:2;right:0;bottom:0;display:inline-flex;width:1.5rem;height:1.5rem}", l = class {
-  constructor(r) {
-    i(this, r);
-  }
-  componentDidLoad() {
-    this.forceBadgeProps();
-  }
-  forceBadgeProps() {
-    if (!Boolean(this.badge))
-      return;
-    const r = this.badgeEl.querySelector("flip-badge");
-    r == null || r.setAttribute("size", "m");
-  }
-  render() {
-    const r = e("avatar-group", {
-      "avatar-group--has-badge": Boolean(this.badge)
-    }), o = e("avatar-group__badge");
-    return a(s, null, a("div", { class: r, role: "group" }, a("slot", null), this.badge && a("span", { class: o, innerHTML: this.badge, ref: (t) => this.badgeEl = t })));
-  }
-};
-l.style = d;
-export {
-  l as flip_avatar_group
-};

package/dist/flip-badge.entry.9de15857.js

@@ -1,20 +0,0 @@
-import { r as t, h as e, H as i } from "./index.6f8c9509.js";
-import { c as r } from "./index-6d2e18c6.289636d4.js";
-import "react";
-import "react-dom";
-import "./_commonjsHelpers-44457d8d.ba94af77.js";
-const s = ":host{display:inline-flex;min-width:0;max-width:100%;justify-content:center;align-items:center}:host *{box-sizing:border-box}.badge{display:inline-flex;max-width:100%;justify-content:center;align-items:center;border:0.25rem solid var(--flip-badge-border-color);border-radius:2rem;color:var(--s-text-on-status);font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium)}.badge--size-s{min-width:1.5rem;height:1.5rem;font-size:0.75rem}.badge--size-s .badge__label{padding-right:0.1875rem;padding-left:0.1875rem}.badge--size-s .badge__icon>*::part(icon){width:0.75rem;height:0.75rem}.badge--size-m{min-width:2rem;height:2rem}.badge--size-m .badge__label{padding-right:0.375rem;padding-left:0.375rem}.badge--has-icon{padding-right:0;padding-left:0}.badge--intent-critical{color:var(--s-text-on-status);background-color:var(--s-surface-critical-default)}.badge--intent-banana{color:var(--s-text-dark);background-color:var(--s-decorative-banana-surface)}.badge--intent-blueberry{color:var(--s-text-on-status);background-color:var(--s-decorative-blueberry-surface)}.badge--intent-chilli{color:var(--s-text-on-status);background-color:var(--s-decorative-chilli-surface)}.badge--intent-grape{color:var(--s-text-on-status);background-color:var(--s-decorative-grape-surface)}.badge--intent-kiwi{color:var(--s-text-on-status);background-color:var(--s-decorative-kiwi-surface)}.badge--intent-pumpkin{color:var(--s-text-dark);background-color:var(--s-decorative-pumpkin-surface)}.badge--intent-radish{color:var(--s-text-on-status);background-color:var(--s-decorative-radish-surface)}.badge--variant-dot{width:1.25rem;min-width:0;height:1.25rem}.badge--variant-dot .badge__label{padding-right:0;padding-left:0}.badge--variant-dot .badge__label,.badge--variant-dot .badge__icon{display:none}.badge__icon{display:inline-flex}.badge__icon>*::part(icon){width:1rem;height:1rem}.badge__label{display:inline-flex;overflow:hidden;max-width:100%;white-space:nowrap;text-overflow:ellipsis}", n = class {
-  constructor(a) {
-    t(this, a), this.intent = "critical", this.size = "m", this.variant = "default";
-  }
-  render() {
-    const a = r("badge", `badge--intent-${this.intent}`, `badge--size-${this.size}`, `badge--variant-${this.variant}`, {
-      "badge--has-icon": this.icon
-    });
-    return e(i, { role: "status" }, e("span", { class: a }, this.icon && e("span", { class: "badge__icon", innerHTML: this.icon }), this.icon === void 0 && e("span", { class: "badge__label" }, this.label)));
-  }
-};
-n.style = s;
-export {
-  n as flip_badge
-};

package/dist/flip-banner.entry.703f5f14.js

@@ -1,33 +0,0 @@
-import { r, c as a, h as n, H as o, g as c } from "./index.6f8c9509.js";
-import { c as l } from "./index-6d2e18c6.289636d4.js";
-import "react";
-import "react-dom";
-import "./_commonjsHelpers-44457d8d.ba94af77.js";
-const b = ":host{display:block}:host *{box-sizing:border-box}.banner{display:flex;max-width:100%;padding:var(--s-space-12);align-items:flex-start}.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--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{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)}.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}}", d = {
-  default: void 0,
-  critical: "<flip-icon-error></flip-icon-error>",
-  success: "<flip-icon-check-circle></flip-icon-check-circle>",
-  warning: "<flip-icon-warning></flip-icon-warning>",
-  info: "<flip-icon-info></flip-icon-info>"
-}, u = class {
-  constructor(i) {
-    r(this, i), this.action = a(this, "action", 7), this.dismiss = a(this, "dismiss", 7), this.dismissable = !1, this.dismissLabel = "Dismiss", this.importance = "status", this.intent = "default", this.showIcon = !1, this.onAction = (t) => {
-      this.action.emit(t);
-    }, this.onDismiss = (t) => {
-      this.dismiss.emit(t);
-    };
-  }
-  render() {
-    const i = d[this.intent], t = Boolean(this.actionLabel) || this.dismissable, e = this.showIcon && Boolean(i), s = l("banner", `banner--intent-${this.intent}`, {
-      "banner--has-icon": e
-    });
-    return n(o, null, n("div", { "aria-describedby": "content", class: s, role: this.importance, tabIndex: 0 }, e && n("span", { "aria-hidden": "true", class: "banner__icon", innerHTML: i }), n("span", { class: "banner__content", id: "content" }, this.content), t && n("span", { class: "banner__controls" }, this.actionLabel && n("button", { class: "banner__action-button", onClick: this.onAction, type: "button" }, this.actionLabel), this.dismissable && n("button", { "aria-label": this.dismissLabel, class: "banner__dismiss-button", onClick: this.onDismiss, type: "button" }, n("flip-icon-close", null)))));
-  }
-  get element() {
-    return c(this);
-  }
-};
-u.style = b;
-export {
-  u as flip_banner
-};

package/dist/flip-button-group.entry.19eb382b.js

@@ -1,20 +0,0 @@
-import { r as i, h as o, H as e } from "./index.6f8c9509.js";
-import { c as s } from "./index-6d2e18c6.289636d4.js";
-import "react";
-import "react-dom";
-import "./_commonjsHelpers-44457d8d.ba94af77.js";
-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)){--flip-button-border-top-right-radius:0;--flip-button-border-top-left-radius:0;--flip-button-border-bottom-right-radius:0;--flip-button-border-bottom-left-radius:0;--flip-icon-button-border-top-right-radius:0;--flip-icon-button-border-top-left-radius:0;--flip-icon-button-border-bottom-right-radius:0;--flip-icon-button-border-bottom-left-radius:0}.button-group--segmented ::slotted(*:first-child){--flip-button-border-top-right-radius:0;--flip-button-border-bottom-right-radius:0;--flip-icon-button-border-top-right-radius:0;--flip-icon-button-border-bottom-right-radius:0;--flip-icon-button-border-top-left-radius:var(--s-border-radius-base);--flip-icon-button-border-bottom-left-radius:var(--s-border-radius-base)}.button-group--segmented ::slotted(*:last-child){--flip-button-border-top-left-radius:0;--flip-button-border-bottom-left-radius:0;--flip-icon-button-border-top-right-radius:var(--s-border-radius-base);--flip-icon-button-border-bottom-right-radius:var(--s-border-radius-base);--flip-icon-button-border-top-left-radius:0;--flip-icon-button-border-bottom-left-radius:0}', a = class {
-  constructor(t) {
-    i(this, t), this.orientation = "horizontal";
-  }
-  render() {
-    const t = this.segmented ? "0" : "8", r = s("button-group", {
-      "button-group--segmented": this.segmented
-    });
-    return o(e, null, o("flip-stack", { align: this.orientation === "vertical" && this.stretch ? "stretch" : "start", class: r, justify: this.orientation === "horizontal" && this.stretch ? "stretch" : "start", orientation: this.orientation, role: "group", spacing: t, wrap: this.wrap }, o("slot", null)));
-  }
-};
-a.style = n;
-export {
-  a as flip_button_group
-};

package/dist/flip-button.entry.a046c9ec.js

@@ -1,41 +0,0 @@
-import { r as e, h as n, H as l } from "./index.6f8c9509.js";
-import { c as s } from "./index-6d2e18c6.289636d4.js";
-import "react";
-import "react-dom";
-import "./_commonjsHelpers-44457d8d.ba94af77.js";
-const c = `.sc-flip-button-h{display:inline-block;max-width:100%;flex-shrink:0}.sc-flip-button-h *.sc-flip-button{box-sizing:border-box}.button.sc-flip-button{display:inline-flex;width:100%;padding:var(--s-space-8) var(--s-space-16);justify-content:center;align-items:center;border:none;border-top-left-radius:var(--flip-button-border-top-left-radius);border-top-right-radius:var(--flip-button-border-top-right-radius);border-bottom-right-radius:var(--flip-button-border-bottom-right-radius);border-bottom-left-radius:var(--flip-button-border-bottom-left-radius);color:var(--s-text-subdued);background-color:var(--flip-ghost-button-background-default);font:inherit;font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-lg);text-decoration:none;cursor:pointer;gap:var(--s-space-8)}.button.sc-flip-button:hover{background-color:var(--flip-ghost-button-background-hovered)}.button.sc-flip-button:active{background-color:var(--flip-ghost-button-background-pressed)}.button.sc-flip-button:disabled{color:var(--s-text-disabled);background-color:var(--flip-ghost-button-background-default);cursor:default}.button.sc-flip-button:disabled .button__icon.sc-flip-button{color:var(--s-icon-disabled)}.button.sc-flip-button:focus:not(:focus-visible){outline:none}.button.sc-flip-button:focus-visible{outline-color:var(--s-focus-default);outline-offset:var(--s-space-2)}.button--variant-ghost.button--intent-primary.sc-flip-button:not(:disabled){color:var(--s-text-highlight)}.button--variant-ghost.button--intent-primary.sc-flip-button:not(:disabled) .button__icon.sc-flip-button{color:var(--s-icon-highlight)}.button--variant-ghost.button--intent-critical.sc-flip-button:not(:disabled){color:var(--s-text-critical)}.button--variant-ghost.button--intent-critical.sc-flip-button:not(:disabled) .button__icon.sc-flip-button{color:var(--s-icon-critical)}.button--variant-ghost.button--size-l.sc-flip-button{padding:var(--s-space-12) var(--s-space-20)}.button--variant-ghost.button--size-l.button--icon-only.sc-flip-button{padding:var(--s-space-12)}.button--variant-flat.sc-flip-button{color:var(--s-text-default);background-color:var(--s-action-neutral-default)}.button--variant-flat.sc-flip-button:hover{background-color:var(--s-action-neutral-hovered)}.button--variant-flat.sc-flip-button:active{background-color:var(--s-action-neutral-pressed)}.button--variant-flat.sc-flip-button:disabled{background-color:var(--s-action-neutral-disabled)}.button--variant-flat.button--intent-primary.sc-flip-button:not(:disabled){color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-default)}.button--variant-flat.button--intent-primary.sc-flip-button:not(:disabled):hover{background-color:var(--s-action-primary-hovered)}.button--variant-flat.button--intent-primary.sc-flip-button:not(:disabled):active{background-color:var(--s-action-primary-pressed)}.button--variant-flat.button--intent-primary.sc-flip-button:not(:disabled) .button__icon.sc-flip-button{color:var(--s-icon-on-action-primary)}.button--variant-flat.sc-flip-button .button__icon.sc-flip-button{color:var(--s-icon-strong)}.button--variant-plain.sc-flip-button{padding:0;border-radius:0;color:var(--s-interactive-neutral-default);background-color:transparent}.button--variant-plain.sc-flip-button:hover:not(:disabled){color:var(--s-interactive-neutral-default);background-color:transparent;text-decoration:underline;text-underline-offset:var(--s-space-4)}.button--variant-plain.sc-flip-button:hover:not(:disabled) .button__icon.sc-flip-button{color:var(--s-interactive-neutral-default)}.button--variant-plain.sc-flip-button:active:not(:disabled){color:var(--s-interactive-neutral-hovered);background-color:transparent}.button--variant-plain.sc-flip-button:active:not(:disabled) .button__icon.sc-flip-button{color:var(--s-interactive-neutral-hovered)}.button--variant-plain.sc-flip-button:disabled{color:var(--s-interactive-neutral-disabled);background-color:transparent}.button--variant-plain.sc-flip-button:disabled .button__icon.sc-flip-button{color:var(--s-interactive-neutral-disabled)}.button--variant-plain.button--intent-primary.sc-flip-button{color:var(--s-interactive-primary-default)}.button--variant-plain.button--intent-primary.sc-flip-button:hover{color:var(--s-interactive-primary-default)}.button--variant-plain.button--intent-primary.sc-flip-button:hover .button__icon.sc-flip-button{color:var(--s-interactive-primary-default)}.button--variant-plain.button--intent-primary.sc-flip-button:active{color:var(--s-interactive-primary-hovered)}.button--variant-plain.button--intent-primary.sc-flip-button:active .button__icon.sc-flip-button{color:var(--s-interactive-primary-hovered)}.button--variant-plain.button--intent-primary.sc-flip-button:disabled{color:var(--s-interactive-primary-disabled)}.button--variant-plain.button--intent-primary.sc-flip-button:disabled .button__icon.sc-flip-button{color:var(--s-interactive-primary-disabled)}.button--variant-plain.button--intent-primary.sc-flip-button .button__icon.sc-flip-button{color:var(--s-interactive-primary-default)}.button--variant-plain.sc-flip-button .button__icon.sc-flip-button{color:var(--s-interactive-neutral-default)}.button--variant-on-image.sc-flip-button{color:var(--s-text-on-image);background:linear-gradient(0deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
-    rgba(255, 255, 255, 0.3)}.button--variant-on-image.sc-flip-button:hover{background:linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
-      rgba(255, 255, 255, 0.4)}.button--variant-on-image.sc-flip-button:active{background:linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
-      rgba(255, 255, 255, 0.5)}.button--variant-on-image.sc-flip-button:disabled{color:var(--s-text-on-image);background:linear-gradient(0deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
-      rgba(255, 255, 255, 0.3)}.button--variant-on-image.sc-flip-button:disabled .button__icon.sc-flip-button{color:var(--s-icon-on-image)}.button--variant-on-image.sc-flip-button .button__icon.sc-flip-button{color:var(--s-icon-on-image)}.button--variant-floating.sc-flip-button{color:var(--s-text-default);background-color:var(--s-surface-overlay-default);box-shadow:var(--s-shadow-level-1)}.button--variant-floating.sc-flip-button:hover{color:var(--s-text-on-action-primary);background-color:var(--s-surface-overlay-hovered)}.button--variant-floating.sc-flip-button:active{color:var(--s-text-on-action-primary);background-color:var(--s-surface-overlay-pressed)}.button--variant-floating.button--icon-only.sc-flip-button{padding:var(--s-space-12)}.button--variant-floating.button--intent-primary.sc-flip-button{padding:var(--s-space-12) var(--s-space-20);border-radius:1.5rem;color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-default)}.button--variant-floating.button--intent-primary.sc-flip-button:hover:not(:disabled){color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-hovered)}.button--variant-floating.button--intent-primary.sc-flip-button:active:not(:disabled){color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-pressed)}.button--variant-floating.button--intent-primary.sc-flip-button:disabled{color:var(--s-text-on-action-primary)}.button--variant-floating.button--intent-primary.sc-flip-button:disabled .button__icon.sc-flip-button{color:var(--s-icon-on-action-primary)}.button--variant-floating.button--intent-primary.button--icon-only.sc-flip-button{padding:var(--s-space-12)}.button--variant-floating.button--intent-primary.sc-flip-button .button__icon.sc-flip-button{color:var(--s-icon-on-action-primary)}.button--variant-floating.sc-flip-button .button__icon.sc-flip-button{color:var(--s-icon-strong)}.button--icon-position-end.sc-flip-button .button__icon.sc-flip-button{margin-right:calc(-1 * var(--s-space-4));margin-left:0;order:2}.button--icon-only.sc-flip-button{padding:var(--s-space-8);border-top-left-radius:var(--flip-icon-button-border-top-left-radius);border-top-right-radius:var(--flip-icon-button-border-top-right-radius);border-bottom-right-radius:var(
-    --flip-icon-button-border-bottom-right-radius
-  );border-bottom-left-radius:var(--flip-icon-button-border-bottom-left-radius)}.button--icon-only.sc-flip-button .button__icon.sc-flip-button{margin-right:0;margin-left:0}.button__icon.sc-flip-button{display:inline-flex;margin-left:calc(-1 * var(--s-space-4));color:var(--s-icon-default);order:0}.button__label.sc-flip-button{overflow:hidden;max-width:100%;white-space:nowrap;text-overflow:ellipsis;order:1}`, b = class {
-  constructor(t) {
-    e(this, t), this.iconPosition = "start", this.intent = "default", this.size = "m", this.type = "button", this.variant = "ghost";
-  }
-  componentDidLoad() {
-    this.forceIconProps();
-  }
-  forceIconProps() {
-    if (!Boolean(this.iconEl))
-      return;
-    const t = this.iconEl.children[0];
-    t == null || t.setAttribute("size", "24");
-  }
-  getAriaLabel(t) {
-    if (Boolean(this.flipAriaLabel))
-      return this.flipAriaLabel;
-    if (t)
-      return this.label;
-  }
-  render() {
-    const t = this.hideLabel && Boolean(this.icon) || this.variant === "floating" && this.intent === "default", o = Boolean(this.href), i = this.getAriaLabel(t), a = s("button", `button--icon-position-${this.iconPosition}`, `button--intent-${this.intent}`, `button--size-${this.size}`, `button--variant-${this.variant}`, {
-      "button--icon-only": t
-    });
-    return n(l, null, n(o ? "a" : "button", { "aria-describedby": this.flipAriaDescribedby, "aria-disabled": this.disabled && !o ? "true" : void 0, "aria-expanded": this.flipAriaExpanded, "aria-label": i, class: a, disabled: o ? void 0 : this.disabled, download: o ? void 0 : this.download, form: o ? void 0 : this.form, href: this.href, name: o ? void 0 : this.name, target: o ? this.target : void 0, type: o ? void 0 : this.type, value: o ? void 0 : this.value }, this.icon && n("span", { class: "button__icon", innerHTML: this.icon, ref: (r) => this.iconEl = r }), !t && n("span", { class: "button__label" }, this.label)));
-  }
-};
-b.style = c;
-export {
-  b as flip_button
-};