@pagopa/io-app-design-system 1.36.15 → 1.38.0

package/src/components/searchInput/SearchInput.tsx

@@ -0,0 +1,308 @@
+/* eslint-disable functional/immutable-data */
+import React, { useCallback, useMemo, useRef, useState } from "react";
+import {
+  ColorValue,
+  Dimensions,
+  GestureResponderEvent,
+  LayoutChangeEvent,
+  LayoutRectangle,
+  Platform,
+  Pressable,
+  StyleSheet,
+  TextInput,
+  TextInputProps,
+  View
+} from "react-native";
+import Animated, {
+  Easing,
+  Extrapolate,
+  interpolate,
+  interpolateColor,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming
+} from "react-native-reanimated";
+import { WithTestID } from "src/utils/types";
+import {
+  IOColors,
+  IOSpacingScale,
+  IOVisualCostants,
+  useIOExperimentalDesign,
+  useIOTheme
+} from "../../core";
+import { makeFontStyleObject } from "../../utils/fonts";
+import { ButtonLink } from "../buttons";
+import { IOIconSizeScale, Icon } from "../icons";
+
+/* Component visual attributes */
+const inputPaddingHorizontal: IOSpacingScale = 12;
+const inputPaddingClearButton: IOSpacingScale = 8;
+const inputRadius: number = 8;
+const inputBgColorDefault: ColorValue = IOColors["grey-50"];
+const inputBgColorFocused: ColorValue = IOColors["grey-100"];
+const inputColorPlaceholder: ColorValue = IOColors["grey-700"];
+const iconMargin: IOSpacingScale = 8;
+const iconColor: IOColors = "grey-700";
+const iconSize: IOIconSizeScale = 16;
+const iconCloseSize: IOIconSizeScale = 24;
+const inputFontSizePlaceholder: number = 12;
+const cancelButtonMargin: IOSpacingScale = 16;
+const inputTransitionDuration: number = 250;
+const inputHeightIOS: number = 36;
+const inputHeightAndroid: number = 42;
+
+type SearchInputPressableProps = {
+  onPress: (event: GestureResponderEvent) => void;
+};
+
+type SearchInputActionProps =
+  | {
+      pressable: SearchInputPressableProps;
+      onChangeText?: never;
+      value?: never;
+    }
+  | {
+      pressable?: never;
+      onChangeText: (value: string) => void;
+      value: string;
+    };
+
+type SearchInputProps = WithTestID<{
+  accessibilityLabel: TextInputProps["accessibilityLabel"];
+  cancelButtonLabel: string;
+  clearAccessibilityLabel: string;
+  placeholder: TextInputProps["placeholder"];
+  autoFocus?: TextInputProps["autoFocus"];
+}> &
+  SearchInputActionProps;
+
+const AnimatedTextInput = Animated.createAnimatedComponent(TextInput);
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+
+const inputWithTimingConfig = {
+  duration: inputTransitionDuration,
+  easing: Easing.inOut(Easing.cubic)
+};
+
+export const SearchInput = ({
+  accessibilityLabel,
+  cancelButtonLabel,
+  clearAccessibilityLabel,
+  onChangeText,
+  placeholder,
+  value = "",
+  autoFocus,
+  pressable,
+  testID
+}: SearchInputProps) => {
+  const searchInputRef = useRef<TextInput>(null);
+
+  /* Component visual attributes */
+  const theme = useIOTheme();
+  const { isExperimental } = useIOExperimentalDesign();
+  const inputCaretColor = IOColors[theme["interactiveElem-default"]];
+
+  /* Widths used for the transition:
+     - `SearchInput` entire width
+     - `Cancel` button */
+  const inputWidth: number = useMemo(
+    () =>
+      Dimensions.get("window").width - IOVisualCostants.appMarginDefault * 2,
+    []
+  );
+
+  const [cancelButtonWidth, setCancelButtonWidth] =
+    useState<LayoutRectangle["width"]>(0);
+
+  const getCancelButtonWidth = ({ nativeEvent }: LayoutChangeEvent) => {
+    setCancelButtonWidth(nativeEvent.layout.width);
+  };
+
+  const inputWidthWithCancel: number = useMemo(
+    () => inputWidth - cancelButtonWidth,
+    [inputWidth, cancelButtonWidth]
+  );
+
+  /* Reanimated styles */
+  const inputAnimatedWidth = useSharedValue<number>(inputWidth);
+  const isFocused = useSharedValue(0);
+
+  /* Applied to the `SearchInput` */
+  const animatedStyle = useAnimatedStyle(() => ({
+    width: withTiming(inputAnimatedWidth.value, inputWithTimingConfig),
+    backgroundColor: interpolateColor(
+      isFocused.value,
+      [0, 1],
+      [inputBgColorDefault, inputBgColorFocused]
+    )
+  }));
+
+  /* Applied to the `Cancel` button */
+  const cancelButtonAnimatedStyle = useAnimatedStyle(() => ({
+    transform: [
+      {
+        translateX: interpolate(
+          isFocused.value,
+          [0, 1],
+          [cancelButtonWidth + IOVisualCostants.appMarginDefault, 0],
+          Extrapolate.CLAMP
+        )
+      }
+    ],
+    opacity: interpolate(isFocused.value, [0, 1], [0.5, 1])
+  }));
+
+  /* Applied to the `Clear` button inside the `SearchInput` */
+  const clearButtonAnimatedStyle = useAnimatedStyle(() => {
+    const showClearButton = value.length > 0;
+
+    return {
+      transform: [
+        {
+          scale: showClearButton
+            ? withTiming(1, inputWithTimingConfig)
+            : withTiming(0.5, inputWithTimingConfig)
+        }
+      ],
+      opacity: withTiming(showClearButton ? 1 : 0, inputWithTimingConfig)
+    };
+  }, [value]);
+
+  /* Related event handlers */
+  const handleFocus = () => {
+    isFocused.value = withTiming(1, inputWithTimingConfig);
+    inputAnimatedWidth.value = inputWidthWithCancel;
+  };
+
+  const handleBlur = () => {
+    isFocused.value = withTiming(0, inputWithTimingConfig);
+    inputAnimatedWidth.value = inputWidth;
+  };
+
+  const cancel = useCallback(() => {
+    onChangeText?.("");
+    searchInputRef.current?.clear();
+    searchInputRef.current?.blur();
+  }, [onChangeText]);
+
+  const clear = useCallback(() => {
+    onChangeText?.("");
+    searchInputRef.current?.clear();
+  }, [onChangeText]);
+
+  const handleChangeText = useCallback(
+    (text: string) => onChangeText?.(text),
+    [onChangeText]
+  );
+
+  const renderSearchBar = () => (
+    <Animated.View style={styles.searchBar}>
+      <Animated.View
+        style={[styles.searchInput, animatedStyle]}
+        pointerEvents={pressable ? "none" : "auto"}
+      >
+        <View style={styles.iconContainer}>
+          <Icon name="search" size={iconSize} color={iconColor} />
+        </View>
+        <AnimatedTextInput
+          testID={testID}
+          ref={searchInputRef}
+          inputMode="search"
+          returnKeyType="search"
+          accessibilityRole={"search"}
+          accessibilityLabel={accessibilityLabel}
+          style={[
+            styles.textInput,
+            Platform.OS === "ios"
+              ? styles.textInputIOS
+              : styles.textInputAndroid,
+            isExperimental ? styles.placeholder : styles.placeholderLegacy
+          ]}
+          selectionColor={inputCaretColor}
+          cursorColor={inputCaretColor}
+          placeholder={placeholder}
+          placeholderTextColor={inputColorPlaceholder}
+          onFocus={handleFocus}
+          onBlur={handleBlur}
+          onChangeText={handleChangeText}
+          value={value}
+          autoFocus={autoFocus}
+        />
+        <AnimatedPressable
+          style={[styles.clearButton, clearButtonAnimatedStyle]}
+          onPress={clear}
+          accessibilityLabel={clearAccessibilityLabel}
+          accessibilityRole="button"
+          hitSlop={16}
+        >
+          <Icon name="closeSmall" size={iconCloseSize} color={iconColor} />
+        </AnimatedPressable>
+      </Animated.View>
+      <Animated.View
+        onLayout={getCancelButtonWidth}
+        style={[styles.cancelButton, cancelButtonAnimatedStyle]}
+      >
+        <ButtonLink label={cancelButtonLabel} onPress={cancel} />
+      </Animated.View>
+    </Animated.View>
+  );
+
+  return pressable ? (
+    <Pressable
+      accessibilityRole="button"
+      accessibilityLabel={placeholder}
+      onPress={pressable?.onPress}
+    >
+      {renderSearchBar()}
+    </Pressable>
+  ) : (
+    renderSearchBar()
+  );
+};
+
+const styles = StyleSheet.create({
+  searchBar: {
+    width: "100%",
+    flexDirection: "row",
+    justifyContent: "flex-start",
+    alignItems: "center"
+  },
+  searchInput: {
+    flexShrink: 0,
+    borderRadius: inputRadius,
+    borderCurve: "continuous",
+    flexDirection: "row",
+    alignItems: "center",
+    paddingLeft: inputPaddingHorizontal,
+    paddingRight: inputPaddingClearButton
+  },
+  textInput: {
+    flexShrink: 1,
+    flexGrow: 1
+  },
+  textInputIOS: {
+    height: inputHeightIOS
+  },
+  textInputAndroid: {
+    height: inputHeightAndroid
+  },
+  iconContainer: {
+    marginRight: iconMargin
+  },
+  placeholder: {
+    fontSize: inputFontSizePlaceholder,
+    ...makeFontStyleObject("Regular", false, "ReadexPro")
+  },
+  placeholderLegacy: {
+    fontSize: inputFontSizePlaceholder,
+    ...makeFontStyleObject("Regular", false, "TitilliumWeb")
+  },
+  cancelButton: {
+    position: "absolute",
+    right: 0,
+    paddingLeft: cancelButtonMargin
+  },
+  clearButton: {
+    marginLeft: iconMargin
+  }
+});

