@wix/motion 1.0.73 → 1.571.0

package/dist/cjs/library/ongoing/Swing.js

@@ -0,0 +1,130 @@
+"use strict";
+
+exports.__esModule = true;
+exports.getNames = getNames;
+exports.style = style;
+exports.web = web;
+var _utils = require("../../utils");
+const POWER_TO_SWING_FACTOR_MAP = {
+  soft: 1,
+  medium: 2,
+  hard: 3
+};
+const DIRECTION_MAP = {
+  top: {
+    x: 0,
+    y: -1
+  },
+  right: {
+    x: 1,
+    y: 0
+  },
+  bottom: {
+    x: 0,
+    y: 1
+  },
+  left: {
+    x: -1,
+    y: 0
+  }
+};
+const TRANSLATE_DISTANCE = 50;
+const FACTORS_SEQUENCE = [{
+  factor: 1,
+  timeFactor: 0.25
+}, {
+  factor: -1,
+  timeFactor: 0.5
+}, {
+  factor: 0.6,
+  timeFactor: 0.5
+}, {
+  factor: -0.3,
+  timeFactor: 0.5
+}, {
+  factor: 0.2,
+  timeFactor: 0.5
+}, {
+  factor: -0.05,
+  timeFactor: 0.5
+}, {
+  factor: 0,
+  timeFactor: 0.4
+}];
+function web(options, _dom) {
+  return style(options, true);
+}
+function style(options, asWeb = false) {
+  const {
+    power,
+    swing = 20,
+    direction = 'top'
+  } = options.namedEffect;
+  const duration = options.duration || 1;
+  const delay = options.delay || 0;
+  const easing = options.easing || 'sineInOut';
+  const ease = (0, _utils.getEasingFamily)(easing);
+  const [name] = getNames(options);
+  const swingDeg = typeof power !== 'undefined' ? 20 * POWER_TO_SWING_FACTOR_MAP[power] : swing;
+  const {
+    x,
+    y
+  } = DIRECTION_MAP[direction];
+  const totalDuration = 3.55 * duration + delay;
+  const timingFactor = (0, _utils.getTimingFactor)(duration, totalDuration - duration);
+
+  // Create CSS custom properties for the swing configuration
+  const custom = {
+    '--motion-swing-deg': `${swingDeg}deg`,
+    '--motion-trans-x': `${x * TRANSLATE_DISTANCE}%`,
+    '--motion-trans-y': `${y * TRANSLATE_DISTANCE}%`,
+    '--motion-ease-in': (0, _utils.getEasing)(ease.in),
+    '--motion-ease-inout': (0, _utils.getEasing)(ease.inOut),
+    '--motion-ease-out': (0, _utils.getEasing)(ease.out)
+  };
+  const translateBefore = `translate(${(0, _utils.toKeyframeValue)(custom, '--motion-trans-x', asWeb)}, ${(0, _utils.toKeyframeValue)(custom, '--motion-trans-y', asWeb)})`;
+  const translateAfter = `translate(calc(${(0, _utils.toKeyframeValue)(custom, '--motion-trans-x', asWeb)} * -1), calc(${(0, _utils.toKeyframeValue)(custom, '--motion-trans-y', asWeb)} * -1))`;
+  let currentOffset = 0;
+  // in case a delay is applied, animate a different sequence which decays to a stop
+  const keyframes = delay ? FACTORS_SEQUENCE.map(({
+    factor,
+    timeFactor
+  }) => {
+    const keyframeOffset = currentOffset + timeFactor * timingFactor;
+    currentOffset = keyframeOffset;
+    return {
+      offset: keyframeOffset,
+      easing: (0, _utils.toKeyframeValue)(custom, '--motion-ease-inout', asWeb),
+      transform: `rotate(var(--comp-rotate-z, 0deg)) ${translateBefore} rotate(calc(${(0, _utils.toKeyframeValue)(custom, '--motion-swing-deg', asWeb)} * ${factor})) ${translateAfter}`
+    };
+  }) : [{
+    offset: 0.25,
+    easing: (0, _utils.toKeyframeValue)(custom, '--motion-ease-inout', asWeb),
+    transform: `rotate(var(--comp-rotate-z, 0deg)) ${translateBefore} rotate(${(0, _utils.toKeyframeValue)(custom, '--motion-swing-deg', asWeb)}) ${translateAfter}`
+  }, {
+    offset: 0.75,
+    easing: (0, _utils.toKeyframeValue)(custom, '--motion-ease-in', asWeb),
+    transform: `rotate(var(--comp-rotate-z, 0deg)) ${translateBefore} rotate(calc(${(0, _utils.toKeyframeValue)(custom, '--motion-swing-deg', asWeb)} * -1)) ${translateAfter}`
+  }];
+  return [{
+    ...options,
+    name,
+    easing: 'linear',
+    delay: 0,
+    duration: delay ? totalDuration : duration,
+    custom,
+    keyframes: [{
+      offset: 0,
+      easing: (0, _utils.toKeyframeValue)(custom, '--motion-ease-out', asWeb),
+      transform: `rotateZ(var(--comp-rotate-z, 0deg)) ${translateBefore} rotate(0deg) ${translateAfter}`
+    }, ...keyframes, {
+      offset: 1,
+      transform: `rotateZ(var(--comp-rotate-z, 0deg)) ${translateBefore} rotate(0deg) ${translateAfter}`
+    }]
+  }];
+}
+function getNames(options) {
+  const timingFactor = (0, _utils.getTimingFactor)(options.duration, options.delay, true);
+  return [`motion-swing-${timingFactor}`];
+}
+//# sourceMappingURL=Swing.js.map

