@semcore/typography 5.52.1 → 16.0.0-prerelease.10

package/lib/esm/Blockquote.mjs

@@ -1,30 +1,33 @@
-import g from "@babel/runtime/helpers/esm/objectSpread2";
-import { sstyled as u } from "@semcore/utils/lib/core/index";
-import { createBaseComponent as m, sstyled as p, assignProps as h } from "@semcore/core";
-import e from "react";
-import v from "@semcore/utils/lib/isNode";
-import { Box as f } from "@semcore/flex-box";
-var S = (
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import { createBaseComponent, sstyled, assignProps } from "@semcore/core";
+import React from "react";
+import isNode from "@semcore/core/lib/utils/isNode";
+import { Box } from "@semcore/flex-box";
+var styles = (
   /*__reshadow_css_start__*/
-  (u.insert(
+  (sstyled.insert(
     /*__inner_css_start__*/
-    '.___SBlockquote_zvrh4_gg_{position:relative;display:flex;font-style:italic;font-size:var(--intergalactic-fs-400, 20px);line-height:var(--intergalactic-lh-400, 120%);color:var(--intergalactic-text-primary, #191b23)}.___SDoubleQuotation_zvrh4_gg_{position:relative;margin-right:var(--intergalactic-spacing-5x, 20px);font-family:"Times New Roman",serif;font-style:normal;font-size:68px;line-height:52px;color:var(--intergalactic-text-large-secondary, #a9abb6)}.___SAuthor_zvrh4_gg_{display:block;margin-top:var(--intergalactic-spacing-4x, 16px);color:var(--intergalactic-text-secondary, #6c6e79);font-style:normal;font-size:var(--intergalactic-fs-300, 16px);line-height:var(--intergalactic-lh-300, 150%)}',
-    "zvrh4_gg_"
+    '.___SBlockquote_14h6z_gg_{position:relative;display:flex;font-style:italic;font-size:var(--intergalactic-fs-400, 20px);line-height:var(--intergalactic-lh-400, 120%);color:var(--intergalactic-text-primary, #191b23)}.___SDoubleQuotation_14h6z_gg_{position:relative;margin-right:var(--intergalactic-spacing-5x, 20px);font-family:"Times New Roman",serif;font-style:normal;font-size:68px;line-height:52px;color:var(--intergalactic-text-large-secondary, #a9abb6)}.___SAuthor_14h6z_gg_{display:block;margin-top:var(--intergalactic-spacing-4x, 16px);color:var(--intergalactic-text-secondary, #6c6e79);font-style:normal;font-size:var(--intergalactic-fs-300, 16px);line-height:var(--intergalactic-lh-300, 150%)}',
+    "14h6z_gg_"
   ), {
-    __SBlockquote: "___SBlockquote_zvrh4_gg_",
-    __SDoubleQuotation: "___SDoubleQuotation_zvrh4_gg_",
-    __SAuthor: "___SAuthor_zvrh4_gg_"
+    "__SBlockquote": "___SBlockquote_14h6z_gg_",
+    "__SDoubleQuotation": "___SDoubleQuotation_14h6z_gg_",
+    "__SAuthor": "___SAuthor_14h6z_gg_"
   })
 );
-function a(o, i) {
-  var l = arguments[0], t, n = f, c = "span", _ = "cite", s = o.children, r = o.author;
-  return t = p(S), /* @__PURE__ */ e.createElement(n, t.cn("SBlockquote", g({}, h({
-    tag: "blockquote",
-    ref: i
-  }, l))), /* @__PURE__ */ e.createElement(c, t.cn("SDoubleQuotation", {}), "“"), /* @__PURE__ */ e.createElement("span", t.cn("span", {}), s, v(r) && /* @__PURE__ */ e.createElement(_, t.cn("SAuthor", {}), r)));
+function Blockquote(props, ref) {
+  var _ref = arguments[0], _ref2;
+  var SBlockquote = Box;
+  var SDoubleQuotation = "span";
+  var SAuthor = "cite";
+  var children = props.children, author = props.author;
+  return _ref2 = sstyled(styles), /* @__PURE__ */ React.createElement(SBlockquote, _ref2.cn("SBlockquote", _objectSpread({}, assignProps({
+    "tag": "blockquote",
+    "ref": ref
+  }, _ref))), /* @__PURE__ */ React.createElement(SDoubleQuotation, _ref2.cn("SDoubleQuotation", {}), "“"), /* @__PURE__ */ React.createElement("span", _ref2.cn("span", {}), children, isNode(author) && /* @__PURE__ */ React.createElement(SAuthor, _ref2.cn("SAuthor", {}), author)));
 }
-a.displayName = "Blockquote";
-const B = m(a);
+Blockquote.displayName = "Blockquote";
+const Blockquote$1 = createBaseComponent(Blockquote);
 export {
-  B as default
+  Blockquote$1 as default
 };

package/lib/esm/List.mjs

@@ -1,89 +1,103 @@
-import d from "@babel/runtime/helpers/esm/objectSpread2";
-import v from "@babel/runtime/helpers/esm/classCallCheck";
-import S from "@babel/runtime/helpers/esm/createClass";
-import y from "@babel/runtime/helpers/esm/inherits";
-import h from "@babel/runtime/helpers/esm/createSuper";
-import s from "@babel/runtime/helpers/esm/defineProperty";
-import { sstyled as w } from "@semcore/utils/lib/core/index";
-import C, { sstyled as p, assignProps as g, Component as k } from "@semcore/core";
-import a from "react";
-import { Flex as A } from "@semcore/flex-box";
-import $ from "@semcore/utils/lib/isNode";
-import { isAdvanceMode as b } from "@semcore/utils/lib/findComponent";
-import I from "./Text.mjs";
-var L = (
+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, createComponent, assignProps, Component } from "@semcore/core";
+import React from "react";
+import { Flex } from "@semcore/flex-box";
+import isNode from "@semcore/core/lib/utils/isNode";
+import { isAdvanceMode } from "@semcore/core/lib/utils/findComponent";
+import Text from "./Text.mjs";
+var style = (
   /*__reshadow_css_start__*/
-  (w.insert(
+  (sstyled.insert(
     /*__inner_css_start__*/
-    ".___SList_1uede_gg_{padding:0;margin:0;list-style-type:none}.___SContent_1uede_gg_{overflow:inherit;text-overflow:inherit}.___SItem_1uede_gg_+.___SItem_1uede_gg_,.___SList_1uede_gg_ .___SList_1uede_gg_{margin-top:var(--intergalactic-spacing-2x, 8px)}.___SItem_1uede_gg_{display:flex}.___SMarker_1uede_gg_{margin-right:var(--intergalactic-spacing-2x, 8px);color:var(--intergalactic-text-secondary, #6c6e79);line-height:normal}",
-    "1uede_gg_"
+    ".___SList_6okrr_gg_{padding:0;margin:0;list-style-type:none}.___SContent_6okrr_gg_{overflow:inherit;text-overflow:inherit}.___SItem_6okrr_gg_+.___SItem_6okrr_gg_,.___SList_6okrr_gg_ .___SList_6okrr_gg_{margin-top:var(--intergalactic-spacing-2x, 8px)}.___SItem_6okrr_gg_{display:flex}.___SMarker_6okrr_gg_{margin-right:var(--intergalactic-spacing-2x, 8px);color:var(--intergalactic-text-secondary, #6c6e79);line-height:normal}",
+    "6okrr_gg_"
   ), {
-    __SList: "___SList_1uede_gg_",
-    __SContent: "___SContent_1uede_gg_",
-    __SItem: "___SItem_1uede_gg_",
-    __SMarker: "___SMarker_1uede_gg_"
+    "__SList": "___SList_6okrr_gg_",
+    "__SContent": "___SContent_6okrr_gg_",
+    "__SItem": "___SItem_6okrr_gg_",
+    "__SMarker": "___SMarker_6okrr_gg_"
   })
-), m = /* @__PURE__ */ function(n) {
-  y(e, n);
-  var i = h(e);
-  function e() {
-    return v(this, e), i.apply(this, arguments);
+);
+var ListRoot = /* @__PURE__ */ function(_Component) {
+  _inherits(ListRoot2, _Component);
+  var _super = _createSuper(ListRoot2);
+  function ListRoot2() {
+    _classCallCheck(this, ListRoot2);
+    return _super.apply(this, arguments);
   }
-  return S(e, [{
+  _createClass(ListRoot2, [{
     key: "getItemProps",
-    value: function() {
-      var r = this.asProps.marker;
+    value: function getItemProps() {
+      var marker = this.asProps.marker;
       return {
-        marker: r
+        marker
       };
     }
   }, {
     key: "render",
-    value: function() {
-      var r = this.asProps, t, l = I, _ = this.asProps.styles;
-      return t = p(_), /* @__PURE__ */ a.createElement(l, t.cn("SList", d({}, g({
-        tag: "ul",
-        role: "list"
-      }, r))));
+    value: function render() {
+      var _ref = this.asProps, _ref4;
+      var SList = Text;
+      var styles = this.asProps.styles;
+      return _ref4 = sstyled(styles), /* @__PURE__ */ React.createElement(SList, _ref4.cn("SList", _objectSpread({}, assignProps({
+        "tag": "ul",
+        "role": "list"
+      }, _ref))));
     }
-  }]), e;
-}(k);
-s(m, "displayName", "List");
-s(m, "style", L);
-s(m, "defaultProps", {
+  }]);
+  return ListRoot2;
+}(Component);
+_defineProperty(ListRoot, "displayName", "List");
+_defineProperty(ListRoot, "style", style);
+_defineProperty(ListRoot, "defaultProps", {
   marker: "•"
 });
-var c = /* @__PURE__ */ function(n) {
-  y(e, n);
-  var i = h(e);
-  function e() {
-    return v(this, e), i.apply(this, arguments);
+var ItemRoot = /* @__PURE__ */ function(_Component2) {
+  _inherits(ItemRoot2, _Component2);
+  var _super2 = _createSuper(ItemRoot2);
+  function ItemRoot2() {
+    _classCallCheck(this, ItemRoot2);
+    return _super2.apply(this, arguments);
   }
-  return S(e, [{
+  _createClass(ItemRoot2, [{
     key: "render",
-    value: function() {
-      var r = this.asProps, t, l = I, _ = this.asProps, x = _.styles, M = _.children, u = _.marker, f = _.Children, E = "span", N = "div", R = b(f, [F.Item.Content.displayName]);
-      return t = p(x), /* @__PURE__ */ a.createElement(l, t.cn("SItem", d({}, g({
-        tag: "li",
-        role: "listitem"
-      }, r))), $(u) && /* @__PURE__ */ a.createElement(E, t.cn("SMarker", {
+    value: function render() {
+      var _ref2 = this.asProps, _ref5;
+      var SItem = Text;
+      var _this$asProps = this.asProps, styles = _this$asProps.styles, children = _this$asProps.children, markerNode = _this$asProps.marker, Children = _this$asProps.Children;
+      var SMarker = "span";
+      var SContent = "div";
+      var isAdvancedMode = isAdvanceMode(Children, [List.Item.Content.displayName]);
+      return _ref5 = sstyled(styles), /* @__PURE__ */ React.createElement(SItem, _ref5.cn("SItem", _objectSpread({}, assignProps({
+        "tag": "li",
+        "role": "listitem"
+      }, _ref2))), isNode(markerNode) && /* @__PURE__ */ React.createElement(SMarker, _ref5.cn("SMarker", {
         "aria-hidden": "true"
-      }), u), R ? /* @__PURE__ */ a.createElement(f, t.cn("Children", {})) : /* @__PURE__ */ a.createElement(N, t.cn("SContent", {}), M));
+      }), markerNode), isAdvancedMode ? /* @__PURE__ */ React.createElement(Children, _ref5.cn("Children", {})) : /* @__PURE__ */ React.createElement(SContent, _ref5.cn("SContent", {}), children));
     }
-  }]), e;
-}(k);
-s(c, "style", L);
-s(c, "displayName", "Item");
-function P(n) {
-  var i = arguments[0], e, o = n.styles, r = n.children, t = A;
-  return e = p(o), /* @__PURE__ */ a.createElement(t, e.cn("SContent", d({}, g({}, i))), r);
+  }]);
+  return ItemRoot2;
+}(Component);
+_defineProperty(ItemRoot, "style", style);
+_defineProperty(ItemRoot, "displayName", "Item");
+function Content(props) {
+  var _ref3 = arguments[0], _ref6;
+  var styles = props.styles, children = props.children;
+  var SContent = Flex;
+  return _ref6 = sstyled(styles), /* @__PURE__ */ React.createElement(SContent, _ref6.cn("SContent", _objectSpread({}, assignProps({}, _ref3))), children);
 }
-P.displayName = "Content";
-var j = C(c, {
-  Content: P
-}), F = C(m, {
-  Item: j
+Content.displayName = "Content";
+var Item = createComponent(ItemRoot, {
+  Content
+});
+var List = createComponent(ListRoot, {
+  Item
 });
 export {
-  F as default
+  List as default
 };

package/lib/esm/Text.mjs

@@ -1,69 +1,74 @@
-import c from "@babel/runtime/helpers/esm/objectSpread2";
-import { sstyled as s } from "@semcore/utils/lib/core/index";
-import { createBaseComponent as q, sstyled as x, assignProps as f } from "@semcore/core";
-import h from "react";
-import { Box as p } from "@semcore/flex-box";
-import { useColorResolver as z } from "@semcore/utils/lib/use/useColorResolver";
-var m = (
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import { createBaseComponent, sstyled, assignProps } from "@semcore/core";
+import React from "react";
+import { Box } from "@semcore/flex-box";
+import { useColorResolver } from "@semcore/core/lib/utils/use/useColorResolver";
+var styles = (
   /*__reshadow_css_start__*/
-  (s.insert(
+  (sstyled.insert(
     /*__inner_css_start__*/
-    '.___SText_1q0gd_gg_{padding:0;margin:0}.___SText_1q0gd_gg_._size_100_1q0gd_gg_{font-size:var(--intergalactic-fs-100, 12px);line-height:var(--intergalactic-lh-100, 133%)}.___SText_1q0gd_gg_._size_200_1q0gd_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%)}.___SText_1q0gd_gg_._size_300_1q0gd_gg_{font-size:var(--intergalactic-fs-300, 16px);line-height:var(--intergalactic-lh-300, 150%)}.___SText_1q0gd_gg_._size_400_1q0gd_gg_{font-size:var(--intergalactic-fs-400, 20px);line-height:var(--intergalactic-lh-400, 120%)}.___SText_1q0gd_gg_._size_500_1q0gd_gg_{font-size:var(--intergalactic-fs-500, 24px);line-height:var(--intergalactic-lh-500, 117%)}.___SText_1q0gd_gg_._size_600_1q0gd_gg_{font-size:var(--intergalactic-fs-600, 32px);line-height:var(--intergalactic-lh-600, 125%)}.___SText_1q0gd_gg_._size_700_1q0gd_gg_{font-size:var(--intergalactic-fs-700, 36px);line-height:var(--intergalactic-lh-700, 110%)}.___SText_1q0gd_gg_._size_800_1q0gd_gg_{font-size:var(--intergalactic-fs-800, 48px);line-height:var(--intergalactic-lh-800, 117%)}.___SText_1q0gd_gg_.__noWrap_1q0gd_gg_{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___SText_1q0gd_gg_.__medium_1q0gd_gg_{font-weight:var(--intergalactic-medium, 500)}.___SText_1q0gd_gg_.__semibold_1q0gd_gg_{font-weight:var(--intergalactic-semi-bold, 600)}.___SText_1q0gd_gg_.__bold_1q0gd_gg_{font-weight:var(--intergalactic-bold, 700)}.___SText_1q0gd_gg_.__italic_1q0gd_gg_{font-style:italic}.___SText_1q0gd_gg_.__monospace_1q0gd_gg_{font-family:Consolas,"Roboto Mono",Menlo,Courier,monospace}.___SText_1q0gd_gg_.__uppercase_1q0gd_gg_{text-transform:uppercase}.___SText_1q0gd_gg_.__lowercase_1q0gd_gg_{text-transform:lowercase}.___SText_1q0gd_gg_.__capitalize_1q0gd_gg_{text-transform:capitalize}.___SText_1q0gd_gg_.__decoration_1q0gd_gg_{-webkit-text-decoration:var(--decoration_1q0gd);text-decoration:var(--decoration_1q0gd)}.___SText_1q0gd_gg_.__color_1q0gd_gg_{color:var(--color_1q0gd)}.___SText_1q0gd_gg_.__fontSize_1q0gd_gg_{font-size:var(--fontSize_1q0gd)}.___SText_1q0gd_gg_.__lineHeight_1q0gd_gg_{line-height:var(--lineHeight_1q0gd)}.___SText_1q0gd_gg_.__fontWeight_1q0gd_gg_{font-weight:var(--fontWeight_1q0gd)}.___SText_1q0gd_gg_.__textAlign_1q0gd_gg_{text-align:var(--textAlign_1q0gd)}.___SText_1q0gd_gg_._use_primary_1q0gd_gg_{color:var(--intergalactic-text-primary, #191b23)}.___SText_1q0gd_gg_._use_secondary_1q0gd_gg_{color:var(--intergalactic-text-secondary, #6c6e79)}.___SText_1q0gd_gg_.__disabled_1q0gd_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3)}',
-    "1q0gd_gg_"
+    '.___SText_xpmp3_gg_{padding:0;margin:0}.___SText_xpmp3_gg_._size_100_xpmp3_gg_{font-size:var(--intergalactic-fs-100, 12px);line-height:var(--intergalactic-lh-100, 133%)}.___SText_xpmp3_gg_._size_200_xpmp3_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%)}.___SText_xpmp3_gg_._size_300_xpmp3_gg_{font-size:var(--intergalactic-fs-300, 16px);line-height:var(--intergalactic-lh-300, 150%)}.___SText_xpmp3_gg_._size_400_xpmp3_gg_{font-size:var(--intergalactic-fs-400, 20px);line-height:var(--intergalactic-lh-400, 120%)}.___SText_xpmp3_gg_._size_500_xpmp3_gg_{font-size:var(--intergalactic-fs-500, 24px);line-height:var(--intergalactic-lh-500, 117%)}.___SText_xpmp3_gg_._size_600_xpmp3_gg_{font-size:var(--intergalactic-fs-600, 32px);line-height:var(--intergalactic-lh-600, 125%)}.___SText_xpmp3_gg_._size_700_xpmp3_gg_{font-size:var(--intergalactic-fs-700, 36px);line-height:var(--intergalactic-lh-700, 110%)}.___SText_xpmp3_gg_._size_800_xpmp3_gg_{font-size:var(--intergalactic-fs-800, 48px);line-height:var(--intergalactic-lh-800, 117%)}.___SText_xpmp3_gg_.__noWrap_xpmp3_gg_{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___SText_xpmp3_gg_.__medium_xpmp3_gg_{font-weight:var(--intergalactic-medium, 500)}.___SText_xpmp3_gg_.__semibold_xpmp3_gg_{font-weight:var(--intergalactic-semi-bold, 600)}.___SText_xpmp3_gg_.__bold_xpmp3_gg_{font-weight:var(--intergalactic-bold, 700)}.___SText_xpmp3_gg_.__italic_xpmp3_gg_{font-style:italic}.___SText_xpmp3_gg_.__monospace_xpmp3_gg_{font-family:Consolas,"Roboto Mono",Menlo,Courier,monospace}.___SText_xpmp3_gg_.__uppercase_xpmp3_gg_{text-transform:uppercase}.___SText_xpmp3_gg_.__lowercase_xpmp3_gg_{text-transform:lowercase}.___SText_xpmp3_gg_.__capitalize_xpmp3_gg_{text-transform:capitalize}.___SText_xpmp3_gg_.__decoration_xpmp3_gg_{-webkit-text-decoration:var(--decoration_xpmp3);text-decoration:var(--decoration_xpmp3)}.___SText_xpmp3_gg_.__color_xpmp3_gg_{color:var(--color_xpmp3)}.___SText_xpmp3_gg_.__fontSize_xpmp3_gg_{font-size:var(--fontSize_xpmp3)}.___SText_xpmp3_gg_.__lineHeight_xpmp3_gg_{line-height:var(--lineHeight_xpmp3)}.___SText_xpmp3_gg_.__fontWeight_xpmp3_gg_{font-weight:var(--fontWeight_xpmp3)}.___SText_xpmp3_gg_.__textAlign_xpmp3_gg_{text-align:var(--textAlign_xpmp3)}.___SText_xpmp3_gg_._use_primary_xpmp3_gg_{color:var(--intergalactic-text-primary, #191b23)}.___SText_xpmp3_gg_._use_secondary_xpmp3_gg_{color:var(--intergalactic-text-secondary, #6c6e79)}.___SText_xpmp3_gg_.__disabled_xpmp3_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3)}',
+    "xpmp3_gg_"
   ), {
-    __SText: "___SText_1q0gd_gg_",
-    _size_100: "_size_100_1q0gd_gg_",
-    _size_200: "_size_200_1q0gd_gg_",
-    _size_300: "_size_300_1q0gd_gg_",
-    _size_400: "_size_400_1q0gd_gg_",
-    _size_500: "_size_500_1q0gd_gg_",
-    _size_600: "_size_600_1q0gd_gg_",
-    _size_700: "_size_700_1q0gd_gg_",
-    _size_800: "_size_800_1q0gd_gg_",
-    _noWrap: "__noWrap_1q0gd_gg_",
-    _medium: "__medium_1q0gd_gg_",
-    _semibold: "__semibold_1q0gd_gg_",
-    _bold: "__bold_1q0gd_gg_",
-    _italic: "__italic_1q0gd_gg_",
-    _monospace: "__monospace_1q0gd_gg_",
-    _uppercase: "__uppercase_1q0gd_gg_",
-    _lowercase: "__lowercase_1q0gd_gg_",
-    _capitalize: "__capitalize_1q0gd_gg_",
-    _decoration: "__decoration_1q0gd_gg_",
-    "--decoration": "--decoration_1q0gd",
-    _color: "__color_1q0gd_gg_",
-    "--color": "--color_1q0gd",
-    _fontSize: "__fontSize_1q0gd_gg_",
-    "--fontSize": "--fontSize_1q0gd",
-    _lineHeight: "__lineHeight_1q0gd_gg_",
-    "--lineHeight": "--lineHeight_1q0gd",
-    _fontWeight: "__fontWeight_1q0gd_gg_",
-    "--fontWeight": "--fontWeight_1q0gd",
-    _textAlign: "__textAlign_1q0gd_gg_",
-    "--textAlign": "--textAlign_1q0gd",
-    _use_primary: "_use_primary_1q0gd_gg_",
-    _use_secondary: "_use_secondary_1q0gd_gg_",
-    _disabled: "__disabled_1q0gd_gg_"
+    "__SText": "___SText_xpmp3_gg_",
+    "_size_100": "_size_100_xpmp3_gg_",
+    "_size_200": "_size_200_xpmp3_gg_",
+    "_size_300": "_size_300_xpmp3_gg_",
+    "_size_400": "_size_400_xpmp3_gg_",
+    "_size_500": "_size_500_xpmp3_gg_",
+    "_size_600": "_size_600_xpmp3_gg_",
+    "_size_700": "_size_700_xpmp3_gg_",
+    "_size_800": "_size_800_xpmp3_gg_",
+    "_noWrap": "__noWrap_xpmp3_gg_",
+    "_medium": "__medium_xpmp3_gg_",
+    "_semibold": "__semibold_xpmp3_gg_",
+    "_bold": "__bold_xpmp3_gg_",
+    "_italic": "__italic_xpmp3_gg_",
+    "_monospace": "__monospace_xpmp3_gg_",
+    "_uppercase": "__uppercase_xpmp3_gg_",
+    "_lowercase": "__lowercase_xpmp3_gg_",
+    "_capitalize": "__capitalize_xpmp3_gg_",
+    "_decoration": "__decoration_xpmp3_gg_",
+    "--decoration": "--decoration_xpmp3",
+    "_color": "__color_xpmp3_gg_",
+    "--color": "--color_xpmp3",
+    "_fontSize": "__fontSize_xpmp3_gg_",
+    "--fontSize": "--fontSize_xpmp3",
+    "_lineHeight": "__lineHeight_xpmp3_gg_",
+    "--lineHeight": "--lineHeight_xpmp3",
+    "_fontWeight": "__fontWeight_xpmp3_gg_",
+    "--fontWeight": "--fontWeight_xpmp3",
+    "_textAlign": "__textAlign_xpmp3_gg_",
+    "--textAlign": "--textAlign_xpmp3",
+    "_use_primary": "_use_primary_xpmp3_gg_",
+    "_use_secondary": "_use_secondary_xpmp3_gg_",
+    "_disabled": "__disabled_xpmp3_gg_"
   })
 );
-function v(_, g) {
-  if (_)
+function getTextDecoration(underline, lineThrough) {
+  if (underline) {
     return "underline";
-  if (g)
+  }
+  if (lineThrough) {
     return "line-through";
+  }
 }
-function t(_, g) {
-  var i = arguments[0], e, a = p, r = _.color, o = _.underline, d = _.lineThrough, n = v(o, d), l = z();
-  return e = x(m), /* @__PURE__ */ h.createElement(a, e.cn("SText", c({}, f({
-    tag: "span",
+function Text(props, ref) {
+  var _ref = arguments[0], _ref2;
+  var SText = Box;
+  var color = props.color, underline = props.underline, lineThrough = props.lineThrough;
+  var textDecoration = getTextDecoration(underline, lineThrough);
+  var resolveColor = useColorResolver();
+  return _ref2 = sstyled(styles), /* @__PURE__ */ React.createElement(SText, _ref2.cn("SText", _objectSpread({}, assignProps({
+    "tag": "span",
     "data-ui-name": "Text",
-    ref: g,
-    "use:decoration": n,
-    "use:color": l(r)
-  }, i))));
+    "ref": ref,
+    "use:decoration": textDecoration,
+    "use:color": resolveColor(color)
+  }, _ref))));
 }
-t.displayName = "Text";
-const W = q(t);
+Text.displayName = "Text";
+const Text$1 = createBaseComponent(Text);
 export {
-  W as default
+  Text$1 as default
 };

package/lib/esm/index.mjs

@@ -1,10 +1,8 @@
-import { default as o } from "./Text.mjs";
-import { default as f } from "./Blockquote.mjs";
-import { default as l } from "./List.mjs";
-import { default as u } from "./Hint.mjs";
+import { default as default2 } from "./Text.mjs";
+import { default as default3 } from "./Blockquote.mjs";
+import { default as default4 } from "./List.mjs";
 export {
-  f as Blockquote,
-  u as Hint,
-  l as List,
-  o as Text
+  default3 as Blockquote,
+  default4 as List,
+  default2 as Text
 };

package/lib/types/index.d.ts

@@ -3,7 +3,7 @@ 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 { KeyboardFocusProps } from '@semcore/core/lib/utils/enhances/keyboardFocusEnhance';
 
 /** @deprecated */
 export interface ITextProps extends TextProps, UnknownProperties {}
@@ -71,25 +71,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 +78,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 +90,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.52.1",
+  "version": "16.0.0-prerelease.10",
   "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.1",
-    "@semcore/flex-box": "5.41.1",
-    "@semcore/icon": "4.60.1",
+    "@semcore/flex-box": "16.0.0-prerelease.10",
+    "@semcore/icon": "16.0.0-prerelease.10",
     "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.10"
   },
   "repository": {
     "type": "git",

package/lib/cjs/Hint.js

@@ -1,87 +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_kgqok_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_kgqok_gg_.__active_kgqok_gg_,.___SHint_kgqok_gg_:active{color:var(--intergalactic-text-hint-hover-active, #484a54)}@media (hover:hover){.___SHint_kgqok_gg_:hover{color:var(--intergalactic-text-hint-hover-active, #484a54)}}.___SHint_kgqok_gg_.__keyboardFocused_kgqok_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5))}.___SHint_kgqok_gg_.__disabled_kgqok_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none}.___SAddon_kgqok_gg_{vertical-align:middle;display:inline-flex}.___SHint_kgqok_gg_ .___SAddon_kgqok_gg_:not(:only-child):first-child{margin-right:var(--intergalactic-spacing-1x, 4px)}.___SHint_kgqok_gg_ .___SAddon_kgqok_gg_:not(:only-child):last-child{margin-left:var(--intergalactic-spacing-1x, 4px)}.___SText_kgqok_gg_{border-bottom-width:1px;border-bottom-style:dashed;border-color:currentColor}@media (prefers-reduced-motion){.___SHint_kgqok_gg_{transition:none}}" /*__inner_css_end__*/, "kgqok_gg_") /*__reshadow_css_end__*/, {
-  "__SHint": "___SHint_kgqok_gg_",
-  "_keyboardFocused": "__keyboardFocused_kgqok_gg_",
-  "_disabled": "__disabled_kgqok_gg_",
-  "__SAddon": "___SAddon_kgqok_gg_",
-  "__SText": "___SText_kgqok_gg_",
-  "_active": "__active_kgqok_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;
-  }
-}