@semcore/typography 5.54.0-prerelease.1 → 5.54.0-prerelease.5

package/lib/es6/components/Text/Text.js

@@ -0,0 +1,180 @@
+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 _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { sstyled as _sstyled } from "@semcore/core";
+import { assignProps as _assignProps } from "@semcore/core";
+import { Ellipsis, Hint, Box } from '@semcore/base-components';
+import { Root, sstyled, Component, createComponent } from '@semcore/core';
+import resolveColorEnhance from '@semcore/core/lib/utils/enhances/resolveColorEnhance';
+import React from 'react';
+/*!__reshadow-styles__:"../../style/text.shadow.css"*/
+var styles = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/".___SText_18ujc_gg_{padding:0;margin:0}.___SText_18ujc_gg_.__formatTags_18ujc_gg_ abbr{color:var(--intergalactic-text-secondary, rgba(0, 3, 0, 0.583));-webkit-text-decoration:underline dashed var(--intergalactic-text-secondary, rgba(0, 3, 0, 0.583));text-decoration:underline dashed var(--intergalactic-text-secondary, rgba(0, 3, 0, 0.583))}@supports (color:color(display-p3 0 0 0%)){.___SText_18ujc_gg_.__formatTags_18ujc_gg_ abbr{color:var(--intergalactic-text-secondary, rgba(0, 3, 0, 0.583));-webkit-text-decoration:underline dashed var(--intergalactic-text-secondary, rgba(0, 3, 0, 0.583));text-decoration:underline dashed var(--intergalactic-text-secondary, rgba(0, 3, 0, 0.583))}@media (color-gamut:p3){.___SText_18ujc_gg_.__formatTags_18ujc_gg_ abbr{color:var(--intergalactic-text-secondary, color(display-p3 0.00228 0.01289 0.00252 / 0.583));-webkit-text-decoration:underline dashed var(--intergalactic-text-secondary, color(display-p3 0.00228 0.01289 0.00252 / 0.583));text-decoration:underline dashed var(--intergalactic-text-secondary, color(display-p3 0.00228 0.01289 0.00252 / 0.583))}}}.___SText_18ujc_gg_.__formatTags_18ujc_gg_ abbr:active,.___SText_18ujc_gg_.__formatTags_18ujc_gg_ abbr:focus{outline:0;color:var(--intergalactic-text-hint-hover-active, rgba(0, 3, 0, 0.605));-webkit-text-decoration:underline dashed var(--intergalactic-text-hint-hover-active, rgba(0, 3, 0, 0.605));text-decoration:underline dashed var(--intergalactic-text-hint-hover-active, rgba(0, 3, 0, 0.605))}@media (hover:hover){.___SText_18ujc_gg_.__formatTags_18ujc_gg_ abbr:hover{outline:0;color:var(--intergalactic-text-hint-hover-active, rgba(0, 3, 0, 0.605));-webkit-text-decoration:underline dashed var(--intergalactic-text-hint-hover-active, rgba(0, 3, 0, 0.605));text-decoration:underline dashed var(--intergalactic-text-hint-hover-active, rgba(0, 3, 0, 0.605))}}.___SText_18ujc_gg_.__formatTags_18ujc_gg_ a{display:inline;background:0 0;outline:0;-webkit-text-decoration:none;text-decoration:none;color:var(--intergalactic-text-link, rgb(35, 95, 226));border-bottom-width:1px;border-bottom-style:solid;border-color:transparent}.___SText_18ujc_gg_.__formatTags_18ujc_gg_ a:active{outline:0;-webkit-text-decoration:none;text-decoration:none;color:var(--intergalactic-text-link-hover-active, rgb(33, 89, 215));border-color:var(--intergalactic-text-link-hover-active, rgb(33, 89, 215))}@media (hover:hover){.___SText_18ujc_gg_.__formatTags_18ujc_gg_ a:hover{outline:0;-webkit-text-decoration:none;text-decoration:none;color:var(--intergalactic-text-link-hover-active, rgb(33, 89, 215));border-color:var(--intergalactic-text-link-hover-active, rgb(33, 89, 215))}}.___SText_18ujc_gg_.__formatTags_18ujc_gg_ a:focus{outline-color:var(--intergalactic-keyboard-focus-outline, rgba(0, 32, 221, 0.469));outline-style:solid;outline-width:2px;outline-offset:2px;transition-duration:calc(var(--intergalactic-duration-extra-fast, 100)*1ms);transition-timing-function:ease-in-out;transition-property:outline-color,outline-width,outline-offset}@supports (color:color(display-p3 0 0 0%)){.___SText_18ujc_gg_.__formatTags_18ujc_gg_ a:focus{outline-color:var(--intergalactic-keyboard-focus-outline, rgba(0, 32, 221, 0.469))}@media (color-gamut:p3){.___SText_18ujc_gg_.__formatTags_18ujc_gg_ a:focus{outline-color:var(--intergalactic-keyboard-focus-outline, color(display-p3 0.03256 0.12227 0.83249 / 0.469))}}}.___SText_18ujc_gg_.__formatTags_18ujc_gg_ code,.___SText_18ujc_gg_.__formatTags_18ujc_gg_ pre{font-family:Consolas,\"Roboto Mono\",Menlo,Courier,monospace}.___SText_18ujc_gg_.__formatTags_18ujc_gg_ blockquote{position:relative;padding-left:51px;font-size:var(--intergalactic-fs-400, 20px);line-height:var(--intergalactic-lh-400, 120%);font-style:italic}.___SText_18ujc_gg_.__formatTags_18ujc_gg_ blockquote:before{content:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNyIgaGVpZ2h0PSIxOSIgdmlld0JveD0iMCAwIDI3IDE5IiBmaWxsPSJub25lIj4KPHBhdGggZD0iTTguODI0MjIgMC45NDcyNjZWMi4zMDg1OUM2Ljg3NjMgMy4zMjY4MiA1LjQ4MTc3IDQuMzg5MzIgNC42NDA2MiA1LjQ5NjA5QzMuNzk5NDggNi42MDI4NiAzLjM3ODkxIDcuODA5MjQgMy4zNzg5MSA5LjExNTIzQzMuMzc4OTEgOS44ODk5NyAzLjQ4OTU4IDEwLjQyMTIgMy43MTA5NCAxMC43MDlDMy45MTAxNiAxMS4wMTg5IDQuMTUzNjUgMTEuMTczOCA0LjQ0MTQxIDExLjE3MzhDNC43MjkxNyAxMS4xNzM4IDUuMTE2NTQgMTEuMDk2NCA1LjYwMzUyIDEwLjk0MTRDNi4wOTA0OSAxMC43NjQzIDYuNTMzMiAxMC42NzU4IDYuOTMxNjQgMTAuNjc1OEM3LjgzOTE5IDEwLjY3NTggOC42MjUgMTEuMDE4OSA5LjI4OTA2IDExLjcwNTFDOS45NzUyNiAxMi4zNjkxIDEwLjMxODQgMTMuMTg4MiAxMC4zMTg0IDE0LjE2MjFDMTAuMzE4NCAxNS4yMjQ2IDkuOTA4ODUgMTYuMTQzMiA5LjA4OTg0IDE2LjkxOEM4LjI3MDgzIDE3LjY3MDYgNy4yNTI2IDE4LjA0NjkgNi4wMzUxNiAxOC4wNDY5QzQuNTUyMDggMTguMDQ2OSAzLjIxMjg5IDE3LjQwNDkgMi4wMTc1OCAxNi4xMjExQzAuODIyMjY2IDE0LjgzNzIgMC4yMjQ2MDkgMTMuMjU0NiAwLjIyNDYwOSAxMS4zNzNDMC4yMjQ2MDkgOS4xNTk1MSAwLjk1NTA3OCA3LjEwMDkxIDIuNDE2MDIgNS4xOTcyN0MzLjg5OTA5IDMuMjcxNDggNi4wMzUxNiAxLjg1NDgyIDguODI0MjIgMC45NDcyNjZaTTI0LjY2MjEgMS4wNDY4OFYyLjMwODU5QzIyLjQyNjQgMy41OTI0NSAyMC45NTQ0IDQuNzQzNDkgMjAuMjQ2MSA1Ljc2MTcyQzE5LjUzNzggNi43Nzk5NSAxOS4xODM2IDcuOTc1MjYgMTkuMTgzNiA5LjM0NzY2QzE5LjE4MzYgOS45Njc0NSAxOS4zMDUzIDEwLjQzMjMgMTkuNTQ4OCAxMC43NDIyQzE5Ljc5MjMgMTEuMDUyMSAyMC4wNDY5IDExLjIwNyAyMC4zMTI1IDExLjIwN0MyMC41NTYgMTEuMjA3IDIwLjkyMTIgMTEuMTE4NSAyMS40MDgyIDEwLjk0MTRDMjEuODk1MiAxMC43NjQzIDIyLjM4MjIgMTAuNjc1OCAyMi44NjkxIDEwLjY3NThDMjMuNzc2NyAxMC42NzU4IDI0LjU2MjUgMTEuMDA3OCAyNS4yMjY2IDExLjY3MTlDMjUuOTEyOCAxMi4zMTM4IDI2LjI1NTkgMTMuMTEwNyAyNi4yNTU5IDE0LjA2MjVDMjYuMjU1OSAxNS4xNDcxIDI1LjgyNDIgMTYuMDg3OSAyNC45NjA5IDE2Ljg4NDhDMjQuMTE5OCAxNy42ODE2IDIzLjA3OTQgMTguMDgwMSAyMS44Mzk4IDE4LjA4MDFDMjAuMzc4OSAxOC4wODAxIDE5LjA2MTggMTcuNDQ5MiAxNy44ODg3IDE2LjE4NzVDMTYuNzE1NSAxNC45MjU4IDE2LjEyODkgMTMuMzU0MiAxNi4xMjg5IDExLjQ3MjdDMTYuMTI4OSA5LjE0ODQ0IDE2Ljg3MDQgNy4wMzQ1MSAxOC4zNTM1IDUuMTMwODZDMTkuODM2NiAzLjIwNTA4IDIxLjkzOTUgMS44NDM3NSAyNC42NjIxIDEuMDQ2ODhaIiBmaWxsPSIjQTlBQkI2Ii8+Cjwvc3ZnPg==);display:inline-block;position:absolute;left:0;color:var(--intergalactic-icon-secondary-neutral, rgba(0, 5, 2, 0.385));font-family:Georgia,Times,\"Times New Roman\",serif}@supports (color:color(display-p3 0 0 0%)){.___SText_18ujc_gg_.__formatTags_18ujc_gg_ blockquote:before{color:var(--intergalactic-icon-secondary-neutral, rgba(0, 5, 2, 0.385))}@media (color-gamut:p3){.___SText_18ujc_gg_.__formatTags_18ujc_gg_ blockquote:before{color:var(--intergalactic-icon-secondary-neutral, color(display-p3 0.0036 0.02041 0.00996 / 0.385))}}}.___SText_18ujc_gg_.__formatTags_18ujc_gg_ blockquote cite{display:block;font-style:normal;margin-top:var(--intergalactic-spacing-4x, 16px);color:var(--intergalactic-text-secondary, rgba(0, 3, 0, 0.583));font-size:var(--intergalactic-fs-300, 16px);line-height:var(--intergalactic-lh-300, 150%)}@supports (color:color(display-p3 0 0 0%)){.___SText_18ujc_gg_.__formatTags_18ujc_gg_ blockquote cite{color:var(--intergalactic-text-secondary, rgba(0, 3, 0, 0.583))}@media (color-gamut:p3){.___SText_18ujc_gg_.__formatTags_18ujc_gg_ blockquote cite{color:var(--intergalactic-text-secondary, color(display-p3 0.00228 0.01289 0.00252 / 0.583))}}}.___SText_18ujc_gg_.__formatTags_18ujc_gg_ ol:not(ol[start]):not(ol[reversed]):not(ol[type]),.___SText_18ujc_gg_.__formatTags_18ujc_gg_ ul:not(ul[start]):not(ul[reversed]):not(ul[type]){margin:var(--intergalactic-spacing-2x, 8px)0;padding:0;list-style:none;position:relative}.___SText_18ujc_gg_.__formatTags_18ujc_gg_ ol:not(ol[start]):not(ol[reversed]):not(ol[type]) li:not(.___SText_18ujc_gg_):before,.___SText_18ujc_gg_.__formatTags_18ujc_gg_ ul:not(ul[start]):not(ul[reversed]):not(ul[type]) li:not(.___SText_18ujc_gg_):before{position:absolute;left:0;color:var(--intergalactic-text-secondary, rgba(0, 3, 0, 0.583))}@supports (color:color(display-p3 0 0 0%)){.___SText_18ujc_gg_.__formatTags_18ujc_gg_ ol:not(ol[start]):not(ol[reversed]):not(ol[type]) li:not(.___SText_18ujc_gg_):before,.___SText_18ujc_gg_.__formatTags_18ujc_gg_ ul:not(ul[start]):not(ul[reversed]):not(ul[type]) li:not(.___SText_18ujc_gg_):before{color:var(--intergalactic-text-secondary, rgba(0, 3, 0, 0.583))}@media (color-gamut:p3){.___SText_18ujc_gg_.__formatTags_18ujc_gg_ ol:not(ol[start]):not(ol[reversed]):not(ol[type]) li:not(.___SText_18ujc_gg_):before,.___SText_18ujc_gg_.__formatTags_18ujc_gg_ ul:not(ul[start]):not(ul[reversed]):not(ul[type]) li:not(.___SText_18ujc_gg_):before{color:var(--intergalactic-text-secondary, color(display-p3 0.00228 0.01289 0.00252 / 0.583))}}}.___SText_18ujc_gg_.__formatTags_18ujc_gg_ ol:not(ol[start]):not(ol[reversed]):not(ol[type]) li:not(.___SText_18ujc_gg_)+li:not(.___SText_18ujc_gg_),.___SText_18ujc_gg_.__formatTags_18ujc_gg_ ul:not(ul[start]):not(ul[reversed]):not(ul[type]) li:not(.___SText_18ujc_gg_)+li:not(.___SText_18ujc_gg_){margin:var(--intergalactic-spacing-2x, 8px)0 0 0}.___SText_18ujc_gg_.__formatTags_18ujc_gg_ ol:not(ol[start]):not(ol[reversed]):not(ol[type]){counter-reset:item 0}.___SText_18ujc_gg_.__formatTags_18ujc_gg_ ol:not(ol[start]):not(ol[reversed]):not(ol[type]) li:not(.___SText_18ujc_gg_):before{counter-increment:item;content:counters(item,\".\")}.___SText_18ujc_gg_.__formatTags_18ujc_gg_ ul:not(ul[start]):not(ul[reversed]):not(ul[type]) li:not(.___SText_18ujc_gg_):before{content:\"\";background-color:var(--intergalactic-icon-primary-neutral, rgba(0, 4, 1, 0.526))}.___SText_18ujc_gg_.__formatTags_18ujc_gg_ ol:not(ol[start]):not(ol[reversed]):not(ol[type]):has(+p),.___SText_18ujc_gg_.__formatTags_18ujc_gg_ ul:not(ul[start]):not(ul[reversed]):not(ul[type]):has(+p){margin-bottom:var(--intergalactic-spacing-4x, 16px)}.___SText_18ujc_gg_.__formatTags_18ujc_gg_ 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}.___SText_18ujc_gg_.__formatTags_18ujc_gg_ h1:only-child,.___SText_18ujc_gg_.__formatTags_18ujc_gg_ h2:only-child,.___SText_18ujc_gg_.__formatTags_18ujc_gg_ h3:only-child,.___SText_18ujc_gg_.__formatTags_18ujc_gg_ h4:only-child,.___SText_18ujc_gg_.__formatTags_18ujc_gg_ h5:only-child,.___SText_18ujc_gg_.__formatTags_18ujc_gg_ h6:only-child{margin-bottom:0}.___SText_18ujc_gg_.__formatTags_18ujc_gg_ h2,.___SText_18ujc_gg_.__formatTags_18ujc_gg_ h3{font-weight:var(--intergalactic-semi-bold, 600);margin:0 0 var(--intergalactic-spacing-4x, 16px)0}.___SText_18ujc_gg_.__formatTags_18ujc_gg_ h2{font-size:var(--intergalactic-fs-700, 36px);line-height:var(--intergalactic-lh-700, 110%)}.___SText_18ujc_gg_.__formatTags_18ujc_gg_ h3{font-size:var(--intergalactic-fs-600, 32px);line-height:var(--intergalactic-lh-600, 125%)}.___SText_18ujc_gg_.__formatTags_18ujc_gg_ 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}.___SText_18ujc_gg_.__formatTags_18ujc_gg_ 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}.___SText_18ujc_gg_.__formatTags_18ujc_gg_ 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}.___SText_18ujc_gg_.__formatTags_18ujc_gg_ h1 small,.___SText_18ujc_gg_.__formatTags_18ujc_gg_ h2 small,.___SText_18ujc_gg_.__formatTags_18ujc_gg_ h3 small,.___SText_18ujc_gg_.__formatTags_18ujc_gg_ h4 small,.___SText_18ujc_gg_.__formatTags_18ujc_gg_ h5 small,.___SText_18ujc_gg_.__formatTags_18ujc_gg_ h6 small{color:var(--intergalactic-text-secondary, rgba(0, 3, 0, 0.583));font-weight:300;font-size:100%}@supports (color:color(display-p3 0 0 0%)){.___SText_18ujc_gg_.__formatTags_18ujc_gg_ h1 small,.___SText_18ujc_gg_.__formatTags_18ujc_gg_ h2 small,.___SText_18ujc_gg_.__formatTags_18ujc_gg_ h3 small,.___SText_18ujc_gg_.__formatTags_18ujc_gg_ h4 small,.___SText_18ujc_gg_.__formatTags_18ujc_gg_ h5 small,.___SText_18ujc_gg_.__formatTags_18ujc_gg_ h6 small{color:var(--intergalactic-text-secondary, rgba(0, 3, 0, 0.583))}@media (color-gamut:p3){.___SText_18ujc_gg_.__formatTags_18ujc_gg_ h1 small,.___SText_18ujc_gg_.__formatTags_18ujc_gg_ h2 small,.___SText_18ujc_gg_.__formatTags_18ujc_gg_ h3 small,.___SText_18ujc_gg_.__formatTags_18ujc_gg_ h4 small,.___SText_18ujc_gg_.__formatTags_18ujc_gg_ h5 small,.___SText_18ujc_gg_.__formatTags_18ujc_gg_ h6 small{color:var(--intergalactic-text-secondary, color(display-p3 0.00228 0.01289 0.00252 / 0.583))}}}.___SText_18ujc_gg_.__formatTags_18ujc_gg_ li,.___SText_18ujc_gg_.__formatTags_18ujc_gg_ p{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%)}.___SText_18ujc_gg_.__formatTags_18ujc_gg_ p{margin:0 0 var(--intergalactic-spacing-4x, 16px)0}.___SText_18ujc_gg_.__formatTags_18ujc_gg_ p:last-child,.___SText_18ujc_gg_._size_100_18ujc_gg_.__formatTags_18ujc_gg_ p:last-child,.___SText_18ujc_gg_._size_200_18ujc_gg_.__formatTags_18ujc_gg_ p:last-child,.___SText_18ujc_gg_._size_300_18ujc_gg_.__formatTags_18ujc_gg_ p:last-child{margin-bottom:0}.___SText_18ujc_gg_.__formatTags_18ujc_gg_ li{padding-left:calc(var(--intergalactic-spacing-4x, 16px) + var(--intergalactic-spacing-05x, 2px))}.___SText_18ujc_gg_.__formatTags_18ujc_gg_ ol ol li,.___SText_18ujc_gg_._size_100_18ujc_gg_.__formatTags_18ujc_gg_ ol ol li{padding-left:calc(var(--intergalactic-spacing-6x, 24px) + var(--intergalactic-spacing-05x, 2px))}.___SText_18ujc_gg_.__formatTags_18ujc_gg_ ol ol ol li,.___SText_18ujc_gg_._size_100_18ujc_gg_.__formatTags_18ujc_gg_ ol ol ol li,.___SText_18ujc_gg_._size_200_18ujc_gg_.__formatTags_18ujc_gg_ ol ol ol li,.___SText_18ujc_gg_._size_300_18ujc_gg_.__formatTags_18ujc_gg_ ol ol ol li{padding-left:calc(var(--intergalactic-spacing-8x, 32px) + var(--intergalactic-spacing-1x, 4px) + var(--intergalactic-spacing-05x, 2px))}.___SText_18ujc_gg_.__formatTags_18ujc_gg_ ul li:before{width:4px;height:4px;border-radius:50%;margin-top:calc(var(--intergalactic-spacing-2x, 8px) - 1px);margin-left:var(--intergalactic-spacing-05x, 2px)}.___SText_18ujc_gg_.__ellipsis_18ujc_gg_{overflow:hidden;text-overflow:ellipsis;white-space:pre;display:inline-block;line-height:inherit;vertical-align:top}.___SText_18ujc_gg_.__ellipsis_18ujc_gg_._trim_end_18ujc_gg_.__isEllipsized_18ujc_gg_::after{content:\"\";display:block}.___SText_18ujc_gg_.__ellipsis_18ujc_gg_.__maxLine_18ujc_gg_{-webkit-line-clamp:var(--maxLine_18ujc);display:-webkit-box;-webkit-box-orient:vertical;white-space:normal;word-wrap:break-word}.___SText_18ujc_gg_.__ellipsis_18ujc_gg_._trim_middle_18ujc_gg_{text-overflow:initial}.___SText_18ujc_gg_._size_100_18ujc_gg_,.___SText_18ujc_gg_._size_100_18ujc_gg_.__formatTags_18ujc_gg_ li,.___SText_18ujc_gg_._size_100_18ujc_gg_.__formatTags_18ujc_gg_ p{font-size:var(--intergalactic-fs-100, 12px);line-height:var(--intergalactic-lh-100, 133%)}.___SText_18ujc_gg_._size_100_18ujc_gg_.__formatTags_18ujc_gg_ p{margin:0 0 calc(var(--intergalactic-spacing-4x, 16px) + var(--intergalactic-spacing-05x, 2px))}.___SText_18ujc_gg_._size_100_18ujc_gg_.__formatTags_18ujc_gg_ li{padding-left:calc(var(--intergalactic-spacing-4x, 16px) + var(--intergalactic-spacing-05x, 2px))}.___SText_18ujc_gg_._size_100_18ujc_gg_.__formatTags_18ujc_gg_ 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_18ujc_gg_._size_200_18ujc_gg_,.___SText_18ujc_gg_._size_200_18ujc_gg_.__formatTags_18ujc_gg_ li,.___SText_18ujc_gg_._size_200_18ujc_gg_.__formatTags_18ujc_gg_ p{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%)}.___SText_18ujc_gg_._size_200_18ujc_gg_.__formatTags_18ujc_gg_ p{margin:0 0 var(--intergalactic-spacing-3x, 12px)0}.___SText_18ujc_gg_._size_200_18ujc_gg_.__formatTags_18ujc_gg_ li{padding-left:calc(var(--intergalactic-spacing-4x, 16px) + var(--intergalactic-spacing-05x, 2px))}.___SText_18ujc_gg_._size_200_18ujc_gg_.__formatTags_18ujc_gg_ ol ol li{padding-left:calc(var(--intergalactic-spacing-6x, 24px) + var(--intergalactic-spacing-05x, 2px))}.___SText_18ujc_gg_._size_200_18ujc_gg_.__formatTags_18ujc_gg_ ul li:before{width:4px;height:4px;border-radius:50%;margin-top:calc(var(--intergalactic-spacing-2x, 8px) - 1px);margin-left:var(--intergalactic-spacing-05x, 2px)}.___SText_18ujc_gg_._size_300_18ujc_gg_,.___SText_18ujc_gg_._size_300_18ujc_gg_.__formatTags_18ujc_gg_ li,.___SText_18ujc_gg_._size_300_18ujc_gg_.__formatTags_18ujc_gg_ p{font-size:var(--intergalactic-fs-300, 16px);line-height:var(--intergalactic-lh-300, 150%)}.___SText_18ujc_gg_._size_300_18ujc_gg_.__formatTags_18ujc_gg_ p{margin:0 0 var(--intergalactic-spacing-4x, 16px)0}.___SText_18ujc_gg_._size_300_18ujc_gg_.__formatTags_18ujc_gg_ li{padding-left:calc(var(--intergalactic-spacing-4x, 16px) + var(--intergalactic-spacing-05x, 2px))}.___SText_18ujc_gg_._size_300_18ujc_gg_.__formatTags_18ujc_gg_ ol ol li{padding-left:calc(var(--intergalactic-spacing-6x, 24px) + var(--intergalactic-spacing-05x, 2px))}.___SText_18ujc_gg_._size_300_18ujc_gg_.__formatTags_18ujc_gg_ 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_18ujc_gg_._size_400_18ujc_gg_{font-size:var(--intergalactic-fs-400, 20px);line-height:var(--intergalactic-lh-400, 120%)}.___SText_18ujc_gg_._size_500_18ujc_gg_{font-size:var(--intergalactic-fs-500, 24px);line-height:var(--intergalactic-lh-500, 117%)}.___SText_18ujc_gg_._size_600_18ujc_gg_{font-size:var(--intergalactic-fs-600, 32px);line-height:var(--intergalactic-lh-600, 125%)}.___SText_18ujc_gg_._size_700_18ujc_gg_{font-size:var(--intergalactic-fs-700, 36px);line-height:var(--intergalactic-lh-700, 110%)}.___SText_18ujc_gg_._size_800_18ujc_gg_{font-size:var(--intergalactic-fs-800, 48px);line-height:var(--intergalactic-lh-800, 117%)}.___SText_18ujc_gg_.__noWrap_18ujc_gg_{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___SText_18ujc_gg_.__medium_18ujc_gg_{font-weight:var(--intergalactic-medium, 500)}.___SText_18ujc_gg_.__semibold_18ujc_gg_{font-weight:var(--intergalactic-semi-bold, 600)}.___SText_18ujc_gg_.__bold_18ujc_gg_{font-weight:var(--intergalactic-bold, 700)}.___SText_18ujc_gg_.__italic_18ujc_gg_{font-style:italic}.___SText_18ujc_gg_.__monospace_18ujc_gg_{font-family:Consolas,\"Roboto Mono\",Menlo,Courier,monospace}.___SText_18ujc_gg_.__uppercase_18ujc_gg_{text-transform:uppercase}.___SText_18ujc_gg_.__lowercase_18ujc_gg_{text-transform:lowercase}.___SText_18ujc_gg_.__capitalize_18ujc_gg_{text-transform:capitalize}.___SText_18ujc_gg_.__decoration_18ujc_gg_{-webkit-text-decoration:var(--decoration_18ujc);text-decoration:var(--decoration_18ujc)}.___SText_18ujc_gg_.__color_18ujc_gg_{color:var(--color_18ujc)}.___SText_18ujc_gg_.__fontSize_18ujc_gg_{font-size:var(--fontSize_18ujc)}.___SText_18ujc_gg_.__lineHeight_18ujc_gg_{line-height:var(--lineHeight_18ujc)}.___SText_18ujc_gg_.__fontWeight_18ujc_gg_{font-weight:var(--fontWeight_18ujc)}.___SText_18ujc_gg_.__textAlign_18ujc_gg_{text-align:var(--textAlign_18ujc)}.___SText_18ujc_gg_._use_primary_18ujc_gg_{color:var(--intergalactic-text-primary, rgba(1, 5, 0, 0.899))}.___SText_18ujc_gg_._use_secondary_18ujc_gg_{color:var(--intergalactic-text-secondary, rgba(0, 3, 0, 0.583))}@supports (color:color(display-p3 0 0 0%)){.___SText_18ujc_gg_._use_secondary_18ujc_gg_{color:var(--intergalactic-text-secondary, rgba(0, 3, 0, 0.583))}@media (color-gamut:p3){.___SText_18ujc_gg_._use_secondary_18ujc_gg_{color:var(--intergalactic-text-secondary, color(display-p3 0.00228 0.01289 0.00252 / 0.583))}}}.___SText_18ujc_gg_.__disabled_18ujc_gg_{opacity:var(--intergalactic-disabled-opacity, 0.4)}@media (prefers-reduced-motion){.___SText_18ujc_gg_ a{transition:none}}", /*__inner_css_end__*/"18ujc_gg_"),
+/*__reshadow_css_end__*/
+{
+  "__SText": "___SText_18ujc_gg_",
+  "_size_400": "_size_400_18ujc_gg_",
+  "_size_500": "_size_500_18ujc_gg_",
+  "_size_600": "_size_600_18ujc_gg_",
+  "_size_700": "_size_700_18ujc_gg_",
+  "_size_800": "_size_800_18ujc_gg_",
+  "_noWrap": "__noWrap_18ujc_gg_",
+  "_medium": "__medium_18ujc_gg_",
+  "_semibold": "__semibold_18ujc_gg_",
+  "_bold": "__bold_18ujc_gg_",
+  "_italic": "__italic_18ujc_gg_",
+  "_monospace": "__monospace_18ujc_gg_",
+  "_uppercase": "__uppercase_18ujc_gg_",
+  "_lowercase": "__lowercase_18ujc_gg_",
+  "_capitalize": "__capitalize_18ujc_gg_",
+  "_decoration": "__decoration_18ujc_gg_",
+  "--decoration": "--decoration_18ujc",
+  "_color": "__color_18ujc_gg_",
+  "--color": "--color_18ujc",
+  "_fontSize": "__fontSize_18ujc_gg_",
+  "--fontSize": "--fontSize_18ujc",
+  "_lineHeight": "__lineHeight_18ujc_gg_",
+  "--lineHeight": "--lineHeight_18ujc",
+  "_fontWeight": "__fontWeight_18ujc_gg_",
+  "--fontWeight": "--fontWeight_18ujc",
+  "_textAlign": "__textAlign_18ujc_gg_",
+  "--textAlign": "--textAlign_18ujc",
+  "_use_primary": "_use_primary_18ujc_gg_",
+  "_use_secondary": "_use_secondary_18ujc_gg_",
+  "_disabled": "__disabled_18ujc_gg_",
+  "_formatTags": "__formatTags_18ujc_gg_",
+  "_ellipsis": "__ellipsis_18ujc_gg_",
+  "_trim_end": "_trim_end_18ujc_gg_",
+  "_isEllipsized": "__isEllipsized_18ujc_gg_",
+  "_maxLine": "__maxLine_18ujc_gg_",
+  "--maxLine": "--maxLine_18ujc",
+  "_trim_middle": "_trim_middle_18ujc_gg_",
+  "_size_100": "_size_100_18ujc_gg_",
+  "_size_200": "_size_200_18ujc_gg_",
+  "_size_300": "_size_300_18ujc_gg_"
+});
+var TextRoot = /*#__PURE__*/function (_Component) {
+  function TextRoot(props) {
+    var _this;
+    _classCallCheck(this, TextRoot);
+    _this = _callSuper(this, TextRoot, [props]);
+    _defineProperty(_this, "ellipsis", null);
+    _defineProperty(_this, "innerRef", /*#__PURE__*/React.createRef());
+    _defineProperty(_this, "state", {
+      isEllipsized: false
+    });
+    _this.handleEllipsized = _this.handleEllipsized.bind(_this);
+    return _this;
+  }
+  _inherits(TextRoot, _Component);
+  return _createClass(TextRoot, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.initEllipsis();
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      var _this2 = this;
+      var ellipsisKeys = ['cropPosition', 'maxLine', 'lastRequiredSymbols', 'containerElement', 'recalculateContainerWidth', 'observeChildrenMutations'];
+      var hasChanges = ellipsisKeys.some(function (key) {
+        return prevProps["ellipsis:".concat(key)] !== _this2.asProps["ellipsis:".concat(key)];
+      });
+      if (prevProps.ellipsis !== this.asProps.ellipsis || hasChanges) {
+        this.cleanUpEllipsis();
+        this.initEllipsis();
+      }
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.cleanUpEllipsis();
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _ref = this.asProps,
+        _ref2,
+        _ellipsisProps$cropPo;
+      var SText = Box;
+      var _this$asProps = this.asProps,
+        color = _this$asProps.color,
+        underline = _this$asProps.underline,
+        lineThrough = _this$asProps.lineThrough,
+        hint = _this$asProps.hint,
+        hintProps = _this$asProps.hintProps,
+        children = _this$asProps.children,
+        ellipsis = _this$asProps.ellipsis,
+        ellipsisProps = _this$asProps.ellipsisProps,
+        resolveColor = _this$asProps.resolveColor;
+      var isEllipsized = this.state.isEllipsized;
+      var cropPosition = (_ellipsisProps$cropPo = ellipsisProps === null || ellipsisProps === void 0 ? void 0 : ellipsisProps.cropPosition) !== null && _ellipsisProps$cropPo !== void 0 ? _ellipsisProps$cropPo : 'end';
+      var withHint = hint !== false;
+      var maxLineValue = ellipsisProps === null || ellipsisProps === void 0 ? void 0 : ellipsisProps.maxLine;
+      if (hint !== true && hintProps === undefined && maxLineValue !== undefined && maxLineValue > 1) {
+        withHint = false;
+      }
+      return _ref2 = sstyled(styles), /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SText, _ref2.cn("SText", _objectSpread({}, _assignProps({
+        "tag": 'span',
+        "data-ui-name": 'Text',
+        "ref": this.innerRef,
+        "use:decoration": this.getTextDecoration(underline, lineThrough),
+        "use:color": resolveColor(color),
+        "use:ellipsis": ellipsis !== undefined ? ellipsis : Boolean(ellipsisProps),
+        "isEllipsized": isEllipsized,
+        "maxLine": maxLineValue,
+        "trim": cropPosition
+      }, _ref)))), isEllipsized && withHint && /*#__PURE__*/React.createElement(Hint, _ref2.cn("Hint", _objectSpread({
+        "triggerRef": this.innerRef
+      }, hintProps)), children));
+    }
+  }, {
+    key: "handleEllipsized",
+    value: function handleEllipsized(isEllipsized) {
+      this.setState({
+        isEllipsized: isEllipsized
+      });
+    }
+  }, {
+    key: "initEllipsis",
+    value: function initEllipsis() {
+      var _this$asProps2 = this.asProps,
+        ellipsis = _this$asProps2.ellipsis,
+        ellipsisProps = _this$asProps2.ellipsisProps,
+        hint = _this$asProps2.hint;
+      var shouldInit = hint !== false || (ellipsisProps === null || ellipsisProps === void 0 ? void 0 : ellipsisProps.cropPosition) === 'middle';
+      if (shouldInit && (ellipsis || ellipsisProps) && this.innerRef.current) {
+        this.ellipsis = ellipsis instanceof Ellipsis ? ellipsis : new Ellipsis(this.innerRef.current, ellipsisProps !== null && ellipsisProps !== void 0 ? ellipsisProps : {});
+        this.ellipsis.on('isEllipsized', this.handleEllipsized);
+      }
+    }
+  }, {
+    key: "cleanUpEllipsis",
+    value: function cleanUpEllipsis() {
+      var _this$ellipsis, _this$ellipsis2;
+      (_this$ellipsis = this.ellipsis) === null || _this$ellipsis === void 0 || _this$ellipsis.off('isEllipsized', this.handleEllipsized);
+      (_this$ellipsis2 = this.ellipsis) === null || _this$ellipsis2 === void 0 || _this$ellipsis2.cleanUp();
+      this.setState({
+        isEllipsized: false
+      });
+    }
+  }, {
+    key: "getTextDecoration",
+    value: function getTextDecoration(underline, lineThrough) {
+      if (underline) {
+        return 'underline';
+      }
+      if (lineThrough) {
+        return 'line-through';
+      }
+    }
+  }]);
+}(Component);
+_defineProperty(TextRoot, "enhance", [resolveColorEnhance()]);
+_defineProperty(TextRoot, "styles", styles);
+_defineProperty(TextRoot, "displayName", 'Text');
+var Text = createComponent(TextRoot);
+export default Text;
+//# sourceMappingURL=Text.js.map

