@entur/typography 1.9.12 → 1.9.13-beta.1

package/dist/typography.esm.js

@@ -1,368 +1,416 @@
-import { warnAboutMissingStyles } from '@entur/utils';
-import React from 'react';
-import classNames from 'classnames';
-import { ExternalIcon } from '@entur/icons';
-
-function _extends() {
-  return _extends = Object.assign ? Object.assign.bind() : function (n) {
-    for (var e = 1; e < arguments.length; e++) {
-      var t = arguments[e];
-      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+import { warnAboutMissingStyles } from "@entur/utils";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import classNames from "classnames";
+import { ExternalIcon } from "@entur/icons";
+const Blockquote = ({ className, ref, ...rest }) => {
+  return /* @__PURE__ */ jsx(
+    "blockquote",
+    {
+      className: classNames("eds-blockquote", className),
+      ref,
+      ...rest
     }
-    return n;
-  }, _extends.apply(null, arguments);
-}
-function _objectWithoutPropertiesLoose(r, e) {
-  if (null == r) return {};
-  var t = {};
-  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
-    if (e.includes(n)) continue;
-    t[n] = r[n];
-  }
-  return t;
-}
-
-var _excluded$l = ["className", "ref"],
-  _excluded2 = ["className"];
-var Blockquote = function Blockquote(_ref) {
-  var className = _ref.className,
-    ref = _ref.ref,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$l);
-  return React.createElement("blockquote", _extends({
-    className: classNames('eds-blockquote', className),
-    ref: ref
-  }, rest));
-};
-var BlockquoteFooter = function BlockquoteFooter(_ref2) {
-  var className = _ref2.className,
-    rest = _objectWithoutPropertiesLoose(_ref2, _excluded2);
-  return React.createElement("footer", _extends({
-    className: classNames('eds-blockquote__footer', className)
-  }, rest));
+  );
 };
-
-var _excluded$k = ["className", "as"];
-var defaultElement$h = 'code';
-var CodeText = function CodeText(_ref) {
-  var className = _ref.className,
-    as = _ref.as,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$k);
-  var Element = as || defaultElement$h;
-  return React.createElement(Element, _extends({
-    className: classNames('eds-code-text', className)
-  }, rest));
-};
-
-var _excluded$j = ["className", "margin", "as"];
-var defaultElement$g = 'em';
-var EmphasizedText = function EmphasizedText(_ref) {
-  var _classNames;
-  var className = _ref.className,
-    _ref$margin = _ref.margin,
-    margin = _ref$margin === void 0 ? 'both' : _ref$margin,
-    as = _ref.as,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$j);
-  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));
+const BlockquoteFooter = ({ className, ...rest }) => {
+  return /* @__PURE__ */ jsx(
+    "footer",
+    {
+      className: classNames("eds-blockquote__footer", className),
+      ...rest
+    }
+  );
 };
-
-var _excluded$i = ["className", "level", "margin", "as"];
-var defaultElement$f = 'h1';
-var BaseHeading = function BaseHeading(_ref) {
-  var _classNames;
-  var className = _ref.className,
-    level = _ref.level,
-    margin = _ref.margin,
-    as = _ref.as,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$i);
-  var Element = as || defaultElement$f;
-  var baseClass = "eds-h" + level;
-  return React.createElement(Element, _extends({
-    className: classNames(baseClass, (_classNames = {}, _classNames[baseClass + "--margin-top"] = margin === 'top', _classNames[baseClass + "--margin-bottom"] = margin === 'bottom', _classNames[baseClass + "--margin-none"] = margin === 'none', _classNames), className)
-  }, rest));
+const defaultElement$h = "code";
+const CodeText = ({
+  className,
+  as,
+  ...rest
+}) => {
+  const Element = as || defaultElement$h;
+  return /* @__PURE__ */ jsx(Element, { className: classNames("eds-code-text", className), ...rest });
 };
