@telus-uds/components-base 1.96.0 → 1.97.1

package/lib/SideNav/ItemsGroup.js

@@ -1,17 +1,10 @@
-"use strict";
+import React from 'react';
+import PropTypes from 'prop-types';
+import ItemContent from './ItemContent';
+import ExpandCollapse from '../ExpandCollapse';
+import { getTokensPropType, variantProp, componentPropType, selectTokens } from '../utils';
+import { useThemeTokensCallback } from '../ThemeProvider';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _ItemContent = _interopRequireDefault(require("./ItemContent"));
-var _ExpandCollapse = _interopRequireDefault(require("../ExpandCollapse"));
-var _utils = require("../utils");
-var _ThemeProvider = require("../ThemeProvider");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /**
  Expandable content areas for use within `SideNav`.
 
@@ -21,7 +14,9 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
  ## Usage Criteria
  - Use `SideNav.ItemsGroup` with large pages that have multiple sections
- */const ItemsGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+const ItemsGroup = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     children,
     label,
@@ -44,7 +39,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
     ...getAppearance(appearance),
     type: 'parent'
   });
-  const getGroupTokens = (0, _ThemeProvider.useThemeTokensCallback)('SideNavItemsGroup', tokens, variant);
+  const getGroupTokens = useThemeTokensCallback('SideNavItemsGroup', tokens, variant);
   const getPanelTokens = appearance => {
     const {
       panelBorderColor,
@@ -55,23 +50,22 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
       borderWidth: 0,
       marginBottom: 0
     };
-    return (0, _utils.selectTokens)('ExpandCollapsePanel', groupTokens);
+    return selectTokens('ExpandCollapsePanel', groupTokens);
   };