package/src/components/searchInput/index.tsx

@@ -0,0 +1 @@
+export * from "./SearchInput";

package/src/images.d.ts

@@ -0,0 +1,5 @@
+declare module "*.png" {
+  import { ImageRequireSource } from "react-native";
+  const value: ImageRequireSource;
+  export = value;
+}

package/lib/commonjs/components/endOfPage/EndOfPage.js

@@ -1,36 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.EndOfPage = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _reactNative = require("react-native");
-var _spacer = require("../spacer");
-var _buttons = require("../buttons");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-const EndOfPage = _ref => {
-  let {
-    primaryAction,
-    secondaryAction
-  } = _ref;
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_spacer.VSpacer, {
-    size: 32
-  }), primaryAction ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_buttons.ButtonSolid, _extends({}, primaryAction.props, {
-    fullWidth: true
-  })), secondaryAction && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_spacer.VSpacer, {
-    size: 16
-  }), /*#__PURE__*/_react.default.createElement(_spacer.VSpacer, {
-    size: 4
-  }), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: {
-      justifyContent: "center",
-      flexDirection: "row"
-    }
-  }, /*#__PURE__*/_react.default.createElement(_buttons.ButtonLink, secondaryAction.props)))) : /*#__PURE__*/_react.default.createElement(_spacer.VSpacer, {
-    size: 32
-  }));
-};
-exports.EndOfPage = EndOfPage;
-//# sourceMappingURL=EndOfPage.js.map

