@muraldevkit/ui-toolkit 4.66.0-dev-7K0j.1 → 4.66.0-dev-T3Jw.1

package/dist/esm/components/button/MrlButton/index.js

@@ -1 +0,0 @@
-export * from './MrlButton';

package/dist/esm/components/button/MrlIconButton/MrlIconButton.css

@@ -1,562 +0,0 @@
-:root {
-  --mrl-button-background-color-skeleton: var(--mrl-color-skeleton);
-  --mrl-button-border-radius: var(--mrl-border-radius-functional);
-}
-
-.mrl-u-preHydrateSkeleton mrl-button:not(.hydrated),
-.mrl-u-preHydrateSkeleton mrl-icon-button:not(.hydrated),
-.mrl-u-preHydrateSkeleton mrl-shadow-button:not(.hydrated) {
-  min-height: var(--mrl-spacing-09);
-  min-width: var(--mrl-spacing-09);
-  background: var(--mrl-button-background-color-skeleton);
-  border-radius: var(--mrl-button-border-radius);
-  box-shadow: none;
-  color: transparent;
-  display: inline-flex;
-  font-family: var(--mrl-body-font);
-  pointer-events: none;
-  visibility: inherit;
-}
-.mrl-u-preHydrateSkeleton mrl-button[kind=inverse]:not(.hydrated),
-.mrl-u-preHydrateSkeleton mrl-button[kind=ghost-inverse]:not(.hydrated),
-.mrl-u-preHydrateSkeleton mrl-icon-button[kind=inverse]:not(.hydrated),
-.mrl-u-preHydrateSkeleton mrl-icon-button[kind=ghost-inverse]:not(.hydrated),
-.mrl-u-preHydrateSkeleton mrl-shadow-button[kind=inverse]:not(.hydrated),
-.mrl-u-preHydrateSkeleton mrl-shadow-button[kind=ghost-inverse]:not(.hydrated) {
-  --mrl-button-background-color-skeleton: var(--mrl-color-skeleton-inverse);
-}
-
-mrl-button[size=small],
-mrl-shadow-button[size=small] {
-  min-height: var(--mrl-spacing-08);
-}
-
-mrl-icon-button[size=small] {
-  min-height: var(--mrl-spacing-08);
-  min-width: var(--mrl-spacing-08);
-}
-
-mrl-button[size=large],
-mrl-shadow-button[size=large] {
-  min-height: calc(var(--mrl-spacing-09) + var(--mrl-spacing-02));
-}
-
-mrl-icon-button[size=large] {
-  min-height: calc(var(--mrl-spacing-09) + var(--mrl-spacing-02));
-  min-width: calc(var(--mrl-spacing-09) + var(--mrl-spacing-02));
-}
-
-mrl-icon-button[size=xsmall][kind=ghost],
-mrl-icon-button[size=xsmall][kind=ghost-inverse] {
-  min-height: var(--mrl-spacing-07);
-  min-width: var(--mrl-spacing-07);
-}
-
-/* stylelint-disable scss/operator-no-newline-after */
-.mrl-u-focus-wrapper {
-  position: relative;
-}
-
-.mrlIconButton,
-.mrlButton {
-  background: var(--mrl-button-background-color);
-  border: none;
-  border-radius: var(--mrl-button-border-radius);
-  box-shadow: inset 0 0 0 var(--mrl-button-border-width) var(--mrl-button-border-color);
-  color: var(--mrl-button-text-color);
-  justify-content: center;
-  outline: none;
-  transition: all var(--mrl-duration-03) var(--mrl-timing-m1);
-  display: inline-flex;
-  position: relative;
-  visibility: inherit;
-}
-.mrlIconButton:focus-visible:focus-visible,
-.mrlButton:focus-visible:focus-visible {
-  outline: none;
-}
-.mrlIconButton:focus-visible:focus-visible::after,
-.mrlButton:focus-visible:focus-visible::after {
-  animation-duration: var(--mrl-duration-03);
-  animation-fill-mode: forwards;
-  animation-iteration-count: 1;
-  animation-timing-function: var(--mrl-timing-m3);
-  border: 0 solid transparent;
-  border-radius: calc(
-		var(--mrl-border-radius-functional) + var(--mrl-line-width-focus) + var(--mrl-space-offset-focus)
-	);
-  bottom: calc((var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px) * -1);
-  content: "";
-  display: block;
-  left: calc((var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px) * -1);
-  position: absolute;
-  right: calc((var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px) * -1);
-  top: calc((var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px) * -1);
-  z-index: 1;
-  animation-name: border-animation;
-}
-@keyframes border-animation {
-  0% {
-    border-color: transparent;
-    border-width: 0;
-    bottom: var(--mrl-space-offset-focus);
-    left: var(--mrl-space-offset-focus);
-    right: var(--mrl-space-offset-focus);
-    top: var(--mrl-space-offset-focus);
-  }
-  50% {
-    border-color: var(--mrl-color-focus);
-    border-width: 0.25rem;
-    bottom: calc(var(--mrl-spacing-02) * -1);
-    left: calc(var(--mrl-spacing-02) * -1);
-    right: calc(var(--mrl-spacing-02) * -1);
-    top: calc(var(--mrl-spacing-02) * -1);
-  }
-  100% {
-    border-color: var(--mrl-color-focus);
-    border-width: var(--mrl-line-width-focus);
-    bottom: calc((
-						var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px
-					) * -1);
-    left: calc((
-						var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px
-					) * -1);
-    right: calc((
-						var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px
-					) * -1);
-    top: calc((
-						var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px
-					) * -1);
-  }
-}
-@keyframes border-animation-inverse {
-  0% {
-    border-color: transparent;
-    border-width: 0;
-    bottom: var(--mrl-space-offset-focus);
-    left: var(--mrl-space-offset-focus);
-    right: var(--mrl-space-offset-focus);
-    top: var(--mrl-space-offset-focus);
-  }
-  50% {
-    border-color: var(--mrl-color-focus-inverse);
-    border-width: 0.25rem;
-    bottom: calc(var(--mrl-spacing-02) * -1);
-    left: calc(var(--mrl-spacing-02) * -1);
-    right: calc(var(--mrl-spacing-02) * -1);
-    top: calc(var(--mrl-spacing-02) * -1);
-  }
-  100% {
-    border-color: var(--mrl-color-focus-inverse);
-    border-width: var(--mrl-line-width-focus);
-    bottom: calc((
-						var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px
-					) * -1);
-    left: calc((
-						var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px
-					) * -1);
-    right: calc((
-						var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px
-					) * -1);
-    top: calc((
-						var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px
-					) * -1);
-  }
-}
-@keyframes outline-animation {
-  0% {
-    outline: 0 solid transparent;
-    outline-offset: 1px;
-  }
-  50% {
-    outline: 4px solid var(--mrl-color-focus);
-    outline-offset: 1px;
-  }
-  100% {
-    outline: 2px solid var(--mrl-color-focus);
-    outline-offset: 1px;
-  }
-}
-.mrlIconButton--inverse:focus-visible, .mrlIconButton--ghost-inverse:focus-visible,
-.mrlButton--inverse:focus-visible,
-.mrlButton--ghost-inverse:focus-visible {
-  position: relative;
-}
-.mrlIconButton--inverse:focus-visible:focus-visible, .mrlIconButton--ghost-inverse:focus-visible:focus-visible,
-.mrlButton--inverse:focus-visible:focus-visible,
-.mrlButton--ghost-inverse:focus-visible:focus-visible {
-  outline: none;
-}
-.mrlIconButton--inverse:focus-visible:focus-visible::after, .mrlIconButton--ghost-inverse:focus-visible:focus-visible::after,
-.mrlButton--inverse:focus-visible:focus-visible::after,
-.mrlButton--ghost-inverse:focus-visible:focus-visible::after {
-  animation-duration: var(--mrl-duration-03);
-  animation-fill-mode: forwards;
-  animation-iteration-count: 1;
-  animation-timing-function: var(--mrl-timing-m3);
-  border: 0 solid transparent;
-  border-radius: calc(
-		var(--mrl-border-radius-functional) + var(--mrl-line-width-focus) + var(--mrl-space-offset-focus)
-	);
-  bottom: calc((var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px) * -1);
-  content: "";
-  display: block;
-  left: calc((var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px) * -1);
-  position: absolute;
-  right: calc((var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px) * -1);
-  top: calc((var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px) * -1);
-  z-index: 1;
-  animation-name: border-animation-inverse;
-}
-@keyframes border-animation {
-  0% {
-    border-color: transparent;
-    border-width: 0;
-    bottom: var(--mrl-space-offset-focus);
-    left: var(--mrl-space-offset-focus);
-    right: var(--mrl-space-offset-focus);
-    top: var(--mrl-space-offset-focus);
-  }
-  50% {
-    border-color: var(--mrl-color-focus);
-    border-width: 0.25rem;
-    bottom: calc(var(--mrl-spacing-02) * -1);
-    left: calc(var(--mrl-spacing-02) * -1);
-    right: calc(var(--mrl-spacing-02) * -1);
-    top: calc(var(--mrl-spacing-02) * -1);
-  }
-  100% {
-    border-color: var(--mrl-color-focus);
-    border-width: var(--mrl-line-width-focus);
-    bottom: calc((
-						var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px
-					) * -1);
-    left: calc((
-						var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px
-					) * -1);
-    right: calc((
-						var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px
-					) * -1);
-    top: calc((
-						var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px
-					) * -1);
-  }
-}
-@keyframes border-animation-inverse {
-  0% {
-    border-color: transparent;
-    border-width: 0;
-    bottom: var(--mrl-space-offset-focus);
-    left: var(--mrl-space-offset-focus);
-    right: var(--mrl-space-offset-focus);
-    top: var(--mrl-space-offset-focus);
-  }
-  50% {
-    border-color: var(--mrl-color-focus-inverse);
-    border-width: 0.25rem;
-    bottom: calc(var(--mrl-spacing-02) * -1);
-    left: calc(var(--mrl-spacing-02) * -1);
-    right: calc(var(--mrl-spacing-02) * -1);
-    top: calc(var(--mrl-spacing-02) * -1);
-  }
-  100% {
-    border-color: var(--mrl-color-focus-inverse);
-    border-width: var(--mrl-line-width-focus);
-    bottom: calc((
-						var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px
-					) * -1);
-    left: calc((
-						var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px
-					) * -1);
-    right: calc((
-						var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px
-					) * -1);
-    top: calc((
-						var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px
-					) * -1);
-  }
-}
-@keyframes outline-animation {
-  0% {
-    outline: 0 solid transparent;
-    outline-offset: 1px;
-  }
-  50% {
-    outline: 4px solid var(--mrl-color-focus-inverse);
-    outline-offset: 1px;
-  }
-  100% {
-    outline: 2px solid var(--mrl-color-focus-inverse);
-    outline-offset: 1px;
-  }
-}
-.mrlIconButton:hover,
-.mrlButton:hover {
-  cursor: pointer;
-}
-.mrlIconButton[aria-disabled=true],
-.mrlButton[aria-disabled=true] {
-  background: var(--mrl-button-background-color-disabled);
-  box-shadow: inset 0 0 0 var(--mrl-button-border-width) var(--mrl-button-border-color-disabled);
-  color: var(--mrl-button-text-color-disabled);
-  cursor: default;
-}
-.mrlIconButton[aria-disabled=true]:hover,
-.mrlButton[aria-disabled=true]:hover {
-  background: var(--mrl-button-background-color-disabled);
-  box-shadow: inset 0 0 0 var(--mrl-button-border-width) var(--mrl-button-border-color-disabled);
-  color: var(--mrl-button-text-color-disabled);
-  cursor: default;
-}
-.mrlIconButton:hover:not([aria-pressed=true], [aria-expanded=true], [aria-selected=true], [aria-checked=true]):not([aria-disabled=true]),
-.mrlButton:hover:not([aria-pressed=true], [aria-expanded=true], [aria-selected=true], [aria-checked=true]):not([aria-disabled=true]) {
-  background: var(--mrl-button-background-color-hover);
-  box-shadow: inset 0 0 0 var(--mrl-button-border-width) var(--mrl-button-border-color-hover);
-  color: var(--mrl-button-text-color-hover);
-}
-.mrlIconButton:active:not([aria-pressed=true], [aria-expanded=true], [aria-selected=true], [aria-checked=true]):not([aria-disabled=true]),
-.mrlButton:active:not([aria-pressed=true], [aria-expanded=true], [aria-selected=true], [aria-checked=true]):not([aria-disabled=true]) {
-  background: var(--mrl-button-background-color-active);
-  box-shadow: inset 0 0 0 var(--mrl-button-border-width) var(--mrl-button-border-color-active);
-  color: var(--mrl-button-text-color-active);
-}
-.mrlIconButton--skeleton, .mrlIconButton--skeleton[aria-disabled=true],
-.mrlButton--skeleton,
-.mrlButton--skeleton[aria-disabled=true] {
-  min-height: var(--mrl-spacing-09);
-  min-width: var(--mrl-spacing-09);
-  background: var(--mrl-button-background-color-skeleton);
-  border-radius: var(--mrl-button-border-radius);
-  box-shadow: none;
-  color: transparent;
-  display: inline-flex;
-  font-family: var(--mrl-body-font);
-  pointer-events: none;
-  visibility: inherit;
-}
-
-.mrlIconButton,
-.mrlButton {
-  --mrl-button-background-color: var(--mrl-color-background);
-  --mrl-button-background-color-active: rgba(var(--mrl-gray-20), 1);
-  --mrl-button-background-color-disabled: var(--mrl-color-background);
-  --mrl-button-background-color-hover: rgba(var(--mrl-gray-10), 1);
-  --mrl-button-border-color: rgba(var(--mrl-gray-30), 1);
-  --mrl-button-border-color-active: rgba(var(--mrl-gray-50), 1);
-  --mrl-button-border-color-disabled: rgba(var(--mrl-gray-20), 1);
-  --mrl-button-border-color-hover: rgba(var(--mrl-gray-40), 1);
-  --mrl-button-border-width: var(--mrl-line-width-border);
-  --mrl-button-icon-size: var(--mrl-spacing-07);
-  --mrl-button-text-color: rgba(var(--mrl-gray-80), 1);
-  --mrl-button-text-color-active: rgba(var(--mrl-black), 1);
-  --mrl-button-text-color-disabled: var(--mrl-color-text-disabled);
-  --mrl-button-text-color-hover: rgba(var(--mrl-gray-90), 1);
-  --mrl-button-inset-vertical: 0;
-  --mrl-button-inset-horizontal: var(--mrl-space-inset-control-large);
-  --mrl-button-icon-margin-right: var(--mrl-space-inline-related);
-}
-.mrlIconButton--small,
-.mrlButton--small {
-  min-height: var(--mrl-spacing-08);
-  --mrl-button-icon-size: var(--mrl-spacing-06);
-  --mrl-button-inset-horizontal: var(--mrl-spacing-04);
-}
-.mrlIconButton.mrlIconButton--xsmall,
-.mrlButton.mrlIconButton--xsmall {
-  --mrl-button-icon-size: var(--mrl-spacing-06);
-}
-.mrlIconButton.mrlButton--xsmall,
-.mrlButton.mrlButton--xsmall {
-  --mrl-button-icon-size: var(--mrl-spacing-05);
-}
-.mrlIconButton.mrlIconButton--small,
-.mrlButton.mrlIconButton--small {
-  min-height: var(--mrl-spacing-08);
-  min-width: var(--mrl-spacing-08);
-}
-.mrlIconButton.mrlIconButton--small + .mrl-tooltip-content,
-.mrlButton.mrlIconButton--small + .mrl-tooltip-content {
-  --mrl-tooltip-arrow-spacing: calc(
-  	(var(--mrl-spacing-08) - var(--mrl-tooltip-arrow-size)) / 2
-  );
-}
-.mrlIconButton--large,
-.mrlButton--large {
-  min-height: calc(var(--mrl-spacing-09) + var(--mrl-spacing-02));
-  --mrl-button-inset-horizontal: var(--mrl-spacing-05);
-}
-.mrlIconButton.mrlIconButton--large,
-.mrlButton.mrlIconButton--large {
-  min-height: calc(var(--mrl-spacing-09) + var(--mrl-spacing-02));
-  min-width: calc(var(--mrl-spacing-09) + var(--mrl-spacing-02));
-}
-.mrlIconButton.mrlButton--primary, .mrlIconButton.mrlButton--ghost, .mrlIconButton.mrlButton--ghost-inverse, .mrlIconButton.mrlIconButton--primary, .mrlIconButton.mrlIconButton--ghost, .mrlIconButton.mrlIconButton--ghost-inverse,
-.mrlButton.mrlButton--primary,
-.mrlButton.mrlButton--ghost,
-.mrlButton.mrlButton--ghost-inverse,
-.mrlButton.mrlIconButton--primary,
-.mrlButton.mrlIconButton--ghost,
-.mrlButton.mrlIconButton--ghost-inverse {
-  --mrl-button-border-color: transparent;
-  --mrl-button-border-color-active: transparent;
-  --mrl-button-border-color-hover: transparent;
-  --mrl-button-border-color-disabled: transparent;
-}
-.mrlIconButton--secondary-native,
-.mrlButton--secondary-native {
-  --mrl-button-border-color: transparent;
-  --mrl-button-border-color-active: transparent;
-  --mrl-button-border-color-hover: transparent;
-  --mrl-button-border-color-disabled: transparent;
-}
-.mrlIconButton--primary,
-.mrlButton--primary {
-  --mrl-button-background-color: var(--mrl-color-brand);
-  --mrl-button-background-color-active: var(--mrl-color-brand-active);
-  --mrl-button-background-color-disabled: var(--mrl-color-background-disabled);
-  --mrl-button-background-color-hover: var(--mrl-color-brand-hover);
-  --mrl-button-text-color: var(--mrl-color-text-inverse);
-  --mrl-button-text-color-active: var(--mrl-color-text-inverse);
-  --mrl-button-text-color-disabled: var(--mrl-color-text-inverse);
-  --mrl-button-text-color-hover: var(--mrl-color-text-inverse);
-}
-.mrlIconButton--primary-native,
-.mrlButton--primary-native {
-  --mrl-button-background-color: transparent;
-  --mrl-button-background-color-active: var(--mrl-black-opacity-01);
-  --mrl-button-background-color-disabled: transparent;
-  --mrl-button-background-color-hover: var(--mrl-black-opacity-00);
-  --mrl-button-border-color: transparent;
-  --mrl-button-border-color-active: transparent;
-  --mrl-button-border-color-hover: transparent;
-  --mrl-button-border-color-disabled: transparent;
-  --mrl-button-text-color: rgba(var(--mrl-blue-70), 1);
-  --mrl-button-text-color-active: rgba(var(--mrl-blue-70), 1);
-  --mrl-button-text-color-disabled: var(--mrl-black-opacity-03);
-  --mrl-button-text-color-hover: rgba(var(--mrl-blue-70), 1);
-}
-.mrlIconButton--ghost,
-.mrlButton--ghost {
-  --mrl-button-background-color: transparent;
-  --mrl-button-background-color-active: var(--mrl-black-opacity-01);
-  --mrl-button-background-color-hover: var(--mrl-black-opacity-00);
-  --mrl-button-background-color-disabled: transparent;
-  --mrl-button-text-color: rgba(var(--mrl-gray-100), 1);
-  --mrl-button-text-color-active: rgba(var(--mrl-gray-100), 1);
-  --mrl-button-text-color-disabled: var(--mrl-black-opacity-03);
-  --mrl-button-text-color-hover: rgba(var(--mrl-gray-100), 1);
-  --mrl-button-inset-horizontal: calc(var(--mrl-spacing-01) + var(--mrl-spacing-02));
-  --mrl-button-icon-margin-right: var(--mrl-spacing-02);
-}
-.mrlIconButton--ghost[aria-pressed=true], .mrlIconButton--ghost[aria-checked=true], .mrlIconButton--ghost[aria-expanded=true], .mrlIconButton--ghost[aria-selected=true],
-.mrlButton--ghost[aria-pressed=true],
-.mrlButton--ghost[aria-checked=true],
-.mrlButton--ghost[aria-expanded=true],
-.mrlButton--ghost[aria-selected=true] {
-  --mrl-button-background-color: var(--mrl-color-background-inverse);
-  --mrl-button-text-color: var(--mrl-color-text-inverse);
-}
-.mrlIconButton--ghost-inverse,
-.mrlButton--ghost-inverse {
-  --mrl-button-background-color: transparent;
-  --mrl-button-background-color-active: var(--mrl-white-opacity-04);
-  --mrl-button-background-color-hover: var(--mrl-white-opacity-02);
-  --mrl-button-background-color-disabled: transparent;
-  --mrl-button-text-color: var(--mrl-color-text-inverse);
-  --mrl-button-text-color-active: var(--mrl-color-text-inverse);
-  --mrl-button-text-color-hover: var(--mrl-color-text-inverse);
-  --mrl-button-text-color-disabled: var(--mrl-white-opacity-04);
-  --mrl-button-inset-horizontal: calc(var(--mrl-spacing-01) + var(--mrl-spacing-02));
-  --mrl-button-icon-margin-right: var(--mrl-spacing-02);
-}
-.mrlIconButton--ghost-inverse.mrlButton--skeleton,
-.mrlButton--ghost-inverse.mrlButton--skeleton {
-  --mrl-button-background-color-skeleton: var(--mrl-color-skeleton-inverse);
-}
-.mrlIconButton--ghost-inverse.toggleStyle--default[aria-pressed=true], .mrlIconButton--ghost-inverse.toggleStyle--default[aria-checked=true], .mrlIconButton--ghost-inverse.toggleStyle--default[aria-expanded=true], .mrlIconButton--ghost-inverse.toggleStyle--default[aria-selected=true],
-.mrlButton--ghost-inverse.toggleStyle--default[aria-pressed=true],
-.mrlButton--ghost-inverse.toggleStyle--default[aria-checked=true],
-.mrlButton--ghost-inverse.toggleStyle--default[aria-expanded=true],
-.mrlButton--ghost-inverse.toggleStyle--default[aria-selected=true] {
-  --mrl-button-background-color: var(--mrl-color-background);
-  --mrl-button-text-color: var(--mrl-color-text);
-}
-.mrlIconButton--ghost-inverse.toggleStyle--secondary[aria-pressed=true], .mrlIconButton--ghost-inverse.toggleStyle--secondary[aria-checked=true], .mrlIconButton--ghost-inverse.toggleStyle--secondary[aria-expanded=true], .mrlIconButton--ghost-inverse.toggleStyle--secondary[aria-selected=true],
-.mrlButton--ghost-inverse.toggleStyle--secondary[aria-pressed=true],
-.mrlButton--ghost-inverse.toggleStyle--secondary[aria-checked=true],
-.mrlButton--ghost-inverse.toggleStyle--secondary[aria-expanded=true],
-.mrlButton--ghost-inverse.toggleStyle--secondary[aria-selected=true] {
-  --mrl-button-background-color: var(--mrl-color-accent);
-  --mrl-button-text-color: var(--mrl-color-text-inverse);
-}
-.mrlIconButton--ghost-inverse[aria-disabled=true][aria-pressed=true], .mrlIconButton--ghost-inverse[aria-disabled=true][aria-checked=true], .mrlIconButton--ghost-inverse[aria-disabled=true][aria-expanded=true], .mrlIconButton--ghost-inverse[aria-disabled=true][aria-selected=true],
-.mrlButton--ghost-inverse[aria-disabled=true][aria-pressed=true],
-.mrlButton--ghost-inverse[aria-disabled=true][aria-checked=true],
-.mrlButton--ghost-inverse[aria-disabled=true][aria-expanded=true],
-.mrlButton--ghost-inverse[aria-disabled=true][aria-selected=true] {
-  --mrl-button-background-color-disabled: var(--mrl-white-opacity-03);
-  --mrl-button-text-color-disabled: var(--mrl-white-opacity-04);
-}
-.mrlIconButton--inverse,
-.mrlButton--inverse {
-  --mrl-button-background-color: var(--mrl-color-background);
-  --mrl-button-background-color-active: var(--mrl-white-opacity-06);
-  --mrl-button-background-color-hover: var(--mrl-white-opacity-08);
-  --mrl-button-background-color-disabled: var(--mrl-white-opacity-03);
-  --mrl-button-border-color: transparent;
-  --mrl-button-border-color-active: transparent;
-  --mrl-button-border-color-hover: transparent;
-  --mrl-button-border-color-disabled: transparent;
-  --mrl-button-text-color: rgba(var(--mrl-gray-100), 1);
-  --mrl-button-text-color-active: rgba(var(--mrl-gray-100), 1);
-  --mrl-button-text-color-disabled: var(--mrl-black-opacity-03);
-}
-.mrlIconButton--inverse.mrlButton--skeleton,
-.mrlButton--inverse.mrlButton--skeleton {
-  --mrl-button-background-color-skeleton: var(--mrl-color-skeleton-inverse);
-}
-.mrlIconButton[aria-disabled=true][aria-pressed=true], .mrlIconButton[aria-disabled=true][aria-checked=true], .mrlIconButton[aria-disabled=true][aria-expanded=true], .mrlIconButton[aria-disabled=true][aria-selected=true],
-.mrlButton[aria-disabled=true][aria-pressed=true],
-.mrlButton[aria-disabled=true][aria-checked=true],
-.mrlButton[aria-disabled=true][aria-expanded=true],
-.mrlButton[aria-disabled=true][aria-selected=true] {
-  --mrl-button-background-color-disabled: var(--mrl-black-opacity-03);
-  --mrl-button-text-color-disabled: var(--mrl-color-text-inverse);
-}
-
-.mrlIconButton-wrapper {
-  display: inline-flex;
-}
-
-.mrlIconButton {
-  min-height: var(--mrl-spacing-09);
-  min-width: var(--mrl-spacing-09);
-}
-.mrlIconButton.mrlIconButton--small {
-  min-height: var(--mrl-spacing-08);
-  min-width: var(--mrl-spacing-08);
-}
-.mrlIconButton.mrlIconButton--large {
-  min-height: calc(var(--mrl-spacing-09) + var(--mrl-spacing-02));
-  min-width: calc(var(--mrl-spacing-09) + var(--mrl-spacing-02));
-}
-.mrlIconButton.mrlIconButton--xsmall {
-  min-height: var(--mrl-spacing-07);
-  min-width: var(--mrl-spacing-07);
-  padding: var(--mrl-spacing-01);
-}
-.mrlIconButton span {
-  align-self: center;
-  max-height: var(--mrl-button-icon-size);
-  max-width: var(--mrl-button-icon-size);
-  pointer-events: none;
-}
-@media screen and (hover: hover) {
-  .mrlIconButton:hover ~ .mrl-tooltip-content {
-    opacity: 1;
-    pointer-events: inherit;
-    transition-delay: var(--mrl-duration-03);
-    transition-duration: var(--mrl-duration-03);
-    transition-timing-function: var(--mrl-timing-m2);
-  }
-}