package/lib/es6/components/Text/Text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Text.js","names":["Ellipsis","Hint","Box","Root","sstyled","Component","createComponent","resolveColorEnhance","React","styles","_sstyled","insert","TextRoot","_Component","props","_this","_classCallCheck","_callSuper","_defineProperty","createRef","isEllipsized","handleEllipsized","bind","_inherits","_createClass","key","value","componentDidMount","initEllipsis","componentDidUpdate","prevProps","_this2","ellipsisKeys","hasChanges","some","concat","asProps","ellipsis","cleanUpEllipsis","componentWillUnmount","render","_ref","_ref2","_ellipsisProps$cropPo","SText","_this$asProps","color","underline","lineThrough","hint","hintProps","children","ellipsisProps","resolveColor","state","cropPosition","withHint","maxLineValue","maxLine","undefined","createElement","Fragment","cn","_objectSpread","_assignProps","innerRef","getTextDecoration","Boolean","setState","_this$asProps2","shouldInit","current","on","_this$ellipsis","_this$ellipsis2","off","cleanUp","Text"],"sources":["../../../../src/components/Text/Text.tsx"],"sourcesContent":["import { Ellipsis, Hint, Box, type EllipsisSettings } from '@semcore/base-components';\nimport type { Intergalactic } from '@semcore/core';\nimport { Root, sstyled, Component, createComponent } from '@semcore/core';\nimport resolveColorEnhance from '@semcore/core/lib/utils/enhances/resolveColorEnhance';\nimport React from 'react';\n\nimport type { NSText } from './Text.type';\nimport styles from '../../style/text.shadow.css';\n\ntype State = {\n  isEllipsized: boolean;\n};\n\nclass TextRoot extends Component<\n  Intergalactic.InternalTypings.InferComponentProps<NSText.Component>,\n  typeof TextRoot.enhance,\n  {},\n  {},\n  State\n> {\n  private ellipsis: Ellipsis | null = null;\n  private innerRef = React.createRef<HTMLElement | null>();\n\n  static enhance = [resolveColorEnhance()] as const;\n  static styles = styles;\n  static displayName = 'Text';\n\n  state = {\n    isEllipsized: false,\n  };\n\n  constructor(props: NSText.Props) {\n    super(props);\n\n    this.handleEllipsized = this.handleEllipsized.bind(this);\n  }\n\n  componentDidMount(): void {\n    this.initEllipsis();\n  }\n\n  componentDidUpdate(prevProps: NSText.EllipsisProps) {\n    const ellipsisKeys: Array<keyof EllipsisSettings> = [\n      'cropPosition',\n      'maxLine',\n      'lastRequiredSymbols',\n      'containerElement',\n      'recalculateContainerWidth',\n      'observeChildrenMutations',\n    ];\n\n    const hasChanges = ellipsisKeys.some((key) => {\n      return prevProps[`ellipsis:${key}`] !== this.asProps[`ellipsis:${key}`];\n    });\n\n    if (prevProps.ellipsis !== this.asProps.ellipsis || hasChanges) {\n      this.cleanUpEllipsis();\n\n      this.initEllipsis();\n    }\n  }\n\n  componentWillUnmount() {\n    this.cleanUpEllipsis();\n  }\n\n  render(): React.ReactNode {\n    const SText = Root;\n    const { color, underline, lineThrough, hint, hintProps, children, ellipsis, ellipsisProps, resolveColor } =\n      this.asProps;\n    const { isEllipsized } = this.state;\n\n    const cropPosition = ellipsisProps?.cropPosition ?? 'end';\n    let withHint = hint !== false;\n\n    const maxLineValue = ellipsisProps?.maxLine;\n    if (hint !== true && hintProps === undefined && maxLineValue !== undefined && maxLineValue > 1) {\n      withHint = false;\n    }\n\n    return sstyled(styles)(\n      <>\n        <SText\n          render={Box}\n          tag='span'\n          data-ui-name='Text'\n          ref={this.innerRef}\n          use:decoration={this.getTextDecoration(underline, lineThrough)}\n          use:color={resolveColor(color)}\n          use:ellipsis={ellipsis !== undefined ? ellipsis : Boolean(ellipsisProps)}\n          isEllipsized={isEllipsized}\n          maxLine={maxLineValue}\n          trim={cropPosition}\n        />\n        {isEllipsized && withHint && (\n          <Hint triggerRef={this.innerRef} {...hintProps}>\n            {children}\n          </Hint>\n        )}\n      </>,\n    );\n  }\n\n  private handleEllipsized(isEllipsized: boolean) {\n    this.setState({ isEllipsized: isEllipsized });\n  }\n\n  private initEllipsis() {\n    const { ellipsis, ellipsisProps, hint } = this.asProps;\n    const shouldInit = hint !== false || ellipsisProps?.cropPosition === 'middle';\n\n    if (shouldInit && (ellipsis || ellipsisProps) && this.innerRef.current) {\n      this.ellipsis =\n        ellipsis instanceof Ellipsis ? ellipsis : new Ellipsis(this.innerRef.current, ellipsisProps ?? {});\n\n      this.ellipsis.on('isEllipsized', this.handleEllipsized);\n    }\n  }\n\n  private cleanUpEllipsis() {\n    this.ellipsis?.off('isEllipsized', this.handleEllipsized);\n    this.ellipsis?.cleanUp();\n    this.setState({ isEllipsized: false });\n  }\n\n  private getTextDecoration(underline?: boolean, lineThrough?: boolean) {\n    if (underline) {\n      return 'underline';\n    }\n\n    if (lineThrough) {\n      return 'line-through';\n    }\n  }\n}\n\nconst Text = createComponent(TextRoot) as NSText.Component;\n\nexport default Text;\n"],"mappings":"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","ignoreList":[]}

