@fluidattacks/design 8.1.0 → 8.2.0

package/dist/node_modules/motion-dom/dist/es/projection/shared/stack.js

@@ -0,0 +1,53 @@
+import { addUniqueItem as a, removeItem as r } from "../../../../../motion-utils/dist/es/array.js";
+class h {
+  constructor() {
+    this.members = [];
+  }
+  add(e) {
+    a(this.members, e);
+    for (let t = this.members.length - 1; t >= 0; t--) {
+      const s = this.members[t];
+      if (s === e || s === this.lead || s === this.prevLead)
+        continue;
+      const i = s.instance;
+      (!i || i.isConnected === !1) && !s.snapshot && (r(this.members, s), s.unmount());
+    }
+    e.scheduleRender();
+  }
+  remove(e) {
+    if (r(this.members, e), e === this.prevLead && (this.prevLead = void 0), e === this.lead) {
+      const t = this.members[this.members.length - 1];
+      t && this.promote(t);
+    }
+  }
+  relegate(e) {
+    for (let t = this.members.indexOf(e) - 1; t >= 0; t--) {
+      const s = this.members[t];
+      if (s.isPresent !== !1 && s.instance?.isConnected !== !1)
+        return this.promote(s), !0;
+    }
+    return !1;
+  }
+  promote(e, t) {
+    const s = this.lead;
+    if (e !== s && (this.prevLead = s, this.lead = e, e.show(), s)) {
+      s.updateSnapshot(), e.scheduleRender();
+      const { layoutDependency: i } = s.options, { layoutDependency: n } = e.options;
+      (i === void 0 || i !== n) && (e.resumeFrom = s, t && (s.preserveOpacity = !0), s.snapshot && (e.snapshot = s.snapshot, e.snapshot.latestValues = s.animationValues || s.latestValues), e.root?.isUpdating && (e.isLayoutDirty = !0)), e.options.crossfade === !1 && s.hide();
+    }
+  }
+  exitAnimationComplete() {
+    this.members.forEach((e) => {
+      e.options.onExitComplete?.(), e.resumingFrom?.options.onExitComplete?.();
+    });
+  }
+  scheduleRender() {
+    this.members.forEach((e) => e.instance && e.scheduleRender(!1));
+  }
+  removeLeadSnapshot() {
+    this.lead?.snapshot && (this.lead.snapshot = void 0);
+  }
+}
+export {
+  h as NodeStack
+};

package/dist/node_modules/motion-dom/dist/es/projection/styles/scale-border-radius.js

@@ -0,0 +1,21 @@
+import { px as c } from "../../value/types/numbers/units.js";
+function e(r, n) {
+  return n.max === n.min ? 0 : r / (n.max - n.min) * 100;
+}
+const f = {
+  correct: (r, n) => {
+    if (!n.target)
+      return r;
+    if (typeof r == "string")
+      if (c.test(r))
+        r = parseFloat(r);
+      else
+        return r;
+    const o = e(r, n.target.x), t = e(r, n.target.y);
+    return `${o}% ${t}%`;
+  }
+};
+export {
+  f as correctBorderRadius,
+  e as pixelsToPercent
+};

package/dist/node_modules/motion-dom/dist/es/projection/styles/scale-box-shadow.js

@@ -0,0 +1,16 @@
+import { complex as f } from "../../value/types/complex/index.js";
+import { mixNumber as i } from "../../utils/mix/number.js";
+const y = {
+  correct: (e, { treeScale: c, projectionDelta: t }) => {
+    const a = e, o = f.parse(e);
+    if (o.length > 5)
+      return a;
+    const p = f.createTransformer(e), r = typeof o[0] != "number" ? 1 : 0, n = t.x.scale * c.x, m = t.y.scale * c.y;
+    o[0 + r] /= n, o[1 + r] /= m;
+    const s = i(n, m, 0.5);
+    return typeof o[2 + r] == "number" && (o[2 + r] /= s), typeof o[3 + r] == "number" && (o[3 + r] /= s), p(o);
+  }
+};
+export {
+  y as correctBoxShadow
+};

package/dist/node_modules/motion-dom/dist/es/projection/styles/scale-correction.js

