cherry-styled-components/dist/container.js

Cherry is a design system for the modern web. Designed in Figma, built in React using Typescript.

"use client";
"use client";
import { mq } from "./utils/theme.js";
import { generatePaddingStyles } from "./utils/mixins.js";
import { jsx } from "react/jsx-runtime";
import { forwardRef } from "react";
import styled from "styled-components";
//#region src/lib/container.tsx
var StyledContainer = styled.div.withConfig({
	displayName: "container__StyledContainer",
	componentId: "sc-1bc84909-0"
})([
	`margin:auto;width:100%;max-width:`,
	`;`,
	`;padding:`,
	`;`,
	`{padding:`,
	`;}`,
	`{max-width:`,
	`;}`,
	` `,
	` `,
	` `,
	` `,
	` `,
	` `,
	``
], ({ theme, $fluid }) => $fluid ? `100%` : theme.spacing.maxWidth.xs, ({ $textAlign }) => $textAlign && `text-align: ${$textAlign}`, ({ $padding, theme }) => $padding && `${$padding}px` || theme.spacing.padding.xs, mq("lg"), ({ $padding, theme }) => $padding && `${$padding}px` || theme.spacing.padding.lg, mq("xxxl"), ({ theme, $fluid }) => $fluid ? `100%` : theme.spacing.maxWidth.xxxl, ({ $xsPadding }) => $xsPadding && generatePaddingStyles("xs", $xsPadding), ({ $smPadding }) => $smPadding && generatePaddingStyles("sm", $smPadding), ({ $mdPadding }) => $mdPadding && generatePaddingStyles("md", $mdPadding), ({ $lgPadding }) => $lgPadding && generatePaddingStyles("lg", $lgPadding), ({ $xlPadding }) => $xlPadding && generatePaddingStyles("xl", $xlPadding), ({ $xxlPadding }) => $xxlPadding && generatePaddingStyles("xxl", $xxlPadding), ({ $xxxlPadding }) => $xxxlPadding && generatePaddingStyles("xxxl", $xxxlPadding));
function LocalContainer({ ...props }, ref) {
	return /* @__PURE__ */ jsx(StyledContainer, {
		...props,
		ref,
		children: props.children
	});
}
var Container = /* @__PURE__ */ forwardRef(LocalContainer);
//#endregion
export { Container };