@semcore/button 5.43.3 → 5.44.0-prerelease.0

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

@@ -12,7 +12,6 @@ SButton {
   text-align: center;
   vertical-align: middle;
   border: 1px solid transparent;
-  outline: 0;
   box-shadow: none;
   cursor: pointer;
   box-sizing: border-box;
@@ -21,7 +20,7 @@ SButton {
   touch-action: manipulation;
   -webkit-tap-highlight-color: transparent;
   font-weight: var(--intergalactic-medium, 500);
-  color: var(--intergalactic-text-secondary, #6c6e79);
+  color: var(--intergalactic-text-secondary, oklch(0.088 0.026 147.7 / 0.583));
   min-width: fit-content;
 
   &::-moz-focus-inner {
@@ -30,20 +29,13 @@ SButton {
   }
 
   &:active,
-  &:hover,
-  &:focus {
-    outline: 0;
+  &:hover {
     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);
+  opacity: var(--intergalactic-disabled-opacity, 0.4);
   cursor: default;
   pointer-events: none;
   box-shadow: none;
@@ -69,201 +61,201 @@ SButton[size='l'] {
 }
 
 SButton[theme='primary-info'] {
-  color: var(--intergalactic-text-primary-invert, #ffffff);
-  background-color: var(--intergalactic-control-primary-info, #008ff8);
+  color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
+  background-color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140));
 
   &:hover {
-    color: var(--intergalactic-text-primary-invert, #ffffff);
-    background-color: var(--intergalactic-control-primary-info-hover, #006dca);
+    color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
+    background-color: var(--intergalactic-control-primary-info-hover, oklch(0.32 0.007 140));
   }
 
   &:active,
   &[active] {
-    color: var(--intergalactic-text-primary-invert, #ffffff);
-    background-color: var(--intergalactic-control-primary-info-active, #044792);
+    color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
+    background-color: var(--intergalactic-control-primary-info-active, oklch(0 0 140));
   }
 }
 
 SButton[theme='primary-success'] {
-  color: var(--intergalactic-text-primary-invert, #ffffff);
-  background-color: var(--intergalactic-control-primary-success, #009f81);
+  color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
+  background-color: var(--intergalactic-control-primary-success, oklch(0.64 0.161 170));
 
   &:hover {
-    color: var(--intergalactic-text-primary-invert, #ffffff);
-    background-color: var(--intergalactic-control-primary-success-hover, #007c65);
+    color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
+    background-color: var(--intergalactic-control-primary-success-hover, oklch(0.6 0.155 170));
   }
 
   &:active,
   &[active] {
-    color: var(--intergalactic-text-primary-invert, #ffffff);
-    background-color: var(--intergalactic-control-primary-success-active, #055345);
+    color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
+    background-color: var(--intergalactic-control-primary-success-active, oklch(0.58 0.151 170));
   }
 }
 
 SButton[theme='primary-brand'] {
-  color: var(--intergalactic-text-primary-invert, #ffffff);
-  background-color: var(--intergalactic-control-primary-brand, #ff642d);
+  color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
+  background-color: var(--intergalactic-control-primary-brand, oklch(0.64 0.223 299.3));
 
   &:hover {
-    color: var(--intergalactic-text-primary-invert, #ffffff);
-    background-color: var(--intergalactic-control-primary-brand-hover, #c33909);
+    color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
+    background-color: var(--intergalactic-control-primary-brand-hover, oklch(0.6 0.244 297.8));
   }
 
   &:active,
   &[active] {
-    color: var(--intergalactic-text-primary-invert, #ffffff);
-    background-color: var(--intergalactic-control-primary-brand-active, #8b1500);
+    color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
+    background-color: var(--intergalactic-control-primary-brand-active, oklch(0.58 0.254 297.1));
   }
 }
 
 SButton[theme='primary-warning'] {
-  color: var(--intergalactic-text-primary-invert, #ffffff);
-  background-color: var(--intergalactic-control-primary-brand, #ff642d);
+  color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
+  background-color: var(--intergalactic-control-primary-brand, oklch(0.64 0.223 299.3));
 
   &:hover {
-    color: var(--intergalactic-text-primary-invert, #ffffff);
-    background-color: var(--intergalactic-control-primary-brand-hover, #c33909);
+    color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
+    background-color: var(--intergalactic-control-primary-brand-hover, oklch(0.6 0.244 297.8));
   }
 
   &:active,
   &[active] {
-    color: var(--intergalactic-text-primary-invert, #ffffff);
-    background-color: var(--intergalactic-control-primary-brand-active, #8b1500);
+    color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
+    background-color: var(--intergalactic-control-primary-brand-active, oklch(0.58 0.254 297.1));
   }
 }
 
 SButton[theme='primary-danger'] {
-  color: var(--intergalactic-text-primary-invert, #ffffff);
-  background-color: var(--intergalactic-control-primary-critical, #ff4953);
+  color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
+  background-color: var(--intergalactic-control-primary-critical, oklch(0.64 0.226 24.5));
 
   &:hover {
-    color: var(--intergalactic-text-primary-invert, #ffffff);
-    background-color: var(--intergalactic-control-primary-critical-hover, #d1002f);
+    color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
+    background-color: var(--intergalactic-control-primary-critical-hover, oklch(0.6 0.219 25.5));
   }
 
   &:active,
   &[active] {
-    color: var(--intergalactic-text-primary-invert, #ffffff);
-    background-color: var(--intergalactic-control-primary-critical-active, #8e0016);
+    color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
+    background-color: var(--intergalactic-control-primary-critical-active, oklch(0.58 0.215 26));
   }
 }
 
 SButton[theme='primary-invert'] {
-  color: var(--intergalactic-text-primary, #191b23);
-  background-color: var(--intergalactic-control-primary-invert, #ffffff);
+  color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
+  background-color: var(--intergalactic-control-primary-invert, oklch(1 0 0));
 
   &:hover {
-    color: var(--intergalactic-text-primary, #191b23);
-    background-color: var(--intergalactic-control-primary-invert-hover, #f4f5f9);
+    color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
+    background-color: var(--intergalactic-control-primary-invert-hover, oklch(0.96 0.001 180));
   }
 
   &:active,
   &[active] {
-    color: var(--intergalactic-text-primary, #191b23);
-    background-color: var(--intergalactic-control-primary-invert-active, #e0e1e9);
+    color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
+    background-color: var(--intergalactic-control-primary-invert-active, oklch(0.94 0.002 180));
   }
 }
 
 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));
+  color: var(--intergalactic-text-secondary, oklch(0.088 0.026 147.7 / 0.583));
+  border-color: var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161));
+  background-color: var(--intergalactic-control-secondary-neutral, oklch(0.177 0.033 175.6 / 0.028));
 
   &:hover {
     background-color: var(--intergalactic-control-secondary-neutral-hover,
-    rgba(138, 142, 155, 0.2));
-    color: var(--intergalactic-text-primary, #191b23);
+    oklch(0.176 0.033 175.6 / 0.056));
+    color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
   }
 
   &:active,
   &[active] {
     background-color: var(--intergalactic-control-secondary-neutral-active,
-    rgba(138, 142, 155, 0.3));
-    color: var(--intergalactic-text-primary, #191b23);
+    oklch(0.176 0.033 175.7 / 0.084));
+    color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
   }
 }
 
 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);
+  background-color: var(--intergalactic-control-secondary-info, oklch(0.41 0.258 264.2 / 0.031));
+  color: var(--intergalactic-text-link, oklch(0.53 0.214 263.4));
+  border-color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140));
 
   &:hover {
-    color: var(--intergalactic-text-link, #006dca);
-    background-color: var(--intergalactic-control-secondary-info-hover, rgba(0, 143, 248, 0.2));
+    color: var(--intergalactic-text-link, oklch(0.53 0.214 263.4));
+    background-color: var(--intergalactic-control-secondary-info-hover, oklch(0.407 0.258 264.2 / 0.062));
   }
 
   &:active,
   &[active] {
-    color: var(--intergalactic-text-link, #006dca);
-    background-color: var(--intergalactic-control-secondary-info-active, rgba(0, 143, 248, 0.3));
+    color: var(--intergalactic-text-link, oklch(0.53 0.214 263.4));
+    background-color: var(--intergalactic-control-secondary-info-active, oklch(0.405 0.257 264.2 / 0.093));
   }
 }
 
 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));
+  color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
+  border-color: var(--intergalactic-border-primary-invert, oklch(0.995 0.008 147.4 / 0.391));
+  background-color: var(--intergalactic-control-secondary-invert, oklch(0.969 0.057 140 / 0.118));
 
   &:hover {
-    color: var(--intergalactic-text-primary-invert, #ffffff);
-    background-color: var(--intergalactic-control-secondary-invert-hover, rgba(255, 255, 255, 0.1));
+    color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
+    background-color: var(--intergalactic-control-secondary-invert-hover, oklch(0.976 0.043 140 / 0.145));
   }
 
   &:active,
   &[active] {
-    color: var(--intergalactic-text-primary-invert, #ffffff);
+    color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
     background-color: var(--intergalactic-control-secondary-invert-active,
-    rgba(255, 255, 255, 0.3));
+    oklch(0.983 0.03 140 / 0.183));
   }
 }
 
 SButton[theme='tertiary-info'] {
-  color: var(--intergalactic-text-link, #006dca);
-  background-color: var(--intergalactic-control-tertiary-info, rgba(0, 143, 248, 0));
+  color: var(--intergalactic-text-link, oklch(0.53 0.214 263.4));
+  background-color: var(--intergalactic-control-tertiary-info, transparent);
 
   &:hover {
-    color: var(--intergalactic-text-link, #006dca);
-    background-color: var(--intergalactic-control-tertiary-info-hover, rgba(0, 143, 248, 0.2));
+    color: var(--intergalactic-text-link, oklch(0.53 0.214 263.4));
+    background-color: var(--intergalactic-control-tertiary-info-hover, oklch(0.407 0.258 264.2 / 0.062));
   }
 
   &:active,
   &[active] {
-    color: var(--intergalactic-text-link, #006dca);
-    background-color: var(--intergalactic-control-tertiary-info-active, rgba(0, 143, 248, 0.3));
+    color: var(--intergalactic-text-link, oklch(0.53 0.214 263.4));
+    background-color: var(--intergalactic-control-tertiary-info-active, oklch(0.405 0.257 264.2 / 0.093));
   }
 }
 
 SButton[theme='tertiary-muted'] {
-  color: var(--intergalactic-text-secondary, #6c6e79);
-  background-color: var(--intergalactic-control-tertiary-neutral, rgba(138, 142, 155, 0));
+  color: var(--intergalactic-text-secondary, oklch(0.088 0.026 147.7 / 0.583));
+  background-color: var(--intergalactic-control-tertiary-neutral, transparent);
 
   &:hover {
-    background-color: var(--intergalactic-control-tertiary-neutral-hover, rgba(138, 142, 155, 0.2));
-    color: var(--intergalactic-text-primary, #191b23);
+    background-color: var(--intergalactic-control-tertiary-neutral-hover, oklch(0.176 0.033 175.6 / 0.056));
+    color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
   }
 
   &:active,
   &[active] {
     background-color: var(--intergalactic-control-tertiary-neutral-active,
-    rgba(138, 142, 155, 0.3));
-    color: var(--intergalactic-text-primary, #191b23);
+    oklch(0.176 0.033 175.7 / 0.084));
+    color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
   }
 }
 
 SButton[theme='tertiary-invert'] {
-  color: var(--intergalactic-text-primary-invert, #ffffff);
-  background-color: var(--intergalactic-control-tertiary-invert, rgba(255, 255, 255, 0));
+  color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
+  background-color: var(--intergalactic-control-tertiary-invert, transparent);
 
   &:hover {
-    color: var(--intergalactic-text-primary-invert, #ffffff);
-    background-color: var(--intergalactic-control-tertiary-invert-hover, rgba(255, 255, 255, 0.1));
+    color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
+    background-color: var(--intergalactic-control-tertiary-invert-hover, oklch(0.976 0.043 140 / 0.145));
   }
 
   &:active,
   &[active] {
-    color: var(--intergalactic-text-primary-invert, #ffffff);
-    background-color: var(--intergalactic-control-tertiary-invert-active, rgba(255, 255, 255, 0.3));
+    color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
+    background-color: var(--intergalactic-control-tertiary-invert-active, oklch(0.983 0.03 140 / 0.183));
   }
 }
 
@@ -290,12 +282,12 @@ SButton[neighborLocation='left'] {
   position: relative;
 
   &:after {
-    background-color: var(--intergalactic-border-primary-invert, #ffffff);
+    background-color: var(--intergalactic-border-primary-invert, oklch(0.995 0.008 147.4 / 0.391));
   }
 
   &[theme='secondary-muted'] {
     &:after {
-      background-color: var(--intergalactic-border-primary, #c4c7cf);
+      background-color: var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161));
     }
   }
 }

package/lib/es6/component/ButtonLink/ButtonLink.js

@@ -1,88 +1,57 @@
 import _objectSpread from "@babel/runtime/helpers/objectSpread2";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
+import _callSuper from "@babel/runtime/helpers/callSuper";
 import _inherits from "@babel/runtime/helpers/inherits";
-import _createSuper from "@babel/runtime/helpers/createSuper";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import { sstyled as _sstyled } from "@semcore/utils/lib/core/index";
-import { assignProps as _assignProps2 } from "@semcore/core";
+import { sstyled as _sstyled } from "@semcore/core";
 import { assignProps as _assignProps } from "@semcore/core";
+import { createComponent, sstyled, Root, Component } from '@semcore/core';
+import Link from '@semcore/link';
 import React from 'react';
-import createComponent, { sstyled, Root } from '@semcore/core';
 /*!__reshadow-styles__:"./buttonLink.shadow.css"*/
-var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".___SButton_yt3bu_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_yt3bu_gg_:active,.___SButton_yt3bu_gg_:focus{outline:0;-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___SButton_yt3bu_gg_:hover{outline:0;-webkit-text-decoration:none;text-decoration:none}}.___SButton_yt3bu_gg_::-moz-focus-inner{border:0;padding:0}.___SButton_yt3bu_gg_.__active_yt3bu_gg_,.___SButton_yt3bu_gg_:active{color:var(--intergalactic-text-link-hover-active, #044792)}@media (hover:hover){.___SButton_yt3bu_gg_:hover{color:var(--intergalactic-text-link-hover-active, #044792)}}.___SButton_yt3bu_gg_.__active_yt3bu_gg_ .___SText_yt3bu_gg_,.___SButton_yt3bu_gg_:active .___SText_yt3bu_gg_{border-color:currentColor}@media (hover:hover){.___SButton_yt3bu_gg_:hover .___SText_yt3bu_gg_{border-color:currentColor}}.___SButton_yt3bu_gg_.__enableVisited_yt3bu_gg_:visited{color:var(--intergalactic-text-link-visited, #8649e1)}@media (hover:hover){.___SButton_yt3bu_gg_.__enableVisited_yt3bu_gg_:visited:hover{color:var(--intergalactic-text-link-visited, #8649e1)}}.___SButton_yt3bu_gg_ .___SText_yt3bu_gg_{border-bottom-width:1px;border-bottom-style:solid;border-color:transparent;transition:border-bottom-color .15s ease-in-out}.___SButton_yt3bu_gg_.__keyboardFocused_yt3bu_gg_{outline-color:var(--intergalactic-keyboard-focus-outline, rgba(0, 143, 248, 0.5));outline-style:solid;outline-width:3px}.___SButton_yt3bu_gg_.__disabled_yt3bu_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none}.___SButton_yt3bu_gg_._use_secondary_yt3bu_gg_{color:var(--intergalactic-text-hint, #6c6e79)}.___SButton_yt3bu_gg_._use_secondary_yt3bu_gg_.__active_yt3bu_gg_,.___SButton_yt3bu_gg_._use_secondary_yt3bu_gg_:active{color:var(--intergalactic-text-hint-hover-active, #484a54)}@media (hover:hover){.___SButton_yt3bu_gg_._use_secondary_yt3bu_gg_:hover{color:var(--intergalactic-text-hint-hover-active, #484a54)}}.___SButton_yt3bu_gg_._use_secondary_yt3bu_gg_ .___SText_yt3bu_gg_{border-bottom-width:1px;border-bottom-style:dashed;border-color:currentColor}.___SAddon_yt3bu_gg_,.___SInner_yt3bu_gg_{display:inline-flex;justify-content:center;align-items:center}.___SInner_yt3bu_gg_{height:100%;width:100%}.___SAddon_yt3bu_gg_{vertical-align:middle;pointer-events:none}.___SButton_yt3bu_gg_ .___SAddon_yt3bu_gg_:not(:only-child):first-child{margin-right:var(--intergalactic-spacing-1x, 4px)}.___SButton_yt3bu_gg_ .___SAddon_yt3bu_gg_:not(:only-child):last-child{margin-left:var(--intergalactic-spacing-1x, 4px)}.___SButton_yt3bu_gg_.__text-color_yt3bu_gg_{color:var(--text-color_yt3bu)}.___SButton_yt3bu_gg_.__text-color_yt3bu_gg_.__active_yt3bu_gg_,.___SButton_yt3bu_gg_.__text-color_yt3bu_gg_:active{color:var(--text-color_yt3bu);filter:brightness(.8)}@media (hover:hover){.___SButton_yt3bu_gg_.__text-color_yt3bu_gg_:hover{color:var(--text-color_yt3bu);filter:brightness(.8)}}.___SButton_yt3bu_gg_._size_100_yt3bu_gg_{font-size:var(--intergalactic-fs-100, 12px);line-height:var(--intergalactic-lh-100, 133%)}.___SButton_yt3bu_gg_._size_200_yt3bu_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%)}.___SButton_yt3bu_gg_._size_300_yt3bu_gg_{font-size:var(--intergalactic-fs-300, 16px);line-height:var(--intergalactic-lh-300, 150%)}.___SButton_yt3bu_gg_._size_400_yt3bu_gg_{font-size:var(--intergalactic-fs-400, 20px);line-height:var(--intergalactic-lh-400, 120%)}.___SButton_yt3bu_gg_._size_500_yt3bu_gg_{font-size:var(--intergalactic-fs-500, 24px);line-height:var(--intergalactic-lh-500, 117%)}.___SButton_yt3bu_gg_._size_600_yt3bu_gg_{font-size:var(--intergalactic-fs-600, 32px);line-height:var(--intergalactic-lh-600, 125%)}.___SButton_yt3bu_gg_._size_700_yt3bu_gg_{font-size:var(--intergalactic-fs-700, 36px);line-height:var(--intergalactic-lh-700, 110%)}.___SButton_yt3bu_gg_._size_800_yt3bu_gg_{font-size:var(--intergalactic-fs-800, 48px);line-height:var(--intergalactic-lh-800, 117%)}@media (prefers-reduced-motion){.___SButton_yt3bu_gg_,.___SText_yt3bu_gg_{transition:none}}", /*__inner_css_end__*/"yt3bu_gg_"),
+var style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/".___SButtonLink_wy7ce_gg_{border:0;font-family:inherit}.___SButtonLink_wy7ce_gg_._use_primary_wy7ce_gg_:not(.__color_wy7ce_gg_){color:var(--intergalactic-text-link, rgb(36, 93, 229))}.___SButtonLink_wy7ce_gg_._use_primary_wy7ce_gg_.__active_wy7ce_gg_:not(.__color_wy7ce_gg_),.___SButtonLink_wy7ce_gg_._use_primary_wy7ce_gg_:not(.__color_wy7ce_gg_):active{color:var(--intergalactic-text-link-hover-active, rgb(34, 88, 217))}@media (hover:hover){.___SButtonLink_wy7ce_gg_._use_primary_wy7ce_gg_:not(.__color_wy7ce_gg_):hover{color:var(--intergalactic-text-link-hover-active, rgb(34, 88, 217))}}.___SButtonLink_wy7ce_gg_._use_secondary_wy7ce_gg_:not(.__color_wy7ce_gg_){color:var(--intergalactic-text-hint, rgba(0, 3, 0, 0.583))}@supports (color:color(display-p3 0 0 0%)){.___SButtonLink_wy7ce_gg_._use_secondary_wy7ce_gg_:not(.__color_wy7ce_gg_){color:var(--intergalactic-text-hint, rgba(0, 3, 0, 0.583))}@media (color-gamut:p3){.___SButtonLink_wy7ce_gg_._use_secondary_wy7ce_gg_:not(.__color_wy7ce_gg_){color:var(--intergalactic-text-hint, color(display-p3 0.00228 0.01289 0.00252 / 0.583))}}}.___SButtonLink_wy7ce_gg_._use_secondary_wy7ce_gg_.__active_wy7ce_gg_:not(.__color_wy7ce_gg_),.___SButtonLink_wy7ce_gg_._use_secondary_wy7ce_gg_:not(.__color_wy7ce_gg_):active{color:var(--intergalactic-text-hint-hover-active, rgba(0, 3, 0, 0.605))}@media (hover:hover){.___SButtonLink_wy7ce_gg_._use_secondary_wy7ce_gg_:not(.__color_wy7ce_gg_):hover{color:var(--intergalactic-text-hint-hover-active, rgba(0, 3, 0, 0.605))}}.___SButtonLink_wy7ce_gg_._use_secondary_wy7ce_gg_ .___SText_wy7ce_gg_{text-decoration-style:dashed;text-decoration-color:currentColor}", /*__inner_css_end__*/"wy7ce_gg_"),
 /*__reshadow_css_end__*/
 {
-  "__SButton": "___SButton_yt3bu_gg_",
-  "_keyboardFocused": "__keyboardFocused_yt3bu_gg_",
-  "_disabled": "__disabled_yt3bu_gg_",
-  "__SInner": "___SInner_yt3bu_gg_",
-  "__SAddon": "___SAddon_yt3bu_gg_",
-  "_size_100": "_size_100_yt3bu_gg_",
-  "_size_200": "_size_200_yt3bu_gg_",
-  "_size_300": "_size_300_yt3bu_gg_",
-  "_size_400": "_size_400_yt3bu_gg_",
-  "_size_500": "_size_500_yt3bu_gg_",
-  "_size_600": "_size_600_yt3bu_gg_",
-  "_size_700": "_size_700_yt3bu_gg_",
-  "_size_800": "_size_800_yt3bu_gg_",
-  "__SText": "___SText_yt3bu_gg_",
-  "_active": "__active_yt3bu_gg_",
-  "_enableVisited": "__enableVisited_yt3bu_gg_",
-  "_use_secondary": "_use_secondary_yt3bu_gg_",
-  "_text-color": "__text-color_yt3bu_gg_",
-  "--text-color": "--text-color_yt3bu"
+  "__SButtonLink": "___SButtonLink_wy7ce_gg_",
+  "_use_secondary": "_use_secondary_wy7ce_gg_",
+  "__SText": "___SText_wy7ce_gg_",
+  "_use_primary": "_use_primary_wy7ce_gg_",
+  "_color": "__color_wy7ce_gg_",
+  "_active": "__active_wy7ce_gg_"
 });
-import keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
-import { Box } from '@semcore/flex-box';
-import { AbstractButton } from '../AbstractButton/AbstractButton';
-import resolveColorEnhance from '@semcore/utils/lib/enhances/resolveColorEnhance';
-var enhance = {
-  keyboardFocused: keyboardFocusEnhance(),
-  resolveColor: resolveColorEnhance()
-};
-var RootButtonLink = /*#__PURE__*/function (_AbstractButton) {
-  _inherits(RootButtonLink, _AbstractButton);
-  var _super = _createSuper(RootButtonLink);
+var RootButtonLink = /*#__PURE__*/function (_Component) {
   function RootButtonLink() {
     _classCallCheck(this, RootButtonLink);
-    return _super.apply(this, arguments);
+    return _callSuper(this, RootButtonLink, arguments);
   }
-  _createClass(RootButtonLink, [{
-    key: "getTextColor",
-    value: function getTextColor() {
-      var _ref5 = this.asProps,
-        color = _ref5.color,
-        resolveColor = _ref5.resolveColor;
-      return resolveColor(color);
+  _inherits(RootButtonLink, _Component);
+  return _createClass(RootButtonLink, [{
+    key: "render",
+    value: function render() {
+      var _ref = this.asProps,
+        _ref2;
+      var SButtonLink = Link;
+      var disabled = this.asProps.disabled;
+      return _ref2 = sstyled(style), /*#__PURE__*/React.createElement(SButtonLink, _ref2.cn("SButtonLink", _objectSpread({}, _assignProps({
+        "tag": 'button',
+        "type": 'button',
+        "use:disabled": disabled,
+        "use:tabIndex": 0
+      }, _ref))));
     }
   }]);
-  return RootButtonLink;
-}(AbstractButton);
+}(Component);
 _defineProperty(RootButtonLink, "displayName", 'ButtonLink');
-_defineProperty(RootButtonLink, "enhance", Object.values(enhance));
 _defineProperty(RootButtonLink, "style", style);
 _defineProperty(RootButtonLink, "defaultProps", {
-  use: 'primary'
+  use: 'primary',
+  size: 200
 });
-function Text(props) {
-  var _ref = arguments[0],
-    _ref3;
-  var SText = Box;
-  return _ref3 = sstyled(props.styles), /*#__PURE__*/React.createElement(SText, _ref3.cn("SText", _objectSpread({}, _assignProps({
-    "tag": 'span'
-  }, _ref))));
-}
-function Addon(props) {
-  var _ref2 = arguments[0],
-    _ref4;
-  var SAddon = Box;
-  return _ref4 = sstyled(props.styles), /*#__PURE__*/React.createElement(SAddon, _ref4.cn("SAddon", _objectSpread({}, _assignProps2({
-    "tag": 'span'
-  }, _ref2))));
-}
 export var ButtonLink = createComponent(RootButtonLink, {
-  Text: Text,
-  Addon: Addon
+  Text: Link.Text,
+  Addon: Link.Addon
+}, {
+  parent: Link
 });
 //# sourceMappingURL=ButtonLink.js.map

package/lib/es6/component/ButtonLink/ButtonLink.js.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonLink.js","names":["React","createComponent","sstyled","Root","style","_sstyled","insert","keyboardFocusEnhance","Box","AbstractButton","resolveColorEnhance","enhance","keyboardFocused","resolveColor","RootButtonLink","_AbstractButton","_inherits","_super","_createSuper","_classCallCheck","apply","arguments","_createClass","key","value","getTextColor","_ref5","asProps","color","_defineProperty","Object","values","use","Text","props","_ref","arguments[0]","_ref3","SText","styles","createElement","cn","_objectSpread","_assignProps","Addon","_ref2","_ref4","SAddon","_assignProps2","ButtonLink"],"sources":["../../../../src/component/ButtonLink/ButtonLink.tsx"],"sourcesContent":["import React from 'react';\nimport createComponent, { sstyled, Root } from '@semcore/core';\nimport style from './buttonLink.shadow.css';\nimport keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\nimport { Box } from '@semcore/flex-box';\nimport { AbstractButton } from '../AbstractButton/AbstractButton';\nimport resolveColorEnhance from '@semcore/utils/lib/enhances/resolveColorEnhance';\nimport { ButtonLinkAddonProps, ButtonLinkComponent, ButtonLinkTextProps } from './ButtonLink.type';\n\nconst enhance = {\n  keyboardFocused: keyboardFocusEnhance(),\n  resolveColor: resolveColorEnhance(),\n};\n\nclass RootButtonLink extends AbstractButton {\n  static displayName = 'ButtonLink';\n  static enhance = Object.values(enhance);\n  static style = style;\n  static defaultProps = {\n    use: 'primary',\n  };\n\n  protected getTextColor(): string | undefined {\n    const { color, resolveColor } = this.asProps as any;\n    return resolveColor(color);\n  }\n}\n\nfunction Text(props: ButtonLinkTextProps) {\n  const SText = Root;\n  return sstyled(props.styles)(<SText render={Box} tag='span' />);\n}\n\nfunction Addon(props: ButtonLinkAddonProps) {\n  const SAddon = Root;\n  return sstyled(props.styles)(<SAddon render={Box} tag='span' />);\n}\n\nexport const ButtonLink = createComponent(RootButtonLink, {\n  Text,\n  Addon,\n}) as ButtonLinkComponent;\n"],"mappings":";;;;;;;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,eAAe,IAAIC,OAAO,EAAEC,IAAI,QAAQ,eAAe;AAAC;AAAA,IAAAC,KAAA,+BAAAC,QAAA,CAAAC,MAAA;AAAA;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;AAE/D,OAAOC,oBAAoB,MAAM,kDAAkD;AACnF,SAASC,GAAG,QAAQ,mBAAmB;AACvC,SAASC,cAAc,QAAQ,kCAAkC;AACjE,OAAOC,mBAAmB,MAAM,iDAAiD;AAGjF,IAAMC,OAAO,GAAG;EACdC,eAAe,EAAEL,oBAAoB,EAAE;EACvCM,YAAY,EAAEH,mBAAmB;AACnC,CAAC;AAAC,IAEII,cAAc,0BAAAC,eAAA;EAAAC,SAAA,CAAAF,cAAA,EAAAC,eAAA;EAAA,IAAAE,MAAA,GAAAC,YAAA,CAAAJ,cAAA;EAAA,SAAAA,eAAA;IAAAK,eAAA,OAAAL,cAAA;IAAA,OAAAG,MAAA,CAAAG,KAAA,OAAAC,SAAA;EAAA;EAAAC,YAAA,CAAAR,cAAA;IAAAS,GAAA;IAAAC,KAAA,EAQlB,SAAAC,aAAA,EAA6C;MAC3C,IAAAC,KAAA,GAAgC,IAAI,CAACC,OAAO;QAApCC,KAAK,GAAAF,KAAA,CAALE,KAAK;QAAEf,YAAY,GAAAa,KAAA,CAAZb,YAAY;MAC3B,OAAOA,YAAY,CAACe,KAAK,CAAC;IAC5B;EAAC;EAAA,OAAAd,cAAA;AAAA,EAX0BL,cAAc;AAAAoB,eAAA,CAArCf,cAAc,iBACG,YAAY;AAAAe,eAAA,CAD7Bf,cAAc,aAEDgB,MAAM,CAACC,MAAM,CAACpB,OAAO,CAAC;AAAAkB,eAAA,CAFnCf,cAAc,WAGHV,KAAK;AAAAyB,eAAA,CAHhBf,cAAc,kBAII;EACpBkB,GAAG,EAAE;AACP,CAAC;AAQH,SAASC,IAAIA,CAACC,KAA0B,EAAE;EAAA,IAAAC,IAAA,GAAAC,YAAA;IAAAC,KAAA;EACxC,IAAMC,KAAK,GACiC9B,GAAG;EAA/C,OAAA6B,KAAA,GAAOnC,OAAO,CAACgC,KAAK,CAACK,MAAM,CAAC,eAACvC,KAAA,CAAAwC,aAAA,CAACF,KAAK,EAAAD,KAAA,CAAAI,EAAA,UAAAC,aAAA,KAAAC,YAAA;IAAA,OAAkB;EAAM,GAAAR,IAAA,IAAG;AAChE;AAEA,SAASS,KAAKA,CAACV,KAA2B,EAAE;EAAA,IAAAW,KAAA,GAAAT,YAAA;IAAAU,KAAA;EAC1C,IAAMC,MAAM,GACiCvC,GAAG;EAAhD,OAAAsC,KAAA,GAAO5C,OAAO,CAACgC,KAAK,CAACK,MAAM,CAAC,eAACvC,KAAA,CAAAwC,aAAA,CAACO,MAAM,EAAAD,KAAA,CAAAL,EAAA,WAAAC,aAAA,KAAAM,aAAA;IAAA,OAAkB;EAAM,GAAAH,KAAA,IAAG;AACjE;AAEA,OAAO,IAAMI,UAAU,GAAGhD,eAAe,CAACa,cAAc,EAAE;EACxDmB,IAAI,EAAJA,IAAI;EACJW,KAAK,EAALA;AACF,CAAC,CAAwB"}
+{"version":3,"file":"ButtonLink.js","names":["createComponent","sstyled","Root","Component","Link","React","style","_sstyled","insert","RootButtonLink","_Component","_classCallCheck","_callSuper","arguments","_inherits","_createClass","key","value","render","_ref","asProps","_ref2","SButtonLink","disabled","createElement","cn","_objectSpread","_assignProps","_defineProperty","use","size","ButtonLink","Text","Addon","parent"],"sources":["../../../../src/component/ButtonLink/ButtonLink.tsx"],"sourcesContent":["import { createComponent, sstyled, Root, Component } from '@semcore/core';\nimport Link from '@semcore/link';\nimport React from 'react';\n\nimport style from './buttonLink.shadow.css';\nimport type { ButtonLinkComponent, ButtonLinkProps } from './ButtonLink.type';\n\nclass RootButtonLink extends Component<ButtonLinkProps> {\n  static displayName = 'ButtonLink';\n  static style = style;\n  static defaultProps = {\n    use: 'primary',\n    size: 200,\n  };\n\n  render(): React.ReactNode {\n    const SButtonLink = Root;\n    const { disabled } = this.asProps;\n\n    return sstyled(style)(\n      <SButtonLink\n        render={Link}\n        tag='button'\n        type='button'\n        use:disabled={disabled}\n        use:tabIndex={0}\n      />,\n    );\n  }\n}\n\nexport const ButtonLink = createComponent(RootButtonLink, {\n  Text: Link.Text,\n  Addon: Link.Addon,\n}, {\n  parent: Link,\n}) as ButtonLinkComponent;\n"],"mappings":";;;;;;;;AAAA,SAASA,eAAe,EAAEC,OAAO,EAAEC,IAAI,EAAEC,SAAS,QAAQ,eAAe;AACzE,OAAOC,IAAI,MAAM,eAAe;AAChC,OAAOC,KAAK,MAAM,OAAO;AAAC;AAAA,IAAAC,KAAA,8BAAAC,QAAA,CAAAC,MAAA;AAAA;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;AAAA,IAKpBC,cAAc,0BAAAC,UAAA;EAAA,SAAAD,eAAA;IAAAE,eAAA,OAAAF,cAAA;IAAA,OAAAG,UAAA,OAAAH,cAAA,EAAAI,SAAA;EAAA;EAAAC,SAAA,CAAAL,cAAA,EAAAC,UAAA;EAAA,OAAAK,YAAA,CAAAN,cAAA;IAAAO,GAAA;IAAAC,KAAA,EAQlB,SAAAC,MAAMA,CAAA,EAAoB;MAAA,IAAAC,IAAA,QAAAC,OAAA;QAAAC,KAAA;MACxB,IAAMC,WAAW,GAKLlB,IAAI;MAJhB,IAAQmB,QAAQ,GAAK,IAAI,CAACH,OAAO,CAAzBG,QAAQ;MAEhB,OAAAF,KAAA,GAAOpB,OAAO,CAACK,KAAK,CAAC,eACnBD,KAAA,CAAAmB,aAAA,CAACF,WAAW,EAAAD,KAAA,CAAAI,EAAA,gBAAAC,aAAA,KAAAC,YAAA;QAAA,OAEN,QAAQ;QAAA,QACP,QAAQ;QAAA,gBACCJ,QAAQ;QAAA,gBACR;MAAC,GAAAJ,IAAA,GAChB,CAAC;IAEN;EAAC;AAAA,EArB0BhB,SAAS;AAAAyB,eAAA,CAAhCnB,cAAc,iBACG,YAAY;AAAAmB,eAAA,CAD7BnB,cAAc,WAEHH,KAAK;AAAAsB,eAAA,CAFhBnB,cAAc,kBAGI;EACpBoB,GAAG,EAAE,SAAS;EACdC,IAAI,EAAE;AACR,CAAC;AAkBH,OAAO,IAAMC,UAAU,GAAG/B,eAAe,CAACS,cAAc,EAAE;EACxDuB,IAAI,EAAE5B,IAAI,CAAC4B,IAAI;EACfC,KAAK,EAAE7B,IAAI,CAAC6B;AACd,CAAC,EAAE;EACDC,MAAM,EAAE9B;AACV,CAAC,CAAwB","ignoreList":[]}

package/lib/es6/component/ButtonLink/ButtonLink.type.js.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonLink.type.js","names":[],"sources":["../../../../src/component/ButtonLink/ButtonLink.type.ts"],"sourcesContent":["import { UnknownProperties, Intergalactic } from '@semcore/core';\n\nimport {\n  AbstractButtonAddonProps,\n  AbstractButtonContext,\n  AbstractButtonTextProps,\n  AbstractButtonProps,\n} from '../AbstractButton/AbstractButton.type';\n\n/**\n *  Button link size\n * @default m\n */\nexport type ButtonLinkSize = 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800;\n/**\n *  Button link type\n * @default primary\n */\ntype Use = 'primary' | 'secondary';\n\nexport type ButtonLinkProps = AbstractButtonProps<ButtonLinkSize, Use, never>;\n\nexport type ButtonLinkTextProps = AbstractButtonTextProps<ButtonLinkSize>;\n\nexport type ButtonLinkAddonProps = AbstractButtonAddonProps<ButtonLinkSize>;\n\nexport type ButtonLinkContext = AbstractButtonContext;\n\nexport type ButtonLinkChildren = {\n  Text: Intergalactic.Component<'span', ButtonLinkTextProps>;\n  Addon: Intergalactic.Component<'span', ButtonLinkAddonProps>;\n};\n\nexport type ButtonLinkComponent = Intergalactic.Component<\n  'button',\n  ButtonLinkProps,\n  ButtonLinkContext\n> & {\n  Text: Intergalactic.Component<'span', ButtonLinkTextProps>;\n  Addon: Intergalactic.Component<'span', ButtonLinkAddonProps>;\n};\n"],"mappings":""}
+{"version":3,"file":"ButtonLink.type.js","names":[],"sources":["../../../../src/component/ButtonLink/ButtonLink.type.ts"],"sourcesContent":["import type { BoxProps } from '@semcore/base-components';\nimport type { Intergalactic } from '@semcore/core';\nimport type { LinkProps } from '@semcore/link';\nimport type { NSText } from '@semcore/typography';\n\nimport type { ButtonContext } from '../Button/Button.type';\n\nexport type ButtonLinkProps = Intergalactic.InternalTypings.EfficientOmit<LinkProps, 'enableVisited'> & {\n  /**\n   *  Button link type\n   * @default primary\n   */\n  use?: 'primary' | 'secondary';\n};\n\nexport type ButtonLinkTextProps = NSText.Props;\n\nexport type ButtonLinkAddonProps = BoxProps;\n\nexport type ButtonLinkChildren = {\n  Text: Intergalactic.Component<'span', ButtonLinkTextProps>;\n  Addon: Intergalactic.Component<'span', ButtonLinkAddonProps>;\n};\n\nexport type ButtonLinkComponent = Intergalactic.Component<\n  'button',\n  ButtonLinkProps,\n  ButtonContext\n> & ButtonLinkChildren;\n"],"mappings":"","ignoreList":[]}