@iabbb/bds-react 0.38.7 → 0.39.0-alpha

package/Pagination/index.mjs

@@ -0,0 +1,159 @@
+import * as React from 'react';
+
+function _extends() {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends.apply(this, arguments);
+}
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+  return target;
+}
+function _objectWithoutProperties(source, excluded) {
+  if (source == null) return {};
+  var target = _objectWithoutPropertiesLoose(source, excluded);
+  var key, i;
+  if (Object.getOwnPropertySymbols) {
+    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+    for (i = 0; i < sourceSymbolKeys.length; i++) {
+      key = sourceSymbolKeys[i];
+      if (excluded.indexOf(key) >= 0) continue;
+      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+      target[key] = source[key];
+    }
+  }
+  return target;
+}
+function _toConsumableArray(arr) {
+  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
+}
+function _arrayWithoutHoles(arr) {
+  if (Array.isArray(arr)) return _arrayLikeToArray(arr);
+}
+function _iterableToArray(iter) {
+  if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
+}
+function _unsupportedIterableToArray(o, minLen) {
+  if (!o) return;
+  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+  var n = Object.prototype.toString.call(o).slice(8, -1);
+  if (n === "Object" && o.constructor) n = o.constructor.name;
+  if (n === "Map" || n === "Set") return Array.from(o);
+  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+}
+function _arrayLikeToArray(arr, len) {
+  if (len == null || len > arr.length) len = arr.length;
+  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
+  return arr2;
+}
+function _nonIterableSpread() {
+  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+
+var _excluded = ["buildPageUrl", "className", "currentPage", "onPageClick", "totalPages"];
+function usePages(currentPage, totalPages) {
+  var pages = [1, currentPage - 1, currentPage, currentPage + 1, totalPages].filter(function (x) {
+    return x >= 1 && x <= totalPages;
+  });
+  return _toConsumableArray(new Set(pages));
+}
+function Pagination(_ref) {
+  var buildPageUrl = _ref.buildPageUrl,
+    className = _ref.className,
+    currentPage = _ref.currentPage,
+    onPageClick = _ref.onPageClick,
+    totalPages = _ref.totalPages,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var pages = usePages(currentPage, totalPages);
+  return /*#__PURE__*/React.createElement("nav", _extends({
+    "aria-label": "pagination",
+    className: ['bds-pagination', className].filter(function (x) {
+      return x;
+    }).join(' ')
+  }, props), currentPage !== 1 && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("a", {
+    href: buildPageUrl(1),
+    className: "bds-first-page"
+  }, /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-hidden": "true",
+    focusable: "false",
+    height: "1em",
+    width: "100%",
+    viewBox: "0 63.95 512 384.1"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M459.5 440.6c9.5 7.9 22.8 9.7 34.1 4.4s18.4-16.6 18.4-29V96c0-12.4-7.2-23.7-18.4-29s-24.5-3.6-34.1 4.4L288 214.3v83.4l171.5 142.9zM256 352V96c0-12.4-7.2-23.7-18.4-29s-24.5-3.6-34.1 4.4l-192 160C4.2 237.5 0 246.5 0 256s4.2 18.5 11.5 24.6l192 160c9.5 7.9 22.8 9.7 34.1 4.4s18.4-16.6 18.4-29v-64z"
+  })), "First"), /*#__PURE__*/React.createElement("a", {
+    "aria-label": "previous",
+    href: buildPageUrl(currentPage - 1),
+    rel: "prev"
+  }, /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-hidden": "true",
+    focusable: "false",
+    width: "100%",
+    height: "1em",
+    viewBox: "0.02 95.9 192.08 320.17"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M9.4 278.6c-12.5-12.5-12.5-32.8 0-45.3l128-128c9.2-9.2 22.9-11.9 34.9-6.9s19.8 16.6 19.8 29.6v256c0 12.9-7.8 24.6-19.8 29.6s-25.7 2.2-34.9-6.9l-128-128z"
+  })), "Prev.")), /*#__PURE__*/React.createElement("ul", null, pages.map(function (page, index) {
+    var handlePageClick = function handlePageClick() {
+      if (!onPageClick) return;
+      onPageClick(page);
+    };
+    return /*#__PURE__*/React.createElement(React.Fragment, {
+      key: page
+    }, /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("a", {
+      "aria-current": page === currentPage ? 'page' : undefined,
+      href: buildPageUrl(page),
+      onClick: handlePageClick
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "visually-hidden"
+    }, "Page"), " ", page)), pages[index + 1] > page + 1 ? /*#__PURE__*/React.createElement("li", {
+      "data-overflow": ""
+    }, "...") : null);
+  })), currentPage !== totalPages && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("a", {
+    href: buildPageUrl(currentPage + 1),
+    rel: "next"
+  }, "Next", /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-hidden": "true",
+    focusable: "false",
+    viewBox: "63.9 95.9 192.1 320.17",
+    width: "100%",
+    height: "1em"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M246.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-128-128c-9.2-9.2-22.9-11.9-34.9-6.9S63.9 115 63.9 128v256c0 12.9 7.8 24.6 19.8 29.6s25.7 2.2 34.9-6.9l128-128z"
+  }))), /*#__PURE__*/React.createElement("a", {
+    href: buildPageUrl(totalPages),
+    className: "bds-last-page"
+  }, "Last", /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-hidden": "true",
+    focusable: "false",
+    width: "100%",
+    height: "1em",
+    viewBox: "0 63.95 512 384.1"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M52.5 440.6c-9.5 7.9-22.8 9.7-34.1 4.4S0 428.4 0 416V96c0-12.4 7.2-23.7 18.4-29s24.5-3.6 34.1 4.4L224 214.3v83.4L52.5 440.6zM256 352V96c0-12.4 7.2-23.7 18.4-29s24.5-3.6 34.1 4.4l192 160c7.3 6.1 11.5 15.1 11.5 24.6s-4.2 18.5-11.5 24.6l-192 160c-9.5 7.9-22.8 9.7-34.1 4.4S256 428.4 256 416v-64z"
+  })))));
+}
+
+export { Pagination as default };
+//# sourceMappingURL=index.mjs.map