package/dist/cjs/library/ongoing/Swing.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_utils","require","POWER_TO_SWING_FACTOR_MAP","soft","medium","hard","DIRECTION_MAP","top","x","y","right","bottom","left","TRANSLATE_DISTANCE","FACTORS_SEQUENCE","factor","timeFactor","web","options","_dom","style","asWeb","power","swing","direction","namedEffect","duration","delay","easing","ease","getEasingFamily","name","getNames","swingDeg","totalDuration","timingFactor","getTimingFactor","custom","getEasing","in","inOut","out","translateBefore","toKeyframeValue","translateAfter","currentOffset","keyframes","map","keyframeOffset","offset","transform"],"sources":["../../../../src/library/ongoing/Swing.ts"],"sourcesContent":["import type {\n  Swing,\n  TimeAnimationOptions,\n  DomApi,\n  AnimationExtraOptions,\n} from '../../types';\nimport {\n  getEasing,\n  getEasingFamily,\n  getTimingFactor,\n  toKeyframeValue,\n} from '../../utils';\n\nconst POWER_TO_SWING_FACTOR_MAP = {\n  soft: 1,\n  medium: 2,\n  hard: 3,\n};\n\nconst DIRECTION_MAP = {\n  top: { x: 0, y: -1 },\n  right: { x: 1, y: 0 },\n  bottom: { x: 0, y: 1 },\n  left: { x: -1, y: 0 },\n};\n\nconst TRANSLATE_DISTANCE = 50;\n\nconst FACTORS_SEQUENCE = [\n  { factor: 1, timeFactor: 0.25 },\n  { factor: -1, timeFactor: 0.5 },\n  { factor: 0.6, timeFactor: 0.5 },\n  { factor: -0.3, timeFactor: 0.5 },\n  { factor: 0.2, timeFactor: 0.5 },\n  { factor: -0.05, timeFactor: 0.5 },\n  { factor: 0, timeFactor: 0.4 },\n];\n\nexport function web(\n  options: TimeAnimationOptions & AnimationExtraOptions,\n  _dom?: DomApi,\n) {\n  return style(options, true);\n}\n\nexport function style(\n  options: TimeAnimationOptions & AnimationExtraOptions,\n  asWeb = false,\n) {\n  const { power, swing = 20, direction = 'top' } = options.namedEffect as Swing;\n\n  const duration = options.duration || 1;\n  const delay = options.delay || 0;\n  const easing = options.easing || 'sineInOut';\n  const ease = getEasingFamily(easing);\n  const [name] = getNames(options);\n\n  const swingDeg =\n    typeof power !== 'undefined'\n      ? 20 * POWER_TO_SWING_FACTOR_MAP[power]\n      : swing;\n\n  const { x, y } = DIRECTION_MAP[direction];\n  const totalDuration = 3.55 * duration + delay;\n  const timingFactor = getTimingFactor(\n    duration,\n    totalDuration - duration,\n  ) as number;\n\n  // Create CSS custom properties for the swing configuration\n  const custom: Record<string, string | number> = {\n    '--motion-swing-deg': `${swingDeg}deg`,\n    '--motion-trans-x': `${x * TRANSLATE_DISTANCE}%`,\n    '--motion-trans-y': `${y * TRANSLATE_DISTANCE}%`,\n    '--motion-ease-in': getEasing(ease.in),\n    '--motion-ease-inout': getEasing(ease.inOut),\n    '--motion-ease-out': getEasing(ease.out),\n  };\n\n  const translateBefore = `translate(${toKeyframeValue(\n    custom,\n    '--motion-trans-x',\n    asWeb,\n  )}, ${toKeyframeValue(custom, '--motion-trans-y', asWeb)})`;\n\n  const translateAfter = `translate(calc(${toKeyframeValue(\n    custom,\n    '--motion-trans-x',\n    asWeb,\n  )} * -1), calc(${toKeyframeValue(custom, '--motion-trans-y', asWeb)} * -1))`;\n\n  let currentOffset = 0;\n  // in case a delay is applied, animate a different sequence which decays to a stop\n  const keyframes = delay\n    ? FACTORS_SEQUENCE.map(({ factor, timeFactor }) => {\n        const keyframeOffset = currentOffset + timeFactor * timingFactor;\n        currentOffset = keyframeOffset;\n\n        return {\n          offset: keyframeOffset,\n          easing: toKeyframeValue(custom, '--motion-ease-inout', asWeb),\n          transform: `rotate(var(--comp-rotate-z, 0deg)) ${translateBefore} rotate(calc(${toKeyframeValue(\n            custom,\n            '--motion-swing-deg',\n            asWeb,\n          )} * ${factor})) ${translateAfter}`,\n        };\n      })\n    : [\n        {\n          offset: 0.25,\n          easing: toKeyframeValue(custom, '--motion-ease-inout', asWeb),\n          transform: `rotate(var(--comp-rotate-z, 0deg)) ${translateBefore} rotate(${toKeyframeValue(\n            custom,\n            '--motion-swing-deg',\n            asWeb,\n          )}) ${translateAfter}`,\n        },\n        {\n          offset: 0.75,\n          easing: toKeyframeValue(custom, '--motion-ease-in', asWeb),\n          transform: `rotate(var(--comp-rotate-z, 0deg)) ${translateBefore} rotate(calc(${toKeyframeValue(\n            custom,\n            '--motion-swing-deg',\n            asWeb,\n          )} * -1)) ${translateAfter}`,\n        },\n      ];\n\n  return [\n    {\n      ...options,\n      name,\n      easing: 'linear',\n      delay: 0,\n      duration: delay ? totalDuration : duration,\n      custom,\n      keyframes: [\n        {\n          offset: 0,\n          easing: toKeyframeValue(custom, '--motion-ease-out', asWeb),\n          transform: `rotateZ(var(--comp-rotate-z, 0deg)) ${translateBefore} rotate(0deg) ${translateAfter}`,\n        },\n        ...keyframes,\n        {\n          offset: 1,\n          transform: `rotateZ(var(--comp-rotate-z, 0deg)) ${translateBefore} rotate(0deg) ${translateAfter}`,\n        },\n      ],\n    },\n  ];\n}\n\nexport function getNames(\n  options: TimeAnimationOptions & AnimationExtraOptions,\n) {\n  const timingFactor = getTimingFactor(options.duration!, options.delay!, true);\n\n  return [`motion-swing-${timingFactor}`];\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/library/ongoing/Wiggle.js

@@ -0,0 +1,88 @@
+"use strict";
+
+exports.__esModule = true;
+exports.getNames = getNames;
+exports.style = style;
+exports.web = web;
+var _utils = require("../../utils");
+const POWER_TO_WIGGLE_FACTOR_MAP = {
+  soft: 1,
+  medium: 2,
+  hard: 4
+};
+const TRANSFORM_KEYFRAMES = [{
+  keyframe: 18,
+  transY: -10,
+  accRotate: 10
+}, {
+  keyframe: 35,
+  transY: 0,
+  accRotate: -18
+}, {
+  keyframe: 53,
+  transY: 0,
+  accRotate: 14
+}, {
+  keyframe: 73,
+  transY: 0,
+  accRotate: -10
+}, {
+  keyframe: 100,
+  transY: 0,
+  accRotate: 4
+}];
+function web(options, _dom) {
+  return style(options, true);
+}
+function style(options, asWeb = false) {
+  const {
+    power,
+    intensity = 0.5
+  } = options.namedEffect;
+  const duration = options.duration || 1;
+  const delay = options.delay || 0;
+  const timingFactor = (0, _utils.getTimingFactor)(duration, delay);
+  const [name] = getNames(options);
+  const responsiveWiggleFactor = (0, _utils.mapRange)(0, 1, POWER_TO_WIGGLE_FACTOR_MAP.soft, POWER_TO_WIGGLE_FACTOR_MAP.hard, intensity);
+  const wiggleFactor = power && POWER_TO_WIGGLE_FACTOR_MAP[power] || responsiveWiggleFactor;
+  let currentRotation = 0;
+
+  // Create CSS custom properties for the wiggle configuration
+  const custom = {
+    '--motion-wiggle-factor': wiggleFactor
+  };
+  const keyframes = TRANSFORM_KEYFRAMES.map(({
+    keyframe,
+    transY,
+    accRotate
+  }) => {
+    const offset = keyframe / 100 * timingFactor;
+    const rotateValue = `calc(var(--comp-rotate-z, 0deg) + ${(0, _utils.roundNumber)(currentRotation + accRotate * wiggleFactor)}deg)`;
+    const translateYValue = `${transY * wiggleFactor}px`;
+    const rotateKey = `--motion-rotate-${keyframe}`;
+    const translateYKey = `--motion-translate-y-${keyframe}`;
+
+    // For non-web usage, add the values to custom properties
+    custom[rotateKey] = rotateValue;
+    custom[translateYKey] = translateYValue;
+    currentRotation += accRotate * wiggleFactor;
+    return {
+      offset,
+      transform: `rotate(${(0, _utils.toKeyframeValue)(custom, rotateKey, asWeb)}) translateY(${(0, _utils.toKeyframeValue)(custom, translateYKey, asWeb)})`
+    };
+  });
+  return [{
+    ...options,
+    name,
+    easing: 'linear',
+    delay: 0,
+    duration: duration + delay,
+    custom,
+    keyframes
+  }];
+}
+function getNames(options) {
+  const timingFactor = (0, _utils.getTimingFactor)(options.duration, options.delay, true);
+  return [`motion-wiggle-${timingFactor}`];
+}
+//# sourceMappingURL=Wiggle.js.map

package/dist/cjs/library/ongoing/Wiggle.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_utils","require","POWER_TO_WIGGLE_FACTOR_MAP","soft","medium","hard","TRANSFORM_KEYFRAMES","keyframe","transY","accRotate","web","options","_dom","style","asWeb","power","intensity","namedEffect","duration","delay","timingFactor","getTimingFactor","name","getNames","responsiveWiggleFactor","mapRange","wiggleFactor","currentRotation","custom","keyframes","map","offset","rotateValue","roundNumber","translateYValue","rotateKey","translateYKey","transform","toKeyframeValue","easing"],"sources":["../../../../src/library/ongoing/Wiggle.ts"],"sourcesContent":["import type {\n  Wiggle,\n  TimeAnimationOptions,\n  DomApi,\n  AnimationExtraOptions,\n} from '../../types';\nimport {\n  getTimingFactor,\n  roundNumber,\n  toKeyframeValue,\n  mapRange,\n} from '../../utils';\n\nconst POWER_TO_WIGGLE_FACTOR_MAP = {\n  soft: 1,\n  medium: 2,\n  hard: 4,\n};\n\nconst TRANSFORM_KEYFRAMES = [\n  { keyframe: 18, transY: -10, accRotate: 10 },\n  { keyframe: 35, transY: 0, accRotate: -18 },\n  { keyframe: 53, transY: 0, accRotate: 14 },\n  { keyframe: 73, transY: 0, accRotate: -10 },\n  { keyframe: 100, transY: 0, accRotate: 4 },\n];\n\nexport function web(\n  options: TimeAnimationOptions & AnimationExtraOptions,\n  _dom?: DomApi,\n) {\n  return style(options, true);\n}\n\nexport function style(\n  options: TimeAnimationOptions & AnimationExtraOptions,\n  asWeb = false,\n) {\n  const { power, intensity = 0.5 } = options.namedEffect as Wiggle;\n  const duration = options.duration || 1;\n  const delay = options.delay || 0;\n  const timingFactor = getTimingFactor(duration, delay) as number;\n  const [name] = getNames(options);\n\n  const responsiveWiggleFactor = mapRange(\n    0,\n    1,\n    POWER_TO_WIGGLE_FACTOR_MAP.soft,\n    POWER_TO_WIGGLE_FACTOR_MAP.hard,\n    intensity,\n  );\n  const wiggleFactor =\n    (power && POWER_TO_WIGGLE_FACTOR_MAP[power]) || responsiveWiggleFactor;\n\n  let currentRotation = 0;\n\n  // Create CSS custom properties for the wiggle configuration\n  const custom: Record<string, string | number> = {\n    '--motion-wiggle-factor': wiggleFactor,\n  };\n\n  const keyframes = TRANSFORM_KEYFRAMES.map(\n    ({ keyframe, transY, accRotate }) => {\n      const offset = (keyframe / 100) * timingFactor;\n      const rotateValue = `calc(var(--comp-rotate-z, 0deg) + ${roundNumber(\n        currentRotation + accRotate * wiggleFactor,\n      )}deg)`;\n      const translateYValue = `${transY * wiggleFactor}px`;\n\n      const rotateKey = `--motion-rotate-${keyframe}`;\n      const translateYKey = `--motion-translate-y-${keyframe}`;\n\n      // For non-web usage, add the values to custom properties\n      custom[rotateKey] = rotateValue;\n      custom[translateYKey] = translateYValue;\n\n      currentRotation += accRotate * wiggleFactor;\n\n      return {\n        offset,\n        transform: `rotate(${toKeyframeValue(\n          custom,\n          rotateKey,\n          asWeb,\n        )}) translateY(${toKeyframeValue(custom, translateYKey, asWeb)})`,\n      };\n    },\n  );\n\n  return [\n    {\n      ...options,\n      name,\n      easing: 'linear',\n      delay: 0,\n      duration: duration + delay,\n      custom,\n      keyframes,\n    },\n  ];\n}\n\nexport function getNames(\n  options: TimeAnimationOptions & AnimationExtraOptions,\n) {\n  const timingFactor = getTimingFactor(options.duration!, options.delay!, true);\n\n  return [`motion-wiggle-${timingFactor}`];\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/library/ongoing/index.js

@@ -0,0 +1,41 @@
+"use strict";
+
+exports.__esModule = true;
+exports.ongoingAnimations = void 0;
+var Bounce = _interopRequireWildcard(require("./Bounce"));
+var Breathe = _interopRequireWildcard(require("./Breathe"));
+var Cross = _interopRequireWildcard(require("./Cross"));
+var Flash = _interopRequireWildcard(require("./Flash"));
+var Flip = _interopRequireWildcard(require("./Flip"));
+var Fold = _interopRequireWildcard(require("./Fold"));
+var Jello = _interopRequireWildcard(require("./Jello"));
+var Poke = _interopRequireWildcard(require("./Poke"));
+var Rubber = _interopRequireWildcard(require("./Rubber"));
+var Pulse = _interopRequireWildcard(require("./Pulse"));
+var Spin = _interopRequireWildcard(require("./Spin"));
+var Swing = _interopRequireWildcard(require("./Swing"));
+var Wiggle = _interopRequireWildcard(require("./Wiggle"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+// import * as Blink from './Blink';
+
+// import * as DVD from './DVD';
+
+const ongoingAnimations = exports.ongoingAnimations = {
+  Bounce,
+  Breathe,
+  // Blink,
+  Cross,
+  // DVD,
+  Flash,
+  Flip,
+  Fold,
+  Jello,
+  Poke,
+  Rubber,
+  Pulse,
+  Spin,
+  Swing,
+  Wiggle
+};
+//# sourceMappingURL=index.js.map

package/dist/cjs/library/ongoing/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Bounce","_interopRequireWildcard","require","Breathe","Cross","Flash","Flip","Fold","Jello","Poke","Rubber","Pulse","Spin","Swing","Wiggle","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ongoingAnimations","exports"],"sources":["../../../../src/library/ongoing/index.ts"],"sourcesContent":["import type { OngoingAnimations } from '../../types';\nimport * as Bounce from './Bounce';\nimport * as Breathe from './Breathe';\n// import * as Blink from './Blink';\nimport * as Cross from './Cross';\n// import * as DVD from './DVD';\nimport * as Flash from './Flash';\nimport * as Flip from './Flip';\nimport * as Fold from './Fold';\nimport * as Jello from './Jello';\nimport * as Poke from './Poke';\nimport * as Rubber from './Rubber';\nimport * as Pulse from './Pulse';\nimport * as Spin from './Spin';\nimport * as Swing from './Swing';\nimport * as Wiggle from './Wiggle';\n\nexport const ongoingAnimations: Partial<OngoingAnimations> = {\n  Bounce,\n  Breathe,\n  // Blink,\n  Cross,\n  // DVD,\n  Flash,\n  Flip,\n  Fold,\n  Jello,\n  Poke,\n  Rubber,\n  Pulse,\n  Spin,\n  Swing,\n  Wiggle,\n};\n"],"mappings":";;;;AACA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,OAAA,GAAAF,uBAAA,CAAAC,OAAA;AAEA,IAAAE,KAAA,GAAAH,uBAAA,CAAAC,OAAA;AAEA,IAAAG,KAAA,GAAAJ,uBAAA,CAAAC,OAAA;AACA,IAAAI,IAAA,GAAAL,uBAAA,CAAAC,OAAA;AACA,IAAAK,IAAA,GAAAN,uBAAA,CAAAC,OAAA;AACA,IAAAM,KAAA,GAAAP,uBAAA,CAAAC,OAAA;AACA,IAAAO,IAAA,GAAAR,uBAAA,CAAAC,OAAA;AACA,IAAAQ,MAAA,GAAAT,uBAAA,CAAAC,OAAA;AACA,IAAAS,KAAA,GAAAV,uBAAA,CAAAC,OAAA;AACA,IAAAU,IAAA,GAAAX,uBAAA,CAAAC,OAAA;AACA,IAAAW,KAAA,GAAAZ,uBAAA,CAAAC,OAAA;AACA,IAAAY,MAAA,GAAAb,uBAAA,CAAAC,OAAA;AAAmC,SAAAa,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAf,wBAAAe,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAZnC;;AAEA;;AAYO,MAAMW,iBAA6C,GAAAC,OAAA,CAAAD,iBAAA,GAAG;EAC3DnC,MAAM;EACNG,OAAO;EACP;EACAC,KAAK;EACL;EACAC,KAAK;EACLC,IAAI;EACJC,IAAI;EACJC,KAAK;EACLC,IAAI;EACJC,MAAM;EACNC,KAAK;EACLC,IAAI;EACJC,KAAK;EACLC;AACF,CAAC","ignoreList":[]}

package/dist/cjs/library/ongoing/test/testUtils.js

@@ -0,0 +1,9 @@
+"use strict";
+
+exports.__esModule = true;
+exports.baseMockOptions = void 0;
+const baseMockOptions = exports.baseMockOptions = {
+  id: 'test-id',
+  type: 'TimeAnimationOptions'
+};
+//# sourceMappingURL=testUtils.js.map

package/dist/cjs/library/ongoing/test/testUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["baseMockOptions","exports","id","type"],"sources":["../../../../../src/library/ongoing/test/testUtils.ts"],"sourcesContent":["import { TimeAnimationOptions } from '../../../types';\n\nexport const baseMockOptions: TimeAnimationOptions = {\n  id: 'test-id',\n  type: 'TimeAnimationOptions',\n};\n"],"mappings":";;;;AAEO,MAAMA,eAAqC,GAAAC,OAAA,CAAAD,eAAA,GAAG;EACnDE,EAAE,EAAE,SAAS;EACbC,IAAI,EAAE;AACR,CAAC","ignoreList":[]}

package/dist/cjs/library/scroll/ArcScroll.js

@@ -0,0 +1,58 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = create;
+const ROTATE_DIRECTION_MAP = {
+  vertical: 'rotateX',
+  horizontal: 'rotateY'
+};
+const ROTATION = 68;
+const RANGES_MAP = {
+  in: {
+    fromValue: -ROTATION,
+    toValue: 0
+  },
+  out: {
+    fromValue: 0,
+    toValue: ROTATION
+  },
+  continuous: {
+    fromValue: -ROTATION,
+    toValue: ROTATION
+  }
+};
+function create(options) {
+  const {
+    direction = 'horizontal',
+    range = 'in'
+  } = options.namedEffect;
+  const fill = range === 'out' ? 'forwards' : range === 'in' ? 'backwards' : options.fill;
+  const rotateAxis = ROTATE_DIRECTION_MAP[direction];
+  const {
+    fromValue,
+    toValue
+  } = RANGES_MAP[range];
+  const easing = 'linear';
+  return [{
+    ...options,
+    fill,
+    easing,
+    keyframes: [{
+      transform: `perspective(500px) translateZ(-300px)  ${rotateAxis}(${fromValue}deg) translateZ(300px) rotate(var(--comp-rotate-z, 0deg))`
+    }, {
+      transform: `perspective(500px) translateZ(-300px) ${rotateAxis}(${toValue}deg) translateZ(300px) rotate(var(--comp-rotate-z, 0deg))`
+    }]
+  }];
+  /*
+   * @keyframes <name> {
+   *   from {
+   *     transform: perspective(500px) translateZ(-300px) <rotateAxis>(<fromValue>deg) translateZ(300px) rotate(<rotation>);
+   *   }
+   *   to {
+   *     transform-origin: 50% 50% -300px;
+   *     transform: perspective(500px) translateZ(-300px) <rotateAxis>(<toValue>deg) translateZ(300px) rotate(<rotation>);
+   *   }
+   * }
+   */
+}
+//# sourceMappingURL=ArcScroll.js.map

package/dist/cjs/library/scroll/ArcScroll.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["ROTATE_DIRECTION_MAP","vertical","horizontal","ROTATION","RANGES_MAP","in","fromValue","toValue","out","continuous","create","options","direction","range","namedEffect","fill","rotateAxis","easing","keyframes","transform"],"sources":["../../../../src/library/scroll/ArcScroll.ts"],"sourcesContent":["import type {\n  ScrubAnimationOptions,\n  ArcScroll,\n  AnimationFillMode,\n} from '../../types';\n\nconst ROTATE_DIRECTION_MAP = {\n  vertical: 'rotateX',\n  horizontal: 'rotateY',\n};\n\nconst ROTATION = 68;\n\nconst RANGES_MAP = {\n  in: { fromValue: -ROTATION, toValue: 0 },\n  out: { fromValue: 0, toValue: ROTATION },\n  continuous: { fromValue: -ROTATION, toValue: ROTATION },\n};\n\nexport default function create(options: ScrubAnimationOptions) {\n  const { direction = 'horizontal', range = 'in' } =\n    options.namedEffect as ArcScroll;\n  const fill = (\n    range === 'out' ? 'forwards' : range === 'in' ? 'backwards' : options.fill\n  ) as AnimationFillMode;\n\n  const rotateAxis = ROTATE_DIRECTION_MAP[direction];\n  const { fromValue, toValue } = RANGES_MAP[range];\n  const easing = 'linear';\n\n  return [\n    {\n      ...options,\n      fill,\n      easing,\n      keyframes: [\n        {\n          transform: `perspective(500px) translateZ(-300px)  ${rotateAxis}(${fromValue}deg) translateZ(300px) rotate(var(--comp-rotate-z, 0deg))`,\n        },\n        {\n          transform: `perspective(500px) translateZ(-300px) ${rotateAxis}(${toValue}deg) translateZ(300px) rotate(var(--comp-rotate-z, 0deg))`,\n        },\n      ],\n    },\n  ];\n  /*\n   * @keyframes <name> {\n   *   from {\n   *     transform: perspective(500px) translateZ(-300px) <rotateAxis>(<fromValue>deg) translateZ(300px) rotate(<rotation>);\n   *   }\n   *   to {\n   *     transform-origin: 50% 50% -300px;\n   *     transform: perspective(500px) translateZ(-300px) <rotateAxis>(<toValue>deg) translateZ(300px) rotate(<rotation>);\n   *   }\n   * }\n   */\n}\n"],"mappings":";;;;AAMA,MAAMA,oBAAoB,GAAG;EAC3BC,QAAQ,EAAE,SAAS;EACnBC,UAAU,EAAE;AACd,CAAC;AAED,MAAMC,QAAQ,GAAG,EAAE;AAEnB,MAAMC,UAAU,GAAG;EACjBC,EAAE,EAAE;IAAEC,SAAS,EAAE,CAACH,QAAQ;IAAEI,OAAO,EAAE;EAAE,CAAC;EACxCC,GAAG,EAAE;IAAEF,SAAS,EAAE,CAAC;IAAEC,OAAO,EAAEJ;EAAS,CAAC;EACxCM,UAAU,EAAE;IAAEH,SAAS,EAAE,CAACH,QAAQ;IAAEI,OAAO,EAAEJ;EAAS;AACxD,CAAC;AAEc,SAASO,MAAMA,CAACC,OAA8B,EAAE;EAC7D,MAAM;IAAEC,SAAS,GAAG,YAAY;IAAEC,KAAK,GAAG;EAAK,CAAC,GAC9CF,OAAO,CAACG,WAAwB;EAClC,MAAMC,IAAI,GACRF,KAAK,KAAK,KAAK,GAAG,UAAU,GAAGA,KAAK,KAAK,IAAI,GAAG,WAAW,GAAGF,OAAO,CAACI,IAClD;EAEtB,MAAMC,UAAU,GAAGhB,oBAAoB,CAACY,SAAS,CAAC;EAClD,MAAM;IAAEN,SAAS;IAAEC;EAAQ,CAAC,GAAGH,UAAU,CAACS,KAAK,CAAC;EAChD,MAAMI,MAAM,GAAG,QAAQ;EAEvB,OAAO,CACL;IACE,GAAGN,OAAO;IACVI,IAAI;IACJE,MAAM;IACNC,SAAS,EAAE,CACT;MACEC,SAAS,EAAE,0CAA0CH,UAAU,IAAIV,SAAS;IAC9E,CAAC,EACD;MACEa,SAAS,EAAE,yCAAyCH,UAAU,IAAIT,OAAO;IAC3E,CAAC;EAEL,CAAC,CACF;EACD;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","ignoreList":[]}

package/dist/cjs/library/scroll/BlurScroll.js

@@ -0,0 +1,43 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = create;
+const BLUR_POWER_MAP = {
+  soft: 6,
+  medium: 25,
+  hard: 50
+};
+function create(options) {
+  const {
+    blur = 6,
+    power,
+    range = 'in'
+  } = options.namedEffect;
+  const blurFactor = power && BLUR_POWER_MAP[power] ? BLUR_POWER_MAP[power] : blur;
+  const fromValue = range === 'out' ? 0 : blurFactor;
+  const toValue = range === 'out' ? blurFactor : 0;
+  const easing = 'linear';
+  const fill = range === 'out' ? 'forwards' : range === 'in' ? 'backwards' : options.fill;
+  return [{
+    ...options,
+    fill,
+    easing,
+    composite: 'add',
+    keyframes: [{
+      filter: `blur(${fromValue}px)`
+    }, {
+      filter: `blur(${toValue}px)`
+    }]
+  }];
+  /*
+   * @keyframes <name> {
+   *   from {
+   *     filter: blur(<fromValue>px);
+   *   }
+   *   to {
+   *     filter: blur(<toValue>px);
+   *   }
+   * }
+   */
+}
+//# sourceMappingURL=BlurScroll.js.map

package/dist/cjs/library/scroll/BlurScroll.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["BLUR_POWER_MAP","soft","medium","hard","create","options","blur","power","range","namedEffect","blurFactor","fromValue","toValue","easing","fill","composite","keyframes","filter"],"sources":["../../../../src/library/scroll/BlurScroll.ts"],"sourcesContent":["import type {\n  AnimationFillMode,\n  BlurScroll,\n  ScrubAnimationOptions,\n} from '../../types';\n\nconst BLUR_POWER_MAP = {\n  soft: 6,\n  medium: 25,\n  hard: 50,\n};\n\nexport default function create(options: ScrubAnimationOptions) {\n  const { blur = 6, power, range = 'in' } = options.namedEffect as BlurScroll;\n  const blurFactor =\n    power && BLUR_POWER_MAP[power] ? BLUR_POWER_MAP[power] : blur;\n\n  const fromValue = range === 'out' ? 0 : blurFactor;\n  const toValue = range === 'out' ? blurFactor : 0;\n  const easing = 'linear';\n  const fill = (\n    range === 'out' ? 'forwards' : range === 'in' ? 'backwards' : options.fill\n  ) as AnimationFillMode;\n\n  return [\n    {\n      ...options,\n      fill,\n      easing,\n      composite: 'add' as const,\n      keyframes: [\n        {\n          filter: `blur(${fromValue}px)`,\n        },\n        {\n          filter: `blur(${toValue}px)`,\n        },\n      ],\n    },\n  ];\n  /*\n   * @keyframes <name> {\n   *   from {\n   *     filter: blur(<fromValue>px);\n   *   }\n   *   to {\n   *     filter: blur(<toValue>px);\n   *   }\n   * }\n   */\n}\n"],"mappings":";;;;AAMA,MAAMA,cAAc,GAAG;EACrBC,IAAI,EAAE,CAAC;EACPC,MAAM,EAAE,EAAE;EACVC,IAAI,EAAE;AACR,CAAC;AAEc,SAASC,MAAMA,CAACC,OAA8B,EAAE;EAC7D,MAAM;IAAEC,IAAI,GAAG,CAAC;IAAEC,KAAK;IAAEC,KAAK,GAAG;EAAK,CAAC,GAAGH,OAAO,CAACI,WAAyB;EAC3E,MAAMC,UAAU,GACdH,KAAK,IAAIP,cAAc,CAACO,KAAK,CAAC,GAAGP,cAAc,CAACO,KAAK,CAAC,GAAGD,IAAI;EAE/D,MAAMK,SAAS,GAAGH,KAAK,KAAK,KAAK,GAAG,CAAC,GAAGE,UAAU;EAClD,MAAME,OAAO,GAAGJ,KAAK,KAAK,KAAK,GAAGE,UAAU,GAAG,CAAC;EAChD,MAAMG,MAAM,GAAG,QAAQ;EACvB,MAAMC,IAAI,GACRN,KAAK,KAAK,KAAK,GAAG,UAAU,GAAGA,KAAK,KAAK,IAAI,GAAG,WAAW,GAAGH,OAAO,CAACS,IAClD;EAEtB,OAAO,CACL;IACE,GAAGT,OAAO;IACVS,IAAI;IACJD,MAAM;IACNE,SAAS,EAAE,KAAc;IACzBC,SAAS,EAAE,CACT;MACEC,MAAM,EAAE,QAAQN,SAAS;IAC3B,CAAC,EACD;MACEM,MAAM,EAAE,QAAQL,OAAO;IACzB,CAAC;EAEL,CAAC,CACF;EACD;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","ignoreList":[]}

package/dist/cjs/library/scroll/FadeScroll.js

@@ -0,0 +1,36 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = create;
+function create(options) {
+  const {
+    opacity = 0,
+    range = 'in'
+  } = options.namedEffect;
+  const isOut = range === 'out';
+  const fromValue = isOut ? 'var(--comp-opacity, 1)' : opacity;
+  const toValue = isOut ? opacity : 'var(--comp-opacity, 1)';
+  const easing = 'linear';
+  const fill = range === 'out' ? 'forwards' : range === 'in' ? 'backwards' : options.fill;
+  return [{
+    ...options,
+    fill,
+    easing,
+    keyframes: [{
+      opacity: fromValue
+    }, {
+      opacity: toValue
+    }]
+  }];
+  /*
+   * @keyframes <name> {
+   *   from {
+   *     opacity: <fromValue>;
+   *   }
+   *   to {
+   *     opacity: <toValue>;
+   *   }
+   * }
+   */
+}
+//# sourceMappingURL=FadeScroll.js.map

package/dist/cjs/library/scroll/FadeScroll.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["create","options","opacity","range","namedEffect","isOut","fromValue","toValue","easing","fill","keyframes"],"sources":["../../../../src/library/scroll/FadeScroll.ts"],"sourcesContent":["import type {\n  FadeScroll,\n  ScrubAnimationOptions,\n  AnimationFillMode,\n} from '../../types';\n\nexport default function create(options: ScrubAnimationOptions) {\n  const { opacity = 0, range = 'in' } = options.namedEffect as FadeScroll;\n  const isOut = range === 'out';\n  const fromValue = isOut ? 'var(--comp-opacity, 1)' : opacity;\n  const toValue = isOut ? opacity : 'var(--comp-opacity, 1)';\n  const easing = 'linear';\n  const fill = (\n    range === 'out' ? 'forwards' : range === 'in' ? 'backwards' : options.fill\n  ) as AnimationFillMode;\n\n  return [\n    {\n      ...options,\n      fill,\n      easing,\n      keyframes: [\n        {\n          opacity: fromValue,\n        },\n        {\n          opacity: toValue,\n        },\n      ],\n    },\n  ];\n  /*\n   * @keyframes <name> {\n   *   from {\n   *     opacity: <fromValue>;\n   *   }\n   *   to {\n   *     opacity: <toValue>;\n   *   }\n   * }\n   */\n}\n"],"mappings":";;;;AAMe,SAASA,MAAMA,CAACC,OAA8B,EAAE;EAC7D,MAAM;IAAEC,OAAO,GAAG,CAAC;IAAEC,KAAK,GAAG;EAAK,CAAC,GAAGF,OAAO,CAACG,WAAyB;EACvE,MAAMC,KAAK,GAAGF,KAAK,KAAK,KAAK;EAC7B,MAAMG,SAAS,GAAGD,KAAK,GAAG,wBAAwB,GAAGH,OAAO;EAC5D,MAAMK,OAAO,GAAGF,KAAK,GAAGH,OAAO,GAAG,wBAAwB;EAC1D,MAAMM,MAAM,GAAG,QAAQ;EACvB,MAAMC,IAAI,GACRN,KAAK,KAAK,KAAK,GAAG,UAAU,GAAGA,KAAK,KAAK,IAAI,GAAG,WAAW,GAAGF,OAAO,CAACQ,IAClD;EAEtB,OAAO,CACL;IACE,GAAGR,OAAO;IACVQ,IAAI;IACJD,MAAM;IACNE,SAAS,EAAE,CACT;MACER,OAAO,EAAEI;IACX,CAAC,EACD;MACEJ,OAAO,EAAEK;IACX,CAAC;EAEL,CAAC,CACF;EACD;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","ignoreList":[]}

