cherry-styled-components
Version:
Cherry is a design system for the modern web. Designed in Figma, built in React using Typescript.
52 lines (51 loc) • 1.33 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/space.tsx
var styles = ($size, $horizontal) => $size === "none" ? `display: none;` : $horizontal ? `display: inline-block;
max-height: 0;
min-width: ${$size}px;
max-width: ${$size}px;` : `display: block;
min-height: ${$size}px;
max-height: ${$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], props.$horizontal || false)} }`).join("");
}
var StyledSpace = styled.span.withConfig({
displayName: "space__StyledSpace",
componentId: "sc-d047ac9d-0"
})([
``,
` `,
``
], ({ $horizontal, $size }) => $size ? styles($size, $horizontal || false) : "", (props) => responsiveStyles(props));
function LocalSpace({ ...props }, ref) {
return /* @__PURE__ */ jsx(StyledSpace, {
...props,
ref
});
}
var Space = /* @__PURE__ */ forwardRef(LocalSpace);
//#endregion
export { Space };