cherry-styled-components 0.1.13 → 0.1.14

package/dist/box.js

@@ -1,17 +1,26 @@
 "use client";
+"use client";
+import { Container } from "./container.js";
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import styled from "styled-components";
-import { Container } from "./container.js";
-const StyledBox = styled(Container)`
-  background: ${({ theme }) => theme.colors.light};
-  border-radius: ${({ theme }) => theme.spacing.radius.lg};
-  border: solid 1px ${({ theme }) => theme.colors.grayLight};
-`;
+//#region src/lib/box.tsx
+var StyledBox = styled(Container).withConfig({
+	displayName: "box__StyledBox",
+	componentId: "sc-3e07b0c8-0"
+})([
+	`background:`,
+	`;border-radius:`,
+	`;border:solid 1px `,
+	`;`
+], ({ theme }) => theme.colors.light, ({ theme }) => theme.spacing.radius.lg, ({ theme }) => theme.colors.grayLight);
 function LocalBox({ ...props }, ref) {
-  return /* @__PURE__ */ jsx(StyledBox, { ...props, ref, children: props.children });
+	return /* @__PURE__ */ jsx(StyledBox, {
+		...props,
+		ref,
+		children: props.children
+	});
 }
-const Box = forwardRef(LocalBox);
-export {
-  Box
-};
+var Box = /* @__PURE__ */ forwardRef(LocalBox);
+//#endregion
+export { Box };

package/dist/button.js

@@ -1,167 +1,97 @@
 "use client";
