jornada-ui 0.2.4

package/src/common/icons-svg/plus/index.tsx

@@ -0,0 +1,40 @@
+/**
+ * IMPORTS
+ */
+import * as React from "react";
+import Svg, { Path, Defs, G, ClipPath } from "react-native-svg";
+
+//typings
+import { type ISvgProps } from "../interface";
+
+const SvgIconPlus: React.FC<ISvgProps> = ({ color, size, ...res }) => (
+  <Svg
+    //@ts-ignore
+    xmlns="http://www.w3.org/2000/svg"
+    width={size ?? 24}
+    height={size ?? 24}
+    fill="none"
+    viewBox={`0 0 ${size ?? "24"} ${size ?? "24"}`}
+    {...res}
+  >
+    <G
+      stroke={color ?? "#2D3748"}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+      clipPath="url(#clip0_136_1292)"
+    >
+      <Path d="M3.75 12h16.5M12 3.75v16.5"></Path>
+    </G>
+    <Defs>
+      <ClipPath id="clip0_136_1292">
+        <Path fill={color ?? "#fff"} d="M0 0h24v24H0z"></Path>
+      </ClipPath>
+    </Defs>
+  </Svg>
+);
+
+/**
+ * EXPORTS
+ */
+export { SvgIconPlus };

package/src/common/icons-svg/recused/index.tsx

@@ -0,0 +1,33 @@
+/**
+ * IMPORTS
+ */
+import * as React from "react";
+import Svg, { Path, Circle } from "react-native-svg";
+
+// typings
+import { type ISvgProps } from "../interface";
+
+const SvgIconRecused: React.FC<ISvgProps> = ({ color, size, background }) => (
+  <Svg
+    // @ts-ignore
+    xmlns="http://www.w3.org/2000/svg"
+    width={size ?? "36"}
+    height={size ?? "36"}
+    fill="none"
+    viewBox="0 0 36 36"
+  >
+    <Circle cx="18" cy="18" r="18" fill={background ?? "#931818"}></Circle>
+    <Path
+      stroke={color ?? "#fff"}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="1.5"
+      d="m24.075 11.925-12.15 12.15M24.075 24.075l-12.15-12.15"
+    ></Path>
+  </Svg>
+);
+
+/**
+ * EXPORTS
+ */
+export { SvgIconRecused };

package/src/common/icons-svg/shopping-cart/index.tsx

@@ -0,0 +1,39 @@
+/**
+ * IMPORTS
+ */
+import React from "react";
+import Svg, { Path } from "react-native-svg";
+/**
+ * typings
+ */
+import { type ISvgProps } from "../interface";
+
+const IconShoppingCart: React.FC<ISvgProps> = ({ color, size, ...res }) => (
+  <Svg
+    //@ts-ignore
+    xmlns="http://www.w3.org/2000/svg"
+    width={size ?? 24}
+    height={size ?? 24}
+    fill="none"
+    viewBox="0 0 24 24"
+    {...res}
+  >
+    <Path
+      stroke={color ?? "#fff"}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M7 23a1 1 0 100-2 1 1 0 000 2zM18 23a1 1 0 100-2 1 1 0 000 2zM1.05 3.05h2l2.66 12.42a2 2 0 002 1.58h9.78a2 2 0 001.95-1.57l1.65-7.43m-16.97 0h10.242"
+    ></Path>
+    <Path
+      stroke={color ?? "#fff"}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M21 5l-8.938 10L8 10.454"
+    ></Path>
+  </Svg>
+);
+
+/**
+ * EXPORTS
+ */
+export { IconShoppingCart };

package/src/common/icons-svg/steering-wheel/index.tsx

