Center

import { Box, Center } from "styled-system/jsx";

const Demo = () => {
  return (
    <Center bg="page.surface.100" h="100px" maxW="320px">
      <Box>This will be centered</Box>
    </Center>
  )
}

import { Center } from "styled-system/jsx";

<Center bg="tomato" h="100px" color="white">
  This is the Center
</Center>

import { Center, HStack } from "styled-system/jsx"
import { Text } from "@cerberus/react"
import { LuPhone } from "react-icons/lu"

const Demo = () => {
  return (
    <HStack>
      <Center w="40px" h="40px" bg="tomato" color="white">
        <LuPhone />
      </Center>

      <Center w="40px" h="40px" bg="tomato" color="white">
        <Text as="span" fontWeight="bold" fontSize="lg">
          1
        </Text>
      </Center>
    </HStack>
  )
}

import { Center } from "styled-system/jsx"
import { Text } from "@cerberus/react"

const Demo = () => {
  return (
    <Center inline bg="page.surface.100" h="100px" maxW="320px">
      <Text>This will be centered</Text>
    </Center>
  )
}

import { Square } from "styled-system/jsx"
import { LuPhoneForwarded } from "react-icons/lu"

const Demo = () => {
  return (
    <Square size="10" bg="purple.700" color="white">
      <LuPhoneForwarded />
    </Square>
  )
}

import { Circle } from "styled-system/jsx"
import { LuPhoneForwarded } from "react-icons/lu"

const Demo = () => {
  return (
    <Circle size="10" bg="purple.700" color="white">
      <LuPhoneForwarded />
    </Circle>
  )
}