@geoinsight/react-components 0.3.2 → 0.3.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/cjs/index.css +11 -10
  2. package/dist/cjs/index.js +1 -1
  3. package/dist/esm/index.css +11 -10
  4. package/dist/esm/index.js +2 -2
  5. package/package.json +1 -1
package/dist/cjs/index.css CHANGED
@@ -282,42 +282,43 @@
282
282
  color: var(--color-neutral-100);
283
283
  }
284
284
 
285
- .modal__overlay {
286
- position: fixed;
287
- top: 0;
288
- left: 0;
285
+ .modal-overlay {
286
+ background: rgba(0, 0, 0, 0.3);
289
287
  bottom: 0;
288
+ left: 0;
289
+ position: fixed;
290
290
  right: 0;
291
- background: rgba(0, 0, 0, 0.3);
291
+ top: 0;
292
292
  }
293
293
 
294
- .modal__body {
294
+ .modal {
295
295
  background: white;
296
296
  border-radius: var(--spacing-8);
297
297
  border: 1px solid var(--color-neutral-600);
298
+ color: var(--color-black);
299
+ left: 50%;
298
300
  padding: var(--spacing-4) var(--spacing-4);
299
301
  position: absolute;
300
- left: 50%;
301
302
  right: var(--spacing-16);
302
- transform: translate(-50%, -50%);
303
303
  top: 50%;
304
+ transform: translate(-50%, -50%);
304
305
  z-index: 5;
305
306
  }
306
307
 
307
308
  .modal__close {
308
309
  position: absolute;
309
- top: calc(var(--spacing-16) * -1);
310
310
  right: calc(var(--spacing-16) * -1);
311
+ top: calc(var(--spacing-16) * -1);
311
312
  z-index: 5;
312
313
  }
313
314
 
314
315
  .modal__content {
315
316
  border: 1px solid var(--color-neutral-100);
316
317
  border-radius: var(--spacing-8);
317
- align-items: center;
318
318
  display: flex;
319
319
  flex-direction: column;
320
320
  gap: var(--spacing-16);
321
+ padding: 0 var(--spacing-16);
321
322
  }
322
323
 
323
324
  .modal__footer {
package/dist/cjs/index.js CHANGED
@@ -35,7 +35,7 @@ function TextArea({ className = "", disabled = true, hasToggleButton = true, hid
35
35
  }
36
36
 
37
37
  function Modal({ modalref, children, title, subtitle, footer, hasCloseButton = true, handleClose, }) {
38
- return (jsxRuntime.jsxs("div", { className: "modal", children: [jsxRuntime.jsx("div", { className: "modal__overlay" }), jsxRuntime.jsxs("div", { ref: modalref, className: "modal__body", children: [hasCloseButton && (jsxRuntime.jsx(Button, { mode: "secondary", className: "modal__close", size: "small", onClick: handleClose, children: jsxRuntime.jsx(io5.IoClose, {}) })), jsxRuntime.jsxs("div", { className: "modal__content", children: [title && (jsxRuntime.jsxs("div", { className: "modal__header", children: [jsxRuntime.jsx("h3", { children: title }), jsxRuntime.jsx("h6", { children: subtitle })] })), jsxRuntime.jsx("div", { className: "modal__children", children: children }), footer && jsxRuntime.jsx("div", { className: "modal__footer", children: footer })] })] })] }));
38
+ return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: "modal-overlay" }), jsxRuntime.jsxs("div", { ref: modalref, className: "modal", children: [hasCloseButton && (jsxRuntime.jsx(Button, { mode: "secondary", className: "modal__close", size: "small", onClick: handleClose, children: jsxRuntime.jsx(io5.IoClose, {}) })), jsxRuntime.jsxs("div", { className: "modal__content", children: [title && (jsxRuntime.jsxs("div", { className: "modal__header", children: [jsxRuntime.jsx("h3", { children: title }), jsxRuntime.jsx("h6", { children: subtitle })] })), jsxRuntime.jsx("div", { className: "modal__children", children: children }), footer && jsxRuntime.jsx("div", { className: "modal__footer", children: footer })] })] })] }));
39
39
  }
40
40
 
