@infonomic/uikit 5.27.0 → 5.29.0

package/dist/components/forms/radio-group.module.css

@@ -1,31 +1,36 @@
 @layer infonomic-base,
-  infonomic-functional,
-  infonomic-utilities,
-  infonomic-theme,
-  infonomic-typography,
-  infonomic-components;
+infonomic-functional,
+infonomic-utilities,
+infonomic-theme,
+infonomic-typography,
+infonomic-components;
 
 /* 'border-collapse w-full text-sm text-left text-gray-700 dark:text-gray-400 m-0', */
 @layer infonomic-components {
-  .column {
+
+  .column,
+  :global(.infonomic-radio-group-column) {
     display: flex;
     flex-direction: column;
     gap: var(--gap-2);
   }
 
-  .row {
+  .row,
+  :global(.infonomic-radio-group-row) {
     display: flex;
     flex-direction: row;
     gap: var(--gap-2);
   }
 
-  .item-container {
+  .item-container,
+  :global(.infonomic-radio-group-item-container) {
     display: flex;
     align-items: center;
     gap: var(--gap-2);
   }
 
-  .item {
+  .item,
+  :global(.infonomic-radio-group-item) {
     all: unset;
     width: 18px;
     height: 18px;
@@ -34,7 +39,8 @@
     transition: all var(--transition-normal);
   }
 
-  .item[data-state="checked"] {
+  .item[data-state="checked"],
+  :global(.infonomic-radio-group-item[data-state="checked"]) {
     --ring-offset-color: var(--background);
     --ring-offset-shadow: var(--ring-inset) 0 0 0 var(--ring-offset-width) var(--ring-offset-color);
     --ring-shadow: var(--ring-inset) 0 0 0 calc(1px + var(--ring-offset-width)) var(--ring-color);
@@ -42,25 +48,30 @@
   }
 
   .item:disabled,
-  .item[disabled] {
+  :global(.infonomic-radio-group-item:disabled),
+  .item[disabled],
+  :global(.infonomic-radio-group-item[disabled]) {
     pointer-events: none;
   }
 
   /* Style for the "checked" state */
-  .indicator[data-state="checked"] {
+  .indicator[data-state="checked"],
+  :global(.infonomic-radio-group-indicator[data-state="checked"]) {
     animation: radioIn 0.3s cubic-bezier(0.25, 1.5, 0.5, 1) forwards;
     opacity: 1;
     transform: scale(1);
   }
 
   /* Style for the "unchecked" state */
-  .indicator[data-state="unchecked"] {
+  .indicator[data-state="unchecked"],
+  :global(.infonomic-radio-group-indicator[data-state="unchecked"]) {
     animation: radioOut 0.2s ease-in;
     opacity: 0;
     transform: scale(0.8);
   }
 
-  .indicator {
+  .indicator,
+  :global(.infonomic-radio-group-indicator) {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -78,50 +89,59 @@
     }
   }
 
-  .label {
+  .label,
+  :global(.infonomic-radio-group-label) {
     color: var(--foreground);
     font-size: 15px;
     line-height: 1;
     padding-left: var(--spacing-8);
   }
 
-  .row .label {
+  .row .label,
+  :global(.infonomic-radio-group-row) :global(.infonomic-radio-group-label) {
     padding-left: 0;
     padding-right: var(--spacing-16);
   }
 
   /* Intents */
-  .primary {
+  .primary,
+  :global(.infonomic-radio-group-primary) {
     --radio-border: var(--fill-primary-strong);
     --radio-indicator-color: var(--fill-primary-strong);
   }
 
-  .secondary {
+  .secondary,
+  :global(.infonomic-radio-group-secondary) {
     --radio-border: var(--fill-secondary-strong);
     --radio-indicator-color: var(--fill-secondary-strong);
   }
 
-  .noeffect {
+  .noeffect,
+  :global(.infonomic-radio-group-noeffect) {
     --radio-border: var(--fill-noeffect-strong);
     --radio-indicator-color: var(--fill-noeffect-strong);
   }
 
-  .success {
+  .success,
+  :global(.infonomic-radio-group-success) {
     --radio-border: var(--fill-success-strong);
     --radio-indicator-color: var(--fill-success-strong);
   }
 
-  .info {
+  .info,
+  :global(.infonomic-radio-group-info) {
     --radio-border: var(--fill-info-strong);
     --radio-indicator-color: var(--fill-info-strong);
   }
 
-  .warning {
+  .warning,
+  :global(.infonomic-radio-group-warning) {
     --radio-border: var(--fill-warning-strong);
     --radio-indicator-color: var(--fill-warning-strong);
   }
 
-  .danger {
+  .danger,
+  :global(.infonomic-radio-group-danger) {
     --radio-border: var(--fill-danger-strong);
     --radio-indicator-color: var(--fill-danger-strong);
   }
@@ -163,4 +183,4 @@
       transform: scale(0.8);
     }
   }
-}
+}

package/dist/components/forms/radio-group_module.css

@@ -1,25 +1,25 @@
 @layer infonomic-base, infonomic-functional, infonomic-utilities, infonomic-theme, infonomic-typography;
 
 @layer infonomic-components {
-  .column-yYhDJG {
+  :is(.column-yYhDJG, .infonomic-radio-group-column) {
     gap: var(--gap-2);
     flex-direction: column;
     display: flex;
   }
 
-  .row-zmaQmt {
+  :is(.row-zmaQmt, .infonomic-radio-group-row) {
     gap: var(--gap-2);
     flex-direction: row;
     display: flex;
   }
 
-  .item-container-R6Abj5 {
+  :is(.item-container-R6Abj5, .infonomic-radio-group-item-container) {
     align-items: center;
     gap: var(--gap-2);
     display: flex;
   }
 
-  .item-InB91q {
+  :is(.item-InB91q, .infonomic-radio-group-item) {
     all: unset;
     border-radius: var(--border-radius-full);
     border: 2px solid var(--radio-border);
@@ -35,23 +35,50 @@
     box-shadow: var(--ring-offset-shadow), var(--ring-shadow), var(--shadow, 0 0 #0000);
   }
 
+  .infonomic-radio-group-item[data-state="checked"] {
+    --ring-offset-color: var(--background);
+    --ring-offset-shadow: var(--ring-inset) 0 0 0 var(--ring-offset-width) var(--ring-offset-color);
+    --ring-shadow: var(--ring-inset) 0 0 0 calc(1px + var(--ring-offset-width)) var(--ring-color);
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), var(--shadow, 0 0 #0000);
+  }
+
   .item-InB91q:disabled, .item-InB91q[disabled] {
     pointer-events: none;
   }
 
+  .infonomic-radio-group-item:disabled {
+    pointer-events: none;
+  }
+
+  .infonomic-radio-group-item[disabled] {
+    pointer-events: none;
+  }
+
   .indicator-PDcgDz[data-state="checked"] {
     opacity: 1;
     animation: .3s cubic-bezier(.25, 1.5, .5, 1) forwards radioIn-lODICv;
     transform: scale(1);
   }
 
+  .infonomic-radio-group-indicator[data-state="checked"] {
+    opacity: 1;
+    animation: .3s cubic-bezier(.25, 1.5, .5, 1) forwards radioIn-lODICv;
+    transform: scale(1);
+  }
+
   .indicator-PDcgDz[data-state="unchecked"] {
     opacity: 0;
     animation: .2s ease-in radioOut-Z3CBtX;
     transform: scale(.8);
   }
 
-  .indicator-PDcgDz {
+  .infonomic-radio-group-indicator[data-state="unchecked"] {
+    opacity: 0;
+    animation: .2s ease-in radioOut-Z3CBtX;
+    transform: scale(.8);
+  }
+
+  :is(.indicator-PDcgDz, .infonomic-radio-group-indicator) {
     justify-content: center;
     align-items: center;
     width: 100%;
@@ -60,7 +87,7 @@
     position: relative;
   }
 
-  .indicator-PDcgDz:after {
+  :is(.indicator-PDcgDz, .infonomic-radio-group-indicator):after {
     content: "";
     background-color: var(--radio-indicator-color);
     border-radius: 50%;
@@ -69,49 +96,49 @@
     display: block;
   }
 
-  .label-ZlWPop {
+  :is(.label-ZlWPop, .infonomic-radio-group-label) {
     color: var(--foreground);
     padding-left: var(--spacing-8);
     font-size: 15px;
     line-height: 1;
   }
 
-  .row-zmaQmt .label-ZlWPop {
+  :is(.row-zmaQmt .label-ZlWPop, .infonomic-radio-group-row .infonomic-radio-group-label) {
     padding-left: 0;
     padding-right: var(--spacing-16);
   }
 
-  .primary-NHWfNk {
+  :is(.primary-NHWfNk, .infonomic-radio-group-primary) {
     --radio-border: var(--fill-primary-strong);
     --radio-indicator-color: var(--fill-primary-strong);
   }
 
-  .secondary-cWGzzg {
+  :is(.secondary-cWGzzg, .infonomic-radio-group-secondary) {
     --radio-border: var(--fill-secondary-strong);
     --radio-indicator-color: var(--fill-secondary-strong);
   }
 
-  .noeffect-A8U5ZU {
+  :is(.noeffect-A8U5ZU, .infonomic-radio-group-noeffect) {
     --radio-border: var(--fill-noeffect-strong);
     --radio-indicator-color: var(--fill-noeffect-strong);
   }
 
-  .success-q3DXNe {
+  :is(.success-q3DXNe, .infonomic-radio-group-success) {
     --radio-border: var(--fill-success-strong);
     --radio-indicator-color: var(--fill-success-strong);
   }
 
-  .info-VlQwQn {
+  :is(.info-VlQwQn, .infonomic-radio-group-info) {
     --radio-border: var(--fill-info-strong);
     --radio-indicator-color: var(--fill-info-strong);
   }
 
-  .warning-mURb_m {
+  :is(.warning-mURb_m, .infonomic-radio-group-warning) {
     --radio-border: var(--fill-warning-strong);
     --radio-indicator-color: var(--fill-warning-strong);
   }
 
-  .danger-OJLXV7 {
+  :is(.danger-OJLXV7, .infonomic-radio-group-danger) {
     --radio-border: var(--fill-danger-strong);
     --radio-indicator-color: var(--fill-danger-strong);
   }

package/dist/components/forms/select.js

@@ -8,7 +8,7 @@ import { HelpText } from "./help-text.js";
 import select_module from "./select.module.js";
 function select_Select({ id, children, placeholder, disabledValue, intent, variant, size, position, containerClassName, className, ariaLabel, helpText, ...rest }) {
     return /*#__PURE__*/ jsxs("div", {
-        className: classnames('select-container', containerClassName),
+        className: classnames('infonomic-select-container', containerClassName),
         children: [
             /*#__PURE__*/ jsxs(Select.Root, {
                 ...rest,
@@ -67,7 +67,7 @@ function select_Select({ id, children, placeholder, disabledValue, intent, varia
     });
 }
 const SelectItem = ({ ref: forwardedRef, children, className, ...props })=>/*#__PURE__*/ jsxs(Select.Item, {
-        className: classnames('select-item', select_module["select-item"], className),
+        className: classnames('infonomic-select-item', select_module["select-item"], className),
         ...props,
         ref: forwardedRef,
         children: [
@@ -75,7 +75,7 @@ const SelectItem = ({ ref: forwardedRef, children, className, ...props })=>/*#__
                 children: children
             }),
             /*#__PURE__*/ jsx(Select.ItemIndicator, {
-                className: select_module["select-item-indicator"],
+                className: classnames('infonomic-select-item-indicator', select_module["select-item-indicator"]),
                 children: /*#__PURE__*/ jsx(CheckIcon, {})
             })
         ]

package/dist/components/forms/select.module.css

@@ -1,16 +1,19 @@
 @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 {
-  .content {
+
+  .content,
+  :global(.infonomic-select-content) {
     z-index: 50;
   }
 
-  .viewport {
+  .viewport,
+  :global(.infonomic-select-viewport) {
     z-index: 50;
     margin-top: 2px;
     border: 1px solid var(--surface-panel-border);
@@ -20,11 +23,13 @@
     padding: 6px;
   }
 
-  .group {
+  .group,
+  :global(.infonomic-select-group) {
     z-index: 50;
   }
 
-  .scroll-button {
+  .scroll-button,
+  :global(.infonomic-select-scroll-button) {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -36,7 +41,8 @@
     padding: 2px;
   }
 
-  .select-item {
+  .select-item,
+  :global(.infonomic-select-item) {
     position: relative;
     user-select: none;
     color: var(--surface-item-text);
@@ -51,18 +57,21 @@
     border-radius: 6px;
   }
 
-  .select-item[data-disabled] {
+  .select-item[data-disabled],
+  :global(.infonomic-select-item[data-disabled]) {
     color: var(--surface-item-text-disabled);
     pointer-events: none;
   }
 
-  .select-item[data-highlighted] {
+  .select-item[data-highlighted],
+  :global(.infonomic-select-item[data-highlighted]) {
     outline: none;
     background-color: var(--surface-item-hover);
     color: var(--surface-item-text-hover);
   }
 
-  .select-item-indicator {
+  .select-item-indicator,
+  :global(.infonomic-select-item-indicator) {
     position: absolute;
     left: 0;
     width: 25px;
@@ -70,4 +79,4 @@
     align-items: center;
     justify-content: center;
   }
-}
+}

package/dist/components/forms/select_module.css

@@ -1,11 +1,11 @@
 @layer infonomic-base, infonomic-functional, infonomic-utilities, infonomic-theme, infonomic-typography;
 
 @layer infonomic-components {
-  .content-Dr272c {
+  :is(.content-Dr272c, .infonomic-select-content) {
     z-index: 50;
   }
 
-  .viewport-avysx0 {
+  :is(.viewport-avysx0, .infonomic-select-viewport) {
     z-index: 50;
     border: 1px solid var(--surface-panel-border);
     box-shadow: var(--shadow-md);
@@ -15,11 +15,11 @@
     padding: 6px;
   }
 
-  .group-MyzEdB {
+  :is(.group-MyzEdB, .infonomic-select-group) {
     z-index: 50;
   }
 
-  .scroll-button-JaxK2W {
+  :is(.scroll-button-JaxK2W, .infonomic-select-scroll-button) {
     color: var(--surface-item-text);
     border: 1px solid var(--surface-panel-border);
     box-shadow: var(--shadow-md);
@@ -31,7 +31,7 @@
     display: flex;
   }
 
-  .select-item-HiANA0 {
+  :is(.select-item-HiANA0, .infonomic-select-item) {
     -webkit-user-select: none;
     user-select: none;
     color: var(--surface-item-text);
@@ -52,13 +52,24 @@
     pointer-events: none;
   }
 
+  .infonomic-select-item[data-disabled] {
+    color: var(--surface-item-text-disabled);
+    pointer-events: none;
+  }
+
   .select-item-HiANA0[data-highlighted] {
     background-color: var(--surface-item-hover);
     color: var(--surface-item-text-hover);
     outline: none;
   }
 
-  .select-item-indicator-nXFGV7 {
+  .infonomic-select-item[data-highlighted] {
+    background-color: var(--surface-item-hover);
+    color: var(--surface-item-text-hover);
+    outline: none;
+  }
+
+  :is(.select-item-indicator-nXFGV7, .infonomic-select-item-indicator) {
     justify-content: center;
     align-items: center;
     width: 25px;

package/dist/components/forms/text-area.js

@@ -28,7 +28,7 @@ const text_area_TextArea = function({ ref, id, name, label, rows = 4, required =
                 "aria-required": required,
                 "aria-errormessage": errorText,
                 "aria-describedby": error ? `error-for-${id}` : void 0,
-                className: classnames('text-area', variant, intent, input_module.input, input_module[variant], input_module[intent], text_area_module["text-area"], text_area_module[variant], {
+                className: classnames('infonomic-text-area', `infonomic-text-area-${variant}`, `infonomic-text-area-${intent}`, input_module.input, input_module[variant], input_module[intent], text_area_module["text-area"], text_area_module[variant], {
                     [input_module.error]: error
                 }, className),
                 ...rest

package/dist/components/forms/text-area.module.css

@@ -1,26 +1,26 @@
 @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 {
+
   .text-area,
-  :global(.text-area) {
+  :global(.infonomic-text-area) {
     font-size: 1.1rem;
     width: 100%;
     padding: 0.5rem;
   }
 
-  .underlined {
+  .underlined,
+  :global(.infonomic-text-area--underlined) {
     padding-left: 0;
     padding-right: 0;
   }
 
-  .outlined {
-  }
+  .outlined {}
 
-  .filled {
-  }
-}
+  .filled {}
+}

package/dist/components/forms/text-area_module.css

@@ -1,13 +1,13 @@
 @layer infonomic-base, infonomic-functional, infonomic-utilities, infonomic-theme, infonomic-typography;
 
 @layer infonomic-components {
-  :is(.text-area-P_aQjC, .text-area) {
+  :is(.text-area-P_aQjC, .infonomic-text-area) {
     width: 100%;
     padding: .5rem;
     font-size: 1.1rem;
   }
 
-  .underlined-a9hkur {
+  :is(.underlined-a9hkur, .infonomic-text-area--underlined) {
     padding-left: 0;
     padding-right: 0;
   }

package/dist/components/notifications/alert.js

@@ -31,21 +31,21 @@ const alert_Alert = function({ ref, intent = 'success', icon = true, close = tru
     if (false === show) return null;
     return /*#__PURE__*/ jsx("div", {
         ref: ref,
-        className: classnames('alert', intent, alert_module.alert, alert_module[intent], className, {
+        className: classnames('infonomic-alert', `infonomic-alert-${intent}`, alert_module.alert, alert_module[intent], className, {
             [alert_module.fade]: fade
         }),
         ...rest,
         children: null != title ? /*#__PURE__*/ jsxs("div", {
-            className: classnames('alert-with-title', alert_module["alert-with-title"]),
+            className: classnames('infonomic-alert-with-title', alert_module["alert-with-title"]),
             children: [
                 /*#__PURE__*/ jsxs("div", {
-                    className: classnames(alert_module.header),
+                    className: classnames('infonomic-alert-header', alert_module.header),
                     children: [
                         icon && /*#__PURE__*/ jsx(Icon, {
-                            className: alert_module.icon
+                            className: classnames('infonomic-alert-icon', alert_module.icon)
                         }),
                         /*#__PURE__*/ jsx("div", {
-                            className: classnames(alert_module.title),
+                            className: classnames('infonomic-alert-title', alert_module.title),
                             children: /*#__PURE__*/ jsx("span", {
                                 children: title
                             })
@@ -54,7 +54,7 @@ const alert_Alert = function({ ref, intent = 'success', icon = true, close = tru
                             intent: intent,
                             variant: "filled",
                             "aria-label": "Close",
-                            className: classnames(alert_module.close),
+                            className: classnames('infonomic-alert-close', alert_module.close),
                             type: "button",
                             onClick: handleOnClose,
                             ...rest,
@@ -66,24 +66,24 @@ const alert_Alert = function({ ref, intent = 'success', icon = true, close = tru
                     ]
                 }),
                 /*#__PURE__*/ jsx("div", {
-                    className: classnames(alert_module.content),
+                    className: classnames('infonomic-alert-content', alert_module.content),
                     children: children
                 })
             ]
         }) : /*#__PURE__*/ jsxs(Fragment, {
             children: [
                 icon && /*#__PURE__*/ jsx(Icon, {
-                    className: alert_module.icon
+                    className: classnames('infonomic-alert-icon', alert_module.icon)
                 }),
                 /*#__PURE__*/ jsx("div", {
-                    className: alert_module.content,
+                    className: classnames('infonomic-alert-content', alert_module.content),
                     children: children
                 }),
                 true === close && /*#__PURE__*/ jsx(Button, {
                     intent: intent,
                     variant: "filled",
                     "aria-label": "Close",
-                    className: alert_module.close,
+                    className: classnames('infonomic-alert-close', alert_module.close),
                     type: "button",
                     onClick: handleOnClose,
                     ...rest,