eventx-design-system/dist/components/Container.js

Design System do EventX

import { jsx as _jsx } from "react/jsx-runtime";
import styled, { css } from 'styled-components';
import { spacing, breakpoints } from '../tokens/design-tokens';
// Mapeamento de maxWidth para valores
const maxWidthValues = {
    sm: '640px',
    md: '768px',
    lg: '1024px',
    xl: '1280px',
    '2xl': '1536px',
    full: 'none',
};
// Mapeamento de padding para valores
const paddingValues = {
    none: '0',
    sm: spacing[4],
    md: spacing[6],
    lg: spacing[8],
    xl: spacing[12],
};
const StyledContainer = styled.div `
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;

  ${({ fluid, maxWidth = 'lg' }) => !fluid &&
    css `
      max-width: ${maxWidthValues[maxWidth]};
    `}

  ${({ center }) => center &&
    css `
      display: flex;
      flex-direction: column;
      align-items: center;
    `}

  ${({ padding = 'md' }) => css `
    padding-left: ${paddingValues[padding]};
    padding-right: ${paddingValues[padding]};
  `}

  @media (max-width: ${breakpoints.sm}) {
    ${({ padding = 'md' }) => css `
      padding-left: ${spacing[4]};
      padding-right: ${spacing[4]};
    `}
  }

  @media (max-width: ${breakpoints.md}) {
    ${({ padding = 'md' }) => css `
      padding-left: ${spacing[4]};
      padding-right: ${spacing[4]};
    `}
  }
`;
export const Container = ({ maxWidth = 'lg', padding = 'md', center = false, fluid = false, children, className, ...props }) => {
    return (_jsx(StyledContainer, { maxWidth: maxWidth, padding: padding, center: center, fluid: fluid, className: className, ...props, children: children }));
};
Container.displayName = 'Container';