cherry-styled-components 0.1.13 → 0.1.15

package/dist/index.js

@@ -1,7 +1,14 @@
+import { StyledComponentsRegistry } from "./styled-components/registry.js";
+import { GlobalStyles } from "./utils/global.js";
+import { IconArrow, IconCalendar, IconCheck } from "./utils/icons.js";
+import { breakpoints, colors, colorsDark, fontSizes, fonts, lineHeights, mq, shadows, shadowsDark, spacing, theme, themeDark } from "./utils/theme.js";
+import { formElementHeightStyles, fullWidthStyles, generateColSpanStyles, generateColsStyles, generateGapStyles, generateJustifyContentStyles, generatePaddingStyles, resetButton, resetInput, statusBorderStyles } from "./utils/mixins.js";
+import { createTypographyStyle, styledBlockquote, styledButton, styledButtonBig, styledCode, styledH1, styledH2, styledH3, styledH4, styledH5, styledH6, styledHero1, styledHero2, styledHero3, styledInput, styledInputBig, styledSmall, styledStrong, styledText } from "./utils/typography.js";
+import { CherryThemeProvider, ThemeContext } from "./styled-components/theme-provider.js";
+import { Container } from "./container.js";
 import { Box } from "./box.js";
 import { Button, buttonStyles } from "./button.js";
 import { Col } from "./col.js";
-import { Container } from "./container.js";
 import { Flex } from "./flex.js";
 import { Grid } from "./grid.js";
 import { Icon } from "./icon.js";
@@ -12,78 +19,4 @@ import { Select, StyledIconWrapper } from "./select.js";
 import { Space } from "./space.js";
 import { Textarea } from "./textarea.js";
 import { Toggle } from "./toggle.js";
-import { CherryThemeProvider, ThemeContext } from "./styled-components/theme-provider.js";
-import { GlobalStyles } from "./utils/global.js";
-import { IconArrow, IconCalendar, IconCheck } from "./utils/icons.js";
-import { StyledComponentsRegistry } from "./styled-components/registry.js";
-import { breakpoints, colors, colorsDark, fontSizes, fonts, lineHeights, mq, shadows, shadowsDark, spacing, theme, themeDark } from "./utils/theme.js";
-import { createTypographyStyle, styledBlockquote, styledButton, styledButtonBig, styledCode, styledH1, styledH2, styledH3, styledH4, styledH5, styledH6, styledHero1, styledHero2, styledHero3, styledInput, styledInputBig, styledSmall, styledStrong, styledText } from "./utils/typography.js";
-import { formElementHeightStyles, fullWidthStyles, generateColSpanStyles, generateColsStyles, generateGapStyles, generateJustifyContentStyles, generatePaddingStyles, resetButton, resetInput, statusBorderStyles } from "./utils/mixins.js";
-export {
-  Box,
-  Button,
-  CherryThemeProvider,
-  Col,
-  Container,
-  Flex,
-  GlobalStyles,
-  Grid,
-  Icon,
-  IconArrow,
-  IconCalendar,
-  IconCheck,
-  Input,
-  MaxWidth,
-  Range,
-  Select,
-  Space,
-  StyledComponentsRegistry,
-  StyledIconWrapper,
-  StyledInputWrapper,
-  StyledLabel,
-  Textarea,
-  ThemeContext,
-  Toggle,
-  breakpoints,
-  buttonStyles,
-  colors,
-  colorsDark,
-  createTypographyStyle,
-  fontSizes,
-  fonts,
-  formElementHeightStyles,
-  fullWidthStyles,
-  generateColSpanStyles,
-  generateColsStyles,
-  generateGapStyles,
-  generateJustifyContentStyles,
-  generatePaddingStyles,
-  lineHeights,
-  mq,
-  resetButton,
-  resetInput,
-  shadows,
-  shadowsDark,
-  spacing,
-  statusBorderStyles,
-  styledBlockquote,
-  styledButton,
-  styledButtonBig,
-  styledCode,
-  styledH1,
-  styledH2,
-  styledH3,
-  styledH4,
-  styledH5,
-  styledH6,
-  styledHero1,
-  styledHero2,
-  styledHero3,
-  styledInput,
-  styledInputBig,
-  styledSmall,
-  styledStrong,
-  styledText,
-  theme,
-  themeDark
-};
+export { Box, Button, CherryThemeProvider, Col, Container, Flex, GlobalStyles, Grid, Icon, IconArrow, IconCalendar, IconCheck, Input, MaxWidth, Range, Select, Space, StyledComponentsRegistry, StyledIconWrapper, StyledInputWrapper, StyledLabel, Textarea, ThemeContext, Toggle, breakpoints, buttonStyles, colors, colorsDark, createTypographyStyle, fontSizes, fonts, formElementHeightStyles, fullWidthStyles, generateColSpanStyles, generateColsStyles, generateGapStyles, generateJustifyContentStyles, generatePaddingStyles, lineHeights, mq, resetButton, resetInput, shadows, shadowsDark, spacing, statusBorderStyles, styledBlockquote, styledButton, styledButtonBig, styledCode, styledH1, styledH2, styledH3, styledH4, styledH5, styledH6, styledHero1, styledHero2, styledHero3, styledInput, styledInputBig, styledSmall, styledStrong, styledText, theme, themeDark };

