@pagopa/io-app-design-system 1.3.2 → 1.4.0

package/src/components/textInput/TextInputBase.tsx

@@ -0,0 +1,327 @@
+/* eslint-disable functional/immutable-data */
+import {
+  Pressable,
+  StyleSheet,
+  TextInput,
+  View,
+  ViewStyle
+} from "react-native";
+import React, { useCallback, useEffect, useMemo, useRef } from "react";
+import Animated, {
+  Easing,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming
+} from "react-native-reanimated";
+import { IOColors, IOSpacingScale, IOStyles } from "../../core";
+import { IOIcons, Icon } from "../icons";
+import { HSpacer } from "../spacer";
+import { LabelSmall } from "../typography";
+import { InputType } from "../../utils/types";
+import { getInputPropsByType } from "../../utils/textInput";
+
+type InputStatus = "initial" | "focused" | "disabled" | "error";
+
+type RNTextInputProps = Pick<
+  React.ComponentProps<typeof TextInput>,
+  "keyboardType" | "inputMode" | "textContentType" | "autoComplete"
+>;
+
+type InputTextProps = {
+  placeholder: string;
+  value: string;
+  onChangeText: (value: string) => void;
+  accessibilityLabel?: string;
+  textInputProps?: RNTextInputProps;
+  inputTyoe?: InputType;
+  status?: InputStatus;
+  icon?: IOIcons;
+  rightElement?: React.ReactNode;
+  counterLimit?: number;
+  bottomMessage?: string;
+  bottomMessageColor?: IOColors;
+  disabled?: boolean;
+  isPassword?: boolean;
+  onBlur?: () => void;
+  onFocus?: () => void;
+};
+
+const styles = StyleSheet.create({
+  textInput: {
+    ...IOStyles.row,
+    alignItems: "center",
+    paddingVertical: 8,
+    height: 60,
+    borderRadius: 8,
+    paddingHorizontal: 12
+  },
+  textInputStyle: {
+    ...IOStyles.flex,
+    fontSize: 16,
+    marginTop: IOSpacingScale[2],
+    fontWeight: "400",
+    lineHeight: 24,
+    fontFamily: "Readex Pro",
+    height: "100%"
+  },
+  textInputLabelWrapper: {
+    position: "absolute",
+    paddingHorizontal: 12,
+    zIndex: 10,
+    bottom: 0,
+    top: 0,
+    justifyContent: "center"
+  }
+});
+
+type InputTextHelperRow = Pick<
+  InputTextProps,
+  "value" | "counterLimit" | "bottomMessage" | "bottomMessageColor"
+>;
+
+const HelperRow = ({
+  value,
+  counterLimit,
+  bottomMessage,
+  bottomMessageColor = "grey-700"
+}: InputTextHelperRow) => {
+  const valueCount = useMemo(() => value.length, [value]);
+
+  const helperRowStyle: ViewStyle = useMemo(() => {
+    if (counterLimit && bottomMessage) {
+      return {
+        justifyContent: "space-between"
+      };
+    }
+    if (counterLimit) {
+      return {
+        justifyContent: "flex-end"
+      };
+    }
+    if (bottomMessage) {
+      return {
+        justifyContent: "flex-start"
+      };
+    }
+    return {};
+  }, [counterLimit, bottomMessage]);
+
+  return (
+    <View
+      style={[
+        IOStyles.row,
+        {
+          alignItems: "center",
+          paddingHorizontal: 10
+        },
+        helperRowStyle
+      ]}
+    >
+      {bottomMessage && (
+        <LabelSmall weight="Regular" color={bottomMessageColor}>
+          {bottomMessage}
+        </LabelSmall>
+      )}
+      {counterLimit && (
+        <LabelSmall
+          weight="Regular"
+          color="grey-700"
+        >{`${valueCount} / ${counterLimit}`}</LabelSmall>
+      )}
+    </View>
+  );
+};
+
+export const TextInputBase = ({
+  disabled = false,
+  placeholder,
+  value = "",
+  onChangeText,
+  accessibilityLabel,
+  textInputProps,
+  inputTyoe = "default",
+  status,
+  icon,
+  rightElement,
+  counterLimit,
+  bottomMessage,
+  bottomMessageColor,
+  onBlur,
+  onFocus,
+  isPassword
+}: InputTextProps) => {
+  const labelSharedValue = useSharedValue<boolean>(false);
+  const [inputStatus, setInputStatus] = React.useState<InputStatus>(
+    disabled ? "disabled" : "initial"
+  );
+  const isSecretInput = useMemo(() => isPassword, [isPassword]);
+  const inputRef = useRef<TextInput>(null);
+
+  useEffect(() => {
+    if (status) {
+      setInputStatus(status);
+    }
+  }, [status]);
+
+  const boxStyle: ViewStyle = useMemo(() => {
+    if (inputStatus === "focused") {
+      return {
+        borderColor: IOColors["blueIO-500"],
+        borderWidth: 2
+      };
+    }
+    if (inputStatus === "error") {
+      return {
+        borderColor: IOColors["error-600"],
+        borderWidth: 1
+      };
+    }
+    return {
+      borderColor: IOColors["grey-200"],
+      borderWidth: 1
+    };
+  }, [inputStatus]);
+
+  const animatedLabelProps = useAnimatedStyle(() => ({
+    fontSize: withTiming(labelSharedValue.value ? 12 : 16, {
+      duration: 300,
+      easing: Easing.elastic(0.85)
+    }),
+    transform: [
+      {
+        translateY: withTiming(labelSharedValue.value ? -14 : 0, {
+          duration: 300,
+          easing: Easing.elastic(0.85)
+        })
+      }
+    ]
+  }));
+
+  useEffect(() => {
+    if (value.length > 0) {
+      labelSharedValue.value = true;
+    } else {
+      if (inputStatus !== "focused") {
+        labelSharedValue.value = false;
+      }
+    }
+  }, [labelSharedValue, value, inputStatus]);
+
+  const onTextInputPress = () => {
+    if (disabled) {
+      return;
+    }
+    labelSharedValue.value = true;
+    setInputStatus("focused");
+    inputRef?.current?.focus();
+  };
+
+  const onChangeTextHandler = useCallback(
+    (text: string) => {
+      if (counterLimit && text.length > counterLimit) {
+        return;
+      }
+      onChangeText(text);
+    },
+    [counterLimit, onChangeText]
+  );
+
+  const onBlurHandler = useCallback(() => {
+    if (!value) {
+      labelSharedValue.value = false;
+    }
+    onBlur?.();
+    setInputStatus("initial");
+  }, [value, labelSharedValue, onBlur]);
+
+  const derivedInputProps = useMemo(
+    () => getInputPropsByType(inputTyoe),
+    [inputTyoe]
+  );
+
+  const inputValue = useMemo(
+    () =>
+      derivedInputProps && derivedInputProps.valueFormat
+        ? derivedInputProps.valueFormat(value)
+        : value,
+    [value, derivedInputProps]
+  );
+
+  return (
+    <>
+      <Pressable
+        onPress={onTextInputPress}
+        style={[
+          inputStatus === "disabled" ? { opacity: 0.5 } : {},
+          boxStyle,
+          styles.textInput
+        ]}
+        accessible={false}
+        accessibilityRole={"none"}
+      >
+        {icon && (
+          <>
+            <Icon name={icon} color="grey-300" size={24} />
+            <HSpacer size={8} />
+          </>
+        )}
+        <TextInput
+          {...(derivedInputProps
+            ? derivedInputProps.textInputProps
+            : textInputProps)}
+          accessible
+          editable={!disabled}
+          secureTextEntry={isSecretInput}
+          disableFullscreenUI={true}
+          blurOnSubmit={true}
+          ref={inputRef}
+          accessibilityState={{ disabled }}
+          accessibilityLabel={accessibilityLabel ?? placeholder}
+          onFocus={() => {
+            setInputStatus("focused");
+            labelSharedValue.value = true;
+            onFocus?.();
+          }}
+          maxLength={counterLimit}
+          onBlur={onBlurHandler}
+          value={inputValue}
+          onChangeText={onChangeTextHandler}
+          style={styles.textInputStyle}
+        />
+        {/** Left value is due to the absolute position of the label in order to let it
+         * translate to top on focus
+         */}
+        <Animated.View
+          style={[styles.textInputLabelWrapper, icon ? { left: 32 } : {}]}
+        >
+          <Animated.Text
+            numberOfLines={1}
+            accessible={false}
+            style={[
+              animatedLabelProps,
+              {
+                color: IOColors["grey-700"]
+              }
+            ]}
+          >
+            {placeholder}
+          </Animated.Text>
+        </Animated.View>
+        {rightElement && (
+          <View style={{ marginLeft: "auto" }}>
+            <HSpacer size={8} />
+            {rightElement}
+          </View>
+        )}
+      </Pressable>
+      {(bottomMessage || counterLimit) && (
+        <HelperRow
+          value={value}
+          bottomMessage={bottomMessage}
+          bottomMessageColor={bottomMessageColor}
+          counterLimit={counterLimit}
+        />
+      )}
+    </>
+  );
+};

