@transferwise/components 0.0.0-experimental-70919ee → 0.0.0-experimental-58e9ef8

package/build/slidingPanel/SlidingPanel.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"SlidingPanel.mjs","sources":["../../src/slidingPanel/SlidingPanel.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef, useImperativeHandle, useRef } from 'react';\nimport { CSSTransition } from 'react-transition-group';\n\nimport { Position } from '../common';\n\nexport const EXIT_ANIMATION = 350;\n\nexport interface SlidingPanelProps\n  extends Pick<React.ComponentPropsWithRef<'div'>, 'ref' | 'className' | 'children'> {\n  position?: `${Position.TOP | Position.RIGHT | Position.BOTTOM | Position.LEFT}`;\n  open: boolean;\n  showSlidingPanelBorder?: boolean;\n  slidingPanelPositionFixed?: boolean;\n  testId?: string;\n}\n\nconst SlidingPanel = forwardRef(\n  (\n    {\n      position = 'left',\n      open,\n      showSlidingPanelBorder,\n      slidingPanelPositionFixed,\n      className,\n      children,\n      testId,\n      ...rest\n    }: Omit<SlidingPanelProps, 'ref'>,\n    reference: React.ForwardedRef<HTMLDivElement | null>,\n  ) => {\n    const localReference = useRef<HTMLDivElement>(null as never);\n    useImperativeHandle(reference, () => localReference.current, []);\n\n    return (\n      <CSSTransition\n        {...rest}\n        key={`sliding-panel--open-${position}`}\n        nodeRef={localReference}\n        in={open}\n        // Wait for animation to finish before unmount.\n        timeout={{ enter: 0, exit: EXIT_ANIMATION }}\n        classNames=\"sliding-panel\"\n        appear\n        unmountOnExit\n      >\n        <div\n          ref={localReference}\n          data-testid={testId}\n          className={clsx(\n            'sliding-panel',\n            `sliding-panel--open-${position}`,\n            showSlidingPanelBorder && `sliding-panel--border-${position}`,\n            slidingPanelPositionFixed && 'sliding-panel--fixed',\n            className,\n          )}\n        >\n          {children}\n        </div>\n      </CSSTransition>\n    );\n  },\n);\n\nexport default SlidingPanel;\n"],"names":["EXIT_ANIMATION","SlidingPanel","forwardRef","position","open","showSlidingPanelBorder","slidingPanelPositionFixed","className","children","testId","rest","reference","localReference","useRef","useImperativeHandle","current","_createElement","CSSTransition","key","nodeRef","in","timeout","enter","exit","classNames","appear","unmountOnExit","_jsx","ref","clsx"],"mappings":";;;;;AAMO,MAAMA,cAAc,GAAG;AAW9B,MAAMC,YAAY,gBAAGC,UAAU,CAC7B,CACE;AACEC,EAAAA,QAAQ,GAAG,MAAM;EACjBC,IAAI;EACJC,sBAAsB;EACtBC,yBAAyB;EACzBC,SAAS;EACTC,QAAQ;EACRC,MAAM;EACN,GAAGC;AAAI,CACwB,EACjCC,SAAoD,KAClD;AACF,EAAA,MAAMC,cAAc,GAAGC,MAAM,CAAiB,IAAa,CAAC;EAC5DC,mBAAmB,CAACH,SAAS,EAAE,MAAMC,cAAc,CAACG,OAAO,EAAE,EAAE,CAAC;EAEhE,oBACEC,aAAA,CAACC,aAAa,EAAA;AAAA,IAAA,GACRP,IAAI;IACRQ,GAAG,EAAE,CAAA,oBAAA,EAAuBf,QAAQ,CAAA,CAAG;AACvCgB,IAAAA,OAAO,EAAEP,cAAe;AACxBQ,IAAAA,EAAE,EAAEhB;AACJ;AAAA;AACAiB,IAAAA,OAAO,EAAE;AAAEC,MAAAA,KAAK,EAAE,CAAC;AAAEC,MAAAA,IAAI,EAAEvB;KAAiB;AAC5CwB,IAAAA,UAAU,EAAC,eAAe;IAC1BC,MAAM,EAAA,IAAA;IACNC,aAAa,EAAA;AAAA,GAAA,eAEbC,GAAA,CAAA,KAAA,EAAA;AACEC,IAAAA,GAAG,EAAEhB,cAAe;AACpB,IAAA,aAAA,EAAaH,MAAO;IACpBF,SAAS,EAAEsB,IAAI,CACb,eAAe,EACf,CAAA,oBAAA,EAAuB1B,QAAQ,EAAE,EACjCE,sBAAsB,IAAI,CAAA,sBAAA,EAAyBF,QAAQ,EAAE,EAC7DG,yBAAyB,IAAI,sBAAsB,EACnDC,SAAS,CACT;AAAAC,IAAAA,QAAA,EAEDA;AAAQ,GACN,CACQ,CAAC;AAEpB,CAAC;;;;"}
+{"version":3,"file":"SlidingPanel.mjs","sources":["../../src/slidingPanel/SlidingPanel.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef, useImperativeHandle, useRef } from 'react';\nimport { CSSTransition } from 'react-transition-group';\n\nimport { Position } from '../common';\nimport { PreventScroll } from '../common/preventScroll/PreventScroll';\n\nexport const EXIT_ANIMATION = 350;\n\nexport interface SlidingPanelProps\n  extends Pick<React.ComponentPropsWithRef<'div'>, 'ref' | 'className' | 'children'> {\n  position?: `${Position.TOP | Position.RIGHT | Position.BOTTOM | Position.LEFT}`;\n  open: boolean;\n  showSlidingPanelBorder?: boolean;\n  slidingPanelPositionFixed?: boolean;\n  testId?: string;\n}\n\nconst SlidingPanel = forwardRef(\n  (\n    {\n      position = 'left',\n      open,\n      showSlidingPanelBorder,\n      slidingPanelPositionFixed,\n      className,\n      children,\n      testId,\n      ...rest\n    }: Omit<SlidingPanelProps, 'ref'>,\n    reference: React.ForwardedRef<HTMLDivElement | null>,\n  ) => {\n    const localReference = useRef<HTMLDivElement>(null as never);\n    useImperativeHandle(reference, () => localReference.current, []);\n\n    return (\n      <>\n        {open ? <PreventScroll /> : null}\n\n        <CSSTransition\n          {...rest}\n          key={`sliding-panel--open-${position}`}\n          nodeRef={localReference}\n          in={open}\n          // Wait for animation to finish before unmount.\n          timeout={{ enter: 0, exit: EXIT_ANIMATION }}\n          classNames=\"sliding-panel\"\n          appear\n          unmountOnExit\n        >\n          <div\n            ref={localReference}\n            data-testid={testId}\n            className={clsx(\n              'sliding-panel',\n              `sliding-panel--open-${position}`,\n              showSlidingPanelBorder && `sliding-panel--border-${position}`,\n              slidingPanelPositionFixed && 'sliding-panel--fixed',\n              className,\n            )}\n          >\n            {children}\n          </div>\n        </CSSTransition>\n      </>\n    );\n  },\n);\n\nexport default SlidingPanel;\n"],"names":["EXIT_ANIMATION","SlidingPanel","forwardRef","position","open","showSlidingPanelBorder","slidingPanelPositionFixed","className","children","testId","rest","reference","localReference","useRef","useImperativeHandle","current","_jsxs","_Fragment","_jsx","PreventScroll","_createElement","CSSTransition","key","nodeRef","in","timeout","enter","exit","classNames","appear","unmountOnExit","ref","clsx"],"mappings":";;;;;;AAOO,MAAMA,cAAc,GAAG;AAW9B,MAAMC,YAAY,gBAAGC,UAAU,CAC7B,CACE;AACEC,EAAAA,QAAQ,GAAG,MAAM;EACjBC,IAAI;EACJC,sBAAsB;EACtBC,yBAAyB;EACzBC,SAAS;EACTC,QAAQ;EACRC,MAAM;EACN,GAAGC;AAAI,CACwB,EACjCC,SAAoD,KAClD;AACF,EAAA,MAAMC,cAAc,GAAGC,MAAM,CAAiB,IAAa,CAAC;EAC5DC,mBAAmB,CAACH,SAAS,EAAE,MAAMC,cAAc,CAACG,OAAO,EAAE,EAAE,CAAC;EAEhE,oBACEC,IAAA,CAAAC,QAAA,EAAA;AAAAT,IAAAA,QAAA,EAAA,CACGJ,IAAI,gBAAGc,GAAA,CAACC,aAAa,EAAA,EAAA,CAAG,GAAG,IAAI,eAEhCC,aAAA,CAACC,aAAa,EAAA;AAAA,MAAA,GACRX,IAAI;MACRY,GAAG,EAAE,CAAA,oBAAA,EAAuBnB,QAAQ,CAAA,CAAG;AACvCoB,MAAAA,OAAO,EAAEX,cAAe;AACxBY,MAAAA,EAAE,EAAEpB;AACJ;AAAA;AACAqB,MAAAA,OAAO,EAAE;AAAEC,QAAAA,KAAK,EAAE,CAAC;AAAEC,QAAAA,IAAI,EAAE3B;OAAiB;AAC5C4B,MAAAA,UAAU,EAAC,eAAe;MAC1BC,MAAM,EAAA,IAAA;MACNC,aAAa,EAAA;AAAA,KAAA,eAEbZ,GAAA,CAAA,KAAA,EAAA;AACEa,MAAAA,GAAG,EAAEnB,cAAe;AACpB,MAAA,aAAA,EAAaH,MAAO;MACpBF,SAAS,EAAEyB,IAAI,CACb,eAAe,EACf,CAAA,oBAAA,EAAuB7B,QAAQ,EAAE,EACjCE,sBAAsB,IAAI,CAAA,sBAAA,EAAyBF,QAAQ,EAAE,EAC7DG,yBAAyB,IAAI,sBAAsB,EACnDC,SAAS,CACT;AAAAC,MAAAA,QAAA,EAEDA;AAAQ,KACN,CACQ,CACjB;AAAA,GAAA,CAAG;AAEP,CAAC;;;;"}

