cherry-styled-components 0.1.11 → 0.1.13

package/{src/lib/input.tsx → dist/input.js}

@@ -1,53 +1,15 @@
 "use client";
-import React, { forwardRef } from "react";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
 import styled, { css } from "styled-components";
-import type { IStyledComponent } from "styled-components";
-import {
-  Theme,
-  IconCheck,
-  formElementHeightStyles,
-  fullWidthStyles,
-  resetButton,
-  resetInput,
-  statusBorderStyles,
-  IconCalendar,
-} from "./utils";
-
-interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
-  children?: React.ReactNode;
-  $wrapperClassName?: string;
-  $label?: string;
-  $size?: "default" | "big" | "small";
-  $error?: boolean;
-  $success?: boolean;
-  $fullWidth?: boolean;
-  $icon?: React.ReactNode;
-  $iconPosition?: "left" | "right";
-  theme?: Theme;
-}
-
-interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
-  $label?: string;
-  $size?: "default" | "big" | "small";
-  $error?: boolean;
-  $success?: boolean;
-  $fullWidth?: boolean;
-  theme?: Theme;
-}
-
-export const StyledInputWrapper: IStyledComponent<
-  "web",
-  React.HTMLAttributes<HTMLSpanElement> &
-    Pick<InputProps, "$label" | "$fullWidth" | "type">
-> = styled.span<Pick<InputProps, "$label" | "$fullWidth" | "type">>`
+import { IconCheck, IconCalendar } from "./utils/icons.js";
+import { fullWidthStyles, resetButton, statusBorderStyles, resetInput, formElementHeightStyles } from "./utils/mixins.js";
+const StyledInputWrapper = styled.span`
   display: inline-flex;
-  flex-wrap: ${({ type }) =>
-    type === "checkbox" || type === "radio" ? "nowrap" : "wrap"};
+  flex-wrap: ${({ type }) => type === "checkbox" || type === "radio" ? "nowrap" : "wrap"};
   align-items: center;
 
-  ${({ $label }) =>
-    $label &&
-    css`
+  ${({ $label }) => $label && css`
       gap: 5px;
       align-items: flex-start;
     `}
@@ -67,18 +29,15 @@ export const StyledInputWrapper: IStyledComponent<
     }
   }
 
-  ${({ $fullWidth }) => fullWidthStyles($fullWidth ? true : false)}
+  ${({ $fullWidth }) => fullWidthStyles($fullWidth)}
 `;
-
-export const StyledLabel: IStyledComponent<"web", LabelProps> =
-  styled.label<LabelProps>`
+const StyledLabel = styled.label`
     display: inline-block;
     color: ${({ theme }) => theme.colors.grayDark};
     font-size: ${({ theme }) => theme.fontSizes.small.lg};
     line-height: ${({ theme }) => theme.lineHeights.small.lg};
   `;
-
-const StyledInput = styled.input<InputProps>`
+const StyledInput = styled.input`
   ${resetButton};
   ${resetInput};
   font-family: inherit;
@@ -175,39 +134,27 @@ const StyledInput = styled.input<InputProps>`
 
   ${({ $size }) => formElementHeightStyles($size)}
 
-  ${({ $size, theme }) =>
-    $size === "big"
-      ? `font-size: ${theme.fontSizes.inputBig.lg};
+  ${({ $size, theme }) => $size === "big" ? `font-size: ${theme.fontSizes.inputBig.lg};
 			line-height: ${theme.lineHeights.inputBig.lg};
-	`
-      : $size === "small"
-        ? `font-size: ${theme.fontSizes.inputSmall.lg};
+	` : $size === "small" ? `font-size: ${theme.fontSizes.inputSmall.lg};
 			line-height: ${theme.lineHeights.inputSmall.lg};
       padding: 12px 12px;
-	`
-        : `font-size: ${theme.fontSizes.input.lg};
+	` : `font-size: ${theme.fontSizes.input.lg};
 			line-height: ${theme.lineHeights.input.lg};`}
 
 	${({ $error, $success, theme }) => {
-    return statusBorderStyles(
-      $error ? true : false,
-      $success ? true : false,
-      theme,
-    );
-  }}
+  return statusBorderStyles($error, $success, theme);
+}}
 
-	${({ disabled, theme }) =>
-    disabled &&
-    `cursor: not-allowed;
+	${({ disabled, theme }) => disabled && `cursor: not-allowed;
 		background: ${theme.colors.grayLight};
 		border-color: ${theme.colors.gray};
 		color: ${theme.colors.gray};
 	`}
 
-	${({ $fullWidth }) => fullWidthStyles($fullWidth ? true : false)}
+	${({ $fullWidth }) => fullWidthStyles($fullWidth)}
 `;
-
-const StyledIconWrapper = styled.span<InputProps>`
+const StyledIconWrapper = styled.span`
   display: inline-flex;
   position: relative;
   line-height: 0;
@@ -231,8 +178,7 @@ const StyledIconWrapper = styled.span<InputProps>`
     transition: all 0.3s ease;
   }
 `;
-
-const StyledRadioCheckboxInput = styled.input<InputProps>`
+const StyledRadioCheckboxInput = styled.input`
   ${resetButton};
   display: inline-block;
   background: ${({ theme }) => theme.colors.light};
@@ -253,30 +199,21 @@ const StyledRadioCheckboxInput = styled.input<InputProps>`
     box-shadow: 0 0 0 2px ${({ theme }) => theme.colors.primaryLight};
   }
 
