@kaizen/components 1.60.0 → 1.60.2

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 (7) hide show
  1. package/dist/cjs/Notification/ToastNotification/context/ToastNotificationContext.cjs +6 -8
  2. package/dist/esm/Notification/ToastNotification/context/ToastNotificationContext.mjs +6 -8
  3. package/dist/styles.css +89 -89
  4. package/package.json +1 -1
  5. package/src/Heading/Heading.module.scss +1 -1
  6. package/src/Notification/ToastNotification/_docs/ToastNotification.stories.tsx +33 -0
  7. package/src/Notification/ToastNotification/context/ToastNotificationContext.tsx +6 -6
package/dist/cjs/Notification/ToastNotification/context/ToastNotificationContext.cjs CHANGED
@@ -27,15 +27,13 @@ var ToastNotificationProvider = function (_a) {
27
27
  var notificationWithId = tslib.__assign({
28
28
  id: uuid$1
29
29
  }, notification);
30
- var notificationExists = notifications.find(function (_a) {
31
- var id = _a.id;
32
- return id === notification.id;
33
- });
34
- if (!notificationExists) {
35
- setNotifications(function (existing) {
36
- return tslib.__spreadArray(tslib.__spreadArray([], existing, true), [notificationWithId], false);
30
+ setNotifications(function (existing) {
31
+ var notificationExists = existing.find(function (_a) {
32
+ var id = _a.id;
33
+ return id === notification.id;
37
34
  });
38
- }
35
+ return notificationExists ? existing : tslib.__spreadArray(tslib.__spreadArray([], existing, true), [notificationWithId], false);
36
+ });
39
37
  };
40
38
  var updateToastNotification = function (notification) {
41
39
  var notificationIndex = notifications.findIndex(function (_a) {
package/dist/esm/Notification/ToastNotification/context/ToastNotificationContext.mjs CHANGED
@@ -20,15 +20,13 @@ const ToastNotificationProvider = /*#__PURE__*/function () {
20
20
  var notificationWithId = __assign({
21
21
  id: uuid
22
22
  }, notification);
23
- var notificationExists = notifications.find(function (_a) {
24
- var id = _a.id;
25
- return id === notification.id;
26
- });
27
- if (!notificationExists) {
28
- setNotifications(function (existing) {
29
- return __spreadArray(__spreadArray([], existing, true), [notificationWithId], false);
23
+ setNotifications(function (existing) {
24
+ var notificationExists = existing.find(function (_a) {
25
+ var id = _a.id;
26
+ return id === notification.id;
30
27
  });
31
- }
28
+ return notificationExists ? existing : __spreadArray(__spreadArray([], existing, true), [notificationWithId], false);
29
+ });
32
30
  };
33
31
  var updateToastNotification = function (notification) {
34
32
  var notificationIndex = notifications.findIndex(function (_a) {
package/dist/styles.css CHANGED
@@ -1,62 +1,6 @@
1
1
  @layer tokens, normalize, reset;@layer tokens{:root{--theme-key:heart;--animation-easing-function-ease-in-out:cubic-bezier(0.455,0.03,0.515,0.955);--animation-easing-function-ease-in:cubic-bezier(0.55,0.085,0.68,0.53);--animation-easing-function-ease-out:cubic-bezier(0.25,0.46,0.45,0.94);--animation-easing-function-linear:linear;--animation-easing-function-bounce-in:cubic-bezier(0.485,0.155,0.24,1.245);--animation-easing-function-bounce-out:cubic-bezier(0.485,0.155,0.515,0.845);--animation-easing-function-bounce-in-out:cubic-bezier(0.76,-0.245,0.24,1.245);--animation-duration-instant:0ms;--animation-duration-immediate:100ms;--animation-duration-rapid:200ms;--animation-duration-fast:300ms;--animation-duration-slow:400ms;--animation-duration-deliberate:700ms;--border-solid-border-width:2px;--border-solid-border-radius:7px;--border-solid-border-style:solid;--border-solid-border-color:#e1e2ea;--border-solid-border-color-rgb:225,226,234;--border-dashed-border-width:2px;--border-dashed-border-radius:7px;--border-dashed-border-style:dashed;--border-borderless-border-width:2px;--border-borderless-border-radius:7px;--border-borderless-border-style:solid;--border-borderless-border-color:transparent;--border-borderless-border-color-rgb:0,0,0;--border-focus-ring-border-width:2px;--border-focus-ring-border-radius:10px;--border-focus-ring-border-style:solid;--border-width-1:1px;--color-purple-100:#f4edf8;--color-purple-100-rgb:244,237,248;--color-purple-200:#dfc9ea;--color-purple-200-rgb:223,201,234;--color-purple-300:#c9a5dd;--color-purple-300-rgb:201,165,221;--color-purple-400:#ae67b1;--color-purple-400-rgb:174,103,177;--color-purple-500:#844587;--color-purple-500-rgb:132,69,135;--color-purple-600:#5f3361;--color-purple-600-rgb:95,51,97;--color-purple-700:#4a234d;--color-purple-700-rgb:74,35,77;--color-purple-800:#2f2438;--color-purple-800-rgb:47,36,56;--color-blue-100:#e6f6ff;--color-blue-100-rgb:230,246,255;--color-blue-200:#bde2f5;--color-blue-200-rgb:189,226,245;--color-blue-300:#73c0e8;--color-blue-300-rgb:115,192,232;--color-blue-400:#008bd6;--color-blue-400-rgb:0,139,214;--color-blue-500:#0168b3;--color-blue-500-rgb:1,104,179;--color-blue-600:#004970;--color-blue-600-rgb:0,73,112;--color-blue-700:#003157;--color-blue-700-rgb:0,49,87;--color-green-100:#e8f8f4;--color-green-100-rgb:232,248,244;--color-green-200:#c4ede2;--color-green-200-rgb:196,237,226;--color-green-300:#8fdbc7;--color-green-300-rgb:143,219,199;--color-green-400:#5dcaad;--color-green-400-rgb:93,202,173;--color-green-500:#3f9a86;--color-green-500-rgb:63,154,134;--color-green-600:#2c7d67;--color-green-600-rgb:44,125,103;--color-green-700:#22594a;--color-green-700-rgb:34,89,74;--color-yellow-100:#fff9e4;--color-yellow-100-rgb:255,249,228;--color-yellow-200:#ffeeb3;--color-yellow-200-rgb:255,238,179;--color-yellow-300:#ffe36e;--color-yellow-300-rgb:255,227,110;--color-yellow-400:#ffca4d;--color-yellow-400-rgb:255,202,77;--color-yellow-500:#ffb600;--color-yellow-500-rgb:255,182,0;--color-yellow-600:#c68600;--color-yellow-600-rgb:198,134,0;--color-yellow-700:#876400;--color-yellow-700-rgb:135,100,0;--color-red-100:#fdeaee;--color-red-100-rgb:253,234,238;--color-red-200:#f9c2cb;--color-red-200-rgb:249,194,203;--color-red-300:#f597a8;--color-red-300-rgb:245,151,168;--color-red-400:#e0707d;--color-red-400-rgb:224,112,125;--color-red-500:#c93b55;--color-red-500-rgb:201,59,85;--color-red-600:#a82433;--color-red-600-rgb:168,36,51;--color-red-700:#6c1e20;--color-red-700-rgb:108,30,32;--color-orange-100:#fff0e8;--color-orange-100-rgb:255,240,232;--color-orange-200:#ffd1b9;--color-orange-200-rgb:255,209,185;--color-orange-300:#ffb08a;--color-orange-300-rgb:255,176,138;--color-orange-400:#ff9461;--color-orange-400-rgb:255,148,97;--color-orange-500:#e96c2f;--color-orange-500-rgb:233,108,47;--color-orange-600:#b74302;--color-orange-600-rgb:183,67,2;--color-orange-700:#903c00;--color-orange-700-rgb:144,60,0;--color-gray-100:#f9f9f9;--color-gray-100-rgb:249,249,249;--color-gray-200:#f4f4f5;--color-gray-200-rgb:244,244,245;--color-gray-300:#eaeaec;--color-gray-300-rgb:234,234,236;--color-gray-400:#cdcdd0;--color-gray-400-rgb:205,205,208;--color-gray-500:#878792;--color-gray-500-rgb:135,135,146;--color-gray-600:#524e56;--color-gray-600-rgb:82,78,86;--color-white:#fff;--color-white-rgb:255,255,255;--color-black:#000;--color-black-rgb:0,0,0;--data-viz-favorable:#7dd5bd;--data-viz-favorable-rgb:125,213,189;--data-viz-unfavorable:#e68d97;--data-viz-unfavorable-rgb:230,141,151;--layout-content-max-width:1392px;--layout-content-max-width-with-sidebar:1080px;--layout-content-side-margin:72px;--layout-mobile-actions-drawer-height:60px;--layout-navigation-bar-height:72px;--layout-breakpoints-medium:768px;--layout-breakpoints-large:1080px;--shadow-small-box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 3px 16px 0 rgba(0,0,0,.06);--shadow-large-box-shadow:0 3px 9px 0 rgba(0,0,0,.1),0 8px 40px 0 rgba(0,0,0,.08);--spacing-0:0;--spacing-1:.0625rem;--spacing-2:.125rem;--spacing-4:.25rem;--spacing-6:.375rem;--spacing-8:.5rem;--spacing-12:.75rem;--spacing-16:1rem;--spacing-20:1.25rem;--spacing-24:1.5rem;--spacing-32:2rem;--spacing-40:2.5rem;--spacing-48:3rem;--spacing-56:3.5rem;--spacing-64:4rem;--spacing-72:4.5rem;--spacing-80:5rem;--spacing-96:6rem;--spacing-112:7rem;--spacing-128:8rem;--spacing-160:10rem;--spacing-200:12.5rem;--spacing-240:15rem;--spacing-280:17.5rem;--spacing-320:20rem;--spacing-xs:0.375rem;--spacing-sm:0.75rem;--spacing-md:1.5rem;--spacing-lg:2.25rem;--spacing-xl:3rem;--spacing-xxl:3.75rem;--spacing-xxxl:4.5rem;--spacing-xxxxl:5.25rem;--spacing-xxxxxl:6rem;--typography-data-large-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-data-large-font-weight:700;--typography-data-large-font-size:5.25rem;--typography-data-large-line-height:5.25rem;--typography-data-large-letter-spacing:normal;--typography-data-large-units-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-data-large-units-font-weight:700;--typography-data-large-units-font-size:2.625rem;--typography-data-large-units-line-height:5.25rem;--typography-data-large-units-letter-spacing:normal;--typography-data-medium-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-data-medium-font-weight:700;--typography-data-medium-font-size:3rem;--typography-data-medium-line-height:5rem;--typography-data-medium-letter-spacing:normal;--typography-data-medium-units-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-data-medium-units-font-weight:700;--typography-data-medium-units-font-size:1.5rem;--typography-data-medium-units-line-height:5rem;--typography-data-medium-units-letter-spacing:normal;--typography-data-small-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-data-small-font-weight:700;--typography-data-small-font-size:1.5rem;--typography-data-small-line-height:1.5rem;--typography-data-small-letter-spacing:normal;--typography-data-small-units-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-data-small-units-font-weight:700;--typography-data-small-units-font-size:1.125rem;--typography-data-small-units-line-height:1.5rem;--typography-data-small-units-letter-spacing:normal;--typography-display-0-font-family:"Tiempos Headline",Georgia,serif;--typography-display-0-font-weight:800;--typography-display-0-font-size:4.5rem;--typography-display-0-line-height:5.25rem;--typography-display-0-letter-spacing:0em;--typography-heading-1-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-heading-1-font-weight:700;--typography-heading-1-font-size:2.125rem;--typography-heading-1-line-height:2.625rem;--typography-heading-1-letter-spacing:normal;--typography-heading-2-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-heading-2-font-weight:700;--typography-heading-2-font-size:1.75rem;--typography-heading-2-line-height:2.25rem;--typography-heading-2-letter-spacing:normal;--typography-heading-3-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-heading-3-font-weight:700;--typography-heading-3-font-size:1.375rem;--typography-heading-3-line-height:1.875rem;--typography-heading-3-letter-spacing:normal;--typography-heading-4-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-heading-4-font-weight:600;--typography-heading-4-font-size:1.125rem;--typography-heading-4-line-height:1.5rem;--typography-heading-4-letter-spacing:normal;--typography-heading-5-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-heading-5-font-weight:600;--typography-heading-5-font-size:1rem;--typography-heading-5-line-height:1.5rem;--typography-heading-5-letter-spacing:normal;--typography-heading-6-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-heading-6-font-weight:700;--typography-heading-6-font-size:0.875rem;--typography-heading-6-line-height:1.5rem;--typography-heading-6-letter-spacing:normal;--typography-paragraph-intro-lede-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-paragraph-intro-lede-font-weight:400;--typography-paragraph-intro-lede-font-size:1.25rem;--typography-paragraph-intro-lede-line-height:1.875rem;--typography-paragraph-intro-lede-letter-spacing:0;--typography-paragraph-intro-lede-max-width:975px;--typography-paragraph-body-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-paragraph-body-font-weight:400;--typography-paragraph-body-font-size:1rem;--typography-paragraph-body-line-height:1.5rem;--typography-paragraph-body-letter-spacing:normal;--typography-paragraph-body-max-width:780px;--typography-paragraph-small-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-paragraph-small-font-weight:400;--typography-paragraph-small-font-size:0.875rem;--typography-paragraph-small-line-height:1.125rem;--typography-paragraph-small-letter-spacing:normal;--typography-paragraph-small-max-width:680px;--typography-paragraph-extra-small-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-paragraph-extra-small-font-weight:400;--typography-paragraph-extra-small-font-size:0.75rem;--typography-paragraph-extra-small-line-height:1.125rem;--typography-paragraph-extra-small-letter-spacing:normal;--typography-paragraph-extra-small-max-width:600px;--typography-paragraph-bold-font-weight:600;--typography-button-primary-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-button-primary-font-weight:700;--typography-button-primary-font-size:1.125rem;--typography-button-primary-line-height:1.5rem;--typography-button-primary-letter-spacing:normal;--typography-button-secondary-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-button-secondary-font-weight:500;--typography-button-secondary-font-size:1rem;--typography-button-secondary-line-height:1.5rem;--typography-button-secondary-letter-spacing:normal}}@layer normalize{html{text-size-adjust:100%;line-height:1.15}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{appearance:none}::-webkit-file-upload-button{appearance:button;font:inherit}details{display:block}summary{display:list-item}[hidden],template{display:none}}@layer reset{@font-face{font-family:Tiempos Headline;font-weight:800;src:url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/tiempos/tiempos-headline-bold.woff2),url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/tiempos/tiempos-headline-bold.woff)}@font-face{font-family:Tiempos Headline;font-weight:500;src:url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/tiempos/tiempos-headline-medium.woff2),url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/tiempos/tiempos-headline-medium.woff)}@font-face{font-family:Greycliff CF;font-weight:300;src:url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/greycliff/greycliff-cf-light.woff) format("woff")}@font-face{font-family:Greycliff CF;font-weight:400;src:url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/greycliff/greycliff-cf-regular.woff) format("woff")}@font-face{font-family:Greycliff CF;font-weight:500;src:url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/greycliff/greycliff-cf-medium.woff) format("woff")}@font-face{font-family:Greycliff CF;font-weight:600;src:url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/greycliff/greycliff-cf-demi-bold.woff) format("woff")}@font-face{font-family:Greycliff CF;font-weight:700;src:url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/greycliff/greycliff-cf-bold.woff) format("woff")}@font-face{font-family:Greycliff CF;font-weight:800;src:url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/greycliff/greycliff-cf-extra-bold.woff) format("woff")}@font-face{font-family:Inter;font-weight:300;src:url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-light.woff2),url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-light.woff)}@font-face{font-family:Inter;font-weight:400;src:url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-regular.woff2),url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-regular.woff)}@font-face{font-family:Inter;font-weight:500;src:url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-medium.woff2),url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-medium.woff)}@font-face{font-family:Inter;font-weight:600;src:url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-demi-bold.woff2),url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-demi-bold.woff)}@font-face{font-family:Inter;font-weight:700;src:url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-bold.woff2),url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-bold.woff)}@font-face{font-family:Inter;font-weight:800;src:url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-extra-bold.woff2),url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-extra-bold.woff)}@font-face{font-family:IBM Plex Mono;src:url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/ibm-plex-mono/ibm-plex-mono-regular.woff2),url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/ibm-plex-mono/ibm-plex-mono-regular.woff)}}@layer reset{*,:after,:before{border-color:var(--border-solid-border-color,"currentColor");border-style:solid;border-width:0}}
2
2
  /** THIS IS AN AUTOGENERATED FILE **/
3
3
  /** THIS IS AN AUTOGENERATED FILE **/
4
- /** THIS IS AN AUTOGENERATED FILE **/
5
- /** THIS IS AN AUTOGENERATED FILE **/
6
- /** THIS IS AN AUTOGENERATED FILE **/
7
- /** THIS IS AN AUTOGENERATED FILE **/
8
- .Tooltip-module_tooltip__efL1m {
9
- max-width: 200px;
10
- padding: var(--spacing-8, 0.5rem) var(--spacing-12, 0.75rem);
11
- color: var(--color-white, #ffffff);
12
- text-align: center;
13
- font-family: var(--typography-paragraph-extra-small-font-family, "Inter", "Noto Sans", Helvetica, Arial, sans-serif);
14
- font-size: var(--typography-paragraph-extra-small-font-size, 0.75rem);
15
- font-weight: var(--typography-paragraph-extra-small-font-weight, 400);
16
- letter-spacing: var(--typography-paragraph-extra-small-letter-spacing, normal);
17
- line-height: var(--typography-paragraph-extra-small-line-height, 1.125rem);
18
- border-radius: var(--border-solid-border-radius, 7px);
19
- box-shadow: var(--shadow-small-box-shadow, 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 3px 16px 0 rgba(0, 0, 0, 0.06));
20
- background-color: var(--color-purple-800, #2f2438);
21
- text-wrap: pretty;
22
- /* fixes FF gap */
23
- transform: translate3d(0, 0, 0);
24
- }
25
- .Tooltip-module_tooltip__efL1m.Tooltip-module_reversed__NnCbZ {
26
- background-color: var(--color-white, #ffffff);
27
- color: var(--color-purple-800, #2f2438);
28
- }
29
- .Tooltip-module_tooltip__efL1m[data-placement=top] {
30
- --origin: translateY(4px);
31
- }
32
- .Tooltip-module_tooltip__efL1m[data-placement=bottom] {
33
- --origin: translateY(-4px);
34
- }
35
- .Tooltip-module_tooltip__efL1m[data-placement=right] {
36
- --origin: translateX(-4px);
37
- }
38
- .Tooltip-module_tooltip__efL1m[data-placement=left] {
39
- --origin: translateX(4px);
40
- }
41
- .Tooltip-module_tooltip__efL1m[data-entering] {
42
- animation: Tooltip-module_slide__lFdGA var(--animation-duration-fast, 300ms);
43
- }
44
- .Tooltip-module_tooltip__efL1m[data-exiting] {
45
- animation: Tooltip-module_slide__lFdGA var(--animation-duration-fast, 300ms) reverse var(--animation-easing-function-ease-in, cubic-bezier(0.55, 0.085, 0.68, 0.53));
46
- }
47
-
48
- @keyframes Tooltip-module_slide__lFdGA {
49
- from {
50
- transform: var(--origin);
51
- opacity: 0;
52
- }
53
- to {
54
- transform: translateY(0);
55
- opacity: 1;
56
- }
57
- }
58
- /** THIS IS AN AUTOGENERATED FILE **/
59
- /** THIS IS AN AUTOGENERATED FILE **/
60
4
  .OverlayArrow-module_overlayArrow__hoDyK {
61
5
  display: flex;
62
6
  padding: 8px;
@@ -83,36 +27,6 @@
83
27
  .OverlayArrow-module_overlayArrow__hoDyK.OverlayArrow-module_reversed__-WGcR path {
84
28
  fill: var(--color-white, #ffffff);
85
29
  }
86
- .Menu-module_menu__iHYqh {
87
- background-color: var(--color-white);
88
- color: var(--color-purple-800);
89
- width: 248px;
90
- max-height: 22rem;
91
- overflow: auto;
92
- padding-block: var(--spacing-6);
93
- outline: none;
94
- border-radius: var(--border-solid-border-radius);
95
- box-shadow: var(--shadow-large-box-shadow);
96
- }
97
-
98
- .Menu-module_menu__iHYqh .react-aria-Header {
99
- font-family: var(--typography-heading-6-font-family);
100
- font-size: var(--typography-heading-6-font-size);
101
- letter-spacing: var(--typography-heading-6-letter-spacing);
102
- font-weight: var(--typography-heading-6-font-weight);
103
- line-height: var(--typography-heading-6-line-height);
104
- padding: var(--spacing-6) 10px;
105
- margin-inline: var(--spacing-6);
106
- }
107
-
108
- .Menu-module_menu__iHYqh section:not(:last-of-type)::after {
109
- width: 100%;
110
- height: 1px;
111
- background-color: var(--border-solid-border-color);
112
- content: "";
113
- display: block;
114
- margin-block: var(--spacing-6);
115
- }
116
30
  .MenuItem-module_item__DPerF {
117
31
  font-family: var(--typography-paragraph-body-font-family);
118
32
  font-size: var(--typography-paragraph-body-font-size);
@@ -147,8 +61,91 @@
147
61
  .MenuItem-module_item__DPerF[data-disabled] {
148
62
  opacity: 0.3;
149
63
  }
150
- .Focusable-module_focusableWrapper__NfuIi {
151
- display: inline-flex;
64
+ .Menu-module_menu__iHYqh {
65
+ background-color: var(--color-white);
66
+ color: var(--color-purple-800);
67
+ width: 248px;
68
+ max-height: 22rem;
69
+ overflow: auto;
70
+ padding-block: var(--spacing-6);
71
+ outline: none;
72
+ border-radius: var(--border-solid-border-radius);
73
+ box-shadow: var(--shadow-large-box-shadow);
74
+ }
75
+
76
+ .Menu-module_menu__iHYqh .react-aria-Header {
77
+ font-family: var(--typography-heading-6-font-family);
78
+ font-size: var(--typography-heading-6-font-size);
79
+ letter-spacing: var(--typography-heading-6-letter-spacing);
80
+ font-weight: var(--typography-heading-6-font-weight);
81
+ line-height: var(--typography-heading-6-line-height);
82
+ padding: var(--spacing-6) 10px;
83
+ margin-inline: var(--spacing-6);
84
+ }
85
+
86
+ .Menu-module_menu__iHYqh section:not(:last-of-type)::after {
87
+ width: 100%;
88
+ height: 1px;
89
+ background-color: var(--border-solid-border-color);
90
+ content: "";
91
+ display: block;
92
+ margin-block: var(--spacing-6);
93
+ }
94
+ /** THIS IS AN AUTOGENERATED FILE **/
95
+ /** THIS IS AN AUTOGENERATED FILE **/
96
+ /** THIS IS AN AUTOGENERATED FILE **/
97
+ /** THIS IS AN AUTOGENERATED FILE **/
98
+ /** THIS IS AN AUTOGENERATED FILE **/
99
+ /** THIS IS AN AUTOGENERATED FILE **/
100
+ .Tooltip-module_tooltip__efL1m {
101
+ max-width: 200px;
102
+ padding: var(--spacing-8, 0.5rem) var(--spacing-12, 0.75rem);
103
+ color: var(--color-white, #ffffff);
104
+ text-align: center;
105
+ font-family: var(--typography-paragraph-extra-small-font-family, "Inter", "Noto Sans", Helvetica, Arial, sans-serif);
106
+ font-size: var(--typography-paragraph-extra-small-font-size, 0.75rem);
107
+ font-weight: var(--typography-paragraph-extra-small-font-weight, 400);
108
+ letter-spacing: var(--typography-paragraph-extra-small-letter-spacing, normal);
109
+ line-height: var(--typography-paragraph-extra-small-line-height, 1.125rem);
110
+ border-radius: var(--border-solid-border-radius, 7px);
111
+ box-shadow: var(--shadow-small-box-shadow, 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 3px 16px 0 rgba(0, 0, 0, 0.06));
112
+ background-color: var(--color-purple-800, #2f2438);
113
+ text-wrap: pretty;
114
+ /* fixes FF gap */
115
+ transform: translate3d(0, 0, 0);
116
+ }
117
+ .Tooltip-module_tooltip__efL1m.Tooltip-module_reversed__NnCbZ {
118
+ background-color: var(--color-white, #ffffff);
119
+ color: var(--color-purple-800, #2f2438);
120
+ }
121
+ .Tooltip-module_tooltip__efL1m[data-placement=top] {
122
+ --origin: translateY(4px);
123
+ }
124
+ .Tooltip-module_tooltip__efL1m[data-placement=bottom] {
125
+ --origin: translateY(-4px);
126
+ }
127
+ .Tooltip-module_tooltip__efL1m[data-placement=right] {
128
+ --origin: translateX(-4px);
129
+ }
130
+ .Tooltip-module_tooltip__efL1m[data-placement=left] {
131
+ --origin: translateX(4px);
132
+ }
133
+ .Tooltip-module_tooltip__efL1m[data-entering] {
134
+ animation: Tooltip-module_slide__lFdGA var(--animation-duration-fast, 300ms);
135
+ }
136
+ .Tooltip-module_tooltip__efL1m[data-exiting] {
137
+ animation: Tooltip-module_slide__lFdGA var(--animation-duration-fast, 300ms) reverse var(--animation-easing-function-ease-in, cubic-bezier(0.55, 0.085, 0.68, 0.53));
138
+ }
139
+
140
+ @keyframes Tooltip-module_slide__lFdGA {
141
+ from {
142
+ transform: var(--origin);
143
+ opacity: 0;
144
+ }
145
+ to {
146
+ transform: translateY(0);
147
+ opacity: 1;
148
+ }
152
149
  }
153
150
  .Button-module_button__QOSYH {
154
151
  --button-min-height-width: var(--spacing-48);
@@ -238,6 +235,9 @@
238
235
  --button-icon-size: var(--spacing-16);
239
236
  gap: var(--spacing-8);
240
237
  }
238
+ .Focusable-module_focusableWrapper__NfuIi {
239
+ display: inline-flex;
240
+ }
241
241
  /** THIS IS AN AUTOGENERATED FILE **/
242
242
  /** THIS IS AN AUTOGENERATED FILE **/
243
243
  /** THIS IS AN AUTOGENERATED FILE **/
@@ -908,7 +908,7 @@
908
908
  }
909
909
  /** THIS IS AN AUTOGENERATED FILE **/
910
910
  /** THIS IS AN AUTOGENERATED FILE **/
911
- @import "../../styles/foundation/_layers.css";
911
+ @layer tokens, normalize, reset;
912
912
  @layer reset {
913
913
  .Heading-module_heading__Gq6I8 {
914
914
  margin: 0;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kaizen/components",
3
- "version": "1.60.0",
3
+ "version": "1.60.2",
4
4
  "description": "Kaizen component library",
5
5
  "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
6
6
  "homepage": "https://cultureamp.design",
package/src/Heading/Heading.module.scss CHANGED
@@ -1,6 +1,6 @@
1
1
  @import "~@kaizen/design-tokens/sass/color";
2
2
  @import "~@kaizen/design-tokens/sass/typography";
3
- @import "../../styles/foundation/_layers.css";
3
+ @import "../../styles/foundation/layers";
4
4
 
5
5
  @layer reset {
6
6
  .heading {
package/src/Notification/ToastNotification/_docs/ToastNotification.stories.tsx CHANGED
@@ -1,5 +1,6 @@
1
1
  import React, { useEffect, useId } from "react"
2
2
  import { Meta, StoryObj } from "@storybook/react"
3
+ import { expect, within } from "@storybook/test"
3
4
  import { Button } from "~components/__actions__/v2"
4
5
  import { ToastNotification, useToastNotification } from "../index"
5
6
 
@@ -175,3 +176,35 @@ export const ClearNotifications: Story = {
175
176
  )
176
177
  },
177
178
  }
179
+
180
+ export const NoDuplicatesWithSameId: Story = {
181
+ render: () => {
182
+ const { addToastNotification } = useToastNotification()
183
+
184
+ useEffect(() => {
185
+ addToastNotification({
186
+ id: "id--clear-example-1",
187
+ title: "First",
188
+ type: "positive",
189
+ message: "There should only be one notification",
190
+ })
191
+ addToastNotification({
192
+ id: "id--clear-example-1",
193
+ title: "First",
194
+ type: "positive",
195
+ message: "There should only be one notification",
196
+ })
197
+ }, [addToastNotification])
198
+
199
+ return <div>Irrelevant content</div>
200
+ },
201
+ play: async context => {
202
+ const { canvasElement } = context
203
+ const { findAllByText } = within(canvasElement.parentElement!)
204
+
205
+ const notifications = await findAllByText(
206
+ "There should only be one notification"
207
+ )
208
+ expect(notifications).toHaveLength(1)
209
+ },
210
+ }
package/src/Notification/ToastNotification/context/ToastNotificationContext.tsx CHANGED
@@ -48,13 +48,13 @@ export const ToastNotificationProvider = ({
48
48
  const uuid = uuidv4()
49
49
  const notificationWithId = { id: uuid, ...notification }
50
50
 
51
- const notificationExists = notifications.find(
52
- ({ id }) => id === notification.id
53
- )
51
+ setNotifications(existing => {
52
+ const notificationExists = existing.find(
53
+ ({ id }) => id === notification.id
54
+ )
54
55
 
55
- if (!notificationExists) {
56
- setNotifications(existing => [...existing, notificationWithId])
57
- }
56
+ return notificationExists ? existing : [...existing, notificationWithId]
57
+ })
58
58
  }
59
59
 
60
60
  const updateToastNotification = (