+"use client";
+import { formElementHeightStyles, resetButton } from "./utils/mixins.js";
 import { jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import styled, { css } from "styled-components";
 import { darken, lighten } from "polished";
-import { resetButton, formElementHeightStyles } from "./utils/mixins.js";
-const buttonStyles = (theme, $variant, $size, $outline, $fullWidth, $error, disabled) => css`
-  ${resetButton};
-  font-family: inherit;
-  display: inline-flex;
-  padding: 15px 30px;
-  border-radius: 100px;
-  font-weight: 600;
-  white-space: nowrap;
-  hyphens: auto;
-  color: ${theme.isDark ? theme.colors.dark : theme.colors.light};
-  text-decoration: none;
-  transition: all 0.3s ease;
-  text-align: center;
-  gap: 10px;
-  text-overflow: ellipsis;
-  justify-content: center;
-  align-items: center;
-  min-height: fit-content;
-
-  & .icon,
-  & .lucide {
-    margin: auto 0;
-  }
-
-  ${!disabled && $variant === "primary" && css`
-    color: ${$outline ? theme.colors.primary : theme.isDark ? theme.colors.dark : theme.colors.light};
-    background: ${$outline ? "transparent" : theme.colors.primary};
-    border: solid 2px ${theme.colors.primary};
-    box-shadow: 0 0 0 0px ${theme.colors.primary};
-
-    &:hover {
-      background: ${$outline ? "transparent" : theme.colors.primaryDark};
-      border-color: ${theme.colors.primaryDark};
-      ${$outline && `color: ${theme.colors.primaryDark}`};
-    }
-
-    &:focus {
-      box-shadow: 0 0 0 4px ${theme.colors.primaryLight};
-    }
-
-    &:active {
-      box-shadow: 0 0 0 2px ${theme.colors.primaryLight};
-    }
-  `}
-
-  ${!disabled && $variant === "secondary" && css`
-    color: ${$outline ? theme.colors.secondary : theme.isDark ? theme.colors.dark : theme.colors.light};
-    background: ${$outline ? "transparent" : theme.colors.secondary};
-    border: solid 2px ${theme.colors.secondary};
-    box-shadow: 0 0 0 0px ${theme.colors.secondary};
-
-    &:hover {
-      background: ${$outline ? "transparent" : theme.colors.secondaryDark};
-      border-color: ${theme.colors.secondaryDark};
-      ${$outline && `color: ${theme.colors.secondaryDark}`};
-    }
-
-    &:focus {
-      box-shadow: 0 0 0 4px ${theme.colors.secondaryLight};
-    }
-
-    &:active {
-      box-shadow: 0 0 0 2px ${theme.colors.secondaryLight};
-    }
-  `}
-
-	${!disabled && $variant === "tertiary" && css`
-    color: ${$outline ? theme.colors.tertiary : theme.isDark ? theme.colors.dark : theme.colors.light};
-    background: ${$outline ? "transparent" : theme.colors.tertiary};
-    border: solid 2px ${theme.colors.tertiary};
-    box-shadow: 0 0 0 0px ${theme.colors.tertiary};
-
-    &:hover {
-      background: ${$outline ? "transparent" : theme.colors.tertiaryDark};
-      border-color: ${theme.colors.tertiaryDark};
-      ${$outline && `color: ${theme.colors.tertiaryDark}`};
-    }
-
-    &:focus {
-      box-shadow: 0 0 0 4px ${theme.colors.tertiaryLight};
-    }
-
-    &:active {
-      box-shadow: 0 0 0 2px ${theme.colors.tertiaryLight};
-    }
-  `}
-
-  ${!disabled && $error && css`
-    color: ${$outline ? theme.colors.error : theme.isDark ? theme.colors.dark : theme.colors.light};
-    background: ${$outline ? "transparent" : theme.colors.error};
-    border: solid 2px ${theme.colors.error};
-    box-shadow: 0 0 0 0px ${theme.colors.error};
-
-    &:hover {
-      background: ${$outline ? "transparent" : darken(0.1, theme.colors.error)};
-      border-color: ${darken(0.1, theme.colors.error)};
-      ${$outline && `color: ${darken(0.1, theme.colors.error)}`};
-    }
-
-    &:focus {
-      box-shadow: 0 0 0 4px ${lighten(0.1, theme.colors.error)};
-    }
-
-    &:active {
-      box-shadow: 0 0 0 2px ${lighten(0.1, theme.colors.error)};
-    }
-  `}
-
-
-	${formElementHeightStyles($size)}
-
-	${$size === "big" ? `font-size: ${theme.fontSizes.buttonBig.lg};
+//#region src/lib/button.tsx
+var buttonStyles = (theme, $variant, $size, $outline, $fullWidth, $error, disabled) => css([
+	``,
+	`;font-family:inherit;display:inline-flex;padding:15px 30px;border-radius:100px;font-weight:600;white-space:nowrap;hyphens:auto;color:`,
+	`;text-decoration:none;transition:all 0.3s ease;text-align:center;gap:10px;text-overflow:ellipsis;justify-content:center;align-items:center;min-height:fit-content;& .icon,& .lucide{margin:auto 0;}`,
+	` `,
+	` `,
+	` `,
+	` `,
+	` `,
+	` `,
+	` `,
+	``
+], resetButton, theme.isDark ? theme.colors.dark : theme.colors.light, !disabled && $variant === "primary" && css([
+	`color:`,
+	`;background:`,
+	`;border:solid 2px `,
+	`;box-shadow:0 0 0 0px `,
+	`;&:hover{background:`,
+	`;border-color:`,
+	`;`,
+	`;}&:focus{box-shadow:0 0 0 4px `,
+	`;}&:active{box-shadow:0 0 0 2px `,
+	`;}`
+], $outline ? theme.colors.primary : theme.isDark ? theme.colors.dark : theme.colors.light, $outline ? "transparent" : theme.colors.primary, theme.colors.primary, theme.colors.primary, $outline ? "transparent" : theme.colors.primaryDark, theme.colors.primaryDark, $outline && `color: ${theme.colors.primaryDark}`, theme.colors.primaryLight, theme.colors.primaryLight), !disabled && $variant === "secondary" && css([
+	`color:`,
+	`;background:`,
+	`;border:solid 2px `,
+	`;box-shadow:0 0 0 0px `,
+	`;&:hover{background:`,
+	`;border-color:`,
+	`;`,
+	`;}&:focus{box-shadow:0 0 0 4px `,
+	`;}&:active{box-shadow:0 0 0 2px `,
+	`;}`
+], $outline ? theme.colors.secondary : theme.isDark ? theme.colors.dark : theme.colors.light, $outline ? "transparent" : theme.colors.secondary, theme.colors.secondary, theme.colors.secondary, $outline ? "transparent" : theme.colors.secondaryDark, theme.colors.secondaryDark, $outline && `color: ${theme.colors.secondaryDark}`, theme.colors.secondaryLight, theme.colors.secondaryLight), !disabled && $variant === "tertiary" && css([
+	`color:`,
+	`;background:`,
+	`;border:solid 2px `,
+	`;box-shadow:0 0 0 0px `,
+	`;&:hover{background:`,
+	`;border-color:`,
+	`;`,
+	`;}&:focus{box-shadow:0 0 0 4px `,
+	`;}&:active{box-shadow:0 0 0 2px `,
+	`;}`
+], $outline ? theme.colors.tertiary : theme.isDark ? theme.colors.dark : theme.colors.light, $outline ? "transparent" : theme.colors.tertiary, theme.colors.tertiary, theme.colors.tertiary, $outline ? "transparent" : theme.colors.tertiaryDark, theme.colors.tertiaryDark, $outline && `color: ${theme.colors.tertiaryDark}`, theme.colors.tertiaryLight, theme.colors.tertiaryLight), !disabled && $error && css([
+	`color:`,
+	`;background:`,
+	`;border:solid 2px `,
+	`;box-shadow:0 0 0 0px `,
+	`;&:hover{background:`,
+	`;border-color:`,
+	`;`,
+	`;}&:focus{box-shadow:0 0 0 4px `,
+	`;}&:active{box-shadow:0 0 0 2px `,
+	`;}`
+], $outline ? theme.colors.error : theme.isDark ? theme.colors.dark : theme.colors.light, $outline ? "transparent" : theme.colors.error, theme.colors.error, theme.colors.error, $outline ? "transparent" : darken(.1, theme.colors.error), darken(.1, theme.colors.error), $outline && `color: ${darken(.1, theme.colors.error)}`, lighten(.1, theme.colors.error), lighten(.1, theme.colors.error)), formElementHeightStyles($size), $size === "big" ? `font-size: ${theme.fontSizes.buttonBig.lg};
 			line-height: ${theme.lineHeights.buttonBig.lg};
       padding: 18px 30px;
 	` : $size === "small" ? `font-size: ${theme.fontSizes.buttonSmall.lg};
 			line-height: ${theme.lineHeights.buttonSmall.lg};
       padding: 10px 20px;
 	` : `font-size: ${theme.fontSizes.button.lg};
-			line-height: ${theme.lineHeights.button.lg};`}
-
-	${disabled && `
+			line-height: ${theme.lineHeights.button.lg};`, disabled && `
 		cursor: not-allowed;
 		background: ${theme.colors.grayLight};
     border: solid 2px ${theme.colors.grayLight};
 		color: ${theme.colors.gray};
-	`}
-
-	${$fullWidth && `width: 100%;`}
-`;
-const StyledButton = styled.button`
-  ${({ theme, $variant, $error, $size, $outline, $fullWidth, disabled }) => buttonStyles(
-  theme,
-  $variant,
-  $size,
-  $outline,
-  $fullWidth,
-  $error,
-  disabled
-)}
-`;
+	`, $fullWidth && `width: 100%;`);
+var StyledButton = styled.button.withConfig({
+	displayName: "button__StyledButton",
+	componentId: "sc-f54d90ca-0"
+})([``, ``], ({ theme, $variant, $error, $size, $outline, $fullWidth, disabled }) => buttonStyles(theme, $variant, $size, $outline, $fullWidth, $error, disabled));
 function LocalButton({ $variant = "primary", ...props }, ref) {
-  return /* @__PURE__ */ jsxs(
-    StyledButton,
-    {
-      $variant,
-      $error: props.$error,
-      ...props,
-      ref,
-      children: [
-        props.$iconPosition !== "right" && props.$icon && props.$icon,
-        props.children,
-        props.$iconPosition === "right" && props.$icon && props.$icon
-      ]
-    }
-  );
+	return /* @__PURE__ */ jsxs(StyledButton, {
+		$variant,
+		$error: props.$error,
+		...props,
+		ref,
+		children: [
+			props.$iconPosition !== "right" && props.$icon && props.$icon,
+			props.children,
+			props.$iconPosition === "right" && props.$icon && props.$icon
+		]
+	});
 }
