@wix/motion 1.659.0 → 2.0.0-rc.2

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

@@ -1,75 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-exports.getNames = getNames;
-exports.style = style;
-exports.web = web;
-var _utils = require("../../utils");
-function getNames(_) {
-  return ['motion-fadeIn', 'motion-shapeIn'];
-}
-const shapes = {
-  diamond: {
-    start: 'polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%)',
-    end: 'polygon(50% -50%, 150% 50%, 50% 150%, -50% 50%)'
-  },
-  window: {
-    start: 'inset(50% round 50% 50% 0% 0%)',
-    end: 'inset(-20% round 50% 50% 0% 0%)'
-  },
-  rectangle: {
-    start: 'inset(50%)',
-    end: 'inset(0%)'
-  },
-  circle: {
-    start: 'circle(0%)',
-    end: 'circle(75%)'
-  },
-  ellipse: {
-    start: 'ellipse(0% 0%)',
-    end: 'ellipse(75% 75%)'
-  }
-};
-function web(options) {
-  return style(options, true);
-}
-function style(options, asWeb = false) {
-  const {
-    shape = 'rectangle'
-  } = options.namedEffect;
-  const [fadeIn, shapeIn] = getNames(options);
-  const easing = options.easing || 'cubicInOut';
-  const {
-    start,
-    end
-  } = shapes[shape];
-  const custom = {
-    '--motion-shape-start': start,
-    '--motion-shape-end': end
-  };
-  return [{
-    ...options,
-    name: fadeIn,
-    easing: 'quadOut',
-    duration: options.duration * 0.8,
-    custom: {},
-    keyframes: [{
-      offset: 0,
-      opacity: 0
-    }, {
-      opacity: 'var(--comp-opacity, 1)'
-    }]
-  }, {
-    ...options,
-    name: shapeIn,
-    easing,
-    custom,
-    keyframes: [{
-      offset: _utils.INITIAL_FRAME_OFFSET,
-      clipPath: (0, _utils.toKeyframeValue)(custom, '--motion-shape-start', asWeb)
-    }, {
-      clipPath: (0, _utils.toKeyframeValue)(custom, '--motion-shape-end', asWeb)
-    }]
-  }];
-}
-//# sourceMappingURL=ShapeIn.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["_utils","require","getNames","_","shapes","diamond","start","end","window","rectangle","circle","ellipse","web","options","style","asWeb","shape","namedEffect","fadeIn","shapeIn","easing","custom","name","duration","keyframes","offset","opacity","INITIAL_FRAME_OFFSET","clipPath","toKeyframeValue"],"sources":["../../../../src/library/entrance/ShapeIn.ts"],"sourcesContent":["import type { Shape, ShapeIn, TimeAnimationOptions } from '../../types';\nimport { INITIAL_FRAME_OFFSET, toKeyframeValue } from '../../utils';\n\nexport function getNames(_: TimeAnimationOptions) {\n  return ['motion-fadeIn', 'motion-shapeIn'];\n}\n\nconst shapes: Record<Shape, { start: string; end: string }> = {\n  diamond: {\n    start: 'polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%)',\n    end: 'polygon(50% -50%, 150% 50%, 50% 150%, -50% 50%)',\n  },\n  window: {\n    start: 'inset(50% round 50% 50% 0% 0%)',\n    end: 'inset(-20% round 50% 50% 0% 0%)',\n  },\n  rectangle: { start: 'inset(50%)', end: 'inset(0%)' },\n  circle: { start: 'circle(0%)', end: 'circle(75%)' },\n  ellipse: { start: 'ellipse(0% 0%)', end: 'ellipse(75% 75%)' },\n};\n\nexport function web(options: TimeAnimationOptions) {\n  return style(options, true);\n}\n\nexport function style(options: TimeAnimationOptions, asWeb = false) {\n  const { shape = 'rectangle' } = options.namedEffect as ShapeIn;\n  const [fadeIn, shapeIn] = getNames(options);\n  const easing = options.easing || 'cubicInOut';\n\n  const { start, end } = shapes[shape];\n\n  const custom = {\n    '--motion-shape-start': start,\n    '--motion-shape-end': end,\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: shapeIn,\n      easing,\n      custom,\n      keyframes: [\n        {\n          offset: INITIAL_FRAME_OFFSET,\n          clipPath: toKeyframeValue(custom, '--motion-shape-start', asWeb),\n        },\n        {\n          clipPath: toKeyframeValue(custom, '--motion-shape-end', asWeb),\n        },\n      ],\n    },\n  ];\n}\n"],"mappings":";;;;;;AACA,IAAAA,MAAA,GAAAC,OAAA;AAEO,SAASC,QAAQA,CAACC,CAAuB,EAAE;EAChD,OAAO,CAAC,eAAe,EAAE,gBAAgB,CAAC;AAC5C;AAEA,MAAMC,MAAqD,GAAG;EAC5DC,OAAO,EAAE;IACPC,KAAK,EAAE,6CAA6C;IACpDC,GAAG,EAAE;EACP,CAAC;EACDC,MAAM,EAAE;IACNF,KAAK,EAAE,gCAAgC;IACvCC,GAAG,EAAE;EACP,CAAC;EACDE,SAAS,EAAE;IAAEH,KAAK,EAAE,YAAY;IAAEC,GAAG,EAAE;EAAY,CAAC;EACpDG,MAAM,EAAE;IAAEJ,KAAK,EAAE,YAAY;IAAEC,GAAG,EAAE;EAAc,CAAC;EACnDI,OAAO,EAAE;IAAEL,KAAK,EAAE,gBAAgB;IAAEC,GAAG,EAAE;EAAmB;AAC9D,CAAC;AAEM,SAASK,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,GAAG;EAAY,CAAC,GAAGH,OAAO,CAACI,WAAsB;EAC9D,MAAM,CAACC,MAAM,EAAEC,OAAO,CAAC,GAAGjB,QAAQ,CAACW,OAAO,CAAC;EAC3C,MAAMO,MAAM,GAAGP,OAAO,CAACO,MAAM,IAAI,YAAY;EAE7C,MAAM;IAAEd,KAAK;IAAEC;EAAI,CAAC,GAAGH,MAAM,CAACY,KAAK,CAAC;EAEpC,MAAMK,MAAM,GAAG;IACb,sBAAsB,EAAEf,KAAK;IAC7B,oBAAoB,EAAEC;EACxB,CAAC;EAED,OAAO,CACL;IACE,GAAGM,OAAO;IACVS,IAAI,EAAEJ,MAAM;IACZE,MAAM,EAAE,SAAS;IACjBG,QAAQ,EAAEV,OAAO,CAACU,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,GAAGb,OAAO;IACVS,IAAI,EAAEH,OAAO;IACbC,MAAM;IACNC,MAAM;IACNG,SAAS,EAAE,CACT;MACEC,MAAM,EAAEE,2BAAoB;MAC5BC,QAAQ,EAAE,IAAAC,sBAAe,EAACR,MAAM,EAAE,sBAAsB,EAAEN,KAAK;IACjE,CAAC,EACD;MACEa,QAAQ,EAAE,IAAAC,sBAAe,EAACR,MAAM,EAAE,oBAAoB,EAAEN,KAAK;IAC/D,CAAC;EAEL,CAAC,CACF;AACH","ignoreList":[]}

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