package/lib/commonjs/components/endOfPage/EndOfPage.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_spacer","_buttons","obj","__esModule","default","_extends","Object","assign","bind","target","i","arguments","length","source","key","prototype","hasOwnProperty","call","apply","EndOfPage","_ref","primaryAction","secondaryAction","createElement","Fragment","VSpacer","size","ButtonSolid","props","fullWidth","View","style","justifyContent","flexDirection","ButtonLink","exports"],"sourceRoot":"../../../../src","sources":["components/endOfPage/EndOfPage.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AACA,IAAAE,OAAA,GAAAF,OAAA;AACA,IAAAG,QAAA,GAAAH,OAAA;AAKoB,SAAAD,uBAAAK,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAAA,SAAAG,SAAA,IAAAA,QAAA,GAAAC,MAAA,CAAAC,MAAA,GAAAD,MAAA,CAAAC,MAAA,CAAAC,IAAA,eAAAC,MAAA,aAAAC,CAAA,MAAAA,CAAA,GAAAC,SAAA,CAAAC,MAAA,EAAAF,CAAA,UAAAG,MAAA,GAAAF,SAAA,CAAAD,CAAA,YAAAI,GAAA,IAAAD,MAAA,QAAAP,MAAA,CAAAS,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAJ,MAAA,EAAAC,GAAA,KAAAL,MAAA,CAAAK,GAAA,IAAAD,MAAA,CAAAC,GAAA,gBAAAL,MAAA,YAAAJ,QAAA,CAAAa,KAAA,OAAAP,SAAA;AA0Bb,MAAMQ,SAAS,GAAGC,IAAA;EAAA,IAAC;IAAEC,aAAa;IAAEC;EAAuB,CAAC,GAAAF,IAAA;EAAA,oBACjExB,MAAA,CAAAQ,OAAA,CAAAmB,aAAA,CAAA3B,MAAA,CAAAQ,OAAA,CAAAoB,QAAA,qBACE5B,MAAA,CAAAQ,OAAA,CAAAmB,aAAA,CAACvB,OAAA,CAAAyB,OAAO;IAACC,IAAI,EAAE;EAAG,CAAE,CAAC,EACpBL,aAAa,gBACZzB,MAAA,CAAAQ,OAAA,CAAAmB,aAAA,CAAA3B,MAAA,CAAAQ,OAAA,CAAAoB,QAAA,qBACE5B,MAAA,CAAAQ,OAAA,CAAAmB,aAAA,CAACtB,QAAA,CAAA0B,WAAW,EAAAtB,QAAA,KAAKgB,aAAa,CAACO,KAAK;IAAEC,SAAS;EAAA,EAAE,CAAC,EACjDP,eAAe,iBACd1B,MAAA,CAAAQ,OAAA,CAAAmB,aAAA,CAAA3B,MAAA,CAAAQ,OAAA,CAAAoB,QAAA,qBACE5B,MAAA,CAAAQ,OAAA,CAAAmB,aAAA,CAACvB,OAAA,CAAAyB,OAAO;IAACC,IAAI,EAAE;EAAG,CAAE,CAAC,eACrB9B,MAAA,CAAAQ,OAAA,CAAAmB,aAAA,CAACvB,OAAA,CAAAyB,OAAO;IAACC,IAAI,EAAE;EAAE,CAAE,CAAC,eACpB9B,MAAA,CAAAQ,OAAA,CAAAmB,aAAA,CAACxB,YAAA,CAAA+B,IAAI;IAACC,KAAK,EAAE;MAAEC,cAAc,EAAE,QAAQ;MAAEC,aAAa,EAAE;IAAM;EAAE,gBAC9DrC,MAAA,CAAAQ,OAAA,CAAAmB,aAAA,CAACtB,QAAA,CAAAiC,UAAU,EAAKZ,eAAe,CAACM,KAAQ,CACpC,CACN,CAEJ,CAAC,gBAEHhC,MAAA,CAAAQ,OAAA,CAAAmB,aAAA,CAACvB,OAAA,CAAAyB,OAAO;IAACC,IAAI,EAAE;EAAG,CAAE,CAEtB,CAAC;AAAA,CACJ;AAACS,OAAA,CAAAhB,SAAA,GAAAA,SAAA"}

