cherry-styled-components 0.1.13 → 0.1.14

package/dist/range.js

@@ -1,110 +1,59 @@
 "use client";
-import { jsxs, jsx } from "react/jsx-runtime";
+"use client";
+import { fullWidthStyles, resetButton, statusBorderStyles } from "./utils/mixins.js";
+import { StyledLabel } from "./input.js";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import styled from "styled-components";
-import { StyledLabel } from "./input.js";
-import { fullWidthStyles, resetButton, statusBorderStyles } from "./utils/mixins.js";
-const StyledInputWrapper = styled.span`
-  display: inline-flex;
-  flex-wrap: ${({ type }) => type === "checkbox" || type === "radio" ? "nowrap" : "wrap"};
-  gap: 10px;
-  align-items: center;
-
-  ${({ $fullWidth }) => fullWidthStyles($fullWidth)}
-`;
-const StyledInput = styled.input`
-  ${resetButton};
-  padding: 0;
-  height: 10px;
-  font-size: 0;
-  background: transparent;
-  min-width: 100px;
-
-  &::-webkit-slider-runnable-track {
-    width: 100%;
-    cursor: pointer;
-    border-radius: ${({ theme }) => theme.spacing.radius.xl};
-    background: ${({ theme }) => theme.colors.light};
-    border: solid 2px ${({ theme }) => theme.colors.grayLight};
-    box-shadow: 0 0 0 0 ${({ theme }) => theme.colors.primaryLight};
-    transition: all 0.3s ease;
-    ${({ $error, $success, theme }) => {
-  return statusBorderStyles($error, $success, theme);
-}}
-  }
-
-  &::-moz-range-track {
-    width: 100%;
-    cursor: pointer;
-    border-radius: ${({ theme }) => theme.spacing.radius.xl};
-    background: ${({ theme }) => theme.colors.light};
-    border: solid 2px ${({ theme }) => theme.colors.grayLight};
-    box-shadow: 0 0 0 0 ${({ theme }) => theme.colors.primaryLight};
-    transition: all 0.3s ease;
-    ${({ $error, $success, theme }) => {
-  return statusBorderStyles($error, $success, theme);
-}}
-  }
-
-  &::-webkit-slider-thumb {
-    ${resetButton};
-    background: ${({ theme }) => theme.colors.primary};
-    border: 0 solid transparent;
-    border-radius: 50%;
-    transition: all 0.3s ease;
-  }
-
-  &::-moz-range-thumb {
-    ${resetButton};
-    background: ${({ theme }) => theme.colors.primary};
-    border: 0 solid transparent;
-    border-radius: 50%;
-    transition: all 0.3s ease;
-  }
-
-  &:hover:not([disabled]) {
-    &::-webkit-slider-runnable-track {
-      border: solid 2px ${({ theme }) => theme.colors.primary};
-    }
-
-    &::-moz-range-track {
-      border: solid 2px ${({ theme }) => theme.colors.primary};
-    }
-  }
-
-  &:focus:not([disabled]) {
-    &::-webkit-slider-runnable-track {
-      border: solid 2px ${({ theme }) => theme.colors.primary};
-      box-shadow: 0 0 0 4px ${({ theme }) => theme.colors.primaryLight};
-    }
-    &::-webkit-slider-thumb {
-      box-shadow: 0 0 0 4px ${({ theme }) => theme.colors.primaryLight};
-    }
-    &::-moz-range-track {
-      border: solid 2px ${({ theme }) => theme.colors.primary};
-      box-shadow: 0 0 0 4px ${({ theme }) => theme.colors.primaryLight};
-    }
-    &::-moz-range-thumb {
-      box-shadow: 0 0 0 4px ${({ theme }) => theme.colors.primaryLight};
-    }
-  }
-
-  &:active:not([disabled]) {
-    &::-webkit-slider-runnable-track {
-      box-shadow: 0 0 0 2px ${({ theme }) => theme.colors.primaryLight};
-    }
-    &::-webkit-slider-thumb {
-      box-shadow: 0 0 0 2px ${({ theme }) => theme.colors.primaryLight};
-    }
-    &::-moz-range-track {
-      box-shadow: 0 0 0 2px ${({ theme }) => theme.colors.primaryLight};
-    }
-    &::-moz-range-thumb {
-      box-shadow: 0 0 0 2px ${({ theme }) => theme.colors.primaryLight};
-    }
-  }
-
-  ${({ disabled, theme }) => disabled && `
+//#region src/lib/range.tsx
+var StyledInputWrapper = styled.span.withConfig({
+	displayName: "range__StyledInputWrapper",
+	componentId: "sc-cb330c1b-0"
+})([
+	`display:inline-flex;flex-wrap:`,
+	`;gap:10px;align-items:center;`,
+	``
+], ({ type }) => type === "checkbox" || type === "radio" ? "nowrap" : "wrap", ({ $fullWidth }) => fullWidthStyles($fullWidth));
+var StyledInput = styled.input.withConfig({
+	displayName: "range__StyledInput",
+	componentId: "sc-cb330c1b-1"
+})([
+	``,
+	`;padding:0;height:10px;font-size:0;background:transparent;min-width:100px;&::-webkit-slider-runnable-track{width:100%;cursor:pointer;border-radius:`,
+	`;background:`,
+	`;border:solid 2px `,
+	`;box-shadow:0 0 0 0 `,
+	`;transition:all 0.3s ease;`,
+	`}&::-moz-range-track{width:100%;cursor:pointer;border-radius:`,
+	`;background:`,
+	`;border:solid 2px `,
+	`;box-shadow:0 0 0 0 `,
+	`;transition:all 0.3s ease;`,
+	`}&::-webkit-slider-thumb{`,
+	`;background:`,
+	`;border:0 solid transparent;border-radius:50%;transition:all 0.3s ease;}&::-moz-range-thumb{`,
+	`;background:`,
+	`;border:0 solid transparent;border-radius:50%;transition:all 0.3s ease;}&:hover:not([disabled]){&::-webkit-slider-runnable-track{border:solid 2px `,
+	`;}&::-moz-range-track{border:solid 2px `,
+	`;}}&:focus:not([disabled]){&::-webkit-slider-runnable-track{border:solid 2px `,
+	`;box-shadow:0 0 0 4px `,
+	`;}&::-webkit-slider-thumb{box-shadow:0 0 0 4px `,
+	`;}&::-moz-range-track{border:solid 2px `,
+	`;box-shadow:0 0 0 4px `,
+	`;}&::-moz-range-thumb{box-shadow:0 0 0 4px `,
+	`;}}&:active:not([disabled]){&::-webkit-slider-runnable-track{box-shadow:0 0 0 2px `,
+	`;}&::-webkit-slider-thumb{box-shadow:0 0 0 2px `,
+	`;}&::-moz-range-track{box-shadow:0 0 0 2px `,
+	`;}&::-moz-range-thumb{box-shadow:0 0 0 2px `,
+	`;}}`,
+	` `,
+	` `,
+	``
+], resetButton, ({ theme }) => theme.spacing.radius.xl, ({ theme }) => theme.colors.light, ({ theme }) => theme.colors.grayLight, ({ theme }) => theme.colors.primaryLight, ({ $error, $success, theme }) => {
+	return statusBorderStyles($error, $success, theme);
+}, ({ theme }) => theme.spacing.radius.xl, ({ theme }) => theme.colors.light, ({ theme }) => theme.colors.grayLight, ({ theme }) => theme.colors.primaryLight, ({ $error, $success, theme }) => {
+	return statusBorderStyles($error, $success, theme);
+}, resetButton, ({ theme }) => theme.colors.primary, resetButton, ({ theme }) => theme.colors.primary, ({ theme }) => theme.colors.primary, ({ theme }) => theme.colors.primary, ({ theme }) => theme.colors.primary, ({ theme }) => theme.colors.primaryLight, ({ theme }) => theme.colors.primaryLight, ({ theme }) => theme.colors.primary, ({ theme }) => theme.colors.primaryLight, ({ theme }) => theme.colors.primaryLight, ({ theme }) => theme.colors.primaryLight, ({ theme }) => theme.colors.primaryLight, ({ theme }) => theme.colors.primaryLight, ({ theme }) => theme.colors.primaryLight, ({ disabled, theme }) => disabled && `
 		cursor: not-allowed;
 
 		&::-webkit-slider-runnable-track {
@@ -126,13 +75,8 @@ const StyledInput = styled.input`
 			background: ${theme.colors.gray};
 			cursor: not-allowed;
 		}
