@transferwise/components 0.0.0-experimental-a6aaad9 → 0.0.0-experimental-a39eaa6

package/build/styles/Prompt/CriticalBanner/CriticalBanner.css

@@ -155,25 +155,6 @@
     mask: var(--critical-banner-overhang-mask);
   }
 }
-.wds-critical-banner__entry-mask {
-  display: grid;
-  grid-template-rows: 0fr;
-  overflow: hidden;
-  animation: wds-critical-banner-reveal-height 400ms cubic-bezier(0.3, 0, 0.1, 1) both;
-}
-.wds-critical-banner__entry-track {
-  min-height: 0;
-}
-@keyframes wds-critical-banner-reveal-height {
-  from {
-    grid-template-rows: 0fr;
-    overflow: hidden;
-  }
-  to {
-    grid-template-rows: 1fr;
-    overflow: visible;
-  }
-}
 @media (prefers-reduced-motion: reduce) {
   .wds-critical-banner__description,
   .wds-critical-banner__title,
@@ -181,9 +162,4 @@
   .wds-critical-banner__toggle {
     transition: none !important;
   }
-  .wds-critical-banner__entry-mask {
-    animation: none;
-    grid-template-rows: 1fr;
-    overflow: visible;
-  }
 }

package/build/styles/main.css