package/lib/commonjs/components/endOfPage/index.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_EndOfPage","require","Object","keys","forEach","key","exports","defineProperty","enumerable","get"],"sourceRoot":"../../../../src","sources":["components/endOfPage/index.tsx"],"mappings":";;;;;AAAA,IAAAA,UAAA,GAAAC,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAH,UAAA,EAAAI,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAL,UAAA,CAAAK,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAT,UAAA,CAAAK,GAAA;IAAA;EAAA;AAAA"}

package/lib/module/components/endOfPage/EndOfPage.js

@@ -1,28 +0,0 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-import React from "react";
-import { View } from "react-native";
-import { VSpacer } from "../spacer";
-import { ButtonLink, ButtonSolid } from "../buttons";
-export const EndOfPage = _ref => {
-  let {
-    primaryAction,
-    secondaryAction
-  } = _ref;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(VSpacer, {
-    size: 32
-  }), primaryAction ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ButtonSolid, _extends({}, primaryAction.props, {
-    fullWidth: true
-  })), secondaryAction && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(VSpacer, {
-    size: 16
-  }), /*#__PURE__*/React.createElement(VSpacer, {
-    size: 4
-  }), /*#__PURE__*/React.createElement(View, {
-    style: {
-      justifyContent: "center",
-      flexDirection: "row"
-    }
-  }, /*#__PURE__*/React.createElement(ButtonLink, secondaryAction.props)))) : /*#__PURE__*/React.createElement(VSpacer, {
-    size: 32
-  }));
-};
-//# sourceMappingURL=EndOfPage.js.map

