@semcore/button 5.43.1-prerelease.5 → 5.43.2-prerelease.0

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

@@ -0,0 +1,406 @@
+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;
+  outline: 0;
+  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,
+  &:focus {
+    outline: 0;
+    text-decoration: none;
+  }
+}
+
+SButton[keyboardFocused] {
+  box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));
+  z-index: 1;
+}
+
+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

@@ -1,82 +1,91 @@
-import g from "@babel/runtime/helpers/esm/objectSpread2";
-import y from "@babel/runtime/helpers/esm/classCallCheck";
-import d from "@babel/runtime/helpers/esm/createClass";
-import u from "@babel/runtime/helpers/esm/inherits";
-import v from "@babel/runtime/helpers/esm/createSuper";
-import i from "@babel/runtime/helpers/esm/defineProperty";
-import { sstyled as h } from "@semcore/utils/lib/core/index";
-import S, { sstyled as a, assignProps as c } from "@semcore/core";
-import l from "react";
-import x from "@semcore/utils/lib/enhances/keyboardFocusEnhance";
-import { Box as p } from "@semcore/flex-box";
-import { AbstractButton as f } from "../AbstractButton/AbstractButton.mjs";
-import m from "@semcore/utils/lib/enhances/resolveColorEnhance";
-var B = (
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import { sstyled } from "@semcore/utils/lib/core/index";
+import createComponent, { sstyled as sstyled$1, assignProps } from "@semcore/core";
+import React from "react";
+import keyboardFocusEnhance from "@semcore/utils/lib/enhances/keyboardFocusEnhance";
+import { Box } from "@semcore/flex-box";
+import { AbstractButton } from "../AbstractButton/AbstractButton.mjs";
+import resolveColorEnhance from "@semcore/utils/lib/enhances/resolveColorEnhance";
+/*!__reshadow-styles__:"./buttonLink.shadow.css"*/
+var style = (
   /*__reshadow_css_start__*/
-  (h.insert(
+  (sstyled.insert(
     /*__inner_css_start__*/
-    ".___SButton_4pb2y_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;-webkit-text-decoration:none;text-decoration:none;border:0;padding:0;margin:0;box-shadow:none;-webkit-tap-highlight-color:transparent;outline:0;background:0 0;transition:color .15s ease-in-out}.___SButton_4pb2y_gg_:active,.___SButton_4pb2y_gg_:focus{outline:0;-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___SButton_4pb2y_gg_:hover{outline:0;-webkit-text-decoration:none;text-decoration:none}}.___SButton_4pb2y_gg_::-moz-focus-inner{border:0;padding:0}.___SButton_4pb2y_gg_.__active_4pb2y_gg_,.___SButton_4pb2y_gg_:active{color:var(--intergalactic-text-link-hover-active, #044792)}@media (hover:hover){.___SButton_4pb2y_gg_:hover{color:var(--intergalactic-text-link-hover-active, #044792)}}.___SButton_4pb2y_gg_.__active_4pb2y_gg_ .___SText_4pb2y_gg_,.___SButton_4pb2y_gg_:active .___SText_4pb2y_gg_{border-color:currentColor}@media (hover:hover){.___SButton_4pb2y_gg_:hover .___SText_4pb2y_gg_{border-color:currentColor}}.___SButton_4pb2y_gg_.__enableVisited_4pb2y_gg_:visited{color:var(--intergalactic-text-link-visited, #8649e1)}@media (hover:hover){.___SButton_4pb2y_gg_.__enableVisited_4pb2y_gg_:visited:hover{color:var(--intergalactic-text-link-visited, #8649e1)}}.___SButton_4pb2y_gg_ .___SText_4pb2y_gg_{border-bottom-width:1px;border-bottom-style:solid;border-color:transparent;transition:border-bottom-color .15s ease-in-out}.___SButton_4pb2y_gg_.__keyboardFocused_4pb2y_gg_{outline-color:var(--intergalactic-keyboard-focus-outline, rgba(0, 143, 248, 0.5));outline-style:solid;outline-width:3px}.___SButton_4pb2y_gg_.__disabled_4pb2y_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none}.___SButton_4pb2y_gg_._use_secondary_4pb2y_gg_{color:var(--intergalactic-text-hint, #6c6e79)}.___SButton_4pb2y_gg_._use_secondary_4pb2y_gg_.__active_4pb2y_gg_,.___SButton_4pb2y_gg_._use_secondary_4pb2y_gg_:active{color:var(--intergalactic-text-hint-hover-active, #484a54)}@media (hover:hover){.___SButton_4pb2y_gg_._use_secondary_4pb2y_gg_:hover{color:var(--intergalactic-text-hint-hover-active, #484a54)}}.___SButton_4pb2y_gg_._use_secondary_4pb2y_gg_ .___SText_4pb2y_gg_{border-bottom-width:1px;border-bottom-style:dashed;border-color:currentColor}.___SAddon_4pb2y_gg_,.___SInner_4pb2y_gg_{display:inline-flex;justify-content:center;align-items:center}.___SInner_4pb2y_gg_{height:100%;width:100%}.___SAddon_4pb2y_gg_{vertical-align:middle;pointer-events:none}.___SButton_4pb2y_gg_ .___SAddon_4pb2y_gg_:not(:only-child):first-child{margin-right:var(--intergalactic-spacing-1x, 4px)}.___SButton_4pb2y_gg_ .___SAddon_4pb2y_gg_:not(:only-child):last-child{margin-left:var(--intergalactic-spacing-1x, 4px)}.___SButton_4pb2y_gg_.__text-color_4pb2y_gg_{color:var(--text-color_4pb2y)}.___SButton_4pb2y_gg_.__text-color_4pb2y_gg_.__active_4pb2y_gg_,.___SButton_4pb2y_gg_.__text-color_4pb2y_gg_:active{color:var(--text-color_4pb2y);filter:brightness(.8)}@media (hover:hover){.___SButton_4pb2y_gg_.__text-color_4pb2y_gg_:hover{color:var(--text-color_4pb2y);filter:brightness(.8)}}.___SButton_4pb2y_gg_._size_100_4pb2y_gg_{font-size:var(--intergalactic-fs-100, 12px);line-height:var(--intergalactic-lh-100, 133%)}.___SButton_4pb2y_gg_._size_200_4pb2y_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%)}.___SButton_4pb2y_gg_._size_300_4pb2y_gg_{font-size:var(--intergalactic-fs-300, 16px);line-height:var(--intergalactic-lh-300, 150%)}.___SButton_4pb2y_gg_._size_400_4pb2y_gg_{font-size:var(--intergalactic-fs-400, 20px);line-height:var(--intergalactic-lh-400, 120%)}.___SButton_4pb2y_gg_._size_500_4pb2y_gg_{font-size:var(--intergalactic-fs-500, 24px);line-height:var(--intergalactic-lh-500, 117%)}.___SButton_4pb2y_gg_._size_600_4pb2y_gg_{font-size:var(--intergalactic-fs-600, 32px);line-height:var(--intergalactic-lh-600, 125%)}.___SButton_4pb2y_gg_._size_700_4pb2y_gg_{font-size:var(--intergalactic-fs-700, 36px);line-height:var(--intergalactic-lh-700, 110%)}.___SButton_4pb2y_gg_._size_800_4pb2y_gg_{font-size:var(--intergalactic-fs-800, 48px);line-height:var(--intergalactic-lh-800, 117%)}@media (prefers-reduced-motion){.___SButton_4pb2y_gg_,.___SText_4pb2y_gg_{transition:none}}",
-    "4pb2y_gg_"
-  ), {
-    __SButton: "___SButton_4pb2y_gg_",
-    _keyboardFocused: "__keyboardFocused_4pb2y_gg_",
-    _disabled: "__disabled_4pb2y_gg_",
-    __SInner: "___SInner_4pb2y_gg_",
-    __SAddon: "___SAddon_4pb2y_gg_",
-    _size_100: "_size_100_4pb2y_gg_",
-    _size_200: "_size_200_4pb2y_gg_",
-    _size_300: "_size_300_4pb2y_gg_",
-    _size_400: "_size_400_4pb2y_gg_",
-    _size_500: "_size_500_4pb2y_gg_",
-    _size_600: "_size_600_4pb2y_gg_",
-    _size_700: "_size_700_4pb2y_gg_",
-    _size_800: "_size_800_4pb2y_gg_",
-    __SText: "___SText_4pb2y_gg_",
-    _active: "__active_4pb2y_gg_",
-    _enableVisited: "__enableVisited_4pb2y_gg_",
-    _use_secondary: "_use_secondary_4pb2y_gg_",
-    "_text-color": "__text-color_4pb2y_gg_",
-    "--text-color": "--text-color_4pb2y"
+    ".___SButton_w7yoq_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;-webkit-text-decoration:none;text-decoration:none;border:0;padding:0;margin:0;box-shadow:none;-webkit-tap-highlight-color:transparent;outline:0;background:0 0;transition:color .15s ease-in-out}.___SButton_w7yoq_gg_:active,.___SButton_w7yoq_gg_:focus{outline:0;-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___SButton_w7yoq_gg_:hover{outline:0;-webkit-text-decoration:none;text-decoration:none}}.___SButton_w7yoq_gg_::-moz-focus-inner{border:0;padding:0}.___SButton_w7yoq_gg_.__active_w7yoq_gg_,.___SButton_w7yoq_gg_:active{color:var(--intergalactic-text-link-hover-active, #044792)}@media (hover:hover){.___SButton_w7yoq_gg_:hover{color:var(--intergalactic-text-link-hover-active, #044792)}}.___SButton_w7yoq_gg_.__active_w7yoq_gg_ .___SText_w7yoq_gg_,.___SButton_w7yoq_gg_:active .___SText_w7yoq_gg_{border-color:currentColor}@media (hover:hover){.___SButton_w7yoq_gg_:hover .___SText_w7yoq_gg_{border-color:currentColor}}.___SButton_w7yoq_gg_.__enableVisited_w7yoq_gg_:visited{color:var(--intergalactic-text-link-visited, #8649e1)}@media (hover:hover){.___SButton_w7yoq_gg_.__enableVisited_w7yoq_gg_:visited:hover{color:var(--intergalactic-text-link-visited, #8649e1)}}.___SButton_w7yoq_gg_ .___SText_w7yoq_gg_{border-bottom-width:1px;border-bottom-style:solid;border-color:transparent;transition:border-bottom-color .15s ease-in-out}.___SButton_w7yoq_gg_.__keyboardFocused_w7yoq_gg_{outline-color:var(--intergalactic-keyboard-focus-outline, rgba(0, 143, 248, 0.5));outline-style:solid;outline-width:3px}.___SButton_w7yoq_gg_.__disabled_w7yoq_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none}.___SButton_w7yoq_gg_._use_secondary_w7yoq_gg_{color:var(--intergalactic-text-hint, #6c6e79)}.___SButton_w7yoq_gg_._use_secondary_w7yoq_gg_.__active_w7yoq_gg_,.___SButton_w7yoq_gg_._use_secondary_w7yoq_gg_:active{color:var(--intergalactic-text-hint-hover-active, #484a54)}@media (hover:hover){.___SButton_w7yoq_gg_._use_secondary_w7yoq_gg_:hover{color:var(--intergalactic-text-hint-hover-active, #484a54)}}.___SButton_w7yoq_gg_._use_secondary_w7yoq_gg_ .___SText_w7yoq_gg_{border-bottom-width:1px;border-bottom-style:dashed;border-color:currentColor}.___SAddon_w7yoq_gg_,.___SInner_w7yoq_gg_{display:inline-flex;justify-content:center;align-items:center}.___SInner_w7yoq_gg_{height:100%;width:100%}.___SAddon_w7yoq_gg_{vertical-align:middle;pointer-events:none}.___SButton_w7yoq_gg_ .___SAddon_w7yoq_gg_:not(:only-child):first-child{margin-right:var(--intergalactic-spacing-1x, 4px)}.___SButton_w7yoq_gg_ .___SAddon_w7yoq_gg_:not(:only-child):last-child{margin-left:var(--intergalactic-spacing-1x, 4px)}.___SButton_w7yoq_gg_.__text-color_w7yoq_gg_{color:var(--text-color_w7yoq)}.___SButton_w7yoq_gg_.__text-color_w7yoq_gg_.__active_w7yoq_gg_,.___SButton_w7yoq_gg_.__text-color_w7yoq_gg_:active{color:var(--text-color_w7yoq);filter:brightness(.8)}@media (hover:hover){.___SButton_w7yoq_gg_.__text-color_w7yoq_gg_:hover{color:var(--text-color_w7yoq);filter:brightness(.8)}}.___SButton_w7yoq_gg_._size_100_w7yoq_gg_{font-size:var(--intergalactic-fs-100, 12px);line-height:var(--intergalactic-lh-100, 133%)}.___SButton_w7yoq_gg_._size_200_w7yoq_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%)}.___SButton_w7yoq_gg_._size_300_w7yoq_gg_{font-size:var(--intergalactic-fs-300, 16px);line-height:var(--intergalactic-lh-300, 150%)}.___SButton_w7yoq_gg_._size_400_w7yoq_gg_{font-size:var(--intergalactic-fs-400, 20px);line-height:var(--intergalactic-lh-400, 120%)}.___SButton_w7yoq_gg_._size_500_w7yoq_gg_{font-size:var(--intergalactic-fs-500, 24px);line-height:var(--intergalactic-lh-500, 117%)}.___SButton_w7yoq_gg_._size_600_w7yoq_gg_{font-size:var(--intergalactic-fs-600, 32px);line-height:var(--intergalactic-lh-600, 125%)}.___SButton_w7yoq_gg_._size_700_w7yoq_gg_{font-size:var(--intergalactic-fs-700, 36px);line-height:var(--intergalactic-lh-700, 110%)}.___SButton_w7yoq_gg_._size_800_w7yoq_gg_{font-size:var(--intergalactic-fs-800, 48px);line-height:var(--intergalactic-lh-800, 117%)}@media (prefers-reduced-motion){.___SButton_w7yoq_gg_,.___SText_w7yoq_gg_{transition:none}}",
+    /*__inner_css_end__*/
+    "w7yoq_gg_"
+  ), /*__reshadow_css_end__*/
+  {
+    "__SButton": "___SButton_w7yoq_gg_",
+    "_keyboardFocused": "__keyboardFocused_w7yoq_gg_",
+    "_disabled": "__disabled_w7yoq_gg_",
+    "__SInner": "___SInner_w7yoq_gg_",
+    "__SAddon": "___SAddon_w7yoq_gg_",
+    "_size_100": "_size_100_w7yoq_gg_",
+    "_size_200": "_size_200_w7yoq_gg_",
+    "_size_300": "_size_300_w7yoq_gg_",
+    "_size_400": "_size_400_w7yoq_gg_",
+    "_size_500": "_size_500_w7yoq_gg_",
+    "_size_600": "_size_600_w7yoq_gg_",
+    "_size_700": "_size_700_w7yoq_gg_",
+    "_size_800": "_size_800_w7yoq_gg_",
+    "__SText": "___SText_w7yoq_gg_",
+    "_active": "__active_w7yoq_gg_",
+    "_enableVisited": "__enableVisited_w7yoq_gg_",
+    "_use_secondary": "_use_secondary_w7yoq_gg_",
+    "_text-color": "__text-color_w7yoq_gg_",
+    "--text-color": "--text-color_w7yoq"
   })
-), z = {
-  keyboardFocused: x(),
-  resolveColor: m()
-}, o = /* @__PURE__ */ function(t) {
-  u(_, t);
-  var e = v(_);
-  function _() {
-    return y(this, _), e.apply(this, arguments);
+);
+var enhance = {
+  keyboardFocused: keyboardFocusEnhance(),
+  resolveColor: resolveColorEnhance()
+};
+var RootButtonLink = /* @__PURE__ */ function(_AbstractButton) {
+  _inherits(RootButtonLink2, _AbstractButton);
+  var _super = _createSuper(RootButtonLink2);
+  function RootButtonLink2() {
+    _classCallCheck(this, RootButtonLink2);
+    return _super.apply(this, arguments);
   }
-  return d(_, [{
+  _createClass(RootButtonLink2, [{
     key: "getTextColor",
-    value: function() {
-      var n = this.asProps, s = n.color, b = n.resolveColor;
-      return b(s);
+    value: function getTextColor() {
+      var _ref5 = this.asProps, color = _ref5.color, resolveColor = _ref5.resolveColor;
+      return resolveColor(color);
     }
-  }]), _;
-}(f);
-i(o, "displayName", "ButtonLink");
-i(o, "enhance", Object.values(z));
-i(o, "style", B);
-i(o, "defaultProps", {
+  }]);
+  return RootButtonLink2;
+}(AbstractButton);
+_defineProperty(RootButtonLink, "displayName", "ButtonLink");
+_defineProperty(RootButtonLink, "enhance", Object.values(enhance));
+_defineProperty(RootButtonLink, "style", style);
+_defineProperty(RootButtonLink, "defaultProps", {
   use: "primary"
 });
-function k(t) {
-  var e = arguments[0], _, r = p;
-  return _ = a(t.styles), /* @__PURE__ */ l.createElement(r, _.cn("SText", g({}, c({
-    tag: "span"
-  }, e))));
+function Text(props) {
+  var _ref = arguments[0], _ref3;
+  var SText = Box;
+  return _ref3 = sstyled$1(props.styles), /* @__PURE__ */ React.createElement(SText, _ref3.cn("SText", _objectSpread({}, assignProps({
+    "tag": "span"
+  }, _ref))));
 }
-function C(t) {
-  var e = arguments[0], _, r = p;
-  return _ = a(t.styles), /* @__PURE__ */ l.createElement(r, _.cn("SAddon", g({}, c({
-    tag: "span"
-  }, e))));
+function Addon(props) {
+  var _ref2 = arguments[0], _ref4;
+  var SAddon = Box;
+  return _ref4 = sstyled$1(props.styles), /* @__PURE__ */ React.createElement(SAddon, _ref4.cn("SAddon", _objectSpread({}, assignProps({
+    "tag": "span"
+  }, _ref2))));
 }
-var $ = S(o, {
-  Text: k,
-  Addon: C
+var ButtonLink = createComponent(RootButtonLink, {
+  Text,
+  Addon
 });
 export {
-  $ as ButtonLink
+  ButtonLink
 };