@hero-design/rn 7.10.2 → 7.11.2

package/lib/index.js

@@ -1323,21 +1323,6 @@ function prefixer(element, index, children, callback) {
   }
 }
 
-var weakMemoize = function weakMemoize(func) {
-  // $FlowFixMe flow doesn't include all non-primitive types as allowed for weakmaps
-  var cache = new WeakMap();
-  return function (arg) {
-    if (cache.has(arg)) {
-      // $FlowFixMe
-      return cache.get(arg);
-    }
-
-    var ret = func(arg);
-    cache.set(arg, ret);
-    return ret;
-  };
-};
-
 var identifierWithPointTracking = function identifierWithPointTracking(begin, points, index) {
   var previous = 0;
   var character = 0;
@@ -1575,6 +1560,21 @@ function _extends$2() {
   return _extends$2.apply(this, arguments);
 }
 
+var weakMemoize = function weakMemoize(func) {
+  // $FlowFixMe flow doesn't include all non-primitive types as allowed for weakmaps
+  var cache = new WeakMap();
+  return function (arg) {
+    if (cache.has(arg)) {
+      // $FlowFixMe
+      return cache.get(arg);
+    }
+
+    var ret = func(arg);
+    cache.set(arg, ret);
+    return ret;
+  };
+};
+
 var EmotionCacheContext = /* #__PURE__ */React.createContext( // we're doing this to avoid preconstruct's dead code elimination in this one case
 // because this module is primarily intended for the browser and node
 // but it's also required in react native and similar environments sometimes
@@ -2740,7 +2740,8 @@ var getSpace = function getSpace(baseSpace) {
     xlarge: scale(baseSpace * 4),
     xxlarge: scale(baseSpace * 5),
     xxxlarge: scale(baseSpace * 6),
-    xxxxlarge: scale(baseSpace * 7)
+    xxxxlarge: scale(baseSpace * 7) // 56
+
   };
 };
 
@@ -3189,6 +3190,96 @@ var getIconTheme = function getIconTheme(theme) {
   };
 };
 