@@ -0,0 +1,21 @@
+import { correctBorderRadius as o } from "./scale-border-radius.js";
+import { correctBoxShadow as r } from "./scale-box-shadow.js";
+const e = {
+  borderRadius: {
+    ...o,
+    applyTo: [
+      "borderTopLeftRadius",
+      "borderTopRightRadius",
+      "borderBottomLeftRadius",
+      "borderBottomRightRadius"
+    ]
+  },
+  borderTopLeftRadius: o,
+  borderTopRightRadius: o,
+  borderBottomLeftRadius: o,
+  borderBottomRightRadius: o,
+  boxShadow: r
+};
+export {
+  e as scaleCorrectors
+};

package/dist/node_modules/motion-dom/dist/es/projection/styles/transform.js

@@ -0,0 +1,13 @@
+function X(o, n, s) {
+  let t = "";
+  const e = o.x.translate / n.x, i = o.y.translate / n.y, a = s?.z || 0;
+  if ((e || i || a) && (t = `translate3d(${e}px, ${i}px, ${a}px) `), (n.x !== 1 || n.y !== 1) && (t += `scale(${1 / n.x}, ${1 / n.y}) `), s) {
+    const { transformPerspective: f, rotate: x, pathRotation: c, rotateX: p, rotateY: y, skewX: g, skewY: d } = s;
+    f && (t = `perspective(${f}px) ${t}`), x && (t += `rotate(${x}deg) `), c && (t += `rotate(${c}deg) `), p && (t += `rotateX(${p}deg) `), y && (t += `rotateY(${y}deg) `), g && (t += `skewX(${g}deg) `), d && (t += `skewY(${d}deg) `);
+  }
+  const $ = o.x.scale * n.x, r = o.y.scale * n.y;
+  return ($ !== 1 || r !== 1) && (t += `scale(${$}, ${r})`), t || "none";
+}
+export {
+  X as buildProjectionTransform
+};

package/dist/node_modules/motion-dom/dist/es/projection/utils/compare-by-depth.js

@@ -0,0 +1,4 @@
+const t = (e, p) => e.depth - p.depth;
+export {
+  t as compareByDepth
+};

package/dist/node_modules/motion-dom/dist/es/projection/utils/each-axis.js

@@ -0,0 +1,6 @@
+function n(e) {
+  return [e("x"), e("y")];
+}
+export {
+  n as eachAxis
+};

package/dist/node_modules/motion-dom/dist/es/projection/utils/flat-tree.js

@@ -0,0 +1,19 @@
+import { compareByDepth as t } from "./compare-by-depth.js";
+import { addUniqueItem as r, removeItem as e } from "../../../../../motion-utils/dist/es/array.js";
+class c {
+  constructor() {
+    this.children = [], this.isDirty = !1;
+  }
+  add(i) {
+    r(this.children, i), this.isDirty = !0;
+  }
+  remove(i) {
+    e(this.children, i), this.isDirty = !0;
+  }
+  forEach(i) {
+    this.isDirty && this.children.sort(t), this.isDirty = !1, this.children.forEach(i);
+  }
+}
+export {
+  c as FlatTree
+};

package/dist/node_modules/motion-dom/dist/es/projection/utils/has-transform.js

@@ -0,0 +1,20 @@
+function t(n) {
+  return n === void 0 || n === 1;
+}
+function e({ scale: n, scaleX: o, scaleY: i }) {
+  return !t(n) || !t(o) || !t(i);
+}
+function c(n) {
+  return e(n) || f(n) || n.z || n.rotate || n.rotateX || n.rotateY || n.skewX || n.skewY;
+}
+function f(n) {
+  return r(n.x) || r(n.y);
+}
+function r(n) {
+  return n && n !== "0%";
+}
+export {
+  f as has2DTranslate,
+  e as hasScale,
+  c as hasTransform
+};

package/dist/node_modules/motion-dom/dist/es/projection/utils/measure.js

@@ -0,0 +1,13 @@
+import { convertBoundingBoxToBox as s, transformBoxPoints as f } from "../geometry/conversion.js";
+import { translateAxis as n } from "../geometry/delta-apply.js";
+function x(o, t) {
+  return s(f(o.getBoundingClientRect(), t));
+}
+function c(o, t, i) {
+  const r = x(o, i), { scroll: e } = t;
+  return e && (n(r.x, e.offset.x), n(r.y, e.offset.y)), r;
+}
+export {
+  c as measurePageBox,
+  x as measureViewportBox
+};

package/dist/node_modules/motion-dom/dist/es/render/Feature.js