package/lib/es6/components/Text/Text.type.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Text.type.js.map

package/lib/es6/components/Text/Text.type.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Text.type.js","names":[],"sources":["../../../../src/components/Text/Text.type.ts"],"sourcesContent":["import type {\n  BoxProps,\n  EllipsisSettings,\n  SimpleHintPopperProps,\n  Ellipsis as EllipsisInstance,\n} from '@semcore/base-components';\nimport type { Intergalactic } from '@semcore/core';\nimport type { Property } from 'csstype';\n\ndeclare namespace NSText {\n  type BaseProps = {\n    /** Font size and line-heights */\n    size?: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800;\n    /**\n     * The text will not be wrapped on a new line and will be cut off with ellipsis\n     * @deprecated use ellipsis prop instead\n     **/\n    noWrap?: boolean;\n    /** CSS property `font-weight: 700;` */\n    bold?: boolean;\n    /** CSS property `font-weight: 600;` */\n    semibold?: boolean;\n    /** CSS property `font-weight: 500;` */\n    medium?: boolean;\n    /** Italicized text */\n    italic?: boolean;\n    /** Underlined text */\n    underline?: boolean;\n    /** CSS property `font-family: monospace;` */\n    monospace?: boolean;\n    /** Strikethrough text */\n    lineThrough?: boolean;\n    /** Uppercase text */\n    uppercase?: boolean;\n    /** Lowercase text */\n    lowercase?: boolean;\n    /** Capitalized text */\n    capitalize?: boolean;\n    /** Text color **/\n    color?: string;\n    /** Custom `font-size` */\n    fontSize?: Property.FontSize<any>;\n    /** Custom `line-height` */\n    lineHeight?: Property.LineHeight<any>;\n    /** Custom `font-weight` */\n    fontWeight?: Property.FontWeight;\n    /** Text alignment */\n    textAlign?: Property.TextAlign;\n    /** Enforces text color */\n    use?: 'primary' | 'secondary';\n    /** Makes text semi-transparent to indicate disabled state */\n    disabled?: boolean;\n  };\n\n  type HintProps = {\n    /** Manually enabled/disabled Hint */\n    hint?: boolean;\n  } & {\n    /** Settings for a hint with full text (cropped by ellipsis) */\n    [K in keyof SimpleHintPopperProps as `hint:${string & K}`]?: SimpleHintPopperProps[K];\n  };\n\n  type EllipsisProps = {\n    /** Manually enabled/disabled Ellipsis or provide an instance of it. */\n    ellipsis?: boolean | EllipsisInstance;\n  } & {\n    /** Settings for an Ellipsis */\n    [K in keyof EllipsisSettings as `ellipsis:${string & K}`]?: EllipsisSettings[K];\n  };\n\n  type Props = BoxProps & NSText.BaseProps &\n    (\n      | {\n        /** Enable formatting/styling for all nested HTML tags with our default styles for them */\n        formatTags?: boolean;\n        ellipsis?: never;\n        ellipsisProps?: never;\n        hint?: never;\n        hintProps?: never;\n      }\n      | ({\n        formatTags?: never;\n      } & NSText.HintProps & NSText.EllipsisProps)\n    );\n\n  type Component = Intergalactic.Component<'span', Props>;\n}\n\n/** @deprecated It will be removed in v18. */\nexport type TextHintProps = NSText.HintProps;\n/** @deprecated It will be removed in v18. */\nexport type TextEllipsisProps = NSText.EllipsisProps;\n/** @deprecated It will be removed in v18. */\nexport type BaseTextProps = NSText.BaseProps;\n/** @deprecated It will be removed in v18. */\nexport type TextProps = NSText.Props;\n/** @deprecated It will be removed in v18. */\nexport type TextComponent = NSText.Component;\n\nexport type { NSText };\n"],"mappings":"","ignoreList":[]}