41
41
  function Loading({ img, children }) {
package/dist/esm/index.css CHANGED
@@ -282,42 +282,43 @@
282
282
  color: var(--color-neutral-100);
283
283
  }
284
284
 
285
- .modal__overlay {
286
- position: fixed;
287
- top: 0;
288
- left: 0;
285
+ .modal-overlay {
286
+ background: rgba(0, 0, 0, 0.3);
289
287
  bottom: 0;
288
+ left: 0;
289
+ position: fixed;
290
290
  right: 0;
291
- background: rgba(0, 0, 0, 0.3);
291
+ top: 0;
292
292
  }
293
293
 
294
- .modal__body {
294
+ .modal {
295
295
  background: white;
296
296
  border-radius: var(--spacing-8);
297
297
  border: 1px solid var(--color-neutral-600);
298
+ color: var(--color-black);
299
+ left: 50%;
298
300
  padding: var(--spacing-4) var(--spacing-4);
299
301
  position: absolute;
300
- left: 50%;
301
302
  right: var(--spacing-16);
302
- transform: translate(-50%, -50%);
303
303
  top: 50%;
304
+ transform: translate(-50%, -50%);
304
305
  z-index: 5;
305
306
  }
306
307
 
307
308
  .modal__close {
308
309
  position: absolute;
309
- top: calc(var(--spacing-16) * -1);
310
310
  right: calc(var(--spacing-16) * -1);
311
+ top: calc(var(--spacing-16) * -1);
311
312
  z-index: 5;
312
313
  }
313
314
 
314
315
  .modal__content {
315
316
  border: 1px solid var(--color-neutral-100);
316
317
  border-radius: var(--spacing-8);
317
- align-items: center;
318
318
  display: flex;
319
319
  flex-direction: column;
320
320
  gap: var(--spacing-16);
321
+ padding: 0 var(--spacing-16);
321
322
  }
322
323
 
323
324
  .modal__footer {
package/dist/esm/index.js CHANGED
@@ -1,4 +1,4 @@
1
- import { jsxs, jsx } from 'react/jsx-runtime';
1
+ import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
2
2
  import clsx from 'clsx';
3
3
  import { useRef, useState, createContext, useEffect, useContext, useReducer } from 'react';
4
4
  import { TbArrowsDiagonal2 } from 'react-icons/tb';
@@ -33,7 +33,7 @@ function TextArea({ className = "", disabled = true, hasToggleButton = true, hid
33
33
  }
34
34
 
35
35
  function Modal({ modalref, children, title, subtitle, footer, hasCloseButton = true, handleClose, }) {
36
- return (jsxs("div", { className: "modal", children: [jsx("div", { className: "modal__overlay" }), jsxs("div", { ref: modalref, className: "modal__body", children: [hasCloseButton && (jsx(Button, { mode: "secondary", className: "modal__close", size: "small", onClick: handleClose, children: jsx(IoClose, {}) })), jsxs("div", { className: "modal__content", children: [title && (jsxs("div", { className: "modal__header", children: [jsx("h3", { children: title }), jsx("h6", { children: subtitle })] })), jsx("div", { className: "modal__children", children: children }), footer && jsx("div", { className: "modal__footer", children: footer })] })] })] }));
36
+ return (jsxs(Fragment, { children: [jsx("div", { className: "modal-overlay" }), jsxs("div", { ref: modalref, className: "modal", children: [hasCloseButton && (jsx(Button, { mode: "secondary", className: "modal__close", size: "small", onClick: handleClose, children: jsx(IoClose, {}) })), jsxs("div", { className: "modal__content", children: [title && (jsxs("div", { className: "modal__header", children: [jsx("h3", { children: title }), jsx("h6", { children: subtitle })] })), jsx("div", { className: "modal__children", children: children }), footer && jsx("div", { className: "modal__footer", children: footer })] })] })] }));
37
37
  }
38
38
 
39
39
  function Loading({ img, children }) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@geoinsight/react-components",
3
- "version": "0.3.2",
3
+ "version": "0.3.4",
4
4
  "description": "This library is the main UI component library for geoinsight",
5
5
  "main": "dist/cjs/index.js",
6
6
  "module": "dist/esm/index.js",