@@ -0,0 +1,10 @@
+class s {
+  constructor(t) {
+    this.isMounted = !1, this.node = t;
+  }
+  update() {
+  }
+}
+export {
+  s as Feature
+};

package/dist/node_modules/motion-dom/dist/es/render/VisualElement.js

@@ -0,0 +1,263 @@
+import { KeyframeResolver as M } from "../animation/keyframes/KeyframesResolver.js";
+import { NativeAnimation as S } from "../animation/NativeAnimation.js";
+import { acceleratedValues as b } from "../animation/waapi/utils/accelerated-values.js";
+import { microtask as T } from "../frameloop/microtask.js";
+import { time as w } from "../frameloop/sync-time.js";
+import { createBox as P } from "../projection/geometry/models.js";
+import { motionValue as F } from "../value/index.js";
+import { complex as A } from "../value/types/complex/index.js";
+import { getAnimatableNone as B } from "../value/types/utils/animatable-none.js";
+import { findValueType as R } from "../value/types/utils/find.js";
+import { isMotionValue as u } from "../value/utils/is-motion-value.js";
+import { visualElementStore as N } from "./store.js";
+import { isControllingVariants as E, isVariantNode as x } from "./utils/is-controlling-variants.js";
+import { transformProps as j } from "./utils/keys-transform.js";
+import { updateMotionValuesFromProps as y } from "./utils/motion-values.js";
+import { initPrefersReducedMotion as I } from "./utils/reduced-motion/index.js";
+import { resolveVariantFromProps as D } from "./utils/resolve-variants.js";
+import { hasReducedMotionListener as L, prefersReducedMotion as U } from "./utils/reduced-motion/state.js";
+import { frame as v, cancelFrame as g } from "../frameloop/frame.js";
+import { warnOnce as O } from "../../../../motion-utils/dist/es/warn-once.js";
+import { secondsToMilliseconds as _ } from "../../../../motion-utils/dist/es/time-conversion.js";
+import { isNumericalString as H } from "../../../../motion-utils/dist/es/is-numerical-string.js";
+import { isZeroValueString as K } from "../../../../motion-utils/dist/es/is-zero-value-string.js";
+import { SubscriptionManager as Y } from "../../../../motion-utils/dist/es/subscription-manager.js";
+const C = [
+  "AnimationStart",
+  "AnimationComplete",
+  "Update",
+  "BeforeLayoutMeasure",
+  "LayoutMeasure",
+  "LayoutAnimationStart",
+  "LayoutAnimationComplete"
+];
+let l = {};
+function ft(m) {
+  l = m;
+}
+function mt() {
+  return l;
+}
+class Vt {
+  /**
+   * This method takes React props and returns found MotionValues. For example, HTML
+   * MotionValues will be found within the style prop, whereas for Three.js within attribute arrays.
+   *
+   * This isn't an abstract method as it needs calling in the constructor, but it is
+   * intended to be one.
+   */
+  scrapeMotionValuesFromProps(t, e, i) {
+    return {};
+  }
+  constructor({ parent: t, props: e, presenceContext: i, reducedMotionConfig: s, skipAnimations: n, blockInitialAnimation: r, visualState: d }, p = {}) {
+    this.current = null, this.children = /* @__PURE__ */ new Set(), this.isVariantNode = !1, this.isControllingVariants = !1, this.shouldReduceMotion = null, this.shouldSkipAnimations = !1, this.values = /* @__PURE__ */ new Map(), this.KeyframeResolver = M, this.features = {}, this.valueSubscriptions = /* @__PURE__ */ new Map(), this.prevMotionValues = {}, this.hasBeenMounted = !1, this.events = {}, this.propEventSubscriptions = {}, this.notifyUpdate = () => this.notify("Update", this.latestValues), this.render = () => {
+      this.current && (this.triggerBuild(), this.renderInstance(this.current, this.renderState, this.props.style, this.projection));
+    }, this.renderScheduledAt = 0, this.scheduleRender = () => {
+      const a = w.now();
+      this.renderScheduledAt < a && (this.renderScheduledAt = a, v.render(this.render, !1, !0));
+    };
+    const { latestValues: o, renderState: c } = d;
+    this.latestValues = o, this.baseTarget = { ...o }, this.initialValues = e.initial ? { ...o } : {}, this.renderState = c, this.parent = t, this.props = e, this.presenceContext = i, this.depth = t ? t.depth + 1 : 0, this.reducedMotionConfig = s, this.skipAnimationsConfig = n, this.options = p, this.blockInitialAnimation = !!r, this.isControllingVariants = E(e), this.isVariantNode = x(e), this.isVariantNode && (this.variantChildren = /* @__PURE__ */ new Set()), this.manuallyAnimateOnMount = !!(t && t.current);
+    const { willChange: f, ...h } = this.scrapeMotionValuesFromProps(e, {}, this);
+    for (const a in h) {
+      const V = h[a];
+      o[a] !== void 0 && u(V) && V.set(o[a]);
+    }
+  }
+  mount(t) {
+    if (this.hasBeenMounted)
+      for (const e in this.initialValues)
+        this.values.get(e)?.jump(this.initialValues[e]), this.latestValues[e] = this.initialValues[e];
+    this.current = t, N.set(t, this), this.projection && !this.projection.instance && this.projection.mount(t), this.parent && this.isVariantNode && !this.isControllingVariants && (this.removeFromVariantTree = this.parent.addVariantChild(this)), this.values.forEach((e, i) => this.bindToMotionValue(i, e)), this.reducedMotionConfig === "never" ? this.shouldReduceMotion = !1 : this.reducedMotionConfig === "always" ? this.shouldReduceMotion = !0 : (L.current || I(), this.shouldReduceMotion = U.current), process.env.NODE_ENV !== "production" && O(this.shouldReduceMotion !== !0, "You have Reduced Motion enabled on your device. Animations may not appear as expected.", "reduced-motion-disabled"), this.shouldSkipAnimations = this.skipAnimationsConfig ?? !1, this.parent?.addChild(this), this.update(this.props, this.presenceContext), this.hasBeenMounted = !0;
+  }
+  unmount() {
+    this.projection && this.projection.unmount(), g(this.notifyUpdate), g(this.render), this.valueSubscriptions.forEach((t) => t()), this.valueSubscriptions.clear(), this.removeFromVariantTree && this.removeFromVariantTree(), this.parent?.removeChild(this);
+    for (const t in this.events)
+      this.events[t].clear();
+    for (const t in this.features) {
+      const e = this.features[t];
+      e && (e.unmount(), e.isMounted = !1);
+    }
+    this.current = null;
+  }
+  addChild(t) {
+    this.children.add(t), this.enteringChildren ?? (this.enteringChildren = /* @__PURE__ */ new Set()), this.enteringChildren.add(t);
+  }
+  removeChild(t) {
+    this.children.delete(t), this.enteringChildren && this.enteringChildren.delete(t);
+  }
+  bindToMotionValue(t, e) {
+    if (this.valueSubscriptions.has(t) && this.valueSubscriptions.get(t)(), e.accelerate && b.has(t) && this.current instanceof HTMLElement) {
+      const { factory: r, keyframes: d, times: p, ease: o, duration: c } = e.accelerate, f = new S({
+        element: this.current,
+        name: t,
+        keyframes: d,
+        times: p,
+        ease: o,
+        duration: _(c)
+      }), h = r(f);
+      this.valueSubscriptions.set(t, () => {
+        h(), f.cancel();
+      });
+      return;
+    }
+    const i = j.has(t);
+    i && this.onBindTransform && this.onBindTransform();
+    const s = e.on("change", (r) => {
+      this.latestValues[t] = r, this.props.onUpdate && v.preRender(this.notifyUpdate), i && this.projection && (this.projection.isTransformDirty = !0), this.scheduleRender();
+    });
+    let n;
+    typeof window < "u" && window.MotionCheckAppearSync && (n = window.MotionCheckAppearSync(this, t, e)), this.valueSubscriptions.set(t, () => {
+      s(), n && n();
+    });
+  }
+  sortNodePosition(t) {
+    return !this.current || !this.sortInstanceNodePosition || this.type !== t.type ? 0 : this.sortInstanceNodePosition(this.current, t.current);
+  }
+  updateFeatures() {
+    let t = "animation";
+    for (t in l) {
+      const e = l[t];
+      if (!e)
+        continue;
+      const { isEnabled: i, Feature: s } = e;
+      if (!this.features[t] && s && i(this.props) && (this.features[t] = new s(this)), this.features[t]) {
+        const n = this.features[t];
+        n.isMounted ? n.update() : (n.mount(), n.isMounted = !0);
+      }
+    }
+  }
+  triggerBuild() {
+    this.build(this.renderState, this.latestValues, this.props);
+  }
+  /**
+   * Measure the current viewport box with or without transforms.
+   * Only measures axis-aligned boxes, rotate and skew must be manually
+   * removed with a re-render to work.
+   */
+  measureViewportBox() {
+    return this.current ? this.measureInstanceViewportBox(this.current, this.props) : P();
+  }
+  getStaticValue(t) {
+    return this.latestValues[t];
+  }
+  setStaticValue(t, e) {
+    this.latestValues[t] = e;
+  }
+  /**
+   * Update the provided props. Ensure any newly-added motion values are
+   * added to our map, old ones removed, and listeners updated.
+   */
+  update(t, e) {
+    (t.transformTemplate || this.props.transformTemplate) && this.scheduleRender(), this.prevProps = this.props, this.props = t, this.prevPresenceContext = this.presenceContext, this.presenceContext = e;
+    for (let i = 0; i < C.length; i++) {
+      const s = C[i];
+      this.propEventSubscriptions[s] && (this.propEventSubscriptions[s](), delete this.propEventSubscriptions[s]);
+      const n = "on" + s, r = t[n];
+      r && (this.propEventSubscriptions[s] = this.on(s, r));
+    }
+    this.prevMotionValues = y(this, this.scrapeMotionValuesFromProps(t, this.prevProps || {}, this), this.prevMotionValues), this.handleChildMotionValue && this.handleChildMotionValue();
+  }
+  getProps() {
+    return this.props;
+  }
+  /**
+   * Returns the variant definition with a given name.
+   */
+  getVariant(t) {
+    return this.props.variants ? this.props.variants[t] : void 0;
+  }
+  /**
+   * Returns the defined default transition on this component.
+   */
+  getDefaultTransition() {
+    return this.props.transition;
+  }
+  getTransformPagePoint() {
+    return this.props.transformPagePoint;
+  }
+  getClosestVariantNode() {
+    return this.isVariantNode ? this : this.parent ? this.parent.getClosestVariantNode() : void 0;
+  }
+  /**
+   * Add a child visual element to our set of children.
+   */
+  addVariantChild(t) {
+    const e = this.getClosestVariantNode();
+    if (e)
+      return e.variantChildren && e.variantChildren.add(t), () => e.variantChildren.delete(t);
+  }
+  /**
+   * Add a motion value and bind it to this visual element.
+   */
+  addValue(t, e) {
+    const i = this.values.get(t);
+    e !== i && (i && this.removeValue(t), this.bindToMotionValue(t, e), this.values.set(t, e), this.latestValues[t] = e.get());
+  }
+  /**
+   * Remove a motion value and unbind any active subscriptions.
+   */
+  removeValue(t) {
+    this.values.delete(t);
+    const e = this.valueSubscriptions.get(t);
+    e && (e(), this.valueSubscriptions.delete(t)), delete this.latestValues[t], this.removeValueFromRenderState(t, this.renderState);
+  }
+  /**
+   * Check whether we have a motion value for this key
+   */
+  hasValue(t) {
+    return this.values.has(t);
+  }
+  getValue(t, e) {
+    if (this.props.values && this.props.values[t])
+      return this.props.values[t];
+    let i = this.values.get(t);
+    return i === void 0 && e !== void 0 && (i = F(e === null ? void 0 : e, { owner: this }), this.addValue(t, i)), i;
+  }
+  /**
+   * If we're trying to animate to a previously unencountered value,
+   * we need to check for it in our state and as a last resort read it
+   * directly from the instance (which might have performance implications).
+   */
+  readValue(t, e) {
+    let i = this.latestValues[t] !== void 0 || !this.current ? this.latestValues[t] : this.getBaseTargetFromProps(this.props, t) ?? this.readValueFromInstance(this.current, t, this.options);
+    return i != null && (typeof i == "string" && (H(i) || K(i)) ? i = parseFloat(i) : !R(i) && A.test(e) && (i = B(t, e)), this.setBaseTarget(t, u(i) ? i.get() : i)), u(i) ? i.get() : i;
+  }
+  /**
+   * Set the base target to later animate back to. This is currently
+   * only hydrated on creation and when we first read a value.
+   */
+  setBaseTarget(t, e) {
+    this.baseTarget[t] = e;
+  }
+  /**
+   * Find the base target for a value thats been removed from all animation
+   * props.
+   */
+  getBaseTarget(t) {
+    const { initial: e } = this.props;
+    let i;
+    if (typeof e == "string" || typeof e == "object") {
+      const n = D(this.props, e, this.presenceContext?.custom);
+      n && (i = n[t]);
+    }
+    if (e && i !== void 0)
+      return i;
+    const s = this.getBaseTargetFromProps(this.props, t);
+    return s !== void 0 && !u(s) ? s : this.initialValues[t] !== void 0 && i === void 0 ? void 0 : this.baseTarget[t];
+  }
+  on(t, e) {
+    return this.events[t] || (this.events[t] = new Y()), this.events[t].add(e);
+  }
+  notify(t, ...e) {
+    this.events[t] && this.events[t].notify(...e);
+  }
+  scheduleRenderMicrotask() {
+    T.render(this.render);
+  }
+}
+export {
+  Vt as VisualElement,
+  mt as getFeatureDefinitions,
+  ft as setFeatureDefinitions
+};