@@ -29013,7 +29013,13 @@ button.np-option {
   justify-content: center;
   width: 100%;
   box-sizing: border-box;
-  min-height: 96px;
+  min-height: 80px;
+}
+
+@media (min-width: 320.02px) {
+  .np-flow-navigation {
+    min-height: 128px;
+  }
 }
 
 .np-flow-navigation--border-bottom {
@@ -29024,7 +29030,7 @@ button.np-option {
 .np-flow-navigation__content {
   width: 100%;
   min-width: 320px;
-  max-width: calc(1160px - 36px);
+  max-width: none;
 }
 
 .np-flow-navigation__stepper {
@@ -29101,20 +29107,6 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   visibility: hidden;
 }
 
-.np-flow-navigation--composable {
-  min-height: 80px;
-}
-
-@media (min-width: 320.02px) {
-  .np-flow-navigation--composable {
-    min-height: 128px;
-  }
-}
-
-.np-flow-navigation--composable .np-flow-navigation__content {
-  max-width: none;
-}
-
 .np-theme-personal--forest-green .np-flow-navigation .np-flow-header__left path,
 .np-theme-personal--bright-green .np-flow-navigation .np-flow-header__left path,
 .np-theme-personal--dark .np-flow-navigation .np-flow-header__left path {
@@ -31650,24 +31642,6 @@ html:not([dir="rtl"]) .np-navigation-option {
           text-decoration: var(--nudge-link-text-decoration);
 }
 
-.np-overlay-header .np-overlay-header__content {
-  min-height: 97px;
-  width: 100%;
-  min-width: 320px;
-  max-width: calc(1160px - 36px);
-}
-
-.np-theme-personal .np-overlay-header {
-  border-bottom: 1px solid rgba(0,0,0,0.10196);
-  border-bottom: 1px solid var(--color-border-neutral);
-}
-
-.np-theme-personal--forest-green .np-overlay-header .np-flow-header__left path,
-.np-theme-personal--bright-green .np-overlay-header .np-flow-header__left path,
-.np-theme-personal--dark .np-overlay-header .np-flow-header__left path {
-  fill: var(--color-interactive-primary);
-}
-
 .tw-telephone {
   display: flex;
 }
@@ -32416,28 +32390,6 @@ html:not([dir="rtl"]) .np-navigation-option {
   }
 }
 
-.wds-critical-banner__entry-mask {
-  display: grid;
-  grid-template-rows: 0fr;
-  overflow: hidden;
-  animation: wds-critical-banner-reveal-height 400ms cubic-bezier(0.3, 0, 0.1, 1) both;
-}
-
-.wds-critical-banner__entry-track {
-  min-height: 0;
-}
-
-@keyframes wds-critical-banner-reveal-height {
-  from {
-    grid-template-rows: 0fr;
-    overflow: hidden;
-  }
-  to {
-    grid-template-rows: 1fr;
-    overflow: visible;
-  }
-}
-
 @media (prefers-reduced-motion: reduce) {
   .wds-critical-banner__description,
   .wds-critical-banner__title,
@@ -32445,11 +32397,6 @@ html:not([dir="rtl"]) .np-navigation-option {
   .wds-critical-banner__toggle {
     transition: none !important;
   }
-  .wds-critical-banner__entry-mask {
-    animation: none;
-    grid-template-rows: 1fr;
-    overflow: visible;
-  }
 }
 
 .wds-expander-toggle {

package/build/types/FlowNavigation/FlowNavigation.d.ts

@@ -8,24 +8,17 @@ export interface FlowNavigationProps {
     /** @default false */
     done?: boolean;
     /** Called when the close button is clicked. If not provided the close button won't show */
-    onClose?: () => void;
+    onClose?: (() => void) | React.MouseEventHandler<HTMLButtonElement>;
     /** Called when the back button is clicked. If not provided the back button won't show. The back button only shows on small screens */
     onGoBack?: () => void;
     /** Steps to be displayed in stepper. If not provided, the stepper won't show. */
     steps?: readonly Step[];
-    /**
-     * When true, renders in composable mode using a fluid Container.
-     * This allows the FlowNavigation to be used within custom layout containers.
-     * @default false
-     */
-    composable?: boolean;
     /**
      * Controls whether the bottom border is displayed.
-     * Only applies to the composable variant. Non-composable variant always uses the done state.
      * @default true
      */
     showBottomBorder?: boolean;
 }
-declare const FlowNavigation: ({ activeStep, avatar, logo, done, onClose, onGoBack, steps, composable, showBottomBorder, }: FlowNavigationProps) => import("react").JSX.Element;
+declare const FlowNavigation: ({ activeStep, avatar, logo, done, onClose, onGoBack, steps, showBottomBorder, }: FlowNavigationProps) => import("react").JSX.Element;
 export default FlowNavigation;
 //# sourceMappingURL=FlowNavigation.d.ts.map

package/build/types/FlowNavigation/FlowNavigation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FlowNavigation.d.ts","sourceRoot":"","sources":["../../../src/FlowNavigation/FlowNavigation.tsx"],"names":[],"mappings":"AAQA,OAAgB,EAAE,KAAK,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAWxD,MAAM,WAAW,mBAAmB;IAClC,iBAAiB;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,wBAAwB;IACxB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,qBAAqB;IACrB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,2FAA2F;IAC3F,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,sIAAsI;IACtI,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,iFAAiF;IACjF,KAAK,CAAC,EAAE,SAAS,IAAI,EAAE,CAAC;IACxB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,QAAA,MAAM,cAAc,GAAI,6FAUrB,mBAAmB,gCAsFrB,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"FlowNavigation.d.ts","sourceRoot":"","sources":["../../../src/FlowNavigation/FlowNavigation.tsx"],"names":[],"mappings":"AAQA,OAAgB,EAAE,KAAK,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAWxD,MAAM,WAAW,mBAAmB;IAClC,iBAAiB;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,wBAAwB;IACxB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,qBAAqB;IACrB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,2FAA2F;IAC3F,OAAO,CAAC,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACpE,sIAAsI;IACtI,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,iFAAiF;IACjF,KAAK,CAAC,EAAE,SAAS,IAAI,EAAE,CAAC;IACxB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,QAAA,MAAM,cAAc,GAAI,iFASrB,mBAAmB,gCAyErB,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/build/types/Prompt/CriticalBanner/CriticalBanner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CriticalBanner.d.ts","sourceRoot":"","sources":["../../../../src/Prompt/CriticalBanner/CriticalBanner.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,SAAS,EAAmB,MAAM,OAAO,CAAC;AAOhE,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAmB,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAE3E,OAAO,EAAqB,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAKxE,MAAM,MAAM,mBAAmB,GAAG;IAChC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,WAAW,EAAE,SAAS,CAAC;IACvB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,MAAM,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,SAAS,GAAG,MAAM,GAAG,QAAQ,CAAC,GAAG;QAC1D,KAAK,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC;KAChC,CAAC;IACF,eAAe,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,SAAS,GAAG,MAAM,GAAG,QAAQ,CAAC,GAAG;QACnE,KAAK,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC;KAChC,CAAC;IACF,SAAS,CAAC,EAAE,OAAO,CAAC,oBAAoB,CAAC,WAAW,CAAC,EAAE,aAAa,CAAC,CAAC;IACtE;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB,GAAG,IAAI,CAAC,oBAAoB,EAAE,IAAI,GAAG,WAAW,GAAG,aAAa,CAAC,CAAC;AAEnE;;;;;GAKG;AACH,eAAO,MAAM,cAAc,GAAI,4IAY5B,mBAAmB,gCAgIrB,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"CriticalBanner.d.ts","sourceRoot":"","sources":["../../../../src/Prompt/CriticalBanner/CriticalBanner.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,SAAS,EAAmB,MAAM,OAAO,CAAC;AAOhE,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAmB,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAE3E,OAAO,EAAqB,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAKxE,MAAM,MAAM,mBAAmB,GAAG;IAChC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,WAAW,EAAE,SAAS,CAAC;IACvB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,MAAM,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,SAAS,GAAG,MAAM,GAAG,QAAQ,CAAC,GAAG;QAC1D,KAAK,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC;KAChC,CAAC;IACF,eAAe,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,SAAS,GAAG,MAAM,GAAG,QAAQ,CAAC,GAAG;QACnE,KAAK,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC;KAChC,CAAC;IACF,SAAS,CAAC,EAAE,OAAO,CAAC,oBAAoB,CAAC,WAAW,CAAC,EAAE,aAAa,CAAC,CAAC;IACtE;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB,GAAG,IAAI,CAAC,oBAAoB,EAAE,IAAI,GAAG,WAAW,GAAG,aAAa,CAAC,CAAC;AAEnE;;;;;GAKG;AACH,eAAO,MAAM,cAAc,GAAI,4IAY5B,mBAAmB,gCA4HrB,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/build/types/_deprecated/OverlayHeader/OverlayHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OverlayHeader.d.ts","sourceRoot":"","sources":["../../../../src/_deprecated/OverlayHeader/OverlayHeader.tsx"],"names":[],"mappings":"AAOA;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC,gBAAgB;IAChB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,gDAAgD;IAChD,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;CACtD;AAID;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,IAAkB,EAAE,EAAE,kBAAkB,+BAiBhG"}
+{"version":3,"file":"OverlayHeader.d.ts","sourceRoot":"","sources":["../../../../src/_deprecated/OverlayHeader/OverlayHeader.tsx"],"names":[],"mappings":"AAGA;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC,gBAAgB;IAChB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,gDAAgD;IAChD,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;CACtD;AAID;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,IAAkB,EAAE,EAAE,kBAAkB,+BAEhG"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-a6aaad9",
+  "version": "0.0.0-experimental-a39eaa6",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {

package/src/FlowNavigation/FlowNavigation.css

@@ -4,7 +4,12 @@
   justify-content: center;
   width: 100%;
   box-sizing: border-box;
-  min-height: 96px;
+  min-height: 80px;
+}
+@media (min-width: 320.02px) {
+  .np-flow-navigation {
+    min-height: 128px;
+  }
 }
 .np-flow-navigation--border-bottom {
   border-bottom: 1px solid rgba(0,0,0,0.10196);
@@ -13,7 +18,7 @@
 .np-flow-navigation__content {
   width: 100%;
   min-width: 320px;
-  max-width: calc(1160px - 36px);
+  max-width: none;
 }
 .np-flow-navigation__stepper {
   padding-bottom: 0 !important;
@@ -72,17 +77,6 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
 .np-flow-navigation--hidden {
   visibility: hidden;
 }
-.np-flow-navigation--composable {
-  min-height: 80px;
-}
-@media (min-width: 320.02px) {
-  .np-flow-navigation--composable {
-    min-height: 128px;
-  }
-}
-.np-flow-navigation--composable .np-flow-navigation__content {
-  max-width: none;
-}
 .np-theme-personal--forest-green .np-flow-navigation .np-flow-header__left path,
 .np-theme-personal--bright-green .np-flow-navigation .np-flow-header__left path,
 .np-theme-personal--dark .np-flow-navigation .np-flow-header__left path {

package/src/FlowNavigation/FlowNavigation.less

@@ -9,7 +9,11 @@
   box-sizing: border-box;
 
   // This is the natural height of FlowNavigation when the Avatar is displayed.
-  min-height: 96px;
+  min-height: 80px;
+
+  @media (--screen-xs) {
+    min-height: 128px;
+  }
 
   &--border-bottom {
     border-bottom: 1px solid var(--color-border-neutral);
@@ -18,7 +22,7 @@
   &__content {
     width: 100%;
     min-width: 320px;
-    max-width: calc(@screen-lg-min - 36px);
+    max-width: none;
   }
 
   &__stepper {
@@ -69,19 +73,6 @@
     visibility: hidden;
   }
 
-  &--composable {
-    min-height: 80px;
-
-    @media (--screen-xs) {
-      min-height: 128px;
-    }
-
-    .np-flow-navigation__content {
-      // Remove max-width constraint for fluid layout
-      max-width: none;
-    }
-  }
-
   .np-theme-personal--forest-green &,
   .np-theme-personal--bright-green &,
   .np-theme-personal--dark & {

package/src/FlowNavigation/FlowNavigation.tsx

@@ -26,20 +26,13 @@ export interface FlowNavigationProps {
   /** @default false */
   done?: boolean;
   /** Called when the close button is clicked. If not provided the close button won't show */
-  onClose?: () => void;
+  onClose?: (() => void) | React.MouseEventHandler<HTMLButtonElement>;
   /** Called when the back button is clicked. If not provided the back button won't show. The back button only shows on small screens */
   onGoBack?: () => void;
   /** Steps to be displayed in stepper. If not provided, the stepper won't show. */
   steps?: readonly Step[];
-  /**
-   * When true, renders in composable mode using a fluid Container.
-   * This allows the FlowNavigation to be used within custom layout containers.
-   * @default false
-   */
-  composable?: boolean;
   /**
    * Controls whether the bottom border is displayed.
-   * Only applies to the composable variant. Non-composable variant always uses the done state.
    * @default true
    */
   showBottomBorder?: boolean;
@@ -53,7 +46,6 @@ const FlowNavigation = ({
   onClose,
   onGoBack,
   steps,
-  composable = false,
   showBottomBorder = true,
 }: FlowNavigationProps) => {
   const intl = useIntl();
@@ -69,7 +61,6 @@ const FlowNavigation = ({
     <FlowHeader
       className={clsx(
         'np-flow-navigation__content',
-        !composable && 'p-x-3',
         screenSm == null
           ? 'np-flow-navigation--hidden'
           : {
@@ -119,27 +110,15 @@ const FlowNavigation = ({
     />
   );
 
-  if (composable) {
-    return (
-      <Container
-        size="fluid"
-        className={clsx('np-flow-navigation np-flow-navigation--composable', {
-          'np-flow-navigation--border-bottom': showBottomBorder,
-        })}
-      >
-        {flowHeaderContent}
-      </Container>
-    );
-  }
-
   return (
-    <div
-      className={clsx('np-flow-navigation p-y-3', {
-        'np-flow-navigation--border-bottom': !done,
+    <Container
+      size="fluid"
+      className={clsx('np-flow-navigation', {
+        'np-flow-navigation--border-bottom': showBottomBorder,
       })}
     >
       {flowHeaderContent}
-    </div>
+    </Container>
   );
 };
 

package/src/FlowNavigation/_stories/FlowNavigation.story.tsx

@@ -384,89 +384,6 @@ export const WithOverlayHeaderComparison: Story = {
   },
 };
 
-export const ComposableVariant: Story = {
-  args: {
-    profileType: ProfileType.PERSONAL,
-    showCloseButton: true,
-    showMobileBackButton: true,
-    done: false,
-    avatarURL: '../tapestry-01.png',
-  },
-  parameters: {
-    padding: '0',
-    chromatic: {
-      viewports,
-    },
-  },
-  render: (args) => {
-    const [activeStep, setActiveStep] = useState(2);
-    const steps = [
-      {
-        label: 'Recipient',
-        onClick: () => setActiveStep(0),
-      },
-      {
-        label: 'Amount',
-        hoverLabel: (
-          <>
-            You send 100 GBP <br />
-            You get 99.39 GBP{' '}
-          </>
-        ),
-        ...(activeStep > 1 && { onClick: () => setActiveStep(1) }),
-      },
-      {
-        label: 'Review',
-        ...(activeStep > 2 && { onClick: () => setActiveStep(2) }),
-      },
-      {
-        label: 'Pay',
-        ...(activeStep > 3 && { onClick: () => setActiveStep(3) }),
-      },
-    ];
-    return (
-      <>
-        <FlowNavigation
-          composable
-          avatar={<AvatarView profileType={args.profileType} />}
-          logo={<Logo />}
-          activeStep={activeStep}
-          steps={steps}
-          onClose={args.showCloseButton ? () => alert('close') : undefined}
-          onGoBack={
-            args.showMobileBackButton
-              ? () => setActiveStep(activeStep > 0 ? activeStep - 1 : 0)
-              : undefined
-          }
-        />
-        <Container size="narrow">
-          <Body className="m-a-3">
-            <Display type={Typography.DISPLAY_SMALL}>{steps[activeStep].label} Step</Display>
-            <br />
-            {lorem10}
-          </Body>
-        </Container>
-
-        <Sticky>
-          <Container
-            size="narrow"
-            className="d-flex justify-content-center align-items-center p-y-3"
-          >
-            <Button
-              v2
-              disabled={activeStep === 3}
-              block
-              onClick={() => setActiveStep(activeStep + 1)}
-            >
-              Continue
-            </Button>
-          </Container>
-        </Sticky>
-      </>
-    );
-  },
-};
-
 export const WithoutStepper: Story = {
   args: {
     profileType: ProfileType.PERSONAL,
@@ -575,7 +492,6 @@ export const BorderControl: Story = {
 
         {/* Composable: showBottomBorder=true, done=false - SHOWS BORDER */}
         <FlowNavigation
-          composable
           avatar={<AvatarView profileType={args.profileType} />}
           logo={<Logo />}
           activeStep={activeStep}
@@ -591,7 +507,6 @@ export const BorderControl: Story = {
 
         {/* Composable: showBottomBorder=true, done=true - SHOWS BORDER */}
         <FlowNavigation
-          composable
           avatar={<AvatarView profileType={args.profileType} />}
           logo={<Logo />}
           activeStep={activeStep}
@@ -607,7 +522,6 @@ export const BorderControl: Story = {
 
         {/* Composable: showBottomBorder=false, done=false - HIDES BORDER */}
         <FlowNavigation
-          composable
           avatar={<AvatarView profileType={args.profileType} />}
           logo={<Logo />}
           activeStep={activeStep}

package/src/Prompt/CriticalBanner/CriticalBanner.css

@@ -155,25 +155,6 @@
     mask: var(--critical-banner-overhang-mask);
   }
 }
-.wds-critical-banner__entry-mask {
-  display: grid;
-  grid-template-rows: 0fr;
-  overflow: hidden;
-  animation: wds-critical-banner-reveal-height 400ms cubic-bezier(0.3, 0, 0.1, 1) both;
-}
-.wds-critical-banner__entry-track {
-  min-height: 0;
-}
-@keyframes wds-critical-banner-reveal-height {
-  from {
-    grid-template-rows: 0fr;
-    overflow: hidden;
-  }
-  to {
-    grid-template-rows: 1fr;
-    overflow: visible;
-  }
-}
 @media (prefers-reduced-motion: reduce) {
   .wds-critical-banner__description,
   .wds-critical-banner__title,
@@ -181,9 +162,4 @@
   .wds-critical-banner__toggle {
     transition: none !important;
   }
-  .wds-critical-banner__entry-mask {
-    animation: none;
-    grid-template-rows: 1fr;
-    overflow: visible;
-  }
 }

package/src/Prompt/CriticalBanner/CriticalBanner.less

@@ -193,32 +193,6 @@
   }
 }
 
-// Entry animation: immediately reveal the already-positioned banner over 400ms.
-// The mask clips only during the reveal, then becomes visible so actions are not
-// clipped after the animation.
-.wds-critical-banner__entry-mask {
-  display: grid;
-  grid-template-rows: 0fr;
-  overflow: hidden;
-  animation: wds-critical-banner-reveal-height 400ms cubic-bezier(0.3, 0, 0.1, 1) both;
-}
-
-.wds-critical-banner__entry-track {
-  min-height: 0;
-}
-
-@keyframes wds-critical-banner-reveal-height {
-  from {
-    grid-template-rows: 0fr;
-    overflow: hidden;
-  }
-
-  to {
-    grid-template-rows: 1fr;
-    overflow: visible;
-  }
-}
-
 // Reduced motion support
 @media (prefers-reduced-motion: reduce) {
   .wds-critical-banner__description,
@@ -227,10 +201,4 @@
   .wds-critical-banner__toggle {
     transition: none !important;
   }
-
-  .wds-critical-banner__entry-mask {
-    animation: none;
-    grid-template-rows: 1fr;
-    overflow: visible;
-  }
 }

package/src/Prompt/CriticalBanner/CriticalBanner.test.tsx

@@ -15,7 +15,7 @@ describe('CriticalBanner', () => {
     resetLiveRegionAnnouncementQueue();
   });
 
-  it('applies mobile overhang classes by default', () => {
+  it('renders mobile overhang markup without entry animation markup', () => {
     const { container } = render(
       <CriticalBanner {...defaultProps} data-testid="critical-banner" />,
     );
@@ -23,15 +23,7 @@ describe('CriticalBanner', () => {
     expect(screen.getByTestId('critical-banner')).toBeInTheDocument();
     expect(container.querySelector('.wds-critical-banner-overhang')).toBeInTheDocument();
     expect(container.querySelector('.wds-critical-banner-overhang-query')).toBeInTheDocument();
-  });
-
-  it('wraps the banner in the css entry animation structure', () => {
-    const { container } = render(
-      <CriticalBanner {...defaultProps} data-testid="critical-banner" />,
-    );
-
-    expect(screen.getByTestId('critical-banner')).toBeInTheDocument();
-    expect(container.querySelector('.wds-critical-banner__entry-mask')).toBeInTheDocument();
-    expect(container.querySelector('.wds-critical-banner__entry-track')).toBeInTheDocument();
+    expect(container.querySelector('.wds-critical-banner__entry-mask')).not.toBeInTheDocument();
+    expect(container.querySelector('.wds-critical-banner__entry-track')).not.toBeInTheDocument();
   });
 });

package/src/Prompt/CriticalBanner/CriticalBanner.tsx

@@ -179,11 +179,7 @@ export const CriticalBanner = ({
         actionSecondaryLabel: actionSecondary?.label,
       })}
     >
-      <div className="wds-critical-banner-overhang-query">
-        <div className="wds-critical-banner__entry-mask">
-          <div className="wds-critical-banner__entry-track">{bannerSurface}</div>
-        </div>
-      </div>
+      <div className="wds-critical-banner-overhang-query">{bannerSurface}</div>
     </LiveRegion>
   );
 };

package/src/Prompt/CriticalBanner/_stories/CriticalBanner.accessibility.docs.mdx

@@ -66,10 +66,7 @@ Screen readers announce the banner content whenever:
 
 ## Reduced Motion
 
-`CriticalBanner` respects the user's reduced motion preference. When reduced motion is on, the component does not show:
-
-- the entry animation that reveals the banner from above when it first appears
-- the collapse and expand animation used when the user toggles the banner content
+`CriticalBanner` respects the user's reduced motion preference. When reduced motion is on, the component does not show the collapse and expand animation used when the user toggles the banner content.
 
 The same content is still rendered and announced. Reduced motion only removes the visual movement.
 

package/src/Prompt/CriticalBanner/_stories/CriticalBanner.story.tsx

@@ -137,21 +137,6 @@ const hiddenArgTypes = {
   'data-testid': { table: { disable: true } },
 } as const;
 
-const AnimatedEntryPreview = (args: CriticalBannerProps) => {
-  const [bannerInstance, setBannerInstance] = useState(0);
-
-  return (
-    <>
-      <CriticalBanner key={bannerInstance} {...args} />
-      <div className="p-t-3">
-        <Button block v2 onClick={() => setBannerInstance((current) => current + 1)}>
-          Replay
-        </Button>
-      </div>
-    </>
-  );
-};
-
 /** Renders children inside an iframe that inherits the parent page's stylesheets. */
 function IframeContainer({ width, children }: { width: number; children: ReactNode }) {
   const iframeRef = useRef<HTMLIFrameElement>(null);
@@ -600,23 +585,6 @@ export const MobileOverhang: Story = {
   },
 };
 
-/** The banner reveals from above immediately when it enters the page. */
-export const AnimatedEntry: Story = {
-  args: {
-    title: 'Your account is restricted.',
-    description: 'Review your personal details to get your account active again.',
-    action: { label: 'Review details', onClick: fn() },
-  },
-  argTypes: hiddenArgTypes,
-  render: (args) => <AnimatedEntryPreview {...args} />,
-  parameters: {
-    layout: 'fullscreen',
-    docs: {
-      canvas: { sourceState: 'hidden' },
-    },
-  },
-};
-
 /**
  * The text container is capped at 480px for optimal readability, even though
  * the banner itself stretches to the full available width.