package/build/styles/dimmer/Dimmer.css

@@ -1,5 +1,6 @@
 .no-scroll {
   overflow: hidden;
+  scroll-behavior: unset;
 }
 .dimmer {
   position: fixed;

package/build/styles/inputs/SelectInput.css

@@ -11,35 +11,38 @@
   transition-property: opacity;
   transition-timing-function: ease-out;
   transition-duration: 300ms;
+  height: 100vh;
+  min-height: -webkit-fill-available;
 }
 .np-bottom-sheet-v2-backdrop--closed {
   opacity: 0;
 }
 .np-bottom-sheet-v2 {
   position: fixed;
-  inset: 0px;
+  inset: 0;
   bottom: env(keyboard-inset-height, 0px);
-  margin-left: 8px;
-  margin-left: var(--size-8);
-  margin-right: 8px;
-  margin-right: var(--size-8);
-  margin-top: 64px;
-  margin-top: var(--size-64);
+  padding-top: 64px;
+  padding-top: var(--size-64);
+  padding-bottom: min(env(safe-area-inset-bottom, 16px));
+  padding-bottom: min(env(safe-area-inset-bottom, var(--size-16)));
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
+  height: 100%;
+  min-height: -webkit-fill-available;
 }
 .np-bottom-sheet-v2-content {
   display: flex;
   flex-direction: column;
   overflow: auto;
   border-top-left-radius: 32px;
-  /* TODO: Tokenize */
+  border-top-left-radius: var(--size-32);
   border-top-right-radius: 32px;
-  /* TODO: Tokenize */
+  border-top-right-radius: var(--size-32);
   background-color: #ffffff;
   background-color: var(--color-background-elevated);
   box-shadow: 0 0 40px rgba(69, 71, 69, 0.2);
+  will-change: transform;
 }
 .np-bottom-sheet-v2-content:focus {
   outline: none;

package/build/styles/main.css

@@ -2574,6 +2574,7 @@ button.np-option {
 }
 .no-scroll {
   overflow: hidden;
+  scroll-behavior: unset;
 }
 .dimmer {
   position: fixed;
@@ -3839,35 +3840,38 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   transition-property: opacity;
   transition-timing-function: ease-out;
   transition-duration: 300ms;
+  height: 100vh;
+  min-height: -webkit-fill-available;
 }
 .np-bottom-sheet-v2-backdrop--closed {
   opacity: 0;
 }
 .np-bottom-sheet-v2 {
   position: fixed;
-  inset: 0px;
+  inset: 0;
   bottom: env(keyboard-inset-height, 0px);
-  margin-left: 8px;
-  margin-left: var(--size-8);
-  margin-right: 8px;
-  margin-right: var(--size-8);
-  margin-top: 64px;
-  margin-top: var(--size-64);
+  padding-top: 64px;
+  padding-top: var(--size-64);
+  padding-bottom: min(env(safe-area-inset-bottom, 16px));
+  padding-bottom: min(env(safe-area-inset-bottom, var(--size-16)));
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
+  height: 100%;
+  min-height: -webkit-fill-available;
 }
 .np-bottom-sheet-v2-content {
   display: flex;
   flex-direction: column;
   overflow: auto;
   border-top-left-radius: 32px;
-  /* TODO: Tokenize */
+  border-top-left-radius: var(--size-32);
   border-top-right-radius: 32px;
-  /* TODO: Tokenize */
+  border-top-right-radius: var(--size-32);
   background-color: #ffffff;
   background-color: var(--color-background-elevated);
   box-shadow: 0 0 40px rgba(69, 71, 69, 0.2);
+  will-change: transform;
 }
 .np-bottom-sheet-v2-content:focus {
   outline: none;

package/build/types/common/preventScroll/PreventScroll.d.ts

@@ -1,2 +1,2 @@
-export declare function PreventScroll(): null;
+export declare function PreventScroll(): import("react").JSX.Element;
 //# sourceMappingURL=PreventScroll.d.ts.map

package/build/types/common/preventScroll/PreventScroll.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PreventScroll.d.ts","sourceRoot":"","sources":["../../../../src/common/preventScroll/PreventScroll.tsx"],"names":[],"mappings":"AAEA,wBAAgB,aAAa,SAG5B"}
+{"version":3,"file":"PreventScroll.d.ts","sourceRoot":"","sources":["../../../../src/common/preventScroll/PreventScroll.tsx"],"names":[],"mappings":"AAEA,wBAAgB,aAAa,gCAa5B"}

package/build/types/inputs/_BottomSheet.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"_BottomSheet.d.ts","sourceRoot":"","sources":["../../../src/inputs/_BottomSheet.tsx"],"names":[],"mappings":"AAmBA,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,OAAO,CAAC;IACd,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE;QACrB,GAAG,EAAE,KAAK,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;QAChC,mBAAmB,EAAE,CAAC,mBAAmB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,KAAK;YACvE,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;SACxB,CAAC;KACH,KAAK,KAAK,CAAC,SAAS,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC7D,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AAED,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,aAAa,EACb,KAAK,EACL,eAAe,EACf,OAAc,EACd,QAAQ,EACR,OAAO,EACP,UAAU,GACX,EAAE,gBAAgB,+BA4FlB"}
+{"version":3,"file":"_BottomSheet.d.ts","sourceRoot":"","sources":["../../../src/inputs/_BottomSheet.tsx"],"names":[],"mappings":"AAkBA,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,OAAO,CAAC;IACd,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE;QACrB,GAAG,EAAE,KAAK,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;QAChC,mBAAmB,EAAE,CAAC,mBAAmB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,KAAK;YACvE,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;SACxB,CAAC;KACH,KAAK,KAAK,CAAC,SAAS,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC7D,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AAeD,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,aAAa,EACb,KAAK,EACL,eAAe,EACf,OAAc,EACd,QAAQ,EACR,OAAO,EACP,UAAU,GACX,EAAE,gBAAgB,+BA8FlB"}

package/build/types/slidingPanel/SlidingPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SlidingPanel.d.ts","sourceRoot":"","sources":["../../../src/slidingPanel/SlidingPanel.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAErC,eAAO,MAAM,cAAc,MAAM,CAAC;AAElC,MAAM,WAAW,iBACf,SAAQ,IAAI,CAAC,KAAK,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE,KAAK,GAAG,WAAW,GAAG,UAAU,CAAC;IAClF,QAAQ,CAAC,EAAE,GAAG,QAAQ,CAAC,GAAG,GAAG,QAAQ,CAAC,KAAK,GAAG,QAAQ,CAAC,MAAM,GAAG,QAAQ,CAAC,IAAI,EAAE,CAAC;IAChF,IAAI,EAAE,OAAO,CAAC;IACd,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,QAAA,MAAM,YAAY,kIA6CjB,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"SlidingPanel.d.ts","sourceRoot":"","sources":["../../../src/slidingPanel/SlidingPanel.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAGrC,eAAO,MAAM,cAAc,MAAM,CAAC;AAElC,MAAM,WAAW,iBACf,SAAQ,IAAI,CAAC,KAAK,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE,KAAK,GAAG,WAAW,GAAG,UAAU,CAAC;IAClF,QAAQ,CAAC,EAAE,GAAG,QAAQ,CAAC,GAAG,GAAG,QAAQ,CAAC,KAAK,GAAG,QAAQ,CAAC,MAAM,GAAG,QAAQ,CAAC,IAAI,EAAE,CAAC;IAChF,IAAI,EAAE,OAAO,CAAC;IACd,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,QAAA,MAAM,YAAY,kIAiDjB,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-70919ee",
+  "version": "0.0.0-experimental-58e9ef8",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -38,12 +38,12 @@
     "!**/*.tsbuildinfo"
   ],
   "devDependencies": {
-    "@babel/core": "^7.29.0",
-    "@babel/plugin-transform-runtime": "^7.29.0",
-    "@babel/preset-env": "^7.29.0",
+    "@babel/core": "^7.28.5",
+    "@babel/plugin-transform-runtime": "^7.28.5",
+    "@babel/preset-env": "^7.28.5",
     "@babel/preset-react": "^7.28.5",
     "@babel/preset-typescript": "^7.28.5",
-    "@formatjs/cli": "^6.12.2",
+    "@formatjs/cli": "^6.8.4",
     "@rollup/plugin-babel": "^6.1.0",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^16.0.3",
@@ -63,15 +63,15 @@
     "@types/babel__core": "^7.20.5",
     "@types/commonmark": "^0.27.10",
     "@types/jest": "^30.0.0",
-    "@types/lodash": "4.17.23",
+    "@types/lodash": "4.17.21",
     "@types/lodash.clamp": "^4.0.9",
     "@types/lodash.debounce": "^4.0.9",
-    "@types/react": "^18.3.28",
+    "@types/react": "^18.3.23",
     "@types/react-dom": "^18.3.7",
     "@types/react-transition-group": "4.4.12",
     "@wise/art": "^2.26.0",
     "@wise/eslint-config": "^13.3.0",
-    "babel-plugin-formatjs": "^10.5.41",
+    "babel-plugin-formatjs": "^10.5.39",
     "eslint": "^9.39.2",
     "eslint-plugin-storybook": "^10.3.0-alpha.0",
     "gulp": "^5.0.1",
@@ -80,16 +80,16 @@
     "jest-fetch-mock": "^3.0.3",
     "jsdom-testing-mocks": "^1.16.0",
     "lodash.times": "^4.3.2",
-    "react-intl": "^7.1.14",
-    "rollup": "^4.57.1",
+    "react-intl": "^7.1.11",
+    "rollup": "^4.54.0",
     "rollup-preserve-directives": "^1.1.3",
     "storybook": "^10.3.0-alpha.0",
-    "storybook-addon-tag-badges": "^3.0.6",
+    "storybook-addon-tag-badges": "^3.0.4",
     "storybook-addon-test-codegen": "^3.0.1",
     "@transferwise/less-config": "3.1.2",
     "@transferwise/neptune-css": "14.26.1",
-    "@wise/wds-configs": "0.0.0",
-    "@wise/components-theming": "1.10.1"
+    "@wise/components-theming": "1.10.1",
+    "@wise/wds-configs": "0.0.0"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3 || ^4",
@@ -102,18 +102,18 @@
     "react-intl": "^5.10.0 || ^6 || ^7"
   },
   "dependencies": {
-    "@babel/runtime": "^7.28.6",
+    "@babel/runtime": "^7.28.4",
     "@floating-ui/react": "^0.27.16",
     "@headlessui/react": "^2.2.9",
     "@popperjs/core": "^2.11.8",
     "@react-aria/focus": "^3.21.4",
     "@react-aria/overlays": "^3.31.1",
-    "@transferwise/formatting": "^2.13.5",
+    "@transferwise/formatting": "^2.13.4",
     "@transferwise/neptune-validation": "^3.3.1",
     "clsx": "^2.1.1",
     "commonmark": "^0.31.2",
-    "core-js": "^3.48.0",
-    "framer-motion": "^12.33.0",
+    "core-js": "^3.47.0",
+    "framer-motion": "^12.23.26",
     "lodash.clamp": "^4.0.3",
     "lodash.debounce": "^4.0.8",
     "merge-props": "^6.0.0",

package/src/common/bottomSheet/BottomSheet.test.story.tsx

@@ -0,0 +1,94 @@
+import { useState } from 'react';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+import { userEvent, within } from 'storybook/test';
+import { lorem100, lorem500 } from '../../test-utils';
+import { Typography } from '../propsValues/typography';
+import Alert from '../../alert';
+import Body from '../../body';
+import Button from '../../button';
+import Title from '../../title';
+import BottomSheet from './BottomSheet';
+
+const wait = async (duration = 500) =>
+  new Promise<void>((resolve) => {
+    setTimeout(resolve, duration);
+  });
+
+export default {
+  component: BottomSheet,
+  title: 'Dialogs/BottomSheet/tests',
+  tags: ['!autodocs'],
+  args: {
+    open: false,
+  },
+} satisfies Meta<typeof BottomSheet>;
+
+type Story = StoryObj<typeof BottomSheet>;
+
+/**
+ * This test ensures that when the SelectInput is used within a scrollable page,
+ * opening the dropdown does not cause any unwanted scrolling or layout shifts.
+ * Expected preview should start with green bar at the top, with yellow section
+ * not in the viewport.
+ *
+ * NB: This test is disabled in Chromatic as there's no obvious way to control <html/> element of a snapshot.
+ */
+export const SmoothScrollReset: Story = {
+  args: {
+    children: (
+      <>
+        <Title type={Typography.TITLE_SECTION}>Observe the document</Title>
+        <Alert className="m-t-2" type="warning">
+          Once the <code>BottomSheet</code> opens, the document underneath should be static and
+          should not scroll.
+        </Alert>
+        <Body as="p">{lorem100}</Body>
+        <Body as="p">{lorem100}</Body>
+      </>
+    ),
+  },
+  decorators: [
+    (Story) => (
+      <>
+        <style>{'html { scroll-behavior: smooth; }'}</style>
+        <div style={{ maxWidth: 500 }}>
+          <Body>
+            <p>{lorem100}</p>
+            <p>{lorem100}</p>
+          </Body>
+          <Story />
+          <Body as="p" className="m-t-5 disabled">
+            {lorem500}
+          </Body>
+        </div>
+      </>
+    ),
+  ],
+  parameters: {
+    chromatic: {
+      disableSnapshot: true,
+    },
+  },
+  play: async ({ canvasElement }) => {
+    document.documentElement.scrollTop = 400;
+    await wait(500);
+    const canvas = within(canvasElement);
+    await userEvent.click(canvas.getByRole('button'));
+  },
+  render: ({ open, ...args }) => {
+    const [isOpen, setIsOpen] = useState(false);
+
+    return (
+      <div>
+        <Button onClick={() => setIsOpen(true)}>Open BottomSheet</Button>
+        <BottomSheet
+          {...args}
+          open={isOpen}
+          onClose={() => {
+            setIsOpen(false);
+          }}
+        />
+      </div>
+    );
+  },
+};

package/src/common/bottomSheet/__snapshots__/BottomSheet.test.tsx.snap

@@ -20,6 +20,12 @@ exports[`BottomSheet renders content when open 1`] = `
         <div
           class="dimmer-content-positioner"
         >
+          <style>
+            html, body { 
+    height: 100dvh; 
+    overflow: hidden;
+  }
+          </style>
           <div
             class="sliding-panel sliding-panel--open-bottom np-bottom-sheet sliding-panel-appear sliding-panel-appear-active"
           >

package/src/common/preventScroll/PreventScroll.tsx

@@ -2,5 +2,15 @@ import { usePreventScroll } from '@react-aria/overlays';
 
 export function PreventScroll() {
   usePreventScroll();
-  return null;
+
+  // ios18
+  return (
+    <style>{`html, body { 
+    height: 100dvh; 
+    overflow: hidden;
+  }`}</style>
+  );
+
+  // ios26
+  return <style>{`html, body { height: 100dvh; overflow: hidden; }`}</style>;
 }

package/src/dimmer/Dimmer.css

@@ -1,5 +1,6 @@
 .no-scroll {
   overflow: hidden;
+  scroll-behavior: unset;
 }
 .dimmer {
   position: fixed;

package/src/dimmer/Dimmer.less

@@ -6,6 +6,7 @@
 // (see https://bugs.webkit.org/show_bug.cgi?id=153852 & https://bugs.webkit.org/show_bug.cgi?id=220908)
 .no-scroll {
   overflow: hidden;
+  scroll-behavior: unset;
 }
 
 .dimmer {

package/src/inputs/SelectInput.css

@@ -11,35 +11,38 @@
   transition-property: opacity;
   transition-timing-function: ease-out;
   transition-duration: 300ms;
+  height: 100vh;
+  min-height: -webkit-fill-available;
 }
 .np-bottom-sheet-v2-backdrop--closed {
   opacity: 0;
 }
 .np-bottom-sheet-v2 {
   position: fixed;
-  inset: 0px;
+  inset: 0;
   bottom: env(keyboard-inset-height, 0px);
-  margin-left: 8px;
-  margin-left: var(--size-8);
-  margin-right: 8px;
-  margin-right: var(--size-8);
-  margin-top: 64px;
-  margin-top: var(--size-64);
+  padding-top: 64px;
+  padding-top: var(--size-64);
+  padding-bottom: min(env(safe-area-inset-bottom, 16px));
+  padding-bottom: min(env(safe-area-inset-bottom, var(--size-16)));
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
+  height: 100%;
+  min-height: -webkit-fill-available;
 }
 .np-bottom-sheet-v2-content {
   display: flex;
   flex-direction: column;
   overflow: auto;
   border-top-left-radius: 32px;
-  /* TODO: Tokenize */
+  border-top-left-radius: var(--size-32);
   border-top-right-radius: 32px;
-  /* TODO: Tokenize */
+  border-top-right-radius: var(--size-32);
   background-color: #ffffff;
   background-color: var(--color-background-elevated);
   box-shadow: 0 0 40px rgba(69, 71, 69, 0.2);
+  will-change: transform;
 }
 .np-bottom-sheet-v2-content:focus {
   outline: none;

package/src/inputs/SelectInput.test.story.tsx

@@ -0,0 +1,83 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { fn, type Mock, userEvent, within } from 'storybook/test';
+import { allModes } from '../../.storybook/modes';
+import { lorem5, lorem500 } from '../test-utils';
+import { Field } from '../field/Field';
+import Body from '../body';
+import { SelectInput, type SelectInputProps } from './SelectInput';
+
+const meta = {
+  title: 'Forms/SelectInput/tests',
+  component: SelectInput,
+  args: {
+    onFilterChange: fn() satisfies Mock,
+    onChange: fn() satisfies Mock,
+    onClose: fn() satisfies Mock,
+    onOpen: fn() satisfies Mock,
+  },
+  tags: ['!autodocs'],
+} satisfies Meta<typeof SelectInput>;
+export default meta;
+
+type Story<T, M extends boolean = false> = StoryObj<SelectInputProps<T, M>>;
+
+const wait = async (duration = 500) =>
+  new Promise<void>((resolve) => {
+    setTimeout(resolve, duration);
+  });
+
+/**
+ * This test ensures that when the SelectInput is used within a scrollable page,
+ * opening the dropdown does not cause any unwanted scrolling or layout shifts.
+ * Expected preview should start with green bar at the top, with yellow section
+ * not in the viewport.
+ *
+ * NB: This test is disabled in Chromatic as there's no obvious way to control <html/> element of a snapshot.
+ */
+export const SmoothScrollReset: Story<string> = {
+  args: {
+    items: Array.from({ length: 15 }).map((_, id) => ({
+      type: 'option',
+      value: `option ${id + 1}`,
+    })),
+    placeholder: 'Select option',
+  },
+  decorators: [
+    (Story) => (
+      <>
+        <style>{`html { scroll-behavior: smooth; }`}</style>
+        <div>
+          <div
+            className="d-flex align-items-center justify-content-center"
+            style={{
+              backgroundColor: 'var(--color-bright-yellow)',
+              height: 400,
+            }}
+          >
+            This block should not be in the viewport.
+          </div>
+          <div style={{ height: 10, backgroundColor: 'var(--color-bright-green)' }} />
+          <Field id="el1" label={lorem5}>
+            <Story />
+          </Field>
+          <Body as="p">{lorem500}</Body>
+        </div>
+      </>
+    ),
+  ],
+  play: async ({ canvasElement }) => {
+    document.documentElement.scrollTop = 400;
+    await wait();
+    const canvas = within(canvasElement);
+    const triggerButton = canvas.getByRole('combobox');
+    await userEvent.click(triggerButton);
+  },
+  globals: {
+    viewport: { value: allModes.largeMobile.viewport, isRotated: false },
+  },
+  parameters: {
+    chromatic: {
+      disableSnapshot: true,
+    },
+  },
+};

package/src/inputs/_BottomSheet.less

@@ -11,6 +11,8 @@
   transition-property: opacity;
   transition-timing-function: ease-out;
   transition-duration: 300ms;
+  height: 100vh;
+  min-height: -webkit-fill-available;
 
   &--closed {
     opacity: 0;
@@ -19,24 +21,28 @@
 
 .np-bottom-sheet-v2 {
   position: fixed;
-  inset: 0px;
+  inset: 0;
   bottom: env(keyboard-inset-height, 0px);
-  margin-left: var(--size-8);
-  margin-right: var(--size-8);
-  margin-top: var(--size-64);
+  // margin-left: var(--size-8);
+  // margin-right: var(--size-8);
+  padding-top: var(--size-64);
+  padding-bottom: min(env(safe-area-inset-bottom, var(--size-16)));
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
+  height: 100%;
+  min-height: -webkit-fill-available;
 }
 
 .np-bottom-sheet-v2-content {
   display: flex;
   flex-direction: column;
   overflow: auto;
-  border-top-left-radius: 32px; /* TODO: Tokenize */
-  border-top-right-radius: 32px; /* TODO: Tokenize */
+  border-top-left-radius: var(--size-32);
+  border-top-right-radius: var(--size-32);
   background-color: var(--color-background-elevated);
   box-shadow: 0 0 40px rgb(69 71 69 / 0.2);
+  will-change: transform;
 
   &:focus {
     outline: none;

package/src/inputs/_BottomSheet.tsx

@@ -10,12 +10,11 @@ import { Transition, TransitionChild } from '@headlessui/react';
 import { FocusScope } from '@react-aria/focus';
 import { ThemeProvider, useTheme } from '@wise/components-theming';
 import { clsx } from 'clsx';
-import { Fragment, useState } from 'react';
+import { Fragment, useState, useEffect } from 'react';
 
-import { CloseButton } from '../common/closeButton';
+import { CloseButton, Size } from '../common';
 import { useVirtualKeyboard } from '../common/hooks/useVirtualKeyboard';
 import { PreventScroll } from '../common/preventScroll/PreventScroll';
-import { Size } from '../common/propsValues/size';
 
 export interface BottomSheetProps {
   open: boolean;
@@ -33,6 +32,19 @@ export interface BottomSheetProps {
   onCloseEnd?: () => void;
 }
 
+/**
+ * App pages set scroll-behavior to 'smooth' which causes mobile Safari to
+ * slow-scroll and glitch. This function temporarily disables that behaviour
+ * while the BottomSheet is open.
+ */
+const freezeScroll = (shouldFreeze = true) => {
+  if (shouldFreeze) {
+    document.documentElement.style.scrollBehavior = 'unset';
+  } else {
+    document.documentElement.style.removeProperty('scroll-behavior');
+  }
+};
+
 export function BottomSheet({
   open,
   renderTrigger,
@@ -54,12 +66,14 @@ export function BottomSheet({
     },
   });
 
+  useEffect(() => {
+    freezeScroll(open);
+  }, [open]);
+
   const dismiss = useDismiss(context);
   const role = useRole(context);
   const { getReferenceProps, getFloatingProps } = useInteractions([dismiss, role]);
-
   const [floatingKey, setFloatingKey] = useState(0);
-
   const { theme, screenMode } = useTheme();
 
   return (