@toptal/picasso-prompt-modal 1.0.24 → 2.0.1

package/dist-package/src/PromptModal/PromptModal.d.ts

@@ -36,6 +36,6 @@ export interface Props extends Omit<ModalProps, 'children' | 'onSubmit'> {
         submitButton?: string;
     };
 }
-export declare const PromptModal: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLElement>>;
+export declare const PromptModal: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
 export default PromptModal;
 //# sourceMappingURL=PromptModal.d.ts.map

package/dist-package/src/PromptModal/PromptModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PromptModal.d.ts","sourceRoot":"","sources":["../../../src/PromptModal/PromptModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,KAAqB,MAAM,OAAO,CAAA;AAOzC,OAAO,KAAK,EAAE,KAAK,IAAI,UAAU,EAAE,MAAM,uBAAuB,CAAA;AAMhE,oBAAY,WAAW,GAAG,UAAU,GAAG,UAAU,CAAA;AAEjD,oBAAY,aAAa,GAAG;IAC1B,SAAS,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAA;IACvC,MAAM,EAAE,OAAO,CAAA;IACf,UAAU,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;IACtC,OAAO,EAAE,OAAO,CAAA;IAChB,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAA;IAClC,KAAK,EAAE,OAAO,CAAA;CACf,CAAA;AAMD,MAAM,WAAW,KAAM,SAAQ,IAAI,CAAC,UAAU,EAAE,UAAU,GAAG,UAAU,CAAC;IACtE,0EAA0E;IAC1E,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,aAAa,KAAK,SAAS,CAAA;IAC/C,qBAAqB;IACrB,KAAK,EAAE,MAAM,CAAA;IACb,qBAAqB;IACrB,OAAO,EAAE,MAAM,CAAA;IACf,6DAA6D;IAC7D,OAAO,CAAC,EAAE,WAAW,CAAA;IACrB,4BAA4B;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,4BAA4B;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,qFAAqF;IACrF,QAAQ,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,OAAO,CAAC,OAAO,CAAC,GAAG,OAAO,CAAA;IACzD,aAAa,CAAC,EAAE,MAAM,IAAI,CAAA;IAC1B,uCAAuC;IACvC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,OAAO,CAAC,EAAE;QACR,KAAK,CAAC,EAAE,MAAM,CAAA;QACd,OAAO,CAAC,EAAE,MAAM,CAAA;QAChB,WAAW,CAAC,EAAE,MAAM,CAAA;QACpB,YAAY,CAAC,EAAE,MAAM,CAAA;KACtB,CAAA;CACF;AAED,eAAO,MAAM,WAAW,2EAqGtB,CAAA;AAaF,eAAe,WAAW,CAAA"}
+{"version":3,"file":"PromptModal.d.ts","sourceRoot":"","sources":["../../../src/PromptModal/PromptModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,KAAqB,MAAM,OAAO,CAAA;AAKzC,OAAO,KAAK,EAAE,KAAK,IAAI,UAAU,EAAE,MAAM,uBAAuB,CAAA;AAIhE,oBAAY,WAAW,GAAG,UAAU,GAAG,UAAU,CAAA;AAEjD,oBAAY,aAAa,GAAG;IAC1B,SAAS,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAA;IACvC,MAAM,EAAE,OAAO,CAAA;IACf,UAAU,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;IACtC,OAAO,EAAE,OAAO,CAAA;IAChB,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAA;IAClC,KAAK,EAAE,OAAO,CAAA;CACf,CAAA;AAED,MAAM,WAAW,KAAM,SAAQ,IAAI,CAAC,UAAU,EAAE,UAAU,GAAG,UAAU,CAAC;IACtE,0EAA0E;IAC1E,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,aAAa,KAAK,SAAS,CAAA;IAC/C,qBAAqB;IACrB,KAAK,EAAE,MAAM,CAAA;IACb,qBAAqB;IACrB,OAAO,EAAE,MAAM,CAAA;IACf,6DAA6D;IAC7D,OAAO,CAAC,EAAE,WAAW,CAAA;IACrB,4BAA4B;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,4BAA4B;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,qFAAqF;IACrF,QAAQ,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,OAAO,CAAC,OAAO,CAAC,GAAG,OAAO,CAAA;IACzD,aAAa,CAAC,EAAE,MAAM,IAAI,CAAA;IAC1B,uCAAuC;IACvC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,OAAO,CAAC,EAAE;QACR,KAAK,CAAC,EAAE,MAAM,CAAA;QACd,OAAO,CAAC,EAAE,MAAM,CAAA;QAChB,WAAW,CAAC,EAAE,MAAM,CAAA;QACpB,YAAY,CAAC,EAAE,MAAM,CAAA;KACtB,CAAA;CACF;AAED,eAAO,MAAM,WAAW,8EAgGvB,CAAA;AAaD,eAAe,WAAW,CAAA"}

package/dist-package/src/PromptModal/PromptModal.js

@@ -19,19 +19,13 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React, { forwardRef } from 'react';
-import { makeStyles } from '@material-ui/core/styles';
 import { Container } from '@toptal/picasso-container';
 import { Typography } from '@toptal/picasso-typography';
 import { Button } from '@toptal/picasso-button';
 import { noop, useSafeState } from '@toptal/picasso-utils';
 import { ModalCompound as Modal } from '@toptal/picasso-modal';
-import styles from './styles';
-const useStyles = makeStyles(styles, {
-    name: 'PicassoPromptModal',
-});
 export const PromptModal = forwardRef(function PromptModal(props, ref) {
     const { children, title, message, variant, submitText, cancelText, onSubmit, onAfterSubmit = noop, onCancel = noop, onClose, testIds } = props, rest = __rest(props, ["children", "title", "message", "variant", "submitText", "cancelText", "onSubmit", "onAfterSubmit", "onCancel", "onClose", "testIds"]);
-    const classes = useStyles();
     const [result, setResult] = useSafeState();
     const [loading, setLoading] = useSafeState(false);
     const [error, setError] = useSafeState(false);
@@ -62,8 +56,8 @@ export const PromptModal = forwardRef(function PromptModal(props, ref) {
             onClose();
         }
     };
-    return (React.createElement(Modal, Object.assign({ ref: ref, onClose: onClose && handleClose, classes: classes }, rest),
-        title && React.createElement(Modal.Title, { "data-testid": testIds === null || testIds === void 0 ? void 0 : testIds.title }, title),
+    return (React.createElement(Modal, Object.assign({ ref: ref, onClose: onClose && handleClose }, rest),
+        title && (React.createElement(Modal.Title, { "data-testid": testIds === null || testIds === void 0 ? void 0 : testIds.title }, title)),
         React.createElement(Modal.Content, null,
             React.createElement(Typography, { size: 'medium', "data-testid": testIds === null || testIds === void 0 ? void 0 : testIds.message }, message),
             children && (React.createElement(Container, { top: 'xsmall' }, children({

package/dist-package/src/PromptModal/PromptModal.js.map

@@ -1 +1 @@
-{"version":3,"file":"PromptModal.js","sourceRoot":"","sources":["../../../src/PromptModal/PromptModal.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"PromptModal.js","sourceRoot":"","sources":["../../../src/PromptModal/PromptModal.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toptal/picasso-prompt-modal",
-  "version": "1.0.24",
+  "version": "2.0.1",
   "description": "Toptal UI components library - PromptModal",
   "publishConfig": {
     "access": "public"
@@ -22,10 +22,10 @@
   },
   "homepage": "https://github.com/toptal/picasso/tree/master/packages/picasso#readme",
   "dependencies": {
-    "@toptal/picasso-button": "2.1.1",
-    "@toptal/picasso-container": "1.0.3",
-    "@toptal/picasso-modal": "2.0.10",
-    "@toptal/picasso-typography": "2.0.2",
+    "@toptal/picasso-button": "3.0.1",
+    "@toptal/picasso-container": "2.0.0",
+    "@toptal/picasso-modal": "3.0.1",
+    "@toptal/picasso-typography": "3.0.0",
     "@toptal/picasso-utils": "1.0.3"
   },
   "sideEffects": [
@@ -33,8 +33,8 @@
     "**/styles.js"
   ],
   "peerDependencies": {
-    "@material-ui/core": "4.12.4",
-    "react": ">=16.12.0 < 19.0.0"
+    "react": ">=16.12.0 < 19.0.0",
+    "@toptal/picasso-tailwind": ">=2.7"
   },
   "exports": {
     ".": "./dist-package/src/index.js"

package/src/PromptModal/PromptModal.tsx

@@ -1,7 +1,5 @@
 import type { ReactNode } from 'react'
 import React, { forwardRef } from 'react'
-import type { Theme } from '@material-ui/core/styles'
-import { makeStyles } from '@material-ui/core/styles'
 import { Container } from '@toptal/picasso-container'
 import { Typography } from '@toptal/picasso-typography'
 import { Button } from '@toptal/picasso-button'
@@ -10,8 +8,6 @@ import type { Props as ModalProps } from '@toptal/picasso-modal'
 import { ModalCompound as Modal } from '@toptal/picasso-modal'
 import type { VariantType as ButtonVariantType } from '@toptal/picasso-button'
 
-import styles from './styles'
-
 export type VariantType = 'positive' | 'negative'
 
 export type PromptOptions = {
@@ -23,10 +19,6 @@ export type PromptOptions = {
   error: boolean
 }
 
-const useStyles = makeStyles<Theme>(styles, {
-  name: 'PicassoPromptModal',
-})
-
 export interface Props extends Omit<ModalProps, 'children' | 'onSubmit'> {
   /** Pass input component to allow you get input value from prompt modal */
   children?: (result: PromptOptions) => ReactNode
@@ -54,108 +46,103 @@ export interface Props extends Omit<ModalProps, 'children' | 'onSubmit'> {
   }
 }
 
-export const PromptModal = forwardRef<HTMLElement, Props>(function PromptModal(
-  props,
-  ref
-) {
-  const {
-    children,
-    title,
-    message,
-    variant,
-    submitText,
-    cancelText,
-    onSubmit,
-    onAfterSubmit = noop,
-    onCancel = noop,
-    onClose,
-    testIds,
-    ...rest
-  } = props
-  const classes = useStyles()
-  const [result, setResult] = useSafeState<unknown>()
-  const [loading, setLoading] = useSafeState(false)
-  const [error, setError] = useSafeState(false)
-
-  const handleSubmit = async () => {
-    try {
-      setLoading(true)
-      setError(false)
-
-      await onSubmit(result)
-
-      setLoading(false)
-      handleOnAfterSubmit()
-    } catch (err) {
-      setError(true)
-      setLoading(false)
+export const PromptModal = forwardRef<HTMLDivElement, Props>(
+  function PromptModal(props, ref) {
+    const {
+      children,
+      title,
+      message,
+      variant,
+      submitText,
+      cancelText,
+      onSubmit,
+      onAfterSubmit = noop,
+      onCancel = noop,
+      onClose,
+      testIds,
+      ...rest
+    } = props
+    const [result, setResult] = useSafeState<unknown>()
+    const [loading, setLoading] = useSafeState(false)
+    const [error, setError] = useSafeState(false)
+
+    const handleSubmit = async () => {
+      try {
+        setLoading(true)
+        setError(false)
+
+        await onSubmit(result)
+
+        setLoading(false)
+        handleOnAfterSubmit()
+      } catch (err) {
+        setError(true)
+        setLoading(false)
+      }
     }
-  }
 
-  const handleOnAfterSubmit = () => {
-    onAfterSubmit()
-    handleClose()
-  }
+    const handleOnAfterSubmit = () => {
+      onAfterSubmit()
+      handleClose()
+    }
 
-  const handleCancel = () => {
-    onCancel()
-    handleClose()
-  }
+    const handleCancel = () => {
+      onCancel()
+      handleClose()
+    }
 
-  const handleClose = () => {
-    setResult(undefined)
+    const handleClose = () => {
+      setResult(undefined)
 
-    if (onClose) {
-      onClose()
+      if (onClose) {
+        onClose()
+      }
     }
-  }
 
-  return (
-    <Modal
-      ref={ref}
-      onClose={onClose && handleClose}
-      classes={classes}
-      {...rest}
-    >
-      {title && <Modal.Title data-testid={testIds?.title}>{title}</Modal.Title>}
-      <Modal.Content>
-        <Typography size='medium' data-testid={testIds?.message}>
-          {message}
-        </Typography>
-        {children && (
-          <Container top='xsmall'>
-            {children({
-              setResult,
-              result,
-              setLoading,
-              loading,
-              setError,
-              error,
-            })}
-          </Container>
+    return (
+      <Modal ref={ref} onClose={onClose && handleClose} {...rest}>
+        {title && (
+          <Modal.Title data-testid={testIds?.title}>{title}</Modal.Title>
         )}
-      </Modal.Content>
-      <Modal.Actions>
-        <Button
-          disabled={loading}
-          variant='secondary'
-          onClick={handleCancel}
-          data-testid={testIds?.closeButton}
-        >
-          {cancelText}
-        </Button>
-        <Button
-          loading={loading}
-          onClick={handleSubmit}
-          variant={`${variant}` as ButtonVariantType}
-          data-testid={testIds?.submitButton}
-        >
-          {submitText}
-        </Button>
-      </Modal.Actions>
-    </Modal>
-  )
-})
+        <Modal.Content>
+          <Typography size='medium' data-testid={testIds?.message}>
+            {message}
+          </Typography>
+          {children && (
+            <Container top='xsmall'>
+              {children({
+                setResult,
+                result,
+                setLoading,
+                loading,
+                setError,
+                error,
+              })}
+            </Container>
+          )}
+        </Modal.Content>
+        <Modal.Actions>
+          <Button
+            disabled={loading}
+            variant='secondary'
+            onClick={handleCancel}
+            data-testid={testIds?.closeButton}
+          >
+            {cancelText}
+          </Button>
+          <Button
+            loading={loading}
+            onClick={handleSubmit}
+            variant={`${variant}` as ButtonVariantType}
+            data-testid={testIds?.submitButton}
+          >
+            {submitText}
+          </Button>
+        </Modal.Actions>
+      </Modal>
+    )
+  }
+)
 
 PromptModal.defaultProps = {
   cancelText: 'Cancel',

package/src/PromptModal/__snapshots__/test.tsx.snap

@@ -10,87 +10,81 @@ exports[`PromptModal renders 1`] = `
     />
   </div>
   <div
-    class="MuiDialog-root PicassoModal-root"
+    class="base-Modal fixed z-modal inset-0 flex flex-col text-lg leading-[normal] justify-center items-center"
     role="presentation"
-    style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;"
   >
     <div
       aria-hidden="true"
-      class="MuiBackdrop-root"
-      style="opacity: 1; webkit-transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+      class="opacity-0 transition-opacity fixed -z inset-0 bg-black -webkit-tap-highlight-color bg-opacity"
+      style="transition-duration: 300ms; opacity: 1;"
     />
     <div
-      data-test="sentinelStart"
+      data-testid="sentinelStart"
       tabindex="0"
     />
     <div
-      class="MuiDialog-container PicassoModal-container MuiDialog-scrollPaper"
-      role="none presentation"
-      style="opacity: 1; webkit-transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+      class="bg-white shadow-2 duration-300 delay-0 opacity-0 transition-opacity outline-none overflow-y flex flex-col m-4 sm:h-auto sm:m-8 max-w-[calc(100%_ sm:max-w-[calc(100%_ rounded-md w-[32.5rem] relative max-h-[calc(100%_ sm:max-h-[calc(100%_"
+      role="dialog"
+      style="transition-duration: 300ms; opacity: 1;"
       tabindex="-1"
     >
       <div
-        class="MuiPaper-root MuiDialog-paper PicassoModal-paper PicassoModal-small MuiDialog-paperScrollPaper MuiDialog-paperWidthFalse MuiPaper-elevation2"
-        role="dialog"
+        class="pr-6 mt-8 mx-8 mb-0"
       >
-        <div
-          class="PicassoModalTitle-root"
+        <h2
+          class="m-0 text-xl text-black font-semibold"
         >
-          <h2
-            class="m-0 text-xl text-black font-semibold"
-          >
-            Test title
-          </h2>
-        </div>
+          Test title
+        </h2>
+      </div>
+      <div
+        class="flex relative flex-auto overflow-y"
+      >
         <div
-          class="PicassoModalContent-wrapper"
+          class="pt-6 px-8 pb-8 overflow-auto flex-auto"
         >
-          <div
-            class="PicassoModalContent-modalContent"
+          <p
+            class="m-0 text-md text-graphite font-regular"
           >
-            <p
-              class="m-0 text-md text-graphite font-regular"
-            >
-              Test message
-            </p>
-          </div>
+            Test message
+          </p>
         </div>
-        <div
-          class="PicassoModalAction-root"
+      </div>
+      <div
+        class="mt-0 mx-8 mb-8 text-right"
+      >
+        <button
+          aria-disabled="false"
+          class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none [&+&]:ml-4 cursor-pointer no-underline hover:no-underline rounded-sm shadow-none focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] focus-within:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] border border-solid text-black hover:border-black visited:text-black active:bg-gray active:border-black bg-white border-gray min-w h-8 py-0 px-4"
+          data-component-type="button"
+          role="button"
+          tabindex="0"
+          type="button"
         >
-          <button
-            aria-disabled="false"
-            class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none [&+&]:ml-4 cursor-pointer no-underline hover:no-underline rounded-sm shadow-none focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] focus-within:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] border border-solid text-black hover:border-black visited:text-black active:bg-gray active:border-black bg-white border-gray min-w h-8 py-0 px-4"
-            data-component-type="button"
-            role="button"
-            tabindex="0"
-            type="button"
+          <span
+            class="items-center inline-flex font-semibold whitespace-nowrap text-button"
           >
-            <span
-              class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline font-semibold whitespace-nowrap text-button"
-            >
-              Cancel
-            </span>
-          </button>
-          <button
-            aria-disabled="false"
-            class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none [&+&]:ml-4 cursor-pointer no-underline hover:no-underline rounded-sm shadow-none focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] focus-within:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] border-none text-white visited:text-white hover:bg-[#27D496] active:bg-[#00A96C] bg-green min-w h-8 py-0 px-4"
-            data-component-type="button"
-            role="button"
-            tabindex="0"
-            type="button"
+            Cancel
+          </span>
+        </button>
+        <button
+          aria-disabled="false"
+          class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none [&+&]:ml-4 cursor-pointer no-underline hover:no-underline rounded-sm shadow-none focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] focus-within:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] border-none text-white visited:text-white hover:bg-[#27D496] active:bg-[#00A96C] bg-green min-w h-8 py-0 px-4"
+          data-component-type="button"
+          role="button"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="items-center inline-flex font-semibold whitespace-nowrap text-button"
           >
-            <span
-              class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline font-semibold whitespace-nowrap text-button"
-            >
-              Submit
-            </span>
-          </button>
-        </div>
+            Submit
+          </span>
+        </button>
       </div>
     </div>
     <div
-      data-test="sentinelEnd"
+      data-testid="sentinelEnd"
       tabindex="0"
     />
   </div>
@@ -112,7 +106,7 @@ exports[`PromptModal showPrompt opens and closes modal on Submit action 1`] = `
         type="button"
       >
         <span
-          class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline font-semibold whitespace-nowrap text-button"
+          class="items-center inline-flex font-semibold whitespace-nowrap text-button"
         >
           Show
         </span>
@@ -138,93 +132,87 @@ exports[`PromptModal showPrompt opens and closes modal on Submit action 2`] = `
         type="button"
       >
         <span
-          class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline font-semibold whitespace-nowrap text-button"
+          class="items-center inline-flex font-semibold whitespace-nowrap text-button"
         >
           Show
         </span>
       </button>
       <div
-        class="MuiDialog-root PicassoModal-root"
+        class="base-Modal fixed z-modal inset-0 flex flex-col text-lg leading-[normal] justify-center items-center"
         role="presentation"
-        style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;"
       >
         <div
           aria-hidden="true"
-          class="MuiBackdrop-root"
-          style="opacity: 1; webkit-transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+          class="opacity-0 transition-opacity fixed -z inset-0 bg-black -webkit-tap-highlight-color bg-opacity"
+          style="transition-duration: 300ms; opacity: 1;"
         />
         <div
-          data-test="sentinelStart"
+          data-testid="sentinelStart"
           tabindex="0"
         />
         <div
-          class="MuiDialog-container PicassoModal-container MuiDialog-scrollPaper"
-          role="none presentation"
-          style="opacity: 1; webkit-transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+          class="bg-white shadow-2 duration-300 delay-0 opacity-0 transition-opacity outline-none overflow-y flex flex-col m-4 sm:h-auto sm:m-8 max-w-[calc(100%_ sm:max-w-[calc(100%_ rounded-md w-[32.5rem] relative max-h-[calc(100%_ sm:max-h-[calc(100%_"
+          role="dialog"
+          style="transition-duration: 300ms; opacity: 1;"
           tabindex="-1"
         >
           <div
-            class="MuiPaper-root MuiDialog-paper PicassoModal-paper PicassoModal-small MuiDialog-paperScrollPaper MuiDialog-paperWidthFalse MuiPaper-elevation2"
-            role="dialog"
+            class="pr-6 mt-8 mx-8 mb-0"
           >
-            <div
-              class="PicassoModalTitle-root"
+            <h2
+              class="m-0 text-xl text-black font-semibold"
             >
-              <h2
-                class="m-0 text-xl text-black font-semibold"
-              >
-                Test title
-              </h2>
-            </div>
+              Test title
+            </h2>
+          </div>
+          <div
+            class="flex relative flex-auto overflow-y"
+          >
             <div
-              class="PicassoModalContent-wrapper"
+              class="pt-6 px-8 pb-8 overflow-auto flex-auto"
             >
-              <div
-                class="PicassoModalContent-modalContent"
+              <p
+                class="m-0 text-md text-graphite font-regular"
               >
-                <p
-                  class="m-0 text-md text-graphite font-regular"
-                >
-                  Test message
-                </p>
-              </div>
+                Test message
+              </p>
             </div>
-            <div
-              class="PicassoModalAction-root"
+          </div>
+          <div
+            class="mt-0 mx-8 mb-8 text-right"
+          >
+            <button
+              aria-disabled="false"
+              class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none [&+&]:ml-4 cursor-pointer no-underline hover:no-underline rounded-sm shadow-none focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] focus-within:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] border border-solid text-black hover:border-black visited:text-black active:bg-gray active:border-black bg-white border-gray min-w h-8 py-0 px-4"
+              data-component-type="button"
+              role="button"
+              tabindex="0"
+              type="button"
             >
-              <button
-                aria-disabled="false"
-                class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none [&+&]:ml-4 cursor-pointer no-underline hover:no-underline rounded-sm shadow-none focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] focus-within:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] border border-solid text-black hover:border-black visited:text-black active:bg-gray active:border-black bg-white border-gray min-w h-8 py-0 px-4"
-                data-component-type="button"
-                role="button"
-                tabindex="0"
-                type="button"
+              <span
+                class="items-center inline-flex font-semibold whitespace-nowrap text-button"
               >
-                <span
-                  class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline font-semibold whitespace-nowrap text-button"
-                >
-                  Cancel
-                </span>
-              </button>
-              <button
-                aria-disabled="false"
-                class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none [&+&]:ml-4 cursor-pointer no-underline hover:no-underline rounded-sm shadow-none focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] focus-within:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] border-none text-white visited:text-white hover:bg-[#27D496] active:bg-[#00A96C] bg-green min-w h-8 py-0 px-4"
-                data-component-type="button"
-                role="button"
-                tabindex="0"
-                type="button"
+                Cancel
+              </span>
+            </button>
+            <button
+              aria-disabled="false"
+              class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none [&+&]:ml-4 cursor-pointer no-underline hover:no-underline rounded-sm shadow-none focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] focus-within:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] border-none text-white visited:text-white hover:bg-[#27D496] active:bg-[#00A96C] bg-green min-w h-8 py-0 px-4"
+              data-component-type="button"
+              role="button"
+              tabindex="0"
+              type="button"
+            >
+              <span
+                class="items-center inline-flex font-semibold whitespace-nowrap text-button"
               >
-                <span
-                  class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline font-semibold whitespace-nowrap text-button"
-                >
-                  Submit
-                </span>
-              </button>
-            </div>
+                Submit
+              </span>
+            </button>
           </div>
         </div>
         <div
-          data-test="sentinelEnd"
+          data-testid="sentinelEnd"
           tabindex="0"
         />
       </div>
@@ -248,7 +236,7 @@ exports[`PromptModal showPrompt opens and closes modal on Submit action 3`] = `
         type="button"
       >
         <span
-          class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline font-semibold whitespace-nowrap text-button"
+          class="items-center inline-flex font-semibold whitespace-nowrap text-button"
         >
           Show
         </span>
@@ -273,7 +261,7 @@ exports[`PromptModal showPrompt with input returns result on Submit action 1`] =
         type="button"
       >
         <span
-          class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline font-semibold whitespace-nowrap text-button"
+          class="items-center inline-flex font-semibold whitespace-nowrap text-button"
         >
           Show
         </span>

package/dist-package/src/PromptModal/styles.d.ts

@@ -1,3 +0,0 @@
-declare const _default: () => import("@material-ui/styles").StyleRules<{}, never>;
-export default _default;
-//# sourceMappingURL=styles.d.ts.map

package/dist-package/src/PromptModal/styles.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/PromptModal/styles.ts"],"names":[],"mappings":";AAEA,wBAAqC"}

package/dist-package/src/PromptModal/styles.js

@@ -1,3 +0,0 @@
-import { createStyles } from '@material-ui/core/styles';
-export default () => createStyles({});
-//# sourceMappingURL=styles.js.map

package/dist-package/src/PromptModal/styles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/PromptModal/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEvD,eAAe,GAAG,EAAE,CAAC,YAAY,CAAC,EAAE,CAAC,CAAA"}

package/src/PromptModal/styles.ts

@@ -1,3 +0,0 @@
-import { createStyles } from '@material-ui/core/styles'
-
-export default () => createStyles({})