@transferwise/components 46.114.0 → 46.115.0

package/src/drawer/Drawer.story.tsx

@@ -1,7 +1,8 @@
 import { useState } from 'react';
 import { Position, Priority } from '../common';
-import { Section, Button, Input, Modal, type DrawerProps } from '..';
+import { Section, Button, Input, Modal, type DrawerProps, Body } from '..';
 import Drawer from './Drawer';
+import { lorem10, lorem20, lorem40, lorem5 } from '../test-utils';
 
 export default {
   component: Drawer,
@@ -14,110 +15,167 @@ export default {
   },
 };
 
-export const Basic = (args: DrawerProps) => {
-  const [openDrawer, setOpenDrawer] = useState(false);
-  const [openModal, setOpenModal] = useState(false);
+export const Basic = {
+  args: {
+    position: Position.RIGHT,
+    open: true,
+  },
+  render: (args: DrawerProps) => {
+    const [openDrawer, setOpenDrawer] = useState(args.open);
+    const [openModal, setOpenModal] = useState(false);
+
+    return (
+      <>
+        <Button v2 disabled={false} block={false} onClick={() => setOpenDrawer(true)}>
+          Open drawer
+        </Button>
+        <Drawer
+          open={openDrawer}
+          position={args.position}
+          headerTitle="This is the title of the drawer"
+          footerContent={
+            <>
+              <Button v2 block className="m-b-1" onClick={() => {}}>
+                Action 1
+              </Button>
+              <Button v2 block priority={Priority.SECONDARY} onClick={() => {}}>
+                Action 2
+              </Button>
+            </>
+          }
+          onClose={(event) => {
+            console.log('drawer close');
+            event.stopPropagation();
+            setOpenDrawer(false);
+          }}
+        >
+          <p>{lorem20}</p>
+          <Section className="m-t-2">
+            <Input />
+            <p className="m-t-3">{lorem5}</p>
+            <Button v2 onClick={() => setOpenModal(true)}>
+              Open Modal
+            </Button>
+            <Modal
+              body={<p>{lorem40}</p>}
+              open={openModal}
+              title="Title"
+              onClose={() => {
+                console.log('modal close');
+                setOpenModal(false);
+              }}
+            />
+          </Section>
+          <p>{lorem40}</p>
+          <p>{lorem40}</p>
+          <p>{lorem40}</p>
+          <p>{lorem40}</p>
+          <p>{lorem40}</p>
+          <p>{lorem40}</p>
+        </Drawer>
+      </>
+    );
+  },
+};
 
-  return (
-    <>
-      <Button v2 disabled={false} block={false} onClick={() => setOpenDrawer(true)}>
-        Open drawer
-      </Button>
-      <Drawer
-        open={openDrawer}
-        position={args.position}
-        headerTitle="This is the title of the drawer"
-        footerContent={
-          <>
+export const LongTitle = {
+  args: {
+    open: true,
+  },
+  render: (args: DrawerProps) => {
+    const [openDrawer, setOpenDrawer] = useState(args.open);
+    return (
+      <>
+        <Button v2 block={false} onClick={() => setOpenDrawer(true)}>
+          Open drawer
+        </Button>
+        <Drawer
+          open={openDrawer}
+          headerTitle={lorem10}
+          footerContent={
             <Button v2 block onClick={() => {}}>
               Action 1
             </Button>
-            <Button v2 block priority={Priority.SECONDARY} onClick={() => {}}>
-              Action 2
+          }
+          onClose={() => {
+            setOpenDrawer(false);
+          }}
+        >
+          <p>{lorem20}</p>
+          <p>{lorem40}</p>
+          <p>{lorem40}</p>
+          <p>{lorem40}</p>
+          <p>{lorem40}</p>
+          <p>{lorem40}</p>
+          <p>{lorem40}</p>
+        </Drawer>
+      </>
+    );
+  },
+};
+
+export const NoTitle = {
+  args: {
+    open: true,
+  },
+  render: (args: DrawerProps) => {
+    const [openDrawer, setOpenDrawer] = useState(args.open);
+    return (
+      <>
+        <Button v2 block={false} onClick={() => setOpenDrawer(true)}>
+          Open drawer
+        </Button>
+        <Drawer
+          open={openDrawer}
+          footerContent={
+            <Button v2 block onClick={() => {}}>
+              Action 1
             </Button>
-          </>
-        }
-        onClose={(event) => {
-          console.log('drawer close');
-          event.stopPropagation();
-          setOpenDrawer(false);
-        }}
-      >
-        <p>
-          I am baby actually poke kickstarter, street art jean shorts bespoke chambray activated
-          charcoal ramps marfa shoreditch tumeric tumblr. Mixtape cred palo santo, cliche lyft marfa
-          ethical waistcoat poke jean shorts. Scenester readymade selvage disrupt pok pok. La croix
-          stumptown try-hard chartreuse.
-        </p>
-        <Section className="m-t-2">
-          <Input />
-          <p className="m-t-3">Cat ipsum dolor sit amet, purr when being pet.</p>
-          <Button v2 onClick={() => setOpenModal(true)}>
-            Open Modal
-          </Button>
-          <Modal
-            body={
-              <p className="m-t-4">
-                I am baby actually poke kickstarter, street art jean shorts bespoke chambray
-                activated charcoal ramps marfa shoreditch tumeric tumblr. Mixtape cred palo santo,
-                cliche lyft marfa ethical waistcoat poke jean shorts. Scenester readymade selvage
-                disrupt pok pok. La croix stumptown try-hard chartreuse. I am baby actually poke
-                kickstarter, street art jean shorts bespoke chambray activated charcoal ramps marfa
-                shoreditch tumeric, I am baby actually poke kickstarter, street art jean shorts
-                bespoke chambray activated charcoal ramps marfa shoreditch tumeric tumblr. Mixtape
-                cred palo santo, cliche lyft marfa ethical waistcoat poke jean shorts. Scenester
-                readymade selvage disrupt pok pok.
-              </p>
-            }
-            open={openModal}
-            title="Title"
-            onClose={() => {
-              console.log('modal close');
-              setOpenModal(false);
-            }}
-          />
-        </Section>
-        <p>
-          I am baby actually poke kickstarter, street art jean shorts bespoke chambray activated
-          charcoal ramps marfa shoreditch tumeric tumblr. Mixtape cred palo santo, cliche lyft marfa
-          ethical waistcoat poke jean shorts. Scenester readymade selvage disrupt pok pok. La croix
-          stumptown try-hard chartreuse.
-        </p>
-        <p>
-          I am baby actually poke kickstarter, street art jean shorts bespoke chambray activated
-          charcoal ramps marfa shoreditch tumeric tumblr. Mixtape cred palo santo, cliche lyft marfa
-          ethical waistcoat poke jean shorts. Scenester readymade selvage disrupt pok pok. La croix
-          stumptown try-hard chartreuse.
-        </p>
-        <p>
-          I am baby actually poke kickstarter, street art jean shorts bespoke chambray activated
-          charcoal ramps marfa shoreditch tumeric tumblr. Mixtape cred palo santo, cliche lyft marfa
-          ethical waistcoat poke jean shorts. Scenester readymade selvage disrupt pok pok. La croix
-          stumptown try-hard chartreuse.
-        </p>
-        <p>
-          I am baby actually poke kickstarter, street art jean shorts bespoke chambray activated
-          charcoal ramps marfa shoreditch tumeric tumblr. Mixtape cred palo santo, cliche lyft marfa
-          ethical waistcoat poke jean shorts. Scenester readymade selvage disrupt pok pok. La croix
-          stumptown try-hard chartreuse.
-        </p>
-        <p>
-          I am baby actually poke kickstarter, street art jean shorts bespoke chambray activated
-          charcoal ramps marfa shoreditch tumeric tumblr. Mixtape cred palo santo, cliche lyft marfa
-          ethical waistcoat poke jean shorts. Scenester readymade selvage disrupt pok pok. La croix
-          stumptown try-hard chartreuse.
-        </p>
-        <p>
-          I am baby actually poke kickstarter, street art jean shorts bespoke chambray activated
-          charcoal ramps marfa shoreditch tumeric tumblr. Mixtape cred palo santo, cliche lyft marfa
-          ethical waistcoat poke jean shorts. Scenester readymade selvage disrupt pok pok. La croix
-          stumptown try-hard chartreuse.
-        </p>
-      </Drawer>
-    </>
-  );
+          }
+          onClose={() => {
+            setOpenDrawer(false);
+          }}
+        >
+          <p>{lorem20}</p>
+          <p>{lorem40}</p>
+          <p>{lorem40}</p>
+          <p>{lorem40}</p>
+          <p>{lorem40}</p>
+          <p>{lorem40}</p>
+          <p>{lorem40}</p>
+        </Drawer>
+      </>
+    );
+  },
 };
 
-Basic.args = {
-  position: Position.RIGHT,
+export const NoFooter = {
+  args: {
+    open: true,
+  },
+  render: (args: DrawerProps) => {
+    const [openDrawer, setOpenDrawer] = useState(args.open);
+    return (
+      <>
+        <Button v2 block={false} onClick={() => setOpenDrawer(true)}>
+          Open drawer
+        </Button>
+        <Drawer
+          open={openDrawer}
+          headerTitle="This is the title of the drawer"
+          onClose={() => {
+            setOpenDrawer(false);
+          }}
+        >
+          <p>{lorem20}</p>
+          <p>{lorem40}</p>
+          <p>{lorem40}</p>
+          <p>{lorem40}</p>
+          <p>{lorem40}</p>
+          <p>{lorem40}</p>
+          <Body>{lorem40}</Body>
+        </Drawer>
+      </>
+    );
+  },
 };

package/src/drawer/Drawer.tsx

@@ -2,13 +2,16 @@ import { clsx } from 'clsx';
 import { HTMLAttributes, useContext, useId } from 'react';
 
 import { Position, Typography } from '../common';
-import { CloseButton } from '../common/closeButton';
 import { useLayout } from '../common/hooks';
 import Dimmer from '../dimmer';
 import { OverlayIdContext } from '../provider/overlay/OverlayIdProvider';
 import SlidingPanel from '../slidingPanel';
 import Title from '../title';
 import { logActionRequiredIf } from '../utilities';
+import IconButton from '../iconButton';
+import closeBtnMessages from '../common/closeButton/CloseButton.messages';
+import { useIntl } from 'react-intl';
+import { Cross } from '@transferwise/icons';
 
 export type DrawerProps = {
   /** The content to appear in the drawer body. */
@@ -39,6 +42,7 @@ export default function Drawer({
   role = 'dialog',
   'aria-labelledby': ariaLabelledBy,
 }: DrawerProps) {
+  const intl = useIntl();
   logActionRequiredIf(
     'Drawer now expects `onClose`, and will soon make this prop required. Please update your usage to provide it.',
     !onClose,
@@ -60,19 +64,34 @@ export default function Drawer({
           className={clsx('np-drawer', className)}
         >
           <div
-            className={clsx('np-drawer-header', {
-              'np-drawer-header--withborder': headerTitle,
-            })}
+            className={clsx(
+              'np-drawer-header',
+              'd-flex',
+              'align-items-center',
+              headerTitle ? 'justify-content-between' : 'justify-content-end',
+              'flex-wrap',
+            )}
           >
             {headerTitle && (
-              <Title id={titleId} type={Typography.TITLE_BODY}>
+              <Title id={titleId} type={Typography.TITLE_SUBSECTION} className="np-drawer-title">
                 {headerTitle}
               </Title>
             )}
-            <CloseButton onClick={onClose} />
+            <IconButton
+              size={40}
+              priority="tertiary"
+              aria-label={intl.formatMessage(closeBtnMessages.ariaLabel)}
+              onClick={onClose}
+            >
+              <Cross />
+            </IconButton>
           </div>
           {children && <div className={clsx('np-drawer-content')}>{children}</div>}
-          {footerContent && <div className={clsx('np-drawer-footer')}>{footerContent}</div>}
+          {footerContent ? (
+            <div className={clsx('np-drawer-footer')}>{footerContent}</div>
+          ) : (
+            <div className="m-t-3" />
+          )}
         </div>
       </SlidingPanel>
     </Dimmer>

package/src/i18n/nl.json

@@ -16,7 +16,7 @@
   "neptune.DateLookup.selected": "geselecteerd",
   "neptune.DateLookup.twentyYears": "20 jaar",
   "neptune.DateLookup.year": "jaar",
-  "neptune.ExpressiveMoneyInput.currency.search.placeholder": "Typ valuta / land",
+  "neptune.ExpressiveMoneyInput.currency.search.placeholder": "Voer een valuta / land in",
   "neptune.ExpressiveMoneyInput.currency.select.currency": "Selecteer valuta",
   "neptune.FlowNavigation.back": "terug naar vorige stap",
   "neptune.Info.ariaLabel": "Meer informatie",

package/src/iconButton/IconButton.story.tsx

@@ -7,6 +7,7 @@ import Body from '../body';
 
 export default {
   title: 'Actions/IconButton',
+  component: IconButton,
 } satisfies Meta<typeof IconButton>;
 
 type Story = StoryObj<typeof IconButton>;

package/src/inputs/_BottomSheet.tsx

@@ -43,7 +43,7 @@ export function BottomSheet({
   onClose,
   onCloseEnd,
 }: BottomSheetProps) {
-  useVirtualKeyboard();
+  useVirtualKeyboard(open);
 
   const { refs, context } = useFloating<Element>({
     open,

package/src/main.css

@@ -2326,89 +2326,42 @@ button.np-option {
   }
 }
 .np-drawer .np-drawer-header {
-  display: flex;
-  align-items: center;
-  flex-wrap: nowrap;
   min-height: 56px;
   min-height: var(--size-56);
-  padding: 24px 16px;
-  padding: var(--size-24) var(--size-16);
-}
-.np-theme-personal .np-drawer .np-drawer-header {
   padding: 24px;
   padding: var(--size-24);
 }
 @media (max-width: 320px) {
-  .np-theme-personal .np-drawer .np-drawer-header {
+  .np-drawer .np-drawer-header {
     padding: 16px;
     padding: var(--size-16);
   }
 }
-.np-theme-personal .np-drawer .np-drawer-header .np-close-button {
-  margin-top: calc(8px * -1);
-  margin-top: calc(var(--size-8) * -1);
-  margin-right: calc(8px * -1);
-  margin-right: calc(var(--size-8) * -1);
-  margin-bottom: calc(8px * -1);
-  margin-bottom: calc(var(--size-8) * -1);
-}
-.np-drawer .np-drawer-header.np-drawer-header--withborder {
-  box-shadow: inset 0 -1px 0 0 #e2e6e8;
-}
-.np-theme-personal .np-drawer .np-drawer-header.np-drawer-header--withborder {
-  box-shadow: inset 0 -1px 0 0 rgba(0,0,0,0.10196);
-  box-shadow: inset 0 -1px 0 0 var(--color-border-neutral);
-}
-.np-drawer .np-drawer-header .np-text-title-body {
-  margin-right: 16px;
-  margin-right: var(--size-16);
-  font-size: 1.125rem;
-  font-size: var(--font-size-18);
-  letter-spacing: -0.01em;
-  letter-spacing: var(--letter-spacing-negative-xs);
-  line-height: 1.5rem;
-  line-height: var(--line-height-24);
-}
-.np-drawer .np-drawer-header .np-close-button {
-  margin-left: auto;
-}
-.np-drawer .np-drawer-header .tw-icon {
-  display: block;
-  cursor: pointer;
-  fill: #00b9ff;
+.np-drawer .np-drawer-title {
+  max-width: 85%;
 }
 .np-drawer .np-drawer-content {
   overflow-y: auto;
   flex: 1;
-}
-.np-drawer .np-drawer-content .np-theme-personal {
   background-color: transparent;
 }
-.np-drawer .np-drawer-footer,
-.np-drawer .np-drawer-content {
+.np-drawer .np-drawer-footer {
   padding: 16px;
   padding: var(--size-16);
 }
-.np-drawer .np-drawer-footer {
-  box-shadow: inset 0 1px 0 0 #e2e6e8;
-}
-.np-theme-personal .np-drawer .np-drawer-footer {
-  box-shadow: inset 0 1px 0 0 rgba(0,0,0,0.10196);
-  box-shadow: inset 0 1px 0 0 var(--color-border-neutral);
+.np-drawer .np-drawer-content {
+  padding: 0 16px;
+  padding: 0 var(--size-16);
 }
 @media (min-width: 768px) {
-  .np-drawer .np-drawer-header {
-    padding: 32px 24px;
-    padding: var(--size-32) var(--size-24);
-  }
-  .np-theme-personal .np-drawer .np-drawer-header {
+  .np-drawer .np-drawer-header,
+  .np-drawer .np-drawer-footer {
     padding: 24px;
     padding: var(--size-24);
   }
-  .np-drawer .np-drawer-footer,
   .np-drawer .np-drawer-content {
-    padding: 24px;
-    padding: var(--size-24);
+    padding: 0 24px;
+    padding: 0 var(--size-24);
   }
 }
 .wds-Divider {
@@ -4231,14 +4184,9 @@ button.np-link {
 .tw-modal .tw-modal-dialog {
   transition: transform 0.3s ease-out;
   transform: translateY(-25%);
-  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
-  background: #ffffff;
-  background: var(--color-background-elevated);
-}
-.np-theme-personal .tw-modal .tw-modal-dialog {
+  box-shadow: none;
   background: #ffffff;
   background: var(--color-background-elevated);
-  box-shadow: none;
   border-radius: 24px;
   border-radius: var(--radius-large);
 }
@@ -4247,6 +4195,7 @@ button.np-link {
 }
 .tw-modal .tw-modal-content {
   width: 100%;
+  background-color: transparent;
 }
 .tw-modal .tw-modal-content .tw-modal-body {
   flex: 1;
@@ -4255,26 +4204,6 @@ button.np-link {
 .tw-modal .tw-modal-content .tw-modal-body--scrollable {
   overflow-y: auto;
 }
-.tw-modal .tw-modal-content .tw-modal-header {
-  box-shadow: inset 0 -1px 0 0 #e2e6e8;
-}
-.np-theme-personal .tw-modal .tw-modal-content .tw-modal-header {
-  box-shadow: inset 0 -1px 0 0 rgba(0,0,0,0.10196);
-  box-shadow: inset 0 -1px 0 0 var(--color-border-neutral);
-}
-.np-theme-personal .tw-modal .tw-modal-content .tw-modal-header .np-close-button {
-  margin: calc(8px * -1) calc(8px * -1) calc(8px * -1) 0;
-  margin: calc(var(--size-8) * -1) calc(var(--size-8) * -1) calc(var(--size-8) * -1) 0;
-}
-.tw-modal .tw-modal-content .tw-modal-header.modal--withoutborder {
-  box-shadow: none;
-}
-.tw-modal .tw-modal-content .tw-modal-header .tw-icon {
-  fill: #0097c7;
-  fill: var(--color-content-accent);
-  cursor: pointer;
-  display: block;
-}
 .tw-modal .tw-modal-content .tw-modal-header,
 .tw-modal .tw-modal-content .tw-modal-footer,
 .tw-modal .tw-modal-content .tw-modal-body {
@@ -4289,55 +4218,16 @@ button.np-link {
   padding-top: var(--size-12);
   padding-bottom: 12px;
   padding-bottom: var(--size-12);
-  box-shadow: inset 0 1px 0 0 #e2e6e8;
-}
-.np-theme-personal .tw-modal .tw-modal-content .tw-modal-footer {
-  border-top: 1px solid rgba(0,0,0,0.10196);
-  border-top: 1px solid var(--color-border-neutral);
-}
-.np-theme-personal .tw-modal .tw-modal-content .tw-modal-footer,
-.tw-modal .tw-modal-content .tw-modal-footer.modal--withoutborder {
-  box-shadow: none;
-}
-.tw-modal .tw-modal-content.tw-modal-no-title .tw-modal-body {
-  padding-top: 0 !important;
-}
-.tw-modal .tw-modal-content.tw-modal-no-title .tw-modal-header {
-  min-height: 32px;
-  min-height: var(--size-32);
-  padding-bottom: 4px !important;
-}
-.tw-modal .tw-modal-content .np-theme-personal {
-  background-color: transparent;
-}
-.tw-modal table,
-.tw-modal .table {
-  background-color: transparent;
 }
 @media (min-width: 576px) {
   .tw-modal .tw-modal-content .tw-modal-header,
-  .tw-modal .tw-modal-content .tw-modal-footer,
-  .tw-modal .tw-modal-content .tw-modal-body {
-    padding: 32px 24px;
-    padding: var(--size-32) var(--size-24);
-  }
-  .np-theme-personal .tw-modal .tw-modal-content .tw-modal-header,
-  .np-theme-personal .tw-modal .tw-modal-content .tw-modal-footer,
-  .np-theme-personal .tw-modal .tw-modal-content .tw-modal-body {
+  .tw-modal .tw-modal-content .tw-modal-footer {
     padding: 24px;
     padding: var(--size-24);
   }
-  .tw-modal .tw-modal-compact .tw-modal-header {
-    min-height: calc(8px * 7);
-    min-height: calc(var(--size-8) * 7);
-  }
-  .tw-modal .tw-modal-compact .tw-modal-header,
-  .tw-modal .tw-modal-compact .tw-modal-footer,
-  .tw-modal .tw-modal-compact .tw-modal-body {
-    padding-top: 16px;
-    padding-top: var(--size-16);
-    padding-bottom: 16px;
-    padding-bottom: var(--size-16);
+  .tw-modal .tw-modal-content .tw-modal-body {
+    padding: 0 24px;
+    padding: 0 var(--size-24);
   }
 }
 @media (min-width: 480px) {

package/src/modal/Modal.css

@@ -6,14 +6,9 @@
 .tw-modal .tw-modal-dialog {
   transition: transform 0.3s ease-out;
   transform: translateY(-25%);
-  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
-  background: #ffffff;
-  background: var(--color-background-elevated);
-}
-.np-theme-personal .tw-modal .tw-modal-dialog {
+  box-shadow: none;
   background: #ffffff;
   background: var(--color-background-elevated);
-  box-shadow: none;
   border-radius: 24px;
   border-radius: var(--radius-large);
 }
@@ -22,6 +17,7 @@
 }
 .tw-modal .tw-modal-content {
   width: 100%;
+  background-color: transparent;
 }
 .tw-modal .tw-modal-content .tw-modal-body {
   flex: 1;
@@ -30,26 +26,6 @@
 .tw-modal .tw-modal-content .tw-modal-body--scrollable {
   overflow-y: auto;
 }
-.tw-modal .tw-modal-content .tw-modal-header {
-  box-shadow: inset 0 -1px 0 0 #e2e6e8;
-}
-.np-theme-personal .tw-modal .tw-modal-content .tw-modal-header {
-  box-shadow: inset 0 -1px 0 0 rgba(0,0,0,0.10196);
-  box-shadow: inset 0 -1px 0 0 var(--color-border-neutral);
-}
-.np-theme-personal .tw-modal .tw-modal-content .tw-modal-header .np-close-button {
-  margin: calc(8px * -1) calc(8px * -1) calc(8px * -1) 0;
-  margin: calc(var(--size-8) * -1) calc(var(--size-8) * -1) calc(var(--size-8) * -1) 0;
-}
-.tw-modal .tw-modal-content .tw-modal-header.modal--withoutborder {
-  box-shadow: none;
-}
-.tw-modal .tw-modal-content .tw-modal-header .tw-icon {
-  fill: #0097c7;
-  fill: var(--color-content-accent);
-  cursor: pointer;
-  display: block;
-}
 .tw-modal .tw-modal-content .tw-modal-header,
 .tw-modal .tw-modal-content .tw-modal-footer,
 .tw-modal .tw-modal-content .tw-modal-body {
@@ -64,55 +40,16 @@
   padding-top: var(--size-12);
   padding-bottom: 12px;
   padding-bottom: var(--size-12);
-  box-shadow: inset 0 1px 0 0 #e2e6e8;
-}
-.np-theme-personal .tw-modal .tw-modal-content .tw-modal-footer {
-  border-top: 1px solid rgba(0,0,0,0.10196);
-  border-top: 1px solid var(--color-border-neutral);
-}
-.np-theme-personal .tw-modal .tw-modal-content .tw-modal-footer,
-.tw-modal .tw-modal-content .tw-modal-footer.modal--withoutborder {
-  box-shadow: none;
-}
-.tw-modal .tw-modal-content.tw-modal-no-title .tw-modal-body {
-  padding-top: 0 !important;
-}
-.tw-modal .tw-modal-content.tw-modal-no-title .tw-modal-header {
-  min-height: 32px;
-  min-height: var(--size-32);
-  padding-bottom: 4px !important;
-}
-.tw-modal .tw-modal-content .np-theme-personal {
-  background-color: transparent;
-}
-.tw-modal table,
-.tw-modal .table {
-  background-color: transparent;
 }
 @media (min-width: 576px) {
   .tw-modal .tw-modal-content .tw-modal-header,
-  .tw-modal .tw-modal-content .tw-modal-footer,
-  .tw-modal .tw-modal-content .tw-modal-body {
-    padding: 32px 24px;
-    padding: var(--size-32) var(--size-24);
-  }
-  .np-theme-personal .tw-modal .tw-modal-content .tw-modal-header,
-  .np-theme-personal .tw-modal .tw-modal-content .tw-modal-footer,
-  .np-theme-personal .tw-modal .tw-modal-content .tw-modal-body {
+  .tw-modal .tw-modal-content .tw-modal-footer {
     padding: 24px;
     padding: var(--size-24);
   }
-  .tw-modal .tw-modal-compact .tw-modal-header {
-    min-height: calc(8px * 7);
-    min-height: calc(var(--size-8) * 7);
-  }
-  .tw-modal .tw-modal-compact .tw-modal-header,
-  .tw-modal .tw-modal-compact .tw-modal-footer,
-  .tw-modal .tw-modal-compact .tw-modal-body {
-    padding-top: 16px;
-    padding-top: var(--size-16);
-    padding-bottom: 16px;
-    padding-bottom: var(--size-16);
+  .tw-modal .tw-modal-content .tw-modal-body {
+    padding: 0 24px;
+    padding: 0 var(--size-24);
   }
 }
 @media (min-width: 480px) {