package/src/components/textInput/TextInputPassword.tsx

@@ -0,0 +1,36 @@
+import * as React from "react";
+import { IconButton } from "../buttons";
+import { TextInputBase } from "./TextInputBase";
+
+type TextInputPasswordProps = Omit<
+  React.ComponentProps<typeof TextInputBase>,
+  "isPassword"
+>;
+
+export const TextInputPassword = (props: TextInputPasswordProps) => {
+  const { onBlur, disabled } = props;
+  const [showPassword, setShowPassword] = React.useState<boolean>(false);
+
+  const rightElement = (
+    <IconButton
+      icon={showPassword ? "eyeShow" : "eyeHide"}
+      disabled={disabled}
+      onPress={() => setShowPassword(v => !v)}
+      accessibilityLabel="Toggle secret input"
+    />
+  );
+
+  const onBlurHandler = React.useCallback(() => {
+    setShowPassword(false);
+    onBlur?.();
+  }, [onBlur]);
+
+  return (
+    <TextInputBase
+      {...props}
+      onBlur={onBlurHandler}
+      rightElement={rightElement}
+      isPassword={!showPassword}
+    />
+  );
+};

package/src/components/textInput/TextInputValidation.tsx

@@ -0,0 +1,71 @@
+import * as React from "react";
+import { IOIcons, Icon } from "../icons";
+import { IOColors } from "../../core/IOColors";
+import { triggerHaptic } from "../../functions";
+import { TextInputBase } from "./TextInputBase";
+
+type TextInputValidationProps = Omit<
+  React.ComponentProps<typeof TextInputBase>,
+  "rightElement" | "status" | "bottomMessageColor" | "isPassword"
+> & {
+  onValidate: (value: string) => boolean;
+  errorMessage?: string;
+};
+
+export const TextInputValidation = (props: TextInputValidationProps) => {
+  const { onValidate, errorMessage, value, bottomMessage, onBlur, onFocus } =
+    props;
+  const [isValid, setIsValid] = React.useState<boolean | undefined>(undefined);
+
+  const onBlurHandler = React.useCallback(() => {
+    const validation = onValidate(value);
+    setIsValid(validation);
+    if (!validation) {
+      triggerHaptic("notificationError");
+    } else {
+      triggerHaptic("notificationSuccess");
+    }
+    onBlur?.();
+  }, [onValidate, value, onBlur]);
+
+  const onFocusHandler = React.useCallback(() => {
+    setIsValid(undefined);
+    onFocus?.();
+  }, [onFocus]);
+
+  const labelError = React.useMemo(
+    () => (isValid === false && errorMessage ? errorMessage : bottomMessage),
+    [isValid, errorMessage, bottomMessage]
+  );
+
+  const labelErrorColor: IOColors | undefined = React.useMemo(
+    () => (isValid === false && errorMessage ? "error-600" : undefined),
+    [isValid, errorMessage]
+  );
+
+  const rightIcon = React.useMemo(
+    () =>
+      isValid !== undefined && (
+        <Icon
+          name={(isValid ? "success" : "errorFilled") as IOIcons}
+          color={(isValid ? "green" : "error-600") as IOColors}
+          size={24}
+        />
+      ),
+    [isValid]
+  );
+
+  return (
+    <TextInputBase
+      {...props}
+      status={isValid === false ? "error" : undefined}
+      bottomMessage={labelError}
+      bottomMessageColor={labelErrorColor}
+      rightElement={rightIcon}
+      onBlur={onBlurHandler}
+      onFocus={onFocusHandler}
+    />
+  );
+};
+
+export default TextInputValidation;