package/Pagination/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":["../../src/Pagination/Pagination.tsx"],"sourcesContent":["import * as React from 'react';\r\n\r\nexport type PaginationProps = {\r\n  buildPageUrl: (page: number) => string;\r\n  currentPage: number;\r\n  onPageClick?: (page: number) => void;\r\n  totalPages: number;\r\n};\r\n\r\nfunction usePages(currentPage: number, totalPages: number) {\r\n  const pages = [1, currentPage - 1, currentPage, currentPage + 1, totalPages].filter(\r\n    (x) => x >= 1 && x <= totalPages,\r\n  );\r\n  return [...new Set(pages)];\r\n}\r\n\r\nexport default function Pagination({\r\n  buildPageUrl,\r\n  className,\r\n  currentPage,\r\n  onPageClick,\r\n  totalPages,\r\n  ...props\r\n}: PaginationProps & React.ComponentPropsWithoutRef<'nav'>) {\r\n  const pages = usePages(currentPage, totalPages);\r\n\r\n  return (\r\n    <nav aria-label=\"pagination\" className={['bds-pagination', className].filter((x) => x).join(' ')} {...props}>\r\n      {currentPage !== 1 && (\r\n        <>\r\n          <a href={buildPageUrl(1)} className=\"bds-first-page\">\r\n            <svg\r\n              xmlns=\"http://www.w3.org/2000/svg\"\r\n              aria-hidden=\"true\"\r\n              focusable=\"false\"\r\n              height=\"1em\"\r\n              width=\"100%\"\r\n              viewBox=\"0 63.95 512 384.1\"\r\n            >\r\n              <path d=\"M459.5 440.6c9.5 7.9 22.8 9.7 34.1 4.4s18.4-16.6 18.4-29V96c0-12.4-7.2-23.7-18.4-29s-24.5-3.6-34.1 4.4L288 214.3v83.4l171.5 142.9zM256 352V96c0-12.4-7.2-23.7-18.4-29s-24.5-3.6-34.1 4.4l-192 160C4.2 237.5 0 246.5 0 256s4.2 18.5 11.5 24.6l192 160c9.5 7.9 22.8 9.7 34.1 4.4s18.4-16.6 18.4-29v-64z\" />\r\n            </svg>\r\n            First\r\n          </a>\r\n          <a aria-label=\"previous\" href={buildPageUrl(currentPage - 1)} rel=\"prev\">\r\n            <svg\r\n              xmlns=\"http://www.w3.org/2000/svg\"\r\n              aria-hidden=\"true\"\r\n              focusable=\"false\"\r\n              width=\"100%\"\r\n              height=\"1em\"\r\n              viewBox=\"0.02 95.9 192.08 320.17\"\r\n            >\r\n              <path d=\"M9.4 278.6c-12.5-12.5-12.5-32.8 0-45.3l128-128c9.2-9.2 22.9-11.9 34.9-6.9s19.8 16.6 19.8 29.6v256c0 12.9-7.8 24.6-19.8 29.6s-25.7 2.2-34.9-6.9l-128-128z\" />\r\n            </svg>\r\n            Prev.\r\n          </a>\r\n        </>\r\n      )}\r\n      <ul>\r\n        {pages.map((page, index) => {\r\n          const handlePageClick = () => {\r\n            if (!onPageClick) return;\r\n\r\n            onPageClick(page);\r\n          };\r\n\r\n          return (\r\n            <React.Fragment key={page}>\r\n              <li>\r\n                <a\r\n                  aria-current={page === currentPage ? 'page' : undefined}\r\n                  href={buildPageUrl(page)}\r\n                  onClick={handlePageClick}\r\n                >\r\n                  <span className=\"visually-hidden\">Page</span> {page}\r\n                </a>\r\n              </li>\r\n              {pages[index + 1] > page + 1 ? <li data-overflow=\"\">...</li> : null}\r\n            </React.Fragment>\r\n          );\r\n        })}\r\n      </ul>\r\n      {currentPage !== totalPages && (\r\n        <>\r\n          <a href={buildPageUrl(currentPage + 1)} rel=\"next\">\r\n            Next\r\n            <svg\r\n              xmlns=\"http://www.w3.org/2000/svg\"\r\n              aria-hidden=\"true\"\r\n              focusable=\"false\"\r\n              viewBox=\"63.9 95.9 192.1 320.17\"\r\n              width=\"100%\"\r\n              height=\"1em\"\r\n            >\r\n              <path d=\"M246.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-128-128c-9.2-9.2-22.9-11.9-34.9-6.9S63.9 115 63.9 128v256c0 12.9 7.8 24.6 19.8 29.6s25.7 2.2 34.9-6.9l128-128z\" />\r\n            </svg>\r\n          </a>\r\n          <a href={buildPageUrl(totalPages)} className=\"bds-last-page\">\r\n            Last\r\n            <svg\r\n              xmlns=\"http://www.w3.org/2000/svg\"\r\n              aria-hidden=\"true\"\r\n              focusable=\"false\"\r\n              width=\"100%\"\r\n              height=\"1em\"\r\n              viewBox=\"0 63.95 512 384.1\"\r\n            >\r\n              <path d=\"M52.5 440.6c-9.5 7.9-22.8 9.7-34.1 4.4S0 428.4 0 416V96c0-12.4 7.2-23.7 18.4-29s24.5-3.6 34.1 4.4L224 214.3v83.4L52.5 440.6zM256 352V96c0-12.4 7.2-23.7 18.4-29s24.5-3.6 34.1 4.4l192 160c7.3 6.1 11.5 15.1 11.5 24.6s-4.2 18.5-11.5 24.6l-192 160c-9.5 7.9-22.8 9.7-34.1 4.4S256 428.4 256 416v-64z\" />\r\n            </svg>\r\n          </a>\r\n        </>\r\n      )}\r\n    </nav>\r\n  );\r\n}\r\n"],"names":["usePages","currentPage","totalPages","pages","filter","x","_toConsumableArray","Set","Pagination","_ref","buildPageUrl","className","onPageClick","props","_objectWithoutProperties","_excluded","React","createElement","_extends","join","Fragment","href","xmlns","focusable","height","width","viewBox","d","rel","map","page","index","handlePageClick","key","undefined","onClick"],"mappings":"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"}