-  ${({ type, theme }) =>
-    type === "checkbox"
-      ? `border-radius: ${theme.spacing.radius.xs};`
-      : `border-radius: 50%;`}
+  ${({ type, theme }) => type === "checkbox" ? `border-radius: ${theme.spacing.radius.xs};` : `border-radius: 50%;`}
 
-  ${({ disabled, theme }) =>
-    disabled &&
-    `cursor: not-allowed;
+  ${({ disabled, theme }) => disabled && `cursor: not-allowed;
 		background: ${theme.colors.grayLight};
     border: solid 2px ${theme.colors.gray};
 		color: ${theme.colors.gray};
 	`}
 
 	${({ $error, $success, theme }) => {
-    return statusBorderStyles(
-      $error ? true : false,
-      $success ? true : false,
-      theme,
-    );
-  }}
+  return statusBorderStyles($error, $success, theme);
+}}
 
 	${({ $size }) => {
-    if ($size === "big") {
-      return `
+  if ($size === "big") {
+    return `
 					min-width: 32px;
 					width: 32px;
 					min-height: 32px;
@@ -296,8 +233,8 @@ const StyledRadioCheckboxInput = styled.input<InputProps>`
 						height: 14px;
 					}
 				`;
-    } else if ($size === "small") {
-      return `
+  } else if ($size === "small") {
+    return `
 					min-width: 18px;
 					width: 18px;
 					min-height: 18px;
@@ -317,8 +254,8 @@ const StyledRadioCheckboxInput = styled.input<InputProps>`
 						height: 6px;
 					}
 				`;
-    } else {
-      return `
+  } else {
+    return `
 					min-width: 22px;
 					width: 22px;
 					min-height: 22px;
@@ -338,8 +275,8 @@ const StyledRadioCheckboxInput = styled.input<InputProps>`
 						height: 8px;
 					}
 				`;
-    }
-  }}
+  }
+}}
 
 	&:checked ~ svg,
 	&:checked ~ em {
@@ -347,10 +284,9 @@ const StyledRadioCheckboxInput = styled.input<InputProps>`
     transform: translate(-50%, -50%) scale(1);
   }
 `;
-
-const StyledCustomIconWrapper = styled.span<InputProps>`
+const StyledCustomIconWrapper = styled.span`
   position: relative;
-  ${({ $fullWidth }) => fullWidthStyles($fullWidth ? true : false)};
+  ${({ $fullWidth }) => fullWidthStyles($fullWidth)};
 
   & svg {
     position: absolute;
@@ -363,9 +299,7 @@ const StyledCustomIconWrapper = styled.span<InputProps>`
     color: ${({ theme }) => theme.colors.primary};
   }
 
