@trilogy-ds/react 0.0.1-beta.9 → 0.0.4-beta-v4

package/lib/components/title/TitleProps.d.ts

@@ -1,23 +1,20 @@
 /// <reference types="react" />
+import { Accessibility, Clickable, Dev, Invertable, Marginless, TypographyAlign, TypographyAlignValues, TypographyBold, TypographyBoldValues, TypographyColor, TypographyColorValues, TypographyTransform, TypographyTransformValues } from '../../objects';
 import { TitleLevels, TitleLevelValues, TitleMarkup, TitleMarkupValues } from './TitleEnum';
-import { TypographyColor, TypographyColorValues, TypographyTransform, TypographyTransformValues, TypographyBold, TypographyBoldValues, TypographyAlign, TypographyAlignValues, Accessibility, Invertable, Marginless, Clickable } from '../../objects';
+import { CommonProps } from '../../objects/facets/CommonProps';
 type Styles = {
     [key: string]: unknown;
 };
 /**
  * Title Interface
  */
-export interface TitleProps extends Invertable, Accessibility, Clickable, Marginless {
+export interface TitleProps extends Invertable, Accessibility, Clickable, Marginless, Dev, CommonProps {
     children?: React.ReactNode;
     level?: TitleLevelValues | TitleLevels;
-    loading?: boolean;
     typo?: TypographyColor | TypographyColorValues | TypographyTransform | TypographyTransformValues | TypographyBold | TypographyBoldValues | TypographyAlign | TypographyAlignValues | Array<string> | string;
     skeleton?: boolean;
-    className?: string;
-    href?: string;
     markup?: TitleMarkup | TitleMarkupValues;
     style?: Styles;
-    htmlContent?: string;
     subtitle?: boolean;
     overline?: boolean;
 }

package/lib/components/title/TitleProps.js

@@ -1,2 +1,2 @@
 export {};
-//# sourceMappingURL=TitleProps.js.map
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiVGl0bGVQcm9wcy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL2NvbXBvbmVudHMvdGl0bGUvVGl0bGVQcm9wcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiIn0=

package/lib/components/title/TitlePropsDefaults.js

@@ -0,0 +1,142 @@
+export default {
+  "children": {
+    "type": "react",
+    "values": [
+      "undefined",
+      "null",
+      "string",
+      "number",
+      "false",
+      "true",
+      "JSXElementConstructor<any>>",
+      "ReactNode>",
+      "ReactPortal"
+    ]
+  },
+  "level": {
+    "type": "enum",
+    "values": [
+      "undefined",
+      1,
+      2,
+      3,
+      4,
+      5,
+      6
+    ]
+  },
+  "typo": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string",
+      "string[]"
+    ]
+  },
+  "skeleton": {
+    "type": "boolean",
+    "values": [
+      "undefined",
+      "false",
+      "true"
+    ]
+  },
+  "markup": {
+    "type": "enum",
+    "values": [
+      "undefined",
+      "div",
+      "h1",
+      "h2",
+      "h3",
+      "h4",
+      "h5",
+      "h6",
+      "p",
+      "span",
+      "h1",
+      "h2",
+      "h3",
+      "h4",
+      "h5",
+      "h6",
+      "p",
+      "span",
+      "div"
+    ]
+  },
+  "style": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "Styles"
+    ]
+  },
+  "subtitle": {
+    "type": "boolean",
+    "values": [
+      "undefined",
+      "false",
+      "true"
+    ]
+  },
+  "overline": {
+    "type": "boolean",
+    "values": [
+      "undefined",
+      "false",
+      "true"
+    ]
+  },
+  "inverted": {
+    "type": "boolean",
+    "values": [
+      "undefined",
+      "false",
+      "true"
+    ]
+  },
+  "accessibilityLabel": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  },
+  "onClick": {
+    "type": "function",
+    "values": [
+      "undefined",
+      "ClickEvent"
+    ]
+  },
+  "marginless": {
+    "type": "boolean",
+    "values": [
+      "undefined",
+      "false",
+      "true"
+    ]
+  },
+  "testId": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  },
+  "id": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  },
+  "className": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  }
+};

package/lib/components/title/index.js

@@ -1,4 +1,4 @@
 import Title from './Title';
 export * from './TitleEnum';
 export { Title };
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL3RpdGxlL2luZGV4LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sS0FBSyxNQUFNLFNBQVMsQ0FBQTtBQUUzQixjQUFjLGFBQWEsQ0FBQTtBQUMzQixPQUFPLEVBQUUsS0FBSyxFQUFFLENBQUEifQ==

package/lib/components/view/View.d.ts

@@ -1,12 +1,12 @@
 /// <reference types="react" />
