cherry-styled-components 0.1.13 → 0.1.14

package/dist/textarea.js

@@ -1,86 +1,62 @@
 "use client";
-import { jsxs, jsx } from "react/jsx-runtime";
+"use client";
+import { fullWidthStyles, resetButton, resetInput, statusBorderStyles } from "./utils/mixins.js";
+import { StyledInputWrapper, StyledLabel } from "./input.js";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import styled from "styled-components";
-import { StyledInputWrapper, StyledLabel } from "./input.js";
-import { resetButton, resetInput, statusBorderStyles, fullWidthStyles } from "./utils/mixins.js";
-const StyledTextarea = styled.textarea`
-  ${resetButton};
-  ${resetInput};
-  font-family: inherit;
-  display: inline-block;
-  padding: 15px;
-  border-radius: ${({ theme }) => theme.spacing.radius.xs};
-  font-weight: 400;
-  white-space: break-spaces;
-  hyphens: none;
-  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;
-  min-height: 80px;
-
-  &::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, theme }) => $size === "big" ? `font-size: ${theme.fontSizes.inputBig.lg};
+//#region src/lib/textarea.tsx
+var StyledTextarea = styled.textarea.withConfig({
+	displayName: "textarea__StyledTextarea",
+	componentId: "sc-bafd59ce-0"
+})([
+	``,
+	`;`,
+	`;font-family:inherit;display:inline-block;padding:15px;border-radius:`,
+	`;font-weight:400;white-space:break-spaces;hyphens:none;color:`,
+	`;background:`,
+	`;border:solid 2px `,
+	`;box-shadow:0 0 0 0px `,
+	`;transition:all 0.3s ease;min-height:80px;&::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.primaryLight, ({ theme }) => theme.colors.primary, ({ theme }) => theme.colors.primaryLight, ({ $size, theme }) => $size === "big" ? `font-size: ${theme.fontSizes.inputBig.lg};
 			line-height: ${theme.lineHeights.text.lg};
 	` : $size === "small" ? `font-size: ${theme.fontSizes.inputSmall.lg};
 			line-height: ${theme.lineHeights.text.lg};
       padding: 10px 12px;
 	` : `font-size: ${theme.fontSizes.input.lg};
-			line-height: ${theme.lineHeights.text.lg};`}
-
-  ${({ $error, $success, theme }) => {
-  return statusBorderStyles($error, $success, theme);
-}}
-
-	${({ disabled, theme }) => disabled && `cursor: not-allowed;
+			line-height: ${theme.lineHeights.text.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)}
-`;
+	`, ({ $fullWidth }) => fullWidthStyles($fullWidth));
 function LocalTextarea({ ...props }, ref) {
-  return /* @__PURE__ */ jsxs(
-    StyledInputWrapper,
-    {
-      $fullWidth: props.$fullWidth,
-      $label: props.$label,
-      className: props.$wrapperClassName,
-      children: [
-        props.$label && /* @__PURE__ */ jsx(StyledLabel, { htmlFor: props.id, $label: props.$label, children: props.$label }),
-        /* @__PURE__ */ jsx(
-          StyledTextarea,
-          {
-            ...props,
-            "aria-invalid": props.$error || void 0,
-            ref,
-            children: props.children
-          }
-        )
-      ]
-    }
-  );
+	return /* @__PURE__ */ jsxs(StyledInputWrapper, {
+		$fullWidth: props.$fullWidth,
+		$label: props.$label,
+		className: props.$wrapperClassName,
+		children: [props.$label && /* @__PURE__ */ jsx(StyledLabel, {
+			htmlFor: props.id,
+			$label: props.$label,
+			children: props.$label
+		}), /* @__PURE__ */ jsx(StyledTextarea, {
+			...props,
+			"aria-invalid": props.$error || void 0,
+			ref,
+			children: props.children
+		})]
+	});
 }
-const Textarea = forwardRef(LocalTextarea);
-export {
-  Textarea
-};
+var Textarea = /* @__PURE__ */ forwardRef(LocalTextarea);
+//#endregion
+export { Textarea };

package/dist/toggle.js

@@ -1,98 +1,49 @@
 "use client";
