@transferwise/components 46.42.0 → 46.42.1

package/build/main.css

@@ -2400,67 +2400,37 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   position: relative;
   z-index: 1060;
 }
-.np-bottom-sheet-v2-backdrop-container--enter,
-.np-bottom-sheet-v2-backdrop-container--leave {
-  transition-property: opacity;
-  transition-timing-function: ease-out;
-  transition-duration: 300ms;
-}
-.np-bottom-sheet-v2-backdrop-container--enter-from,
-.np-bottom-sheet-v2-backdrop-container--leave-to {
-  opacity: 0;
-}
 .np-bottom-sheet-v2-backdrop {
   position: fixed;
   inset: 0px;
   background-color: #37517e;
   background-color: var(--color-content-primary);
   opacity: 0.4;
+  transition-property: opacity;
+  transition-timing-function: ease-out;
+  transition-duration: 300ms;
+}
+.np-bottom-sheet-v2-backdrop--closed {
+  opacity: 0;
 }
 .np-bottom-sheet-v2 {
   position: fixed;
   inset: 0px;
+  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);
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
-  padding-left: 8px;
-  padding-left: var(--size-8);
-  padding-right: 8px;
-  padding-right: var(--size-8);
-  padding-top: 64px;
-  padding-top: var(--size-64);
 }
 .np-bottom-sheet-v2-content {
-  max-height: 100%;
-}
-.np-bottom-sheet-v2-content--enter,
-.np-bottom-sheet-v2-content--leave {
-  transition-property: transform;
-  transition-timing-function: ease-out;
-  transition-duration: 300ms;
-}
-@media (prefers-reduced-motion: reduce) {
-  .np-bottom-sheet-v2-content--enter,
-  .np-bottom-sheet-v2-content--leave {
-    transition-property: opacity;
-  }
-}
-@media (prefers-reduced-motion: no-preference) {
-  .np-bottom-sheet-v2-content--enter-from,
-  .np-bottom-sheet-v2-content--leave-to {
-    transform: translateY(100%);
-  }
-}
-@media (prefers-reduced-motion: reduce) {
-  .np-bottom-sheet-v2-content--enter-from,
-  .np-bottom-sheet-v2-content--leave-to {
-    opacity: 0;
-  }
-}
-.np-bottom-sheet-v2-content-inner-container {
   display: flex;
-  height: 100%;
   flex-direction: column;
+  overflow: auto;
   border-top-left-radius: 32px;
   /* TODO: Tokenize */
   border-top-right-radius: 32px;
@@ -2469,30 +2439,50 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   background-color: var(--color-background-elevated);
   box-shadow: 0 0 40px rgba(69, 71, 69, 0.2);
 }