-	`}
-
-  ${({ $fullWidth }) => fullWidthStyles($fullWidth)}
-
-	${({ $size }) => {
-  if ($size === "big") {
-    return `
+	`, ({ $fullWidth }) => fullWidthStyles($fullWidth), ({ $size }) => {
+	if ($size === "big") return `
 					height: 32px;
 
 					&::-webkit-slider-runnable-track {
@@ -154,8 +98,7 @@ const StyledInput = styled.input`
 						height: 32px;
 					}
 				`;
-  } else if ($size === "small") {
-    return `
+	else if ($size === "small") return `
 					height: 18px;
 
 					&::-webkit-slider-runnable-track {
@@ -177,8 +120,7 @@ const StyledInput = styled.input`
 						height: 18px;
 					}
 				`;
-  } else {
-    return `
+	else return `
 					height: 22px;
 
 					&::-webkit-slider-runnable-track {
@@ -200,31 +142,22 @@ const StyledInput = styled.input`
 						height: 22px;
 					}
 				`;
-  }
-}}
-`;
+});
 function LocalRange({ ...props }, ref) {
-  return /* @__PURE__ */ jsxs(
-    StyledInputWrapper,
-    {
-      $fullWidth: props.$fullWidth,
-      className: props.$wrapperClassName,
-      children: [
-        props.$label && /* @__PURE__ */ jsx(StyledLabel, { htmlFor: props.id, children: props.$label }),
-        /* @__PURE__ */ jsx(
-          StyledInput,
-          {
-            ...props,
-            "aria-invalid": props.$error || void 0,
-            type: "range",
-            ref
-          }
-        )
-      ]
-    }
-  );
+	return /* @__PURE__ */ jsxs(StyledInputWrapper, {
+		$fullWidth: props.$fullWidth,
+		className: props.$wrapperClassName,
+		children: [props.$label && /* @__PURE__ */ jsx(StyledLabel, {
+			htmlFor: props.id,
+			children: props.$label
+		}), /* @__PURE__ */ jsx(StyledInput, {
+			...props,
+			"aria-invalid": props.$error || void 0,
+			type: "range",
+			ref
+		})]
+	});
 }
-const Range = forwardRef(LocalRange);
-export {
-  Range
-};
+var Range = /* @__PURE__ */ forwardRef(LocalRange);
+//#endregion
+export { Range };

package/dist/select.js

@@ -1,108 +1,64 @@
 "use client";
-import { jsxs, jsx } from "react/jsx-runtime";
+"use client";
+import { IconArrow } from "./utils/icons.js";
+import { formElementHeightStyles, 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 { IconArrow } from "./utils/icons.js";
-import { fullWidthStyles, resetButton, resetInput, formElementHeightStyles, statusBorderStyles } from "./utils/mixins.js";
-const StyledSelect = styled.select`
-  ${resetButton};
-  ${resetInput};
-  font-family: inherit;
-  display: inline-block;
-  padding: 0 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;
-
-  &::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};` : $size === "small" ? `font-size: ${theme.fontSizes.inputSmall.lg}; padding: 0 12px;` : `font-size: ${theme.fontSizes.input.lg};`}
-
-	${({ $error, $success, theme }) => {
-  return statusBorderStyles($error, $success, theme);
-}}
-
-	${({ disabled, theme }) => disabled && `cursor: not-allowed;
+//#region src/lib/select.tsx
+var StyledSelect = styled.select.withConfig({
+	displayName: "select__StyledSelect",
+	componentId: "sc-b63bf03d-0"
+})([
+	``,
+	`;`,
+	`;font-family:inherit;display:inline-block;padding:0 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;&::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 }) => formElementHeightStyles($size), ({ $size, theme }) => $size === "big" ? `font-size: ${theme.fontSizes.inputBig.lg};` : $size === "small" ? `font-size: ${theme.fontSizes.inputSmall.lg}; padding: 0 12px;` : `font-size: ${theme.fontSizes.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`
-    position: relative;
-    ${({ $fullWidth }) => fullWidthStyles($fullWidth)}
-
-    & svg {
-      position: absolute;
-      top: 50%;
-      right: 15px;
-      transform: translateY(-50%) rotate(0);
-      transition: all 0.3s ease;
-      pointer-events: none;
-    }
-
-    & select {
-      padding-right: 40px;
-    }
-
-    & select:active:not([disabled]) ~ svg,
-    & select:focus:not([disabled]) ~ svg {
-      transform: translateY(-50%) rotate(180deg);
-    }
-  `;
+	`, ({ $fullWidth }) => fullWidthStyles($fullWidth));
+var StyledIconWrapper = styled.span.withConfig({
+	displayName: "select__StyledIconWrapper",
+	componentId: "sc-b63bf03d-1"
+})([`position:relative;`, ` & svg{position:absolute;top:50%;right:15px;transform:translateY(-50%) rotate(0);transition:all 0.3s ease;pointer-events:none;}& select{padding-right:40px;}& select:active:not([disabled]) ~ svg,& select:focus:not([disabled]) ~ svg{transform:translateY(-50%) rotate(180deg);}`], ({ $fullWidth }) => fullWidthStyles($fullWidth));
 function LocalSelect({ ...props }, ref) {
-  return /* @__PURE__ */ jsxs(
-    StyledInputWrapper,
-    {
-      $fullWidth: props.$fullWidth,
-      $label: props.$label,
-      className: props.$wrapperClassName,
-      children: [
-        props.$label && /* @__PURE__ */ jsx(StyledLabel, { htmlFor: props.id, children: props.$label }),
-        /* @__PURE__ */ jsxs(StyledIconWrapper, { $fullWidth: props.$fullWidth, children: [
-          /* @__PURE__ */ jsx(
-            StyledSelect,
-            {
-              ...props,
-              "aria-invalid": props.$error || void 0,
-              ref,
-              children: props.children
-            }
-          ),
-          /* @__PURE__ */ jsx(IconArrow, { "aria-hidden": "true" })
-        ] })
-      ]
-    }
-  );
+	return /* @__PURE__ */ jsxs(StyledInputWrapper, {
+		$fullWidth: props.$fullWidth,
+		$label: props.$label,
+		className: props.$wrapperClassName,
+		children: [props.$label && /* @__PURE__ */ jsx(StyledLabel, {
+			htmlFor: props.id,
+			children: props.$label
+		}), /* @__PURE__ */ jsxs(StyledIconWrapper, {
+			$fullWidth: props.$fullWidth,
+			children: [/* @__PURE__ */ jsx(StyledSelect, {
+				...props,
+				"aria-invalid": props.$error || void 0,
+				ref,
+				children: props.children
+			}), /* @__PURE__ */ jsx(IconArrow, { "aria-hidden": "true" })]
+		})]
+	});
 }
-const Select = forwardRef(LocalSelect);
-export {
-  Select,
-  StyledIconWrapper
-};
+var Select = /* @__PURE__ */ forwardRef(LocalSelect);
+//#endregion
+export { Select, StyledIconWrapper };

package/dist/space.js

@@ -1,37 +1,51 @@
 "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, $horizontal) => $size === "none" ? `display: none;` : $horizontal ? `display: inline-block;
+//#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;`;
-const breakpointKeys = ["xs", "sm", "md", "lg", "xl", "xxl", "xxxl"];
+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("");
+	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("");
 }
-const StyledSpace = styled.span`
-  ${({ $horizontal, $size }) => $size ? styles($size, $horizontal || false) : ""}
-  ${(props) => responsiveStyles(props)}
-`;
+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 });
+	return /* @__PURE__ */ jsx(StyledSpace, {
+		...props,
+		ref
+	});
 }
