@entur/typography 1.10.0-beta.1 → 1.10.0-beta.11

package/dist/typography.cjs.development.js

@@ -26,12 +26,12 @@ function _objectWithoutPropertiesLoose(r, e) {
   return t;
 }
 
-var _excluded$p = ["className", "ref"],
+var _excluded$s = ["className", "ref"],
   _excluded2$1 = ["className"];
 var Blockquote = function Blockquote(_ref) {
   var className = _ref.className,
     ref = _ref.ref,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$p);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$s);
   return React.createElement("blockquote", _extends({
     className: classNames('eds-blockquote', className),
     ref: ref
@@ -45,19 +45,19 @@ var BlockquoteFooter = function BlockquoteFooter(_ref2) {
   }, rest));
 };
 
-var _excluded$o = ["className", "as"];
+var _excluded$r = ["className", "as"];
 var defaultElement$h = 'code';
 var CodeText = function CodeText(_ref) {
   var className = _ref.className,
     as = _ref.as,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$o);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$r);
   var Element = as || defaultElement$h;
   return React.createElement(Element, _extends({
     className: classNames('eds-code-text', className)
   }, rest));
 };
 
-var _excluded$n = ["className", "margin", "as"];
+var _excluded$q = ["className", "margin", "as"];
 var defaultElement$g = 'em';
 var EmphasizedText = function EmphasizedText(_ref) {
   var _classNames;
@@ -65,14 +65,14 @@ var EmphasizedText = function EmphasizedText(_ref) {
     _ref$margin = _ref.margin,
     margin = _ref$margin === void 0 ? 'both' : _ref$margin,
     as = _ref.as,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$n);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$q);
   var Element = as || defaultElement$g;
   return React.createElement(Element, _extends({
     className: classNames('eds-emphasized-text', (_classNames = {}, _classNames["eds-emphasized-text--margin-top"] = margin === 'top', _classNames["eds-emphasized-text--margin-bottom"] = margin === 'bottom', _classNames["eds-emphasized-text--margin-none"] = margin === 'none', _classNames), className)
   }, rest));
 };
 
-var _excluded$m = ["className", "level", "margin", "as"];
+var _excluded$p = ["className", "level", "margin", "as"];
 var defaultElement$f = 'h1';
 var BaseHeading = function BaseHeading(_ref) {
   var _classNames;
@@ -80,7 +80,7 @@ var BaseHeading = function BaseHeading(_ref) {
     level = _ref.level,
     margin = _ref.margin,
     as = _ref.as,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$m);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$p);
   var Element = as || defaultElement$f;
   var baseClass = "eds-h" + level;
   return React.createElement(Element, _extends({
@@ -88,14 +88,14 @@ var BaseHeading = function BaseHeading(_ref) {
   }, rest));
 };
 
-var _excluded$l = ["margin", "children", "as"];
+var _excluded$o = ["margin", "children", "as"];
 var defaultElement$e = 'h1';
 var Heading1 = function Heading1(_ref) {
   var _ref$margin = _ref.margin,
     margin = _ref$margin === void 0 ? 'both' : _ref$margin,
     children = _ref.children,
     as = _ref.as,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$l);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$o);
   var Element = as || defaultElement$e;
   return React.createElement(BaseHeading, _extends({
     as: Element,
@@ -105,14 +105,14 @@ var Heading1 = function Heading1(_ref) {
   }), children);
 };
 
-var _excluded$k = ["margin", "children", "as"];
+var _excluded$n = ["margin", "children", "as"];
 var defaultElement$d = 'h2';
 var Heading2 = function Heading2(_ref) {
   var _ref$margin = _ref.margin,
     margin = _ref$margin === void 0 ? 'both' : _ref$margin,
     children = _ref.children,
     as = _ref.as,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$k);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$n);
   var Element = as || defaultElement$d;
   return React.createElement(BaseHeading, _extends({
     as: Element,
@@ -122,14 +122,14 @@ var Heading2 = function Heading2(_ref) {
   }), children);
 };
 