-import { jsxs, jsx } from "react/jsx-runtime";
+"use client";
+import { resetButton, statusBorderStyles } from "./utils/mixins.js";
+import { StyledInputWrapper, StyledLabel } from "./input.js";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import styled from "styled-components";
-import { StyledInputWrapper, StyledLabel } from "./input.js";
-import { resetButton, statusBorderStyles } from "./utils/mixins.js";
-const StyledToggleWrapper = styled.span`
-  display: inline-block;
-  margin: auto 0;
-  position: relative;
-  vertical-align: middle;
-`;
-const StyledFakeToggle = styled.span`
-  display: block;
-  border: solid 2px ${({ theme }) => theme.colors.grayLight};
-  background: ${({ theme }) => theme.colors.light};
-  border-radius: ${({ theme }) => theme.spacing.radius.xl};
-  pointer-events: none;
-  transition: all 0.3s ease;
-  box-shadow: 0 0 0 0 ${({ theme }) => theme.colors.primaryLight};
-  transform: none;
-  width: ${({ $size }) => $size === "big" ? "56px" : $size === "small" ? "38px" : "46px"};
-  height: ${({ $size }) => $size === "big" ? "32px" : $size === "small" ? "18px" : "22px"};
-
-  ${({ $error, $success, theme }) => {
-  return statusBorderStyles($error, $success, theme);
-}}
-
-  &::before,
-	&::after {
-    content: "";
-    display: block;
-    position: absolute;
-  }
-
-  &::before {
-    top: 5px;
-    left: 5px;
-    width: calc(100% - 10px);
-    height: calc(100% - 10px);
-    max-width: 0;
-    border-radius: ${({ theme }) => theme.spacing.radius.xl};
-    background: ${({ theme }) => theme.colors.light};
-    transition: all 0.3s ease;
-  }
-
-  &::after {
-    left: 0;
-    top: 0;
-    border-radius: 50%;
-    transition: all 0.3s ease;
-    transform: translateX(0);
-    background: ${({ theme }) => theme.colors.primary};
-    width: ${({ $size }) => $size === "big" ? "32px" : $size === "small" ? "18px" : "22px"};
-    height: ${({ $size }) => $size === "big" ? "32px" : $size === "small" ? "18px" : "22px"};
-  }
-`;
-const StyledToggle = styled.input`
-  ${resetButton};
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  outline: none;
-  z-index: 10;
-
-  &:checked ~ .fake-toggle {
-    &::before {
-      max-width: 46px;
-      background: ${({ theme }) => theme.colors.primaryLight};
-    }
-
-    &::after {
-      transform: translateX(
-        ${({ $size }) => $size === "big" ? "25px" : $size === "small" ? "20px" : "25px"}
-      );
-    }
-  }
-
-  &:hover:not([disabled]) ~ .fake-toggle {
-    border-color: ${({ theme }) => theme.colors.primary};
-  }
-
-  &:focus:not([disabled]) ~ .fake-toggle {
-    outline: none;
-    border-color: ${({ theme }) => theme.colors.primary};
-    box-shadow: 0 0 0 4px ${({ theme }) => theme.colors.primaryLight};
-  }
-
-  &:active:not([disabled]) ~ .fake-toggle {
-    box-shadow: 0 0 0 2px ${({ theme }) => theme.colors.primaryLight};
-  }
-
-  ${({ disabled, theme }) => disabled && `cursor: not-allowed;
+//#region src/lib/toggle.tsx
+var StyledToggleWrapper = styled.span.withConfig({
+	displayName: "toggle__StyledToggleWrapper",
+	componentId: "sc-279a0aa6-0"
+})([`display:inline-block;margin:auto 0;position:relative;vertical-align:middle;`]);
+var StyledFakeToggle = styled.span.withConfig({
+	displayName: "toggle__StyledFakeToggle",
+	componentId: "sc-279a0aa6-1"
+})([
+	`display:block;border:solid 2px `,
+	`;background:`,
+	`;border-radius:`,
+	`;pointer-events:none;transition:all 0.3s ease;box-shadow:0 0 0 0 `,
+	`;transform:none;width:`,
+	`;height:`,
+	`;`,
+	` &::before,&::after{content:"";display:block;position:absolute;}&::before{top:5px;left:5px;width:calc(100% - 10px);height:calc(100% - 10px);max-width:0;border-radius:`,
+	`;background:`,
+	`;transition:all 0.3s ease;}&::after{left:0;top:0;border-radius:50%;transition:all 0.3s ease;transform:translateX(0);background:`,
+	`;width:`,
+	`;height:`,
+	`;}`
+], ({ theme }) => theme.colors.grayLight, ({ theme }) => theme.colors.light, ({ theme }) => theme.spacing.radius.xl, ({ theme }) => theme.colors.primaryLight, ({ $size }) => $size === "big" ? "56px" : $size === "small" ? "38px" : "46px", ({ $size }) => $size === "big" ? "32px" : $size === "small" ? "18px" : "22px", ({ $error, $success, theme }) => {
+	return statusBorderStyles($error, $success, theme);
+}, ({ theme }) => theme.spacing.radius.xl, ({ theme }) => theme.colors.light, ({ theme }) => theme.colors.primary, ({ $size }) => $size === "big" ? "32px" : $size === "small" ? "18px" : "22px", ({ $size }) => $size === "big" ? "32px" : $size === "small" ? "18px" : "22px");
+var StyledToggle = styled.input.withConfig({
+	displayName: "toggle__StyledToggle",
+	componentId: "sc-279a0aa6-2"
+})([
+	``,
+	`;position:absolute;left:0;top:0;width:100%;height:100%;outline:none;z-index:10;&:checked ~ .fake-toggle{&::before{max-width:46px;background:`,
+	`;}&::after{transform:translateX( `,
+	` );}}&:hover:not([disabled]) ~ .fake-toggle{border-color:`,
+	`;}&:focus:not([disabled]) ~ .fake-toggle{outline:none;border-color:`,
+	`;box-shadow:0 0 0 4px `,
+	`;}&:active:not([disabled]) ~ .fake-toggle{box-shadow:0 0 0 2px `,
+	`;}`,
+	``
+], resetButton, ({ theme }) => theme.colors.primaryLight, ({ $size }) => $size === "big" ? "25px" : $size === "small" ? "20px" : "25px", ({ theme }) => theme.colors.primary, ({ theme }) => theme.colors.primary, ({ theme }) => theme.colors.primaryLight, ({ theme }) => theme.colors.primaryLight, ({ disabled, theme }) => disabled && `cursor: not-allowed;
 
 		& ~ .fake-toggle {
 			border-color: ${theme.colors.gray};
@@ -104,34 +55,28 @@ const StyledToggle = styled.input`
 			&::after {
 				background: ${theme.colors.gray};
 			}
-		}`}
-`;
+		}`);
 function LocalToggle({ type = "checkbox", ...props }, ref) {
-  return /* @__PURE__ */ jsxs(
-    StyledInputWrapper,
-    {
-      $fullWidth: props.$fullWidth,
-      $label: props.$label,
-      className: props.$wrapperClassName,
-      children: [
-        /* @__PURE__ */ jsxs(StyledToggleWrapper, { children: [
-          /* @__PURE__ */ jsx(StyledToggle, { ...props, type, role: "switch", ref }),
-          /* @__PURE__ */ jsx(
-            StyledFakeToggle,
-            {
-              $error: props.$error,
-              $success: props.$success,
-              className: "fake-toggle",
-              $size: props.$size
-            }
-          )
-        ] }),
-        props.$label && /* @__PURE__ */ jsx(StyledLabel, { htmlFor: props.id, children: props.$label })
-      ]
-    }
-  );
+	return /* @__PURE__ */ jsxs(StyledInputWrapper, {
+		$fullWidth: props.$fullWidth,
+		$label: props.$label,
+		className: props.$wrapperClassName,
+		children: [/* @__PURE__ */ jsxs(StyledToggleWrapper, { children: [/* @__PURE__ */ jsx(StyledToggle, {
+			...props,
+			type,
+			role: "switch",
+			ref
+		}), /* @__PURE__ */ jsx(StyledFakeToggle, {
+			$error: props.$error,
+			$success: props.$success,
+			className: "fake-toggle",
+			$size: props.$size
+		})] }), props.$label && /* @__PURE__ */ jsx(StyledLabel, {
+			htmlFor: props.id,
+			children: props.$label
+		})]
+	});
 }
-const Toggle = forwardRef(LocalToggle);
-export {
-  Toggle
-};
+var Toggle = /* @__PURE__ */ forwardRef(LocalToggle);
+//#endregion
+export { Toggle };

package/dist/utils/global.js

@@ -1,94 +1,13 @@
 "use client";
+"use client";
 import { createGlobalStyle } from "styled-components";
-const GlobalStyles = (theme) => createGlobalStyle`
-html,
-body {
-	margin: 0;
-	padding: 0;
-	min-height: 100%;
-	scroll-behavior: smooth;
-	background-color: ${theme.colors.light};
-}
-
-body {
-	font-family: "Inter", sans-serif;
-	-moz-osx-font-smoothing: grayscale;
-	-webkit-text-size-adjust: 100%;
-	-webkit-font-smoothing: antialiased;
-}
-
-* {
-	box-sizing: border-box;
-	min-width: 0;
-}
-
-pre,
-code,
-kbd,
-samp {
-	font-family: monospace, monospace;
-}
-
-pre,
-code,
-kbd,
-samp,
-blockquote,
-p,
-a,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-ul li,
-ol li {
-	margin: 0;
-	padding: 0;
-	color: ${theme.colors.dark};
-}
-
-a {
-	color: ${theme.isDark ? theme.colors.dark : theme.colors.primary};
-}
-
-ol,
-ul {
-	list-style: none;
-	margin: 0;
-	padding: 0;
-}
-
-figure {
-	margin: 0;
-}
-
-fieldset {
-	appearance: none;
-	border: none;
-}
-
-button,
-input,
-a,
-img,
-svg,
-svg * {
-	transition: all 0.3s ease;
-}
-
-strong,
-b {
-	font-weight: 700;
-}
-
-hr {
-  margin: 20px 0;
-  border: none;
-  border-bottom: 1px solid ${theme.colors.grayLight};
-}
-`;
-export {
-  GlobalStyles
-};
+//#region src/lib/utils/global.tsx
+var GlobalStyles = (theme) => createGlobalStyle([
+	`html,body{margin:0;padding:0;min-height:100%;scroll-behavior:smooth;background-color:`,
+	`;}body{font-family:"Inter",sans-serif;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;}*{box-sizing:border-box;min-width:0;}pre,code,kbd,samp{font-family:monospace,monospace;}pre,code,kbd,samp,blockquote,p,a,h1,h2,h3,h4,h5,h6,ul li,ol li{margin:0;padding:0;color:`,
+	`;}a{color:`,
+	`;}ol,ul{list-style:none;margin:0;padding:0;}figure{margin:0;}fieldset{appearance:none;border:none;}button,input,a,img,svg,svg *{transition:all 0.3s ease;}strong,b{font-weight:700;}hr{margin:20px 0;border:none;border-bottom:1px solid `,
+	`;}`
+], theme.colors.light, theme.colors.dark, theme.isDark ? theme.colors.dark : theme.colors.primary, theme.colors.grayLight);
+//#endregion
+export { GlobalStyles };

package/dist/utils/icons.js

@@ -1,86 +1,75 @@
 "use client";
+"use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useTheme } from "styled-components";
+//#region src/lib/utils/icons.tsx
 function IconCheck({ ...props }) {
-  const theme = useTheme();
-  return /* @__PURE__ */ jsx(
-    "svg",
-    {
-      width: "12",
-      height: "10",
-      viewBox: "0 0 12 10",
-      fill: "none",
-      xmlns: "http://www.w3.org/2000/svg",
-      ...props,
-      children: /* @__PURE__ */ jsx(
-        "path",
-        {
-          d: "M10 2L4.4 8L2 5.75",
-          stroke: theme.colors.primary,
-          strokeWidth: "3",
-          strokeLinecap: "round",
-          strokeLinejoin: "round"
-        }
-      )
-    }
-  );
+	const theme = useTheme();
+	return /* @__PURE__ */ jsx("svg", {
+		width: "12",
+		height: "10",
+		viewBox: "0 0 12 10",
+		fill: "none",
+		xmlns: "http://www.w3.org/2000/svg",
+		...props,
+		children: /* @__PURE__ */ jsx("path", {
+			d: "M10 2L4.4 8L2 5.75",
+			stroke: theme.colors.primary,
+			strokeWidth: "3",
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
+		})
+	});
 }
 function IconArrow({ ...props }) {
-  const theme = useTheme();
-  return /* @__PURE__ */ jsx(
-    "svg",
-    {
-      width: "16",
-      height: "10",
-      viewBox: "0 0 16 10",
-      fill: "none",
-      xmlns: "http://www.w3.org/2000/svg",
-      ...props,
-      children: /* @__PURE__ */ jsx(
-        "path",
-        {
-          d: "M2 2L8 8L14 2",
-          stroke: theme.colors.primary,
-          strokeWidth: "3",
-          strokeLinecap: "round",
-          strokeLinejoin: "round"
-        }
-      )
-    }
-  );
+	const theme = useTheme();
+	return /* @__PURE__ */ jsx("svg", {
+		width: "16",
+		height: "10",
+		viewBox: "0 0 16 10",
+		fill: "none",
+		xmlns: "http://www.w3.org/2000/svg",
+		...props,
+		children: /* @__PURE__ */ jsx("path", {
+			d: "M2 2L8 8L14 2",
+			stroke: theme.colors.primary,
+			strokeWidth: "3",
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
+		})
+	});
 }
 function IconCalendar({ ...props }) {
-  const theme = useTheme();
-  return /* @__PURE__ */ jsxs(
-    "svg",
-    {
-      xmlns: "http://www.w3.org/2000/svg",
-      width: "24",
-      height: "24",
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: theme.colors.primary,
-      strokeWidth: "2",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      ...props,
-      children: [
-        /* @__PURE__ */ jsx("path", { d: "M8 2v4" }),
-        /* @__PURE__ */ jsx("path", { d: "M16 2v4" }),
-        /* @__PURE__ */ jsx("rect", { width: "18", height: "18", x: "3", y: "4", rx: "2" }),
-        /* @__PURE__ */ jsx("path", { d: "M3 10h18" }),
-        /* @__PURE__ */ jsx("path", { d: "M8 14h.01" }),
-        /* @__PURE__ */ jsx("path", { d: "M12 14h.01" }),
-        /* @__PURE__ */ jsx("path", { d: "M16 14h.01" }),
-        /* @__PURE__ */ jsx("path", { d: "M8 18h.01" }),
-        /* @__PURE__ */ jsx("path", { d: "M12 18h.01" }),
-        /* @__PURE__ */ jsx("path", { d: "M16 18h.01" })
-      ]
-    }
-  );
+	return /* @__PURE__ */ jsxs("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		width: "24",
+		height: "24",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: useTheme().colors.primary,
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("path", { d: "M8 2v4" }),
+			/* @__PURE__ */ jsx("path", { d: "M16 2v4" }),
+			/* @__PURE__ */ jsx("rect", {
+				width: "18",
+				height: "18",
+				x: "3",
+				y: "4",
+				rx: "2"
+			}),
+			/* @__PURE__ */ jsx("path", { d: "M3 10h18" }),
+			/* @__PURE__ */ jsx("path", { d: "M8 14h.01" }),
+			/* @__PURE__ */ jsx("path", { d: "M12 14h.01" }),
+			/* @__PURE__ */ jsx("path", { d: "M16 14h.01" }),
+			/* @__PURE__ */ jsx("path", { d: "M8 18h.01" }),
+			/* @__PURE__ */ jsx("path", { d: "M12 18h.01" }),
+			/* @__PURE__ */ jsx("path", { d: "M16 18h.01" })
+		]
+	});
 }
-export {
-  IconArrow,
-  IconCalendar,
-  IconCheck
-};
+//#endregion
+export { IconArrow, IconCalendar, IconCheck };