package/dist/input.js

@@ -1,219 +1,100 @@
 "use client";
-import { jsxs, jsx } from "react/jsx-runtime";
+"use client";
+import { IconCalendar, IconCheck } from "./utils/icons.js";
+import { formElementHeightStyles, fullWidthStyles, resetButton, resetInput, statusBorderStyles } from "./utils/mixins.js";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import styled, { css } from "styled-components";
-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"};
-  align-items: center;
-
-  ${({ $label }) => $label && css`
-      gap: 5px;
-      align-items: flex-start;
-    `}
-
-  & .icon-calendar {
-    position: absolute;
-    top: 50%;
-    right: 17px;
-    left: initial;
-    transform: translateY(-50%);
-    pointer-events: none;
-    width: 24px;
-    height: 24px;
-
-    @supports (-moz-appearance: none) {
-      display: none;
-    }
-  }
-
-  ${({ $fullWidth }) => fullWidthStyles($fullWidth)}
-`;
-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`
-  ${resetButton};
-  ${resetInput};
-  font-family: inherit;
-  display: inline-block;
-  padding: 17px 15px;
-  border-radius: ${({ theme }) => theme.spacing.radius.xs};
-  font-weight: 400;
-  white-space: nowrap;
-  hyphens: auto;
-  color: ${({ theme }) => theme.colors.dark};
-  background: ${({ theme }) => theme.colors.light};
-  border: solid 2px ${({ theme }) => theme.colors.grayLight};
-  box-shadow: 0 0 0 0px ${({ theme }) => theme.colors.primaryLight};
-  transition: all 0.3s ease;
-  word-break: keep-all;
-  white-space: nowrap;
-  display: inline-flex;
-
-  &[type="date"] {
-    padding: 17px 45px 17px 15px;
-
-    @supports (-moz-appearance: none) {
-      padding: 13px 15px;
-    }
-  }
-
-  &::-webkit-datetime-edit {
-    padding: 0;
-    margin: 0;
-    vertical-align: middle;
-  }
-
-  &::-webkit-datetime-edit-fields-wrapper {
-    padding: 4px 0;
-    margin: 0;
-    vertical-align: middle;
-  }
-
-  &::-webkit-calendar-picker-indicator {
-    background: transparent;
-    cursor: pointer;
-    position: absolute;
-    right: 15px;
-    top: 50%;
-    transform: translateY(-50%);
-    width: 24px;
-    height: 24px;
-  }
-
-  &::-webkit-datetime-edit-text {
-    color: ${({ theme }) => theme.colors.gray};
-  }
-
-  &::-webkit-datetime-edit-month-field {
-    &:focus {
-      background: ${({ theme }) => theme.colors.primary};
-      color: ${({ theme }) => theme.colors.light};
-      border-radius: 4px;
-    }
-  }
-
-  &::-webkit-datetime-edit-day-field {
-    &:focus {
-      background: ${({ theme }) => theme.colors.primary};
-      color: ${({ theme }) => theme.colors.light};
-      border-radius: 4px;
-    }
-  }
-
-  &::-webkit-datetime-edit-year-field {
-    &:focus {
-      background: ${({ theme }) => theme.colors.primary};
-      color: ${({ theme }) => theme.colors.light};
-      border-radius: 4px;
-    }
-  }
-
-  &::placeholder {
-    color: ${({ theme }) => theme.colors.gray};
-  }
-
-  &:hover:not([disabled]) {
-    border-color: ${({ theme }) => theme.colors.primary};
-  }
-
-  &:focus:not([disabled]) {
-    box-shadow: 0 0 0 4px ${({ theme }) => theme.colors.primaryLight};
-    border-color: ${({ theme }) => theme.colors.primary};
-  }
-
-  &:active:not([disabled]) {
-    box-shadow: 0 0 0 2px ${({ theme }) => theme.colors.primaryLight};
-  }
-
-  ${({ $size }) => formElementHeightStyles($size)}
-
-  ${({ $size, theme }) => $size === "big" ? `font-size: ${theme.fontSizes.inputBig.lg};
+//#region src/lib/input.tsx
+var StyledInputWrapper = styled.span.withConfig({
+	displayName: "input__StyledInputWrapper",
+	componentId: "sc-6fe5d34a-0"
+})([
+	`display:inline-flex;flex-wrap:`,
+	`;align-items:center;`,
+	` & .icon-calendar{position:absolute;top:50%;right:17px;left:initial;transform:translateY(-50%);pointer-events:none;width:24px;height:24px;@supports (-moz-appearance:none){display:none;}}`,
+	``
+], ({ type }) => type === "checkbox" || type === "radio" ? "nowrap" : "wrap", ({ $label }) => $label && css([`gap:5px;align-items:flex-start;`]), ({ $fullWidth }) => fullWidthStyles($fullWidth));
+var StyledLabel = styled.label.withConfig({
+	displayName: "input__StyledLabel",
+	componentId: "sc-6fe5d34a-1"
+})([
+	`display:inline-block;color:`,
+	`;font-size:`,
+	`;line-height:`,
+	`;`
+], ({ theme }) => theme.colors.grayDark, ({ theme }) => theme.fontSizes.small.lg, ({ theme }) => theme.lineHeights.small.lg);
+var StyledInput = styled.input.withConfig({
+	displayName: "input__StyledInput",
+	componentId: "sc-6fe5d34a-2"
+})([
+	``,
+	`;`,
+	`;font-family:inherit;display:inline-block;padding:17px 15px;border-radius:`,
+	`;font-weight:400;white-space:nowrap;hyphens:auto;color:`,
+	`;background:`,
+	`;border:solid 2px `,
+	`;box-shadow:0 0 0 0px `,
+	`;transition:all 0.3s ease;word-break:keep-all;white-space:nowrap;display:inline-flex;&[type="date"]{padding:17px 45px 17px 15px;@supports (-moz-appearance:none){padding:13px 15px;}}&::-webkit-datetime-edit{padding:0;margin:0;vertical-align:middle;}&::-webkit-datetime-edit-fields-wrapper{padding:4px 0;margin:0;vertical-align:middle;}&::-webkit-calendar-picker-indicator{background:transparent;cursor:pointer;position:absolute;right:15px;top:50%;transform:translateY(-50%);width:24px;height:24px;}&::-webkit-datetime-edit-text{color:`,
+	`;}&::-webkit-datetime-edit-month-field{&:focus{background:`,
+	`;color:`,
+	`;border-radius:4px;}}&::-webkit-datetime-edit-day-field{&:focus{background:`,
+	`;color:`,
+	`;border-radius:4px;}}&::-webkit-datetime-edit-year-field{&:focus{background:`,
+	`;color:`,
+	`;border-radius:4px;}}&::placeholder{color:`,
+	`;}&:hover:not([disabled]){border-color:`,
+	`;}&:focus:not([disabled]){box-shadow:0 0 0 4px `,
+	`;border-color:`,
+	`;}&:active:not([disabled]){box-shadow:0 0 0 2px `,
+	`;}`,
+	` `,
+	` `,
+	` `,
+	` `,
+	``
+], resetButton, resetInput, ({ theme }) => theme.spacing.radius.xs, ({ theme }) => theme.colors.dark, ({ theme }) => theme.colors.light, ({ theme }) => theme.colors.grayLight, ({ theme }) => theme.colors.primaryLight, ({ theme }) => theme.colors.gray, ({ theme }) => theme.colors.primary, ({ theme }) => theme.colors.light, ({ theme }) => theme.colors.primary, ({ theme }) => theme.colors.light, ({ theme }) => theme.colors.primary, ({ theme }) => theme.colors.light, ({ theme }) => theme.colors.gray, ({ theme }) => theme.colors.primary, ({ theme }) => theme.colors.primaryLight, ({ theme }) => theme.colors.primary, ({ theme }) => theme.colors.primaryLight, ({ $size }) => formElementHeightStyles($size), ({ $size, theme }) => $size === "big" ? `font-size: ${theme.fontSizes.inputBig.lg};
 			line-height: ${theme.lineHeights.inputBig.lg};
 	` : $size === "small" ? `font-size: ${theme.fontSizes.inputSmall.lg};
 			line-height: ${theme.lineHeights.inputSmall.lg};
       padding: 12px 12px;
 	` : `font-size: ${theme.fontSizes.input.lg};
-			line-height: ${theme.lineHeights.input.lg};`}
-
-	${({ $error, $success, theme }) => {
-  return statusBorderStyles($error, $success, theme);
-}}
-
-	${({ disabled, theme }) => disabled && `cursor: not-allowed;
+			line-height: ${theme.lineHeights.input.lg};`, ({ $error, $success, theme }) => {
+	return statusBorderStyles($error, $success, theme);
+}, ({ disabled, theme }) => disabled && `cursor: not-allowed;
 		background: ${theme.colors.grayLight};
 		border-color: ${theme.colors.gray};
 		color: ${theme.colors.gray};
-	`}
-
-	${({ $fullWidth }) => fullWidthStyles($fullWidth)}
-`;
-const StyledIconWrapper = styled.span`
-  display: inline-flex;
-  position: relative;
-  line-height: 0;
-  min-width: fit-content;
-
-  & em {
-    display: block;
-    border-radius: 50%;
-    background: ${({ theme }) => theme.colors.primary};
-  }
-
-  & svg,
-  & em {
-    object-fit: contain;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%) scale(0.7);
-    opacity: 0;
-    pointer-events: none;
-    transition: all 0.3s ease;
-  }
-`;
-const StyledRadioCheckboxInput = styled.input`
-  ${resetButton};
-  display: inline-block;
-  background: ${({ theme }) => theme.colors.light};
-  border: solid 2px ${({ theme }) => theme.colors.grayLight};
-  box-shadow: 0 0 0 0px ${({ theme }) => theme.colors.primaryLight};
-  transition: all 0.3s ease;
-
-  &:hover:not([disabled]) {
-    border-color: ${({ theme }) => theme.colors.primary};
-  }
-
-  &:focus:not([disabled]) {
-    box-shadow: 0 0 0 4px ${({ theme }) => theme.colors.primaryLight};
-    border-color: ${({ theme }) => theme.colors.primary};
-  }
-
-  &:active:not([disabled]) {
-    box-shadow: 0 0 0 2px ${({ theme }) => theme.colors.primaryLight};
-  }
-
-  ${({ type, theme }) => type === "checkbox" ? `border-radius: ${theme.spacing.radius.xs};` : `border-radius: 50%;`}
-
-  ${({ disabled, theme }) => disabled && `cursor: not-allowed;
+	`, ({ $fullWidth }) => fullWidthStyles($fullWidth));
+var StyledIconWrapper = styled.span.withConfig({
+	displayName: "input__StyledIconWrapper",
+	componentId: "sc-6fe5d34a-3"
+})([`display:inline-flex;position:relative;line-height:0;min-width:fit-content;& em{display:block;border-radius:50%;background:`, `;}& svg,& em{object-fit:contain;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(0.7);opacity:0;pointer-events:none;transition:all 0.3s ease;}`], ({ theme }) => theme.colors.primary);
+var StyledRadioCheckboxInput = styled.input.withConfig({
+	displayName: "input__StyledRadioCheckboxInput",
+	componentId: "sc-6fe5d34a-4"
+})([
+	``,
+	`;display:inline-block;background:`,
+	`;border:solid 2px `,
+	`;box-shadow:0 0 0 0px `,
+	`;transition:all 0.3s ease;&:hover:not([disabled]){border-color:`,
+	`;}&:focus:not([disabled]){box-shadow:0 0 0 4px `,
+	`;border-color:`,
+	`;}&:active:not([disabled]){box-shadow:0 0 0 2px `,
+	`;}`,
+	` `,
+	` `,
+	` `,
+	` &:checked ~ svg,&:checked ~ em{opacity:1;transform:translate(-50%,-50%) scale(1);}`
+], resetButton, ({ theme }) => theme.colors.light, ({ theme }) => theme.colors.grayLight, ({ theme }) => theme.colors.primaryLight, ({ theme }) => theme.colors.primary, ({ theme }) => theme.colors.primaryLight, ({ theme }) => theme.colors.primary, ({ theme }) => theme.colors.primaryLight, ({ type, theme }) => type === "checkbox" ? `border-radius: ${theme.spacing.radius.xs};` : `border-radius: 50%;`, ({ 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, $success, theme);
-}}
-
-	${({ $size }) => {
-  if ($size === "big") {
-    return `
+	`, ({ $error, $success, theme }) => {
+	return statusBorderStyles($error, $success, theme);
+}, ({ $size }) => {
+	if ($size === "big") return `
 					min-width: 32px;
 					width: 32px;
 					min-height: 32px;
@@ -233,8 +114,7 @@ const StyledRadioCheckboxInput = styled.input`
 						height: 14px;
 					}
 				`;
-  } else if ($size === "small") {
-    return `
+	else if ($size === "small") return `
 					min-width: 18px;
 					width: 18px;
 					min-height: 18px;
@@ -254,8 +134,7 @@ const StyledRadioCheckboxInput = styled.input`
 						height: 6px;
 					}
 				`;
-  } else {
-    return `
+	else return `
 					min-width: 22px;
 					width: 22px;
 					min-height: 22px;
@@ -275,111 +154,56 @@ const StyledRadioCheckboxInput = styled.input`
 						height: 8px;
 					}
 				`;
-  }
-}}
-
-	&:checked ~ svg,
-	&:checked ~ em {
-    opacity: 1;
-    transform: translate(-50%, -50%) scale(1);
-  }
-`;
-const StyledCustomIconWrapper = styled.span`
-  position: relative;
-  ${({ $fullWidth }) => fullWidthStyles($fullWidth)};
-
-  & svg {
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    pointer-events: none;
-    width: 24px;
-    height: 24px;
-    object-fit: contain;
-    color: ${({ theme }) => theme.colors.primary};
-  }
-
-  ${({ $icon, $iconPosition }) => $icon && $iconPosition === "right" ? css`
-          & svg {
-            right: 16px;
-          }
-
-          & input {
-            padding-right: 50px;
-          }
-        ` : css`
-          & svg {
-            left: 16px;
-          }
-
-          & svg ~ input {
-            padding-left: 50px;
-          }
-        `}
-`;
+});
+var StyledCustomIconWrapper = styled.span.withConfig({
+	displayName: "input__StyledCustomIconWrapper",
+	componentId: "sc-6fe5d34a-5"
+})([
+	`position:relative;`,
+	`;& svg{position:absolute;top:50%;transform:translateY(-50%);pointer-events:none;width:24px;height:24px;object-fit:contain;color:`,
+	`;}`,
+	``
+], ({ $fullWidth }) => fullWidthStyles($fullWidth), ({ theme }) => theme.colors.primary, ({ $icon, $iconPosition }) => $icon && $iconPosition === "right" ? css([`& svg{right:16px;}& input{padding-right:50px;}`]) : css([`& svg{left:16px;}& svg ~ input{padding-left:50px;}`]));
 function LocalInput({ ...props }, ref) {
-  if (props.type === "checkbox" || props.type === "radio") {
-    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 /* @__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" })
-            ]
-          }
-        )
-      ]
-    }
-  );
+	if (props.type === "checkbox" || props.type === "radio") 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 /* @__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,
-  StyledInputWrapper,
-  StyledLabel
-};
+var Input = /* @__PURE__ */ forwardRef(LocalInput);
+//#endregion
+export { Input, StyledInputWrapper, StyledLabel };

package/dist/max-width.js

@@ -1,35 +1,50 @@
 "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";
-import { mq } from "./utils/theme.js";
-const styles = ($size) => `max-width: ${$size}px;`;
-const breakpointKeys = ["xs", "sm", "md", "lg", "xl", "xxl", "xxxl"];
+//#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("");
+	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 }) => `
+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)}
-`;
+	`, (props) => responsiveStyles(props));
 function LocalMaxWidth({ ...props }, ref) {
-  return /* @__PURE__ */ jsx(StyledMaxWidth, { ...props, ref, children: props.children });
+	return /* @__PURE__ */ jsx(StyledMaxWidth, {
+		...props,
+		ref,
+		children: props.children
+	});
 }
-const MaxWidth = forwardRef(LocalMaxWidth);
-export {
-  MaxWidth
-};
+var MaxWidth = /* @__PURE__ */ forwardRef(LocalMaxWidth);
+//#endregion
+export { MaxWidth };