@telus-uds/components-base 1.96.0 → 1.97.1

package/lib/Badge/Badge.js

@@ -1,24 +1,17 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
-var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _ThemeProvider = require("../ThemeProvider");
-var _Typography = _interopRequireDefault(require("../Typography"));
-var _utils = require("../utils");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+import React from 'react';
+import View from "react-native-web/dist/exports/View";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import PropTypes from 'prop-types';
+import { useThemeTokens } from '../ThemeProvider';
+import Typography from '../Typography';
+import { htmlAttrs, selectSystemProps, getTokensPropType, variantProp, viewProps } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
 const fontSizeMapping = {
   12: 'micro',
   14: 'small',
   16: 'h6'
 };
-const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.htmlAttrs, _utils.viewProps]);
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs, viewProps]);
 const selectContainerBackground = _ref => {
   let {
     backgroundColor
@@ -73,19 +66,19 @@ const getTypographyVariant = _ref5 => {
     size: fontSizeMapping[fontSize]
   };
 };
-const Badge = /*#__PURE__*/_react.default.forwardRef((_ref6, ref) => {
+const Badge = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
   let {
     children,
     tokens,
     variant = {},
     ...rest
   } = _ref6;
-  const themeTokens = (0, _ThemeProvider.useThemeTokens)('Badge', tokens, variant);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+  const themeTokens = useThemeTokens('Badge', tokens, variant);
+  return /*#__PURE__*/_jsx(View, {
     ref: ref,
     style: [staticStyles.container, selectContainerBackground(themeTokens), selectContainerBorder(themeTokens), selectContainerPadding(themeTokens)],
     ...selectProps(rest),
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+    children: /*#__PURE__*/_jsx(Typography, {
       tokens: getTypographyTokens(themeTokens),
       variant: getTypographyVariant(themeTokens),
       children: children
@@ -94,14 +87,13 @@ const Badge = /*#__PURE__*/_react.default.forwardRef((_ref6, ref) => {
 });
 Badge.propTypes = {
   ...selectedSystemPropTypes,
-  children: _propTypes.default.node,
-  tokens: (0, _utils.getTokensPropType)('Badge'),
-  variant: _utils.variantProp.propType
+  children: PropTypes.node,
+  tokens: getTokensPropType('Badge'),
+  variant: variantProp.propType
 };
 Badge.displayName = 'Badge';
-var _default = Badge;
-exports.default = _default;
-const staticStyles = _StyleSheet.default.create({
+export default Badge;
+const staticStyles = StyleSheet.create({
   container: {
     display: 'flex',
     justifyContent: 'center',

package/lib/Badge/index.js

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

package/lib/BaseProvider/HydrationContext.js

@@ -1,19 +1,12 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useHydrationContext = exports.default = exports.HydrationProvider = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const HydrationContext = /*#__PURE__*/_react.default.createContext();
+import React from 'react';
+import PropTypes from 'prop-types';
+import Platform from "react-native-web/dist/exports/Platform";
+import { jsx as _jsx } from "react/jsx-runtime";
+const HydrationContext = /*#__PURE__*/React.createContext();
 const isSSR = typeof window === 'undefined';
 const hasWebStyleTag = () => {
   var _document;
-  if (isSSR || _Platform.default.OS !== 'web' || typeof document !== 'object') {
+  if (isSSR || Platform.OS !== 'web' || typeof document !== 'object') {
     return false;
   }
   return Boolean((_document = document) === null || _document === void 0 ? void 0 : _document.getElementById('react-native-stylesheet'));
@@ -26,33 +19,30 @@ const hasWebStyleTag = () => {
  * during the very first client-side render or hydration, but not available on the server,
  * to ensure no changes happen until the original SSR DOM has been hydrated.
  */
-const useHydrationContext = () => _react.default.useContext(HydrationContext);
+export const useHydrationContext = () => React.useContext(HydrationContext);
 
 /**
  * Allows components and hooks to observe if SSR hydration is currently in progress
  * and if so, to re-render with content that differs to the server when it is complete.
  */
-exports.useHydrationContext = useHydrationContext;
-const HydrationProvider = _ref => {
+export const HydrationProvider = _ref => {
   let {
     children
   } = _ref;
-  const [hasMounted, setHasMounted] = _react.default.useState(false);
-  _react.default.useEffect(() => {
+  const [hasMounted, setHasMounted] = React.useState(false);
+  React.useEffect(() => {
     setHasMounted(true);
   }, []);
 
   // If we've got a HydrationProvider inside a HydrationProvider somehow, defer to the top one
   const valueFromAncestor = useHydrationContext();
   const isHydrating = valueFromAncestor ?? Boolean(!hasMounted && hasWebStyleTag());
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(HydrationContext.Provider, {
+  return /*#__PURE__*/_jsx(HydrationContext.Provider, {
     value: isHydrating,
     children: children
   });
 };
-exports.HydrationProvider = HydrationProvider;
 HydrationProvider.propTypes = {
-  children: _propTypes.default.node
+  children: PropTypes.node
 };
-var _default = HydrationProvider;
-exports.default = _default;
+export default HydrationProvider;

package/lib/BaseProvider/index.js

@@ -1,46 +1,41 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _portal = require("@gorhom/portal");
-var _A11yInfoProvider = _interopRequireDefault(require("../A11yInfoProvider"));
-var _ViewportProvider = _interopRequireDefault(require("../ViewportProvider"));
-var _ThemeProvider = _interopRequireDefault(require("../ThemeProvider"));
-var _HydrationContext = require("./HydrationContext");
-var _jsxRuntime = require("react/jsx-runtime");
 var _ThemeProvider$propTy;
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const BaseProvider = _ref => {
+import React from 'react';
+import PropTypes from 'prop-types';
+import { PortalProvider } from '@gorhom/portal';
+import A11yInfoProvider from '../A11yInfoProvider';
+import ViewportProvider from '../ViewportProvider';
+import ThemeProvider from '../ThemeProvider';
+import { HydrationProvider } from './HydrationContext';
+
+// eslint-disable-next-line no-unused-vars
+import { jsx as _jsx } from "react/jsx-runtime";
+const BaseProvider = /*#__PURE__*/React.forwardRef((_ref, _) => {
   let {
     defaultTheme,
     children,
     themeOptions
   } = _ref;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_HydrationContext.HydrationProvider, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_A11yInfoProvider.default, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ViewportProvider.default, {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ThemeProvider.default, {
+  return /*#__PURE__*/_jsx(HydrationProvider, {
+    children: /*#__PURE__*/_jsx(A11yInfoProvider, {
+      children: /*#__PURE__*/_jsx(ViewportProvider, {
+        children: /*#__PURE__*/_jsx(ThemeProvider, {
           defaultTheme: defaultTheme,
           themeOptions: themeOptions,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_portal.PortalProvider, {
+          children: /*#__PURE__*/_jsx(PortalProvider, {
             children: children
           })
         })
       })
     })
   });
-};
+});
+BaseProvider.displayName = 'BaseProvider';
 BaseProvider.propTypes = {
-  children: _propTypes.default.node.isRequired,
-  defaultTheme: (_ThemeProvider$propTy = _ThemeProvider.default.propTypes) === null || _ThemeProvider$propTy === void 0 ? void 0 : _ThemeProvider$propTy.defaultTheme,
-  themeOptions: _propTypes.default.shape({
-    forceAbsoluteFontSizing: _propTypes.default.bool,
-    forceZIndex: _propTypes.default.bool
+  children: PropTypes.node.isRequired,
+  defaultTheme: (_ThemeProvider$propTy = ThemeProvider.propTypes) === null || _ThemeProvider$propTy === void 0 ? void 0 : _ThemeProvider$propTy.defaultTheme,
+  themeOptions: PropTypes.shape({
+    forceAbsoluteFontSizing: PropTypes.bool,
+    forceZIndex: PropTypes.bool
   })
 };
-var _default = BaseProvider;
-exports.default = _default;
+export default BaseProvider;

package/lib/Box/Box.js

@@ -1,23 +1,16 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
-var _ScrollView = _interopRequireDefault(require("react-native-web/dist/cjs/exports/ScrollView"));
-var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
-var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
-var _ImageBackground = _interopRequireDefault(require("react-native-web/dist/cjs/exports/ImageBackground"));
-var _Image = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Image"));
-var _ThemeProvider = require("../ThemeProvider");
-var _utils = require("../utils");
-var _backgroundImageStylesMap = _interopRequireDefault(require("./backgroundImageStylesMap"));
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
+import React from 'react';
+import PropTypes from 'prop-types';
+import View from "react-native-web/dist/exports/View";
+import ScrollView from "react-native-web/dist/exports/ScrollView";
+import Platform from "react-native-web/dist/exports/Platform";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import ImageBackground from "react-native-web/dist/exports/ImageBackground";
+import Image from "react-native-web/dist/exports/Image";
+import { useThemeTokens } from '../ThemeProvider';
+import { a11yProps, getA11yPropsFromHtmlTag, getTokensPropType, layoutTags, responsiveProps, selectSystemProps, spacingProps, useResponsiveProp, useSpacingScale, variantProp, viewProps } from '../utils';
+import backgroundImageStylesMap from './backgroundImageStylesMap';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 
 /**
  * @typedef {import('../utils/props/spacingProps.js').SpacingValue} SpacingValue
@@ -52,9 +45,9 @@ const selectBoxStyles = (_ref, customGradient) => {
       angle,
       stops: [stopOne, stopTwo]
     } = gradient;
-    if (_Platform.default.OS === 'web') {
+    if (Platform.OS === 'web') {
       styles.backgroundImage = `linear-gradient(${angle}deg, ${stopOne.color}, 75%, ${stopTwo.color})`;
-    } else if (customGradient && _Platform.default.OS !== 'web') {
+    } else if (customGradient && Platform.OS !== 'web') {
       styles.colors = [stopOne.color, stopTwo.color];
     }
   }
@@ -83,13 +76,13 @@ const setBackgroundImage = _ref2 => {
       ...staticStyles.containedView,
       width: backgroundImageWidth,
       height: backgroundImageHeight,
-      ..._backgroundImageStylesMap.default[`${backgroundImagePosition}-${backgroundImageAlign}`]
+      ...backgroundImageStylesMap[`${backgroundImagePosition}-${backgroundImageAlign}`]
     };
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+    return /*#__PURE__*/_jsxs(View, {
       style: staticStyles.containedContainer,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      children: [/*#__PURE__*/_jsx(View, {
         style: containedViewStyle,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Image.default, {
+        children: /*#__PURE__*/_jsx(Image, {
           source: {
             uri: src
           },
@@ -100,7 +93,7 @@ const setBackgroundImage = _ref2 => {
       }), content]
     });
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ImageBackground.default, {
+  return /*#__PURE__*/_jsx(ImageBackground, {
     source: {
       uri: src
     },
@@ -176,7 +169,7 @@ const setBackgroundImage = _ref2 => {
  * text content is inside a scrollable box, as screens are not scrollable by default and even very
  * short text will require scrolling on small devices at the highest accessibility text scaling settings.
  */
-const Box = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
+const Box = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   let {
     space,
     horizontal = space,
@@ -200,16 +193,16 @@ const Box = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
   } = _ref3;
   const props = {
     accessibilityRole,
-    ...(0, _utils.getA11yPropsFromHtmlTag)(tag, accessibilityRole),
+    ...getA11yPropsFromHtmlTag(tag, accessibilityRole),
     ...selectProps(rest)
   };
-  const themeTokens = (0, _ThemeProvider.useThemeTokens)('Box', tokens, variant);
+  const themeTokens = useThemeTokens('Box', tokens, variant);
   const styles = {
     flex,
-    paddingLeft: (0, _utils.useSpacingScale)(left),
-    paddingRight: (0, _utils.useSpacingScale)(right),
-    paddingTop: (0, _utils.useSpacingScale)(top),
-    paddingBottom: (0, _utils.useSpacingScale)(bottom),
+    paddingLeft: useSpacingScale(left),
+    paddingRight: useSpacingScale(right),
+    paddingTop: useSpacingScale(top),
+    paddingBottom: useSpacingScale(bottom),
     ...selectBoxStyles(themeTokens, customGradient)
   };
   let content = children;
@@ -221,11 +214,11 @@ const Box = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     position = '',
     align = ''
   } = backgroundImage || {};
-  const backgroundImageResizeMode = (0, _utils.useResponsiveProp)(resizeMode, 'cover');
-  const backgroundImagePosition = (0, _utils.useResponsiveProp)(position, 'none');
-  const backgroundImageAlign = (0, _utils.useResponsiveProp)(align, 'stretch');
-  const [backgroundImageWidth, setBackgroundImageWidth] = _react.default.useState(0);
-  const [backgroundImageHeight, setBackgroundImageHeight] = _react.default.useState(0);
+  const backgroundImageResizeMode = useResponsiveProp(resizeMode, 'cover');
+  const backgroundImagePosition = useResponsiveProp(position, 'none');
+  const backgroundImageAlign = useResponsiveProp(align, 'stretch');
+  const [backgroundImageWidth, setBackgroundImageWidth] = React.useState(0);
+  const [backgroundImageHeight, setBackgroundImageHeight] = React.useState(0);
   if (backgroundImage) content = setBackgroundImage({
     src,
     alt,
@@ -236,9 +229,9 @@ const Box = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     backgroundImageHeight,
     content
   });
-  _react.default.useEffect(() => {
+  React.useEffect(() => {
     if (backgroundImage && backgroundImageWidth === 0 && backgroundImageHeight === 0) {
-      _Image.default.getSize(src, (width, height) => {
+      Image.getSize(src, (width, height) => {
         // Only update the state if the size has changed
         if (width !== backgroundImageWidth || height !== backgroundImageHeight) {
           setBackgroundImageWidth(width);
@@ -250,7 +243,7 @@ const Box = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
   if (scroll) {
     const scrollProps = typeof scroll === 'object' ? scroll : {};
     scrollProps.contentContainerStyle = [styles, scrollProps.contentContainerStyle];
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScrollView.default, {
+    return /*#__PURE__*/_jsx(ScrollView, {
       ...scrollProps,
       ...props,
       testID: testID,
@@ -259,7 +252,7 @@ const Box = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
       children: content
     });
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+  return /*#__PURE__*/_jsx(View, {
     ...props,
     style: styles,
     testID: testID,
@@ -271,50 +264,50 @@ const Box = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
 Box.displayName = 'Box';
 Box.propTypes = {
   ...selectedSystemPropTypes,
-  variant: _utils.variantProp.propType,
-  tokens: (0, _utils.getTokensPropType)('Box'),
+  variant: variantProp.propType,
+  tokens: getTokensPropType('Box'),
   /**
    * Sets default padding on all sides of the box using the theme's spacing scale.
    *
    * @see {@link SpacingValue}
    */
-  space: _utils.spacingProps.types.spacingValue,
+  space: spacingProps.types.spacingValue,
   /**
    * Sets top and bottom padding using the theme's spacing scale.
    *
    * @see {@link SpacingValue}
    */
-  vertical: _utils.spacingProps.types.spacingValue,
+  vertical: spacingProps.types.spacingValue,
   /**
    * Sets left and right padding using the theme's spacing scale.
    *
    * @see {@link SpacingValue}
    */
-  horizontal: _utils.spacingProps.types.spacingValue,
+  horizontal: spacingProps.types.spacingValue,
   /**
    * Sets bottom padding using the theme's spacing scale.
    *
    * @see {@link SpacingValue}
    */
-  bottom: _utils.spacingProps.types.spacingValue,
+  bottom: spacingProps.types.spacingValue,
   /**
    * Sets left padding using the theme's spacing scale.
    *
    * @see {@link SpacingValue}
    */
-  left: _utils.spacingProps.types.spacingValue,
+  left: spacingProps.types.spacingValue,
   /**
    * Sets right padding using the theme's spacing scale.
    *
    * @see {@link SpacingValue}
    */
-  right: _utils.spacingProps.types.spacingValue,
+  right: spacingProps.types.spacingValue,
   /**
    * Sets top padding using the theme's spacing scale.
    *
    * @see {@link SpacingValue}
    */
-  top: _utils.spacingProps.types.spacingValue,
+  top: spacingProps.types.spacingValue,
   /**
    * Sets the `flex` style, which controls `flexGrow`, `flexShrink` and `flexBasis` styles.
    *
@@ -323,51 +316,50 @@ Box.propTypes = {
    *
    * With the default `0`, the box takes its minimum width from its content.
    */
-  flex: _propTypes.default.number,
+  flex: PropTypes.number,
   /**
    * Renders a scrollable ScrollView instead of an unscrollable View.
    *
    * May take an object of ScrollView props which are passed to the rendered ScrollView.
    */
-  scroll: _propTypes.default.oneOfType([_propTypes.default.bool, _ScrollView.default.propTypes ? _propTypes.default.shape(_ScrollView.default.propTypes) : _propTypes.default.object]),
+  scroll: PropTypes.oneOfType([PropTypes.bool, ScrollView.propTypes ? PropTypes.shape(ScrollView.propTypes) : PropTypes.object]),
   /**
    * Optional semantic HTML tag, to apply to the container on web. Does not change styling.
    *
    * In native apps, if a header tag is provided ("h1", "h2" etc) and accessibilityRole prop
    * is not defined, the accessibilityRole will default to "heading".
    */
-  tag: _propTypes.default.oneOf(_utils.layoutTags),
+  tag: PropTypes.oneOf(layoutTags),
   /**
    * Use in tests if the box itself needs to be targetted and no other way of selecting the
    * box is available (e.g. it cannot be targetted using an appropriate `accessibilityRole`).
    */
-  testID: _propTypes.default.string,
+  testID: PropTypes.string,
   /**
    * @ignore
    */
-  dataSet: _propTypes.default.object,
+  dataSet: PropTypes.object,
   /**
    * Box accepts any content as children.
    */
-  children: _propTypes.default.node.isRequired,
+  children: PropTypes.node.isRequired,
   /**
   Use this prop if need to add a custom gradient for mobile
   */
-  customGradient: _propTypes.default.func,
+  customGradient: PropTypes.func,
   /**
    * Use this prop to add a background image to the box.
    */
-  backgroundImage: _propTypes.default.shape({
-    src: _propTypes.default.string.isRequired,
-    alt: _propTypes.default.string,
-    resizeMode: _utils.responsiveProps.getTypeOptionallyByViewport(_propTypes.default.oneOf(['cover', 'contain', 'stretch', 'repeat', 'center'])),
-    position: _utils.responsiveProps.getTypeOptionallyByViewport(_propTypes.default.oneOf(['none', 'bottom', 'left', 'right', 'top'])),
-    align: _utils.responsiveProps.getTypeOptionallyByViewport(_propTypes.default.oneOf(['start', 'end', 'center', 'stretch']))
+  backgroundImage: PropTypes.shape({
+    src: PropTypes.string.isRequired,
+    alt: PropTypes.string,
+    resizeMode: responsiveProps.getTypeOptionallyByViewport(PropTypes.oneOf(['cover', 'contain', 'stretch', 'repeat', 'center'])),
+    position: responsiveProps.getTypeOptionallyByViewport(PropTypes.oneOf(['none', 'bottom', 'left', 'right', 'top'])),
+    align: responsiveProps.getTypeOptionallyByViewport(PropTypes.oneOf(['start', 'end', 'center', 'stretch']))
   })
 };
-var _default = Box;
-exports.default = _default;
-const staticStyles = _StyleSheet.default.create({
+export default Box;
+const staticStyles = StyleSheet.create({
   backgroundImageContainer: {
     flex: 1
   },

package/lib/Box/backgroundImageStylesMap.js

@@ -1,10 +1,4 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _default = {
+export default {
   'top-start': {
     top: 0
   },
@@ -97,5 +91,4 @@ var _default = {
     bottom: 0,
     width: '100%'
   }
-};
-exports.default = _default;
+};

package/lib/Box/index.js

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

package/lib/Button/Button.js

@@ -1,33 +1,24 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _ButtonBase = _interopRequireDefault(require("./ButtonBase"));
-var _propTypes = _interopRequireWildcard(require("./propTypes"));
-var _ThemeProvider = require("../ThemeProvider");
-var _props = require("../utils/props");
-var _ViewportProvider = require("../ViewportProvider");
-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 }; }
-const Button = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+import React from 'react';
+import ButtonBase from './ButtonBase';
+import buttonPropTypes, { textAndA11yText } from './propTypes';
+import { useThemeTokensCallback } from '../ThemeProvider';
+import { a11yProps } from '../utils/props';
+import { useViewport } from '../ViewportProvider';
+import { jsx as _jsx } from "react/jsx-runtime";
+const Button = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     accessibilityRole = 'button',
     tokens,
     variant,
     ...props
   } = _ref;
-  const viewport = (0, _ViewportProvider.useViewport)();
+  const viewport = useViewport();
   const buttonVariant = {
     viewport,
     ...variant
   };
-  const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('Button', tokens, buttonVariant);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonBase.default, {
+  const getTokens = useThemeTokensCallback('Button', tokens, buttonVariant);
+  return /*#__PURE__*/_jsx(ButtonBase, {
     ...props,
     tokens: getTokens,
     accessibilityRole: accessibilityRole,
@@ -36,9 +27,8 @@ const Button = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
 });
 Button.displayName = 'Button';
 Button.propTypes = {
-  ..._props.a11yProps.types,
-  ..._propTypes.default,
-  children: _propTypes.textAndA11yText
+  ...a11yProps.types,
+  ...buttonPropTypes,
+  children: textAndA11yText
 };
-var _default = Button;
-exports.default = _default;
+export default Button;