package/src/components/textInput/index.tsx

@@ -0,0 +1,3 @@
+export * from "./TextInput";
+export * from "./TextInputPassword";
+export * from "./TextInputValidation";

package/src/core/IOAnimations.ts

@@ -9,6 +9,11 @@ export const IOSpringValues = {
     mass: 0.5,
     stiffness: 300
   },
+  accordion: {
+    damping: 30,
+    mass: 1,
+    stiffness: 325
+  },
   /* Used by selection items (checkbox, radio, etc…) */
   selection: {
     damping: 10,

package/src/core/IOShapes.ts

@@ -18,3 +18,4 @@ export const IOTagRadius: IORadiusScale = 6;
 export const IOBottomSheetHeaderRadius: IORadiusScale = 24;
 export const IOListItemIDPRadius: IORadiusScale = IODefaultRadius;
 export const IOBadgeRadius: IORadiusScale = 24;
+export const IOAccordionRadius: IORadiusScale = IODefaultRadius;

package/src/utils/accessibility.ts

@@ -0,0 +1,17 @@
+import { pipe } from "fp-ts/lib/function";
+import * as O from "fp-ts/lib/Option";
+import I18n from "i18n-js";
+
+/**
+ * This function is used to get the text that will be read by the screen reader
+ * with the correct minus symbol pronunciation.
+ */
+export const getAccessibleAmountText = (amount?: string) =>
+  pipe(
+    amount,
+    O.fromNullable,
+    O.map(amount =>
+      amount.replace("-", I18n.t("global.accessibility.minusSymbol"))
+    ),
+    O.getOrElseW(() => undefined)
+  );

package/src/utils/object.ts

@@ -0,0 +1,12 @@
+import * as A from "fp-ts/Array";
+import * as O from "fp-ts/Option";
+import { pipe } from "fp-ts/lib/function";
+
+export const findFirstCaseInsensitive =
+  <T>(obj: { [key: string]: T }) =>
+  (key: string): O.Option<[string, T]> =>
+    pipe(
+      obj,
+      Object.entries,
+      A.findFirst(([k, _]) => k.toLowerCase() === key.toLowerCase())
+    );

package/src/utils/textInput/index.ts

@@ -0,0 +1,29 @@
+import * as React from "react";
+import { TextInputBase } from "../../components/textInput/TextInputBase";
+import { InputType } from "../types";
+
+type InputProps = Pick<
+  React.ComponentProps<typeof TextInputBase>,
+  "textInputProps"
+> & {
+  valueFormat?: (value: string) => string;
+};
+
+export const getInputPropsByType = (
+  type: InputType
+): InputProps | undefined => {
+  switch (type) {
+    case "credit-card":
+      return {
+        valueFormat: v => v.replace(/\D/g, "").replace(/\d{4}?(?=.)/g, "$& "),
+        textInputProps: {
+          autoComplete: "cc-number",
+          keyboardType: "numeric",
+          textContentType: "creditCardNumber",
+          inputMode: "numeric"
+        }
+      };
+    default:
+      return undefined;
+  }
+};

package/src/utils/types.ts

@@ -28,3 +28,5 @@ type Without<T, U> = { [P in Exclude<keyof T, keyof U>]?: never };
 export type XOR<T, U> = T | U extends object
   ? (Without<T, U> & U) | (Without<U, T> & T)
   : T | U;
+
+export type InputType = "credit-card" | "default";

package/src/utils/url.ts

@@ -0,0 +1,9 @@
+import { ImageURISource } from "react-native";
+
+/**
+ * type guard to check if a value is an ImageURISource
+ * @argument value the value to check, can be anything
+ * @returns boolean
+ */
+export const isImageUri = (value: unknown): value is ImageURISource =>
+  typeof value === "object" && value !== null && "uri" in value;

package/lib/commonjs/components/accordion/IOAccordion.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["React","_interopRequireWildcard","require","_reactNative","_H","_IOStyles","_RawAccordion","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","styles","StyleSheet","create","header","marginVertical","IOVisualCostants","appMarginDefault","IOAccordion","props","createElement","RawAccordion","animated","headerStyle","accessibilityLabel","title","H3","numberOfLines","style","IOStyles","flex","children","exports"],"sourceRoot":"../../../../src","sources":["components/accordion/IOAccordion.tsx"],"mappings":";;;;;;AAAA,IAAAA,KAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AACA,IAAAE,EAAA,GAAAF,OAAA;AACA,IAAAG,SAAA,GAAAH,OAAA;AACA,IAAAI,aAAA,GAAAJ,OAAA;AAA8C,SAAAK,yBAAAC,WAAA,eAAAC,OAAA,kCAAAC,iBAAA,OAAAD,OAAA,QAAAE,gBAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,WAAA,WAAAA,WAAA,GAAAG,gBAAA,GAAAD,iBAAA,KAAAF,WAAA;AAAA,SAAAP,wBAAAW,GAAA,EAAAJ,WAAA,SAAAA,WAAA,IAAAI,GAAA,IAAAA,GAAA,CAAAC,UAAA,WAAAD,GAAA,QAAAA,GAAA,oBAAAA,GAAA,wBAAAA,GAAA,4BAAAE,OAAA,EAAAF,GAAA,UAAAG,KAAA,GAAAR,wBAAA,CAAAC,WAAA,OAAAO,KAAA,IAAAA,KAAA,CAAAC,GAAA,CAAAJ,GAAA,YAAAG,KAAA,CAAAE,GAAA,CAAAL,GAAA,SAAAM,MAAA,WAAAC,qBAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,GAAA,IAAAX,GAAA,QAAAW,GAAA,kBAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAd,GAAA,EAAAW,GAAA,SAAAI,IAAA,GAAAR,qBAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAV,GAAA,EAAAW,GAAA,cAAAI,IAAA,KAAAA,IAAA,CAAAV,GAAA,IAAAU,IAAA,CAAAC,GAAA,KAAAR,MAAA,CAAAC,cAAA,CAAAH,MAAA,EAAAK,GAAA,EAAAI,IAAA,YAAAT,MAAA,CAAAK,GAAA,IAAAX,GAAA,CAAAW,GAAA,SAAAL,MAAA,CAAAJ,OAAA,GAAAF,GAAA,MAAAG,KAAA,IAAAA,KAAA,CAAAa,GAAA,CAAAhB,GAAA,EAAAM,MAAA,YAAAA,MAAA;AAM9C,MAAMW,MAAM,GAAGC,uBAAU,CAACC,MAAM,CAAC;EAC/BC,MAAM,EAAE;IACNC,cAAc,EAAEC,0BAAgB,CAACC;EACnC;AACF,CAAC,CAAC;;AAEF;AACA;AACA;AACA;AACA;AACO,MAAMC,WAAW,GAAIC,KAAY,iBACtCrC,KAAA,CAAAsC,aAAA,CAAChC,aAAA,CAAAiC,YAAY;EACXC,QAAQ,EAAEH,KAAK,CAACG,QAAS;EACzBC,WAAW,EAAEZ,MAAM,CAACG,MAAO;EAC3BU,kBAAkB,EAAEL,KAAK,CAACM,KAAM;EAChCX,MAAM,eACJhC,KAAA,CAAAsC,aAAA,CAAClC,EAAA,CAAAwC,EAAE;IAACC,aAAa,EAAE,CAAE;IAACC,KAAK,EAAEC,kBAAQ,CAACC;EAAK,GACxCX,KAAK,CAACM,KACL;AACL,GAEAN,KAAK,CAACY,QACK,CACf;AAACC,OAAA,CAAAd,WAAA,GAAAA,WAAA"}

