@semcore/button 16.0.0-prerelease.9 → 16.0.1-prerelease.2

package/lib/esm/component/Button/button.shadow.css

@@ -0,0 +1,398 @@
+SButton {
+  position: relative;
+  display: inline-block;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  margin: 0;
+  white-space: nowrap;
+  font-family: inherit;
+  line-height: normal;
+  text-decoration: none;
+  text-align: center;
+  vertical-align: middle;
+  border: 1px solid transparent;
+  box-shadow: none;
+  cursor: pointer;
+  box-sizing: border-box;
+  overflow: visible;
+  user-select: none;
+  touch-action: manipulation;
+  -webkit-tap-highlight-color: transparent;
+  font-weight: var(--intergalactic-medium, 500);
+  color: var(--intergalactic-text-secondary, #6c6e79);
+  min-width: fit-content;
+
+  &::-moz-focus-inner {
+    padding: 0;
+    border: none;
+  }
+
+  &:active,
+  &:hover {
+    text-decoration: none;
+  }
+}
+
+SButton[disabled] {
+  opacity: var(--intergalactic-disabled-opacity, 0.3);
+  cursor: default;
+  pointer-events: none;
+  box-shadow: none;
+  z-index: 0;
+}
+
+SButton[size='s'] {
+  width: var(--intergalactic-form-control-s, 20px);
+  height: var(--intergalactic-form-control-s, 20px);
+  border-radius: var(--intergalactic-addon-rounded, 4px);
+}
+
+SButton[size='m'] {
+  height: var(--intergalactic-form-control-m, 28px);
+  border-radius: var(--intergalactic-control-rounded, 6px);
+  font-size: var(--intergalactic-fs-200, 14px);
+}
+
+SButton[size='l'] {
+  height: var(--intergalactic-form-control-l, 40px);
+  border-radius: var(--intergalactic-control-rounded, 6px);
+  font-size: var(--intergalactic-fs-300, 16px);
+}
+
+SButton[theme='primary-info'] {
+  color: var(--intergalactic-text-primary-invert, #ffffff);
+  background-color: var(--intergalactic-control-primary-info, #008ff8);
+
+  &:hover {
+    color: var(--intergalactic-text-primary-invert, #ffffff);
+    background-color: var(--intergalactic-control-primary-info-hover, #006dca);
+  }
+
+  &:active,
+  &[active] {
+    color: var(--intergalactic-text-primary-invert, #ffffff);
+    background-color: var(--intergalactic-control-primary-info-active, #044792);
+  }
+}
+
+SButton[theme='primary-success'] {
+  color: var(--intergalactic-text-primary-invert, #ffffff);
+  background-color: var(--intergalactic-control-primary-success, #009f81);
+
+  &:hover {
+    color: var(--intergalactic-text-primary-invert, #ffffff);
+    background-color: var(--intergalactic-control-primary-success-hover, #007c65);
+  }
+
+  &:active,
+  &[active] {
+    color: var(--intergalactic-text-primary-invert, #ffffff);
+    background-color: var(--intergalactic-control-primary-success-active, #055345);
+  }
+}
+
+SButton[theme='primary-brand'] {
+  color: var(--intergalactic-text-primary-invert, #ffffff);
+  background-color: var(--intergalactic-control-primary-brand, #ff642d);
+
+  &:hover {
+    color: var(--intergalactic-text-primary-invert, #ffffff);
+    background-color: var(--intergalactic-control-primary-brand-hover, #c33909);
+  }
+
+  &:active,
+  &[active] {
+    color: var(--intergalactic-text-primary-invert, #ffffff);
+    background-color: var(--intergalactic-control-primary-brand-active, #8b1500);
+  }
+}
+
+SButton[theme='primary-warning'] {
+  color: var(--intergalactic-text-primary-invert, #ffffff);
+  background-color: var(--intergalactic-control-primary-brand, #ff642d);
+
+  &:hover {
+    color: var(--intergalactic-text-primary-invert, #ffffff);
+    background-color: var(--intergalactic-control-primary-brand-hover, #c33909);
+  }
+
+  &:active,
+  &[active] {
+    color: var(--intergalactic-text-primary-invert, #ffffff);
+    background-color: var(--intergalactic-control-primary-brand-active, #8b1500);
+  }
+}
+
+SButton[theme='primary-danger'] {
+  color: var(--intergalactic-text-primary-invert, #ffffff);
+  background-color: var(--intergalactic-control-primary-critical, #ff4953);
+
+  &:hover {
+    color: var(--intergalactic-text-primary-invert, #ffffff);
+    background-color: var(--intergalactic-control-primary-critical-hover, #d1002f);
+  }
+
+  &:active,
+  &[active] {
+    color: var(--intergalactic-text-primary-invert, #ffffff);
+    background-color: var(--intergalactic-control-primary-critical-active, #8e0016);
+  }
+}
+
+SButton[theme='primary-invert'] {
+  color: var(--intergalactic-text-primary, #191b23);
+  background-color: var(--intergalactic-control-primary-invert, #ffffff);
+
+  &:hover {
+    color: var(--intergalactic-text-primary, #191b23);
+    background-color: var(--intergalactic-control-primary-invert-hover, #f4f5f9);
+  }
+
+  &:active,
+  &[active] {
+    color: var(--intergalactic-text-primary, #191b23);
+    background-color: var(--intergalactic-control-primary-invert-active, #e0e1e9);
+  }
+}
+
+SButton[theme='secondary-muted'] {
+  color: var(--intergalactic-text-secondary, #6c6e79);
+  border-color: var(--intergalactic-border-primary, #c4c7cf);
+  background-color: var(--intergalactic-control-secondary-neutral, rgba(138, 142, 155, 0.1));
+
+  &:hover {
+    background-color: var(--intergalactic-control-secondary-neutral-hover,
+    rgba(138, 142, 155, 0.2));
+    color: var(--intergalactic-text-primary, #191b23);
+  }
+
+  &:active,
+  &[active] {
+    background-color: var(--intergalactic-control-secondary-neutral-active,
+    rgba(138, 142, 155, 0.3));
+    color: var(--intergalactic-text-primary, #191b23);
+  }
+}
+
+SButton[theme='secondary-info'] {
+  background-color: var(--intergalactic-control-secondary-info, rgba(0, 143, 248, 0.1));
+  color: var(--intergalactic-text-link, #006dca);
+  border-color: var(--intergalactic-control-primary-info, #008ff8);
+
+  &:hover {
+    color: var(--intergalactic-text-link, #006dca);
+    background-color: var(--intergalactic-control-secondary-info-hover, rgba(0, 143, 248, 0.2));
+  }
+
+  &:active,
+  &[active] {
+    color: var(--intergalactic-text-link, #006dca);
+    background-color: var(--intergalactic-control-secondary-info-active, rgba(0, 143, 248, 0.3));
+  }
+}
+
+SButton[theme='secondary-invert'] {
+  color: var(--intergalactic-text-primary-invert, #ffffff);
+  border-color: var(--intergalactic-border-primary-invert, #ffffff);
+  background-color: var(--intergalactic-control-secondary-invert, rgba(255, 255, 255, 0.05));
+
+  &:hover {
+    color: var(--intergalactic-text-primary-invert, #ffffff);
+    background-color: var(--intergalactic-control-secondary-invert-hover, rgba(255, 255, 255, 0.1));
+  }
+
+  &:active,
+  &[active] {
+    color: var(--intergalactic-text-primary-invert, #ffffff);
+    background-color: var(--intergalactic-control-secondary-invert-active,
+    rgba(255, 255, 255, 0.3));
+  }
+}
+
+SButton[theme='tertiary-info'] {
+  color: var(--intergalactic-text-link, #006dca);
+  background-color: var(--intergalactic-control-tertiary-info, rgba(0, 143, 248, 0));
+
+  &:hover {
+    color: var(--intergalactic-text-link, #006dca);
+    background-color: var(--intergalactic-control-tertiary-info-hover, rgba(0, 143, 248, 0.2));
+  }
+
+  &:active,
+  &[active] {
+    color: var(--intergalactic-text-link, #006dca);
+    background-color: var(--intergalactic-control-tertiary-info-active, rgba(0, 143, 248, 0.3));
+  }
+}
+
+SButton[theme='tertiary-muted'] {
+  color: var(--intergalactic-text-secondary, #6c6e79);
+  background-color: var(--intergalactic-control-tertiary-neutral, rgba(138, 142, 155, 0));
+
+  &:hover {
+    background-color: var(--intergalactic-control-tertiary-neutral-hover, rgba(138, 142, 155, 0.2));
+    color: var(--intergalactic-text-primary, #191b23);
+  }
+
+  &:active,
+  &[active] {
+    background-color: var(--intergalactic-control-tertiary-neutral-active,
+    rgba(138, 142, 155, 0.3));
+    color: var(--intergalactic-text-primary, #191b23);
+  }
+}
+
+SButton[theme='tertiary-invert'] {
+  color: var(--intergalactic-text-primary-invert, #ffffff);
+  background-color: var(--intergalactic-control-tertiary-invert, rgba(255, 255, 255, 0));
+
+  &:hover {
+    color: var(--intergalactic-text-primary-invert, #ffffff);
+    background-color: var(--intergalactic-control-tertiary-invert-hover, rgba(255, 255, 255, 0.1));
+  }
+
+  &:active,
+  &[active] {
+    color: var(--intergalactic-text-primary-invert, #ffffff);
+    background-color: var(--intergalactic-control-tertiary-invert-active, rgba(255, 255, 255, 0.3));
+  }
+}
+
+SButton[neighborLocation='right'] {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+SButton[neighborLocation='both'] {
+  border-radius: 0;
+  /* disable-tokens-validator */
+  margin-left: -1px;
+}
+
+SButton[neighborLocation='left'] {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  /* disable-tokens-validator */
+  margin-left: -1px;
+}
+
+SButton[neighborLocation='both'],
+SButton[neighborLocation='left'] {
+  position: relative;
+
+  &:after {
+    background-color: var(--intergalactic-border-primary-invert, #ffffff);
+  }
+
+  &[theme='secondary-muted'] {
+    &:after {
+      background-color: var(--intergalactic-border-primary, #c4c7cf);
+    }
+  }
+}
+
+SButton+SButton[neighborLocation='both']:after,
+SButton+SButton[neighborLocation='left']:after {
+  content: '';
+  position: absolute;
+  top: -1px;
+  left: -1px;
+  width: 1px;
+  height: calc(100% + 2px);
+}
+
+SSpin {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+}
+
+SInner {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  width: 100%;
+}
+
+SInner[loading] {
+  visibility: hidden;
+}
+
+SText {
+  display: inline-flex;
+}
+
+SText[size='m'] {
+  margin-left: var(--intergalactic-spacing-2x, 8px);
+  margin-right: var(--intergalactic-spacing-2x, 8px);
+  line-height: var(--intergalactic-lh-200, 142%);
+}
+
+SText[size='l'] {
+  margin-left: var(--intergalactic-spacing-2x, 8px);
+  margin-right: var(--intergalactic-spacing-2x, 8px);
+  line-height: var(--intergalactic-lh-300, 150%);
+
+  &:only-child {
+    margin-left: var(--intergalactic-spacing-3x, 12px);
+    margin-right: var(--intergalactic-spacing-3x, 12px);
+  }
+
+  &:first-child {
+    margin-left: var(--intergalactic-spacing-3x, 12px);
+  }
+
+  &:last-child {
+    margin-right: var(--intergalactic-spacing-3x, 12px);
+  }
+}
+
+SAddon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+}
+
+SAddon[size='m'] {
+  &:not(:only-child):first-child {
+    margin-left: calc(var(--intergalactic-spacing-2x, 8px) - 1px);
+    /* -1px - for border width */
+  }
+
+  &:not(:only-child):last-child {
+    margin-right: calc(var(--intergalactic-spacing-2x, 8px) - 1px);
+    /* -1px - for border width */
+  }
+
+  &:only-child {
+    margin-left: calc(1.5 * var(--intergalactic-spacing-1x, 4px) - 1px);
+    /* -1px - for border width */
+    margin-right: calc(1.5 * var(--intergalactic-spacing-1x, 4px) - 1px);
+    /* -1px - for border width */
+  }
+}
+
+SAddon[size='l'] {
+  &:not(:only-child):first-child {
+    margin-left: calc(var(--intergalactic-spacing-3x, 12px) - 1px);
+    /* -1px - for border width */
+  }
+
+  &:not(:only-child):last-child {
+    margin-right: calc(var(--intergalactic-spacing-3x, 12px) - 1px);
+    /* -1px - for border width */
+  }
+
+  &:only-child {
+    margin-left: calc(3 * var(--intergalactic-spacing-1x, 4px) - 1px);
+    /* -1px - for border width */
+    margin-right: calc(3 * var(--intergalactic-spacing-1x, 4px) - 1px);
+    /* -1px - for border width */
+  }
+}

package/lib/esm/component/ButtonLink/ButtonLink.mjs

@@ -9,31 +9,34 @@ import React from "react";
 import { Box } from "@semcore/flex-box";
 import { AbstractButton } from "../AbstractButton/AbstractButton.mjs";
 import resolveColorEnhance from "@semcore/core/lib/utils/enhances/resolveColorEnhance";
+/*!__reshadow-styles__:"./buttonLink.shadow.css"*/
 var style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    ".___SButton_vy4nu_gg_{display:inline-flex;font-family:inherit;font-size:var(--intergalactic-fs-200, 14px);color:var(--intergalactic-text-link, #006dca);line-height:normal;position:relative;cursor:pointer;border:0;padding:0;margin:0;box-shadow:none;-webkit-tap-highlight-color:transparent;background:0 0;transition:color .15s ease-in-out}.___SButton_vy4nu_gg_,.___SButton_vy4nu_gg_:active{-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___SButton_vy4nu_gg_:hover{-webkit-text-decoration:none;text-decoration:none}}.___SButton_vy4nu_gg_::-moz-focus-inner{border:0;padding:0}.___SButton_vy4nu_gg_.__active_vy4nu_gg_,.___SButton_vy4nu_gg_:active{color:var(--intergalactic-text-link-hover-active, #044792)}@media (hover:hover){.___SButton_vy4nu_gg_:hover{color:var(--intergalactic-text-link-hover-active, #044792)}}.___SButton_vy4nu_gg_.__active_vy4nu_gg_ .___SText_vy4nu_gg_,.___SButton_vy4nu_gg_:active .___SText_vy4nu_gg_{border-color:currentColor}@media (hover:hover){.___SButton_vy4nu_gg_:hover .___SText_vy4nu_gg_{border-color:currentColor}}.___SButton_vy4nu_gg_.__enableVisited_vy4nu_gg_:visited{color:var(--intergalactic-text-link-visited, #8649e1)}@media (hover:hover){.___SButton_vy4nu_gg_.__enableVisited_vy4nu_gg_:visited:hover{color:var(--intergalactic-text-link-visited, #8649e1)}}.___SButton_vy4nu_gg_ .___SText_vy4nu_gg_{border-bottom-width:1px;border-bottom-style:solid;border-color:transparent;transition:border-bottom-color .15s ease-in-out}.___SButton_vy4nu_gg_.__disabled_vy4nu_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none}.___SButton_vy4nu_gg_._use_secondary_vy4nu_gg_{color:var(--intergalactic-text-hint, #6c6e79)}.___SButton_vy4nu_gg_._use_secondary_vy4nu_gg_.__active_vy4nu_gg_,.___SButton_vy4nu_gg_._use_secondary_vy4nu_gg_:active{color:var(--intergalactic-text-hint-hover-active, #484a54)}@media (hover:hover){.___SButton_vy4nu_gg_._use_secondary_vy4nu_gg_:hover{color:var(--intergalactic-text-hint-hover-active, #484a54)}}.___SButton_vy4nu_gg_._use_secondary_vy4nu_gg_ .___SText_vy4nu_gg_{border-bottom-width:1px;border-bottom-style:dashed;border-color:currentColor}.___SAddon_vy4nu_gg_,.___SInner_vy4nu_gg_{display:inline-flex;justify-content:center;align-items:center}.___SInner_vy4nu_gg_{height:100%;width:100%}.___SAddon_vy4nu_gg_{vertical-align:middle;pointer-events:none}.___SButton_vy4nu_gg_ .___SAddon_vy4nu_gg_:not(:only-child):first-child{margin-right:var(--intergalactic-spacing-1x, 4px)}.___SButton_vy4nu_gg_ .___SAddon_vy4nu_gg_:not(:only-child):last-child{margin-left:var(--intergalactic-spacing-1x, 4px)}.___SButton_vy4nu_gg_.__text-color_vy4nu_gg_{color:var(--text-color_vy4nu)}.___SButton_vy4nu_gg_.__text-color_vy4nu_gg_.__active_vy4nu_gg_,.___SButton_vy4nu_gg_.__text-color_vy4nu_gg_:active{color:var(--text-color_vy4nu);filter:brightness(.8)}@media (hover:hover){.___SButton_vy4nu_gg_.__text-color_vy4nu_gg_:hover{color:var(--text-color_vy4nu);filter:brightness(.8)}}.___SButton_vy4nu_gg_._size_100_vy4nu_gg_{font-size:var(--intergalactic-fs-100, 12px);line-height:var(--intergalactic-lh-100, 133%)}.___SButton_vy4nu_gg_._size_200_vy4nu_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%)}.___SButton_vy4nu_gg_._size_300_vy4nu_gg_{font-size:var(--intergalactic-fs-300, 16px);line-height:var(--intergalactic-lh-300, 150%)}.___SButton_vy4nu_gg_._size_400_vy4nu_gg_{font-size:var(--intergalactic-fs-400, 20px);line-height:var(--intergalactic-lh-400, 120%)}.___SButton_vy4nu_gg_._size_500_vy4nu_gg_{font-size:var(--intergalactic-fs-500, 24px);line-height:var(--intergalactic-lh-500, 117%)}.___SButton_vy4nu_gg_._size_600_vy4nu_gg_{font-size:var(--intergalactic-fs-600, 32px);line-height:var(--intergalactic-lh-600, 125%)}.___SButton_vy4nu_gg_._size_700_vy4nu_gg_{font-size:var(--intergalactic-fs-700, 36px);line-height:var(--intergalactic-lh-700, 110%)}.___SButton_vy4nu_gg_._size_800_vy4nu_gg_{font-size:var(--intergalactic-fs-800, 48px);line-height:var(--intergalactic-lh-800, 117%)}@media (prefers-reduced-motion){.___SButton_vy4nu_gg_,.___SText_vy4nu_gg_{transition:none}}",
-    "vy4nu_gg_"
-  ), {
-    "__SButton": "___SButton_vy4nu_gg_",
-    "_disabled": "__disabled_vy4nu_gg_",
-    "__SInner": "___SInner_vy4nu_gg_",
-    "__SAddon": "___SAddon_vy4nu_gg_",
-    "_size_100": "_size_100_vy4nu_gg_",
-    "_size_200": "_size_200_vy4nu_gg_",
-    "_size_300": "_size_300_vy4nu_gg_",
-    "_size_400": "_size_400_vy4nu_gg_",
-    "_size_500": "_size_500_vy4nu_gg_",
-    "_size_600": "_size_600_vy4nu_gg_",
-    "_size_700": "_size_700_vy4nu_gg_",
-    "_size_800": "_size_800_vy4nu_gg_",
-    "__SText": "___SText_vy4nu_gg_",
-    "_active": "__active_vy4nu_gg_",
-    "_enableVisited": "__enableVisited_vy4nu_gg_",
-    "_use_secondary": "_use_secondary_vy4nu_gg_",
-    "_text-color": "__text-color_vy4nu_gg_",
-    "--text-color": "--text-color_vy4nu"
+    ".___SButton_wqc87_gg_{display:inline-flex;font-family:inherit;font-size:var(--intergalactic-fs-200, 14px);color:var(--intergalactic-text-link, #006dca);line-height:normal;position:relative;cursor:pointer;border:0;padding:0;margin:0;box-shadow:none;-webkit-tap-highlight-color:transparent;background:0 0;transition:color .15s ease-in-out}.___SButton_wqc87_gg_,.___SButton_wqc87_gg_:active{-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___SButton_wqc87_gg_:hover{-webkit-text-decoration:none;text-decoration:none}}.___SButton_wqc87_gg_::-moz-focus-inner{border:0;padding:0}.___SButton_wqc87_gg_.__active_wqc87_gg_,.___SButton_wqc87_gg_:active{color:var(--intergalactic-text-link-hover-active, #044792)}@media (hover:hover){.___SButton_wqc87_gg_:hover{color:var(--intergalactic-text-link-hover-active, #044792)}}.___SButton_wqc87_gg_.__active_wqc87_gg_ .___SText_wqc87_gg_,.___SButton_wqc87_gg_:active .___SText_wqc87_gg_{border-color:currentColor}@media (hover:hover){.___SButton_wqc87_gg_:hover .___SText_wqc87_gg_{border-color:currentColor}}.___SButton_wqc87_gg_.__enableVisited_wqc87_gg_:visited{color:var(--intergalactic-text-link-visited, #8649e1)}@media (hover:hover){.___SButton_wqc87_gg_.__enableVisited_wqc87_gg_:visited:hover{color:var(--intergalactic-text-link-visited, #8649e1)}}.___SButton_wqc87_gg_ .___SText_wqc87_gg_{border-bottom-width:1px;border-bottom-style:solid;border-color:transparent;transition:border-bottom-color .15s ease-in-out}.___SButton_wqc87_gg_.__disabled_wqc87_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none}.___SButton_wqc87_gg_._use_secondary_wqc87_gg_{color:var(--intergalactic-text-hint, #6c6e79)}.___SButton_wqc87_gg_._use_secondary_wqc87_gg_.__active_wqc87_gg_,.___SButton_wqc87_gg_._use_secondary_wqc87_gg_:active{color:var(--intergalactic-text-hint-hover-active, #484a54)}@media (hover:hover){.___SButton_wqc87_gg_._use_secondary_wqc87_gg_:hover{color:var(--intergalactic-text-hint-hover-active, #484a54)}}.___SButton_wqc87_gg_._use_secondary_wqc87_gg_ .___SText_wqc87_gg_{border-bottom-width:1px;border-bottom-style:dashed;border-color:currentColor}.___SAddon_wqc87_gg_,.___SInner_wqc87_gg_{display:inline-flex;justify-content:center;align-items:center}.___SInner_wqc87_gg_{height:100%;width:100%}.___SAddon_wqc87_gg_{vertical-align:middle;pointer-events:none}.___SButton_wqc87_gg_ .___SAddon_wqc87_gg_:not(:only-child):first-child{margin-right:var(--intergalactic-spacing-1x, 4px)}.___SButton_wqc87_gg_ .___SAddon_wqc87_gg_:not(:only-child):last-child{margin-left:var(--intergalactic-spacing-1x, 4px)}.___SButton_wqc87_gg_.__text-color_wqc87_gg_{color:var(--text-color_wqc87)}.___SButton_wqc87_gg_.__text-color_wqc87_gg_.__active_wqc87_gg_,.___SButton_wqc87_gg_.__text-color_wqc87_gg_:active{color:var(--text-color_wqc87);filter:brightness(.8)}@media (hover:hover){.___SButton_wqc87_gg_.__text-color_wqc87_gg_:hover{color:var(--text-color_wqc87);filter:brightness(.8)}}.___SButton_wqc87_gg_._size_100_wqc87_gg_{font-size:var(--intergalactic-fs-100, 12px);line-height:var(--intergalactic-lh-100, 133%)}.___SButton_wqc87_gg_._size_200_wqc87_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%)}.___SButton_wqc87_gg_._size_300_wqc87_gg_{font-size:var(--intergalactic-fs-300, 16px);line-height:var(--intergalactic-lh-300, 150%)}.___SButton_wqc87_gg_._size_400_wqc87_gg_{font-size:var(--intergalactic-fs-400, 20px);line-height:var(--intergalactic-lh-400, 120%)}.___SButton_wqc87_gg_._size_500_wqc87_gg_{font-size:var(--intergalactic-fs-500, 24px);line-height:var(--intergalactic-lh-500, 117%)}.___SButton_wqc87_gg_._size_600_wqc87_gg_{font-size:var(--intergalactic-fs-600, 32px);line-height:var(--intergalactic-lh-600, 125%)}.___SButton_wqc87_gg_._size_700_wqc87_gg_{font-size:var(--intergalactic-fs-700, 36px);line-height:var(--intergalactic-lh-700, 110%)}.___SButton_wqc87_gg_._size_800_wqc87_gg_{font-size:var(--intergalactic-fs-800, 48px);line-height:var(--intergalactic-lh-800, 117%)}@media (prefers-reduced-motion){.___SButton_wqc87_gg_,.___SText_wqc87_gg_{transition:none}}",
+    /*__inner_css_end__*/
+    "wqc87_gg_"
+  ), /*__reshadow_css_end__*/
+  {
+    "__SButton": "___SButton_wqc87_gg_",
+    "_disabled": "__disabled_wqc87_gg_",
+    "__SInner": "___SInner_wqc87_gg_",
+    "__SAddon": "___SAddon_wqc87_gg_",
+    "_size_100": "_size_100_wqc87_gg_",
+    "_size_200": "_size_200_wqc87_gg_",
+    "_size_300": "_size_300_wqc87_gg_",
+    "_size_400": "_size_400_wqc87_gg_",
+    "_size_500": "_size_500_wqc87_gg_",
+    "_size_600": "_size_600_wqc87_gg_",
+    "_size_700": "_size_700_wqc87_gg_",
+    "_size_800": "_size_800_wqc87_gg_",
+    "__SText": "___SText_wqc87_gg_",
+    "_active": "__active_wqc87_gg_",
+    "_enableVisited": "__enableVisited_wqc87_gg_",
+    "_use_secondary": "_use_secondary_wqc87_gg_",
+    "_text-color": "__text-color_wqc87_gg_",
+    "--text-color": "--text-color_wqc87"
   })
 );
 var enhance = {

package/lib/esm/component/ButtonLink/buttonLink.shadow.css

@@ -0,0 +1,159 @@
+SButton {
+  display: inline-flex;
+  font-family: inherit;
+  font-size: var(--intergalactic-fs-200, 14px);
+  color: var(--intergalactic-text-link, #006dca);
+  line-height: normal;
+  position: relative;
+  cursor: pointer;
+  text-decoration: none;
+  border: none;
+  padding: 0;
+  margin: 0;
+  box-shadow: none;
+  -webkit-tap-highlight-color: transparent;
+  background: none;
+  transition: color 0.15s ease-in-out;
+
+  &:active,
+  &:hover {
+    text-decoration: none;
+  }
+
+  &::-moz-focus-inner {
+    border: none;
+    padding: 0;
+  }
+
+  &[active],
+  &:hover,
+  &:active {
+    color: var(--intergalactic-text-link-hover-active, #044792);
+
+    & SText {
+      border-color: currentColor;
+    }
+  }
+
+  &[enableVisited]:visited,
+  &[enableVisited]:visited:hover {
+    color: var(--intergalactic-text-link-visited, #8649e1);
+  }
+
+  SText {
+    border-bottom-width: 1px;
+    border-bottom-style: solid;
+    border-color: transparent;
+    transition: border-bottom-color 0.15s ease-in-out;
+  }
+}
+
+SButton[disabled] {
+  opacity: var(--intergalactic-disabled-opacity, 0.3);
+  cursor: default;
+  /* Disable link interactions */
+  pointer-events: none;
+}
+
+SButton[use='secondary'] {
+  color: var(--intergalactic-text-hint, #6c6e79);
+
+  &[active],
+  &:active,
+  &:hover {
+    color: var(--intergalactic-text-hint-hover-active, #484a54);
+  }
+
+  SText {
+    border-bottom-width: 1px;
+    border-bottom-style: dashed;
+    border-color: currentColor;
+  }
+}
+
+SInner {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  width: 100%;
+}
+
+SAddon {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  vertical-align: middle;
+  pointer-events: none;
+}
+
+SButton SAddon {
+  &:not(:only-child):first-child {
+    margin-right: var(--intergalactic-spacing-1x, 4px);
+  }
+
+  &:not(:only-child):last-child {
+    margin-left: var(--intergalactic-spacing-1x, 4px);
+  }
+}
+
+SButton[text-color] {
+  color: var(--text-color);
+
+  &[active],
+  &:hover,
+  &:active {
+    color: var(--text-color);
+    filter: brightness(0.8);
+  }
+}
+
+SButton[size='100'] {
+  font-size: var(--intergalactic-fs-100, 12px);
+  line-height: var(--intergalactic-lh-100, 133%);
+}
+
+SButton[size='200'] {
+  font-size: var(--intergalactic-fs-200, 14px);
+  line-height: var(--intergalactic-lh-200, 142%);
+}
+
+SButton[size='300'] {
+  font-size: var(--intergalactic-fs-300, 16px);
+  line-height: var(--intergalactic-lh-300, 150%);
+}
+
+SButton[size='400'] {
+  font-size: var(--intergalactic-fs-400, 20px);
+  line-height: var(--intergalactic-lh-400, 120%);
+}
+
+SButton[size='500'] {
+  font-size: var(--intergalactic-fs-500, 24px);
+  line-height: var(--intergalactic-lh-500, 117%);
+}
+
+SButton[size='600'] {
+  font-size: var(--intergalactic-fs-600, 32px);
+  line-height: var(--intergalactic-lh-600, 125%);
+}
+
+SButton[size='700'] {
+  font-size: var(--intergalactic-fs-700, 36px);
+  line-height: var(--intergalactic-lh-700, 110%);
+}
+
+SButton[size='800'] {
+  font-size: var(--intergalactic-fs-800, 48px);
+  line-height: var(--intergalactic-lh-800, 117%);
+}
+
+@media (prefers-reduced-motion) {
+  SButton {
+    transition: none;
+  }
+
+  SText {
+    transition: none;
+  }
+}

package/lib/types/component/AbstractButton/AbstractButton.type.d.ts

@@ -1,10 +1,9 @@
 import React from 'react';
 import { PropGetterFn } from '@semcore/core';
-import { KeyboardFocusProps } from '@semcore/core/lib/utils/enhances/keyboardFocusEnhance';
 import { BoxProps } from '@semcore/flex-box';
 import { NeighborItemProps } from '@semcore/neighbor-location';
 import { TooltipHintProps } from '@semcore/tooltip';
-export type AbstractButtonProps<S, U, T> = BoxProps & NeighborItemProps & KeyboardFocusProps & {
+export type AbstractButtonProps<S, U, T> = BoxProps & NeighborItemProps & {
     /** Button activity state */
     active?: boolean;
     /** Disabled button state */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@semcore/button",
   "description": "Semrush Button Component",
-  "version": "16.0.0-prerelease.9",
+  "version": "16.0.1-prerelease.2",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",
@@ -14,13 +14,13 @@
     "types": "./lib/types/index.d.ts"
   },
   "dependencies": {
-    "@semcore/flex-box": "16.0.0-prerelease.9",
-    "@semcore/neighbor-location": "16.0.0-prerelease.9",
-    "@semcore/spin": "16.0.0-prerelease.9",
-    "@semcore/tooltip": "16.0.0-prerelease.9"
+    "@semcore/flex-box": "16.0.1-prerelease.2",
+    "@semcore/neighbor-location": "16.0.1-prerelease.2",
+    "@semcore/spin": "16.0.1-prerelease.2",
+    "@semcore/tooltip": "16.0.1-prerelease.2"
   },
   "peerDependencies": {
-    "@semcore/base-components": "^16.0.0-prerelease.9"
+    "@semcore/base-components": "^16.0.1-prerelease.2"
   },
   "repository": {
     "type": "git",

package/src/component/AbstractButton/AbstractButton.tsx

@@ -85,7 +85,7 @@ export abstract class AbstractButton extends Component<Props, {}, {}> {
     const SButton = Root;
 
     return sstyled(styles)(
-      <SButton render={Hint} {...buttonProps} {...hintProps}>
+      <SButton render={Hint} {...buttonProps} {...hintProps} ignorePortalsStacking>
         {children}
       </SButton>,
     );

package/src/component/AbstractButton/AbstractButton.type.ts

@@ -1,13 +1,11 @@
 import React from 'react';
 import { PropGetterFn } from '@semcore/core';
-import { KeyboardFocusProps } from '@semcore/core/lib/utils/enhances/keyboardFocusEnhance';
 import { BoxProps } from '@semcore/flex-box';
 import { NeighborItemProps } from '@semcore/neighbor-location';
 import { TooltipHintProps } from '@semcore/tooltip';
 
 export type AbstractButtonProps<S, U, T> = BoxProps &
-  NeighborItemProps &
-  KeyboardFocusProps & {
+  NeighborItemProps & {
     /** Button activity state */
     active?: boolean;
     /** Disabled button state */