@getflip/swirl-components-react 0.381.1 → 0.383.0

package/dist/swirl-option-list-section.entry.ee39725f.js

@@ -1,15 +0,0 @@
-import { r as i, h as s, H as t } from "./index.f1cef125.js";
-import "react";
-import "react-dom";
-const a = ":host{display:block;width:100%}:host *{box-sizing:border-box}.option-list-section{background-color:var(--s-surface-overlay-default)}.option-list-section__label{display:block;width:100%;padding:var(--s-space-8) var(--s-space-16);color:var(--s-text-subdued);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);text-align:left}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.option-list-section__label{padding:var(--s-space-8) var(--s-space-12);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}", o = class {
-  constructor(e) {
-    i(this, e), this.separatorSpacing = "4", this.spacing = "0", this.hasSeparator = !1;
-  }
-  render() {
-    return s(t, { key: "a2bd8ab9bb252152056ec74a79bd48232337ffd1" }, this.hasSeparator && s("swirl-separator", { key: "111249ec87f6ff0d19ec92033a4fd60ce9794e61", spacing: this.separatorSpacing }), s("div", { key: "53e5d1ffd0c229ea7c52827d9188af5b9e2d3a81", "aria-labelledby": "label", class: "option-list-section", role: "group" }, s("span", { key: "871bb982f79e57d24f4d6105f4ee153c6b9b0fff", class: "option-list-section__label", id: "label", part: "option-list-section__label" }, this.label), s("swirl-stack", { key: "d7600e3e25663db7c74b4f073f1e1117cb98b84c", spacing: this.spacing, align: "stretch" }, s("slot", { key: "060fe6e45a03426b493cd98fff5f52207a99abf3" }))));
-  }
-};
-o.style = a;
-export {
-  o as swirl_option_list_section
-};

package/dist/swirl-switch.entry.be599c55.js