package/lib/module/components/accordion/IOAccordion.js

@@ -1,26 +0,0 @@
-import * as React from "react";
-import { StyleSheet } from "react-native";
-import { H3 } from "../typography/H3";
-import { IOStyles, IOVisualCostants } from "../../core/IOStyles";
-import { RawAccordion } from "./RawAccordion";
-const styles = StyleSheet.create({
-  header: {
-    marginVertical: IOVisualCostants.appMarginDefault
-  }
-});
-
-/**
- * A simplified accordion that accepts a title and one child and uses {@link RawAccordion}
- * @param props
- * @constructor
- */
-export const IOAccordion = props => /*#__PURE__*/React.createElement(RawAccordion, {
-  animated: props.animated,
-  headerStyle: styles.header,
-  accessibilityLabel: props.title,
-  header: /*#__PURE__*/React.createElement(H3, {
-    numberOfLines: 1,
-    style: IOStyles.flex
-  }, props.title)
-}, props.children);
-//# sourceMappingURL=IOAccordion.js.map

package/lib/module/components/accordion/IOAccordion.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["React","StyleSheet","H3","IOStyles","IOVisualCostants","RawAccordion","styles","create","header","marginVertical","appMarginDefault","IOAccordion","props","createElement","animated","headerStyle","accessibilityLabel","title","numberOfLines","style","flex","children"],"sourceRoot":"../../../../src","sources":["components/accordion/IOAccordion.tsx"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,QAAQ,cAAc;AACzC,SAASC,EAAE,QAAQ,kBAAkB;AACrC,SAASC,QAAQ,EAAEC,gBAAgB,QAAQ,qBAAqB;AAChE,SAASC,YAAY,QAAQ,gBAAgB;AAM7C,MAAMC,MAAM,GAAGL,UAAU,CAACM,MAAM,CAAC;EAC/BC,MAAM,EAAE;IACNC,cAAc,EAAEL,gBAAgB,CAACM;EACnC;AACF,CAAC,CAAC;;AAEF;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,WAAW,GAAIC,KAAY,iBACtCZ,KAAA,CAAAa,aAAA,CAACR,YAAY;EACXS,QAAQ,EAAEF,KAAK,CAACE,QAAS;EACzBC,WAAW,EAAET,MAAM,CAACE,MAAO;EAC3BQ,kBAAkB,EAAEJ,KAAK,CAACK,KAAM;EAChCT,MAAM,eACJR,KAAA,CAAAa,aAAA,CAACX,EAAE;IAACgB,aAAa,EAAE,CAAE;IAACC,KAAK,EAAEhB,QAAQ,CAACiB;EAAK,GACxCR,KAAK,CAACK,KACL;AACL,GAEAL,KAAK,CAACS,QACK,CACf"}

package/lib/typescript/components/accordion/IOAccordion.d.ts

@@ -1,13 +0,0 @@
-import * as React from "react";
-import { RawAccordion } from "./RawAccordion";
-type Props = Omit<React.ComponentProps<typeof RawAccordion>, "header"> & {
-    title: string;
-};
-/**
- * A simplified accordion that accepts a title and one child and uses {@link RawAccordion}
- * @param props
- * @constructor
- */
-export declare const IOAccordion: (props: Props) => React.ReactElement;
-export {};
-//# sourceMappingURL=IOAccordion.d.ts.map

package/lib/typescript/components/accordion/IOAccordion.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"IOAccordion.d.ts","sourceRoot":"","sources":["../../../../src/components/accordion/IOAccordion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C,KAAK,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,YAAY,CAAC,EAAE,QAAQ,CAAC,GAAG;IACvE,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAQF;;;;GAIG;AACH,eAAO,MAAM,WAAW,UAAW,KAAK,KAAG,MAAM,YAahD,CAAC"}

package/src/components/accordion/IOAccordion.tsx

@@ -1,35 +0,0 @@
-import * as React from "react";
-import { StyleSheet } from "react-native";
-import { H3 } from "../typography/H3";
-import { IOStyles, IOVisualCostants } from "../../core/IOStyles";
-import { RawAccordion } from "./RawAccordion";
-
-type Props = Omit<React.ComponentProps<typeof RawAccordion>, "header"> & {
-  title: string;
-};
-
-const styles = StyleSheet.create({
-  header: {
-    marginVertical: IOVisualCostants.appMarginDefault
-  }
-});
-
-/**
- * A simplified accordion that accepts a title and one child and uses {@link RawAccordion}
- * @param props
- * @constructor
- */
-export const IOAccordion = (props: Props): React.ReactElement => (
-  <RawAccordion
-    animated={props.animated}
-    headerStyle={styles.header}
-    accessibilityLabel={props.title}
-    header={
-      <H3 numberOfLines={1} style={IOStyles.flex}>
-        {props.title}
-      </H3>
-    }
-  >
-    {props.children}
-  </RawAccordion>
-);