package/dist/cjs/library/scroll/FlipScroll.js

@@ -0,0 +1,50 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = create;
+const ROTATE_POWER_MAP = {
+  soft: 60,
+  medium: 120,
+  hard: 420
+};
+const ROTATE_DIRECTION_MAP = {
+  vertical: 'rotateX',
+  horizontal: 'rotateY'
+};
+function create(options) {
+  const {
+    rotate = 240,
+    direction = 'horizontal',
+    power,
+    range = 'continuous'
+  } = options.namedEffect;
+  const rotationAxis = ROTATE_DIRECTION_MAP[direction];
+  const flipValue = power && ROTATE_POWER_MAP[power] ? ROTATE_POWER_MAP[power] : rotate;
+
+  // const { fromValue, toValue } = rangeValues[range](rotation);
+  const fromValue = range === 'out' ? 0 : -flipValue;
+  const toValue = range === 'in' ? 0 : flipValue;
+  const easing = 'linear';
+  const fill = range === 'out' ? 'forwards' : range === 'in' ? 'backwards' : options.fill;
+  return [{
+    ...options,
+    fill,
+    easing,
+    keyframes: [{
+      transform: `perspective(800px) ${rotationAxis}(${fromValue}deg) rotate(var(--comp-rotate-z, 0deg))`
+    }, {
+      transform: `perspective(800px) ${rotationAxis}(${toValue}deg) rotate(var(--comp-rotate-z, 0deg))`
+    }]
+  }];
+  /*
+   * @keyframes <name> {
+   *   from {
+   *     transform: perspective(800px) <rotationAxis>(fromValue) rotate(<rotation>);
+   *   }
+   *   to {
+   *     transform: perspective(800px) <rotationAxis>(toValue) rotate(<rotation>);
+   *   }
+   * }
+   */
+}
+//# sourceMappingURL=FlipScroll.js.map