-const Space = forwardRef(LocalSpace);
-export {
-  Space
-};
+var Space = /* @__PURE__ */ forwardRef(LocalSpace);
+//#endregion
+export { Space };

package/dist/styled-components/registry.js

@@ -1,25 +1,23 @@
 "use client";
-import { jsx, Fragment } from "react/jsx-runtime";
+"use client";
+import { Fragment, jsx } from "react/jsx-runtime";
 import { useState } from "react";
 import { useServerInsertedHTML } from "next/navigation";
 import { ServerStyleSheet, StyleSheetManager } from "styled-components";
+//#region src/lib/styled-components/registry.tsx
 function StyledComponentsRegistry({ children }) {
-  const [styledComponentsStyleSheet] = useState(() => new ServerStyleSheet());
-  const isServer = typeof window === "undefined";
-  useServerInsertedHTML(() => {
-    const styles = styledComponentsStyleSheet.getStyleElement();
-    styledComponentsStyleSheet.instance.clearTag();
-    return /* @__PURE__ */ jsx(Fragment, { children: styles });
-  });
-  return /* @__PURE__ */ jsx(
-    StyleSheetManager,
-    {
-      sheet: isServer ? styledComponentsStyleSheet.instance : void 0,
-      enableVendorPrefixes: true,
-      children
-    }
-  );
+	const [styledComponentsStyleSheet] = useState(() => new ServerStyleSheet());
+	const isServer = typeof window === "undefined";
+	useServerInsertedHTML(() => {
+		const styles = styledComponentsStyleSheet.getStyleElement();
+		styledComponentsStyleSheet.instance.clearTag();
+		return /* @__PURE__ */ jsx(Fragment, { children: styles });
+	});
+	return /* @__PURE__ */ jsx(StyleSheetManager, {
+		sheet: isServer ? styledComponentsStyleSheet.instance : void 0,
+		enableVendorPrefixes: true,
+		children
+	});
 }
