@telus-uds/components-base 1.74.0 → 1.76.0

package/lib-module/Link/ChevronLink.js

@@ -18,6 +18,7 @@ const ChevronLink = /*#__PURE__*/forwardRef((_ref, ref) => {
     tokens = {},
     variant,
     dataSet,
+    onPress,
     ...otherlinkProps
   } = _ref;
   const getChevronTokens = useThemeTokensCallback('ChevronLink', tokens, variant);
@@ -46,6 +47,7 @@ const ChevronLink = /*#__PURE__*/forwardRef((_ref, ref) => {
     tokens: getTokens,
     dataSet: dataSet,
     ref: ref,
+    onPress: onPress,
     children: children
   });
 });

package/lib-module/Link/InlinePressable.js

@@ -1,6 +1,7 @@
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useCallback } from 'react';
 import Pressable from "react-native-web/dist/exports/Pressable";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import Platform from "react-native-web/dist/exports/Platform";
 /**
  * @typedef {import('react-native').PressableProps} PressableProps
  */
@@ -13,18 +14,31 @@ import StyleSheet from "react-native-web/dist/exports/StyleSheet";
  * @param {PressableProps} PressableProps
  */
 // React Native exports prop Types but not propTypes, use JSDoc types here rather than duplicate RN
-// eslint-disable-next-line react/prop-types
+/* eslint-disable react/prop-types */
 import { jsx as _jsx } from "react/jsx-runtime";
 const InlinePressable = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     children,
     inlineFlex = true,
     style,
+    onPress,
     ...props
   } = _ref;
+  const handlePress = useCallback(() => {
+    if (onPress) {
+      onPress();
+    }
+  }, [onPress]);
+  const handleKeyPress = useCallback(e => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      handlePress();
+    }
+  }, [handlePress]);
   return /*#__PURE__*/_jsx(Pressable, {
     ref: ref,
     style: pressState => [typeof style === 'function' ? style(pressState) : style, staticStyles[inlineFlex ? 'inlineFlex' : 'inline']],
+    onPress: handlePress,
+    onKeyDown: Platform.OS === 'web' ? handleKeyPress : undefined,
     ...props,
     children: pressState => typeof children === 'function' ? children(pressState) : children
   });

package/lib-module/Link/LinkBase.js