package/dist/node_modules/motion-dom/dist/es/render/dom/DOMVisualElement.js

@@ -0,0 +1,28 @@
+import { isMotionValue as r } from "../../value/utils/is-motion-value.js";
+import { DOMKeyframesResolver as o } from "../../animation/keyframes/DOMKeyframesResolver.js";
+import { VisualElement as s } from "../VisualElement.js";
+class a extends s {
+  constructor() {
+    super(...arguments), this.KeyframeResolver = o;
+  }
+  sortInstanceNodePosition(e, t) {
+    return e.compareDocumentPosition(t) & 2 ? 1 : -1;
+  }
+  getBaseTargetFromProps(e, t) {
+    const i = e.style;
+    return i ? i[t] : void 0;
+  }
+  removeValueFromRenderState(e, { vars: t, style: i }) {
+    delete t[e], delete i[e];
+  }
+  handleChildMotionValue() {
+    this.childSubscription && (this.childSubscription(), delete this.childSubscription);
+    const { children: e } = this.props;
+    r(e) && (this.childSubscription = e.on("change", (t) => {
+      this.current && (this.current.textContent = `${t}`);
+    }));
+  }
+}
+export {
+  a as DOMVisualElement
+};

package/dist/node_modules/motion-dom/dist/es/render/dom/is-css-var.js