-const Button = forwardRef(LocalButton);
-export {
-  Button,
-  buttonStyles
-};
+var Button = /* @__PURE__ */ forwardRef(LocalButton);
+//#endregion
+export { Button, buttonStyles };

package/dist/col.js

@@ -1,25 +1,33 @@
 "use client";
+"use client";
+import { generateColSpanStyles } from "./utils/mixins.js";
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import styled from "styled-components";
-import { generateColSpanStyles } from "./utils/mixins.js";
-const StyledCol = styled.div`
-  ${({ $span }) => $span && `
+//#region src/lib/col.tsx
+var StyledCol = styled.div.withConfig({
+	displayName: "col__StyledCol",
+	componentId: "sc-23d5c96e-0"
+})([
+	``,
+	` `,
+	` `,
+	` `,
+	` `,
+	` `,
+	` `,
+	` `,
+	``
+], ({ $span }) => $span && `
 		grid-column: span ${$span};
-	`}
-
-  ${({ $xsSpan }) => $xsSpan && generateColSpanStyles("xs", $xsSpan)}
-	${({ $smSpan }) => $smSpan && generateColSpanStyles("sm", $smSpan)}
-	${({ $mdSpan }) => $mdSpan && generateColSpanStyles("md", $mdSpan)}
-	${({ $lgSpan }) => $lgSpan && generateColSpanStyles("lg", $lgSpan)}
-	${({ $xlSpan }) => $xlSpan && generateColSpanStyles("xl", $xlSpan)}
-	${({ $xxlSpan }) => $xxlSpan && generateColSpanStyles("xxl", $xxlSpan)}
-	${({ $xxxlSpan }) => $xxxlSpan && generateColSpanStyles("xxxl", $xxxlSpan)}
-`;
+	`, ({ $xsSpan }) => $xsSpan && generateColSpanStyles("xs", $xsSpan), ({ $smSpan }) => $smSpan && generateColSpanStyles("sm", $smSpan), ({ $mdSpan }) => $mdSpan && generateColSpanStyles("md", $mdSpan), ({ $lgSpan }) => $lgSpan && generateColSpanStyles("lg", $lgSpan), ({ $xlSpan }) => $xlSpan && generateColSpanStyles("xl", $xlSpan), ({ $xxlSpan }) => $xxlSpan && generateColSpanStyles("xxl", $xxlSpan), ({ $xxxlSpan }) => $xxxlSpan && generateColSpanStyles("xxxl", $xxxlSpan));
 function LocalCol({ ...props }, ref) {
-  return /* @__PURE__ */ jsx(StyledCol, { ...props, ref, children: props.children });
+	return /* @__PURE__ */ jsx(StyledCol, {
+		...props,
+		ref,
+		children: props.children
+	});
 }
