@entur/typography 1.10.0-beta.10 → 1.10.0-beta.12

package/dist/typography.esm.js

@@ -22,12 +22,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
@@ -41,19 +41,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;
@@ -61,14 +61,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;
@@ -76,7 +76,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({
@@ -84,14 +84,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,
@@ -101,14 +101,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,
@@ -118,14 +118,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,
@@ -135,14 +135,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,
@@ -152,14 +152,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,
@@ -169,14 +169,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,
@@ -186,7 +186,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;
@@ -194,14 +194,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;
@@ -209,14 +209,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;
@@ -229,7 +229,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)
@@ -239,7 +239,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;
@@ -247,19 +247,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, {
@@ -267,27 +267,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', {
@@ -297,19 +297,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;
@@ -317,14 +317,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;
@@ -332,31 +332,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));
@@ -400,6 +400,8 @@ function getSemanticTypeFromTextVariant(variant) {
     case 'emphasized':
     case 'code-text':
       return 'code';
+    case 'preformatted-text':
+      return 'pre';
     default:
       return 'p';
   }
@@ -416,7 +418,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,
@@ -426,7 +428,7 @@ var TypographyText = function TypographyText(_ref) {
     weight = _ref$weight === void 0 ? 'medium' : _ref$weight,
     spacing = _ref.spacing,
     className = _ref.className,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$3);
+    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)
@@ -435,7 +437,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,
@@ -444,7 +446,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);
@@ -455,11 +457,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));
@@ -472,7 +474,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,
@@ -482,7 +484,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)
@@ -492,7 +494,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);
+};
+
 warnAboutMissingStyles('typography');
 
-export { Blockquote, BlockquoteBeta, BlockquoteFooter, BlockquoteFooterBeta, CodeText, EmphasizedText, Heading, Heading1, Heading2, Heading3, Heading4, Heading5, Heading6, Label, LeadParagraph, Link, LinkBeta, ListItem, NumberedList, Paragraph, PreformattedText, SmallText, StrongText, SubLabel, SubParagraph, Text, UnorderedList };
+export { Blockquote, BlockquoteBeta, BlockquoteFooter, BlockquoteFooterBeta, CodeText, EmphasizedText, Heading, Heading1, Heading2, Heading3, Heading4, Heading5, Heading6, Label, LeadParagraph, Link, LinkBeta, ListItem, ListItemBeta, NumberedList, NumberedListBeta, Paragraph, PreformattedText, SmallText, StrongText, SubLabel, SubParagraph, Text, UnorderedList, UnorderedListBeta };
 //# sourceMappingURL=typography.esm.js.map