@@ -0,0 +1,4 @@
+const s = (t) => t.startsWith("--");
+export {
+  s as isCSSVar
+};

package/dist/node_modules/motion-dom/dist/es/render/dom/parse-transform.js

@@ -0,0 +1,65 @@
+const e = (t) => t * 180 / Math.PI, c = (t) => {
+  const a = e(Math.atan2(t[1], t[0]));
+  return l(a);
+}, f = {
+  x: 4,
+  y: 5,
+  translateX: 4,
+  translateY: 5,
+  scaleX: 0,
+  scaleY: 3,
+  scale: (t) => (Math.abs(t[0]) + Math.abs(t[3])) / 2,
+  rotate: c,
+  rotateZ: c,
+  skewX: (t) => e(Math.atan(t[1])),
+  skewY: (t) => e(Math.atan(t[2])),
+  skew: (t) => (Math.abs(t[1]) + Math.abs(t[2])) / 2
+}, l = (t) => (t = t % 360, t < 0 && (t += 360), t), h = c, M = (t) => Math.sqrt(t[0] * t[0] + t[1] * t[1]), i = (t) => Math.sqrt(t[4] * t[4] + t[5] * t[5]), x = {
+  x: 12,
+  y: 13,
+  z: 14,
+  translateX: 12,
+  translateY: 13,
+  translateZ: 14,
+  scaleX: M,
+  scaleY: i,
+  scale: (t) => (M(t) + i(t)) / 2,
+  rotateX: (t) => l(e(Math.atan2(t[6], t[5]))),
+  rotateY: (t) => l(e(Math.atan2(-t[2], t[0]))),
+  rotateZ: h,
+  rotate: h,
+  skewX: (t) => e(Math.atan(t[4])),
+  skewY: (t) => e(Math.atan(t[1])),
+  skew: (t) => (Math.abs(t[1]) + Math.abs(t[4])) / 2
+};
+function m(t) {
+  return t.includes("scale") ? 1 : 0;
+}
+function b(t, a) {
+  if (!t || t === "none")
+    return m(a);
+  const s = t.match(/^matrix3d\(([-\d.e\s,]+)\)$/u);
+  let n, r;
+  if (s)
+    n = x, r = s;
+  else {
+    const d = t.match(/^matrix\(([-\d.e\s,]+)\)$/u);
+    n = f, r = d;
+  }
+  if (!r)
+    return m(a);
+  const o = n[a], u = r[1].split(",").map(p);
+  return typeof o == "function" ? o(u) : u[o];
+}
+const X = (t, a) => {
+  const { transform: s = "none" } = getComputedStyle(t);
+  return b(s, a);
+};
+function p(t) {
+  return parseFloat(t.trim());
+}
+export {
+  m as defaultTransformValue,
+  b as parseValueFromTransform,
+  X as readTransformValue
+};