@@ -0,0 +1,49 @@
+/**
+ * IMPORTS
+ */
+import * as React from "react";
+import Svg, { Path, Defs, G, ClipPath } from "react-native-svg";
+
+//typings
+import { type ISvgProps } from "../interface";
+
+const SvgIconSteeringWheel: React.FC<ISvgProps> = ({ color, size }) => (
+  <Svg
+    //@ts-ignore
+    xmlns="http://www.w3.org/2000/svg"
+    width={size ?? 24}
+    height={size ?? 24}
+    fill="none"
+  >
+    <G clipPath="url(#a)">
+      <Path
+        fill={color ?? "#050022"}
+        d="M12.455 14.254a.938.938 0 1 0 0-1.875.938.938 0 0 0 0 1.875Z"
+      />
+      <Path
+        stroke={color ?? "#050022"}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={1.5}
+        d="M12.455 21.192a9 9 0 1 0 0-18 9 9 0 0 0 0 18Z"
+      />
+      <Path
+        stroke={color ?? "#050022"}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={1.5}
+        d="M3.605 13.837a12 12 0 0 1 17.7 0M11.687 21.159l-2.05-5.48a.75.75 0 0 0-.702-.487H3.966M13.22 21.16l2.052-5.482a.75.75 0 0 1 .704-.486h4.968"
+      />
+    </G>
+    <Defs>
+      <ClipPath id="a">
+        <Path fill="#fff" d="M.455.192h24v24h-24z" />
+      </ClipPath>
+    </Defs>
+  </Svg>
+);
+
+/**
+ * EXPORTS
+ */
+export { SvgIconSteeringWheel };

package/src/common/icons-svg/steering-wheel-fill/index.tsx

@@ -0,0 +1,36 @@
+/**
+ * IMPORTS
+ */
+import * as React from "react";
+import Svg, { Path, G, ClipPath, Defs } from "react-native-svg";
+
+//typings
+import { type ISvgProps } from "../interface";
+
+const SvgIconSteeringWheelFill: React.FC<ISvgProps> = ({ color, size }) => (
+  <Svg
+    //@ts-ignore
+    xmlns="http://www.w3.org/2000/svg"
+    width={size ?? 24}
+    height={size ?? 24}
+    fill="none"
+    viewBox="0 0 24 24"
+  >
+    <G clipPath="url(#clip0_7394_1995)">
+      <Path
+        fill={color ?? "#050022"}
+        d="M12 2.25A9.75 9.75 0 1 0 21.75 12 9.77 9.77 0 0 0 12 2.25m5.25 10.5H12a.75.75 0 0 1-.75-.75V6.75a.75.75 0 1 1 1.5 0v4.5h4.5a.75.75 0 1 1 0 1.5"
+      ></Path>
+    </G>
+    <Defs>
+      <ClipPath id="clip0_7394_1995">
+        <Path fill="#fff" d="M0 0h24v24H0z"></Path>
+      </ClipPath>
+    </Defs>
+  </Svg>
+);
+
+/**
+ * EXPORTS
+ */
+export { SvgIconSteeringWheelFill };

package/src/common/icons-svg/timer/index.tsx

@@ -0,0 +1,39 @@
+/**
+ * IMPORTS
+ */
+import * as React from "react";
+import Svg, { Path, Defs, G, ClipPath } from "react-native-svg";
+
+//typings
+import { type ISvgProps } from "../interface";
+
+const SvgIconTimer: React.FC<ISvgProps> = ({ color, size }) => (
+  <Svg
+    //@ts-ignore
+    xmlns="http://www.w3.org/2000/svg"
+    width={size ?? 24}
+    height={size ?? 24}
+    fill="none"
+    viewBox="0 0 24 24"
+  >
+    <G
+      stroke={color ?? "#050022"}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+      clipPath="url(#clip0_52_223)"
+    >
+      <Path d="M12 21a8.25 8.25 0 100-16.5A8.25 8.25 0 0012 21zM12 12.75L15.75 9M9.75 1.5h4.5"></Path>
+    </G>
+    <Defs>
+      <ClipPath id="clip0_52_223">
+        <Path fill="#fff" d="M0 0H24V24H0z"></Path>
+      </ClipPath>
+    </Defs>
+  </Svg>
+);
+
+/**
+ * EXPORTS
+ */
+export { SvgIconTimer };

package/src/common/icons-svg/trophy/index.tsx