@@ -1,48 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-exports.getNames = getNames;
-exports.style = style;
-exports.web = web;
-var _utils = require("../../utils");
-function getNames(_) {
-  return ['motion-shuttersIn'];
-}
-function web(options) {
-  return style(options, true);
-}
-function style(options, asWeb = false) {
-  const {
-    direction = 'right',
-    shutters = 12,
-    staggered = true
-  } = options.namedEffect;
-  const [shuttersIn] = getNames(options);
-  const {
-    clipStart,
-    clipEnd
-  } = (0, _utils.getShuttersClipPaths)(direction, shutters, staggered);
-  const custom = {
-    '--motion-shutters-start': clipStart,
-    '--motion-shutters-end': clipEnd
-  };
-  const easing = (0, _utils.getEasing)(options.easing || 'sineIn');
-  return [{
-    ...options,
-    easing,
-    name: shuttersIn,
-    custom,
-    keyframes: [{
-      offset: 0,
-      opacity: 0,
-      easing: 'step-end'
-    }, {
-      offset: _utils.INITIAL_FRAME_OFFSET,
-      opacity: 'var(--comp-opacity, 1)',
-      clipPath: (0, _utils.toKeyframeValue)(custom, '--motion-shutters-start', asWeb)
-    }, {
-      clipPath: (0, _utils.toKeyframeValue)(custom, '--motion-shutters-end', asWeb)
-    }]
-  }];
-}
-//# sourceMappingURL=ShuttersIn.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["_utils","require","getNames","_","web","options","style","asWeb","direction","shutters","staggered","namedEffect","shuttersIn","clipStart","clipEnd","getShuttersClipPaths","custom","easing","getEasing","name","keyframes","offset","opacity","INITIAL_FRAME_OFFSET","clipPath","toKeyframeValue"],"sources":["../../../../src/library/entrance/ShuttersIn.ts"],"sourcesContent":["import { ShuttersIn, TimeAnimationOptions } from '../../types';\nimport {\n  getShuttersClipPaths,\n  getEasing,\n  toKeyframeValue,\n  INITIAL_FRAME_OFFSET,\n} from '../../utils';\n\nexport function getNames(_: TimeAnimationOptions) {\n  return ['motion-shuttersIn'];\n}\n\nexport function web(options: TimeAnimationOptions) {\n  return style(options, true);\n}\n\nexport function style(options: TimeAnimationOptions, asWeb = false) {\n  const {\n    direction = 'right',\n    shutters = 12,\n    staggered = true,\n  } = options.namedEffect as ShuttersIn;\n  const [shuttersIn] = getNames(options);\n\n  const { clipStart, clipEnd } = getShuttersClipPaths(\n    direction,\n    shutters,\n    staggered,\n  );\n\n  const custom = {\n    '--motion-shutters-start': clipStart,\n    '--motion-shutters-end': clipEnd,\n  };\n\n  const easing = getEasing(options.easing || 'sineIn');\n\n  return [\n    {\n      ...options,\n      easing,\n      name: shuttersIn,\n      custom,\n      keyframes: [\n        {\n          offset: 0,\n          opacity: 0,\n          easing: 'step-end',\n        },\n        {\n          offset: INITIAL_FRAME_OFFSET,\n          opacity: 'var(--comp-opacity, 1)',\n          clipPath: toKeyframeValue(custom, '--motion-shutters-start', asWeb),\n        },\n        {\n          clipPath: toKeyframeValue(custom, '--motion-shutters-end', asWeb),\n        },\n      ],\n    },\n  ];\n}\n"],"mappings":";;;;;;AACA,IAAAA,MAAA,GAAAC,OAAA;AAOO,SAASC,QAAQA,CAACC,CAAuB,EAAE;EAChD,OAAO,CAAC,mBAAmB,CAAC;AAC9B;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;IACJC,SAAS,GAAG,OAAO;IACnBC,QAAQ,GAAG,EAAE;IACbC,SAAS,GAAG;EACd,CAAC,GAAGL,OAAO,CAACM,WAAyB;EACrC,MAAM,CAACC,UAAU,CAAC,GAAGV,QAAQ,CAACG,OAAO,CAAC;EAEtC,MAAM;IAAEQ,SAAS;IAAEC;EAAQ,CAAC,GAAG,IAAAC,2BAAoB,EACjDP,SAAS,EACTC,QAAQ,EACRC,SACF,CAAC;EAED,MAAMM,MAAM,GAAG;IACb,yBAAyB,EAAEH,SAAS;IACpC,uBAAuB,EAAEC;EAC3B,CAAC;EAED,MAAMG,MAAM,GAAG,IAAAC,gBAAS,EAACb,OAAO,CAACY,MAAM,IAAI,QAAQ,CAAC;EAEpD,OAAO,CACL;IACE,GAAGZ,OAAO;IACVY,MAAM;IACNE,IAAI,EAAEP,UAAU;IAChBI,MAAM;IACNI,SAAS,EAAE,CACT;MACEC,MAAM,EAAE,CAAC;MACTC,OAAO,EAAE,CAAC;MACVL,MAAM,EAAE;IACV,CAAC,EACD;MACEI,MAAM,EAAEE,2BAAoB;MAC5BD,OAAO,EAAE,wBAAwB;MACjCE,QAAQ,EAAE,IAAAC,sBAAe,EAACT,MAAM,EAAE,yBAAyB,EAAET,KAAK;IACpE,CAAC,EACD;MACEiB,QAAQ,EAAE,IAAAC,sBAAe,EAACT,MAAM,EAAE,uBAAuB,EAAET,KAAK;IAClE,CAAC;EAEL,CAAC,CACF;AACH","ignoreList":[]}

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