-var _excluded$j = ["margin", "children", "as"];
+var _excluded$m = ["margin", "children", "as"];
 var defaultElement$c = 'h3';
 var Heading3 = function Heading3(_ref) {
   var _ref$margin = _ref.margin,
     margin = _ref$margin === void 0 ? 'both' : _ref$margin,
     children = _ref.children,
     as = _ref.as,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$j);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$m);
   var Element = as || defaultElement$c;
   return React.createElement(BaseHeading, _extends({
     as: Element,
@@ -139,14 +139,14 @@ var Heading3 = function Heading3(_ref) {
   }), children);
 };
 
-var _excluded$i = ["margin", "children", "as"];
+var _excluded$l = ["margin", "children", "as"];
 var defaultElement$b = 'h4';
 var Heading4 = function Heading4(_ref) {
   var _ref$margin = _ref.margin,
     margin = _ref$margin === void 0 ? 'both' : _ref$margin,
     children = _ref.children,
     as = _ref.as,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$i);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$l);
   var Element = as || defaultElement$b;
   return React.createElement(BaseHeading, _extends({
     as: Element,
@@ -156,14 +156,14 @@ var Heading4 = function Heading4(_ref) {
   }), children);
 };
 
-var _excluded$h = ["margin", "children", "as"];
+var _excluded$k = ["margin", "children", "as"];
 var defaultElement$a = 'h5';
 var Heading5 = function Heading5(_ref) {
   var _ref$margin = _ref.margin,
     margin = _ref$margin === void 0 ? 'both' : _ref$margin,
     children = _ref.children,
     as = _ref.as,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$h);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$k);
   var Element = as || defaultElement$a;
   return React.createElement(BaseHeading, _extends({
     as: Element,
@@ -173,14 +173,14 @@ var Heading5 = function Heading5(_ref) {
   }), children);
 };
 
-var _excluded$g = ["margin", "children", "as"];
+var _excluded$j = ["margin", "children", "as"];
 var defaultElement$9 = 'h6';
 var Heading6 = function Heading6(_ref) {
   var _ref$margin = _ref.margin,
     margin = _ref$margin === void 0 ? 'both' : _ref$margin,
     children = _ref.children,
     as = _ref.as,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$g);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$j);
   var Element = as || defaultElement$9;
   return React.createElement(BaseHeading, _extends({
     as: Element,
@@ -190,7 +190,7 @@ var Heading6 = function Heading6(_ref) {
   }), children);
 };
 
-var _excluded$f = ["className", "margin", "as"];
+var _excluded$i = ["className", "margin", "as"];
 var defaultElement$8 = 'label';
 var Label = function Label(_ref) {
   var _classNames;
@@ -198,14 +198,14 @@ var Label = function Label(_ref) {
     _ref$margin = _ref.margin,
     margin = _ref$margin === void 0 ? 'both' : _ref$margin,
     as = _ref.as,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$f);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$i);
   var Element = as || defaultElement$8;
   return React.createElement(Element, _extends({
     className: classNames('eds-label', (_classNames = {}, _classNames["eds-label--margin-top"] = margin === 'top', _classNames["eds-label--margin-bottom"] = margin === 'bottom', _classNames["eds-label--margin-none"] = margin === 'none', _classNames), className)
   }, rest));
 };
 
-var _excluded$e = ["className", "margin", "as"];
+var _excluded$h = ["className", "margin", "as"];
 var defaultElement$7 = 'p';
 var LeadParagraph = function LeadParagraph(_ref) {
   var _classNames;
@@ -213,14 +213,14 @@ var LeadParagraph = function LeadParagraph(_ref) {
     _ref$margin = _ref.margin,
     margin = _ref$margin === void 0 ? 'both' : _ref$margin,
     as = _ref.as,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$e);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$h);
   var Element = as || defaultElement$7;
   return React.createElement(Element, _extends({
     className: classNames('eds-lead-paragraph', (_classNames = {}, _classNames["eds-lead-paragraph--margin-top"] = margin === 'top', _classNames["eds-lead-paragraph--margin-bottom"] = margin === 'bottom', _classNames["eds-lead-paragraph--margin-none"] = margin === 'none', _classNames), className)
   }, rest));
 };
 
