@fluentui/react-motion-components-preview 0.1.4 → 0.3.0

package/CHANGELOG.md

@@ -1,9 +1,39 @@
 # Change Log - @fluentui/react-motion-components-preview
 
-This log was last generated on Tue, 23 Jul 2024 20:13:12 GMT and should not be manually modified.
+This log was last generated on Mon, 11 Nov 2024 09:55:11 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [0.3.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion-components-preview_v0.3.0)
+
+Mon, 11 Nov 2024 09:55:11 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion-components-preview_v0.2.0..@fluentui/react-motion-components-preview_v0.3.0)
+
+### Minor changes
+
+- feat: add CollapseDelayed motion component variant ([PR #33069](https://github.com/microsoft/fluentui/pull/33069) by robertpenner@microsoft.com)
+- Rename motion component variants ...Exaggerated to ...Relaxed ([PR #33182](https://github.com/microsoft/fluentui/pull/33182) by olkatruk@microsoft.com)
+
+### Patches
+
+- refactor: migrate Fade motion component to new variant structure ([PR #33080](https://github.com/microsoft/fluentui/pull/33080) by robertpenner@microsoft.com)
+- fix: handle content padding in Collapse ([PR #33063](https://github.com/microsoft/fluentui/pull/33063) by robertpenner@microsoft.com)
+- chore: replace npm-scripts and just-scrtips with nx inferred tasks ([PR #33074](https://github.com/microsoft/fluentui/pull/33074) by martinhochel@microsoft.com)
+
+## [0.2.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion-components-preview_v0.2.0)
+
+Tue, 15 Oct 2024 17:17:49 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion-components-preview_v0.1.1..@fluentui/react-motion-components-preview_v0.2.0)
+
+### Minor changes
+
+- refactor: simplify motion component variant creation ([PR #32939](https://github.com/microsoft/fluentui/pull/32939) by robertpenner@microsoft.com)
+- feat: add Collapse orientation parameter & horizontal implementation ([PR #32998](https://github.com/microsoft/fluentui/pull/32998) by robertpenner@microsoft.com)
+
+### Patches
+
+- fix: Collapse should only effect opacity when animateOpacity is true ([PR #32999](https://github.com/microsoft/fluentui/pull/32999) by robertpenner@microsoft.com)
+
 ## [0.1.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion-components-preview_v0.1.1)
 
 Tue, 23 Jul 2024 20:13:12 GMT 

package/dist/index.d.ts

@@ -1,31 +1,110 @@
+import type { MotionParam } from '@fluentui/react-motion';
 import { PresenceComponent } from '@fluentui/react-motion';
+import type { PresenceMotion } from '@fluentui/react-motion';
+import type { PresenceMotionFn } from '@fluentui/react-motion';
 
 /** A React component that applies collapse/expand transitions to its children. */
-export declare const Collapse: PresenceComponent<    {
-animateOpacity?: boolean | undefined;
-}>;
+export declare const Collapse: PresenceComponent<CollapseRuntimeParams>;
 
-export declare const CollapseExaggerated: PresenceComponent<    {
-animateOpacity?: boolean | undefined;
-}>;
+export declare const CollapseDelayed: PresenceComponent<CollapseRuntimeParams>;
 
-export declare const CollapseSnappy: PresenceComponent<    {
-animateOpacity?: boolean | undefined;
-}>;
+declare type CollapseDelayedVariantParams = {
+    /** Time (ms) for the size expand. Defaults to the durationNormal value (200 ms). */
+    enterSizeDuration?: number;
+    /** Time (ms) for the fade-in. Defaults to the enterSizeDuration param, to sync fade-in with expand. */
+    enterOpacityDuration?: number;
+    /** Time (ms) for the size collapse. Defaults to the enterSizeDuration param, for temporal symmetry.. */
+    exitSizeDuration?: number;
+    /** Defaults to the exitSizeDuration param, to sync the fade-out with the collapse. */
+    exitOpacityDuration?: number;
+    /** Time (ms) between the size expand start and the fade-in start. Defaults to `0`.  */
+    enterDelay?: number;
+    /** Time (ms) between the fade-out start and the size collapse start. Defaults to `0`.  */
+    exitDelay?: number;
+    /** Easing curve for the enter transition, shared by size and opacity. Defaults to the easeEaseMax value.  */
+    enterEasing?: string;
+    /** Easing curve for the exit transition, shared by size and opacity. Defaults to the enterEasing param. */
+    exitEasing?: string;
+};
+
+declare type CollapseOrientation = 'horizontal' | 'vertical';
+
+export declare const CollapseRelaxed: PresenceComponent<CollapseRuntimeParams>;
+
+export declare type CollapseRuntimeParams = {
+    /** Whether to animate the opacity. Defaults to `true`. */
+    animateOpacity?: boolean;
+    /** The orientation of the size animation. Defaults to `'vertical'` to expand/collapse the height. */
+    orientation?: CollapseOrientation;
+};
+
+export declare const CollapseSnappy: PresenceComponent<CollapseRuntimeParams>;
+
+declare type CollapseVariantParams = {
+    /** Time (ms) for the enter transition (expand). Defaults to the `durationNormal` value (200 ms). */
+    enterDuration?: number;
+    /** Easing curve for the enter transition (expand). Defaults to the `easeEaseMax` value.  */
+    enterEasing?: string;
+    /** Time (ms) for the exit transition (collapse). Defaults to the `enterDuration` param for symmetry. */
+    exitDuration?: number;
+    /** Easing curve for the exit transition (collapse). Defaults to the `enterEasing` param for symmetry.  */
+    exitEasing?: string;
+};
+
+/** Define a presence motion for collapse/expand that can stagger the size and opacity motions by a given delay. */
+export declare const createCollapseDelayedPresence: PresenceMotionFnCreator<CollapseDelayedVariantParams, CollapseRuntimeParams>;
+
+/** Defines a presence motion for collapse/expand. */
+export declare const createCollapsePresence: PresenceMotionFnCreator<CollapseVariantParams, CollapseRuntimeParams>;
+
+/** Define a presence motion for fade in/out  */
+export declare const createFadePresence: PresenceMotionCreator<FadeVariantParams>;
 
 /** A React component that applies fade in/out transitions to its children. */
 export declare const Fade: PresenceComponent<    {}>;
 
-export declare const FadeExaggerated: PresenceComponent<    {}>;
+export declare const FadeRelaxed: PresenceComponent<    {}>;
 
 export declare const FadeSnappy: PresenceComponent<    {}>;
 
+declare type FadeVariantParams = {
+    /** Time (ms) for the enter transition (fade-in). Defaults to the `durationNormal` value (200 ms). */
+    enterDuration?: number;
+    /** Easing curve for the enter transition (fade-in). Defaults to the `easeEase` value.  */
+    enterEasing?: string;
+    /** Time (ms) for the exit transition (fade-out). Defaults to the `enterDuration` param for symmetry. */
+    exitDuration?: number;
+    /** Easing curve for the exit transition (fade-out). Defaults to the `enterEasing` param for symmetry.  */
+    exitEasing?: string;
+};
+
+/**
+ * This is a factory function that generates a motion object from variant params, e.g. duration, easing, etc.
+ * The generated object defines a presence motion with `enter` and `exit` transitions.
+ * This motion object is declarative, i.e. data without side effects,
+ * and it is framework-independent, i.e. non-React.
+ * It can be turned into a React component using `createPresenceComponent`.
+ */
+declare type PresenceMotionCreator<MotionVariantParams extends Record<string, MotionParam> = {}> = (variantParams?: MotionVariantParams) => PresenceMotion;
+
+/**
+ * This is a factory function that generates a motion function, which has variant params bound into it.
+ * The generated motion function accepts other runtime params that aren't locked into the variant, but supplied at runtime.
+ * This separation allows the variant to be defined once and reused with different runtime params which may be orthogonal to the variant params.
+ * For example, a variant may define the duration and easing of a transition, which are fixed for all instances of the variant,
+ * while the runtime params may give access to the target element, which is different for each instance.
+ *
+ * The generated motion function is also framework-independent, i.e. non-React.
+ * It can be turned into a React component using `createPresenceComponent`.
+ */
+declare type PresenceMotionFnCreator<MotionVariantParams extends Record<string, MotionParam> = {}, MotionRuntimeParams extends Record<string, MotionParam> = {}> = (variantParams?: MotionVariantParams) => PresenceMotionFn<MotionRuntimeParams>;
+
 /** A React component that applies scale in/out transitions to its children. */
 export declare const Scale: PresenceComponent<    {
 animateOpacity?: boolean | undefined;
 }>;
 
-export declare const ScaleExaggerated: PresenceComponent<    {
+export declare const ScaleRelaxed: PresenceComponent<    {
 animateOpacity?: boolean | undefined;
 }>;
 

package/lib/components/Collapse/Collapse.js

@@ -1,71 +1,78 @@
-import { motionTokens, createPresenceComponent, createPresenceComponentVariant } from '@fluentui/react-motion';
-/** Define a presence motion for collapse/expand */ const collapseMotion = ({ element, animateOpacity = true })=>{
-    const fromOpacity = animateOpacity ? 0 : 1;
-    const toOpacity = 1;
-    const fromHeight = '0'; // Could be a custom param in the future: start partially expanded
-    const toHeight = `${element.scrollHeight}px`;
-    const overflow = 'hidden';
-    const duration = motionTokens.durationNormal;
-    const easing = motionTokens.curveEasyEaseMax;
-    const enterKeyframes = [
-        {
-            opacity: fromOpacity,
-            maxHeight: fromHeight,
-            overflow
-        },
-        // Transition to the height of the content, at 99.99% of the duration.
-        {
-            opacity: toOpacity,
-            maxHeight: toHeight,
-            offset: 0.9999,
-            overflow
-        },
-        // On completion, remove the maxHeight because the content might need to expand later.
-        // This extra keyframe is simpler than firing a callback on completion.
-        {
-            opacity: toOpacity,
-            maxHeight: 'unset',
-            overflow
+import { motionTokens, createPresenceComponent } from '@fluentui/react-motion';
+import { sizeEnterAtom, whitespaceEnterAtom, opacityEnterAtom, opacityExitAtom, sizeExitAtom, whitespaceExitAtom } from './collapse-atoms';
+/** Define a presence motion for collapse/expand that can stagger the size and opacity motions by a given delay. */ export const createCollapseDelayedPresence = ({ // enter
+enterSizeDuration = motionTokens.durationNormal, enterOpacityDuration = enterSizeDuration, enterEasing = motionTokens.curveEasyEaseMax, enterDelay = 0, // exit: durations and easing default to enter values for symmetry
+exitSizeDuration = enterSizeDuration, exitOpacityDuration = enterOpacityDuration, exitEasing = enterEasing, exitDelay = 0 } = {})=>({ element, animateOpacity = true, orientation = 'vertical' })=>{
+        // ----- ENTER -----
+        // The enter transition is an array of up to 3 motion atoms: size, whitespace and opacity.
+        const enterAtoms = [
+            sizeEnterAtom({
+                orientation,
+                duration: enterSizeDuration,
+                easing: enterEasing,
+                element
+            }),
+            whitespaceEnterAtom({
+                orientation,
+                duration: enterSizeDuration,
+                easing: enterEasing
+            })
+        ];
+        // Fade in only if animateOpacity is true. Otherwise, leave opacity unaffected.
+        if (animateOpacity) {
+            enterAtoms.push(opacityEnterAtom({
+                duration: enterOpacityDuration,
+                easing: enterEasing,
+                delay: enterDelay
+            }));
         }
-    ];
-    const exitKeyframes = [
-        {
-            opacity: toOpacity,
-            maxHeight: toHeight,
-            overflow
-        },
-        {
-            opacity: fromOpacity,
-            maxHeight: fromHeight,
-            overflow
-        }
-    ];
-    return {
-        enter: {
-            duration,
-            easing,
-            keyframes: enterKeyframes
-        },
-        exit: {
-            duration,
-            easing,
-            keyframes: exitKeyframes
+        // ----- EXIT -----
+        // The exit transition is an array of up to 3 motion atoms: opacity, size and whitespace.
+        const exitAtoms = [];
+        // Fade out only if animateOpacity is true. Otherwise, leave opacity unaffected.
+        if (animateOpacity) {
+            exitAtoms.push(opacityExitAtom({
+                duration: exitOpacityDuration,
+                easing: exitEasing
+            }));
         }
+        exitAtoms.push(sizeExitAtom({
+            orientation,
+            duration: exitSizeDuration,
+            easing: exitEasing,
+            element,
+            delay: exitDelay
+        }));
+        exitAtoms.push(whitespaceExitAtom({
+            orientation,
+            duration: exitSizeDuration,
+            easing: exitEasing,
+            delay: exitDelay
+        }));
+        return {
+            enter: enterAtoms,
+            exit: exitAtoms
+        };
     };
-};
-/** A React component that applies collapse/expand transitions to its children. */ export const Collapse = createPresenceComponent(collapseMotion);
-export const CollapseSnappy = createPresenceComponentVariant(Collapse, {
-    all: {
-        duration: motionTokens.durationUltraFast
-    }
-});
-export const CollapseExaggerated = createPresenceComponentVariant(Collapse, {
-    enter: {
-        duration: motionTokens.durationSlow,
-        easing: motionTokens.curveEasyEaseMax
-    },
-    exit: {
-        duration: motionTokens.durationNormal,
-        easing: motionTokens.curveEasyEaseMax
-    }
-});
+/** Defines a presence motion for collapse/expand. */ export const createCollapsePresence = ({ enterDuration = motionTokens.durationNormal, enterEasing = motionTokens.curveEasyEaseMax, exitDuration = enterDuration, exitEasing = enterEasing } = {})=>// Implement a regular collapse as a special case of the delayed collapse,
+    // where the delays are zero, and the size and opacity durations are equal.
+    createCollapseDelayedPresence({
+        enterSizeDuration: enterDuration,
+        enterEasing,
+        exitSizeDuration: exitDuration,
+        exitEasing
+    });
+/** A React component that applies collapse/expand transitions to its children. */ export const Collapse = createPresenceComponent(createCollapsePresence());
+export const CollapseSnappy = createPresenceComponent(createCollapsePresence({
+    enterDuration: motionTokens.durationFast
+}));
+export const CollapseRelaxed = createPresenceComponent(createCollapsePresence({
+    enterDuration: motionTokens.durationSlower
+}));
+export const CollapseDelayed = createPresenceComponent(createCollapseDelayedPresence({
+    enterSizeDuration: motionTokens.durationNormal,
+    enterOpacityDuration: motionTokens.durationSlower,
+    enterDelay: motionTokens.durationNormal,
+    exitDelay: motionTokens.durationSlower,
+    enterEasing: motionTokens.curveEasyEase
+}));

package/lib/components/Collapse/Collapse.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Collapse.ts"],"sourcesContent":["import {\n  motionTokens,\n  type PresenceMotionFn,\n  createPresenceComponent,\n  createPresenceComponentVariant,\n} from '@fluentui/react-motion';\n\n/** Define a presence motion for collapse/expand */\nconst collapseMotion: PresenceMotionFn<{ animateOpacity?: boolean }> = ({ element, animateOpacity = true }) => {\n  const fromOpacity = animateOpacity ? 0 : 1;\n  const toOpacity = 1;\n  const fromHeight = '0'; // Could be a custom param in the future: start partially expanded\n  const toHeight = `${element.scrollHeight}px`;\n  const overflow = 'hidden';\n\n  const duration = motionTokens.durationNormal;\n  const easing = motionTokens.curveEasyEaseMax;\n\n  const enterKeyframes = [\n    { opacity: fromOpacity, maxHeight: fromHeight, overflow },\n    // Transition to the height of the content, at 99.99% of the duration.\n    { opacity: toOpacity, maxHeight: toHeight, offset: 0.9999, overflow },\n    // On completion, remove the maxHeight because the content might need to expand later.\n    // This extra keyframe is simpler than firing a callback on completion.\n    { opacity: toOpacity, maxHeight: 'unset', overflow },\n  ];\n\n  const exitKeyframes = [\n    { opacity: toOpacity, maxHeight: toHeight, overflow },\n    { opacity: fromOpacity, maxHeight: fromHeight, overflow },\n  ];\n\n  return {\n    enter: { duration, easing, keyframes: enterKeyframes },\n    exit: { duration, easing, keyframes: exitKeyframes },\n  };\n};\n\n/** A React component that applies collapse/expand transitions to its children. */\nexport const Collapse = createPresenceComponent(collapseMotion);\n\nexport const CollapseSnappy = createPresenceComponentVariant(Collapse, {\n  all: { duration: motionTokens.durationUltraFast },\n});\n\nexport const CollapseExaggerated = createPresenceComponentVariant(Collapse, {\n  enter: { duration: motionTokens.durationSlow, easing: motionTokens.curveEasyEaseMax },\n  exit: { duration: motionTokens.durationNormal, easing: motionTokens.curveEasyEaseMax },\n});\n"],"names":["motionTokens","createPresenceComponent","createPresenceComponentVariant","collapseMotion","element","animateOpacity","fromOpacity","toOpacity","fromHeight","toHeight","scrollHeight","overflow","duration","durationNormal","easing","curveEasyEaseMax","enterKeyframes","opacity","maxHeight","offset","exitKeyframes","enter","keyframes","exit","Collapse","CollapseSnappy","all","durationUltraFast","CollapseExaggerated","durationSlow"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SACEA,YAAY,EAEZC,uBAAuB,EACvBC,8BAA8B,QACzB,yBAAyB;AAEhC,iDAAiD,GACjD,MAAMC,iBAAiE,CAAC,EAAEC,OAAO,EAAEC,iBAAiB,IAAI,EAAE;IACxG,MAAMC,cAAcD,iBAAiB,IAAI;IACzC,MAAME,YAAY;IAClB,MAAMC,aAAa,KAAK,kEAAkE;IAC1F,MAAMC,WAAW,CAAC,EAAEL,QAAQM,YAAY,CAAC,EAAE,CAAC;IAC5C,MAAMC,WAAW;IAEjB,MAAMC,WAAWZ,aAAaa,cAAc;IAC5C,MAAMC,SAASd,aAAae,gBAAgB;IAE5C,MAAMC,iBAAiB;QACrB;YAAEC,SAASX;YAAaY,WAAWV;YAAYG;QAAS;QACxD,sEAAsE;QACtE;YAAEM,SAASV;YAAWW,WAAWT;YAAUU,QAAQ;YAAQR;QAAS;QACpE,sFAAsF;QACtF,uEAAuE;QACvE;YAAEM,SAASV;YAAWW,WAAW;YAASP;QAAS;KACpD;IAED,MAAMS,gBAAgB;QACpB;YAAEH,SAASV;YAAWW,WAAWT;YAAUE;QAAS;QACpD;YAAEM,SAASX;YAAaY,WAAWV;YAAYG;QAAS;KACzD;IAED,OAAO;QACLU,OAAO;YAAET;YAAUE;YAAQQ,WAAWN;QAAe;QACrDO,MAAM;YAAEX;YAAUE;YAAQQ,WAAWF;QAAc;IACrD;AACF;AAEA,gFAAgF,GAChF,OAAO,MAAMI,WAAWvB,wBAAwBE,gBAAgB;AAEhE,OAAO,MAAMsB,iBAAiBvB,+BAA+BsB,UAAU;IACrEE,KAAK;QAAEd,UAAUZ,aAAa2B,iBAAiB;IAAC;AAClD,GAAG;AAEH,OAAO,MAAMC,sBAAsB1B,+BAA+BsB,UAAU;IAC1EH,OAAO;QAAET,UAAUZ,aAAa6B,YAAY;QAAEf,QAAQd,aAAae,gBAAgB;IAAC;IACpFQ,MAAM;QAAEX,UAAUZ,aAAaa,cAAc;QAAEC,QAAQd,aAAae,gBAAgB;IAAC;AACvF,GAAG"}
+{"version":3,"sources":["../src/components/Collapse/Collapse.ts"],"sourcesContent":["import { motionTokens, createPresenceComponent, AtomMotion } from '@fluentui/react-motion';\nimport type { PresenceMotionFnCreator } from '../../types';\nimport type { CollapseDelayedVariantParams, CollapseRuntimeParams, CollapseVariantParams } from './collapse-types';\nimport {\n  sizeEnterAtom,\n  whitespaceEnterAtom,\n  opacityEnterAtom,\n  opacityExitAtom,\n  sizeExitAtom,\n  whitespaceExitAtom,\n} from './collapse-atoms';\n\n/** Define a presence motion for collapse/expand that can stagger the size and opacity motions by a given delay. */\nexport const createCollapseDelayedPresence: PresenceMotionFnCreator<\n  CollapseDelayedVariantParams,\n  CollapseRuntimeParams\n> =\n  ({\n    // enter\n    enterSizeDuration = motionTokens.durationNormal,\n    enterOpacityDuration = enterSizeDuration, // in sync with size duration by default\n    enterEasing = motionTokens.curveEasyEaseMax,\n    enterDelay = 0,\n\n    // exit: durations and easing default to enter values for symmetry\n    exitSizeDuration = enterSizeDuration,\n    exitOpacityDuration = enterOpacityDuration,\n    exitEasing = enterEasing,\n    exitDelay = 0,\n  } = {}) =>\n  ({ element, animateOpacity = true, orientation = 'vertical' }) => {\n    // ----- ENTER -----\n    // The enter transition is an array of up to 3 motion atoms: size, whitespace and opacity.\n    const enterAtoms: AtomMotion[] = [\n      sizeEnterAtom({\n        orientation,\n        duration: enterSizeDuration,\n        easing: enterEasing,\n        element,\n      }),\n      whitespaceEnterAtom({\n        orientation,\n        duration: enterSizeDuration,\n        easing: enterEasing,\n      }),\n    ];\n    // Fade in only if animateOpacity is true. Otherwise, leave opacity unaffected.\n    if (animateOpacity) {\n      enterAtoms.push(\n        opacityEnterAtom({\n          duration: enterOpacityDuration,\n          easing: enterEasing,\n          delay: enterDelay,\n        }),\n      );\n    }\n\n    // ----- EXIT -----\n    // The exit transition is an array of up to 3 motion atoms: opacity, size and whitespace.\n    const exitAtoms: AtomMotion[] = [];\n    // Fade out only if animateOpacity is true. Otherwise, leave opacity unaffected.\n    if (animateOpacity) {\n      exitAtoms.push(\n        opacityExitAtom({\n          duration: exitOpacityDuration,\n          easing: exitEasing,\n        }),\n      );\n    }\n    exitAtoms.push(\n      sizeExitAtom({\n        orientation,\n        duration: exitSizeDuration,\n        easing: exitEasing,\n        element,\n        delay: exitDelay,\n      }),\n    );\n    exitAtoms.push(\n      whitespaceExitAtom({\n        orientation,\n        duration: exitSizeDuration,\n        easing: exitEasing,\n        delay: exitDelay,\n      }),\n    );\n\n    return {\n      enter: enterAtoms,\n      exit: exitAtoms,\n    };\n  };\n\n/** Defines a presence motion for collapse/expand. */\nexport const createCollapsePresence: PresenceMotionFnCreator<CollapseVariantParams, CollapseRuntimeParams> = ({\n  enterDuration = motionTokens.durationNormal,\n  enterEasing = motionTokens.curveEasyEaseMax,\n  exitDuration = enterDuration,\n  exitEasing = enterEasing,\n} = {}) =>\n  // Implement a regular collapse as a special case of the delayed collapse,\n  // where the delays are zero, and the size and opacity durations are equal.\n  createCollapseDelayedPresence({\n    enterSizeDuration: enterDuration,\n    enterEasing,\n    exitSizeDuration: exitDuration,\n    exitEasing,\n  });\n\n/** A React component that applies collapse/expand transitions to its children. */\nexport const Collapse = createPresenceComponent(createCollapsePresence());\n\nexport const CollapseSnappy = createPresenceComponent(\n  createCollapsePresence({ enterDuration: motionTokens.durationFast }),\n);\n\nexport const CollapseRelaxed = createPresenceComponent(\n  createCollapsePresence({ enterDuration: motionTokens.durationSlower }),\n);\n\nexport const CollapseDelayed = createPresenceComponent(\n  createCollapseDelayedPresence({\n    enterSizeDuration: motionTokens.durationNormal,\n    enterOpacityDuration: motionTokens.durationSlower,\n    enterDelay: motionTokens.durationNormal,\n    exitDelay: motionTokens.durationSlower,\n    enterEasing: motionTokens.curveEasyEase,\n  }),\n);\n"],"names":["motionTokens","createPresenceComponent","sizeEnterAtom","whitespaceEnterAtom","opacityEnterAtom","opacityExitAtom","sizeExitAtom","whitespaceExitAtom","createCollapseDelayedPresence","enterSizeDuration","durationNormal","enterOpacityDuration","enterEasing","curveEasyEaseMax","enterDelay","exitSizeDuration","exitOpacityDuration","exitEasing","exitDelay","element","animateOpacity","orientation","enterAtoms","duration","easing","push","delay","exitAtoms","enter","exit","createCollapsePresence","enterDuration","exitDuration","Collapse","CollapseSnappy","durationFast","CollapseRelaxed","durationSlower","CollapseDelayed","curveEasyEase"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,YAAY,EAAEC,uBAAuB,QAAoB,yBAAyB;AAG3F,SACEC,aAAa,EACbC,mBAAmB,EACnBC,gBAAgB,EAChBC,eAAe,EACfC,YAAY,EACZC,kBAAkB,QACb,mBAAmB;AAE1B,iHAAiH,GACjH,OAAO,MAAMC,gCAIX,CAAC,EACC,QAAQ;AACRC,oBAAoBT,aAAaU,cAAc,EAC/CC,uBAAuBF,iBAAiB,EACxCG,cAAcZ,aAAaa,gBAAgB,EAC3CC,aAAa,CAAC,EAEd,kEAAkE;AAClEC,mBAAmBN,iBAAiB,EACpCO,sBAAsBL,oBAAoB,EAC1CM,aAAaL,WAAW,EACxBM,YAAY,CAAC,EACd,GAAG,CAAC,CAAC,GACN,CAAC,EAAEC,OAAO,EAAEC,iBAAiB,IAAI,EAAEC,cAAc,UAAU,EAAE;QAC3D,oBAAoB;QACpB,0FAA0F;QAC1F,MAAMC,aAA2B;YAC/BpB,cAAc;gBACZmB;gBACAE,UAAUd;gBACVe,QAAQZ;gBACRO;YACF;YACAhB,oBAAoB;gBAClBkB;gBACAE,UAAUd;gBACVe,QAAQZ;YACV;SACD;QACD,+EAA+E;QAC/E,IAAIQ,gBAAgB;YAClBE,WAAWG,IAAI,CACbrB,iBAAiB;gBACfmB,UAAUZ;gBACVa,QAAQZ;gBACRc,OAAOZ;YACT;QAEJ;QAEA,mBAAmB;QACnB,yFAAyF;QACzF,MAAMa,YAA0B,EAAE;QAClC,gFAAgF;QAChF,IAAIP,gBAAgB;YAClBO,UAAUF,IAAI,CACZpB,gBAAgB;gBACdkB,UAAUP;gBACVQ,QAAQP;YACV;QAEJ;QACAU,UAAUF,IAAI,CACZnB,aAAa;YACXe;YACAE,UAAUR;YACVS,QAAQP;YACRE;YACAO,OAAOR;QACT;QAEFS,UAAUF,IAAI,CACZlB,mBAAmB;YACjBc;YACAE,UAAUR;YACVS,QAAQP;YACRS,OAAOR;QACT;QAGF,OAAO;YACLU,OAAON;YACPO,MAAMF;QACR;IACF,EAAE;AAEJ,mDAAmD,GACnD,OAAO,MAAMG,yBAAgG,CAAC,EAC5GC,gBAAgB/B,aAAaU,cAAc,EAC3CE,cAAcZ,aAAaa,gBAAgB,EAC3CmB,eAAeD,aAAa,EAC5Bd,aAAaL,WAAW,EACzB,GAAG,CAAC,CAAC,GACJ,0EAA0E;IAC1E,2EAA2E;IAC3EJ,8BAA8B;QAC5BC,mBAAmBsB;QACnBnB;QACAG,kBAAkBiB;QAClBf;IACF,GAAG;AAEL,gFAAgF,GAChF,OAAO,MAAMgB,WAAWhC,wBAAwB6B,0BAA0B;AAE1E,OAAO,MAAMI,iBAAiBjC,wBAC5B6B,uBAAuB;IAAEC,eAAe/B,aAAamC,YAAY;AAAC,IAClE;AAEF,OAAO,MAAMC,kBAAkBnC,wBAC7B6B,uBAAuB;IAAEC,eAAe/B,aAAaqC,cAAc;AAAC,IACpE;AAEF,OAAO,MAAMC,kBAAkBrC,wBAC7BO,8BAA8B;IAC5BC,mBAAmBT,aAAaU,cAAc;IAC9CC,sBAAsBX,aAAaqC,cAAc;IACjDvB,YAAYd,aAAaU,cAAc;IACvCQ,WAAWlB,aAAaqC,cAAc;IACtCzB,aAAaZ,aAAauC,aAAa;AACzC,IACA"}

package/lib/components/Collapse/collapse-atoms.js

@@ -0,0 +1,123 @@
+// ----- SIZE -----
+const sizeValuesForOrientation = (orientation, element)=>{
+    const sizeName = orientation === 'horizontal' ? 'maxWidth' : 'maxHeight';
+    const overflowName = orientation === 'horizontal' ? 'overflowX' : 'overflowY';
+    const measuredSize = orientation === 'horizontal' ? element.scrollWidth : element.scrollHeight;
+    const toSize = `${measuredSize}px`;
+    return {
+        sizeName,
+        overflowName,
+        toSize
+    };
+};
+export const sizeEnterAtom = ({ orientation, duration, easing, element, fromSize = '0' })=>{
+    const { sizeName, overflowName, toSize } = sizeValuesForOrientation(orientation, element);
+    return {
+        keyframes: [
+            {
+                [sizeName]: fromSize,
+                [overflowName]: 'hidden'
+            },
+            {
+                [sizeName]: toSize,
+                offset: 0.9999,
+                [overflowName]: 'hidden'
+            },
+            {
+                [sizeName]: 'unset',
+                [overflowName]: 'unset'
+            }
+        ],
+        duration,
+        easing
+    };
+};
+export const sizeExitAtom = ({ orientation, duration, easing, element, delay = 0, fromSize = '0' })=>{
+    const { sizeName, overflowName, toSize } = sizeValuesForOrientation(orientation, element);
+    return {
+        keyframes: [
+            {
+                [sizeName]: toSize,
+                [overflowName]: 'hidden'
+            },
+            {
+                [sizeName]: fromSize,
+                [overflowName]: 'hidden'
+            }
+        ],
+        duration,
+        easing,
+        fill: 'both',
+        delay
+    };
+};
+// ----- WHITESPACE -----
+// Whitespace animation currently includes padding, but could be extended to handle margin.
+const whitespaceValuesForOrientation = (orientation)=>{
+    const paddingStart = orientation === 'horizontal' ? 'paddingLeft' : 'paddingTop';
+    const paddingEnd = orientation === 'horizontal' ? 'paddingRight' : 'paddingBottom';
+    return {
+        paddingStart,
+        paddingEnd
+    };
+};
+// Because a height of zero does not eliminate padding,
+// we will create keyframes to animate it to zero.
+// TODO: consider collapsing margin, perhaps as an option.
+export const whitespaceEnterAtom = ({ orientation, duration, easing })=>{
+    const { paddingStart, paddingEnd } = whitespaceValuesForOrientation(orientation);
+    return {
+        keyframes: [
+            {
+                [paddingStart]: '0',
+                [paddingEnd]: '0',
+                offset: 0
+            }
+        ],
+        duration,
+        easing
+    };
+};
+export const whitespaceExitAtom = ({ orientation, duration, easing, delay = 0 })=>{
+    const { paddingStart, paddingEnd } = whitespaceValuesForOrientation(orientation);
+    return {
+        keyframes: [
+            {
+                [paddingStart]: '0',
+                [paddingEnd]: '0',
+                offset: 1
+            }
+        ],
+        duration,
+        easing,
+        fill: 'forwards',
+        delay
+    };
+};
+// ----- OPACITY -----
+export const opacityEnterAtom = ({ duration, easing, delay = 0, fromOpacity = 0, toOpacity = 1 })=>({
+        keyframes: [
+            {
+                opacity: fromOpacity
+            },
+            {
+                opacity: toOpacity
+            }
+        ],
+        duration,
+        easing,
+        delay,
+        fill: 'both'
+    });
+export const opacityExitAtom = ({ duration, easing, fromOpacity = 0, toOpacity = 1 })=>({
+        keyframes: [
+            {
+                opacity: toOpacity
+            },
+            {
+                opacity: fromOpacity
+            }
+        ],
+        duration,
+        easing
+    });

package/lib/components/Collapse/collapse-atoms.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Collapse/collapse-atoms.ts"],"sourcesContent":["import { AtomMotion } from '@fluentui/react-motion/src/types';\nimport type { CollapseOrientation } from './collapse-types';\n\n// ----- SIZE -----\n\nconst sizeValuesForOrientation = (orientation: CollapseOrientation, element: Element) => {\n  const sizeName = orientation === 'horizontal' ? 'maxWidth' : 'maxHeight';\n  const overflowName = orientation === 'horizontal' ? 'overflowX' : 'overflowY';\n  const measuredSize = orientation === 'horizontal' ? element.scrollWidth : element.scrollHeight;\n  const toSize = `${measuredSize}px`;\n  return { sizeName, overflowName, toSize };\n};\n\nexport const sizeEnterAtom = ({\n  orientation,\n  duration,\n  easing,\n  element,\n  fromSize = '0',\n}: {\n  orientation: CollapseOrientation;\n  duration: number;\n  easing: string;\n  element: HTMLElement;\n  fromSize?: string;\n}): AtomMotion => {\n  const { sizeName, overflowName, toSize } = sizeValuesForOrientation(orientation, element);\n\n  return {\n    keyframes: [\n      { [sizeName]: fromSize, [overflowName]: 'hidden' },\n      { [sizeName]: toSize, offset: 0.9999, [overflowName]: 'hidden' },\n      { [sizeName]: 'unset', [overflowName]: 'unset' },\n    ],\n    duration,\n    easing,\n  };\n};\n\nexport const sizeExitAtom = ({\n  orientation,\n  duration,\n  easing,\n  element,\n  delay = 0,\n  fromSize = '0',\n}: {\n  orientation: CollapseOrientation;\n  duration: number;\n  easing: string;\n  element: HTMLElement;\n  delay?: number;\n  fromSize?: string;\n}): AtomMotion => {\n  const { sizeName, overflowName, toSize } = sizeValuesForOrientation(orientation, element);\n\n  return {\n    keyframes: [\n      { [sizeName]: toSize, [overflowName]: 'hidden' },\n      { [sizeName]: fromSize, [overflowName]: 'hidden' },\n    ],\n    duration,\n    easing,\n    fill: 'both',\n    delay,\n  };\n};\n\n// ----- WHITESPACE -----\n\n// Whitespace animation currently includes padding, but could be extended to handle margin.\nconst whitespaceValuesForOrientation = (orientation: CollapseOrientation) => {\n  const paddingStart = orientation === 'horizontal' ? 'paddingLeft' : 'paddingTop';\n  const paddingEnd = orientation === 'horizontal' ? 'paddingRight' : 'paddingBottom';\n  return { paddingStart, paddingEnd };\n};\n\n// Because a height of zero does not eliminate padding,\n// we will create keyframes to animate it to zero.\n// TODO: consider collapsing margin, perhaps as an option.\nexport const whitespaceEnterAtom = ({\n  orientation,\n  duration,\n  easing,\n}: {\n  orientation: CollapseOrientation;\n  duration: number;\n  easing: string;\n}): AtomMotion => {\n  const { paddingStart, paddingEnd } = whitespaceValuesForOrientation(orientation);\n  return {\n    keyframes: [{ [paddingStart]: '0', [paddingEnd]: '0', offset: 0 }],\n    duration,\n    easing,\n  };\n};\n\nexport const whitespaceExitAtom = ({\n  orientation,\n  duration,\n  easing,\n  delay = 0,\n}: {\n  orientation: CollapseOrientation;\n  duration: number;\n  easing: string;\n  delay?: number;\n}): AtomMotion => {\n  const { paddingStart, paddingEnd } = whitespaceValuesForOrientation(orientation);\n  return {\n    keyframes: [{ [paddingStart]: '0', [paddingEnd]: '0', offset: 1 }],\n    duration,\n    easing,\n    fill: 'forwards',\n    delay,\n  };\n};\n\n// ----- OPACITY -----\n\nexport const opacityEnterAtom = ({\n  duration,\n  easing,\n  delay = 0,\n  fromOpacity = 0,\n  toOpacity = 1,\n}: {\n  duration: number;\n  easing: string;\n  delay?: number;\n  fromOpacity?: number;\n  toOpacity?: number;\n}): AtomMotion => ({\n  keyframes: [{ opacity: fromOpacity }, { opacity: toOpacity }],\n  duration,\n  easing,\n  delay,\n  fill: 'both',\n});\n\nexport const opacityExitAtom = ({\n  duration,\n  easing,\n  fromOpacity = 0,\n  toOpacity = 1,\n}: {\n  duration: number;\n  easing: string;\n  fromOpacity?: number;\n  toOpacity?: number;\n}): AtomMotion => ({\n  keyframes: [{ opacity: toOpacity }, { opacity: fromOpacity }],\n  duration,\n  easing,\n});\n"],"names":["sizeValuesForOrientation","orientation","element","sizeName","overflowName","measuredSize","scrollWidth","scrollHeight","toSize","sizeEnterAtom","duration","easing","fromSize","keyframes","offset","sizeExitAtom","delay","fill","whitespaceValuesForOrientation","paddingStart","paddingEnd","whitespaceEnterAtom","whitespaceExitAtom","opacityEnterAtom","fromOpacity","toOpacity","opacity","opacityExitAtom"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/lib/components/Collapse/collapse-types.js

@@ -0,0 +1 @@
+export { };

package/lib/components/Collapse/collapse-types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Collapse/collapse-types.ts"],"sourcesContent":["export type CollapseOrientation = 'horizontal' | 'vertical';\n\n// TODO: reduce duplication between CollapseDelayedVariantParams and CollapseVariantParams\nexport type CollapseDelayedVariantParams = {\n  /** Time (ms) for the size expand. Defaults to the durationNormal value (200 ms). */\n  enterSizeDuration?: number;\n\n  /** Time (ms) for the fade-in. Defaults to the enterSizeDuration param, to sync fade-in with expand. */\n  enterOpacityDuration?: number;\n\n  /** Time (ms) for the size collapse. Defaults to the enterSizeDuration param, for temporal symmetry.. */\n  exitSizeDuration?: number;\n\n  /** Defaults to the exitSizeDuration param, to sync the fade-out with the collapse. */\n  exitOpacityDuration?: number;\n\n  /** Time (ms) between the size expand start and the fade-in start. Defaults to `0`.  */\n  enterDelay?: number;\n\n  /** Time (ms) between the fade-out start and the size collapse start. Defaults to `0`.  */\n  exitDelay?: number;\n\n  /** Easing curve for the enter transition, shared by size and opacity. Defaults to the easeEaseMax value.  */\n  enterEasing?: string;\n\n  /** Easing curve for the exit transition, shared by size and opacity. Defaults to the enterEasing param. */\n  exitEasing?: string;\n};\n\nexport type CollapseRuntimeParams = {\n  /** Whether to animate the opacity. Defaults to `true`. */\n  animateOpacity?: boolean;\n\n  /** The orientation of the size animation. Defaults to `'vertical'` to expand/collapse the height. */\n  orientation?: CollapseOrientation;\n};\n\nexport type CollapseVariantParams = {\n  /** Time (ms) for the enter transition (expand). Defaults to the `durationNormal` value (200 ms). */\n  enterDuration?: number;\n\n  /** Easing curve for the enter transition (expand). Defaults to the `easeEaseMax` value.  */\n  enterEasing?: string;\n\n  /** Time (ms) for the exit transition (collapse). Defaults to the `enterDuration` param for symmetry. */\n  exitDuration?: number;\n\n  /** Easing curve for the exit transition (collapse). Defaults to the `enterEasing` param for symmetry.  */\n  exitEasing?: string;\n};\n"],"names":[],"rangeMappings":"","mappings":"AAqCA,WAYE"}

package/lib/components/Collapse/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './Collapse';\n"],"names":[],"rangeMappings":"","mappings":"AAAA,cAAc,aAAa"}
+{"version":3,"sources":["../src/components/Collapse/index.ts"],"sourcesContent":["export * from './Collapse';\nexport type { CollapseRuntimeParams } from './collapse-types';\n"],"names":[],"rangeMappings":"","mappings":"AAAA,cAAc,aAAa"}

package/lib/components/Fade/Fade.js

@@ -1,40 +1,34 @@
-import { motionTokens, createPresenceComponent, createPresenceComponentVariant } from '@fluentui/react-motion';
-const duration = motionTokens.durationNormal;
-const easing = motionTokens.curveEasyEase;
-/** Define a presence motion for fade in/out  */ const fadeMotion = {
-    enter: {
-        duration,
-        easing,
-        keyframes: [
-            {
-                opacity: 0
-            },
-            {
-                opacity: 1
-            }
-        ]
-    },
-    exit: {
-        duration,
-        easing,
-        keyframes: [
-            {
-                opacity: 1
-            },
-            {
-                opacity: 0
-            }
-        ]
-    }
-};
-/** A React component that applies fade in/out transitions to its children. */ export const Fade = createPresenceComponent(fadeMotion);
-export const FadeSnappy = createPresenceComponentVariant(Fade, {
-    all: {
-        duration: motionTokens.durationFast
-    }
-});
-export const FadeExaggerated = createPresenceComponentVariant(Fade, {
-    all: {
-        duration: motionTokens.durationGentle
-    }
-});
+import { motionTokens, createPresenceComponent } from '@fluentui/react-motion';
+/** Define a presence motion for fade in/out  */ export const createFadePresence = ({ enterDuration = motionTokens.durationNormal, enterEasing = motionTokens.curveEasyEase, exitDuration = enterDuration, exitEasing = enterEasing } = {})=>({
+        enter: {
+            duration: enterDuration,
+            easing: enterEasing,
+            keyframes: [
+                {
+                    opacity: 0
+                },
+                {
+                    opacity: 1
+                }
+            ]
+        },
+        exit: {
+            duration: exitDuration,
+            easing: exitEasing,
+            keyframes: [
+                {
+                    opacity: 1
+                },
+                {
+                    opacity: 0
+                }
+            ]
+        }
+    });
+/** A React component that applies fade in/out transitions to its children. */ export const Fade = createPresenceComponent(createFadePresence());
+export const FadeSnappy = createPresenceComponent(createFadePresence({
+    enterDuration: motionTokens.durationFast
+}));
+export const FadeRelaxed = createPresenceComponent(createFadePresence({
+    enterDuration: motionTokens.durationGentle
+}));

package/lib/components/Fade/Fade.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Fade.ts"],"sourcesContent":["import {\n  motionTokens,\n  PresenceMotion,\n  createPresenceComponent,\n  createPresenceComponentVariant,\n} from '@fluentui/react-motion';\n\nconst duration = motionTokens.durationNormal;\nconst easing = motionTokens.curveEasyEase;\n\n/** Define a presence motion for fade in/out  */\nconst fadeMotion: PresenceMotion = {\n  enter: { duration, easing, keyframes: [{ opacity: 0 }, { opacity: 1 }] },\n  exit: { duration, easing, keyframes: [{ opacity: 1 }, { opacity: 0 }] },\n};\n\n/** A React component that applies fade in/out transitions to its children. */\nexport const Fade = createPresenceComponent(fadeMotion);\n\nexport const FadeSnappy = createPresenceComponentVariant(Fade, { all: { duration: motionTokens.durationFast } });\n\nexport const FadeExaggerated = createPresenceComponentVariant(Fade, { all: { duration: motionTokens.durationGentle } });\n"],"names":["motionTokens","createPresenceComponent","createPresenceComponentVariant","duration","durationNormal","easing","curveEasyEase","fadeMotion","enter","keyframes","opacity","exit","Fade","FadeSnappy","all","durationFast","FadeExaggerated","durationGentle"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SACEA,YAAY,EAEZC,uBAAuB,EACvBC,8BAA8B,QACzB,yBAAyB;AAEhC,MAAMC,WAAWH,aAAaI,cAAc;AAC5C,MAAMC,SAASL,aAAaM,aAAa;AAEzC,8CAA8C,GAC9C,MAAMC,aAA6B;IACjCC,OAAO;QAAEL;QAAUE;QAAQI,WAAW;YAAC;gBAAEC,SAAS;YAAE;YAAG;gBAAEA,SAAS;YAAE;SAAE;IAAC;IACvEC,MAAM;QAAER;QAAUE;QAAQI,WAAW;YAAC;gBAAEC,SAAS;YAAE;YAAG;gBAAEA,SAAS;YAAE;SAAE;IAAC;AACxE;AAEA,4EAA4E,GAC5E,OAAO,MAAME,OAAOX,wBAAwBM,YAAY;AAExD,OAAO,MAAMM,aAAaX,+BAA+BU,MAAM;IAAEE,KAAK;QAAEX,UAAUH,aAAae,YAAY;IAAC;AAAE,GAAG;AAEjH,OAAO,MAAMC,kBAAkBd,+BAA+BU,MAAM;IAAEE,KAAK;QAAEX,UAAUH,aAAaiB,cAAc;IAAC;AAAE,GAAG"}
+{"version":3,"sources":["../src/components/Fade/Fade.ts"],"sourcesContent":["import { motionTokens, createPresenceComponent } from '@fluentui/react-motion';\nimport type { PresenceMotionCreator } from '../../types';\n\ntype FadeVariantParams = {\n  /** Time (ms) for the enter transition (fade-in). Defaults to the `durationNormal` value (200 ms). */\n  enterDuration?: number;\n\n  /** Easing curve for the enter transition (fade-in). Defaults to the `easeEase` value.  */\n  enterEasing?: string;\n\n  /** Time (ms) for the exit transition (fade-out). Defaults to the `enterDuration` param for symmetry. */\n  exitDuration?: number;\n\n  /** Easing curve for the exit transition (fade-out). Defaults to the `enterEasing` param for symmetry.  */\n  exitEasing?: string;\n};\n\n/** Define a presence motion for fade in/out  */\nexport const createFadePresence: PresenceMotionCreator<FadeVariantParams> = ({\n  enterDuration = motionTokens.durationNormal,\n  enterEasing = motionTokens.curveEasyEase,\n  exitDuration = enterDuration,\n  exitEasing = enterEasing,\n} = {}) => ({\n  enter: { duration: enterDuration, easing: enterEasing, keyframes: [{ opacity: 0 }, { opacity: 1 }] },\n  exit: { duration: exitDuration, easing: exitEasing, keyframes: [{ opacity: 1 }, { opacity: 0 }] },\n});\n\n/** A React component that applies fade in/out transitions to its children. */\nexport const Fade = createPresenceComponent(createFadePresence());\n\nexport const FadeSnappy = createPresenceComponent(createFadePresence({ enterDuration: motionTokens.durationFast }));\n\nexport const FadeRelaxed = createPresenceComponent(createFadePresence({ enterDuration: motionTokens.durationGentle }));\n"],"names":["motionTokens","createPresenceComponent","createFadePresence","enterDuration","durationNormal","enterEasing","curveEasyEase","exitDuration","exitEasing","enter","duration","easing","keyframes","opacity","exit","Fade","FadeSnappy","durationFast","FadeRelaxed","durationGentle"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,YAAY,EAAEC,uBAAuB,QAAQ,yBAAyB;AAiB/E,8CAA8C,GAC9C,OAAO,MAAMC,qBAA+D,CAAC,EAC3EC,gBAAgBH,aAAaI,cAAc,EAC3CC,cAAcL,aAAaM,aAAa,EACxCC,eAAeJ,aAAa,EAC5BK,aAAaH,WAAW,EACzB,GAAG,CAAC,CAAC,GAAM,CAAA;QACVI,OAAO;YAAEC,UAAUP;YAAeQ,QAAQN;YAAaO,WAAW;gBAAC;oBAAEC,SAAS;gBAAE;gBAAG;oBAAEA,SAAS;gBAAE;aAAE;QAAC;QACnGC,MAAM;YAAEJ,UAAUH;YAAcI,QAAQH;YAAYI,WAAW;gBAAC;oBAAEC,SAAS;gBAAE;gBAAG;oBAAEA,SAAS;gBAAE;aAAE;QAAC;IAClG,CAAA,EAAG;AAEH,4EAA4E,GAC5E,OAAO,MAAME,OAAOd,wBAAwBC,sBAAsB;AAElE,OAAO,MAAMc,aAAaf,wBAAwBC,mBAAmB;IAAEC,eAAeH,aAAaiB,YAAY;AAAC,IAAI;AAEpH,OAAO,MAAMC,cAAcjB,wBAAwBC,mBAAmB;IAAEC,eAAeH,aAAamB,cAAc;AAAC,IAAI"}

package/lib/components/Fade/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './Fade';\n"],"names":[],"rangeMappings":"","mappings":"AAAA,cAAc,SAAS"}
+{"version":3,"sources":["../src/components/Fade/index.ts"],"sourcesContent":["export * from './Fade';\n"],"names":[],"rangeMappings":"","mappings":"AAAA,cAAc,SAAS"}

package/lib/components/Scale/Scale.js

@@ -50,7 +50,7 @@ export const ScaleSnappy = createPresenceComponentVariant(Scale, {
         easing: motionTokens.curveAccelerateMax
     }
 });
-export const ScaleExaggerated = createPresenceComponentVariant(Scale, {
+export const ScaleRelaxed = createPresenceComponentVariant(Scale, {
     enter: {
         duration: motionTokens.durationSlow,
         easing: motionTokens.curveDecelerateMax