package/lib/es6/index.js

@@ -1,5 +1,7 @@
-export { default as Text } from './Text';
-export { default as Blockquote } from './Blockquote';
-export { default as List } from './List';
-export { default as Hint } from './Hint';
+export { default as Text } from './components/Text/Text';
+export { default as Blockquote } from './components/Blockquote/Blockquote';
+export { default as List } from './components/List/List';
+export * from './components/Text/Text.type';
+export * from './components/Blockquote/Blockquote.type';
+export * from './components/List/List.type';
 //# sourceMappingURL=index.js.map

package/lib/es6/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["default","Text","Blockquote","List","Hint"],"sources":["../../src/index.js"],"sourcesContent":["export { default as Text } from './Text';\nexport { default as Blockquote } from './Blockquote';\nexport { default as List } from './List';\nexport { default as Hint } from './Hint';\n"],"mappings":"AAAA,SAASA,OAAO,IAAIC,IAAI,QAAQ,QAAQ;AACxC,SAASD,OAAO,IAAIE,UAAU,QAAQ,cAAc;AACpD,SAASF,OAAO,IAAIG,IAAI,QAAQ,QAAQ;AACxC,SAASH,OAAO,IAAII,IAAI,QAAQ,QAAQ"}
+{"version":3,"file":"index.js","names":["default","Text","Blockquote","List"],"sources":["../../src/index.ts"],"sourcesContent":["export { default as Text } from './components/Text/Text';\nexport { default as Blockquote } from './components/Blockquote/Blockquote';\nexport { default as List } from './components/List/List';\n\nexport * from './components/Text/Text.type';\nexport * from './components/Blockquote/Blockquote.type';\nexport * from './components/List/List.type';\n"],"mappings":"AAAA,SAASA,OAAO,IAAIC,IAAI,QAAQ,wBAAwB;AACxD,SAASD,OAAO,IAAIE,UAAU,QAAQ,oCAAoC;AAC1E,SAASF,OAAO,IAAIG,IAAI,QAAQ,wBAAwB;AAExD,cAAc,6BAA6B;AAC3C,cAAc,yCAAyC;AACvD,cAAc,6BAA6B","ignoreList":[]}

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