package/Pagination/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@iabbb/bds-react/Pagination",
+  "private": true,
+  "main": "../index.cjs",
+  "module": "./index.mjs",
+  "types": "./index.d.ts"
+}

package/README.md

@@ -1,17 +1,17 @@
-# `@iabbb/bds-react`
-
-Better Design System enables consumers to build more visually consistent and accessible designs.
-
-## Installation
-
-This project is distributed via npm and should be added to your project's dependencies.
-
-```
-yarn add @iabbb/bds-react
-```
-
-`@iabbb/bds` is a peer dependency, and should be installed at the same version as `@iabbb/bds-react`.
-
-## Documentation
-
-[BDS Storybook](https://iabbb.github.io/bds/?path=/docs/bds-documentation--docs)
+# `@iabbb/bds-react`
+
+Better Design System enables consumers to build more visually consistent and accessible designs.
+
+## Installation
+
+This project is distributed via npm and should be added to your project's dependencies.
+
+```
+yarn add @iabbb/bds-react
+```
+
+`@iabbb/bds` is a peer dependency, and should be installed at the same version as `@iabbb/bds-react`.
+
+## Documentation
+
+[BDS Storybook](https://iabbb.github.io/bds/?path=/docs/bds-documentation--docs)

package/Typography/Typography.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+export declare type TypographyProps = {
+    component?: React.ElementType;
+    variant?: 'body' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5';
+};
+declare const Typography: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLOrSVGElement> & TypographyProps & React.RefAttributes<HTMLOrSVGElement>>;
+export default Typography;

package/Typography/index.cjs

@@ -0,0 +1,99 @@
+'use strict';
+
+var React = require('react');
+
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+function _extends() {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends.apply(this, arguments);
+}
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+  return target;
+}
+function _objectWithoutProperties(source, excluded) {
+  if (source == null) return {};
+  var target = _objectWithoutPropertiesLoose(source, excluded);
+  var key, i;
+  if (Object.getOwnPropertySymbols) {
+    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+    for (i = 0; i < sourceSymbolKeys.length; i++) {
+      key = sourceSymbolKeys[i];
+      if (excluded.indexOf(key) >= 0) continue;
+      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+      target[key] = source[key];
+    }
+  }
+  return target;
+}
+
+var _excluded = ["className", "component", "variant"];
+var componentMap = {
+  h1: 'h1',
+  h2: 'h2',
+  h3: 'h3',
+  h4: 'h4',
+  h5: 'h5',
+  body: 'p'
+};
+var classMap = {
+  h1: 'bds-h1',
+  h2: 'bds-h2',
+  h3: 'bds-h3',
+  h4: 'bds-h4',
+  h5: 'bds-h5',
+  body: 'bds-body'
+};
+var Typography = /*#__PURE__*/React__namespace.forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+    component = _ref.component,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'body' : _ref$variant,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var Component = component !== null && component !== void 0 ? component : componentMap[variant];
+  return /*#__PURE__*/React__namespace.createElement(Component, _extends({
+    className: [classMap[variant], className].filter(function (x) {
+      return x;
+    }).join(' '),
+    ref: ref
+  }, props));
+});
+
+module.exports = Typography;
+//# sourceMappingURL=index.cjs.map