-import { ViewProps } from './ViewProps';
+import { ViewProps } from "./ViewProps";
 /**
  * View Component (DIV EQUIVALENT)
  * @param children {ReactNode} View child
  * @param flexable {boolean} Flexable view
  * @param style {CSSProperties} View custom style
  * @param onClick {Function} Click Event
- * @param color {TrilogyColor} View backgroud color
+ * @param backgroundColor {TrilogyColor} View backgroud color
  * @param backgroundSrc {string} View backgroud image source
  * @param id {string} Id for Web / TestID for Native
  * @param fullwidth {boolean} true by default
@@ -16,8 +16,9 @@ import { ViewProps } from './ViewProps';
  * @param className {string} Additionnal css classes
  * @param loading {Loading} Loading View
  * @param markup {ViewMarkup} Markup for View
+ * @param inverted {boolean} Inverted View Color
  * - ------------------ NATIVE PROPERTIES ------------
  * @param bottom {boolean} Bottom position
  */
-declare const View: ({ children, style, className, loading, onClick, backgroundSrc, color, fullwidth, markup, flexable, justify, align, ...others }: ViewProps) => JSX.Element;
+declare const View: ({ children, style, className, loading, onClick, backgroundColor, backgroundSrc, inverted, fullwidth, markup, flexable, justify, align, ...others }: ViewProps) => JSX.Element;
 export default View;

package/lib/components/view/View.js

@@ -1,17 +1,18 @@
-import React from 'react';
-import { ViewMarkup } from './ViewProps';
-import clsx from 'clsx';
-import { has, is } from '../../services';
-import { getLoadingClassName, getJustifyClassName, getAlignClassName } from "../../objects";
-import { hashClass } from '../../helpers';
-import { useTrilogyContext } from '../../context';
+import { __assign, __rest } from "tslib";
+import * as React from "react";
+import { ViewMarkup } from "./ViewProps";
+import clsx from "clsx";
+import { has, is } from "../../services";
+import { getLoadingClassName, getJustifyClassName, getAlignClassName, getBackgroundClassName, } from "../../objects";
+import { hashClass } from "../../helpers";
+import { useTrilogyContext } from "../../context";
 /**
  * View Component (DIV EQUIVALENT)
  * @param children {ReactNode} View child
  * @param flexable {boolean} Flexable view
  * @param style {CSSProperties} View custom style
  * @param onClick {Function} Click Event
- * @param color {TrilogyColor} View backgroud color
+ * @param backgroundColor {TrilogyColor} View backgroud color
  * @param backgroundSrc {string} View backgroud image source
  * @param id {string} Id for Web / TestID for Native
  * @param fullwidth {boolean} true by default
@@ -21,20 +22,27 @@ import { useTrilogyContext } from '../../context';
  * @param className {string} Additionnal css classes
  * @param loading {Loading} Loading View
  * @param markup {ViewMarkup} Markup for View
+ * @param inverted {boolean} Inverted View Color
  * - ------------------ NATIVE PROPERTIES ------------
  * @param bottom {boolean} Bottom position
  */