-
-var _excluded$h = ["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$h);
-  var Element = as || defaultElement$e;
-  return React.createElement(BaseHeading, _extends({
-    as: Element,
-    margin: margin
-  }, rest, {
-    level: 1
-  }), children);
+const defaultElement$g = "em";
+const EmphasizedText = ({
+  className,
+  margin = "both",
+  as,
+  ...rest
+}) => {
+  const Element = as || defaultElement$g;
+  return /* @__PURE__ */ jsx(
+    Element,
+    {
+      className: classNames(
+        "eds-emphasized-text",
+        {
+          [`eds-emphasized-text--margin-top`]: margin === "top",
+          [`eds-emphasized-text--margin-bottom`]: margin === "bottom",
+          [`eds-emphasized-text--margin-none`]: margin === "none"
+        },
+        className
+      ),
+      ...rest
+    }
+  );
 };
-
-var _excluded$g = ["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$g);
-  var Element = as || defaultElement$d;
-  return React.createElement(BaseHeading, _extends({
-    as: Element,
-    margin: margin
-  }, rest, {
-    level: 2
-  }), children);
+const defaultElement$f = "h1";
+const BaseHeading = ({
+  className,
+  level,
+  margin,
+  as,
+  ...rest
+}) => {
+  const Element = as || defaultElement$f;
+  const baseClass = `eds-h${level}`;
+  return /* @__PURE__ */ jsx(
+    Element,
+    {
+      className: classNames(
+        baseClass,
+        {
+          [`${baseClass}--margin-top`]: margin === "top",
+          [`${baseClass}--margin-bottom`]: margin === "bottom",
+          [`${baseClass}--margin-none`]: margin === "none"
+        },
+        className
+      ),
+      ...rest
+    }
+  );
 };
-
-var _excluded$f = ["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$f);
-  var Element = as || defaultElement$c;
-  return React.createElement(BaseHeading, _extends({
-    as: Element,
-    margin: margin
-  }, rest, {
-    level: 3
-  }), children);
+const defaultElement$e = "h1";
+const Heading1 = ({
+  margin = "both",
+  children,
+  as,
+  ...rest
+}) => {
+  const Element = as || defaultElement$e;
+  return /* @__PURE__ */ jsx(BaseHeading, { as: Element, margin, ...rest, level: 1, children });
 };
-
-var _excluded$e = ["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$e);
-  var Element = as || defaultElement$b;
-  return React.createElement(BaseHeading, _extends({
-    as: Element,
-    margin: margin
-  }, rest, {
-    level: 4
-  }), children);
+const defaultElement$d = "h2";
+const Heading2 = ({
+  margin = "both",
+  children,
+  as,
+  ...rest
+}) => {
+  const Element = as || defaultElement$d;
+  return /* @__PURE__ */ jsx(BaseHeading, { as: Element, margin, ...rest, level: 2, children });
 };
-
-var _excluded$d = ["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$d);
-  var Element = as || defaultElement$a;
-  return React.createElement(BaseHeading, _extends({
-    as: Element,
-    margin: margin
-  }, rest, {
-    level: 5
-  }), children);
+const defaultElement$c = "h3";
+const Heading3 = ({
+  margin = "both",
+  children,
+  as,
+  ...rest
+}) => {
+  const Element = as || defaultElement$c;
+  return /* @__PURE__ */ jsx(BaseHeading, { as: Element, margin, ...rest, level: 3, children });
 };
-
-var _excluded$c = ["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$c);
-  var Element = as || defaultElement$9;
-  return React.createElement(BaseHeading, _extends({
-    as: Element,
-    margin: margin
-  }, rest, {
-    level: 6
-  }), children);
+const defaultElement$b = "h4";
+const Heading4 = ({
+  margin = "both",
+  children,
+  as,
+  ...rest
+}) => {
+  const Element = as || defaultElement$b;
+  return /* @__PURE__ */ jsx(BaseHeading, { as: Element, margin, ...rest, level: 4, children });
 };
-
-var _excluded$b = ["className", "margin", "as"];
-var defaultElement$8 = 'label';
-var Label = function Label(_ref) {
-  var _classNames;
-  var className = _ref.className,
-    _ref$margin = _ref.margin,
-    margin = _ref$margin === void 0 ? 'both' : _ref$margin,
-    as = _ref.as,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$b);
-  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));
+const defaultElement$a = "h5";
+const Heading5 = ({
+  margin = "both",
+  children,
+  as,
+  ...rest
+}) => {
+  const Element = as || defaultElement$a;
+  return /* @__PURE__ */ jsx(BaseHeading, { as: Element, margin, ...rest, level: 5, children });
 };
-
-var _excluded$a = ["className", "margin", "as"];
-var defaultElement$7 = 'p';
-var LeadParagraph = function LeadParagraph(_ref) {
-  var _classNames;
-  var className = _ref.className,
-    _ref$margin = _ref.margin,
-    margin = _ref$margin === void 0 ? 'both' : _ref$margin,
-    as = _ref.as,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$a);
-  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));
+const defaultElement$9 = "h6";
+const Heading6 = ({
+  margin = "both",
+  children,
+  as,
+  ...rest
+}) => {
+  const Element = as || defaultElement$9;
+  return /* @__PURE__ */ jsx(BaseHeading, { as: Element, margin, ...rest, level: 6, children });
 };
-
-var _excluded$9 = ["external", "ariaLabelExternalIcon", "className", "margin", "children", "as"];
-var defaultElement$6 = 'a';
-var Link = function Link(_ref) {
-  var _classNames;
-  var _ref$external = _ref.external,
-    external = _ref$external === void 0 ? false : _ref$external,
-    _ref$ariaLabelExterna = _ref.ariaLabelExternalIcon,
-    ariaLabelExternalIcon = _ref$ariaLabelExterna === void 0 ? '(ekstern lenke)' : _ref$ariaLabelExterna,
-    className = _ref.className,
-    _ref$margin = _ref.margin,
-    margin = _ref$margin === void 0 ? 'both' : _ref$margin,
-    children = _ref.children,
-    as = _ref.as,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$9);
-  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)
-  }, rest), children, external ? React.createElement(ExternalIcon, {
-    className: "eds-link--ext-icon",
-    "aria-label": ariaLabelExternalIcon
-  }) : React.createElement(React.Fragment, null));
+const defaultElement$8 = "label";
+const Label = ({
+  className,
+  margin = "both",
+  as,
+  ...rest
+}) => {
+  const Element = as || defaultElement$8;
+  return /* @__PURE__ */ jsx(
+    Element,
+    {
+      className: classNames(
+        "eds-label",
+        {
+          [`eds-label--margin-top`]: margin === "top",
+          [`eds-label--margin-bottom`]: margin === "bottom",
+          [`eds-label--margin-none`]: margin === "none"
+        },
+        className
+      ),
+      ...rest
+    }
+  );
 };
