@telus-uds/components-base 2.0.0 → 2.0.1

package/lib/ActionCard/ActionCard.js

@@ -0,0 +1,342 @@
+import React from 'react';
+import Animated from "react-native-web/dist/exports/Animated";
+import View from "react-native-web/dist/exports/View";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import Text from "react-native-web/dist/exports/Text";
+import PropTypes from 'prop-types';
+import { applyTextStyles, useThemeTokens } from '../ThemeProvider';
+import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps, wrapStringsInText, clickProps, hrefAttrsProp, linkProps } from '../utils';
+import Icon from '../Icon';
+import Card from '../Card';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, linkProps, viewProps]);
+const selectCardStyles = styles => ['borderColor', 'borderRadius', 'borderWidth'].reduce((acc, key) => {
+  if (styles[key]) acc[key] = styles[key];
+  return acc;
+}, {});
+const selectInteractiveCardStyles = _ref => {
+  let {
+    backgroundColor,
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    paddingTop
+  } = _ref;
+  return {
+    ...(backgroundColor && {
+      backgroundColor
+    }),
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    paddingTop
+  };
+};
+const selectIconStyles = _ref2 => {
+  let {
+    iconMarginBottom,
+    iconMarginLeft,
+    iconMarginRight,
+    iconMarginTop
+  } = _ref2;
+  return {
+    marginBottom: iconMarginBottom,
+    marginLeft: iconMarginLeft,
+    marginRight: iconMarginRight,
+    marginTop: iconMarginTop
+  };
+};
+const selectIconProps = _ref3 => {
+  let {
+    icon,
+    iconBackgroundColor,
+    iconColor
+  } = _ref3;
+  return {
+    icon,
+    variant: {
+      background: true,
+      padding: 'small'
+    },
+    tokens: {
+      backgroundColor: iconBackgroundColor,
+      color: iconColor
+    }
+  };
+};
+const selectTitleStyles = _ref4 => {
+  let {
+    titleMarginBottom,
+    titleMarginLeft,
+    titleMarginRight,
+    titleMarginTop
+  } = _ref4;
+  return {
+    marginBottom: titleMarginBottom,
+    marginLeft: titleMarginLeft,
+    marginRight: titleMarginRight,
+    marginTop: titleMarginTop
+  };
+};
+const selectTitleTextStyles = _ref5 => {
+  let {
+    titleFontColor,
+    titleFontName,
+    titleFontSize,
+    titleFontWeight,
+    titleLineHeight
+  } = _ref5;
+  return applyTextStyles({
+    fontColor: titleFontColor,
+    fontName: titleFontName,
+    fontSize: titleFontSize,
+    fontWeight: titleFontWeight,
+    lineHeight: titleLineHeight
+  });
+};
+const selectContentStyles = _ref6 => {
+  let {
+    contentMarginBottom,
+    contentMarginLeft,
+    contentMarginRight,
+    contentMarginTop
+  } = _ref6;
+  return {
+    marginBottom: contentMarginBottom,
+    marginLeft: contentMarginLeft,
+    marginRight: contentMarginRight,
+    marginTop: contentMarginTop
+  };
+};
+const selectContentTextStyles = _ref7 => {
+  let {
+    contentFontColor,
+    contentFontName,
+    contentFontSize,
+    contentFontWeight,
+    contentLineHeight
+  } = _ref7;
+  return applyTextStyles({
+    fontColor: contentFontColor,
+    fontName: contentFontName,
+    fontSize: contentFontSize,
+    fontWeight: contentFontWeight,
+    lineHeight: contentLineHeight
+  });
+};
+const selectStatusIconProps = _ref8 => {
+  let {
+    statusIcon,
+    statusIconColor
+  } = _ref8;
+  return {
+    icon: statusIcon,
+    tokens: {
+      color: statusIconColor
+    },
+    variant: {
+      size: 'micro'
+    }
+  };
+};
+const selectActionIconStyles = _ref9 => {
+  let {
+    actionIconMarginBottom,
+    actionIconMarginLeft,
+    actionIconMarginRight,
+    actionIconMarginTop
+  } = _ref9;
+  return {
+    marginBottom: actionIconMarginBottom,
+    marginLeft: actionIconMarginLeft,
+    marginRight: actionIconMarginRight,
+    marginTop: actionIconMarginTop
+  };
+};
+const selectActionIconProps = _ref10 => {
+  let {
+    actionIcon,
+    actionIconColor
+  } = _ref10;
+  return {
+    icon: actionIcon,
+    tokens: {
+      color: actionIconColor
+    }
+  };
+};
+const ACTION_ICON_ANIMATION_DURATION = 100;
+
+/**
+ * ActionCard component represents a card with an action that can be triggered by the user.
+ *
+ * @component
+ * @example
+ * return (
+ *   <ActionCard
+ *     icon={<Icon icon={Icons.EyeMasked} />}
+ *     title="Like"
+ *     href="/like"
+ *     accessibilityRole="link"
+ *     tokens={themeTokens}
+ *     variant={{validation: 'warning'}}
+ *     onPress={() => handleLike()}
+ *   >
+ *    Click here to like the post
+ *   </ActionCard>
+ * )
+ */
+const ActionCard = /*#__PURE__*/React.forwardRef((_ref11, ref) => {
+  let {
+    icon,
+    title,
+    children,
+    href,
+    direction = true,
+    accessibilityRole,
+    tokens,
+    variant,
+    ...rest
+  } = _ref11;
+  const themeTokens = useThemeTokens('ActionCard', tokens, variant);
+  const actionIconAnimation = React.useRef(new Animated.Value(0)).current;
+  const {
+    onPress,
+    ...props
+  } = clickProps.toPressProps(rest);
+  const {
+    hrefAttrs,
+    rawRest
+  } = hrefAttrsProp.bundle(props);
+  const selectedProps = selectProps({
+    accessibilityRole,
+    href,
+    onPress: linkProps.handleHref({
+      href,
+      onPress
+    }),
+    hrefAttrs,
+    ...rawRest
+  });
+  return /*#__PURE__*/_jsx(Card, {
+    ref: ref,
+    interactiveCard: {
+      body: pressableState => {
+        const animate = pressableState.pressed || pressableState.hover || pressableState.focus;
+        Animated.timing(actionIconAnimation, {
+          toValue: animate ? themeTokens.actionIconTranslate : 0,
+          duration: ACTION_ICON_ANIMATION_DURATION,
+          useNativeDriver: false
+        }).start();
+        return /*#__PURE__*/_jsxs(View, {
+          style: staticStyles.container,
+          children: [icon && /*#__PURE__*/_jsx(View, {
+            style: selectIconStyles(themeTokens),
+            children: /*#__PURE__*/_jsx(Icon, {
+              ...selectIconProps({
+                icon,
+                ...themeTokens
+              })
+            })
+          }), /*#__PURE__*/_jsxs(View, {
+            style: staticStyles.content,
+            children: [/*#__PURE__*/_jsxs(View, {
+              style: staticStyles.header,
+              children: [/*#__PURE__*/_jsx(View, {
+                style: [selectTitleStyles(themeTokens), staticStyles.title],
+                children: /*#__PURE__*/_jsxs(Text, {
+                  children: [wrapStringsInText(title, {
+                    style: selectTitleTextStyles(themeTokens)
+                  }), themeTokens.statusIcon && /*#__PURE__*/_jsx(View, {
+                    style: staticStyles.statusIcon,
+                    children: /*#__PURE__*/_jsx(Icon, {
+                      ...selectStatusIconProps(themeTokens)
+                    })
+                  })]
+                })
+              }), /*#__PURE__*/_jsx(View, {
+                style: staticStyles.icons,
+                children: direction && /*#__PURE__*/_jsx(Animated.View, {
+                  style: [selectActionIconStyles(themeTokens), {
+                    transform: [{
+                      translateX: actionIconAnimation
+                    }]
+                  }],
+                  children: /*#__PURE__*/_jsx(Icon, {
+                    ...selectActionIconProps(themeTokens)
+                  })
+                })
+              })]
+            }), /*#__PURE__*/_jsx(View, {
+              style: [staticStyles.body, selectContentStyles(themeTokens)],
+              children: typeof children === 'string' ? wrapStringsInText(children, {
+                style: selectContentTextStyles(themeTokens)
+              }) : children
+            })]
+          })]
+        });
+      },
+      tokens: selectInteractiveCardStyles(themeTokens)
+    },
+    tokens: selectCardStyles(themeTokens),
+    ...selectedProps
+  });
+});
+ActionCard.displayName = 'ActionCard';
+ActionCard.propTypes = {
+  ...selectedSystemPropTypes,
+  tokens: getTokensPropType('ActionCard'),
+  variant: variantProp.propType,
+  /**
+   * Icon for the ActionCard
+   */
+  icon: PropTypes.elementType,
+  /**
+   * Title for the ActionCard
+   */
+  title: PropTypes.string,
+  /**
+   * Children for the ActionCard
+   */
+  children: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
+  /**
+   * href for the ActionCard
+   */
+  href: PropTypes.string,
+  /**
+   * Enable or disable the direction of the ActionCard
+   */
+  direction: PropTypes.bool,
+  /**
+   * AccesibilityRole for the ActionCard
+   */
+  accessibilityRole: PropTypes.string
+};
+const staticStyles = StyleSheet.create({
+  body: {
+    flexDirection: 'column'
+  },
+  container: {
+    flex: 1,
+    flexDirection: 'row'
+  },
+  content: {
+    flex: 1,
+    flexDirection: 'column'
+  },
+  icons: {
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  header: {
+    flexDirection: 'row',
+    justifyContent: 'space-between'
+  },
+  title: {
+    flexShrink: 1
+  },
+  statusIcon: {
+    marginLeft: 4
+  }
+});
+export default ActionCard;

package/lib/ActionCard/index.js

@@ -0,0 +1,2 @@
+import ActionCard from './ActionCard';
+export default ActionCard;

package/lib/ActivityIndicator/Spinner.js

@@ -1,40 +1,25 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _shared = require("./shared");
-
-var _A11yInfoProvider = require("../A11yInfoProvider");
-
-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; }
-
+import React from 'react';
+import { DURATION, MIN_EMPTY_ANGLE, MIN_STROKE_ANGLE, BEZIER, propTypes } from './shared';
+import { useA11yInfo } from '../A11yInfoProvider';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const SVG_RADIUS = 20;
 const SVG_CIRCUMFERENCE = SVG_RADIUS * 2 * Math.PI;