-const View = ({ children, style, className, loading, onClick, backgroundSrc, color, fullwidth = true, markup, flexable, justify, align, ...others }) => {
-    const { styled } = useTrilogyContext();
-    const isCorrectMarkup = (stringMarkup) => {
-        if (stringMarkup in ViewMarkup || Object.values(ViewMarkup).includes(stringMarkup))
+var View = function (_a) {
+    var children = _a.children, style = _a.style, className = _a.className, loading = _a.loading, onClick = _a.onClick, backgroundColor = _a.backgroundColor, backgroundSrc = _a.backgroundSrc, inverted = _a.inverted, _b = _a.fullwidth, fullwidth = _b === void 0 ? true : _b, markup = _a.markup, flexable = _a.flexable, justify = _a.justify, align = _a.align, others = __rest(_a, ["children", "style", "className", "loading", "onClick", "backgroundColor", "backgroundSrc", "inverted", "fullwidth", "markup", "flexable", "justify", "align"]);
+    var styled = useTrilogyContext().styled;
+    var isCorrectMarkup = function (stringMarkup) {
+        if (stringMarkup in ViewMarkup ||
+            Object.values(ViewMarkup).includes(stringMarkup))
             return true;
     };
-    const Tag = markup && isCorrectMarkup(markup) ? markup : 'div';
-    const classes = hashClass(styled, clsx(typeof loading === 'string' && is(getLoadingClassName(loading)), typeof loading === 'boolean' ? is('loading') : is('loaded'), color && has(`background-${color}`), backgroundSrc && has('background'), fullwidth && is('fullwidth'), flexable && is('flex'), typeof justify === 'string' && is(getJustifyClassName(justify)), typeof align === 'string' && is(getAlignClassName(align)), className));
-    return (React.createElement(Tag, { onClick: onClick, style: style, className: classes, ...(backgroundSrc && {
-            style: { backgroundImage: `url(${backgroundSrc})`, backgroundSize: 'cover', backgroundPosition: '50%' },
-        }), ...others }, children));
+    var Tag = markup && isCorrectMarkup(markup) ? markup : "div";
+    var classes = hashClass(styled, clsx(typeof loading === "string" && is(getLoadingClassName(loading)), typeof loading === "boolean" ? is("loading") : is("loaded"), backgroundColor && has(getBackgroundClassName(backgroundColor)), backgroundSrc && has('background'), inverted && is('inverted') || is('base'), fullwidth && is("fullwidth"), flexable && is("flex"), typeof justify === "string" && is(getJustifyClassName(justify)), typeof align === "string" && is(getAlignClassName(align)), className));
+    return (React.createElement(Tag, __assign({ onClick: onClick, style: style, className: classes }, (backgroundSrc && {
+        style: {
+            backgroundImage: "url(".concat(backgroundSrc, ")"),
+            backgroundSize: "cover",
+            backgroundPosition: "50%",
+        },
+    }), others), children));
 };
 export default View;
-//# sourceMappingURL=View.js.map
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiVmlldy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL2NvbXBvbmVudHMvdmlldy9WaWV3LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxLQUFLLEtBQUssTUFBTSxPQUFPLENBQUE7QUFDOUIsT0FBTyxFQUFFLFVBQVUsRUFBK0IsTUFBTSxhQUFhLENBQUE7QUFDckUsT0FBTyxJQUFJLE1BQU0sTUFBTSxDQUFBO0FBQ3ZCLE9BQU8sRUFBRSxHQUFHLEVBQUUsRUFBRSxFQUFFLE1BQU0sWUFBWSxDQUFBO0FBQ3BDLE9BQU8sRUFDTCxtQkFBbUIsRUFDbkIsbUJBQW1CLEVBQ25CLGlCQUFpQixFQUFFLHNCQUFzQixHQUMxQyxNQUFNLFdBQVcsQ0FBQTtBQUNsQixPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sV0FBVyxDQUFBO0FBQ3JDLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLFdBQVcsQ0FBQTtBQUU3Qzs7Ozs7Ozs7Ozs7Ozs7Ozs7OztHQW1CRztBQUNILElBQU0sSUFBSSxHQUFHLFVBQUMsRUFlRjtJQWRWLElBQUEsUUFBUSxjQUFBLEVBQ1IsS0FBSyxXQUFBLEVBQ0wsU0FBUyxlQUFBLEVBQ1QsT0FBTyxhQUFBLEVBQ1AsT0FBTyxhQUFBLEVBQ1AsZUFBZSxxQkFBQSxFQUNmLGFBQWEsbUJBQUEsRUFDYixRQUFRLGNBQUEsRUFDUixpQkFBZ0IsRUFBaEIsU0FBUyxtQkFBRyxJQUFJLEtBQUEsRUFDaEIsTUFBTSxZQUFBLEVBQ04sUUFBUSxjQUFBLEVBQ1IsT0FBTyxhQUFBLEVBQ1AsS0FBSyxXQUFBLEVBQ0YsTUFBTSxjQWRHLCtKQWViLENBRFU7SUFFRCxJQUFBLE1BQU0sR0FBSyxpQkFBaUIsRUFBRSxPQUF4QixDQUF3QjtJQUV0QyxJQUFNLGVBQWUsR0FBRyxVQUFDLFlBQTJDO1FBQ2xFLElBQ0UsWUFBWSxJQUFJLFVBQVU7WUFDMUIsTUFBTSxDQUFDLE1BQU0sQ0FBQyxVQUFVLENBQUMsQ0FBQyxRQUFRLENBQUMsWUFBMEIsQ0FBQztZQUU5RCxPQUFPLElBQUksQ0FBQTtJQUNmLENBQUMsQ0FBQTtJQUVELElBQU0sR0FBRyxHQUFHLE1BQU0sSUFBSSxlQUFlLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQyxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUMsS0FBSyxDQUFBO0lBRTlELElBQU0sT0FBTyxHQUFHLFNBQVMsQ0FDdkIsTUFBTSxFQUNOLElBQUksQ0FDRixPQUFPLE9BQU8sS0FBSyxRQUFRLElBQUksRUFBRSxDQUFDLG1CQUFtQixDQUFDLE9BQU8sQ0FBQyxDQUFDLEVBQy9ELE9BQU8sT0FBTyxLQUFLLFNBQVMsQ0FBQyxDQUFDLENBQUMsRUFBRSxDQUFDLFNBQVMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxFQUFFLENBQUMsUUFBUSxDQUFDLEVBQzNELGVBQWUsSUFBSSxHQUFHLENBQUMsc0JBQXNCLENBQUMsZUFBZSxDQUFDLENBQUMsRUFDL0QsYUFBYSxJQUFJLEdBQUcsQ0FBQyxZQUFZLENBQUMsRUFDbEMsUUFBUSxJQUFJLEVBQUUsQ0FBQyxVQUFVLENBQUMsSUFBSSxFQUFFLENBQUMsTUFBTSxDQUFDLEVBQ3hDLFNBQVMsSUFBSSxFQUFFLENBQUMsV0FBVyxDQUFDLEVBQzVCLFFBQVEsSUFBSSxFQUFFLENBQUMsTUFBTSxDQUFDLEVBQ3RCLE9BQU8sT0FBTyxLQUFLLFFBQVEsSUFBSSxFQUFFLENBQUMsbUJBQW1CLENBQUMsT0FBTyxDQUFDLENBQUMsRUFDL0QsT0FBTyxLQUFLLEtBQUssUUFBUSxJQUFJLEVBQUUsQ0FBQyxpQkFBaUIsQ0FBQyxLQUFLLENBQUMsQ0FBQyxFQUN6RCxTQUFTLENBQ1YsQ0FDRixDQUFBO0lBRUQsT0FBTyxDQUNMLG9CQUFDLEdBQUcsYUFDRixPQUFPLEVBQUUsT0FBTyxFQUNoQixLQUFLLEVBQUUsS0FBSyxFQUNaLFNBQVMsRUFBRSxPQUFPLElBQ2QsQ0FBQyxhQUFhLElBQUk7UUFDcEIsS0FBSyxFQUFFO1lBQ0wsZUFBZSxFQUFFLGNBQU8sYUFBYSxNQUFHO1lBQ3hDLGNBQWMsRUFBRSxPQUFPO1lBQ3ZCLGtCQUFrQixFQUFFLEtBQUs7U0FDMUI7S0FDRixDQUFDLEVBQ0UsTUFBTSxHQUVULFFBQVEsQ0FDTCxDQUNQLENBQUE7QUFDSCxDQUFDLENBQUE7QUFFRCxlQUFlLElBQUksQ0FBQSJ9

package/lib/components/view/View.native.d.ts

@@ -1,23 +1,22 @@
 /// <reference types="react" />
-import { ViewProps } from './ViewProps';
-import { ComponentName } from '../enumsComponentsName';
+import { ViewProps } from "./ViewProps";
+import { ComponentName } from "../../components/enumsComponentsName";
 /**
  * View Component (DIV EQUIVALENT)
  * @param children {ReactNode} View child
- * @param style {object} View custom style
- * @param onClick {Function} Click Event
  * @param flexable {boolean} Flexable view
- * @param bottom {boolean} Bottom position
- * @param color {TrilogyColor} View backgroud color
- * @param backgroundSrc {string} Source of background Image
+ * @param style {CSSProperties} View custom style
+ * @param onClick {Function} Click Event
+ * @param backgroundColor {TrilogyColor} View backgroud color
+ * @param backgroundSrc {string} View backgroud image source
  * @param id {string} Id for Web / TestID for Native
+ * @param fullwidth {boolean} true by default
  * @param justify {JustifiableProps.justify?} Justifiable | "JUSTIFIED_CENTER" | "JUSTIFIED_START" | "JUSTIFIED_END" | "SPACE_BETWEEN" | undefined
  * @param align {AlignableProps.center?} AlignableProps | "ALIGNED_CENTER" | "ALIGNED_START" | "ALIGNED_END" | undefined
- * @param fullwidth {boolean} true by default
- * @param others
+ * @param bottom {boolean} Bottom position
  */
 declare const View: {
-    ({ children, style, onClick, flexable, bottom, color, backgroundSrc, id, justify, fullwidth, align, ...others }: ViewProps): JSX.Element;
+    ({ children, style, onClick, flexable, bottom, backgroundColor, backgroundSrc, id, justify, fullwidth, align, ...others }: ViewProps): JSX.Element;
     displayName: ComponentName;
 };
 export default View;

package/lib/components/view/View.native.js

@@ -1,54 +1,51 @@
-import React from 'react';
-import { View as ViewNative, StyleSheet, TouchableOpacity, ImageBackground } from 'react-native';
-import { getAlignStyle, getJustifyStyle } from '../../objects';
-import { getColorStyle } from '../../objects/facets/Color';
-import { ComponentName } from '../enumsComponentsName';
+import { __assign, __rest } from "tslib";
+import * as React from "react";
+import { ImageBackground, StyleSheet, TouchableOpacity, View as ViewNative, } from "react-native";
+import { getAlignStyle, getJustifyStyle } from "../../objects";
+import { getColorStyle } from "../../objects/facets/Color";
+import { ComponentName } from "../../components/enumsComponentsName";
 /**
  * View Component (DIV EQUIVALENT)
  * @param children {ReactNode} View child
- * @param style {object} View custom style
- * @param onClick {Function} Click Event
  * @param flexable {boolean} Flexable view
- * @param bottom {boolean} Bottom position
- * @param color {TrilogyColor} View backgroud color
- * @param backgroundSrc {string} Source of background Image
+ * @param style {CSSProperties} View custom style
+ * @param onClick {Function} Click Event
+ * @param backgroundColor {TrilogyColor} View backgroud color
+ * @param backgroundSrc {string} View backgroud image source
  * @param id {string} Id for Web / TestID for Native
+ * @param fullwidth {boolean} true by default
  * @param justify {JustifiableProps.justify?} Justifiable | "JUSTIFIED_CENTER" | "JUSTIFIED_START" | "JUSTIFIED_END" | "SPACE_BETWEEN" | undefined
  * @param align {AlignableProps.center?} AlignableProps | "ALIGNED_CENTER" | "ALIGNED_START" | "ALIGNED_END" | undefined
- * @param fullwidth {boolean} true by default
- * @param others
+ * @param bottom {boolean} Bottom position
  */
-const View = ({ children, style, onClick, flexable, bottom, color, backgroundSrc, id, justify, fullwidth = true, align, ...others }) => {
-    const viewColor = (color && getColorStyle(color)) || 'transparent';
-    const styles = StyleSheet.create({
-        view: {
-            flex: flexable ? 1 : 0,
-            backgroundColor: viewColor,
-            width: fullwidth ? '100%' : 'auto',
-            ...(justify && { justifyContent: getJustifyStyle(justify) }),
-            ...(align && { alignItems: getAlignStyle(align) }),
-        },
+var View = function (_a) {
+    var children = _a.children, style = _a.style, onClick = _a.onClick, flexable = _a.flexable, bottom = _a.bottom, backgroundColor = _a.backgroundColor, backgroundSrc = _a.backgroundSrc, id = _a.id, justify = _a.justify, _b = _a.fullwidth, fullwidth = _b === void 0 ? true : _b, align = _a.align, others = __rest(_a, ["children", "style", "onClick", "flexable", "bottom", "backgroundColor", "backgroundSrc", "id", "justify", "fullwidth", "align"]);
+    var viewColor = (backgroundColor && getColorStyle(backgroundColor)) || "transparent";
+    var styles = StyleSheet.create({
+        view: __assign(__assign({ flex: flexable ? 1 : 0, backgroundColor: viewColor, width: fullwidth ? "100%" : "auto" }, (justify && { justifyContent: getJustifyStyle(justify) })), (align && { alignItems: getAlignStyle(align) })),
         bottom: {
-            position: 'absolute',
+            position: "absolute",
             bottom: 0,
-            width: fullwidth ? '100%' : 'auto',
+            width: fullwidth ? "100%" : "auto",
         },
         sectionImage: {
             flex: flexable ? 1 : 0,
-            width: '100%',
-            height: 'auto',
+            width: "100%",
+            height: "auto",
         },
     });
-    let returnView = (React.createElement(ViewNative, { testID: id, nativeID: id, style: [styles.view, bottom && styles.bottom, style], ...others }, children));
+    var returnView = (React.createElement(ViewNative, __assign({ testID: id, nativeID: id, style: [styles.view, bottom && styles.bottom, style] }, others), children));
     if (!children) {
-        returnView = (React.createElement(ViewNative, { testID: id, nativeID: id, style: [styles.view, bottom && styles.bottom, style], ...others }));
+        returnView = (React.createElement(ViewNative, __assign({ testID: id, nativeID: id, style: [styles.view, bottom && styles.bottom, style] }, others)));
     }
     if (onClick) {
-        returnView = (React.createElement(ViewNative, { testID: id, nativeID: id, style: [styles.view, bottom && styles.bottom, style], ...others },
+        returnView = (React.createElement(ViewNative, __assign({ testID: id, nativeID: id, style: [styles.view, bottom && styles.bottom, style] }, others),
             React.createElement(TouchableOpacity, { activeOpacity: 1, onPress: onClick }, children)));
     }
-    return backgroundSrc ? (React.createElement(ImageBackground, { style: styles.sectionImage, source: typeof backgroundSrc === 'number' ? backgroundSrc : { uri: backgroundSrc } }, returnView)) : (returnView);
+    return backgroundSrc ? (React.createElement(ImageBackground, { style: styles.sectionImage, source: typeof backgroundSrc === "number"
+            ? backgroundSrc
+            : { uri: backgroundSrc } }, returnView)) : (returnView);
 };
 View.displayName = ComponentName.View;
 export default View;
-//# sourceMappingURL=View.native.js.map
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiVmlldy5uYXRpdmUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL3ZpZXcvVmlldy5uYXRpdmUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEtBQUssS0FBSyxNQUFNLE9BQU8sQ0FBQTtBQUM5QixPQUFPLEVBQUUsZUFBZSxFQUFFLFVBQVUsRUFBRSxnQkFBZ0IsRUFBRSxJQUFJLElBQUksVUFBVSxHQUFHLE1BQU0sY0FBYyxDQUFBO0FBQ2pHLE9BQU8sRUFBRSxhQUFhLEVBQUUsZUFBZSxFQUFnQixNQUFNLFdBQVcsQ0FBQTtBQUN4RSxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sd0JBQXdCLENBQUE7QUFFdEQsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLGtDQUFrQyxDQUFBO0FBRWhFOzs7Ozs7Ozs7Ozs7O0dBYUc7QUFDSCxJQUFNLElBQUksR0FBRyxVQUFDLEVBYUY7SUFaVixJQUFBLFFBQVEsY0FBQSxFQUNSLEtBQUssV0FBQSxFQUNMLE9BQU8sYUFBQSxFQUNQLFFBQVEsY0FBQSxFQUNSLE1BQU0sWUFBQSxFQUNOLGVBQWUscUJBQUEsRUFDZixhQUFhLG1CQUFBLEVBQ2IsRUFBRSxRQUFBLEVBQ0YsT0FBTyxhQUFBLEVBQ1AsaUJBQWdCLEVBQWhCLFNBQVMsbUJBQUcsSUFBSSxLQUFBLEVBQ2hCLEtBQUssV0FBQSxFQUNGLE1BQU0sY0FaRyxpSUFhYixDQURVO0lBRVQsSUFBTSxTQUFTLEdBQ2IsQ0FBQyxlQUFlLElBQUksYUFBYSxDQUFDLGVBQStCLENBQUMsQ0FBQyxJQUFJLGFBQWEsQ0FBQTtJQUV0RixJQUFNLE1BQU0sR0FBRyxVQUFVLENBQUMsTUFBTSxDQUFDO1FBQy9CLElBQUksc0JBQ0YsSUFBSSxFQUFFLFFBQVEsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLEVBQ3RCLGVBQWUsRUFBRSxTQUFTLEVBQzFCLEtBQUssRUFBRSxTQUFTLENBQUMsQ0FBQyxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUMsTUFBTSxJQUMvQixDQUFDLE9BQU8sSUFBSSxFQUFFLGNBQWMsRUFBRSxlQUFlLENBQUMsT0FBTyxDQUFDLEVBQUUsQ0FBQyxHQUN6RCxDQUFDLEtBQUssSUFBSSxFQUFFLFVBQVUsRUFBRSxhQUFhLENBQUMsS0FBSyxDQUFDLEVBQUUsQ0FBQyxDQUNuRDtRQUNELE1BQU0sRUFBRTtZQUNOLFFBQVEsRUFBRSxVQUFVO1lBQ3BCLE1BQU0sRUFBRSxDQUFDO1lBQ1QsS0FBSyxFQUFFLFNBQVMsQ0FBQyxDQUFDLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQyxNQUFNO1NBQ25DO1FBQ0QsWUFBWSxFQUFFO1lBQ1osSUFBSSxFQUFFLFFBQVEsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDO1lBQ3RCLEtBQUssRUFBRSxNQUFNO1lBQ2IsTUFBTSxFQUFFLE1BQU07U0FDZjtLQUNGLENBQUMsQ0FBQTtJQUVGLElBQUksVUFBVSxHQUFHLENBQ2Ysb0JBQUMsVUFBVSxhQUNULE1BQU0sRUFBRSxFQUFFLEVBQ1YsUUFBUSxFQUFFLEVBQUUsRUFDWixLQUFLLEVBQUUsQ0FBQyxNQUFNLENBQUMsSUFBSSxFQUFFLE1BQU0sSUFBSSxNQUFNLENBQUMsTUFBTSxFQUFFLEtBQUssQ0FBQyxJQUNoRCxNQUFNLEdBRVQsUUFBUSxDQUNFLENBQ2QsQ0FBQTtJQUNELElBQUksQ0FBQyxRQUFRLEVBQUU7UUFDYixVQUFVLEdBQUcsQ0FDWCxvQkFBQyxVQUFVLGFBQ1QsTUFBTSxFQUFFLEVBQUUsRUFDVixRQUFRLEVBQUUsRUFBRSxFQUNaLEtBQUssRUFBRSxDQUFDLE1BQU0sQ0FBQyxJQUFJLEVBQUUsTUFBTSxJQUFJLE1BQU0sQ0FBQyxNQUFNLEVBQUUsS0FBSyxDQUFDLElBQ2hELE1BQU0sRUFDVixDQUNILENBQUE7S0FDRjtJQUVELElBQUksT0FBTyxFQUFFO1FBQ1gsVUFBVSxHQUFHLENBQ1gsb0JBQUMsVUFBVSxhQUNULE1BQU0sRUFBRSxFQUFFLEVBQ1YsUUFBUSxFQUFFLEVBQUUsRUFDWixLQUFLLEVBQUUsQ0FBQyxNQUFNLENBQUMsSUFBSSxFQUFFLE1BQU0sSUFBSSxNQUFNLENBQUMsTUFBTSxFQUFFLEtBQUssQ0FBQyxJQUNoRCxNQUFNO1lBRVYsb0JBQUMsZ0JBQWdCLElBQUMsYUFBYSxFQUFFLENBQUMsRUFBRSxPQUFPLEVBQUUsT0FBTyxJQUNqRCxRQUFRLENBQ1EsQ0FDUixDQUNkLENBQUE7S0FDRjtJQUVELE9BQU8sYUFBYSxDQUFDLENBQUMsQ0FBQyxDQUNyQixvQkFBQyxlQUFlLElBQ2QsS0FBSyxFQUFFLE1BQU0sQ0FBQyxZQUFZLEVBQzFCLE1BQU0sRUFDSixPQUFPLGFBQWEsS0FBSyxRQUFRO1lBQy9CLENBQUMsQ0FBQyxhQUFhO1lBQ2YsQ0FBQyxDQUFDLEVBQUUsR0FBRyxFQUFFLGFBQWEsRUFBRSxJQUczQixVQUFVLENBQ0ssQ0FDbkIsQ0FBQyxDQUFDLENBQUMsQ0FDRixVQUFVLENBQ1gsQ0FBQTtBQUNILENBQUMsQ0FBQTtBQUVELElBQUksQ0FBQyxXQUFXLEdBQUcsYUFBYSxDQUFDLElBQUksQ0FBQTtBQUVyQyxlQUFlLElBQUksQ0FBQSJ9

package/lib/components/view/ViewEnum.js

@@ -18,4 +18,4 @@ export var JustifyContent;
     JustifyContent["FLEX_END"] = "flex-end";
     JustifyContent["CENTER"] = "center";
 })(JustifyContent || (JustifyContent = {}));
-//# sourceMappingURL=ViewEnum.js.map
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiVmlld0VudW0uanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL3ZpZXcvVmlld0VudW0udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0dBRUc7QUFDSCxNQUFNLENBQU4sSUFBWSxTQU9YO0FBUEQsV0FBWSxTQUFTO0lBQ25CLGdDQUFtQixDQUFBO0lBQ25CLDRCQUFlLENBQUE7SUFDZiwwQkFBYSxDQUFBO0lBQ2IsZ0NBQW1CLENBQUE7SUFDbkIsa0NBQXFCLENBQUE7SUFDckIsNEJBQWUsQ0FBQTtBQUNqQixDQUFDLEVBUFcsU0FBUyxLQUFULFNBQVMsUUFPcEI7QUFPRCxNQUFNLENBQU4sSUFBWSxjQU1YO0FBTkQsV0FBWSxjQUFjO0lBQ3hCLGlEQUErQixDQUFBO0lBQy9CLCtDQUE2QixDQUFBO0lBQzdCLDJDQUF5QixDQUFBO0lBQ3pCLHVDQUFxQixDQUFBO0lBQ3JCLG1DQUFpQixDQUFBO0FBQ25CLENBQUMsRUFOVyxjQUFjLEtBQWQsY0FBYyxRQU16QiJ9

package/lib/components/view/ViewProps.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { Loadable, TrilogyColor, TrilogyColorValues, Clickable, Fullwidth, JustifiableProps, AlignableProps } from "../../objects";
+import { Loadable, Clickable, Fullwidth, JustifiableProps, AlignableProps, BackgroundProps, Accessibility } from "../../objects";
 type Styles = {
     [key: string]: any;
 };
@@ -12,20 +12,19 @@ export declare enum ViewMarkup {
     P = "p",
     UL = "ul",
     LI = "li",
-    LABEL = "label"
+    LABEL = "label",
+    MAIN = "main"
 }
 export type ViewMarkupValues = `${ViewMarkup}`;
 /**
  * View Interface
  */
-export interface ViewProps extends Loadable, Clickable, JustifiableProps, Fullwidth, AlignableProps {
+export interface ViewProps extends Loadable, Clickable, JustifiableProps, Fullwidth, AlignableProps, BackgroundProps, Accessibility {
     children?: React.ReactNode;
     className?: string;
     style?: Styles;
     flexable?: boolean;
     bottom?: boolean;
-    color?: TrilogyColor | TrilogyColorValues;
-    backgroundSrc?: string;
     id?: string;
     markup?: ViewMarkup | ViewMarkupValues;
 }

package/lib/components/view/ViewProps.js

@@ -9,5 +9,6 @@ export var ViewMarkup;
     ViewMarkup["UL"] = "ul";
     ViewMarkup["LI"] = "li";
     ViewMarkup["LABEL"] = "label";
+    ViewMarkup["MAIN"] = "main";
 })(ViewMarkup || (ViewMarkup = {}));
-//# sourceMappingURL=ViewProps.js.map
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiVmlld1Byb3BzLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vY29tcG9uZW50cy92aWV3L1ZpZXdQcm9wcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFZQSxNQUFNLENBQU4sSUFBWSxVQVdYO0FBWEQsV0FBWSxVQUFVO0lBQ3BCLCtCQUFpQixDQUFBO0lBQ2pCLDZCQUFlLENBQUE7SUFDZixxQkFBTyxDQUFBO0lBQ1AsMkJBQWEsQ0FBQTtJQUNiLHlCQUFXLENBQUE7SUFDWCxxQkFBTyxDQUFBO0lBQ1AsdUJBQVMsQ0FBQTtJQUNULHVCQUFTLENBQUE7SUFDVCw2QkFBZSxDQUFBO0lBQ2YsMkJBQWEsQ0FBQTtBQUNmLENBQUMsRUFYVyxVQUFVLEtBQVYsVUFBVSxRQVdyQiJ9

package/lib/components/view/ViewPropsDefaults.js

@@ -0,0 +1,206 @@
+export default {
+  "children": {
+    "type": "react",
+    "values": [
+      "undefined",
+      "null",
+      "string",
+      "number",
+      "false",
+      "true",
+      "JSXElementConstructor<any>>",
+      "ReactNode>",
+      "ReactPortal"
+    ]
+  },
+  "className": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  },
+  "style": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "Styles"
+    ]
+  },
+  "flexable": {
+    "type": "boolean",
+    "values": [
+      "undefined",
+      "false",
+      "true"
+    ]
+  },
+  "bottom": {
+    "type": "boolean",
+    "values": [
+      "undefined",
+      "false",
+      "true"
+    ]
+  },
+  "id": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  },
+  "markup": {
+    "type": "enum",
+    "values": [
+      "undefined",
+      "a",
+      "button",
+      "div",
+      "input",
+      "label",
+      "li",
+      "main",
+      "p",
+      "span",
+      "ul",
+      "button",
+      "input",
+      "a",
+      "span",
+      "div",
+      "p",
+      "ul",
+      "li",
+      "label",
+      "main"
+    ]
+  },
+  "loading": {
+    "type": "enum",
+    "values": [
+      "undefined",
+      "false",
+      "true",
+      "LOADING",
+      "LOADED",
+      "LOADING",
+      "LOADED"
+    ]
+  },
+  "onClick": {
+    "type": "function",
+    "values": [
+      "undefined",
+      "ClickEvent"
+    ]
+  },
+  "justify": {
+    "type": "enum",
+    "values": [
+      "undefined",
+      "justified-center",
+      "justified-start",
+      "justified-end",
+      "space-between",
+      "JUSTIFIED_CENTER",
+      "JUSTIFIED_START",
+      "JUSTIFIED_END",
+      "SPACE_BETWEEN"
+    ]
+  },
+  "fullwidth": {
+    "type": "boolean",
+    "values": [
+      "undefined",
+      "false",
+      "true"
+    ]
+  },
+  "align": {
+    "type": "enum",
+    "values": [
+      "undefined",
+      "ALIGNED_CENTER",
+      "ALIGNED_START",
+      "ALIGNED_END",
+      "ALIGNED_CENTER",
+      "ALIGNED_START",
+      "ALIGNED_END"
+    ]
+  },
+  "verticalAlign": {
+    "type": "enum",
+    "values": [
+      "undefined",
+      "ALIGNED_CENTER",
+      "ALIGNED_START",
+      "ALIGNED_END",
+      "ALIGNED_CENTER",
+      "ALIGNED_START",
+      "ALIGNED_END"
+    ]
+  },
+  "backgroundColor": {
+    "type": "enum",
+    "values": [
+      "undefined",
+      "SUCCESS",
+      "INFO",
+      "WARNING",
+      "ERROR",
+      "MAIN",
+      "ACCENT",
+      "WHITE",
+      "MAIN",
+      "MAIN_FADE",
+      "ACCENT",
+      "FONT",
+      "SUCCESS",
+      "SUCCESS_FADE",
+      "INFO",
+      "INFO_FADE",
+      "WARNING",
+      "WARNING_FADE",
+      "ERROR",
+      "ERROR_FADE",
+      "DISABLED",
+      "DISABLED_FADE",
+      "NEUTRAL",
+      "NEUTRAL_FADE",
+      "WHITE",
+      "MAIN_FADE",
+      "FONT",
+      "SUCCESS_FADE",
+      "INFO_FADE",
+      "WARNING_FADE",
+      "ERROR_FADE",
+      "DISABLED",
+      "DISABLED_FADE",
+      "NEUTRAL",
+      "NEUTRAL_FADE"
+    ]
+  },
+  "backgroundSrc": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  },
+  "inverted": {
+    "type": "boolean",
+    "values": [
+      "undefined",
+      "false",
+      "true"
+    ]
+  },
+  "accessibilityLabel": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  }
+};