@@ -1,30 +0,0 @@
-import { r, c as h, h as s, H as l, g as n } from "./index.f1cef125.js";
-import { c as o } from "./index-orsBiyT_.fc4357c3.js";
-import "react";
-import "react-dom";
-const d = `.sc-swirl-switch-h{display:inline-flex;max-width:100%}.sc-swirl-switch-h *.sc-swirl-switch{box-sizing:border-box}.switch.sc-swirl-switch{display:inline-flex;align-items:center;touch-action:none;width:100%}.switch.sc-swirl-switch:focus-within .switch__control.sc-swirl-switch{box-shadow:0 0 0 0.0625rem var(--s-background-default),
-      0 0 0 0.1875rem var(--s-focus-default)}.switch--label-position-start.sc-swirl-switch{flex-direction:row-reverse}.switch--label-position-start.sc-swirl-switch .switch__content.sc-swirl-switch{margin-right:var(--s-space-12);margin-left:0}.switch--on.sc-swirl-switch .switch__thumb.sc-swirl-switch{left:calc(100% - 1.25rem - var(--s-space-2))}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.switch--on.sc-swirl-switch .switch__thumb.sc-swirl-switch{left:calc(100% - 0.875rem - var(--s-space-2))}}.switch--on.sc-swirl-switch .switch__control.sc-swirl-switch{background-color:var(--s-interactive-primary-default)}.switch--disabled.sc-swirl-switch .switch__control.sc-swirl-switch{background-color:var(--s-interactive-primary-disabled);cursor:default}.switch--disabled.sc-swirl-switch .switch__thumb.sc-swirl-switch{background-color:var(--s-interactive-neutral-default)}.switch--disabled.sc-swirl-switch .switch__label.sc-swirl-switch{color:var(--s-text-disabled)}.switch__control.sc-swirl-switch{position:relative;width:2.75rem;height:1.5rem;flex-shrink:0;border-radius:calc(1.5rem / 2);background-color:var(--s-interactive-primary-disabled);cursor:pointer;transition:background-color 0.2s}@media (prefers-reduced-motion){.switch__control.sc-swirl-switch{transition:none}}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.switch__control.sc-swirl-switch{width:1.875rem;height:1.125rem;border-radius:calc(1.125rem / 2)}}.switch__thumb.sc-swirl-switch{position:absolute;top:var(--s-space-2);left:var(--s-space-2);width:1.25rem;height:1.25rem;border-radius:50%;background-color:var(--s-surface-default);transition:left 0.2s;pointer-events:none}@media (prefers-reduced-motion){.switch__thumb.sc-swirl-switch{transition:none}}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.switch__thumb.sc-swirl-switch{width:0.875rem;height:0.875rem}}.switch__content.sc-swirl-switch{margin-left:var(--s-space-12);position:relative;z-index:1}.switch__label.sc-swirl-switch{font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.switch__description.sc-swirl-switch{font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-normal);line-height:var(--s-line-height-sm);color:var(--s-text-subdued)}`, w = class {
-  constructor(i) {
-    r(this, i), this.valueChange = h(this, "valueChange", 7), this.checked = !1, this.disabled = !1, this.labelPosition = "end", this.onChange = () => {
-      this.checked = !this.checked, this.valueChange.emit(this.checked);
-    };
-  }
-  async toggle() {
-    this.inputEl.dispatchEvent(new Event("change"));
-  }
-  render() {
-    const i = !this.checked, t = this.checked, e = t ? "true" : "false", c = o("switch", `switch--label-position-${this.labelPosition}`, {
-      "switch--off": i,
-      "switch--on": t,
-      "switch--disabled": this.disabled
-    });
-    return s(l, { key: "2b98bc7590ab0712ff6b02daac6f87cae9560e23" }, s("label", { key: "2fb35e0900696e1de0e243ffb6b7cf20fa52a9a2", class: c, htmlFor: this.inputId }, s("span", { key: "314b23be46a00ad8d38177c626e15e9f3f0b3b05", class: "switch__control" }, s("swirl-visually-hidden", { key: "d6f3c8b16b464b7a34b8ac0b43fc2b5583e8bf4a" }, s("input", { key: "5aad04f0defea2686d614cb3ad12586c1abfeddd", "aria-checked": e, "aria-label": !this.hideLabel && this.swirlAriaLabel ? this.swirlAriaLabel : void 0, checked: t, class: "switch__input", disabled: this.disabled, id: this.inputId, name: this.inputName, onChange: this.onChange, ref: (a) => this.inputEl = a, role: "switch", type: "checkbox", value: this.value })), s("span", { key: "5f5bf7543393ba30b6d2fcd62ce046ad19592682", "aria-hidden": "true", class: "switch__thumb" })), s("swirl-stack", { key: "f46a565746c376996e211f0c35e8e3e6bf9fa1da", class: "switch__content" }, this.label && !this.hideLabel && s("span", { key: "56fa464ce715125b5c8e80c65dd768e9dabc5dd2", class: "switch__label" }, this.label), this.hideLabel && s("swirl-visually-hidden", { key: "48d50645a610adf228a030c8cfa91b8bb4c44d36" }, this.swirlAriaLabel || this.label), this.description && s("span", { key: "bfc8a4885bb21578d459c24fd0fb59d3ba33e396", class: "switch__description" }, this.description))));
-  }
-  get el() {
-    return n(this);
-  }
-};
-w.style = d;
-export {
-  w as swirl_switch
-};

package/dist/swirl-symbol-roadmap.entry.d4a42792.js