-const MIN_SVG_LENGTH = _shared.MIN_STROKE_ANGLE / 360 * SVG_CIRCUMFERENCE;
-const MAX_SVG_LENGTH = (1 - _shared.MIN_EMPTY_ANGLE / 360) * SVG_CIRCUMFERENCE;
+const MIN_SVG_LENGTH = MIN_STROKE_ANGLE / 360 * SVG_CIRCUMFERENCE;
+const MAX_SVG_LENGTH = (1 - MIN_EMPTY_ANGLE / 360) * SVG_CIRCUMFERENCE;
 const animationProps = {
   begin: '0s',
-  dur: "".concat(_shared.DURATION, "ms"),
+  dur: `${DURATION}ms`,
   fill: 'freeze',
   repeatCount: 'indefinite'
 };
 const bezierProps = {
   calcMode: 'spline',
   keyTimes: '0; 0.5; 1',
-  keySplines: "".concat(_shared.BEZIER.join(', '), " ; ").concat(_shared.BEZIER.join(', '))
-}; // We're using svg rather than css here to define the animation to avoid needing to introduce css injection mechanism
+  keySplines: `${BEZIER.join(', ')} ; ${BEZIER.join(', ')}`
+};
+// We're using svg rather than css here to define the animation to avoid needing to introduce css injection mechanism
 // It's possible to replicate this functionality with RNW animations, but it snags on chrome at least, see https://github.com/telus/universal-design-system/pull/477 for details.