@@ -0,0 +1,29 @@
+/**
+ * IMPORTS
+ */
+import * as React from "react";
+import Svg, { Path } from "react-native-svg";
+
+//typings
+import { type ISvgProps } from "../interface";
+
+const SvgIconTrophy: React.FC<ISvgProps> = ({ color, size }) => (
+  <Svg
+    //@ts-ignore
+    xmlns="http://www.w3.org/2000/svg"
+    width={size ?? 24}
+    height={size ?? 24}
+    fill="none"
+    viewBox="0 0 24 24"
+  >
+    <Path
+      fill={color ?? "#050022"}
+      d="M22 8.25h-2.25v-1.5A.75.75 0 0 0 19 6H5.5a.75.75 0 0 0-.75.75v1.5H2.5A1.5 1.5 0 0 0 1 9.75v1.5A3.75 3.75 0 0 0 4.75 15h.342a7.51 7.51 0 0 0 6.408 5.213V22.5H9.25a.75.75 0 1 0 0 1.5h6a.75.75 0 1 0 0-1.5H13v-2.29c2.994-.302 5.479-2.403 6.383-5.21h.367a3.75 3.75 0 0 0 3.75-3.75v-1.5a1.5 1.5 0 0 0-1.5-1.5M4.75 13.5a2.25 2.25 0 0 1-2.25-2.25v-1.5h2.25v3q0 .375.037.75zm13.5-.834c0 3.33-2.719 6.06-6 6.084a6 6 0 0 1-6-6V7.5h12zM22 11.25a2.25 2.25 0 0 1-2.25 2.25h-.047q.046-.416.047-.834V9.75H22z"
+    ></Path>
+  </Svg>
+);
+
+/**
+ * EXPORTS
+ */
+export { SvgIconTrophy };

package/src/common/icons-svg/truck/index.tsx

@@ -0,0 +1,39 @@
+/**
+ * IMPORTS
+ */
+import React from "react";
+import Svg, { Path } from "react-native-svg";
+/**
+ * typings
+ */
+import { type ISvgProps } from "../interface";
+
+const IconTruck: React.FC<ISvgProps> = ({ color, size, ...res }) => (
+  <Svg
+    //@ts-ignore
+    xmlns="http://www.w3.org/2000/svg"
+    width={size ?? 24}
+    height={size ?? 24}
+    fill="none"
+    viewBox="0 0 24 24"
+    {...res}
+  >
+    <Path
+      stroke={color ?? "#fff"}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M10 17h4V5H2v12h3M20 17h2v-3.34a4 4 0 00-1.17-2.83L19 9h-5M14 17h1"
+    ></Path>
+    <Path
+      stroke={color ?? "#fff"}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M7.5 20a2.5 2.5 0 100-5 2.5 2.5 0 000 5zM17.5 20a2.5 2.5 0 100-5 2.5 2.5 0 000 5z"
+    ></Path>
+  </Svg>
+);
+
+/**
+ * EXPORTS
+ */
+export { IconTruck };

package/src/common/icons-svg/truck-trailer/index.tsx

@@ -0,0 +1,36 @@
+/**
+ * IMPORTS
+ */
+import * as React from "react";
+import Svg, { G, Path, Defs, ClipPath } from "react-native-svg";
+
+//typings
+import type { ISvgProps } from "../interface";
+
+const SvgTruckTrailer: React.FC<ISvgProps> = ({ color, size }) => (
+  <Svg
+    //@ts-ignore
+    xmlns="http://www.w3.org/2000/svg"
+    width={size ?? "32"}
+    height={size ?? "32"}
+    fill="none"
+    viewBox={`0 0 ${size ?? "32"} ${size ?? "32"}`}
+  >
+    <G clipPath="url(#clip0_472_2058)">
+      <Path
+        fill={color ?? "#fff"}
+        d="M28 12.1V12a7.01 7.01 0 0 0-7-7h-1a2 2 0 0 0-2 2v15h-2V9a1 1 0 0 0-1-1H2a2 2 0 0 0-2 2v13a4 4 0 0 0 7 2.641A4 4 0 0 0 13.875 24h10.25A4 4 0 0 0 32 23v-6a5.01 5.01 0 0 0-4-4.9M4 25a2 2 0 1 1 0-4 2 2 0 0 1 0 4m6 0a2 2 0 1 1 0-4 2 2 0 0 1 0 4m18 0a2 2 0 1 1 0-4 2 2 0 0 1 0 4"
+      ></Path>
+    </G>
+    <Defs>
+      <ClipPath id="clip0_472_2058">
+        <Path fill={color ?? "#fff"} d="M0 0h32v32H0z"></Path>
+      </ClipPath>
+    </Defs>
+  </Svg>
+);
+
+/**
+ * EXPORTS
+ */
+export { SvgTruckTrailer };