package/dist/esm/components/button/MrlIconButton/MrlIconButton.js

@@ -1,96 +0,0 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import * as React from 'react';
-import classnames from 'classnames';
-import { buttonDefaults } from '../constants';
-import { _isDisabled, _isSelected, _isToggleButton, _spinnerProps } from '../helpers';
-import { setAttributes, getUniqueId } from '../../../utils';
-import { MrlTooltipDefaults } from '../../tooltip/constants';
-import { MrlSpinner, MrlTooltip } from '../../';
-import { spinnerDefaults } from '../../loader/constants';
-import './MrlIconButton.css';
-export const MrlIconButton = React.forwardRef(function MrlIconButton(_a, ref) {
-    var { ['aria-label']: ariaLabel, attrs = {}, badge, className, disableEvents = false, disableTooltipHover = false, icon, 
-    // We intentionally deviate from the basic button for icon-buttons since the vast
-    // majority of icon buttons are ghost buttons. The proptype remains
-    // consistent with the basic button however to keep our code DRY.
-    kind = 'ghost', loading = false, loadingText = spinnerDefaults.text, onClick, onKeyUp, onMouseUp, position = MrlTooltipDefaults.position, toggleAria = buttonDefaults.toggleAria, toggleStyle, text, tipAnchor = MrlTooltipDefaults.anchor, tooltipKind = 'default', size = buttonDefaults.size, state = buttonDefaults.state, wrapperClassName, controlledState } = _a, remainingProps = __rest(_a, ['aria-label', "attrs", "badge", "className", "disableEvents", "disableTooltipHover", "icon", "kind", "loading", "loadingText", "onClick", "onKeyUp", "onMouseUp", "position", "toggleAria", "toggleStyle", "text", "tipAnchor", "tooltipKind", "size", "state", "wrapperClassName", "controlledState"]);
-    /**
-     * Determine the effective button state.
-     * Uses controlledState if provided (controlled mode),
-     * otherwise falls back to the state prop (uncontrolled mode).
-     * This allows the component to work in both controlled and uncontrolled scenarios.
-     */
-    const effectiveButtonState = controlledState !== null && controlledState !== void 0 ? controlledState : state;
-    const [isSelected, setIsSelected] = React.useState(() => _isSelected(effectiveButtonState));
-    const buttonRef = React.useRef(null);
-    React.useImperativeHandle(ref, () => buttonRef.current);
-    /**
-     * MrlIconButton could behave as a toggle button if toggleStyle is 'default' or 'secondary'
-     */
-    const isToggleButton = toggleStyle && _isToggleButton(toggleStyle);
-    /**
-     * We need to watch the value of state to keep in sync
-     * the value of state passed as props and the internal
-     * isSelected piece of state.
-     */
-    React.useEffect(() => {
-        // allows consumers to set the 'selected' or 'selected-disabled' state from a parent component.
-        setIsSelected(_isSelected(effectiveButtonState));
-    }, [effectiveButtonState]);
-    /**
-     * Handle onClick events
-     * @param {React.MouseEvent<HTMLButtonElement>} e - mouse event
-     */
-    function handleOnClick(e) {
-        e.stopPropagation();
-        if (_isDisabled(effectiveButtonState, loading) || disableEvents) {
-            return;
-        }
-        if (isToggleButton && !controlledState) {
-            setIsSelected((prevIsSelected) => !prevIsSelected);
-        }
-        if (onClick && typeof onClick === 'function') {
-            onClick(e);
-        }
-    }
-    const classNames = classnames('mrlIconButton', `mrlIconButton--${size}`, `mrlIconButton--${kind}`, isToggleButton && toggleStyle && `toggleStyle--${toggleStyle}`, attrs.class || attrs.className, className);
-    delete attrs.class;
-    delete attrs.className;
-    const getAriaLabel = () => {
-        // Set loading text if loading
-        if (loading)
-            return `${loadingText} ${text}`;
-        // Only set aria-label if we have actual content
-        const hasAriaLabel = ariaLabel && ariaLabel.trim() !== '';
-        // If we have a custom ariaLabel, override the default text
-        if (hasAriaLabel)
-            return ariaLabel;
-        // Fallback to icon button text
-        return text;
-    };
-    const ariaLabelValue = getAriaLabel();
-    const attributes = setAttributes(attrs, Object.assign(Object.assign({ 'aria-disabled': _isDisabled(effectiveButtonState, loading), 'aria-label': ariaLabelValue }, (isToggleButton && { [`aria-${toggleAria}`]: isSelected || false })), { type: 'button' }));
-    // MrlSvg should always have size="auto"
-    const iconWithSizeAuto = React.useMemo(() => React.cloneElement(icon, {
-        size: 'auto'
-    }), [icon]);
-    const spinnerProps = _spinnerProps(kind, size);
-    const spinner = React.createElement(MrlSpinner, { kind: spinnerProps.kind, size: spinnerProps.size });
-    const dataQaProp = remainingProps['data-qa'];
-    const tooltipQa = dataQaProp ? `${dataQaProp}-tooltip` : getUniqueId('tooltip');
-    const tooltipContentClass = size === 'xsmall' || size === 'small' ? `mrlIconButton--${size}-wrapper` : undefined;
-    return (React.createElement(MrlTooltip, { anchor: tipAnchor, dataQa: tooltipQa, kind: tooltipKind, position: position, text: text, tooltipClass: classnames('mrlIconButton-wrapper', wrapperClassName), tooltipContentClass: tooltipContentClass, disableTooltipHover: disableTooltipHover, srAnnouncement: false },
-        React.createElement("button", Object.assign({}, attributes, remainingProps, { className: classNames, ref: buttonRef, onClick: handleOnClick, onKeyUp: onKeyUp, onMouseUp: onMouseUp }),
-            loading ? spinner : iconWithSizeAuto,
-            badge)));
-});

package/dist/esm/components/button/MrlIconButton/index.js

@@ -1 +0,0 @@
-export * from './MrlIconButton';