@atlaskit/top-layer 1.6.0 → 1.6.1

package/dist/esm/popover/animations.js

@@ -1,5 +1,5 @@
 import { getPlacement } from '../internal/resolve-placement';
-function getPopupMotionStyles(_ref) {
+export function getPopupMotionStyles(_ref) {
   var placement = _ref.placement;
   var _getPlacement = getPlacement({
       placement: placement
@@ -41,147 +41,4 @@ function getPopupMotionStyles(_ref) {
     property: '--ds-popover-motion-exit',
     value: "var(--ds-popup-exit-bottom, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutBottom8px, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0)"
   }];
-}
-
-// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
-export function popupMotion() {
-  return {
-    kind: 'popover',
-    name: 'motion',
-    getStyles: getPopupMotionStyles
-  };
-}
-function getSlideAndFadeStyles(_ref2) {
-  var placement = _ref2.placement,
-    distance = _ref2.distance;
-  var pos = "".concat(distance, "px");
-  var neg = "-".concat(distance, "px");
-  var _getPlacement2 = getPlacement({
-      placement: placement
-    }),
-    axis = _getPlacement2.axis,
-    edge = _getPlacement2.edge;
-  if (axis === 'block' && edge === 'start') {
-    return [{
-      property: '--ds-popover-tx',
-      value: '0'
-    }, {
-      property: '--ds-popover-ty',
-      value: pos
-    }];
-  }
-  if (axis === 'block' && edge === 'end') {
-    return [{
-      property: '--ds-popover-tx',
-      value: '0'
-    }, {
-      property: '--ds-popover-ty',
-      value: neg
-    }];
-  }
-  if (axis === 'inline' && edge === 'start') {
-    return [{
-      property: '--ds-popover-tx',
-      value: pos
-    }, {
-      property: '--ds-popover-ty',
-      value: '0'
-    }];
-  }
-  if (axis === 'inline' && edge === 'end') {
-    return [{
-      property: '--ds-popover-tx',
-      value: neg
-    }, {
-      property: '--ds-popover-ty',
-      value: '0'
-    }];
-  }
-  return [{
-    property: '--ds-popover-tx',
-    value: '0'
-  }, {
-    property: '--ds-popover-ty',
-    value: neg
-  }];
-}
-
-/**
- * Directional slide + opacity animation.
- *
- * The popover slides in from the direction opposite its placement edge
- * (e.g. a `block-end` popover slides down from above).
- *
- * @param options.distance - Slide distance in pixels. Defaults to `4`.
- *
- * @example
- * ```tsx
- * import { slideAndFade } from '@atlaskit/top-layer/animations';
- *
- * // Default 4px slide (tooltip)
- * <Popover animate={slideAndFade()} />
- *
- * // Custom 8px slide (popup / dropdown)
- * <Popover animate={slideAndFade({ distance: 8 })} />
- * ```
- */
-// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
-export function slideAndFade(options) {
-  var _options$distance;
-  var distance = (_options$distance = options === null || options === void 0 ? void 0 : options.distance) !== null && _options$distance !== void 0 ? _options$distance : 4;
-  return {
-    kind: 'popover',
-    name: 'slide-and-fade',
-    getStyles: function getStyles(_ref3) {
-      var placement = _ref3.placement;
-      return getSlideAndFadeStyles({
-        placement: placement,
-        distance: distance
-      });
-    }
-  };
-}
-
-// fade
-
-/**
- * Simple opacity transition, no transform.
- *
- * Suitable for popup dialogs or content that does not need directional motion.
- *
- * @example
- * ```tsx
- * import { fade } from '@atlaskit/top-layer/animations';
- *
- * <Popover animate={fade()} />
- * ```
- */
-// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
-export function fade() {
-  return {
-    kind: 'popover',
-    name: 'fade'
-  };
-}
-
-// scaleAndFade
-
-/**
- * Scale from 0.95 + opacity transition.
- *
- * Suitable for menus, dropdowns, and select options.
- *
- * @example
- * ```tsx
- * import { scaleAndFade } from '@atlaskit/top-layer/animations';
- *
- * <Popover animate={scaleAndFade()} />
- * ```
- */
-// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
-export function scaleAndFade() {
-  return {
-    kind: 'popover',
-    name: 'scale-and-fade'
-  };
 }

package/dist/esm/popover/popover.compiled.css

@@ -7,7 +7,6 @@
 ._18u0idpf{margin-left:0}
 ._19bvidpf{padding-left:0}
 ._19pkidpf{margin-top:0}
-._1a5xt94y{--dir:1px}
 ._1o51q7pw{animation-fill-mode:forwards}
 ._1oecdn4k{transition-duration:var(--ds-duration-xshort,.1s)}
 ._1pgl1lbj{animation-timing-function:var(--ds-easing-in-practical,cubic-bezier(.6,0,.8,.6))}
@@ -16,21 +15,12 @@
 ._1s9z1a5r{transition-behavior:allow-discrete}
 ._2hwxidpf{margin-right:0}
 ._5sagdn4k{animation-duration:var(--ds-duration-xshort,.1s)}
-._71re1bym:popover-open{animation-name:var(--ds-keyframe-fade-in,FadeIn0to100)}
-._71re1v6b:popover-open{animation-name:var(--ds-keyframe-fade-in,FadeIn0to100),var(--ds-keyframe-scale-in-small,ScaleIn95to100)}
-._71rervlo:popover-open{animation-name:k1ut9kob,var(--ds-keyframe-fade-in,FadeIn0to100)}
 ._bfhk1j28{background-color:transparent}
 ._ca0qidpf{padding-top:0}
-._j7hq1a5s{animation-name:var(--ds-keyframe-fade-out,FadeOut100to0)}
-._j7hq1l2h{animation-name:k1e4c1ew,var(--ds-keyframe-fade-out,FadeOut100to0)}
-._j7hqneez{animation-name:var(--ds-keyframe-fade-out,FadeOut100to0),var(--ds-keyframe-scale-out-small,ScaleOut100to95)}
 ._k8m011k7{transition-property:overlay,display}
 ._n3tdidpf{padding-bottom:0}
 ._n70peoah:popover-open{animation-fill-mode:backwards}
 ._o8i7indk:popover-open{animation-timing-function:var(--ds-easing-out-practical,cubic-bezier(.4,1,.6,1))}
 ._otyridpf{margin-bottom:0}
 ._u5f3idpf{padding-right:0}
-[dir=rtl] ._34bx1n1a{--dir:-1px}
-@keyframes k1e4c1ew{0%{transform:none}to{transform:translate(calc(var(--dir)*var(--ds-popover-tx, 0)),var(--ds-popover-ty,0))}}
-@keyframes k1ut9kob{0%{transform:translate(calc(var(--dir)*var(--ds-popover-tx, 0)),var(--ds-popover-ty,0))}to{transform:none}}
 @media (prefers-reduced-motion:reduce){._bl8aglyw{animation-name:none}._156yru3m{transition-duration:0s}._8rmvglyw:popover-open{animation-name:none}._2qm2ru3m:popover-open{transition-duration:0s}}

package/dist/esm/popover/popover.js

@@ -11,6 +11,7 @@ import { setStyle } from '../internal/set-style';
 import { useAnimatedVisibility } from '../internal/use-animated-visibility';
 import { useFocusWrap } from '../internal/use-focus-wrap';
 import { useInitialFocus } from '../internal/use-initial-focus';
+import { getPopupMotionStyles } from './animations';
 /**
  * Detects `popover="hint"` support via DOM reflection. SSR-safe, cached.
  */
@@ -23,19 +24,13 @@ var supportsPopoverHint = once(function () {
   element.setAttribute('popover', 'hint');
   return element.popover === 'hint';
 });
-var slideInKeyframes = null;
-var slideOutKeyframes = null;
 
 // These animation styles use the non-strict Compiled cssMap because they rely
 // on `@starting-style`, `:popover-open`, `[dir='rtl']`, and `allow-discrete`.
 // Keep them in this component so the Compiled transform can statically extract
 // every referenced style.
 var popoverAnimationStyles = {
-  root: "_k8m011k7 _1oecdn4k _1s9z1a5r _1a5xt94y _12t71ign _34bx1n1a _bl8aglyw _156yru3m _8rmvglyw _2qm2ru3m",
-  motion: "_y44vof1f _1o51q7pw _15ns179n _n70peoah",
-  'slide-and-fade': "_j7hq1l2h _5sagdn4k _1pgl1lbj _71rervlo _1psg1ign _o8i7indk",
-  fade: "_j7hq1a5s _5sagdn4k _1pgl1lbj _71re1bym _1psg1ign _o8i7indk",
-  'scale-and-fade': "_j7hqneez _5sagdn4k _1pgl1lbj _71re1v6b _1psg1ign _o8i7indk"
+  root: "_y44vof1f _k8m011k7 _1oecdn4k _1s9z1a5r _1o51q7pw _5sagdn4k _1pgl1lbj _15ns179n _12t71ign _n70peoah _1psg1ign _o8i7indk _bl8aglyw _156yru3m _8rmvglyw _2qm2ru3m"
 };
 var styles = {
   root: "_19itglyw _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _19pkidpf _2hwxidpf _otyridpf _18u0idpf _1r041wug _1reoewfl _18m9ewfl _bfhk1j28"
@@ -86,7 +81,8 @@ export var Popover = /*#__PURE__*/forwardRef(function Popover(_ref, ref) {
     onOpenChange = _ref.onOpenChange,
     onEnterFinish = _ref.onEnterFinish,
     onExitFinish = _ref.onExitFinish,
-    animate = _ref.animate,
+    _ref$animate = _ref.animate,
+    animate = _ref$animate === void 0 ? false : _ref$animate,
     placement = _ref.placement,
     testId = _ref.testId,
     isOpen = _ref.isOpen,
@@ -102,6 +98,7 @@ export var Popover = /*#__PURE__*/forwardRef(function Popover(_ref, ref) {
   var popoverId = idProp !== null && idProp !== void 0 ? idProp : "popover-".concat(autoId.replace(/:/g, ''));
   var _useAnimatedVisibilit = useAnimatedVisibility({
       isOpen: isOpen,
+      animationKind: 'popover',
       animate: animate,
       elementRef: ownRef,
       onEnterFinish: onEnterFinish,
@@ -269,12 +266,12 @@ export var Popover = /*#__PURE__*/forwardRef(function Popover(_ref, ref) {
   // stale custom properties on the element.
   useLayoutEffect(function () {
     var element = ownRef.current;
-    if (!element || !(preset !== null && preset !== void 0 && preset.getStyles) || !placement) {
+    if (!element || !placement) {
       return;
     }
     return setStyle({
       element: element,
-      styles: preset.getStyles({
+      styles: getPopupMotionStyles({
         placement: placement
       })
     });
@@ -327,6 +324,6 @@ export var Popover = /*#__PURE__*/forwardRef(function Popover(_ref, ref) {
     "aria-label": label,
     "aria-labelledby": labelledBy,
     "data-testid": testId,
-    className: ax([styles.root, preset && popoverAnimationStyles.root, preset && popoverAnimationStyles[preset.name], consumerXcss])
+    className: ax([styles.root, preset && popoverAnimationStyles.root, consumerXcss])
   }, children);
 });

package/dist/esm/testing/polyfill.js

@@ -524,6 +524,9 @@ if (typeof HTMLElement !== 'undefined') {
   // delegate every other selector to the original implementation.
   // Spec: https://html.spec.whatwg.org/multipage/semantics-other.html#selector-popover-open
   var originalMatches = Element.prototype.matches;
+  // The DOM lib types `Element.prototype.matches` as a set of type-predicate
+  // overloads. This polyfill intentionally replaces it with a plain boolean
+  // implementation, so we cast to the original member type.
   Element.prototype.matches = function patchedMatches(selector) {
     if (selector === ':popover-open') {
       return this.hasAttribute('data-popover-open');

package/dist/types/dialog/types.d.ts

@@ -1,6 +1,6 @@
 import { type CSSProperties, type ReactNode } from 'react';
 import { type CompiledStyles } from '@compiled/react';
-import type { TDialogAnimationPreset } from './animations';
+import type { TAnimationConfig } from '../internal/use-animated-visibility';
 /**
  * Close reasons produced by the Dialog primitive.
  *
@@ -48,12 +48,12 @@ type TDialogBaseProps = {
         reason: TDialogCloseReason;
     }) => void;
     /**
-     * Animation preset for entry/exit transitions.
+     * Animation config for entry/exit transitions.
      *
-     * Pass a `TAnimationPreset` (e.g. `dialogSlideUpAndFade()`) to enable
-     * CSS-based entry and exit animation. Pass `false` (or omit) to disable.
+     * Pass `true` to use the default dialog animation. Pass a config object to
+     * customize supported animation settings. Pass `false` or omit to disable.
      */
-    animate?: TDialogAnimationPreset | false;
+    animate?: boolean | TAnimationConfig;
     /**
      * Additional Compiled styles applied to the `<dialog>` element.
      *

package/dist/types/entry-points/animations.d.ts

@@ -1,2 +0,0 @@
-export { dialogMotion, dialogSlideUpAndFade, dialogFade, type TDialogAnimationPreset, } from '../dialog/animations';
-export { popupMotion, slideAndFade, fade, scaleAndFade, type TPopoverAnimationPreset, } from '../popover/animations';

package/dist/types/internal/use-animated-visibility.d.ts

@@ -1,44 +1,26 @@
 import { type RefObject } from 'react';
-import type { TPlacementOptions } from './resolve-placement';
-type TAnimationPresetKind = 'dialog' | 'popover';
+type TAnimationKind = 'dialog' | 'popover';
 /**
- * A self-contained animation preset for top-layer elements.
+ * Animation config for entry/exit transitions.
  *
- * Contains a stable preset name used by the host component to select its
- * component-local Compiled style entry, plus optional per-placement inline
- * styles.
- *
- * The actual Compiled styles are kept static and component-local so the
- * Compiled transform can extract them at build time.
+ * Currently no configuration is supported via this prop,
+ * and this is just a placeholder.
  */
-export type TAnimationPreset<Kind extends TAnimationPresetKind, Name = string> = {
-    kind: Kind;
-    /**
-     * Stable preset name used to select a component-local Compiled style entry.
-     */
-    name: Name;
-    /**
-     * Per-placement inline styles (e.g. directional offset custom properties for
-     * `slideAndFade`). Only used by presets that vary by placement or by a
-     * configurable distance.
-     */
-    getStyles?: (args: {
-        placement: TPlacementOptions;
-    }) => Array<{
-        property: string;
-        value: string;
-    }>;
-};
-type TUseAnimatedVisibilityArgs<Kind extends TAnimationPresetKind, Name> = {
+export type TAnimationConfig = never;
+type TUseAnimatedVisibilityArgs = {
     /**
      * Whether the element is logically open.
      */
     isOpen: boolean;
     /**
-     * Animation preset for entry/exit transitions.
+     * Animation kind used to select default safety-net timings.
+     */
+    animationKind: TAnimationKind;
+    /**
+     * Animation config for entry/exit transitions.
      * Pass `false` or `undefined` to disable animation.
      */
-    animate: TAnimationPreset<Kind, Name> | false | undefined;
+    animate: boolean | TAnimationConfig;
     /**
      * Ref to the DOM element that plays the entry/exit transitions.
      * Used to listen for `transitionend`.
@@ -56,7 +38,7 @@ type TUseAnimatedVisibilityArgs<Kind extends TAnimationPresetKind, Name> = {
      */
     onExitFinish?: () => void;
 };
-type TUseAnimatedVisibilityResult<Kind extends TAnimationPresetKind, Name> = {
+type TUseAnimatedVisibilityResult = {
     /**
      * Current visibility phase. See `TPhase` for the full lifecycle.
      *
@@ -71,7 +53,7 @@ type TUseAnimatedVisibilityResult<Kind extends TAnimationPresetKind, Name> = {
      * Resolved animation preset (styles applied via the host element's `css`
      * prop), or `null` if animation is disabled.
      */
-    preset: TAnimationPreset<Kind, Name> | null;
+    preset: boolean | TAnimationConfig | null;
 };
 /**
  * Visibility lifecycle phase shared between `useAnimatedVisibility`,
@@ -134,5 +116,5 @@ export type TPhase = 'closed' | 'entering' | 'open' | 'exiting';
  * Every effect dispatches on the single `phase` value instead of a
  * cross-product of booleans.
  */
-export declare function useAnimatedVisibility<Kind extends TAnimationPresetKind, Name>({ isOpen, animate, elementRef, onEnterFinish, onExitFinish, }: TUseAnimatedVisibilityArgs<Kind, Name>): TUseAnimatedVisibilityResult<Kind, Name>;
+export declare function useAnimatedVisibility({ isOpen, animationKind, animate, elementRef, onEnterFinish, onExitFinish, }: TUseAnimatedVisibilityArgs): TUseAnimatedVisibilityResult;
 export {};

package/dist/types/popover/animations.d.ts

@@ -1,52 +1,7 @@
-import type { TAnimationPreset } from '../internal/use-animated-visibility';
-export type TPopoverAnimationPresetName = 'motion' | 'slide-and-fade' | 'scale-and-fade' | 'fade';
-export type TPopoverAnimationPreset = TAnimationPreset<'popover', TPopoverAnimationPresetName>;
-export declare function popupMotion(): TPopoverAnimationPreset;
-/**
- * Directional slide + opacity animation.
- *
- * The popover slides in from the direction opposite its placement edge
- * (e.g. a `block-end` popover slides down from above).
- *
- * @param options.distance - Slide distance in pixels. Defaults to `4`.
- *
- * @example
- * ```tsx
- * import { slideAndFade } from '@atlaskit/top-layer/animations';
- *
- * // Default 4px slide (tooltip)
- * <Popover animate={slideAndFade()} />
- *
- * // Custom 8px slide (popup / dropdown)
- * <Popover animate={slideAndFade({ distance: 8 })} />
- * ```
- */
-export declare function slideAndFade(options?: {
-    distance?: number;
-}): TPopoverAnimationPreset;
-/**
- * Simple opacity transition, no transform.
- *
- * Suitable for popup dialogs or content that does not need directional motion.
- *
- * @example
- * ```tsx
- * import { fade } from '@atlaskit/top-layer/animations';
- *
- * <Popover animate={fade()} />
- * ```
- */
-export declare function fade(): TPopoverAnimationPreset;
-/**
- * Scale from 0.95 + opacity transition.
- *
- * Suitable for menus, dropdowns, and select options.
- *
- * @example
- * ```tsx
- * import { scaleAndFade } from '@atlaskit/top-layer/animations';
- *
- * <Popover animate={scaleAndFade()} />
- * ```
- */
-export declare function scaleAndFade(): TPopoverAnimationPreset;
+import { type TPlacementOptions } from '../internal/resolve-placement';
+export declare function getPopupMotionStyles({ placement, }: {
+    placement: TPlacementOptions;
+}): Array<{
+    property: string;
+    value: string;
+}>;

package/dist/types/popover/types.d.ts

@@ -2,7 +2,7 @@ import { type ReactNode } from 'react';
 import { type StrictXCSSProp } from '@atlaskit/css';
 import { type TPlacementOptions } from '../internal/resolve-placement';
 import { type TAriaRoleRequired, type TRoleRequiringAccessibleName, type TRoleWithImplicitName } from '../internal/role-types';
-import { type TPopoverAnimationPreset } from './animations';
+import type { TAnimationConfig } from '../internal/use-animated-visibility';
 /**
  * The reason a popover was closed.
  *
@@ -36,14 +36,17 @@ type TPopoverBaseProps = {
      * Additional CSS styles applied to the popover root element.
      * Use to set `backgroundColor` to match the popup surface colour.
      */
-    xcss?: StrictXCSSProp<'backgroundColor', never>;
+    xcss?: StrictXCSSProp<'animationName', '&:popover-open', {
+        requiredPseudos: '&:popover-open';
+        requiredProperties: never;
+    }>;
     /**
      * Animation preset for entry/exit transitions.
      *
      * Animations use `@starting-style` and `allow-discrete` for progressive
      * enhancement: browsers without support show/hide instantly.
      */
-    animate?: false | TPopoverAnimationPreset;
+    animate?: boolean | TAnimationConfig;
     /**
      * Test ID applied to the popover element.
      */

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/top-layer",
-	"version": "1.6.0",
+	"version": "1.6.1",
 	"description": "Low-level layering primitives based on popover and dialog",
 	"homepage": "https://atlassian.design/components/top-layer",
 	"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
@@ -39,7 +39,7 @@
 		"@atlaskit/ds-lib": "^8.0.0",
 		"@atlaskit/layering": "^4.1.0",
 		"@atlaskit/react-compiler-gating": "^0.2.0",
-		"@atlaskit/tokens": "^15.5.0",
+		"@atlaskit/tokens": "^15.7.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.20.0",
 		"bind-event-listener": "^3.0.0",
@@ -55,11 +55,11 @@
 		"@atlaskit/button": "^24.3.0",
 		"@atlaskit/heading": "^6.2.0",
 		"@atlaskit/lozenge": "^14.1.0",
-		"@atlaskit/primitives": "^20.5.0",
+		"@atlaskit/primitives": "^20.6.0",
 		"@atlaskit/ssr": "workspace:^",
 		"@atlaskit/textfield": "^9.1.0",
 		"@atlassian/ssr-tests": "workspace:^",
-		"@atlassian/testing-library": "^0.10.0",
+		"@atlassian/testing-library": "^0.11.0",
 		"@testing-library/jest-dom": "^6.4.5",
 		"@testing-library/react": "^16.3.0",
 		"@types/raf-schd": "^4.0.1",

package/dist/cjs/dialog/animations.js

@@ -1,90 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.dialogFade = dialogFade;
-exports.dialogMotion = dialogMotion;
-exports.dialogSlideUpAndFade = dialogSlideUpAndFade;
-// `custom` variant currently exists for typing reasons for Drawer
-// not indicative of final API
-
-/**
- * Dialog motion animation.
- *
- * Includes backdrop fade animation.
- *
- * @example
- * ```tsx
- * import { dialogMotion } from '@atlaskit/top-layer/animations';
- *
- * <Dialog animate={dialogMotion()} isOpen={isOpen} onClose={handleClose} label="...">
- *   ...
- * </Dialog>
- * ```
- */
-// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
-function dialogMotion() {
-  return {
-    kind: 'dialog',
-    name: 'motion'
-  };
-}
-
-/**
- * Slide up + opacity animation for dialogs.
- *
- * Entry slides up from below; exit slides up and out (asymmetric).
- * Includes backdrop fade animation.
- *
- * @param options.distance - Slide distance in pixels. Defaults to `12`.
- *
- * @example
- * ```tsx
- * import { dialogSlideUpAndFade } from '@atlaskit/top-layer/animations';
- *
- * const animation = dialogSlideUpAndFade();
- * <Dialog animate={animation} isOpen={isOpen} onClose={handleClose} label="...">
- *   ...
- * </Dialog>
- * ```
- */
-// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
-function dialogSlideUpAndFade(options) {
-  var _options$distance;
-  var distance = (_options$distance = options === null || options === void 0 ? void 0 : options.distance) !== null && _options$distance !== void 0 ? _options$distance : 12;
-
-  // The configurable distance is applied via the `--ds-dialog-ty` custom property
-  return {
-    kind: 'dialog',
-    name: 'slide-up-and-fade',
-    getStyles: function getStyles() {
-      return [{
-        property: '--ds-dialog-ty',
-        value: "".concat(distance, "px")
-      }];
-    }
-  };
-}
-
-/**
- * Simple opacity transition for dialogs, no transform.
- *
- * Includes backdrop fade animation.
- *
- * @example
- * ```tsx
- * import { dialogFade } from '@atlaskit/top-layer/animations';
- *
- * <Dialog animate={dialogFade()} isOpen={isOpen} onClose={handleClose} label="...">
- *   ...
- * </Dialog>
- * ```
- */
-// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
-function dialogFade() {
-  return {
-    kind: 'dialog',
-    name: 'fade'
-  };
-}

package/dist/es2019/dialog/animations.js

@@ -1,80 +0,0 @@
-// `custom` variant currently exists for typing reasons for Drawer
-// not indicative of final API
-
-/**
- * Dialog motion animation.
- *
- * Includes backdrop fade animation.
- *
- * @example
- * ```tsx
- * import { dialogMotion } from '@atlaskit/top-layer/animations';
- *
- * <Dialog animate={dialogMotion()} isOpen={isOpen} onClose={handleClose} label="...">
- *   ...
- * </Dialog>
- * ```
- */
-// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
-export function dialogMotion() {
-  return {
-    kind: 'dialog',
-    name: 'motion'
-  };
-}
-
-/**
- * Slide up + opacity animation for dialogs.
- *
- * Entry slides up from below; exit slides up and out (asymmetric).
- * Includes backdrop fade animation.
- *
- * @param options.distance - Slide distance in pixels. Defaults to `12`.
- *
- * @example
- * ```tsx
- * import { dialogSlideUpAndFade } from '@atlaskit/top-layer/animations';
- *
- * const animation = dialogSlideUpAndFade();
- * <Dialog animate={animation} isOpen={isOpen} onClose={handleClose} label="...">
- *   ...
- * </Dialog>
- * ```
- */
-// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
-export function dialogSlideUpAndFade(options) {
-  var _options$distance;
-  const distance = (_options$distance = options === null || options === void 0 ? void 0 : options.distance) !== null && _options$distance !== void 0 ? _options$distance : 12;
-
-  // The configurable distance is applied via the `--ds-dialog-ty` custom property
-  return {
-    kind: 'dialog',
-    name: 'slide-up-and-fade',
-    getStyles: () => [{
-      property: '--ds-dialog-ty',
-      value: `${distance}px`
-    }]
-  };
-}
-
-/**
- * Simple opacity transition for dialogs, no transform.
- *
- * Includes backdrop fade animation.
- *
- * @example
- * ```tsx
- * import { dialogFade } from '@atlaskit/top-layer/animations';
- *
- * <Dialog animate={dialogFade()} isOpen={isOpen} onClose={handleClose} label="...">
- *   ...
- * </Dialog>
- * ```
- */
-// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
-export function dialogFade() {
-  return {
-    kind: 'dialog',
-    name: 'fade'
-  };
-}