@orangelogic/design-system 2.60.0 → 2.61.0

package/library/chunks/color-swatch.Bpb_hW2H.js

@@ -0,0 +1,407 @@
+import v from "../components/copy-button.js";
+import f from "../components/line-clamp.js";
+import w from "../components/resize-observer.js";
+import b from "../components/space.js";
+import { C as _ } from "./typography.oDzoLbZS.js";
+import { n as a, C as k } from "./lib-cortex-element.CVMmyPMC.js";
+import { c as F } from "./component.styles.DMSLciL5.js";
+import { c as n, C as h, H as $, l as z } from "./color.vLD2sNTs.js";
+import { c as O } from "./custom-element.L4WJXn1j.js";
+import { d as W } from "./debounce.DaHuiSGU.js";
+import { L as A } from "./i18n.DrzK7TPf.js";
+import { w as i } from "./watch.q1sEjPWL.js";
+import { i as G, x as u } from "./lit-element.jLBm65_O.js";
+import { r as c } from "./state.CSDxrqLd.js";
+import { e as R } from "./query.BBf1UFkC.js";
+import { e as g } from "./class-map.BiVq-cVR.js";
+import { o as x } from "./if-defined.BRoBj_Rp.js";
+import { c as U } from "./repeat.DbF2p5ae.js";
+import { o as l } from "./style-map.llVFPd__.js";
+import { n as E } from "./when.Dr1es41R.js";
+var p = /* @__PURE__ */ ((o) => (o.Circle = "circle", o.GridItem = "grid-item", o.Oval = "oval", o))(p || {});
+const S = G`
+  :host {
+    display: block;
+  }
+
+  .color-swatch {
+    border: 1px solid var(--cx-color-neutral-200);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .color-swatch:focus-visible {
+    outline: var(--cx-focus-ring);
+    outline-offset: var(--cx-focus-ring-offset);
+  }
+
+  .color-swatch--circle {
+    aspect-ratio: 1 / 1;
+    height: auto;
+    width: var(--swatch-size, 350px);
+    min-width: var(--swatch-size, 230px);
+    max-width: 100%;
+    border-radius: var(--cx-border-radius-circle);
+  }
+
+  .color-swatch--oval {
+    height: var(--swatch-size, 350px);
+    width: 100%;
+    border-radius: calc(var(--swatch-size, 350px) / 2);
+  }
+
+  .color-swatch--grid {
+    width: 100%;
+    height: var(--swatch-size, 300px);
+    min-width: var(--swatch-grid-min-width, 165px);
+    border-radius: var(--cx-border-radius-x-large);
+  }
+
+  .color-swatch__content {
+    max-height: 100%;
+    padding: var(--swatch-content-padding, 0);
+    justify-content: space-between;
+    gap: var(--cx-spacing-medium);
+  }
+
+  .color-swatch--circle > .color-swatch__content {
+    max-width: 75%;
+    min-width: 50%;
+  }
+
+  .color-swatch--oval > .color-swatch__content {
+    max-width: 85%;
+  }
+
+  .color-swatch--grid > .color-swatch__content {
+    height: 100%;
+    width: 100%;
+    padding: var(--cx-spacing-large) var(--cx-spacing-medium);
+  }
+
+  .color-swatch__key::part(base) {
+    min-width: 50px;
+    height: 100%;
+    vertical-align: middle;
+  }
+
+  .color-swatch__key[variant='small']::part(base) {
+    display: inline-block;
+  }
+
+  .color-swatch__copy-button::part(button) {
+    min-height: fit-content;
+    height: fit-content;
+    border-width: 0 !important;
+    background: transparent !important;
+    padding: 0;
+  }
+
+  .color-swatch__copy-button::part(label) {
+    height: fit-content;
+    padding: 0;
+  }
+
+  .color-swatch__value {
+    text-transform: none;
+  }
+
+  .color-swatch__value::part(base) {
+    word-break: break-word;
+  }
+
+  .color-swatch__value-wrapper {
+    text-align: left;
+  }
+`;
+var V = Object.defineProperty, B = Object.getOwnPropertyDescriptor, e = (o, r, y, d) => {
+  for (var s = d > 1 ? void 0 : d ? B(r, y) : r, C = o.length - 1, m; C >= 0; C--)
+    (m = o[C]) && (s = (d ? m(r, y, s) : m(s)) || s);
+  return d && s && V(r, y, s), s;
+};
+let t = class extends k {
+  constructor() {
+    super(...arguments), this.localize = new A(this), this.ignoreWatchColorChange = /* @__PURE__ */ new Set(), this.variant = p.Circle, this.name = "", this.hex = "", this.rgb = "", this.cmyk = "", this.pms = "", this.canCopy = !1, this.showCodes = ["HEX", "RGB", "CMYK", "PMS"], this.canFocusCodeOnly = !1, this.noAutoConvert = !1, this.textColor = "#27272A", this.textVariant = "body2", this.lineClamp = 3, this.backgroundColor = "#F9F9F9", this.canFocusContainer = !0, this.isContainerFocused = !1;
+  }
+  runFirstUpdated() {
+    this.handleColorChange();
+  }
+  /**
+   * Change to default color
+   */
+  setDefaultColor() {
+    this.backgroundColor = "#F9F9F9", this.textColor = "#27272A";
+  }
+  handleResize() {
+    const o = this.containerEl.offsetWidth;
+    o > 315 || this.variant === "grid-item" ? (this.textVariant = "body2", this.rowGap = "x-small", this.lineClamp = 3) : o > 230 ? (this.textVariant = "body3", this.rowGap = "2x-small", this.lineClamp = 2) : (this.textVariant = "small", this.rowGap = "3x-small", this.lineClamp = 1);
+  }
+  handleVariantChange() {
+    this.containerEl && this.handleResize();
+  }
+  handleCmykChange() {
+    if (!this.noAutoConvert) {
+      if (this.ignoreWatchColorChange.has("cmyk") || this.cmyk === "" && !this.hasUpdated) {
+        this.ignoreWatchColorChange.delete("cmyk");
+        return;
+      }
+      this.ignoreWatchColorChange.add("hex"), this.ignoreWatchColorChange.add("rgb"), this.hex = n(this.cmyk, h.Hex), this.rgb = n(this.cmyk, h.Rgb);
+    }
+  }
+  handleRGBChange() {
+    if (!this.noAutoConvert) {
+      if (this.ignoreWatchColorChange.has("rgb") || this.rgb === "" && !this.hasUpdated) {
+        this.ignoreWatchColorChange.delete("rgb");
+        return;
+      }
+      this.ignoreWatchColorChange.add("hex"), this.ignoreWatchColorChange.add("cmyk"), this.hex = n(this.rgb, h.Hex), this.cmyk = n(this.rgb, h.Cmyk);
+    }
+  }
+  handleHexChange() {
+    if (!this.noAutoConvert) {
+      if (this.ignoreWatchColorChange.has("hex") || this.hex === "" && !this.hasUpdated) {
+        this.ignoreWatchColorChange.delete("hex");
+        return;
+      }
+      this.ignoreWatchColorChange.add("rgb"), this.ignoreWatchColorChange.add("cmyk"), this.rgb = n(this.hex, h.Rgb), this.cmyk = n(this.hex, h.Cmyk);
+    }
+  }
+  async handleColorChange() {
+    await this.updateComplete, this.hex && $.test(this.hex) ? (this.textColor = z(this.hex, "#27272A", "#F9F9F9"), this.backgroundColor = this.hex) : this.setDefaultColor();
+  }
+  handleCanFocusCodeOnlyChange() {
+    this.isContainerFocused || (this.canFocusContainer = !this.canFocusCodeOnly);
+  }
+  handleFocusIn() {
+    this.isContainerFocused = !0;
+  }
+  handleFocusOut() {
+    this.isContainerFocused = !1;
+  }
+  render() {
+    const o = [
+      { key: "HEX", value: this.hex },
+      { key: "RGB", value: this.rgb },
+      { key: "CMYK", value: this.cmyk },
+      { key: "PMS", value: this.pms }
+    ].filter((r) => this.showCodes.includes(r.key));
+    return u`
+      <cx-resize-observer @cx-resize=${this.handleResize}>
+        <div
+          part="base"
+          tabindex=${x(this.canFocusContainer ? "0" : void 0)}
+          class=${g({
+      "color-swatch": !0,
+      "color-swatch--circle": this.variant === p.Circle,
+      "color-swatch--grid": this.variant === p.GridItem,
+      "color-swatch--oval": this.variant === p.Oval
+    })}
+          style=${l({
+      backgroundColor: this.backgroundColor
+    })}
+          @focusin=${this.handleFocusIn}
+          @focusout=${this.handleFocusOut}
+        >
+          <cx-space
+            part="content"
+            direction="vertical"
+            class="color-swatch__content"
+          >
+            <cx-typography
+              variant="h5"
+              part="name"
+              style=${l({
+      "--color": this.textColor
+    })}
+            >
+              ${this.name}
+            </cx-typography>
+            <cx-space
+              direction="vertical"
+              spacing=${this.rowGap}
+              part="content"
+            >
+              ${U(
+      o,
+      (r) => r.key,
+      (r) => u`<cx-space
+                    direction="horizontal"
+                    align-items="center"
+                    spacing="small"
+                    part="item"
+                    wrap="nowrap"
+                  >
+                    <cx-typography
+                      variant=${this.textVariant}
+                      class="color-swatch__key"
+                      part="key"
+                      style=${l({
+        "--color": this.textColor
+      })}
+                    >
+                      ${r.key}
+                    </cx-typography>
+                    ${E(
+        this.canCopy && r.value !== "",
+        () => u`
+                        <cx-copy-button
+                          part="copy-button"
+                          tabindex=${x(
+          this.canFocusCodeOnly ? void 0 : "-1"
+        )}
+                          class="color-swatch__copy-button"
+                          copy-label=${this.localize.term("clickToCopy")}
+                          focus-copy-label=${this.localize.term(
+          "pressEnterOrCtrlCToCopy"
+        )}
+                          label=${`${r.key} ${r.value}`}
+                          no-icon
+                          value=${r.value}
+                        >
+                          <cx-line-clamp
+                            lines=${this.lineClamp}
+                            disabled-tooltip
+                            class=${g({
+          "color-swatch__value-wrapper": !0
+        })}
+                          >
+                            <cx-typography
+                              variant=${this.textVariant}
+                              style=${l({
+          "--color": this.textColor
+        })}
+                              class="color-swatch__value"
+                              part="value"
+                            >
+                              ${r.value}
+                            </cx-typography>
+                          </cx-line-clamp>
+                        </cx-copy-button>
+                      `,
+        () => u`
+                        <cx-line-clamp
+                          lines=${this.lineClamp}
+                          disabled-tooltip
+                          class="color-swatch__value-wrapper"
+                        >
+                          <cx-typography
+                            variant=${this.textVariant}
+                            style=${l({
+          "--color": this.textColor
+        })}
+                            class="color-swatch__value"
+                            part="value"
+                          >
+                            ${r.value}
+                          </cx-typography>
+                        </cx-line-clamp>
+                      `
+      )}
+                  </cx-space>`
+    )}
+            </cx-space>
+          </cx-space>
+        </div>
+      </cx-resize-observer>
+    `;
+  }
+};
+t.styles = [F, S];
+t.dependencies = {
+  "cx-copy-button": v,
+  "cx-line-clamp": f,
+  "cx-resize-observer": w,
+  "cx-space": b,
+  "cx-typography": _
+};
+e([
+  R(".color-swatch")
+], t.prototype, "containerEl", 2);
+e([
+  a({ reflect: !0, type: String })
+], t.prototype, "variant", 2);
+e([
+  a({ reflect: !0, type: String })
+], t.prototype, "name", 2);
+e([
+  a({ reflect: !0, type: String })
+], t.prototype, "hex", 2);
+e([
+  a({ reflect: !0, type: String })
+], t.prototype, "rgb", 2);
+e([
+  a({ reflect: !0, type: String })
+], t.prototype, "cmyk", 2);
+e([
+  a({ reflect: !0, type: String })
+], t.prototype, "pms", 2);
+e([
+  a({ attribute: "can-copy", reflect: !0, type: Boolean })
+], t.prototype, "canCopy", 2);
+e([
+  a({
+    attribute: "show-codes",
+    converter: {
+      fromAttribute: (o) => o?.split(" ") ?? [],
+      toAttribute: (o) => o.join(" ")
+    }
+  })
+], t.prototype, "showCodes", 2);
+e([
+  a({ attribute: "can-focus-code-only", reflect: !0, type: Boolean })
+], t.prototype, "canFocusCodeOnly", 2);
+e([
+  a({ attribute: "no-auto-convert", reflect: !0, type: Boolean })
+], t.prototype, "noAutoConvert", 2);
+e([
+  c()
+], t.prototype, "textColor", 2);
+e([
+  c()
+], t.prototype, "textVariant", 2);
+e([
+  c()
+], t.prototype, "rowGap", 2);
+e([
+  c()
+], t.prototype, "lineClamp", 2);
+e([
+  c()
+], t.prototype, "backgroundColor", 2);
+e([
+  c()
+], t.prototype, "canFocusContainer", 2);
+e([
+  c()
+], t.prototype, "isContainerFocused", 2);
+e([
+  W(50)
+], t.prototype, "handleResize", 1);
+e([
+  i("variant")
+], t.prototype, "handleVariantChange", 1);
+e([
+  i("cmyk")
+], t.prototype, "handleCmykChange", 1);
+e([
+  i("rgb")
+], t.prototype, "handleRGBChange", 1);
+e([
+  i("hex")
+], t.prototype, "handleHexChange", 1);
+e([
+  i("hex", { waitUntilFirstUpdate: !0 }),
+  i("rgb", { waitUntilFirstUpdate: !0 }),
+  i("cmyk", { waitUntilFirstUpdate: !0 })
+], t.prototype, "handleColorChange", 1);
+e([
+  i("canFocusCodeOnly", { waitUntilFirstUpdate: !0 })
+], t.prototype, "handleCanFocusCodeOnlyChange", 1);
+t = e([
+  O("cx-color-swatch")
+], t);
+export {
+  t as C,
+  p as a
+};

