@telus-uds/components-base 1.96.0 → 1.97.1

package/lib/Select/Picker.native.js

@@ -1,20 +1,14 @@
-"use strict";
+import React from 'react';
+import PropTypes from 'prop-types';
+import View from "react-native-web/dist/exports/View";
+import Platform from "react-native-web/dist/exports/Platform";
+import NativePicker from 'react-native-picker-select';
+import { a11yProps, componentPropType } from '../utils';
+import Group from './Group';
+import { ANDROID_HEIGHT_OFFSET, ANDROID_HORIZONTAL_PADDING_OFFSET, ANDROID_DEFAULT_PADDING } from './constants';
 
-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 _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
-var _reactNativePickerSelect = _interopRequireDefault(require("react-native-picker-select"));
-var _utils = require("../utils");
-var _Group = _interopRequireDefault(require("./Group"));
-var _constants = require("./constants");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 // Styling of the native input is very limited, most of the styles have to be applied to an additional View
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 const selectAndroidInputStyles = _ref => {
   let {
     height = 0,
@@ -31,20 +25,20 @@ const selectAndroidInputStyles = _ref => {
 // The native input has a side padding of 8px, which can't be adjusted, so we have to account for that in the container
 const selectAndroidContainerStyles = _ref2 => {
   let {
-    paddingLeft = _constants.ANDROID_DEFAULT_PADDING,
-    paddingRight = _constants.ANDROID_DEFAULT_PADDING,
+    paddingLeft = ANDROID_DEFAULT_PADDING,
+    paddingRight = ANDROID_DEFAULT_PADDING,
     ...rest
   } = _ref2;
   return {
     ...rest,
-    paddingLeft: paddingLeft > _constants.ANDROID_HORIZONTAL_PADDING_OFFSET ? paddingLeft - _constants.ANDROID_HORIZONTAL_PADDING_OFFSET : _constants.ANDROID_DEFAULT_PADDING,
-    paddingRight: paddingRight > _constants.ANDROID_HORIZONTAL_PADDING_OFFSET ? paddingRight - _constants.ANDROID_HORIZONTAL_PADDING_OFFSET : _constants.ANDROID_DEFAULT_PADDING,
-    paddingBottom: _constants.ANDROID_DEFAULT_PADDING,
-    paddingTop: _constants.ANDROID_DEFAULT_PADDING,
-    height: rest.height + _constants.ANDROID_HEIGHT_OFFSET
+    paddingLeft: paddingLeft > ANDROID_HORIZONTAL_PADDING_OFFSET ? paddingLeft - ANDROID_HORIZONTAL_PADDING_OFFSET : ANDROID_DEFAULT_PADDING,
+    paddingRight: paddingRight > ANDROID_HORIZONTAL_PADDING_OFFSET ? paddingRight - ANDROID_HORIZONTAL_PADDING_OFFSET : ANDROID_DEFAULT_PADDING,
+    paddingBottom: ANDROID_DEFAULT_PADDING,
+    paddingTop: ANDROID_DEFAULT_PADDING,
+    height: rest.height + ANDROID_HEIGHT_OFFSET
   };
 };
-const Picker = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
+const Picker = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   let {
     value,
     onChange,
@@ -57,8 +51,8 @@ const Picker = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     ...rest
   } = _ref3;
   // Ungroup items, since there's no way to support groups on native
-  const flatChildren = _react.default.Children.toArray(children).flatMap(child => {
-    if (child.type === _Group.default) {
+  const flatChildren = React.Children.toArray(children).flatMap(child => {
+    if (child.type === Group) {
       return child.props.children;
     }
     return child;
@@ -84,11 +78,11 @@ const Picker = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
       }
     });
   };
-  const picker = /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativePickerSelect.default, {
+  const picker = /*#__PURE__*/_jsx(NativePicker, {
     pickerProps: {
       ref
     },
-    touchableWrapperProps: _utils.a11yProps.select(rest),
+    touchableWrapperProps: a11yProps.select(rest),
     onOpen: onFocus,
     onClose: onBlur,
     disabled: inactive,
@@ -101,26 +95,25 @@ const Picker = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     },
     placeholder: placeholder !== undefined ? placeholder : {}
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: _Platform.default.OS === 'android' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: Platform.OS === 'android' ? /*#__PURE__*/_jsx(View, {
       style: selectAndroidContainerStyles(style),
       children: picker
     }) : picker
   });
 });
 Picker.displayName = 'Picker';
-var _default = Picker;
-exports.default = _default;
+export default Picker;
 Picker.propTypes = {
-  value: _propTypes.default.string,
-  onChange: _propTypes.default.func,
-  onFocus: _propTypes.default.func,
-  onBlur: _propTypes.default.func,
-  style: _propTypes.default.object,
-  inactive: _propTypes.default.bool,
-  children: (0, _utils.componentPropType)(['Item', 'Group']),
-  placeholder: _propTypes.default.shape({
-    value: _propTypes.default.string,
-    label: _propTypes.default.string
+  value: PropTypes.string,
+  onChange: PropTypes.func,
+  onFocus: PropTypes.func,
+  onBlur: PropTypes.func,
+  style: PropTypes.object,
+  inactive: PropTypes.bool,
+  children: componentPropType(['Item', 'Group']),
+  placeholder: PropTypes.shape({
+    value: PropTypes.string,
+    label: PropTypes.string
   })
 };

package/lib/Select/Select.js

@@ -1,22 +1,15 @@
-"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 _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
-var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _ThemeProvider = require("../ThemeProvider");
-var _utils = require("../utils");
-var _Picker = _interopRequireDefault(require("./Picker"));
-var _InputSupports = _interopRequireDefault(require("../InputSupports"));
-var _constants = require("./constants");
-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.inputSupportsProps, _utils.viewProps, _utils.htmlAttrs]);
+import React from 'react';
+import View from "react-native-web/dist/exports/View";
+import Platform from "react-native-web/dist/exports/Platform";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import PropTypes from 'prop-types';
+import { applyTextStyles, useThemeTokens, applyOuterBorder, useTheme } from '../ThemeProvider';
+import { a11yProps, componentPropType, getTokensPropType, inputSupportsProps, selectSystemProps, useInputValue, variantProp, viewProps, htmlAttrs } from '../utils';
+import Picker from './Picker';
+import InputSupports from '../InputSupports';
+import { ANDROID_VALIDATION_ICON_CONTAINER_OFFSET } from './constants';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, inputSupportsProps, viewProps, htmlAttrs]);
 const selectInputStyles = (_ref, themeOptions, inactive) => {
   let {
     backgroundColor,
@@ -41,14 +34,14 @@ const selectInputStyles = (_ref, themeOptions, inactive) => {
   // Subtract border width from padding so overall input width/height doesn't
   // jump around if the border width changes (avoiding NaN and negative padding)
   const offsetBorder = value => typeof value === 'number' ? Math.max(0, value - borderWidth) : value;
-  const textStyles = (0, _ThemeProvider.applyTextStyles)({
+  const textStyles = applyTextStyles({
     fontName,
     fontSize,
     lineHeight,
     fontWeight,
     themeOptions
   });
-  const webStyles = _Platform.default.select({
+  const webStyles = Platform.select({
     web: {
       appearance: 'none',
       WebkitAppearance: 'none',
@@ -58,9 +51,8 @@ const selectInputStyles = (_ref, themeOptions, inactive) => {
       opacity: inactive ? 1 : undefined // override Chrome's default fadeout of a disabled select
     }
   });
-
   let paddingWithIcons = paddingRight;
-  if (_Platform.default.OS !== 'android') {
+  if (Platform.OS !== 'android') {
     if (icon) {
       paddingWithIcons += iconSize;
     }
@@ -92,7 +84,7 @@ const selectOuterBorderStyles = _ref2 => {
   } = _ref2;
   return {
     background: outerBackgroundColor,
-    ...(0, _ThemeProvider.applyOuterBorder)({
+    ...applyOuterBorder({
       outerBorderColor,
       outerBorderWidth,
       borderRadius
@@ -139,8 +131,8 @@ const selectValidationIconContainerStyles = _ref6 => {
   } = _ref6;
   return {
     paddingRight: icon ? paddingRight + iconSize + 4 : paddingRight,
-    ...(_Platform.default.OS === 'android' ? {
-      paddingBottom: paddingBottom + _constants.ANDROID_VALIDATION_ICON_CONTAINER_OFFSET
+    ...(Platform.OS === 'android' ? {
+      paddingBottom: paddingBottom + ANDROID_VALIDATION_ICON_CONTAINER_OFFSET
     } : {
       paddingBottom
     })
@@ -187,7 +179,7 @@ const selectCustomFeedbackStyles = _ref7 => {
  * NOTE: this does not work on native platforms - the grouped items will be shown at the same level as the non-grouped items.
  *
  */
-const Select = /*#__PURE__*/_react.default.forwardRef((_ref8, ref) => {
+const Select = /*#__PURE__*/React.forwardRef((_ref8, ref) => {
   let {
     value,
     initialValue,
@@ -205,24 +197,24 @@ const Select = /*#__PURE__*/_react.default.forwardRef((_ref8, ref) => {
   const {
     currentValue,
     setValue
-  } = (0, _utils.useInputValue)({
+  } = useInputValue({
     value,
     initialValue,
     onChange,
     readOnly
   });
-  const [isFocused, setIsFocused] = _react.default.useState(false);
+  const [isFocused, setIsFocused] = React.useState(false);
   const handleFocus = () => setIsFocused(true);
   const handleBlur = () => setIsFocused(false);
-  const [isHovered, setIsHovered] = _react.default.useState(false);
+  const [isHovered, setIsHovered] = React.useState(false);
   const handleMouseOver = () => setIsHovered(true);
   const handleMouseOut = () => setIsHovered(false);
-  const [isOpen, setIsOpen] = _react.default.useState(false);
+  const [isOpen, setIsOpen] = React.useState(false);
   const {
     supportsProps,
     ...selectedProps
   } = selectProps(rest);
-  const themeTokens = (0, _ThemeProvider.useThemeTokens)('Select', tokens, variant, {
+  const themeTokens = useThemeTokens('Select', tokens, variant, {
     focus: isFocused,
     hover: isHovered,
     inactive,
@@ -235,8 +227,8 @@ const Select = /*#__PURE__*/_react.default.forwardRef((_ref8, ref) => {
   } = themeTokens;
   const {
     themeOptions
-  } = (0, _ThemeProvider.useTheme)();
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputSupports.default, {
+  } = useTheme();
+  return /*#__PURE__*/_jsx(InputSupports, {
     ...supportsProps,
     ...selectedProps,
     validation: validation,
@@ -246,9 +238,9 @@ const Select = /*#__PURE__*/_react.default.forwardRef((_ref8, ref) => {
         inputId,
         ...props
       } = _ref9;
-      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+      return /*#__PURE__*/_jsxs(View, {
         style: selectOuterBorderStyles(themeTokens),
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Picker.default, {
+        children: [/*#__PURE__*/_jsx(Picker, {
           ref: ref,
           style: selectInputStyles(themeTokens, themeOptions, inactive),
           onFocus: handleFocus,
@@ -268,19 +260,19 @@ const Select = /*#__PURE__*/_react.default.forwardRef((_ref8, ref) => {
           nativeID: inputId,
           testID: testID,
           children: children
-        }), ValidationIconComponent && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+        }), ValidationIconComponent && /*#__PURE__*/_jsx(View, {
           pointerEvents: "none",
           style: [staticStyles.iconContainer, selectValidationIconContainerStyles(themeTokens)],
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ValidationIconComponent, {
+          children: /*#__PURE__*/_jsx(ValidationIconComponent, {
             ...selectValidationIconTokens(themeTokens)
           })
-        }), IconComponent && _Platform.default.OS !== 'android' &&
+        }), IconComponent && Platform.OS !== 'android' &&
         /*#__PURE__*/
         // we can't hide the default caret of a native picker on android
-        (0, _jsxRuntime.jsx)(_View.default, {
+        _jsx(View, {
           pointerEvents: "none",
           style: [staticStyles.iconContainer, selectIconContainerStyles(themeTokens)],
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, {
+          children: /*#__PURE__*/_jsx(IconComponent, {
             ...selectIconTokens(themeTokens)
           })
         })]
@@ -294,48 +286,47 @@ Select.propTypes = {
   /**
    * Initial value for the uncontrolled version.
    */
-  initialValue: _propTypes.default.string,
+  initialValue: PropTypes.string,
   /**
    * Current value to be set as selected.
    */
-  value: _propTypes.default.string,
+  value: PropTypes.string,
   /**
    * Callback to be called when the value changes.
    */
-  onChange: _propTypes.default.func,
+  onChange: PropTypes.func,
   /**
    * An array of items or item groups to be used as options.
    */
-  children: (0, _utils.componentPropType)(['Item', 'Group']),
+  children: componentPropType(['Item', 'Group']),
   /**
    * Whether the select is disabled.
    */
-  inactive: _propTypes.default.bool,
+  inactive: PropTypes.bool,
   /**
    * Whether the select is read-only.
    */
-  readOnly: _propTypes.default.bool,
+  readOnly: PropTypes.bool,
   /**
    * A placeholder to provide instructions (such as "Please select...")
    * as an unselectable option
    */
-  placeholder: _propTypes.default.string,
+  placeholder: PropTypes.string,
   /**
    * Select tokens.
    */
-  tokens: (0, _utils.getTokensPropType)('Select'),
+  tokens: getTokensPropType('Select'),
   /**
    * Select variant.
    */
-  variant: _utils.variantProp.propType,
+  variant: variantProp.propType,
   /**
    * Dedicated ID for testing.
    */
-  testID: _propTypes.default.string
+  testID: PropTypes.string
 };
-var _default = Select;
-exports.default = _default;
-const staticStyles = _StyleSheet.default.create({
+export default Select;
+const staticStyles = StyleSheet.create({
   iconContainer: {
     position: 'absolute',
     right: 0,

package/lib/Select/constants.js

@@ -1,15 +1,5 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ANDROID_VALIDATION_ICON_CONTAINER_OFFSET = exports.ANDROID_HORIZONTAL_PADDING_OFFSET = exports.ANDROID_HEIGHT_OFFSET = exports.ANDROID_DEFAULT_PADDING = void 0;
 // Because Android
-const ANDROID_VALIDATION_ICON_CONTAINER_OFFSET = 5;
-exports.ANDROID_VALIDATION_ICON_CONTAINER_OFFSET = ANDROID_VALIDATION_ICON_CONTAINER_OFFSET;
-const ANDROID_HEIGHT_OFFSET = 12;
-exports.ANDROID_HEIGHT_OFFSET = ANDROID_HEIGHT_OFFSET;
-const ANDROID_HORIZONTAL_PADDING_OFFSET = 8;
-exports.ANDROID_HORIZONTAL_PADDING_OFFSET = ANDROID_HORIZONTAL_PADDING_OFFSET;
-const ANDROID_DEFAULT_PADDING = 0;
-exports.ANDROID_DEFAULT_PADDING = ANDROID_DEFAULT_PADDING;
+export const ANDROID_VALIDATION_ICON_CONTAINER_OFFSET = 5;
+export const ANDROID_HEIGHT_OFFSET = 12;
+export const ANDROID_HORIZONTAL_PADDING_OFFSET = 8;
+export const ANDROID_DEFAULT_PADDING = 0;

package/lib/Select/index.js

@@ -1,14 +1,6 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _Select = _interopRequireDefault(require("./Select"));
-var _Group = _interopRequireDefault(require("./Group"));
-var _Item = _interopRequireDefault(require("./Item"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-_Select.default.Group = _Group.default;
-_Select.default.Item = _Item.default;
-var _default = _Select.default;
-exports.default = _default;
+import Select from './Select';
+import Group from './Group';
+import Item from './Item';
+Select.Group = Group;
+Select.Item = Item;
+export default Select;

package/lib/SideNav/Item.js

@@ -1,19 +1,12 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _Pressable = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Pressable"));
-var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _utils = require("../utils");
-var _ThemeProvider = require("../ThemeProvider");
-var _ItemContent = _interopRequireDefault(require("./ItemContent"));
-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.linkProps, _utils.viewProps]);
+import React from 'react';
+import Pressable from "react-native-web/dist/exports/Pressable";
+import Platform from "react-native-web/dist/exports/Platform";
+import PropTypes from 'prop-types';
+import { a11yProps, getTokensPropType, hrefAttrsProp, linkProps, selectSystemProps, variantProp, viewProps } from '../utils';
+import { useThemeTokensCallback, verticalAlignRow } from '../ThemeProvider';
+import ItemContent from './ItemContent';
+import { jsx as _jsx } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, linkProps, viewProps]);
 function selectItemStyles(_ref) {
   let {
     backgroundColor,
@@ -37,7 +30,7 @@ function selectItemStyles(_ref) {
     paddingTop,
     paddingBottom,
     justifyContent,
-    ...(0, _ThemeProvider.verticalAlignRow)(verticalAlign)
+    ...verticalAlignRow(verticalAlign)
   };
 }
 
@@ -46,7 +39,7 @@ function selectItemStyles(_ref) {
 
  This component can only be accessed as a name-spaced component: `SideNav.Item`.
  */
-const Item = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
+const Item = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     children,
     itemId,
@@ -65,7 +58,7 @@ const Item = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   const {
     hrefAttrs,
     rest
-  } = _utils.hrefAttrsProp.bundle(props);
+  } = hrefAttrsProp.bundle(props);
   const selectedProps = selectProps({
     accessibilityRole,
     href,
@@ -73,7 +66,7 @@ const Item = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     hrefAttrs,
     ...rest
   });
-  const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('SideNavItem', tokens, variant);
+  const getTokens = useThemeTokensCallback('SideNavItem', tokens, variant);
   const getAppearanceState = _ref3 => {
     let {
       hovered,
@@ -88,11 +81,11 @@ const Item = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   };
   const getPressableStyle = pressableState => ({
     ...selectItemStyles(getTokens(getAppearanceState(pressableState))),
-    ...(_Platform.default.OS === 'web' ? {
+    ...(Platform.OS === 'web' ? {
       outline: 'none'
     } : {})
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
+  return /*#__PURE__*/_jsx(Pressable, {
     ref: ref,
     style: getPressableStyle,
     accessibilityState: {
@@ -101,7 +94,7 @@ const Item = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     ...selectedProps,
     children: pressableState => {
       const themeTokens = getTokens(getAppearanceState(pressableState));
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ItemContent.default, {
+      return /*#__PURE__*/_jsx(ItemContent, {
         tokens: themeTokens,
         children: children
       });
@@ -114,38 +107,37 @@ Item.propTypes = {
   /**
    * Text content of the `Item`.
    */
-  children: _propTypes.default.node.isRequired,
+  children: PropTypes.node.isRequired,
   /**
    * @ignore
    * Set internally in `SideNav` render function - used to keep track of active item.
    */
-  itemId: _propTypes.default.string,
+  itemId: PropTypes.string,
   /**
    * @ignore
    * Set internally in `SideNav` render function - used to keep track of expanded items groups.
    */
-  groupId: _propTypes.default.string,
-  onPress: _propTypes.default.func,
-  href: _propTypes.default.string,
+  groupId: PropTypes.string,
+  onPress: PropTypes.func,
+  href: PropTypes.string,
   /**
    * On Web if href is passed, React Native Web maps this object's props to
    * `rel`, `target` and `download` attrs.
    */
-  hrefAttrs: _propTypes.default.shape(_utils.hrefAttrsProp.types),
+  hrefAttrs: PropTypes.shape(hrefAttrsProp.types),
   /**
    * @ignore
    * Set internally in `SideNav` render function.
    */
-  isActive: _propTypes.default.bool,
+  isActive: PropTypes.bool,
   /**
    * @ignore
    * Set internally in `SideNav.ItemsGroup` render function. Used to mark expanded `ItemsGroup` parent.
    */
-  isExpanded: _propTypes.default.bool,
-  accessibilityRole: _propTypes.default.string,
-  testID: _propTypes.default.number,
-  tokens: (0, _utils.getTokensPropType)('SideNavItem'),
-  variant: _utils.variantProp.propType
+  isExpanded: PropTypes.bool,
+  accessibilityRole: PropTypes.string,
+  testID: PropTypes.number,
+  tokens: getTokensPropType('SideNavItem'),
+  variant: variantProp.propType
 };
-var _default = Item;
-exports.default = _default;
+export default Item;

package/lib/SideNav/ItemContent.js

@@ -1,19 +1,11 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-exports.selectAccentStyles = selectAccentStyles;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
-var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
-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 }; }
-function selectAccentStyles(tokens) {
+import React from 'react';
+import PropTypes from 'prop-types';
+import View from "react-native-web/dist/exports/View";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import Typography from '../Typography';
+import { selectTokens, getTokensPropType } from '../utils';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+export function selectAccentStyles(tokens) {
   return {
     left: tokens.accentOffset,
     top: tokens.accentPadding,
@@ -27,31 +19,30 @@ function selectAccentStyles(tokens) {
 /**
  * Content inside an item or control in a SideNav, themed by the SideNavItem theme
  */
-const ItemContent = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+const ItemContent = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     children,
     tokens
   } = _ref;
-  const typographyTokens = (0, _utils.selectTokens)('Typography', tokens);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+  const typographyTokens = selectTokens('Typography', tokens);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Typography, {
       tokens: typographyTokens,
       ref: ref,
       children: children
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    }), /*#__PURE__*/_jsx(View, {
       style: [staticStyles.absolute, selectAccentStyles(tokens)]
     })]
   });
 });
 ItemContent.displayName = 'ItemContent';
 ItemContent.propTypes = {
-  tokens: (0, _utils.getTokensPropType)('SideNavItem'),
-  children: _propTypes.default.node
+  tokens: getTokensPropType('SideNavItem'),
+  children: PropTypes.node
 };
-const staticStyles = _StyleSheet.default.create({
+const staticStyles = StyleSheet.create({
   absolute: {
     position: 'absolute'
   }
 });
-var _default = ItemContent;
-exports.default = _default;
+export default ItemContent;