-
-var _excluded$8 = ["className", "margin", "as"];
-var defaultElement$5 = 'strong';
-var StrongText = function StrongText(_ref) {
-  var _classNames;
-  var className = _ref.className,
-    _ref$margin = _ref.margin,
-    margin = _ref$margin === void 0 ? 'both' : _ref$margin,
-    as = _ref.as,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$8);
-  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));
+const defaultElement$7 = "p";
+const LeadParagraph = ({
+  className,
+  margin = "both",
+  as,
+  ...rest
+}) => {
+  const Element = as || defaultElement$7;
+  return /* @__PURE__ */ jsx(
+    Element,
+    {
+      className: classNames(
+        "eds-lead-paragraph",
+        {
+          [`eds-lead-paragraph--margin-top`]: margin === "top",
+          [`eds-lead-paragraph--margin-bottom`]: margin === "bottom",
+          [`eds-lead-paragraph--margin-none`]: margin === "none"
+        },
+        className
+      ),
+      ...rest
+    }
+  );
 };
-
-var _excluded$7 = ["children", "className", "title"];
-var ListItem = function ListItem(_ref) {
-  var children = _ref.children,
-    className = _ref.className,
-    title = _ref.title,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$7);
-  return React.createElement("li", _extends({
-    className: classNames('eds-list-item', className)
-  }, rest), title && React.createElement(StrongText, {
-    className: "eds-list-item__title"
-  }, title), children);
+const defaultElement$6 = "a";
+const Link = ({
+  external = false,
+  ariaLabelExternalIcon = "(ekstern lenke)",
+  className,
+  margin = "both",
+  children,
+  as,
+  ...rest
+}) => {
+  const Element = as || defaultElement$6;
+  return /* @__PURE__ */ jsxs(
+    Element,
+    {
+      className: classNames(
+        "eds-link",
+        {
+          [`eds-link--margin-top`]: margin === "top",
+          [`eds-link--margin-bottom`]: margin === "bottom",
+          [`eds-link--margin-none`]: margin === "none"
+        },
+        className
+      ),
+      ...rest,
+      children: [
+        children,
+        external ? /* @__PURE__ */ jsx(
+          ExternalIcon,
+          {
+            className: "eds-link--ext-icon",
+            "aria-label": ariaLabelExternalIcon
+          }
+        ) : /* @__PURE__ */ jsx(Fragment, {})
+      ]
+    }
+  );
 };