-.np-bottom-sheet-v2-content-inner-container:focus {
+.np-bottom-sheet-v2-content:focus {
   outline: none;
 }
+@media (prefers-reduced-motion: no-preference) {
+  .np-bottom-sheet-v2-content {
+    transition-property: transform;
+    transition-timing-function: ease-out;
+    transition-duration: 300ms;
+  }
+  .np-bottom-sheet-v2-content--closed {
+    transform: translateY(100%);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .np-bottom-sheet-v2-content {
+    transition-property: opacity;
+    transition-timing-function: ease-out;
+    transition-duration: 300ms;
+  }
+  .np-bottom-sheet-v2-content--closed {
+    opacity: 0;
+  }
+}
 .np-bottom-sheet-v2-header {
   align-self: flex-end;
   padding: 16px;
   padding: var(--size-16);
 }
 .np-bottom-sheet-v2-content-inner {
-  padding-top: 0px;
   display: grid;
+  grid-template-rows: minmax(0, 1fr);
   grid-row-gap: 8px;
   grid-row-gap: var(--size-8);
   row-gap: 8px;
   row-gap: var(--size-8);
-  overflow-y: auto;
-  grid-template-rows: repeat(1, minmax(0, 1fr));
+  overflow: auto;
 }
 .np-bottom-sheet-v2-content-inner--has-title {
-  grid-template-rows: auto 1fr;
+  grid-template-rows: auto minmax(0, 1fr);
 }
 .np-bottom-sheet-v2-content-inner--padding-md {
   padding: 16px;
   padding: var(--size-16);
+  padding-top: 0px;
 }
 .np-bottom-sheet-v2-title {
   color: #37517e;
@@ -2539,10 +2529,10 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   row-gap: 8px;
   row-gap: var(--size-8);
   overflow-y: auto;
-  grid-template-rows: repeat(1, minmax(0, 1fr));
+  grid-template-rows: minmax(0, 1fr);
 }
 .np-popover-v2--has-title {
-  grid-template-rows: auto 1fr;
+  grid-template-rows: auto minmax(0, 1fr);
 }
 .np-popover-v2--padding-md {
   padding: 16px;

package/build/styles/inputs/SelectInput.css

@@ -2,67 +2,37 @@
   position: relative;
   z-index: 1060;
 }
-.np-bottom-sheet-v2-backdrop-container--enter,
-.np-bottom-sheet-v2-backdrop-container--leave {
-  transition-property: opacity;
-  transition-timing-function: ease-out;
-  transition-duration: 300ms;
-}
-.np-bottom-sheet-v2-backdrop-container--enter-from,
-.np-bottom-sheet-v2-backdrop-container--leave-to {
-  opacity: 0;
-}
 .np-bottom-sheet-v2-backdrop {
   position: fixed;
   inset: 0px;
   background-color: #37517e;
   background-color: var(--color-content-primary);
   opacity: 0.4;
+  transition-property: opacity;
+  transition-timing-function: ease-out;
+  transition-duration: 300ms;
+}
+.np-bottom-sheet-v2-backdrop--closed {
+  opacity: 0;
 }
 .np-bottom-sheet-v2 {
   position: fixed;
   inset: 0px;
+  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);
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
-  padding-left: 8px;
-  padding-left: var(--size-8);
-  padding-right: 8px;
-  padding-right: var(--size-8);
-  padding-top: 64px;
-  padding-top: var(--size-64);
 }
 .np-bottom-sheet-v2-content {
-  max-height: 100%;
-}
-.np-bottom-sheet-v2-content--enter,
-.np-bottom-sheet-v2-content--leave {
-  transition-property: transform;
-  transition-timing-function: ease-out;
-  transition-duration: 300ms;
-}
-@media (prefers-reduced-motion: reduce) {
-  .np-bottom-sheet-v2-content--enter,
-  .np-bottom-sheet-v2-content--leave {
-    transition-property: opacity;
-  }
-}
-@media (prefers-reduced-motion: no-preference) {
-  .np-bottom-sheet-v2-content--enter-from,
-  .np-bottom-sheet-v2-content--leave-to {
-    transform: translateY(100%);
-  }
-}
-@media (prefers-reduced-motion: reduce) {
-  .np-bottom-sheet-v2-content--enter-from,
-  .np-bottom-sheet-v2-content--leave-to {
-    opacity: 0;
-  }
-}
-.np-bottom-sheet-v2-content-inner-container {
   display: flex;
-  height: 100%;
   flex-direction: column;
+  overflow: auto;
   border-top-left-radius: 32px;
   /* TODO: Tokenize */
   border-top-right-radius: 32px;
@@ -71,30 +41,50 @@
   background-color: var(--color-background-elevated);
   box-shadow: 0 0 40px rgba(69, 71, 69, 0.2);
 }
-.np-bottom-sheet-v2-content-inner-container:focus {
+.np-bottom-sheet-v2-content:focus {
   outline: none;
 }
+@media (prefers-reduced-motion: no-preference) {
+  .np-bottom-sheet-v2-content {
+    transition-property: transform;
+    transition-timing-function: ease-out;
+    transition-duration: 300ms;
+  }
+  .np-bottom-sheet-v2-content--closed {
+    transform: translateY(100%);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .np-bottom-sheet-v2-content {
+    transition-property: opacity;
+    transition-timing-function: ease-out;
+    transition-duration: 300ms;
+  }
+  .np-bottom-sheet-v2-content--closed {
+    opacity: 0;
+  }
+}
 .np-bottom-sheet-v2-header {
   align-self: flex-end;
   padding: 16px;
   padding: var(--size-16);
 }
 .np-bottom-sheet-v2-content-inner {
-  padding-top: 0px;
   display: grid;
+  grid-template-rows: minmax(0, 1fr);
   grid-row-gap: 8px;
   grid-row-gap: var(--size-8);
   row-gap: 8px;
   row-gap: var(--size-8);
-  overflow-y: auto;
-  grid-template-rows: repeat(1, minmax(0, 1fr));
+  overflow: auto;
 }
 .np-bottom-sheet-v2-content-inner--has-title {
-  grid-template-rows: auto 1fr;
+  grid-template-rows: auto minmax(0, 1fr);
 }
 .np-bottom-sheet-v2-content-inner--padding-md {
   padding: 16px;
   padding: var(--size-16);
+  padding-top: 0px;
 }
 .np-bottom-sheet-v2-title {
   color: #37517e;
@@ -141,10 +131,10 @@
   row-gap: 8px;
   row-gap: var(--size-8);
   overflow-y: auto;
-  grid-template-rows: repeat(1, minmax(0, 1fr));
+  grid-template-rows: minmax(0, 1fr);
 }
 .np-popover-v2--has-title {
-  grid-template-rows: auto 1fr;
+  grid-template-rows: auto minmax(0, 1fr);
 }
 .np-popover-v2--padding-md {
   padding: 16px;

package/build/styles/main.css

@@ -2400,67 +2400,37 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   position: relative;
   z-index: 1060;
 }
-.np-bottom-sheet-v2-backdrop-container--enter,
-.np-bottom-sheet-v2-backdrop-container--leave {
-  transition-property: opacity;
-  transition-timing-function: ease-out;
-  transition-duration: 300ms;
-}
-.np-bottom-sheet-v2-backdrop-container--enter-from,
-.np-bottom-sheet-v2-backdrop-container--leave-to {
-  opacity: 0;
-}
 .np-bottom-sheet-v2-backdrop {
   position: fixed;
   inset: 0px;
   background-color: #37517e;
   background-color: var(--color-content-primary);
   opacity: 0.4;
+  transition-property: opacity;
+  transition-timing-function: ease-out;
+  transition-duration: 300ms;
+}
+.np-bottom-sheet-v2-backdrop--closed {
+  opacity: 0;
 }
 .np-bottom-sheet-v2 {
   position: fixed;
   inset: 0px;
+  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);
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
-  padding-left: 8px;
-  padding-left: var(--size-8);
-  padding-right: 8px;
-  padding-right: var(--size-8);
-  padding-top: 64px;
-  padding-top: var(--size-64);
 }
 .np-bottom-sheet-v2-content {
-  max-height: 100%;
-}
-.np-bottom-sheet-v2-content--enter,
-.np-bottom-sheet-v2-content--leave {
-  transition-property: transform;
-  transition-timing-function: ease-out;
-  transition-duration: 300ms;
-}
-@media (prefers-reduced-motion: reduce) {
-  .np-bottom-sheet-v2-content--enter,
-  .np-bottom-sheet-v2-content--leave {
-    transition-property: opacity;
-  }
-}
-@media (prefers-reduced-motion: no-preference) {
-  .np-bottom-sheet-v2-content--enter-from,
-  .np-bottom-sheet-v2-content--leave-to {
-    transform: translateY(100%);
-  }
-}
-@media (prefers-reduced-motion: reduce) {
-  .np-bottom-sheet-v2-content--enter-from,
-  .np-bottom-sheet-v2-content--leave-to {
-    opacity: 0;
-  }
-}
-.np-bottom-sheet-v2-content-inner-container {
   display: flex;
-  height: 100%;
   flex-direction: column;
+  overflow: auto;
   border-top-left-radius: 32px;
   /* TODO: Tokenize */
   border-top-right-radius: 32px;
@@ -2469,30 +2439,50 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   background-color: var(--color-background-elevated);
   box-shadow: 0 0 40px rgba(69, 71, 69, 0.2);
 }
-.np-bottom-sheet-v2-content-inner-container:focus {
+.np-bottom-sheet-v2-content:focus {
   outline: none;
 }
+@media (prefers-reduced-motion: no-preference) {
+  .np-bottom-sheet-v2-content {
+    transition-property: transform;
+    transition-timing-function: ease-out;
+    transition-duration: 300ms;
+  }
+  .np-bottom-sheet-v2-content--closed {
+    transform: translateY(100%);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .np-bottom-sheet-v2-content {
+    transition-property: opacity;
+    transition-timing-function: ease-out;
+    transition-duration: 300ms;
+  }
+  .np-bottom-sheet-v2-content--closed {
+    opacity: 0;
+  }
+}
 .np-bottom-sheet-v2-header {
   align-self: flex-end;
   padding: 16px;
   padding: var(--size-16);
 }
 .np-bottom-sheet-v2-content-inner {
-  padding-top: 0px;
   display: grid;
+  grid-template-rows: minmax(0, 1fr);
   grid-row-gap: 8px;
   grid-row-gap: var(--size-8);
   row-gap: 8px;
   row-gap: var(--size-8);
-  overflow-y: auto;
-  grid-template-rows: repeat(1, minmax(0, 1fr));
+  overflow: auto;
 }
 .np-bottom-sheet-v2-content-inner--has-title {
-  grid-template-rows: auto 1fr;
+  grid-template-rows: auto minmax(0, 1fr);
 }
 .np-bottom-sheet-v2-content-inner--padding-md {
   padding: 16px;
   padding: var(--size-16);
+  padding-top: 0px;
 }
 .np-bottom-sheet-v2-title {
   color: #37517e;
@@ -2539,10 +2529,10 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   row-gap: 8px;
   row-gap: var(--size-8);
   overflow-y: auto;
-  grid-template-rows: repeat(1, minmax(0, 1fr));
+  grid-template-rows: minmax(0, 1fr);
 }
 .np-popover-v2--has-title {
-  grid-template-rows: auto 1fr;
+  grid-template-rows: auto minmax(0, 1fr);
 }
 .np-popover-v2--padding-md {
   padding: 16px;

package/build/types/common/hooks/useVirtualKeyboard.d.ts

@@ -0,0 +1,7 @@
+/**
+ * This progressive enhancement uses an experimental API, it might change,
+ * and at the time of authoring is not supported on iOS or mobile Firefox.
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/VirtualKeyboard
+ */
+export declare function useVirtualKeyboard(): void;
+//# sourceMappingURL=useVirtualKeyboard.d.ts.map

package/build/types/common/hooks/useVirtualKeyboard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useVirtualKeyboard.d.ts","sourceRoot":"","sources":["../../../../src/common/hooks/useVirtualKeyboard.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AACH,wBAAgB,kBAAkB,SAajC"}

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

@@ -1 +1 @@
-{"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,+BAmGlB"}
+{"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,+BA6FlB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "46.42.0",
+  "version": "46.42.1",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {

package/src/circularButton/CircularButton.story.tsx

@@ -1,97 +1,66 @@
-import { action } from '@storybook/addon-actions';
-import { boolean, select, text } from '@storybook/addon-knobs';
-import { Freeze, Plus, Whatsapp } from '@transferwise/icons';
+import * as Icons from '@transferwise/icons';
 
-import { Priority, ControlType } from '../common';
+import { ControlType, Priority } from '../common';
 
+import { Meta, StoryObj } from '@storybook/react';
 import CircularButton from './CircularButton';
 
 export default {
   component: CircularButton,
   title: 'Actions/CircularButton',
-};
+  args: {
+    children: 'Button text',
+    // Needs to be cast because we're mapping icon names to components
+    icon: 'Freeze' as unknown as React.ReactElement,
+  },
+  argTypes: {
+    icon: {
+      options: Object.keys(Icons),
+      mapping: Object.fromEntries(
+        Object.entries(Icons).map(([name, Icon]) => [name, <Icon key={name} />]),
+      ),
+    },
+  },
+} satisfies Meta<typeof CircularButton>;
 
-const icons = {
-  plus: <Plus />,
-  freeze: <Freeze />,
-  whatsapp: <Whatsapp />,
-};
+type Story = StoryObj<typeof CircularButton>;
 
-export const Basic = () => {
-  const icon = select('icon', ['freeze', 'plus', 'whatsapp'], 'freeze');
-  const priority = select('priority', [Priority.PRIMARY, Priority.SECONDARY], Priority.PRIMARY);
-  const type = select('type', Object.values(ControlType), ControlType.ACCENT);
-  const disabled = boolean('disabled', false);
-  const label = text('label', 'Button text');
-  const background = select('theme', ['light', 'blue'], 'light');
-  return (
-    <div className={background === 'blue' ? 'bg--dark p-a-3' : ''}>
-      <CircularButton
-        icon={icons[icon]}
-        priority={priority}
-        type={type}
-        disabled={disabled}
-        onClick={action('Button Clicked')}
-      >
-        {label}
-      </CircularButton>
-    </div>
-  );
+export const Basic: Story = {
+  args: {
+    priority: Priority.PRIMARY,
+    type: ControlType.ACCENT,
+    disabled: false,
+  },
 };
 
-export const deprecated = () => {
-  const icon = select('icon', ['freeze', 'plus', 'whatsapp'], 'freeze');
-  const disabled = boolean('disabled', false);
-  const label = text('label', 'Button text');
-  const background = select('theme', ['light', 'blue'], 'light');
-
-  const commonProps = {
-    label,
+export const All: Story = {
+  args: {
     className: 'm-r-2',
-    disabled,
-    icon: icons[icon],
-    onClick: action('Button Clicked'),
-  };
-
-  return (
-    <div className={background === 'blue' ? 'bg--dark p-a-3' : ''}>
-      <div className="m-b-2">
-        <div className="title-4 m-b-1">Accent</div>
-        <CircularButton priority={Priority.PRIMARY} type={ControlType.ACCENT} {...commonProps}>
-          {label}
-        </CircularButton>
-        <CircularButton priority={Priority.SECONDARY} type={ControlType.ACCENT} {...commonProps}>
-          {label}
-        </CircularButton>
-      </div>
-      <div className="m-b-2">
-        <div className="title-4 m-b-1">Positive</div>
-        <CircularButton priority={Priority.PRIMARY} type={ControlType.POSITIVE} {...commonProps}>
-          {label}
-        </CircularButton>
-
-        <CircularButton priority={Priority.SECONDARY} type={ControlType.POSITIVE} {...commonProps}>
-          {label}
-        </CircularButton>
-      </div>
-      <div className="m-b-2">
-        <div className="title-4 m-b-1">Negative</div>
-        <CircularButton priority={Priority.PRIMARY} type={ControlType.NEGATIVE} {...commonProps}>
-          {label}
-        </CircularButton>
-        <CircularButton priority={Priority.SECONDARY} type={ControlType.NEGATIVE} {...commonProps}>
-          {label}
-        </CircularButton>
-      </div>
-      <div className="m-b-2">
-        <div className="title-4 m-b-1">Disabled</div>
-        <CircularButton {...commonProps} disabled>
-          {label}
-        </CircularButton>
-        <CircularButton {...commonProps} priority={Priority.SECONDARY} disabled>
-          {label}
-        </CircularButton>
-      </div>
-    </div>
-  );
+  },
+  render: (props) => {
+    return (
+      <>
+        <div className="m-b-2">
+          <div className="title-4 m-b-1">Accent</div>
+          <CircularButton {...props} priority={Priority.PRIMARY} type={ControlType.ACCENT} />
+          <CircularButton {...props} priority={Priority.SECONDARY} type={ControlType.ACCENT} />
+        </div>
+        <div className="m-b-2">
+          <div className="title-4 m-b-1">Positive</div>
+          <CircularButton {...props} priority={Priority.PRIMARY} type={ControlType.POSITIVE} />
+          <CircularButton {...props} priority={Priority.SECONDARY} type={ControlType.POSITIVE} />
+        </div>
+        <div className="m-b-2">
+          <div className="title-4 m-b-1">Negative</div>
+          <CircularButton {...props} priority={Priority.PRIMARY} type={ControlType.NEGATIVE} />
+          <CircularButton {...props} priority={Priority.SECONDARY} type={ControlType.NEGATIVE} />
+        </div>
+        <div className="m-b-2">
+          <div className="title-4 m-b-1">Disabled</div>
+          <CircularButton {...props} disabled />
+          <CircularButton {...props} priority={Priority.SECONDARY} disabled />
+        </div>
+      </>
+    );
+  },
 };

package/src/common/hooks/useVirtualKeyboard.ts

@@ -0,0 +1,21 @@
+import { useEffect } from 'react';
+
+/**
+ * This progressive enhancement uses an experimental API, it might change, 
+ * and at the time of authoring is not supported on iOS or mobile Firefox.
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/VirtualKeyboard
+ */
+export function useVirtualKeyboard() {
+  useEffect(() => {
+    /* eslint-disable @typescript-eslint/no-unsafe-member-access, functional/immutable-data */
+    if ('virtualKeyboard' in navigator) {
+      const virtualKeyboard: any = navigator.virtualKeyboard;
+      const initialOverlaysContent: unknown = virtualKeyboard.overlaysContent;
+      virtualKeyboard.overlaysContent = true;
+      return () => {
+        virtualKeyboard.overlaysContent = initialOverlaysContent;
+      };
+    }
+    /* eslint-enable @typescript-eslint/no-unsafe-member-access, functional/immutable-data */
+  }, []);
+}