package/src/common/icons-svg/wifi-high/index.tsx

@@ -0,0 +1,43 @@
+/**
+ * IMPORTS
+ */
+import * as React from "react";
+import Svg, { Path, Defs, G, ClipPath } from "react-native-svg";
+
+//typings
+import { type ISvgProps } from "../interface";
+
+const SvgIconWiFiHigh: React.FC<ISvgProps> = ({ color, size }) => (
+  <Svg
+    //@ts-ignore
+    xmlns="http://www.w3.org/2000/svg"
+    width={size ?? "25"}
+    height={size ?? "25"}
+    fill="none"
+    viewBox="0 0 25 25"
+  >
+    <G clipPath="url(#clip0_912_107)">
+      <Path
+        fill={color ?? "#0DEC08"}
+        d="M12.56 20.767a1.125 1.125 0 100-2.25 1.125 1.125 0 000 2.25z"
+      ></Path>
+      <Path
+        stroke={color ?? "#0DEC08"}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2"
+        d="M22.31 9.253a15.375 15.375 0 00-19.5 0M19.31 12.61a10.875 10.875 0 00-13.5 0M16.31 15.985a6.375 6.375 0 00-7.5 0"
+      ></Path>
+    </G>
+    <Defs>
+      <ClipPath id="clip0_912_107">
+        <Path fill="#fff" d="M0 0H24V24H0z" transform="translate(.56 .517)"></Path>
+      </ClipPath>
+    </Defs>
+  </Svg>
+);
+
+/**
+ * EXPORTS
+ */
+export { SvgIconWiFiHigh };

package/src/common/icons-svg/wifi-x/index.tsx

@@ -0,0 +1,50 @@
+/**
+ * IMPORTS
+ */
+import * as React from "react";
+import Svg, { Path, Defs, G, ClipPath } from "react-native-svg";
+
+//typings
+import { type ISvgProps } from "../interface";
+
+const SvgIconWiFiX: React.FC<ISvgProps> = ({ color, size }) => (
+  <Svg
+    //@ts-ignore
+    xmlns="http://www.w3.org/2000/svg"
+    width={size ?? "25"}
+    height={size ?? "25"}
+    fill="none"
+    viewBox="0 0 25 25"
+  >
+    <G clipPath="url(#clip0_912_99)">
+      <Path
+        stroke={color ?? "#E72626"}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2"
+        d="M21.56 5.767l-4.5 4.5M21.56 10.267l-4.5-4.5"
+      ></Path>
+      <Path
+        fill={color ?? "#E72626"}
+        d="M12.56 20.767a1.125 1.125 0 100-2.25 1.125 1.125 0 000 2.25z"
+      ></Path>
+      <Path
+        stroke={color ?? "#E72626"}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2"
+        d="M16.31 15.985a6.375 6.375 0 00-7.5 0M14.06 5.839a15.433 15.433 0 00-1.5-.072 15.31 15.31 0 00-9.75 3.486M14.06 10.369a11.004 11.004 0 00-1.5-.102c-2.45-.005-4.83.82-6.75 2.343"
+      ></Path>
+    </G>
+    <Defs>
+      <ClipPath id="clip0_912_99">
+        <Path fill="#fff" d="M0 0H24V24H0z" transform="translate(.56 .517)"></Path>
+      </ClipPath>
+    </Defs>
+  </Svg>
+);
+
+/**
+ * EXPORTS
+ */
+export { SvgIconWiFiX };

package/src/common/icons-svg/x-circle/index.tsx

