@infonomic/uikit 5.27.0 → 5.28.0

package/dist/components/button/copy-button.module.css

@@ -1,18 +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 {
+
   .copy-button-container,
-  :global(.copy-button-container) {
+  :global(.infonomic-copy-button-container) {
     display: inline-block;
   }
 
   .copy-button svg,
-  :global(.copy-button) svg {
+  :global(.infonomic-copy-button) svg {
     width: 90%;
     height: 90%;
     display: block;
@@ -20,7 +21,7 @@
 
   /* Sizes */
   .xs,
-  :global(.copy-button-xs) {
+  :global(.infonomic-copy-button-xs) {
     width: 26px;
     height: 26px;
     min-height: 26px;
@@ -28,7 +29,7 @@
   }
 
   .sm,
-  :global(.copy-button-sm) {
+  :global(.infonomic-copy-button-sm) {
     width: 32px;
     height: 32px;
     min-height: 32px;
@@ -36,7 +37,7 @@
   }
 
   .md,
-  :global(.copy-button-md) {
+  :global(.infonomic-copy-button-md) {
     width: 38px;
     height: 38px;
     min-height: 38px;
@@ -44,7 +45,7 @@
   }
 
   .lg,
-  :global(.copy-button-lg) {
+  :global(.infonomic-copy-button-lg) {
     width: 46px;
     height: 46px;
     min-height: 46px;
@@ -52,10 +53,10 @@
   }
 
   .xl,
-  :global(.copy-button-xl) {
+  :global(.infonomic-copy-button-xl) {
     width: 54px;
     height: 54px;
     min-height: 54px;
     padding: 0.65rem;
   }
-}
+}

package/dist/components/button/copy-button_module.css

@@ -1,45 +1,45 @@
 @layer infonomic-base, infonomic-functional, infonomic-utilities, infonomic-theme, infonomic-typography;
 
 @layer infonomic-components {
-  :is(.copy-button-container-vCNz8o, .copy-button-container) {
+  :is(.copy-button-container-vCNz8o, .infonomic-copy-button-container) {
     display: inline-block;
   }
 
-  :is(.copy-button-oa4bdj svg, .copy-button svg) {
+  :is(.copy-button-oa4bdj svg, .infonomic-copy-button svg) {
     width: 90%;
     height: 90%;
     display: block;
   }
 
-  :is(.xs-lZmf78, .copy-button-xs) {
+  :is(.xs-lZmf78, .infonomic-copy-button-xs) {
     width: 26px;
     height: 26px;
     min-height: 26px;
     padding: .25rem;
   }
 
-  :is(.sm-KNN1e5, .copy-button-sm) {
+  :is(.sm-KNN1e5, .infonomic-copy-button-sm) {
     width: 32px;
     height: 32px;
     min-height: 32px;
     padding: .35rem;
   }
 
-  :is(.md-OoH0l4, .copy-button-md) {
+  :is(.md-OoH0l4, .infonomic-copy-button-md) {
     width: 38px;
     height: 38px;
     min-height: 38px;
     padding: .45rem;
   }
 
-  :is(.lg-uu5ujz, .copy-button-lg) {
+  :is(.lg-uu5ujz, .infonomic-copy-button-lg) {
     width: 46px;
     height: 46px;
     min-height: 46px;
     padding: .55rem;
   }
 
-  :is(.xl-pFYyrS, .copy-button-xl) {
+  :is(.xl-pFYyrS, .infonomic-copy-button-xl) {
     width: 54px;
     height: 54px;
     min-height: 54px;

package/dist/components/card/card.js

@@ -8,7 +8,7 @@ const Card = ({ className, hover, children, asChild, ref, ...rest })=>{
     const classes = classnames(card_module.card, hoverClasses, className);
     return /*#__PURE__*/ jsx(Comp, {
         ref: ref,
-        className: classes,
+        className: classnames('infonomic-card', classes),
         ...rest,
         children: children
     });
@@ -16,31 +16,31 @@ const Card = ({ className, hover, children, asChild, ref, ...rest })=>{
 Card.displayName = 'Card';
 const Header = ({ className, ref, ...props })=>/*#__PURE__*/ jsx("div", {
         ref: ref,
-        className: classnames(card_module["card-header"], className),
+        className: classnames('infonomic-card-header', card_module["card-header"], className),
         ...props
     });
 Header.displayName = 'CardHeader';
 const Title = ({ className, ref, ...props })=>/*#__PURE__*/ jsx("div", {
         ref: ref,
-        className: classnames(card_module["card-title"], className),
+        className: classnames('infonomic-card-title', card_module["card-title"], className),
         ...props
     });
 Title.displayName = 'CardTitle';
 const Description = ({ className, ref, ...props })=>/*#__PURE__*/ jsx("div", {
         ref: ref,
-        className: classnames(card_module["card-description"], className),
+        className: classnames("infonomic-card-description", card_module["card-description"], className),
         ...props
     });
 Description.displayName = "CardDescription";
 const Content = ({ className, ref, ...props })=>/*#__PURE__*/ jsx("div", {
         ref: ref,
-        className: classnames(card_module["card-content"], className),
+        className: classnames('infonomic-card-content', card_module["card-content"], className),
         ...props
     });
 Content.displayName = 'CardContent';
 const Footer = ({ className, ref, ...props })=>/*#__PURE__*/ jsx("div", {
         ref: ref,
-        className: classnames(card_module["card-footer"], className),
+        className: classnames('infonomic-card-footer', card_module["card-footer"], className),
         ...props
     });
 Footer.displayName = 'CardFooter';

package/dist/components/card/card.module.css

@@ -8,7 +8,7 @@ infonomic-components;
 @layer infonomic-components {
 
   .card,
-  :global(.card) {
+  :global(.infonomic-card) {
     display: flex;
     flex-direction: column;
     text-decoration: none;
@@ -27,19 +27,19 @@ infonomic-components;
   :global([data-theme="dark"]) {
 
     .card,
-    :global(.card) {
+    :global(.infonomic-card) {
       background: var(--canvas-800);
     }
   }
 
 
   .card-hover,
-  :global(.card-hover) {
+  :global(.infonomic-card-hover) {
     transition: background 0.2s ease-in-out;
   }
 
   .card-hover:hover,
-  :global(.card-hover):hover {
+  :global(.infonomic-card-hover):hover {
     background: oklch(from var(--theme-50) 1 0.03 h);
   }
 
@@ -47,13 +47,13 @@ infonomic-components;
   :global([data-theme="dark"]) {
 
     .card-hover:hover,
-    :global(.card-hover):hover {
+    :global(.infonomic-card-hover):hover {
       background: oklch(from var(--canvas-800) 0.2 c h);
     }
   }
 
   .card-header,
-  :global(.card-header) {
+  :global(.infonomic-card-header) {
     display: flex;
     flex-direction: column;
     gap: 0.5rem;
@@ -61,7 +61,7 @@ infonomic-components;
   }
 
   .card-title,
-  :global(.card-title) {
+  :global(.infonomic-card-title) {
     color: var(--headings);
     font-size: 1.8rem;
     font-weight: bold;
@@ -70,20 +70,20 @@ infonomic-components;
   }
 
   .card-description,
-  :global(.card-description) {
+  :global(.infonomic-card-description) {
     font-size: 0.875rem;
     color: var(--muted);
   }
 
   .card-content,
-  :global(.card-content) {
+  :global(.infonomic-card-content) {
     flex: 1;
     padding: 1rem;
     padding-top: 0;
   }
 
   .card-footer,
-  :global(.card-footer) {
+  :global(.infonomic-card-footer) {
     display: flex;
     align-items: center;
     padding: 1rem;

package/dist/components/card/card_module.css

@@ -1,7 +1,7 @@
 @layer infonomic-base, infonomic-functional, infonomic-utilities, infonomic-theme, infonomic-typography;
 
 @layer infonomic-components {
-  :is(.card-mqJaiW, .card) {
+  :is(.card-mqJaiW, .infonomic-card) {
     width: 100%;
     max-width: 100%;
     color: var(--foreground);
@@ -16,30 +16,30 @@
     display: flex;
   }
 
-  :is(:is(.dark, [data-theme="dark"]) .card-mqJaiW, :is(.dark, [data-theme="dark"]) .card) {
+  :is(:is(.dark, [data-theme="dark"]) .card-mqJaiW, :is(.dark, [data-theme="dark"]) .infonomic-card) {
     background: var(--canvas-800);
   }
 
-  :is(.card-hover-hvT4d6, .card-hover) {
+  :is(.card-hover-hvT4d6, .infonomic-card-hover) {
     transition: background .2s ease-in-out;
   }
 
-  :is(.card-hover-hvT4d6:hover, .card-hover:hover) {
+  :is(.card-hover-hvT4d6:hover, .infonomic-card-hover:hover) {
     background: oklch(from var(--theme-50) 1 .03 h);
   }
 
-  :is(:is(.dark, [data-theme="dark"]) .card-hover-hvT4d6:hover, :is(.dark, [data-theme="dark"]) .card-hover:hover) {
+  :is(:is(.dark, [data-theme="dark"]) .card-hover-hvT4d6:hover, :is(.dark, [data-theme="dark"]) .infonomic-card-hover:hover) {
     background: oklch(from var(--canvas-800) .2 c h);
   }
 
-  :is(.card-header-XnoBkP, .card-header) {
+  :is(.card-header-XnoBkP, .infonomic-card-header) {
     flex-direction: column;
     gap: .5rem;
     padding: 1rem;
     display: flex;
   }
 
-  :is(.card-title-JI7Lu3, .card-title) {
+  :is(.card-title-JI7Lu3, .infonomic-card-title) {
     color: var(--headings);
     letter-spacing: -.015em;
     font-size: 1.8rem;
@@ -47,17 +47,17 @@
     line-height: 1;
   }
 
-  :is(.card-description-fwu7HE, .card-description) {
+  :is(.card-description-fwu7HE, .infonomic-card-description) {
     color: var(--muted);
     font-size: .875rem;
   }
 
-  :is(.card-content-uhoZYJ, .card-content) {
+  :is(.card-content-uhoZYJ, .infonomic-card-content) {
     flex: 1;
     padding: 0 1rem 1rem;
   }
 
-  :is(.card-footer-BxTa4b, .card-footer) {
+  :is(.card-footer-BxTa4b, .infonomic-card-footer) {
     align-items: center;
     padding: 0 1rem 1rem;
     display: flex;

package/dist/components/chips/chip.js

@@ -53,7 +53,7 @@ const Chip = ({ variant = 'assist', intent = 'primary', size = 'md', selected =
         onClick: handleRemoveClick,
         onKeyDown: handleRemoveKeyDown,
         children: /*#__PURE__*/ jsx(CloseIcon, {
-            className: classnames(chip_module.icon, chip_module["close-icon"])
+            className: classnames('infonomic-chip-close-icon', chip_module.icon, chip_module["close-icon"])
         })
     }) : endIcon;
     const appliedVariant = isSelected ? 'filled' : 'outlined';
@@ -65,7 +65,7 @@ const Chip = ({ variant = 'assist', intent = 'primary', size = 'md', selected =
         "aria-disabled": disabled || void 0,
         "aria-pressed": isSelectable ? isSelected : void 0,
         "aria-selected": isSelectable ? isSelected : void 0,
-        className: classnames('chip', variant, intent, size, {
+        className: classnames('infonomic-chip', `infonomic-chip-${variant}`, `infonomic-chip-${intent}`, `infonomic-chip-${size}`, {
             selected: isSelected,
             disabled,
             removable: isRemovable
@@ -76,15 +76,15 @@ const Chip = ({ variant = 'assist', intent = 'primary', size = 'md', selected =
         ...restProps,
         children: [
             null != leadingIcon && /*#__PURE__*/ jsx("span", {
-                className: classnames(chip_module.iconWrapper),
+                className: classnames('infonomic-chip-icon-wrapper', chip_module.iconWrapper),
                 children: leadingIcon
             }),
             /*#__PURE__*/ jsx("span", {
-                className: chip_module.label,
+                className: classnames('infonomic-chip-label', chip_module.label),
                 children: children
             }),
             null != trailingIcon && /*#__PURE__*/ jsx("span", {
-                className: classnames(chip_module.iconWrapper),
+                className: classnames('infonomic-chip-icon-wrapper', chip_module.iconWrapper),
                 children: trailingIcon
             })
         ]

package/dist/components/chips/chip.module.css

@@ -8,7 +8,7 @@ infonomic-components;
 @layer infonomic-components {
 
   .chip,
-  :global(.chip) {
+  :global(.infonomic-chip) {
     --chip-font-size: 0.9rem;
     --chip-height: 34px;
     --chip-padding-y: 0.35rem;
@@ -36,47 +36,51 @@ infonomic-components;
 
   .chip:disabled,
   .chip[disabled],
-  :global(.chip):disabled,
-  :global(.chip)[disabled] {
+  :global(.infonomic-chip):disabled,
+  :global(.infonomic-chip)[disabled] {
     pointer-events: none;
   }
 
   .chip:focus,
   .chip:active,
-  :global(.chip):focus,
-  :global(.chip):active {
+  :global(.infonomic-chip):focus,
+  :global(.infonomic-chip):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);
   }
 
-  .label {
+  .label,
+  :global(.infonomic-chip-label) {
     display: inline-flex;
     align-items: center;
     white-space: nowrap;
   }
 
-  .icon {
+  .icon,
+  :global(.infonomic-chip-icon) {
     width: var(--chip-icon-size);
     height: var(--chip-icon-size);
   }
 
-  .iconWrapper {
+  .iconWrapper,
+  :global(.infonomic-chip-icon-wrapper) {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     line-height: 0;
   }
 
-  .close-icon {
+  .close-icon,
+  :global(.infonomic-chip-close-icon) {
     width: calc(var(--chip-icon-size) * 0.9);
     height: calc(var(--chip-icon-size) * 0.9);
   }
 
   /* Sizes ----------------------------------------------------------- */
   .xs,
-  :global(.chip-xs) {
+  :global(.infonomic-chip-xs) {
     --chip-height: 24px;
     --chip-padding-y: 0.15rem;
     --chip-padding-x: 0.3rem;
@@ -86,7 +90,7 @@ infonomic-components;
   }
 
   .sm,
-  :global(.chip-sm) {
+  :global(.infonomic-chip-sm) {
     --chip-height: 28px;
     --chip-padding-y: 0.2rem;
     --chip-padding-x: 0.3rem;
@@ -95,7 +99,7 @@ infonomic-components;
   }
 
   .md,
-  :global(.chip-md) {
+  :global(.infonomic-chip-md) {
     --chip-height: 32px;
     --chip-padding-y: 0.25rem;
     --chip-padding-x: 0.3rem;
@@ -104,7 +108,7 @@ infonomic-components;
   }
 
   .lg,
-  :global(.chip-lg) {
+  :global(.infonomic-chip-lg) {
     --chip-gap: var(--gap-2);
     --chip-height: 36px;
     --chip-padding-y: 0.3rem;
@@ -114,7 +118,7 @@ infonomic-components;
   }
 
   .xl,
-  :global(.chip-xl) {
+  :global(.infonomic-chip-xl) {
     --chip-gap: var(--gap-2);
     --chip-height: 40px;
     --chip-padding-y: 0.3rem;
@@ -126,27 +130,27 @@ infonomic-components;
   /* Variants -------------------------------------------------------- */
   /* Variants - Consuming Variables */
   .filled,
-  :global(.chip-filled) {
+  :global(.infonomic-chip-filled) {
     color: var(--chip-variant-filled-foreground);
     background-color: var(--chip-variant-filled);
   }
 
   .filled:hover,
-  :global(.chip-filled):hover {
+  :global(.infonomic-chip-filled):hover {
     background-color: var(--chip-variant-filled-hover);
   }
 
   .filled:focus,
   .filled:active,
-  :global(.chip-filled):focus,
-  :global(.chip-filled):active {
+  :global(.infonomic-chip-filled):focus,
+  :global(.infonomic-chip-filled):active {
     --ring-color: var(--chip-ring-color);
   }
 
   .filled:disabled,
   .filled[disabled],
-  :global(.chip-filled):disabled,
-  :global(.chip-filled)[disabled] {
+  :global(.infonomic-chip-filled):disabled,
+  :global(.infonomic-chip-filled)[disabled] {
     background-color: var(--chip-variant-filled-disabled,
         oklch(from var(--chip-variant-filled) calc(l * 1.1) calc(c * 0.85) h));
     color: var(--chip-variant-filled-foreground-disabled,
@@ -157,27 +161,27 @@ infonomic-components;
   /* Weak variant for close button on selected chip */
 
   .filled-weak,
-  :global(.chip-filled-weak) {
+  :global(.infonomic-chip-filled-weak) {
     color: var(--chip-variant-filled-weak-foreground);
     background-color: var(--chip-variant-filled-weak);
   }
 
   .filled-weak:hover,
-  :global(.chip-filled-weak):hover {
+  :global(.infonomic-chip-filled-weak):hover {
     background-color: var(--chip-variant-filled-weak-hover);
   }
 
   .filled-weak:focus,
   .filled-weak:active,
-  :global(.chip-filled-weak):focus,
-  :global(.chip-filled-weak):active {
+  :global(.infonomic-chip-filled-weak):focus,
+  :global(.infonomic-chip-filled-weak):active {
     --ring-color: var(--chip-ring-color);
   }
 
   .filled-weak:disabled,
   .filled-weak[disabled],
-  :global(.chip-filled-weak):disabled,
-  :global(.chip-filled-weak)[disabled] {
+  :global(.infonomic-chip-filled-weak):disabled,
+  :global(.infonomic-chip-filled-weak)[disabled] {
     background-color: var(--chip-variant-filled-weak-disabled,
         oklch(from var(--chip-variant-filled-weak) calc(l * 1.1) calc(c * 0.85) h));
     color: var(--chip-variant-filled-weak-foreground-disabled,
@@ -188,7 +192,7 @@ infonomic-components;
   /* Outlined variant */
 
   .outlined,
-  :global(.chip-outlined) {
+  :global(.infonomic-chip-outlined) {
     border: 1px solid var(--chip-variant-outlined-border);
     color: var(--chip-variant-outlined-foreground);
     background-color: var(--chip-variant-outlined);
@@ -196,8 +200,8 @@ infonomic-components;
 
   .outlined:disabled,
   .outlined[disabled],
-  :global(.chip-outlined):disabled,
-  :global(.chip-outlined)[disabled] {
+  :global(.infonomic-chip-outlined):disabled,
+  :global(.infonomic-chip-outlined)[disabled] {
     border-color: var(--chip-variant-outlined-border-disabled,
         oklch(from var(--chip-variant-outlined-border) calc(l * 1.5) calc(c * 0.8) h));
     color: var(--chip-variant-outlined-foreground-disabled,
@@ -205,45 +209,45 @@ infonomic-components;
   }
 
   .outlined:hover,
-  :global(.chip-outlined):hover {
+  :global(.infonomic-chip-outlined):hover {
     background-color: var(--chip-variant-outlined-hover);
   }
 
   .outlined:focus,
   .outlined:active,
-  :global(.chip-outlined):focus,
-  :global(.chip-outlined):active {
+  :global(.infonomic-chip-outlined):focus,
+  :global(.infonomic-chip-outlined):active {
     --ring-color: var(--chip-ring-color);
   }
 
   .text,
-  :global(.chip-text) {
+  :global(.infonomic-chip-text) {
     background-color: var(--chip-variant-text);
     color: var(--chip-variant-text-foreground);
   }
 
   .text:disabled,
   .text[disabled],
-  :global(.chip-text):disabled,
-  :global(.chip-text)[disabled] {
+  :global(.infonomic-chip-text):disabled,
+  :global(.infonomic-chip-text)[disabled] {
     color: oklch(from var(--chip-variant-text-foreground) calc(l * 1.5) calc(c * 0.5) h);
   }
 
   .text:hover,
-  :global(.chip-text):hover {
+  :global(.infonomic-chip-text):hover {
     background-color: var(--chip-variant-text-hover);
   }
 
   .text:focus,
   .text:active,
-  :global(.chip-text):focus,
-  :global(.chip-text):active {
+  :global(.infonomic-chip-text):focus,
+  :global(.infonomic-chip-text):active {
     --ring-color: var(--chip-ring-color);
   }
 
   /* Intents - Defining Variables */
   .primary,
-  :global(.chip-primary) {
+  :global(.infonomic-chip-primary) {
     --chip-ring-color: var(--ring-primary);
 
     /* Filled */
@@ -270,7 +274,7 @@ infonomic-components;
   }
 
   .secondary,
-  :global(.chip-secondary) {
+  :global(.infonomic-chip-secondary) {
     --chip-ring-color: var(--ring-secondary);
 
     /* Filled */
@@ -297,7 +301,7 @@ infonomic-components;
   }
 
   .noeffect,
-  :global(.chip-noeffect) {
+  :global(.infonomic-chip-noeffect) {
     --chip-ring-color: var(--ring-noeffect);
 
     /* Filled */
@@ -324,7 +328,7 @@ infonomic-components;
   }
 
   .success,
-  :global(.chip-success) {
+  :global(.infonomic-chip-success) {
     --chip-ring-color: var(--ring-success);
 
     /* Filled */
@@ -351,7 +355,7 @@ infonomic-components;
   }
 
   .info,
-  :global(.chip-info) {
+  :global(.infonomic-chip-info) {
     --chip-ring-color: var(--ring-info);
 
     /* Filled */
@@ -378,7 +382,7 @@ infonomic-components;
   }
 
   .warning,
-  :global(.chip-warning) {
+  :global(.infonomic-chip-warning) {
     --chip-ring-color: var(--ring-warning);
 
     /* Filled */
@@ -405,7 +409,7 @@ infonomic-components;
   }
 
   .danger,
-  :global(.chip-danger) {
+  :global(.infonomic-chip-danger) {
     --chip-ring-color: var(--ring-danger);
 
     /* Filled */