-const Col = forwardRef(LocalCol);
-export {
-  Col
-};
+var Col = /* @__PURE__ */ forwardRef(LocalCol);
+//#endregion
+export { Col };

package/dist/container.js

@@ -1,36 +1,38 @@
 "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";
-import { mq } from "./utils/theme.js";
-import { generatePaddingStyles } from "./utils/mixins.js";
-const StyledContainer = styled.div`
-  margin: auto;
-  width: 100%;
-  max-width: ${({ theme, $fluid }) => $fluid ? `100%` : theme.spacing.maxWidth.xs};
-  ${({ $textAlign }) => $textAlign && `text-align: ${$textAlign}`};
-  padding: ${({ $padding, theme }) => $padding && `${$padding}px` || theme.spacing.padding.xs};
-
-  ${mq("lg")} {
-    padding: ${({ $padding, theme }) => $padding && `${$padding}px` || theme.spacing.padding.lg};
-  }
-
-  ${mq("xxxl")} {
-    max-width: ${({ 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)}
-`;
+//#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 });
+	return /* @__PURE__ */ jsx(StyledContainer, {
+		...props,
+		ref,
+		children: props.children
+	});
 }
-const Container = forwardRef(LocalContainer);
-export {
-  Container
-};
+var Container = /* @__PURE__ */ forwardRef(LocalContainer);
+//#endregion
+export { Container };