@@ -0,0 +1,40 @@
+/**
+ * IMPORTS
+ */
+import React from "react";
+import Svg, { Path, G, Defs, ClipPath } from "react-native-svg";
+/**
+ * typings
+ */
+import { type ISvgProps } from "../interface";
+
+const SvgIconXCirle: React.FC<ISvgProps> = ({ color, size }) => (
+  <Svg
+    // @ts-expect-error
+    xmlns="http://www.w3.org/2000/svg"
+    width={size ?? 18}
+    height={size ?? 18}
+    fill="none"
+    viewBox={`0 0 ${size ?? "18"} ${size ?? "18"}`}
+  >
+    <G
+      stroke={color ?? "#931818"}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+      clipPath="url(#clip0_136_1156)"
+    >
+      <Path d="m11.25 6.75-4.5 4.5M6.75 6.75l4.5 4.5M9 15.75a6.75 6.75 0 1 0 0-13.5 6.75 6.75 0 0 0 0 13.5"></Path>
+    </G>
+    <Defs>
+      <ClipPath id="clip0_136_1156">
+        <Path fill="#fff" d="M0 0h18v18H0z"></Path>
+      </ClipPath>
+    </Defs>
+  </Svg>
+);
+
+/**
+ * EXPORTS
+ */
+export { SvgIconXCirle };

package/src/components/box/index.tsx

@@ -0,0 +1,53 @@
+/**
+ * IMPORTS
+ */
+import React, { forwardRef } from "react";
+import { View } from "react-native";
+
+// typings
+import { asBaseComponent } from "../../@types/as-base-component";
+import type { IBoxInterface } from "./interface";
+
+// styles
+import { styles } from "./styles";
+
+const Box = forwardRef<any, IBoxInterface>((props, ref): React.ReactElement => {
+  const {
+    children,
+    width,
+    height,
+    backgroundColor,
+    borderStyled,
+    flexStyle,
+    paddingStyle,
+    marginStyle,
+    opacity = 1,
+    testID = "box",
+    style,
+  } = props;
+
+  const styleProps = {
+    width,
+    height,
+    backgroundColor,
+    borderStyled,
+    flexStyle,
+    paddingStyle,
+    marginStyle,
+    opacity,
+    style,
+  };
+
+  return (
+    <View ref={ref} testID={testID} style={[styles(styleProps).boxStyle, style]}>
+      {children}
+    </View>
+  );
+});
+
+Box.displayName = "Box";
+
+/**
+ * Componente Box para a interação da  ui.
+ */
+export default asBaseComponent(Box);

package/src/components/box/interface.d.ts

