@sincpro/mobile-ui 3.0.0 → 3.1.0

package/dist/Display/Display.Image.js

@@ -1,5 +1,4 @@
-import { createElement as _createElement } from "nativewind";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import ExpoImage from "./Display.ExpoImage.js";
 import Icon from "./Display.Icon.js";
 import Skeleton from "../Feedback/Feedback.Skeleton.js";
@@ -8,43 +7,349 @@ import { cn } from "../theme/tw.js";
 import { imageSourceKey } from "../utils/image.js";
 import { useLayoutEffect, useRef, useState } from "react";
 import { View } from "react-native";
-function ImageContent({ source, width = "100%", height, aspectRatio, radius = 12, contentFit = "cover", placeholder, fallbackIcon = "image", className, style, containerStyle, renderError, testID, onError, onLoadStart, onLoadEnd, onLoad, accessibilityLabel, accessible, retry, ...imageProps }) {
-    const theme = useTheme();
-    const [loading, setLoading] = useState(true);
-    const [failed, setFailed] = useState(false);
-    const active = useRef(true);
-    useLayoutEffect(() => {
-        active.current = true;
-        return () => {
-            active.current = false;
-        };
-    }, []);
-    const dimensions = { width, height, aspectRatio, borderRadius: radius };
-    return (_jsx(View, { className: cn("overflow-hidden bg-bg-muted", className), style: [dimensions, containerStyle], testID: testID, children: failed ? (renderError ? (renderError(retry)) : (_jsx(View, { accessibilityLabel: accessibilityLabel ? `${accessibilityLabel}. Imagen no disponible` : undefined, accessibilityRole: "image", accessible: accessible ?? !!accessibilityLabel, className: "flex-1 items-center justify-center", children: _jsx(Icon, { color: theme.icon.disabled, name: fallbackIcon, size: 32 }) }))) : (_jsxs(_Fragment, { children: [_jsx(ExpoImage, { ...imageProps, accessibilityLabel: accessibilityLabel, accessible: accessible, contentFit: contentFit, onError: (event) => {
-                        if (!active.current)
-                            return;
-                        setFailed(true);
-                        setLoading(false);
-                        onError?.(event);
-                    }, onLoad: (event) => {
-                        if (!active.current)
-                            return;
-                        setLoading(false);
-                        onLoad?.(event);
-                    }, onLoadEnd: () => {
-                        if (!active.current)
-                            return;
-                        setLoading(false);
-                        onLoadEnd?.();
-                    }, onLoadStart: () => {
-                        if (!active.current)
-                            return;
-                        setLoading(true);
-                        onLoadStart?.();
-                    }, placeholder: placeholder, placeholderContentFit: imageProps.placeholderContentFit ?? contentFit, source: source, style: [{ width: "100%", height: "100%" }, style] }), loading && !placeholder ? (_jsx(View, { style: { position: "absolute", top: 0, left: 0, right: 0, bottom: 0 }, children: _jsx(Skeleton, { height: "100%", radius: radius, width: "100%" }) })) : null] })) }));
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import { createElement as _createElement } from "nativewind";
+const fresh = key => ({
+  key,
+  attempt: 0,
+  loading: true,
+  failed: false
+});
+
+/**
+ * One native image view for the life of the component. A new `source` resets the load
+ * state in place instead of remounting, so a recycled FlashList cell keeps its view and
+ * `recyclingKey` clears the previous picture natively. Each load has a token; events
+ * from an older source or attempt cannot settle the current one.
+ */
+function DisplayImage(t0) {
+  const $ = _c(69);
+  let accessibilityLabel;
+  let accessible;
+  let aspectRatio;
+  let className;
+  let containerStyle;
+  let height;
+  let imageProps;
+  let onError;
+  let onLoad;
+  let onLoadEnd;
+  let onLoadStart;
+  let placeholder;
+  let renderError;
+  let source;
+  let style;
+  let t1;
+  let t2;
+  let t3;
+  let t4;
+  let testID;
+  if ($[0] !== t0) {
+    ({
+      source,
+      width: t1,
+      height,
+      aspectRatio,
+      radius: t2,
+      contentFit: t3,
+      placeholder,
+      fallbackIcon: t4,
+      className,
+      style,
+      containerStyle,
+      renderError,
+      testID,
+      onError,
+      onLoadStart,
+      onLoadEnd,
+      onLoad,
+      accessibilityLabel,
+      accessible,
+      ...imageProps
+    } = t0);
+    $[0] = t0;
+    $[1] = accessibilityLabel;
+    $[2] = accessible;
+    $[3] = aspectRatio;
+    $[4] = className;
+    $[5] = containerStyle;
+    $[6] = height;
+    $[7] = imageProps;
+    $[8] = onError;
+    $[9] = onLoad;
+    $[10] = onLoadEnd;
+    $[11] = onLoadStart;
+    $[12] = placeholder;
+    $[13] = renderError;
+    $[14] = source;
+    $[15] = style;
+    $[16] = t1;
+    $[17] = t2;
+    $[18] = t3;
+    $[19] = t4;
+    $[20] = testID;
+  } else {
+    accessibilityLabel = $[1];
+    accessible = $[2];
+    aspectRatio = $[3];
+    className = $[4];
+    containerStyle = $[5];
+    height = $[6];
+    imageProps = $[7];
+    onError = $[8];
+    onLoad = $[9];
+    onLoadEnd = $[10];
+    onLoadStart = $[11];
+    placeholder = $[12];
+    renderError = $[13];
+    source = $[14];
+    style = $[15];
+    t1 = $[16];
+    t2 = $[17];
+    t3 = $[18];
+    t4 = $[19];
+    testID = $[20];
+  }
+  const width = t1 === undefined ? "100%" : t1;
+  const radius = t2 === undefined ? 12 : t2;
+  const contentFit = t3 === undefined ? "cover" : t3;
+  const fallbackIcon = t4 === undefined ? "image" : t4;
+  const theme = useTheme();
+  let t5;
+  if ($[21] !== source) {
+    t5 = imageSourceKey(source);
+    $[21] = source;
+    $[22] = t5;
+  } else {
+    t5 = $[22];
+  }
+  const sourceKey = t5;
+  let t6;
+  if ($[23] !== sourceKey) {
+    t6 = () => fresh(sourceKey);
+    $[23] = sourceKey;
+    $[24] = t6;
+  } else {
+    t6 = $[24];
+  }
+  const [state, setState] = useState(t6);
+  let current = state;
+  if (state.key !== sourceKey) {
+    let t7;
+    if ($[25] !== sourceKey) {
+      t7 = fresh(sourceKey);
+      $[25] = sourceKey;
+      $[26] = t7;
+    } else {
+      t7 = $[26];
+    }
+    current = t7;
+    setState(current);
+  }
+  const token = `${current.attempt}:${current.key}`;
+  const committed = useRef(null);
+  let t7;
+  if ($[27] !== token) {
+    t7 = () => {
+      committed.current = token;
+    };
+    $[27] = token;
+    $[28] = t7;
+  } else {
+    t7 = $[28];
+  }
+  useLayoutEffect(t7);
+  let t8;
+  let t9;
+  if ($[29] === Symbol.for("react.memo_cache_sentinel")) {
+    t8 = () => () => {
+      committed.current = null;
+    };
+    t9 = [];
+    $[29] = t8;
+    $[30] = t9;
+  } else {
+    t8 = $[29];
+    t9 = $[30];
+  }
+  useLayoutEffect(t8, t9);
+  let t10;
+  if ($[31] !== token) {
+    t10 = patch => {
+      if (committed.current !== token) {
+        return false;
+      }
+      setState(previous => ({
+        ...previous,
+        ...patch
+      }));
+      return true;
+    };
+    $[31] = token;
+    $[32] = t10;
+  } else {
+    t10 = $[32];
+  }
+  const settle = t10;
+  let t11;
+  if ($[33] === Symbol.for("react.memo_cache_sentinel")) {
+    t11 = () => setState(_temp);
+    $[33] = t11;
+  } else {
+    t11 = $[33];
+  }
+  const retry = t11;
+  let t12;
+  if ($[34] !== aspectRatio || $[35] !== height || $[36] !== radius || $[37] !== width) {
+    t12 = {
+      width,
+      height,
+      aspectRatio,
+      borderRadius: radius
+    };
+    $[34] = aspectRatio;
+    $[35] = height;
+    $[36] = radius;
+    $[37] = width;
+    $[38] = t12;
+  } else {
+    t12 = $[38];
+  }
+  const dimensions = t12;
+  let t13;
+  if ($[39] !== className) {
+    t13 = cn("overflow-hidden bg-bg-muted", className);
+    $[39] = className;
+    $[40] = t13;
+  } else {
+    t13 = $[40];
+  }
+  let t14;
+  if ($[41] !== containerStyle || $[42] !== dimensions) {
+    t14 = [dimensions, containerStyle];
+    $[41] = containerStyle;
+    $[42] = dimensions;
+    $[43] = t14;
+  } else {
+    t14 = $[43];
+  }
+  let t15;
+  if ($[44] !== accessibilityLabel || $[45] !== accessible || $[46] !== contentFit || $[47] !== current.attempt || $[48] !== current.failed || $[49] !== current.loading || $[50] !== fallbackIcon || $[51] !== imageProps || $[52] !== onError || $[53] !== onLoad || $[54] !== onLoadEnd || $[55] !== onLoadStart || $[56] !== placeholder || $[57] !== radius || $[58] !== renderError || $[59] !== settle || $[60] !== source || $[61] !== style || $[62] !== theme) {
+    t15 = current.failed ? renderError ? renderError(retry) : _jsx(View, {
+      accessibilityLabel: accessibilityLabel ? `${accessibilityLabel}. Imagen no disponible` : undefined,
+      accessibilityRole: "image",
+      accessible: accessible ?? !!accessibilityLabel,
+      className: "flex-1 items-center justify-center",
+      children: _jsx(Icon, {
+        color: theme.icon.disabled,
+        name: fallbackIcon,
+        size: 32
+      })
+    }) : _jsxs(_Fragment, {
+      children: [_createElement(ExpoImage, {
+        ...imageProps,
+        accessibilityLabel: accessibilityLabel,
+        accessible: accessible,
+        contentFit: contentFit,
+        key: current.attempt,
+        onError: event => {
+          if (settle({
+            failed: true,
+            loading: false
+          })) {
+            onError?.(event);
+          }
+        },
+        onLoad: event_0 => {
+          if (settle({
+            loading: false
+          })) {
+            onLoad?.(event_0);
+          }
+        },
+        onLoadEnd: () => {
+          if (settle({
+            loading: false
+          })) {
+            onLoadEnd?.();
+          }
+        },
+        onLoadStart: () => {
+          if (settle({
+            loading: true
+          })) {
+            onLoadStart?.();
+          }
+        },
+        placeholder: placeholder,
+        placeholderContentFit: imageProps.placeholderContentFit ?? contentFit,
+        source: source,
+        style: [{
+          width: "100%",
+          height: "100%"
+        }, style]
+      }), current.loading && !placeholder ? _jsx(View, {
+        style: {
+          position: "absolute",
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0
+        },
+        children: _jsx(Skeleton, {
+          height: "100%",
+          radius: radius,
+          width: "100%"
+        })
+      }) : null]
+    });
+    $[44] = accessibilityLabel;
+    $[45] = accessible;
+    $[46] = contentFit;
+    $[47] = current.attempt;
+    $[48] = current.failed;
+    $[49] = current.loading;
+    $[50] = fallbackIcon;
+    $[51] = imageProps;
+    $[52] = onError;
+    $[53] = onLoad;
+    $[54] = onLoadEnd;
+    $[55] = onLoadStart;
+    $[56] = placeholder;
+    $[57] = radius;
+    $[58] = renderError;
+    $[59] = settle;
+    $[60] = source;
+    $[61] = style;
+    $[62] = theme;
+    $[63] = t15;
+  } else {
+    t15 = $[63];
+  }
+  let t16;
+  if ($[64] !== t13 || $[65] !== t14 || $[66] !== t15 || $[67] !== testID) {
+    t16 = _jsx(View, {
+      className: t13,
+      style: t14,
+      testID: testID,
+      children: t15
+    });
+    $[64] = t13;
+    $[65] = t14;
+    $[66] = t15;
+    $[67] = testID;
+    $[68] = t16;
+  } else {
+    t16 = $[68];
+  }
+  return t16;
 }
-function DisplayImage(props) {
-    const [attempt, setAttempt] = useState(0);
-    return (_createElement(ImageContent, { ...props, key: `${imageSourceKey(props.source)}:${attempt}`, retry: () => setAttempt((current) => current + 1) }));
+function _temp(previous_0) {
+  return {
+    ...previous_0,
+    attempt: previous_0.attempt + 1,
+    loading: true,
+    failed: false
+  };
 }
 export default DisplayImage;

package/dist/Display/Display.KeyValue.js

@@ -1,11 +1,96 @@
-import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import { cn } from "../theme/tw.js";
 import { Typography } from "../Typography/index.js";
 import { useWindowDimensions, View } from "react-native";
 import CopyableText from "./Display.CopyableText";
-function KeyValue({ label, value, align = "row", className, testID, copyable = false, selectable = false, }) {
-    const { width, fontScale } = useWindowDimensions();
-    const isRow = align === "row" || (align === "auto" && width >= 360 && fontScale <= 1.3);
-    return (_jsxs(View, { className: cn(isRow ? "flex-row items-center justify-between gap-3" : "gap-0.5", "py-2", className), testID: testID, children: [_jsx(Typography.Text, { className: "min-w-0 shrink text-text-secondary", variant: "labelSmall", children: label }), typeof value === "string" || typeof value === "number" ? (_jsx(View, { className: cn("flex-shrink min-w-0", isRow && "flex-1 items-end"), children: copyable ? (_jsx(CopyableText, { accessibilityLabel: `Copiar ${label}`, selectable: selectable, value: String(value) })) : selectable ? (_jsx(Typography.SelectableText, { className: cn("text-text-primary", isRow && "text-right"), semibold: isRow, style: { alignSelf: "stretch" }, value: String(value) })) : (_jsx(Typography.Text, { className: cn("text-text-primary", isRow && "text-right"), selectable: selectable, semibold: isRow, children: value })) })) : (value)] }));
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+function KeyValue(t0) {
+  const $ = _c(16);
+  const {
+    label,
+    value,
+    align: t1,
+    className,
+    testID,
+    copyable: t2,
+    selectable: t3
+  } = t0;
+  const align = t1 === undefined ? "row" : t1;
+  const copyable = t2 === undefined ? false : t2;
+  const selectable = t3 === undefined ? false : t3;
+  const {
+    width,
+    fontScale
+  } = useWindowDimensions();
+  const isRow = align === "row" || align === "auto" && width >= 360 && fontScale <= 1.3;
+  const t4 = isRow ? "flex-row items-center justify-between gap-3" : "gap-0.5";
+  let t5;
+  if ($[0] !== className || $[1] !== t4) {
+    t5 = cn(t4, "py-2", className);
+    $[0] = className;
+    $[1] = t4;
+    $[2] = t5;
+  } else {
+    t5 = $[2];
+  }
+  let t6;
+  if ($[3] !== label) {
+    t6 = _jsx(Typography.Text, {
+      className: "min-w-0 shrink text-text-secondary",
+      variant: "labelSmall",
+      children: label
+    });
+    $[3] = label;
+    $[4] = t6;
+  } else {
+    t6 = $[4];
+  }
+  let t7;
+  if ($[5] !== copyable || $[6] !== isRow || $[7] !== label || $[8] !== selectable || $[9] !== value) {
+    t7 = typeof value === "string" || typeof value === "number" ? _jsx(View, {
+      className: cn("flex-shrink min-w-0", isRow && "flex-1 items-end"),
+      children: copyable ? _jsx(CopyableText, {
+        accessibilityLabel: `Copiar ${label}`,
+        selectable: selectable,
+        value: String(value)
+      }) : selectable ? _jsx(Typography.SelectableText, {
+        className: cn("text-text-primary", isRow && "text-right"),
+        semibold: isRow,
+        style: {
+          alignSelf: "stretch"
+        },
+        value: String(value)
+      }) : _jsx(Typography.Text, {
+        className: cn("text-text-primary", isRow && "text-right"),
+        selectable: selectable,
+        semibold: isRow,
+        children: value
+      })
+    }) : value;
+    $[5] = copyable;
+    $[6] = isRow;
+    $[7] = label;
+    $[8] = selectable;
+    $[9] = value;
+    $[10] = t7;
+  } else {
+    t7 = $[10];
+  }
+  let t8;
+  if ($[11] !== t5 || $[12] !== t6 || $[13] !== t7 || $[14] !== testID) {
+    t8 = _jsxs(View, {
+      className: t5,
+      testID: testID,
+      children: [t6, t7]
+    });
+    $[11] = t5;
+    $[12] = t6;
+    $[13] = t7;
+    $[14] = testID;
+    $[15] = t8;
+  } else {
+    t8 = $[15];
+  }
+  return t8;
 }
 export default KeyValue;

package/dist/Display/Display.ListGroup.js

@@ -1,17 +1,189 @@
-import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import SectionHeader from "./Display.SectionHeader.js";
+import { useTheme } from "../theme/index.js";
 import { cn } from "../theme/tw.js";
 import { Typography } from "../Typography/index.js";
 import { Children } from "react";
 import { StyleSheet, View } from "react-native";
-function ListGroup({ title, description, footer, action, children, surface = "inset", separators = true, className, contentClassName, testID, headerProps, footerTextProps, style, contentStyle, separatorStyle, }) {
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+function ListGroup(t0) {
+  const $ = _c(54);
+  const {
+    title,
+    description,
+    footer,
+    action,
+    children,
+    surface: t1,
+    separators: t2,
+    className,
+    contentClassName,
+    testID,
+    headerProps,
+    footerTextProps,
+    style,
+    contentStyle,
+    separatorStyle
+  } = t0;
+  const surface = t1 === undefined ? "inset" : t1;
+  const separators = t2 === undefined ? true : t2;
+  const theme = useTheme();
+  let T0;
+  let T1;
+  let t10;
+  let t3;
+  let t4;
+  let t5;
+  let t6;
+  let t7;
+  let t8;
+  let t9;
+  if ($[0] !== action || $[1] !== children || $[2] !== className || $[3] !== contentClassName || $[4] !== contentStyle || $[5] !== description || $[6] !== headerProps || $[7] !== separatorStyle || $[8] !== separators || $[9] !== style || $[10] !== surface || $[11] !== testID || $[12] !== theme || $[13] !== title) {
     const rows = Children.toArray(children);
-    return (_jsxs(View, { className: cn("gap-2", className), style: style, testID: testID, children: [_jsx(SectionHeader, { ...headerProps, action: action, subtitle: description, title: title }), _jsx(View, { className: cn(surface === "inset" && "rounded-2xl bg-bg-card overflow-hidden", contentClassName), style: contentStyle, testID: testID ? `${testID}-content` : undefined, children: rows.map((row, index) => (_jsxs(View, { children: [row, separators && index < rows.length - 1 ? (_jsx(View, { accessibilityElementsHidden: true, className: "bg-border-default", importantForAccessibility: "no-hide-descendants", style: [
-                                {
-                                    height: StyleSheet.hairlineWidth,
-                                    marginHorizontal: 16,
-                                },
-                                separatorStyle,
-                            ], testID: testID ? `${testID}-separator-${index}` : undefined })) : null] }, typeof row === "object" && "key" in row ? row.key : index))) }), typeof footer === "string" ? (_jsx(Typography.Text, { className: "text-text-secondary px-4", variant: "bodySmall", ...footerTextProps, children: footer })) : (footer)] }));
+    T1 = View;
+    if ($[24] !== className) {
+      t7 = cn("gap-2", className);
+      $[24] = className;
+      $[25] = t7;
+    } else {
+      t7 = $[25];
+    }
+    t8 = style;
+    t9 = testID;
+    if ($[26] !== action || $[27] !== description || $[28] !== headerProps || $[29] !== title) {
+      t10 = _jsx(SectionHeader, {
+        variant: "group",
+        ...headerProps,
+        action: action,
+        subtitle: description,
+        title: title
+      });
+      $[26] = action;
+      $[27] = description;
+      $[28] = headerProps;
+      $[29] = title;
+      $[30] = t10;
+    } else {
+      t10 = $[30];
+    }
+    T0 = View;
+    const t11 = surface === "inset" && "rounded-lg bg-bg-card border border-border-light overflow-hidden";
+    if ($[31] !== contentClassName || $[32] !== t11) {
+      t3 = cn(t11, contentClassName);
+      $[31] = contentClassName;
+      $[32] = t11;
+      $[33] = t3;
+    } else {
+      t3 = $[33];
+    }
+    const t12 = surface === "inset" ? theme.shadow.sm : undefined;
+    if ($[34] !== contentStyle || $[35] !== t12) {
+      t4 = [t12, contentStyle];
+      $[34] = contentStyle;
+      $[35] = t12;
+      $[36] = t4;
+    } else {
+      t4 = $[36];
+    }
+    t5 = testID ? `${testID}-content` : undefined;
+    t6 = rows.map((row, index) => _jsxs(View, {
+      children: [row, separators && index < rows.length - 1 ? _jsx(View, {
+        accessibilityElementsHidden: true,
+        className: "bg-border-default",
+        importantForAccessibility: "no-hide-descendants",
+        style: [{
+          height: StyleSheet.hairlineWidth,
+          marginHorizontal: 16
+        }, separatorStyle],
+        testID: testID ? `${testID}-separator-${index}` : undefined
+      }) : null]
+    }, typeof row === "object" && "key" in row ? row.key : index));
+    $[0] = action;
+    $[1] = children;
+    $[2] = className;
+    $[3] = contentClassName;
+    $[4] = contentStyle;
+    $[5] = description;
+    $[6] = headerProps;
+    $[7] = separatorStyle;
+    $[8] = separators;
+    $[9] = style;
+    $[10] = surface;
+    $[11] = testID;
+    $[12] = theme;
+    $[13] = title;
+    $[14] = T0;
+    $[15] = T1;
+    $[16] = t10;
+    $[17] = t3;
+    $[18] = t4;
+    $[19] = t5;
+    $[20] = t6;
+    $[21] = t7;
+    $[22] = t8;
+    $[23] = t9;
+  } else {
+    T0 = $[14];
+    T1 = $[15];
+    t10 = $[16];
+    t3 = $[17];
+    t4 = $[18];
+    t5 = $[19];
+    t6 = $[20];
+    t7 = $[21];
+    t8 = $[22];
+    t9 = $[23];
+  }
+  let t11;
+  if ($[37] !== T0 || $[38] !== t3 || $[39] !== t4 || $[40] !== t5 || $[41] !== t6) {
+    t11 = _jsx(T0, {
+      className: t3,
+      style: t4,
+      testID: t5,
+      children: t6
+    });
+    $[37] = T0;
+    $[38] = t3;
+    $[39] = t4;
+    $[40] = t5;
+    $[41] = t6;
+    $[42] = t11;
+  } else {
+    t11 = $[42];
+  }
+  let t12;
+  if ($[43] !== footer || $[44] !== footerTextProps) {
+    t12 = typeof footer === "string" ? _jsx(Typography.Text, {
+      className: "text-text-tertiary px-4",
+      variant: "caption",
+      ...footerTextProps,
+      children: footer
+    }) : footer;
+    $[43] = footer;
+    $[44] = footerTextProps;
+    $[45] = t12;
+  } else {
+    t12 = $[45];
+  }
+  let t13;
+  if ($[46] !== T1 || $[47] !== t10 || $[48] !== t11 || $[49] !== t12 || $[50] !== t7 || $[51] !== t8 || $[52] !== t9) {
+    t13 = _jsxs(T1, {
+      className: t7,
+      style: t8,
+      testID: t9,
+      children: [t10, t11, t12]
+    });
+    $[46] = T1;
+    $[47] = t10;
+    $[48] = t11;
+    $[49] = t12;
+    $[50] = t7;
+    $[51] = t8;
+    $[52] = t9;
+    $[53] = t13;
+  } else {
+    t13 = $[53];
+  }
+  return t13;
 }
 export default ListGroup;