@razorpay/blade 12.0.0 → 12.0.1

package/build/lib/native/components/AnimateInteractions/AnimateInteractions.native.js

@@ -0,0 +1,11 @@
+import '../Typography/Heading/Heading.js';
+import { Text } from '../Typography/Text/Text.js';
+import '../Typography/Code/Code.js';
+import '../Typography/Display/Display.js';
+import { throwBladeError } from '../../utils/logger/logger.js';
+import { jsx } from 'react/jsx-runtime';
+
+var AnimateInteractions=function AnimateInteractions(_props){throwBladeError({message:'AnimateInteractions is not yet implemented for native',moduleName:'AnimateInteractions'});return jsx(Text,{children:"AnimateInteractions Component is not available for Native mobile apps."});};
+
+export { AnimateInteractions };
+//# sourceMappingURL=AnimateInteractions.native.js.map

package/build/lib/native/components/AnimateInteractions/AnimateInteractions.native.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnimateInteractions.native.js","sources":["../../../../../src/components/AnimateInteractions/AnimateInteractions.native.tsx"],"sourcesContent":["import type { AnimateInteractionsProps } from './types';\nimport { Text } from '~components/Typography';\nimport { throwBladeError } from '~utils/logger';\n\nconst AnimateInteractions = (_props: AnimateInteractionsProps): React.ReactElement => {\n  throwBladeError({\n    message: 'AnimateInteractions is not yet implemented for native',\n    moduleName: 'AnimateInteractions',\n  });\n\n  return <Text>AnimateInteractions Component is not available for Native mobile apps.</Text>;\n};\n\nexport { AnimateInteractions };\n"],"names":["AnimateInteractions","_props","throwBladeError","message","moduleName","_jsx","Text","children"],"mappings":";;;;;;;AAIM,IAAAA,mBAAmB,CAAG,SAAtBA,mBAAmBA,CAAIC,MAAgC,CAAyB,CACpFC,eAAe,CAAC,CACdC,OAAO,CAAE,uDAAuD,CAChEC,UAAU,CAAE,qBACd,CAAC,CAAC,CAEF,OAAOC,GAAA,CAACC,IAAI,CAAA,CAAAC,QAAA,CAAC,wEAAsE,CAAM,CAAC,CAC5F;;;;"}

package/build/lib/native/components/Stagger/Stagger.native.js

@@ -0,0 +1,11 @@
+import '../Typography/Heading/Heading.js';
+import { Text } from '../Typography/Text/Text.js';
+import '../Typography/Code/Code.js';
+import '../Typography/Display/Display.js';
+import { throwBladeError } from '../../utils/logger/logger.js';
+import { jsx } from 'react/jsx-runtime';
+
+var Stagger=function Stagger(_props){throwBladeError({message:'Stagger is not yet implemented for native',moduleName:'Stagger'});return jsx(Text,{children:"Stagger Component is not available for Native mobile apps."});};
+
+export { Stagger };
+//# sourceMappingURL=Stagger.native.js.map

package/build/lib/native/components/Stagger/Stagger.native.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stagger.native.js","sources":["../../../../../src/components/Stagger/Stagger.native.tsx"],"sourcesContent":["import type { StaggerProps } from './types';\nimport { Text } from '~components/Typography';\nimport { throwBladeError } from '~utils/logger';\n\nconst Stagger = (_props: StaggerProps): React.ReactElement => {\n  throwBladeError({\n    message: 'Stagger is not yet implemented for native',\n    moduleName: 'Stagger',\n  });\n\n  return <Text>Stagger Component is not available for Native mobile apps.</Text>;\n};\n\nexport { Stagger };\n"],"names":["Stagger","_props","throwBladeError","message","moduleName","_jsx","Text","children"],"mappings":";;;;;;;AAIM,IAAAA,OAAO,CAAG,SAAVA,OAAOA,CAAIC,MAAoB,CAAyB,CAC5DC,eAAe,CAAC,CACdC,OAAO,CAAE,2CAA2C,CACpDC,UAAU,CAAE,SACd,CAAC,CAAC,CAEF,OAAOC,GAAA,CAACC,IAAI,CAAA,CAAAC,QAAA,CAAC,4DAA0D,CAAM,CAAC,CAChF;;;;"}

package/build/lib/native/components/index.js