-  const getItemTokens = (0, _ThemeProvider.useThemeTokensCallback)('SideNavItem', itemTokens, variant);
-  const getControlTokens = appearance => (0, _utils.selectTokens)('ExpandCollapseControl', {
+  const getItemTokens = useThemeTokensCallback('SideNavItem', itemTokens, variant);
+  const getControlTokens = appearance => selectTokens('ExpandCollapseControl', {
     ...getItemTokens(getItemAppearance(appearance)),
     // main style from SideNavItem
     ...getGroupTokens(getAppearance(appearance)) // control-specific tokens like icon etc
   });
-
   const controlContent = controlState => {
     const currentItemTokens = getItemTokens(getItemAppearance(controlState));
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ItemContent.default, {
+    return /*#__PURE__*/_jsx(ItemContent, {
       tokens: currentItemTokens,
       children: label
     });
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandCollapse.default.Panel, {
+  return /*#__PURE__*/_jsx(ExpandCollapse.Panel, {
     ref: ref,
     openIds: openGroups,
     panelId: groupId,
@@ -91,37 +85,36 @@ ItemsGroup.propTypes = {
   /**
    * Specifies the links contained within. It may only contain `SideNav.Item`.
    */
-  children: (0, _utils.componentPropType)('Item'),
+  children: componentPropType('Item'),
   /**
    * Text content of the group's parent `SideNav.Item`.
    */
-  label: _propTypes.default.string.isRequired,
+  label: PropTypes.string.isRequired,
   /**
    * @ignore
    * Set internally in `SideNav` render function - used to keep track of expanded items groups.
    */
-  groupId: _propTypes.default.string,
+  groupId: PropTypes.string,
   /**
    * @ignore
    * Set internally in `SideNav` render function. Called when the group is expanded/collapsed.
    */
-  onToggle: _propTypes.default.func,
+  onToggle: PropTypes.func,
   /**
    * @ignore
    * Set internally in `SideNav` render function. Contains `groupId`s of currently open groups.
    */
-  openGroups: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])),
+  openGroups: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),
   /**
    * @ignore
    * Set internally in `SideNav` render function. Used to mark group containing the currently active `SideNav.Item`.
    */
-  isActive: _propTypes.default.bool,
-  variant: _utils.variantProp.propType,
-  tokens: (0, _utils.getTokensPropType)('SideNavItemsGroup'),
+  isActive: PropTypes.bool,
+  variant: variantProp.propType,
+  tokens: getTokensPropType('SideNavItemsGroup'),
   /**
    * Custom tokens for `SideNav.Item`
    */
-  itemTokens: (0, _utils.getTokensPropType)('SideNavItem')
+  itemTokens: getTokensPropType('SideNavItem')
 };
-var _default = ItemsGroup;
-exports.default = _default;
+export default ItemsGroup;

package/lib/SideNav/SideNav.js

@@ -1,20 +1,11 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _ExpandCollapse = _interopRequireDefault(require("../ExpandCollapse"));
-var _Item = _interopRequireDefault(require("./Item"));
-var _ItemsGroup = _interopRequireDefault(require("./ItemsGroup"));
-var _ThemeProvider = require("../ThemeProvider");
-var _utils = require("../utils");
-var _jsxRuntime = require("react/jsx-runtime");
-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; }
+import React, { createElement as _createElement } from 'react';
+import PropTypes from 'prop-types';
+import ExpandCollapse from '../ExpandCollapse';
+import Item from './Item';
+import ItemsGroup from './ItemsGroup';
+import { useThemeTokens } from '../ThemeProvider';
+import { a11yProps, componentPropType, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
 function selectBorderStyles(tokens) {
   return {
     borderBottomWidth: tokens.borderWidth,
@@ -22,14 +13,14 @@ function selectBorderStyles(tokens) {
     borderBottomColor: tokens.borderColor
   };
 }
-const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 
 /**
  ## Usage Criteria
  - Use in conjunction with a large amount of educational / informational content
  - Allow the user to navigate between options frequently and efficiently
  */
-const SideNav = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+const SideNav = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     children,
     variant = {},
@@ -39,8 +30,8 @@ const SideNav = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     groupTokens,
     ...rest
   } = _ref;
-  const themeTokens = (0, _ThemeProvider.useThemeTokens)('SideNav', tokens, variant);
-  const [active, setActive] = _react.default.useState({
+  const themeTokens = useThemeTokens('SideNav', tokens, variant);
+  const [active, setActive] = React.useState({
     groupId: undefined,
     itemId: undefined
   });
@@ -53,7 +44,7 @@ const SideNav = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   const isItemActive = (itemId, groupId) => {
     return active.groupId === groupId && active.itemId === itemId;
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandCollapse.default, {
+  return /*#__PURE__*/_jsx(ExpandCollapse, {
     ref: ref,
     maxOpen: accordion ? 1 : null,
     style: selectBorderStyles(themeTokens),
@@ -72,7 +63,7 @@ const SideNav = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
           onItemPress(...arguments);
           if (onPress) onPress(...arguments);
         };
-        return /*#__PURE__*/(0, _react.createElement)(_Item.default, {
+        return /*#__PURE__*/_createElement(Item, {
           ...item.props,
           key: itemId,
           itemId: itemId,
@@ -86,16 +77,16 @@ const SideNav = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
           onPress: handlePress
         });
       };
-      return _react.default.Children.map(children, (child, index) => {
+      return React.Children.map(children, (child, index) => {
         // iterate over children and identify them internally to later reference expanded groups and active items
-        if (child.type === _Item.default) return renderItem(child, index);
-        if (child.type === _ItemsGroup.default) {
+        if (child.type === Item) return renderItem(child, index);
+        if (child.type === ItemsGroup) {
           const {
             groupId = `group-${index}`
           } = child.props;
           const isGroupActive = active.itemId !== undefined && active.groupId === groupId;
           const handleToggle = event => onToggle(groupId, event);
-          return /*#__PURE__*/(0, _react.createElement)(_ItemsGroup.default, {
+          return /*#__PURE__*/_createElement(ItemsGroup, {
             ...child.props,
             key: groupId,
             groupId: groupId,
@@ -105,7 +96,7 @@ const SideNav = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
             openGroups: openIds,
             isActive: isGroupActive,
             onToggle: handleToggle
-          }, _react.default.Children.map(child.props.children, (item, itemIndex) => renderItem(item, itemIndex, groupId)));
+          }, React.Children.map(child.props.children, (item, itemIndex) => renderItem(item, itemIndex, groupId)));
         }
         return null;
       });
@@ -118,23 +109,22 @@ SideNav.propTypes = {
   /**
    * Specifies the structure and links of the `SideNav`. It may only consist of `SideNav.Item` and `SideNav.ItemsGroup`.
    */
-  children: (0, _utils.componentPropType)(['Item', 'ItemsGroup']),
+  children: componentPropType(['Item', 'ItemsGroup']),
   /**
    * Identifies if only one `SideNav.ItemsGroup` should be open at a time.
    */
-  accordion: _propTypes.default.bool,
-  variant: _utils.variantProp.propType,
-  tokens: (0, _utils.getTokensPropType)('SideNav'),
+  accordion: PropTypes.bool,
+  variant: variantProp.propType,
+  tokens: getTokensPropType('SideNav'),
   /**
    * Custom tokens for `SideNav.Item`
    */
-  itemTokens: (0, _utils.getTokensPropType)('SideNavItem'),
+  itemTokens: getTokensPropType('SideNavItem'),
   /**
    * Custom tokens for `SideNavItemsGroup`
    */
-  groupTokens: (0, _utils.getTokensPropType)('SideNavItemsGroup')
+  groupTokens: getTokensPropType('SideNavItemsGroup')
 };
-SideNav.Item = _Item.default;
-SideNav.ItemsGroup = _ItemsGroup.default;
-var _default = SideNav;
-exports.default = _default;
+SideNav.Item = Item;
+SideNav.ItemsGroup = ItemsGroup;
+export default SideNav;

package/lib/SideNav/index.js

@@ -1,13 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "default", {
-  enumerable: true,
-  get: function () {
-    return _SideNav.default;
-  }
-});
-var _SideNav = _interopRequireDefault(require("./SideNav"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+export { default } from './SideNav';

package/lib/Skeleton/Skeleton.js

@@ -1,23 +1,16 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _Animated = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Animated"));
-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 _propTypes = _interopRequireDefault(require("prop-types"));
-var _StackView = _interopRequireDefault(require("../StackView"));
-var _ThemeProvider = require("../ThemeProvider");
-var _utils = require("../utils");
-var _useSkeletonNativeAnimation = _interopRequireDefault(require("./useSkeletonNativeAnimation"));
-var _skeletonWebAnimation = _interopRequireDefault(require("./skeletonWebAnimation"));
-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 Animated from "react-native-web/dist/exports/Animated";
+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 propTypes from 'prop-types';
+import StackView from '../StackView';
+import { useThemeTokens } from '../ThemeProvider';
+import { a11yProps, getTokensPropType, selectSystemProps, responsiveProps, useResponsiveProp, useSpacingScale, spacingProps, variantProp, viewProps } from '../utils';
+import useSkeletonNativeAnimation from './useSkeletonNativeAnimation';
+import skeletonWebAnimation from './skeletonWebAnimation';
+import { jsx as _jsx } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 const selectSkeletonStyles = _ref => {
   let {
     color,
@@ -58,7 +51,7 @@ const selectSquareStyles = _ref4 => {
     borderRadius: radius
   };
 };
-const Skeleton = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
+const Skeleton = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
   let {
     tokens,
     variant,
@@ -70,8 +63,8 @@ const Skeleton = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
     shape = 'line',
     ...rest
   } = _ref5;
-  const themeTokens = (0, _ThemeProvider.useThemeTokens)('Skeleton', tokens, variant);
-  const pixels = (0, _utils.useResponsiveProp)(sizePixels);
+  const themeTokens = useThemeTokens('Skeleton', tokens, variant);
+  const pixels = useResponsiveProp(sizePixels);
   const spacingScaleValue = typeof pixels === 'number' ?
   // Size by an exact number of pixels
   {
@@ -81,21 +74,21 @@ const Skeleton = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
   } :
   // Size by an index on the spacing scale (getting default index from theme if none provided)
   sizeIndex || themeTokens.size;
-  const skeletonHeight = (0, _utils.useSpacingScale)(spacingScaleValue);
+  const skeletonHeight = useSpacingScale(spacingScaleValue);
 
   // Animation color and animation duration
   const {
     secondColor,
     animationDuration
   } = themeTokens;
-  const nativeAnimation = (0, _useSkeletonNativeAnimation.default)({
+  const nativeAnimation = useSkeletonNativeAnimation({
     animationDuration
   });
   const getAnimationBasedOnPlatform = () => {
-    const animation = _Platform.default.OS === 'web' ? (0, _skeletonWebAnimation.default)(secondColor, animationDuration) : nativeAnimation;
+    const animation = Platform.OS === 'web' ? skeletonWebAnimation(secondColor, animationDuration) : nativeAnimation;
     // We must pass the animation styles through `StyleSheet.create`
     // @see https://github.com/necolas/react-native-web/issues/2387
-    const styles = _StyleSheet.default.create({
+    const styles = StyleSheet.create({
       animation
     });
     return styles.animation;
@@ -128,13 +121,13 @@ const Skeleton = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
   const renderSkeleton = function () {
     let index = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
     // @see https://github.com/necolas/react-native-web/issues/2387
-    const Component = _Platform.default.OS === 'web' ? _View.default : _Animated.default.View;
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
+    const Component = Platform.OS === 'web' ? View : Animated.View;
+    return /*#__PURE__*/_jsx(Component, {
       testID: "skeleton",
       style: [selectSkeletonStyles(themeTokens), getAnimationBasedOnPlatform(), getStyledBasedOnShape()]
     }, `skeleton-${index + 1}`);
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_StackView.default, {
+  return /*#__PURE__*/_jsx(StackView, {
     space: themeTokens.spaceBetweenLines,
     ref: ref,
     ...selectProps(rest),
@@ -144,30 +137,30 @@ const Skeleton = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
 Skeleton.displayName = 'Skeleton';
 Skeleton.propTypes = {
   ...selectedSystemPropTypes,
-  tokens: (0, _utils.getTokensPropType)('Skeleton'),
-  variant: _utils.variantProp.propType,
+  tokens: getTokensPropType('Skeleton'),
+  variant: variantProp.propType,
   /**
    * Sets the size of Skeleton lines or shape according to the theme's spacing scale. For example, size={1} gives the smallest non-zero theme-defined spacing size.
    *
    * May also accept an object with responsive viewport keys or spacing scale options - see `useSpacingScale` for details.
    */
-  sizeIndex: _utils.spacingProps.types.spacingValue,
+  sizeIndex: spacingProps.types.spacingValue,
   /**
    * @deprecated alias for `sizeIndex`
    */
-  size: _utils.spacingProps.types.spacingValue,
+  size: spacingProps.types.spacingValue,
   /**
    * Sets the size of Skeleton lines or shape to an exact number of pixels. Use when it's necessary to exactly match sizes of images or other boxes.
    *
    * Accepts a number or an object with responsive viewport keys, e.g. { xs: 32, lg: 64 } would be 32px at xs, sm and md and 64 at lg and xl viewports.
    */
-  sizePixels: _utils.responsiveProps.getTypeOptionallyByViewport(_propTypes.default.number),
+  sizePixels: responsiveProps.getTypeOptionallyByViewport(propTypes.number),
   /**
    * Determines the width of simulated lines of text if the Skeleton's shape is 'line' (the default shape).
    *
    * Only has any affect if shape is line (the default). If unset, takes a default value from the theme.
    */
-  characters: _propTypes.default.number,
+  characters: propTypes.number,
   /**
    * Determines how many Skeleton items are rendered (default 1).
    *
@@ -175,11 +168,10 @@ Skeleton.propTypes = {
    *
    * The amount of spacing between multiple lines is controlled by theme tokens.
    */
-  lines: _propTypes.default.number,
+  lines: propTypes.number,
   /**
    * Determines if the skeleton should resemble lines of text (default), a circle, or a square box with themed rounded corners.
    */
-  shape: _propTypes.default.oneOf(['line', 'circle', 'box'])
+  shape: propTypes.oneOf(['line', 'circle', 'box'])
 };
-var _default = Skeleton;
-exports.default = _default;
+export default Skeleton;

package/lib/Skeleton/index.js

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

package/lib/Skeleton/skeleton.constant.js

@@ -1,10 +1,2 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.OPACITY_STOP = exports.DEFAULT_OPACITY = void 0;
-const DEFAULT_OPACITY = 1;
-exports.DEFAULT_OPACITY = DEFAULT_OPACITY;
-const OPACITY_STOP = 0.4;
-exports.OPACITY_STOP = OPACITY_STOP;
+export const DEFAULT_OPACITY = 1;
+export const OPACITY_STOP = 0.4;

package/lib/Skeleton/skeletonWebAnimation.js

@@ -1,9 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
 const skeletonWebAnimation = (secondColor, animationTime) => {
   return {
     animationDuration: `${animationTime}ms`,
@@ -17,5 +11,4 @@ const skeletonWebAnimation = (secondColor, animationTime) => {
     }
   };
 };
-var _default = skeletonWebAnimation;
-exports.default = _default;
+export default skeletonWebAnimation;

package/lib/Skeleton/useSkeletonNativeAnimation.js

@@ -1,36 +1,28 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = require("react");
-var _Animated = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Animated"));
-var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
-var _skeleton = require("./skeleton.constant");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+import { useEffect, useRef } from 'react';
+import Animated from "react-native-web/dist/exports/Animated";
+import Platform from "react-native-web/dist/exports/Platform";
+import { DEFAULT_OPACITY, OPACITY_STOP } from './skeleton.constant';
 const useSkeletonNativeAnimation = _ref => {
   let {
     animationDuration
   } = _ref;
-  const fadeAnimation = (0, _react.useRef)(new _Animated.default.Value(_skeleton.DEFAULT_OPACITY)).current;
+  const fadeAnimation = useRef(new Animated.Value(DEFAULT_OPACITY)).current;
 
   /* eslint-disable react-hooks/exhaustive-deps */
-  (0, _react.useEffect)(() => {
-    const fade = _Animated.default.sequence([_Animated.default.timing(fadeAnimation, {
-      toValue: _skeleton.OPACITY_STOP,
+  useEffect(() => {
+    const fade = Animated.sequence([Animated.timing(fadeAnimation, {
+      toValue: OPACITY_STOP,
       duration: animationDuration,
-      useNativeDriver: _Platform.default.OS !== 'web'
-    }), _Animated.default.timing(fadeAnimation, {
-      toValue: _skeleton.DEFAULT_OPACITY,
+      useNativeDriver: Platform.OS !== 'web'
+    }), Animated.timing(fadeAnimation, {
+      toValue: DEFAULT_OPACITY,
       duration: animationDuration,
-      useNativeDriver: _Platform.default.OS !== 'web'
+      useNativeDriver: Platform.OS !== 'web'
     })]);
-    _Animated.default.loop(fade).start();
+    Animated.loop(fade).start();
   }, [fadeAnimation]);
   return {
     opacity: fadeAnimation
   };
 };
-var _default = useSkeletonNativeAnimation;
-exports.default = _default;
+export default useSkeletonNativeAnimation;

package/lib/SkipLink/SkipLink.js

@@ -1,20 +1,13 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
-var _Pressable = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Pressable"));
-var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
-var _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
-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 [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.linkProps]);
+import React from 'react';
+import Platform from "react-native-web/dist/exports/Platform";
+import Pressable from "react-native-web/dist/exports/Pressable";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import Text from "react-native-web/dist/exports/Text";
+import PropTypes from 'prop-types';
+import { useThemeTokensCallback } from '../ThemeProvider';
+import { a11yProps, clickProps, getTokensPropType, linkProps, resolvePressableTokens, selectSystemProps, variantProp, withLinkRouter } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, linkProps]);
 
 // ensure explicit selection of tokens
 const selectStyles = _ref => {
@@ -112,7 +105,7 @@ const selectTextStyles = _ref2 => {
  *
  * Skip link supports all the common a11y and link props.
  */
-const SkipLink = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
+const SkipLink = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   let {
     tokens,
     variant,
@@ -123,20 +116,19 @@ const SkipLink = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
   const {
     onPress,
     ...rest
-  } = _utils.clickProps.toPressProps(rawRest);
-  const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('SkipLink', tokens, variant);
+  } = clickProps.toPressProps(rawRest);
+  const getTokens = useThemeTokensCallback('SkipLink', tokens, variant);
   const handlePress = event => {
     if (typeof onPress === 'function') onPress(event);
     // TODO - support native apps with something based on refs and/or setAccessibilityFocus
   };
-
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
+  return /*#__PURE__*/_jsx(Pressable, {
     ref: ref,
     accessibilityRole: "link",
     onPress: handlePress,
     href: href,
     style: pressableState => {
-      const themeTokens = (0, _utils.resolvePressableTokens)(getTokens, pressableState);
+      const themeTokens = resolvePressableTokens(getTokens, pressableState);
       const skipLinkStyle = selectStyles(themeTokens);
       const {
         focused
@@ -145,9 +137,9 @@ const SkipLink = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     },
     ...selectProps(rest),
     children: pressableState => {
-      const themeTokens = (0, _utils.resolvePressableTokens)(getTokens, pressableState);
+      const themeTokens = resolvePressableTokens(getTokens, pressableState);
       const textStyles = selectTextStyles(themeTokens);
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+      return /*#__PURE__*/_jsx(Text, {
         style: [textStyles, staticStyles.baseline],
         children: children
       });
@@ -160,15 +152,15 @@ SkipLink.propTypes = {
   /**
    * The text content shown or read out when the SkipLink is focused, usually a string.
    */
-  children: _propTypes.default.node,
+  children: PropTypes.node,
   /**
    * The target to skip to. Usually an anchor link to a section id (e.g. href="#main-section").
    */
-  href: _propTypes.default.string,
-  tokens: (0, _utils.getTokensPropType)('SkipLink'),
-  variant: _utils.variantProp.propType
+  href: PropTypes.string,
+  tokens: getTokensPropType('SkipLink'),
+  variant: variantProp.propType
 };
-const staticStyles = _StyleSheet.default.create({
+const staticStyles = StyleSheet.create({
   baseline: {
     alignSelf: 'baseline'
   },
@@ -180,7 +172,7 @@ const staticStyles = _StyleSheet.default.create({
   },
   hidden: {
     overflow: 'hidden',
-    ..._Platform.default.select({
+    ...Platform.select({
       web: {
         clip: 'rect(0 0 0 0)',
         clipPath: 'inset(50%)'
@@ -194,5 +186,4 @@ const staticStyles = _StyleSheet.default.create({
     })
   }
 });
-var _default = (0, _utils.withLinkRouter)(SkipLink);
-exports.default = _default;
+export default withLinkRouter(SkipLink);

package/lib/SkipLink/index.js

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