@semcore/typography 5.52.0-prerelease.11 → 5.52.0-prerelease.12

package/CHANGELOG.md

@@ -2,11 +2,11 @@
 
 CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
 
-## [5.52.0] - 2025-03-03
+## [5.52.0] - 2025-03-14
 
-### Changed
+### Added
 
-- Version minor update due to children dependencies update (`@semcore/utils` [4.45.1 ~> 4.47.1], `@semcore/flex-box` [5.40.1 ~> 5.41.0], `@semcore/icon` [4.57.1 ~> 4.58.0], `@semcore/core` [2.38.1 ~> 2.39.0]).
+- Build for ESM.
 
 ## [5.51.1] - 2025-02-05
 

package/lib/esm/Blockquote.mjs

@@ -0,0 +1,30 @@
+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 f } from "@semcore/core";
+import e from "react";
+import b from "@semcore/utils/lib/isNode";
+import { Box as h } from "@semcore/flex-box";
+var v = (
+  /*__reshadow_css_start__*/
+  (u.insert(
+    /*__inner_css_start__*/
+    '.___SBlockquote_1qib0_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_1qib0_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_1qib0_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%)}',
+    "1qib0_gg_"
+  ), {
+    __SBlockquote: "___SBlockquote_1qib0_gg_",
+    __SDoubleQuotation: "___SDoubleQuotation_1qib0_gg_",
+    __SAuthor: "___SAuthor_1qib0_gg_"
+  })
+);
+function r(o, i) {
+  var l = arguments[0], t, n = h, c = "span", _ = "cite", s = o.children, a = o.author;
+  return t = p(v), /* @__PURE__ */ e.createElement(n, t.cn("SBlockquote", g({}, f({
+    tag: "blockquote",
+    ref: i
+  }, l))), /* @__PURE__ */ e.createElement(c, t.cn("SDoubleQuotation", {}), "“"), /* @__PURE__ */ e.createElement("span", t.cn("span", {}), s, b(a) && /* @__PURE__ */ e.createElement(_, t.cn("SAuthor", {}), a)));
+}
+r.displayName = "Blockquote";
+const B = m(r);
+export {
+  B as default
+};

package/lib/esm/Hint.mjs

@@ -0,0 +1,69 @@
+import s from "@babel/runtime/helpers/esm/objectSpread2";
+import y from "@babel/runtime/helpers/esm/classCallCheck";
+import S from "@babel/runtime/helpers/esm/createClass";
+import b from "@babel/runtime/helpers/esm/inherits";
+import H from "@babel/runtime/helpers/esm/createSuper";
+import g from "@babel/runtime/helpers/esm/defineProperty";
+import { sstyled as A } from "@semcore/utils/lib/core/index";
+import T, { sstyled as c, assignProps as l, Component as k } from "@semcore/core";
+import n from "react";
+import { Box as f } from "@semcore/flex-box";
+import C from "@semcore/utils/lib/enhances/keyboardFocusEnhance";
+import E from "@semcore/utils/lib/addonTextChildren";
+import P from "./Text.mjs";
+var R = (
+  /*__reshadow_css_start__*/
+  (A.insert(
+    /*__inner_css_start__*/
+    ".___SHint_pu28t_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_pu28t_gg_.__active_pu28t_gg_,.___SHint_pu28t_gg_:active{color:var(--intergalactic-text-hint-hover-active, #484a54)}@media (hover:hover){.___SHint_pu28t_gg_:hover{color:var(--intergalactic-text-hint-hover-active, #484a54)}}.___SHint_pu28t_gg_.__keyboardFocused_pu28t_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5))}.___SHint_pu28t_gg_.__disabled_pu28t_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none}.___SAddon_pu28t_gg_{vertical-align:middle;display:inline-flex}.___SHint_pu28t_gg_ .___SAddon_pu28t_gg_:not(:only-child):first-child{margin-right:var(--intergalactic-spacing-1x, 4px)}.___SHint_pu28t_gg_ .___SAddon_pu28t_gg_:not(:only-child):last-child{margin-left:var(--intergalactic-spacing-1x, 4px)}.___SText_pu28t_gg_{border-bottom-width:1px;border-bottom-style:dashed;border-color:currentColor}@media (prefers-reduced-motion){.___SHint_pu28t_gg_{transition:none}}",
+    "pu28t_gg_"
+  ), {
+    __SHint: "___SHint_pu28t_gg_",
+    _keyboardFocused: "__keyboardFocused_pu28t_gg_",
+    _disabled: "__disabled_pu28t_gg_",
+    __SAddon: "___SAddon_pu28t_gg_",
+    __SText: "___SText_pu28t_gg_",
+    _active: "__active_pu28t_gg_"
+  })
+), d = /* @__PURE__ */ function(e) {
+  b(t, e);
+  var _ = H(t);
+  function t() {
+    return y(this, t), _.apply(this, arguments);
+  }
+  return S(t, [{
+    key: "render",
+    value: function() {
+      var r = this.asProps, p, v = P, a = this.asProps, h = a.styles, x = a.Children, u = a.addonLeft, m = a.addonRight;
+      return p = c(h), /* @__PURE__ */ n.createElement(v, p.cn("SHint", s({}, l({
+        tag: "abbr"
+      }, r))), u ? /* @__PURE__ */ n.createElement(i.Addon, {
+        tag: u
+      }) : null, E(x, i.Text, i.Addon), m ? /* @__PURE__ */ n.createElement(i.Addon, {
+        tag: m
+      }) : null);
+    }
+  }]), t;
+}(k);
+g(d, "displayName", "Hint");
+g(d, "style", R);
+g(d, "enhance", [C()]);
+function F(e) {
+  var _ = arguments[0], t, o = f, r = e.styles;
+  return t = c(r), /* @__PURE__ */ n.createElement(o, t.cn("SAddon", s({}, l({
+    tag: "span"
+  }, _))));
+}
+function w(e) {
+  var _ = arguments[0], t, o = f, r = e.styles;
+  return t = c(r), /* @__PURE__ */ n.createElement(o, t.cn("SText", s({}, l({
+    tag: "span"
+  }, _))));
+}
+var i = T(d, {
+  Text: w,
+  Addon: F
+});
+export {
+  i as default
+};

