"use strict";

import React, { createContext, memo, useContext, useMemo } from 'react';
import { View } from 'react-native';
import { jsx as _jsx } from "react/jsx-runtime";
const GridContext = /*#__PURE__*/createContext({
  gap: 0
});
GridContext.displayName = 'GridContext';
const RowComponent = function Row({
  children,
  gap = 0,
  style
}) {
  return /*#__PURE__*/_jsx(GridContext.Provider, {
    value: useMemo(() => ({
      gap
    }), [gap]),
    children: /*#__PURE__*/_jsx(View, {
      style: [{
        flexDirection: 'row',
        flex: 1,
        marginLeft: -gap / 2,
        marginRight: -gap / 2
      }, style],
      children: children
    })
  });
};
export const Row = /*#__PURE__*/memo(RowComponent);
Row.displayName = 'Row';
const ColComponent = function Col({
  children,
  width = 1,
  style
}) {
  const {
    gap
  } = useContext(GridContext);
  return /*#__PURE__*/_jsx(View, {
    style: [{
      flexDirection: 'column',
      paddingLeft: gap / 2,
      paddingRight: gap / 2,
      width: `${width * 100}%`
    }, style],
    children: children
  });
};
export const Col = /*#__PURE__*/memo(ColComponent);
Col.displayName = 'Col';
//# sourceMappingURL=index.js.map