package/lib/module/components/endOfPage/EndOfPage.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["React","View","VSpacer","ButtonLink","ButtonSolid","EndOfPage","_ref","primaryAction","secondaryAction","createElement","Fragment","size","_extends","props","fullWidth","style","justifyContent","flexDirection"],"sourceRoot":"../../../../src","sources":["components/endOfPage/EndOfPage.tsx"],"mappings":";AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,QAAQ,cAAc;AACnC,SAASC,OAAO,QAAQ,WAAW;AACnC,SACEC,UAAU,EAEVC,WAAW,QAEN,YAAY;AA0BnB,OAAO,MAAMC,SAAS,GAAGC,IAAA;EAAA,IAAC;IAAEC,aAAa;IAAEC;EAAuB,CAAC,GAAAF,IAAA;EAAA,oBACjEN,KAAA,CAAAS,aAAA,CAAAT,KAAA,CAAAU,QAAA,qBACEV,KAAA,CAAAS,aAAA,CAACP,OAAO;IAACS,IAAI,EAAE;EAAG,CAAE,CAAC,EACpBJ,aAAa,gBACZP,KAAA,CAAAS,aAAA,CAAAT,KAAA,CAAAU,QAAA,qBACEV,KAAA,CAAAS,aAAA,CAACL,WAAW,EAAAQ,QAAA,KAAKL,aAAa,CAACM,KAAK;IAAEC,SAAS;EAAA,EAAE,CAAC,EACjDN,eAAe,iBACdR,KAAA,CAAAS,aAAA,CAAAT,KAAA,CAAAU,QAAA,qBACEV,KAAA,CAAAS,aAAA,CAACP,OAAO;IAACS,IAAI,EAAE;EAAG,CAAE,CAAC,eACrBX,KAAA,CAAAS,aAAA,CAACP,OAAO;IAACS,IAAI,EAAE;EAAE,CAAE,CAAC,eACpBX,KAAA,CAAAS,aAAA,CAACR,IAAI;IAACc,KAAK,EAAE;MAAEC,cAAc,EAAE,QAAQ;MAAEC,aAAa,EAAE;IAAM;EAAE,gBAC9DjB,KAAA,CAAAS,aAAA,CAACN,UAAU,EAAKK,eAAe,CAACK,KAAQ,CACpC,CACN,CAEJ,CAAC,gBAEHb,KAAA,CAAAS,aAAA,CAACP,OAAO;IAACS,IAAI,EAAE;EAAG,CAAE,CAEtB,CAAC;AAAA,CACJ"}

package/lib/module/components/endOfPage/index.js

@@ -1,2 +0,0 @@
-export * from "./EndOfPage";
-//# sourceMappingURL=index.js.map

package/lib/module/components/endOfPage/index.js.map

@@ -1 +0,0 @@
-{"version":3,"names":[],"sourceRoot":"../../../../src","sources":["components/endOfPage/index.tsx"],"mappings":"AAAA,cAAc,aAAa"}

