@infonomic/uikit 5.27.0 → 5.28.0

package/dist/components/notifications/alert.module.css

@@ -1,12 +1,14 @@
 @layer infonomic-base,
-  infonomic-functional,
-  infonomic-utilities,
-  infonomic-theme,
-  infonomic-typography,
-  infonomic-components;
+infonomic-functional,
+infonomic-utilities,
+infonomic-theme,
+infonomic-typography,
+infonomic-components;
 
 @layer infonomic-components {
-  .alert {
+
+  .alert,
+  :global(.infonomic-alert) {
     display: flex;
     align-items: start;
     width: 100%;
@@ -22,13 +24,15 @@
     margin-bottom: 1rem;
   }
 
-  .alert-with-title {
+  .alert-with-title,
+  :global(.infonomic-alert-with-title) {
     display: flex;
     flex-direction: column;
     width: 100%;
   }
 
-  .icon {
+  .icon,
+  :global(.infonomic-alert-icon) {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -38,7 +42,8 @@
     height: 24px;
   }
 
-  .close {
+  .close,
+  :global(.infonomic-alert-close) {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -52,12 +57,14 @@
     margin-top: -2px;
   }
 
-  .fade {
+  .fade,
+  :global(.infonomic-alert-fade) {
     opacity: 0;
     transition: opacity 0.4s ease-in-out;
   }
 
-  .header {
+  .header,
+  :global(.infonomic-alert-header) {
     display: flex;
     align-items: start;
     width: 100%;
@@ -65,7 +72,8 @@
     gap: var(--gap-2);
   }
 
-  .title {
+  .title,
+  :global(.infonomic-alert-title) {
     display: flex;
     font-weight: bold;
     font-size: 1.2rem;
@@ -73,48 +81,57 @@
     padding-top: 1px;
   }
 
-  .content {
+  .content,
+  :global(.infonomic-alert-content) {
     padding-top: 1px;
     font-size: var(--font-size-sm);
   }
 
-  .content:first-child {
+  .content:first-child,
+  :global(.infonomic-alert-content:first-child) {
     margin-top: 0;
   }
 
   /* Intents */
-  .primary {
+  .primary,
+  :global(.infonomic-alert-primary) {
     --alert-border: var(--stroke-primary);
     --alert-background: var(--fill-primary-weak);
   }
 
-  .secondary {
+  .secondary,
+  :global(.infonomic-alert-secondary) {
     --alert-border: var(--stroke-secondary);
     --alert-background: var(--fill-secondary-weak);
   }
 
-  .noeffect {
+  .noeffect,
+  :global(.infonomic-alert-noeffect) {
     --alert-border: var(--stroke-noeffect);
     --alert-background: var(--fill-noeffect-weak);
   }
 
-  .success {
+  .success,
+  :global(.infonomic-alert-success) {
     --alert-border: var(--stroke-success);
     --alert-background: var(--fill-success-weak);
   }
 
-  .info {
+  .info,
+  :global(.infonomic-alert-info) {
     --alert-border: var(--stroke-info);
     --alert-background: var(--fill-info-weak);
   }
 
-  .warning {
+  .warning,
+  :global(.infonomic-alert-warning) {
     --alert-border: var(--stroke-warning);
     --alert-background: var(--fill-warning-weak);
   }
 
-  .danger {
+  .danger,
+  :global(.infonomic-alert-danger) {
     --alert-border: var(--stroke-danger);
     --alert-background: var(--fill-danger-weak);
   }
-}
+}

package/dist/components/notifications/alert_module.css

@@ -1,7 +1,7 @@
 @layer infonomic-base, infonomic-functional, infonomic-utilities, infonomic-theme, infonomic-typography;
 
 @layer infonomic-components {
-  .alert-dXimWG {
+  :is(.alert-dXimWG, .infonomic-alert) {
     align-items: start;
     gap: var(--gap-2);
     border-radius: var(--border-radius-md);
@@ -17,13 +17,13 @@
     display: flex;
   }
 
-  .alert-with-title-SylcSu {
+  :is(.alert-with-title-SylcSu, .infonomic-alert-with-title) {
     flex-direction: column;
     width: 100%;
     display: flex;
   }
 
-  .icon-RcHAGq {
+  :is(.icon-RcHAGq, .infonomic-alert-icon) {
     justify-content: center;
     align-items: center;
     width: 24px;
@@ -33,7 +33,7 @@
     display: flex;
   }
 
-  .close-BUVZO7 {
+  :is(.close-BUVZO7, .infonomic-alert-close) {
     border-radius: 100%;
     justify-content: center;
     align-items: center;
@@ -47,12 +47,12 @@
     display: flex;
   }
 
-  .fade-VGuhOJ {
+  :is(.fade-VGuhOJ, .infonomic-alert-fade) {
     opacity: 0;
     transition: opacity .4s ease-in-out;
   }
 
-  .header-y_AKgG {
+  :is(.header-y_AKgG, .infonomic-alert-header) {
     width: 100%;
     margin-bottom: var(--spacing-8);
     align-items: start;
@@ -60,7 +60,7 @@
     display: flex;
   }
 
-  .title-M6aCqW {
+  :is(.title-M6aCqW, .infonomic-alert-title) {
     padding-top: 1px;
     font-size: 1.2rem;
     font-weight: bold;
@@ -68,7 +68,7 @@
     display: flex;
   }
 
-  .content-oyoXMS {
+  :is(.content-oyoXMS, .infonomic-alert-content) {
     font-size: var(--font-size-sm);
     padding-top: 1px;
   }
@@ -77,37 +77,41 @@
     margin-top: 0;
   }
 
-  .primary-Y1uhvt {
+  .infonomic-alert-content:first-child {
+    margin-top: 0;
+  }
+
+  :is(.primary-Y1uhvt, .infonomic-alert-primary) {
     --alert-border: var(--stroke-primary);
     --alert-background: var(--fill-primary-weak);
   }
 
-  .secondary-A_6wDq {
+  :is(.secondary-A_6wDq, .infonomic-alert-secondary) {
     --alert-border: var(--stroke-secondary);
     --alert-background: var(--fill-secondary-weak);
   }
 
-  .noeffect-4mzRDQ {
+  :is(.noeffect-4mzRDQ, .infonomic-alert-noeffect) {
     --alert-border: var(--stroke-noeffect);
     --alert-background: var(--fill-noeffect-weak);
   }
 
-  .success-FCgDMo {
+  :is(.success-FCgDMo, .infonomic-alert-success) {
     --alert-border: var(--stroke-success);
     --alert-background: var(--fill-success-weak);
   }
 
-  .info-KZnWBW {
+  :is(.info-KZnWBW, .infonomic-alert-info) {
     --alert-border: var(--stroke-info);
     --alert-background: var(--fill-info-weak);
   }
 
-  .warning-UtouDH {
+  :is(.warning-UtouDH, .infonomic-alert-warning) {
     --alert-border: var(--stroke-warning);
     --alert-background: var(--fill-warning-weak);
   }
 
-  .danger-QFtDqI {
+  :is(.danger-QFtDqI, .infonomic-alert-danger) {
     --alert-border: var(--stroke-danger);
     --alert-background: var(--fill-danger-weak);
   }

package/dist/components/notifications/toast.js

@@ -30,12 +30,12 @@ const toast_Toast = function({ ref, intent = 'success', position = 'bottom-right
     };
     return /*#__PURE__*/ jsxs(external_radix_ui_Toast.Root, {
         ref: mergedRef,
-        className: classnames('toast', toast_module.root, toast_module[position]),
+        className: classnames('infonomic-toast', toast_module.root, toast_module[position]),
         open: open,
         onOpenChange: onOpenChange,
         children: [
             /*#__PURE__*/ jsxs("div", {
-                className: classnames('toast-header', toast_module.header),
+                className: classnames('infonomic-toast-header', toast_module.header),
                 children: [
                     /*#__PURE__*/ jsx("time", {
                         dateTime: eventDateRef.current.toISOString(),
@@ -54,7 +54,7 @@ const toast_Toast = function({ ref, intent = 'success', position = 'bottom-right
                             tabIndex: 0,
                             variant: "filled",
                             "aria-label": "Close",
-                            className: toast_module.close,
+                            className: classnames('infonomic-toast-close', toast_module.close),
                             type: "button",
                             onClick: handleOnClose,
                             children: /*#__PURE__*/ jsx(CloseIcon, {
@@ -66,14 +66,14 @@ const toast_Toast = function({ ref, intent = 'success', position = 'bottom-right
                 ]
             }),
             /*#__PURE__*/ jsxs(external_radix_ui_Toast.Title, {
-                className: classnames('toast-title', toast_module.title),
+                className: classnames('infonomic-toast-title', toast_module.title),
                 children: [
                     null != icon && /*#__PURE__*/ jsx(Icon, {}),
                     title
                 ]
             }),
             /*#__PURE__*/ jsx(external_radix_ui_Toast.Description, {
-                className: classnames("toast-description", toast_module.description),
+                className: classnames("infonomic-toast-description", toast_module.description),
                 children: message
             })
         ]

package/dist/components/notifications/toast.module.css

@@ -9,7 +9,8 @@ infonomic-components;
   /* Positions are relative to the toast viewport which is set 
    globally in components/toast.css  */
 
-  .root {
+  .root,
+  :global(.infonomic-toast-root) {
     position: absolute;
     display: flex;
     flex-direction: column;
@@ -26,39 +27,50 @@ infonomic-components;
 
   :global(.dark),
   :global([data-theme="dark"]) {
-    .root {
+
+    .root,
+    :global(.infonomic-toast-root) {
       background: var(--canvas-800);
     }
   }
 
-  .root[data-state="open"] {
+  .root[data-state="open"],
+  :global(.infonomic-toast-root[data-state="open"]) {
     animation: slideInFromBottom 150ms cubic-bezier(0.16, 1, 0.3, 1);
   }
 
-  .root[data-state="closed"] {
+  .root[data-state="closed"],
+  :global(.infonomic-toast-root[data-state="closed"]) {
     animation: hide 100ms ease-in;
   }
 
-  .root[data-swipe="move"] {
+  .root[data-swipe="move"],
+  :global(.infonomic-toast-root[data-swipe="move"]) {
     transform: translateX(var(--radix-toast-swipe-move-x));
   }
 
-  .root[data-swipe="cancel"] {
+  .root[data-swipe="cancel"],
+  :global(.infonomic-toast-root[data-swipe="cancel"]) {
     transform: translateX(0);
     transition: transform 200ms ease-out;
   }
 
   .root.top-right[data-swipe="end"],
-  .root.bottom-right[data-swipe="end"] {
+  .root.bottom-right[data-swipe="end"],
+  :global(.infonomic-toast-root.top-right[data-swipe="end"]),
+  :global(.infonomic-toast-root.bottom-right[data-swipe="end"]) {
     animation: swipeOutToRight 100ms ease-out;
   }
 
   .root.top-left[data-swipe="end"],
-  .root.bottom-left[data-swipe="end"] {
+  .root.bottom-left[data-swipe="end"],
+  :global(.infonomic-toast-root.top-left[data-swipe="end"]),
+  :global(.infonomic-toast-root.bottom-left[data-swipe="end"]) {
     animation: swipeOutToLeft 100ms ease-out;
   }
 
-  .header {
+  .header,
+  :global(.infonomic-toast-header) {
     display: flex;
     padding: 0 16px 0 12px;
     align-items: start;
@@ -66,7 +78,8 @@ infonomic-components;
     justify-content: space-between;
   }
 
-  .close {
+  .close,
+  :global(.infonomic-toast-close) {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -80,11 +93,13 @@ infonomic-components;
     margin-top: -2px;
   }
 
-  .close svg {
+  .close svg,
+  :global(.infonomic-toast-close svg) {
     fill: white;
   }
 
-  .title {
+  .title,
+  :global(.infonomic-toast-title) {
     display: flex;
     padding: 0 12px 0 8px;
     align-items: start;
@@ -94,14 +109,16 @@ infonomic-components;
     font-size: 15px;
   }
 
-  .description {
+  .description,
+  :global(.infonomic-toast-description) {
     margin: 0;
     padding: 0 8px 0 12px;
     font-size: var(--font-size-sm);
     line-height: 1.3;
   }
 
-  .action {
+  .action,
+  :global(.infonomic-toast-action) {
     display: flex;
     justify-content: end;
     padding: 0 12px 0 12px;
@@ -110,25 +127,29 @@ infonomic-components;
   /* Positions are relative to the toast viewport which is set 
    globally in components/toast.css  */
 
-  .top-left {
+  .top-left,
+  :global(.infonomic-toast-top-left) {
     top: 88px;
     right: 16px;
     left: 16px;
   }
 
-  .top-right {
+  .top-right,
+  :global(.infonomic-toast-top-right) {
     top: 88px;
     right: 16px;
     left: 16px;
   }
 
-  .bottom-left {
+  .bottom-left,
+  :global(.infonomic-toast-bottom-left) {
     bottom: 16px;
     right: 16px;
     left: 16px;
   }
 
-  .bottom-right {
+  .bottom-right,
+  :global(.infonomic-toast-bottom-right) {
     bottom: 16px;
     right: 16px;
     left: 16px;
@@ -137,16 +158,21 @@ infonomic-components;
   @media (min-width: 48rem) {
 
     .root.top-right[data-state="open"],
-    .root.bottom-right[data-state="open"] {
+    .root.bottom-right[data-state="open"],
+    :global(.infonomic-toast-root.top-right[data-state="open"]),
+    :global(.infonomic-toast-root.bottom-right[data-state="open"]) {
       animation: slideInFromRight 150ms cubic-bezier(0.16, 1, 0.3, 1);
     }
 
     .root.top-left[data-state="open"],
-    .root.bottom-left[data-state="open"] {
+    .root.bottom-left[data-state="open"],
+    :global(.infonomic-toast-root.top-left[data-state="open"]),
+    :global(.infonomic-toast-root.bottom-left[data-state="open"]) {
       animation: slideInFromLeft 150ms cubic-bezier(0.16, 1, 0.3, 1);
     }
 
-    .bottom-right {
+    .bottom-right,
+    :global(.infonomic-toast-bottom-right) {
       bottom: 16px;
       right: 16px;
       left: auto;
@@ -154,7 +180,8 @@ infonomic-components;
       max-width: 390px;
     }
 
-    .bottom-left {
+    .bottom-left,
+    :global(.infonomic-toast-bottom-left) {
       bottom: 16px;
       left: 16px;
       right: auto;
@@ -162,7 +189,8 @@ infonomic-components;
       max-width: 390px;
     }
 
-    .top-left {
+    .top-left,
+    :global(.infonomic-toast-top-left) {
       top: 88px;
       left: 16px;
       right: auto;
@@ -171,7 +199,8 @@ infonomic-components;
       max-width: 390px;
     }
 
-    .top-right {
+    .top-right,
+    :global(.infonomic-toast-top-right) {
       top: 88px;
       right: 16px;
       bottom: auto;

package/dist/components/notifications/toast_module.css

@@ -1,7 +1,7 @@
 @layer infonomic-base, infonomic-functional, infonomic-utilities, infonomic-theme, infonomic-typography;
 
 @layer infonomic-components {
-  .root-dWN7jD {
+  :is(.root-dWN7jD, .infonomic-toast-root) {
     gap: var(--gap-1);
     background: var(--gray-25);
     border-width: var(--border-width-thin);
@@ -16,7 +16,7 @@
     position: absolute;
   }
 
-  :is(.dark, [data-theme="dark"]) .root-dWN7jD {
+  :is(:is(.dark, [data-theme="dark"]) .root-dWN7jD, :is(.dark, [data-theme="dark"]) .infonomic-toast-root) {
     background: var(--canvas-800);
   }
 
@@ -24,28 +24,61 @@
     animation: .15s cubic-bezier(.16, 1, .3, 1) slideInFromBottom-O94u9U;
   }
 
+  .infonomic-toast-root[data-state="open"] {
+    animation: .15s cubic-bezier(.16, 1, .3, 1) slideInFromBottom-O94u9U;
+  }
+
   .root-dWN7jD[data-state="closed"] {
     animation: .1s ease-in hide-vlOoW0;
   }
 
+  .infonomic-toast-root[data-state="closed"] {
+    animation: .1s ease-in hide-vlOoW0;
+  }
+
   .root-dWN7jD[data-swipe="move"] {
     transform: translateX(var(--radix-toast-swipe-move-x));
   }
 
+  .infonomic-toast-root[data-swipe="move"] {
+    transform: translateX(var(--radix-toast-swipe-move-x));
+  }
+
   .root-dWN7jD[data-swipe="cancel"] {
     transition: transform .2s ease-out;
     transform: translateX(0);
   }
 
+  .infonomic-toast-root[data-swipe="cancel"] {
+    transition: transform .2s ease-out;
+    transform: translateX(0);
+  }
+
   .root-dWN7jD.top-right-OsKbVb[data-swipe="end"], .root-dWN7jD.bottom-right-Nzuhur[data-swipe="end"] {
     animation: .1s ease-out swipeOutToRight-FWaeVx;
   }
 
+  .infonomic-toast-root.top-right[data-swipe="end"] {
+    animation: .1s ease-out swipeOutToRight-FWaeVx;
+  }
+
+  .infonomic-toast-root.bottom-right[data-swipe="end"] {
+    animation: .1s ease-out swipeOutToRight-FWaeVx;
+  }
+
   .root-dWN7jD.top-left-dy_IMc[data-swipe="end"], .root-dWN7jD.bottom-left-_RdEZn[data-swipe="end"] {
     animation: .1s ease-out swipeOutToLeft-OI9y6O;
   }
 
-  .header-ItoxDs {
+  .infonomic-toast-root.top-left[data-swipe="end"] {
+    animation: .1s ease-out swipeOutToLeft-OI9y6O;
+  }
+
+  .infonomic-toast-root.bottom-left[data-swipe="end"] {
+    animation: .1s ease-out swipeOutToLeft-OI9y6O;
+  }
+
+  :is(.header-ItoxDs, .infonomic-toast-header) {
     align-items: start;
     gap: var(--gap-2);
     justify-content: space-between;
@@ -53,7 +86,7 @@
     display: flex;
   }
 
-  .close-HwTMjn {
+  :is(.close-HwTMjn, .infonomic-toast-close) {
     border-radius: 100%;
     justify-content: center;
     align-items: center;
@@ -71,7 +104,11 @@
     fill: #fff;
   }
 
-  .title-qfQE8M {
+  .infonomic-toast-close svg {
+    fill: #fff;
+  }
+
+  :is(.title-qfQE8M, .infonomic-toast-title) {
     align-items: start;
     gap: var(--gap-2);
     margin-bottom: 5px;
@@ -81,26 +118,26 @@
     display: flex;
   }
 
-  .description-nQWtgX {
+  :is(.description-nQWtgX, .infonomic-toast-description) {
     font-size: var(--font-size-sm);
     margin: 0;
     padding: 0 8px 0 12px;
     line-height: 1.3;
   }
 
-  .action-PunqB2 {
+  :is(.action-PunqB2, .infonomic-toast-action) {
     justify-content: end;
     padding: 0 12px;
     display: flex;
   }
 
-  .top-left-dy_IMc, .top-right-OsKbVb {
+  :is(.top-left-dy_IMc, .infonomic-toast-top-left), :is(.top-right-OsKbVb, .infonomic-toast-top-right) {
     top: 88px;
     left: 16px;
     right: 16px;
   }
 
-  .bottom-left-_RdEZn, .bottom-right-Nzuhur {
+  :is(.bottom-left-_RdEZn, .infonomic-toast-bottom-left), :is(.bottom-right-Nzuhur, .infonomic-toast-bottom-right) {
     bottom: 16px;
     left: 16px;
     right: 16px;
@@ -111,11 +148,27 @@
       animation: .15s cubic-bezier(.16, 1, .3, 1) slideInFromRight-G4Hu_M;
     }
 
+    .infonomic-toast-root.top-right[data-state="open"] {
+      animation: .15s cubic-bezier(.16, 1, .3, 1) slideInFromRight-G4Hu_M;
+    }
+
+    .infonomic-toast-root.bottom-right[data-state="open"] {
+      animation: .15s cubic-bezier(.16, 1, .3, 1) slideInFromRight-G4Hu_M;
+    }
+
     .root-dWN7jD.top-left-dy_IMc[data-state="open"], .root-dWN7jD.bottom-left-_RdEZn[data-state="open"] {
       animation: .15s cubic-bezier(.16, 1, .3, 1) slideInFromLeft-m703fy;
     }
 
-    .bottom-right-Nzuhur {
+    .infonomic-toast-root.top-left[data-state="open"] {
+      animation: .15s cubic-bezier(.16, 1, .3, 1) slideInFromLeft-m703fy;
+    }
+
+    .infonomic-toast-root.bottom-left[data-state="open"] {
+      animation: .15s cubic-bezier(.16, 1, .3, 1) slideInFromLeft-m703fy;
+    }
+
+    :is(.bottom-right-Nzuhur, .infonomic-toast-bottom-right) {
       width: 100%;
       max-width: 390px;
       bottom: 16px;
@@ -123,7 +176,7 @@
       right: 16px;
     }
 
-    .bottom-left-_RdEZn {
+    :is(.bottom-left-_RdEZn, .infonomic-toast-bottom-left) {
       width: 100%;
       max-width: 390px;
       bottom: 16px;
@@ -131,13 +184,13 @@
       right: auto;
     }
 
-    .top-left-dy_IMc {
+    :is(.top-left-dy_IMc, .infonomic-toast-top-left) {
       width: 100%;
       max-width: 390px;
       inset: 88px auto auto 16px;
     }
 
-    .top-right-OsKbVb {
+    :is(.top-right-OsKbVb, .infonomic-toast-top-right) {
       width: 100%;
       max-width: 390px;
       inset: 88px 16px auto auto;