-  ${({ $icon, $iconPosition }) =>
-    $icon && $iconPosition === "right"
-      ? css`
+  ${({ $icon, $iconPosition }) => $icon && $iconPosition === "right" ? css`
           & svg {
             right: 16px;
           }
@@ -373,8 +307,7 @@ const StyledCustomIconWrapper = styled.span<InputProps>`
           & input {
             padding-right: 50px;
           }
-        `
-      : css`
+        ` : css`
           & svg {
             left: 16px;
           }
@@ -384,58 +317,69 @@ const StyledCustomIconWrapper = styled.span<InputProps>`
           }
         `}
 `;
-
-function LocalInput(
-  { ...props }: InputProps,
-  ref: React.Ref<HTMLInputElement>,
-) {
+function LocalInput({ ...props }, ref) {
   if (props.type === "checkbox" || props.type === "radio") {
-    return (
-      <StyledInputWrapper
-        $fullWidth={props.$fullWidth}
-        type={props.type}
-        $label={props.$label}
-        className={props.$wrapperClassName}
-      >
-        <StyledIconWrapper>
-          <StyledRadioCheckboxInput {...props} ref={ref} />
-          {!props.disabled && props.type === "checkbox" ? (
-            <IconCheck />
-          ) : (
-            <em />
-          )}
-        </StyledIconWrapper>
-        {props.$label && (
-          <StyledLabel htmlFor={props.id}>{props.$label}</StyledLabel>
-        )}
-      </StyledInputWrapper>
+    return /* @__PURE__ */ jsxs(
+      StyledInputWrapper,
+      {
+        $fullWidth: props.$fullWidth,
+        type: props.type,
+        $label: props.$label,
+        className: props.$wrapperClassName,
+        children: [
+          /* @__PURE__ */ jsxs(StyledIconWrapper, { children: [
+            /* @__PURE__ */ jsx(
+              StyledRadioCheckboxInput,
+              {
+                ...props,
+                "aria-invalid": props.$error || void 0,
+                ref
+              }
+            ),
+            !props.disabled && props.type === "checkbox" ? /* @__PURE__ */ jsx(IconCheck, {}) : /* @__PURE__ */ jsx("em", {})
+          ] }),
+          props.$label && /* @__PURE__ */ jsx(StyledLabel, { htmlFor: props.id, children: props.$label })
+        ]
+      }
     );
   }
-
-  return (
-    <StyledInputWrapper
-      $fullWidth={props.$fullWidth}
-      type={props.type}
-      $label={props.$label}
-      className={props.$wrapperClassName}
-    >
-      {props.$label && (
-        <StyledLabel htmlFor={props.id}>{props.$label}</StyledLabel>
-      )}
-      <StyledCustomIconWrapper
-        $fullWidth={props.$fullWidth}
-        $iconPosition={props.$iconPosition}
-        $icon={props.$icon}
-      >
-        {props.$iconPosition !== "right" && props.$icon && props.$icon}
-        <StyledInput {...props} ref={ref} />
-        {props.$iconPosition === "right" && props.$icon && props.$icon}
-        {props.type === "date" && <IconCalendar className="icon-calendar" />}
-      </StyledCustomIconWrapper>
-    </StyledInputWrapper>
+  return /* @__PURE__ */ jsxs(
+    StyledInputWrapper,
+    {
+      $fullWidth: props.$fullWidth,
+      type: props.type,
+      $label: props.$label,
+      className: props.$wrapperClassName,
+      children: [
+        props.$label && /* @__PURE__ */ jsx(StyledLabel, { htmlFor: props.id, children: props.$label }),
+        /* @__PURE__ */ jsxs(
+          StyledCustomIconWrapper,
+          {
+            $fullWidth: props.$fullWidth,
+            $iconPosition: props.$iconPosition,
+            $icon: props.$icon,
+            children: [
+              props.$iconPosition !== "right" && props.$icon && props.$icon,
+              /* @__PURE__ */ jsx(
+                StyledInput,
+                {
+                  ...props,
+                  "aria-invalid": props.$error || void 0,
+                  ref
+                }
+              ),
+              props.$iconPosition === "right" && props.$icon && props.$icon,
+              props.type === "date" && /* @__PURE__ */ jsx(IconCalendar, { className: "icon-calendar" })
+            ]
+          }
+        )
+      ]
+    }
   );
 }
-
 const Input = forwardRef(LocalInput);
-
-export { Input };
+export {
+  Input,
+  StyledInputWrapper,
+  StyledLabel
+};

package/dist/lib/button.d.ts

@@ -8,9 +8,8 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
     $fullWidth?: boolean;
     $icon?: React.ReactNode;
     $iconPosition?: "left" | "right";
-    $isError?: boolean;
-    theme?: Theme;
+    $error?: boolean;
 }
-export declare const buttonStyles: (theme: Theme, $variant?: "primary" | "secondary" | "tertiary", $size?: "default" | "big" | "small", $outline?: boolean, $fullWidth?: boolean, $isError?: boolean, disabled?: boolean) => import('styled-components').RuleSet<object>;
+export declare const buttonStyles: (theme: Theme, $variant?: "primary" | "secondary" | "tertiary", $size?: "default" | "big" | "small", $outline?: boolean, $fullWidth?: boolean, $error?: boolean, disabled?: boolean) => import('styled-components').RuleSet<object>;
 declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
 export { Button };

package/dist/lib/col.d.ts

@@ -1,5 +1,4 @@
 import { default as React } from 'react';
-import { Theme } from './utils';
 interface ColProps extends React.HTMLAttributes<HTMLDivElement> {
     children?: React.ReactNode;
     $span?: number;
@@ -10,7 +9,6 @@ interface ColProps extends React.HTMLAttributes<HTMLDivElement> {
     $xlSpan?: number;
     $xxlSpan?: number;
     $xxxlSpan?: number;
-    theme?: Theme;
 }
 declare const Col: React.ForwardRefExoticComponent<ColProps & React.RefAttributes<HTMLDivElement>>;
 export { Col };

package/dist/lib/container.d.ts

@@ -1,5 +1,4 @@
 import { default as React } from 'react';
-import { Theme } from './utils';
 export interface ContainerProps extends React.HTMLAttributes<HTMLDivElement> {
     className?: string;
     children?: React.ReactNode;
@@ -13,7 +12,6 @@ export interface ContainerProps extends React.HTMLAttributes<HTMLDivElement> {
     $xlPadding?: number | "none";
     $xxlPadding?: number | "none";
     $xxxlPadding?: number | "none";
-    theme?: Theme;
 }
 declare const Container: React.ForwardRefExoticComponent<ContainerProps & React.RefAttributes<HTMLDivElement>>;
 export { Container };

package/dist/lib/flex.d.ts

@@ -1,8 +1,7 @@
 import { default as React } from 'react';
-import { Theme } from './utils';
 type JustifyContentType = "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly";
 type GapType = number | "none";
-interface FlexProps extends React.AllHTMLAttributes<FlexProps> {
+interface FlexProps extends React.HTMLAttributes<HTMLDivElement> {
     children?: React.ReactNode;
     $justifyContent?: JustifyContentType;
     $xsJustifyContent?: JustifyContentType;
@@ -23,7 +22,6 @@ interface FlexProps extends React.AllHTMLAttributes<FlexProps> {
     $xxxlGap?: GapType;
     $direction?: "row" | "column" | "row-reverse" | "column-reverse";
     $fullWidth?: boolean;
-    theme?: Theme;
 }
 declare const Flex: React.ForwardRefExoticComponent<FlexProps & React.RefAttributes<HTMLDivElement>>;
 export { Flex };

package/dist/lib/grid.d.ts

@@ -1,5 +1,4 @@
 import { default as React } from 'react';
-import { Theme } from './utils';
 interface GridProps extends React.HTMLAttributes<HTMLDivElement> {
     children?: React.ReactNode;
     $gap?: number | "none";
@@ -18,7 +17,6 @@ interface GridProps extends React.HTMLAttributes<HTMLDivElement> {
     $xlCols?: number;
     $xxlCols?: number;
     $xxxlCols?: number;
-    theme?: Theme;
 }
 declare const Grid: React.ForwardRefExoticComponent<GridProps & React.RefAttributes<HTMLDivElement>>;
 export { Grid };

package/dist/lib/icon.d.ts

@@ -5,6 +5,7 @@ interface Props {
     color?: string;
     size?: number;
     className?: string;
+    "aria-label"?: string;
 }
-declare const Icon: ({ name, color, size, className }: Props) => import("react").JSX.Element | null;
+declare const Icon: ({ name, color, size, className, "aria-label": ariaLabel, }: Props) => import("react").JSX.Element | null;
 export { Icon };

package/dist/lib/input.d.ts

@@ -1,6 +1,5 @@
 import { default as React } from 'react';
 import { IStyledComponent } from 'styled-components';
-import { Theme } from './utils';
 interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
     children?: React.ReactNode;
     $wrapperClassName?: string;
@@ -11,7 +10,6 @@ interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
     $fullWidth?: boolean;
     $icon?: React.ReactNode;
     $iconPosition?: "left" | "right";
-    theme?: Theme;
 }
 interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
     $label?: string;
@@ -19,7 +17,6 @@ interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
     $error?: boolean;
     $success?: boolean;
     $fullWidth?: boolean;
-    theme?: Theme;
 }
 export declare const StyledInputWrapper: IStyledComponent<"web", React.HTMLAttributes<HTMLSpanElement> & Pick<InputProps, "$label" | "$fullWidth" | "type">>;
 export declare const StyledLabel: IStyledComponent<"web", LabelProps>;

package/dist/lib/range.d.ts

@@ -1,5 +1,4 @@
 import { default as React } from 'react';
-import { Theme } from './utils';
 interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> {
     className?: string;
     $wrapperClassName?: string;
@@ -8,7 +7,6 @@ interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "
     $error?: boolean;
     $success?: boolean;
     $fullWidth?: boolean;
-    theme?: Theme;
 }
 declare const Range: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
 export { Range };

package/dist/lib/select.d.ts

@@ -1,6 +1,5 @@
 import { default as React } from 'react';
 import { IStyledComponent } from 'styled-components';
-import { Theme } from './utils';
 interface SelectProps extends React.InputHTMLAttributes<HTMLSelectElement> {
     children?: React.ReactNode;
     $wrapperClassName?: string;
@@ -9,7 +8,6 @@ interface SelectProps extends React.InputHTMLAttributes<HTMLSelectElement> {
     $error?: boolean;
     $success?: boolean;
     $fullWidth?: boolean;
-    theme?: Theme;
 }
 export declare const StyledIconWrapper: IStyledComponent<"web", SelectProps>;
 declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLSelectElement>>;

package/dist/lib/styled-components/theme-provider.d.ts

@@ -1,7 +1,7 @@
 import { default as React } from 'react';
 import { Theme } from '../utils';
 interface ThemeContextProps {
-    setTheme: any;
+    setTheme: React.Dispatch<React.SetStateAction<Theme>>;
 }
 export declare const ThemeContext: React.Context<ThemeContextProps>;
 declare function CherryThemeProvider({ children, theme, themeDark, }: {

package/dist/lib/textarea.d.ts

@@ -1,5 +1,4 @@
 import { default as React } from 'react';
-import { Theme } from './utils';
 interface TextareaProps extends Omit<React.InputHTMLAttributes<HTMLTextAreaElement>, "size"> {
     children?: React.ReactNode;
     $wrapperClassName?: string;
@@ -8,7 +7,6 @@ interface TextareaProps extends Omit<React.InputHTMLAttributes<HTMLTextAreaEleme
     $error?: boolean;
     $success?: boolean;
     $fullWidth?: boolean;
-    theme?: Theme;
     rows?: number;
 }
 declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;

package/dist/lib/toggle.d.ts

@@ -1,5 +1,4 @@
 import { default as React } from 'react';
-import { Theme } from './utils';
 interface ToggleProps extends React.InputHTMLAttributes<HTMLInputElement> {
     children?: React.ReactNode;
     type?: "checkbox" | "radio";
@@ -9,7 +8,6 @@ interface ToggleProps extends React.InputHTMLAttributes<HTMLInputElement> {
     $error?: boolean;
     $success?: boolean;
     $fullWidth?: boolean;
-    theme?: Theme;
 }
 declare const Toggle: React.ForwardRefExoticComponent<ToggleProps & React.RefAttributes<HTMLInputElement>>;
 export { Toggle };

package/dist/lib/utils/mixins.d.ts

@@ -1,8 +1,8 @@
 import { Breakpoints, Theme } from './theme';
 export declare const resetButton: import('styled-components').RuleSet<object>;
 export declare const resetInput: import('styled-components').RuleSet<object>;
-export declare const fullWidthStyles: (fullWidth: boolean) => import('styled-components').RuleSet<object> | undefined;
-export declare const statusBorderStyles: ($error: boolean, $success: boolean, theme: Theme) => import('styled-components').RuleSet<object> | undefined;
+export declare const fullWidthStyles: (fullWidth?: boolean) => import('styled-components').RuleSet<object> | undefined;
+export declare const statusBorderStyles: ($error?: boolean, $success?: boolean, theme?: Theme) => import('styled-components').RuleSet<object> | undefined;
 export declare const formElementHeightStyles: ($size?: "default" | "big" | "small") => import('styled-components').RuleSet<object>;
 export declare const generateGapStyles: (size: keyof Breakpoints<number>, gap: number | "none") => import('styled-components').RuleSet<object>;
 export declare const generateColsStyles: (size: keyof Breakpoints<number>, cols: number) => import('styled-components').RuleSet<object>;

package/dist/lib/utils/theme.d.ts

@@ -58,7 +58,7 @@ export interface Colors<TString = string> {
     dark: TString;
     light: TString;
 }
-interface Shadows<TString = string> {
+export interface Shadows<TString = string> {
     xs: TString;
     sm: TString;
     md: TString;
@@ -244,4 +244,3 @@ export interface Theme {
     lineHeights: LineHeights;
     isDark: boolean;
 }
-export {};

package/dist/lib/utils/typography.d.ts

@@ -1,4 +1,5 @@
-import { Theme } from './theme';
+import { FontSizes, Theme } from './theme';
+declare const createTypographyStyle: (key: keyof FontSizes) => (theme: Theme) => import('styled-components').RuleSet<object>;
 declare const styledHero1: (theme: Theme) => import('styled-components').RuleSet<object>;
 declare const styledHero2: (theme: Theme) => import('styled-components').RuleSet<object>;
 declare const styledHero3: (theme: Theme) => import('styled-components').RuleSet<object>;
@@ -17,4 +18,4 @@ declare const styledButton: (theme: Theme) => import('styled-components').RuleSe
 declare const styledButtonBig: (theme: Theme) => import('styled-components').RuleSet<object>;
 declare const styledInput: (theme: Theme) => import('styled-components').RuleSet<object>;
 declare const styledInputBig: (theme: Theme) => import('styled-components').RuleSet<object>;
-export { styledHero1, styledHero2, styledHero3, styledH1, styledH2, styledH3, styledH4, styledH5, styledH6, styledText, styledStrong, styledSmall, styledBlockquote, styledCode, styledButton, styledButtonBig, styledInput, styledInputBig, };
+export { createTypographyStyle, styledHero1, styledHero2, styledHero3, styledH1, styledH2, styledH3, styledH4, styledH5, styledH6, styledText, styledStrong, styledSmall, styledBlockquote, styledCode, styledButton, styledButtonBig, styledInput, styledInputBig, };

package/dist/max-width.js

@@ -0,0 +1,35 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import styled from "styled-components";
+import { mq } from "./utils/theme.js";
+const styles = ($size) => `max-width: ${$size}px;`;
+const 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("");
+}
+const StyledMaxWidth = styled.div`
+  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 });
+}
+const MaxWidth = forwardRef(LocalMaxWidth);
+export {
+  MaxWidth
+};