@getflip/swirl-components-react 0.315.1 → 0.317.0

package/dist/{swirl-color-input.entry.f4a27634.js → swirl-color-input.entry.6522e539.js}

@@ -1,157 +1,157 @@
-import { r as L, c as f, h as l, H as B } from "./index.5e0cefe1.js";
+import { r as L, c as f, h as l, H as B } from "./index.5395ee70.js";
 import { c as T } from "./index-267776a4.6beb4f4b.js";
 import { v as z } from "./v4-23648a96.77c7c20f.js";
 import "react";
 import "react-dom";
-const d = (t, e = 0, o = 1) => t > o ? o : t < e ? e : t, s = (t, e = 0, o = Math.pow(10, e)) => Math.round(o * t) / o, F = (t) => O(v(t)), v = (t) => (t[0] === "#" && (t = t.substring(1)), t.length < 6 ? {
-  r: parseInt(t[0] + t[0], 16),
-  g: parseInt(t[1] + t[1], 16),
-  b: parseInt(t[2] + t[2], 16),
-  a: t.length === 4 ? s(parseInt(t[3] + t[3], 16) / 255, 2) : 1
+const d = (e, t = 0, o = 1) => e > o ? o : e < t ? t : e, s = (e, t = 0, o = Math.pow(10, t)) => Math.round(o * e) / o, F = (e) => O(v(e)), v = (e) => (e[0] === "#" && (e = e.substring(1)), e.length < 6 ? {
+  r: parseInt(e[0] + e[0], 16),
+  g: parseInt(e[1] + e[1], 16),
+  b: parseInt(e[2] + e[2], 16),
+  a: e.length === 4 ? s(parseInt(e[3] + e[3], 16) / 255, 2) : 1
 } : {
-  r: parseInt(t.substring(0, 2), 16),
-  g: parseInt(t.substring(2, 4), 16),
-  b: parseInt(t.substring(4, 6), 16),
-  a: t.length === 8 ? s(parseInt(t.substring(6, 8), 16) / 255, 2) : 1
-}), A = (t) => D(P(t)), q = ({ h: t, s: e, v: o, a: i }) => {
-  const r = (200 - e) * o / 100;
+  r: parseInt(e.substring(0, 2), 16),
+  g: parseInt(e.substring(2, 4), 16),
+  b: parseInt(e.substring(4, 6), 16),
+  a: e.length === 8 ? s(parseInt(e.substring(6, 8), 16) / 255, 2) : 1
+}), A = (e) => D(P(e)), q = ({ h: e, s: t, v: o, a: i }) => {
+  const r = (200 - t) * o / 100;
   return {
-    h: s(t),
-    s: s(r > 0 && r < 200 ? e * o / 100 / (r <= 100 ? r : 200 - r) * 100 : 0),
+    h: s(e),
+    s: s(r > 0 && r < 200 ? t * o / 100 / (r <= 100 ? r : 200 - r) * 100 : 0),
     l: s(r / 2),
     a: s(i, 2)
   };
-}, w = (t) => {
-  const { h: e, s: o, l: i } = q(t);
-  return `hsl(${e}, ${o}%, ${i}%)`;
-}, P = ({ h: t, s: e, v: o, a: i }) => {
-  t = t / 360 * 6, e = e / 100, o = o / 100;
-  const r = Math.floor(t), n = o * (1 - e), a = o * (1 - (t - r) * e), p = o * (1 - (1 - t + r) * e), b = r % 6;
+}, w = (e) => {
+  const { h: t, s: o, l: i } = q(e);
+  return `hsl(${t}, ${o}%, ${i}%)`;
+}, P = ({ h: e, s: t, v: o, a: i }) => {
+  e = e / 360 * 6, t = t / 100, o = o / 100;
+  const r = Math.floor(e), n = o * (1 - t), a = o * (1 - (e - r) * t), p = o * (1 - (1 - e + r) * t), b = r % 6;
   return {
     r: s([o, a, n, n, p, o][b] * 255),
     g: s([p, o, o, a, n, n][b] * 255),
     b: s([n, n, p, o, o, a][b] * 255),
     a: s(i, 2)
   };
-}, u = (t) => {
-  const e = t.toString(16);
-  return e.length < 2 ? "0" + e : e;
-}, D = ({ r: t, g: e, b: o, a: i }) => {
+}, u = (e) => {
+  const t = e.toString(16);
+  return t.length < 2 ? "0" + t : t;
+}, D = ({ r: e, g: t, b: o, a: i }) => {
   const r = i < 1 ? u(s(i * 255)) : "";
-  return "#" + u(t) + u(e) + u(o) + r;
-}, O = ({ r: t, g: e, b: o, a: i }) => {
-  const r = Math.max(t, e, o), n = r - Math.min(t, e, o), a = n ? r === t ? (e - o) / n : r === e ? 2 + (o - t) / n : 4 + (t - e) / n : 0;
+  return "#" + u(e) + u(t) + u(o) + r;
+}, O = ({ r: e, g: t, b: o, a: i }) => {
+  const r = Math.max(e, t, o), n = r - Math.min(e, t, o), a = n ? r === e ? (t - o) / n : r === t ? 2 + (o - e) / n : 4 + (e - t) / n : 0;
   return {
     h: s(60 * (a < 0 ? a + 6 : a)),
     s: s(r ? n / r * 100 : 0),
     v: s(r / 255 * 100),
     a: i
   };
-}, I = (t, e) => {
-  if (t === e)
+}, I = (e, t) => {
+  if (e === t)
     return !0;
-  for (const o in t)
-    if (t[o] !== e[o])
+  for (const o in e)
+    if (e[o] !== t[o])
       return !1;
   return !0;
-}, N = (t, e) => t.toLowerCase() === e.toLowerCase() ? !0 : I(v(t), v(e)), y = {}, M = (t) => {
-  let e = y[t];
-  return e || (e = document.createElement("template"), e.innerHTML = t, y[t] = e), e;
-}, x = (t, e, o) => {
-  t.dispatchEvent(new CustomEvent(e, {
+}, N = (e, t) => e.toLowerCase() === t.toLowerCase() ? !0 : I(v(e), v(t)), y = {}, M = (e) => {
+  let t = y[e];
+  return t || (t = document.createElement("template"), t.innerHTML = e, y[e] = t), t;
+}, x = (e, t, o) => {
+  e.dispatchEvent(new CustomEvent(t, {
     bubbles: !0,
     detail: o
   }));
 };
 let c = !1;
-const k = (t) => "touches" in t, R = (t) => c && !k(t) ? !1 : (c || (c = k(t)), !0), C = (t, e) => {
-  const o = k(e) ? e.touches[0] : e, i = t.el.getBoundingClientRect();
-  x(t.el, "move", t.getMove({
+const k = (e) => "touches" in e, R = (e) => c && !k(e) ? !1 : (c || (c = k(e)), !0), C = (e, t) => {
+  const o = k(t) ? t.touches[0] : t, i = e.el.getBoundingClientRect();
+  x(e.el, "move", e.getMove({
     x: d((o.pageX - (i.left + window.pageXOffset)) / i.width),
     y: d((o.pageY - (i.top + window.pageYOffset)) / i.height)
   }));
-}, V = (t, e) => {
-  const o = e.keyCode;
-  o > 40 || t.xy && o < 37 || o < 33 || (e.preventDefault(), x(t.el, "move", t.getMove({
+}, V = (e, t) => {
+  const o = t.keyCode;
+  o > 40 || e.xy && o < 37 || o < 33 || (t.preventDefault(), x(e.el, "move", e.getMove({
     x: o === 39 ? 0.01 : o === 37 ? -0.01 : o === 34 ? 0.05 : o === 33 ? -0.05 : o === 35 ? 1 : o === 36 ? -1 : 0,
     y: o === 40 ? 0.01 : o === 38 ? -0.01 : 0
   }, !0)));
 };
 class _ {
-  constructor(e, o, i, r) {
+  constructor(t, o, i, r) {
     const n = M(`<div role="slider" tabindex="0" part="${o}" ${i}><div part="${o}-pointer"></div></div>`);
-    e.appendChild(n.content.cloneNode(!0));
-    const a = e.querySelector(`[part=${o}]`);
+    t.appendChild(n.content.cloneNode(!0));
+    const a = t.querySelector(`[part=${o}]`);
     a.addEventListener("mousedown", this), a.addEventListener("touchstart", this), a.addEventListener("keydown", this), this.el = a, this.xy = r, this.nodes = [a.firstChild, a];
   }
-  set dragging(e) {
-    const o = e ? document.addEventListener : document.removeEventListener;
+  set dragging(t) {
+    const o = t ? document.addEventListener : document.removeEventListener;
     o(c ? "touchmove" : "mousemove", this), o(c ? "touchend" : "mouseup", this);
   }
-  handleEvent(e) {
-    switch (e.type) {
+  handleEvent(t) {
+    switch (t.type) {
       case "mousedown":
       case "touchstart":
-        if (e.preventDefault(), !R(e) || !c && e.button != 0)
+        if (t.preventDefault(), !R(t) || !c && t.button != 0)
           return;
-        this.el.focus(), C(this, e), this.dragging = !0;
+        this.el.focus(), C(this, t), this.dragging = !0;
         break;
       case "mousemove":
       case "touchmove":
-        e.preventDefault(), C(this, e);
+        t.preventDefault(), C(this, t);
         break;
       case "mouseup":
       case "touchend":
         this.dragging = !1;
         break;
       case "keydown":
-        V(this, e);
+        V(this, t);
         break;
     }
   }
-  style(e) {
-    e.forEach((o, i) => {
+  style(t) {
+    t.forEach((o, i) => {
       for (const r in o)
         this.nodes[i].style.setProperty(r, o[r]);
     });
   }
 }
 class j extends _ {
-  constructor(e) {
-    super(e, "hue", 'aria-label="Hue" aria-valuemin="0" aria-valuemax="360"', !1);
+  constructor(t) {
+    super(t, "hue", 'aria-label="Hue" aria-valuemin="0" aria-valuemax="360"', !1);
   }
-  update({ h: e }) {
-    this.h = e, this.style([
+  update({ h: t }) {
+    this.h = t, this.style([
       {
-        left: `${e / 360 * 100}%`,
-        color: w({ h: e, s: 100, v: 100, a: 1 })
+        left: `${t / 360 * 100}%`,
+        color: w({ h: t, s: 100, v: 100, a: 1 })
       }
-    ]), this.el.setAttribute("aria-valuenow", `${s(e)}`);
+    ]), this.el.setAttribute("aria-valuenow", `${s(t)}`);
   }
-  getMove(e, o) {
-    return { h: o ? d(this.h + e.x * 360, 0, 360) : 360 * e.x };
+  getMove(t, o) {
+    return { h: o ? d(this.h + t.x * 360, 0, 360) : 360 * t.x };
   }
 }
 class X extends _ {
-  constructor(e) {
-    super(e, "saturation", 'aria-label="Color"', !0);
+  constructor(t) {
+    super(t, "saturation", 'aria-label="Color"', !0);
   }
-  update(e) {
-    this.hsva = e, this.style([
+  update(t) {
+    this.hsva = t, this.style([
       {
-        top: `${100 - e.v}%`,
-        left: `${e.s}%`,
-        color: w(e)
+        top: `${100 - t.v}%`,
+        left: `${t.s}%`,
+        color: w(t)
       },
       {
-        "background-color": w({ h: e.h, s: 100, v: 100, a: 1 })
+        "background-color": w({ h: t.h, s: 100, v: 100, a: 1 })
       }
-    ]), this.el.setAttribute("aria-valuetext", `Saturation ${s(e.s)}%, Brightness ${s(e.v)}%`);
+    ]), this.el.setAttribute("aria-valuetext", `Saturation ${s(t.s)}%, Brightness ${s(t.v)}%`);
   }
-  getMove(e, o) {
+  getMove(t, o) {
     return {
-      s: o ? d(this.hsva.s + e.x * 100, 0, 100) : e.x * 100,
-      v: o ? d(this.hsva.v - e.y * 100, 0, 100) : Math.round(100 - e.y * 100)
+      s: o ? d(this.hsva.s + t.x * 100, 0, 100) : t.x * 100,
+      v: o ? d(this.hsva.v - t.y * 100, 0, 100) : Math.round(100 - t.y * 100)
     };
   }
 }
@@ -169,47 +169,47 @@ class K extends HTMLElement {
   get color() {
     return this[g];
   }
-  set color(e) {
-    if (!this[h](e)) {
-      const o = this.colorModel.toHsva(e);
-      this[m](o), this[g] = e;
+  set color(t) {
+    if (!this[h](t)) {
+      const o = this.colorModel.toHsva(t);
+      this[m](o), this[g] = t;
     }
   }
   constructor() {
     super();
-    const e = M(`<style>${this[E].join("")}</style>`), o = this.attachShadow({ mode: "open" });
-    o.appendChild(e.content.cloneNode(!0)), o.addEventListener("move", this), this[$] = this[H].map((i) => new i(o));
+    const t = M(`<style>${this[E].join("")}</style>`), o = this.attachShadow({ mode: "open" });
+    o.appendChild(t.content.cloneNode(!0)), o.addEventListener("move", this), this[$] = this[H].map((i) => new i(o));
   }
   connectedCallback() {
     if (this.hasOwnProperty("color")) {
-      const e = this.color;
-      delete this.color, this.color = e;
+      const t = this.color;
+      delete this.color, this.color = t;
     } else
       this.color || (this.color = this.colorModel.defaultColor);
   }
-  attributeChangedCallback(e, o, i) {
+  attributeChangedCallback(t, o, i) {
     const r = this.colorModel.fromAttr(i);
     this[h](r) || (this.color = r);
   }
-  handleEvent(e) {
-    const o = this[S], i = { ...o, ...e.detail };
+  handleEvent(t) {
+    const o = this[S], i = { ...o, ...t.detail };
     this[m](i);
     let r;
     !I(i, o) && !this[h](r = this.colorModel.fromHsva(i)) && (this[g] = r, x(this, "color-changed", { value: r }));
   }
-  [h](e) {
-    return this.color && this.colorModel.equal(e, this.color);
+  [h](t) {
+    return this.color && this.colorModel.equal(t, this.color);
   }
-  [m](e) {
-    this[S] = e, this[$].forEach((o) => o.update(e));
+  [m](t) {
+    this[S] = t, this[$].forEach((o) => o.update(t));
   }
 }
 const Q = {
   defaultColor: "#000",
   toHsva: F,
-  fromHsva: ({ h: t, s: e, v: o }) => A({ h: t, s: e, v: o, a: 1 }),
+  fromHsva: ({ h: e, s: t, v: o }) => A({ h: e, s: t, v: o, a: 1 }),
   equal: N,
-  fromAttr: (t) => t
+  fromAttr: (e) => e
 };
 class U extends K {
   get colorModel() {
@@ -219,19 +219,19 @@ class U extends K {
 class W extends U {
 }
 customElements.define("hex-color-picker", W);
-const Z = ".sc-swirl-color-input-h{display:block;width:100%}.sc-swirl-color-input-h *.sc-swirl-color-input{box-sizing:border-box}.color-input.sc-swirl-color-input{position:relative;display:flex;width:100%;align-items:center;color:var(--s-text-default);font:inherit;line-height:var(--s-line-height-sm);cursor:text}.color-input--inline.sc-swirl-color-input .color-input__preview-button.sc-swirl-color-input{width:1.5rem;height:1.5rem;margin-top:-0.125rem;margin-right:-0.25rem;margin-bottom:-0.125rem}.color-input__input.sc-swirl-color-input{display:inline-flex;width:100%;margin:0;padding:0;flex-grow:1;border:none;color:var(--s-text-default);background-color:transparent;font:inherit;font-size:var(--s-font-size-base);line-height:var(--s-line-height-base);caret-color:var(--s-border-highlight)}.color-input__input.sc-swirl-color-input:focus{outline:none}.color-input__input.sc-swirl-color-input:disabled{color:var(--s-text-disabled);background-color:transparent}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.color-input__input.sc-swirl-color-input{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.color-input__preview-button.sc-swirl-color-input{width:2.75rem;height:2.75rem;margin-top:-1.25rem;flex-shrink:0;border:0.0625rem solid var(--s-border-default);border-radius:var(--s-border-radius-s);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}", ee = Z, te = class {
-  constructor(t) {
-    L(this, t), this.inputBlur = f(this, "inputBlur", 7), this.inputFocus = f(this, "inputFocus", 7), this.valueChange = f(this, "valueChange", 7), this.pickerId = `color-picker-${z()}`, this.onPickerChange = (e) => {
-      this.value = e.detail.value;
-    }, this.onChange = (e) => {
-      const o = e.target;
+const Z = ".sc-swirl-color-input-h{display:block;width:100%}.sc-swirl-color-input-h *.sc-swirl-color-input{box-sizing:border-box}.color-input.sc-swirl-color-input{position:relative;display:flex;width:100%;align-items:center;color:var(--s-text-default);font:inherit;line-height:var(--s-line-height-sm);cursor:text}.color-input--inline.sc-swirl-color-input .color-input__preview-button.sc-swirl-color-input{width:1.5rem;height:1.5rem;margin-top:-0.125rem;margin-right:-0.25rem;margin-bottom:-0.125rem}.color-input__input.sc-swirl-color-input{display:inline-flex;width:100%;margin:0;padding:0;flex-grow:1;border:none;color:var(--s-text-default);background-color:transparent;font:inherit;font-size:var(--s-font-size-base);line-height:var(--s-line-height-base);caret-color:var(--s-border-highlight)}.color-input__input.sc-swirl-color-input:focus{outline:none}.color-input__input.sc-swirl-color-input:disabled{color:var(--s-text-disabled);background-color:transparent}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.color-input__input.sc-swirl-color-input{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.color-input__preview-button.sc-swirl-color-input{width:2.75rem;height:2.75rem;margin-top:-1.25rem;flex-shrink:0;border:0.0625rem solid var(--s-border-default);border-radius:var(--s-border-radius-s);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}", tt = Z, et = class {
+  constructor(e) {
+    L(this, e), this.inputBlur = f(this, "inputBlur", 7), this.inputFocus = f(this, "inputFocus", 7), this.valueChange = f(this, "valueChange", 7), this.pickerId = `color-picker-${z()}`, this.onPickerChange = (t) => {
+      this.value = t.detail.value;
+    }, this.onChange = (t) => {
+      const o = t.target;
       this.value = o.value;
-    }, this.onBlur = (e) => {
-      this.inputBlur.emit(e);
-    }, this.onFocus = (e) => {
-      this.inputFocus.emit(e), this.handleAutoSelect(e);
-    }, this.onInput = (e) => {
-      this.onChange(e);
+    }, this.onBlur = (t) => {
+      this.inputBlur.emit(t);
+    }, this.onFocus = (t) => {
+      this.inputFocus.emit(t), this.handleAutoSelect(t);
+    }, this.onInput = (t) => {
+      this.onChange(t);
     }, this.autoFocus = void 0, this.autoSelect = void 0, this.disabled = void 0, this.swirlAriaDescribedby = void 0, this.inline = void 0, this.invalid = void 0, this.pickerButtonLabel = "Open color picker", this.pickerLabel = "Color picker", this.placeholder = void 0, this.required = void 0, this.value = void 0;
   }
   componentDidLoad() {
@@ -240,22 +240,22 @@ const Z = ".sc-swirl-color-input-h{display:block;width:100%}.sc-swirl-color-inpu
     }), this.picker.addEventListener("color-changed", this.onPickerChange);
   }
   disconnectedCallback() {
-    var t;
-    (t = this.picker) == null || t.removeEventListener("color-changed", this.onPickerChange);
+    var e;
+    (e = this.picker) == null || e.removeEventListener("color-changed", this.onPickerChange);
   }
-  watchValue(t, e) {
-    t !== e && this.valueChange.emit(t);
+  watchValue(e, t) {
+    e !== t && this.valueChange.emit(e);
   }
-  handleAutoSelect(t) {
-    !this.autoSelect || t.target.select();
+  handleAutoSelect(e) {
+    !this.autoSelect || e.target.select();
   }
   render() {
-    const t = this.invalid === !0 || this.invalid === !1 ? String(this.invalid) : void 0, e = T("color-input", {
+    const e = this.invalid === !0 || this.invalid === !1 ? String(this.invalid) : void 0, t = T("color-input", {
       "color-input--inline": this.inline
     });
-    return l(B, { key: "9f9ed68a406c52c5343ada04b5ad200d111ad6f9" }, l("div", { key: "f79d171d0cc6313c2bd1e77c0b3c6e767d24eeeb", class: e }, l("input", { key: "f409125d5d6101de3cadca0062fbc237e8556b03", "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : void 0, "aria-invalid": t, autoFocus: this.autoFocus, class: "color-input__input", disabled: this.disabled, maxLength: 7, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, placeholder: this.placeholder, ref: (o) => this.inputEl = o, required: this.required, spellcheck: "false", type: "text", value: this.value }), l("swirl-popover-trigger", { key: "1eb1008ee3d0e7c3ac65a0bd0b35212635605205", swirlPopover: this.pickerId }, l("button", { key: "518e81d8dae3fb1e20a7d29bc8cea2c6fdb5167e", "aria-label": this.pickerButtonLabel, class: "color-input__preview-button", style: {
+    return l(B, { key: "ea86580e4084e0a511ab206034037b9a79cdd8ed" }, l("div", { key: "23c8c2a248e487325f51733a6d57f81896b8ff4a", class: t }, l("input", { key: "e2749d5da3fe3891b56e6e8ad9d48ae5128ade3b", "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : void 0, "aria-invalid": e, autoFocus: this.autoFocus, class: "color-input__input", disabled: this.disabled, maxLength: 7, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, placeholder: this.placeholder, ref: (o) => this.inputEl = o, required: this.required, spellcheck: "false", type: "text", value: this.value }), l("swirl-popover-trigger", { key: "82da56c15058870871d53d76c6c1f2618358e0a4", swirlPopover: this.pickerId }, l("button", { key: "74871e68e08c191409db7caf88bd511cc43517d8", "aria-label": this.pickerButtonLabel, class: "color-input__preview-button", style: {
       backgroundColor: this.disabled ? "var(--s-border-subdued)" : this.value
-    }, type: "button" })), l("swirl-popover", { key: "94b815f83ac58bc6e02f776fcf1066ee6a2a1c79", animation: "scale-in-y", id: this.pickerId, label: this.pickerLabel, placement: "bottom-end" }, l("swirl-box", { key: "885b083fa0db272624f58efad5c6371e873e22df", centerInline: !0, paddingBlockEnd: "8", paddingBlockStart: "8", paddingInlineEnd: "16", paddingInlineStart: "16" }, l("hex-color-picker", { key: "6c8ed809a24833e78249888b245c9ef0e5007900", color: this.value, ref: (o) => this.picker = o })))));
+    }, type: "button" })), l("swirl-popover", { key: "64a1ea8de315b717d8d9276b9db96e2398e4d30a", animation: "scale-in-y", id: this.pickerId, label: this.pickerLabel, placement: "bottom-end" }, l("swirl-box", { key: "137104c8282fc8d5c68842e1fb5d2557e90f9437", centerInline: !0, paddingBlockEnd: "8", paddingBlockStart: "8", paddingInlineEnd: "16", paddingInlineStart: "16" }, l("hex-color-picker", { key: "58b93d66d99cfe2aa045eea81d2993aafe0e4608", color: this.value, ref: (o) => this.picker = o })))));
   }
   static get watchers() {
     return {
@@ -263,7 +263,7 @@ const Z = ".sc-swirl-color-input-h{display:block;width:100%}.sc-swirl-color-inpu
     };
   }
 };
-te.style = ee;
+et.style = tt;
 export {
-  te as swirl_color_input
+  et as swirl_color_input
 };

package/dist/{swirl-columns.entry.a788bb83.js → swirl-columns.entry.0787e630.js}

@@ -1,4 +1,4 @@
-import { r as o, h as s, H as t } from "./index.5e0cefe1.js";
+import { r as o, h as s, H as t } from "./index.5395ee70.js";
 import "react";
 import "react-dom";
 const i = ":host{display:block}:host *{box-sizing:border-box}.columns{display:grid;width:100%}", r = i, d = class {