package/Typography/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../src/Typography/Typography.tsx"],"sourcesContent":["import * as React from 'react';\r\n\r\nconst componentMap = {\r\n  h1: 'h1',\r\n  h2: 'h2',\r\n  h3: 'h3',\r\n  h4: 'h4',\r\n  h5: 'h5',\r\n  body: 'p',\r\n};\r\n\r\nconst classMap = {\r\n  h1: 'bds-h1',\r\n  h2: 'bds-h2',\r\n  h3: 'bds-h3',\r\n  h4: 'bds-h4',\r\n  h5: 'bds-h5',\r\n  body: 'bds-body',\r\n};\r\n\r\nexport type TypographyProps = {\r\n  component?: React.ElementType;\r\n  variant?: 'body' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5';\r\n};\r\n\r\nconst Typography = React.forwardRef<HTMLOrSVGElement, React.HTMLAttributes<HTMLOrSVGElement> & TypographyProps>(\r\n  ({ className, component, variant = 'body', ...props }, ref) => {\r\n    const Component = component ?? (componentMap[variant] as React.ElementType);\r\n    return (\r\n      <Component className={[classMap[variant], className].filter((x) => x).join(' ')} ref={ref} {...props} />\r\n    );\r\n  },\r\n);\r\n\r\nexport default Typography;\r\n"],"names":["componentMap","h1","h2","h3","h4","h5","body","classMap","Typography","React","forwardRef","_ref","ref","className","component","_ref$variant","variant","props","_objectWithoutProperties","_excluded","Component","createElement","_extends","filter","x","join"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA,IAAMA,YAAY,GAAG;AACnBC,EAAAA,EAAE,EAAE,IAAI;AACRC,EAAAA,EAAE,EAAE,IAAI;AACRC,EAAAA,EAAE,EAAE,IAAI;AACRC,EAAAA,EAAE,EAAE,IAAI;AACRC,EAAAA,EAAE,EAAE,IAAI;AACRC,EAAAA,IAAI,EAAE,GAAA;AACR,CAAC,CAAA;AAED,IAAMC,QAAQ,GAAG;AACfN,EAAAA,EAAE,EAAE,QAAQ;AACZC,EAAAA,EAAE,EAAE,QAAQ;AACZC,EAAAA,EAAE,EAAE,QAAQ;AACZC,EAAAA,EAAE,EAAE,QAAQ;AACZC,EAAAA,EAAE,EAAE,QAAQ;AACZC,EAAAA,IAAI,EAAE,UAAA;AACR,CAAC,CAAA;AAOKE,IAAAA,UAAU,gBAAGC,gBAAK,CAACC,UAAU,CACjC,UAAAC,IAAA,EAAuDC,GAAG,EAAK;AAAA,EAAA,IAA5DC,SAAS,GAAAF,IAAA,CAATE,SAAS;IAAEC,SAAS,GAAAH,IAAA,CAATG,SAAS;IAAAC,YAAA,GAAAJ,IAAA,CAAEK,OAAO;AAAPA,IAAAA,OAAO,GAAAD,YAAA,KAAG,KAAA,CAAA,GAAA,MAAM,GAAAA,YAAA;AAAKE,IAAAA,KAAK,GAAAC,wBAAA,CAAAP,IAAA,EAAAQ,SAAA,CAAA,CAAA;EACjD,IAAMC,SAAS,GAAGN,SAAS,KAATA,IAAAA,IAAAA,SAAS,KAATA,KAAAA,CAAAA,GAAAA,SAAS,GAAKd,YAAY,CAACgB,OAAO,CAAuB,CAAA;AAC3E,EAAA,oBACEP,gBAAA,CAAAY,aAAA,CAACD,SAAS,EAAAE,QAAA,CAAA;AAACT,IAAAA,SAAS,EAAE,CAACN,QAAQ,CAACS,OAAO,CAAC,EAAEH,SAAS,CAAC,CAACU,MAAM,CAAC,UAACC,CAAC,EAAA;AAAA,MAAA,OAAKA,CAAC,CAAA;AAAA,KAAA,CAAC,CAACC,IAAI,CAAC,GAAG,CAAE;AAACb,IAAAA,GAAG,EAAEA,GAAAA;GAASK,EAAAA,KAAK,CAAG,CAAC,CAAA;AAE5G,CACF;;;;"}

package/Typography/index.d.ts

@@ -0,0 +1 @@
+export { default } from './Typography';

package/Typography/index.mjs

@@ -0,0 +1,78 @@
+import * as React from 'react';
+
+function _extends() {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends.apply(this, arguments);
+}
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+  return target;
+}
+function _objectWithoutProperties(source, excluded) {
+  if (source == null) return {};
+  var target = _objectWithoutPropertiesLoose(source, excluded);
+  var key, i;
+  if (Object.getOwnPropertySymbols) {
+    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+    for (i = 0; i < sourceSymbolKeys.length; i++) {
+      key = sourceSymbolKeys[i];
+      if (excluded.indexOf(key) >= 0) continue;
+      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+      target[key] = source[key];
+    }
+  }
+  return target;
+}
+
+var _excluded = ["className", "component", "variant"];
+var componentMap = {
+  h1: 'h1',
+  h2: 'h2',
+  h3: 'h3',
+  h4: 'h4',
+  h5: 'h5',
+  body: 'p'
+};
+var classMap = {
+  h1: 'bds-h1',
+  h2: 'bds-h2',
+  h3: 'bds-h3',
+  h4: 'bds-h4',
+  h5: 'bds-h5',
+  body: 'bds-body'
+};
+var Typography = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+    component = _ref.component,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'body' : _ref$variant,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var Component = component !== null && component !== void 0 ? component : componentMap[variant];
+  return /*#__PURE__*/React.createElement(Component, _extends({
+    className: [classMap[variant], className].filter(function (x) {
+      return x;
+    }).join(' '),
+    ref: ref
+  }, props));
+});
+
+export { Typography as default };
+//# sourceMappingURL=index.mjs.map