@@ -1,140 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-exports.getNames = getNames;
-exports.prepare = prepare;
-exports.style = style;
-exports.web = web;
-var _utils = require("../../utils");
-function getNames(options) {
-  const {
-    power
-  } = options.namedEffect;
-  return power !== 'hard' ? ['motion-slideIn', 'motion-fadeIn'] : ['motion-slideIn'];
-}
-const PARAM_MAP = {
-  top: {
-    dx: 0,
-    dy: -1,
-    clip: 'bottom'
-  },
-  right: {
-    dx: 1,
-    dy: 0,
-    clip: 'left'
-  },
-  bottom: {
-    dx: 0,
-    dy: 1,
-    clip: 'top'
-  },
-  left: {
-    dx: -1,
-    dy: 0,
-    clip: 'right'
-  }
-};
-const DIRECTIONS = ['top', 'right', 'bottom', 'left'];
-const INITIAL_TRANSLATE_MAP = {
-  soft: 0.2,
-  medium: 0.8,
-  hard: 1
-};
-function web(options, dom) {
-  const animations = style(options);
-  prepare(options, dom);
-  return animations;
-}
-function style(options) {
-  const {
-    direction = 'left',
-    power,
-    initialTranslate = 1
-  } = options.namedEffect;
-  const [slideIn, fadeIn] = getNames(options);
-  const easing = options.easing || 'cubicInOut';
-  const scale = power && INITIAL_TRANSLATE_MAP[power] || initialTranslate;
-  const minimum = 100 - scale * 100;
-  const start = (0, _utils.getClipPolygonParams)({
-    direction,
-    minimum
-  });
-  const clipEnd = (0, _utils.getClipPolygonParams)({
-    direction: 'initial'
-  });
-  const custom = {
-    '--motion-clip-start': start,
-    '--motion-translate-x': `${PARAM_MAP[direction].dx * 100}%`,
-    '--motion-translate-y': `${PARAM_MAP[direction].dy * 100}%`
-  };
-  const animations = [{
-    ...options,
-    name: slideIn,
-    easing,
-    custom,
-    keyframes: [{
-      offset: _utils.INITIAL_FRAME_OFFSET,
-      opacity: 'var(--comp-opacity, 1)',
-      transform: `rotate(var(--comp-rotate-z, 0deg)) translate(var(--motion-translate-x, -100%), var(--motion-translate-y, 0%))`,
-      clipPath: `var(--motion-clip-start, ${custom['--motion-clip-start']})`
-    }, {
-      transform: 'rotate(var(--comp-rotate-z, 0deg)) translate(0px, 0px)',
-      clipPath: clipEnd
-    }]
-  }];
-  if (power !== 'hard') {
-    animations.push({
-      ...options,
-      easing: 'cubicInOut',
-      name: fadeIn,
-      // @ts-expect-error
-      custom: {},
-      keyframes: [
-      // @ts-expect-error
-      {
-        offset: 0,
-        opacity: 0
-      },
-      // @ts-expect-error
-      {
-        opacity: 'var(--comp-opacity, 1)'
-      }]
-    });
-  } else {
-    animations[0].keyframes.unshift({
-      offset: 0,
-      // @ts-expect-error
-      opacity: 0,
-      easing: 'step-end'
-    });
-  }
-  return animations;
-}
-function prepare(options, dom) {
-  const {
-    direction = 'left',
-    power,
-    initialTranslate = 1
-  } = options.namedEffect;
-  const scale = power && INITIAL_TRANSLATE_MAP[power] || initialTranslate;
-  const minimum = 100 - scale * 100;
-  if (dom) {
-    let rotation = 0;
-    dom.measure(target => {
-      if (!target) {
-        return;
-      }
-      rotation = parseInt(getComputedStyle(target).getPropertyValue('--comp-rotate-z') || '0deg', 10);
-    });
-    dom.mutate(target => {
-      const adjustedDirection = (0, _utils.getAdjustedDirection)(DIRECTIONS, direction, rotation);
-      target == null || target.style.setProperty('--motion-clip-start', (0, _utils.getClipPolygonParams)({
-        direction: PARAM_MAP[adjustedDirection].clip,
-        minimum
-      }));
-      target == null || target.style.setProperty('--motion-translate-x', `${PARAM_MAP[adjustedDirection].dx * 100}%`);
-      target == null || target.style.setProperty('--motion-translate-y', `${PARAM_MAP[adjustedDirection].dy * 100}%`);
-    });
-  }
-}
-//# sourceMappingURL=SlideIn.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["_utils","require","getNames","options","power","namedEffect","PARAM_MAP","top","dx","dy","clip","right","bottom","left","DIRECTIONS","INITIAL_TRANSLATE_MAP","soft","medium","hard","web","dom","animations","style","prepare","direction","initialTranslate","slideIn","fadeIn","easing","scale","minimum","start","getClipPolygonParams","clipEnd","custom","name","keyframes","offset","INITIAL_FRAME_OFFSET","opacity","transform","clipPath","push","unshift","rotation","measure","target","parseInt","getComputedStyle","getPropertyValue","mutate","adjustedDirection","getAdjustedDirection","setProperty"],"sources":["../../../../src/library/entrance/SlideIn.ts"],"sourcesContent":["import type {\n  SlideIn,\n  AnimationExtraOptions,\n  DomApi,\n  TimeAnimationOptions,\n} from '../../types';\nimport {\n  Direction,\n  getAdjustedDirection,\n  getClipPolygonParams,\n  INITIAL_FRAME_OFFSET,\n} from '../../utils';\n\nexport function getNames(options: TimeAnimationOptions) {\n  const { power } = options.namedEffect as SlideIn;\n  return power !== 'hard'\n    ? ['motion-slideIn', 'motion-fadeIn']\n    : ['motion-slideIn'];\n}\n\nconst PARAM_MAP = {\n  top: { dx: 0, dy: -1, clip: 'bottom' },\n  right: { dx: 1, dy: 0, clip: 'left' },\n  bottom: { dx: 0, dy: 1, clip: 'top' },\n  left: { dx: -1, dy: 0, clip: 'right' },\n};\n\nconst DIRECTIONS = [\n  'top',\n  'right',\n  'bottom',\n  'left',\n] as (keyof typeof PARAM_MAP)[];\n\nconst INITIAL_TRANSLATE_MAP = {\n  soft: 0.2,\n  medium: 0.8,\n  hard: 1,\n};\n\nexport function web(\n  options: TimeAnimationOptions & AnimationExtraOptions,\n  dom?: DomApi,\n) {\n  const animations = style(options);\n\n  prepare(options, dom);\n\n  return animations;\n}\n\nexport function style(options: TimeAnimationOptions) {\n  const {\n    direction = 'left',\n    power,\n    initialTranslate = 1,\n  } = options.namedEffect as SlideIn;\n  const [slideIn, fadeIn] = getNames(options);\n\n  const easing = options.easing || 'cubicInOut';\n  const scale = (power && INITIAL_TRANSLATE_MAP[power]) || initialTranslate;\n  const minimum = 100 - scale * 100;\n\n  const start = getClipPolygonParams({\n    direction,\n    minimum,\n  });\n  const clipEnd = getClipPolygonParams({ direction: 'initial' });\n\n  const custom = {\n    '--motion-clip-start': start,\n    '--motion-translate-x': `${PARAM_MAP[direction].dx * 100}%`,\n    '--motion-translate-y': `${PARAM_MAP[direction].dy * 100}%`,\n  };\n\n  const animations = [\n    {\n      ...options,\n      name: slideIn,\n      easing,\n      custom,\n      keyframes: [\n        {\n          offset: INITIAL_FRAME_OFFSET,\n          opacity: 'var(--comp-opacity, 1)',\n          transform: `rotate(var(--comp-rotate-z, 0deg)) translate(var(--motion-translate-x, -100%), var(--motion-translate-y, 0%))`,\n          clipPath: `var(--motion-clip-start, ${custom['--motion-clip-start']})`,\n        },\n        {\n          transform: 'rotate(var(--comp-rotate-z, 0deg)) translate(0px, 0px)',\n          clipPath: clipEnd,\n        },\n      ],\n    },\n  ];\n\n  if (power !== 'hard') {\n    animations.push({\n      ...options,\n      easing: 'cubicInOut',\n      name: fadeIn,\n      // @ts-expect-error\n      custom: {},\n      keyframes: [\n        // @ts-expect-error\n        { offset: 0, opacity: 0 },\n        // @ts-expect-error\n        { opacity: 'var(--comp-opacity, 1)' },\n      ],\n    });\n  } else {\n    animations[0].keyframes.unshift({\n      offset: 0,\n      // @ts-expect-error\n      opacity: 0,\n      easing: 'step-end',\n    });\n  }\n\n  return animations;\n}\n\nexport function prepare(options: TimeAnimationOptions, dom?: DomApi) {\n  const {\n    direction = 'left',\n    power,\n    initialTranslate = 1,\n  } = options.namedEffect as SlideIn;\n\n  const scale = (power && INITIAL_TRANSLATE_MAP[power]) || initialTranslate;\n  const minimum = 100 - scale * 100;\n\n  if (dom) {\n    let rotation = 0;\n\n    dom.measure((target) => {\n      if (!target) {\n        return;\n      }\n      rotation = parseInt(\n        getComputedStyle(target).getPropertyValue('--comp-rotate-z') || '0deg',\n        10,\n      );\n    });\n\n    dom.mutate((target) => {\n      const adjustedDirection = getAdjustedDirection(\n        DIRECTIONS,\n        direction,\n        rotation,\n      ) as (typeof DIRECTIONS)[number];\n\n      target?.style.setProperty(\n        '--motion-clip-start',\n        getClipPolygonParams({\n          direction: PARAM_MAP[adjustedDirection].clip as Direction,\n          minimum,\n        }),\n      );\n      target?.style.setProperty(\n        '--motion-translate-x',\n        `${PARAM_MAP[adjustedDirection].dx * 100}%`,\n      );\n      target?.style.setProperty(\n        '--motion-translate-y',\n        `${PARAM_MAP[adjustedDirection].dy * 100}%`,\n      );\n    });\n  }\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,65 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-exports.getNames = getNames;
-exports.style = style;
-exports.web = web;
-var _utils = require("../../utils");
-function getNames(_) {
-  return ['motion-fadeIn', 'motion-spinIn'];
-}
-const SCALE_MAP = {
-  soft: 1,
-  medium: 0.6,
-  hard: 0
-};
-const DIRECTION_MAP = {
-  clockwise: -1,
-  'counter-clockwise': 1
-};
-function web(options) {
-  return style(options, true);
-}
-function style(options, asWeb = false) {
-  const {
-    direction = 'clockwise',
-    spins = 0.5,
-    initialScale = 0,
-    power
-  } = options.namedEffect;
-  const [fadeIn, spinIn] = getNames(options);
-  const easing = options.easing || 'cubicInOut';
-  const scale = typeof power !== 'undefined' ? SCALE_MAP[power] : initialScale;
-  const transformRotate = (DIRECTION_MAP[direction] > 0 ? 1 : -1) * 360 * spins;
-  const custom = {
-    '--motion-scale': `${scale}`,
-    '--motion-rotate': `${transformRotate}deg`
-  };
-  return [{
-    ...options,
-    name: fadeIn,
-    easing: 'cubicIn',
-    duration: options.duration * scale,
-    custom: {},
-    keyframes: [{
-      offset: 0,
-      opacity: 0
-    }, {
-      opacity: 'var(--comp-opacity, 1)'
-    }]
-  }, {
-    ...options,
-    name: spinIn,
-    easing,
-    custom,
-    keyframes: [{
-      offset: _utils.INITIAL_FRAME_OFFSET,
-      scale: (0, _utils.toKeyframeValue)(custom, '--motion-scale', asWeb),
-      rotate: (0, _utils.toKeyframeValue)(custom, '--motion-rotate', asWeb)
-    }, {
-      scale: '1',
-      rotate: `0deg`
-    }]
-  }];
-}
-//# sourceMappingURL=SpinIn.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["_utils","require","getNames","_","SCALE_MAP","soft","medium","hard","DIRECTION_MAP","clockwise","web","options","style","asWeb","direction","spins","initialScale","power","namedEffect","fadeIn","spinIn","easing","scale","transformRotate","custom","name","duration","keyframes","offset","opacity","INITIAL_FRAME_OFFSET","toKeyframeValue","rotate"],"sources":["../../../../src/library/entrance/SpinIn.ts"],"sourcesContent":["import type {\n  SpinIn,\n  AnimationExtraOptions,\n  TimeAnimationOptions,\n} from '../../types';\nimport { INITIAL_FRAME_OFFSET, toKeyframeValue } from '../../utils';\n\nexport function getNames(_: TimeAnimationOptions) {\n  return ['motion-fadeIn', 'motion-spinIn'];\n}\n\nconst SCALE_MAP = {\n  soft: 1,\n  medium: 0.6,\n  hard: 0,\n};\n\nconst DIRECTION_MAP = {\n  clockwise: -1,\n  'counter-clockwise': 1,\n};\n\nexport function web(options: TimeAnimationOptions & AnimationExtraOptions) {\n  return style(options, true);\n}\n\nexport function style(options: TimeAnimationOptions, asWeb = false) {\n  const {\n    direction = 'clockwise',\n    spins = 0.5,\n    initialScale = 0,\n    power,\n  } = options.namedEffect as SpinIn;\n  const [fadeIn, spinIn] = getNames(options);\n\n  const easing = options.easing || 'cubicInOut';\n  const scale = typeof power !== 'undefined' ? SCALE_MAP[power] : initialScale;\n  const transformRotate = (DIRECTION_MAP[direction] > 0 ? 1 : -1) * 360 * spins;\n\n  const custom = {\n    '--motion-scale': `${scale}`,\n    '--motion-rotate': `${transformRotate}deg`,\n  };\n\n  return [\n    {\n      ...options,\n      name: fadeIn,\n      easing: 'cubicIn',\n      duration: options.duration! * scale,\n      custom: {},\n      keyframes: [\n        { offset: 0, opacity: 0 },\n        { opacity: 'var(--comp-opacity, 1)' },\n      ],\n    },\n    {\n      ...options,\n      name: spinIn,\n      easing,\n      custom,\n      keyframes: [\n        {\n          offset: INITIAL_FRAME_OFFSET,\n          scale: toKeyframeValue(custom, '--motion-scale', asWeb),\n          rotate: toKeyframeValue(custom, '--motion-rotate', asWeb),\n        },\n        {\n          scale: '1',\n          rotate: `0deg`,\n        },\n      ],\n    },\n  ];\n}\n"],"mappings":";;;;;;AAKA,IAAAA,MAAA,GAAAC,OAAA;AAEO,SAASC,QAAQA,CAACC,CAAuB,EAAE;EAChD,OAAO,CAAC,eAAe,EAAE,eAAe,CAAC;AAC3C;AAEA,MAAMC,SAAS,GAAG;EAChBC,IAAI,EAAE,CAAC;EACPC,MAAM,EAAE,GAAG;EACXC,IAAI,EAAE;AACR,CAAC;AAED,MAAMC,aAAa,GAAG;EACpBC,SAAS,EAAE,CAAC,CAAC;EACb,mBAAmB,EAAE;AACvB,CAAC;AAEM,SAASC,GAAGA,CAACC,OAAqD,EAAE;EACzE,OAAOC,KAAK,CAACD,OAAO,EAAE,IAAI,CAAC;AAC7B;AAEO,SAASC,KAAKA,CAACD,OAA6B,EAAEE,KAAK,GAAG,KAAK,EAAE;EAClE,MAAM;IACJC,SAAS,GAAG,WAAW;IACvBC,KAAK,GAAG,GAAG;IACXC,YAAY,GAAG,CAAC;IAChBC;EACF,CAAC,GAAGN,OAAO,CAACO,WAAqB;EACjC,MAAM,CAACC,MAAM,EAAEC,MAAM,CAAC,GAAGlB,QAAQ,CAACS,OAAO,CAAC;EAE1C,MAAMU,MAAM,GAAGV,OAAO,CAACU,MAAM,IAAI,YAAY;EAC7C,MAAMC,KAAK,GAAG,OAAOL,KAAK,KAAK,WAAW,GAAGb,SAAS,CAACa,KAAK,CAAC,GAAGD,YAAY;EAC5E,MAAMO,eAAe,GAAG,CAACf,aAAa,CAACM,SAAS,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,IAAI,GAAG,GAAGC,KAAK;EAE7E,MAAMS,MAAM,GAAG;IACb,gBAAgB,EAAE,GAAGF,KAAK,EAAE;IAC5B,iBAAiB,EAAE,GAAGC,eAAe;EACvC,CAAC;EAED,OAAO,CACL;IACE,GAAGZ,OAAO;IACVc,IAAI,EAAEN,MAAM;IACZE,MAAM,EAAE,SAAS;IACjBK,QAAQ,EAAEf,OAAO,CAACe,QAAQ,GAAIJ,KAAK;IACnCE,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,GAAGlB,OAAO;IACVc,IAAI,EAAEL,MAAM;IACZC,MAAM;IACNG,MAAM;IACNG,SAAS,EAAE,CACT;MACEC,MAAM,EAAEE,2BAAoB;MAC5BR,KAAK,EAAE,IAAAS,sBAAe,EAACP,MAAM,EAAE,gBAAgB,EAAEX,KAAK,CAAC;MACvDmB,MAAM,EAAE,IAAAD,sBAAe,EAACP,MAAM,EAAE,iBAAiB,EAAEX,KAAK;IAC1D,CAAC,EACD;MACES,KAAK,EAAE,GAAG;MACVU,MAAM,EAAE;IACV,CAAC;EAEL,CAAC,CACF;AACH","ignoreList":[]}

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

