text: // Generated by Lona Compiler 0.8.0
  
  import React from "react"
  import styled from "styled-components"
  
  import colors from "../foundation/colors"
  import shadows from "../foundation/shadows"
  import textStyles from "../foundation/textStyles"
  
  export default class TextAlignment extends React.Component {
    render() {
  
  
  
      return (
        <View>
          <View1>
            <Image src={require("../assets/icon_128x128.png")} />
            <View2 />
            <Text>
              {"Welcome to Lona Studio"}
            </Text>
            <Text1>
              {"Centered - Width: Fit"}
            </Text1>
            <Text2>
              {"Left aligned - Width: Fill"}
            </Text2>
            <Text3>
              {"Right aligned - Width: Fill"}
            </Text3>
            <Text4>
              {"Centered - Width: 80"}
            </Text4>
          </View1>
          <View3>
            <Text5>
              {"Left aligned text, Fit w/ secondary centering"}
            </Text5>
          </View3>
          <View4>
            <Text6>
              {"Left aligned text, Fixed w/ secondary centering"}
            </Text6>
          </View4>
          <View5>
            <Text7>
              {"Centered text, Fit parent no centering"}
            </Text7>
          </View5>
          <View6>
            <Text8>
              {"Centered text, Fixed parent no centering"}
            </Text8>
          </View6>
          <RightAlignmentContainer>
            <Text9>
              {"Fit Text"}
            </Text9>
            <Text10>
              {"Fill and center aligned text"}
            </Text10>
            <Image1 src={require("../assets/icon_128x128.png")} />
          </RightAlignmentContainer>
        </View>
      );
    }
  };
  
  let View = styled.div({
    alignItems: "flex-start",
    display: "flex",
    flex: "1 1 0%",
    flexDirection: "column",
    justifyContent: "flex-start",
    paddingTop: "10px",
    paddingRight: "10px",
    paddingBottom: "10px",
    paddingLeft: "10px"
  })
  
  let View1 = styled.div({
    alignItems: "center",
    alignSelf: "stretch",
    backgroundColor: colors.indigo50,
    display: "flex",
    flex: "0 0 auto",
    flexDirection: "column",
    justifyContent: "center"
  })
  
  let Image = styled.img({
    alignItems: "flex-start",
    display: "flex",
    flexDirection: "column",
    justifyContent: "flex-start",
    overflow: "hidden",
    width: "100px",
    height: "100px",
    objectFit: "cover",
    position: "relative"
  })
  
  let View2 = styled.div({
    alignItems: "flex-start",
    backgroundColor: "#D8D8D8",
    display: "flex",
    flex: "0 0 auto",
    flexDirection: "column",
    justifyContent: "flex-start"
  })
  
  let Text = styled.span({
    textAlign: "center",
    ...textStyles.display1,
    alignItems: "flex-start",
    alignSelf: "stretch",
    display: "block",
    flex: "0 0 auto",
    flexDirection: "column",
    justifyContent: "flex-start",
    marginTop: "16px",
    overflow: "hidden",
    maxHeight: "80px"
  })
  
  let Text1 = styled.span({
    textAlign: "center",
    ...textStyles.subheading2,
    alignItems: "flex-start",
    display: "block",
    flex: "0 0 auto",
    flexDirection: "column",
    justifyContent: "flex-start",
    marginTop: "16px"
  })
  
  let Text2 = styled.span({
    textAlign: "left",
    ...textStyles.body1,
    alignItems: "flex-start",
    alignSelf: "stretch",
    display: "block",
    flex: "0 0 auto",
    flexDirection: "column",
    justifyContent: "flex-start",
    marginTop: "12px"
  })
  
  let Text3 = styled.span({
    textAlign: "right",
    ...textStyles.body1,
    alignItems: "flex-start",
    alignSelf: "stretch",
    display: "block",
    flex: "0 0 auto",
    flexDirection: "column",
    justifyContent: "flex-start"
  })
  
  let Text4 = styled.span({
    textAlign: "center",
    ...textStyles.body1,
    alignItems: "flex-start",
    display: "block",
    flex: "0 0 auto",
    flexDirection: "column",
    justifyContent: "flex-start",
    width: "80px"
  })
  
  let View3 = styled.div({
    alignItems: "center",
    backgroundColor: "#D8D8D8",
    display: "flex",
    flex: "0 0 auto",
    flexDirection: "column",
    justifyContent: "flex-start",
    paddingRight: "12px",
    paddingLeft: "12px"
  })
  
  let Text5 = styled.span({
    textAlign: "left",
    ...textStyles.body1,
    alignItems: "flex-start",
    display: "block",
    flex: "0 0 auto",
    flexDirection: "column",
    justifyContent: "flex-start"
  })
  
  let View4 = styled.div({
    alignItems: "center",
    backgroundColor: "#D8D8D8",
    display: "flex",
    flex: "0 0 auto",
    flexDirection: "column",
    justifyContent: "flex-start",
    paddingRight: "12px",
    paddingLeft: "12px",
    width: "400px"
  })
  
  let Text6 = styled.span({
    textAlign: "left",
    ...textStyles.body1,
    alignItems: "flex-start",
    display: "block",
    flex: "0 0 auto",
    flexDirection: "column",
    justifyContent: "flex-start"
  })
  
  let View5 = styled.div({
    alignItems: "flex-start",
    backgroundColor: "#D8D8D8",
    display: "flex",
    flex: "0 0 auto",
    flexDirection: "column",
    justifyContent: "flex-start",
    paddingRight: "12px",
    paddingLeft: "12px"
  })
  
  let Text7 = styled.span({
    textAlign: "center",
    ...textStyles.body1,
    alignItems: "flex-start",
    display: "block",
    flex: "0 0 auto",
    flexDirection: "column",
    justifyContent: "flex-start"
  })
  
  let View6 = styled.div({
    alignItems: "flex-start",
    backgroundColor: "#D8D8D8",
    display: "flex",
    flex: "0 0 auto",
    flexDirection: "column",
    justifyContent: "flex-start",
    paddingRight: "12px",
    paddingLeft: "12px",
    width: "400px"
  })
  
  let Text8 = styled.span({
    textAlign: "center",
    ...textStyles.body1,
    alignItems: "flex-start",
    alignSelf: "stretch",
    display: "block",
    flex: "0 0 auto",
    flexDirection: "column",
    justifyContent: "flex-start"
  })
  
  let RightAlignmentContainer = styled.div({
    alignItems: "flex-end",
    alignSelf: "stretch",
    backgroundColor: "#D8D8D8",
    display: "flex",
    flex: "0 0 auto",
    flexDirection: "column",
    justifyContent: "flex-start"
  })
  
  let Text9 = styled.span({
    textAlign: "left",
    ...textStyles.body1,
    alignItems: "flex-start",
    display: "block",
    flex: "0 0 auto",
    flexDirection: "column",
    justifyContent: "flex-start"
  })
  
  let Text10 = styled.span({
    textAlign: "center",
    ...textStyles.body1,
    alignItems: "flex-start",
    alignSelf: "stretch",
    display: "block",
    flex: "0 0 auto",
    flexDirection: "column",
    justifyContent: "flex-start"
  })
  
  let Image1 = styled.img({
    alignItems: "flex-start",
    display: "flex",
    flexDirection: "column",
    justifyContent: "flex-start",
    overflow: "hidden",
    width: "100px",
    height: "100px",
    objectFit: "cover",
    position: "relative"
  })