mu29

import React, { useMemo } from 'react';
import { variant } from 'styled-system';
import styled from '@emotion/styled';
import { skipForwardProps } from '../../props';
import { kindVariants as textKindVariants } from '../../private/BaseText';
import { Box } from '../../private/Box';
import { Icon } from '../Media/Icon';

const kindVariants = {
  fill: {

mu29

const Box = styled('div', {
  shouldForwardProp,
})(
  action,
  animator,
  background,
  border,
  color,
  flexbox,
  input,

mu29

import type { LayoutProps as SystemLayoutProps } from 'styled-system';
import { compose, layout as systemLayout, system } from 'styled-system';
import type { ResponsiveValue } from './types';

export type LayoutProps = SystemLayoutProps & {
  hideScroll?: ResponsiveValue<boolean>;
};

const customLayout = system({
  hideScroll: (value: boolean) =>

mu29

const Container = styled(VStack)`
  scrollbar-width: none;
  -ms-overflow-style: none;
  &::-webkit-scrollbar {
    display: none;
  }
`;

mu29

<Box
  fontSize={4}
  fontWeight='bold'
  padding={3}
  marginBottom={[4, 5]}
  color='white'
  bg='primary'
 >
  Hello
</Box>

mu29

import styled from '@emotion/styled'
import { typography, space, color } from 'styled-system'

const Box = styled('div')(
  typography,
  space,
  color
)

mu29

import {
  Button,
  Caption,
  HStack,
  Link,
  TextField,
  VStack,
} from '@class101/oui';

const EmailLoginForm = () => (

mu29

import styled from "styled-components";
import {
  Button,
  ButtonColor,
  ButtonSize,
  Colors,
  FormGroup,
  Input,
  TextStyles
} from "@class101/ui";

mu29

import styled from "@emotion/styled";

const Form = styled.form`
  display: flex;
  flex-direction: column;
`;

const FormGroup = styled.div`
  display: flex;
  flex-direction: column;

mu29

const baseTheme = {
  space: {
    0: 0,
    2: 2,
    4: 4,
    6: 6,
    8: 8,
    10: 10,
    12: 12,
    14: 14,