@semcore/typography 5.53.2 → 5.54.0-prerelease.0

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.214 263.4));
+      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.206 263.4));
+        border-color: var(--intergalactic-text-link-hover-active, oklch(0.51 0.206 263.4));
+      }
+
+      &: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'] {
@@ -106,13 +464,21 @@ SText[textAlign] {
 }
 
 SText[use='primary'] {
-  color: var(--intergalactic-text-primary, #191b23);
+  color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
 }
 
 SText[use='secondary'] {
-  color: var(--intergalactic-text-secondary, #6c6e79);
+  color: var(--intergalactic-text-secondary, oklch(0.088 0.026 147.7 / 0.583));
 }
 
 SText[disabled] {
-  opacity: var(--intergalactic-disabled-opacity, 0.3);
-}
+  opacity: var(--intergalactic-disabled-opacity, 0.4);
+}
+
+@media (prefers-reduced-motion) {
+  SText {
+    & a {
+      transition: none;
+    }
+  }
+}

package/lib/esm/components/Blockquote/Blockquote.mjs

@@ -0,0 +1,36 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import { sstyled, assignProps, createBaseComponent } from "@semcore/core";
+import { Box } from "@semcore/base-components";
+import isNode from "@semcore/core/lib/utils/isNode";
+import React from "react";
+/*!__reshadow-styles__:"../../style/blockquote.shadow.css"*/
+var styles = (
+  /*__reshadow_css_start__*/
+  (sstyled.insert(
+    /*__inner_css_start__*/
+    '.___SBlockquote_18p09_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, rgba(1, 5, 0, 0.899))}.___SDoubleQuotation_18p09_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, rgba(0, 3, 0, 0.583))}@supports (color:color(display-p3 0 0 0%)){.___SDoubleQuotation_18p09_gg_{color:var(--intergalactic-text-large-secondary, rgba(0, 3, 0, 0.583))}@media (color-gamut:p3){.___SDoubleQuotation_18p09_gg_{color:var(--intergalactic-text-large-secondary, color(display-p3 0.00228 0.01289 0.00252 / 0.583))}}}.___SAuthor_18p09_gg_{display:block;margin-top:var(--intergalactic-spacing-4x, 16px);color:var(--intergalactic-text-secondary, rgba(0, 3, 0, 0.583));font-style:normal;font-size:var(--intergalactic-fs-300, 16px);line-height:var(--intergalactic-lh-300, 150%)}@supports (color:color(display-p3 0 0 0%)){.___SAuthor_18p09_gg_{color:var(--intergalactic-text-secondary, rgba(0, 3, 0, 0.583))}@media (color-gamut:p3){.___SAuthor_18p09_gg_{color:var(--intergalactic-text-secondary, color(display-p3 0.00228 0.01289 0.00252 / 0.583))}}}',
+    /*__inner_css_end__*/
+    "18p09_gg_"
+  ), /*__reshadow_css_end__*/
+  {
+    "__SBlockquote": "___SBlockquote_18p09_gg_",
+    "__SDoubleQuotation": "___SDoubleQuotation_18p09_gg_",
+    "__SAuthor": "___SAuthor_18p09_gg_"
+  })
+);
+function BlockquoteRoot(props, ref) {
+  var _ref = arguments[0], _ref2;
+  var SBlockquote = Box;
+  var SDoubleQuotation = "span";
+  var SAuthor = "cite";
+  var author = props.author, children = props.children;
+  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)));
+}
+BlockquoteRoot.displayName = "Blockquote";
+var Blockquote = createBaseComponent(BlockquoteRoot);
+export {
+  Blockquote as default
+};

package/lib/esm/components/Blockquote/Blockquote.type.mjs

@@ -0,0 +1 @@
+

package/lib/esm/{List.mjs → components/List/List.mjs}

@@ -1,40 +1,38 @@
 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 _callSuper from "@babel/runtime/helpers/esm/callSuper";
 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 } from "@semcore/utils/lib/core/index";
-import createComponent, { sstyled as sstyled$1, assignProps, Component } from "@semcore/core";
+import { sstyled, assignProps, Component, createComponent } from "@semcore/core";
+import { Flex } from "@semcore/base-components";
+import { isAdvanceMode } from "@semcore/core/lib/utils/findComponent";
+import isNode from "@semcore/core/lib/utils/isNode";
 import React from "react";
-import { Flex } from "@semcore/flex-box";
-import isNode from "@semcore/utils/lib/isNode";
-import { isAdvanceMode } from "@semcore/utils/lib/findComponent";
-import Text from "./Text.mjs";
-/*!__reshadow-styles__:"./style/list.shadow.css"*/
+import Text from "../Text/Text.mjs";
+/*!__reshadow-styles__:"../../style/list.shadow.css"*/
 var style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    ".___SList_i7xxg_gg_{padding:0;margin:0;list-style-type:none}.___SContent_i7xxg_gg_{overflow:inherit;text-overflow:inherit}.___SItem_i7xxg_gg_+.___SItem_i7xxg_gg_,.___SList_i7xxg_gg_ .___SList_i7xxg_gg_{margin-top:var(--intergalactic-spacing-2x, 8px)}.___SItem_i7xxg_gg_{display:flex}.___SMarker_i7xxg_gg_{margin-right:var(--intergalactic-spacing-2x, 8px);color:var(--intergalactic-text-secondary, #6c6e79);line-height:normal}",