package/dist/cjs/library/scroll/FlipScroll.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["ROTATE_POWER_MAP","soft","medium","hard","ROTATE_DIRECTION_MAP","vertical","horizontal","create","options","rotate","direction","power","range","namedEffect","rotationAxis","flipValue","fromValue","toValue","easing","fill","keyframes","transform"],"sources":["../../../../src/library/scroll/FlipScroll.ts"],"sourcesContent":["import type {\n  AnimationFillMode,\n  FlipScroll,\n  ScrubAnimationOptions,\n} from '../../types';\n\nconst ROTATE_POWER_MAP = {\n  soft: 60,\n  medium: 120,\n  hard: 420,\n};\n\nconst ROTATE_DIRECTION_MAP = {\n  vertical: 'rotateX',\n  horizontal: 'rotateY',\n};\n\nexport default function create(options: ScrubAnimationOptions) {\n  const {\n    rotate = 240,\n    direction = 'horizontal',\n    power,\n    range = 'continuous',\n  } = options.namedEffect as FlipScroll;\n\n  const rotationAxis = ROTATE_DIRECTION_MAP[direction];\n  const flipValue =\n    power && ROTATE_POWER_MAP[power] ? ROTATE_POWER_MAP[power] : rotate;\n\n  // const { fromValue, toValue } = rangeValues[range](rotation);\n  const fromValue = range === 'out' ? 0 : -flipValue;\n  const toValue = range === 'in' ? 0 : flipValue;\n  const easing = 'linear';\n  const fill = (\n    range === 'out' ? 'forwards' : range === 'in' ? 'backwards' : options.fill\n  ) as AnimationFillMode;\n\n  return [\n    {\n      ...options,\n      fill,\n      easing,\n      keyframes: [\n        {\n          transform: `perspective(800px) ${rotationAxis}(${fromValue}deg) rotate(var(--comp-rotate-z, 0deg))`,\n        },\n        {\n          transform: `perspective(800px) ${rotationAxis}(${toValue}deg) rotate(var(--comp-rotate-z, 0deg))`,\n        },\n      ],\n    },\n  ];\n  /*\n   * @keyframes <name> {\n   *   from {\n   *     transform: perspective(800px) <rotationAxis>(fromValue) rotate(<rotation>);\n   *   }\n   *   to {\n   *     transform: perspective(800px) <rotationAxis>(toValue) rotate(<rotation>);\n   *   }\n   * }\n   */\n}\n"],"mappings":";;;;AAMA,MAAMA,gBAAgB,GAAG;EACvBC,IAAI,EAAE,EAAE;EACRC,MAAM,EAAE,GAAG;EACXC,IAAI,EAAE;AACR,CAAC;AAED,MAAMC,oBAAoB,GAAG;EAC3BC,QAAQ,EAAE,SAAS;EACnBC,UAAU,EAAE;AACd,CAAC;AAEc,SAASC,MAAMA,CAACC,OAA8B,EAAE;EAC7D,MAAM;IACJC,MAAM,GAAG,GAAG;IACZC,SAAS,GAAG,YAAY;IACxBC,KAAK;IACLC,KAAK,GAAG;EACV,CAAC,GAAGJ,OAAO,CAACK,WAAyB;EAErC,MAAMC,YAAY,GAAGV,oBAAoB,CAACM,SAAS,CAAC;EACpD,MAAMK,SAAS,GACbJ,KAAK,IAAIX,gBAAgB,CAACW,KAAK,CAAC,GAAGX,gBAAgB,CAACW,KAAK,CAAC,GAAGF,MAAM;;EAErE;EACA,MAAMO,SAAS,GAAGJ,KAAK,KAAK,KAAK,GAAG,CAAC,GAAG,CAACG,SAAS;EAClD,MAAME,OAAO,GAAGL,KAAK,KAAK,IAAI,GAAG,CAAC,GAAGG,SAAS;EAC9C,MAAMG,MAAM,GAAG,QAAQ;EACvB,MAAMC,IAAI,GACRP,KAAK,KAAK,KAAK,GAAG,UAAU,GAAGA,KAAK,KAAK,IAAI,GAAG,WAAW,GAAGJ,OAAO,CAACW,IAClD;EAEtB,OAAO,CACL;IACE,GAAGX,OAAO;IACVW,IAAI;IACJD,MAAM;IACNE,SAAS,EAAE,CACT;MACEC,SAAS,EAAE,sBAAsBP,YAAY,IAAIE,SAAS;IAC5D,CAAC,EACD;MACEK,SAAS,EAAE,sBAAsBP,YAAY,IAAIG,OAAO;IAC1D,CAAC;EAEL,CAAC,CACF;EACD;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","ignoreList":[]}