math-main-components 0.0.224 → 0.0.226

package/dist/components/Checkbox/Checkbox.d.ts

@@ -1,8 +1,7 @@
 import React, { ChangeEvent, HTMLAttributes, ReactNode } from 'react';
-export declare function Checkbox({ id, name, checked, defaultChecked, onInput, children, ...props }: {
+export declare function Checkbox({ id, name, defaultChecked, onInput, children, ...props }: {
     id?: string;
     name: string;
-    checked?: boolean;
     onInput?: (event: ChangeEvent<HTMLInputElement>) => void;
     defaultChecked?: boolean;
     children: ReactNode;

package/dist/index.cjs.js

@@ -9456,13 +9456,15 @@ function Button2({ id, children, type = "submit", theme = "primary", iconName =
             React__default["default"].createElement(SvgIcon, { iconName: iconName }))));
 }
 
-var css_248z$v = ".styles-module_container__gCCnD {\n  margin-bottom: 20px;\n  color: var(--foreground-3);\n  width: 100%;\n}\n.styles-module_container__gCCnD [type=checkbox] {\n  position: relative;\n  left: 15px;\n  top: -4px;\n  z-index: 0;\n  appearance: none;\n  -webkit-appearance: none;\n  cursor: pointer;\n  margin-left: -3.5px;\n  display: none;\n}\n.styles-module_container__gCCnD [type=checkbox] + label {\n  position: relative;\n  cursor: pointer;\n  user-select: none;\n  -webkit-user-select: none;\n}\n.styles-module_container__gCCnD [type=checkbox] + label::before {\n  width: 17px;\n  height: 17px;\n  border-radius: 5px;\n  border: 2px solid var(--border-2);\n  display: block;\n  content: \"\";\n  float: left;\n  margin-right: 8px;\n  z-index: 5;\n  position: relative;\n  transition: 0.2s ease-in-out;\n}\n.styles-module_container__gCCnD [type=checkbox] ~ span {\n  position: absolute;\n  opacity: 1;\n  color: var(--background-2);\n  z-index: 100;\n  user-select: none;\n  pointer-events: none;\n  -webkit-user-select: none;\n  font-weight: 500;\n  top: 10px;\n  left: 10px;\n}\n.styles-module_container__gCCnD [type=checkbox]:checked + label::before {\n  background-color: var(--primary-1);\n  border-color: var(--primary-1);\n}\n.styles-module_container__gCCnD [type=checkbox]:hover:not(:checked) + label::before {\n  background-color: var(--background-4);\n  border-color: var(--border-2);\n}";
+var css_248z$v = ".styles-module_container__gCCnD {\n  margin-bottom: 20px;\n  color: var(--foreground-3);\n  width: 100%;\n  position: relative;\n}\n.styles-module_container__gCCnD [type=checkbox] {\n  position: relative;\n  left: 15px;\n  top: -4px;\n  z-index: 0;\n  appearance: none;\n  -webkit-appearance: none;\n  cursor: pointer;\n  margin-left: -3.5px;\n  display: none;\n}\n.styles-module_container__gCCnD [type=checkbox] + label {\n  position: relative;\n  cursor: pointer;\n  user-select: none;\n  -webkit-user-select: none;\n}\n.styles-module_container__gCCnD [type=checkbox] + label::before {\n  width: 17px;\n  height: 17px;\n  border-radius: 5px;\n  border: 2px solid var(--border-2);\n  display: block;\n  content: \"\";\n  float: left;\n  margin-right: 8px;\n  z-index: 5;\n  position: relative;\n  transition: 0.2s ease-in-out;\n}\n.styles-module_container__gCCnD [type=checkbox] ~ span {\n  position: absolute;\n  opacity: 1;\n  color: var(--background-2);\n  z-index: 100;\n  user-select: none;\n  pointer-events: none;\n  -webkit-user-select: none;\n  font-weight: 500;\n  top: 0px;\n  left: 0px;\n}\n.styles-module_container__gCCnD [type=checkbox]:checked + label::before {\n  background-color: var(--primary-1);\n  border-color: var(--primary-1);\n}\n.styles-module_container__gCCnD [type=checkbox]:hover:not(:checked) + label::before {\n  background-color: var(--background-4);\n  border-color: var(--border-2);\n}";
 var styles$v = {"container":"styles-module_container__gCCnD"};
 styleInject(css_248z$v);
 
-function Checkbox({ id, name, checked, defaultChecked = false, onInput = () => { }, children, ...props }) {
+function Checkbox({ id, name, defaultChecked = false, onInput = () => { }, children, ...props }) {
+    const [checked, setChecked] = React__default["default"].useState(defaultChecked);
+    React.useEffect(() => setChecked(defaultChecked), [defaultChecked]);
     return (React__default["default"].createElement("div", { className: styles$v.container, ...props },
-        React__default["default"].createElement("input", { type: "checkbox", onInput: onInput, name: name, checked: checked, defaultChecked: defaultChecked, id: id || name }),
+        React__default["default"].createElement("input", { type: "checkbox", onInput: onInput, name: name, defaultChecked: checked, id: id || name }),
         React__default["default"].createElement("label", { htmlFor: id || name }, children),
         React__default["default"].createElement(SvgIcon, { iconName: "done", size: "21px" })));
 }

package/dist/index.esm.js

@@ -9430,13 +9430,15 @@ function Button2({ id, children, type = "submit", theme = "primary", iconName =
             React__default.createElement(SvgIcon, { iconName: iconName }))));
 }
 
-var css_248z$v = ".styles-module_container__gCCnD {\n  margin-bottom: 20px;\n  color: var(--foreground-3);\n  width: 100%;\n}\n.styles-module_container__gCCnD [type=checkbox] {\n  position: relative;\n  left: 15px;\n  top: -4px;\n  z-index: 0;\n  appearance: none;\n  -webkit-appearance: none;\n  cursor: pointer;\n  margin-left: -3.5px;\n  display: none;\n}\n.styles-module_container__gCCnD [type=checkbox] + label {\n  position: relative;\n  cursor: pointer;\n  user-select: none;\n  -webkit-user-select: none;\n}\n.styles-module_container__gCCnD [type=checkbox] + label::before {\n  width: 17px;\n  height: 17px;\n  border-radius: 5px;\n  border: 2px solid var(--border-2);\n  display: block;\n  content: \"\";\n  float: left;\n  margin-right: 8px;\n  z-index: 5;\n  position: relative;\n  transition: 0.2s ease-in-out;\n}\n.styles-module_container__gCCnD [type=checkbox] ~ span {\n  position: absolute;\n  opacity: 1;\n  color: var(--background-2);\n  z-index: 100;\n  user-select: none;\n  pointer-events: none;\n  -webkit-user-select: none;\n  font-weight: 500;\n  top: 10px;\n  left: 10px;\n}\n.styles-module_container__gCCnD [type=checkbox]:checked + label::before {\n  background-color: var(--primary-1);\n  border-color: var(--primary-1);\n}\n.styles-module_container__gCCnD [type=checkbox]:hover:not(:checked) + label::before {\n  background-color: var(--background-4);\n  border-color: var(--border-2);\n}";
+var css_248z$v = ".styles-module_container__gCCnD {\n  margin-bottom: 20px;\n  color: var(--foreground-3);\n  width: 100%;\n  position: relative;\n}\n.styles-module_container__gCCnD [type=checkbox] {\n  position: relative;\n  left: 15px;\n  top: -4px;\n  z-index: 0;\n  appearance: none;\n  -webkit-appearance: none;\n  cursor: pointer;\n  margin-left: -3.5px;\n  display: none;\n}\n.styles-module_container__gCCnD [type=checkbox] + label {\n  position: relative;\n  cursor: pointer;\n  user-select: none;\n  -webkit-user-select: none;\n}\n.styles-module_container__gCCnD [type=checkbox] + label::before {\n  width: 17px;\n  height: 17px;\n  border-radius: 5px;\n  border: 2px solid var(--border-2);\n  display: block;\n  content: \"\";\n  float: left;\n  margin-right: 8px;\n  z-index: 5;\n  position: relative;\n  transition: 0.2s ease-in-out;\n}\n.styles-module_container__gCCnD [type=checkbox] ~ span {\n  position: absolute;\n  opacity: 1;\n  color: var(--background-2);\n  z-index: 100;\n  user-select: none;\n  pointer-events: none;\n  -webkit-user-select: none;\n  font-weight: 500;\n  top: 0px;\n  left: 0px;\n}\n.styles-module_container__gCCnD [type=checkbox]:checked + label::before {\n  background-color: var(--primary-1);\n  border-color: var(--primary-1);\n}\n.styles-module_container__gCCnD [type=checkbox]:hover:not(:checked) + label::before {\n  background-color: var(--background-4);\n  border-color: var(--border-2);\n}";
 var styles$v = {"container":"styles-module_container__gCCnD"};
 styleInject(css_248z$v);
 
-function Checkbox({ id, name, checked, defaultChecked = false, onInput = () => { }, children, ...props }) {
+function Checkbox({ id, name, defaultChecked = false, onInput = () => { }, children, ...props }) {
+    const [checked, setChecked] = React__default.useState(defaultChecked);
+    useEffect(() => setChecked(defaultChecked), [defaultChecked]);
     return (React__default.createElement("div", { className: styles$v.container, ...props },
-        React__default.createElement("input", { type: "checkbox", onInput: onInput, name: name, checked: checked, defaultChecked: defaultChecked, id: id || name }),
+        React__default.createElement("input", { type: "checkbox", onInput: onInput, name: name, defaultChecked: checked, id: id || name }),
         React__default.createElement("label", { htmlFor: id || name }, children),
         React__default.createElement(SvgIcon, { iconName: "done", size: "21px" })));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "math-main-components",
-    "version": "0.0.224",
+    "version": "0.0.226",
     "author": "Emilian Scheel",
     "files": [
         "dist/**/*",