@wix/motion 1.665.0 → 2.0.0-rc.3

package/dist/esm/playground/animationsMotionScroll.stories.js

@@ -1,198 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";
-import React from 'react';
-import { Scroll as ScrollLib } from 'fizban';
-import { getPresets, CONFIG } from '@wix/effects-kit';
-import { Control, NumberInput, SelectInput } from './controls';
-import styles from './playground.module.scss';
-import { mapSchemaToDefaultData, schemaMapper, rangeMapper } from './playground-common';
-import { getScrubScene, getWebAnimation } from '../motion';
-import { scrollAnimations as defs } from '../library/scroll';
-export default {
-  title: 'Animation Playground/Scroll'
-};
-export const Scroll = () => {
-  var _animations;
-  const compRef = React.useRef(null);
-  const stageRef = React.useRef(null);
-  const animationScene = React.useRef();
-  const animationGroup = React.useRef();
-  const scroll = React.useRef();
-  const [schemaEditor, setSchemaEditor] = React.useState('responsive');
-  const [selectedRange, setSelectedRange] = React.useState('in');
-  const animations = Object.fromEntries(getPresets(CONFIG[schemaMapper[schemaEditor]][rangeMapper[selectedRange]]).map(preset => [preset.name, {
-    schema: preset.schema,
-    range: preset.range
-  }]));
-  const implementedAnimations = Object.keys(defs).filter(animationName => animations[animationName]);
-  const [animName, setAnimName] = React.useState(implementedAnimations[0]);
-  const [rotation, setRotation] = React.useState(0);
-  const schema = animations[animName].schema || {};
-  const [attachment, setAttachment] = React.useState('scroll');
-  const [data, setData] = React.useState(mapSchemaToDefaultData(schema));
-  React.useEffect(() => {
-    setData(mapSchemaToDefaultData(animations[animName].schema, schemaEditor));
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [schemaEditor, selectedRange]);
-  React.useEffect(() => {
-    var _compRef$current;
-    (_compRef$current = compRef.current) == null || _compRef$current.getAnimations().forEach(a => {
-      a.cancel();
-    }); // removing all previously selected animations
-    if (compRef.current) {
-      animateText(compRef.current, animName, data);
-    }
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [data, animName, rotation, animationGroup]);
-  console.log('animation', animations[animName]);
-  console.log('data', data);
-  function toggleAttachment() {
-    // Change value of CSS variable
-    attachment === 'fixed' ? setAttachment('scroll') : setAttachment('fixed');
-  }
-  function animateText(el, name, _ref) {
-    let {
-      duration = 1000,
-      delay = 0,
-      start = 0,
-      end = 100,
-      range = selectedRange,
-      easing = '',
-      ...params
-    } = _ref;
-    const animationInstanceParams = [el.id, {
-      id: '',
-      easing,
-      namedEffect: {
-        id: '',
-        type: name,
-        range,
-        ...params
-      },
-      fill: 'both',
-      iterations: 1,
-      startOffset: {
-        name: 'cover',
-        offset: {
-          value: start,
-          type: 'percentage'
-        }
-      },
-      endOffset: {
-        name: 'cover',
-        offset: {
-          value: end,
-          type: 'percentage'
-        }
-      }
-    }, {
-      trigger: 'view-progress',
-      componentId: el.id,
-      element: el,
-      id: ''
-    }];
-    if (window.ViewTimeline) {
-      var _animationGroup$curre;
-      // Clear
-      (_animationGroup$curre = animationGroup.current) == null || _animationGroup$curre.cancel();
-      // Animate
-      animationGroup.current = getWebAnimation(...animationInstanceParams);
-    } else {
-      var _scroll$current;
-      // Create Scene
-      animationScene.current = getScrubScene(...animationInstanceParams);
-      console.log(start, end, params);
-
-      // Clear
-      (_scroll$current = scroll.current) == null || _scroll$current.destroy();
-
-      // Animate
-      scroll.current = new ScrollLib({
-        root: stageRef.current,
-        observeViewportEntry: false,
-        // observeViewportResize: false,
-        scenes: [animationScene.current]
-      });
-      scroll.current.start();
-    }
-  }
-  function handleControlChange(name, value) {
-    setData(currentData => ({
-      ...currentData,
-      [name]: value
-    }));
-  }
-  return /*#__PURE__*/React.createElement("div", {
-    className: `${styles.stage} ${styles.scrollStage}`,
-    ref: stageRef
-  }, /*#__PURE__*/React.createElement("button", {
-    className: `${styles.attachButton}`,
-    onClick: toggleAttachment
-  }, "Toggle Attachment"), /*#__PURE__*/React.createElement("div", {
-    className: styles.components,
-    style: {
-      '--attachment': attachment
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    id: "comp1",
-    className: styles.component,
-    ref: compRef,
-    style: {
-      '--comp-rotate-z': `${rotation}deg`,
-      background: 'MediumVioletRed'
-    }
-  }, "Scroll")), /*#__PURE__*/React.createElement("div", {
-    className: styles.panels
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles.globalControls
-  }, /*#__PURE__*/React.createElement(NumberInput, {
-    label: "Rotation",
-    value: rotation,
-    min: 0,
-    max: 360,
-    step: 1,
-    onChange: event => setRotation(event.target.valueAsNumber)
-  }), /*#__PURE__*/React.createElement(SelectInput, {
-    onChange: event => {
-      const value = event.target.value;
-      setSchemaEditor(value);
-      // Reset "power" when changing editor
-      // handleControlChange('power', undefined);
-    },
-    value: schemaEditor,
-    options: ['desktop', 'mobile', 'responsive'],
-    className: styles.mainSelect
-  }), /*#__PURE__*/React.createElement(SelectInput, {
-    onChange: event => {
-      const value = event.target.value;
-      setSelectedRange(value);
-    },
-    value: selectedRange,
-    options: (_animations = animations[animName]) == null || (_animations = _animations.range) == null ? void 0 : _animations.enum,
-    className: styles.mainSelect
-  }), /*#__PURE__*/React.createElement(SelectInput, {
-    onChange: event => {
-      const value = event.target.value;
-      setAnimName(value);
-      setData(mapSchemaToDefaultData(animations[value].schema || {}, schemaEditor));
-    },
-    value: animName,
-    options: Object.keys(animations).map(name => [name, implementedAnimations.includes(name)]),
-    className: styles.mainSelect
-  })), /*#__PURE__*/React.createElement("div", {
-    className: styles.controls
-  }, Object.entries(schema).filter(_ref2 => {
-    let [name] = _ref2;
-    return !['duration', 'delay', 'allowReplay'].includes(name);
-  }).map((_ref3, i) => {
-    let [name, controlProps] = _ref3;
-    return /*#__PURE__*/React.createElement(Control, _extends({
-      key: `key-control-${i}`
-    }, controlProps, {
-      value: data[name],
-      label: name,
-      onChange: (_e, value) => handleControlChange(name, value)
-    }));
-  }))));
-};
-//# sourceMappingURL=animationsMotionScroll.stories.js.map

package/dist/esm/playground/animationsMotionScroll.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["React","Scroll","ScrollLib","getPresets","CONFIG","Control","NumberInput","SelectInput","styles","mapSchemaToDefaultData","schemaMapper","rangeMapper","getScrubScene","getWebAnimation","scrollAnimations","defs","title","_animations","compRef","useRef","stageRef","animationScene","animationGroup","scroll","schemaEditor","setSchemaEditor","useState","selectedRange","setSelectedRange","animations","Object","fromEntries","map","preset","name","schema","range","implementedAnimations","keys","filter","animationName","animName","setAnimName","rotation","setRotation","attachment","setAttachment","data","setData","useEffect","_compRef$current","current","getAnimations","forEach","a","cancel","animateText","console","log","toggleAttachment","el","_ref","duration","delay","start","end","easing","params","animationInstanceParams","id","namedEffect","type","fill","iterations","startOffset","offset","value","endOffset","trigger","componentId","element","window","ViewTimeline","_animationGroup$curre","_scroll$current","destroy","root","observeViewportEntry","scenes","handleControlChange","currentData","createElement","className","stage","scrollStage","ref","attachButton","onClick","components","style","component","background","panels","globalControls","label","min","max","step","onChange","event","target","valueAsNumber","options","mainSelect","enum","includes","controls","entries","_ref2","_ref3","i","controlProps","_extends","key","_e"],"sources":["../../../src/playground/animationsMotionScroll.stories.tsx"],"sourcesContent":["import React from 'react';\nimport { Scroll as ScrollLib } from 'fizban';\n\nimport { getPresets, CONFIG } from '@wix/effects-kit';\n\nimport { Control, NumberInput, SelectInput } from './controls';\nimport styles from './playground.module.scss';\nimport {\n  mapSchemaToDefaultData,\n  schemaMapper,\n  rangeMapper,\n} from './playground-common';\nimport { AnimationGroup, getScrubScene, getWebAnimation } from '../motion';\nimport { scrollAnimations as defs } from '../library/scroll';\n\nimport type { SchemaEditor } from './playground-common';\nimport type { CSSProperties } from 'react';\nimport type { Meta } from '@wix/yoshi-storybook-dependencies';\nimport type {\n  EffectConfig,\n  ScrollEffectConfig,\n  EffectPreset,\n  OneOfScrollEffects,\n  AllEffectsNames,\n  OneOfEffects,\n} from '@wix/effects-kit';\nimport type {\n  AnimationOptions,\n  EffectScrollRange,\n  ScrollAnimation,\n  TriggerVariant,\n} from '../types';\n\nexport default {\n  title: 'Animation Playground/Scroll',\n} as Meta;\n\nexport const Scroll: React.FC<any> = () => {\n  const compRef = React.useRef<HTMLDivElement>(null);\n  const stageRef = React.useRef<HTMLDivElement>(null);\n  const animationScene = React.useRef<ReturnType<typeof getScrubScene>>();\n  const animationGroup = React.useRef<AnimationGroup>();\n  const scroll = React.useRef<typeof ScrollLib>();\n\n  const [schemaEditor, setSchemaEditor] =\n    React.useState<SchemaEditor>('responsive');\n\n  const [selectedRange, setSelectedRange] =\n    React.useState<EffectScrollRange>('in');\n\n  const animations = Object.fromEntries(\n    getPresets(\n      CONFIG[schemaMapper[schemaEditor]][rangeMapper[selectedRange]],\n    ).map((preset: EffectPreset) => [\n      preset.name,\n      {\n        schema: preset.schema,\n        range: (preset as ScrollEffectConfig<OneOfScrollEffects>).range,\n      },\n    ]),\n  ) as Record<AllEffectsNames, ScrollEffectConfig<OneOfScrollEffects>>;\n\n  const implementedAnimations = Object.keys(defs).filter(\n    (animationName) => animations[animationName as AllEffectsNames],\n  ) as AllEffectsNames[];\n\n  const [animName, setAnimName] = React.useState<AllEffectsNames>(\n    implementedAnimations[0],\n  );\n\n  const [rotation, setRotation] = React.useState<number>(0);\n\n  const schema = (animations[animName].schema ||\n    {}) as EffectConfig<OneOfEffects>['schema'];\n  const [attachment, setAttachment] = React.useState<string>('scroll');\n\n  const [data, setData] = React.useState<Record<string, any>>(\n    mapSchemaToDefaultData(schema),\n  );\n\n  React.useEffect(() => {\n    setData(\n      mapSchemaToDefaultData(\n        animations[animName as AllEffectsNames]\n          .schema as EffectConfig<OneOfEffects>['schema'],\n        schemaEditor,\n      ),\n    );\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [schemaEditor, selectedRange]);\n\n  React.useEffect(() => {\n    compRef.current?.getAnimations().forEach((a) => {\n      a.cancel();\n    }); // removing all previously selected animations\n    if (compRef.current) {\n      animateText(compRef.current, animName, data);\n    }\n\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [data, animName, rotation, animationGroup]);\n\n  console.log('animation', animations[animName]);\n  console.log('data', data);\n\n  function toggleAttachment() {\n    // Change value of CSS variable\n    attachment === 'fixed' ? setAttachment('scroll') : setAttachment('fixed');\n  }\n\n  function animateText(\n    el: HTMLElement,\n    name: string,\n    {\n      duration = 1000,\n      delay = 0,\n      start = 0,\n      end = 100,\n      range = selectedRange,\n      easing = '',\n      ...params\n    }: {\n      duration?: number;\n      delay?: number;\n      start?: number;\n      end?: number;\n      easing?: string;\n      range?: EffectScrollRange;\n    },\n  ) {\n    const animationInstanceParams: [\n      string,\n      AnimationOptions,\n      TriggerVariant & { element?: HTMLElement },\n    ] = [\n      el.id,\n      {\n        id: '',\n        easing,\n        namedEffect: {\n          id: '',\n          type: name,\n          range,\n          ...params,\n        } as ScrollAnimation,\n        fill: 'both',\n        iterations: 1,\n        startOffset: {\n          name: 'cover',\n          offset: {\n            value: start,\n            type: 'percentage',\n          },\n        },\n        endOffset: {\n          name: 'cover',\n          offset: {\n            value: end,\n            type: 'percentage',\n          },\n        },\n      },\n      { trigger: 'view-progress', componentId: el.id, element: el, id: '' },\n    ];\n\n    if (window.ViewTimeline) {\n      // Clear\n      animationGroup.current?.cancel();\n      // Animate\n      animationGroup.current = getWebAnimation(\n        ...animationInstanceParams,\n      ) as AnimationGroup;\n    } else {\n      // Create Scene\n      animationScene.current = getScrubScene(...animationInstanceParams);\n\n      console.log(start, end, params);\n\n      // Clear\n      scroll.current?.destroy();\n\n      // Animate\n      scroll.current = new ScrollLib({\n        root: stageRef.current,\n        observeViewportEntry: false,\n        // observeViewportResize: false,\n        scenes: [animationScene.current],\n      });\n      scroll.current.start();\n    }\n  }\n\n  function handleControlChange(name: string, value: any) {\n    setData((currentData) => ({\n      ...currentData,\n      [name]: value,\n    }));\n  }\n\n  return (\n    <div className={`${styles.stage} ${styles.scrollStage}`} ref={stageRef}>\n      <button className={`${styles.attachButton}`} onClick={toggleAttachment}>\n        Toggle Attachment\n      </button>\n      <div\n        className={styles.components}\n        style={{ '--attachment': attachment } as CSSProperties}\n      >\n        <div\n          id=\"comp1\"\n          className={styles.component}\n          ref={compRef}\n          style={\n            {\n              '--comp-rotate-z': `${rotation}deg`,\n              background: 'MediumVioletRed',\n            } as CSSProperties\n          }\n        >\n          Scroll\n        </div>\n      </div>\n      <div className={styles.panels}>\n        <div className={styles.globalControls}>\n          <NumberInput\n            label=\"Rotation\"\n            value={rotation}\n            min={0}\n            max={360}\n            step={1}\n            onChange={(event) => setRotation(event.target.valueAsNumber)}\n          />\n          <SelectInput\n            onChange={(event) => {\n              const value: SchemaEditor = event.target.value;\n              setSchemaEditor(value);\n              // Reset \"power\" when changing editor\n              // handleControlChange('power', undefined);\n            }}\n            value={schemaEditor}\n            options={['desktop', 'mobile', 'responsive']}\n            className={styles.mainSelect}\n          />\n          <SelectInput\n            onChange={(event) => {\n              const value: EffectScrollRange = event.target.value;\n              setSelectedRange(value);\n            }}\n            value={selectedRange}\n            options={\n              animations[animName as AllEffectsNames]?.range\n                ?.enum as EffectScrollRange[]\n            }\n            className={styles.mainSelect}\n          />\n          <SelectInput\n            onChange={(event) => {\n              const value: AllEffectsNames = event.target.value;\n              setAnimName(value);\n              setData(\n                mapSchemaToDefaultData(\n                  (animations[value].schema ||\n                    {}) as EffectConfig<OneOfEffects>['schema'],\n                  schemaEditor,\n                ),\n              );\n            }}\n            value={animName}\n            options={\n              Object.keys(animations).map((name) => [\n                name,\n                implementedAnimations.includes(name as AllEffectsNames),\n              ]) as [string, boolean][]\n            }\n            className={styles.mainSelect}\n          />\n        </div>\n        <div className={styles.controls}>\n          {/* <Control\n            default=\"in\"\n            type=\"string\"\n            label=\"type\"\n            enum={['in', 'out', 'continuous']}\n            value={data.range}\n            onChange={(_e, value) =>\n              handleControlChange('range', value as EffectRangeAll)\n            }\n          /> */}\n          {/* {data.range !== 'continuous' && (\n            <Control\n              default={50}\n              type=\"number\"\n              label={offsetType}\n              min={0}\n              max={100}\n              step={1}\n              value={data[offsetType]}\n              onChange={(_e, value) => handleControlChange(offsetType, value)}\n            />\n          )} */}\n          {Object.entries(schema)\n            .filter(\n              ([name]) => !['duration', 'delay', 'allowReplay'].includes(name),\n            )\n            .map(([name, controlProps], i) => (\n              <Control\n                key={`key-control-${i}`}\n                {...controlProps}\n                value={data[name]}\n                label={name}\n                onChange={(_e, value) => handleControlChange(name, value)}\n              />\n            ))}\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/playground/controls.js

@@ -1,168 +0,0 @@
-import React from 'react';
-import styles from './playground.module.scss';
-export const NumberInput = props => {
-  const {
-    value,
-    min,
-    max,
-    step,
-    onChange
-  } = props;
-  return /*#__PURE__*/React.createElement("label", {
-    className: [styles.label, props.className].filter(v => v).join(' ')
-  }, props.label && /*#__PURE__*/React.createElement("h3", null, props.label), /*#__PURE__*/React.createElement("div", {
-    className: styles.range
-  }, /*#__PURE__*/React.createElement("input", {
-    type: "range",
-    value,
-    min,
-    max,
-    step,
-    onChange
-  }), /*#__PURE__*/React.createElement("input", {
-    type: "number",
-    value,
-    min,
-    max,
-    step,
-    onChange
-  })));
-};
-export const NumberWithUnitsInput = props => {
-  const {
-    value,
-    min,
-    max,
-    step,
-    onChange,
-    onUnitChange
-  } = props;
-  return /*#__PURE__*/React.createElement("label", {
-    className: [styles.label, props.className].filter(v => v).join(' ')
-  }, props.label && /*#__PURE__*/React.createElement("h3", null, props.label), /*#__PURE__*/React.createElement("div", {
-    className: styles.rangeUnit
-  }, /*#__PURE__*/React.createElement("input", {
-    type: "range",
-    value,
-    min,
-    max,
-    step,
-    onChange
-  }), /*#__PURE__*/React.createElement("input", {
-    type: "number",
-    value,
-    min,
-    max,
-    step,
-    onChange
-  }), /*#__PURE__*/React.createElement("select", {
-    value: props.unit,
-    onChange: onUnitChange
-  }, props.units.map(u => /*#__PURE__*/React.createElement("option", {
-    value: u,
-    key: props.label + u
-  }, u === 'percentage' ? '%' : u)))));
-};
-export const SelectInput = props => /*#__PURE__*/React.createElement("label", {
-  className: [styles.label, props.className].filter(v => v).join(' ')
-}, props.label && /*#__PURE__*/React.createElement("h3", null, props.label), /*#__PURE__*/React.createElement("select", {
-  value: props.value,
-  onChange: props.onChange,
-  disabled: props.disabled
-}, props.options.map((val, i) => /*#__PURE__*/React.createElement("option", {
-  key: `key${i}`,
-  value: Array.isArray(val) ? val[0] : val,
-  disabled: Array.isArray(val) ? !val[1] : false
-}, Array.isArray(val) ? val[0] : val))));
-export const BooleanInput = props => /*#__PURE__*/React.createElement("label", {
-  className: [styles.label, styles.labelBool, props.className].filter(v => v).join(' ')
-}, props.label && /*#__PURE__*/React.createElement("span", null, props.label), /*#__PURE__*/React.createElement("input", {
-  type: "checkbox",
-  checked: props.value,
-  onChange: props.onChange
-}));
-export const Control = props => {
-  const {
-    label,
-    value = props.default,
-    min = 0,
-    max = 10,
-    step = 0.1,
-    enum: options,
-    units,
-    onChange: onChangeGlobal,
-    className
-  } = props;
-  const onChange = e => {
-    let newValue;
-    if (props.type === 'number-with-unit') {
-      newValue = {
-        value: typeof e.target.valueAsNumber === 'number' ? e.target.valueAsNumber : props.value.value,
-        type: typeof e.target.valueAsNumber === 'number' ? props.value.type : e.target.value
-      };
-    } else if (props.type === 'boolean') {
-      newValue = e.target.checked;
-    } else if (props.type === 'number' && e.target.valueAsNumber) {
-      newValue = e.target.valueAsNumber;
-    } else {
-      newValue = e.target.value;
-    }
-    onChangeGlobal == null || onChangeGlobal(e, newValue);
-  };
-  if (props.type === 'number') {
-    if (options) {
-      return /*#__PURE__*/React.createElement(SelectInput, {
-        label,
-        value: value,
-        options,
-        onChange,
-        className,
-        disabled: options.length < 2
-      });
-    } else {
-      return /*#__PURE__*/React.createElement(NumberInput, {
-        label,
-        value: +value,
-        min: +min,
-        max: +max,
-        step: +step,
-        onChange,
-        className
-      });
-    }
-  }
-  if (props.type === 'number-with-unit') {
-    return /*#__PURE__*/React.createElement(NumberWithUnitsInput, {
-      label,
-      value: +value.value,
-      unit: value.type,
-      min: +min,
-      max: +max,
-      step: +step,
-      units,
-      onChange,
-      onUnitChange: onChange,
-      className
-    });
-  }
-  if (props.type === 'boolean') {
-    return /*#__PURE__*/React.createElement(BooleanInput, {
-      label,
-      value: !!value,
-      onChange,
-      className
-    });
-  }
-  if (props.type === 'string') {
-    return options ? /*#__PURE__*/React.createElement(SelectInput, {
-      label,
-      value: value,
-      options,
-      onChange,
-      className,
-      disabled: options.length < 2
-    }) : null;
-  }
-  return /*#__PURE__*/React.createElement("p", null, "Unknown input ", label, " ", value);
-};
-//# sourceMappingURL=controls.js.map

package/dist/esm/playground/controls.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["React","styles","NumberInput","props","value","min","max","step","onChange","createElement","className","label","filter","v","join","range","type","NumberWithUnitsInput","onUnitChange","rangeUnit","unit","units","map","u","key","SelectInput","disabled","options","val","i","Array","isArray","BooleanInput","labelBool","checked","Control","default","enum","onChangeGlobal","e","newValue","target","valueAsNumber","length"],"sources":["../../../src/playground/controls.tsx"],"sourcesContent":["import type { UnitLengthPercentage } from '../types';\nimport React, { ChangeEvent } from 'react';\nimport styles from './playground.module.scss';\n\nexport interface ControlProps {\n  default: string | number | boolean | UnitLengthPercentage;\n  type: 'number' | 'string' | 'boolean' | 'number-with-unit';\n  label?: string;\n  value?: string | number | boolean | UnitLengthPercentage;\n  min?: number;\n  max?: number;\n  step?: number;\n  enum?: readonly string[] | readonly number[];\n  units?: readonly string[];\n  onChange?: (\n    event: ChangeEvent<HTMLInputElement | HTMLSelectElement>,\n    value: string | number | boolean | UnitLengthPercentage,\n  ) => void;\n  className?: string;\n  hidden?: boolean;\n}\n\nexport const NumberInput = (props: {\n  label?: string;\n  value: number;\n  min: number;\n  max: number;\n  step: number;\n  onChange?: (event: any) => void;\n  className?: string;\n}) => {\n  const { value, min, max, step, onChange } = props;\n  return (\n    <label\n      className={[styles.label, props.className].filter((v) => v).join(' ')}\n    >\n      {props.label && <h3>{props.label}</h3>}\n      <div className={styles.range}>\n        <input type=\"range\" {...{ value, min, max, step, onChange }} />\n        <input type=\"number\" {...{ value, min, max, step, onChange }} />\n      </div>\n    </label>\n  );\n};\n\nexport const NumberWithUnitsInput = (props: {\n  label?: string;\n  value: number;\n  unit: string;\n  min: number;\n  max: number;\n  step: number;\n  units?: readonly string[];\n  onChange?: (event: any) => void;\n  onUnitChange?: (event: any) => void;\n  className?: string;\n}) => {\n  const { value, min, max, step, onChange, onUnitChange } = props;\n  return (\n    <label\n      className={[styles.label, props.className].filter((v) => v).join(' ')}\n    >\n      {props.label && <h3>{props.label}</h3>}\n      <div className={styles.rangeUnit}>\n        <input type=\"range\" {...{ value, min, max, step, onChange }} />\n        <input type=\"number\" {...{ value, min, max, step, onChange }} />\n        <select value={props.unit} onChange={onUnitChange}>\n          {props.units!.map((u) => (\n            <option value={u} key={props.label + u}>\n              {u === 'percentage' ? '%' : u}\n            </option>\n          ))}\n        </select>\n      </div>\n    </label>\n  );\n};\n\nexport const SelectInput = (props: {\n  label?: string;\n  value: string | number;\n  options: readonly string[] | readonly number[] | readonly [string, boolean][];\n  onChange?: (event: any) => void;\n  className?: string;\n  disabled?: boolean;\n}) => (\n  <label className={[styles.label, props.className].filter((v) => v).join(' ')}>\n    {props.label && <h3>{props.label}</h3>}\n    <select\n      value={props.value}\n      onChange={props.onChange}\n      disabled={props.disabled}\n    >\n      {props.options.map((val, i) => (\n        <option\n          key={`key${i}`}\n          value={\n            Array.isArray(val)\n              ? (val as [string, boolean])[0]\n              : (val as string | number)\n          }\n          disabled={Array.isArray(val) ? !(val as [string, boolean])[1] : false}\n        >\n          {Array.isArray(val) ? (val as [string, boolean])[0] : val}\n        </option>\n      ))}\n    </select>\n  </label>\n);\n\nexport const BooleanInput = (props: {\n  label?: string;\n  value: boolean;\n  onChange?: (event: any) => void;\n  className?: string;\n}) => (\n  <label\n    className={[styles.label, styles.labelBool, props.className]\n      .filter((v) => v)\n      .join(' ')}\n  >\n    {props.label && <span>{props.label}</span>}\n    <input type=\"checkbox\" checked={props.value} onChange={props.onChange} />\n  </label>\n);\n\nexport const Control: React.FC<ControlProps> = (props) => {\n  const {\n    label,\n    value = props.default,\n    min = 0,\n    max = 10,\n    step = 0.1,\n    enum: options,\n    units,\n    onChange: onChangeGlobal,\n    className,\n  } = props;\n  const onChange = (e: ChangeEvent<HTMLInputElement>) => {\n    let newValue;\n    if (props.type === 'number-with-unit') {\n      newValue = {\n        value:\n          typeof e.target.valueAsNumber === 'number'\n            ? e.target.valueAsNumber\n            : (props.value as UnitLengthPercentage).value,\n        type:\n          typeof e.target.valueAsNumber === 'number'\n            ? (props.value as UnitLengthPercentage).type\n            : e.target.value,\n      } as UnitLengthPercentage;\n    } else if (props.type === 'boolean') {\n      newValue = e.target.checked;\n    } else if (props.type === 'number' && e.target.valueAsNumber) {\n      newValue = e.target.valueAsNumber;\n    } else {\n      newValue = e.target.value;\n    }\n    onChangeGlobal?.(e, newValue);\n  };\n  if (props.type === 'number') {\n    if (options) {\n      return (\n        <SelectInput\n          {...{\n            label,\n            value: value as number,\n            options,\n            onChange,\n            className,\n            disabled: options.length < 2,\n          }}\n        />\n      );\n    } else {\n      return (\n        <NumberInput\n          {...{\n            label,\n            value: +value as number,\n            min: +min,\n            max: +max,\n            step: +step,\n            onChange,\n            className,\n          }}\n        />\n      );\n    }\n  }\n\n  if (props.type === 'number-with-unit') {\n    return (\n      <NumberWithUnitsInput\n        {...{\n          label,\n          value: +(value as UnitLengthPercentage).value as number,\n          unit: (value as UnitLengthPercentage).type,\n          min: +min,\n          max: +max,\n          step: +step,\n          units,\n          onChange,\n          onUnitChange: onChange,\n          className,\n        }}\n      />\n    );\n  }\n\n  if (props.type === 'boolean') {\n    return (\n      <BooleanInput\n        {...{\n          label,\n          value: !!value,\n          onChange,\n          className,\n        }}\n      />\n    );\n  }\n  if (props.type === 'string') {\n    return options ? (\n      <SelectInput\n        {...{\n          label,\n          value: value as string,\n          options,\n          onChange,\n          className,\n          disabled: options.length < 2,\n        }}\n      />\n    ) : null;\n  }\n\n  return (\n    <p>\n      Unknown input {label} {value}\n    </p>\n  );\n};\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/playground/mouse-parallax-components/vector.svg

@@ -1,19 +0,0 @@
-<svg preserveAspectRatio="XMidYMid meet" data-bbox="49.193 20 101.614 159.999" viewBox="49.193 20 101.614 159.999" width="190" height="300" xmlns="http://www.w3.org/2000/svg" data-type="color" role="presentation" aria-hidden="true" aria-label=""><defs><style>#comp-lor3ht6g svg [data-color="1"] {fill: #FFFFFF;}
-	#comp-lor3ht6g svg [data-color="3"] {fill: #DDDBD7;}</style></defs>
-	<g>
-		<path d="m111.823 175.691-1.016-11.682a.494.494 0 0 0-.291-.408l-22.585-10.009-17.938-11.788-19.146-15.874c1.964-1.977 11.022-11.208 16.934-19.168 6.521-8.779 15.829-26.058 21.924-44.872.817-2.523 1.582-5.143 2.322-7.678 2.3-7.88 4.679-16.028 8.927-22.224 2.27-3.31 4.882-5.822 7.986-7.68 3.488-2.087 7.512-3.306 12.301-3.725.682-.06 1.357-.09 2.006-.09 4.213 0 7.674 1.221 10.582 3.733 2.59 2.237 4.676 5.447 6.377 9.812 3.174 8.145 4.384 18.766 5.554 29.038.433 3.796.841 7.382 1.342 10.815 3.319 22.726 5.113 39.59.004 65.902-1.158 5.967-3.641 11.71-7.377 17.071-2.996 4.299-6.801 8.363-11.309 12.081-6.726 5.546-13.049 8.666-14.579 9.384l-2.018-2.638z" fill="#EBD7C3" data-color="1"></path>
-		<path d="M123.248 20.985c4.09 0 7.446 1.182 10.26 3.613 2.527 2.184 4.569 5.33 6.24 9.618 3.151 8.085 4.357 18.674 5.524 28.914.433 3.8.842 7.39 1.345 10.831 1.538 10.533 2.939 20.872 3.171 31.563.239 10.972-.767 21.831-3.163 34.174-1.144 5.894-3.597 11.57-7.288 16.87-2.967 4.26-6.737 8.29-11.206 11.978-6.255 5.162-12.162 8.212-14.138 9.165l-1.69-2.206-1.003-11.539a.986.986 0 0 0-.582-.816l-22.548-9.993-17.882-11.751-18.71-15.513c2.563-2.597 10.99-11.285 16.601-18.838 6.545-8.811 15.885-26.147 21.997-45.014.819-2.529 1.586-5.154 2.326-7.692 2.289-7.843 4.657-15.952 8.861-22.083 2.229-3.251 4.791-5.716 7.833-7.535 3.423-2.048 7.378-3.244 12.091-3.657a22.333 22.333 0 0 1 1.961-.089zm0-.985c-.663 0-1.344.03-2.049.092-23.479 2.057-26.05 23.393-31.963 41.645-5.913 18.252-15.167 35.733-21.851 44.73-6.684 8.997-17.269 19.496-17.269 19.496L69.699 142.2l17.995 11.825 22.622 10.026 1.028 11.825 2.346 3.063s28.76-12.575 33.901-39.053c5.141-26.478 3.342-43.188 0-66.067C144.35 51.627 144.654 20 123.248 20z" fill="#000002" data-color="2"></path>
-		<path d="M108.721 179.507c-3.55 0-4.592-1.479-5.122-3.866-.254-1.141.466-2.949 1.161-4.699.931-2.342 1.894-4.763 1.084-6.555-.376-.833-1.108-1.448-2.175-1.829a2.814 2.814 0 0 0-.949-.16c-2.332 0-5.259 2.655-8.648 5.729-4.586 4.16-9.784 8.875-15.114 8.875a8.552 8.552 0 0 1-3.044-.559c-2.422-.919-3.625-2.863-3.786-6.118-.148-2.984.614-6.672 1.35-10.239 1.402-6.792 2.852-13.815-2.168-16.024-1.572-.692-3.242-1.359-5.009-2.066-4.489-1.795-9.131-3.65-12.396-6.021-3.628-2.635-4.872-5.392-3.914-8.676.387-1.329.974-1.329 1.195-1.329 1.154 0 3.038 1.545 5.033 3.181 2.801 2.297 5.975 4.901 9.081 5.075.101.006.203.009.305.009 2.898 0 6.323-2.183 9.949-4.494 3.412-2.175 6.941-4.424 9.657-4.424 1.003 0 1.834.303 2.541.926 2.245 1.979.042 5.658-2.29 9.554-1.962 3.277-3.99 6.665-3.287 9.263.291 1.074 1.029 1.944 2.195 2.585.826.454 1.814.684 2.937.684 4.251 0 10.095-3.264 15.746-6.421 5.128-2.865 10.431-5.827 13.84-5.827.712 0 1.305.124 1.812.378 3.716 1.864 1.565 6.75-.925 12.407-1.764 4.009-3.589 8.154-3.589 11.843 0 2.737.404 5.518.761 7.971.907 6.241 1.231 9.805-2.665 10.472-1.391.239-2.559.355-3.566.355z" fill="#D4BA8C" data-color="3"></path>
-		<path d="M85.212 125.81c.877 0 1.602.263 2.215.803 1.803 1.589.225 4.568-2.387 8.931-2.014 3.365-4.098 6.845-3.34 9.644.327 1.208 1.145 2.18 2.433 2.888.899.495 1.967.745 3.175.745 4.38 0 10.28-3.296 15.986-6.484 5.073-2.834 10.319-5.764 13.6-5.764.634 0 1.154.107 1.591.326 1.486.745 1.971 1.972 1.622 4.103-.354 2.16-1.531 4.834-2.777 7.665-1.785 4.055-3.631 8.249-3.631 12.042 0 2.773.407 5.572.766 8.042.393 2.705.764 5.26.486 7.062-.268 1.738-1.064 2.565-2.747 2.853-1.366.234-2.506.348-3.485.348-3.251 0-4.14-1.223-4.641-3.48-.221-.993.47-2.73 1.138-4.41.969-2.437 1.971-4.957 1.075-6.94-.434-.959-1.261-1.662-2.458-2.09a3.303 3.303 0 0 0-1.114-.188c-2.522 0-5.371 2.585-8.979 5.857-2.202 1.997-4.697 4.261-7.24 5.956-2.817 1.878-5.285 2.791-7.543 2.791a8.05 8.05 0 0 1-2.869-.527c-2.216-.841-3.318-2.646-3.468-5.681-.144-2.921.611-6.578 1.341-10.115 1.442-6.984 2.932-14.206-2.452-16.575-1.58-.695-3.253-1.364-5.025-2.072-4.461-1.783-9.074-3.628-12.289-5.963-3.437-2.496-4.622-5.082-3.731-8.139.284-.974.603-.974.723-.974.978 0 2.881 1.56 4.72 3.069 2.859 2.345 6.099 5.003 9.366 5.186.109.006.221.009.333.009 3.041 0 6.525-2.22 10.214-4.571 3.353-2.137 6.82-4.347 9.392-4.347zm0-.985c-5.684 0-14.063 8.918-19.606 8.918a5.13 5.13 0 0 1-.278-.008c-5.26-.295-11.117-8.257-14.141-8.257-.745 0-1.318.483-1.668 1.683-2.699 9.255 11.954 13.111 21.594 17.352 9.64 4.242-6.555 28.149 4.627 32.391a8.99 8.99 0 0 0 3.219.591c9.546 0 18.685-14.604 23.762-14.604.273 0 .534.042.783.131 5.398 1.928-1.157 9.255-.386 12.725.604 2.717 1.916 4.252 5.603 4.252 1.022 0 2.228-.118 3.651-.362 6.555-1.123 2.314-10.06 2.314-18.929 0-8.869 11.183-21.208 4.242-24.69-.591-.296-1.273-.43-2.033-.43-7.26 0-21.545 12.248-29.586 12.248-1.006 0-1.915-.192-2.7-.623-7.712-4.242 8.869-16.581 3.47-21.339-.838-.738-1.805-1.049-2.867-1.049z" fill="#000002" data-color="2"></path>
-		<path d="M116.96 71.74c-4.643 0-7.702-7.449-8.538-9.757 1.13.667 3.773 1.917 7.704 1.917.334 0 .675-.009 1.013-.028 4.433-.241 7.021-1.926 8.073-2.793-.448 2.307-2.249 9.533-7.35 10.569a4.557 4.557 0 0 1-.902.092z" fill="#000002" data-color="2"></path>
-		<path d="M124.836 61.673c-.612 2.737-2.469 8.808-7.023 9.733a4.288 4.288 0 0 1-.853.087c-4.139 0-7.009-6.227-8.075-8.978 1.364.697 3.829 1.63 7.242 1.63.339 0 .684-.009 1.027-.028 3.876-.21 6.374-1.517 7.682-2.444zm.742-1.267s-2.607 2.902-8.453 3.22c-.342.019-.675.027-1 .027-5.223 0-8.171-2.27-8.171-2.27s3.291 10.603 9.005 10.603c.31 0 .627-.031.951-.097 6.299-1.279 7.668-11.483 7.668-11.483z" fill="#000002" data-color="2"></path>
-		<path d="M108.675 53.894c-.379 0-.727-.089-1.032-.266-1.403-.81-1.535-3.217-.294-5.366.93-1.611 2.442-2.694 3.763-2.694.379 0 .727.089 1.032.266.663.383 1.065 1.141 1.132 2.133.069 1.029-.228 2.177-.838 3.233-.931 1.611-2.443 2.694-3.763 2.694z" fill="#000002" data-color="2"></path>
-		<path d="M111.111 45.814c.335 0 .641.078.909.233 1.264.73 1.357 3.033.204 5.03-.888 1.538-2.314 2.571-3.549 2.571-.336 0-.641-.078-.909-.233-1.264-.73-1.357-3.033-.204-5.03.888-1.538 2.314-2.571 3.549-2.571zm0-.493c-1.375 0-2.967 1.07-3.976 2.817-1.311 2.27-1.139 4.824.384 5.703a2.28 2.28 0 0 0 1.155.299c1.375 0 2.967-1.07 3.976-2.817 1.311-2.27 1.139-4.824-.384-5.703a2.28 2.28 0 0 0-1.155-.299z" fill="#000002" data-color="2"></path>
-		<path d="M127.332 54.046c-1.303 0-2.758-1.201-3.54-2.92-.483-1.061-.66-2.181-.499-3.153.155-.936.606-1.618 1.27-1.921.244-.111.51-.167.791-.167 1.303 0 2.758 1.201 3.54 2.92.982 2.158.636 4.434-.771 5.074a1.899 1.899 0 0 1-.791.167z" fill="#000002" data-color="2"></path>
-		<path d="M125.354 46.132c1.209 0 2.573 1.141 3.316 2.775.91 1.999.612 4.173-.649 4.747a1.659 1.659 0 0 1-.689.145c-1.209 0-2.573-1.141-3.316-2.775-.463-1.017-.633-2.086-.48-3.011.141-.853.542-1.469 1.129-1.736.211-.096.443-.145.689-.145zm0-.493c-.31 0-.611.061-.893.19-1.533.697-1.933 3.115-.893 5.4.848 1.864 2.392 3.064 3.765 3.064.31 0 .611-.061.893-.19 1.533-.697 1.933-3.115.893-5.4-.849-1.864-2.393-3.064-3.765-3.064z" fill="#000002" data-color="2"></path>
-		<path d="M77.318 128.931a.492.492 0 0 1-.39-.793c.063-.082 6.389-8.331 13.233-19.928 6.819-11.554 9.79-24.977 9.819-25.111a.493.493 0 0 1 .963.209c-.03.136-3.032 13.709-9.933 25.403-6.877 11.652-13.238 19.946-13.301 20.028a.492.492 0 0 1-.391.192z" fill="#000002" data-color="2"></path>
-		<path d="M83.09 141.031a.493.493 0 0 1-.369-.82c.096-.108 9.583-10.896 12.41-19.375 2.845-8.536 4.824-21.313 4.843-21.441a.492.492 0 1 1 .974.15c-.02.129-2.01 12.987-4.883 21.603-2.891 8.672-12.211 19.27-12.607 19.717a.49.49 0 0 1-.368.166z" fill="#000002" data-color="2"></path>
-		<path d="M107.616 139.509a.493.493 0 0 1-.395-.786c.076-.103 7.654-10.375 11.441-20.031 3.761-9.59 2.068-20.84 2.05-20.952a.493.493 0 1 1 .974-.152c.018.115 1.754 11.621-2.106 21.464-3.836 9.781-11.49 20.155-11.567 20.259a.496.496 0 0 1-.397.198z" fill="#000002" data-color="2"></path>
-		<path d="M114.595 163.646a.493.493 0 0 1-.431-.731c.074-.134 7.431-13.501 10.466-22.534 3.022-8.994 2.487-32.635 2.481-32.873a.492.492 0 1 1 .985-.023c.024.978.545 24.052-2.532 33.211-3.063 9.118-10.464 22.562-10.538 22.697a.493.493 0 0 1-.431.253z" fill="#000002" data-color="2"></path>
-	</g>
-</svg>

package/dist/esm/playground/mouseComponent.js

@@ -1,61 +0,0 @@
-import React, { forwardRef } from 'react';
-import styles from './playground.module.scss';
-import ghost from './mouse-parallax-components/vector.svg?url';
-import plastic from './mouse-parallax-components/plastic.jpeg';
-export const COMPONENTS_TYPE = {
-  image: 'image',
-  square: 'square',
-  svg: 'SVG',
-  text: 'text'
-};
-export const MouseComponent = /*#__PURE__*/forwardRef((props, ref) => {
-  const {
-    type,
-    rotation
-  } = props;
-  switch (type) {
-    case COMPONENTS_TYPE.image:
-      return /*#__PURE__*/React.createElement("img", {
-        id: "plastic",
-        className: styles.imageComponent,
-        src: plastic,
-        alt: "Plastic bag in ocean",
-        ref: ref,
-        style: {
-          '--comp-rotate-z': `${rotation}deg`
-        }
-      });
-    case COMPONENTS_TYPE.square:
-      return /*#__PURE__*/React.createElement("div", {
-        className: styles.component,
-        ref: ref,
-        style: {
-          background: 'MediumSlateBlue',
-          '--comp-rotate-z': `${rotation}deg`
-        }
-      }, "Mouse");
-    case COMPONENTS_TYPE.svg:
-      return /*#__PURE__*/React.createElement("img", {
-        id: "vector",
-        className: styles.svgComponent,
-        src: ghost,
-        alt: "Friendly ghost",
-        ref: ref,
-        style: {
-          '--comp-rotate-z': `${rotation}deg`
-        }
-      });
-    case COMPONENTS_TYPE.text:
-      return /*#__PURE__*/React.createElement("h1", {
-        id: "large-header",
-        className: styles.textComponent,
-        ref: ref,
-        style: {
-          '--comp-rotate-z': `${rotation}deg`
-        }
-      }, "Dare ", /*#__PURE__*/React.createElement("br", null), " To Be ", /*#__PURE__*/React.createElement("br", null), " BOLD");
-    default:
-      return /*#__PURE__*/React.createElement("p", null, "Unknown input ", type);
-  }
-});
-//# sourceMappingURL=mouseComponent.js.map

package/dist/esm/playground/mouseComponent.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["React","forwardRef","styles","ghost","plastic","COMPONENTS_TYPE","image","square","svg","text","MouseComponent","props","ref","type","rotation","createElement","id","className","imageComponent","src","alt","style","component","background","svgComponent","textComponent"],"sources":["../../../src/playground/mouseComponent.tsx"],"sourcesContent":["import React, { CSSProperties, forwardRef, Ref } from 'react';\n\nimport styles from './playground.module.scss';\nimport ghost from './mouse-parallax-components/vector.svg?url';\nimport plastic from './mouse-parallax-components/plastic.jpeg';\n\nexport type MouseComponentType = 'image' | 'square' | 'SVG' | 'text';\n\nexport interface MouseComponentProps {\n  type: MouseComponentType;\n  ref: Ref<HTMLElement>;\n  rotation: number;\n}\n\nexport const COMPONENTS_TYPE: Record<\n  Lowercase<MouseComponentType>,\n  MouseComponentType\n> = {\n  image: 'image',\n  square: 'square',\n  svg: 'SVG',\n  text: 'text',\n};\n\nexport const MouseComponent: React.FC<MouseComponentProps> = forwardRef<\n  HTMLElement,\n  MouseComponentProps\n>((props, ref) => {\n  const { type, rotation } = props;\n  switch (type) {\n    case COMPONENTS_TYPE.image:\n      return (\n        <img\n          id=\"plastic\"\n          className={styles.imageComponent}\n          src={plastic}\n          alt=\"Plastic bag in ocean\"\n          ref={ref as Ref<HTMLImageElement>}\n          style={\n            {\n              '--comp-rotate-z': `${rotation}deg`,\n            } as CSSProperties\n          }\n        />\n      );\n    case COMPONENTS_TYPE.square:\n      return (\n        <div\n          className={styles.component}\n          ref={ref as Ref<HTMLDivElement>}\n          style={\n            {\n              background: 'MediumSlateBlue',\n              '--comp-rotate-z': `${rotation}deg`,\n            } as CSSProperties\n          }\n        >\n          Mouse\n        </div>\n      );\n    case COMPONENTS_TYPE.svg:\n      return (\n        <img\n          id=\"vector\"\n          className={styles.svgComponent}\n          src={ghost}\n          alt=\"Friendly ghost\"\n          ref={ref as Ref<HTMLImageElement>}\n          style={\n            {\n              '--comp-rotate-z': `${rotation}deg`,\n            } as CSSProperties\n          }\n        />\n      );\n    case COMPONENTS_TYPE.text:\n      return (\n        <h1\n          id=\"large-header\"\n          className={styles.textComponent}\n          ref={ref as Ref<HTMLHeadingElement>}\n          style={\n            {\n              '--comp-rotate-z': `${rotation}deg`,\n            } as CSSProperties\n          }\n        >\n          Dare <br /> To Be <br /> BOLD\n        </h1>\n      );\n    default:\n      return <p>Unknown input {type}</p>;\n  }\n});\n"],"mappings":"AAAA,OAAOA,KAAK,IAAmBC,UAAU,QAAa,OAAO;AAE7D,OAAOC,MAAM,MAAM,0BAA0B;AAC7C,OAAOC,KAAK,MAAM,4CAA4C;AAC9D,OAAOC,OAAO,MAAM,0CAA0C;AAU9D,OAAO,MAAMC,eAGZ,GAAG;EACFC,KAAK,EAAE,OAAO;EACdC,MAAM,EAAE,QAAQ;EAChBC,GAAG,EAAE,KAAK;EACVC,IAAI,EAAE;AACR,CAAC;AAED,OAAO,MAAMC,cAA6C,gBAAGT,UAAU,CAGrE,CAACU,KAAK,EAAEC,GAAG,KAAK;EAChB,MAAM;IAAEC,IAAI;IAAEC;EAAS,CAAC,GAAGH,KAAK;EAChC,QAAQE,IAAI;IACV,KAAKR,eAAe,CAACC,KAAK;MACxB,oBACEN,KAAA,CAAAe,aAAA;QACEC,EAAE,EAAC,SAAS;QACZC,SAAS,EAAEf,MAAM,CAACgB,cAAe;QACjCC,GAAG,EAAEf,OAAQ;QACbgB,GAAG,EAAC,sBAAsB;QAC1BR,GAAG,EAAEA,GAA6B;QAClCS,KAAK,EACH;UACE,iBAAiB,EAAE,GAAGP,QAAQ;QAChC;MACD,CACF,CAAC;IAEN,KAAKT,eAAe,CAACE,MAAM;MACzB,oBACEP,KAAA,CAAAe,aAAA;QACEE,SAAS,EAAEf,MAAM,CAACoB,SAAU;QAC5BV,GAAG,EAAEA,GAA2B;QAChCS,KAAK,EACH;UACEE,UAAU,EAAE,iBAAiB;UAC7B,iBAAiB,EAAE,GAAGT,QAAQ;QAChC;MACD,GACF,OAEI,CAAC;IAEV,KAAKT,eAAe,CAACG,GAAG;MACtB,oBACER,KAAA,CAAAe,aAAA;QACEC,EAAE,EAAC,QAAQ;QACXC,SAAS,EAAEf,MAAM,CAACsB,YAAa;QAC/BL,GAAG,EAAEhB,KAAM;QACXiB,GAAG,EAAC,gBAAgB;QACpBR,GAAG,EAAEA,GAA6B;QAClCS,KAAK,EACH;UACE,iBAAiB,EAAE,GAAGP,QAAQ;QAChC;MACD,CACF,CAAC;IAEN,KAAKT,eAAe,CAACI,IAAI;MACvB,oBACET,KAAA,CAAAe,aAAA;QACEC,EAAE,EAAC,cAAc;QACjBC,SAAS,EAAEf,MAAM,CAACuB,aAAc;QAChCb,GAAG,EAAEA,GAA+B;QACpCS,KAAK,EACH;UACE,iBAAiB,EAAE,GAAGP,QAAQ;QAChC;MACD,GACF,OACM,eAAAd,KAAA,CAAAe,aAAA,WAAK,CAAC,WAAO,eAAAf,KAAA,CAAAe,aAAA,WAAK,CAAC,SACtB,CAAC;IAET;MACE,oBAAOf,KAAA,CAAAe,aAAA,YAAG,gBAAc,EAACF,IAAQ,CAAC;EACtC;AACF,CAAC,CAAC","ignoreList":[]}

package/dist/esm/playground/playground-common.js

@@ -1,91 +0,0 @@
-export const schemaMapper = {
-  wix: 'wix',
-  desktop: 'wix',
-  mobile: 'wix',
-  responsive: 'responsive'
-};
-export const rangeMapper = {
-  in: 'scrollIn',
-  out: 'scrollOut',
-  continuous: 'scrollContinuous'
-};
-export function mapSchemaToDefaultData(schema, schemaEditor) {
-  if (!schema) {
-    console.error('Schema is undefined');
-    return {};
-  }
-  return Object.fromEntries(Object.entries(schema).map(_ref => {
-    let [param, values] = _ref;
-    const defaultValue = schemaEditor === 'mobile' ? values.mobileDefault ?? values.default : values.default;
-    let value = defaultValue;
-    if (param === 'duration') {
-      value = defaultValue ?? 1000;
-    } else if (param === 'delay') {
-      value = defaultValue ?? 0;
-    } else if (values.type === 'number') {
-      value = +value;
-    }
-    return [param, value];
-  }));
-}
-export function resetAnimation(element, timeline,
-// TODO
-scroll) {
-  var _timeline$progress;
-  // Clear
-  scroll == null || scroll.destroy();
-  timeline == null || (_timeline$progress = timeline.progress(1)) == null || _timeline$progress.kill();
-  element.style.perspective = '';
-  element.style.perspectiveOrigin = '';
-  element.style.transformOrigin = '';
-  element.style.transform = '';
-  element.style.opacity = '';
-  element.style.clipPath = '';
-  element.style.clip = '';
-  element.style.filter = '';
-  delete element._gsap;
-}
-export function getAnimations(defs, includeGroups, excludeGroups) {
-  if (includeGroups === void 0) {
-    includeGroups = [];
-  }
-  if (excludeGroups === void 0) {
-    excludeGroups = [];
-  }
-  return Object.fromEntries(Object.entries(defs).filter(_ref2 => {
-    let [, value] = _ref2;
-    return includeGroups.every(group => {
-      var _value$groups;
-      return (_value$groups = value.groups) == null ? void 0 : _value$groups.includes(group);
-    }) && !excludeGroups.some(group => {
-      var _value$groups2;
-      return (_value$groups2 = value.groups) == null ? void 0 : _value$groups2.includes(group);
-    });
-  }));
-}
-
-// return args as space separated string, filter all falsy values
-export function c() {
-  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-    args[_key] = arguments[_key];
-  }
-  return args.filter(Boolean).join(' ');
-}
-export function mapLegacySchemaToDefaultData(schema, data) {
-  if (data === void 0) {
-    data = {};
-  }
-  return Object.fromEntries(Object.entries(schema).map(_ref3 => {
-    let [param, values] = _ref3;
-    let value = values.default;
-    if (param === 'duration') {
-      value = data.duration ?? 1;
-    } else if (param === 'delay') {
-      value = data.delay ?? 0;
-    } else if (values.type === 'number') {
-      value = +value;
-    }
-    return [param, value];
-  }));
-}
-//# sourceMappingURL=playground-common.js.map