-var _excluded$d = ["external", "ariaLabelExternalIcon", "className", "margin", "children", "as"];
+var _excluded$g = ["external", "ariaLabelExternalIcon", "className", "margin", "children", "as"];
 var defaultElement$6 = 'a';
 var Link = function Link(_ref) {
   var _classNames;
@@ -233,7 +233,7 @@ var Link = function Link(_ref) {
     margin = _ref$margin === void 0 ? 'both' : _ref$margin,
     children = _ref.children,
     as = _ref.as,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$d);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$g);
   var Element = as || defaultElement$6;
   return React.createElement(Element, _extends({
     className: classNames('eds-link', (_classNames = {}, _classNames["eds-link--margin-top"] = margin === 'top', _classNames["eds-link--margin-bottom"] = margin === 'bottom', _classNames["eds-link--margin-none"] = margin === 'none', _classNames), className)
@@ -243,7 +243,7 @@ var Link = function Link(_ref) {
   }) : React.createElement(React.Fragment, null));
 };
 
-var _excluded$c = ["className", "margin", "as"];
+var _excluded$f = ["className", "margin", "as"];
 var defaultElement$5 = 'strong';
 var StrongText = function StrongText(_ref) {
   var _classNames;
@@ -251,19 +251,19 @@ var StrongText = function StrongText(_ref) {
     _ref$margin = _ref.margin,
     margin = _ref$margin === void 0 ? 'both' : _ref$margin,
     as = _ref.as,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$c);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$f);
   var Element = as || defaultElement$5;
   return React.createElement(Element, _extends({
     className: classNames('eds-strong-text', (_classNames = {}, _classNames["eds-strong-text--margin-top"] = margin === 'top', _classNames["eds-strong-text--margin-bottom"] = margin === 'bottom', _classNames["eds-strong-text--margin-none"] = margin === 'none', _classNames), className)
   }, rest));
 };
 
-var _excluded$b = ["children", "className", "title"];
+var _excluded$e = ["children", "className", "title"];
 var ListItem = function ListItem(_ref) {
   var children = _ref.children,
     className = _ref.className,
     title = _ref.title,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$b);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$e);
   return React.createElement("li", _extends({
     className: classNames('eds-list-item', className)
   }, rest), title && React.createElement(StrongText, {
@@ -271,27 +271,27 @@ var ListItem = function ListItem(_ref) {
   }, title), children);
 };
 
-var _excluded$a = ["className", "type"];
+var _excluded$d = ["className", "type"];
 var NumberedList = function NumberedList(_ref) {
   var _classNames;
   var className = _ref.className,
     _ref$type = _ref.type,
     type = _ref$type === void 0 ? '1' : _ref$type,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$a);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$d);
   return React.createElement("ol", _extends({
     className: classNames('eds-numbered-list', (_classNames = {}, _classNames["eds-numbered-list--type-" + type] = type, _classNames), className),
     type: type
   }, rest));
 };
 
-var _excluded$9 = ["margin", "className", "as"];
+var _excluded$c = ["margin", "className", "as"];
 var defaultElement$4 = 'p';
 var Paragraph = function Paragraph(_ref) {
   var _ref$margin = _ref.margin,
     margin = _ref$margin === void 0 ? 'bottom' : _ref$margin,
     className = _ref.className,
     as = _ref.as,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$9);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$c);
   var Element = as || defaultElement$4;
   return React.createElement(Element, _extends({
     className: classNames('eds-paragraph', {
@@ -301,19 +301,19 @@ var Paragraph = function Paragraph(_ref) {
   }, rest));
 };
 
-var _excluded$8 = ["className", "as"];
+var _excluded$b = ["className", "as"];
 var defaultElement$3 = 'pre';
 var PreformattedText = function PreformattedText(_ref) {
   var className = _ref.className,
     as = _ref.as,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$8);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$b);
   var Element = as || defaultElement$3;
   return React.createElement(Element, _extends({
     className: classNames('eds-preformatted-text', className)
   }, rest));
 };
 