@@ -178,6 +178,7 @@ const LinkBase = /*#__PURE__*/forwardRef((_ref6, ref) => {
     // assuming links without icons should be inline (even if they are long)
     ,
     ref: ref,
+    keyboardShouldPersistTaps: "handled",
     style: linkState => {
       const themeTokens = resolveLinkTokens(linkState);
       const outerBorderStyles = selectOuterBorderStyles(themeTokens);

package/lib-module/Notification/Notification.js

@@ -1,9 +1,8 @@
-import React, { forwardRef, useState } from 'react';
-import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import React, { forwardRef, useState, useRef } from 'react';
 import View from "react-native-web/dist/exports/View";
 import PropTypes from 'prop-types';
-import { applyTextStyles, useTheme, useThemeTokens } from '../ThemeProvider';
-import { a11yProps, getTokensPropType, selectSystemProps, selectTokens, variantProp, viewProps, wrapStringsInText, useResponsiveProp } from '../utils';
+import { applyTextStyles, useTheme, useThemeTokens, useResponsiveThemeTokens } from '../ThemeProvider';
+import { a11yProps, getTokensPropType, selectSystemProps, selectTokens, variantProp, viewProps, wrapStringsInText, useResponsiveProp, createMediaQueryStyles, StyleSheet } from '../utils';
 import IconButton from '../IconButton';
 import useCopy from '../utils/useCopy';
 import dictionary from './dictionary';
@@ -67,6 +66,156 @@ const selectDismissButtonContainerStyles = _ref4 => {
 const selectContentContainerStyle = maxWidth => ({
   width: maxWidth || '100%'
 });
+const getMediaQueryStyles = (themeTokens, themeOptions, viewport, mediaIdsRef, dismissible) => {
+  const transformedSelectContainerStyles = Object.entries(themeTokens).reduce((acc, _ref5) => {
+    let [vp, viewportTokens] = _ref5;
+    acc[vp] = selectContainerStyles({
+      ...viewportTokens
+    });
+    return acc;
+  }, {});
+  const selectContainerMediaQueryStyles = createMediaQueryStyles(transformedSelectContainerStyles);
+  const {
+    ids: containerIds,
+    styles: containerStyles
+  } = StyleSheet.create({
+    container: {
+      flexDirection: 'row',
+      ...selectContainerMediaQueryStyles
+    }
+  });
+  const {
+    ids: contentContainerIds,
+    styles: contentContainerStyles
+  } = StyleSheet.create({
+    contentContainer: {
+      flexDirection: 'row',
+      flexShrink: 1,
+      justifyContent: 'space-between',
+      ...createMediaQueryStyles({
+        xs: {
+          width: (themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.contentMaxWidth.xs) || '100%'
+        },
+        md: {
+          width: (themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.contentMaxWidth.md) || '100%'
+        },
+        lg: {
+          width: (themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.contentMaxWidth.lg) || '100%'
+        },
+        sm: {
+          width: (themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.contentMaxWidth.sm) || '100%'
+        },
+        xl: {
+          width: (themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.contentMaxWidth.xl) || '100%'
+        }
+      })
+    }
+  });
+  const {
+    ids: staticContentContainerIds,
+    styles: staticContentContainerStyles
+  } = StyleSheet.create({
+    staticContentContainer: {
+      flexDirection: 'row',
+      flexShrink: 1
+    }
+  });
+  const {
+    ids: iconContainerIds,
+    styles: iconContainerStyles
+  } = StyleSheet.create({
+    iconContainer: selectIconContainerStyles(themeTokens[viewport])
+  });
+  const {
+    ids: dismissButtonContainerIds,
+    styles: dismissButtonContainerStyles
+  } = StyleSheet.create({
+    dismissButtonContainer: selectDismissButtonContainerStyles(themeTokens[viewport])
+  });
+  const {
+    ids: textIds,
+    styles: textStyles
+  } = StyleSheet.create({
+    text: selectTextStyles(themeTokens[viewport], themeOptions, dismissible)
+  });
+  const {
+    styles: selectIconPropsStyles
+  } = StyleSheet.create({
+    selectIconProps: selectIconProps(themeTokens[viewport])
+  });
+  const {
+    styles: selectDismissIconPropsStyles
+  } = StyleSheet.create({
+    selectDismissIconProps: selectDismissIconProps(themeTokens[viewport])
+  });
+
+  // eslint-disable-next-line no-param-reassign
+  mediaIdsRef.current = {
+    containerIds,
+    contentContainerIds,
+    staticContentContainerIds,
+    iconContainerIds,
+    dismissButtonContainerIds,
+    textIds
+  };
+  return {
+    containerStyles,
+    contentContainerStyles,
+    staticContentContainerStyles,
+    iconContainerStyles,
+    dismissButtonContainerStyles,
+    textStyles,
+    selectIconPropsStyles,
+    selectDismissIconPropsStyles
+  };
+};
+const getDefaultStyles = (themeTokens, themeOptions, maxWidth, dismissible) => ({
+  containerStyles: {
+    container: {
+      flexDirection: 'row',
+      ...selectContainerStyles(themeTokens)
+    }
+  },
+  contentContainerStyles: {
+    contentContainer: {
+      flexDirection: 'row',
+      flexShrink: 1,
+      justifyContent: 'space-between',
+      ...selectContentContainerStyle(maxWidth)
+    }
+  },
+  staticContentContainerStyles: {
+    staticContentContainer: {
+      flexDirection: 'row',
+      flexShrink: 1
+    }
+  },
+  iconContainerStyles: {
+    iconContainer: {
+      ...selectIconContainerStyles(themeTokens)
+    }
+  },
+  dismissButtonContainerStyles: {
+    dismissButtonContainer: {
+      ...selectDismissButtonContainerStyles(themeTokens)
+    }
+  },
+  textStyles: {
+    text: {
+      ...selectTextStyles(themeTokens, themeOptions, dismissible)
+    }
+  },
+  selectIconPropsStyles: {
+    selectIconProps: {
+      ...selectIconProps(themeTokens)
+    }
+  },
+  selectDismissIconPropsStyles: {
+    selectDismissIconProps: {
+      ...selectDismissIconProps(themeTokens)
+    }
+  }
+});
 
 /**
  * A banner that highlights important messages:
@@ -119,7 +268,7 @@ const selectContentContainerStyle = maxWidth => ({
  * Use full-width `Notifications` to show system-based messages coming from the application, not in response to user action.
  * Show system notifications at the top of the page, below the navigation, and expands the full-width of the viewport
  */
-const Notification = /*#__PURE__*/forwardRef((_ref5, ref) => {
+const Notification = /*#__PURE__*/forwardRef((_ref6, ref) => {
   let {
     children,
     system,
@@ -128,13 +277,9 @@ const Notification = /*#__PURE__*/forwardRef((_ref5, ref) => {
     tokens,
     variant,
     ...rest
-  } = _ref5;
+  } = _ref6;
   const [isDismissed, setIsDismissed] = useState(false);
   const viewport = useViewport();
-  const themeTokens = useThemeTokens('Notification', tokens, variant, {
-    system,
-    viewport
-  });
   const getCopy = useCopy({
     dictionary,
     copy
@@ -142,42 +287,89 @@ const Notification = /*#__PURE__*/forwardRef((_ref5, ref) => {
   const {
     themeOptions
   } = useTheme();
-  const contentMaxWidth = useResponsiveProp(themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.contentMaxWidth);
+  const {
+    enableMediaQueryStyleSheet
+  } = themeOptions;
+  const useTokens = enableMediaQueryStyleSheet ? useResponsiveThemeTokens : useThemeTokens;
+  const themeTokens = useTokens('Notification', tokens, variant, {
+    system,
+    viewport
+  });
+  const maxWidth = useResponsiveProp(themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.contentMaxWidth);
+  const notificationComponentRef = useRef({
+    containerStyles: {},
+    contentContainerStyles: {},
+    staticContentContainerStyles: {},
+    iconContainerStyles: {},
+    dismissButtonContainerStyles: {},
+    textStyles: {},
+    selectIconPropsStyles: {},
+    selectDismissIconPropsStyles: {}
+  });
+  const mediaIdsRef = useRef({
+    containerIds: {},
+    contentContainerIds: {},
+    staticContentContainerIds: {},
+    iconContainerIds: {},
+    dismissButtonContainerIds: {},
+    textIds: {},
+    selectIconPropsIds: {},
+    selectDismissIconPropsIds: {}
+  });
+  if (enableMediaQueryStyleSheet) {
+    notificationComponentRef.current = getMediaQueryStyles(themeTokens, themeOptions, viewport, mediaIdsRef, dismissible);
+  } else {
+    notificationComponentRef.current = getDefaultStyles(themeTokens, themeOptions, maxWidth, dismissible);
+  }
   if (isDismissed) {
     return null;
   }
-  const textStyles = selectTextStyles(themeTokens, themeOptions, dismissible);
   const content = wrapStringsInText(typeof children === 'function' ? children({
-    textStyles,
+    textStyles: notificationComponentRef.current.textStyles.text,
     variant
   }) : children, {
-    style: textStyles
+    style: notificationComponentRef.current.textStyles.text
   });
   const {
     icon: IconComponent,
     dismissIcon: DismissIconComponent,
     dismissIconColor
-  } = themeTokens;
+  } = enableMediaQueryStyleSheet === false ? themeTokens : themeTokens[viewport];
   const onDismissPress = () => setIsDismissed(true);
   return /*#__PURE__*/_jsx(View, {
     ref: ref,
-    style: [staticStyles.container, selectContainerStyles(themeTokens)],
+    style: notificationComponentRef.current.containerStyles.container,
+    dataSet: mediaIdsRef && {
+      media: mediaIdsRef.current.containerIds.container
+    },
     ...selectProps(rest),
     children: /*#__PURE__*/_jsxs(View, {
-      style: [staticStyles.content, selectContentContainerStyle(contentMaxWidth)],
+      style: notificationComponentRef.current.contentContainerStyles.contentContainer,
+      dataSet: mediaIdsRef && {
+        media: mediaIdsRef.current.contentContainerIds.contentContainer
+      },
       children: [/*#__PURE__*/_jsxs(View, {
-        style: staticStyles.contentContainer,
+        style: notificationComponentRef.current.staticContentContainerStyles.staticContentContainer,
+        dataSet: mediaIdsRef && {
+          media: mediaIdsRef.current.staticContentContainerIds.staticContentContainer
+        },
         children: [IconComponent && /*#__PURE__*/_jsx(View, {
-          style: selectIconContainerStyles(themeTokens),
+          style: notificationComponentRef.current.iconContainerStyles.iconContainer,
+          dataSet: mediaIdsRef && {
+            media: mediaIdsRef.current.iconContainerIds.iconContainer
+          },
           children: /*#__PURE__*/_jsx(IconComponent, {
-            ...selectIconProps(themeTokens)
+            ...notificationComponentRef.current.selectIconPropsStyles.selectIconProps
           })
         }), content && typeof content === 'function' ? content({
-          textStyles,
+          textStyles: notificationComponentRef.current.textStyles.text,
           variant
         }) : content]
       }), dismissible && DismissIconComponent && /*#__PURE__*/_jsx(View, {
-        style: selectDismissButtonContainerStyles(themeTokens),
+        style: notificationComponentRef.current.dismissButtonContainerStyles.dismissButtonContainer,
+        dataSet: mediaIdsRef && {
+          media: mediaIdsRef.current.dismissButtonContainerIds.dismissButtonContainer
+        },
         children: /*#__PURE__*/_jsx(IconButton, {
           action: "close",
           onPress: onDismissPress,
@@ -189,7 +381,7 @@ const Notification = /*#__PURE__*/forwardRef((_ref5, ref) => {
             size: 'small'
           },
           children: () => /*#__PURE__*/_jsx(DismissIconComponent, {
-            ...selectDismissIconProps(themeTokens)
+            ...notificationComponentRef.current.selectDismissIconPropsStyles.selectDismissIconProps
           })
         })
       })]
@@ -220,18 +412,4 @@ Notification.propTypes = {
   tokens: getTokensPropType('Notification'),
   variant: variantProp.propType
 };
-export default Notification;
-const staticStyles = StyleSheet.create({
-  container: {
-    flexDirection: 'row'
-  },
-  contentContainer: {
-    flexDirection: 'row',
-    flexShrink: 1
-  },
-  content: {
-    flexDirection: 'row',
-    flexShrink: 1,
-    justifyContent: 'space-between'
-  }
-});
+export default Notification;

package/lib-module/OrderedList/OrderedList.js

@@ -5,25 +5,6 @@ import OrderedListBase from './OrderedListBase';
 import Item from './Item';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropsTypes] = selectSystemProps([htmlAttrs, viewProps]);
-const getChildrenWithParentVariants = (variant, children, start) => {
-  if (variant) return children.map((child, i) => {
-    var _child$props;
-    const existingChildVariants = ((_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.variant) ?? {};
-    return {
-      ...child,
-      props: {
-        ...child.props,
-        index: start + i,
-        isLastChild: i === children.length - 1,
-        variant: {
-          ...existingChildVariants,
-          ...variant
-        }
-      }
-    };
-  });
-  return children;
-};
 const OrderedList = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     children,
@@ -31,7 +12,27 @@ const OrderedList = /*#__PURE__*/forwardRef((_ref, ref) => {
     variant,
     ...rest
   } = _ref;
-  const childrenWithParentVariants = useMemo(() => getChildrenWithParentVariants(variant, children, start), [children, variant, start]);
+  const childrenWithParentVariants = useMemo(() => {
+    const addVariantToProps = (child, i, isLastChild) => {
+      var _child$props;
+      const existingChildVariants = ((_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.variant) ?? {};
+      return /*#__PURE__*/React.cloneElement(child, {
+        index: start + i,
+        isLastChild,
+        variant: {
+          ...existingChildVariants,
+          ...variant
+        }
+      });
+    };
+    if (variant) {
+      if (Array.isArray(children)) {
+        return children.map((child, i) => addVariantToProps(child, i, i === children.length - 1));
+      }
+      return [addVariantToProps(children, 0, true)];
+    }
+    return children;
+  }, [children, variant, start]);
   return /*#__PURE__*/_jsx(OrderedListBase, {
     ref: ref,
     ...selectProps(rest),

package/lib-module/PriceLockup/PriceLockup.js

@@ -0,0 +1,214 @@
+import React from 'react';
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import View from "react-native-web/dist/exports/View";
+import PropTypes from 'prop-types';
+import Divider from '../Divider';
+import { useViewport } from '../ViewportProvider';
+import { useThemeTokens } from '../ThemeProvider';
+import { selectSystemProps, getTokensPropType, htmlAttrs, viewProps } from '../utils';
+import renderFootnoteContent from './utils/renderFootnoteContent';
+import renderPrice from './utils/renderPrice';
+import renderTypography from './utils/renderTypography';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs, viewProps]);
+const selectTopTextTypographyTokens = _ref => {
+  let {
+    topTextFontSize,
+    topTextLineHeight
+  } = _ref;
+  return {
+    fontSize: topTextFontSize,
+    lineHeight: topTextLineHeight
+  };
+};
+const selectCurrencySymbolTypographyTokens = _ref2 => {
+  let {
+    currencySymbolFontSize,
+    currencySymbolLineHeight,
+    currencySymbolFontWeight
+  } = _ref2;
+  return {
+    fontSize: currencySymbolFontSize,
+    lineHeight: currencySymbolLineHeight,
+    fontWeight: currencySymbolFontWeight
+  };
+};
+const selectAmountTypographyTokens = _ref3 => {
+  let {
+    amountFontSize,
+    amountLineHeight,
+    amountLetterSpacing,
+    amountFontWeight,
+    fontColor
+  } = _ref3;
+  // This is used to apply the proper line height to the amount
+  const lineHeightMultiplier = 1.18;
+  return {
+    color: fontColor,
+    fontSize: amountFontSize,
+    lineHeight: amountLineHeight * lineHeightMultiplier,
+    letterSpacing: amountLetterSpacing,
+    fontWeight: amountFontWeight
+  };
+};
+const selectCentsTypographyTokens = _ref4 => {
+  let {
+    centsFontSize,
+    centsLineHeight,
+    centsFontWeight
+  } = _ref4;
+  return {
+    fontSize: centsFontSize,
+    lineHeight: centsLineHeight,
+    fontWeight: centsFontWeight
+  };
+};
+const selectRateTypographyTokens = _ref5 => {
+  let {
+    rateFontSize,
+    rateLineHeight,
+    rateFontWeight
+  } = _ref5;
+  return {
+    fontSize: rateFontSize,
+    lineHeight: rateLineHeight,
+    fontWeight: rateFontWeight
+  };
+};
+const selectBottomTextTypographyTokens = _ref6 => {
+  let {
+    bottomTextFontSize,
+    bottomTextLineHeight
+  } = _ref6;
+  return {
+    fontSize: bottomTextFontSize,
+    lineHeight: bottomTextLineHeight
+  };
+};
+const PriceLockup = _ref7 => {
+  let {
+    size = 'medium',
+    signDirection = 'left',
+    footnoteLinks,
+    topText,
+    price,
+    currencySymbol = '$',
+    rateText,
+    ratePosition = 'right',
+    bottomText,
+    onClickFootnote,
+    strikeThrough,
+    a11yText,
+    tokens: priceLockupTokens,
+    variant = {},
+    ...rest
+  } = _ref7;
+  const viewport = useViewport();
+  const {
+    footnoteMarginTop,
+    footnoteGap,
+    bottomTextMarginTop,
+    priceMarginBottom,
+    bottomLinksMarginLeft,
+    topTextMarginBottom,
+    fontColor,
+    dividerColor,
+    ...themeTokens
+  } = useThemeTokens('PriceLockup', priceLockupTokens, {
+    ...variant,
+    size
+  }, {
+    viewport,
+    strikeThrough
+  });
+  const currencySymbolTypographyTokens = selectCurrencySymbolTypographyTokens(themeTokens);
+  const amountTypographyTokens = selectAmountTypographyTokens(themeTokens);
+  const centsTypographyTokens = selectCentsTypographyTokens(themeTokens);
+  const rateTypographyTokens = selectRateTypographyTokens(themeTokens);
+  const topTextTypographyTokens = selectTopTextTypographyTokens(themeTokens);
+  const bottomTextTypographyTokens = selectBottomTextTypographyTokens(themeTokens);
+  return /*#__PURE__*/_jsxs(View, {
+    style: [staticStyles.priceLockupContainer, {
+      ...selectProps(rest)
+    }],
+    children: [topText ? /*#__PURE__*/_jsx(View, {
+      children: renderTypography(topText, topTextTypographyTokens)
+    }) : null, renderPrice(price, rateText, ratePosition, signDirection, currencySymbol, currencySymbolTypographyTokens, amountTypographyTokens, centsTypographyTokens, rateTypographyTokens, fontColor, strikeThrough, a11yText, bottomText, bottomLinksMarginLeft, footnoteLinks, onClickFootnote, themeTokens), bottomText ? /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(Divider, {
+        testID: "price-lockup-divider",
+        role: "separator",
+        tokens: {
+          color: dividerColor
+        }
+      }), renderFootnoteContent(footnoteMarginTop, bottomTextMarginTop, bottomText, bottomTextTypographyTokens, fontColor, footnoteLinks, bottomLinksMarginLeft, onClickFootnote, themeTokens)]
+    }) : null]
+  });
+};
+PriceLockup.displayName = 'PriceLockup';
+PriceLockup.propTypes = {
+  ...selectedSystemPropTypes,
+  /**
+   * Size of the component
+   *
+   * Small for pricing in product catalogue pages, medium for pricing in product comparison cards.
+   */
+  size: PropTypes.oneOf(['small', 'medium']),
+  /**
+   * If currency symbol other than `$` to be used
+   */
+  currencySymbol: PropTypes.string,
+  /**
+   * Shows additional info above the price
+   */
+  topText: PropTypes.string,
+  /**
+   * Monetary value (including decimals separated by ".")
+   */
+  price: PropTypes.string.isRequired,
+  /**
+   * Shows month/year unit
+   */
+  rateText: PropTypes.string,
+  /**
+   * Shows additional info below the price with a `Divider`
+   */
+  bottomText: PropTypes.string,
+  /**
+   * Displays which side the currency should appear (left, right)
+   */
+  signDirection: PropTypes.oneOf(['right', 'left']),
+  /**
+   * Displays where the rate should appear (bottom, right)
+   */
+  ratePosition: PropTypes.oneOf(['right', 'bottom']),
+  /**
+   * Shows additional link for context
+   */
+  footnoteLinks: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),
+  /**
+   * Function to be called when a footnote link is clicked
+   */
+  onClickFootnote: PropTypes.func,
+  /**
+   * To show price savings comparison
+   */
+  strikeThrough: PropTypes.bool,
+  /**
+   * To provide a11y text for `PriceLockup` component
+   *
+   * **Note:** a11yText will override strikethrough price, so it must include price (ie. "was 50 dollars per month")
+   */
+  a11yText: PropTypes.string,
+  /**
+   * `PriceLockup` tokens
+   */
+  tokens: getTokensPropType('PriceLockup')
+};
+export default PriceLockup;
+const staticStyles = StyleSheet.create({
+  priceLockupContainer: {
+    alignSelf: 'flex-start'
+  }
+});

package/lib-module/PriceLockup/index.js

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