-
-var _excluded$6 = ["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$6);
-  return React.createElement("ol", _extends({
-    className: classNames('eds-numbered-list', (_classNames = {}, _classNames["eds-numbered-list--type-" + type] = type, _classNames), className),
-    type: type
-  }, rest));
+const defaultElement$5 = "strong";
+const StrongText = ({
+  className,
+  margin = "both",
+  as,
+  ...rest
+}) => {
+  const Element = as || defaultElement$5;
+  return /* @__PURE__ */ jsx(
+    Element,
+    {
+      className: classNames(
+        "eds-strong-text",
+        {
+          [`eds-strong-text--margin-top`]: margin === "top",
+          [`eds-strong-text--margin-bottom`]: margin === "bottom",
+          [`eds-strong-text--margin-none`]: margin === "none"
+        },
+        className
+      ),
+      ...rest
+    }
+  );
 };
-
-var _excluded$5 = ["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$5);
-  var Element = as || defaultElement$4;
-  return React.createElement(Element, _extends({
-    className: classNames('eds-paragraph', {
-      'eds-paragraph--margin-bottom': margin === 'bottom',
-      'eds-paragraph--margin-none': margin === 'none'
-    }, className)
-  }, rest));
+const ListItem = ({
+  children,
+  className,
+  title,
+  ...rest
+}) => /* @__PURE__ */ jsxs("li", { className: classNames("eds-list-item", className), ...rest, children: [
+  title && /* @__PURE__ */ jsx(StrongText, { className: "eds-list-item__title", children: title }),
+  children
+] });
+const NumberedList = ({
+  className,
+  type = "1",
+  ...rest
+}) => /* @__PURE__ */ jsx(
+  "ol",
+  {
+    className: classNames(
+      "eds-numbered-list",
+      { [`eds-numbered-list--type-${type}`]: type },
+      className
+    ),
+    type,
+    ...rest
+  }
+);
+const defaultElement$4 = "p";
+const Paragraph = ({
+  margin = "bottom",
+  className,
+  as,
+  ...rest
+}) => {
+  const Element = as || defaultElement$4;
+  return /* @__PURE__ */ jsx(
+    Element,
+    {
+      className: classNames(
+        "eds-paragraph",
+        {
+          "eds-paragraph--margin-bottom": margin === "bottom",
+          "eds-paragraph--margin-none": margin === "none"
+        },
+        className
+      ),
+      ...rest
+    }
+  );
 };
-
-var _excluded$4 = ["className", "as"];
-var defaultElement$3 = 'pre';
-var PreformattedText = function PreformattedText(_ref) {
-  var className = _ref.className,
-    as = _ref.as,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$4);
-  var Element = as || defaultElement$3;
-  return React.createElement(Element, _extends({
-    className: classNames('eds-preformatted-text', className)
-  }, rest));
+const defaultElement$3 = "pre";
+const PreformattedText = ({
+  className,
+  as,
+  ...rest
+}) => {
+  const Element = as || defaultElement$3;
+  return /* @__PURE__ */ jsx(
+    Element,
+    {
+      className: classNames("eds-preformatted-text", className),
+      ...rest
+    }
+  );
 };
-
-var _excluded$3 = ["className", "margin", "as"];
-var defaultElement$2 = 'span';
-var SmallText = function SmallText(_ref) {
-  var _classNames;
-  var className = _ref.className,
-    _ref$margin = _ref.margin,
-    margin = _ref$margin === void 0 ? 'both' : _ref$margin,
-    as = _ref.as,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$3);
-  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));
+const defaultElement$2 = "span";
+const SmallText = ({
+  className,
+  margin = "both",
+  as,
+  ...rest
+}) => {
+  const Element = as || defaultElement$2;
+  return /* @__PURE__ */ jsx(
+    Element,
+    {
+      className: classNames(
+        "eds-small-text",
+        {
+          [`eds-small-text--margin-top`]: margin === "top",
+          [`eds-small-text--margin-bottom`]: margin === "bottom",
+          [`eds-small-text--margin-none`]: margin === "none"
+        },
+        className
+      ),
+      ...rest
+    }
+  );
 };