package/library/chunks/color.vLD2sNTs.js

@@ -0,0 +1,164 @@
+import { T as l } from "./index.C1chwzNp.js";
+var k = /* @__PURE__ */ ((r) => (r.Cmyk = "cmyk", r.Hex = "hex", r.Rgb = "rgb", r.Unknown = "unknown", r))(k || {});
+const p = /^#([0-9A-Fa-f]{3}){1,2}$/, $ = /^(\s*(25[0-5]|2[0-4]\d|1\d{2}|[1-9]?\d)\s*,){2}\s*(25[0-5]|2[0-4]\d|1\d{2}|[1-9]?\d)\s*$/, x = /^(\s*(100|[1-9]?\d)\s*,){3}\s*(100|[1-9]?\d)\s*$/, y = /^#(?:[0-9A-Fa-f]{3}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$/;
+function b(r) {
+  return p.test(r) ? "hex" : $.test(r) ? "rgb" : x.test(r) ? "cmyk" : "unknown";
+}
+function d(r, c, n) {
+  return "#" + [r, c, n].map((a) => a.toString(16).padStart(2, "0")).join("").toUpperCase();
+}
+function g(r) {
+  r = r.trim().replace(/^#/, ""), r.length === 8 && (r = r.slice(0, 6)), r.length === 3 && (r = r.split("").map((n) => n + n).join(""));
+  const c = parseInt(r, 16);
+  return {
+    b: c & 255,
+    g: c >> 8 & 255,
+    r: c >> 16 & 255
+  };
+}
+function h(r, c, n) {
+  const a = 1 - r / 255, t = 1 - c / 255, e = 1 - n / 255, s = Math.min(a, t, e);
+  return s === 1 ? { c: 0, k: 100, m: 0, y: 0 } : {
+    c: Math.round((a - s) / (1 - s) * 100),
+    k: Math.round(s * 100),
+    m: Math.round((t - s) / (1 - s) * 100),
+    y: Math.round((e - s) / (1 - s) * 100)
+  };
+}
+function m(r, c, n, a) {
+  const t = 255 * (1 - r / 100) * (1 - a / 100), e = 255 * (1 - c / 100) * (1 - a / 100), s = 255 * (1 - n / 100) * (1 - a / 100);
+  return { b: Math.round(s), g: Math.round(e), r: Math.round(t) };
+}
+function I(r) {
+  switch (r = r.trim(), b(r)) {
+    case "hex":
+      return { hex: r };
+    case "rgb": {
+      const n = r.split(",").map((a) => a.trim());
+      return {
+        blue: parseInt(n[2], 10),
+        green: parseInt(n[1], 10),
+        red: parseInt(n[0], 10)
+      };
+    }
+    case "cmyk": {
+      const n = r.split(",").map((a) => a.trim());
+      return {
+        c: parseInt(n[0], 10),
+        k: parseInt(n[3], 10),
+        m: parseInt(n[1], 10),
+        y: parseInt(n[2], 10)
+      };
+    }
+    default:
+      return {};
+  }
+}
+function C(r, c, n) {
+  const a = b(r), t = I(r);
+  let e = {};
+  if (a === "unknown")
+    return "";
+  if (a === c && !n)
+    return r;
+  switch (c) {
+    case "hex":
+      if (a === "rgb")
+        e.hex = d(t.red, t.green, t.blue);
+      else if (a === "cmyk") {
+        const s = m(t.c, t.m, t.y, t.k);
+        e.hex = d(s.r, s.g, s.b);
+      } else
+        e.hex = t.hex;
+      break;
+    case "rgb":
+      if (a === "hex") {
+        const s = g(t.hex);
+        e.red = s.r, e.green = s.g, e.blue = s.b;
+      } else if (a === "cmyk") {
+        const s = m(t.c, t.m, t.y, t.k);
+        e.red = s.r, e.green = s.g, e.blue = s.b;
+      } else
+        Object.assign(e, t);
+      break;
+    case "cmyk":
+      if (a === "rgb")
+        e = h(t.red, t.green, t.blue);
+      else if (a === "hex") {
+        const s = g(t.hex);
+        e = h(s.r, s.g, s.b);
+      } else
+        Object.assign(e, t);
+      break;
+    default:
+      return r;
+  }
+  return n ? n.replace(/\$\{(.*?)\}/g, (s, i) => i in e ? String(e[i]) : "") : c === "hex" ? e.hex : c === "rgb" ? `${e.red}, ${e.green}, ${e.blue}` : c === "cmyk" ? `${e.c}, ${e.m}, ${e.y}, ${e.k}` : r;
+}
+function E(r, c = "#000", n = "#FFF") {
+  if (!((u) => y.test(u))(r))
+    return r;
+  const { b: t, g: e, r: s } = g(r);
+  return 0.299 * s + 0.587 * e + 0.114 * t > 186 ? c : n;
+}
+function A(r) {
+  const c = "light-dark", n = r.toLowerCase().indexOf(c + "(");
+  if (n === -1)
+    return "";
+  const a = r.indexOf("(", n + c.length);
+  if (a === -1)
+    return "";
+  let t = 0, e = -1, s = -1;
+  for (let o = a; o < r.length; o++) {
+    const f = r[o];
+    if (f === "(") {
+      t++;
+      continue;
+    }
+    if (f === ")") {
+      if (t--, t === 0) {
+        s = o;
+        break;
+      }
+      continue;
+    }
+    f === "," && t === 1 && e === -1 && (e = o);
+  }
+  if (e === -1 || s === -1)
+    return "";
+  const i = r.slice(a + 1, e).trim(), u = r.slice(e + 1, s).trim();
+  return `${i} ${u}`;
+}
+function M(r, c) {
+  const n = new l(r), a = new l(c), t = n.isValid ? r : "transparent", e = a.isValid ? c : "transparent";
+  return `light-dark(${t}, ${e})`;
+}
+function _(r) {
+  const c = A(r);
+  if (!c)
+    return null;
+  const n = r.replace(/light-dark\([^()]*(?:\([^()]*\)[^()]*)*\)/i, "").trim();
+  return `${c} ${n}`;
+}
+function L(r) {
+  const c = r.match(/([a-zA-Z-]+\([^)]*\))/);
+  if (!c)
+    return "";
+  const n = c[1], a = n.replace(/^[a-zA-Z-]+\(|\)$/g, "").trim(), t = r.replace(n, "").trim(), e = a.replace(/,/g, "").trim();
+  return `${t} ${e}`;
+}
+export {
+  k as C,
+  p as H,
+  $ as R,
+  A as a,
+  L as b,
+  C as c,
+  x as d,
+  y as e,
+  b as f,
+  M as g,
+  I as h,
+  E as l,
+  _ as p
+};

