@wix/motion 1.0.73 → 1.572.0

package/dist/cjs/library/entrance/ArcIn.js

@@ -0,0 +1,110 @@
+"use strict";
+
+exports.__esModule = true;
+exports.getNames = getNames;
+exports.prepare = prepare;
+exports.style = style;
+exports.web = web;
+var _utils = require("../../utils");
+const ROTATION_ANGLE = 80;
+const DIRECTION_MAP = {
+  top: {
+    x: 1,
+    y: 0,
+    sign: 1
+  },
+  right: {
+    x: 0,
+    y: 1,
+    sign: 1
+  },
+  bottom: {
+    x: 1,
+    y: 0,
+    sign: -1
+  },
+  left: {
+    x: 0,
+    y: 1,
+    sign: -1
+  }
+};
+const EASING_MAP = {
+  soft: 'cubicInOut',
+  medium: 'quintInOut',
+  hard: 'backOut'
+};
+function web(options, dom) {
+  prepare(options, dom);
+  return style(options, true);
+}
+function getNames(_) {
+  return ['motion-fadeIn', 'motion-arcIn'];
+}
+function style(options, asWeb = false) {
+  const {
+    power,
+    direction = 'right'
+  } = options.namedEffect;
+  const [fadeIn, arcIn] = getNames(options);
+  const easing = power && EASING_MAP[power] || options.easing || 'quintInOut';
+
+  // we can remove dependency on measurement here if we use a "layout wrapper" as a `container`: https://jsbin.com/mulojuwogi/edit?css,output
+  // we could also consider a fixed value for z, e.g. 300px like in ArcScroll
+  // const { width, height } = element.getBoundingClientRect();
+
+  const {
+    x,
+    y,
+    sign
+  } = DIRECTION_MAP[direction];
+  // const z = rotateX ? height / 2 : width / 2;
+  const z = `(-1 * (var(--motion-height, 100vh) * var(--motion-arc-x, 1) + var(--motion-width, 100vw) * var(--motion-arc-y, 0))) / 2`;
+  const custom = {
+    '--motion-arc-x': `${x}`,
+    '--motion-arc-y': `${y}`,
+    '--motion-arc-sign': `${sign}`
+  };
+  return [{
+    ...options,
+    name: fadeIn,
+    duration: options.duration * 0.7,
+    easing: 'sineIn',
+    custom: {},
+    keyframes: [{
+      offset: 0,
+      opacity: 0
+    }, {
+      opacity: 'var(--comp-opacity, 1)'
+    }]
+  }, {
+    ...options,
+    name: arcIn,
+    easing,
+    custom,
+    keyframes: [{
+      offset: _utils.INITIAL_FRAME_OFFSET,
+      transform: `perspective(800px) translateZ(calc(${z})) rotateX(calc(${(0, _utils.toKeyframeValue)(custom, '--motion-arc-x', asWeb)} * ${(0, _utils.toKeyframeValue)(custom, '--motion-arc-sign', asWeb)} * ${ROTATION_ANGLE}deg)) rotateY(calc(${(0, _utils.toKeyframeValue)(custom, '--motion-arc-y', asWeb)} * ${(0, _utils.toKeyframeValue)(custom, '--motion-arc-sign', asWeb)} * ${ROTATION_ANGLE}deg)) translateZ(calc(-1 * ${z})) rotate(var(--comp-rotate-z, 0deg))`
+    }, {
+      transform: `perspective(800px) translateZ(calc(${z})) rotateX(0deg) rotateY(0deg) translateZ(calc(-1 * ${z})) rotate(var(--comp-rotate-z, 0deg))`
+    }]
+  }];
+}
+function prepare(_, dom) {
+  if (dom) {
+    let width, height;
+    dom.measure(target => {
+      if (!target) {
+        return;
+      }
+      const rect = target.getBoundingClientRect();
+      width = rect.width;
+      height = rect.height;
+    });
+    dom.mutate(target => {
+      target == null || target.style.setProperty('--motion-height', `${height}px`);
+      target == null || target.style.setProperty('--motion-width', `${width}px`);
+    });
+  }
+}
+//# sourceMappingURL=ArcIn.js.map