-var _excluded$7 = ["className", "margin", "as"];
+var _excluded$a = ["className", "margin", "as"];
 var defaultElement$2 = 'span';
 var SmallText = function SmallText(_ref) {
   var _classNames;
@@ -321,14 +321,14 @@ var SmallText = function SmallText(_ref) {
     _ref$margin = _ref.margin,
     margin = _ref$margin === void 0 ? 'both' : _ref$margin,
     as = _ref.as,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$7);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$a);
   var Element = as || defaultElement$2;
   return React.createElement(Element, _extends({
     className: classNames('eds-small-text', (_classNames = {}, _classNames["eds-small-text--margin-top"] = margin === 'top', _classNames["eds-small-text--margin-bottom"] = margin === 'bottom', _classNames["eds-small-text--margin-none"] = margin === 'none', _classNames), className)
   }, rest));
 };
 
-var _excluded$6 = ["className", "margin", "as"];
+var _excluded$9 = ["className", "margin", "as"];
 var defaultElement$1 = 'span';
 var SubLabel = function SubLabel(_ref) {
   var _classNames;
@@ -336,31 +336,31 @@ var SubLabel = function SubLabel(_ref) {
     _ref$margin = _ref.margin,
     margin = _ref$margin === void 0 ? 'both' : _ref$margin,
     as = _ref.as,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$6);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$9);
   var Element = as || defaultElement$1;
   return React.createElement(Element, _extends({
     className: classNames('eds-sub-label', (_classNames = {}, _classNames["eds-sub-label--margin-top"] = margin === 'top', _classNames["eds-sub-label--margin-bottom"] = margin === 'bottom', _classNames["eds-sub-label--margin-none"] = margin === 'none', _classNames), className)
   }, rest));
 };
 
-var _excluded$5 = ["className", "margin", "as"];
+var _excluded$8 = ["className", "margin", "as"];
 var defaultElement = 'p';
 var SubParagraph = function SubParagraph(_ref) {
   var _classNames;
   var className = _ref.className,
     margin = _ref.margin,
     as = _ref.as,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$5);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$8);
   var Element = as || defaultElement;
   return React.createElement(Element, _extends({
     className: classNames('eds-sub-paragraph', (_classNames = {}, _classNames["eds-sub-paragraph--margin-top"] = margin === 'top', _classNames["eds-sub-paragraph--margin-bottom"] = margin === 'bottom', _classNames["eds-sub-paragraph--margin-none"] = margin === 'none', _classNames), className)
   }, rest));
 };
 
-var _excluded$4 = ["className"];
+var _excluded$7 = ["className"];
 var UnorderedList = function UnorderedList(_ref) {
   var className = _ref.className,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$4);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$7);
   return React.createElement("ul", _extends({
     className: classNames('eds-unordered-list', className)
   }, rest));
@@ -387,6 +387,29 @@ function getHeadingVariantFromSemanticType(semanticType) {
   // Handle React component types (functions/classes) - default to 'title-1'
   return 'title-1';
 }