-
-const Spinner = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+const Spinner = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     size,
     color,
@@ -44,23 +29,23 @@ const Spinner = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   } = _ref;
   const {
     reduceMotionEnabled
-  } = (0, _A11yInfoProvider.useA11yInfo)();
+  } = useA11yInfo();
   const reduceMotion = reduceMotionEnabled || isStatic;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {
+  return /*#__PURE__*/_jsx("svg", {
     ref: ref,
-    width: "".concat(size, "px"),
-    height: "".concat(size, "px"),
+    width: `${size}px`,
+    height: `${size}px`,
     viewBox: "0 0 48 48",
     "aria-valuetext": label,
     role: "progressbar",
     "aria-busy": true,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
-      children: [reduceMotion ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)("animateTransform", {
+    children: /*#__PURE__*/_jsxs("g", {
+      children: [reduceMotion ? null : /*#__PURE__*/_jsx("animateTransform", {
         attributeName: "transform",
         type: "rotate",
-        values: "-180 24 24;".concat(360 + _shared.MIN_STROKE_ANGLE - 180, " 24 24"),
+        values: `-180 24 24;${360 + MIN_STROKE_ANGLE - 180} 24 24`,
         ...animationProps
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("circle", {
+      }), /*#__PURE__*/_jsx("circle", {
         fill: "none",
         stroke: color,
         strokeWidth: thickness * 48 / size,
@@ -70,15 +55,16 @@ const Spinner = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
         r: "20",
         strokeDasharray: reduceMotion ? MAX_SVG_LENGTH : [MIN_SVG_LENGTH, SVG_CIRCUMFERENCE],
         strokeDashoffset: 0,
-        children: reduceMotion ? null : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("animate", {
+        vectorEffect: "non-scaling-stroke",
+        children: reduceMotion ? null : /*#__PURE__*/_jsxs(_Fragment, {
+          children: [/*#__PURE__*/_jsx("animate", {
             attributeName: "stroke-dashoffset",
-            values: "0;-10;".concat(MIN_SVG_LENGTH - SVG_CIRCUMFERENCE),
+            values: `0;-10;${MIN_SVG_LENGTH - SVG_CIRCUMFERENCE}`,
             ...animationProps,
             ...bezierProps
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("animate", {
+          }), /*#__PURE__*/_jsx("animate", {
             attributeName: "stroke-dasharray",
-            values: "".concat(MIN_SVG_LENGTH, ", 200;").concat(MAX_SVG_LENGTH, ", 200;").concat(MIN_SVG_LENGTH, ", 200"),
+            values: `${MIN_SVG_LENGTH}, 200;${MAX_SVG_LENGTH}, 200;${MIN_SVG_LENGTH}, 200`,
             ...animationProps,
             ...bezierProps
           })]
@@ -88,6 +74,5 @@ const Spinner = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   });
 });
 Spinner.displayName = 'Spinner';
-Spinner.propTypes = _shared.propTypes;
-var _default = Spinner;
-exports.default = _default;
+Spinner.propTypes = propTypes;
+export default Spinner;

package/lib/ActivityIndicator/Spinner.native.js

@@ -1,35 +1,14 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _Animated = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Animated"));
-
-var _Easing = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Easing"));
-
-var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
-
-var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
-
-var _shared = require("./shared");
-
-var _A11yInfoProvider = require("../A11yInfoProvider");
-
-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; }
-
-const ea = _shared.MIN_EMPTY_ANGLE / 2;
-const sa = _shared.MIN_STROKE_ANGLE / 2;
-const Spinner = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+import React from 'react';
+import Animated from "react-native-web/dist/exports/Animated";
+import Easing from "react-native-web/dist/exports/Easing";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import View from "react-native-web/dist/exports/View";
+import { DURATION, MIN_EMPTY_ANGLE, MIN_STROKE_ANGLE, BEZIER, propTypes } from './shared';
+import { useA11yInfo } from '../A11yInfoProvider';
+import { jsx as _jsx } from "react/jsx-runtime";
+const ea = MIN_EMPTY_ANGLE / 2;
+const sa = MIN_STROKE_ANGLE / 2;
+const Spinner = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     size,
     color,
@@ -37,41 +16,35 @@ const Spinner = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     label,
     isStatic = false
   } = _ref;
-
   const {
     current: timer
-  } = _react.default.useRef(new _Animated.default.Value(0));
-
+  } = React.useRef(new Animated.Value(0));
   const {
     reduceMotionEnabled
-  } = (0, _A11yInfoProvider.useA11yInfo)();
+  } = useA11yInfo();
   const reduceMotion = reduceMotionEnabled || isStatic;
-
-  _react.default.useLayoutEffect(() => {
-    const loop = _Animated.default.timing(timer, {
-      duration: _shared.DURATION,
-      easing: _Easing.default.linear,
+  React.useLayoutEffect(() => {
+    const loop = Animated.timing(timer, {
+      duration: DURATION,
+      easing: Easing.linear,
       // Animated.loop does not work if useNativeDriver is true on web
       useNativeDriver: true,
       toValue: 1,
       isInteraction: false
     });
-
-    if (!reduceMotion) _Animated.default.loop(loop).start();else loop.stop();
+    if (!reduceMotion) Animated.loop(loop).start();else loop.stop();
   }, [timer, reduceMotion]);
-
-  const frames = 60 * _shared.DURATION / 1000;
-
-  const easing = _Easing.default.bezier(..._shared.BEZIER);
-
+  const frames = 60 * DURATION / 1000;
+  const easing = Easing.bezier(...BEZIER);
   const containerStyle = {
     width: size,
     height: size / (reduceMotion ? 1.5 : 2),
     overflow: 'hidden'
   };
-  const animationFrequency = reduceMotion ? [0] : [0, 1]; // Credit to https://github.com/n4kz/react-native-indicators and https://github.com/callstack/react-native-paper for this
+  const animationFrequency = reduceMotion ? [0] : [0, 1];
 
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+  // Credit to https://github.com/n4kz/react-native-indicators and https://github.com/callstack/react-native-paper for this
+  return /*#__PURE__*/_jsx(View, {
     ref: ref,
     style: [styles.container],
     accessible: true,
@@ -80,7 +53,7 @@ const Spinner = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     accessibilityState: {
       busy: true
     },
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Animated.default.View, {
+    children: /*#__PURE__*/_jsx(Animated.View, {
       style: [{
         width: size,
         height: size
@@ -91,13 +64,11 @@ const Spinner = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
         const outputRange = Array.from(new Array(frames), (_, frameIndex) => {
           let progress = 2 * frameIndex / (frames - 1);
           const rotation = index ? +(360 - sa) : -(180 - sa);
-
           if (progress > 1.0) {
             progress = 2.0 - progress;
           }
-
           const direction = index ? -1 : +1;
-          return "".concat(direction * (180 - (sa + ea)) * easing(progress) + rotation, "deg");
+          return `${direction * (180 - (sa + ea)) * easing(progress) + rotation}deg`;
         });
         const layerStyle = {
           width: size,
@@ -107,12 +78,11 @@ const Spinner = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
           width: size,
           height: size
         };
-
         if (!reduceMotion) {
           layerStyle.transform = [{
             rotate: timer.interpolate({
               inputRange: [0, 1],
-              outputRange: ["".concat(0 + ea + sa, "deg"), "".concat(2 * 360 + ea + sa, "deg")]
+              outputRange: [`${0 + ea + sa}deg`, `${2 * 360 + ea + sa}deg`]
             })
           }];
           viewportStyle.transform = [{
@@ -124,7 +94,6 @@ const Spinner = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
             })
           }];
         }
-
         const offsetStyle = index ? {
           top: size / 2
         } : null;
@@ -135,19 +104,19 @@ const Spinner = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
           borderWidth: thickness,
           borderRadius: size / 2
         };
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Animated.default.View, {
+        return /*#__PURE__*/_jsx(Animated.View, {
           style: [styles.layer],
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Animated.default.View, {
+          children: /*#__PURE__*/_jsx(Animated.View, {
             style: layerStyle,
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Animated.default.View, {
+            children: /*#__PURE__*/_jsx(Animated.View, {
               style: [containerStyle, offsetStyle],
               collapsable: false,
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Animated.default.View, {
+              children: /*#__PURE__*/_jsx(Animated.View, {
                 style: viewportStyle,
-                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Animated.default.View, {
+                children: /*#__PURE__*/_jsx(Animated.View, {
                   style: containerStyle,
                   collapsable: false,
-                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Animated.default.View, {
+                  children: /*#__PURE__*/_jsx(Animated.View, {
                     style: lineStyle
                   })
                 })
@@ -160,18 +129,16 @@ const Spinner = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   });
 });
 Spinner.displayName = 'Spinner';
-Spinner.propTypes = _shared.propTypes;
-
-const styles = _StyleSheet.default.create({
+Spinner.propTypes = propTypes;
+const styles = StyleSheet.create({
   container: {
     flexGrow: 0,
     flexShrink: 0
   },
-  layer: { ..._StyleSheet.default.absoluteFillObject,
+  layer: {
+    ...StyleSheet.absoluteFillObject,
     justifyContent: 'center',
     alignItems: 'center'
   }
 });
-
-var _default = Spinner;
-exports.default = _default;
+export default Spinner;