+    ".___SList_13mha_gg_{padding:0;margin:0;list-style-type:none}.___SContent_13mha_gg_{overflow:inherit;text-overflow:inherit}.___SItem_13mha_gg_+.___SItem_13mha_gg_,.___SList_13mha_gg_ .___SList_13mha_gg_{margin-top:var(--intergalactic-spacing-2x, 8px)}.___SItem_13mha_gg_{display:flex}.___SMarker_13mha_gg_{margin-right:var(--intergalactic-spacing-2x, 8px);color:var(--intergalactic-text-secondary, rgba(0, 3, 0, 0.583));line-height:normal}@supports (color:color(display-p3 0 0 0%)){.___SMarker_13mha_gg_{color:var(--intergalactic-text-secondary, rgba(0, 3, 0, 0.583))}@media (color-gamut:p3){.___SMarker_13mha_gg_{color:var(--intergalactic-text-secondary, color(display-p3 0.00228 0.01289 0.00252 / 0.583))}}}",
     /*__inner_css_end__*/
-    "i7xxg_gg_"
+    "13mha_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SList": "___SList_i7xxg_gg_",
-    "__SContent": "___SContent_i7xxg_gg_",
-    "__SItem": "___SItem_i7xxg_gg_",
-    "__SMarker": "___SMarker_i7xxg_gg_"
+    "__SList": "___SList_13mha_gg_",
+    "__SContent": "___SContent_13mha_gg_",
+    "__SItem": "___SItem_13mha_gg_",
+    "__SMarker": "___SMarker_13mha_gg_"
   })
 );
-var ListRoot = /* @__PURE__ */ function(_Component) {
-  _inherits(ListRoot2, _Component);
-  var _super = _createSuper(ListRoot2);
+var ListRoot = /* @__PURE__ */ (function(_Component) {
   function ListRoot2() {
     _classCallCheck(this, ListRoot2);
-    return _super.apply(this, arguments);
+    return _callSuper(this, ListRoot2, arguments);
   }
-  _createClass(ListRoot2, [{
+  _inherits(ListRoot2, _Component);
+  return _createClass(ListRoot2, [{
     key: "getItemProps",
     value: function getItemProps() {
       var marker = this.asProps.marker;
@@ -48,52 +46,47 @@ var ListRoot = /* @__PURE__ */ function(_Component) {
       var _ref = this.asProps, _ref4;
       var SList = Text;
       var styles = this.asProps.styles;
-      return _ref4 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SList, _ref4.cn("SList", _objectSpread({}, assignProps({
-        "tag": "ul",
-        "role": "list"
+      return _ref4 = sstyled(styles), /* @__PURE__ */ React.createElement(SList, _ref4.cn("SList", _objectSpread({}, assignProps({
+        "tag": "ul"
       }, _ref))));
     }
   }]);
-  return ListRoot2;
-}(Component);
+})(Component);
 _defineProperty(ListRoot, "displayName", "List");
 _defineProperty(ListRoot, "style", style);
 _defineProperty(ListRoot, "defaultProps", {
   marker: "•"
 });
-var ItemRoot = /* @__PURE__ */ function(_Component2) {
-  _inherits(ItemRoot2, _Component2);
-  var _super2 = _createSuper(ItemRoot2);
+var ItemRoot = /* @__PURE__ */ (function(_Component2) {
   function ItemRoot2() {
     _classCallCheck(this, ItemRoot2);
-    return _super2.apply(this, arguments);
+    return _callSuper(this, ItemRoot2, arguments);
   }
-  _createClass(ItemRoot2, [{
+  _inherits(ItemRoot2, _Component2);
+  return _createClass(ItemRoot2, [{
     key: "render",
     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 _this$asProps = this.asProps, styles = _this$asProps.styles, 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$1(styles), /* @__PURE__ */ React.createElement(SItem, _ref5.cn("SItem", _objectSpread({}, assignProps({
-        "tag": "li",
-        "role": "listitem"
+      return _ref5 = sstyled(styles), /* @__PURE__ */ React.createElement(SItem, _ref5.cn("SItem", _objectSpread({}, assignProps({
+        "tag": "li"
       }, _ref2))), isNode(markerNode) && /* @__PURE__ */ React.createElement(SMarker, _ref5.cn("SMarker", {
         "aria-hidden": "true"
-      }), markerNode), isAdvancedMode ? /* @__PURE__ */ React.createElement(Children, _ref5.cn("Children", {})) : /* @__PURE__ */ React.createElement(SContent, _ref5.cn("SContent", {}), children));
+      }), markerNode), isAdvancedMode ? /* @__PURE__ */ React.createElement(Children, _ref5.cn("Children", {})) : /* @__PURE__ */ React.createElement(SContent, _ref5.cn("SContent", {}), /* @__PURE__ */ React.createElement(Children, _ref5.cn("Children", {}))));
     }
   }]);
-  return ItemRoot2;
-}(Component);
+})(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$1(styles), /* @__PURE__ */ React.createElement(SContent, _ref6.cn("SContent", _objectSpread({}, assignProps({}, _ref3))), children);
+  return _ref6 = sstyled(styles), /* @__PURE__ */ React.createElement(SContent, _ref6.cn("SContent", _objectSpread({}, assignProps({}, _ref3))), children);
 }
 Content.displayName = "Content";
 var Item = createComponent(ItemRoot, {

package/lib/esm/components/List/List.type.mjs

@@ -0,0 +1 @@
+