@trilogy-ds/react 0.0.4-esm-cjs → 0.0.5-esm-cjs

package/lib/components/modal/Modal.native.js

@@ -1,623 +1,76 @@
-"use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-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/modal/Modal.native.tsx
-var Modal_native_exports = {};
-__export(Modal_native_exports, {
-  default: () => Modal_native_default
-});
-module.exports = __toCommonJS(Modal_native_exports);
-
-// helpers/device.native/index.ts
-var import_react_native = require("react-native");
-var Device = /* @__PURE__ */ ((Device3) => {
-  Device3["Browser"] = "browser";
-  Device3["Server"] = "server";
-  Device3["Native"] = "native";
-  return Device3;
-})(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_native.Platform.OS === "android";
-var isIOS = import_react_native.Platform.OS === "ios";
-
-// context/providerTheme/index.tsx
-var import_react = __toESM(require("react"));
-var defaultTheme = {
-  icons: {},
-  colors: {},
-  fontFamily: {}
-};
-var defaultContextValue = {
-  theme: defaultTheme,
-  setTheme: () => void 0
-};
-var TrilogyThemeContext = import_react.default.createContext(defaultContextValue);
-
-// objects/facets/Color/index.tsx
-var import_react2 = 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 getColorClassName = (trilogyColor) => {
-  const color = colors[trilogyColor];
-  return color[1];
-};
-var getColorStyle = (trilogyColor) => {
-  if (typeof navigator !== "undefined" && navigator.userAgent === void 0) {
-    const { theme } = (0, import_react2.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];
-  }
-};
-
-// objects/atoms/Background/index.ts
-var getBackgroundClassName = (backgroundType) => {
-  return `background-${getColorClassName(backgroundType)}`;
-};
-
-// context/index.tsx
-var React2 = __toESM(require("react"));
-var TrilogyContext = React2.createContext({
-  styled: false,
-  setStyled: () => void 0
-});
-var useTrilogyContext = () => {
-  const context = React2.useContext(TrilogyContext);
-  if (context === void 0) {
-    throw new Error("useTrilogyContext must be used within a TrilogyProvider");
-  }
-  return context;
-};
-
-// helpers/hashClassesHelpers/index.tsx
-var hashClass = (addHash = false, classes) => {
-  const { hash, styled } = useTrilogyContext();
-  if (classes.trim().length < 1) return "";
-  if (styled) {
-    return classes.split(" ").map((classe) => classe = `${classe}_${hash}`).join(" ");
-  }
-  return classes;
-};
-
-// helpers/device/index.ts
-var Device2 = /* @__PURE__ */ ((Device3) => {
-  Device3["Browser"] = "browser";
-  Device3["Server"] = "server";
-  Device3["Native"] = "native";
-  return Device3;
-})(Device2 || {});
-var { Browser: Browser2, Server: Server2, Native: Native2 } = Device2;
-var canUseDOM2 = !!(typeof window !== "undefined" && window.document && window.document.createElement);
-var canUseNative2 = typeof navigator != "undefined" && navigator.product == "ReactNative";
-var device2 = canUseNative2 ? Native2 : canUseDOM2 ? Browser2 : Server2;
-var SSRObjectDefined2 = {
-  isBrowser: device2 === Browser2,
-  isServer: device2 === Server2,
-  isNative: device2 === Native2,
-  device: device2,
-  canUseWorkers: typeof Worker !== "undefined",
-  canUseEventListeners: device2 === Browser2 && !!window.addEventListener,
-  canUseViewport: device2 === Browser2 && !!window.screen
-};
-var assign2 = (...args) => Object.assign({}, ...args);
-var values2 = (obj) => Object.values(obj);
-var toArrayObject2 = () => assign2((values2(SSRObjectDefined2), SSRObjectDefined2));
-var SSRObject2 = toArrayObject2();
-
-// objects/facets/Justifiable/index.ts
-var getJustifiedClassName = (justifyContent) => {
-  switch (justifyContent) {
-    case "ALIGNED_CENTER":
-      return "justified-center";
-    case "ALIGNED_START":
-      return "justified-start";
-    case "ALIGNED_END":
-      return "justified-end";
-    default:
-      return "justified-start";
-  }
-};
-var getJustifySelfClassName = (justifyContent) => {
-  switch (justifyContent) {
-    case "ALIGNED_CENTER":
-      return "justified-self-center";
-    case "ALIGNED_START":
-      return "justified-self-start";
-    case "ALIGNED_END":
-      return "justified-selfend";
-    default:
-      return "justified-selfstart";
-  }
-};
-
-// services/classify/index.ts
-function classify(prefix) {
-  return (classname) => classname !== "" ? `${prefix}-${classname.toLowerCase()}` : "";
-}
-var is = classify("is");
-var has = classify("has");
-
-// components/icon/Icon.tsx
-var import_clsx = __toESM(require("clsx"));
-var React3 = __toESM(require("react"));
-var Icon = React3.forwardRef(
-  (_a, ref) => {
-    var _b = _a, { className, id, size, name, circled, stretched, color, backgroundColor, onClick, skeleton, align } = _b, others = __objRest(_b, ["className", "id", "size", "name", "circled", "stretched", "color", "backgroundColor", "onClick", "skeleton", "align"]);
-    const { styled } = useTrilogyContext();
-    const background = backgroundColor && has(getBackgroundClassName(backgroundColor)) || circled && has(getBackgroundClassName("MAIN" /* MAIN */)) || "";
-    const classes = hashClass(
-      styled,
-      (0, import_clsx.default)(
-        "icon",
-        stretched && is("stretched"),
-        size && is(size),
-        circled && is("circled"),
-        circled && !color && has("text-white"),
-        color && is(`${getColorClassName(color)}`),
-        skeleton && is("loading"),
-        align && (0, import_clsx.default)(is("flex"), is(getJustifySelfClassName(align))),
-        background,
-        className
-      )
-    );
-    return /* @__PURE__ */ React3.createElement("span", __spreadProps(__spreadValues({ id, onClick: onClick && onClick, className: classes }, others), { ref }), /* @__PURE__ */ React3.createElement("i", { className: hashClass(styled, (0, import_clsx.default)(name)), "aria-hidden": "true" }));
-  }
-);
-Icon.displayName = "Icon" /* Icon */;
-var Icon_default = Icon;
-
-// objects/facets/Status/index.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 */ }
-};
-
-// objects/facets/Alignable/index.ts
-var getAlignClassName = (alignType) => {
-  switch (alignType) {
-    case "ALIGNED_CENTER":
-      return "aligned-center";
-    case "CENTER":
-      return "aligned-center";
-    case "ALIGNED_START":
-      return "aligned-start";
-    case "START":
-      return "aligned-start";
-    case "ALIGNED_END":
-      return "aligned-end";
-    case "END":
-      return "aligned-end";
-    case "STRETCH":
-      return "aligned-stretch";
-    default:
-      return "aligned-start";
-  }
-};
-
-// objects/Typography/TypographyBold/index.tsx
-var import_react3 = require("react");
-
-// components/modal/Modal.native.tsx
-var import_react8 = __toESM(require("react"));
-var import_react_native2 = require("react-native");
-var import_react_native_modal = __toESM(require("react-native-modal"));
-
-// components/columns/Columns.tsx
-var import_clsx2 = __toESM(require("clsx"));
-var import_react4 = __toESM(require("react"));
-var Columns = import_react4.default.forwardRef(
-  (_a, ref) => {
-    var _b = _a, {
-      className,
-      id,
-      multiline,
-      scrollable,
-      mobile,
-      gap,
-      fullBleed,
-      marginless,
-      align,
-      verticalAlign,
-      fullheight
-    } = _b, others = __objRest(_b, [
-      "className",
-      "id",
-      "multiline",
-      "scrollable",
-      "mobile",
-      "gap",
-      "fullBleed",
-      "marginless",
-      "align",
-      "verticalAlign",
-      "fullheight"
-    ]);
-    const { styled } = useTrilogyContext();
-    const classes = hashClass(
-      styled,
-      (0, import_clsx2.default)(
-        "columns",
-        multiline && is("multiline"),
-        fullBleed && is("fullbleed"),
-        scrollable && is("scrollable"),
-        gap && has(`gap-${gap}`),
-        typeof gap !== "undefined" && gap === 0 && is("gapless"),
-        mobile && is("mobile"),
-        align && is(getJustifiedClassName(align)),
-        verticalAlign && is(getAlignClassName(verticalAlign)),
-        marginless && is(`marginless`),
-        fullheight && is("fullheight"),
-        className
-      )
-    );
-    return /* @__PURE__ */ import_react4.default.createElement("div", __spreadValues({ ref, id, className: classes }, others));
-  }
-);
-Columns.displayName = "Columns" /* Columns */;
-var Columns_default = Columns;
-
-// components/columns/column/Column.tsx
-var import_clsx3 = __toESM(require("clsx"));
-var import_react5 = __toESM(require("react"));
-var Column = import_react5.default.forwardRef(
-  (_a, ref) => {
-    var _b = _a, {
-      className,
-      id,
-      size,
-      mobileSize,
-      tabletSize,
-      touchSize,
-      desktopSize,
-      widescreenSize,
-      fullhdSize,
-      offset,
-      mobileOffset,
-      tabletOffset,
-      touchOffset,
-      desktopOffset,
-      widescreenOffset,
-      fullhdOffset,
-      narrow,
-      verticalAlign
-    } = _b, others = __objRest(_b, [
-      "className",
-      "id",
-      "size",
-      "mobileSize",
-      "tabletSize",
-      "touchSize",
-      "desktopSize",
-      "widescreenSize",
-      "fullhdSize",
-      "offset",
-      "mobileOffset",
-      "tabletOffset",
-      "touchOffset",
-      "desktopOffset",
-      "widescreenOffset",
-      "fullhdOffset",
-      "narrow",
-      "verticalAlign"
-    ]);
-    const { styled } = useTrilogyContext();
-    const classes = hashClass(
-      styled,
-      (0, import_clsx3.default)(
-        "column",
-        size && is(`${size}`),
-        mobileSize && is(`${mobileSize}-mobile`),
-        tabletSize && is(`${tabletSize}-tablet`),
-        touchSize && is(`${touchSize}-tablet`),
-        desktopSize && is(`${desktopSize}-desktop`),
-        widescreenSize && is(`${widescreenSize}-widescreen`),
-        fullhdSize && is(`${fullhdSize}-fullhd`),
-        offset && is(`offset-${offset}`),
-        mobileOffset && is(`offset-${mobileOffset}-mobile`),
-        tabletOffset && is(`offset-${tabletOffset}-tablet`),
-        touchOffset && is(`offset-${touchOffset}-tablet`),
-        desktopOffset && is(`offset-${desktopOffset}-desktop`),
-        widescreenOffset && is(`offset-${widescreenOffset}-widescreen`),
-        fullhdOffset && is(`offset-${fullhdOffset}-fullhd`),
-        narrow && is("narrow"),
-        verticalAlign && is(getAlignClassName(verticalAlign)),
-        className
-      )
-    );
-    return /* @__PURE__ */ import_react5.default.createElement("div", __spreadValues({ ref, id, className: classes }, others));
-  }
-);
-Column.displayName = "Column" /* Column */;
-var Column_default = Column;
-
-// components/columns/column/index.ts
-var column_default = Column_default;
-
-// components/title/Title.tsx
-var import_clsx4 = __toESM(require("clsx"));
-var import_react6 = __toESM(require("react"));
-
-// components/title/TitleEnum.ts
-var TitleMarkup = /* @__PURE__ */ ((TitleMarkup2) => {
-  TitleMarkup2["H1"] = "h1";
-  TitleMarkup2["H2"] = "h2";
-  TitleMarkup2["H3"] = "h3";
-  TitleMarkup2["H4"] = "h4";
-  TitleMarkup2["H5"] = "h5";
-  TitleMarkup2["H6"] = "h6";
-  TitleMarkup2["P"] = "p";
-  TitleMarkup2["SPAN"] = "span";
-  TitleMarkup2["DIV"] = "div";
-  return TitleMarkup2;
-})(TitleMarkup || {});
-
-// components/title/Title.tsx
-var getTitleLevel = (level) => {
-  if (level) {
-    switch (level) {
-      case 1 /* ONE */:
-        return is(`level-1`);
-      case 2 /* TWO */:
-        return is(`level-2`);
-      case 3 /* THREE */:
-        return is(`level-3`);
-      case 4 /* FOUR */:
-        return is(`level-4`);
-      case 5 /* FIVE */:
-        return is(`level-5`);
-      case 6 /* SIX */:
-        return is(`level-6`);
-      default:
-        return is(`level-${level}`);
-    }
-  }
-};
-var isCorrectMarkup = (stringMarkup) => {
-  return stringMarkup in TitleMarkup || Object.values(TitleMarkup).includes(stringMarkup);
-};
-var Title = import_react6.default.forwardRef(
-  (_a, ref) => {
-    var _b = _a, {
-      level = 1 /* ONE */,
-      markup,
-      children,
-      className,
-      id,
-      typo,
-      skeleton,
-      inverted,
-      onClick,
-      accessibilityLabel,
-      subtitle,
-      overline,
-      marginless
-    } = _b, others = __objRest(_b, [
-      "level",
-      "markup",
-      "children",
-      "className",
-      "id",
-      "typo",
-      "skeleton",
-      "inverted",
-      "onClick",
-      "accessibilityLabel",
-      "subtitle",
-      "overline",
-      "marginless"
-    ]);
-    const { styled } = useTrilogyContext();
-    const classes = hashClass(
-      styled,
-      (0, import_clsx4.default)(
-        "title",
-        level && getTitleLevel(level),
-        typo,
-        skeleton && is("loading"),
-        inverted && is("inverted"),
-        marginless && is("marginless"),
-        className
-      )
-    );
-    const subtitleClasses = hashClass(styled, (0, import_clsx4.default)("subtitle", typo, className));
-    const overlineClasses = hashClass(styled, (0, import_clsx4.default)("overline", typo, className));
-    const Tag = markup && isCorrectMarkup(markup) ? markup : "p";
-    const getClassname = () => {
-      if (subtitle) return subtitleClasses;
-      if (overline) return overlineClasses;
-      return classes;
-    };
-    return /* @__PURE__ */ import_react6.default.createElement(Tag, __spreadValues({ ref, id, "aria-label": accessibilityLabel, onClick, className: getClassname() }, others), children);
-  }
-);
-Title.displayName = "Title" /* Title */;
-var Title_default = Title;
-
-// components/modal/context/ModalContext.tsx
-var import_react7 = __toESM(require("react"));
-var ModalContext = import_react7.default.createContext({
-  scrollViewRef: null,
-  handleOnScroll: () => null,
-  isFooter: false,
-  setIsFooter: () => false
-});
-
-// components/modal/Modal.native.tsx
-var Modal = import_react8.default.forwardRef(
-  (_a, ref) => {
-    var _b = _a, {
-      children,
-      active = false,
-      onClose,
-      onModalHide,
-      hideCloseButton = false,
-      unClosable = false,
-      trigger,
-      title
-    } = _b, others = __objRest(_b, [
-      "children",
-      "active",
-      "onClose",
-      "onModalHide",
-      "hideCloseButton",
-      "unClosable",
-      "trigger",
-      "title"
-    ]);
-    const scrollViewRef = (0, import_react8.useRef)(null);
-    const [scrollOffset, setScrollOffset] = (0, import_react8.useState)(0);
-    const [visible, setVisible] = (0, import_react8.useState)(active || false);
-    const [isFooter, setIsFooter] = (0, import_react8.useState)(active || false);
+import { ComponentName } from '../../components/enumsComponentsName';
+import { isAndroid } from '../../helpers/device/index.native';
+import { Alignable, getColorStyle, TrilogyColor } from '../../objects/index.native';
+import React, { useEffect, useRef, useState } from 'react';
+import { Dimensions, StyleSheet, TouchableOpacity, View, } from 'react-native';
+import ModalRN from 'react-native-modal';
+import { Column, Columns } from '../columns/index.native';
+import { Icon, IconName, IconSize } from '../icon/index.native';
+import { Title } from '../title/index.native';
+import { ModalContext } from './context/ModalContext';
+/**
+ * Modal Component
+ * @param active {boolean} Activated Modal
+ * @param title {string} Title Modal
+ * @param onClose {Function} Additional close custom function
+ * @param onOpen {Function} Additional open custom function
+ * @param children {React.ReactNode}
+ * @param onModalHide {Function} Callback on Hide
+ * @param unClosable {boolean} unClosable Native Modal
+ */
+const Modal = React.forwardRef(({ children, active = false, onClose, onModalHide, hideCloseButton = false, unClosable = false, trigger, title, ...others }, ref) => {
+    const scrollViewRef = useRef(null);
+    const [scrollOffset, setScrollOffset] = useState(0);
+    const [visible, setVisible] = useState(active || false);
+    const [isFooter, setIsFooter] = useState(active || false);
     const handleOnScroll = (event) => {
-      setScrollOffset(event.nativeEvent.contentOffset.y);
+        setScrollOffset(event.nativeEvent.contentOffset.y);
     };
     const handleScrollTo = (p) => {
-      if (scrollViewRef.current) scrollViewRef.current.scrollTo(p);
+        if (scrollViewRef.current)
+            scrollViewRef.current.scrollTo(p);
     };
     const handleClose = (e) => {
-      if (onClose) onClose(e);
-      setVisible(false);
+        if (onClose)
+            onClose(e);
+        setVisible(false);
     };
-    (0, import_react8.useEffect)(() => {
-      setVisible(active);
+    useEffect(() => {
+        setVisible(active);
     }, [active]);
-    return /* @__PURE__ */ import_react8.default.createElement(ModalContext.Provider, { value: { scrollViewRef, handleOnScroll, isFooter, setIsFooter } }, trigger, /* @__PURE__ */ import_react8.default.createElement(
-      import_react_native_modal.default,
-      __spreadValues({
-        isVisible: visible,
-        onBackdropPress: () => handleClose({}),
-        onSwipeComplete: handleClose,
-        swipeDirection: unClosable ? void 0 : ["down"],
-        scrollTo: handleScrollTo,
-        scrollOffset,
-        scrollOffsetMax: 100,
-        propagateSwipe: true,
-        style: [styles.modal],
-        onModalHide
-      }, others),
-      /* @__PURE__ */ import_react8.default.createElement(import_react_native2.View, { ref, style: [styles.body, { backgroundColor: getColorStyle("WHITE" /* BACKGROUND */) }] }, /* @__PURE__ */ import_react8.default.createElement(import_react_native2.View, { style: { paddingVertical: !title && hideCloseButton ? 8 : 16 } }, /* @__PURE__ */ import_react8.default.createElement(Columns_default, { verticalAlign: "ALIGNED_CENTER" /* ALIGNED_CENTER */ }, /* @__PURE__ */ import_react8.default.createElement(column_default, null, /* @__PURE__ */ import_react8.default.createElement(Title_default, { level: 4 }, title)), !hideCloseButton && /* @__PURE__ */ import_react8.default.createElement(column_default, { narrow: true }, /* @__PURE__ */ import_react8.default.createElement(import_react_native2.TouchableOpacity, { onPress: handleClose }, /* @__PURE__ */ import_react8.default.createElement(Icon_default, { name: "tri-times" /* TIMES */, size: "medium" /* MEDIUM */, color: "MAIN" /* MAIN */ }))))), children)
-    ));
-  }
-);
-Modal.displayName = "Modal" /* Modal */;
-var Modal_native_default = Modal;
-var styles = import_react_native2.StyleSheet.create({
-  modal: {
-    justifyContent: "flex-end",
-    margin: 0
-  },
-  body: {
-    paddingHorizontal: 16,
-    maxHeight: isAndroid ? import_react_native2.Dimensions.get("screen").height / 1.15 : import_react_native2.Dimensions.get("screen").height / 1.1,
-    shadowColor: "#000",
-    shadowOffset: {
-      width: 0,
-      height: 2
+    return (React.createElement(ModalContext.Provider, { value: { scrollViewRef, handleOnScroll, isFooter, setIsFooter } },
+        trigger,
+        React.createElement(ModalRN, { isVisible: visible, onBackdropPress: () => handleClose({}), onSwipeComplete: handleClose, swipeDirection: unClosable ? undefined : ['down'], scrollTo: handleScrollTo, scrollOffset: scrollOffset, scrollOffsetMax: 100, propagateSwipe: true, style: [styles.modal], onModalHide: onModalHide, ...others },
+            React.createElement(View, { ref: ref, style: [styles.body, { backgroundColor: getColorStyle(TrilogyColor.BACKGROUND) }] },
+                React.createElement(View, { style: { paddingVertical: !title && hideCloseButton ? 8 : 16 } },
+                    React.createElement(Columns, { verticalAlign: Alignable.ALIGNED_CENTER },
+                        React.createElement(Column, null,
+                            React.createElement(Title, { level: 4 }, title)),
+                        !hideCloseButton && (React.createElement(Column, { narrow: true },
+                            React.createElement(TouchableOpacity, { onPress: handleClose },
+                                React.createElement(Icon, { name: IconName.TIMES, size: IconSize.MEDIUM, color: TrilogyColor.MAIN })))))),
+                children))));
+});
+Modal.displayName = ComponentName.Modal;
+export default Modal;
+const styles = StyleSheet.create({
+    modal: {
+        justifyContent: 'flex-end',
+        margin: 0,
+    },
+    body: {
+        paddingHorizontal: 16,
+        maxHeight: isAndroid ? Dimensions.get('screen').height / 1.15 : Dimensions.get('screen').height / 1.1,
+        shadowColor: '#000',
+        shadowOffset: {
+            width: 0,
+            height: 2,
+        },
+        shadowOpacity: 0.25,
+        shadowRadius: 3.84,
+        elevation: 5,
+        borderTopLeftRadius: 6,
+        borderTopRightRadius: 6,
     },
-    shadowOpacity: 0.25,
-    shadowRadius: 3.84,
-    elevation: 5,
-    borderTopLeftRadius: 6,
-    borderTopRightRadius: 6
-  }
 });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiTW9kYWwubmF0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vY29tcG9uZW50cy9tb2RhbC9Nb2RhbC5uYXRpdmUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxrQ0FBa0MsQ0FBQTtBQUNoRSxPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sK0JBQStCLENBQUE7QUFDekQsT0FBTyxFQUFFLFNBQVMsRUFBRSxhQUFhLEVBQUUsWUFBWSxFQUFFLE1BQU0sd0JBQXdCLENBQUE7QUFDL0UsT0FBTyxLQUFLLEVBQUUsRUFBRSxTQUFTLEVBQUUsTUFBTSxFQUFFLFFBQVEsRUFBRSxNQUFNLE9BQU8sQ0FBQTtBQUMxRCxPQUFPLEVBQ0wsVUFBVSxFQUtWLFVBQVUsRUFDVixnQkFBZ0IsRUFDaEIsSUFBSSxHQUNMLE1BQU0sY0FBYyxDQUFBO0FBQ3JCLE9BQU8sT0FBa0MsTUFBTSxvQkFBb0IsQ0FBQTtBQUNuRSxPQUFPLEVBQUUsTUFBTSxFQUFFLE9BQU8sRUFBRSxNQUFNLHlCQUF5QixDQUFBO0FBQ3pELE9BQU8sRUFBRSxJQUFJLEVBQUUsUUFBUSxFQUFFLFFBQVEsRUFBRSxNQUFNLHNCQUFzQixDQUFBO0FBQy9ELE9BQU8sRUFBRSxLQUFLLEVBQUUsTUFBTSx1QkFBdUIsQ0FBQTtBQUU3QyxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0sd0JBQXdCLENBQUE7QUFFckQ7Ozs7Ozs7OztHQVNHO0FBQ0gsTUFBTSxLQUFLLEdBQUcsS0FBSyxDQUFDLFVBQVUsQ0FDNUIsQ0FDRSxFQUNFLFFBQVEsRUFDUixNQUFNLEdBQUcsS0FBSyxFQUNkLE9BQU8sRUFDUCxXQUFXLEVBQ1gsZUFBZSxHQUFHLEtBQUssRUFDdkIsVUFBVSxHQUFHLEtBQUssRUFDbEIsT0FBTyxFQUNQLEtBQUssRUFDTCxHQUFHLE1BQU0sRUFDVixFQUNELEdBQUcsRUFDVSxFQUFFO0lBQ2YsTUFBTSxhQUFhLEdBQUcs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