package/dist/cjs/library/entrance/ArcIn.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_utils","require","ROTATION_ANGLE","DIRECTION_MAP","top","x","y","sign","right","bottom","left","EASING_MAP","soft","medium","hard","web","options","dom","prepare","style","getNames","_","asWeb","power","direction","namedEffect","fadeIn","arcIn","easing","z","custom","name","duration","keyframes","offset","opacity","INITIAL_FRAME_OFFSET","transform","toKeyframeValue","width","height","measure","target","rect","getBoundingClientRect","mutate","setProperty"],"sources":["../../../../src/library/entrance/ArcIn.ts"],"sourcesContent":["import type {\n  ArcIn,\n  TimeAnimationOptions,\n  EffectFourDirections,\n  DomApi,\n} from '../../types';\nimport { INITIAL_FRAME_OFFSET, toKeyframeValue } from '../../utils';\n\nconst ROTATION_ANGLE = 80;\nconst DIRECTION_MAP: Record<\n  EffectFourDirections,\n  { x: number; y: number; sign: number }\n> = {\n  top: { x: 1, y: 0, sign: 1 },\n  right: { x: 0, y: 1, sign: 1 },\n  bottom: { x: 1, y: 0, sign: -1 },\n  left: { x: 0, y: 1, sign: -1 },\n};\n\nconst EASING_MAP = {\n  soft: 'cubicInOut',\n  medium: 'quintInOut',\n  hard: 'backOut',\n};\n\nexport function web(options: TimeAnimationOptions, dom?: DomApi) {\n  prepare(options, dom);\n\n  return style(options, true);\n}\n\nexport function getNames(_: TimeAnimationOptions) {\n  return ['motion-fadeIn', 'motion-arcIn'];\n}\n\nexport function style(options: TimeAnimationOptions, asWeb = false) {\n  const { power, direction = 'right' } = options.namedEffect as ArcIn;\n  const [fadeIn, arcIn] = getNames(options);\n\n  const easing = (power && EASING_MAP[power]) || options.easing || 'quintInOut';\n\n  // we can remove dependency on measurement here if we use a \"layout wrapper\" as a `container`: https://jsbin.com/mulojuwogi/edit?css,output\n  // we could also consider a fixed value for z, e.g. 300px like in ArcScroll\n  // const { width, height } = element.getBoundingClientRect();\n\n  const { x, y, sign } = DIRECTION_MAP[direction];\n  // const z = rotateX ? height / 2 : width / 2;\n  const z = `(-1 * (var(--motion-height, 100vh) * var(--motion-arc-x, 1) + var(--motion-width, 100vw) * var(--motion-arc-y, 0))) / 2`;\n\n  const custom = {\n    '--motion-arc-x': `${x}`,\n    '--motion-arc-y': `${y}`,\n    '--motion-arc-sign': `${sign}`,\n  };\n\n  return [\n    {\n      ...options,\n      name: fadeIn,\n      duration: options.duration! * 0.7,\n      easing: 'sineIn',\n      custom: {},\n      keyframes: [\n        { offset: 0, opacity: 0 },\n        { opacity: 'var(--comp-opacity, 1)' },\n      ],\n    },\n    {\n      ...options,\n      name: arcIn,\n      easing,\n      custom,\n      keyframes: [\n        {\n          offset: INITIAL_FRAME_OFFSET,\n          transform: `perspective(800px) translateZ(calc(${z})) rotateX(calc(${toKeyframeValue(\n            custom,\n            '--motion-arc-x',\n            asWeb,\n          )} * ${toKeyframeValue(\n            custom,\n            '--motion-arc-sign',\n            asWeb,\n          )} * ${ROTATION_ANGLE}deg)) rotateY(calc(${toKeyframeValue(\n            custom,\n            '--motion-arc-y',\n            asWeb,\n          )} * ${toKeyframeValue(\n            custom,\n            '--motion-arc-sign',\n            asWeb,\n          )} * ${ROTATION_ANGLE}deg)) translateZ(calc(-1 * ${z})) rotate(var(--comp-rotate-z, 0deg))`,\n        },\n        {\n          transform: `perspective(800px) translateZ(calc(${z})) rotateX(0deg) rotateY(0deg) translateZ(calc(-1 * ${z})) rotate(var(--comp-rotate-z, 0deg))`,\n        },\n      ],\n    },\n  ];\n}\n\nexport function prepare(_: TimeAnimationOptions, dom?: DomApi) {\n  if (dom) {\n    let width: number, height: number;\n\n    dom.measure((target) => {\n      if (!target) {\n        return;\n      }\n\n      const rect = target.getBoundingClientRect();\n      width = rect.width;\n      height = rect.height;\n    });\n\n    dom.mutate((target) => {\n      target?.style.setProperty('--motion-height', `${height}px`);\n      target?.style.setProperty('--motion-width', `${width}px`);\n    });\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/library/entrance/BlurIn.js

@@ -0,0 +1,56 @@
+"use strict";
+
+exports.__esModule = true;
+exports.getNames = getNames;
+exports.style = style;
+exports.web = web;
+var _utils = require("../../utils");
+const BLUR_POWER_MAP = {
+  soft: 6,
+  medium: 25,
+  hard: 50
+};
+function getNames(_) {
+  return ['motion-fadeIn', 'motion-blurIn'];
+}
+function web(options) {
+  return style(options, true);
+}
+function style(options, asWeb = false) {
+  const {
+    blur = 6,
+    power
+  } = options.namedEffect;
+  const [fadeIn, blurIn] = getNames(options);
+  const easing = options.easing || 'linear';
+  const blurFactor = power && BLUR_POWER_MAP[power] ? BLUR_POWER_MAP[power] : blur;
+  const custom = {
+    '--motion-blur': `${blurFactor}px`
+  };
+  return [{
+    ...options,
+    name: fadeIn,
+    duration: options.duration * 0.7,
+    easing: 'sineIn',
+    custom: {},
+    keyframes: [{
+      offset: 0,
+      opacity: 0
+    }, {
+      opacity: 'var(--comp-opacity, 1)'
+    }]
+  }, {
+    ...options,
+    name: blurIn,
+    easing,
+    composite: 'add',
+    // make sure we don't override existing filters on the component
+    custom,
+    keyframes: [{
+      filter: `blur(${(0, _utils.toKeyframeValue)(custom, '--motion-blur', asWeb)})`
+    }, {
+      filter: 'blur(0px)'
+    }]
+  }];
+}
+//# sourceMappingURL=BlurIn.js.map

package/dist/cjs/library/entrance/BlurIn.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_utils","require","BLUR_POWER_MAP","soft","medium","hard","getNames","_","web","options","style","asWeb","blur","power","namedEffect","fadeIn","blurIn","easing","blurFactor","custom","name","duration","keyframes","offset","opacity","composite","filter","toKeyframeValue"],"sources":["../../../../src/library/entrance/BlurIn.ts"],"sourcesContent":["import type { BlurIn, TimeAnimationOptions } from '../../types';\nimport { toKeyframeValue } from '../../utils';\n\nconst BLUR_POWER_MAP = {\n  soft: 6,\n  medium: 25,\n  hard: 50,\n};\n\nexport function getNames(_: TimeAnimationOptions) {\n  return ['motion-fadeIn', 'motion-blurIn'];\n}\n\nexport function web(options: TimeAnimationOptions) {\n  return style(options, true);\n}\n\nexport function style(options: TimeAnimationOptions, asWeb = false) {\n  const { blur = 6, power } = options.namedEffect as BlurIn;\n  const [fadeIn, blurIn] = getNames(options);\n\n  const easing = options.easing || 'linear';\n  const blurFactor =\n    power && BLUR_POWER_MAP[power] ? BLUR_POWER_MAP[power] : blur;\n\n  const custom = {\n    '--motion-blur': `${blurFactor}px`,\n  };\n\n  return [\n    {\n      ...options,\n      name: fadeIn,\n      duration: options.duration! * 0.7,\n      easing: 'sineIn',\n      custom: {},\n      keyframes: [\n        { offset: 0, opacity: 0 },\n        { opacity: 'var(--comp-opacity, 1)' },\n      ],\n    },\n    {\n      ...options,\n      name: blurIn,\n      easing,\n      composite: 'add' as const, // make sure we don't override existing filters on the component\n      custom,\n      keyframes: [\n        {\n          filter: `blur(${toKeyframeValue(custom, '--motion-blur', asWeb)})`,\n        },\n        {\n          filter: 'blur(0px)',\n        },\n      ],\n    },\n  ];\n}\n"],"mappings":";;;;;;AACA,IAAAA,MAAA,GAAAC,OAAA;AAEA,MAAMC,cAAc,GAAG;EACrBC,IAAI,EAAE,CAAC;EACPC,MAAM,EAAE,EAAE;EACVC,IAAI,EAAE;AACR,CAAC;AAEM,SAASC,QAAQA,CAACC,CAAuB,EAAE;EAChD,OAAO,CAAC,eAAe,EAAE,eAAe,CAAC;AAC3C;AAEO,SAASC,GAAGA,CAACC,OAA6B,EAAE;EACjD,OAAOC,KAAK,CAACD,OAAO,EAAE,IAAI,CAAC;AAC7B;AAEO,SAASC,KAAKA,CAACD,OAA6B,EAAEE,KAAK,GAAG,KAAK,EAAE;EAClE,MAAM;IAAEC,IAAI,GAAG,CAAC;IAAEC;EAAM,CAAC,GAAGJ,OAAO,CAACK,WAAqB;EACzD,MAAM,CAACC,MAAM,EAAEC,MAAM,CAAC,GAAGV,QAAQ,CAACG,OAAO,CAAC;EAE1C,MAAMQ,MAAM,GAAGR,OAAO,CAACQ,MAAM,IAAI,QAAQ;EACzC,MAAMC,UAAU,GACdL,KAAK,IAAIX,cAAc,CAACW,KAAK,CAAC,GAAGX,cAAc,CAACW,KAAK,CAAC,GAAGD,IAAI;EAE/D,MAAMO,MAAM,GAAG;IACb,eAAe,EAAE,GAAGD,UAAU;EAChC,CAAC;EAED,OAAO,CACL;IACE,GAAGT,OAAO;IACVW,IAAI,EAAEL,MAAM;IACZM,QAAQ,EAAEZ,OAAO,CAACY,QAAQ,GAAI,GAAG;IACjCJ,MAAM,EAAE,QAAQ;IAChBE,MAAM,EAAE,CAAC,CAAC;IACVG,SAAS,EAAE,CACT;MAAEC,MAAM,EAAE,CAAC;MAAEC,OAAO,EAAE;IAAE,CAAC,EACzB;MAAEA,OAAO,EAAE;IAAyB,CAAC;EAEzC,CAAC,EACD;IACE,GAAGf,OAAO;IACVW,IAAI,EAAEJ,MAAM;IACZC,MAAM;IACNQ,SAAS,EAAE,KAAc;IAAE;IAC3BN,MAAM;IACNG,SAAS,EAAE,CACT;MACEI,MAAM,EAAE,QAAQ,IAAAC,sBAAe,EAACR,MAAM,EAAE,eAAe,EAAER,KAAK,CAAC;IACjE,CAAC,EACD;MACEe,MAAM,EAAE;IACV,CAAC;EAEL,CAAC,CACF;AACH","ignoreList":[]}

package/dist/cjs/library/entrance/BounceIn.js

@@ -0,0 +1,143 @@
+"use strict";
+
+exports.__esModule = true;
+exports.getNames = getNames;
+exports.style = style;
+exports.web = web;
+var _utils = require("../../utils");
+function getNames(_) {
+  return ['motion-fadeIn', 'motion-bounceIn'];
+}
+const {
+  in: easeIn,
+  out: easeOut
+} = (0, _utils.getEasingFamily)('sineIn');
+const BOUNCE_KEYFRAMES = [{
+  offset: _utils.INITIAL_FRAME_OFFSET * 100,
+  translate: 100
+}, {
+  offset: 30,
+  translate: 0
+}, {
+  offset: 42,
+  translate: 35
+}, {
+  offset: 54,
+  translate: 0
+}, {
+  offset: 62,
+  translate: 21
+}, {
+  offset: 74,
+  translate: 0
+}, {
+  offset: 82,
+  translate: 9
+}, {
+  offset: 90,
+  translate: 0
+}, {
+  offset: 95,
+  translate: 2
+}, {
+  offset: 100,
+  translate: 0,
+  isIn: true
+}];
+const POWER_MAP = {
+  soft: 1,
+  medium: 2,
+  hard: 3
+};
+const TRANSLATE_DIRECTION_MAP = {
+  top: {
+    y: -1,
+    x: 0,
+    z: 0
+  },
+  right: {
+    y: 0,
+    x: 1,
+    z: 0
+  },
+  bottom: {
+    y: 1,
+    x: 0,
+    z: 0
+  },
+  left: {
+    y: 0,
+    x: -1,
+    z: 0
+  },
+  center: {
+    x: 0,
+    y: 0,
+    z: -1
+  }
+};
+function web(options) {
+  return style(options, true);
+}
+function style(options, asWeb = false) {
+  const {
+    power,
+    distanceFactor: distance = 1,
+    direction = 'bottom'
+  } = options.namedEffect;
+  const [fadeIn, bounceIn] = getNames(options);
+  const distanceFactor = power && POWER_MAP[power] || distance;
+  const perspective = direction === 'center' ? 'perspective(800px)' : ' ';
+  const {
+    x,
+    y,
+    z
+  } = TRANSLATE_DIRECTION_MAP[direction];
+  const custom = {
+    '--motion-direction-x': x,
+    '--motion-direction-y': y,
+    '--motion-direction-z': z,
+    '--motion-distance-factor': distanceFactor,
+    '--motion-perspective': perspective,
+    '--motion-ease-in': (0, _utils.getEasing)(easeOut),
+    '--motion-ease-out': (0, _utils.getEasing)(easeIn)
+  };
+  const easeIn_ = (0, _utils.toKeyframeValue)(custom, '--motion-ease-in', asWeb);
+  const easeOut_ = (0, _utils.toKeyframeValue)(custom, '--motion-ease-out', asWeb);
+  const distanceFactor_ = (0, _utils.toKeyframeValue)(custom, '--motion-distance-factor', asWeb);
+  const perspective_ = (0, _utils.toKeyframeValue)(custom, '--motion-perspective', asWeb, ' ');
+  const directionX = (0, _utils.toKeyframeValue)(custom, '--motion-direction-x', asWeb);
+  const directionY = (0, _utils.toKeyframeValue)(custom, '--motion-direction-y', asWeb);
+  const directionZ = (0, _utils.toKeyframeValue)(custom, '--motion-direction-z', asWeb);
+  const keyframes = BOUNCE_KEYFRAMES.map(({
+    offset,
+    translate
+  }, index) => ({
+    offset: offset / 100,
+    animationTimingFunction: index % 2 ? easeIn_ : easeOut_,
+    transform: `${perspective_.trim()} translate3d(calc(${directionX} * ${distanceFactor_} * ${translate / 2}px), calc(${directionY} * ${distanceFactor_} * ${translate / 2}px), calc(${directionZ} * ${distanceFactor_} * ${translate / 2}px)) rotateZ(var(--comp-rotate-z, 0deg))`
+  }));
+  return [{
+    ...options,
+    name: fadeIn,
+    easing: 'quadOut',
+    duration: options.duration * BOUNCE_KEYFRAMES[3].offset / 100,
+    custom: {},
+    keyframes: [{
+      offset: 0,
+      opacity: 0
+    }, {
+      opacity: 'var(--comp-opacity, 1)'
+    }]
+  }, {
+    ...options,
+    name: bounceIn,
+    easing: 'linear',
+    custom,
+    keyframes: [{
+      offset: 0,
+      transform: `perspective(800px) translate3d(0, 0, 0) rotateZ(var(--comp-rotate-z, 0deg))`
+    }, ...keyframes]
+  }];
+}
+//# sourceMappingURL=BounceIn.js.map

package/dist/cjs/library/entrance/BounceIn.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_utils","require","getNames","_","in","easeIn","out","easeOut","getEasingFamily","BOUNCE_KEYFRAMES","offset","INITIAL_FRAME_OFFSET","translate","isIn","POWER_MAP","soft","medium","hard","TRANSLATE_DIRECTION_MAP","top","y","x","z","right","bottom","left","center","web","options","style","asWeb","power","distanceFactor","distance","direction","namedEffect","fadeIn","bounceIn","perspective","custom","getEasing","easeIn_","toKeyframeValue","easeOut_","distanceFactor_","perspective_","directionX","directionY","directionZ","keyframes","map","index","animationTimingFunction","transform","trim","name","easing","duration","opacity"],"sources":["../../../../src/library/entrance/BounceIn.ts"],"sourcesContent":["import {\n  getEasingFamily,\n  getEasing,\n  toKeyframeValue,\n  INITIAL_FRAME_OFFSET,\n} from '../../utils';\nimport type { BounceIn, TimeAnimationOptions } from '../../types';\n\nexport function getNames(_: TimeAnimationOptions) {\n  return ['motion-fadeIn', 'motion-bounceIn'];\n}\n\nconst { in: easeIn, out: easeOut } = getEasingFamily('sineIn');\nconst BOUNCE_KEYFRAMES = [\n  { offset: INITIAL_FRAME_OFFSET * 100, translate: 100 },\n  { offset: 30, translate: 0 },\n  { offset: 42, translate: 35 },\n  { offset: 54, translate: 0 },\n  { offset: 62, translate: 21 },\n  { offset: 74, translate: 0 },\n  { offset: 82, translate: 9 },\n  { offset: 90, translate: 0 },\n  { offset: 95, translate: 2 },\n  { offset: 100, translate: 0, isIn: true },\n];\n\nconst POWER_MAP = {\n  soft: 1,\n  medium: 2,\n  hard: 3,\n};\n\nconst TRANSLATE_DIRECTION_MAP = {\n  top: { y: -1, x: 0, z: 0 },\n  right: { y: 0, x: 1, z: 0 },\n  bottom: { y: 1, x: 0, z: 0 },\n  left: { y: 0, x: -1, z: 0 },\n  center: { x: 0, y: 0, z: -1 },\n};\n\nexport function web(options: TimeAnimationOptions) {\n  return style(options, true);\n}\n\nexport function style(options: TimeAnimationOptions, asWeb = false) {\n  const {\n    power,\n    distanceFactor: distance = 1,\n    direction = 'bottom',\n  } = options.namedEffect as BounceIn;\n  const [fadeIn, bounceIn] = getNames(options);\n  const distanceFactor = (power && POWER_MAP[power]) || distance;\n  const perspective = direction === 'center' ? 'perspective(800px)' : ' ';\n  const { x, y, z } = TRANSLATE_DIRECTION_MAP[direction];\n\n  const custom = {\n    '--motion-direction-x': x,\n    '--motion-direction-y': y,\n    '--motion-direction-z': z,\n    '--motion-distance-factor': distanceFactor,\n    '--motion-perspective': perspective,\n    '--motion-ease-in': getEasing(easeOut),\n    '--motion-ease-out': getEasing(easeIn),\n  };\n\n  const easeIn_ = toKeyframeValue(custom, '--motion-ease-in', asWeb);\n  const easeOut_ = toKeyframeValue(custom, '--motion-ease-out', asWeb);\n  const distanceFactor_ = toKeyframeValue(\n    custom,\n    '--motion-distance-factor',\n    asWeb,\n  );\n  const perspective_ = toKeyframeValue(\n    custom,\n    '--motion-perspective',\n    asWeb,\n    ' ',\n  );\n  const directionX = toKeyframeValue(custom, '--motion-direction-x', asWeb);\n  const directionY = toKeyframeValue(custom, '--motion-direction-y', asWeb);\n  const directionZ = toKeyframeValue(custom, '--motion-direction-z', asWeb);\n\n  const keyframes = BOUNCE_KEYFRAMES.map(({ offset, translate }, index) => ({\n    offset: offset / 100,\n    animationTimingFunction: index % 2 ? easeIn_ : easeOut_,\n    transform: `${(\n      perspective_ as string\n    ).trim()} translate3d(calc(${directionX} * ${distanceFactor_} * ${\n      translate / 2\n    }px), calc(${directionY} * ${distanceFactor_} * ${\n      translate / 2\n    }px), calc(${directionZ} * ${distanceFactor_} * ${\n      translate / 2\n    }px)) rotateZ(var(--comp-rotate-z, 0deg))`,\n  }));\n\n  return [\n    {\n      ...options,\n      name: fadeIn,\n      easing: 'quadOut',\n      duration: (options.duration! * BOUNCE_KEYFRAMES[3].offset) / 100,\n      custom: {},\n      keyframes: [\n        { offset: 0, opacity: 0 },\n        { opacity: 'var(--comp-opacity, 1)' },\n      ],\n    },\n    {\n      ...options,\n      name: bounceIn,\n      easing: 'linear',\n      custom,\n      keyframes: [\n        {\n          offset: 0,\n          transform: `perspective(800px) translate3d(0, 0, 0) rotateZ(var(--comp-rotate-z, 0deg))`,\n        },\n        ...keyframes,\n      ],\n    },\n  ];\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/library/entrance/CircleIn.js

@@ -0,0 +1,75 @@
+"use strict";
+
+exports.__esModule = true;
+exports.getNames = getNames;
+exports.prepare = prepare;
+exports.style = style;
+exports.web = web;
+var _utils = require("../../utils");
+function getNames(_) {
+  return ['motion-circleXIn', 'motion-circleYIn'];
+}
+const ROTATION = 45;
+function web(options, dom) {
+  prepare(options, dom);
+  return style(options, true);
+}
+function style(options, asWeb = false) {
+  const {
+    direction = 'right'
+  } = options.namedEffect;
+  const [circleXIn, circleYIn] = getNames(options);
+  const x = direction === 'right' ? 'calc(100vw - var(--motion-left, 0px))' : 'calc(var(--motion-left, 0px) * -1 - 100%)';
+  const y = 'min(calc(100% * -1.5), max(-300px, calc(100% * -5.5)))';
+  const customX = {
+    '--motion-translate-x': x
+  };
+  const customY = {
+    '--motion-translate-y': y,
+    '--motion-rotate-z': `${(direction === 'right' ? 1 : -1) * ROTATION}deg`
+  };
+  return [{
+    ...options,
+    name: circleXIn,
+    easing: 'circOut',
+    custom: customX,
+    keyframes: [{
+      offset: _utils.INITIAL_FRAME_OFFSET,
+      translate: (0, _utils.toKeyframeValue)(customX, '--motion-translate-x', asWeb)
+    }, {
+      translate: '0'
+    }]
+  }, {
+    ...options,
+    name: circleYIn,
+    easing: 'linear',
+    custom: customY,
+    keyframes: [{
+      offset: 0,
+      opacity: 0,
+      easing: 'step-end'
+    }, {
+      offset: _utils.INITIAL_FRAME_OFFSET,
+      opacity: 0,
+      transform: `translateY(${(0, _utils.toKeyframeValue)(customY, '--motion-translate-y', asWeb)}) rotate(calc(var(--comp-rotate-z, 0deg) + ${(0, _utils.toKeyframeValue)(customY, '--motion-rotate-z', asWeb)}))`
+    }, {
+      opacity: 'var(--comp-opacity, 1)',
+      transform: `translateY(0) rotate(var(--comp-rotate-z, 0deg))`
+    }]
+  }];
+}
+function prepare(_, dom) {
+  if (dom) {
+    let left = 0;
+    dom.measure(target => {
+      if (!target) {
+        return;
+      }
+      left = target.getBoundingClientRect().left;
+    });
+    dom.mutate(target => {
+      target == null || target.style.setProperty('--motion-left', `${left}px`);
+    });
+  }
+}
+//# sourceMappingURL=CircleIn.js.map

package/dist/cjs/library/entrance/CircleIn.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_utils","require","getNames","_","ROTATION","web","options","dom","prepare","style","asWeb","direction","namedEffect","circleXIn","circleYIn","x","y","customX","customY","name","easing","custom","keyframes","offset","INITIAL_FRAME_OFFSET","translate","toKeyframeValue","opacity","transform","left","measure","target","getBoundingClientRect","mutate","setProperty"],"sources":["../../../../src/library/entrance/CircleIn.ts"],"sourcesContent":["import type { TimeAnimationOptions, CircleIn, DomApi } from '../../types';\nimport { INITIAL_FRAME_OFFSET, toKeyframeValue } from '../../utils';\n\nexport function getNames(_: TimeAnimationOptions) {\n  return ['motion-circleXIn', 'motion-circleYIn'];\n}\n\nconst ROTATION = 45;\n\nexport function web(options: TimeAnimationOptions, dom?: DomApi) {\n  prepare(options, dom);\n\n  return style(options, true);\n}\n\nexport function style(options: TimeAnimationOptions, asWeb = false) {\n  const { direction = 'right' } = options.namedEffect as CircleIn;\n  const [circleXIn, circleYIn] = getNames(options);\n\n  const x =\n    direction === 'right'\n      ? 'calc(100vw - var(--motion-left, 0px))'\n      : 'calc(var(--motion-left, 0px) * -1 - 100%)';\n  const y = 'min(calc(100% * -1.5), max(-300px, calc(100% * -5.5)))';\n\n  const customX = {\n    '--motion-translate-x': x,\n  };\n  const customY = {\n    '--motion-translate-y': y,\n    '--motion-rotate-z': `${(direction === 'right' ? 1 : -1) * ROTATION}deg`,\n  };\n\n  return [\n    {\n      ...options,\n      name: circleXIn,\n      easing: 'circOut',\n      custom: customX,\n      keyframes: [\n        {\n          offset: INITIAL_FRAME_OFFSET,\n          translate: toKeyframeValue(customX, '--motion-translate-x', asWeb),\n        },\n        {\n          translate: '0',\n        },\n      ],\n    },\n    {\n      ...options,\n      name: circleYIn,\n      easing: 'linear',\n      custom: customY,\n      keyframes: [\n        {\n          offset: 0,\n          opacity: 0,\n          easing: 'step-end',\n        },\n        {\n          offset: INITIAL_FRAME_OFFSET,\n          opacity: 0,\n          transform: `translateY(${toKeyframeValue(\n            customY,\n            '--motion-translate-y',\n            asWeb,\n          )}) rotate(calc(var(--comp-rotate-z, 0deg) + ${toKeyframeValue(\n            customY,\n            '--motion-rotate-z',\n            asWeb,\n          )}))`,\n        },\n        {\n          opacity: 'var(--comp-opacity, 1)',\n          transform: `translateY(0) rotate(var(--comp-rotate-z, 0deg))`,\n        },\n      ],\n    },\n  ];\n}\n\nexport function prepare(_: TimeAnimationOptions, dom?: DomApi) {\n  if (dom) {\n    let left = 0;\n\n    dom.measure((target) => {\n      if (!target) {\n        return;\n      }\n\n      left = target.getBoundingClientRect().left;\n    });\n\n    dom.mutate((target) => {\n      target?.style.setProperty('--motion-left', `${left}px`);\n    });\n  }\n}\n"],"mappings":";;;;;;;AACA,IAAAA,MAAA,GAAAC,OAAA;AAEO,SAASC,QAAQA,CAACC,CAAuB,EAAE;EAChD,OAAO,CAAC,kBAAkB,EAAE,kBAAkB,CAAC;AACjD;AAEA,MAAMC,QAAQ,GAAG,EAAE;AAEZ,SAASC,GAAGA,CAACC,OAA6B,EAAEC,GAAY,EAAE;EAC/DC,OAAO,CAACF,OAAO,EAAEC,GAAG,CAAC;EAErB,OAAOE,KAAK,CAACH,OAAO,EAAE,IAAI,CAAC;AAC7B;AAEO,SAASG,KAAKA,CAACH,OAA6B,EAAEI,KAAK,GAAG,KAAK,EAAE;EAClE,MAAM;IAAEC,SAAS,GAAG;EAAQ,CAAC,GAAGL,OAAO,CAACM,WAAuB;EAC/D,MAAM,CAACC,SAAS,EAAEC,SAAS,CAAC,GAAGZ,QAAQ,CAACI,OAAO,CAAC;EAEhD,MAAMS,CAAC,GACLJ,SAAS,KAAK,OAAO,GACjB,uCAAuC,GACvC,2CAA2C;EACjD,MAAMK,CAAC,GAAG,wDAAwD;EAElE,MAAMC,OAAO,GAAG;IACd,sBAAsB,EAAEF;EAC1B,CAAC;EACD,MAAMG,OAAO,GAAG;IACd,sBAAsB,EAAEF,CAAC;IACzB,mBAAmB,EAAE,GAAG,CAACL,SAAS,KAAK,OAAO,GAAG,CAAC,GAAG,CAAC,CAAC,IAAIP,QAAQ;EACrE,CAAC;EAED,OAAO,CACL;IACE,GAAGE,OAAO;IACVa,IAAI,EAAEN,SAAS;IACfO,MAAM,EAAE,SAAS;IACjBC,MAAM,EAAEJ,OAAO;IACfK,SAAS,EAAE,CACT;MACEC,MAAM,EAAEC,2BAAoB;MAC5BC,SAAS,EAAE,IAAAC,sBAAe,EAACT,OAAO,EAAE,sBAAsB,EAAEP,KAAK;IACnE,CAAC,EACD;MACEe,SAAS,EAAE;IACb,CAAC;EAEL,CAAC,EACD;IACE,GAAGnB,OAAO;IACVa,IAAI,EAAEL,SAAS;IACfM,MAAM,EAAE,QAAQ;IAChBC,MAAM,EAAEH,OAAO;IACfI,SAAS,EAAE,CACT;MACEC,MAAM,EAAE,CAAC;MACTI,OAAO,EAAE,CAAC;MACVP,MAAM,EAAE;IACV,CAAC,EACD;MACEG,MAAM,EAAEC,2BAAoB;MAC5BG,OAAO,EAAE,CAAC;MACVC,SAAS,EAAE,cAAc,IAAAF,sBAAe,EACtCR,OAAO,EACP,sBAAsB,EACtBR,KACF,CAAC,8CAA8C,IAAAgB,sBAAe,EAC5DR,OAAO,EACP,mBAAmB,EACnBR,KACF,CAAC;IACH,CAAC,EACD;MACEiB,OAAO,EAAE,wBAAwB;MACjCC,SAAS,EAAE;IACb,CAAC;EAEL,CAAC,CACF;AACH;AAEO,SAASpB,OAAOA,CAACL,CAAuB,EAAEI,GAAY,EAAE;EAC7D,IAAIA,GAAG,EAAE;IACP,IAAIsB,IAAI,GAAG,CAAC;IAEZtB,GAAG,CAACuB,OAAO,CAAEC,MAAM,IAAK;MACtB,IAAI,CAACA,MAAM,EAAE;QACX;MACF;MAEAF,IAAI,GAAGE,MAAM,CAACC,qBAAqB,CAAC,CAAC,CAACH,IAAI;IAC5C,CAAC,CAAC;IAEFtB,GAAG,CAAC0B,MAAM,CAAEF,MAAM,IAAK;MACrBA,MAAM,YAANA,MAAM,CAAEtB,KAAK,CAACyB,WAAW,CAAC,eAAe,EAAE,GAAGL,IAAI,IAAI,CAAC;IACzD,CAAC,CAAC;EACJ;AACF","ignoreList":[]}

package/dist/cjs/library/entrance/CurveIn.js

@@ -0,0 +1,80 @@
+"use strict";
+
+exports.__esModule = true;
+exports.getNames = getNames;
+exports.prepare = prepare;
+exports.style = style;
+exports.web = web;
+var _utils = require("../../utils");
+function getNames(_) {
+  return ['motion-curveIn'];
+}
+const PARAMS_MAP = {
+  pseudoRight: {
+    rotationX: '180',
+    rotationY: '0'
+  },
+  right: {
+    rotationX: '0',
+    rotationY: '180'
+  },
+  pseudoLeft: {
+    rotationX: '-180',
+    rotationY: '0'
+  },
+  left: {
+    rotationX: '0',
+    rotationY: '-180'
+  }
+};
+function web(options, dom) {
+  prepare(options, dom);
+  return style(options, true);
+}
+function style(options, asWeb = false) {
+  const {
+    direction = 'right'
+  } = options.namedEffect;
+  const [curveIn] = getNames(options);
+  const {
+    rotationX,
+    rotationY
+  } = PARAMS_MAP[direction];
+  const custom = {
+    '--motion-rotate-x': `${rotationX}deg`,
+    '--motion-rotate-y': `${rotationY}deg`
+  };
+  return [{
+    ...options,
+    name: curveIn,
+    easing: 'quadOut',
+    custom,
+    keyframes: [{
+      offset: 0,
+      opacity: 0,
+      easing: 'step-end'
+    }, {
+      offset: _utils.INITIAL_FRAME_OFFSET,
+      opacity: 0,
+      transform: `perspective(200px) translateZ(calc(var(--motion-width, 300px) * -3)) rotateX(${(0, _utils.toKeyframeValue)(custom, '--motion-rotate-x', asWeb)}) rotateY(${(0, _utils.toKeyframeValue)(custom, '--motion-rotate-y', asWeb)}) translateZ(calc(var(--motion-width, 300px) * 3)) rotateZ(var(--comp-rotate-z, 0deg))`
+    }, {
+      opacity: 'var(--comp-opacity, 1)',
+      transform: 'perspective(200px) translateZ(calc(var(--motion-width, 300px) * -3)) rotateX(0deg) rotateY(0deg) translateZ(calc(var(--motion-width, 300px) * 3)) rotateZ(var(--comp-rotate-z, 0deg))'
+    }]
+  }];
+}
+function prepare(_, dom) {
+  if (dom) {
+    let width;
+    dom.measure(target => {
+      if (!target) {
+        return;
+      }
+      width = target.getBoundingClientRect().width;
+    });
+    dom.mutate(target => {
+      target == null || target.style.setProperty('--motion-width', `${width}px`);
+    });
+  }
+}
+//# sourceMappingURL=CurveIn.js.map

package/dist/cjs/library/entrance/CurveIn.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_utils","require","getNames","_","PARAMS_MAP","pseudoRight","rotationX","rotationY","right","pseudoLeft","left","web","options","dom","prepare","style","asWeb","direction","namedEffect","curveIn","custom","name","easing","keyframes","offset","opacity","INITIAL_FRAME_OFFSET","transform","toKeyframeValue","width","measure","target","getBoundingClientRect","mutate","setProperty"],"sources":["../../../../src/library/entrance/CurveIn.ts"],"sourcesContent":["import type { CurveIn, TimeAnimationOptions, DomApi } from '../../types';\nimport { INITIAL_FRAME_OFFSET, toKeyframeValue } from '../../utils';\n\nexport function getNames(_: TimeAnimationOptions) {\n  return ['motion-curveIn'];\n}\n\nconst PARAMS_MAP = {\n  pseudoRight: { rotationX: '180', rotationY: '0' },\n  right: { rotationX: '0', rotationY: '180' },\n  pseudoLeft: { rotationX: '-180', rotationY: '0' },\n  left: { rotationX: '0', rotationY: '-180' },\n};\n\nexport function web(options: TimeAnimationOptions, dom?: DomApi) {\n  prepare(options, dom);\n\n  return style(options, true);\n}\n\nexport function style(options: TimeAnimationOptions, asWeb = false) {\n  const { direction = 'right' } = options.namedEffect as CurveIn;\n  const [curveIn] = getNames(options);\n\n  const { rotationX, rotationY } = PARAMS_MAP[direction];\n\n  const custom = {\n    '--motion-rotate-x': `${rotationX}deg`,\n    '--motion-rotate-y': `${rotationY}deg`,\n  };\n\n  return [\n    {\n      ...options,\n      name: curveIn,\n      easing: 'quadOut',\n      custom,\n      keyframes: [\n        {\n          offset: 0,\n          opacity: 0,\n          easing: 'step-end',\n        },\n        {\n          offset: INITIAL_FRAME_OFFSET,\n          opacity: 0,\n          transform: `perspective(200px) translateZ(calc(var(--motion-width, 300px) * -3)) rotateX(${toKeyframeValue(\n            custom,\n            '--motion-rotate-x',\n            asWeb,\n          )}) rotateY(${toKeyframeValue(\n            custom,\n            '--motion-rotate-y',\n            asWeb,\n          )}) translateZ(calc(var(--motion-width, 300px) * 3)) rotateZ(var(--comp-rotate-z, 0deg))`,\n        },\n        {\n          opacity: 'var(--comp-opacity, 1)',\n          transform:\n            'perspective(200px) translateZ(calc(var(--motion-width, 300px) * -3)) rotateX(0deg) rotateY(0deg) translateZ(calc(var(--motion-width, 300px) * 3)) rotateZ(var(--comp-rotate-z, 0deg))',\n        },\n      ],\n    },\n  ];\n}\n\nexport function prepare(_: TimeAnimationOptions, dom?: DomApi) {\n  if (dom) {\n    let width: number;\n\n    dom.measure((target) => {\n      if (!target) {\n        return;\n      }\n\n      width = target.getBoundingClientRect().width;\n    });\n\n    dom.mutate((target) => {\n      target?.style.setProperty('--motion-width', `${width}px`);\n    });\n  }\n}\n"],"mappings":";;;;;;;AACA,IAAAA,MAAA,GAAAC,OAAA;AAEO,SAASC,QAAQA,CAACC,CAAuB,EAAE;EAChD,OAAO,CAAC,gBAAgB,CAAC;AAC3B;AAEA,MAAMC,UAAU,GAAG;EACjBC,WAAW,EAAE;IAAEC,SAAS,EAAE,KAAK;IAAEC,SAAS,EAAE;EAAI,CAAC;EACjDC,KAAK,EAAE;IAAEF,SAAS,EAAE,GAAG;IAAEC,SAAS,EAAE;EAAM,CAAC;EAC3CE,UAAU,EAAE;IAAEH,SAAS,EAAE,MAAM;IAAEC,SAAS,EAAE;EAAI,CAAC;EACjDG,IAAI,EAAE;IAAEJ,SAAS,EAAE,GAAG;IAAEC,SAAS,EAAE;EAAO;AAC5C,CAAC;AAEM,SAASI,GAAGA,CAACC,OAA6B,EAAEC,GAAY,EAAE;EAC/DC,OAAO,CAACF,OAAO,EAAEC,GAAG,CAAC;EAErB,OAAOE,KAAK,CAACH,OAAO,EAAE,IAAI,CAAC;AAC7B;AAEO,SAASG,KAAKA,CAACH,OAA6B,EAAEI,KAAK,GAAG,KAAK,EAAE;EAClE,MAAM;IAAEC,SAAS,GAAG;EAAQ,CAAC,GAAGL,OAAO,CAACM,WAAsB;EAC9D,MAAM,CAACC,OAAO,CAAC,GAAGjB,QAAQ,CAACU,OAAO,CAAC;EAEnC,MAAM;IAAEN,SAAS;IAAEC;EAAU,CAAC,GAAGH,UAAU,CAACa,SAAS,CAAC;EAEtD,MAAMG,MAAM,GAAG;IACb,mBAAmB,EAAE,GAAGd,SAAS,KAAK;IACtC,mBAAmB,EAAE,GAAGC,SAAS;EACnC,CAAC;EAED,OAAO,CACL;IACE,GAAGK,OAAO;IACVS,IAAI,EAAEF,OAAO;IACbG,MAAM,EAAE,SAAS;IACjBF,MAAM;IACNG,SAAS,EAAE,CACT;MACEC,MAAM,EAAE,CAAC;MACTC,OAAO,EAAE,CAAC;MACVH,MAAM,EAAE;IACV,CAAC,EACD;MACEE,MAAM,EAAEE,2BAAoB;MAC5BD,OAAO,EAAE,CAAC;MACVE,SAAS,EAAE,gFAAgF,IAAAC,sBAAe,EACxGR,MAAM,EACN,mBAAmB,EACnBJ,KACF,CAAC,aAAa,IAAAY,sBAAe,EAC3BR,MAAM,EACN,mBAAmB,EACnBJ,KACF,CAAC;IACH,CAAC,EACD;MACES,OAAO,EAAE,wBAAwB;MACjCE,SAAS,EACP;IACJ,CAAC;EAEL,CAAC,CACF;AACH;AAEO,SAASb,OAAOA,CAACX,CAAuB,EAAEU,GAAY,EAAE;EAC7D,IAAIA,GAAG,EAAE;IACP,IAAIgB,KAAa;IAEjBhB,GAAG,CAACiB,OAAO,CAAEC,MAAM,IAAK;MACtB,IAAI,CAACA,MAAM,EAAE;QACX;MACF;MAEAF,KAAK,GAAGE,MAAM,CAACC,qBAAqB,CAAC,CAAC,CAACH,KAAK;IAC9C,CAAC,CAAC;IAEFhB,GAAG,CAACoB,MAAM,CAAEF,MAAM,IAAK;MACrBA,MAAM,YAANA,MAAM,CAAEhB,KAAK,CAACmB,WAAW,CAAC,gBAAgB,EAAE,GAAGL,KAAK,IAAI,CAAC;IAC3D,CAAC,CAAC;EACJ;AACF","ignoreList":[]}

package/dist/cjs/library/entrance/DropIn.js

@@ -0,0 +1,64 @@
+"use strict";
+
+exports.__esModule = true;
+exports.getNames = getNames;
+exports.style = style;
+exports.web = web;
+var _utils = require("../../utils");
+function getNames(_) {
+  return ['motion-fadeIn', 'motion-dropIn'];
+}
+const PARAMS_MAP = {
+  soft: {
+    scale: 1.2,
+    ease: 'cubicInOut'
+  },
+  medium: {
+    scale: 1.6,
+    ease: 'quintInOut'
+  },
+  hard: {
+    scale: 2,
+    ease: 'backOut'
+  }
+};
+function web(options) {
+  return style(options, true);
+}
+function style(options, asWeb = false) {
+  const {
+    power,
+    initialScale = PARAMS_MAP.medium.scale
+  } = options.namedEffect;
+  const [fadeIn, dropIn] = getNames(options);
+  const scale = power && PARAMS_MAP[power].scale || initialScale;
+  const easing = power && PARAMS_MAP[power].ease || options.easing || 'quintInOut';
+  const custom = {
+    '--motion-scale': `${scale}`
+  };
+  return [{
+    ...options,
+    name: fadeIn,
+    easing: 'quadOut',
+    duration: options.duration * 0.8,
+    custom: {},
+    keyframes: [{
+      offset: 0,
+      opacity: 0
+    }, {
+      opacity: 'var(--comp-opacity, 1)'
+    }]
+  }, {
+    ...options,
+    name: dropIn,
+    easing,
+    custom,
+    keyframes: [{
+      offset: _utils.INITIAL_FRAME_OFFSET,
+      scale: (0, _utils.toKeyframeValue)(custom, '--motion-scale', asWeb)
+    }, {
+      scale: '1'
+    }]
+  }];
+}
+//# sourceMappingURL=DropIn.js.map

package/dist/cjs/library/entrance/DropIn.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_utils","require","getNames","_","PARAMS_MAP","soft","scale","ease","medium","hard","web","options","style","asWeb","power","initialScale","namedEffect","fadeIn","dropIn","easing","custom","name","duration","keyframes","offset","opacity","INITIAL_FRAME_OFFSET","toKeyframeValue"],"sources":["../../../../src/library/entrance/DropIn.ts"],"sourcesContent":["import type { TimeAnimationOptions, DropIn } from '../../types';\nimport { INITIAL_FRAME_OFFSET, toKeyframeValue } from '../../utils';\n\nexport function getNames(_: TimeAnimationOptions) {\n  return ['motion-fadeIn', 'motion-dropIn'];\n}\n\nconst PARAMS_MAP = {\n  soft: { scale: 1.2, ease: 'cubicInOut' },\n  medium: { scale: 1.6, ease: 'quintInOut' },\n  hard: { scale: 2, ease: 'backOut' },\n};\n\nexport function web(options: TimeAnimationOptions) {\n  return style(options, true);\n}\n\nexport function style(options: TimeAnimationOptions, asWeb = false) {\n  const { power, initialScale = PARAMS_MAP.medium.scale } =\n    options.namedEffect as DropIn;\n  const [fadeIn, dropIn] = getNames(options);\n\n  const scale = (power && PARAMS_MAP[power].scale) || initialScale;\n  const easing =\n    (power && PARAMS_MAP[power].ease) || options.easing || 'quintInOut';\n\n  const custom = {\n    '--motion-scale': `${scale}`,\n  };\n\n  return [\n    {\n      ...options,\n      name: fadeIn,\n      easing: 'quadOut',\n      duration: options.duration! * 0.8,\n      custom: {},\n      keyframes: [\n        { offset: 0, opacity: 0 },\n        { opacity: 'var(--comp-opacity, 1)' },\n      ],\n    },\n    {\n      ...options,\n      name: dropIn,\n      easing,\n      custom,\n      keyframes: [\n        {\n          offset: INITIAL_FRAME_OFFSET,\n          scale: toKeyframeValue(custom, '--motion-scale', asWeb),\n        },\n        {\n          scale: '1',\n        },\n      ],\n    },\n  ];\n}\n"],"mappings":";;;;;;AACA,IAAAA,MAAA,GAAAC,OAAA;AAEO,SAASC,QAAQA,CAACC,CAAuB,EAAE;EAChD,OAAO,CAAC,eAAe,EAAE,eAAe,CAAC;AAC3C;AAEA,MAAMC,UAAU,GAAG;EACjBC,IAAI,EAAE;IAAEC,KAAK,EAAE,GAAG;IAAEC,IAAI,EAAE;EAAa,CAAC;EACxCC,MAAM,EAAE;IAAEF,KAAK,EAAE,GAAG;IAAEC,IAAI,EAAE;EAAa,CAAC;EAC1CE,IAAI,EAAE;IAAEH,KAAK,EAAE,CAAC;IAAEC,IAAI,EAAE;EAAU;AACpC,CAAC;AAEM,SAASG,GAAGA,CAACC,OAA6B,EAAE;EACjD,OAAOC,KAAK,CAACD,OAAO,EAAE,IAAI,CAAC;AAC7B;AAEO,SAASC,KAAKA,CAACD,OAA6B,EAAEE,KAAK,GAAG,KAAK,EAAE;EAClE,MAAM;IAAEC,KAAK;IAAEC,YAAY,GAAGX,UAAU,CAACI,MAAM,CAACF;EAAM,CAAC,GACrDK,OAAO,CAACK,WAAqB;EAC/B,MAAM,CAACC,MAAM,EAAEC,MAAM,CAAC,GAAGhB,QAAQ,CAACS,OAAO,CAAC;EAE1C,MAAML,KAAK,GAAIQ,KAAK,IAAIV,UAAU,CAACU,KAAK,CAAC,CAACR,KAAK,IAAKS,YAAY;EAChE,MAAMI,MAAM,GACTL,KAAK,IAAIV,UAAU,CAACU,KAAK,CAAC,CAACP,IAAI,IAAKI,OAAO,CAACQ,MAAM,IAAI,YAAY;EAErE,MAAMC,MAAM,GAAG;IACb,gBAAgB,EAAE,GAAGd,KAAK;EAC5B,CAAC;EAED,OAAO,CACL;IACE,GAAGK,OAAO;IACVU,IAAI,EAAEJ,MAAM;IACZE,MAAM,EAAE,SAAS;IACjBG,QAAQ,EAAEX,OAAO,CAACW,QAAQ,GAAI,GAAG;IACjCF,MAAM,EAAE,CAAC,CAAC;IACVG,SAAS,EAAE,CACT;MAAEC,MAAM,EAAE,CAAC;MAAEC,OAAO,EAAE;IAAE,CAAC,EACzB;MAAEA,OAAO,EAAE;IAAyB,CAAC;EAEzC,CAAC,EACD;IACE,GAAGd,OAAO;IACVU,IAAI,EAAEH,MAAM;IACZC,MAAM;IACNC,MAAM;IACNG,SAAS,EAAE,CACT;MACEC,MAAM,EAAEE,2BAAoB;MAC5BpB,KAAK,EAAE,IAAAqB,sBAAe,EAACP,MAAM,EAAE,gBAAgB,EAAEP,KAAK;IACxD,CAAC,EACD;MACEP,KAAK,EAAE;IACT,CAAC;EAEL,CAAC,CACF;AACH","ignoreList":[]}