@alfalab/core-components-notification 6.1.12 → 6.1.13

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 (8) hide show
  1. package/Component.js +1 -1
  2. package/cssm/index.module.css +16 -21
  3. package/esm/Component.js +1 -1
  4. package/esm/index.css +17 -22
  5. package/index.css +17 -22
  6. package/modern/Component.js +1 -1
  7. package/modern/index.css +17 -22
  8. package/package.json +2 -2
package/Component.js CHANGED
@@ -56,7 +56,7 @@ function __rest(s, e) {
56
56
  return t;
57
57
  }
58
58
 
59
- var styles = {"notificationComponent":"notification__notificationComponent_ca0bc","isVisible":"notification__isVisible_ca0bc","isClosing":"notification__isClosing_ca0bc","toastContent":"notification__toastContent_ca0bc","actionSection":"notification__actionSection_ca0bc"};
59
+ var styles = {"notificationComponent":"notification__notificationComponent_r3fry","isVisible":"notification__isVisible_r3fry","isClosing":"notification__isClosing_r3fry","toastContent":"notification__toastContent_r3fry","actionSection":"notification__actionSection_r3fry"};
60
60
  require('./index.css')
61
61
 
62
62
  var notificationClassNameSelector = ".".concat(styles.notificationComponent);
package/cssm/index.module.css CHANGED
@@ -1,22 +1,26 @@
1
1
  :root {
2
+ } /* deprecated */ :root {
3
+ } :root {
4
+ } :root {
5
+ } :root {
2
6
 
3
7
  /* Hard */
4
8
 
5
9
  /* Up */
6
10
 
7
11
  /* Hard up */
8
- }
9
- :root {
12
+ } :root {
13
+ } :root {
10
14
  --gap-xs: 8px;
11
15
  --gap-s: 12px;
12
16
  --gap-xl: 24px;
13
17
  --gap-4xl: 48px;
14
18
  --gap-s-neg: -12px;
15
- }
16
- :root {
19
+ } :root {
20
+ } :root {
21
+ } :root {
17
22
  --notification-desktop-content-width: 278px;
18
- }
19
- .notificationComponent {
23
+ } .notificationComponent {
20
24
  visibility: hidden;
21
25
  position: fixed;
22
26
  right: var(--gap-s);
@@ -27,33 +31,24 @@
27
31
  -webkit-user-select: none;
28
32
  user-select: none;
29
33
  transition: transform 0.4s ease-out
30
- }
31
- @media screen and (min-width: 600px) {
32
- .notificationComponent {
34
+ } @media screen and (min-width: 600px) { .notificationComponent {
33
35
  right: var(--gap-4xl);
34
36
  width: auto;
35
37
  transform: translate(calc(100% + var(--gap-4xl)), 0)
36
38
  }
37
- }
38
- .notificationComponent.isVisible {
39
+ } .notificationComponent.isVisible {
39
40
  visibility: visible;
40
41
  transform: translate(0, 0);
41
- }
42
- .notificationComponent.isClosing {
42
+ } .notificationComponent.isClosing {
43
43
  transition: transform 0.1s ease-out;
44
44
  transform: translate(100vw, 0)
45
- }
46
- @media screen and (min-width: 600px) {
47
- .notificationComponent.isClosing {
45
+ } @media screen and (min-width: 600px) { .notificationComponent.isClosing {
48
46
  transform: translate(calc(100% + var(--gap-4xl)), 0)
49
47
  }
50
- }
51
- @media screen and (min-width: 600px) {
52
- .toastContent {
48
+ } @media screen and (min-width: 600px) { .toastContent {
53
49
  width: var(--notification-desktop-content-width)
54
50
  }
55
- }
56
- .actionSection {
51
+ } .actionSection {
57
52
  min-width: 104px;
58
53
  min-height: 48px;
59
54
  padding: 0 var(--gap-xs);
package/esm/Component.js CHANGED
@@ -47,7 +47,7 @@ function __rest(s, e) {
47
47
  return t;
48
48
  }
49
49
 
50
- var styles = {"notificationComponent":"notification__notificationComponent_ca0bc","isVisible":"notification__isVisible_ca0bc","isClosing":"notification__isClosing_ca0bc","toastContent":"notification__toastContent_ca0bc","actionSection":"notification__actionSection_ca0bc"};
50
+ var styles = {"notificationComponent":"notification__notificationComponent_r3fry","isVisible":"notification__isVisible_r3fry","isClosing":"notification__isClosing_r3fry","toastContent":"notification__toastContent_r3fry","actionSection":"notification__actionSection_r3fry"};
51
51
  require('./index.css')
52
52
 
53
53
  var notificationClassNameSelector = ".".concat(styles.notificationComponent);
package/esm/index.css CHANGED
@@ -1,23 +1,27 @@
1
- /* hash: ixane */
1
+ /* hash: 16rj1 */
2
2
  :root {
3
+ } /* deprecated */ :root {
4
+ } :root {
5
+ } :root {
6
+ } :root {
3
7
 
4
8
  /* Hard */
5
9
 
6
10
  /* Up */
7
11
 
8
12
  /* Hard up */
9
- }
10
- :root {
13
+ } :root {
14
+ } :root {
11
15
  --gap-xs: 8px;
12
16
  --gap-s: 12px;
13
17
  --gap-xl: 24px;
14
18
  --gap-4xl: 48px;
15
19
  --gap-s-neg: -12px;
16
- }
17
- :root {
20
+ } :root {
21
+ } :root {
22
+ } :root {
18
23
  --notification-desktop-content-width: 278px;
19
- }
20
- .notification__notificationComponent_ca0bc {
24
+ } .notification__notificationComponent_r3fry {
21
25
  visibility: hidden;
22
26
  position: fixed;
23
27
  right: var(--gap-s);
@@ -28,33 +32,24 @@
28
32
  -webkit-user-select: none;
29
33
  user-select: none;
30
34
  transition: transform 0.4s ease-out
31
- }
32
- @media screen and (min-width: 600px) {
33
- .notification__notificationComponent_ca0bc {
35
+ } @media screen and (min-width: 600px) { .notification__notificationComponent_r3fry {
34
36
  right: var(--gap-4xl);
35
37
  width: auto;
36
38
  transform: translate(calc(100% + var(--gap-4xl)), 0)
37
39
  }
38
- }
39
- .notification__notificationComponent_ca0bc.notification__isVisible_ca0bc {
40
+ } .notification__notificationComponent_r3fry.notification__isVisible_r3fry {
40
41
  visibility: visible;
41
42
  transform: translate(0, 0);
42
- }
43
- .notification__notificationComponent_ca0bc.notification__isClosing_ca0bc {
43
+ } .notification__notificationComponent_r3fry.notification__isClosing_r3fry {
44
44
  transition: transform 0.1s ease-out;
45
45
  transform: translate(100vw, 0)
46
- }
47
- @media screen and (min-width: 600px) {
48
- .notification__notificationComponent_ca0bc.notification__isClosing_ca0bc {
46
+ } @media screen and (min-width: 600px) { .notification__notificationComponent_r3fry.notification__isClosing_r3fry {
49
47
  transform: translate(calc(100% + var(--gap-4xl)), 0)
50
48
  }
51
- }
52
- @media screen and (min-width: 600px) {
53
- .notification__toastContent_ca0bc {
49
+ } @media screen and (min-width: 600px) { .notification__toastContent_r3fry {
54
50
  width: var(--notification-desktop-content-width)
55
51
  }
56
- }
57
- .notification__actionSection_ca0bc {
52
+ } .notification__actionSection_r3fry {
58
53
  min-width: 104px;
59
54
  min-height: 48px;
60
55
  padding: 0 var(--gap-xs);
package/index.css CHANGED
@@ -1,23 +1,27 @@
1
- /* hash: ixane */
1
+ /* hash: 16rj1 */
2
2
  :root {
3
+ } /* deprecated */ :root {
4
+ } :root {
5
+ } :root {
6
+ } :root {
3
7
 
4
8
  /* Hard */
5
9
 
6
10
  /* Up */
7
11
 
8
12
  /* Hard up */
9
- }
10
- :root {
13
+ } :root {
14
+ } :root {
11
15
  --gap-xs: 8px;
12
16
  --gap-s: 12px;
13
17
  --gap-xl: 24px;
14
18
  --gap-4xl: 48px;
15
19
  --gap-s-neg: -12px;
16
- }
17
- :root {
20
+ } :root {
21
+ } :root {
22
+ } :root {
18
23
  --notification-desktop-content-width: 278px;
19
- }
20
- .notification__notificationComponent_ca0bc {
24
+ } .notification__notificationComponent_r3fry {
21
25
  visibility: hidden;
22
26
  position: fixed;
23
27
  right: var(--gap-s);
@@ -28,33 +32,24 @@
28
32
  -webkit-user-select: none;
29
33
  user-select: none;
30
34
  transition: transform 0.4s ease-out
31
- }
32
- @media screen and (min-width: 600px) {
33
- .notification__notificationComponent_ca0bc {
35
+ } @media screen and (min-width: 600px) { .notification__notificationComponent_r3fry {
34
36
  right: var(--gap-4xl);
35
37
  width: auto;
36
38
  transform: translate(calc(100% + var(--gap-4xl)), 0)
37
39
  }
38
- }
39
- .notification__notificationComponent_ca0bc.notification__isVisible_ca0bc {
40
+ } .notification__notificationComponent_r3fry.notification__isVisible_r3fry {
40
41
  visibility: visible;
41
42
  transform: translate(0, 0);
42
- }
43
- .notification__notificationComponent_ca0bc.notification__isClosing_ca0bc {
43
+ } .notification__notificationComponent_r3fry.notification__isClosing_r3fry {
44
44
  transition: transform 0.1s ease-out;
45
45
  transform: translate(100vw, 0)
46
- }
47
- @media screen and (min-width: 600px) {
48
- .notification__notificationComponent_ca0bc.notification__isClosing_ca0bc {
46
+ } @media screen and (min-width: 600px) { .notification__notificationComponent_r3fry.notification__isClosing_r3fry {
49
47
  transform: translate(calc(100% + var(--gap-4xl)), 0)
50
48
  }
51
- }
52
- @media screen and (min-width: 600px) {
53
- .notification__toastContent_ca0bc {
49
+ } @media screen and (min-width: 600px) { .notification__toastContent_r3fry {
54
50
  width: var(--notification-desktop-content-width)
55
51
  }
56
- }
57
- .notification__actionSection_ca0bc {
52
+ } .notification__actionSection_r3fry {
58
53
  min-width: 104px;
59
54
  min-height: 48px;
60
55
  padding: 0 var(--gap-xs);
package/modern/Component.js CHANGED
@@ -8,7 +8,7 @@ import { Stack, stackingOrder } from '@alfalab/core-components-stack/modern';
8
8
  import { ToastPlate } from '@alfalab/core-components-toast-plate/modern';
9
9
  import { useClickOutside } from './utils/index.js';
10
10
 
11
- const styles = {"notificationComponent":"notification__notificationComponent_ca0bc","isVisible":"notification__isVisible_ca0bc","isClosing":"notification__isClosing_ca0bc","toastContent":"notification__toastContent_ca0bc","actionSection":"notification__actionSection_ca0bc"};
11
+ const styles = {"notificationComponent":"notification__notificationComponent_r3fry","isVisible":"notification__isVisible_r3fry","isClosing":"notification__isClosing_r3fry","toastContent":"notification__toastContent_r3fry","actionSection":"notification__actionSection_r3fry"};
12
12
  require('./index.css')
13
13
 
14
14
  const notificationClassNameSelector = `.${styles.notificationComponent}`;
package/modern/index.css CHANGED
@@ -1,23 +1,27 @@
1
- /* hash: ixane */
1
+ /* hash: 16rj1 */
2
2
  :root {
3
+ } /* deprecated */ :root {
4
+ } :root {
5
+ } :root {
6
+ } :root {
3
7
 
4
8
  /* Hard */
5
9
 
6
10
  /* Up */
7
11
 
8
12
  /* Hard up */
9
- }
10
- :root {
13
+ } :root {
14
+ } :root {
11
15
  --gap-xs: 8px;
12
16
  --gap-s: 12px;
13
17
  --gap-xl: 24px;
14
18
  --gap-4xl: 48px;
15
19
  --gap-s-neg: -12px;
16
- }
17
- :root {
20
+ } :root {
21
+ } :root {
22
+ } :root {
18
23
  --notification-desktop-content-width: 278px;
19
- }
20
- .notification__notificationComponent_ca0bc {
24
+ } .notification__notificationComponent_r3fry {
21
25
  visibility: hidden;
22
26
  position: fixed;
23
27
  right: var(--gap-s);
@@ -28,33 +32,24 @@
28
32
  -webkit-user-select: none;
29
33
  user-select: none;
30
34
  transition: transform 0.4s ease-out
31
- }
32
- @media screen and (min-width: 600px) {
33
- .notification__notificationComponent_ca0bc {
35
+ } @media screen and (min-width: 600px) { .notification__notificationComponent_r3fry {
34
36
  right: var(--gap-4xl);
35
37
  width: auto;
36
38
  transform: translate(calc(100% + var(--gap-4xl)), 0)
37
39
  }
38
- }
39
- .notification__notificationComponent_ca0bc.notification__isVisible_ca0bc {
40
+ } .notification__notificationComponent_r3fry.notification__isVisible_r3fry {
40
41
  visibility: visible;
41
42
  transform: translate(0, 0);
42
- }
43
- .notification__notificationComponent_ca0bc.notification__isClosing_ca0bc {
43
+ } .notification__notificationComponent_r3fry.notification__isClosing_r3fry {
44
44
  transition: transform 0.1s ease-out;
45
45
  transform: translate(100vw, 0)
46
- }
47
- @media screen and (min-width: 600px) {
48
- .notification__notificationComponent_ca0bc.notification__isClosing_ca0bc {
46
+ } @media screen and (min-width: 600px) { .notification__notificationComponent_r3fry.notification__isClosing_r3fry {
49
47
  transform: translate(calc(100% + var(--gap-4xl)), 0)
50
48
  }
51
- }
52
- @media screen and (min-width: 600px) {
53
- .notification__toastContent_ca0bc {
49
+ } @media screen and (min-width: 600px) { .notification__toastContent_r3fry {
54
50
  width: var(--notification-desktop-content-width)
55
51
  }
56
- }
57
- .notification__actionSection_ca0bc {
52
+ } .notification__actionSection_r3fry {
58
53
  min-width: 104px;
59
54
  min-height: 48px;
60
55
  padding: 0 var(--gap-xs);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alfalab/core-components-notification",
3
- "version": "6.1.12",
3
+ "version": "6.1.13",
4
4
  "description": "",
5
5
  "keywords": [],
6
6
  "license": "MIT",
@@ -19,7 +19,7 @@
19
19
  "dependencies": {
20
20
  "@alfalab/core-components-portal": "^3.1.2",
21
21
  "@alfalab/core-components-stack": "^4.0.2",
22
- "@alfalab/core-components-toast-plate": "^5.1.10",
22
+ "@alfalab/core-components-toast-plate": "^5.1.11",
23
23
  "classnames": "^2.3.1",
24
24
  "element-closest": "^3.0.2",
25
25
  "react-merge-refs": "^1.1.0",