@brytdesigns/web-component-parallax 1.2.20 → 3.0.0

package/dist/main/utils.js

@@ -1,46 +1,20 @@
+//#region src/utils.ts
 function normalizeTuple(range, max) {
-  if (max <= 1) {
-    throw new Error("The maximum value must be greater than 1.");
-  }
-  const [start, end] = range;
-  const normalizedStart = (start - 1) / (max - 1);
-  const normalizedEnd = (end - 1) / (max - 1);
-  return [normalizedStart, normalizedEnd];
+	if (max <= 1) throw new Error("The maximum value must be greater than 1.");
+	const [start, end] = range;
+	return [(start - 1) / (max - 1), (end - 1) / (max - 1)];
 }
-function isInRange({
-  range: [start, end],
-  value
-}) {
-  return start <= value && end >= value;
-}
-function getLastMatchingMediaQueryIndex(queries) {
-  let lastMatchIndex = -1;
-  for (let i = 0; i < queries.length; i++) {
-    const query = queries[i];
-    if (typeof query !== "string") continue;
-    if (window.matchMedia(query).matches) {
-      lastMatchIndex = i;
-    }
-  }
-  return lastMatchIndex;
+function isInRange({ range: [start, end], value }) {
+	return start <= value && end >= value;
 }
 function getActiveBreakpoints(queries) {
-  return queries.map((query) => window.matchMedia(query).matches);
+	return queries.map((query) => window.matchMedia(query).matches);
 }
 function getLastTruthyIndex(values) {
-  for (let i = values.length - 1; i >= 0; i--) {
-    if (values[i]) return i;
-  }
-  return -1;
-}
-function getLastValidValue(arr, index) {
-  if (arr[index] != null) return arr[index];
-  for (let i = index - 1; i >= 0; i--) {
-    if (arr[i] != null) return arr[i];
-  }
-  return null;
+	for (let i = values.length - 1; i >= 0; i--) if (values[i]) return i;
+	return -1;
 }
+//#endregion
+export { getActiveBreakpoints, getLastTruthyIndex, isInRange, normalizeTuple };
 
-export { getActiveBreakpoints, getLastMatchingMediaQueryIndex, getLastTruthyIndex, getLastValidValue, isInRange, normalizeTuple };
-//# sourceMappingURL=utils.js.map
 //# sourceMappingURL=utils.js.map

package/dist/main/utils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils.ts"],"names":[],"mappings":"AAAO,SAAS,cAAA,CAAe,OAAyB,GAAa,EAAA;AACnE,EAAA,IAAI,OAAO,CAAG,EAAA;AACZ,IAAM,MAAA,IAAI,MAAM,2CAA2C,CAAA;AAAA;AAG7D,EAAM,MAAA,CAAC,KAAO,EAAA,GAAG,CAAI,GAAA,KAAA;AACrB,EAAM,MAAA,eAAA,GAAA,CAAmB,KAAQ,GAAA,CAAA,KAAM,GAAM,GAAA,CAAA,CAAA;AAC7C,EAAM,MAAA,aAAA,GAAA,CAAiB,GAAM,GAAA,CAAA,KAAM,GAAM,GAAA,CAAA,CAAA;AAEzC,EAAO,OAAA,CAAC,iBAAiB,aAAa,CAAA;AACxC;AAEO,SAAS,SAAU,CAAA;AAAA,EACxB,KAAA,EAAO,CAAC,KAAA,EAAO,GAAG,CAAA;AAAA,EAClB;AACF,CAGG,EAAA;AACD,EAAO,OAAA,KAAA,IAAS,SAAS,GAAO,IAAA,KAAA;AAClC;AAEO,SAAS,+BAA+B,OAA2B,EAAA;AACxE,EAAA,IAAI,cAAiB,GAAA,EAAA;AAErB,EAAA,KAAA,IAAS,CAAI,GAAA,CAAA,EAAG,CAAI,GAAA,OAAA,CAAQ,QAAQ,CAAK,EAAA,EAAA;AACvC,IAAM,MAAA,KAAA,GAAQ,QAAQ,CAAC,CAAA;AACvB,IAAI,IAAA,OAAO,UAAU,QAAU,EAAA;AAC/B,IAAA,IAAI,MAAO,CAAA,UAAA,CAAW,KAAK,CAAA,CAAE,OAAS,EAAA;AACpC,MAAiB,cAAA,GAAA,CAAA;AAAA;AACnB;AAGF,EAAO,OAAA,cAAA;AACT;AAEO,SAAS,qBAAqB,OAA8B,EAAA;AACjE,EAAO,OAAA,OAAA,CAAQ,IAAI,CAAC,KAAA,KAAU,OAAO,UAAW,CAAA,KAAK,EAAE,OAAO,CAAA;AAChE;AAEO,SAAS,mBAAmB,MAA2B,EAAA;AAC5D,EAAA,KAAA,IAAS,IAAI,MAAO,CAAA,MAAA,GAAS,CAAG,EAAA,CAAA,IAAK,GAAG,CAAK,EAAA,EAAA;AAC3C,IAAI,IAAA,MAAA,CAAO,CAAC,CAAA,EAAU,OAAA,CAAA;AAAA;AAExB,EAAO,OAAA,EAAA;AACT;AACO,SAAS,iBAAA,CACd,KACA,KACU,EAAA;AACV,EAAA,IAAI,IAAI,KAAK,CAAA,IAAK,IAAM,EAAA,OAAO,IAAI,KAAK,CAAA;AAExC,EAAA,KAAA,IAAS,CAAI,GAAA,KAAA,GAAQ,CAAG,EAAA,CAAA,IAAK,GAAG,CAAK,EAAA,EAAA;AACnC,IAAA,IAAI,IAAI,CAAC,CAAA,IAAK,IAAM,EAAA,OAAO,IAAI,CAAC,CAAA;AAAA;AAGlC,EAAO,OAAA,IAAA;AACT","file":"utils.js","sourcesContent":["export function normalizeTuple(range: [number, number], max: number) {\n  if (max <= 1) {\n    throw new Error(\"The maximum value must be greater than 1.\");\n  }\n\n  const [start, end] = range;\n  const normalizedStart = (start - 1) / (max - 1);\n  const normalizedEnd = (end - 1) / (max - 1);\n\n  return [normalizedStart, normalizedEnd] as const;\n}\n\nexport function isInRange({\n  range: [start, end],\n  value,\n}: {\n  range: [number, number];\n  value: number;\n}) {\n  return start <= value && end >= value;\n}\n\nexport function getLastMatchingMediaQueryIndex(queries: string[]): number {\n  let lastMatchIndex = -1;\n\n  for (let i = 0; i < queries.length; i++) {\n    const query = queries[i];\n    if (typeof query !== \"string\") continue;\n    if (window.matchMedia(query).matches) {\n      lastMatchIndex = i;\n    }\n  }\n\n  return lastMatchIndex;\n}\n\nexport function getActiveBreakpoints(queries: string[]): boolean[] {\n  return queries.map((query) => window.matchMedia(query).matches);\n}\n\nexport function getLastTruthyIndex(values: boolean[]): number {\n  for (let i = values.length - 1; i >= 0; i--) {\n    if (values[i]) return i;\n  }\n  return -1;\n}\nexport function getLastValidValue<T>(\n  arr: (T | null)[],\n  index: number,\n): T | null {\n  if (arr[index] != null) return arr[index]!;\n\n  for (let i = index - 1; i >= 0; i--) {\n    if (arr[i] != null) return arr[i]!;\n  }\n\n  return null;\n}\n"]}
+{"version":3,"file":"utils.js","names":[],"sources":["../../src/utils.ts"],"sourcesContent":["export function normalizeTuple(range: [number, number], max: number) {\n\tif (max <= 1) {\n\t\tthrow new Error(\"The maximum value must be greater than 1.\");\n\t}\n\n\tconst [start, end] = range;\n\tconst normalizedStart = (start - 1) / (max - 1);\n\tconst normalizedEnd = (end - 1) / (max - 1);\n\n\treturn [normalizedStart, normalizedEnd] as const;\n}\n\nexport function isInRange({\n\trange: [start, end],\n\tvalue,\n}: {\n\trange: [number, number];\n\tvalue: number;\n}) {\n\treturn start <= value && end >= value;\n}\n\nexport function getLastMatchingMediaQueryIndex(queries: string[]): number {\n\tlet lastMatchIndex = -1;\n\n\tfor (let i = 0; i < queries.length; i++) {\n\t\tconst query = queries[i];\n\t\tif (typeof query !== \"string\") continue;\n\t\tif (window.matchMedia(query).matches) {\n\t\t\tlastMatchIndex = i;\n\t\t}\n\t}\n\n\treturn lastMatchIndex;\n}\n\nexport function getActiveBreakpoints(queries: string[]): boolean[] {\n\treturn queries.map((query) => window.matchMedia(query).matches);\n}\n\nexport function getLastTruthyIndex(values: boolean[]): number {\n\tfor (let i = values.length - 1; i >= 0; i--) {\n\t\tif (values[i]) return i;\n\t}\n\treturn -1;\n}\nexport function getLastValidValue<T>(\n\tarr: (T | null)[],\n\tindex: number,\n): T | null {\n\tif (arr[index] != null) return arr[index]!;\n\n\tfor (let i = index - 1; i >= 0; i--) {\n\t\tif (arr[i] != null) return arr[i]!;\n\t}\n\n\treturn null;\n}\n"],"mappings":";AAAA,SAAgB,eAAe,OAAyB,KAAa;CACpE,IAAI,OAAO,GACV,MAAM,IAAI,MAAM,2CAA2C;CAG5D,MAAM,CAAC,OAAO,OAAO;CAIrB,OAAO,EAHkB,QAAQ,MAAM,MAAM,KACtB,MAAM,MAAM,MAAM,EAEH;AACvC;AAEA,SAAgB,UAAU,EACzB,OAAO,CAAC,OAAO,MACf,SAIE;CACF,OAAO,SAAS,SAAS,OAAO;AACjC;AAgBA,SAAgB,qBAAqB,SAA8B;CAClE,OAAO,QAAQ,KAAK,UAAU,OAAO,WAAW,KAAK,CAAC,CAAC,OAAO;AAC/D;AAEA,SAAgB,mBAAmB,QAA2B;CAC7D,KAAK,IAAI,IAAI,OAAO,SAAS,GAAG,KAAK,GAAG,KACvC,IAAI,OAAO,IAAI,OAAO;CAEvB,OAAO;AACR"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brytdesigns/web-component-parallax",
-  "version": "1.2.20",
+  "version": "3.0.0",
   "description": "Headless parallax animation web component",
   "main": "./dist/main/index.js",
   "module": "./dist/main/index.js",
@@ -9,7 +9,7 @@
   "exports": {
     ".": {
       "types": "./dist/main/index.d.ts",
-      "module": "./dist/main/index.js"
+      "default": "./dist/main/index.js"
     }
   },
   "files": [
@@ -19,18 +19,17 @@
   "author": "Bryt Designs",
   "license": "ISC",
   "dependencies": {
+    "@brytdesigns/web-component-core": "3.0.0",
     "component-register": "0.8.7",
-    "motion": "^12.40.0",
-    "solid-element": "^1.9.1",
-    "solid-js": "^1.9.9",
-    "@brytdesigns/web-component-core": "1.1.7"
+    "motion": "^12.43.0",
+    "solid-js": "2.0.0-rc.14"
   },
   "devDependencies": {
-    "dts-bundle-generator": "^9.5.1",
-    "tsup": "^8.4.0"
+    "@repo/vite-config": "0.0.0",
+    "vite": "^8.2.2"
   },
   "scripts": {
-    "build": "tsup --clean",
+    "build": "vite build",
     "typecheck": "tsc --noEmit"
   }
 }

package/dist/esm/index.js

@@ -1,507 +0,0 @@
-import { createWithElementContext, customShadowlessElement, correctElementType, getContextFromProvider } from '@brytdesigns/web-component-core/utils';
-import { splitProps, createEffect, batch, onCleanup, mergeProps, createMemo } from 'solid-js';
-import { createStore } from 'solid-js/store';
-import { createContext, consume, provide } from 'component-register';
-import { motionValue, scroll, transformValue, transform, frame, animate, styleEffect } from 'motion';
-import { awaitAllAnimations } from '@brytdesigns/web-component-core/animation';
-import { abortablePromise } from '@brytdesigns/web-component-core/promise';
-
-var __defProp = Object.defineProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-
-// src/components/parallax-container/index.ts
-var parallax_container_exports = {};
-__export(parallax_container_exports, {
-  Component: () => Component,
-  Name: () => Name
-});
-function initializeParallaxContext(props) {
-  const [_internal, _state] = splitProps(props, ["root"]);
-  const scrollYProgress = motionValue(-1);
-  const scrollY = motionValue(-1);
-  const [info, setInfo] = createStore({
-    offset: [-1, -1],
-    scrollLength: -1
-  });
-  window.addEventListener("resize", () => {
-  });
-  createEffect(() => {
-    const pages = _state.maxPages;
-    _internal.root.style.height = `${pages * 100}vh`;
-    _internal.root.style.width = `100%`;
-    _internal.root.style.position = "relative";
-    if (!_internal.root.style.display) {
-      _internal.root.style.display = "block";
-    }
-    const remove = scroll(
-      (_, info2) => {
-        const { y } = info2;
-        scrollYProgress.set(y.progress);
-        scrollY.set(y.current);
-        batch(() => {
-          setInfo("offset", 0, y.offset?.at(0) || 0);
-          setInfo("offset", 1, y.offset?.at(1) || 0);
-          setInfo("scrollLength", y.scrollLength);
-        });
-      },
-      {
-        target: _internal.root,
-        axis: "y",
-        offset: ["start start", "end end"]
-      }
-    );
-    onCleanup(() => {
-      if (remove) {
-        remove();
-      }
-      scrollYProgress.destroy();
-      scrollY.destroy();
-    });
-  });
-  return mergeProps(_state, {
-    scrollYProgress,
-    scrollY,
-    info
-  });
-}
-var ParallaxContextState = createContext(initializeParallaxContext);
-var provideParallaxContext = (initialState, element) => {
-  const props = mergeProps(initialState, { root: element });
-  return provide(ParallaxContextState, props, element);
-};
-var useParallaxContext = (context) => {
-  return context;
-};
-var useParallax = (element) => {
-  const context = consume(ParallaxContextState, element);
-  if (!context) {
-    throw console.error(
-      "ParallaxContext not found! Please ensure to wrap your custom element with parallax-container element."
-    );
-  }
-  return useParallaxContext(context);
-};
-var withParallaxElementContext = createWithElementContext(ParallaxContextState);
-var getParallaxContext = (element) => {
-  const context = getContextFromProvider(
-    ParallaxContextState,
-    element
-  );
-  return useParallaxContext(context);
-};
-
-// src/utils.ts
-function normalizeTuple(range, max) {
-  if (max <= 1) {
-    throw new Error("The maximum value must be greater than 1.");
-  }
-  const [start, end] = range;
-  const normalizedStart = (start - 1) / (max - 1);
-  const normalizedEnd = (end - 1) / (max - 1);
-  return [normalizedStart, normalizedEnd];
-}
-function isInRange({
-  range: [start, end],
-  value
-}) {
-  return start <= value && end >= value;
-}
-function getActiveBreakpoints(queries) {
-  return queries.map((query) => window.matchMedia(query).matches);
-}
-function getLastTruthyIndex(values) {
-  for (let i = values.length - 1; i >= 0; i--) {
-    if (values[i]) return i;
-  }
-  return -1;
-}
-
-// src/hooks/useParallaxStickyLayer.ts
-function initializeParallaxStickyLayerContext(props) {
-  const [_internal, _state] = splitProps(props, ["root", "start", "end"]);
-  const parallax = useParallax(_internal.root);
-  const progress = motionValue(-1);
-  const inRange = motionValue(false);
-  const belowRange = motionValue(false);
-  const aboveRange = motionValue(false);
-  const position = transformValue(
-    () => inRange.get() ? "sticky" : "absolute"
-  );
-  const transform$1 = transformValue(() => {
-    const isInRange2 = inRange.get();
-    const isBelowRange = belowRange.get();
-    const isAboveRange = aboveRange.get();
-    if (isInRange2) return "none";
-    if (isBelowRange) return `translate(0px, ${(_internal.start - 1) * 100}vh)`;
-    if (isAboveRange) return `translate(0px, ${(_internal.end - 1) * 100}vh)`;
-  });
-  const animations = motionValue([]);
-  const styles = transformValue(() => ({
-    position: position.get(),
-    transform: transform$1.get()
-  }));
-  _internal.root.style.top = "0px";
-  _internal.root.style.right = "0px";
-  _internal.root.style.bottom = "0px";
-  _internal.root.style.left = "0px";
-  _internal.root.style.height = `100dvh`;
-  _internal.root.style.overflowX = "hidden";
-  _internal.root.style.maxWidth = "100%";
-  if (window.getComputedStyle(_internal.root).display === "inline") {
-    _internal.root.style.display = "block";
-  }
-  createEffect(() => {
-    const range = [_internal.start, _internal.end];
-    const maxPages = parallax.maxPages;
-    const normalizedRange = normalizeTuple(range, maxPages);
-    const [normStart, normEnd] = normalizedRange;
-    const transformer = transform(normalizedRange, [0, 1]);
-    const unsubscribe = parallax.scrollYProgress.on("change", (value) => {
-      inRange.set(isInRange({ range: normalizedRange, value }));
-      belowRange.set(value <= normStart);
-      aboveRange.set(value >= normEnd);
-      progress.set(transformer(value));
-    });
-    return onCleanup(() => {
-      unsubscribe();
-    });
-  });
-  function updateStyles() {
-    const s = styles.get();
-    _internal.root.style.position = s.position;
-    _internal.root.style.transform = s.transform;
-  }
-  function renderStyles() {
-    frame.render(updateStyles);
-  }
-  function waitForAnimations() {
-    const a = animations.get();
-    const controller = new AbortController();
-    abortablePromise(awaitAllAnimations(a), controller.signal).then(() => {
-      animations.set([]);
-      renderStyles();
-    });
-  }
-  const unsubStyles = styles.on("change", (_) => {
-    if (progress.get() === 1 || progress.get() === 0)
-      return waitForAnimations();
-    animations.set([]);
-    renderStyles();
-  });
-  function _animate(...args) {
-    const animation = animate(...args);
-    animations.set([...animations.get(), animation]);
-    return animation;
-  }
-  onCleanup(() => {
-    unsubStyles();
-  });
-  return [progress, { animate: _animate }];
-}
-var ParallaxStickyLayerContextState = createContext(
-  initializeParallaxStickyLayerContext
-);
-var provideParallaxStickyLayerContext = (initialState, element) => {
-  const props = mergeProps(initialState, { root: element });
-  return provide(ParallaxStickyLayerContextState, props, element);
-};
-var useParallaxStickyLayerContext = (context) => {
-  return context;
-};
-var useParallaxStickyLayer = (element) => {
-  const context = consume(
-    ParallaxStickyLayerContextState,
-    element
-  );
-  if (!context) {
-    throw console.error(
-      "ParallaxContext not found! Please ensure to wrap your custom element with parallax-container element."
-    );
-  }
-  return useParallaxStickyLayerContext(context);
-};
-var withParallaxStickyLayerContext = createWithElementContext(ParallaxStickyLayerContextState);
-var getParallaxStickyLayerContext = (element) => {
-  const context = getContextFromProvider(
-    ParallaxStickyLayerContextState,
-    element
-  );
-  return useParallaxStickyLayerContext(context);
-};
-
-// src/components/parallax-container/index.ts
-var Name = `parallax-container`;
-var Component = (props, { element }) => {
-  if (!props.maxPages)
-    return console.warn(
-      `${Name}: requires max-pages attribute to be set!`,
-      element
-    );
-  if (props.maxPages < 1)
-    return console.warn(
-      `${Name}: max-pages must be greater than or equal to 1!`,
-      element
-    );
-  provideParallaxContext(props, element);
-};
-
-// src/components/parallax-sticky-layer/index.ts
-var parallax_sticky_layer_exports = {};
-__export(parallax_sticky_layer_exports, {
-  Component: () => Component2,
-  Name: () => Name2
-});
-var Name2 = `parallax-sticky-layer`;
-var Component2 = (props, { element }) => {
-  if (!props.start)
-    return console.warn(
-      `${Name2}: requires start attribute to be set!`,
-      element
-    );
-  if (!props.end)
-    return console.warn(`${Name2}: requires end attribute to be set!`, element);
-  if (props.end <= props.start)
-    return console.warn(
-      `${Name2}: the start attribute must be less than the end attribute!`,
-      element
-    );
-  if (props.start < 1 || props.end < 1)
-    return console.warn(
-      `${Name2}: The start and end attributes must be greater than or equal to 1!`,
-      element
-    );
-  provideParallaxStickyLayerContext(props, element);
-};
-
-// src/components/parallax-animation/index.ts
-var parallax_animation_exports = {};
-__export(parallax_animation_exports, {
-  Component: () => Component3,
-  Name: () => Name3,
-  PROPS: () => PROPS
-});
-function keysFromObject(object) {
-  return Object.keys(object);
-}
-var Name3 = `parallax-animation`;
-var PROPS = {
-  breakpoints: [""],
-  range: [0, 1],
-  y: null,
-  x: null,
-  scale: null,
-  rotate: null,
-  opacity: null,
-  color: null,
-  backgroundColor: null,
-  borderRadius: null
-};
-var PROP_DEFAULTS = {
-  y: "0%",
-  x: "0%",
-  scale: 1,
-  rotate: 0,
-  opacity: null,
-  color: null,
-  backgroundColor: null,
-  borderRadius: null
-};
-var KEYS = Object.keys(PROPS);
-var isNestedAnimatableArray = (values) => {
-  return Array.isArray(values) && (Array.isArray(values[0]) || values[0] === null);
-};
-var flattenAnimatableArray = (value, index = 0) => {
-  if (isNestedAnimatableArray(value)) {
-    return value[index];
-  }
-  return value;
-};
-var Component3 = (props, { element }) => {
-  if (Object.keys(props).some(
-    (key) => KEYS.includes(key) && !Array.isArray(Reflect.get(props, key))
-  ))
-    return console.warn(
-      `parallax-animate: At least one of ${KEYS.join(",")} properties is required and must be an array of values!`,
-      element
-    );
-  const messages = Object.entries(props).reduce((messages2, [key, value]) => {
-    if (!KEYS.includes(key)) return messages2;
-    if (value && value.length !== props.range.length) {
-      return messages2.concat(
-        `${key} attribute must have the same length as range attribute!`
-      );
-    }
-    return messages2;
-  }, []);
-  if (messages.length)
-    return console.warn(
-      element,
-      `
-parallax-animate: Please fix the following issues:
-${messages.join("\n")}`
-    );
-  const [progress, { animate: animate2 }] = useParallaxStickyLayer(element);
-  const [activeBreakpoints, setActiveBreakpoints] = createStore(
-    getActiveBreakpoints(props.breakpoints)
-  );
-  const activeBreakpointIndex = createMemo(
-    () => getLastTruthyIndex(activeBreakpoints)
-  );
-  const [_, importantProps] = splitProps(props, ["breakpoints"]);
-  const animateableProps = mergeProps(importantProps, {});
-  const activeProps = createMemo(() => {
-    const index = activeBreakpointIndex();
-    if (index === -1) {
-      const { breakpoints, ...active2 } = PROPS;
-      return active2;
-    }
-    const keys = keysFromObject(animateableProps);
-    const active = keys.reduce((active2, key) => {
-      const value = animateableProps[key];
-      if (isNestedAnimatableArray(value)) {
-        const flattenedValue = flattenAnimatableArray(value, index);
-        return {
-          ...active2,
-          [key]: flattenedValue
-        };
-      }
-      return {
-        ...active2,
-        [key]: value
-      };
-    }, {});
-    return active;
-  });
-  createEffect(() => {
-    const breakpoints = props.breakpoints;
-    const controller = new AbortController();
-    for (let i = 0; i < breakpoints.length; i++) {
-      const query = breakpoints[i];
-      if (!query) continue;
-      const mediaQuery = window.matchMedia(query);
-      mediaQuery.addEventListener(
-        "change",
-        (e) => setActiveBreakpoints(i, e.matches),
-        { signal: controller.signal }
-      );
-    }
-    return onCleanup(() => {
-      controller.abort();
-    });
-  });
-  element.style.willChange = "transform";
-  if (window.getComputedStyle(element).getPropertyValue("display") === "inline") {
-    element.style.display = "block";
-  }
-  createEffect(() => {
-    const active = activeProps();
-    const { range, ...props2 } = active;
-    const valueSubscribers = [];
-    let disposed = false;
-    const progressValue = Object.keys(PROP_DEFAULTS).reduce(
-      (values, key) => {
-        const fallback = Reflect.get(PROP_DEFAULTS, key);
-        const valueRange = Reflect.get(props2, key);
-        if (valueRange?.length === range.length) {
-          const transform2 = transform(range, valueRange);
-          const value = motionValue(transform2(progress.get()));
-          const unsub2 = progress.on("change", (latest) => {
-            value.set(transform2(latest));
-          });
-          valueSubscribers.push(unsub2);
-          values[key] = value;
-        } else values[key] = fallback;
-        return values;
-      },
-      {}
-    );
-    const animated = Object.keys(progressValue).reduce(
-      (obj, key) => {
-        const v = progressValue[key];
-        Reflect.set(
-          obj,
-          key,
-          motionValue(typeof v === "object" && v !== null ? v.get() : v)
-        );
-        return obj;
-      },
-      {}
-    );
-    const transform$1 = transformValue(
-      () => `translate(${animated.x?.get()}, ${animated.y?.get()}) scale(${animated.scale?.get()}) rotate(${animated.rotate?.get()}deg)`
-    );
-    function animateValues() {
-      if (disposed) return;
-      const sequence = Object.keys(animated).map((key) => {
-        const subject = animated[key];
-        const v = progressValue[key]?.get?.();
-        if (!subject) return null;
-        if (typeof v === "undefined" || v === null) return null;
-        if (typeof v !== "string" && typeof v !== "number") return null;
-        return [animated[key], v, { at: "<" }];
-      }).filter((v) => v !== null);
-      if (sequence.length === 0) return;
-      animate2(sequence);
-    }
-    function scheduleAnimation() {
-      frame.update(animateValues);
-    }
-    const unsub = progress.on("change", (_2) => {
-      scheduleAnimation();
-    });
-    const styledValues = Object.keys(animated).filter(
-      (key) => key !== "y" && key !== "x" && key !== "rotate" && key !== "scale"
-    ).reduce((obj, key) => {
-      Reflect.set(obj, key, animated[key]);
-      return obj;
-    }, {});
-    const unstyle = styleEffect(element, {
-      transform: transform$1,
-      ...styledValues
-    });
-    return onCleanup(() => {
-      disposed = true;
-      unstyle();
-      unsub();
-      valueSubscribers.forEach((unsub2) => {
-        unsub2();
-      });
-      Object.values(animated).forEach((value) => {
-        value.destroy();
-      });
-      Object.values(progressValue).forEach((value) => {
-        value?.destroy?.();
-      });
-      transform$1.destroy();
-    });
-  });
-};
-
-// src/index.ts
-customShadowlessElement(
-  parallax_container_exports.Name,
-  {
-    maxPages: 2
-  },
-  correctElementType(parallax_container_exports.Component)
-);
-customShadowlessElement(
-  parallax_sticky_layer_exports.Name,
-  {
-    start: 1,
-    end: 2
-  },
-  correctElementType(parallax_sticky_layer_exports.Component)
-);
-customShadowlessElement(
-  parallax_animation_exports.Name,
-  parallax_animation_exports.PROPS,
-  correctElementType(parallax_animation_exports.Component)
-);
-
-export { getParallaxContext, getParallaxStickyLayerContext, useParallax, useParallaxStickyLayer, withParallaxElementContext, withParallaxStickyLayerContext };
-//# sourceMappingURL=index.js.map
-//# sourceMappingURL=index.js.map