package/dist/flex.js

@@ -1,40 +1,45 @@
 "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";
-import { generateGapStyles, generateJustifyContentStyles, fullWidthStyles } from "./utils/mixins.js";
-import { mq } from "./utils/theme.js";
-const StyledFlex = styled.div`
-  display: flex;
-  justify-content: ${({ $justifyContent }) => $justifyContent || "flex-start"};
-  flex-wrap: ${({ $wrap }) => $wrap || "wrap"};
-  gap: ${({ $gap, theme }) => $gap !== void 0 && $gap !== "none" ? `${$gap}px` : theme.spacing.gridGap.xs};
-  flex-direction: ${({ $direction }) => $direction || "row"};
-
-  ${mq("lg")} {
-    gap: ${({ $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)}
-`;
+//#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 });
+	return /* @__PURE__ */ jsx(StyledFlex, {
+		...props,
+		ref,
+		children: props.children
+	});
 }
-const Flex = forwardRef(LocalFlex);
-export {
-  Flex
-};
+var Flex = /* @__PURE__ */ forwardRef(LocalFlex);
+//#endregion
+export { Flex };

package/dist/grid.js

@@ -1,39 +1,42 @@
 "use client";
+"use client";
+import { mq } from "./utils/theme.js";
+import { generateColsStyles, generateGapStyles } from "./utils/mixins.js";
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import styled from "styled-components";
-import { generateGapStyles, generateColsStyles } from "./utils/mixins.js";
-import { mq } from "./utils/theme.js";
-const StyledGrid = styled.div`
-  width: 100%;
-  display: grid;
-  grid-template-columns: ${({ $cols }) => `repeat(${$cols || 3}, minmax(0, 1fr))`};
-  gap: ${({ $gap, theme }) => $gap !== void 0 && $gap !== "none" ? `${$gap}px` : theme.spacing.gridGap.xs};
-
-  ${mq("lg")} {
-    gap: ${({ $gap, theme }) => $gap !== void 0 && $gap !== "none" ? `${$gap}px` : theme.spacing.gridGap.lg};
-  }
-
-  ${({ $xsGap }) => $xsGap !== void 0 && generateGapStyles("xs", $xsGap)}
-  ${({ $smGap }) => $smGap !== void 0 && generateGapStyles("sm", $smGap)}
-	${({ $mdGap }) => $mdGap !== void 0 && generateGapStyles("md", $mdGap)}
-	${({ $lgGap }) => $lgGap !== void 0 && generateGapStyles("lg", $lgGap)}
-	${({ $xlGap }) => $xlGap !== void 0 && generateGapStyles("xl", $xlGap)}
-	${({ $xxlGap }) => $xxlGap !== void 0 && generateGapStyles("xxl", $xxlGap)}
-	${({ $xxxlGap }) => $xxxlGap !== void 0 && generateGapStyles("xxxl", $xxxlGap)}
-
-	${({ $xsCols }) => $xsCols && generateColsStyles("xs", $xsCols)}
-	${({ $smCols }) => $smCols && generateColsStyles("sm", $smCols)}
-	${({ $mdCols }) => $mdCols && generateColsStyles("md", $mdCols)}
-	${({ $lgCols }) => $lgCols && generateColsStyles("lg", $lgCols)}
-	${({ $xlCols }) => $xlCols && generateColsStyles("xl", $xlCols)}
-	${({ $xxlCols }) => $xxlCols && generateColsStyles("xxl", $xxlCols)}
-	${({ $xxxlCols }) => $xxxlCols && generateColsStyles("xxxl", $xxxlCols)}
-`;
+//#region src/lib/grid.tsx
+var StyledGrid = styled.div.withConfig({
+	displayName: "grid__StyledGrid",
+	componentId: "sc-593ceaf6-0"
+})([
+	`width:100%;display:grid;grid-template-columns:`,
+	`;gap:`,
+	`;`,
+	`{gap:`,
+	`;}`,
+	` `,
+	` `,
+	` `,
+	` `,
+	` `,
+	` `,
+	` `,
+	` `,
+	` `,
+	` `,
+	` `,
+	` `,
+	` `,
+	``
+], ({ $cols }) => `repeat(${$cols || 3}, minmax(0, 1fr))`, ({ $gap, theme }) => $gap !== void 0 && $gap !== "none" ? `${$gap}px` : theme.spacing.gridGap.xs, mq("lg"), ({ $gap, theme }) => $gap !== void 0 && $gap !== "none" ? `${$gap}px` : theme.spacing.gridGap.lg, ({ $xsGap }) => $xsGap !== void 0 && generateGapStyles("xs", $xsGap), ({ $smGap }) => $smGap !== void 0 && generateGapStyles("sm", $smGap), ({ $mdGap }) => $mdGap !== void 0 && generateGapStyles("md", $mdGap), ({ $lgGap }) => $lgGap !== void 0 && generateGapStyles("lg", $lgGap), ({ $xlGap }) => $xlGap !== void 0 && generateGapStyles("xl", $xlGap), ({ $xxlGap }) => $xxlGap !== void 0 && generateGapStyles("xxl", $xxlGap), ({ $xxxlGap }) => $xxxlGap !== void 0 && generateGapStyles("xxxl", $xxxlGap), ({ $xsCols }) => $xsCols && generateColsStyles("xs", $xsCols), ({ $smCols }) => $smCols && generateColsStyles("sm", $smCols), ({ $mdCols }) => $mdCols && generateColsStyles("md", $mdCols), ({ $lgCols }) => $lgCols && generateColsStyles("lg", $lgCols), ({ $xlCols }) => $xlCols && generateColsStyles("xl", $xlCols), ({ $xxlCols }) => $xxlCols && generateColsStyles("xxl", $xxlCols), ({ $xxxlCols }) => $xxxlCols && generateColsStyles("xxxl", $xxxlCols));
 function LocalGrid({ ...props }, ref) {
-  return /* @__PURE__ */ jsx(StyledGrid, { ...props, ref, children: props.children });
+	return /* @__PURE__ */ jsx(StyledGrid, {
+		...props,
+		ref,
+		children: props.children
+	});
 }