package/library/chunks/{component.styles.CI-v8BZa.js → component.styles.DMSLciL5.js}

@@ -1,4 +1,4 @@
-import { i as t } from "./custom-element.vnXBMQxc.js";
+import { i as t } from "./lit-element.jLBm65_O.js";
 const o = t`
   :host {
     box-sizing: border-box;

package/library/chunks/{confirm-popover.D2TF1x6K.js → confirm-popover.C1uA36JR.js}

@@ -1,14 +1,16 @@
-import { C as _ } from "./button.CtCSNRB3.js";
-import { C as u, D as h } from "./dialog.B1TORO6S.js";
+import { C as _ } from "./button.P71VJ5xh.js";
+import { C as u, D as h } from "./dialog.C_75RVVz.js";
 import g from "../components/dropdown.js";
-import { C as x } from "./typography.BFpl0WMA.js";
-import { i as b, n as e, C as y, x as d, c as w } from "./custom-element.vnXBMQxc.js";
-import { c as $ } from "./component.styles.CI-v8BZa.js";
-import { L as z } from "./i18n.BP2FRO1v.js";
+import { C as x } from "./typography.oDzoLbZS.js";
+import { n as e, C as b } from "./lib-cortex-element.CVMmyPMC.js";
+import { c as y } from "./component.styles.DMSLciL5.js";
+import { c as w } from "./custom-element.L4WJXn1j.js";
+import { L as $ } from "./i18n.DrzK7TPf.js";
+import { i as z, x as d } from "./lit-element.jLBm65_O.js";
 import { e as m } from "./query.BBf1UFkC.js";
-import { e as a } from "./class-map.CoZTSvbM.js";
-var v = /* @__PURE__ */ ((t) => (t.Horizontal = "horizontal", t.HorizontalReverse = "horizontal-reverse", t.Vertical = "vertical", t.VerticalReverse = "vertical-reverse", t))(v || {}), f = /* @__PURE__ */ ((t) => (t.Center = "center", t.End = "end", t.Start = "start", t))(f || {});
-const S = b`
+import { e as a } from "./class-map.BiVq-cVR.js";
+var f = /* @__PURE__ */ ((t) => (t.Horizontal = "horizontal", t.HorizontalReverse = "horizontal-reverse", t.Vertical = "vertical", t.VerticalReverse = "vertical-reverse", t))(f || {}), v = /* @__PURE__ */ ((t) => (t.Center = "center", t.End = "end", t.Start = "start", t))(v || {});
+const S = z`
   .confirm-popover--dropdown .confirm-popover__dropdown-content {
     display: flex;
     flex-direction: column;
@@ -106,9 +108,9 @@ var D = Object.defineProperty, C = Object.getOwnPropertyDescriptor, r = (t, n, s
     (l = t[p]) && (i = (c ? l(n, s, i) : l(i)) || i);
   return c && i && D(n, s, i), i;
 };
-let o = class extends y {
+let o = class extends b {
   constructor() {
-    super(...arguments), this.localize = new z(this), this.message = "", this.disabled = !1, this.buttonsDirection = v.Horizontal, this.buttonsAlignment = f.End, this.dividerPosition = h.Header, this.dialogLabel = "", this.confirmText = "", this.cancelText = "", this.variant = "dropdown", this.boundary = document.body;
+    super(...arguments), this.localize = new $(this), this.message = "", this.disabled = !1, this.buttonsDirection = f.Horizontal, this.buttonsAlignment = v.End, this.dividerPosition = h.Header, this.dialogLabel = "", this.confirmText = "", this.cancelText = "", this.variant = "dropdown", this.boundary = document.body;
   }
   get open() {
     return this.variant === "dialog" ? this.dialog.open : this.dropdown.open;
@@ -234,7 +236,7 @@ let o = class extends y {
     return this.variant === "dialog" ? this.renderDialog() : this.renderDropdown();
   }
 };
-o.styles = [$, S];
+o.styles = [y, S];
 o.dependencies = {
   "cx-button": _,
   "cx-dialog": u,
@@ -282,5 +284,5 @@ o = r([
 ], o);
 export {
   o as C,
-  v as a
+  f as a
 };

package/library/chunks/{content-builder.WranV3P4.js → content-builder.Bf7kqzDI.js}

@@ -1,4 +1,4 @@
-import { c as t } from "./capitalize.CNStXZBq.js";
+import { c as t } from "./capitalize.WSkCXkNE.js";
 var n = /* @__PURE__ */ ((a) => (a.Desktop = "desktop", a.Mobile = "mobile", a.Tablet = "tablet", a))(n || {});
 const e = {
   canvasWidth: "",

package/library/chunks/converters.DkDtLstb.js

@@ -0,0 +1,11 @@
+const i = {
+  fromAttribute: (r) => r?.split(" ").map((t) => {
+    const e = Number.parseFloat(t);
+    if (!Number.isNaN(e))
+      return e;
+  }).filter((t) => t !== void 0) ?? [],
+  toAttribute: (r) => Array.isArray(r) ? r.join(" ").trim() : ""
+};
+export {
+  i as t
+};