package/lib/esm/List.mjs

@@ -0,0 +1,89 @@
+import p from "@babel/runtime/helpers/esm/objectSpread2";
+import u 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 R } from "@semcore/utils/lib/core/index";
+import C, { sstyled as g, assignProps as c, Component as k } from "@semcore/core";
+import a from "react";
+import { Flex as w } from "@semcore/flex-box";
+import A from "@semcore/utils/lib/isNode";
+import { isAdvanceMode as $ } from "@semcore/utils/lib/findComponent";
+import I from "./Text.mjs";
+var q = (
+  /*__reshadow_css_start__*/
+  (R.insert(
+    /*__inner_css_start__*/
+    ".___SList_1q6nn_gg_{padding:0;margin:0;list-style-type:none}.___SContent_1q6nn_gg_{overflow:inherit;text-overflow:inherit}.___SItem_1q6nn_gg_+.___SItem_1q6nn_gg_,.___SList_1q6nn_gg_ .___SList_1q6nn_gg_{margin-top:var(--intergalactic-spacing-2x, 8px)}.___SItem_1q6nn_gg_{display:flex}.___SMarker_1q6nn_gg_{margin-right:var(--intergalactic-spacing-2x, 8px);color:var(--intergalactic-text-secondary, #6c6e79);line-height:normal}",
+    "1q6nn_gg_"
+  ), {
+    __SList: "___SList_1q6nn_gg_",
+    __SContent: "___SContent_1q6nn_gg_",
+    __SItem: "___SItem_1q6nn_gg_",
+    __SMarker: "___SMarker_1q6nn_gg_"
+  })
+), m = /* @__PURE__ */ function(n) {
+  y(e, n);
+  var i = h(e);
+  function e() {
+    return u(this, e), i.apply(this, arguments);
+  }
+  return S(e, [{
+    key: "getItemProps",
+    value: function() {
+      var r = this.asProps.marker;
+      return {
+        marker: r
+      };
+    }
+  }, {
+    key: "render",
+    value: function() {
+      var r = this.asProps, t, l = I, _ = this.asProps.styles;
+      return t = g(_), /* @__PURE__ */ a.createElement(l, t.cn("SList", p({}, c({
+        tag: "ul",
+        role: "list"
+      }, r))));
+    }
+  }]), e;
+}(k);
+s(m, "displayName", "List");
+s(m, "style", q);
+s(m, "defaultProps", {
+  marker: "•"
+});
+var d = /* @__PURE__ */ function(n) {
+  y(e, n);
+  var i = h(e);
+  function e() {
+    return u(this, e), i.apply(this, arguments);
+  }
+  return S(e, [{
+    key: "render",
+    value: function() {
+      var r = this.asProps, t, l = I, _ = this.asProps, P = _.styles, x = _.children, f = _.marker, v = _.Children, M = "span", E = "div", N = $(v, [j.Item.Content.displayName]);
+      return t = g(P), /* @__PURE__ */ a.createElement(l, t.cn("SItem", p({}, c({
+        tag: "li",
+        role: "listitem"
+      }, r))), A(f) && /* @__PURE__ */ a.createElement(M, t.cn("SMarker", {
+        "aria-hidden": "true"
+      }), f), N ? /* @__PURE__ */ a.createElement(v, t.cn("Children", {})) : /* @__PURE__ */ a.createElement(E, t.cn("SContent", {}), x));
+    }
+  }]), e;
+}(k);
+s(d, "style", q);
+s(d, "displayName", "Item");
+function L(n) {
+  var i = arguments[0], e, o = n.styles, r = n.children, t = w;
+  return e = g(o), /* @__PURE__ */ a.createElement(t, e.cn("SContent", p({}, c({}, i))), r);
+}
+L.displayName = "Content";
+var b = C(d, {
+  Content: L
+}), j = C(m, {
+  Item: b
+});
+export {
+  j as default
+};