+function getSemanticTypeFromTextVariant(variant) {
+  switch (variant) {
+    case 'paragraph':
+    case 'subparagraph':
+    case 'leading':
+    case 'quote':
+      return 'p';
+    case 'caption':
+    case 'sublabel':
+      return 'small';
+    case 'label':
+      return 'span';
+    case 'overline':
+      return 'em';
+    case 'emphasized':
+    case 'code-text':
+      return 'code';
+    case 'preformatted-text':
+      return 'pre';
+    default:
+      return 'p';
+  }
+}
 /**
  * Generates spacing class names for typography components
  * @param spacing - The spacing value from TypographySpacing
@@ -399,7 +422,7 @@ function getSpacingClasses(spacing, componentPrefix) {
   return _ref = {}, _ref[componentPrefix + "--spacing-none"] = spacing === 'none', _ref[componentPrefix + "--spacing-xs2"] = spacing === 'xs2', _ref[componentPrefix + "--spacing-xs2-top"] = spacing === 'xs2-top', _ref[componentPrefix + "--spacing-xs2-bottom"] = spacing === 'xs2-bottom', _ref[componentPrefix + "--spacing-xs"] = spacing === 'xs', _ref[componentPrefix + "--spacing-xs-top"] = spacing === 'xs-top', _ref[componentPrefix + "--spacing-xs-bottom"] = spacing === 'xs-bottom', _ref[componentPrefix + "--spacing-sm"] = spacing === 'sm', _ref[componentPrefix + "--spacing-sm-top"] = spacing === 'sm-top', _ref[componentPrefix + "--spacing-sm-bottom"] = spacing === 'sm-bottom', _ref[componentPrefix + "--spacing-md"] = spacing === 'md', _ref[componentPrefix + "--spacing-md-top"] = spacing === 'md-top', _ref[componentPrefix + "--spacing-md-bottom"] = spacing === 'md-bottom', _ref[componentPrefix + "--spacing-lg"] = spacing === 'lg', _ref[componentPrefix + "--spacing-lg-top"] = spacing === 'lg-top', _ref[componentPrefix + "--spacing-lg-bottom"] = spacing === 'lg-bottom', _ref[componentPrefix + "--spacing-xl"] = spacing === 'xl', _ref[componentPrefix + "--spacing-xl-top"] = spacing === 'xl-top', _ref[componentPrefix + "--spacing-xl-bottom"] = spacing === 'xl-bottom', _ref;
 }
 
-var _excluded$3 = ["children", "as", "size", "variant", "weight", "spacing", "className"];
+var _excluded$6 = ["children", "as", "size", "variant", "weight", "spacing", "className"];
 var TypographyText = function TypographyText(_ref) {
   var children = _ref.children,
     as = _ref.as,
@@ -409,8 +432,8 @@ var TypographyText = function TypographyText(_ref) {
     weight = _ref$weight === void 0 ? 'medium' : _ref$weight,
     spacing = _ref.spacing,
     className = _ref.className,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$3);
-  var BodyElement = as || 'p';
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$6);
+  var BodyElement = as || getSemanticTypeFromTextVariant(variant);
   return React.createElement(BodyElement, _extends({
     className: classNames('eds-text', variant && "eds-text--" + variant, size && "eds-text--" + size, weight && "eds-text--weight-" + weight, getSpacingClasses(spacing, 'eds-text'), className)
   }, rest), children);
@@ -418,7 +441,7 @@ var TypographyText = function TypographyText(_ref) {
 // Export as Text to avoid DOM conflicts
 var Text = TypographyText;
 
-var _excluded$2 = ["children", "as", "size", "variant", "spacing", "className"];
+var _excluded$5 = ["children", "as", "size", "variant", "spacing", "className"];
 var Heading = function Heading(_ref) {
   var _classNames, _classNames2;
   var children = _ref.children,
@@ -427,7 +450,7 @@ var Heading = function Heading(_ref) {
     variant = _ref.variant,
     spacing = _ref.spacing,
     className = _ref.className,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$5);
   var HeadingElement = as || 'h1';
   // Function to determine the variant based on the semantic type
   var usedVariant = variant != null ? variant : getHeadingVariantFromSemanticType(HeadingElement);
@@ -438,11 +461,11 @@ var Heading = function Heading(_ref) {
   }, rest), children);
 };
 
-var _excluded$1 = ["className"],
+var _excluded$4 = ["className"],
   _excluded2 = ["className"];
 var BlockquoteBeta = function BlockquoteBeta(_ref) {
   var className = _ref.className,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$1);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$4);
   return React.createElement("blockquote", _extends({
     className: classNames('eds-text--blockquote', className)
   }, rest));
@@ -455,7 +478,7 @@ var BlockquoteFooterBeta = function BlockquoteFooterBeta(_ref2) {
   }, rest));
 };
 
-var _excluded = ["external", "ariaLabelExternalIcon", "className", "spacing", "children", "as"];
+var _excluded$3 = ["external", "ariaLabelExternalIcon", "className", "spacing", "children", "as"];
 var LinkBeta = function LinkBeta(_ref) {
   var _ref$external = _ref.external,
     external = _ref$external === void 0 ? false : _ref$external,
@@ -465,7 +488,7 @@ var LinkBeta = function LinkBeta(_ref) {
     spacing = _ref.spacing,
     children = _ref.children,
     as = _ref.as,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$3);
   var LinkElement = as || 'a';
   return React.createElement(LinkElement, _extends({
     className: classNames('eds-text--link', getSpacingClasses(spacing, 'eds-text--link'), className)
@@ -475,8 +498,53 @@ var LinkBeta = function LinkBeta(_ref) {
   }) : null);
 };
 
+var _excluded$2 = ["className", "spacing", "as", "children"];
+var UnorderedListBeta = function UnorderedListBeta(_ref) {
+  var className = _ref.className,
+    spacing = _ref.spacing,
+    as = _ref.as,
+    children = _ref.children,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
+  var ListElement = as || 'ul';
+  return React.createElement(ListElement, _extends({
+    className: classNames('eds-text--unordered-list', getSpacingClasses(spacing, 'eds-text--unordered-list'), className)
+  }, rest), children);
+};
+
+var _excluded$1 = ["className", "type", "spacing", "as", "children"];
+var NumberedListBeta = function NumberedListBeta(_ref) {
+  var _classNames;
+  var className = _ref.className,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? '1' : _ref$type,
+    spacing = _ref.spacing,
+    as = _ref.as,
+    children = _ref.children,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$1);
+  var ListElement = as || 'ol';
+  return React.createElement(ListElement, _extends({
+    className: classNames('eds-text--numbered-list', (_classNames = {}, _classNames["eds-text--numbered-list--type-" + type] = type, _classNames), getSpacingClasses(spacing, 'eds-text--numbered-list'), className),
+    type: type
+  }, rest), children);
+};
+
+var _excluded = ["children", "className", "title", "spacing", "as"];
+var ListItemBeta = function ListItemBeta(_ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    title = _ref.title,
+    spacing = _ref.spacing,
+    as = _ref.as,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var ItemElement = as || 'li';
+  return React.createElement(ItemElement, _extends({
+    className: classNames('eds-text--list-item', getSpacingClasses(spacing, 'eds-text--list-item'), className)
+  }, rest), title && React.createElement("span", {
+    className: "eds-text--list-item__title eds-text--weight-bold"
+  }, title), children);
+};
+
 utils.warnAboutMissingStyles('typography');
-// migration helpers - use @entur/typography/migration for migration support
 
 exports.Blockquote = Blockquote;
 exports.BlockquoteBeta = BlockquoteBeta;
@@ -496,7 +564,9 @@ exports.LeadParagraph = LeadParagraph;
 exports.Link = Link;
 exports.LinkBeta = LinkBeta;
 exports.ListItem = ListItem;
+exports.ListItemBeta = ListItemBeta;
 exports.NumberedList = NumberedList;
+exports.NumberedListBeta = NumberedListBeta;
 exports.Paragraph = Paragraph;
 exports.PreformattedText = PreformattedText;
 exports.SmallText = SmallText;
@@ -505,4 +575,5 @@ exports.SubLabel = SubLabel;
 exports.SubParagraph = SubParagraph;
 exports.Text = Text;
 exports.UnorderedList = UnorderedList;
+exports.UnorderedListBeta = UnorderedListBeta;
 //# sourceMappingURL=typography.cjs.development.js.map