package/lib/typescript/components/endOfPage/EndOfPage.d.ts

@@ -1,23 +0,0 @@
-import React from "react";
-import { ButtonLinkProps, ButtonSolidProps } from "../buttons";
-type PrimaryActionProp = {
-    type: "Solid";
-    props: Omit<ButtonSolidProps, "fullWidth">;
-};
-type SecondaryActionProp = {
-    type: "Link";
-    props: ButtonLinkProps;
-};
-type Props = {
-    primaryAction?: never;
-    secondaryAction?: never;
-} | {
-    primaryAction: PrimaryActionProp;
-    secondaryAction?: never;
-} | {
-    primaryAction: PrimaryActionProp;
-    secondaryAction: SecondaryActionProp;
-};
-export declare const EndOfPage: ({ primaryAction, secondaryAction }: Props) => React.JSX.Element;
-export {};
-//# sourceMappingURL=EndOfPage.d.ts.map

package/lib/typescript/components/endOfPage/EndOfPage.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"EndOfPage.d.ts","sourceRoot":"","sources":["../../../../src/components/endOfPage/EndOfPage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAEL,eAAe,EAEf,gBAAgB,EACjB,MAAM,YAAY,CAAC;AAEpB,KAAK,iBAAiB,GAAG;IACvB,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,IAAI,CAAC,gBAAgB,EAAE,WAAW,CAAC,CAAC;CAC5C,CAAC;AAEF,KAAK,mBAAmB,GAAG;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,eAAe,CAAC;CACxB,CAAC;AAEF,KAAK,KAAK,GACN;IACE,aAAa,CAAC,EAAE,KAAK,CAAC;IACtB,eAAe,CAAC,EAAE,KAAK,CAAC;CACzB,GACD;IACE,aAAa,EAAE,iBAAiB,CAAC;IACjC,eAAe,CAAC,EAAE,KAAK,CAAC;CACzB,GACD;IACE,aAAa,EAAE,iBAAiB,CAAC;IACjC,eAAe,EAAE,mBAAmB,CAAC;CACtC,CAAC;AAEN,eAAO,MAAM,SAAS,uCAAwC,KAAK,sBAoBlE,CAAC"}

package/lib/typescript/components/endOfPage/index.d.ts

@@ -1,2 +0,0 @@
-export * from "./EndOfPage";
-//# sourceMappingURL=index.d.ts.map

package/lib/typescript/components/endOfPage/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/endOfPage/index.tsx"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC"}

package/src/components/endOfPage/EndOfPage.tsx

@@ -1,55 +0,0 @@
-import React from "react";
-import { View } from "react-native";
-import { VSpacer } from "../spacer";
-import {
-  ButtonLink,
-  ButtonLinkProps,
-  ButtonSolid,
-  ButtonSolidProps
-} from "../buttons";
-
-type PrimaryActionProp = {
-  type: "Solid";
-  props: Omit<ButtonSolidProps, "fullWidth">;
-};
-
-type SecondaryActionProp = {
-  type: "Link";
-  props: ButtonLinkProps;
-};
-
-type Props =
-  | {
-      primaryAction?: never;
-      secondaryAction?: never;
-    }
-  | {
-      primaryAction: PrimaryActionProp;
-      secondaryAction?: never;
-    }
-  | {
-      primaryAction: PrimaryActionProp;
-      secondaryAction: SecondaryActionProp;
-    };
-
-export const EndOfPage = ({ primaryAction, secondaryAction }: Props) => (
-  <>
-    <VSpacer size={32} />
-    {primaryAction ? (
-      <>
-        <ButtonSolid {...primaryAction.props} fullWidth />
-        {secondaryAction && (
-          <>
-            <VSpacer size={16} />
-            <VSpacer size={4} />
-            <View style={{ justifyContent: "center", flexDirection: "row" }}>
-              <ButtonLink {...secondaryAction.props} />
-            </View>
-          </>
-        )}
-      </>
-    ) : (
-      <VSpacer size={32} />
-    )}
-  </>
-);

package/src/components/endOfPage/index.tsx

@@ -1 +0,0 @@
-export * from "./EndOfPage";