package/lib/esm/Text.mjs

@@ -0,0 +1,69 @@
+import l from "@babel/runtime/helpers/esm/objectSpread2";
+import { sstyled as w } from "@semcore/utils/lib/core/index";
+import { createBaseComponent as c, sstyled as x, assignProps as f } from "@semcore/core";
+import h from "react";
+import { Box as d } from "@semcore/flex-box";
+import { useColorResolver as p } from "@semcore/utils/lib/use/useColorResolver";
+var z = (
+  /*__reshadow_css_start__*/
+  (w.insert(
+    /*__inner_css_start__*/
+    '.___SText_owus2_gg_{padding:0;margin:0}.___SText_owus2_gg_._size_100_owus2_gg_{font-size:var(--intergalactic-fs-100, 12px);line-height:var(--intergalactic-lh-100, 133%)}.___SText_owus2_gg_._size_200_owus2_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%)}.___SText_owus2_gg_._size_300_owus2_gg_{font-size:var(--intergalactic-fs-300, 16px);line-height:var(--intergalactic-lh-300, 150%)}.___SText_owus2_gg_._size_400_owus2_gg_{font-size:var(--intergalactic-fs-400, 20px);line-height:var(--intergalactic-lh-400, 120%)}.___SText_owus2_gg_._size_500_owus2_gg_{font-size:var(--intergalactic-fs-500, 24px);line-height:var(--intergalactic-lh-500, 117%)}.___SText_owus2_gg_._size_600_owus2_gg_{font-size:var(--intergalactic-fs-600, 32px);line-height:var(--intergalactic-lh-600, 125%)}.___SText_owus2_gg_._size_700_owus2_gg_{font-size:var(--intergalactic-fs-700, 36px);line-height:var(--intergalactic-lh-700, 110%)}.___SText_owus2_gg_._size_800_owus2_gg_{font-size:var(--intergalactic-fs-800, 48px);line-height:var(--intergalactic-lh-800, 117%)}.___SText_owus2_gg_.__noWrap_owus2_gg_{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___SText_owus2_gg_.__medium_owus2_gg_{font-weight:var(--intergalactic-medium, 500)}.___SText_owus2_gg_.__semibold_owus2_gg_{font-weight:var(--intergalactic-semi-bold, 600)}.___SText_owus2_gg_.__bold_owus2_gg_{font-weight:var(--intergalactic-bold, 700)}.___SText_owus2_gg_.__italic_owus2_gg_{font-style:italic}.___SText_owus2_gg_.__monospace_owus2_gg_{font-family:Consolas,"Roboto Mono",Menlo,Courier,monospace}.___SText_owus2_gg_.__uppercase_owus2_gg_{text-transform:uppercase}.___SText_owus2_gg_.__lowercase_owus2_gg_{text-transform:lowercase}.___SText_owus2_gg_.__capitalize_owus2_gg_{text-transform:capitalize}.___SText_owus2_gg_.__decoration_owus2_gg_{-webkit-text-decoration:var(--decoration_owus2);text-decoration:var(--decoration_owus2)}.___SText_owus2_gg_.__color_owus2_gg_{color:var(--color_owus2)}.___SText_owus2_gg_.__fontSize_owus2_gg_{font-size:var(--fontSize_owus2)}.___SText_owus2_gg_.__lineHeight_owus2_gg_{line-height:var(--lineHeight_owus2)}.___SText_owus2_gg_.__fontWeight_owus2_gg_{font-weight:var(--fontWeight_owus2)}.___SText_owus2_gg_.__textAlign_owus2_gg_{text-align:var(--textAlign_owus2)}.___SText_owus2_gg_._use_primary_owus2_gg_{color:var(--intergalactic-text-primary, #191b23)}.___SText_owus2_gg_._use_secondary_owus2_gg_{color:var(--intergalactic-text-secondary, #6c6e79)}.___SText_owus2_gg_.__disabled_owus2_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3)}',
+    "owus2_gg_"
+  ), {
+    __SText: "___SText_owus2_gg_",
+    _size_100: "_size_100_owus2_gg_",
+    _size_200: "_size_200_owus2_gg_",
+    _size_300: "_size_300_owus2_gg_",
+    _size_400: "_size_400_owus2_gg_",
+    _size_500: "_size_500_owus2_gg_",
+    _size_600: "_size_600_owus2_gg_",
+    _size_700: "_size_700_owus2_gg_",
+    _size_800: "_size_800_owus2_gg_",
+    _noWrap: "__noWrap_owus2_gg_",
+    _medium: "__medium_owus2_gg_",
+    _semibold: "__semibold_owus2_gg_",
+    _bold: "__bold_owus2_gg_",
+    _italic: "__italic_owus2_gg_",
+    _monospace: "__monospace_owus2_gg_",
+    _uppercase: "__uppercase_owus2_gg_",
+    _lowercase: "__lowercase_owus2_gg_",
+    _capitalize: "__capitalize_owus2_gg_",
+    _decoration: "__decoration_owus2_gg_",
+    "--decoration": "--decoration_owus2",
+    _color: "__color_owus2_gg_",
+    "--color": "--color_owus2",
+    _fontSize: "__fontSize_owus2_gg_",
+    "--fontSize": "--fontSize_owus2",
+    _lineHeight: "__lineHeight_owus2_gg_",
+    "--lineHeight": "--lineHeight_owus2",
+    _fontWeight: "__fontWeight_owus2_gg_",
+    "--fontWeight": "--fontWeight_owus2",
+    _textAlign: "__textAlign_owus2_gg_",
+    "--textAlign": "--textAlign_owus2",
+    _use_primary: "_use_primary_owus2_gg_",
+    _use_secondary: "_use_secondary_owus2_gg_",
+    _disabled: "__disabled_owus2_gg_"
+  })
+);
+function m(_, e) {
+  if (_)
+    return "underline";
+  if (e)
+    return "line-through";
+}
+function g(_, e) {
+  var t = arguments[0], o, i = d, s = _.color, a = _.underline, r = _.lineThrough, n = m(a, r), u = p();
+  return o = x(z), /* @__PURE__ */ h.createElement(i, o.cn("SText", l({}, f({
+    tag: "span",
+    "data-ui-name": "Text",
+    ref: e,
+    "use:decoration": n,
+    "use:color": u(s)
+  }, t))));
+}
+g.displayName = "Text";
+const A = c(g);
+export {
+  A as default
+};