@@ -7,6 +7,7 @@ export { ActionListItem, ActionListItemAvatar, ActionListItemBadge, ActionListIt
 export { ActionListItemAsset } from './ActionList/ActionListItemAsset.native.js';
 export { Alert } from './Alert/Alert.js';
 export { Amount } from './Amount/Amount.js';
+export { AnimateInteractions } from './AnimateInteractions/AnimateInteractions.native.js';
 export { Avatar } from './Avatar/Avatar.native.js';
 export { AvatarGroup } from './Avatar/AvatarGroup.native.js';
 export { TrustedBadgeIcon } from './Avatar/TrustedBadgeIcon.native.js';
@@ -454,6 +455,7 @@ export { Spinner } from './Spinner/Spinner/Spinner.js';
 export { Tour } from './SpotlightPopoverTour/Tour.native.js';
 export { SpotlightPopoverTourFooter } from './SpotlightPopoverTour/TourFooter.native.js';
 export { SpotlightPopoverTourStep } from './SpotlightPopoverTour/TourStep.native.js';
+export { Stagger } from './Stagger/Stagger.native.js';
 export { StepGroup } from './StepGroup/StepGroup.native.js';
 export { StepItem } from './StepGroup/StepItem.native.js';
 export { StepItemIcon, StepItemIndicator } from './StepGroup/StepItemMarker.js';

package/build/lib/native/components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/lib/web/development/components/AnimateInteractions/AnimateInteractions.web.js

@@ -0,0 +1,37 @@
+import React__default from 'react';
+import { useAnimation } from 'framer-motion';
+import { AnimateInteractionsContext } from './AnimateInteractionsProvider.js';
+import { useFocusWithin } from './useFocusWithin.js';
+import '../BaseMotion/index.js';
+import { jsx } from 'react/jsx-runtime';
+import { BaseMotionEnhancerBox } from '../BaseMotion/BaseMotion.js';
+
+var AnimateInteractions = function AnimateInteractions(_ref) {
+  var children = _ref.children,
+    _ref$motionTriggers = _ref.motionTriggers,
+    motionTriggers = _ref$motionTriggers === void 0 ? ['hover'] : _ref$motionTriggers;
+  var baseMotionRef = React__default.useRef(null);
+  var controls = useAnimation();
+  useFocusWithin(baseMotionRef, {
+    onFocusWithin: function onFocusWithin() {
+      void controls.start('animate');
+    },
+    onBlurWithin: function onBlurWithin() {
+      void controls.start('exit');
+    }
+  });
+  return /*#__PURE__*/jsx(AnimateInteractionsContext.Provider, {
+    value: {
+      isInsideAnimateInteractionsContainer: true
+    },
+    children: /*#__PURE__*/jsx(BaseMotionEnhancerBox, {
+      ref: baseMotionRef,
+      motionTriggers: motionTriggers,
+      animate: controls,
+      children: children
+    })
+  });
+};
+
+export { AnimateInteractions };
+//# sourceMappingURL=AnimateInteractions.web.js.map

package/build/lib/web/development/components/AnimateInteractions/AnimateInteractions.web.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnimateInteractions.web.js","sources":["../../../../../../src/components/AnimateInteractions/AnimateInteractions.web.tsx"],"sourcesContent":["import React from 'react';\nimport { useAnimation } from 'framer-motion';\nimport { AnimateInteractionsContext } from './AnimateInteractionsProvider';\nimport { useFocusWithin } from './useFocusWithin';\nimport type { AnimateInteractionsProps } from './types';\nimport { BaseMotionEnhancerBox } from '~components/BaseMotion';\n\n/**\n * ## AnimateInteractions\n *\n * AnimateInteractions is the utility preset that we offer to help you animate children when the parent is interacted.\n *\n * This is in a way equivalent to following CSS-\n * ```css\n * .parent:hover .child { }\n * ```\n *\n * ### Usage\n *\n * ```jsx\n * <AnimateInteractions\n *    motionTriggers={['hover']}\n *  > // <-- When this is hovered\n *  <Box>\n *    <Move\n *      motionTriggers={['on-animate-interactions']}\n *    > // <-- this animates in\n *      <Box />\n *    </Move>\n *  </Box>\n * </AnimateInteractions>\n * ```\n */\nconst AnimateInteractions = ({\n  children,\n  motionTriggers = ['hover'],\n}: AnimateInteractionsProps): React.ReactElement => {\n  const baseMotionRef = React.useRef<HTMLDivElement | null>(null);\n  const controls = useAnimation();\n\n  useFocusWithin(baseMotionRef, {\n    onFocusWithin: () => {\n      void controls.start('animate');\n    },\n    onBlurWithin: () => {\n      void controls.start('exit');\n    },\n  });\n\n  return (\n    <AnimateInteractionsContext.Provider value={{ isInsideAnimateInteractionsContainer: true }}>\n      <BaseMotionEnhancerBox ref={baseMotionRef} motionTriggers={motionTriggers} animate={controls}>\n        {children}\n      </BaseMotionEnhancerBox>\n    </AnimateInteractionsContext.Provider>\n  );\n};\n\nexport { AnimateInteractions };\n"],"names":["AnimateInteractions","_ref","children","_ref$motionTriggers","motionTriggers","baseMotionRef","React","useRef","controls","useAnimation","useFocusWithin","onFocusWithin","start","onBlurWithin","_jsx","AnimateInteractionsContext","Provider","value","isInsideAnimateInteractionsContainer","BaseMotionEnhancerBox","ref","animate"],"mappings":";;;;;;;;AAiCA,IAAMA,mBAAmB,GAAG,SAAtBA,mBAAmBA,CAAAC,IAAA,EAG2B;AAAA,EAAA,IAFlDC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IAAAC,mBAAA,GAAAF,IAAA,CACRG,cAAc;AAAdA,IAAAA,cAAc,GAAAD,mBAAA,KAAA,KAAA,CAAA,GAAG,CAAC,OAAO,CAAC,GAAAA,mBAAA,CAAA;AAE1B,EAAA,IAAME,aAAa,GAAGC,cAAK,CAACC,MAAM,CAAwB,IAAI,CAAC,CAAA;AAC/D,EAAA,IAAMC,QAAQ,GAAGC,YAAY,EAAE,CAAA;EAE/BC,cAAc,CAACL,aAAa,EAAE;IAC5BM,aAAa,EAAE,SAAAA,aAAAA,GAAM;AACnB,MAAA,KAAKH,QAAQ,CAACI,KAAK,CAAC,SAAS,CAAC,CAAA;KAC/B;IACDC,YAAY,EAAE,SAAAA,YAAAA,GAAM;AAClB,MAAA,KAAKL,QAAQ,CAACI,KAAK,CAAC,MAAM,CAAC,CAAA;AAC7B,KAAA;AACF,GAAC,CAAC,CAAA;AAEF,EAAA,oBACEE,GAAA,CAACC,0BAA0B,CAACC,QAAQ,EAAA;AAACC,IAAAA,KAAK,EAAE;AAAEC,MAAAA,oCAAoC,EAAE,IAAA;KAAO;IAAAhB,QAAA,eACzFY,GAAA,CAACK,qBAAqB,EAAA;AAACC,MAAAA,GAAG,EAAEf,aAAc;AAACD,MAAAA,cAAc,EAAEA,cAAe;AAACiB,MAAAA,OAAO,EAAEb,QAAS;AAAAN,MAAAA,QAAA,EAC1FA,QAAAA;KACoB,CAAA;AAAC,GACW,CAAC,CAAA;AAE1C;;;;"}

package/build/lib/web/development/components/AnimateInteractions/index.js

@@ -0,0 +1,2 @@
+export { AnimateInteractions } from './AnimateInteractions.web.js';
+//# sourceMappingURL=index.js.map

package/build/lib/web/development/components/AnimateInteractions/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/build/lib/web/development/components/AnimateInteractions/useFocusWithin.js

@@ -0,0 +1,30 @@
+import { useEffect } from 'react';
+
+var useFocusWithin = function useFocusWithin(ref, _ref) {
+  var onFocusWithin = _ref.onFocusWithin,
+    onBlurWithin = _ref.onBlurWithin;
+  useEffect(function () {
+    var element = ref.current;
+    if (!element) return;
+    var handleFocusIn = function handleFocusIn() {
+      onFocusWithin === null || onFocusWithin === void 0 ? void 0 : onFocusWithin();
+    };
+    var handleFocusOut = function handleFocusOut(event) {
+      // Ensure that focus is not still within the container
+      if (element && !element.contains(event.relatedTarget)) {
+        onBlurWithin === null || onBlurWithin === void 0 ? void 0 : onBlurWithin();
+      }
+    };
+    element.addEventListener('focusin', handleFocusIn);
+    element.addEventListener('focusout', handleFocusOut);
+
+    // eslint-disable-next-line consistent-return
+    return function () {
+      element.removeEventListener('focusin', handleFocusIn);
+      element.removeEventListener('focusout', handleFocusOut);
+    };
+  }, [ref, onFocusWithin, onBlurWithin]);
+};
+
+export { useFocusWithin };
+//# sourceMappingURL=useFocusWithin.js.map

package/build/lib/web/development/components/AnimateInteractions/useFocusWithin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFocusWithin.js","sources":["../../../../../../src/components/AnimateInteractions/useFocusWithin.ts"],"sourcesContent":["import { useEffect } from 'react';\n\ntype FocusWithinHandlers = {\n  onFocusWithin?: () => void;\n  onBlurWithin?: () => void;\n};\n\nexport const useFocusWithin = <T extends HTMLElement>(\n  ref: React.RefObject<T>,\n  { onFocusWithin, onBlurWithin }: FocusWithinHandlers,\n): void => {\n  useEffect(() => {\n    const element = ref.current;\n    if (!element) return;\n\n    const handleFocusIn = (): void => {\n      onFocusWithin?.();\n    };\n\n    const handleFocusOut = (event: FocusEvent): void => {\n      // Ensure that focus is not still within the container\n      if (element && !element.contains(event.relatedTarget as Node)) {\n        onBlurWithin?.();\n      }\n    };\n\n    element.addEventListener('focusin', handleFocusIn);\n    element.addEventListener('focusout', handleFocusOut);\n\n    // eslint-disable-next-line consistent-return\n    return () => {\n      element.removeEventListener('focusin', handleFocusIn);\n      element.removeEventListener('focusout', handleFocusOut);\n    };\n  }, [ref, onFocusWithin, onBlurWithin]);\n};\n"],"names":["useFocusWithin","ref","_ref","onFocusWithin","onBlurWithin","useEffect","element","current","handleFocusIn","handleFocusOut","event","contains","relatedTarget","addEventListener","removeEventListener"],"mappings":";;AAOO,IAAMA,cAAc,GAAG,SAAjBA,cAAcA,CACzBC,GAAuB,EAAAC,IAAA,EAEd;AAAA,EAAA,IADPC,aAAa,GAAAD,IAAA,CAAbC,aAAa;IAAEC,YAAY,GAAAF,IAAA,CAAZE,YAAY,CAAA;AAE7BC,EAAAA,SAAS,CAAC,YAAM;AACd,IAAA,IAAMC,OAAO,GAAGL,GAAG,CAACM,OAAO,CAAA;IAC3B,IAAI,CAACD,OAAO,EAAE,OAAA;AAEd,IAAA,IAAME,aAAa,GAAG,SAAhBA,aAAaA,GAAe;AAChCL,MAAAA,aAAa,KAAbA,IAAAA,IAAAA,aAAa,KAAbA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,aAAa,EAAI,CAAA;KAClB,CAAA;AAED,IAAA,IAAMM,cAAc,GAAG,SAAjBA,cAAcA,CAAIC,KAAiB,EAAW;AAClD;MACA,IAAIJ,OAAO,IAAI,CAACA,OAAO,CAACK,QAAQ,CAACD,KAAK,CAACE,aAAqB,CAAC,EAAE;AAC7DR,QAAAA,YAAY,KAAZA,IAAAA,IAAAA,YAAY,KAAZA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,YAAY,EAAI,CAAA;AAClB,OAAA;KACD,CAAA;AAEDE,IAAAA,OAAO,CAACO,gBAAgB,CAAC,SAAS,EAAEL,aAAa,CAAC,CAAA;AAClDF,IAAAA,OAAO,CAACO,gBAAgB,CAAC,UAAU,EAAEJ,cAAc,CAAC,CAAA;;AAEpD;AACA,IAAA,OAAO,YAAM;AACXH,MAAAA,OAAO,CAACQ,mBAAmB,CAAC,SAAS,EAAEN,aAAa,CAAC,CAAA;AACrDF,MAAAA,OAAO,CAACQ,mBAAmB,CAAC,UAAU,EAAEL,cAAc,CAAC,CAAA;KACxD,CAAA;GACF,EAAE,CAACR,GAAG,EAAEE,aAAa,EAAEC,YAAY,CAAC,CAAC,CAAA;AACxC;;;;"}

package/build/lib/web/development/components/Stagger/Stagger.web.js

@@ -0,0 +1,73 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _typeof from '@babel/runtime/helpers/typeof';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import React__default from 'react';
+import { AnimatePresence } from 'framer-motion';
+import { StaggerContext } from './StaggerProvider.js';
+import '../BaseMotion/index.js';
+import { msToSeconds } from '../../utils/msToSeconds.js';
+import '../../utils/index.js';
+import { jsx } from 'react/jsx-runtime';
+import useTheme from '../BladeProvider/useTheme.js';
+import { BaseMotionBox } from '../BaseMotion/BaseMotion.js';
+
+var _excluded = ["children", "isVisible", "type", "shouldUnmountWhenHidden", "delay", "motionTriggers"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var Stagger = function Stagger(_ref) {
+  var children = _ref.children,
+    _ref$isVisible = _ref.isVisible,
+    isVisible = _ref$isVisible === void 0 ? true : _ref$isVisible,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'inout' : _ref$type,
+    _ref$shouldUnmountWhe = _ref.shouldUnmountWhenHidden,
+    shouldUnmountWhenHidden = _ref$shouldUnmountWhe === void 0 ? false : _ref$shouldUnmountWhe,
+    delay = _ref.delay,
+    motionTriggers = _ref.motionTriggers,
+    boxProps = _objectWithoutProperties(_ref, _excluded);
+  var _useTheme = useTheme(),
+    theme = _useTheme.theme;
+  // Only need AnimatePresence when we have to unmount the component
+  var AnimateWrapper = shouldUnmountWhenHidden ? AnimatePresence : React__default.Fragment;
+  // keep it always mounted when shouldUnmountWhenHidden is false
+  var isMounted = shouldUnmountWhenHidden ? isVisible : true;
+  var enterDelay = _typeof(delay) === 'object' ? delay.enter : delay;
+  var exitDelay = _typeof(delay) === 'object' ? delay.exit : delay;
+  var staggerVariants = {
+    initial: {},
+    animate: {
+      transition: _objectSpread(_objectSpread({}, enterDelay ? {
+        delayChildren: msToSeconds(theme.motion.delay[enterDelay])
+      } : {}), {}, {
+        staggerChildren: msToSeconds(theme.motion.duration['2xquick'])
+      })
+    },
+    exit: {
+      transition: _objectSpread(_objectSpread({}, exitDelay ? {
+        delayChildren: msToSeconds(theme.motion.delay[exitDelay])
+      } : {}), {}, {
+        staggerChildren: msToSeconds(theme.motion.duration['2xquick'])
+      })
+    }
+  };
+  return /*#__PURE__*/jsx(AnimateWrapper, {
+    children: isMounted ? /*#__PURE__*/jsx(BaseMotionBox, _objectSpread(_objectSpread(_objectSpread({
+      type: type,
+      motionVariants: staggerVariants,
+      motionTriggers: motionTriggers
+    }, shouldUnmountWhenHidden ? {} : {
+      animateVisibility: isVisible ? 'animate' : 'exit'
+    }), boxProps), {}, {
+      children: /*#__PURE__*/jsx(StaggerContext.Provider, {
+        value: {
+          isInsideStaggerContainer: true,
+          staggerType: type
+        },
+        children: children
+      })
+    })) : null
+  });
+};
+
+export { Stagger };
+//# sourceMappingURL=Stagger.web.js.map

package/build/lib/web/development/components/Stagger/Stagger.web.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stagger.web.js","sources":["../../../../../../src/components/Stagger/Stagger.web.tsx"],"sourcesContent":["import React from 'react';\nimport { AnimatePresence } from 'framer-motion';\nimport { StaggerContext } from './StaggerProvider';\nimport type { StaggerProps } from './types';\nimport { BaseMotionBox } from '~components/BaseMotion';\nimport type { MotionVariantsType } from '~components/BaseMotion';\nimport { msToSeconds } from '~utils/msToSeconds';\nimport { useTheme } from '~utils';\n\n/**\n * ## Stagger\n *\n * Stagger is a utility motion preset we expose from blade to help you implement stagger animations.\n *\n * You can use any of the base entry / exit presets like `Fade`, `Move`, `Slide` inside of it and the components will appear one after the other instead of all at once.\n *\n * **Note:** Unlike other motion presets, Stagger is not an enhancer components and renders a Box instead. You can use BoxProps on this component.\n *\n * ### Usage\n *\n * #### Move with Stagger\n *\n * ```jsx\n * <Stagger>\n *  <Move><Chip /></Move>\n *  <Move><Chip /></Move>\n *  <Move><Chip /></Move>\n * </Stagger>\n * ```\n *\n * #### Conditionally make the parent visible or invisible\n *\n * `isVisible` prop in this case should be on Stagger instead of children preset component\n *\n * ```jsx\n * <Stagger isVisible={isVisibleState}>\n *  <Move><Chip /></Move>\n *  <Move><Chip /></Move>\n *  <Move><Chip /></Move>\n * </Stagger>\n * ```\n *\n */\nconst Stagger = ({\n  children,\n  isVisible = true,\n  type = 'inout',\n  shouldUnmountWhenHidden = false,\n  delay,\n  motionTriggers,\n  ...boxProps\n}: StaggerProps): React.ReactElement => {\n  const { theme } = useTheme();\n  // Only need AnimatePresence when we have to unmount the component\n  const AnimateWrapper = shouldUnmountWhenHidden ? AnimatePresence : React.Fragment;\n  // keep it always mounted when shouldUnmountWhenHidden is false\n  const isMounted = shouldUnmountWhenHidden ? isVisible : true;\n\n  const enterDelay = typeof delay === 'object' ? delay.enter : delay;\n  const exitDelay = typeof delay === 'object' ? delay.exit : delay;\n\n  const staggerVariants: MotionVariantsType = {\n    initial: {},\n    animate: {\n      transition: {\n        ...(enterDelay ? { delayChildren: msToSeconds(theme.motion.delay[enterDelay]) } : {}),\n        staggerChildren: msToSeconds(theme.motion.duration['2xquick']),\n      },\n    },\n    exit: {\n      transition: {\n        ...(exitDelay ? { delayChildren: msToSeconds(theme.motion.delay[exitDelay]) } : {}),\n        staggerChildren: msToSeconds(theme.motion.duration['2xquick']),\n      },\n    },\n  };\n\n  return (\n    <AnimateWrapper>\n      {isMounted ? (\n        <BaseMotionBox\n          type={type}\n          motionVariants={staggerVariants}\n          motionTriggers={motionTriggers}\n          {...(shouldUnmountWhenHidden\n            ? {}\n            : { animateVisibility: isVisible ? 'animate' : 'exit' })}\n          {...boxProps}\n        >\n          <StaggerContext.Provider value={{ isInsideStaggerContainer: true, staggerType: type }}>\n            {children}\n          </StaggerContext.Provider>\n        </BaseMotionBox>\n      ) : null}\n    </AnimateWrapper>\n  );\n};\n\nexport { Stagger };\n"],"names":["Stagger","_ref","children","_ref$isVisible","isVisible","_ref$type","type","_ref$shouldUnmountWhe","shouldUnmountWhenHidden","delay","motionTriggers","boxProps","_objectWithoutProperties","_excluded","_useTheme","useTheme","theme","AnimateWrapper","AnimatePresence","React","Fragment","isMounted","enterDelay","_typeof","enter","exitDelay","exit","staggerVariants","initial","animate","transition","_objectSpread","delayChildren","msToSeconds","motion","staggerChildren","duration","_jsx","BaseMotionBox","motionVariants","animateVisibility","StaggerContext","Provider","value","isInsideStaggerContainer","staggerType"],"mappings":"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"}

package/build/lib/web/development/components/Stagger/index.js

@@ -0,0 +1,2 @@
+export { Stagger } from './Stagger.web.js';
+//# sourceMappingURL=index.js.map

package/build/lib/web/development/components/Stagger/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/build/lib/web/development/components/index.js

@@ -2,6 +2,7 @@ import './Accordion/index.js';
 import './ActionList/index.js';
 import './Alert/index.js';
 import './Amount/index.js';
+import './AnimateInteractions/index.js';
 import './Avatar/index.js';
 import './Badge/index.js';
 import './BladeProvider/index.js';
@@ -49,6 +50,7 @@ import './Skeleton/index.js';
 import './SkipNav/index.web.js';
 import './Spinner/index.js';
 import './SpotlightPopoverTour/index.js';
+import './Stagger/index.js';
 import './StepGroup/index.js';
 import './Slide/index.js';
 import './Switch/index.js';
@@ -70,6 +72,7 @@ export { ActionListItem, ActionListItemAvatar, ActionListItemBadge, ActionListIt
 export { ActionListItemAsset } from './ActionList/ActionListItemAsset.web.js';
 export { Alert } from './Alert/Alert.js';
 export { Amount } from './Amount/Amount.js';
+export { AnimateInteractions } from './AnimateInteractions/AnimateInteractions.web.js';
 export { Avatar } from './Avatar/Avatar.web.js';
 export { AvatarGroup } from './Avatar/AvatarGroup.web.js';
 export { TrustedBadgeIcon } from './Avatar/TrustedBadgeIcon.web.js';
@@ -523,6 +526,7 @@ export { Spinner } from './Spinner/Spinner/Spinner.js';
 export { SpotlightPopoverTour } from './SpotlightPopoverTour/Tour.web.js';
 export { SpotlightPopoverTourFooter } from './SpotlightPopoverTour/TourFooter.web.js';
 export { SpotlightPopoverTourStep } from './SpotlightPopoverTour/TourStep.web.js';
+export { Stagger } from './Stagger/Stagger.web.js';
 export { StepGroup } from './StepGroup/StepGroup.web.js';
 export { StepItem } from './StepGroup/StepItem.web.js';
 export { StepItemIcon, StepItemIndicator } from './StepGroup/StepItemMarker.js';

package/build/lib/web/development/components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/lib/web/production/components/AnimateInteractions/AnimateInteractions.web.js

@@ -0,0 +1,37 @@
+import React__default from 'react';
+import { useAnimation } from 'framer-motion';
+import { AnimateInteractionsContext } from './AnimateInteractionsProvider.js';
+import { useFocusWithin } from './useFocusWithin.js';
+import '../BaseMotion/index.js';
+import { jsx } from 'react/jsx-runtime';
+import { BaseMotionEnhancerBox } from '../BaseMotion/BaseMotion.js';
+
+var AnimateInteractions = function AnimateInteractions(_ref) {
+  var children = _ref.children,
+    _ref$motionTriggers = _ref.motionTriggers,
+    motionTriggers = _ref$motionTriggers === void 0 ? ['hover'] : _ref$motionTriggers;
+  var baseMotionRef = React__default.useRef(null);
+  var controls = useAnimation();
+  useFocusWithin(baseMotionRef, {
+    onFocusWithin: function onFocusWithin() {
+      void controls.start('animate');
+    },
+    onBlurWithin: function onBlurWithin() {
+      void controls.start('exit');
+    }
+  });
+  return /*#__PURE__*/jsx(AnimateInteractionsContext.Provider, {
+    value: {
+      isInsideAnimateInteractionsContainer: true
+    },
+    children: /*#__PURE__*/jsx(BaseMotionEnhancerBox, {
+      ref: baseMotionRef,
+      motionTriggers: motionTriggers,
+      animate: controls,
+      children: children
+    })
+  });
+};
+
+export { AnimateInteractions };
+//# sourceMappingURL=AnimateInteractions.web.js.map

package/build/lib/web/production/components/AnimateInteractions/AnimateInteractions.web.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnimateInteractions.web.js","sources":["../../../../../../src/components/AnimateInteractions/AnimateInteractions.web.tsx"],"sourcesContent":["import React from 'react';\nimport { useAnimation } from 'framer-motion';\nimport { AnimateInteractionsContext } from './AnimateInteractionsProvider';\nimport { useFocusWithin } from './useFocusWithin';\nimport type { AnimateInteractionsProps } from './types';\nimport { BaseMotionEnhancerBox } from '~components/BaseMotion';\n\n/**\n * ## AnimateInteractions\n *\n * AnimateInteractions is the utility preset that we offer to help you animate children when the parent is interacted.\n *\n * This is in a way equivalent to following CSS-\n * ```css\n * .parent:hover .child { }\n * ```\n *\n * ### Usage\n *\n * ```jsx\n * <AnimateInteractions\n *    motionTriggers={['hover']}\n *  > // <-- When this is hovered\n *  <Box>\n *    <Move\n *      motionTriggers={['on-animate-interactions']}\n *    > // <-- this animates in\n *      <Box />\n *    </Move>\n *  </Box>\n * </AnimateInteractions>\n * ```\n */\nconst AnimateInteractions = ({\n  children,\n  motionTriggers = ['hover'],\n}: AnimateInteractionsProps): React.ReactElement => {\n  const baseMotionRef = React.useRef<HTMLDivElement | null>(null);\n  const controls = useAnimation();\n\n  useFocusWithin(baseMotionRef, {\n    onFocusWithin: () => {\n      void controls.start('animate');\n    },\n    onBlurWithin: () => {\n      void controls.start('exit');\n    },\n  });\n\n  return (\n    <AnimateInteractionsContext.Provider value={{ isInsideAnimateInteractionsContainer: true }}>\n      <BaseMotionEnhancerBox ref={baseMotionRef} motionTriggers={motionTriggers} animate={controls}>\n        {children}\n      </BaseMotionEnhancerBox>\n    </AnimateInteractionsContext.Provider>\n  );\n};\n\nexport { AnimateInteractions };\n"],"names":["AnimateInteractions","_ref","children","_ref$motionTriggers","motionTriggers","baseMotionRef","React","useRef","controls","useAnimation","useFocusWithin","onFocusWithin","start","onBlurWithin","_jsx","AnimateInteractionsContext","Provider","value","isInsideAnimateInteractionsContainer","BaseMotionEnhancerBox","ref","animate"],"mappings":";;;;;;;;AAiCA,IAAMA,mBAAmB,GAAG,SAAtBA,mBAAmBA,CAAAC,IAAA,EAG2B;AAAA,EAAA,IAFlDC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IAAAC,mBAAA,GAAAF,IAAA,CACRG,cAAc;AAAdA,IAAAA,cAAc,GAAAD,mBAAA,KAAA,KAAA,CAAA,GAAG,CAAC,OAAO,CAAC,GAAAA,mBAAA,CAAA;AAE1B,EAAA,IAAME,aAAa,GAAGC,cAAK,CAACC,MAAM,CAAwB,IAAI,CAAC,CAAA;AAC/D,EAAA,IAAMC,QAAQ,GAAGC,YAAY,EAAE,CAAA;EAE/BC,cAAc,CAACL,aAAa,EAAE;IAC5BM,aAAa,EAAE,SAAAA,aAAAA,GAAM;AACnB,MAAA,KAAKH,QAAQ,CAACI,KAAK,CAAC,SAAS,CAAC,CAAA;KAC/B;IACDC,YAAY,EAAE,SAAAA,YAAAA,GAAM;AAClB,MAAA,KAAKL,QAAQ,CAACI,KAAK,CAAC,MAAM,CAAC,CAAA;AAC7B,KAAA;AACF,GAAC,CAAC,CAAA;AAEF,EAAA,oBACEE,GAAA,CAACC,0BAA0B,CAACC,QAAQ,EAAA;AAACC,IAAAA,KAAK,EAAE;AAAEC,MAAAA,oCAAoC,EAAE,IAAA;KAAO;IAAAhB,QAAA,eACzFY,GAAA,CAACK,qBAAqB,EAAA;AAACC,MAAAA,GAAG,EAAEf,aAAc;AAACD,MAAAA,cAAc,EAAEA,cAAe;AAACiB,MAAAA,OAAO,EAAEb,QAAS;AAAAN,MAAAA,QAAA,EAC1FA,QAAAA;KACoB,CAAA;AAAC,GACW,CAAC,CAAA;AAE1C;;;;"}

package/build/lib/web/production/components/AnimateInteractions/index.js

@@ -0,0 +1,2 @@
+export { AnimateInteractions } from './AnimateInteractions.web.js';
+//# sourceMappingURL=index.js.map

package/build/lib/web/production/components/AnimateInteractions/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/build/lib/web/production/components/AnimateInteractions/useFocusWithin.js

@@ -0,0 +1,30 @@
+import { useEffect } from 'react';
+
+var useFocusWithin = function useFocusWithin(ref, _ref) {
+  var onFocusWithin = _ref.onFocusWithin,
+    onBlurWithin = _ref.onBlurWithin;
+  useEffect(function () {
+    var element = ref.current;
+    if (!element) return;
+    var handleFocusIn = function handleFocusIn() {
+      onFocusWithin === null || onFocusWithin === void 0 ? void 0 : onFocusWithin();
+    };
+    var handleFocusOut = function handleFocusOut(event) {
+      // Ensure that focus is not still within the container
+      if (element && !element.contains(event.relatedTarget)) {
+        onBlurWithin === null || onBlurWithin === void 0 ? void 0 : onBlurWithin();
+      }
+    };
+    element.addEventListener('focusin', handleFocusIn);
+    element.addEventListener('focusout', handleFocusOut);
+
+    // eslint-disable-next-line consistent-return
+    return function () {
+      element.removeEventListener('focusin', handleFocusIn);
+      element.removeEventListener('focusout', handleFocusOut);
+    };
+  }, [ref, onFocusWithin, onBlurWithin]);
+};
+
+export { useFocusWithin };
+//# sourceMappingURL=useFocusWithin.js.map

package/build/lib/web/production/components/AnimateInteractions/useFocusWithin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFocusWithin.js","sources":["../../../../../../src/components/AnimateInteractions/useFocusWithin.ts"],"sourcesContent":["import { useEffect } from 'react';\n\ntype FocusWithinHandlers = {\n  onFocusWithin?: () => void;\n  onBlurWithin?: () => void;\n};\n\nexport const useFocusWithin = <T extends HTMLElement>(\n  ref: React.RefObject<T>,\n  { onFocusWithin, onBlurWithin }: FocusWithinHandlers,\n): void => {\n  useEffect(() => {\n    const element = ref.current;\n    if (!element) return;\n\n    const handleFocusIn = (): void => {\n      onFocusWithin?.();\n    };\n\n    const handleFocusOut = (event: FocusEvent): void => {\n      // Ensure that focus is not still within the container\n      if (element && !element.contains(event.relatedTarget as Node)) {\n        onBlurWithin?.();\n      }\n    };\n\n    element.addEventListener('focusin', handleFocusIn);\n    element.addEventListener('focusout', handleFocusOut);\n\n    // eslint-disable-next-line consistent-return\n    return () => {\n      element.removeEventListener('focusin', handleFocusIn);\n      element.removeEventListener('focusout', handleFocusOut);\n    };\n  }, [ref, onFocusWithin, onBlurWithin]);\n};\n"],"names":["useFocusWithin","ref","_ref","onFocusWithin","onBlurWithin","useEffect","element","current","handleFocusIn","handleFocusOut","event","contains","relatedTarget","addEventListener","removeEventListener"],"mappings":";;AAOO,IAAMA,cAAc,GAAG,SAAjBA,cAAcA,CACzBC,GAAuB,EAAAC,IAAA,EAEd;AAAA,EAAA,IADPC,aAAa,GAAAD,IAAA,CAAbC,aAAa;IAAEC,YAAY,GAAAF,IAAA,CAAZE,YAAY,CAAA;AAE7BC,EAAAA,SAAS,CAAC,YAAM;AACd,IAAA,IAAMC,OAAO,GAAGL,GAAG,CAACM,OAAO,CAAA;IAC3B,IAAI,CAACD,OAAO,EAAE,OAAA;AAEd,IAAA,IAAME,aAAa,GAAG,SAAhBA,aAAaA,GAAe;AAChCL,MAAAA,aAAa,KAAbA,IAAAA,IAAAA,aAAa,KAAbA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,aAAa,EAAI,CAAA;KAClB,CAAA;AAED,IAAA,IAAMM,cAAc,GAAG,SAAjBA,cAAcA,CAAIC,KAAiB,EAAW;AAClD;MACA,IAAIJ,OAAO,IAAI,CAACA,OAAO,CAACK,QAAQ,CAACD,KAAK,CAACE,aAAqB,CAAC,EAAE;AAC7DR,QAAAA,YAAY,KAAZA,IAAAA,IAAAA,YAAY,KAAZA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,YAAY,EAAI,CAAA;AAClB,OAAA;KACD,CAAA;AAEDE,IAAAA,OAAO,CAACO,gBAAgB,CAAC,SAAS,EAAEL,aAAa,CAAC,CAAA;AAClDF,IAAAA,OAAO,CAACO,gBAAgB,CAAC,UAAU,EAAEJ,cAAc,CAAC,CAAA;;AAEpD;AACA,IAAA,OAAO,YAAM;AACXH,MAAAA,OAAO,CAACQ,mBAAmB,CAAC,SAAS,EAAEN,aAAa,CAAC,CAAA;AACrDF,MAAAA,OAAO,CAACQ,mBAAmB,CAAC,UAAU,EAAEL,cAAc,CAAC,CAAA;KACxD,CAAA;GACF,EAAE,CAACR,GAAG,EAAEE,aAAa,EAAEC,YAAY,CAAC,CAAC,CAAA;AACxC;;;;"}

package/build/lib/web/production/components/Stagger/Stagger.web.js

@@ -0,0 +1,73 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _typeof from '@babel/runtime/helpers/typeof';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import React__default from 'react';
+import { AnimatePresence } from 'framer-motion';
+import { StaggerContext } from './StaggerProvider.js';
+import '../BaseMotion/index.js';
+import { msToSeconds } from '../../utils/msToSeconds.js';
+import '../../utils/index.js';
+import { jsx } from 'react/jsx-runtime';
+import useTheme from '../BladeProvider/useTheme.js';
+import { BaseMotionBox } from '../BaseMotion/BaseMotion.js';
+
+var _excluded = ["children", "isVisible", "type", "shouldUnmountWhenHidden", "delay", "motionTriggers"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var Stagger = function Stagger(_ref) {
+  var children = _ref.children,
+    _ref$isVisible = _ref.isVisible,
+    isVisible = _ref$isVisible === void 0 ? true : _ref$isVisible,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'inout' : _ref$type,
+    _ref$shouldUnmountWhe = _ref.shouldUnmountWhenHidden,
+    shouldUnmountWhenHidden = _ref$shouldUnmountWhe === void 0 ? false : _ref$shouldUnmountWhe,
+    delay = _ref.delay,
+    motionTriggers = _ref.motionTriggers,
+    boxProps = _objectWithoutProperties(_ref, _excluded);
+  var _useTheme = useTheme(),
+    theme = _useTheme.theme;
+  // Only need AnimatePresence when we have to unmount the component
+  var AnimateWrapper = shouldUnmountWhenHidden ? AnimatePresence : React__default.Fragment;
+  // keep it always mounted when shouldUnmountWhenHidden is false
+  var isMounted = shouldUnmountWhenHidden ? isVisible : true;
+  var enterDelay = _typeof(delay) === 'object' ? delay.enter : delay;
+  var exitDelay = _typeof(delay) === 'object' ? delay.exit : delay;
+  var staggerVariants = {
+    initial: {},
+    animate: {
+      transition: _objectSpread(_objectSpread({}, enterDelay ? {
+        delayChildren: msToSeconds(theme.motion.delay[enterDelay])
+      } : {}), {}, {
+        staggerChildren: msToSeconds(theme.motion.duration['2xquick'])
+      })
+    },
+    exit: {
+      transition: _objectSpread(_objectSpread({}, exitDelay ? {
+        delayChildren: msToSeconds(theme.motion.delay[exitDelay])
+      } : {}), {}, {
+        staggerChildren: msToSeconds(theme.motion.duration['2xquick'])
+      })
+    }
+  };
+  return /*#__PURE__*/jsx(AnimateWrapper, {
+    children: isMounted ? /*#__PURE__*/jsx(BaseMotionBox, _objectSpread(_objectSpread(_objectSpread({
+      type: type,
+      motionVariants: staggerVariants,
+      motionTriggers: motionTriggers
+    }, shouldUnmountWhenHidden ? {} : {
+      animateVisibility: isVisible ? 'animate' : 'exit'
+    }), boxProps), {}, {
+      children: /*#__PURE__*/jsx(StaggerContext.Provider, {
+        value: {
+          isInsideStaggerContainer: true,
+          staggerType: type
+        },
+        children: children
+      })
+    })) : null
+  });
+};
+
+export { Stagger };
+//# sourceMappingURL=Stagger.web.js.map

package/build/lib/web/production/components/Stagger/Stagger.web.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stagger.web.js","sources":["../../../../../../src/components/Stagger/Stagger.web.tsx"],"sourcesContent":["import React from 'react';\nimport { AnimatePresence } from 'framer-motion';\nimport { StaggerContext } from './StaggerProvider';\nimport type { StaggerProps } from './types';\nimport { BaseMotionBox } from '~components/BaseMotion';\nimport type { MotionVariantsType } from '~components/BaseMotion';\nimport { msToSeconds } from '~utils/msToSeconds';\nimport { useTheme } from '~utils';\n\n/**\n * ## Stagger\n *\n * Stagger is a utility motion preset we expose from blade to help you implement stagger animations.\n *\n * You can use any of the base entry / exit presets like `Fade`, `Move`, `Slide` inside of it and the components will appear one after the other instead of all at once.\n *\n * **Note:** Unlike other motion presets, Stagger is not an enhancer components and renders a Box instead. You can use BoxProps on this component.\n *\n * ### Usage\n *\n * #### Move with Stagger\n *\n * ```jsx\n * <Stagger>\n *  <Move><Chip /></Move>\n *  <Move><Chip /></Move>\n *  <Move><Chip /></Move>\n * </Stagger>\n * ```\n *\n * #### Conditionally make the parent visible or invisible\n *\n * `isVisible` prop in this case should be on Stagger instead of children preset component\n *\n * ```jsx\n * <Stagger isVisible={isVisibleState}>\n *  <Move><Chip /></Move>\n *  <Move><Chip /></Move>\n *  <Move><Chip /></Move>\n * </Stagger>\n * ```\n *\n */\nconst Stagger = ({\n  children,\n  isVisible = true,\n  type = 'inout',\n  shouldUnmountWhenHidden = false,\n  delay,\n  motionTriggers,\n  ...boxProps\n}: StaggerProps): React.ReactElement => {\n  const { theme } = useTheme();\n  // Only need AnimatePresence when we have to unmount the component\n  const AnimateWrapper = shouldUnmountWhenHidden ? AnimatePresence : React.Fragment;\n  // keep it always mounted when shouldUnmountWhenHidden is false\n  const isMounted = shouldUnmountWhenHidden ? isVisible : true;\n\n  const enterDelay = typeof delay === 'object' ? delay.enter : delay;\n  const exitDelay = typeof delay === 'object' ? delay.exit : delay;\n\n  const staggerVariants: MotionVariantsType = {\n    initial: {},\n    animate: {\n      transition: {\n        ...(enterDelay ? { delayChildren: msToSeconds(theme.motion.delay[enterDelay]) } : {}),\n        staggerChildren: msToSeconds(theme.motion.duration['2xquick']),\n      },\n    },\n    exit: {\n      transition: {\n        ...(exitDelay ? { delayChildren: msToSeconds(theme.motion.delay[exitDelay]) } : {}),\n        staggerChildren: msToSeconds(theme.motion.duration['2xquick']),\n      },\n    },\n  };\n\n  return (\n    <AnimateWrapper>\n      {isMounted ? (\n        <BaseMotionBox\n          type={type}\n          motionVariants={staggerVariants}\n          motionTriggers={motionTriggers}\n          {...(shouldUnmountWhenHidden\n            ? {}\n            : { animateVisibility: isVisible ? 'animate' : 'exit' })}\n          {...boxProps}\n        >\n          <StaggerContext.Provider value={{ isInsideStaggerContainer: true, staggerType: type }}>\n            {children}\n          </StaggerContext.Provider>\n        </BaseMotionBox>\n      ) : null}\n    </AnimateWrapper>\n  );\n};\n\nexport { Stagger };\n"],"names":["Stagger","_ref","children","_ref$isVisible","isVisible","_ref$type","type","_ref$shouldUnmountWhe","shouldUnmountWhenHidden","delay","motionTriggers","boxProps","_objectWithoutProperties","_excluded","_useTheme","useTheme","theme","AnimateWrapper","AnimatePresence","React","Fragment","isMounted","enterDelay","_typeof","enter","exitDelay","exit","staggerVariants","initial","animate","transition","_objectSpread","delayChildren","msToSeconds","motion","staggerChildren","duration","_jsx","BaseMotionBox","motionVariants","animateVisibility","StaggerContext","Provider","value","isInsideStaggerContainer","staggerType"],"mappings":"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"}

package/build/lib/web/production/components/Stagger/index.js

@@ -0,0 +1,2 @@
+export { Stagger } from './Stagger.web.js';
+//# sourceMappingURL=index.js.map

package/build/lib/web/production/components/Stagger/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/build/lib/web/production/components/index.js

@@ -2,6 +2,7 @@ import './Accordion/index.js';
 import './ActionList/index.js';
 import './Alert/index.js';
 import './Amount/index.js';
+import './AnimateInteractions/index.js';
 import './Avatar/index.js';
 import './Badge/index.js';
 import './BladeProvider/index.js';
@@ -49,6 +50,7 @@ import './Skeleton/index.js';
 import './SkipNav/index.web.js';
 import './Spinner/index.js';
 import './SpotlightPopoverTour/index.js';
+import './Stagger/index.js';
 import './StepGroup/index.js';
 import './Slide/index.js';
 import './Switch/index.js';
@@ -70,6 +72,7 @@ export { ActionListItem, ActionListItemAvatar, ActionListItemBadge, ActionListIt
 export { ActionListItemAsset } from './ActionList/ActionListItemAsset.web.js';
 export { Alert } from './Alert/Alert.js';
 export { Amount } from './Amount/Amount.js';
+export { AnimateInteractions } from './AnimateInteractions/AnimateInteractions.web.js';
 export { Avatar } from './Avatar/Avatar.web.js';
 export { AvatarGroup } from './Avatar/AvatarGroup.web.js';
 export { TrustedBadgeIcon } from './Avatar/TrustedBadgeIcon.web.js';
@@ -523,6 +526,7 @@ export { Spinner } from './Spinner/Spinner/Spinner.js';
 export { SpotlightPopoverTour } from './SpotlightPopoverTour/Tour.web.js';
 export { SpotlightPopoverTourFooter } from './SpotlightPopoverTour/TourFooter.web.js';
 export { SpotlightPopoverTourStep } from './SpotlightPopoverTour/TourStep.web.js';
+export { Stagger } from './Stagger/Stagger.web.js';
 export { StepGroup } from './StepGroup/StepGroup.web.js';
 export { StepItem } from './StepGroup/StepItem.web.js';
 export { StepItemIcon, StepItemIndicator } from './StepGroup/StepItemMarker.js';

package/build/lib/web/production/components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}