@@ -1,21 +1,379 @@
 SText {
   padding: 0;
   margin: 0;
+
+  &[formatTags] {
+
+    & abbr {
+      color: var(--intergalactic-text-secondary, oklch(0.088 0.026 147.7 / 0.583));
+      text-decoration: underline dashed var(--intergalactic-text-secondary, oklch(0.088 0.026 147.7 / 0.583));
+
+      &:active,
+      &:hover,
+      &:focus {
+        outline: none;
+        color: var(--intergalactic-text-hint-hover-active, oklch(0.086 0.026 145.8 / 0.605));
+        text-decoration: underline dashed var(--intergalactic-text-hint-hover-active, oklch(0.086 0.026 145.8 / 0.605));
+      }
+    }
+
+    & a {
+      display: inline;
+      background: none;
+      outline: none;
+      text-decoration: none;
+      color: var(--intergalactic-text-link, oklch(0.53 0.21 263));
+      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, oklch(0.51 0.202 263));
+        border-color: var(--intergalactic-text-link-hover-active, oklch(0.51 0.202 263));
+      }
+
+      &:focus {
+        @mixin focus-outline-mixin;
+      }
+    }
+
+    & 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, oklch(0.104 0.023 162.3 / 0.385));
+        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, oklch(0.088 0.026 147.7 / 0.583));
+        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, oklch(0.088 0.026 147.7 / 0.583));
+        }
+      }
+
+      & 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, oklch(0.092 0.024 152.2 / 0.526));
+    }
+
+    & ol:not(ol[start], ol[reversed], ol[type]):has(+ p),
+    & ul:not(ul[start], ul[reversed], ul[type]):has(+ p) {
+      margin-bottom: var(--intergalactic-spacing-4x, 16px);
+    }
+
+    & 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, oklch(0.088 0.026 147.7 / 0.583));
+        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-4x, 16px) 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[ellipsis] {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: pre;
+  display: inline-block;
+  line-height: unset;
+  vertical-align: top;
+
+  &[trim='end'][isEllipsized]::after {
+    content: '';
+    display: block;
+  }
+
+  &[maxLine] {
+    -webkit-line-clamp: var(--maxLine);
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    white-space: normal;
+    overflow-wrap: break-word;
+  }
+  &[trim='middle'] {
+    text-overflow: unset;
+  }
 }
 
 SText[size='100'] {
   font-size: var(--intergalactic-fs-100, 12px);
   line-height: var(--intergalactic-lh-100, 133%);
+
+  &[formatTags] {
+    & 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%);
+
+  &[formatTags] {
+    & p,
+    & li {
+      font-size: var(--intergalactic-fs-200, 14px);
+      line-height: var(--intergalactic-lh-200, 142%);
+    }
+
+    & p {
+      margin: 0 0 var(--intergalactic-spacing-3x, 12px) 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%);
+
+  &[formatTags] {
+    & p,
+    & li {
+      font-size: var(--intergalactic-fs-300, 16px);
+      line-height: var(--intergalactic-lh-300, 150%);
+    }
+
+    & p {
+      margin: 0 0 var(--intergalactic-spacing-4x, 16px) 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 +473,12 @@ SText[use='secondary'] {
 
 SText[disabled] {
   opacity: var(--intergalactic-disabled-opacity, 0.4);
-}
+}
+
+@media (prefers-reduced-motion) {
+  SText {
+    & a {
+      transition: none;
+    }
+  }
+}