package/dist/node_modules/motion-dom/dist/es/render/dom/style-set.js

@@ -0,0 +1,7 @@
+import { isCSSVar as s } from "./is-css-var.js";
+function i(r, t, o) {
+  s(t) ? r.style.setProperty(t, o) : r.style[t] = o;
+}
+export {
+  i as setStyle
+};

package/dist/node_modules/motion-dom/dist/es/render/dom/utils/camel-to-dash.js

@@ -0,0 +1,6 @@
+function r(e) {
+  return e.replace(/([A-Z])/g, (o) => `-${o.toLowerCase()}`);
+}
+export {
+  r as camelToDash
+};

package/dist/node_modules/motion-dom/dist/es/render/html/HTMLVisualElement.js

@@ -0,0 +1,37 @@
+import { isCSSVariableName as s } from "../../animation/utils/is-css-variable.js";
+import { transformProps as n } from "../utils/keys-transform.js";
+import { defaultTransformValue as a, readTransformValue as i } from "../dom/parse-transform.js";
+import { measureViewportBox as u } from "../../projection/utils/measure.js";
+import { DOMVisualElement as p } from "../dom/DOMVisualElement.js";
+import { buildHTMLStyles as l } from "./utils/build-styles.js";
+import { renderHTML as f } from "./utils/render.js";
+import { scrapeMotionValuesFromProps as c } from "./utils/scrape-motion-values.js";
+function d(m) {
+  return window.getComputedStyle(m);
+}
+class x extends p {
+  constructor() {
+    super(...arguments), this.type = "html", this.renderInstance = f;
+  }
+  readValueFromInstance(e, r) {
+    if (n.has(r))
+      return this.projection?.isProjecting ? a(r) : i(e, r);
+    {
+      const t = d(e), o = (s(r) ? t.getPropertyValue(r) : t[r]) || 0;
+      return typeof o == "string" ? o.trim() : o;
+    }
+  }
+  measureInstanceViewportBox(e, { transformPagePoint: r }) {
+    return u(e, r);
+  }
+  build(e, r, t) {
+    l(e, r, t.transformTemplate);
+  }
+  scrapeMotionValuesFromProps(e, r, t) {
+    return c(e, r, t);
+  }
+}
+export {
+  x as HTMLVisualElement,
+  d as getComputedStyle
+};