@@ -1,17 +0,0 @@
-import { r as t, h as e, F as o } from "./index.f1cef125.js";
-import { c as r } from "./index-orsBiyT_.fc4357c3.js";
-import "react";
-import "react-dom";
-const a = ":host{display:inline-flex}", l = class {
-  constructor(s) {
-    t(this, s), this.size = 24;
-  }
-  render() {
-    const s = this.size === 20 ? 24 : this.size, i = r("swirl-symbol", `swirl-symbol--size-${this.size}`);
-    return e("svg", { key: "e0a6d355eabb1a886ad293ff4ce19237b66963f1", class: i, fill: "none", height: this.size, part: "symbol", viewBox: `0 0 ${s} ${s}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, e(o, { key: "81a5145d6813d10af2c3d0a8251ac81e1be492cb" }, e("path", { key: "b6266084d1f62414b8e145e91375d3679db1d905", d: "M13 10H18L21 7L18 4H13V2H11V4H4V10H11V12H6L3 15L6 18H11V22H13V18H20V12H13V10ZM6 6H17.17L18.17 7L17.17 8H6V6ZM18 16H6.83L5.83 15L6.83 14H18V16Z", fill: "currentColor" })));
-  }
-};
-l.style = a;
-export {
-  l as swirl_symbol_roadmap
-};

package/dist/swirl-symbol-smartphone.entry.f4df20cc.js

@@ -1,17 +0,0 @@
-import { r as t, h as e, F as r } from "./index.f1cef125.js";
-import { c as o } from "./index-orsBiyT_.fc4357c3.js";
-import "react";
-import "react-dom";
-const a = ":host{display:inline-flex}", l = class {
-  constructor(s) {
-    t(this, s), this.size = 24;
-  }
-  render() {
-    const s = this.size === 20 ? 24 : this.size, i = o("swirl-symbol", `swirl-symbol--size-${this.size}`);
-    return e("svg", { key: "12de55cda99a864fba8d86cf2f6d9e3022f5dab9", class: i, fill: "none", height: this.size, part: "symbol", viewBox: `0 0 ${s} ${s}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, e(r, { key: "ad32de408448394342f6a7612c504124e09eb835" }, e("path", { key: "c19b2564c7c9ac42b976a9ffc060b12ec51ef19b", d: "M17 1.01L7 1C5.9 1 5 1.9 5 3V21C5 22.1 5.9 23 7 23H17C18.1 23 19 22.1 19 21V3C19 1.9 18.1 1.01 17 1.01ZM17 19H7V5H17V19Z", fill: "currentColor" })));
-  }
-};
-l.style = a;
-export {
-  l as swirl_symbol_smartphone
-};

package/dist/swirl-tab-bar.entry.9fee4ff7.js

@@ -1,66 +0,0 @@
-import { r as l, c as b, h as e, H as o, g as c } from "./index.f1cef125.js";
-import { c as n } from "./index-orsBiyT_.fc4357c3.js";
-import { n as d } from "./utils-DytJsmhr.20b14d35.js";
-import "react";
-import "react-dom";
-const v = `.sc-swirl-tab-bar-h{display:flex;height:var(--swirl-tab-bar-height)}.sc-swirl-tab-bar-h *.sc-swirl-tab-bar{box-sizing:border-box}.tab-bar.sc-swirl-tab-bar{position:relative;display:flex;width:100%;justify-content:flex-start;overflow-x:auto;scrollbar-width:none}.tab-bar.tab-bar--variant-default.sc-swirl-tab-bar{border-bottom:var(--swirl-tab-bar-border-width) solid
-      var(--s-border-default)}.tab-bar.tab-bar--variant-pill.sc-swirl-tab-bar{gap:var(--s-space-8)}.tab-bar--justify-evenly.sc-swirl-tab-bar>*.sc-swirl-tab-bar{flex:1}.tab-bar__tab.sc-swirl-tab-bar{position:relative;display:flex;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content;margin:0;align-items:center;border:none;font:inherit;font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-lg);cursor:pointer;justify-content:center}.tab-bar__tab.tab-bar__tab--variant-default.sc-swirl-tab-bar{background-color:transparent;color:var(--s-interactive-neutral-default);padding:var(--s-space-4) var(--s-space-8)}.tab-bar__tab.tab-bar__tab--variant-default.sc-swirl-tab-bar:not(.tab-bar__tab--active):hover:after{position:absolute;bottom:0;left:50%;width:calc(100% - var(--s-space-8));height:0.1875rem;border-radius:0.125rem;background-color:var(--s-border-default);content:"";transform:translateX(-50%);pointer-events:none}.tab-bar__tab.tab-bar__tab--variant-default.tab-bar__tab--active.sc-swirl-tab-bar{color:var(--s-text-highlight)}.tab-bar__tab.tab-bar__tab--variant-default.tab-bar__tab--active.sc-swirl-tab-bar:after{position:absolute;bottom:0;left:50%;width:calc(100% - var(--s-space-8));height:0.1875rem;border-radius:0.125rem;background-color:var(--s-border-highlight);content:"";transform:translateX(-50%);pointer-events:none}.tab-bar__tab.tab-bar__tab--variant-default.sc-swirl-tab-bar:focus{outline:none}.tab-bar__tab.tab-bar__tab--variant-default.sc-swirl-tab-bar:focus-visible .tab-bar__tab-label.sc-swirl-tab-bar{border-radius:var(--s-border-radius-s);box-shadow:inset 0 0 0 0.125rem var(--s-focus-default)}.tab-bar__tab.tab-bar__tab--variant-pill.sc-swirl-tab-bar{border-radius:var(--s-border-radius-full-round);background:var(--s-action-neutral-default);color:var(--s-text-default);padding:var(--s-space-8) var(--s-space-16);gap:var(--s-space-8)}.tab-bar__tab.tab-bar__tab--variant-pill.sc-swirl-tab-bar:hover{background:var(--s-action-neutral-hovered)}.tab-bar__tab.tab-bar__tab--variant-pill.sc-swirl-tab-bar:active{background:var(--s-action-neutral-pressed)}.tab-bar__tab.tab-bar__tab--variant-pill.tab-bar__tab--active.sc-swirl-tab-bar{background:var(--s-action-primary-default);color:var(--s-text-on-action-primary)}.tab-bar__tab.tab-bar__tab--variant-pill.sc-swirl-tab-bar:focus-visible{outline-color:var(--s-focus-default);outline-offset:var(--s-space-2)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.tab-bar__tab.sc-swirl-tab-bar{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);padding:calc(var(--s-space-4) + var(--s-space-2)) var(--s-space-8)}}.tab-bar__tab-icon.sc-swirl-tab-bar{display:inline-flex}.tab-bar__tab-label.sc-swirl-tab-bar{display:inline-flex;padding:var(--s-space-8) var(--s-space-8);text-align:center}.tab-bar__tab-label.tab-bar__tab-label--variant-pill.sc-swirl-tab-bar{padding:0}`, h = class {
-  constructor(r) {
-    l(this, r), this.activateNextTab = b(this, "activateNextTab", 7), this.activatePreviousTab = b(this, "activatePreviousTab", 7), this.activateTab = b(this, "activateTab", 7), this.justify = "start", this.tabs = [], this.variant = "default", this.onKeyDown = (t) => {
-      t.code === "ArrowLeft" ? (t.preventDefault(), this.focusAdjacentTab(!0), this.activatePreviousTab.emit()) : t.code === "ArrowRight" && (t.preventDefault(), this.focusAdjacentTab(!1), this.activateNextTab.emit());
-    };
-  }
-  onTabFocus(r) {
-    r.target.scrollIntoView({
-      behavior: "smooth",
-      block: "nearest",
-      inline: "center"
-    });
-  }
-  focusAdjacentTab(r) {
-    const t = this.getTabs(), a = t.findIndex((s) => s.ariaSelected === "true"), i = d(r ? a - 1 : a + 1, t.length);
-    t[i].focus();
-  }
-  getTabs() {
-    return Array.from(this.el.querySelectorAll('[role="tab"]'));
-  }
-  render() {
-    const r = n("tab-bar", `tab-bar--justify-${this.justify}`, {
-      "tab-bar--variant-pill": this.variant === "pill",
-      "tab-bar--variant-default": this.variant === "default"
-    }), t = {
-      paddingInlineEnd: Boolean(this.paddingInlineEnd) ? `var(--s-space-${this.paddingInlineEnd})` : void 0,
-      paddingInlineStart: Boolean(this.paddingInlineStart) ? `var(--s-space-${this.paddingInlineStart})` : void 0,
-      paddingBlockEnd: Boolean(this.paddingBlockEnd) ? `var(--s-space-${this.paddingBlockEnd})` : void 0,
-      paddingBlockStart: Boolean(this.paddingBlockStart) ? `var(--s-space-${this.paddingBlockStart})` : void 0
-    };
-    return e(o, { key: "a74a02669913990d439be0c10a1487a52bf3c423" }, e("div", { key: "380105cfde66b814a86038b66bc87a82dc06e020", "aria-label": this.label, class: r, onKeyDown: this.onKeyDown, role: this.disableTabSemantics ? void 0 : "tablist", style: t }, this.tabs.map((a) => {
-      const i = n("tab-bar__tab", {
-        "tab-bar__tab--active": a.active,
-        "tab-bar__tab--variant-pill": this.variant === "pill",
-        "tab-bar__tab--variant-default": this.variant === "default"
-      }), s = n("tab-bar__tab-label", {
-        "tab-bar__tab-label--variant-pill": this.variant === "pill"
-      });
-      return e("button", {
-        "aria-controls": this.disableTabSemantics ? void 0 : a.id,
-        "aria-selected": this.disableTabSemantics ? void 0 : a.active ? "true" : "false",
-        class: i,
-        id: `tab-${a.id}`,
-        key: a.id,
-        onClick: () => this.activateTab.emit(a.id),
-        onFocus: this.onTabFocus,
-        role: this.disableTabSemantics ? void 0 : "tab",
-        tabIndex: this.disableTabSemantics ? void 0 : a.active ? 0 : -1,
-        type: "button"
-      }, a.icon && e("span", { class: "tab-bar__tab-icon", innerHTML: a.icon }), e("span", { class: s }, a.label));
-    })));
-  }
-  get el() {
-    return c(this);
-  }
-};
-h.style = v;
-export {
-  h as swirl_tab_bar
-};

package/dist/swirl-tab.entry.37c03aa2.js

@@ -1,17 +0,0 @@
-import { r as a, h as t, H as e } from "./index.f1cef125.js";
-import { c as i } from "./index-orsBiyT_.fc4357c3.js";
-import "react";
-import "react-dom";
-const d = ":host{display:none;width:100%}:host(.tab--active){display:block}:host *{box-sizing:border-box}", r = class {
-  constructor(s) {
-    a(this, s), this.padding = "8";
-  }
-  render() {
-    const s = i("tab", { "tab--active": this.active });
-    return t(e, { key: "ce1a5476246b9d10568d76851423ad4dbc1eb469", "aria-labelledby": `tab-${this.tabId}`, id: this.tabId, role: "tabpanel", tabIndex: this.active ? 0 : -1, class: s, style: { padding: `var(--s-space-${this.padding})` } }, t("slot", { key: "5eee92ed98d7f7f80cf62dbf925312b5dd77388a" }));
-  }
-};
-r.style = d;
-export {
-  r as swirl_tab
-};

package/dist/swirl-visually-hidden.entry.e49ddf11.js

@@ -1,15 +0,0 @@
-import { r as s, h as e, H as r } from "./index.f1cef125.js";
-import "react";
-import "react-dom";
-const a = ".sc-swirl-visually-hidden-h{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)}", d = class {
-  constructor(i) {
-    s(this, i);
-  }
-  render() {
-    return e(r, { key: "3f001fa0d55275db749a4a2125b9b28bb88f434a" }, e("slot", { key: "e162e2eea285c9fa37b5391dbee7d2ecf1caa421" }));
-  }
-};
-d.style = a;
-export {
-  d as swirl_visually_hidden
-};