-const Grid = forwardRef(LocalGrid);
-export {
-  Grid
-};
+var Grid = /* @__PURE__ */ forwardRef(LocalGrid);
+//#endregion
+export { Grid };

package/dist/icon.js

@@ -1,26 +1,17 @@
 import { jsx } from "react/jsx-runtime";
 import { icons } from "lucide-react";
-const Icon = ({
-  name,
-  color,
-  size,
-  className,
-  "aria-label": ariaLabel
-}) => {
-  const LucideIcon = icons[name];
-  if (!LucideIcon) return null;
-  return /* @__PURE__ */ jsx(
-    LucideIcon,
-    {
-      color,
-      size,
-      className,
-      "aria-label": ariaLabel,
-      "aria-hidden": !ariaLabel,
-      role: ariaLabel ? "img" : void 0
-    }
-  );
-};
-export {
-  Icon
+//#region src/lib/icon.tsx
+var Icon = ({ name, color, size, className, "aria-label": ariaLabel }) => {
+	const LucideIcon = icons[name];
+	if (!LucideIcon) return null;
+	return /* @__PURE__ */ jsx(LucideIcon, {
+		color,
+		size,
+		className,
+		"aria-label": ariaLabel,
+		"aria-hidden": !ariaLabel,
+		role: ariaLabel ? "img" : void 0
+	});
 };
+//#endregion
+export { Icon };