@cypress-design/react-modal 0.1.0 → 0.2.0

package/.turbo/turbo-build.log

@@ -2,5 +2,5 @@ $ yarn build:module && yarn build:types
 $ rollup -c ./rollup.config.mjs
 
 ./index.ts → ./dist/index.umd.js, ./dist/index.es.mjs...
-created ./dist/index.umd.js, ./dist/index.es.mjs in 19.2s
+created ./dist/index.umd.js, ./dist/index.es.mjs in 16.7s
 $ tsc --project ./tsconfig.build.json

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @cypress-design/react-modal
 
+## 0.2.0
+
+### Minor Changes
+
+- [#281](https://github.com/cypress-io/cypress-design/pull/281) [`9ec1a81`](https://github.com/cypress-io/cypress-design/commit/9ec1a81cbe0a136bb8bd74b5af968c41615cefbc) Thanks [@ryanjwilke](https://github.com/ryanjwilke)! - update visuals of a modal
+
+### Patch Changes
+
+- Updated dependencies [[`e390827`](https://github.com/cypress-io/cypress-design/commit/e3908270ece513886c64cebcb78cebe0cd0d8c3d), [`9ec1a81`](https://github.com/cypress-io/cypress-design/commit/9ec1a81cbe0a136bb8bd74b5af968c41615cefbc)]:
+  - @cypress-design/react-icon@0.23.0
+  - @cypress-design/constants-modal@0.2.0
+
 ## 0.1.0
 
 ### Minor Changes

package/ReadMe.md

@@ -22,7 +22,11 @@ export default () => {
 
   return (
     <>
-      <Modal show={visible} title="modal" onClose={() => setVisible(false)}>
+      <Modal
+        show={visible}
+        title="Modal Title"
+        onClose={() => setVisible(false)}
+      >
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Id perspiciatis
         hic ad minima ex recusandae autem incidunt, perferendis, illo voluptatum
         repudiandae iste voluptate reiciendis quam officiis voluptas laboriosam

package/dist/index.es.mjs

@@ -30919,7 +30919,7 @@ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
 OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
 PERFORMANCE OF THIS SOFTWARE.
 ***************************************************************************** */
-/* global Reflect, Promise */
+/* global Reflect, Promise, SuppressedError, Symbol */
 
 
 var __assign = function() {
@@ -30943,7 +30943,12 @@ function __rest(s, e) {
                 t[p[i]] = s[p[i]];
         }
     return t;
-}
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
 
 var compileReactIconProperties = function (_a) {
     var body = _a.body, defs = _a.defs, compiledClasses = _a.compiledClasses, size = _a.size, name = _a.name, attributes = __rest(_a, ["body", "defs", "compiledClasses", "size", "name"]);
@@ -31026,17 +31031,17 @@ function freeBodyScroll() {
     window.scrollTo({ top: scrollY });
 }
 
-const ClassBackDrop = 'fixed left-0 top-0 z-[1000010] h-screen w-screen bg-gray-900/[.92] backdrop-blur';
+const ClassBackDrop = 'fixed left-0 top-0 z-[1000010] h-screen w-screen bg-gray-900/[.80] backdrop-blur-sm';
 const ClassModalContainer = 'pointer-events-none fixed left-0 top-0 z-[1000020] h-full w-screen overflow-hidden flex items-center justify-center';
-const ClassModal = 'pointer-events-auto relative flex flex-col rounded-lg border-4 border-gray-700 bg-white';
-const ClassModalStandardDimensions = 'max-h-[80vh] min-w-[200px] sm:min-w-[390px] sm:max-w-[70vw] shrink-0';
+const ClassModal = 'pointer-events-auto relative flex flex-col rounded outline outline-4 outline-gray-500/[.40] bg-white';
+const ClassModalStandardDimensions = 'max-h-[80vh] min-w-[200px] sm:min-w-[390px] max-w-[calc(100vw-32px)] sm:max-w-[70vw] shrink-0';
 const ClassModalFullscreenDimensions = 'h-[calc(100vh-32px)] sm:w-[calc(100vw-32px)]';
-const ClassTitleBox = 'flex shrink-0 items-center justify-between rounded-t-md border-b border-gray-100 p-[16px] px-[24px]';
+const ClassTitleBox = 'flex shrink-0 items-center justify-between rounded-t-md border-b border-gray-100 p-[16px] px-16px sm:px-[24px]';
 const ClassTitle = 'text-[18px] font-medium leading-[28px] text-gray-900';
 const ClassHelpLinkDash = 'mx-[8px] h-[1px] w-[32px] bg-gray-100';
 const ClassHelpLink = 'flex items-center text-[16px] font-normal leading-[24px] text-indigo-500';
 const ClassCloseButton = 'group rounded-full border-transparent p-[4px] outline-none';
-const ClassContent = 'overflow-y-auto p-[16px]';
+const ClassContent = 'overflow-y-auto p-[16px] sm:px-[24px]';
 
 var Modal = function (_a) {
     var _b = _a.show, show = _b === void 0 ? false : _b, title = _a.title, helpLink = _a.helpLink, onClose = _a.onClose, children = _a.children, _c = _a.fullscreen, fullscreen = _c === void 0 ? false : _c;
@@ -31073,4 +31078,4 @@ var Modal = function (_a) {
 export { Modal as default };
 //# sourceMappingURL=index.es.mjs.map
 
-/* <wind-keep class="ml-[4px] grow fixed left-0 top-0 z-[1000010] h-screen w-screen bg-gray-900/[.92] backdrop-blur pointer-events-none z-[1000020] h-full overflow-hidden flex items-center justify-center pointer-events-auto relative flex-col rounded-lg border-4 border-gray-700 bg-white max-h-[80vh] min-w-[200px] sm:min-w-[390px] sm:max-w-[70vw] shrink-0 h-[calc(100vh-32px)] sm:w-[calc(100vw-32px)] justify-between rounded-t-md border-b border-gray-100 p-[16px] px-[24px] text-[18px] font-medium leading-[28px] text-gray-900 mx-[8px] h-[1px] w-[32px] bg-gray-100 text-[16px] font-normal leading-[24px] text-indigo-500 rounded-full border-transparent p-[4px] outline-none overflow-y-auto cy-modal-overflow-hidden cy-modal-overflow-scroll-x cy-modal-overflow-scroll-y"> */
+/* <wind-keep class="ml-[4px] grow children:transition-all fixed left-0 top-0 z-[1000010] h-screen w-screen bg-gray-900/[.80] backdrop-blur-sm pointer-events-none z-[1000020] h-full overflow-hidden flex items-center justify-center pointer-events-auto relative flex-col rounded outline outline-4 outline-gray-500/[.40] bg-white max-h-[80vh] min-w-[200px] sm:min-w-[390px] max-w-[calc(100vw-32px)] sm:max-w-[70vw] shrink-0 h-[calc(100vh-32px)] sm:w-[calc(100vw-32px)] justify-between rounded-t-md border-b border-gray-100 p-[16px] sm:px-[24px] text-[18px] font-medium leading-[28px] text-gray-900 mx-[8px] h-[1px] w-[32px] bg-gray-100 text-[16px] font-normal leading-[24px] text-indigo-500 rounded-full border-transparent p-[4px] outline-none overflow-y-auto cy-modal-overflow-hidden cy-modal-overflow-scroll-x cy-modal-overflow-scroll-y"> */