-
-var _excluded$2 = ["className", "margin", "as"];
-var defaultElement$1 = 'span';
-var SubLabel = function SubLabel(_ref) {
-  var _classNames;
-  var className = _ref.className,
-    _ref$margin = _ref.margin,
-    margin = _ref$margin === void 0 ? 'both' : _ref$margin,
-    as = _ref.as,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
-  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));
+const defaultElement$1 = "span";
+const SubLabel = ({
+  className,
+  margin = "both",
+  as,
+  ...rest
+}) => {
+  const Element = as || defaultElement$1;
+  return /* @__PURE__ */ jsx(
+    Element,
+    {
+      className: classNames(
+        "eds-sub-label",
+        {
+          [`eds-sub-label--margin-top`]: margin === "top",
+          [`eds-sub-label--margin-bottom`]: margin === "bottom",
+          [`eds-sub-label--margin-none`]: margin === "none"
+        },
+        className
+      ),
+      ...rest
+    }
+  );
 };
-
-var _excluded$1 = ["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$1);
-  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));
+const defaultElement = "p";
+const SubParagraph = ({
+  className,
+  margin,
+  as,
+  ...rest
+}) => {
+  const Element = as || defaultElement;
+  return /* @__PURE__ */ jsx(
+    Element,
+    {
+      className: classNames(
+        "eds-sub-paragraph",
+        {
+          [`eds-sub-paragraph--margin-top`]: margin === "top",
+          [`eds-sub-paragraph--margin-bottom`]: margin === "bottom",
+          [`eds-sub-paragraph--margin-none`]: margin === "none"
+        },
+        className
+      ),
+      ...rest
+    }
+  );
 };
-
-var _excluded = ["className"];
-var UnorderedList = function UnorderedList(_ref) {
-  var className = _ref.className,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
-  return React.createElement("ul", _extends({
-    className: classNames('eds-unordered-list', className)
-  }, rest));
+const UnorderedList = ({
+  className,
+  ...rest
+}) => /* @__PURE__ */ jsx("ul", { className: classNames("eds-unordered-list", className), ...rest });
+warnAboutMissingStyles("typography");
+export {
+  Blockquote,
+  BlockquoteFooter,
+  CodeText,
+  EmphasizedText,
+  Heading1,
+  Heading2,
+  Heading3,
+  Heading4,
+  Heading5,
+  Heading6,
+  Label,
+  LeadParagraph,
+  Link,
+  ListItem,
+  NumberedList,
+  Paragraph,
+  PreformattedText,
+  SmallText,
+  StrongText,
+  SubLabel,
+  SubParagraph,
+  UnorderedList
 };
-
-warnAboutMissingStyles('typography');
-
-export { Blockquote, BlockquoteFooter, CodeText, EmphasizedText, Heading1, Heading2, Heading3, Heading4, Heading5, Heading6, Label, LeadParagraph, Link, ListItem, NumberedList, Paragraph, PreformattedText, SmallText, StrongText, SubLabel, SubParagraph, UnorderedList };
 //# sourceMappingURL=typography.esm.js.map