@telus-uds/components-base 1.97.0 → 1.97.1

package/lib/HorizontalScroll/itemPositions.js

@@ -1,12 +1,6 @@
-"use strict";
+import { useRef, useState } from 'react';
+import PropTypes from 'prop-types';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useItemPositions = exports.itemPositionsPropType = exports.getItemPositionScrollTarget = exports.getItemPositionLayoutHandler = void 0;
-var _react = require("react");
-var _propTypes = _interopRequireDefault(require("prop-types"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 // Utilities to assist scrolling a parent so that it snaps neatly to an appropriate child.
 
 /**
@@ -36,7 +30,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * @param {number} [buttonClearance] - offset to allow space for a button
  * @returns {number}
  */
-const getItemPositionScrollTarget = function (x, scrollMax, positions) {
+export const getItemPositionScrollTarget = function (x, scrollMax, positions) {
   let buttonClearance = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
   if (x <= 0) return 0;
   if (x >= scrollMax) return scrollMax;
@@ -64,8 +58,7 @@ const getItemPositionScrollTarget = function (x, scrollMax, positions) {
  * @param {number} index
  * @returns {function}
  */
-exports.getItemPositionScrollTarget = getItemPositionScrollTarget;
-const getItemPositionLayoutHandler = (positions, index) => {
+export const getItemPositionLayoutHandler = (positions, index) => {
   const handleLayout = _ref2 => {
     let {
       nativeEvent: {
@@ -92,10 +85,9 @@ const getItemPositionLayoutHandler = (positions, index) => {
  *  - current ref object `{ positions, contentWidth, containerWidth, scrollOffset, scrollTo, setIsReady }`
  *  - boolean that updates to `true` (causing a re-render) after the first time `setIsReady` is called
  */
-exports.getItemPositionLayoutHandler = getItemPositionLayoutHandler;
-const useItemPositions = () => {
-  const [isReady, setIsReady] = (0, _react.useState)(false);
-  return [(0, _react.useRef)({
+export const useItemPositions = () => {
+  const [isReady, setIsReady] = useState(false);
+  return [useRef({
     positions: {},
     scrollTo: () => {},
     contentWidth: 0,
@@ -108,16 +100,14 @@ const useItemPositions = () => {
 /**
  * PropType for the ref object returned by `useItemPositions`
  */
-exports.useItemPositions = useItemPositions;
-const itemPositionsPropType = _propTypes.default.exact({
-  positions: _propTypes.default.objectOf(_propTypes.default.shape({
-    start: _propTypes.default.number,
-    end: _propTypes.default.number
+export const itemPositionsPropType = PropTypes.exact({
+  positions: PropTypes.objectOf(PropTypes.shape({
+    start: PropTypes.number,
+    end: PropTypes.number
   })),
-  scrollTo: _propTypes.default.func,
-  contentWidth: _propTypes.default.number,
-  containerWidth: _propTypes.default.number,
-  scrollOffset: _propTypes.default.number,
-  setIsReady: _propTypes.default.func
-});
-exports.itemPositionsPropType = itemPositionsPropType;
+  scrollTo: PropTypes.func,
+  contentWidth: PropTypes.number,
+  containerWidth: PropTypes.number,
+  scrollOffset: PropTypes.number,
+  setIsReady: PropTypes.func
+});

package/lib/Icon/Icon.js

@@ -1,18 +1,11 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.iconComponentPropTypes = exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
-var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _ThemeProvider = require("../ThemeProvider");
-var _utils = require("../utils");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const Icon = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+import React from 'react';
+import Platform from "react-native-web/dist/exports/Platform";
+import View from "react-native-web/dist/exports/View";
+import PropTypes from 'prop-types';
+import { useThemeTokens } from '../ThemeProvider';
+import { getTokensPropType, scaleWithText, variantProp } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+const Icon = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     icon: IconComponent,
     accessibilityLabel,
@@ -22,9 +15,9 @@ const Icon = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     style = {},
     dataSet
   } = _ref;
-  const themeTokens = (0, _ThemeProvider.useThemeTokens)('Icon', tokens, variant);
-  const size = scalesWithText ? (0, _utils.scaleWithText)(themeTokens.size) : themeTokens.size;
-  const iconContent = /*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, {
+  const themeTokens = useThemeTokens('Icon', tokens, variant);
+  const size = scalesWithText ? scaleWithText(themeTokens.size) : themeTokens.size;
+  const iconContent = /*#__PURE__*/_jsx(IconComponent, {
     title: accessibilityLabel,
     size: size,
     color: themeTokens.color
@@ -37,7 +30,7 @@ const Icon = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   } : {};
   const getIconContentForMobile = () => {
     if (Object.keys(paddingStyles).length) {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      return /*#__PURE__*/_jsx(View, {
         style: {
           backgroundColor: themeTokens.backgroundColor,
           borderRadius: themeTokens.borderRadius,
@@ -48,7 +41,7 @@ const Icon = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     }
     return iconContent;
   };
-  return _Platform.default.OS === 'web' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+  return Platform.OS === 'web' ? /*#__PURE__*/_jsx(View, {
     ref: ref
     // eslint-disable-next-line react-native/no-inline-styles
     ,
@@ -67,17 +60,17 @@ const Icon = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   }) : getIconContentForMobile();
 });
 Icon.displayName = 'Icon';
-const iconComponentPropTypes = {
-  variant: _utils.variantProp.propType,
-  tokens: (0, _utils.getTokensPropType)('Icon'),
+export const iconComponentPropTypes = {
+  variant: variantProp.propType,
+  tokens: getTokensPropType('Icon'),
   /**
    * Descriptive label used in web SVG title tag for accessibility
    */
-  accessibilityLabel: _propTypes.default.string,
+  accessibilityLabel: PropTypes.string,
   /**
    * controls whether the icon size should be proportionate to any accessibility-related font scaling.
    */
-  scalesWithText: _propTypes.default.bool,
+  scalesWithText: PropTypes.bool,
   /**
    * Custom style object to be applied to the icon component.
    * This is useful for overriding the default icon style but for cases where desires styles are not available as tokens.
@@ -87,16 +80,14 @@ const iconComponentPropTypes = {
    * @example
    * <Icon style={{ color: 'red' }}
    */
-  style: _propTypes.default.object
+  style: PropTypes.object
 };
-exports.iconComponentPropTypes = iconComponentPropTypes;
 Icon.propTypes = {
   ...iconComponentPropTypes,
   /**
    * A valid UDS icon component imported from a UDS palette
    * (e.g.) `import { MyIcon } from @telus-uds/palette-<brand>/build/web/icons`
    */
-  icon: _propTypes.default.elementType.isRequired
+  icon: PropTypes.elementType.isRequired
 };
-var _default = Icon;
-exports.default = _default;
+export default Icon;

package/lib/Icon/IconText.js

@@ -1,22 +1,13 @@
-"use strict";
+import React from 'react';
+import PropTypes from 'prop-types';
+import Platform from "react-native-web/dist/exports/Platform";
+import View from "react-native-web/dist/exports/View";
+import Text from "react-native-web/dist/exports/Text";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import Icon, { iconComponentPropTypes } from './Icon';
+import { getStackedContent } from '../StackView';
+import { spacingProps } from '../utils';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = 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 _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
-var _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
-var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
-var _Icon = _interopRequireWildcard(require("./Icon"));
-var _StackView = require("../StackView");
-var _utils = require("../utils");
-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 }; }
 /**
  * Returns an icon and some text with a sized gap between them. This is a utility component
  * intended for use when creating components, not intended for use in applications on its own.
@@ -24,7 +15,9 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * IconText does not wrap its children, so should be used either:
  *  - inline within a <Text> element
  *  - within a container with `flexDirection: 'row'`
- */const IconText = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+ */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const IconText = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   var _iconProps$tokens, _iconProps$tokens2;
   let {
     space,
@@ -33,7 +26,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
     iconProps,
     children
   } = _ref;
-  const iconContent = IconComponent && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+  const iconContent = IconComponent && /*#__PURE__*/_jsx(Icon, {
     ref: ref,
     icon: IconComponent,
     scalesWithText: true,
@@ -42,15 +35,15 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
   // Inline images on Android are always baseline-aligned which makes them look misaligned - offset it.
   // See abandoned issue https://github.com/facebook/react-native/issues/6529
-  const size = (iconProps === null || iconProps === void 0 ? void 0 : (_iconProps$tokens = iconProps.tokens) === null || _iconProps$tokens === void 0 ? void 0 : _iconProps$tokens.size) ?? 0;
-  const valueTranslateY = iconProps === null || iconProps === void 0 ? void 0 : (_iconProps$tokens2 = iconProps.tokens) === null || _iconProps$tokens2 === void 0 ? void 0 : _iconProps$tokens2.translateY;
+  const size = (iconProps === null || iconProps === void 0 || (_iconProps$tokens = iconProps.tokens) === null || _iconProps$tokens === void 0 ? void 0 : _iconProps$tokens.size) ?? 0;
+  const valueTranslateY = iconProps === null || iconProps === void 0 || (_iconProps$tokens2 = iconProps.tokens) === null || _iconProps$tokens2 === void 0 ? void 0 : _iconProps$tokens2.translateY;
   /**
    * These calculations were carried out using a set of linear equations to calculate that the
    * position of the icon "->"" is aligned to the first line of the tooltip text on IOS and Android.
    * The issue was mainly on IOS, the translateY style didn't match with the old calculations.
    */
   const resultY = valueTranslateY ? Math.floor(-1 * (valueTranslateY - 4)) : 0;
-  const iconAdjustedAndroid = /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+  const iconAdjustedAndroid = /*#__PURE__*/_jsx(View, {
     style: {
       transform: [{
         translateY: valueTranslateY ? size * 0.2 : size * 0.01
@@ -58,7 +51,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
     },
     children: iconContent
   });
-  const iconAdjustedIOS = /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+  const iconAdjustedIOS = /*#__PURE__*/_jsx(View, {
     style: {
       transform: [{
         translateY: valueTranslateY ? resultY : size * 0.01
@@ -66,56 +59,53 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
     },
     children: iconContent
   });
-  const mobile = _Platform.default.OS === 'android' ? iconAdjustedAndroid : iconAdjustedIOS;
-  const adjustedContainer = _Platform.default.OS === 'web' ? iconContent : mobile;
-  const adjustedContainerWithPosition = /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+  const mobile = Platform.OS === 'android' ? iconAdjustedAndroid : iconAdjustedIOS;
+  const adjustedContainer = Platform.OS === 'web' ? iconContent : mobile;
+  const adjustedContainerWithPosition = /*#__PURE__*/_jsx(View, {
     style: staticStyles.adjustedContainer,
     children: adjustedContainer
   });
   if (iconPosition === 'inline') {
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Text.default, {
+    return /*#__PURE__*/_jsxs(Text, {
       children: [children, " ", adjustedContainerWithPosition]
     });
   }
-  return (0, _StackView.getStackedContent)(iconPosition === 'left' ? [adjustedContainer, children] : [children, adjustedContainer], {
+  return getStackedContent(iconPosition === 'left' ? [adjustedContainer, children] : [children, adjustedContainer], {
     space,
     direction: 'row'
   });
 });
 IconText.displayName = 'IconText';
 IconText.propTypes = {
-  /* eslint-disable react/no-unused-prop-types */ // eslint is having hard time seeing these props through forwardRef
   /**
    * Amount of space to separate the text content and icon. Uses the themes's spacing scale
    * (see useSpacingScale for more info).
    */
-  space: _utils.spacingProps.types.spacingValue,
+  space: spacingProps.types.spacingValue,
   /**
    * Whether the icon should be to the left of the content, the right of the content or inline with the content.
    */
-  iconPosition: _propTypes.default.oneOf(['left', 'right', 'inline']),
+  iconPosition: PropTypes.oneOf(['left', 'right', 'inline']),
   /**
    * A valid UDS icon component imported from a UDS palette.
    */
-  icon: _propTypes.default.elementType,
+  icon: PropTypes.elementType,
   /**
    * Props that will be passed to the icon component. By default the icon's `scalesWithText`
    * prop will be set as "true" so that the icon continues to match the size of the text
    * if users use accessibility settings to increase text size.
    */
-  iconProps: _propTypes.default.exact(_Icon.iconComponentPropTypes),
+  iconProps: PropTypes.exact(iconComponentPropTypes),
   /**
    * Content to be rendered alongside the Icon component. Usually this should be a
    * `<Typography>` component, or a component that renders `<Text>`.
    */
-  children: _propTypes.default.node
+  children: PropTypes.node
   /* eslint-enable react/no-unused-prop-types */
 };
-
-const staticStyles = _StyleSheet.default.create({
+const staticStyles = StyleSheet.create({
   adjustedContainer: {
     position: 'absolute'
   }
 });
-var _default = IconText;
-exports.default = _default;
+export default IconText;

package/lib/Icon/index.js

@@ -1,25 +1,4 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "IconText", {
-  enumerable: true,
-  get: function () {
-    return _IconText.default;
-  }
-});
-exports.default = void 0;
-Object.defineProperty(exports, "iconComponentPropTypes", {
-  enumerable: true,
-  get: function () {
-    return _Icon.iconComponentPropTypes;
-  }
-});
-var _Icon = _interopRequireWildcard(require("./Icon"));
-var _IconText = _interopRequireDefault(require("./IconText"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-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; }
-var _default = _Icon.default;
-exports.default = _default;
+import Icon, { iconComponentPropTypes } from './Icon';
+import IconText from './IconText';
+export default Icon;
+export { iconComponentPropTypes, IconText };

package/lib/IconButton/IconButton.js

@@ -1,28 +1,22 @@
-"use strict";
+import React from 'react';
+import PropTypes from 'prop-types';
+import Pressable from "react-native-web/dist/exports/Pressable";
+import Platform from "react-native-web/dist/exports/Platform";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import View from "react-native-web/dist/exports/View";
+import { applyOuterBorder, useThemeTokensCallback, applyShadowToken } from '../ThemeProvider';
+import { a11yProps, clickProps, getTokensPropType, hrefAttrsProp, linkProps, resolvePressableState, selectSystemProps, selectTokens, variantProp, viewProps, withLinkRouter } from '../utils';
+import Icon from '../Icon';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _Pressable = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Pressable"));
-var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
-var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
-var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
-var _ThemeProvider = require("../ThemeProvider");
-var _utils = require("../utils");
-var _Icon = _interopRequireDefault(require("../Icon"));
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 // function to get the dimentionals of the conditionals
+import { jsx as _jsx } from "react/jsx-runtime";
 const getPasswordDimensions = (password, width, height) => {
   return password ? {
     width,
     height
   } : {};
 };
-const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 const selectOuterStyle = (_ref, password) => {
   let {
     backgroundColor,
@@ -40,8 +34,8 @@ const selectOuterStyle = (_ref, password) => {
   } = _ref;
   return [{
     backgroundColor,
-    ...(0, _ThemeProvider.applyShadowToken)(shadow),
-    ...(0, _ThemeProvider.applyOuterBorder)({
+    ...applyShadowToken(shadow),
+    ...applyOuterBorder({
       borderRadius,
       borderTopLeftRadius,
       borderTopRightRadius,
@@ -52,7 +46,7 @@ const selectOuterStyle = (_ref, password) => {
       outerBorderGap
     }),
     ...getPasswordDimensions(password, width, height),
-    ..._Platform.default.select({
+    ...Platform.select({
       web: {
         outline: 'none',
         display: 'inline-flex',
@@ -103,7 +97,7 @@ const selectInnerStyle = (_ref2, password) => {
     paddingRight: calculatePadding(paddingRight, borderRightWidth),
     paddingTop: calculatePadding(paddingTop, borderTopWidth),
     paddingBottom: calculatePadding(paddingBottom, borderBottomWidth),
-    ..._Platform.default.select({
+    ...Platform.select({
       web: {
         pointerEvents: 'none',
         display: 'inline-flex',
@@ -120,7 +114,7 @@ const selectInnerStyle = (_ref2, password) => {
  * based on these to an outer border and a base Card component. Not intended to be used in
  * apps or sites directly: build themed components on top of this.
  */
-const IconButton = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
+const IconButton = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   let {
     tokens,
     variant = {},
@@ -134,25 +128,25 @@ const IconButton = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
   const {
     onPress,
     ...rest
-  } = _utils.clickProps.toPressProps(rawRest);
+  } = clickProps.toPressProps(rawRest);
   const selectedProps = selectProps({
     ...rest,
     accessibilityRole
   });
   const handlePress = () => {
     var _ref$current;
-    _utils.linkProps.handleHref({
+    linkProps.handleHref({
       href,
       onPress
     })({
       nativeEvent: {
-        target: ref === null || ref === void 0 ? void 0 : (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.id
+        target: ref === null || ref === void 0 || (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.id
       }
     });
   };
-  const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('IconButton', tokens, variant);
-  const getOuterStyle = pressableState => selectOuterStyle(getTokens((0, _utils.resolvePressableState)(pressableState), variant.password));
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
+  const getTokens = useThemeTokensCallback('IconButton', tokens, variant);
+  const getOuterStyle = pressableState => selectOuterStyle(getTokens(resolvePressableState(pressableState), variant.password));
+  return /*#__PURE__*/_jsx(Pressable, {
     ref: ref,
     href: href,
     onPress: handlePress,
@@ -161,13 +155,13 @@ const IconButton = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     ...selectedProps,
     testID: testID,
     children: pressableState => {
-      const themeTokens = getTokens((0, _utils.resolvePressableState)(pressableState));
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      const themeTokens = getTokens(resolvePressableState(pressableState));
+      return /*#__PURE__*/_jsx(View, {
         style: selectInnerStyle(themeTokens, variant.password),
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+        children: /*#__PURE__*/_jsx(Icon, {
           icon: IconComponent || themeTokens.icon,
           title: selectedProps.accessibilityLabel,
-          tokens: (0, _utils.selectTokens)('Icon', themeTokens, 'icon'),
+          tokens: selectTokens('Icon', themeTokens, 'icon'),
           variant: variant
         })
       });
@@ -177,34 +171,33 @@ const IconButton = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
 IconButton.displayName = 'IconButton';
 IconButton.propTypes = {
   ...selectedSystemPropTypes,
-  variant: _utils.variantProp.propType,
-  tokens: (0, _utils.getTokensPropType)('IconButton'),
+  variant: variantProp.propType,
+  tokens: getTokensPropType('IconButton'),
   /**
    * A unique identifier for testing purposes.
    * Will be added as a `data-testid` attribute.
    */
-  testID: _propTypes.default.string,
+  testID: PropTypes.string,
   /**
    * Defines the icon to be rendered
    */
-  icon: _propTypes.default.elementType,
+  icon: PropTypes.elementType,
   /**
    * URL to navigate to when the `Iconbutton` is pressed
    */
-  href: _propTypes.default.string,
+  href: PropTypes.string,
   /**
    * URL options to navigate to when the `Iconbutton` is pressed
    */
-  hrefAttrs: _propTypes.default.shape(_utils.hrefAttrsProp.types),
+  hrefAttrs: PropTypes.shape(hrefAttrsProp.types),
   /**
    * Function to execute when the `Iconbutton` is pressed
    */
-  onPress: _propTypes.default.func
+  onPress: PropTypes.func
 };
-const staticStyles = _StyleSheet.default.create({
+const staticStyles = StyleSheet.create({
   outer: {
     alignSelf: 'baseline'
   }
 });
-var _default = (0, _utils.withLinkRouter)(IconButton);
-exports.default = _default;
+export default withLinkRouter(IconButton);

package/lib/IconButton/index.js

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