cherry-styled-components
Version:
Cherry is a design system for the modern web. Designed in Figma, built in React using Typescript.
51 lines (50 loc) • 1.18 kB
JavaScript
"use client";
"use client";
import { mq } from "./utils/theme.js";
import { jsx } from "react/jsx-runtime";
import { forwardRef } from "react";
import styled from "styled-components";
//#region src/lib/max-width.tsx
var styles = ($size) => `max-width: ${$size}px;`;
var breakpointKeys = [
"xs",
"sm",
"md",
"lg",
"xl",
"xxl",
"xxxl"
];
function responsiveStyles(props) {
const propMap = {
xs: props.$xs,
sm: props.$sm,
md: props.$md,
lg: props.$lg,
xl: props.$xl,
xxl: props.$xxl,
xxxl: props.$xxxl
};
return breakpointKeys.filter((key) => propMap[key] !== void 0).map((key) => mq(key) + `{ ${styles(propMap[key])} }`).join("");
}
var StyledMaxWidth = styled.div.withConfig({
displayName: "max-width__StyledMaxWidth",
componentId: "sc-1a736de7-0"
})([
`display:block;margin:`,
`;`,
` `,
``
], ({ $m0 }) => $m0 ? "0" : "auto", ({ $size }) => `
${$size && styles($size)};
`, (props) => responsiveStyles(props));
function LocalMaxWidth({ ...props }, ref) {
return /* @__PURE__ */ jsx(StyledMaxWidth, {
...props,
ref,
children: props.children
});
}
var MaxWidth = /* @__PURE__ */ forwardRef(LocalMaxWidth);
//#endregion
export { MaxWidth };