@telus-uds/components-web 2.43.0 → 3.0.0

package/lib/StoryCard/StoryCard.js

@@ -1,24 +1,16 @@
-"use strict";
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Box, Divider, PressableCardBase, selectSystemProps, Spacer, StackView, StackWrap, Typography, hrefAttrsProp, a11yProps, focusHandlerProps, viewProps, withLinkRouter, useThemeTokens, useThemeTokensCallback, getTokensPropType } from '@telus-uds/components-base';
+import styled from 'styled-components';
+import FullBleedContent, { getFullBleedBorderRadius, useFullBleedContentProps } from '../shared/FullBleedContent';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _componentsBase = require("@telus-uds/components-base");
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _FullBleedContent = _interopRequireWildcard(require("../shared/FullBleedContent"));
-var _jsxRuntime = require("react/jsx-runtime");
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 // Passes React Native-oriented system props through UDS PressableCardBase
-const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_componentsBase.a11yProps, _componentsBase.focusHandlerProps, _componentsBase.viewProps]);
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, viewProps]);
 
 // Stop changes to the card's inner border width causing the size and
 // apparent position of the full bleed image to change.
-const FullBleedOffsetOuter = /*#__PURE__*/_styledComponents.default.div.withConfig({
+const FullBleedOffsetOuter = /*#__PURE__*/styled.div.withConfig({
   displayName: "StoryCard__FullBleedOffsetOuter",
   componentId: "components-web__sc-yhvivu-0"
 })(_ref => {
@@ -30,7 +22,7 @@ const FullBleedOffsetOuter = /*#__PURE__*/_styledComponents.default.div.withConf
     marginTop: borderOffset * 2
   };
 });
-const FullBleedOffsetInner = /*#__PURE__*/_styledComponents.default.div.withConfig({
+const FullBleedOffsetInner = /*#__PURE__*/styled.div.withConfig({
   displayName: "StoryCard__FullBleedOffsetInner",
   componentId: "components-web__sc-yhvivu-1"
 })(_ref2 => {
@@ -54,7 +46,7 @@ const FullBleedOffsetInner = /*#__PURE__*/_styledComponents.default.div.withConf
  * - Use `href` to set the target URL
  * - Use `fullBleedContent` to set the thumbnail image
  */
-const StoryCard = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
+const StoryCard = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   let {
     tag,
     date,
@@ -72,18 +64,18 @@ const StoryCard = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     fullBleedContentPosition,
     contentStackDirection,
     fullBleedContentProps
-  } = (0, _FullBleedContent.useFullBleedContentProps)({
+  } = useFullBleedContentProps({
     ...fullBleedContent,
     position: 'bottom'
   });
-  const generalTokens = (0, _componentsBase.useThemeTokens)('StoryCard', tokens, variant);
-  const getTokens = (0, _componentsBase.useThemeTokensCallback)('StoryCard', tokens, variant);
+  const generalTokens = useThemeTokens('StoryCard', tokens, variant);
+  const getTokens = useThemeTokensCallback('StoryCard', tokens, variant);
   const getPressableCardTokens = cardState => getTokens(cardState);
   const {
     hrefAttrs,
     rest: unusedRest
-  } = _componentsBase.hrefAttrsProp.bundle(rest);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.PressableCardBase, {
+  } = hrefAttrsProp.bundle(rest);
+  return /*#__PURE__*/_jsx(PressableCardBase, {
     ref: ref,
     onPress: onPress,
     href: href,
@@ -98,14 +90,14 @@ const StoryCard = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
 
       // Stop content jumping around as border size changes
       const borderOffset = borderWidth - generalTokens.borderWidth;
-      const fullBleedBorderRadius = (0, _FullBleedContent.getFullBleedBorderRadius)(borderRadius + borderOffset, fullBleedContentPosition);
-      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.StackView, {
+      const fullBleedBorderRadius = getFullBleedBorderRadius(borderRadius + borderOffset, fullBleedContentPosition);
+      return /*#__PURE__*/_jsxs(StackView, {
         direction: contentStackDirection,
         tokens: {
           justifyContent: 'space-between',
           flexGrow: 1
         },
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.Box, {
+        children: [/*#__PURE__*/_jsxs(Box, {
           horizontal: {
             xs: 4,
             lg: 5,
@@ -120,13 +112,13 @@ const StoryCard = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
               subtract: borderOffset
             }
           },
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.StackWrap, {
+          children: [/*#__PURE__*/_jsxs(StackWrap, {
             space: 1,
             tokens: {
               justifyContent: 'space-between',
               alignItems: 'baseline'
             },
-            children: [Boolean(tag) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+            children: [Boolean(tag) && /*#__PURE__*/_jsx(Typography, {
               variant: {
                 size: 'eyebrow'
               },
@@ -135,35 +127,35 @@ const StoryCard = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
             /*#__PURE__*/
             // TODO: get user locale and apply date formatting: "MMM DD, YYYY" for `en` and "YYYY-MM-DD" for `fr`
             // Get locale based on decision of https://github.com/telus/universal-design-system/issues/715
-            (0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+            _jsx(Typography, {
               variant: {
                 size: 'small'
               },
               children: date
             })]
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Spacer, {
+          }), /*#__PURE__*/_jsx(Spacer, {
             space: 2
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Divider, {
+          }), /*#__PURE__*/_jsx(Divider, {
             variant: {
               decorative: true
             }
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Spacer, {
+          }), /*#__PURE__*/_jsx(Spacer, {
             space: 3
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+          }), /*#__PURE__*/_jsx(Typography, {
             variant: {
               size: 'h3'
             },
             children: title
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Spacer, {
+          }), /*#__PURE__*/_jsx(Spacer, {
             space: 2
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+          }), /*#__PURE__*/_jsx(Typography, {
             children: description
           })]
-        }), Boolean(fullBleedContentProps.src || fullBleedContentProps.content) && /*#__PURE__*/(0, _jsxRuntime.jsx)(FullBleedOffsetOuter, {
+        }), Boolean(fullBleedContentProps.src || fullBleedContentProps.content) && /*#__PURE__*/_jsx(FullBleedOffsetOuter, {
           borderOffset: borderOffset,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(FullBleedOffsetInner, {
+          children: /*#__PURE__*/_jsx(FullBleedOffsetInner, {
             borderOffset: borderOffset,
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FullBleedContent.default, {
+            children: /*#__PURE__*/_jsx(FullBleedContent, {
               borderRadius: fullBleedBorderRadius,
               ...fullBleedContentProps
             })
@@ -176,7 +168,7 @@ const StoryCard = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
 StoryCard.displayName = 'StoryCard';
 StoryCard.propTypes = {
   ...selectedSystemPropTypes,
-  tokens: (0, _componentsBase.getTokensPropType)('StoryCard'),
+  tokens: getTokensPropType('StoryCard'),
   /**
    * The URL of the story to be navigated to. Note that `Video` component does not play well when used within
    * a `StoryCard` with `href` prop set (the volume and progress sliders can be clicked but are not draggable).
@@ -184,37 +176,36 @@ StoryCard.propTypes = {
    *
    * @see https://github.com/telus/allium-design-system/issues/6
    */
-  href: _propTypes.default.string,
+  href: PropTypes.string,
   /**
    * Optional function to be called on press e.g. for within-page navigation.
    */
-  onPress: _propTypes.default.func,
+  onPress: PropTypes.func,
   /**
    * Text stating the category of the content.
    */
-  tag: _propTypes.default.string,
+  tag: PropTypes.string,
   /**
    * Text stating the date a story was published.
    */
-  date: _propTypes.default.string.isRequired,
+  date: PropTypes.string.isRequired,
   /**
    * Text stating the title or headline of the story.
    */
-  title: _propTypes.default.string.isRequired,
+  title: PropTypes.string.isRequired,
   /**
    * Text giving a short description of the story. One paragraph of plain text.
    */
-  description: _propTypes.default.string.isRequired,
+  description: PropTypes.string.isRequired,
   /**
    * Full bleed image to be placed on the card, deprecated in favor of `fullBleedContent`.
    *
    * @deprecated
    */
-  fullBleedImage: _propTypes.default.exact(_FullBleedContent.default.propTypes || {}),
+  fullBleedImage: PropTypes.exact(FullBleedContent.propTypes || {}),
   /**
    * Full bleed image to be placed on the card.
    */
-  fullBleedContent: _propTypes.default.exact(_FullBleedContent.default.propTypes || {})
+  fullBleedContent: PropTypes.exact(FullBleedContent.propTypes || {})
 };
-var _default = (0, _componentsBase.withLinkRouter)(StoryCard);
-exports.default = _default;
+export default withLinkRouter(StoryCard);

package/lib/StoryCard/index.js

@@ -1,10 +1,2 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _StoryCard = _interopRequireDefault(require("./StoryCard"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-var _default = _StoryCard.default;
-exports.default = _default;
+import StoryCard from './StoryCard';
+export default StoryCard;

package/lib/Table/Body.js

@@ -1,25 +1,17 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const Body = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+import React from 'react';
+import PropTypes from 'prop-types';
+import { jsx as _jsx } from "react/jsx-runtime";
+const Body = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     children
   } = _ref;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("tbody", {
+  return /*#__PURE__*/_jsx("tbody", {
     ref: ref,
     children: children
   });
 });
 Body.displayName = 'Body';
 Body.propTypes = {
-  children: _propTypes.default.node
+  children: PropTypes.node
 };
-var _default = Body;
-exports.default = _default;
+export default Body;

package/lib/Table/Cell.js

@@ -1,18 +1,9 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-var _componentsBase = require("@telus-uds/components-base");
-var _Table = require("./Table");
-var _jsxRuntime = require("react/jsx-runtime");
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled, { css } from 'styled-components';
+import { Typography, useThemeTokens, applyShadowToken } from '@telus-uds/components-base';
+import { useTableContext } from './Table';
+import { jsx as _jsx } from "react/jsx-runtime";
 const HEADER_TYPE = {
   HEADING: 'heading',
   SUBHEADING: 'subHeading',
@@ -24,9 +15,9 @@ const stickyStyles = _ref => {
     stickyBackgroundColor,
     type
   } = _ref;
-  return (0, _styledComponents.css)(["position:sticky;left:0;z-index:2;clip-path:inset(0 -8px 0 0);", " &::before{content:'';box-shadow:", ";position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;}"], type !== HEADER_TYPE.SUBHEADING && type !== HEADER_TYPE.HEADING ? `background-color: ${stickyBackgroundColor};` : undefined, cellStickyShadow);
+  return css(["position:sticky;left:0;z-index:2;clip-path:inset(0 -8px 0 0);", " &::before{content:'';box-shadow:", ";position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;}"], type !== HEADER_TYPE.SUBHEADING && type !== HEADER_TYPE.HEADING ? `background-color: ${stickyBackgroundColor};` : undefined, cellStickyShadow);
 };
-const sharedStyles = /*#__PURE__*/(0, _styledComponents.css)(["", ""], _ref2 => {
+const sharedStyles = /*#__PURE__*/css(["", ""], _ref2 => {
   let {
     isSticky,
     align,
@@ -40,13 +31,13 @@ const sharedStyles = /*#__PURE__*/(0, _styledComponents.css)(["", ""], _ref2 =>
     stickyBackgroundColor,
     type
   } = _ref2;
-  return (0, _styledComponents.css)(["text-align:", ";min-width:", "px;padding:", "px ", "px ", "px ", "px;background-color:", ";", ";"], align, cellMinWidth, cellPaddingTop, cellPaddingRight, cellPaddingBottom, cellPaddingLeft, cellBackground, isSticky && stickyStyles({
+  return css(["text-align:", ";min-width:", "px;padding:", "px ", "px ", "px ", "px;background-color:", ";", ";"], align, cellMinWidth, cellPaddingTop, cellPaddingRight, cellPaddingBottom, cellPaddingLeft, cellBackground, isSticky && stickyStyles({
     type,
     cellStickyShadow,
     stickyBackgroundColor
   }));
 });
-const createStyledCell = htmlElement => _styledComponents.default[htmlElement].withConfig({
+const createStyledCell = htmlElement => styled[htmlElement].withConfig({
   displayName: "Cell__createStyledCell",
   componentId: "components-web__sc-ltgfic-0"
 })(["", ";box-shadow:", ";", ""], sharedStyles, _ref3 => {
@@ -65,7 +56,7 @@ const createStyledCell = htmlElement => _styledComponents.default[htmlElement].w
 });
 const StyledHeaderCell = createStyledCell('th');
 const StyledDataCell = createStyledCell('td');
-const Cell = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
+const Cell = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
   let {
     children,
     isFirstInRow,
@@ -78,7 +69,7 @@ const Cell = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
     isScrollable: isTableScrollable,
     tokens: tableTokens,
     spacing
-  } = (0, _Table.useTableContext)();
+  } = useTableContext();
   const themeTokens = {
     ...tableTokens,
     ...cellTokens
@@ -99,7 +90,7 @@ const Cell = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
     stickyBackgroundColor,
     fontColor,
     display
-  } = (0, _componentsBase.useThemeTokens)('Table', themeTokens, {
+  } = useThemeTokens('Table', themeTokens, {
     spacing,
     type,
     text
@@ -109,7 +100,7 @@ const Cell = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
     isSticky: isTableScrollable && isFirstInRow,
     cellBackground,
     cellMinWidth,
-    cellStickyShadow: (0, _componentsBase.applyShadowToken)(cellStickyShadow).boxShadow,
+    cellStickyShadow: applyShadowToken(cellStickyShadow).boxShadow,
     cellPaddingTop,
     cellPaddingRight,
     cellPaddingLeft,
@@ -128,39 +119,39 @@ const Cell = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
   };
   switch (type) {
     case HEADER_TYPE.HEADING:
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledHeaderCell, {
+      return /*#__PURE__*/_jsx(StyledHeaderCell, {
         scope: "col",
         ...sharedProps,
         type: type,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+        children: /*#__PURE__*/_jsx(Typography, {
           tokens: typographyTokens,
           children: children
         })
       });
     case HEADER_TYPE.SUBHEADING:
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledHeaderCell, {
+      return /*#__PURE__*/_jsx(StyledHeaderCell, {
         scope: "col",
         ...sharedProps,
         type: type,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+        children: /*#__PURE__*/_jsx(Typography, {
           tokens: typographyTokens,
           children: children
         })
       });
     case HEADER_TYPE.ROWHEADING:
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledHeaderCell, {
+      return /*#__PURE__*/_jsx(StyledHeaderCell, {
         scope: "row",
         ...sharedProps,
         type: type,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+        children: /*#__PURE__*/_jsx(Typography, {
           tokens: typographyTokens,
           children: children
         })
       });
     default:
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledDataCell, {
+      return /*#__PURE__*/_jsx(StyledDataCell, {
         ...sharedProps,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+        children: /*#__PURE__*/_jsx(Typography, {
           tokens: typographyTokens,
           children: children
         })
@@ -169,18 +160,17 @@ const Cell = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
 });
 Cell.displayName = 'Cell';
 Cell.propTypes = {
-  type: _propTypes.default.oneOf(['default', 'heading', 'subHeading', 'rowHeading']),
-  tokens: _propTypes.default.object,
-  children: _propTypes.default.node,
+  type: PropTypes.oneOf(['default', 'heading', 'subHeading', 'rowHeading']),
+  tokens: PropTypes.object,
+  children: PropTypes.node,
   /**
    * @ignore
    * Used internally for making the first column sticky
    */
-  isFirstInRow: _propTypes.default.bool,
+  isFirstInRow: PropTypes.bool,
   /**
    * Defines the text alignment within the cell
    */
-  align: _propTypes.default.oneOf(['left', 'center', 'right'])
+  align: PropTypes.oneOf(['left', 'center', 'right'])
 };
-var _default = Cell;
-exports.default = _default;
+export default Cell;

package/lib/Table/Header.js

@@ -1,25 +1,18 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _Row = _interopRequireDefault(require("./Row"));
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const Header = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+import React from 'react';
+import PropTypes from 'prop-types';
+import Row from './Row';
+import { jsx as _jsx } from "react/jsx-runtime";
+const Header = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     children
   } = _ref;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("thead", {
+  return /*#__PURE__*/_jsx("thead", {
     ref: ref,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Row.default, {
-      children: _react.default.Children.map(children, child =>
+    children: /*#__PURE__*/_jsx(Row, {
+      children: React.Children.map(children, child =>
       /*#__PURE__*/
       // TO DO: pass type as a variant instead of prop
-      _react.default.cloneElement(child, {
+      React.cloneElement(child, {
         type: 'heading'
       }))
     })
@@ -27,7 +20,6 @@ const Header = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
 });
 Header.displayName = 'Header';
 Header.propTypes = {
-  children: _propTypes.default.node
+  children: PropTypes.node
 };
-var _default = Header;
-exports.default = _default;
+export default Header;

package/lib/Table/Row.js

@@ -1,27 +1,19 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const Row = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+import React from 'react';
+import PropTypes from 'prop-types';
+import { jsx as _jsx } from "react/jsx-runtime";
+const Row = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     children
   } = _ref;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("tr", {
+  return /*#__PURE__*/_jsx("tr", {
     ref: ref,
-    children: _react.default.Children.map(children, (child, index) => /*#__PURE__*/_react.default.cloneElement(child, {
+    children: React.Children.map(children, (child, index) => /*#__PURE__*/React.cloneElement(child, {
       isFirstInRow: index === 0
     }))
   });
 });
 Row.displayName = 'Row';
 Row.propTypes = {
-  children: _propTypes.default.node
+  children: PropTypes.node
 };
-var _default = Row;
-exports.default = _default;
+export default Row;

package/lib/Table/SubHeading.js

@@ -1,31 +1,23 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _Row = _interopRequireDefault(require("./Row"));
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const Header = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+import React from 'react';
+import PropTypes from 'prop-types';
+import Row from './Row';
+import { jsx as _jsx } from "react/jsx-runtime";
+const Header = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     children
   } = _ref;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Row.default, {
+  return /*#__PURE__*/_jsx(Row, {
     ref: ref,
-    children: _react.default.Children.map(children, child =>
+    children: React.Children.map(children, child =>
     /*#__PURE__*/
     // TO DO: pass type as a variant instead of prop
-    _react.default.cloneElement(child, {
+    React.cloneElement(child, {
       type: 'subHeading'
     }))
   });
 });
 Header.displayName = 'Header';
 Header.propTypes = {
-  children: _propTypes.default.node
+  children: PropTypes.node
 };
-var _default = Header;
-exports.default = _default;
+export default Header;