-export {
-  StyledComponentsRegistry
-};
+//#endregion
+export { StyledComponentsRegistry };

package/dist/styled-components/theme-provider.js

@@ -1,35 +1,31 @@
 "use client";
+"use client";
+import { GlobalStyles } from "../utils/global.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useState, useEffect, createContext } from "react";
+import { createContext, useEffect, useState } from "react";
 import { ThemeProvider } from "styled-components";
-import { GlobalStyles } from "../utils/global.js";
-const ThemeContext = createContext({
-  setTheme: () => {
-  }
-});
-function CherryThemeProvider({
-  children,
-  theme,
-  themeDark
-}) {
-  const [currentTheme, setTheme] = useState(theme);
-  useEffect(() => {
-    if (!themeDark) return setTheme(theme);
-    if (localStorage.theme === "dark" || !("theme" in localStorage) && window.matchMedia("(prefers-color-scheme: dark)").matches) {
-      document.documentElement.classList.add("dark");
-      setTheme(themeDark);
-    } else {
-      document.documentElement.classList.remove("dark");
-      setTheme(theme);
-    }
-  }, [theme, themeDark]);
-  const GlobalStylesComponent = GlobalStyles(currentTheme);
-  return /* @__PURE__ */ jsx(ThemeProvider, { theme: currentTheme, children: /* @__PURE__ */ jsxs(ThemeContext.Provider, { value: { setTheme }, children: [
-    /* @__PURE__ */ jsx(GlobalStylesComponent, {}),
-    children
-  ] }) });
+//#region src/lib/styled-components/theme-provider.tsx
+var ThemeContext = /* @__PURE__ */ createContext({ setTheme: () => {} });
+function CherryThemeProvider({ children, theme, themeDark }) {
+	const [currentTheme, setTheme] = useState(theme);
+	useEffect(() => {
+		if (!themeDark) return setTheme(theme);
+		if (localStorage.theme === "dark" || !("theme" in localStorage) && window.matchMedia("(prefers-color-scheme: dark)").matches) {
+			document.documentElement.classList.add("dark");
+			setTheme(themeDark);
+		} else {
+			document.documentElement.classList.remove("dark");
+			setTheme(theme);
+		}
+	}, [theme, themeDark]);
+	const GlobalStylesComponent = GlobalStyles(currentTheme);
+	return /* @__PURE__ */ jsx(ThemeProvider, {
+		theme: currentTheme,
+		children: /* @__PURE__ */ jsxs(ThemeContext.Provider, {
+			value: { setTheme },
+			children: [/* @__PURE__ */ jsx(GlobalStylesComponent, {}), children]
+		})
+	});
 }
-export {
-  CherryThemeProvider,
-  ThemeContext
-};
+//#endregion
+export { CherryThemeProvider, ThemeContext };