package/Typography/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":["../../src/Typography/Typography.tsx"],"sourcesContent":["import * as React from 'react';\r\n\r\nconst componentMap = {\r\n  h1: 'h1',\r\n  h2: 'h2',\r\n  h3: 'h3',\r\n  h4: 'h4',\r\n  h5: 'h5',\r\n  body: 'p',\r\n};\r\n\r\nconst classMap = {\r\n  h1: 'bds-h1',\r\n  h2: 'bds-h2',\r\n  h3: 'bds-h3',\r\n  h4: 'bds-h4',\r\n  h5: 'bds-h5',\r\n  body: 'bds-body',\r\n};\r\n\r\nexport type TypographyProps = {\r\n  component?: React.ElementType;\r\n  variant?: 'body' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5';\r\n};\r\n\r\nconst Typography = React.forwardRef<HTMLOrSVGElement, React.HTMLAttributes<HTMLOrSVGElement> & TypographyProps>(\r\n  ({ className, component, variant = 'body', ...props }, ref) => {\r\n    const Component = component ?? (componentMap[variant] as React.ElementType);\r\n    return (\r\n      <Component className={[classMap[variant], className].filter((x) => x).join(' ')} ref={ref} {...props} />\r\n    );\r\n  },\r\n);\r\n\r\nexport default Typography;\r\n"],"names":["componentMap","h1","h2","h3","h4","h5","body","classMap","Typography","React","forwardRef","_ref","ref","className","component","_ref$variant","variant","props","_objectWithoutProperties","_excluded","Component","createElement","_extends","filter","x","join"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA,IAAMA,YAAY,GAAG;AACnBC,EAAAA,EAAE,EAAE,IAAI;AACRC,EAAAA,EAAE,EAAE,IAAI;AACRC,EAAAA,EAAE,EAAE,IAAI;AACRC,EAAAA,EAAE,EAAE,IAAI;AACRC,EAAAA,EAAE,EAAE,IAAI;AACRC,EAAAA,IAAI,EAAE,GAAA;AACR,CAAC,CAAA;AAED,IAAMC,QAAQ,GAAG;AACfN,EAAAA,EAAE,EAAE,QAAQ;AACZC,EAAAA,EAAE,EAAE,QAAQ;AACZC,EAAAA,EAAE,EAAE,QAAQ;AACZC,EAAAA,EAAE,EAAE,QAAQ;AACZC,EAAAA,EAAE,EAAE,QAAQ;AACZC,EAAAA,IAAI,EAAE,UAAA;AACR,CAAC,CAAA;AAOKE,IAAAA,UAAU,gBAAGC,KAAK,CAACC,UAAU,CACjC,UAAAC,IAAA,EAAuDC,GAAG,EAAK;AAAA,EAAA,IAA5DC,SAAS,GAAAF,IAAA,CAATE,SAAS;IAAEC,SAAS,GAAAH,IAAA,CAATG,SAAS;IAAAC,YAAA,GAAAJ,IAAA,CAAEK,OAAO;AAAPA,IAAAA,OAAO,GAAAD,YAAA,KAAG,KAAA,CAAA,GAAA,MAAM,GAAAA,YAAA;AAAKE,IAAAA,KAAK,GAAAC,wBAAA,CAAAP,IAAA,EAAAQ,SAAA,CAAA,CAAA;EACjD,IAAMC,SAAS,GAAGN,SAAS,KAATA,IAAAA,IAAAA,SAAS,KAATA,KAAAA,CAAAA,GAAAA,SAAS,GAAKd,YAAY,CAACgB,OAAO,CAAuB,CAAA;AAC3E,EAAA,oBACEP,KAAA,CAAAY,aAAA,CAACD,SAAS,EAAAE,QAAA,CAAA;AAACT,IAAAA,SAAS,EAAE,CAACN,QAAQ,CAACS,OAAO,CAAC,EAAEH,SAAS,CAAC,CAACU,MAAM,CAAC,UAACC,CAAC,EAAA;AAAA,MAAA,OAAKA,CAAC,CAAA;AAAA,KAAA,CAAC,CAACC,IAAI,CAAC,GAAG,CAAE;AAACb,IAAAA,GAAG,EAAEA,GAAAA;GAASK,EAAAA,KAAK,CAAG,CAAC,CAAA;AAE5G,CACF;;;;"}

package/Typography/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@iabbb/bds-react/Typography",
+  "private": true,
+  "main": "../index.cjs",
+  "module": "./index.mjs",
+  "types": "./index.d.ts"
+}