+var getListTheme = function getListTheme(theme) {
+  var colors = {
+    checkedListItemContainerBackground: theme.colors.primaryBackground,
+    listItemContainerBackground: theme.colors.platformBackground,
+    leadingStatus: {
+      danger: theme.colors.danger,
+      info: theme.colors.infoLight,
+      success: theme.colors.successDark,
+      warning: theme.colors.warningLight,
+      archived: theme.colors.archived
+    }
+  };
+  var space = {
+    listItemContainerPadding: theme.space.medium,
+    leadingStatusMarginRight: theme.space.small,
+    prefixContainerMarginRight: theme.space.small,
+    suffixContainerMarginLeft: theme.space.small
+  };
+  var radii = {
+    card: theme.radii.medium,
+    cardShadow: theme.radii.base,
+    leadingStatus: theme.radii.rounded
+  };
+  var offsets = {
+    cardShadow: {
+      width: 0,
+      height: 2
+    }
+  };
+  var widths = {
+    leadingStatus: 8
+  };
+  var opacity = {
+    disabled: 0.38,
+    enabled: 1,
+    cardShadow: 1
+  };
+  return {
+    colors: colors,
+    space: space,
+    radii: radii,
+    offsets: offsets,
+    widths: widths,
+    opacity: opacity
+  };
+};
+
+var getPinInputTheme = function getPinInputTheme(theme) {
+  var borderWidths = {
+    "default": theme.borderWidths.base,
+    focused: theme.borderWidths.medium
+  };
+  var colors = {
+    "default": theme.colors.text,
+    mask: theme.colors.subduedText,
+    error: theme.colors.danger,
+    disabled: theme.colors.archivedDark
+  };
+  var fonts = {
+    cellText: theme.fonts.semiBold,
+    errorMessage: theme.fonts.regular
+  };
+  var fontSizes = {
+    cellText: theme.fontSizes.xxxxlarge,
+    errorMessage: theme.fontSizes.small
+  };
+  var sizes = {
+    cellWidth: theme.space.xxlarge,
+    cellHeight: theme.space.xxxlarge,
+    mask: theme.space.medium
+  };
+  var space = {
+    spacer: theme.space.medium,
+    errorMessagePadding: theme.space.xsmall
+  };
+  var radii = {
+    cell: theme.radii.medium,
+    mask: theme.radii.rounded
+  };
+  return {
+    borderWidths: borderWidths,
+    colors: colors,
+    fonts: fonts,
+    fontSizes: fontSizes,
+    sizes: sizes,
+    space: space,
+    radii: radii
+  };
+};
+
 var getProgressTheme = function getProgressTheme(theme) {
   var colors = {
     primary: theme.colors.primary,
@@ -3574,13 +3665,15 @@ var getTypographyTheme = function getTypographyTheme(theme) {
     small: theme.fontSizes.small,
     medium: theme.fontSizes.medium,
     large: theme.fontSizes.large,
-    xlarge: theme.fontSizes.xlarge
+    xlarge: theme.fontSizes.xlarge,
+    xxxxxlarge: theme.fontSizes.xxxxxlarge
   };
   var lineHeights = {
     small: theme.lineHeights.small,
     medium: theme.lineHeights.medium,
     large: theme.lineHeights.large,
-    xlarge: theme.lineHeights.xlarge
+    xlarge: theme.lineHeights.xlarge,
+    xxxxxlarge: theme.lineHeights.xxxxxlarge
   };
   return {
     colors: colors,
@@ -3590,53 +3683,6 @@ var getTypographyTheme = function getTypographyTheme(theme) {
   };
 };
 
-var getListTheme = function getListTheme(theme) {
-  var colors = {
-    checkedListItemContainerBackground: theme.colors.primaryBackground,
-    listItemContainerBackground: theme.colors.platformBackground,
-    leadingStatus: {
-      danger: theme.colors.danger,
-      info: theme.colors.infoLight,
-      success: theme.colors.successDark,
-      warning: theme.colors.warningLight,
-      archived: theme.colors.archived
-    }
-  };
-  var space = {
-    listItemContainerPadding: theme.space.medium,
-    leadingStatusMarginRight: theme.space.small,
-    prefixContainerMarginRight: theme.space.small,
-    suffixContainerMarginLeft: theme.space.small
-  };
-  var radii = {
-    card: theme.radii.medium,
-    cardShadow: theme.radii.base,
-    leadingStatus: theme.radii.rounded
-  };
-  var offsets = {
-    cardShadow: {
-      width: 0,
-      height: 2
-    }
-  };
-  var widths = {
-    leadingStatus: 8
-  };
-  var opacity = {
-    disabled: 0.38,
-    enabled: 1,
-    cardShadow: 1
-  };
-  return {
-    colors: colors,
-    space: space,
-    radii: radii,
-    offsets: offsets,
-    widths: widths,
-    opacity: opacity
-  };
-};
-
 var getTheme = function getTheme() {
   var scale = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : scale$1;
   var systemPallete = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : systemPalette;
@@ -3656,6 +3702,8 @@ var getTheme = function getTheme() {
       drawer: getDrawerTheme(globalTheme),
       fab: getFABTheme(globalTheme),
       icon: getIconTheme(globalTheme),
+      list: getListTheme(globalTheme),
+      pinInput: getPinInputTheme(globalTheme),
       progress: getProgressTheme(globalTheme),
       radio: getRadioTheme(globalTheme),
       sectionHeading: getSectionHeadingTheme(globalTheme),
@@ -3667,8 +3715,7 @@ var getTheme = function getTheme() {
       textInput: getTextInputTheme(globalTheme),
       toast: getToastTheme(globalTheme),
       toolbar: getToolbarTheme(globalTheme),
-      typography: getTypographyTheme(globalTheme),
-      list: getListTheme(globalTheme)
+      typography: getTypographyTheme(globalTheme)
     }
   });
 };
@@ -16129,7 +16176,7 @@ var Divider = function Divider(_ref) {
 };
 
 var AnimatedPressable$1 = ReactNative.Animated.createAnimatedComponent(ReactNative.Pressable);
-var StyledWrapper$5 = index$5(ReactNative.View)(_objectSpread2(_objectSpread2({}, ReactNative.StyleSheet.absoluteFillObject), {}, {
+var StyledWrapper$6 = index$5(ReactNative.View)(_objectSpread2(_objectSpread2({}, ReactNative.StyleSheet.absoluteFillObject), {}, {
   flexDirection: 'column-reverse'
 }));
 var StyledBottomSheet = index$5(ReactNative.Animated.View)(function (_ref) {
@@ -16891,7 +16938,7 @@ var BottomSheet = function BottomSheet(_ref) {
     transparent: true,
     testID: testID,
     onShow: onOpen
-  }, /*#__PURE__*/React__default["default"].createElement(StyledWrapper$5, {
+  }, /*#__PURE__*/React__default["default"].createElement(StyledWrapper$6, {
     pointerEvents: "box-none"
   }, /*#__PURE__*/React__default["default"].createElement(StyledBackdrop$2, {
     style: {
@@ -16999,7 +17046,7 @@ var index$4 = Object.assign(Card, {
   Data: DataCard
 });
 
-var StyledWrapper$4 = index$5(ReactNative.Animated.View)(function () {
+var StyledWrapper$5 = index$5(ReactNative.Animated.View)(function () {
   return {
     margin: 0,
     padding: 0,
@@ -17059,7 +17106,7 @@ var Collapse = function Collapse(_ref) {
     var height = _ref2.height;
     setContentHeight(height);
   }, [contentHeight]);
-  return /*#__PURE__*/React__default["default"].createElement(StyledWrapper$4, {
+  return /*#__PURE__*/React__default["default"].createElement(StyledWrapper$5, {
     style: [style, {
       height: collapseAnim
     }],
@@ -17071,7 +17118,7 @@ var Collapse = function Collapse(_ref) {
   }, children)));
 };
 
-var StyledWrapper$3 = index$5(ReactNative.TouchableOpacity)(function (_ref) {
+var StyledWrapper$4 = index$5(ReactNative.TouchableOpacity)(function (_ref) {
   var theme = _ref.theme,
       disabled = _ref.disabled;
   return {
@@ -17093,7 +17140,7 @@ var CheckBox = function CheckBox(_ref) {
       onPress = _ref.onPress,
       style = _ref.style,
       testID = _ref.testID;
-  return /*#__PURE__*/React__default["default"].createElement(StyledWrapper$3, {
+  return /*#__PURE__*/React__default["default"].createElement(StyledWrapper$4, {
     onPress: onPress,
     disabled: disabled,
     style: style,
@@ -17482,10 +17529,14 @@ var ActionGroup = function ActionGroup(_ref2) {
     inputRange: [0, 1],
     outputRange: [400, 0]
   });
-  var interpolatedOpacityAnimation = tranlateXAnimation.current.interpolate({
+  var interpolatedBackdropOpacityAnimation = tranlateXAnimation.current.interpolate({
     inputRange: [0, 1],
     outputRange: [0, 0.9]
   });
+  var interpolatedActionGroupOpacityAnimation = tranlateXAnimation.current.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0, 1]
+  });
   return /*#__PURE__*/React__default["default"].createElement(StyledContainer$1, {
     testID: testID,
     pointerEvents: "box-none",
@@ -17494,11 +17545,13 @@ var ActionGroup = function ActionGroup(_ref2) {
     pointerEvents: active ? 'auto' : 'box-none',
     testID: "back-drop",
     style: {
-      opacity: interpolatedOpacityAnimation
+      opacity: interpolatedBackdropOpacityAnimation
     }
   }), /*#__PURE__*/React__default["default"].createElement(StyledActionGroupContainer, {
+    pointerEvents: active ? 'auto' : 'none',
     testID: "action-group",
     style: {
+      opacity: interpolatedActionGroupOpacityAnimation,
       transform: [{
         translateX: interpolatedTranlateXAnimation
       }]
@@ -17710,6 +17763,227 @@ var List = {
   BasicItem: BasicListItem
 };
 
+var StyledWrapper$3 = index$5(ReactNative.View)(function () {
+  return {
+    alignContent: 'flex-start'
+  };
+});
+var StyledPinWrapper = index$5(ReactNative.View)(function () {
+  return {
+    flexDirection: 'row'
+  };
+});
+var StyledCell = index$5(ReactNative.View)(function (_ref) {
+  var theme = _ref.theme,
+      themeFocused = _ref.themeFocused,
+      themeState = _ref.themeState;
+  return {
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: theme.__hd__.pinInput.sizes.cellWidth,
+    height: theme.__hd__.pinInput.sizes.cellHeight,
+    borderWidth: themeFocused ? theme.__hd__.pinInput.borderWidths.focused : theme.__hd__.pinInput.borderWidths["default"],
+    borderRadius: theme.__hd__.pinInput.radii.cell,
+    borderColor: theme.__hd__.pinInput.colors[themeState]
+  };
+});
+var StyledCellText = index$5(ReactNative.Text)(function (_ref2) {
+  var theme = _ref2.theme,
+      themeState = _ref2.themeState;
+  return {
+    fontFamily: theme.__hd__.pinInput.fonts.cellText,
+    fontSize: theme.__hd__.pinInput.fontSizes.cellText,
+    color: theme.__hd__.pinInput.colors[themeState]
+  };
+});
+var StyledSpacer = index$5(ReactNative.View)(function (_ref3) {
+  var theme = _ref3.theme;
+  return {
+    marginLeft: theme.__hd__.pinInput.space.spacer
+  };
+});
+var StyledMask = index$5(ReactNative.View)(function (_ref4) {
+  var theme = _ref4.theme,
+      themeState = _ref4.themeState;
+  return {
+    width: theme.__hd__.pinInput.sizes.mask,
+    height: theme.__hd__.pinInput.sizes.mask,
+    borderWidth: theme.__hd__.pinInput.borderWidths["default"],
+    borderRadius: theme.__hd__.pinInput.radii.mask,
+    borderColor: theme.__hd__.pinInput.colors[themeState]
+  };
+});
+var StyledFilledMask = index$5(ReactNative.View)(function (_ref5) {
+  var theme = _ref5.theme,
+      themeState = _ref5.themeState;
+  return {
+    width: theme.__hd__.pinInput.sizes.mask,
+    height: theme.__hd__.pinInput.sizes.mask,
+    borderWidth: theme.__hd__.pinInput.borderWidths["default"],
+    borderRadius: theme.__hd__.pinInput.radii.mask,
+    borderColor: theme.__hd__.pinInput.colors[themeState],
+    backgroundColor: theme.__hd__.pinInput.colors[themeState]
+  };
+});
+var StyledHiddenInput = index$5(ReactNative.TextInput)(function (_ref6) {
+  var themePinLength = _ref6.themePinLength,
+      theme = _ref6.theme;
+  var cellWidth = theme.__hd__.pinInput.sizes.cellWidth;
+  var spacerWidth = theme.__hd__.pinInput.space.spacer;
+  return {
+    position: 'absolute',
+    opacity: 0,
+    left: 0,
+    top: 0,
+    width: themePinLength * cellWidth + (themePinLength - 1) * spacerWidth,
+    height: '100%'
+  };
+});
+var StyledErrorContainer$1 = index$5(ReactNative.View)(function (_ref7) {
+  var theme = _ref7.theme;
+  return {
+    flexDirection: 'row',
+    paddingTop: theme.__hd__.pinInput.space.errorMessagePadding
+  };
+});
+var StyledErrorMessage = index$5(ReactNative.Text)(function (_ref8) {
+  var theme = _ref8.theme;
+  return {
+    fontFamily: theme.__hd__.pinInput.fonts.errorMessage,
+    fontSize: theme.__hd__.pinInput.fontSizes.errorMessage,
+    color: theme.__hd__.pinInput.colors.error,
+    paddingLeft: theme.__hd__.pinInput.space.errorMessagePadding
+  };
+});
+
+function PinCell(_ref) {
+  var value = _ref.value,
+      _ref$secure = _ref.secure,
+      secure = _ref$secure === void 0 ? true : _ref$secure,
+      _ref$focused = _ref.focused,
+      focused = _ref$focused === void 0 ? false : _ref$focused,
+      _ref$state = _ref.state,
+      state = _ref$state === void 0 ? 'default' : _ref$state;
+  return /*#__PURE__*/React__default["default"].createElement(StyledCell, {
+    themeFocused: focused,
+    themeState: state
+  }, value === '' && /*#__PURE__*/React__default["default"].createElement(StyledMask, {
+    themeState: state,
+    testID: "pin-cell-mask"
+  }), value !== '' && secure && /*#__PURE__*/React__default["default"].createElement(StyledFilledMask, {
+    themeState: state,
+    testID: "pin-cell-filled-mask"
+  }), value !== '' && !secure && /*#__PURE__*/React__default["default"].createElement(StyledCellText, {
+    themeState: state
+  }, value));
+}
+
+function getState(_ref) {
+  var disabled = _ref.disabled,
+      error = _ref.error;
+
+  if (disabled) {
+    return 'disabled';
+  }
+
+  if (error) {
+    return 'error';
+  }
+
+  return 'default';
+}
+
+function PinInput(_ref2) {
+  var _ref2$value = _ref2.value,
+      value = _ref2$value === void 0 ? '' : _ref2$value,
+      onChangeText = _ref2.onChangeText,
+      onFulfill = _ref2.onFulfill,
+      _ref2$length = _ref2.length,
+      length = _ref2$length === void 0 ? 4 : _ref2$length,
+      _ref2$disabled = _ref2.disabled,
+      disabled = _ref2$disabled === void 0 ? false : _ref2$disabled,
+      _ref2$secure = _ref2.secure,
+      secure = _ref2$secure === void 0 ? true : _ref2$secure,
+      _ref2$autoFocus = _ref2.autoFocus,
+      autoFocus = _ref2$autoFocus === void 0 ? false : _ref2$autoFocus,
+      error = _ref2.error,
+      style = _ref2.style,
+      testID = _ref2.testID;
+  var inputRef = React.useRef(null);
+
+  var _useState = React.useState(autoFocus),
+      _useState2 = _slicedToArray(_useState, 2),
+      focused = _useState2[0],
+      setFocused = _useState2[1];
+
+  var state = getState({
+    disabled: disabled,
+    error: error
+  });
+  var focus = React.useCallback(function () {
+    if (inputRef !== null && inputRef !== void 0 && inputRef.current) {
+      inputRef.current.focus();
+      setFocused(true);
+    }
+  }, []);
+  var blur = React.useCallback(function () {
+    if (inputRef !== null && inputRef !== void 0 && inputRef.current) {
+      inputRef.current.blur();
+      setFocused(false);
+    }
+  }, []);
+  var changeText = React.useCallback(function (text) {
+    var pin = (text.match(/[0-9]/g) || []).join('');
+
+    if (onChangeText) {
+      onChangeText(pin);
+    }
+
+    if (pin.length === length && onFulfill) {
+      onFulfill(pin);
+    }
+  }, []);
+  React.useEffect(function () {
+    // Must run after animations for keyboard to automatically open
+    if (autoFocus) {
+      ReactNative.InteractionManager.runAfterInteractions(focus);
+    }
+  }, [inputRef]);
+  return /*#__PURE__*/React__default["default"].createElement(StyledWrapper$3, {
+    style: style,
+    testID: testID
+  }, /*#__PURE__*/React__default["default"].createElement(StyledPinWrapper, null, _toConsumableArray$1(Array(length).keys()).map(function (index) {
+    return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
+      key: index
+    }, index !== 0 && /*#__PURE__*/React__default["default"].createElement(StyledSpacer, null), /*#__PURE__*/React__default["default"].createElement(PinCell, {
+      value: value.charAt(index),
+      secure: secure,
+      focused: focused && index === value.length,
+      state: state
+    }));
+  })), state === 'error' && /*#__PURE__*/React__default["default"].createElement(StyledErrorContainer$1, null, /*#__PURE__*/React__default["default"].createElement(Icon, {
+    icon: "circle-info",
+    size: "xsmall",
+    intent: "danger",
+    testID: "pin-error-icon"
+  }), /*#__PURE__*/React__default["default"].createElement(StyledErrorMessage, null, error)), /*#__PURE__*/React__default["default"].createElement(StyledHiddenInput, {
+    themePinLength: length,
+    ref: inputRef,
+    value: value,
+    onChangeText: changeText,
+    secureTextEntry: secure,
+    editable: !disabled,
+    autoFocus: autoFocus,
+    onFocus: focus,
+    onBlur: blur,
+    maxLength: length,
+    keyboardType: "numeric",
+    contextMenuHidden: true,
+    caretHidden: true,
+    testID: "pin-hidden-input"
+  }));
+}
+
 var HalfCircleWrapper = index$5(ReactNative.View)(function (_ref) {
   var theme = _ref.theme;
   return {
@@ -18565,7 +18839,7 @@ var TextInput = function TextInput(_ref2) {
   }, required && /*#__PURE__*/React__default["default"].createElement(StyledAsteriskLabel, {
     themeVariant: variant,
     fontSize: "small"
-  }, "*"), /*#__PURE__*/React__default["default"].createElement(StyledLabel, {
+  }, "*"), !!label && /*#__PURE__*/React__default["default"].createElement(StyledLabel, {
     nativeID: accessibilityLabelledBy,
     testID: "input-label",
     fontSize: "small",
@@ -18579,7 +18853,7 @@ var TextInput = function TextInput(_ref2) {
     pointerEvents: "none"
   }, required && /*#__PURE__*/React__default["default"].createElement(StyledAsteriskLabelInsideTextInput, {
     themeVariant: variant
-  }, "*"), /*#__PURE__*/React__default["default"].createElement(StyledLabelInsideTextInput, {
+  }, "*"), !!label && /*#__PURE__*/React__default["default"].createElement(StyledLabelInsideTextInput, {
     nativeID: accessibilityLabelledBy,
     testID: "input-label",
     fontSize: "medium",
@@ -19957,6 +20231,7 @@ exports.Drawer = Drawer;
 exports.FAB = index$3;
 exports.Icon = Icon;
 exports.List = List;
+exports.PinInput = PinInput;
 exports.Progress = Progress;
 exports.Radio = CompoundRadio;
 exports.SectionHeading = SectionHeading;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "7.10.2",
+  "version": "7.11.2",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -21,7 +21,7 @@
   "dependencies": {
     "@emotion/native": "^11.9.3",
     "@emotion/react": "^11.9.3",
-    "@hero-design/colors": "7.10.2"
+    "@hero-design/colors": "7.11.2"
   },
   "peerDependencies": {
     "react": "17.0.2",

package/src/components/FAB/ActionGroup/__tests__/__snapshots__/index.spec.tsx.snap

@@ -38,10 +38,12 @@ exports[`ActionGroup has active false 1`] = `
   <View
     collapsable={false}
     nativeID="animatedComponent"
+    pointerEvents="none"
     style={
       Object {
         "alignItems": "flex-end",
         "justifyContent": "flex-end",
+        "opacity": 0,
         "transform": Array [
           Object {
             "translateX": 400,
@@ -568,10 +570,12 @@ exports[`ActionGroup has active true 1`] = `
   <View
     collapsable={false}
     nativeID="animatedComponent"
+    pointerEvents="auto"
     style={
       Object {
         "alignItems": "flex-end",
         "justifyContent": "flex-end",
+        "opacity": 1,
         "transform": Array [
           Object {
             "translateX": 0,

package/src/components/FAB/ActionGroup/index.tsx

@@ -88,21 +88,32 @@ const ActionGroup = ({
       outputRange: [400, 0],
     }
   );
-  const interpolatedOpacityAnimation = tranlateXAnimation.current.interpolate({
-    inputRange: [0, 1],
-    outputRange: [0, 0.9],
-  });
+  const interpolatedBackdropOpacityAnimation = tranlateXAnimation.current.interpolate(
+    {
+      inputRange: [0, 1],
+      outputRange: [0, 0.9],
+    }
+  );
+
+  const interpolatedActionGroupOpacityAnimation = tranlateXAnimation.current.interpolate(
+    {
+      inputRange: [0, 1],
+      outputRange: [0, 1],
+    }
+  );
 
   return (
     <StyledContainer testID={testID} pointerEvents="box-none" style={style}>
       <StyledBackdrop
         pointerEvents={active ? 'auto' : 'box-none'}
         testID="back-drop"
-        style={{ opacity: interpolatedOpacityAnimation }}
+        style={{ opacity: interpolatedBackdropOpacityAnimation }}
       />
       <StyledActionGroupContainer
+        pointerEvents={active ? 'auto' : 'none'}
         testID="action-group"
         style={{
+          opacity: interpolatedActionGroupOpacityAnimation,
           transform: [{ translateX: interpolatedTranlateXAnimation }],
         }}
       >

package/src/components/PinInput/PinCell.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import {
+  State,
+  StyledCell,
+  StyledCellText,
+  StyledFilledMask,
+  StyledMask,
+} from './StyledPinInput';
+
+function PinCell({
+  value,
+  secure = true,
+  focused = false,
+  state = 'default',
+}: {
+  value: string;
+  secure?: boolean;
+  focused?: boolean;
+  state?: State;
+}) {
+  return (
+    <StyledCell themeFocused={focused} themeState={state}>
+      {value === '' && <StyledMask themeState={state} testID="pin-cell-mask" />}
+      {value !== '' && secure && (
+        <StyledFilledMask themeState={state} testID="pin-cell-filled-mask" />
+      )}
+      {value !== '' && !secure && (
+        <StyledCellText themeState={state}>{value}</StyledCellText>
+      )}
+    </StyledCell>
+  );
+}
+
+export default PinCell;