@semcore/typography 5.53.2 → 16.0.0-prerelease.0

package/lib/esm/style/text.shadow.css

@@ -1,21 +1,342 @@
 SText {
   padding: 0;
   margin: 0;
+
+  & abbr {
+    color: var(--intergalactic-text-secondary, #6c6e79);
+    text-decoration: underline dashed var(--intergalactic-text-secondary, #6c6e79);
+
+    &:active,
+    &:hover,
+    &:focus {
+      outline: none;
+      color: var(--intergalactic-text-hint-hover-active, #484a54);
+      text-decoration: underline dashed var(--intergalactic-text-hint-hover-active, #484a54);
+    }
+  }
+
+  & a {
+    display: inline;
+    background: none;
+    outline: none;
+    text-decoration: none;
+    color: var(--intergalactic-text-link, #006dca);
+    border-bottom-width: 1px;
+    border-bottom-style: solid;
+    border-color: transparent;
+
+    &:active,
+    &:hover {
+      outline: none;
+      text-decoration: none;
+      color: var(--intergalactic-text-link-hover-active, #044792);
+      border-color: var(--intergalactic-text-link-hover-active, #044792);
+    }
+
+    &:focus {
+      outline-color: var(--intergalactic-keyboard-focus-outline, rgba(0, 143, 248, 0.5));
+      outline-style: solid;
+      outline-width: 3px;
+    }
+  }
+
+  & code,
+  & pre {
+    font-family: Consolas, 'Roboto Mono', Menlo, Courier, monospace;
+  }
+
+  & blockquote {
+    position: relative;
+    /* disable-tokens-validator */
+    padding-left: 51px;
+    font-size: var(--intergalactic-fs-400, 20px);
+    line-height: var(--intergalactic-lh-400, 120%);
+    font-style: italic;
+
+    &:before {
+      content: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNyIgaGVpZ2h0PSIxOSIgdmlld0JveD0iMCAwIDI3IDE5IiBmaWxsPSJub25lIj4KPHBhdGggZD0iTTguODI0MjIgMC45NDcyNjZWMi4zMDg1OUM2Ljg3NjMgMy4zMjY4MiA1LjQ4MTc3IDQuMzg5MzIgNC42NDA2MiA1LjQ5NjA5QzMuNzk5NDggNi42MDI4NiAzLjM3ODkxIDcuODA5MjQgMy4zNzg5MSA5LjExNTIzQzMuMzc4OTEgOS44ODk5NyAzLjQ4OTU4IDEwLjQyMTIgMy43MTA5NCAxMC43MDlDMy45MTAxNiAxMS4wMTg5IDQuMTUzNjUgMTEuMTczOCA0LjQ0MTQxIDExLjE3MzhDNC43MjkxNyAxMS4xNzM4IDUuMTE2NTQgMTEuMDk2NCA1LjYwMzUyIDEwLjk0MTRDNi4wOTA0OSAxMC43NjQzIDYuNTMzMiAxMC42NzU4IDYuOTMxNjQgMTAuNjc1OEM3LjgzOTE5IDEwLjY3NTggOC42MjUgMTEuMDE4OSA5LjI4OTA2IDExLjcwNTFDOS45NzUyNiAxMi4zNjkxIDEwLjMxODQgMTMuMTg4MiAxMC4zMTg0IDE0LjE2MjFDMTAuMzE4NCAxNS4yMjQ2IDkuOTA4ODUgMTYuMTQzMiA5LjA4OTg0IDE2LjkxOEM4LjI3MDgzIDE3LjY3MDYgNy4yNTI2IDE4LjA0NjkgNi4wMzUxNiAxOC4wNDY5QzQuNTUyMDggMTguMDQ2OSAzLjIxMjg5IDE3LjQwNDkgMi4wMTc1OCAxNi4xMjExQzAuODIyMjY2IDE0LjgzNzIgMC4yMjQ2MDkgMTMuMjU0NiAwLjIyNDYwOSAxMS4zNzNDMC4yMjQ2MDkgOS4xNTk1MSAwLjk1NTA3OCA3LjEwMDkxIDIuNDE2MDIgNS4xOTcyN0MzLjg5OTA5IDMuMjcxNDggNi4wMzUxNiAxLjg1NDgyIDguODI0MjIgMC45NDcyNjZaTTI0LjY2MjEgMS4wNDY4OFYyLjMwODU5QzIyLjQyNjQgMy41OTI0NSAyMC45NTQ0IDQuNzQzNDkgMjAuMjQ2MSA1Ljc2MTcyQzE5LjUzNzggNi43Nzk5NSAxOS4xODM2IDcuOTc1MjYgMTkuMTgzNiA5LjM0NzY2QzE5LjE4MzYgOS45Njc0NSAxOS4zMDUzIDEwLjQzMjMgMTkuNTQ4OCAxMC43NDIyQzE5Ljc5MjMgMTEuMDUyMSAyMC4wNDY5IDExLjIwNyAyMC4zMTI1IDExLjIwN0MyMC41NTYgMTEuMjA3IDIwLjkyMTIgMTEuMTE4NSAyMS40MDgyIDEwLjk0MTRDMjEuODk1MiAxMC43NjQzIDIyLjM4MjIgMTAuNjc1OCAyMi44NjkxIDEwLjY3NThDMjMuNzc2NyAxMC42NzU4IDI0LjU2MjUgMTEuMDA3OCAyNS4yMjY2IDExLjY3MTlDMjUuOTEyOCAxMi4zMTM4IDI2LjI1NTkgMTMuMTEwNyAyNi4yNTU5IDE0LjA2MjVDMjYuMjU1OSAxNS4xNDcxIDI1LjgyNDIgMTYuMDg3OSAyNC45NjA5IDE2Ljg4NDhDMjQuMTE5OCAxNy42ODE2IDIzLjA3OTQgMTguMDgwMSAyMS44Mzk4IDE4LjA4MDFDMjAuMzc4OSAxOC4wODAxIDE5LjA2MTggMTcuNDQ5MiAxNy44ODg3IDE2LjE4NzVDMTYuNzE1NSAxNC45MjU4IDE2LjEyODkgMTMuMzU0MiAxNi4xMjg5IDExLjQ3MjdDMTYuMTI4OSA5LjE0ODQ0IDE2Ljg3MDQgNy4wMzQ1MSAxOC4zNTM1IDUuMTMwODZDMTkuODM2NiAzLjIwNTA4IDIxLjkzOTUgMS44NDM3NSAyNC42NjIxIDEuMDQ2ODhaIiBmaWxsPSIjQTlBQkI2Ii8+Cjwvc3ZnPg==);
+      display: inline-block;
+      position: absolute;
+      left: 0;
+      color: var(--intergalactic-icon-secondary-neutral, #a9abb6);
+      font-family: Georgia, Times, 'Times New Roman', serif;
+    }
+
+    & cite {
+      display: block;
+      font-style: normal;
+      margin-top: var(--intergalactic-spacing-4x, 16px);
+      color: var(--intergalactic-text-secondary, #6c6e79);
+      font-size: var(--intergalactic-fs-300, 16px);
+      line-height: var(--intergalactic-lh-300, 150%);
+    }
+  }
+
+  & ol:not(ol[start], ol[reversed], ol[type]),
+  & ul:not(ul[start], ul[reversed], ul[type]) {
+    margin: var(--intergalactic-spacing-2x, 8px) 0;
+    padding: 0;
+    list-style: none;
+    position: relative;
+
+    & li:not(SText) {
+      &:before {
+        position: absolute;
+        left: 0;
+        color: var(--intergalactic-text-secondary, #6c6e79);
+      }
+    }
+
+    & li:not(SText)+li:not(SText) {
+      margin: var(--intergalactic-spacing-2x, 8px) 0 0 0;
+    }
+  }
+
+  & ol:not(ol[start], ol[reversed], ol[type]) {
+    counter-reset: item 0;
+
+    & li:not(SText):before {
+      counter-increment: item;
+      content: counters(item, '.');
+    }
+  }
+
+  & ul:not(ul[start], ul[reversed], ul[type]) li:not(SText):before {
+    content: '';
+    background-color: var(--intergalactic-icon-primary-neutral, #6c6e79);
+  }
+
+  & h1 {
+    font-size: var(--intergalactic-fs-800, 48px);
+    line-height: var(--intergalactic-lh-800, 117%);
+    font-weight: var(--intergalactic-semi-bold, 600);
+    margin: 0 0 var(--intergalactic-spacing-6x, 24px) 0;
+
+    &:only-child {
+      margin-bottom: 0;
+    }
+  }
+
+  & h2 {
+    font-size: var(--intergalactic-fs-700, 36px);
+    line-height: var(--intergalactic-lh-700, 110%);
+    font-weight: var(--intergalactic-semi-bold, 600);
+    margin: 0 0 var(--intergalactic-spacing-4x, 16px) 0;
+
+    &:only-child {
+      margin-bottom: 0;
+    }
+  }
+
+  & h3 {
+    font-size: var(--intergalactic-fs-600, 32px);
+    line-height: var(--intergalactic-lh-600, 125%);
+    font-weight: var(--intergalactic-semi-bold, 600);
+    margin: 0 0 var(--intergalactic-spacing-4x, 16px) 0;
+
+    &:only-child {
+      margin-bottom: 0;
+    }
+  }
+
+  & h4 {
+    font-size: var(--intergalactic-fs-500, 24px);
+    line-height: var(--intergalactic-lh-500, 117%);
+    font-weight: var(--intergalactic-semi-bold, 600);
+    margin: 0 0 var(--intergalactic-spacing-3x, 12px) 0;
+
+    &:only-child {
+      margin-bottom: 0;
+    }
+  }
+
+  & h5 {
+    font-size: var(--intergalactic-fs-400, 20px);
+    line-height: var(--intergalactic-lh-400, 120%);
+    font-weight: var(--intergalactic-semi-bold, 600);
+    margin: 0 0 var(--intergalactic-spacing-2x, 8px) 0;
+
+    &:only-child {
+      margin-bottom: 0;
+    }
+  }
+
+  & h6 {
+    font-size: var(--intergalactic-fs-300, 16px);
+    line-height: var(--intergalactic-lh-300, 150%);
+    font-weight: var(--intergalactic-bold, 700);
+    margin: 0 0 var(--intergalactic-spacing-1x, 4px) 0;
+
+    &:only-child {
+      margin-bottom: 0;
+    }
+  }
+
+  & h1,
+  & h2,
+  & h3,
+  & h4,
+  & h5,
+  & h6 {
+    & small {
+      color: var(--intergalactic-text-secondary, #6c6e79);
+      font-weight: 300;
+      font-size: 100%;
+    }
+  }
+
+  & p,
+  & li {
+    font-size: var(--intergalactic-fs-200, 14px);
+    line-height: var(--intergalactic-lh-200, 142%);
+  }
+
+  & p {
+    margin: 0 0 var(--intergalactic-spacing-5x, 20px) 0;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  & li {
+    padding-left: calc(var(--intergalactic-spacing-4x, 16px) + var(--intergalactic-spacing-05x, 2px));
+  }
+
+  & ol ol li {
+    padding-left: calc(var(--intergalactic-spacing-6x, 24px) + var(--intergalactic-spacing-05x, 2px));
+  }
+
+  & ol ol ol li {
+    padding-left: calc(var(--intergalactic-spacing-8x, 32px) + var(--intergalactic-spacing-1x, 4px) + var(--intergalactic-spacing-05x, 2px));
+  }
+
+  & ul li:before {
+    width: 4px;
+    height: 4px;
+    border-radius: 50%;
+    /* disable-tokens-validator */
+    margin-top: calc(var(--intergalactic-spacing-2x, 8px) - 1px);
+    margin-left: var(--intergalactic-spacing-05x, 2px);
+  }
 }
 
 SText[size='100'] {
   font-size: var(--intergalactic-fs-100, 12px);
   line-height: var(--intergalactic-lh-100, 133%);
+
+  & p,
+  & li {
+    font-size: var(--intergalactic-fs-100, 12px);
+    line-height: var(--intergalactic-lh-100, 133%);
+  }
+
+  & p {
+    margin: 0 0 calc(var(--intergalactic-spacing-4x, 16px) + var(--intergalactic-spacing-05x, 2px)) 0;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  & li {
+    padding-left: calc(var(--intergalactic-spacing-4x, 16px) + var(--intergalactic-spacing-05x, 2px));
+  }
+
+  & ol ol li {
+    padding-left: calc(var(--intergalactic-spacing-6x, 24px) + var(--intergalactic-spacing-05x, 2px));
+  }
+
+  & ol ol ol li {
+    padding-left: calc(var(--intergalactic-spacing-8x, 32px) + var(--intergalactic-spacing-1x, 4px) + var(--intergalactic-spacing-05x, 2px));
+  }
+
+  & ul li:before {
+    width: 3px;
+    height: 3px;
+    border-radius: 50%;
+    margin-top: var(--intergalactic-spacing-2x, 8px);
+    margin-left: var(--intergalactic-spacing-05x, 2px);
+  }
 }
 
 SText[size='200'] {
   font-size: var(--intergalactic-fs-200, 14px);
   line-height: var(--intergalactic-lh-200, 142%);
+
+  & p,
+  & li {
+    font-size: var(--intergalactic-fs-200, 14px);
+    line-height: var(--intergalactic-lh-200, 142%);
+  }
+
+  & p {
+    margin: 0 0 var(--intergalactic-spacing-5x, 20px) 0;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  & li {
+    padding-left: calc(var(--intergalactic-spacing-4x, 16px) + var(--intergalactic-spacing-05x, 2px));
+  }
+
+  & ol ol li {
+    padding-left: calc(var(--intergalactic-spacing-6x, 24px) + var(--intergalactic-spacing-05x, 2px));
+  }
+
+  & ol ol ol li {
+    padding-left: calc(var(--intergalactic-spacing-8x, 32px) + var(--intergalactic-spacing-1x, 4px) + var(--intergalactic-spacing-05x, 2px));
+  }
+
+  & ul li:before {
+    width: 4px;
+    height: 4px;
+    border-radius: 50%;
+    /* disable-tokens-validator */
+    margin-top: calc(var(--intergalactic-spacing-2x, 8px) - 1px);
+    margin-left: var(--intergalactic-spacing-05x, 2px);
+  }
 }
 
 SText[size='300'] {
   font-size: var(--intergalactic-fs-300, 16px);
   line-height: var(--intergalactic-lh-300, 150%);
+
+  & p,
+  & li {
+    font-size: var(--intergalactic-fs-300, 16px);
+    line-height: var(--intergalactic-lh-300, 150%);
+  }
+
+  & p {
+    margin: 0 0 var(--intergalactic-spacing-6x, 24px) 0;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  & li {
+    padding-left: calc(var(--intergalactic-spacing-4x, 16px) + var(--intergalactic-spacing-05x, 2px));
+  }
+
+  & ol ol li {
+    padding-left: calc(var(--intergalactic-spacing-6x, 24px) + var(--intergalactic-spacing-05x, 2px));
+  }
+
+  & ol ol ol li {
+    padding-left: calc(var(--intergalactic-spacing-8x, 32px) + var(--intergalactic-spacing-1x, 4px) + var(--intergalactic-spacing-05x, 2px));
+  }
+
+  & ul li:before {
+    width: 5px;
+    height: 5px;
+    border-radius: 50%;
+    margin-top: calc(var(--intergalactic-spacing-2x, 8px) + var(--intergalactic-spacing-05x, 2px));
+    margin-left: var(--intergalactic-spacing-05x, 2px);
+  }
 }
 
 SText[size='400'] {
@@ -115,4 +436,12 @@ SText[use='secondary'] {
 
 SText[disabled] {
   opacity: var(--intergalactic-disabled-opacity, 0.3);
-}
+}
+
+@media (prefers-reduced-motion) {
+  SText {
+    & a {
+      transition: none;
+    }
+  }
+}

package/lib/types/index.d.ts

@@ -2,8 +2,7 @@ import React from 'react';
 import { PropGetterFn, UnknownProperties, Intergalactic } from '@semcore/core';
 
 import { Property } from 'csstype';
-import { Box, BoxProps, Flex, FlexProps } from '@semcore/flex-box';
-import { KeyboardFocusProps } from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
+import { BoxProps, Flex, FlexProps } from '@semcore/flex-box';
 
 /** @deprecated */
 export interface ITextProps extends TextProps, UnknownProperties {}
@@ -71,25 +70,6 @@ export type ListContext = {
   getItemProps: PropGetterFn;
 };
 
-/** @deprecated */
-export interface IHintProps extends HintProps, UnknownProperties {}
-export type TypographyHintProps = TextProps &
-  KeyboardFocusProps & {
-    /** The value responsible for the activity of the element
-     * @default false
-     */
-    disabled?: boolean;
-    /** Enable `active` state */
-    active?: boolean;
-    /** Left addon hint  */
-    addonLeft?: React.ElementType;
-    /** Right addon hint  */
-    addonRight?: React.ElementType;
-  };
-
-/** @deprecated use `TypographyHintProps` instead */
-export type HintProps = TypographyHintProps;
-
 /** @deprecated */
 export interface IBlockquoteProps extends BlockquoteProps, UnknownProperties {}
 export type BlockquoteProps = BoxProps & {
@@ -97,11 +77,6 @@ export type BlockquoteProps = BoxProps & {
   author?: React.ReactNode;
 };
 
-declare const Hint: Intergalactic.Component<'abbr', HintProps> & {
-  Addon: typeof Box;
-  Text: typeof Box;
-};
-
 declare const Item: Intergalactic.Component<'li', ListItemProps> & {
   Content: Intergalactic.Component<typeof Flex, ListItemContentProps>;
 };
@@ -114,4 +89,4 @@ declare const Text: Intergalactic.Component<'span', TextProps>;
 
 declare const Blockquote: Intergalactic.Component<'blockquote', BlockquoteProps>;
 
-export { Text, List, Hint, Blockquote };
+export { Text, List, Blockquote };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@semcore/typography",
   "description": "Semrush Typography Component",
-  "version": "5.53.2",
+  "version": "16.0.0-prerelease.0",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",
@@ -14,15 +14,12 @@
     "types": "./lib/types/index.d.ts"
   },
   "dependencies": {
-    "@semcore/utils": "4.48.5",
-    "@semcore/flex-box": "5.41.4",
-    "@semcore/icon": "4.62.1",
+    "@semcore/flex-box": "16.0.0-prerelease.0",
+    "@semcore/icon": "16.0.0-prerelease.0",
     "csstype": "3.0.8"
   },
   "peerDependencies": {
-    "@semcore/core": "^2.17.5",
-    "react": "16.8 - 18",
-    "react-dom": "16.8 - 18"
+    "@semcore/base-components": "^16.0.0-prerelease.0"
   },
   "repository": {
     "type": "git",

package/lib/cjs/Hint.js

@@ -1,89 +0,0 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _index = require("@semcore/utils/lib/core/index");
-var _core = _interopRequireWildcard(require("@semcore/core"));
-var _react = _interopRequireDefault(require("react"));
-var _flexBox = require("@semcore/flex-box");
-var _keyboardFocusEnhance = _interopRequireDefault(require("@semcore/utils/lib/enhances/keyboardFocusEnhance"));
-var _addonTextChildren = _interopRequireDefault(require("@semcore/utils/lib/addonTextChildren"));
-var _Text = _interopRequireDefault(require("./Text"));
-/*!__reshadow-styles__:"./style/hint.shadow.css"*/
-var style = ( /*__reshadow_css_start__*/_index.sstyled.insert( /*__inner_css_start__*/".___SHint_pakd3_gg_{display:inline-block;transition:all .15s ease-in-out;-webkit-text-decoration:none;text-decoration:none;outline:0;cursor:pointer;color:var(--intergalactic-text-secondary, #6c6e79)}.___SHint_pakd3_gg_.__active_pakd3_gg_,.___SHint_pakd3_gg_:active{color:var(--intergalactic-text-hint-hover-active, #484a54)}@media (hover:hover){.___SHint_pakd3_gg_:hover{color:var(--intergalactic-text-hint-hover-active, #484a54)}}.___SHint_pakd3_gg_.__keyboardFocused_pakd3_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5))}.___SHint_pakd3_gg_.__disabled_pakd3_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none}.___SAddon_pakd3_gg_{vertical-align:middle;display:inline-flex}.___SHint_pakd3_gg_ .___SAddon_pakd3_gg_:not(:only-child):first-child{margin-right:var(--intergalactic-spacing-1x, 4px)}.___SHint_pakd3_gg_ .___SAddon_pakd3_gg_:not(:only-child):last-child{margin-left:var(--intergalactic-spacing-1x, 4px)}.___SText_pakd3_gg_{border-bottom-width:1px;border-bottom-style:dashed;border-color:currentColor}@media (prefers-reduced-motion){.___SHint_pakd3_gg_{transition:none}}", /*__inner_css_end__*/"pakd3_gg_"),
-/*__reshadow_css_end__*/
-{
-  "__SHint": "___SHint_pakd3_gg_",
-  "_keyboardFocused": "__keyboardFocused_pakd3_gg_",
-  "_disabled": "__disabled_pakd3_gg_",
-  "__SAddon": "___SAddon_pakd3_gg_",
-  "__SText": "___SText_pakd3_gg_",
-  "_active": "__active_pakd3_gg_"
-});
-var RootHint = /*#__PURE__*/function (_Component) {
-  (0, _inherits2["default"])(RootHint, _Component);
-  var _super = (0, _createSuper2["default"])(RootHint);
-  function RootHint() {
-    (0, _classCallCheck2["default"])(this, RootHint);
-    return _super.apply(this, arguments);
-  }
-  (0, _createClass2["default"])(RootHint, [{
-    key: "render",
-    value: function render() {
-      var _ref = this.asProps,
-        _ref4;
-      var SHint = _Text["default"];
-      var _this$asProps = this.asProps,
-        styles = _this$asProps.styles,
-        Children = _this$asProps.Children,
-        addonLeft = _this$asProps.addonLeft,
-        addonRight = _this$asProps.addonRight;
-      return _ref4 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SHint, _ref4.cn("SHint", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
-        "tag": 'abbr'
-      }, _ref))), addonLeft ? /*#__PURE__*/_react["default"].createElement(Hint.Addon, {
-        tag: addonLeft
-      }) : null, (0, _addonTextChildren["default"])(Children, Hint.Text, Hint.Addon), addonRight ? /*#__PURE__*/_react["default"].createElement(Hint.Addon, {
-        tag: addonRight
-      }) : null);
-    }
-  }]);
-  return RootHint;
-}(_core.Component);
-(0, _defineProperty2["default"])(RootHint, "displayName", 'Hint');
-(0, _defineProperty2["default"])(RootHint, "style", style);
-(0, _defineProperty2["default"])(RootHint, "enhance", [(0, _keyboardFocusEnhance["default"])()]);
-function Addon(props) {
-  var _ref2 = arguments[0],
-    _ref5;
-  var SAddon = _flexBox.Box;
-  var styles = props.styles;
-  return _ref5 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SAddon, _ref5.cn("SAddon", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
-    "tag": 'span'
-  }, _ref2))));
-}
-function HintText(props) {
-  var _ref3 = arguments[0],
-    _ref6;
-  var SText = _flexBox.Box;
-  var styles = props.styles;
-  return _ref6 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SText, _ref6.cn("SText", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
-    "tag": 'span'
-  }, _ref3))));
-}
-var Hint = (0, _core["default"])(RootHint, {
-  Text: HintText,
-  Addon: Addon
-});
-var _default = Hint;
-exports["default"] = _default;
-//# sourceMappingURL=Hint.js.map

package/lib/cjs/Hint.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Hint.js","names":["_core","_interopRequireWildcard","require","_react","_interopRequireDefault","_flexBox","_keyboardFocusEnhance","_addonTextChildren","_Text","style","_index","sstyled","insert","RootHint","_Component","_inherits2","_super","_createSuper2","_classCallCheck2","apply","arguments","_createClass2","key","value","render","_ref","asProps","_ref4","SHint","Text","_this$asProps","styles","Children","addonLeft","addonRight","createElement","cn","_objectSpread2","assignProps","Hint","Addon","tag","addonTextChildren","Component","_defineProperty2","keyboardFocusEnhance","props","_ref2","arguments[0]","_ref5","SAddon","Box","HintText","_ref3","_ref6","SText","createComponent","_default","exports"],"sources":["../../src/Hint.jsx"],"sourcesContent":["import React from 'react';\nimport createComponent, { Component, Root, sstyled } from '@semcore/core';\nimport { Box } from '@semcore/flex-box';\nimport keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\nimport addonTextChildren from '@semcore/utils/lib/addonTextChildren';\n\nimport Text from './Text';\n\nimport style from './style/hint.shadow.css';\n\nclass RootHint extends Component {\n  static displayName = 'Hint';\n  static style = style;\n  static enhance = [keyboardFocusEnhance()];\n\n  render() {\n    const SHint = Root;\n    const { styles, Children, addonLeft, addonRight } = this.asProps;\n    return sstyled(styles)(\n      <SHint render={Text} tag='abbr'>\n        {addonLeft ? <Hint.Addon tag={addonLeft} /> : null}\n        {addonTextChildren(Children, Hint.Text, Hint.Addon)}\n        {addonRight ? <Hint.Addon tag={addonRight} /> : null}\n      </SHint>,\n    );\n  }\n}\n\nfunction Addon(props) {\n  const SAddon = Root;\n  const { styles } = props;\n  return sstyled(styles)(<SAddon render={Box} tag='span' />);\n}\n\nfunction HintText(props) {\n  const SText = Root;\n  const { styles } = props;\n  return sstyled(styles)(<SText render={Box} tag='span' />);\n}\n\nconst Hint = createComponent(RootHint, {\n  Text: HintText,\n  Addon,\n});\n\nexport default Hint;\n"],"mappings":"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"}

package/lib/cjs/style/hint.shadow.css

@@ -1,51 +0,0 @@
-SHint {
-  display: inline-block;
-  transition: all 0.15s ease-in-out;
-  text-decoration: none;
-  outline: none;
-  cursor: pointer;
-  color: var(--intergalactic-text-secondary, #6c6e79);
-
-  &[active],
-  &:active,
-  &:hover {
-    color: var(--intergalactic-text-hint-hover-active, #484a54);
-  }
-}
-
-SHint[keyboardFocused] {
-  box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));
-}
-
-SHint[disabled] {
-  opacity: var(--intergalactic-disabled-opacity, 0.3);
-  cursor: default;
-  pointer-events: none; /* Disable hint interactions */
-}
-
-SAddon {
-  vertical-align: middle;
-  display: inline-flex;
-}
-
-SHint 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);
-  }
-}
-
-SText {
-  border-bottom-width: 1px;
-  border-bottom-style: dashed;
-  border-color: currentColor;
-}
-
-@media (prefers-reduced-motion) {
-  SHint {
-    transition: none;
-  }
-}

package/lib/es6/Hint.js

@@ -1,83 +0,0 @@
-import _objectSpread from "@babel/runtime/helpers/objectSpread2";
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-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 _assignProps3 } from "@semcore/core";
-import { assignProps as _assignProps2 } from "@semcore/core";
-import { assignProps as _assignProps } from "@semcore/core";
-import React from 'react';
-import createComponent, { Component, Root, sstyled } from '@semcore/core';
-import { Box } from '@semcore/flex-box';
-import keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
-import addonTextChildren from '@semcore/utils/lib/addonTextChildren';
-import Text from './Text';
-/*!__reshadow-styles__:"./style/hint.shadow.css"*/
-var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".___SHint_pakd3_gg_{display:inline-block;transition:all .15s ease-in-out;-webkit-text-decoration:none;text-decoration:none;outline:0;cursor:pointer;color:var(--intergalactic-text-secondary, #6c6e79)}.___SHint_pakd3_gg_.__active_pakd3_gg_,.___SHint_pakd3_gg_:active{color:var(--intergalactic-text-hint-hover-active, #484a54)}@media (hover:hover){.___SHint_pakd3_gg_:hover{color:var(--intergalactic-text-hint-hover-active, #484a54)}}.___SHint_pakd3_gg_.__keyboardFocused_pakd3_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5))}.___SHint_pakd3_gg_.__disabled_pakd3_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none}.___SAddon_pakd3_gg_{vertical-align:middle;display:inline-flex}.___SHint_pakd3_gg_ .___SAddon_pakd3_gg_:not(:only-child):first-child{margin-right:var(--intergalactic-spacing-1x, 4px)}.___SHint_pakd3_gg_ .___SAddon_pakd3_gg_:not(:only-child):last-child{margin-left:var(--intergalactic-spacing-1x, 4px)}.___SText_pakd3_gg_{border-bottom-width:1px;border-bottom-style:dashed;border-color:currentColor}@media (prefers-reduced-motion){.___SHint_pakd3_gg_{transition:none}}", /*__inner_css_end__*/"pakd3_gg_"),
-/*__reshadow_css_end__*/
-{
-  "__SHint": "___SHint_pakd3_gg_",
-  "_keyboardFocused": "__keyboardFocused_pakd3_gg_",
-  "_disabled": "__disabled_pakd3_gg_",
-  "__SAddon": "___SAddon_pakd3_gg_",
-  "__SText": "___SText_pakd3_gg_",
-  "_active": "__active_pakd3_gg_"
-});
-var RootHint = /*#__PURE__*/function (_Component) {
-  _inherits(RootHint, _Component);
-  var _super = _createSuper(RootHint);
-  function RootHint() {
-    _classCallCheck(this, RootHint);
-    return _super.apply(this, arguments);
-  }
-  _createClass(RootHint, [{
-    key: "render",
-    value: function render() {
-      var _ref = this.asProps,
-        _ref4;
-      var SHint = Text;
-      var _this$asProps = this.asProps,
-        styles = _this$asProps.styles,
-        Children = _this$asProps.Children,
-        addonLeft = _this$asProps.addonLeft,
-        addonRight = _this$asProps.addonRight;
-      return _ref4 = sstyled(styles), /*#__PURE__*/React.createElement(SHint, _ref4.cn("SHint", _objectSpread({}, _assignProps({
-        "tag": 'abbr'
-      }, _ref))), addonLeft ? /*#__PURE__*/React.createElement(Hint.Addon, {
-        tag: addonLeft
-      }) : null, addonTextChildren(Children, Hint.Text, Hint.Addon), addonRight ? /*#__PURE__*/React.createElement(Hint.Addon, {
-        tag: addonRight
-      }) : null);
-    }
-  }]);
-  return RootHint;
-}(Component);
-_defineProperty(RootHint, "displayName", 'Hint');
-_defineProperty(RootHint, "style", style);
-_defineProperty(RootHint, "enhance", [keyboardFocusEnhance()]);
-function Addon(props) {
-  var _ref2 = arguments[0],
-    _ref5;
-  var SAddon = Box;
-  var styles = props.styles;
-  return _ref5 = sstyled(styles), /*#__PURE__*/React.createElement(SAddon, _ref5.cn("SAddon", _objectSpread({}, _assignProps2({
-    "tag": 'span'
-  }, _ref2))));
-}
-function HintText(props) {
-  var _ref3 = arguments[0],
-    _ref6;
-  var SText = Box;
-  var styles = props.styles;
-  return _ref6 = sstyled(styles), /*#__PURE__*/React.createElement(SText, _ref6.cn("SText", _objectSpread({}, _assignProps3({
-    "tag": 'span'
-  }, _ref3))));
-}
-var Hint = createComponent(RootHint, {
-  Text: HintText,
-  Addon: Addon
-});
-export default Hint;
-//# sourceMappingURL=Hint.js.map