@infonomic/uikit 5.27.0 → 5.28.0

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

@@ -8,7 +8,7 @@ infonomic-components;
 @layer infonomic-components {
 
   .button,
-  :global(.button) {
+  :global(.infonomic-infonomic-button) {
     border: none;
     cursor: pointer;
     font-weight: normal;
@@ -29,15 +29,15 @@ infonomic-components;
 
   .button:disabled,
   .button[disabled],
-  :global(.button):disabled,
-  :global(.button)[disabled] {
+  :global(.infonomic-button):disabled,
+  :global(.infonomic-button)[disabled] {
     pointer-events: none;
   }
 
   .button:focus,
   .button:active,
-  :global(.button):focus,
-  :global(.button):active {
+  :global(.infonomic-button):focus,
+  :global(.infonomic-button):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);
@@ -45,14 +45,14 @@ infonomic-components;
   }
 
   .button.square,
-  :global(.button-square) {
+  :global(.infonomic-button-square) {
     aspect-ratio: 1 / 1;
     padding: 0;
     border-radius: var(--border-radius-sm);
   }
 
   .button.round,
-  :global(.button-round) {
+  :global(.infonomic-button-round) {
     aspect-ratio: 1 / 1;
     padding: 0;
     border-radius: var(--border-radius-full);
@@ -60,35 +60,35 @@ infonomic-components;
 
   /* Sizes */
   .xs,
-  :global(.button-xs) {
+  :global(.infonomic-button-xs) {
     min-height: 26px;
     font-size: 0.7rem;
     padding: 0.2rem 0.4rem;
   }
 
   .sm,
-  :global(.button-sm) {
+  :global(.infonomic-button-sm) {
     min-height: 32px;
     font-size: 0.775rem;
     padding: 0.25rem 0.5rem;
   }
 
   .md,
-  :global(.button-md) {
+  :global(.infonomic-button-md) {
     min-height: 38px;
     font-size: 0.95rem;
     padding: 0.625rem 1.25rem;
   }
 
   .lg,
-  :global(.button-lg) {
+  :global(.infonomic-button-lg) {
     min-height: 46px;
     font-size: 1.1rem;
     padding: 0.75rem 1.5rem;
   }
 
   .xl,
-  :global(.button-xl) {
+  :global(.infonomic-button-xl) {
     min-height: 54px;
     font-size: 1.2rem;
     padding: 0.75rem 1.5rem;
@@ -96,27 +96,27 @@ infonomic-components;
 
   /* Variants - Consuming Variables */
   .filled,
-  :global(.button-filled) {
+  :global(.infonomic-button-filled) {
     color: var(--button-variant-filled-foreground);
     background-color: var(--button-variant-filled);
   }
 
   .filled:hover,
-  :global(.button-filled):hover {
+  :global(.infonomic-button-filled):hover {
     background-color: var(--button-variant-filled-hover);
   }
 
   .filled:focus,
   .filled:active,
-  :global(.button-filled):focus,
-  :global(.button-filled):active {
+  :global(.infonomic-button-filled):focus,
+  :global(.infonomic-button-filled):active {
     --ring-color: var(--button-ring-color);
   }
 
   .filled:disabled,
   .filled[disabled],
-  :global(.button-filled):disabled,
-  :global(.button-filled)[disabled] {
+  :global(.infonomic-button-filled):disabled,
+  :global(.infonomic-button-filled)[disabled] {
     background-color: var(--button-variant-filled-disabled,
         oklch(from var(--button-variant-filled) calc(l * 1.1) calc(c * 0.85) h));
     color: var(--button-variant-filled-foreground-disabled,
@@ -127,27 +127,27 @@ infonomic-components;
   /* Weak variant for close button on selected button */
 
   .filled-weak,
-  :global(.button-filled-weak) {
+  :global(.infonomic-button-filled-weak) {
     color: var(--button-variant-filled-weak-foreground);
     background-color: var(--button-variant-filled-weak);
   }
 
   .filled-weak:hover,
-  :global(.button-filled-weak):hover {
+  :global(.infonomic-button-filled-weak):hover {
     background-color: var(--button-variant-filled-weak-hover);
   }
 
   .filled-weak:focus,
   .filled-weak:active,
-  :global(.button-filled-weak):focus,
-  :global(.button-filled-weak):active {
+  :global(.infonomic-button-filled-weak):focus,
+  :global(.infonomic-button-filled-weak):active {
     --ring-color: var(--button-ring-color);
   }
 
   .filled-weak:disabled,
   .filled-weak[disabled],
-  :global(.button-filled-weak):disabled,
-  :global(.button-filled-weak)[disabled] {
+  :global(.infonomic-button-filled-weak):disabled,
+  :global(.infonomic-button-filled-weak)[disabled] {
     background-color: var(--button-variant-filled-weak-disabled,
         oklch(from var(--button-variant-filled-weak) calc(l * 1.1) calc(c * 0.85) h));
     color: var(--button-variant-filled-weak-foreground-disabled,
@@ -155,7 +155,7 @@ infonomic-components;
   }
 
   .outlined,
-  :global(.button-outlined) {
+  :global(.infonomic-button-outlined) {
     border: 1px solid var(--button-variant-outlined-border);
     color: var(--button-variant-outlined-foreground);
     background-color: var(--button-variant-outlined);
@@ -163,8 +163,8 @@ infonomic-components;
 
   .outlined:disabled,
   .outlined[disabled],
-  :global(.button-outlined):disabled,
-  :global(.button-outlined)[disabled] {
+  :global(.infonomic-button-outlined):disabled,
+  :global(.infonomic-button-outlined)[disabled] {
     border-color: var(--button-variant-outlined-border-disabled,
         oklch(from var(--button-variant-outlined-border) calc(l * 1.5) calc(c * 0.8) h));
     color: var(--button-variant-outlined-foreground-disabled,
@@ -172,19 +172,19 @@ infonomic-components;
   }
 
   .outlined:hover,
-  :global(.button-outlined):hover {
+  :global(.infonomic-button-outlined):hover {
     background-color: var(--button-variant-outlined-hover);
   }
 
   .outlined:focus,
   .outlined:active,
-  :global(.button-outlined):focus,
-  :global(.button-outlined):active {
+  :global(.infonomic-button-outlined):focus,
+  :global(.infonomic-button-outlined):active {
     --ring-color: var(--button-ring-color);
   }
 
   .gradient,
-  :global(.button-gradient) {
+  :global(.infonomic-button-gradient) {
     color: var(--button-variant-gradient-foreground);
     background: linear-gradient(45deg,
         var(--button-variant-gradient-start),
@@ -193,8 +193,8 @@ infonomic-components;
 
   .gradient:disabled,
   .gradient[disabled],
-  :global(.button-gradient):disabled,
-  :global(.button-gradient)[disabled] {
+  :global(.infonomic-button-gradient):disabled,
+  :global(.infonomic-button-gradient)[disabled] {
     background: unset;
     background-color: var(--button-variant-gradient-disabled,
         oklch(from var(--button-variant-gradient-end) calc(l * 1.2) calc(c * 0.85) h));
@@ -203,7 +203,7 @@ infonomic-components;
   }
 
   .gradient:hover,
-  :global(.button-gradient):hover {
+  :global(.infonomic-button-gradient):hover {
     color: var(--button-variant-gradient-foreground);
     background: linear-gradient(45deg,
         var(--button-variant-gradient-start),
@@ -212,39 +212,39 @@ infonomic-components;
 
   .gradient:focus,
   .gradient:active,
-  :global(.button-gradient):focus,
-  :global(.button-gradient):active {
+  :global(.infonomic-button-gradient):focus,
+  :global(.infonomic-button-gradient):active {
     --ring-color: var(--button-ring-color);
   }
 
   .text,
-  :global(.button-text) {
+  :global(.infonomic-button-text) {
     background-color: var(--button-variant-text);
     color: var(--button-variant-text-foreground);
   }
 
   .text:disabled,
   .text[disabled],
-  :global(.button-text):disabled,
-  :global(.button-text)[disabled] {
+  :global(.infonomic-button-text):disabled,
+  :global(.infonomic-button-text)[disabled] {
     color: oklch(from var(--button-variant-text-foreground) calc(l * 1.5) calc(c * 0.5) h);
   }
 
   .text:hover,
-  :global(.button-text):hover {
+  :global(.infonomic-button-text):hover {
     background-color: var(--button-variant-text-hover);
   }
 
   .text:focus,
   .text:active,
-  :global(.button-text):focus,
-  :global(.button-text):active {
+  :global(.infonomic-button-text):focus,
+  :global(.infonomic-button-text):active {
     --ring-color: var(--button-ring-color);
   }
 
   /* Intents - Defining Variables */
   .primary,
-  :global(.button-primary) {
+  :global(.infonomic-button-primary) {
     --button-ring-color: var(--ring-primary);
 
     /* Filled */
@@ -284,7 +284,7 @@ infonomic-components;
   }
 
   .secondary,
-  :global(.button-secondary) {
+  :global(.infonomic-button-secondary) {
     --button-ring-color: var(--ring-secondary);
 
     /* Filled */
@@ -323,7 +323,7 @@ infonomic-components;
   }
 
   .noeffect,
-  :global(.button-noeffect) {
+  :global(.infonomic-button-noeffect) {
     --button-ring-color: var(--ring-noeffect);
 
     /* Filled */
@@ -364,7 +364,7 @@ infonomic-components;
   }
 
   .success,
-  :global(.button-success) {
+  :global(.infonomic-button-success) {
     --button-ring-color: var(--ring-success);
 
     /* Filled */
@@ -403,7 +403,7 @@ infonomic-components;
   }
 
   .info,
-  :global(.button-info) {
+  :global(.infonomic-button-info) {
     --button-ring-color: var(--ring-info);
 
     /* Filled */
@@ -442,7 +442,7 @@ infonomic-components;
   }
 
   .warning,
-  :global(.button-warning) {
+  :global(.infonomic-button-warning) {
     --button-ring-color: var(--ring-warning);
 
     /* Filled */
@@ -481,7 +481,7 @@ infonomic-components;
   }
 
   .danger,
-  :global(.button-danger) {
+  :global(.infonomic-button-danger) {
     --button-ring-color: var(--ring-danger);
 
     /* Filled */
@@ -521,7 +521,7 @@ infonomic-components;
 
   /* Full width */
   .fullWidth,
-  :global(.button-full-width) {
+  :global(.infonomic-button-full-width) {
     width: 100%;
     display: flex;
   }

package/dist/components/button/button_module.css

@@ -1,7 +1,7 @@
 @layer infonomic-base, infonomic-functional, infonomic-utilities, infonomic-theme, infonomic-typography;
 
 @layer infonomic-components {
-  :is(.button-IjDhC0, .button) {
+  :is(.button-IjDhC0, .infonomic-infonomic-button) {
     cursor: pointer;
     text-align: center;
     gap: var(--gap-2);
@@ -18,11 +18,11 @@
     display: inline-flex;
   }
 
-  :is(.button-IjDhC0:disabled, .button-IjDhC0[disabled], .button:disabled, .button[disabled]) {
+  :is(.button-IjDhC0:disabled, .button-IjDhC0[disabled], .infonomic-button:disabled, .infonomic-button[disabled]) {
     pointer-events: none;
   }
 
-  :is(.button-IjDhC0:focus, .button-IjDhC0:active, .button:focus, .button:active) {
+  :is(.button-IjDhC0:focus, .button-IjDhC0:active, .infonomic-button:focus, .infonomic-button: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);
@@ -35,7 +35,7 @@
     padding: 0;
   }
 
-  .button-square {
+  .infonomic-button-square {
     aspect-ratio: 1;
     border-radius: var(--border-radius-sm);
     padding: 0;
@@ -47,135 +47,135 @@
     padding: 0;
   }
 
-  .button-round {
+  .infonomic-button-round {
     aspect-ratio: 1;
     border-radius: var(--border-radius-full);
     padding: 0;
   }
 
-  :is(.xs-jxTd5R, .button-xs) {
+  :is(.xs-jxTd5R, .infonomic-button-xs) {
     min-height: 26px;
     padding: .2rem .4rem;
     font-size: .7rem;
   }
 
-  :is(.sm-uD_Ugt, .button-sm) {
+  :is(.sm-uD_Ugt, .infonomic-button-sm) {
     min-height: 32px;
     padding: .25rem .5rem;
     font-size: .775rem;
   }
 
-  :is(.md-Qp9ad6, .button-md) {
+  :is(.md-Qp9ad6, .infonomic-button-md) {
     min-height: 38px;
     padding: .625rem 1.25rem;
     font-size: .95rem;
   }
 
-  :is(.lg-FAYTen, .button-lg) {
+  :is(.lg-FAYTen, .infonomic-button-lg) {
     min-height: 46px;
     padding: .75rem 1.5rem;
     font-size: 1.1rem;
   }
 
-  :is(.xl-Gwvhl4, .button-xl) {
+  :is(.xl-Gwvhl4, .infonomic-button-xl) {
     min-height: 54px;
     padding: .75rem 1.5rem;
     font-size: 1.2rem;
   }
 
-  :is(.filled-CwGsrO, .button-filled) {
+  :is(.filled-CwGsrO, .infonomic-button-filled) {
     color: var(--button-variant-filled-foreground);
     background-color: var(--button-variant-filled);
   }
 
-  :is(.filled-CwGsrO:hover, .button-filled:hover) {
+  :is(.filled-CwGsrO:hover, .infonomic-button-filled:hover) {
     background-color: var(--button-variant-filled-hover);
   }
 
-  :is(.filled-CwGsrO:focus, .filled-CwGsrO:active, .button-filled:focus, .button-filled:active) {
+  :is(.filled-CwGsrO:focus, .filled-CwGsrO:active, .infonomic-button-filled:focus, .infonomic-button-filled:active) {
     --ring-color: var(--button-ring-color);
   }
 
-  :is(.filled-CwGsrO:disabled, .filled-CwGsrO[disabled], .button-filled:disabled, .button-filled[disabled]) {
+  :is(.filled-CwGsrO:disabled, .filled-CwGsrO[disabled], .infonomic-button-filled:disabled, .infonomic-button-filled[disabled]) {
     background-color: var(--button-variant-filled-disabled, oklch(from var(--button-variant-filled) calc(l * 1.1) calc(c * .85) h));
     color: var(--button-variant-filled-foreground-disabled, oklch(from var(--button-variant-filled-foreground) calc(l * .9) calc(c * .85) h));
   }
 
-  :is(.filled-weak-QLU8bA, .button-filled-weak) {
+  :is(.filled-weak-QLU8bA, .infonomic-button-filled-weak) {
     color: var(--button-variant-filled-weak-foreground);
     background-color: var(--button-variant-filled-weak);
   }
 
-  :is(.filled-weak-QLU8bA:hover, .button-filled-weak:hover) {
+  :is(.filled-weak-QLU8bA:hover, .infonomic-button-filled-weak:hover) {
     background-color: var(--button-variant-filled-weak-hover);
   }
 
-  :is(.filled-weak-QLU8bA:focus, .filled-weak-QLU8bA:active, .button-filled-weak:focus, .button-filled-weak:active) {
+  :is(.filled-weak-QLU8bA:focus, .filled-weak-QLU8bA:active, .infonomic-button-filled-weak:focus, .infonomic-button-filled-weak:active) {
     --ring-color: var(--button-ring-color);
   }
 
-  :is(.filled-weak-QLU8bA:disabled, .filled-weak-QLU8bA[disabled], .button-filled-weak:disabled, .button-filled-weak[disabled]) {
+  :is(.filled-weak-QLU8bA:disabled, .filled-weak-QLU8bA[disabled], .infonomic-button-filled-weak:disabled, .infonomic-button-filled-weak[disabled]) {
     background-color: var(--button-variant-filled-weak-disabled, oklch(from var(--button-variant-filled-weak) calc(l * 1.1) calc(c * .85) h));
     color: var(--button-variant-filled-weak-foreground-disabled, oklch(from var(--button-variant-filled-weak-foreground) calc(l * .9) calc(c * .85) h));
   }
 
-  :is(.outlined-nZGbxu, .button-outlined) {
+  :is(.outlined-nZGbxu, .infonomic-button-outlined) {
     border: 1px solid var(--button-variant-outlined-border);
     color: var(--button-variant-outlined-foreground);
     background-color: var(--button-variant-outlined);
   }
 
-  :is(.outlined-nZGbxu:disabled, .outlined-nZGbxu[disabled], .button-outlined:disabled, .button-outlined[disabled]) {
+  :is(.outlined-nZGbxu:disabled, .outlined-nZGbxu[disabled], .infonomic-button-outlined:disabled, .infonomic-button-outlined[disabled]) {
     border-color: var(--button-variant-outlined-border-disabled, oklch(from var(--button-variant-outlined-border) calc(l * 1.5) calc(c * .8) h));
     color: var(--button-variant-outlined-foreground-disabled, oklch(from var(--button-variant-outlined-foreground) calc(l * 1.1) calc(c * .7) h));
   }
 
-  :is(.outlined-nZGbxu:hover, .button-outlined:hover) {
+  :is(.outlined-nZGbxu:hover, .infonomic-button-outlined:hover) {
     background-color: var(--button-variant-outlined-hover);
   }
 
-  :is(.outlined-nZGbxu:focus, .outlined-nZGbxu:active, .button-outlined:focus, .button-outlined:active) {
+  :is(.outlined-nZGbxu:focus, .outlined-nZGbxu:active, .infonomic-button-outlined:focus, .infonomic-button-outlined:active) {
     --ring-color: var(--button-ring-color);
   }
 
-  :is(.gradient-ySC3O3, .button-gradient) {
+  :is(.gradient-ySC3O3, .infonomic-button-gradient) {
     color: var(--button-variant-gradient-foreground);
     background: linear-gradient(45deg, var(--button-variant-gradient-start), var(--button-variant-gradient-end));
   }
 
-  :is(.gradient-ySC3O3:disabled, .gradient-ySC3O3[disabled], .button-gradient:disabled, .button-gradient[disabled]) {
+  :is(.gradient-ySC3O3:disabled, .gradient-ySC3O3[disabled], .infonomic-button-gradient:disabled, .infonomic-button-gradient[disabled]) {
     background: unset;
     background-color: var(--button-variant-gradient-disabled, oklch(from var(--button-variant-gradient-end) calc(l * 1.2) calc(c * .85) h));
     color: var(--button-variant-gradient-foreground-disabled, oklch(from var(--button-variant-gradient-foreground) calc(l * .9) calc(c * .85) h));
   }
 
-  :is(.gradient-ySC3O3:hover, .button-gradient:hover) {
+  :is(.gradient-ySC3O3:hover, .infonomic-button-gradient:hover) {
     color: var(--button-variant-gradient-foreground);
     background: linear-gradient(45deg, var(--button-variant-gradient-start), var(--button-variant-gradient-end));
   }
 
-  :is(.gradient-ySC3O3:focus, .gradient-ySC3O3:active, .button-gradient:focus, .button-gradient:active) {
+  :is(.gradient-ySC3O3:focus, .gradient-ySC3O3:active, .infonomic-button-gradient:focus, .infonomic-button-gradient:active) {
     --ring-color: var(--button-ring-color);
   }
 
-  :is(.text-GaxlcE, .button-text) {
+  :is(.text-GaxlcE, .infonomic-button-text) {
     background-color: var(--button-variant-text);
     color: var(--button-variant-text-foreground);
   }
 
-  :is(.text-GaxlcE:disabled, .text-GaxlcE[disabled], .button-text:disabled, .button-text[disabled]) {
+  :is(.text-GaxlcE:disabled, .text-GaxlcE[disabled], .infonomic-button-text:disabled, .infonomic-button-text[disabled]) {
     color: oklch(from var(--button-variant-text-foreground) calc(l * 1.5) calc(c * .5) h);
   }
 
-  :is(.text-GaxlcE:hover, .button-text:hover) {
+  :is(.text-GaxlcE:hover, .infonomic-button-text:hover) {
     background-color: var(--button-variant-text-hover);
   }
 
-  :is(.text-GaxlcE:focus, .text-GaxlcE:active, .button-text:focus, .button-text:active) {
+  :is(.text-GaxlcE:focus, .text-GaxlcE:active, .infonomic-button-text:focus, .infonomic-button-text:active) {
     --ring-color: var(--button-ring-color);
   }
 
-  :is(.primary-tUmczz, .button-primary) {
+  :is(.primary-tUmczz, .infonomic-button-primary) {
     --button-ring-color: var(--ring-primary);
     --button-variant-filled: var(--fill-primary-strong);
     --button-variant-filled-hover: var(--fill-primary-strong-hover);
@@ -203,7 +203,7 @@
     --button-variant-gradient-foreground-disabled: var(--text-on-primary-disabled);
   }
 
-  :is(.secondary-UqT2AY, .button-secondary) {
+  :is(.secondary-UqT2AY, .infonomic-button-secondary) {
     --button-ring-color: var(--ring-secondary);
     --button-variant-filled: var(--fill-secondary-strong);
     --button-variant-filled-hover: var(--fill-secondary-strong-hover);
@@ -231,7 +231,7 @@
     --button-variant-gradient-foreground-disabled: var(--text-on-secondary-disabled);
   }
 
-  :is(.noeffect-fpxSgg, .button-noeffect) {
+  :is(.noeffect-fpxSgg, .infonomic-button-noeffect) {
     --button-ring-color: var(--ring-noeffect);
     --button-variant-filled: var(--fill-noeffect-strong);
     --button-variant-filled-hover: var(--fill-noeffect-strong-hover);
@@ -260,7 +260,7 @@
     --button-variant-gradient-foreground-disabled: var(--text-on-noeffect-disabled);
   }
 
-  :is(.success-fTNDEn, .button-success) {
+  :is(.success-fTNDEn, .infonomic-button-success) {
     --button-ring-color: var(--ring-success);
     --button-variant-filled: var(--fill-success-strong);
     --button-variant-filled-hover: var(--fill-success-strong-hover);
@@ -288,7 +288,7 @@
     --button-variant-gradient-foreground-disabled: var(--text-on-success-disabled);
   }
 
-  :is(.info-qrdXQD, .button-info) {
+  :is(.info-qrdXQD, .infonomic-button-info) {
     --button-ring-color: var(--ring-info);
     --button-variant-filled: var(--fill-info-strong);
     --button-variant-filled-hover: var(--fill-info-strong-hover);
@@ -316,7 +316,7 @@
     --button-variant-gradient-foreground-disabled: var(--text-on-info-disabled);
   }
 
-  :is(.warning-a00T3A, .button-warning) {
+  :is(.warning-a00T3A, .infonomic-button-warning) {
     --button-ring-color: var(--ring-warning);
     --button-variant-filled: var(--fill-warning-strong);
     --button-variant-filled-hover: var(--fill-warning-strong-hover);
@@ -344,7 +344,7 @@
     --button-variant-gradient-foreground-disabled: var(--text-on-warning-disabled);
   }
 
-  :is(.danger-rwIV_i, .button-danger) {
+  :is(.danger-rwIV_i, .infonomic-button-danger) {
     --button-ring-color: var(--ring-danger);
     --button-variant-filled: var(--fill-danger-strong);
     --button-variant-filled-hover: var(--fill-danger-strong-hover);
@@ -372,7 +372,7 @@
     --button-variant-gradient-foreground-disabled: var(--text-on-danger-disabled);
   }
 
-  :is(.fullWidth-wXvP0v, .button-full-width) {
+  :is(.fullWidth-wXvP0v, .infonomic-button-full-width) {
     width: 100%;
     display: flex;
   }

package/dist/components/button/control-buttons.js

@@ -12,7 +12,7 @@ const DirectionalButton = ({ size = 'md', direction, className, onClick, ref, ..
         onClick: handleClick,
         type: "button",
         "aria-label": direction,
-        className: classnames('control-button', direction, size, control_buttons_module["directional-button"], control_buttons_module[direction], control_buttons_module[size], className),
+        className: classnames('infonomic-control-button', direction, size, control_buttons_module["directional-button"], control_buttons_module[direction], control_buttons_module[size], className),
         children: /*#__PURE__*/ jsx("span", {
             children: /*#__PURE__*/ jsx("svg", {
                 className: "icon",

package/dist/components/button/control-buttons.module.css

@@ -1,9 +1,13 @@
 @layer infonomic-base, infonomic-utilities, infonomic-theme, infonomic-components;
 
 @layer infonomic-components {
+
   .stop-button,
   .play-button,
-  .directional-button {
+  .directional-button,
+  :global(.infonomic-stop-button),
+  :global(.infonomic-play-button),
+  :global(.infonomic-directional-button) {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -128,4 +132,4 @@
   /* No dark theme overrides needed! 
    * Tokens automatically switch in .dark and respect .not-dark 
   */
-}
+}

package/dist/components/button/control-buttons_module.css

@@ -1,7 +1,7 @@
 @layer infonomic-base, infonomic-utilities, infonomic-theme;
 
 @layer infonomic-components {
-  .stop-button-krMTsl, .play-button-GfHYHO, .directional-button-kGS8rA {
+  :is(.stop-button-krMTsl, .play-button-GfHYHO, .directional-button-kGS8rA, .infonomic-stop-button, .infonomic-play-button, .infonomic-directional-button) {
     color: #fff;
     background-color: var(--fill-primary-strong);
     cursor: pointer;

package/dist/components/button/copy-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"copy-button.d.ts","sourceRoot":"","sources":["../../../src/components/button/copy-button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAQ9B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AAE9C,UAAU,eAAgB,SAAQ,IAAI,CAAC,WAAW,EAAE,UAAU,CAAC;IAC7D,IAAI,EAAE,MAAM,CAAA;IACZ,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB;AAED,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,SAAkB,EAClB,UAAsB,EACtB,OAAO,EACP,IAAW,EACX,MAAM,EACN,SAAS,EACT,MAAM,EACN,SAAS,EACT,kBAAkB,EAClB,YAAY,EACZ,GAAG,IAAI,EACR,EAAE,eAAe,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CA8DrC"}
+{"version":3,"file":"copy-button.d.ts","sourceRoot":"","sources":["../../../src/components/button/copy-button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAQ9B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AAE9C,UAAU,eAAgB,SAAQ,IAAI,CAAC,WAAW,EAAE,UAAU,CAAC;IAC7D,IAAI,EAAE,MAAM,CAAA;IACZ,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB;AAED,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,SAAkB,EAClB,UAAsB,EACtB,OAAO,EACP,IAAW,EACX,MAAM,EACN,SAAS,EACT,MAAM,EACN,SAAS,EACT,kBAAkB,EAClB,YAAY,EACZ,GAAG,IAAI,EACR,EAAE,eAAe,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAkErC"}

package/dist/components/button/copy-button.js

@@ -28,7 +28,7 @@ function CopyButton({ text, hoverText = 'Copy', copiedText = 'Copied!', variant,
     });
     const tooltipText = null != copied && copied ? copiedText : hoverText;
     return /*#__PURE__*/ jsx("div", {
-        className: classnames(copy_button_module["copy-button-container"], containerClassName),
+        className: classnames('infonomic-copy-button-container', copy_button_module["copy-button-container"], containerClassName),
         children: /*#__PURE__*/ jsx(Tooltip, {
             side: "top",
             sideOffset: 2,
@@ -40,7 +40,7 @@ function CopyButton({ text, hoverText = 'Copy', copiedText = 'Copied!', variant,
                 intent: intent,
                 fullWidth: fullWidth,
                 ripple: ripple,
-                className: classnames('copy-button', variant, size, intent, copy_button_module[size], className),
+                className: classnames('infonomic-copy-button', `infonomic-copy-button-${variant}`, `infonomic-copy-button-${size}`, `infonomic-copy-button-${intent}`, copy_button_module[size], className),
                 onClick: handleCopied,
                 ...rest,
                 children: /*#__PURE__*/ jsx("svg", {