package/dist/node_modules/motion-dom/dist/es/render/html/utils/build-styles.js

@@ -0,0 +1,29 @@
+import { getValueAsType as p } from "../../../value/types/utils/get-as-type.js";
+import { numberValueTypes as u } from "../../../value/types/maps/number.js";
+import { transformProps as c } from "../../utils/keys-transform.js";
+import { isCSSVariableName as g } from "../../../animation/utils/is-css-variable.js";
+import { buildTransform as y } from "./build-transform.js";
+function S(f, i, e) {
+  const { style: o, vars: l, transformOrigin: t } = f;
+  let m = !1, a = !1;
+  for (const r in i) {
+    const n = i[r];
+    if (c.has(r)) {
+      m = !0;
+      continue;
+    } else if (g(r)) {
+      l[r] = n;
+      continue;
+    } else {
+      const s = p(n, u[r]);
+      r.startsWith("origin") ? (a = !0, t[r] = s) : o[r] = s;
+    }
+  }
+  if (i.transform || (m || e ? o.transform = y(i, f.transform, e) : o.transform && (o.transform = "none")), a) {
+    const { originX: r = "50%", originY: n = "50%", originZ: s = 0 } = t;
+    o.transformOrigin = `${r} ${n} ${s}`;
+  }
+}
+export {
+  S as buildHTMLStyles
+};