package/lib/esm/index.mjs

@@ -0,0 +1,10 @@
+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";
+export {
+  f as Blockquote,
+  u as Hint,
+  l as List,
+  o as Text
+};

package/package.json

@@ -1,21 +1,26 @@
 {
   "name": "@semcore/typography",
   "description": "Semrush Typography Component",
-  "version": "5.52.0-prerelease.11",
+  "version": "5.52.0-prerelease.12",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",
   "sideEffects": false,
   "author": "UI-kit team <ui-kit-team@semrush.com>",
   "license": "MIT",
+  "exports": {
+    "require": "./lib/cjs/index.js",
+    "import": "./lib/esm/index.mjs",
+    "types": "./lib/types/index.d.ts"
+  },
   "dependencies": {
-    "@semcore/utils": "4.47.1-prerelease.11",
-    "@semcore/flex-box": "5.41.0-prerelease.11",
-    "@semcore/icon": "4.58.0-prerelease.11",
+    "@semcore/utils": "4.48.0-prerelease.12",
+    "@semcore/flex-box": "5.41.0-prerelease.12",
+    "@semcore/icon": "4.61.0-prerelease.12",
     "csstype": "3.0.8"
   },
   "peerDependencies": {
-    "@semcore/core": "^2.39.0-prerelease.11",
+    "@semcore/core": "^2.39.0-prerelease.12",
     "react": "16.8 - 18",
     "react-dom": "16.8 - 18"
   },
@@ -29,6 +34,6 @@
     "@semcore/testing-utils": "1.0.0"
   },
   "scripts": {
-    "build": "pnpm semcore-builder --source=js"
+    "build": "pnpm semcore-builder --source=js && pnpm vite build"
   }
 }

package/vite.config.ts

@@ -0,0 +1,24 @@
+import { defineConfig, mergeConfig } from 'vite';
+
+import viteConfig from '../../commonVite.config';
+
+export default mergeConfig(
+  viteConfig,
+  defineConfig({
+    build: {
+      lib: {
+        entry: './src/index.js',
+      },
+      rollupOptions: {
+        external: [
+          'react',
+          'react-dom',
+          'react/jsx-runtime',
+          /@babel\/runtime\/*/,
+          /@semcore\/*/,
+          'csstype',
+        ],
+      },
+    },
+  }),
+);