@trilogy-ds/react 0.0.9-esm-cjs → 0.0.11-esm-cjs

package/lib/components/hero/Hero.native.js

@@ -1,93 +1,641 @@
-import { Box } from '../../components/box/index.native';
-import { ComponentName } from '../../components/enumsComponentsName';
-import { StatesContext } from '../../context/providerStates';
-import { getColorStyle, TrilogyColor } from '../../objects/facets/Color/index.native';
-import React, { useState } from 'react';
-import { ImageBackground, StyleSheet, TouchableOpacity, View } from 'react-native';
-/**
- * Hero Component
- * @param children {ReactNode} Hero Children
- * @param backgroundSrc {string} If source, it will display background option
- * @param backgroundColor {TrilogyColor} Background Color
- * @param inverted {Boolean} Inverted Hero
- * @param onClick {Function} onClick Event
- * @param overlap {ReactNode[]|Boolean} Hero overlap components in tab (need to add key for each element),
- * if second element add second special overlap (only native-old) - Web (Boolean) Native (ReactNode)
- * @param backgroundHeight {BackgroundHeight} Background heigth
- */
-const Hero = React.forwardRef(({ children, backgroundSrc, onClick, overlap, inverted, backgroundColor, backgroundHeight, ...others }, ref) => {
-    const [overlapHeight, setOverlapHeight] = useState(0);
-    const [secondOverlapHeight, setSecondOverlapHeight] = useState(0);
-    const isSecondOverlap = overlap && Array.isArray(overlap) ? overlap?.length > 1 : false;
-    const isSecondOverlapNotEmpty = isSecondOverlap && secondOverlapHeight > 0;
-    const overlapMargin = backgroundHeight ? overlapHeight - backgroundHeight / 2 : overlapHeight - 60;
-    const marginBottomOverlap = isSecondOverlapNotEmpty ? 70 : 60;
-    const styles = StyleSheet.create({
-        hero: {
-            width: '100%',
-            minHeight: 150,
-            maxHeight: 350,
-            height: backgroundHeight ? backgroundHeight : 'auto',
-        },
-        content: {
-            paddingLeft: 15,
-            marginBottom: overlap ? marginBottomOverlap : 0,
+"use client";
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// components/hero/Hero.native.tsx
+var Hero_native_exports = {};
+__export(Hero_native_exports, {
+  default: () => Hero_native_default
+});
+module.exports = __toCommonJS(Hero_native_exports);
+
+// components/box/context/boxContext.tsx
+var import_react = __toESM(require("react"));
+var BoxContext = import_react.default.createContext({ fullHeight: false });
+
+// context/providerStates/index.tsx
+var import_react2 = require("react");
+var StatesContext = (0, import_react2.createContext)({
+  inverted: false,
+  active: false,
+  flat: false
+});
+
+// context/providerTheme/index.native.tsx
+var import_react3 = __toESM(require("react"));
+var defaultIcons = {};
+var defaultTheme = {
+  icons: defaultIcons,
+  colors,
+  fontFamily: { regular: "poppins-regular", medium: "poppins-medium", bold: "poppins-semibold" }
+};
+var defaultContextValue = {
+  theme: defaultTheme,
+  setTheme: () => void 0
+};
+var TrilogyThemeContext = import_react3.default.createContext(defaultContextValue);
+
+// objects/facets/Color/index.native.tsx
+var import_react4 = require("react");
+var colors = {
+  ["WHITE" /* BACKGROUND */]: ["#fff", "white", "main"],
+  ["MAIN" /* MAIN */]: ["#3d5d7e", "main", "white"],
+  ["MAIN_FADE" /* MAIN_FADE */]: ["#BBC6CD", "main-fade", "white"],
+  ["ACCENT" /* ACCENT */]: ["#da641b", "accent", "white"],
+  ["FONT" /* FONT */]: ["#3d5d7e", "main", "white"],
+  ["FONT_PLACEHOLDER" /* FONT_PLACEHOLDER */]: ["#687a87", "font-placeholder", "white"],
+  ["SUCCESS" /* SUCCESS */]: ["#007B52", "success", "white"],
+  ["SUCCESS_FADE" /* SUCCESS_FADE */]: ["#cae8ca", "success-fade", "white"],
+  ["INFO" /* INFO */]: ["#1A688A", "info", "white"],
+  ["INFO_FADE" /* INFO_FADE */]: ["#c8dbec", "info-fade", "white"],
+  ["WARNING" /* WARNING */]: ["#FFBB33", "warning", "white"],
+  ["WARNING_FADE" /* WARNING_FADE */]: ["#ecdbc6", "warning-fade", "white"],
+  ["ERROR" /* ERROR */]: ["#D42D02", "error", "white"],
+  ["ERROR_FADE" /* ERROR_FADE */]: ["#eecccc", "error-fade", "white"],
+  ["DISABLED" /* DISABLED */]: ["#646464", "disabled", "white"],
+  ["DISABLED_FADE" /* DISABLED_FADE */]: ["#D1D1D1", "disabled-fade", "white"],
+  ["NEUTRAL" /* NEUTRAL */]: ["#707070", "grey", "white"],
+  ["NEUTRAL_FADE" /* NEUTRAL_FADE */]: ["#F4F4F4", "grey-fade", "white"],
+  ["STROKE" /* STROKE */]: ["#BBC1CE", "stroke", "white"]
+};
+var getColorStyle = (trilogyColor) => {
+  if (typeof navigator !== "undefined" && navigator.userAgent === void 0) {
+    const { theme } = (0, import_react4.useContext)(TrilogyThemeContext);
+    const colorsStyle = (theme == null ? void 0 : theme.colors) || colors;
+    const colorArray = colorsStyle[trilogyColor] || colorsStyle.default;
+    if (trilogyColor === "transparent") return "transparent";
+    if (!trilogyColor || !colors[trilogyColor]) {
+      return colorsStyle.default;
+    }
+    return colorArray[0];
+  } else {
+    if (trilogyColor === "transparent") return "transparent";
+    return colors[trilogyColor][0] || colors["MAIN" /* MAIN */][0];
+  }
+};
+
+// components/box/Box.native.tsx
+var import_react5 = __toESM(require("react"));
+var import_native = __toESM(require("react-content-loader/native"));
+var import_react_native = require("react-native");
+var Box = import_react5.default.forwardRef(
+  ({
+    children,
+    onClick,
+    skeleton,
+    highlighted,
+    shadowless,
+    backgroundColor,
+    backgroundSrc,
+    inverted,
+    flat,
+    headerOffset,
+    fullheight,
+    active,
+    ...others
+  }, ref) => {
+    const colorBgc = getColorStyle("WHITE" /* BACKGROUND */);
+    const [boxHeight, setBoxHeight] = (0, import_react5.useState)(0);
+    const boxRadius = 6;
+    const styles = import_react_native.StyleSheet.create({
+      box: {
+        width: "100%",
+        backgroundColor: backgroundColor ? getColorStyle(backgroundColor) : colorBgc,
+        borderRadius: boxRadius,
+        justifyContent: "flex-start",
+        position: "relative",
+        borderStyle: flat ? "solid" : void 0,
+        borderWidth: flat && 1 || active && 2 || 0,
+        borderColor: active ? getColorStyle("MAIN" /* MAIN */) : getColorStyle("NEUTRAL" /* NEUTRAL */),
+        marginTop: headerOffset ? 35 : 0,
+        flex: fullheight ? 1 : 0
+      },
+      shadow: shadowless ? {} : {
+        shadowColor: "#000",
+        shadowOffset: {
+          width: 0,
+          height: 1
         },
-        background: {
-            backgroundColor: backgroundColor ? getColorStyle(backgroundColor) : getColorStyle(TrilogyColor.BACKGROUND),
+        shadowOpacity: 0.22,
+        shadowRadius: 2.22,
+        elevation: 1
+      },
+      skeleton: {
+        width: "100%",
+        minHeight: 50,
+        backgroundColor: getColorStyle("NEUTRAL_FADE" /* NEUTRAL_FADE */),
+        overflow: "hidden",
+        borderRadius: boxRadius
+      },
+      highlighted: {
+        position: "absolute",
+        width: 8,
+        borderTopStartRadius: boxRadius,
+        borderBottomStartRadius: boxRadius,
+        height: boxHeight,
+        backgroundColor: highlighted ? getColorStyle(highlighted) : "transparent"
+      },
+      boxImage: {
+        width: "100%",
+        minHeight: 100,
+        maxHeight: 300,
+        height: "auto"
+      },
+      content: {
+        padding: 16
+      }
+    });
+    const boxTestId = "NotSpecified";
+    const BoxSkeleton = () => /* @__PURE__ */ import_react5.default.createElement(import_native.default, { style: styles.skeleton, ...others, testID: "skeleton" }, /* @__PURE__ */ import_react5.default.createElement(import_react_native.View, { style: { opacity: 0 } }, children), import_react_native.Platform.OS === "android" && /* @__PURE__ */ import_react5.default.createElement(import_react_native.View, null, /* @__PURE__ */ import_react5.default.createElement(import_native.Rect, { rx: "10", ry: "10", width: "100%", height: "100%" })));
+    if (skeleton) {
+      return /* @__PURE__ */ import_react5.default.createElement(BoxSkeleton, null);
+    }
+    if (onClick) {
+      return /* @__PURE__ */ import_react5.default.createElement(BoxContext.Provider, { value: { fullHeight: fullheight || false } }, /* @__PURE__ */ import_react5.default.createElement(
+        import_react_native.TouchableOpacity,
+        {
+          ref,
+          onPress: (e) => onClick == null ? void 0 : onClick(e),
+          style: [styles.box, !flat && styles.shadow, others == null ? void 0 : others.style],
+          onLayout: (event) => {
+            const { height } = event.nativeEvent.layout;
+            setBoxHeight(height);
+          },
+          testID: boxTestId
         },
-        overlap: {
-            width: '100%',
-            position: 'absolute',
-            top: isSecondOverlapNotEmpty ? -40 : backgroundHeight ? backgroundHeight * (-1 / 2) : -60,
+        backgroundSrc ? /* @__PURE__ */ import_react5.default.createElement(
+          import_react_native.ImageBackground,
+          {
+            imageStyle: { borderRadius: boxRadius },
+            style: styles.boxImage,
+            source: typeof backgroundSrc === "number" ? backgroundSrc : { uri: backgroundSrc }
+          },
+          Boolean(highlighted) && /* @__PURE__ */ import_react5.default.createElement(import_react_native.View, { style: styles.highlighted }),
+          /* @__PURE__ */ import_react5.default.createElement(StatesContext.Provider, { value: { inverted: !!inverted, active: !!active, flat: !!flat } }, children)
+        ) : /* @__PURE__ */ import_react5.default.createElement(import_react5.default.Fragment, null, Boolean(highlighted) && /* @__PURE__ */ import_react5.default.createElement(import_react_native.View, { style: styles.highlighted }), /* @__PURE__ */ import_react5.default.createElement(StatesContext.Provider, { value: { inverted: !!inverted, active: !!active, flat: !!flat } }, children))
+      ));
+    }
+    return /* @__PURE__ */ import_react5.default.createElement(BoxContext.Provider, { value: { fullHeight: fullheight || false } }, /* @__PURE__ */ import_react5.default.createElement(
+      import_react_native.View,
+      {
+        ref,
+        onLayout: (event) => {
+          const { height } = event.nativeEvent.layout;
+          setBoxHeight(height);
         },
-        secondOverlap: {
-            position: 'absolute',
-            alignSelf: 'center',
-            top: secondOverlapHeight * (-1 / 2) - 40,
-            width: '100%',
+        style: [styles.box, !flat && styles.shadow, others == null ? void 0 : others.style],
+        testID: boxTestId
+      },
+      backgroundSrc ? /* @__PURE__ */ import_react5.default.createElement(
+        import_react_native.ImageBackground,
+        {
+          imageStyle: { borderRadius: boxRadius },
+          style: styles.boxImage,
+          source: typeof backgroundSrc === "number" ? backgroundSrc : { uri: backgroundSrc }
         },
-        subOverlap: {
-            height: isSecondOverlapNotEmpty ? overlapHeight - 40 : overlapMargin,
+        Boolean(highlighted) && /* @__PURE__ */ import_react5.default.createElement(import_react_native.View, { style: styles.highlighted }),
+        /* @__PURE__ */ import_react5.default.createElement(StatesContext.Provider, { value: { inverted: !!inverted, active: !!active, flat: !!flat } }, children)
+      ) : /* @__PURE__ */ import_react5.default.createElement(StatesContext.Provider, { value: { inverted: !!inverted, active: !!active, flat: !!flat } }, Boolean(highlighted) && /* @__PURE__ */ import_react5.default.createElement(import_react_native.View, { style: styles.highlighted }), children)
+    ));
+  }
+);
+Box.displayName = "Box" /* Box */;
+var Box_native_default = Box;
+
+// components/box/content/BoxContent.native.tsx
+var React4 = __toESM(require("react"));
+var import_react_native2 = require("react-native");
+var BoxContent = React4.forwardRef(
+  ({ children, backgroundColor, backgroundSrc, ...others }, ref) => {
+    const { fullHeight } = React4.useContext(BoxContext);
+    const styles = import_react_native2.StyleSheet.create({
+      boxContent: {
+        padding: 16,
+        backgroundColor: backgroundColor && getColorStyle(backgroundColor) || "transparent",
+        borderRadius: 6,
+        flex: fullHeight ? 1 : void 0
+      }
+    });
+    const content = /* @__PURE__ */ React4.createElement(import_react_native2.View, { ref, style: [styles.boxContent], ...others }, children && typeof children.valueOf() === "string" ? /* @__PURE__ */ React4.createElement(import_react_native2.Text, null, children) : children);
+    if (backgroundSrc) {
+      return /* @__PURE__ */ React4.createElement(
+        import_react_native2.ImageBackground,
+        {
+          source: typeof backgroundSrc === "number" ? backgroundSrc : { uri: backgroundSrc },
+          style: { flex: 1 },
+          imageStyle: { borderRadius: 6 }
         },
+        content
+      );
+    } else {
+      return content;
+    }
+  }
+);
+BoxContent.displayName = "BoxContent" /* BoxContent */;
+
+// objects/facets/Alignable/index.ts
+var getAlignStyle = (alignType) => {
+  switch (alignType) {
+    case "ALIGNED_CENTER":
+      return "center";
+    case "ALIGNED_START":
+      return "flex-start";
+    case "ALIGNED_END":
+      return "flex-end";
+    default:
+      return "flex-start";
+  }
+};
+
+// helpers/device/index.native.ts
+var import_react_native3 = require("react-native");
+var Device = /* @__PURE__ */ ((Device2) => {
+  Device2["Browser"] = "browser";
+  Device2["Server"] = "server";
+  Device2["Native"] = "native";
+  return Device2;
+})(Device || {});
+var { Browser, Server, Native } = Device;
+var canUseDOM = !!(typeof window !== "undefined" && window.document && window.document.createElement);
+var canUseNative = typeof navigator != "undefined" && navigator.product == "ReactNative";
+var device = canUseNative ? Native : canUseDOM ? Browser : Server;
+var SSRObjectDefined = {
+  isBrowser: device === Browser,
+  isServer: device === Server,
+  isNative: device === Native,
+  device,
+  canUseWorkers: typeof Worker !== "undefined",
+  canUseEventListeners: device === Browser && !!window.addEventListener,
+  canUseViewport: device === Browser && !!window.screen
+};
+var assign = (...args) => Object.assign({}, ...args);
+var values = (obj) => Object.values(obj);
+var toArrayObject = () => assign((values(SSRObjectDefined), SSRObjectDefined));
+var SSRObject = toArrayObject();
+var isAndroid = import_react_native3.Platform.OS === "android";
+var isIOS = import_react_native3.Platform.OS === "ios";
+
+// components/icon/Icon.native.tsx
+var import_react6 = __toESM(require("react"));
+var import_native2 = __toESM(require("react-content-loader/native"));
+var import_react_native4 = require("react-native");
+var import_css = require("react-native-svg/css");
+var Icon = import_react6.default.forwardRef(
+  ({ size: size2, name, circled, stretched, color, backgroundColor, onClick, align, skeleton, testId, ...others }, ref) => {
+    const {
+      theme: { icons }
+    } = (0, import_react6.useContext)(TrilogyThemeContext);
+    const statesContext = (0, import_react6.useContext)(StatesContext);
+    const style = {};
+    const defaultSize = size2 === "huge" /* HUGE */ && 66 || size2 === "large" /* LARGE */ && 44 || size2 === "medium" /* MEDIUM */ && 30 || size2 === "small" /* SMALL */ && 20 || size2 === "smaller" /* SMALLER */ && 16 || 20;
+    const iconColor = color && getColorStyle(color) || statesContext.inverted && getColorStyle("WHITE" /* BACKGROUND */) || getColorStyle("MAIN" /* MAIN */);
+    const background = backgroundColor && getColorStyle(backgroundColor) || circled && getColorStyle("MAIN" /* MAIN */) || "";
+    const iconSkeletonRadius = size2 === "huge" /* HUGE */ && 50 || size2 === "large" /* LARGE */ && 35 || size2 === "medium" /* MEDIUM */ && 25 || size2 === "small" /* SMALL */ && 15 || size2 === "smaller" /* SMALLER */ && 10 || 15;
+    const circledWidth = size2 === "huge" /* HUGE */ && 99 || size2 === "large" /* LARGE */ && 66 || size2 === "medium" /* MEDIUM */ && 48 || size2 === "small" /* SMALL */ && 32 || size2 === "smaller" /* SMALLER */ && 38 || 32;
+    const styles = import_react_native4.StyleSheet.create({
+      rootView: {
+        alignSelf: getAlignStyle(align)
+      },
+      iconCircled: {
+        alignSelf: "center",
+        justifyContent: "center",
+        alignItems: "center"
+      },
+      icon: {
+        transform: isIOS ? stretched && [{ skewX: "20deg" }] || [{ skewX: "0deg" }] : []
+      },
+      stretched: {
+        justifyContent: "center",
+        alignItems: "center",
+        width: circledWidth + 15,
+        height: circledWidth,
+        backgroundColor: iconColor,
+        borderTopRightRadius: 10,
+        transform: isIOS ? stretched && [{ skewX: "-20deg" }] || [{ skewX: "0deg" }] : []
+      },
+      skeleton: {
+        width: circledWidth,
+        height: circledWidth,
+        borderRadius: iconSkeletonRadius,
+        backgroundColor: getColorStyle("NEUTRAL_FADE" /* NEUTRAL_FADE */),
+        overflow: "hidden"
+      },
+      circled: {
+        width: circledWidth,
+        height: circledWidth,
+        borderRadius: circledWidth,
+        backgroundColor: background,
+        alignItems: "center",
+        justifyContent: "center"
+      }
+    });
+    const IconSkeleton = () => /* @__PURE__ */ import_react6.default.createElement(import_native2.default, { style: styles.skeleton, ...others }, /* @__PURE__ */ import_react6.default.createElement(import_react_native4.View, { style: { opacity: 0 } }), isAndroid && /* @__PURE__ */ import_react6.default.createElement(import_react_native4.View, null, size2 === "huge" /* HUGE */ && /* @__PURE__ */ import_react6.default.createElement(import_native2.Circle, { cx: "50", cy: "50", r: "50" }) || size2 === "large" /* LARGE */ && /* @__PURE__ */ import_react6.default.createElement(import_native2.Circle, { cx: "33", cy: "33", r: "33" }) || size2 === "medium" /* MEDIUM */ && /* @__PURE__ */ import_react6.default.createElement(import_native2.Circle, { cx: "23", cy: "23", r: "23" }) || size2 === "small" /* SMALL */ && /* @__PURE__ */ import_react6.default.createElement(import_native2.Circle, { cx: "15", cy: "15", r: "15" }) || /* @__PURE__ */ import_react6.default.createElement(import_native2.Circle, { cx: "15", cy: "15", r: "15" })));
+    if (skeleton) {
+      return /* @__PURE__ */ import_react6.default.createElement(IconSkeleton, null);
+    }
+    let iconView = /* @__PURE__ */ import_react6.default.createElement(import_react_native4.View, null);
+    if (name && icons) {
+      if (stretched && !circled) {
+        iconView = /* @__PURE__ */ import_react6.default.createElement(import_react_native4.View, { style: styles.stretched, testID: `${testId}-stretched` }, /* @__PURE__ */ import_react6.default.createElement(
+          import_css.WithLocalSvg,
+          {
+            style: [styles.iconCircled, styles.icon],
+            asset: icons[name.toString().replace("tri-picto-", "").replace("tri-", "")],
+            width: defaultSize,
+            height: defaultSize,
+            color: getColorStyle("WHITE" /* BACKGROUND */)
+          }
+        ));
+      } else if (circled) {
+        iconView = /* @__PURE__ */ import_react6.default.createElement(import_react_native4.View, { style: styles.circled, testID: `${testId}-circled` }, /* @__PURE__ */ import_react6.default.createElement(
+          import_css.WithLocalSvg,
+          {
+            style: [styles.iconCircled, styles.icon],
+            asset: icons[name.toString().replace("tri-picto-", "").replace("tri-", "")],
+            width: defaultSize,
+            height: defaultSize,
+            color: iconColor
+          }
+        ));
+      } else {
+        iconView = /* @__PURE__ */ import_react6.default.createElement(import_react_native4.View, { ...others }, /* @__PURE__ */ import_react6.default.createElement(
+          import_css.WithLocalSvg,
+          {
+            style: [styles.icon, style],
+            asset: icons[name.toString().replace("tri-picto-", "").replace("tri-", "")],
+            width: defaultSize,
+            height: defaultSize,
+            color: iconColor
+          }
+        ));
+      }
+    }
+    return onClick ? /* @__PURE__ */ import_react6.default.createElement(import_react_native4.View, { style: styles.rootView, testID: testId, ref }, /* @__PURE__ */ import_react6.default.createElement(
+      import_react_native4.TouchableOpacity,
+      {
+        style: { width: "100%" },
+        onPress: onClick,
+        activeOpacity: 0.85,
+        testID: `${testId}-pressable`
+      },
+      iconView
+    )) : /* @__PURE__ */ import_react6.default.createElement(import_react_native4.View, { style: styles.rootView, testID: testId, ref }, iconView);
+  }
+);
+Icon.displayName = "Icon" /* Icon */;
+
+// objects/facets/Status/index.native.ts
+var STATUS_COLORS = {
+  SUCCESS: { color: "SUCCESS" /* SUCCESS */, backgroundColor: "SUCCESS_FADE" /* SUCCESS_FADE */ },
+  INFO: { color: "INFO" /* INFO */, backgroundColor: "INFO_FADE" /* INFO_FADE */ },
+  WARNING: { color: "WARNING" /* WARNING */, backgroundColor: "WARNING_FADE" /* WARNING_FADE */ },
+  ERROR: { color: "ERROR" /* ERROR */, backgroundColor: "ERROR_FADE" /* ERROR_FADE */ },
+  DEFAULT: { color: "MAIN" /* MAIN */, backgroundColor: "MAIN_FADE" /* MAIN_FADE */ }
+};
+
+// context/providerTheme/index.tsx
+var import_react7 = __toESM(require("react"));
+var defaultTheme2 = {
+  icons: {},
+  colors: {},
+  fontFamily: {}
+};
+var defaultContextValue2 = {
+  theme: defaultTheme2,
+  setTheme: () => void 0
+};
+var TrilogyThemeContext2 = import_react7.default.createContext(defaultContextValue2);
+
+// objects/Typography/TypographyBold/index.tsx
+var import_react8 = require("react");
+
+// components/box/footer/BoxFooter.native.tsx
+var React7 = __toESM(require("react"));
+var import_react_native5 = require("react-native");
+var BoxFooter = React7.forwardRef(
+  ({ children, backgroundColor, ...others }, ref) => {
+    const boxRadius = 6;
+    const styles = import_react_native5.StyleSheet.create({
+      boxFooter: {
+        padding: 12,
+        justifyContent: "center",
+        backgroundColor: backgroundColor ? getColorStyle(backgroundColor) : "transparent",
+        borderBottomLeftRadius: boxRadius,
+        borderBottomRightRadius: boxRadius
+      }
+    });
+    return /* @__PURE__ */ React7.createElement(import_react_native5.View, { ref, style: [styles.boxFooter], ...others }, children && typeof children.valueOf() === "string" ? /* @__PURE__ */ React7.createElement(import_react_native5.Text, null, String(children)) : children);
+  }
+);
+BoxFooter.displayName = "BoxFooter" /* BoxFooter */;
+
+// components/box/header/BoxHeader.native.tsx
+var React8 = __toESM(require("react"));
+var import_react9 = require("react");
+var import_react_native6 = require("react-native");
+var BoxHeader = React8.forwardRef(
+  ({ children, variant, ...others }, ref) => {
+    const statesContext = (0, import_react9.useContext)(StatesContext);
+    const centered = false;
+    const pulledLeft = false;
+    const pulledRight = false;
+    const help = "";
+    const headerBgc = variant ? getColorStyle(variant) : getColorStyle("MAIN" /* MAIN */);
+    const textColor = getColorStyle("WHITE" /* BACKGROUND */);
+    const styles = import_react_native6.StyleSheet.create({
+      boxHeader: {
+        width: "100%",
+        backgroundColor: headerBgc,
+        padding: 10,
+        paddingLeft: 16,
+        borderTopLeftRadius: 6,
+        borderTopRightRadius: 6,
+        marginTop: statesContext.active && -2 || statesContext.flat && -1 || 0,
+        justifyContent: "space-between",
+        alignItems: centered && "center" || pulledRight && "flex-end" || pulledLeft && "flex-start" || "flex-start",
+        flexDirection: "row"
+      },
+      text: {
+        color: textColor,
+        fontSize: 15,
+        fontWeight: "600"
+      },
+      helpContainer: {
+        alignSelf: "center"
+      },
+      help: {
+        fontSize: 12,
+        color: textColor,
+        fontWeight: "600",
+        lineHeight: 15
+      }
+    });
+    return /* @__PURE__ */ React8.createElement(import_react_native6.View, { style: [styles.boxHeader], ref, ...others }, children && typeof children.valueOf() === "string" ? /* @__PURE__ */ React8.createElement(import_react_native6.Text, { style: styles.text }, String(children)) : children, help && /* @__PURE__ */ React8.createElement(import_react_native6.View, { style: styles.helpContainer }, /* @__PURE__ */ React8.createElement(import_react_native6.Text, { style: styles.help }, help)));
+  }
+);
+BoxHeader.displayName = "BoxHeader" /* BoxHeader */;
+
+// components/box/item/BoxItem.native.tsx
+var React9 = __toESM(require("react"));
+var import_react_native7 = require("react-native");
+var BoxItem = React9.forwardRef(({ children, size: size2, ...others }, ref) => {
+  const height = Number(size2) || 48;
+  const styles = import_react_native7.StyleSheet.create({
+    boxItem: {
+      height,
+      alignItems: "center",
+      alignContent: "center",
+      flexWrap: "wrap",
+      flex: 1
+    }
+  });
+  return /* @__PURE__ */ React9.createElement(import_react_native7.View, { ref, style: [styles.boxItem], ...others }, children);
+});
+BoxItem.displayName = "BoxItem" /* BoxItem */;
+
+// components/box/item/BoxItemEnum.ts
+var size = (factor) => 8 * factor;
+var BoxItemSize = ((BoxItemSize2) => {
+  BoxItemSize2[BoxItemSize2["NONE"] = 0] = "NONE";
+  BoxItemSize2[BoxItemSize2["SMALL"] = size(2)] = "SMALL";
+  BoxItemSize2[BoxItemSize2["MEDIUM"] = size(4)] = "MEDIUM";
+  BoxItemSize2[BoxItemSize2["LARGE"] = size(8)] = "LARGE";
+  BoxItemSize2[BoxItemSize2["HUGE"] = size(12)] = "HUGE";
+  return BoxItemSize2;
+})(BoxItemSize || {});
+
+// components/box/table-container/BoxTableContainer.native.tsx
+var React10 = __toESM(require("react"));
+var import_react_native8 = require("react-native");
+var boxTableContainer = React10.forwardRef(
+  ({ children, ...others }, ref) => {
+    const styles = import_react_native8.StyleSheet.create({
+      boxTableContainer: {}
+    });
+    return /* @__PURE__ */ React10.createElement(import_react_native8.View, { ref, style: [styles.boxTableContainer], ...others }, children);
+  }
+);
+boxTableContainer.displayName = "BoxTableContainer" /* BoxTableContainer */;
+
+// components/hero/Hero.native.tsx
+var import_react10 = __toESM(require("react"));
+var import_react_native9 = require("react-native");
+var Hero = import_react10.default.forwardRef(
+  ({ children, backgroundSrc, onClick, overlap, inverted, backgroundColor, backgroundHeight, ...others }, ref) => {
+    const [overlapHeight, setOverlapHeight] = (0, import_react10.useState)(0);
+    const [secondOverlapHeight, setSecondOverlapHeight] = (0, import_react10.useState)(0);
+    const isSecondOverlap = overlap && Array.isArray(overlap) ? (overlap == null ? void 0 : overlap.length) > 1 : false;
+    const isSecondOverlapNotEmpty = isSecondOverlap && secondOverlapHeight > 0;
+    const overlapMargin = backgroundHeight ? overlapHeight - backgroundHeight / 2 : overlapHeight - 60;
+    const marginBottomOverlap = isSecondOverlapNotEmpty ? 70 : 60;
+    const styles = import_react_native9.StyleSheet.create({
+      hero: {
+        width: "100%",
+        minHeight: 150,
+        maxHeight: 350,
+        height: backgroundHeight ? backgroundHeight : "auto"
+      },
+      content: {
+        paddingLeft: 15,
+        marginBottom: overlap ? marginBottomOverlap : 0
+      },
+      background: {
+        backgroundColor: backgroundColor ? getColorStyle(backgroundColor) : getColorStyle("WHITE" /* BACKGROUND */)
+      },
+      overlap: {
+        width: "100%",
+        position: "absolute",
+        top: isSecondOverlapNotEmpty ? -40 : backgroundHeight ? backgroundHeight * (-1 / 2) : -60
+      },
+      secondOverlap: {
+        position: "absolute",
+        alignSelf: "center",
+        top: secondOverlapHeight * (-1 / 2) - 40,
+        width: "100%"
+      },
+      subOverlap: {
+        height: isSecondOverlapNotEmpty ? overlapHeight - 40 : overlapMargin
+      }
     });
     let heroView;
     if (backgroundColor) {
-        heroView = (React.createElement(StatesContext.Provider, { value: { inverted: !!inverted, active: false, flat: false } },
-            React.createElement(View, { style: [styles.background, styles.hero], testID: 'background-id' },
-                React.createElement(View, { style: styles.content }, children))));
-    }
-    else {
-        heroView = (React.createElement(ImageBackground, { source: typeof backgroundSrc === 'number' ? backgroundSrc : { uri: backgroundSrc }, style: styles.hero, ...others },
-            React.createElement(View, { style: styles.content, testID: 'no-background-id' }, children)));
+      heroView = /* @__PURE__ */ import_react10.default.createElement(StatesContext.Provider, { value: { inverted: !!inverted, active: false, flat: false } }, /* @__PURE__ */ import_react10.default.createElement(import_react_native9.View, { style: [styles.background, styles.hero], testID: "background-id" }, /* @__PURE__ */ import_react10.default.createElement(import_react_native9.View, { style: styles.content }, children)));
+    } else {
+      heroView = /* @__PURE__ */ import_react10.default.createElement(
+        import_react_native9.ImageBackground,
+        {
+          source: typeof backgroundSrc === "number" ? backgroundSrc : { uri: backgroundSrc },
+          style: styles.hero,
+          ...others
+        },
+        /* @__PURE__ */ import_react10.default.createElement(import_react_native9.View, { style: styles.content, testID: "no-background-id" }, children)
+      );
     }
     let overlapView;
     if (isSecondOverlap) {
-        overlapView = (React.createElement(View, { style: styles.subOverlap },
-            React.createElement(View, { style: styles.overlap, onLayout: (event) => {
-                    const { height } = event.nativeEvent.layout;
-                    setOverlapHeight(height);
-                } },
-                React.createElement(Box, { backgroundColor: TrilogyColor.NEUTRAL_FADE },
-                    React.createElement(View, { style: { marginBottom: secondOverlapHeight / 2 } }),
-                    overlap && typeof overlap !== 'boolean' ? overlap[0] : null)),
-            React.createElement(View, { style: styles.secondOverlap, onLayout: (event) => {
-                    const { height } = event.nativeEvent.layout;
-                    setSecondOverlapHeight(height);
-                } }, overlap && typeof overlap !== 'boolean' ? overlap[1] : null)));
-    }
-    else {
-        overlapView = (React.createElement(View, { style: styles.subOverlap },
-            React.createElement(View, { style: styles.overlap, onLayout: (event) => {
-                    const { height } = event.nativeEvent.layout;
-                    setOverlapHeight(height);
-                } }, overlap && typeof overlap !== 'boolean' ? overlap[0] : null)));
+      overlapView = /* @__PURE__ */ import_react10.default.createElement(import_react_native9.View, { style: styles.subOverlap }, /* @__PURE__ */ import_react10.default.createElement(
+        import_react_native9.View,
+        {
+          style: styles.overlap,
+          onLayout: (event) => {
+            const { height } = event.nativeEvent.layout;
+            setOverlapHeight(height);
+          }
+        },
+        /* @__PURE__ */ import_react10.default.createElement(Box_native_default, { backgroundColor: "NEUTRAL_FADE" /* NEUTRAL_FADE */ }, /* @__PURE__ */ import_react10.default.createElement(import_react_native9.View, { style: { marginBottom: secondOverlapHeight / 2 } }), overlap && typeof overlap !== "boolean" ? overlap[0] : null)
+      ), /* @__PURE__ */ import_react10.default.createElement(
+        import_react_native9.View,
+        {
+          style: styles.secondOverlap,
+          onLayout: (event) => {
+            const { height } = event.nativeEvent.layout;
+            setSecondOverlapHeight(height);
+          }
+        },
+        overlap && typeof overlap !== "boolean" ? overlap[1] : null
+      ));
+    } else {
+      overlapView = /* @__PURE__ */ import_react10.default.createElement(import_react_native9.View, { style: styles.subOverlap }, /* @__PURE__ */ import_react10.default.createElement(
+        import_react_native9.View,
+        {
+          style: styles.overlap,
+          onLayout: (event) => {
+            const { height } = event.nativeEvent.layout;
+            setOverlapHeight(height);
+          }
+        },
+        overlap && typeof overlap !== "boolean" ? overlap[0] : null
+      ));
     }
-    return onClick ? (React.createElement(View, { ref: ref },
-        React.createElement(TouchableOpacity, { onPress: onClick, activeOpacity: 0.85 }, heroView))) : (React.createElement(View, { ref: ref, style: { width: '100%' } },
-        heroView,
-        overlapView));
-});
-Hero.displayName = ComponentName.Hero;
-export default Hero;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiSGVyby5uYXRpdmUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL2hlcm8vSGVyby5uYXRpdmUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxHQUFHLEVBQUUsTUFBTSwrQkFBK0IsQ0FBQTtBQUNuRCxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sa0NBQWtDLENBQUE7QUFFaEUsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLDBCQUEwQixDQUFBO0FBQ3hELE9BQU8sRUFBRSxhQUFhLEVBQUUsWUFBWSxFQUFFLE1BQU0scUNBQXFDLENBQUE7QUFDakYsT0FBTyxLQUFLLEVBQUUsRUFBRSxRQUFRLEVBQUUsTUFBTSxPQUFPLENBQUE7QUFDdkMsT0FBTyxFQUFFLGVBQWUsRUFBRSxVQUFVLEVBQUUsZ0JBQWdCLEVBQUUsSUFBSSxFQUFFLE1BQU0sY0FBYyxDQUFBO0FBQ2xGOzs7Ozs7Ozs7O0dBVUc7QUFDSCxNQUFNLElBQUksR0FBRyxLQUFLLENBQUMsVUFBVSxDQUMzQixDQUNFLEVBQUUsUUFBUSxFQUFFLGFBQWEsRUFBRSxPQUFPLEVBQUUsT0FBTyxFQUFFLFFBQVEsRUFBRSxlQUFlLEVBQUUsZ0JBQWdCLEVBQUUsR0FBRyxNQUFNLEVBQUUsRUFDckcsR0FBRyxFQUNVLEVBQUU7SUFDZixNQUFNLENBQUMsYUFBYSxFQUFFLGdCQUFnQixDQUFDLEdBQUcsUUFBUSxDQUFTLENBQUMsQ0FBQyxDQUFBO0lBQzdELE1BQU0sQ0FBQyxtQkFBbUIsRUFBRSxzQkFBc0IsQ0FBQyxHQUFHLFFBQVEsQ0FBUyxDQUFDLENBQUMsQ0FBQTtJQUV6RSxNQUFNLGVBQWUsR0FBRyxPQUFPLElBQUksS0FBSyxDQUFDLE9BQU8sQ0FBQyxPQUFPLENBQUMsQ0FBQyxDQUFDLENBQUMsT0FBTyxFQUFFLE1BQU0sR0FBRyxDQUFDLENBQUMsQ0FBQyxDQUFDLEtBQUssQ0FBQTtJQUN2RixNQUFNLHVCQUF1QixHQUFH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
+    return onClick ? /* @__PURE__ */ import_react10.default.createElement(import_react_native9.View, { ref }, /* @__PURE__ */ import_react10.default.createElement(import_react_native9.TouchableOpacity, { onPress: onClick, activeOpacity: 0.85 }, heroView)) : /* @__PURE__ */ import_react10.default.createElement(import_react_native9.View, { ref, style: { width: "100%" } }, heroView, overlapView);
+  }
+);
+Hero.displayName = "Hero" /* Hero */;
+var Hero_native_default = Hero;