@@ -0,0 +1,147 @@
+/**
+ * IMPORTS
+ */
+
+import type React from "react";
+import { type DimensionValue, type ViewProps as RNViewProps } from "react-native";
+
+import type { theme } from "../../styles/theme/theme";
+
+type IBoxInterface = RNViewProps & {
+  /**
+   * A propriedade JSX que define um elemento ou componente filho.
+   */
+  children?: React.ReactNode;
+
+  /**
+   * TestID para testes automático e identificação
+   */
+  testID?: string;
+
+  /**
+   * A propriedade CSS abreviada border define a borda de um elemento. Ele define os valores de largura da borda, estilo da borda e cor da borda.
+   */
+  borderStyled?: {
+    borderStyle?: "solid" | "dotted" | "dashed";
+
+    borderRadius?: number | DimensionValue;
+    borderTopRightRadius?: number | DimensionValue;
+    borderTopLeftRadius?: number | DimensionValue;
+    borderBottomRightRadius?: number | DimensionValue;
+    borderBottomLeftRadius?: number | DimensionValue;
+
+    borderWidth?: number | DimensionValue;
+    borderLeftWidth?: number | DimensionValue;
+    borderRightWidth?: number | DimensionValue;
+    borderTopWidth?: number | DimensionValue;
+    borderBottomWidth?: number | DimensionValue;
+
+    borderColor?: string;
+    borderBottomColor?: string;
+    borderLeftColor?: string;
+    borderRightColor?: string;
+    borderTopColor?: string;
+  };
+
+  /**
+   * Propriedades que define a orientação do button que é usada para representar uma página. Na maioria das vezes, esse valores corresponde ao posicionamento alvo da página impressa, se aplicável.
+   */
+  flexStyle?: {
+    alignItems?: "flex-start" | "flex-end" | "center" | "stretch" | "baseline";
+    alignSelf?: "auto" | "flex-start" | "flex-end" | "center" | "stretch" | "baseline";
+    flex?: string | number;
+    flexDirection?: "column" | "column-reverse" | "row" | "row-reverse";
+    flexWrap?: "nowrap" | "wrap" | "wrap-reverse";
+    textAlign?: "auto" | "center" | "left" | "right" | "justify";
+    justifyContent?:
+      | "flex-start"
+      | "flex-end"
+      | "center"
+      | "space-between"
+      | "space-around"
+      | "space-evenly";
+  };
+
+  /**
+   * A propriedade margin do CSS define a área de margem nos quatro lados do elemento. É uma abreviação que define todas as margens individuais de uma só vez: margin-top, margin-right (en-US), margin-bottom, e margin-left (en-US).
+   */
+  marginStyle?: {
+    margin?: number | DimensionValue;
+    marginLeft?: number | DimensionValue;
+    marginRight?: number | DimensionValue;
+    marginTop?: number | DimensionValue;
+    marginBottom?: number | DimensionValue;
+  };
+
+  /**
+   * A propriedade padding define uma a distância entre o conteúdo de um elemento e suas bordas. É um atalho que evita definir uma distância para cada lado separadamente (padding-top, padding-right, padding-bottom, padding-left).
+   */
+  paddingStyle?: {
+    padding?: number | DimensionValue;
+    paddingLeft?: number | DimensionValue;
+    paddingRight?: number | DimensionValue;
+    paddingTop?: number | DimensionValue;
+    paddingBottom?: number | DimensionValue;
+  };
+
+  /**
+   * A propriedade CSS height define a altura de um elemento. A altura de um elemento é a distância do topo da borda superior do elemento ao fundo da borda inferior.
+   */
+  height?: number | DimensionValue;
+
+  /**
+   * A propriedade CSS width define a largura de um elemento. A largura de um elemento é a distância do topo da borda esquerda do elemento ao fundo da borda direita.
+   */
+  width?: number | DimensionValue;
+
+  /**
+   * O fundo abreviado CSS Propriedade define todas as propriedades do estilo de fundo de uma só vez, como cor, imagem, origem e tamanho ou método de repetição. As propriedades dos componentes não definidas no fundo da declaração de valor da propriedade abreviada são definidas como seus valores padrão..
+   */
+  backgroundColor?: string;
+
+  /**
+   * Propriedade texto que sera renderizado pro usuário final
+   */
+  text?: string;
+
+  /**
+   * A propriedade CSS color define o valor da cor de primeiro plano do texto e das decorações de texto de um elemento e define o valor currentcolor. currentcolor pode ser usado como um valor indireto em outras propriedades e é o padrão para outras propriedades de cores, como border-color.
+   */
+  color?: {
+    colorSvg?: string;
+    colorText?: string;
+    colorTextBold?: string;
+    colorTextData?: string;
+  };
+
+  /**
+   * A propriedade abreviada CSS da fonte define todas as propriedades diferentes da fonte de um elemento. Alternativamente, ele define a fonte de um elemento como uma fonte do sistema.
+   */
+  fontStyle?: {
+    font?: string;
+    fontSize?: number;
+    fontWeight?: "100" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | "bold";
+    fontFamily?: string;
+    letterSpacing?: keyof typeof theme.letterSpacing;
+    lineHeight?: number;
+  };
+  /**
+   * A propriedade CSS de Shadow Box adiciona efeitos de sombra em torno da estrutura de um elemento. Você pode definir vários efeitos separados por vírgulas. Uma sombra de caixa é descrita por compensações x e y em relação ao elemento, borrão e raio espalhado e cor.
+   */
+  boxShadow?: string;
+
+  /**
+   * O fundo abreviado CSS Propriedade define todas as propriedades do estilo de fundo de uma só vez, como cor, imagem, origem e tamanho ou método de repetição. As propriedades dos componentes não definidas no fundo da declaração de valor da propriedade abreviada são definidas como seus valores padrão..
+   */
+  backgroundColor?: string;
+
+  /**
+   * A propriedade CSS opacity define a transparência de um elemento, ou seja, o grau em que o fundo atrás do elemento é sobreposto. A propriedade aceita um valor entre 0,0 (totalmente transparente) e 1,0 (totalmente opaco).
+   */
+  opacity?: number;
+};
+
+/**
+ * EXPORT
+ */
+export { IBoxInterface };