cherry-styled-components
Version:
Cherry is a design system for the modern web. Designed in Figma, built in React using Typescript.
46 lines (45 loc) • 2.46 kB
JavaScript
"use client";
"use client";
import { mq } from "./utils/theme.js";
import { fullWidthStyles, generateGapStyles, generateJustifyContentStyles } from "./utils/mixins.js";
import { jsx } from "react/jsx-runtime";
import { forwardRef } from "react";
import styled from "styled-components";
//#region src/lib/flex.tsx
var StyledFlex = styled.div.withConfig({
displayName: "flex__StyledFlex",
componentId: "sc-c58fa091-0"
})([
`display:flex;justify-content:`,
`;flex-wrap:`,
`;gap:`,
`;flex-direction:`,
`;`,
`{gap:`,
`;}`,
` `,
` `,
` `,
` `,
` `,
` `,
` `,
` `,
` `,
` `,
` `,
` `,
` `,
` `,
``
], ({ $justifyContent }) => $justifyContent || "flex-start", ({ $wrap }) => $wrap || "wrap", ({ $gap, theme }) => $gap !== void 0 && $gap !== "none" ? `${$gap}px` : theme.spacing.gridGap.xs, ({ $direction }) => $direction || "row", mq("lg"), ({ $gap, theme }) => $gap !== void 0 && $gap !== "none" ? `${$gap}px` : theme.spacing.gridGap.lg, ({ $xsGap }) => $xsGap !== void 0 && generateGapStyles("xs", $xsGap), ({ $xsJustifyContent }) => $xsJustifyContent && generateJustifyContentStyles("xs", $xsJustifyContent), ({ $smGap }) => $smGap !== void 0 && generateGapStyles("sm", $smGap), ({ $smJustifyContent }) => $smJustifyContent && generateJustifyContentStyles("sm", $smJustifyContent), ({ $mdGap }) => $mdGap !== void 0 && generateGapStyles("md", $mdGap), ({ $mdJustifyContent }) => $mdJustifyContent && generateJustifyContentStyles("md", $mdJustifyContent), ({ $lgGap }) => $lgGap !== void 0 && generateGapStyles("lg", $lgGap), ({ $lgJustifyContent }) => $lgJustifyContent && generateJustifyContentStyles("lg", $lgJustifyContent), ({ $xlGap }) => $xlGap !== void 0 && generateGapStyles("xl", $xlGap), ({ $xlJustifyContent }) => $xlJustifyContent && generateJustifyContentStyles("xl", $xlJustifyContent), ({ $xxlGap }) => $xxlGap !== void 0 && generateGapStyles("xxl", $xxlGap), ({ $xxlJustifyContent }) => $xxlJustifyContent && generateJustifyContentStyles("xxl", $xxlJustifyContent), ({ $xxxlGap }) => $xxxlGap !== void 0 && generateGapStyles("xxxl", $xxxlGap), ({ $xxxlJustifyContent }) => $xxxlJustifyContent && generateJustifyContentStyles("xxxl", $xxxlJustifyContent), ({ $fullWidth }) => fullWidthStyles($fullWidth));
function LocalFlex({ ...props }, ref) {
return /* @__PURE__ */ jsx(StyledFlex, {
...props,
ref,
children: props.children
});
}
var Flex = /* @__PURE__ */ forwardRef(LocalFlex);
//#endregion
export { Flex };