@infonomic/uikit 5.27.0 → 5.29.0

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

@@ -1,20 +1,21 @@
 @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 {
+
   .input-wrapper,
-  :global(.input-wrapper) {
+  :global(.infonomic-input-wrapper) {
     display: flex;
     flex-direction: column;
     gap: var(--gap-1);
   }
 
   .input-container,
-  :global(.input-container) {
+  :global(.infonomic-input-container) {
     position: relative;
     width: 100%;
     padding: 0;
@@ -24,7 +25,7 @@
   }
 
   .input,
-  :global(.input) {
+  :global(.infonomic-input) {
     border: none;
     outline: none;
     font-weight: normal;
@@ -38,8 +39,8 @@
 
   .input:focus,
   .input:active,
-  :global(.input):focus,
-  :global(.input):active {
+  :global(.infonomic-input):focus,
+  :global(.infonomic-input):active {
     --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);
@@ -48,13 +49,13 @@
 
   .input:disabled,
   .input[disabled],
-  :global(.input):disabled,
-  :global(.input)[disabled] {
+  :global(.infonomic-input):disabled,
+  :global(.infonomic-input)[disabled] {
     pointer-events: none;
   }
 
   .label,
-  :global(.input-label) {
+  :global(.infonomic-input-label) {
     font-size: 0.875rem;
     font-weight: 500;
     color: var(--label-color);
@@ -62,7 +63,7 @@
 
   /* Sizes */
   .sm,
-  :global(.input-sm) {
+  :global(.infonomic-input-sm) {
     min-height: 32px;
     font-size: 0.875rem;
     line-height: 0;
@@ -70,7 +71,7 @@
   }
 
   .md,
-  :global(.input-md) {
+  :global(.infonomic-input-md) {
     min-height: 38px;
     font-size: 1.1rem;
     line-height: 0;
@@ -78,7 +79,7 @@
   }
 
   .lg,
-  :global(.input-lg) {
+  :global(.infonomic-input-lg) {
     min-height: 46px;
     font-size: 1.2rem;
     line-height: 0;
@@ -87,50 +88,50 @@
 
   .start-adornment,
   .end-adornment,
-  :global(.input-start-adornment),
-  :global(.input-end-adornment) {
+  :global(.infonomic-input-start-adornment),
+  :global(.infonomic-input-end-adornment) {
     position: absolute;
     display: flex;
     align-items: center;
   }
 
   .start-adornment,
-  :global(.input-start-adornment) {
+  :global(.infonomic-input-start-adornment) {
     left: 5px;
   }
 
   .end-adornment,
-  :global(.input-end-adornment) {
+  :global(.infonomic-input-end-adornment) {
     right: 5px;
   }
 
   .help-text,
-  :global(.input-help-text) {
+  :global(.infonomic-input-help-text) {
     font-size: 0.75rem;
     color: var(--help-text-color);
   }
 
   /* Variants */
   .outlined,
-  :global(.input-outlined) {
+  :global(.infonomic-input-outlined) {
     border: 1px solid var(--input-variant-outlined-border);
     background-color: transparent;
   }
 
   .outlined:hover,
-  :global(.input-outlined):hover {
+  :global(.infonomic-input-outlined):hover {
     border: 1px solid var(--input-variant-outlined-hover-border);
   }
 
   .outlined:focus,
   .outlined:active,
-  :global(.input-outlined):focus,
-  :global(.input-outlined):active {
+  :global(.infonomic-input-outlined):focus,
+  :global(.infonomic-input-outlined):active {
     --ring-color: var(--input-variant-outline-ring-color);
   }
 
   .underlined,
-  :global(.input-underlined) {
+  :global(.infonomic-input-underlined) {
     border-bottom: 1px solid var(--input-variant-underlined-border);
     border-radius: 0;
     gap: var(--gap-1);
@@ -139,79 +140,79 @@
 
   /* Sizes */
   .underlined.sm,
-  :global(.input-underlined.input-sm) {
+  :global(.infonomic-input-underlined.input-sm) {
     padding: 0.25rem 0.1rem;
     min-height: 26px;
   }
 
   .underlined.md,
-  :global(.input-underlined.input-md) {
+  :global(.infonomic-input-underlined.input-md) {
     padding: 0.25rem 0.1rem;
     min-height: 30px;
   }
 
   .underlined.lg,
-  :global(.input-underlined.input-lg) {
+  :global(.infonomic-input-underlined.input-lg) {
     padding: 0 0.1rem;
     min-height: 34px;
   }
 
   .underlined:hover,
-  :global(.input-underlined):hover {
+  :global(.infonomic-input-underlined):hover {
     border-bottom: 1px solid var(--input-variant-underlined-hover-border);
   }
 
   .filled,
-  :global(.input-filled) {
+  :global(.infonomic-input-filled) {
     background-color: var(--input-variant-filled);
   }
 
   /* Error classes last, so that they override all 
     of the above */
   .error,
-  :global(.input-error) {
+  :global(.infonomic-input-error) {
     border: 1px solid var(--red-400);
   }
 
   .error:hover,
-  :global(.input-error):hover {
+  :global(.infonomic-input-error):hover {
     border: 1px solid var(--red-400);
   }
 
   .error:focus,
   .error:active,
-  :global(.input-error):focus,
-  :global(.input-error):active {
+  :global(.infonomic-input-error):focus,
+  :global(.infonomic-input-error):active {
     --ring-color: var(--red-300);
   }
 
   .underlined.start-adornment-padding,
   .start-adornment-padding,
-  :global(.input-underlined.input-start-adornment-padding),
-  :global(.input-start-adornment-padding) {
+  :global(.infonomic-input-underlined.input-start-adornment-padding),
+  :global(.infonomic-input-start-adornment-padding) {
     padding-left: 2rem;
   }
 
   .underlined.end-adornment-padding,
   .end-adornment-padding,
-  :global(.input-underlined.input-end-adornment-padding),
-  :global(.input-end-adornment-padding) {
+  :global(.infonomic-input-underlined.input-end-adornment-padding),
+  :global(.infonomic-input-end-adornment-padding) {
     padding-right: 2rem;
   }
 
   .underlined.start-adornment,
-  :global(.input-underlined.input-start-adornment) {
+  :global(.infonomic-input-underlined.input-start-adornment) {
     left: 0;
   }
 
   .underlined.end-adornment,
-  :global(.input-underlined.input-end-adornment) {
+  :global(.infonomic-input-underlined.input-end-adornment) {
     right: 0;
   }
 
   /* Intents */
   .primary,
-  :global(.input-primary) {
+  :global(.infonomic-input-primary) {
     --input-variant-outlined-border: var(--stroke-primary);
     --input-variant-outlined-hover-border: var(--stroke-primary-hover);
     --input-variant-outline-ring-color: var(--ring-primary);
@@ -221,7 +222,7 @@
   }
 
   .secondary,
-  :global(.input-secondary) {
+  :global(.infonomic-input-secondary) {
     --input-variant-outlined-border: var(--stroke-secondary);
     --input-variant-outlined-hover-border: var(--stroke-secondary-hover);
     --input-variant-outline-ring-color: var(--ring-secondary);
@@ -231,7 +232,7 @@
   }
 
   .noeffect,
-  :global(.input-noeffect) {
+  :global(.infonomic-input-noeffect) {
     --input-variant-outlined-border: var(--stroke-noeffect);
     --input-variant-outlined-hover-border: var(--stroke-noeffect-hover);
     --input-variant-outline-ring-color: var(--ring-noeffect);
@@ -241,7 +242,7 @@
   }
 
   .success,
-  :global(.input-success) {
+  :global(.infonomic-input-success) {
     --input-variant-outlined-border: var(--stroke-success);
     --input-variant-outlined-hover-border: var(--stroke-success-hover);
     --input-variant-outline-ring-color: var(--ring-success);
@@ -251,7 +252,7 @@
   }
 
   .info,
-  :global(.input-info) {
+  :global(.infonomic-input-info) {
     --input-variant-outlined-border: var(--stroke-info);
     --input-variant-outlined-hover-border: var(--stroke-info-hover);
     --input-variant-outline-ring-color: var(--ring-info);
@@ -261,7 +262,7 @@
   }
 
   .warning,
-  :global(.input-warning) {
+  :global(.infonomic-input-warning) {
     --input-variant-outlined-border: var(--stroke-warning);
     --input-variant-outlined-hover-border: var(--stroke-warning-hover);
     --input-variant-outline-ring-color: var(--ring-warning);
@@ -271,7 +272,7 @@
   }
 
   .danger,
-  :global(.input-danger) {
+  :global(.infonomic-input-danger) {
     --input-variant-outlined-border: var(--stroke-danger);
     --input-variant-outlined-hover-border: var(--stroke-danger-hover);
     --input-variant-outline-ring-color: var(--ring-danger);
@@ -281,4 +282,4 @@
   }
 
   /* Dark mode handled by semantic tokens in theme layer */
-}
+}

package/dist/components/forms/input_module.css

@@ -1,13 +1,13 @@
 @layer infonomic-base, infonomic-functional, infonomic-utilities, infonomic-theme, infonomic-typography;
 
 @layer infonomic-components {
-  :is(.input-wrapper-xxN94z, .input-wrapper) {
+  :is(.input-wrapper-xxN94z, .infonomic-input-wrapper) {
     gap: var(--gap-1);
     flex-direction: column;
     display: flex;
   }
 
-  :is(.input-container-GveKcr, .input-container) {
+  :is(.input-container-GveKcr, .infonomic-input-container) {
     align-items: center;
     gap: var(--gap-2);
     width: 100%;
@@ -16,7 +16,7 @@
     position: relative;
   }
 
-  :is(.input-voSL1w, .input) {
+  :is(.input-voSL1w, .infonomic-input) {
     gap: var(--gap-2);
     width: 100%;
     transition: all var(--transition-normal);
@@ -28,77 +28,77 @@
     display: inline-flex;
   }
 
-  :is(.input-voSL1w:focus, .input-voSL1w:active, .input:focus, .input:active) {
+  :is(.input-voSL1w:focus, .input-voSL1w:active, .infonomic-input:focus, .infonomic-input:active) {
     --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);
   }
 
-  :is(.input-voSL1w:disabled, .input-voSL1w[disabled], .input:disabled, .input[disabled]) {
+  :is(.input-voSL1w:disabled, .input-voSL1w[disabled], .infonomic-input:disabled, .infonomic-input[disabled]) {
     pointer-events: none;
   }
 
-  :is(.label-a8k0oS, .input-label) {
+  :is(.label-a8k0oS, .infonomic-input-label) {
     color: var(--label-color);
     font-size: .875rem;
     font-weight: 500;
   }
 
-  :is(.sm-cI5ETu, .input-sm) {
+  :is(.sm-cI5ETu, .infonomic-input-sm) {
     min-height: 32px;
     padding: .25rem .5rem;
     font-size: .875rem;
     line-height: 0;
   }
 
-  :is(.md-moqLi4, .input-md) {
+  :is(.md-moqLi4, .infonomic-input-md) {
     min-height: 38px;
     padding: .4rem .5rem;
     font-size: 1.1rem;
     line-height: 0;
   }
 
-  :is(.lg-Tn3YZZ, .input-lg) {
+  :is(.lg-Tn3YZZ, .infonomic-input-lg) {
     min-height: 46px;
     padding: .5rem;
     font-size: 1.2rem;
     line-height: 0;
   }
 
-  :is(.start-adornment-H0sdmX, .end-adornment-xl3mid, .input-start-adornment, .input-end-adornment) {
+  :is(.start-adornment-H0sdmX, .end-adornment-xl3mid, .infonomic-input-start-adornment, .infonomic-input-end-adornment) {
     align-items: center;
     display: flex;
     position: absolute;
   }
 
-  :is(.start-adornment-H0sdmX, .input-start-adornment) {
+  :is(.start-adornment-H0sdmX, .infonomic-input-start-adornment) {
     left: 5px;
   }
 
-  :is(.end-adornment-xl3mid, .input-end-adornment) {
+  :is(.end-adornment-xl3mid, .infonomic-input-end-adornment) {
     right: 5px;
   }
 
-  :is(.help-text-MZW4yX, .input-help-text) {
+  :is(.help-text-MZW4yX, .infonomic-input-help-text) {
     color: var(--help-text-color);
     font-size: .75rem;
   }
 
-  :is(.outlined-xbB8mE, .input-outlined) {
+  :is(.outlined-xbB8mE, .infonomic-input-outlined) {
     border: 1px solid var(--input-variant-outlined-border);
     background-color: #0000;
   }
 
-  :is(.outlined-xbB8mE:hover, .input-outlined:hover) {
+  :is(.outlined-xbB8mE:hover, .infonomic-input-outlined:hover) {
     border: 1px solid var(--input-variant-outlined-hover-border);
   }
 
-  :is(.outlined-xbB8mE:focus, .outlined-xbB8mE:active, .input-outlined:focus, .input-outlined:active) {
+  :is(.outlined-xbB8mE:focus, .outlined-xbB8mE:active, .infonomic-input-outlined:focus, .infonomic-input-outlined:active) {
     --ring-color: var(--input-variant-outline-ring-color);
   }
 
-  :is(.underlined-zAz2HP, .input-underlined) {
+  :is(.underlined-zAz2HP, .infonomic-input-underlined) {
     border-bottom: 1px solid var(--input-variant-underlined-border);
     gap: var(--gap-1);
     background-color: var(--input-variant-underlined);
@@ -110,7 +110,7 @@
     padding: .25rem .1rem;
   }
 
-  .input-underlined.input-sm {
+  .infonomic-input-underlined.input-sm {
     min-height: 26px;
     padding: .25rem .1rem;
   }
@@ -120,7 +120,7 @@
     padding: .25rem .1rem;
   }
 
-  .input-underlined.input-md {
+  .infonomic-input-underlined.input-md {
     min-height: 30px;
     padding: .25rem .1rem;
   }
@@ -130,24 +130,24 @@
     padding: 0 .1rem;
   }
 
-  .input-underlined.input-lg {
+  .infonomic-input-underlined.input-lg {
     min-height: 34px;
     padding: 0 .1rem;
   }
 
-  :is(.underlined-zAz2HP:hover, .input-underlined:hover) {
+  :is(.underlined-zAz2HP:hover, .infonomic-input-underlined:hover) {
     border-bottom: 1px solid var(--input-variant-underlined-hover-border);
   }
 
-  :is(.filled-M1_LzJ, .input-filled) {
+  :is(.filled-M1_LzJ, .infonomic-input-filled) {
     background-color: var(--input-variant-filled);
   }
 
-  :is(.error-n0kSb0, .input-error), :is(.error-n0kSb0:hover, .input-error:hover) {
+  :is(.error-n0kSb0, .infonomic-input-error), :is(.error-n0kSb0:hover, .infonomic-input-error:hover) {
     border: 1px solid var(--red-400);
   }
 
-  :is(.error-n0kSb0:focus, .error-n0kSb0:active, .input-error:focus, .input-error:active) {
+  :is(.error-n0kSb0:focus, .error-n0kSb0:active, .infonomic-input-error:focus, .infonomic-input-error:active) {
     --ring-color: var(--red-300);
   }
 
@@ -155,11 +155,11 @@
     padding-left: 2rem;
   }
 
-  .input-underlined.input-start-adornment-padding {
+  .infonomic-input-underlined.input-start-adornment-padding {
     padding-left: 2rem;
   }
 
-  .input-start-adornment-padding {
+  .infonomic-input-start-adornment-padding {
     padding-left: 2rem;
   }
 
@@ -167,11 +167,11 @@
     padding-right: 2rem;
   }
 
-  .input-underlined.input-end-adornment-padding {
+  .infonomic-input-underlined.input-end-adornment-padding {
     padding-right: 2rem;
   }
 
-  .input-end-adornment-padding {
+  .infonomic-input-end-adornment-padding {
     padding-right: 2rem;
   }
 
@@ -179,7 +179,7 @@
     left: 0;
   }
 
-  .input-underlined.input-start-adornment {
+  .infonomic-input-underlined.input-start-adornment {
     left: 0;
   }
 
@@ -187,11 +187,11 @@
     right: 0;
   }
 
-  .input-underlined.input-end-adornment {
+  .infonomic-input-underlined.input-end-adornment {
     right: 0;
   }
 
-  :is(.primary-xZZpZI, .input-primary) {
+  :is(.primary-xZZpZI, .infonomic-input-primary) {
     --input-variant-outlined-border: var(--stroke-primary);
     --input-variant-outlined-hover-border: var(--stroke-primary-hover);
     --input-variant-outline-ring-color: var(--ring-primary);
@@ -200,7 +200,7 @@
     --input-variant-filled: var(--fill-primary-weak);
   }
 
-  :is(.secondary-WWDy2x, .input-secondary) {
+  :is(.secondary-WWDy2x, .infonomic-input-secondary) {
     --input-variant-outlined-border: var(--stroke-secondary);
     --input-variant-outlined-hover-border: var(--stroke-secondary-hover);
     --input-variant-outline-ring-color: var(--ring-secondary);
@@ -209,7 +209,7 @@
     --input-variant-filled: var(--fill-secondary-weak);
   }
 
-  :is(.noeffect-LHbgak, .input-noeffect) {
+  :is(.noeffect-LHbgak, .infonomic-input-noeffect) {
     --input-variant-outlined-border: var(--stroke-noeffect);
     --input-variant-outlined-hover-border: var(--stroke-noeffect-hover);
     --input-variant-outline-ring-color: var(--ring-noeffect);
@@ -218,7 +218,7 @@
     --input-variant-filled: var(--fill-noeffect-weak);
   }
 
-  :is(.success-pMbTwx, .input-success) {
+  :is(.success-pMbTwx, .infonomic-input-success) {
     --input-variant-outlined-border: var(--stroke-success);
     --input-variant-outlined-hover-border: var(--stroke-success-hover);
     --input-variant-outline-ring-color: var(--ring-success);
@@ -227,7 +227,7 @@
     --input-variant-filled: var(--fill-success-weak);
   }
 
-  :is(.info-SRpUkb, .input-info) {
+  :is(.info-SRpUkb, .infonomic-input-info) {
     --input-variant-outlined-border: var(--stroke-info);
     --input-variant-outlined-hover-border: var(--stroke-info-hover);
     --input-variant-outline-ring-color: var(--ring-info);
@@ -236,7 +236,7 @@
     --input-variant-filled: var(--fill-info-weak);
   }
 
-  :is(.warning-mHL8O2, .input-warning) {
+  :is(.warning-mHL8O2, .infonomic-input-warning) {
     --input-variant-outlined-border: var(--stroke-warning);
     --input-variant-outlined-hover-border: var(--stroke-warning-hover);
     --input-variant-outline-ring-color: var(--ring-warning);
@@ -245,7 +245,7 @@
     --input-variant-filled: var(--fill-warning-weak);
   }
 
-  :is(.danger-Rzx3WQ, .input-danger) {
+  :is(.danger-Rzx3WQ, .infonomic-input-danger) {
     --input-variant-outlined-border: var(--stroke-danger);
     --input-variant-outlined-hover-border: var(--stroke-danger-hover);
     --input-variant-outline-ring-color: var(--ring-danger);

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

@@ -1,20 +1,21 @@
 @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 {
+
   .label,
-  :global(.label) {
+  :global(.infonomic-label) {
     display: block;
     font-weight: 500;
     color: var(--text);
   }
 
   .required,
-  :global(.label-required) {
+  :global(.infonomic-label-required) {
     color: var(--error);
   }
-}
+}

package/dist/components/forms/label_module.css

@@ -1,13 +1,13 @@
 @layer infonomic-base, infonomic-functional, infonomic-utilities, infonomic-theme, infonomic-typography;
 
 @layer infonomic-components {
-  :is(.label-Q88hWY, .label) {
+  :is(.label-Q88hWY, .infonomic-label) {
     color: var(--text);
     font-weight: 500;
     display: block;
   }
 
-  :is(.required-uod5eu, .label-required) {
+  :is(.required-uod5eu, .infonomic-label-required) {
     color: var(--error);
   }
 }

package/dist/components/forms/radio-group.js

@@ -25,7 +25,7 @@ const RadioGroupItem = ({ intent = 'primary', className, id, value, label, ref:
     });
 const radio_group_RadioGroup = ({ ref: forwardedRef, className, direction = 'column', children, ...props })=>/*#__PURE__*/ jsx(RadioGroup.Root, {
         ref: forwardedRef,
-        className: classnames('radio-group', radio_group_module[direction], className),
+        className: classnames('infonomic-radio-group', radio_group_module[direction], className),
         ...props,
         children: children
     });