@@ -1,102 +0,0 @@
-"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-fadeIn', 'motion-tiltInRotate', 'motion-tiltInClip'];
-}
-const ROTATION_MAP = {
-  left: 30,
-  right: -30
-};
-const DIRECTIONS = ['top', 'right', 'bottom', 'left'];
-function getClipStart(rotateZ) {
-  const clipDirection = (0, _utils.getAdjustedDirection)(DIRECTIONS, 'top', rotateZ);
-  return (0, _utils.getClipPolygonParams)({
-    direction: clipDirection,
-    minimum: 0
-  });
-}
-function web(options, dom) {
-  prepare(options, dom);
-  return style(options, true);
-}
-function style(options, asWeb = false) {
-  const {
-    direction = 'left'
-  } = options.namedEffect;
-  const [fadeIn, tiltInRotate, tiltInClip] = getNames(options);
-  const easing = options.easing || 'cubicOut';
-  const clipStart = getClipStart(0);
-  const rotationZ = ROTATION_MAP[direction];
-  const clipEnd = (0, _utils.getClipPolygonParams)({
-    direction: 'initial'
-  });
-  const translateZ = '(var(--motion-height, 200px) / 2)';
-  const clipCustom = {
-    '--motion-rotate-z': `${rotationZ}deg`,
-    '--motion-clip-start': clipStart
-  };
-  return [{
-    ...options,
-    name: fadeIn,
-    duration: options.duration * 0.2,
-    easing: 'cubicOut',
-    custom: {},
-    keyframes: [{
-      offset: 0,
-      opacity: 0
-    }, {
-      opacity: 'var(--comp-opacity, 1)'
-    }]
-  }, {
-    ...options,
-    name: tiltInRotate,
-    easing,
-    custom: {},
-    keyframes: [{
-      offset: 0,
-      easing: 'step-end',
-      transform: 'perspective(800px)'
-    }, {
-      offset: _utils.INITIAL_FRAME_OFFSET,
-      transform: `perspective(800px) translateZ(calc(${translateZ} * -1)) rotateX(-90deg) translateZ(calc${translateZ}) rotate(var(--comp-rotate-z, 0deg))`
-    }, {
-      transform: `perspective(800px) translateZ(calc(${translateZ} * -1)) rotateX(0deg) translateZ(calc${translateZ}) rotate(var(--comp-rotate-z, 0deg))`
-    }]
-  }, {
-    ...options,
-    name: tiltInClip,
-    easing,
-    composite: 'add',
-    duration: options.duration * 0.8,
-    custom: clipCustom,
-    keyframes: [{
-      offset: _utils.INITIAL_FRAME_OFFSET,
-      clipPath: `var(--motion-clip-start, ${clipCustom['--motion-clip-start']})`,
-      transform: `rotateZ(${(0, _utils.toKeyframeValue)(clipCustom, '--motion-rotate-z', asWeb)})`
-    }, {
-      clipPath: clipEnd,
-      transform: `rotateZ(0deg)`
-    }]
-  }];
-}
-function prepare(_, dom) {
-  if (dom) {
-    let rotation = '0deg';
-    dom.measure(target => {
-      if (!target) {
-        return;
-      }
-      rotation = getComputedStyle(target).getPropertyValue('--comp-rotate-z') || '0deg';
-    });
-    dom.mutate(target_ => {
-      target_ == null || target_.style.setProperty('--motion-clip-start', getClipStart(parseInt(rotation, 10)));
-    });
-  }
-}
-//# sourceMappingURL=TiltIn.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["_utils","require","getNames","_","ROTATION_MAP","left","right","DIRECTIONS","getClipStart","rotateZ","clipDirection","getAdjustedDirection","getClipPolygonParams","direction","minimum","web","options","dom","prepare","style","asWeb","namedEffect","fadeIn","tiltInRotate","tiltInClip","easing","clipStart","rotationZ","clipEnd","translateZ","clipCustom","name","duration","custom","keyframes","offset","opacity","transform","INITIAL_FRAME_OFFSET","composite","clipPath","toKeyframeValue","rotation","measure","target","getComputedStyle","getPropertyValue","mutate","target_","setProperty","parseInt"],"sources":["../../../../src/library/entrance/TiltIn.ts"],"sourcesContent":["import {\n  getAdjustedDirection,\n  getClipPolygonParams,\n  INITIAL_FRAME_OFFSET,\n  toKeyframeValue,\n} from '../../utils';\nimport type { TiltIn, TimeAnimationOptions, DomApi } from '../../types';\n\nexport function getNames(_: TimeAnimationOptions) {\n  return ['motion-fadeIn', 'motion-tiltInRotate', 'motion-tiltInClip'];\n}\n\nconst ROTATION_MAP = {\n  left: 30,\n  right: -30,\n};\n\nconst DIRECTIONS = [\n  'top',\n  'right',\n  'bottom',\n  'left',\n] as (keyof typeof ROTATION_MAP)[];\n\nfunction getClipStart(rotateZ: number) {\n  const clipDirection = getAdjustedDirection(\n    DIRECTIONS,\n    'top',\n    rotateZ,\n  ) as (typeof DIRECTIONS)[number];\n\n  return getClipPolygonParams({\n    direction: clipDirection,\n    minimum: 0,\n  });\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 = 'left' } = options.namedEffect as TiltIn;\n  const [fadeIn, tiltInRotate, tiltInClip] = getNames(options);\n\n  const easing = options.easing || 'cubicOut';\n  const clipStart = getClipStart(0);\n  const rotationZ = ROTATION_MAP[direction];\n  const clipEnd = getClipPolygonParams({ direction: 'initial' });\n  const translateZ = '(var(--motion-height, 200px) / 2)';\n\n  const clipCustom = {\n    '--motion-rotate-z': `${rotationZ}deg`,\n    '--motion-clip-start': clipStart,\n  };\n\n  return [\n    {\n      ...options,\n      name: fadeIn,\n      duration: options.duration! * 0.2,\n      easing: 'cubicOut',\n      custom: {},\n      keyframes: [\n        { offset: 0, opacity: 0 },\n        { opacity: 'var(--comp-opacity, 1)' },\n      ],\n    },\n    {\n      ...options,\n      name: tiltInRotate,\n      easing,\n      custom: {},\n      keyframes: [\n        {\n          offset: 0,\n          easing: 'step-end',\n          transform: 'perspective(800px)',\n        },\n        {\n          offset: INITIAL_FRAME_OFFSET,\n          transform: `perspective(800px) translateZ(calc(${translateZ} * -1)) rotateX(-90deg) translateZ(calc${translateZ}) rotate(var(--comp-rotate-z, 0deg))`,\n        },\n        {\n          transform: `perspective(800px) translateZ(calc(${translateZ} * -1)) rotateX(0deg) translateZ(calc${translateZ}) rotate(var(--comp-rotate-z, 0deg))`,\n        },\n      ],\n    },\n    {\n      ...options,\n      name: tiltInClip,\n      easing,\n      composite: 'add' as const,\n      duration: options.duration! * 0.8,\n      custom: clipCustom,\n      keyframes: [\n        {\n          offset: INITIAL_FRAME_OFFSET,\n          clipPath: `var(--motion-clip-start, ${clipCustom['--motion-clip-start']})`,\n          transform: `rotateZ(${toKeyframeValue(\n            clipCustom,\n            '--motion-rotate-z',\n            asWeb,\n          )})`,\n        },\n        {\n          clipPath: clipEnd,\n          transform: `rotateZ(0deg)`,\n        },\n      ],\n    },\n  ];\n}\n\nexport function prepare(_: TimeAnimationOptions, dom?: DomApi) {\n  if (dom) {\n    let rotation = '0deg';\n\n    dom.measure((target) => {\n      if (!target) {\n        return;\n      }\n      rotation =\n        getComputedStyle(target).getPropertyValue('--comp-rotate-z') || '0deg';\n    });\n\n    dom.mutate((target_) => {\n      target_?.style.setProperty(\n        '--motion-clip-start',\n        getClipStart(parseInt(rotation, 10)),\n      );\n    });\n  }\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,85 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-exports.getNames = getNames;
-exports.style = style;
-exports.web = web;
-var _utils = require("../../utils");
-function getNames(_) {
-  return ['motion-fadeIn', 'motion-turnIn'];
-}
-const EASING_MAP = {
-  soft: 'cubicInOut',
-  medium: 'quintInOut',
-  hard: 'backOut'
-};
-const DIRECTION_TO_TRANSFORM_MAP = {
-  'top-left': {
-    angle: -50,
-    x: -50,
-    y: -50
-  },
-  'top-right': {
-    angle: 50,
-    x: 50,
-    y: -50
-  },
-  'bottom-right': {
-    angle: 50,
-    x: 50,
-    y: 50
-  },
-  'bottom-left': {
-    angle: -50,
-    x: -50,
-    y: 50
-  }
-};
-function web(options) {
-  return style(options, true);
-}
-function style(options, asWeb = false) {
-  const {
-    direction = 'top-left',
-    power
-  } = options.namedEffect;
-  const [fadeIn, turnIn] = getNames(options);
-  const easing = power && EASING_MAP[power] ? EASING_MAP[power] : options.easing || 'backOut';
-  const {
-    x,
-    y
-  } = DIRECTION_TO_TRANSFORM_MAP[direction];
-  const transformRotate = DIRECTION_TO_TRANSFORM_MAP[direction].angle;
-  const custom = {
-    '--motion-origin': `${x}%, ${y}%`,
-    '--motion-origin-invert': `${-x}%, ${-y}%`,
-    '--motion-rotate-z': `${transformRotate}deg`
-  };
-  const origin = (0, _utils.toKeyframeValue)(custom, '--motion-origin', asWeb);
-  const invertedOrigin = (0, _utils.toKeyframeValue)(custom, '--motion-origin-invert', asWeb);
-  return [{
-    ...options,
-    name: fadeIn,
-    duration: options.duration * 0.6,
-    easing: 'sineIn',
-    custom: {},
-    keyframes: [{
-      offset: 0,
-      opacity: 0
-    }, {
-      opacity: 'var(--comp-opacity, 1)'
-    }]
-  }, {
-    ...options,
-    name: turnIn,
-    easing,
-    custom,
-    keyframes: [{
-      offset: _utils.INITIAL_FRAME_OFFSET,
-      transform: `translate(${origin}) rotate(${(0, _utils.toKeyframeValue)(custom, '--motion-rotate-z', asWeb)}) translate(${invertedOrigin}) rotate(var(--comp-rotate-z, 0deg))`
-    }, {
-      transform: `translate(${origin}) rotate(0deg) translate(${invertedOrigin}) rotate(var(--comp-rotate-z, 0deg))`
-    }]
-  }];
-}
-//# sourceMappingURL=TurnIn.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["_utils","require","getNames","_","EASING_MAP","soft","medium","hard","DIRECTION_TO_TRANSFORM_MAP","angle","x","y","web","options","style","asWeb","direction","power","namedEffect","fadeIn","turnIn","easing","transformRotate","custom","origin","toKeyframeValue","invertedOrigin","name","duration","keyframes","offset","opacity","INITIAL_FRAME_OFFSET","transform"],"sources":["../../../../src/library/entrance/TurnIn.ts"],"sourcesContent":["import type {\n  TurnIn,\n  TimeAnimationOptions,\n  EffectFourCorners,\n} from '../../types';\nimport { INITIAL_FRAME_OFFSET, toKeyframeValue } from '../../utils';\n\nexport function getNames(_: TimeAnimationOptions) {\n  return ['motion-fadeIn', 'motion-turnIn'];\n}\n\nconst EASING_MAP = {\n  soft: 'cubicInOut',\n  medium: 'quintInOut',\n  hard: 'backOut',\n};\n\nconst DIRECTION_TO_TRANSFORM_MAP: Record<\n  EffectFourCorners,\n  {\n    x: number;\n    y: number;\n    angle?: number;\n  }\n> = {\n  'top-left': {\n    angle: -50,\n    x: -50,\n    y: -50,\n  },\n  'top-right': {\n    angle: 50,\n    x: 50,\n    y: -50,\n  },\n  'bottom-right': {\n    angle: 50,\n    x: 50,\n    y: 50,\n  },\n  'bottom-left': {\n    angle: -50,\n    x: -50,\n    y: 50,\n  },\n};\n\nexport function web(options: TimeAnimationOptions) {\n  return style(options, true);\n}\n\nexport function style(options: TimeAnimationOptions, asWeb = false) {\n  const { direction = 'top-left', power } = options.namedEffect as TurnIn;\n  const [fadeIn, turnIn] = getNames(options);\n\n  const easing =\n    power && EASING_MAP[power]\n      ? EASING_MAP[power]\n      : options.easing || 'backOut';\n  const { x, y } = DIRECTION_TO_TRANSFORM_MAP[direction];\n  const transformRotate = DIRECTION_TO_TRANSFORM_MAP[direction].angle;\n\n  const custom = {\n    '--motion-origin': `${x}%, ${y}%`,\n    '--motion-origin-invert': `${-x}%, ${-y}%`,\n    '--motion-rotate-z': `${transformRotate}deg`,\n  };\n\n  const origin = toKeyframeValue(custom, '--motion-origin', asWeb);\n  const invertedOrigin = toKeyframeValue(\n    custom,\n    '--motion-origin-invert',\n    asWeb,\n  );\n\n  return [\n    {\n      ...options,\n      name: fadeIn,\n      duration: options.duration! * 0.6,\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: turnIn,\n      easing,\n      custom,\n      keyframes: [\n        {\n          offset: INITIAL_FRAME_OFFSET,\n          transform: `translate(${origin}) rotate(${toKeyframeValue(\n            custom,\n            '--motion-rotate-z',\n            asWeb,\n          )}) translate(${invertedOrigin}) rotate(var(--comp-rotate-z, 0deg))`,\n        },\n        {\n          transform: `translate(${origin}) rotate(0deg) translate(${invertedOrigin}) rotate(var(--comp-rotate-z, 0deg))`,\n        },\n      ],\n    },\n  ];\n}\n"],"mappings":";;;;;;AAKA,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,YAAY;EAClBC,MAAM,EAAE,YAAY;EACpBC,IAAI,EAAE;AACR,CAAC;AAED,MAAMC,0BAOL,GAAG;EACF,UAAU,EAAE;IACVC,KAAK,EAAE,CAAC,EAAE;IACVC,CAAC,EAAE,CAAC,EAAE;IACNC,CAAC,EAAE,CAAC;EACN,CAAC;EACD,WAAW,EAAE;IACXF,KAAK,EAAE,EAAE;IACTC,CAAC,EAAE,EAAE;IACLC,CAAC,EAAE,CAAC;EACN,CAAC;EACD,cAAc,EAAE;IACdF,KAAK,EAAE,EAAE;IACTC,CAAC,EAAE,EAAE;IACLC,CAAC,EAAE;EACL,CAAC;EACD,aAAa,EAAE;IACbF,KAAK,EAAE,CAAC,EAAE;IACVC,CAAC,EAAE,CAAC,EAAE;IACNC,CAAC,EAAE;EACL;AACF,CAAC;AAEM,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,SAAS,GAAG,UAAU;IAAEC;EAAM,CAAC,GAAGJ,OAAO,CAACK,WAAqB;EACvE,MAAM,CAACC,MAAM,EAAEC,MAAM,CAAC,GAAGlB,QAAQ,CAACW,OAAO,CAAC;EAE1C,MAAMQ,MAAM,GACVJ,KAAK,IAAIb,UAAU,CAACa,KAAK,CAAC,GACtBb,UAAU,CAACa,KAAK,CAAC,GACjBJ,OAAO,CAACQ,MAAM,IAAI,SAAS;EACjC,MAAM;IAAEX,CAAC;IAAEC;EAAE,CAAC,GAAGH,0BAA0B,CAACQ,SAAS,CAAC;EACtD,MAAMM,eAAe,GAAGd,0BAA0B,CAACQ,SAAS,CAAC,CAACP,KAAK;EAEnE,MAAMc,MAAM,GAAG;IACb,iBAAiB,EAAE,GAAGb,CAAC,MAAMC,CAAC,GAAG;IACjC,wBAAwB,EAAE,GAAG,CAACD,CAAC,MAAM,CAACC,CAAC,GAAG;IAC1C,mBAAmB,EAAE,GAAGW,eAAe;EACzC,CAAC;EAED,MAAME,MAAM,GAAG,IAAAC,sBAAe,EAACF,MAAM,EAAE,iBAAiB,EAAER,KAAK,CAAC;EAChE,MAAMW,cAAc,GAAG,IAAAD,sBAAe,EACpCF,MAAM,EACN,wBAAwB,EACxBR,KACF,CAAC;EAED,OAAO,CACL;IACE,GAAGF,OAAO;IACVc,IAAI,EAAER,MAAM;IACZS,QAAQ,EAAEf,OAAO,CAACe,QAAQ,GAAI,GAAG;IACjCP,MAAM,EAAE,QAAQ;IAChBE,MAAM,EAAE,CAAC,CAAC;IACVM,SAAS,EAAE,CACT;MAAEC,MAAM,EAAE,CAAC;MAAEC,OAAO,EAAE;IAAE,CAAC,EACzB;MAAEA,OAAO,EAAE;IAAyB,CAAC;EAEzC,CAAC,EACD;IACE,GAAGlB,OAAO;IACVc,IAAI,EAAEP,MAAM;IACZC,MAAM;IACNE,MAAM;IACNM,SAAS,EAAE,CACT;MACEC,MAAM,EAAEE,2BAAoB;MAC5BC,SAAS,EAAE,aAAaT,MAAM,YAAY,IAAAC,sBAAe,EACvDF,MAAM,EACN,mBAAmB,EACnBR,KACF,CAAC,eAAeW,cAAc;IAChC,CAAC,EACD;MACEO,SAAS,EAAE,aAAaT,MAAM,4BAA4BE,cAAc;IAC1E,CAAC;EAEL,CAAC,CACF;AACH","ignoreList":[]}