math-main-components 0.0.153 → 0.0.155

package/dist/components/SvgIcon/SvgIcon.d.ts

@@ -1,3 +1,8 @@
-import React from 'react';
-import { SvgIconProps } from "./SvgIcon.types";
-export declare function SvgIcon({ iconName, size, className, onClick }: SvgIconProps): React.JSX.Element;
+import React, { MouseEvent } from 'react';
+export declare function SvgIcon({ id, iconName, size, onClick }: {
+    id?: string;
+    iconName?: string;
+    size?: string;
+    fill?: string;
+    onClick?: (event: MouseEvent<HTMLSpanElement>) => void;
+}): React.JSX.Element;

package/dist/index.cjs.js

@@ -8,9 +8,8 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-function SvgIcon({ iconName, size = "24px", className = "", onClick }) {
-    return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement("span", { onClick: onClick, className: `material-symbols-outlined ${className}`, style: { fontSize: size } }, iconName)));
+function SvgIcon({ id, iconName, size = "24px", onClick }) {
+    return (React__default["default"].createElement("span", { onClick: onClick, className: "material-symbols-outlined", id: id, style: { fontSize: size } }, iconName));
 }
 
 function styleInject(css, ref) {
@@ -458,7 +457,7 @@ function ProgressBar({ length, progress }) {
                 React__default["default"].createElement("div", { className: styles$a.progress, style: { width: `${progress / length * 100}%` } })))));
 }
 
-var css_248z$9 = ".styles-module_container__Grkzw {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  color: var(--foreground-3);\n  margin-bottom: 20px;\n  position: relative;\n}\n.styles-module_container__Grkzw [type=radio] {\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}\n.styles-module_container__Grkzw [type=radio] + label {\n  position: absolute;\n  cursor: pointer;\n}\n.styles-module_container__Grkzw [type=radio] + label::before {\n  width: 15px;\n  height: 15px;\n  border-radius: 20px;\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__Grkzw .styles-module_option__nijjM {\n  position: relative;\n}\n.styles-module_container__Grkzw [type=radio] ~ span {\n  position: absolute;\n  opacity: 1;\n  color: var(--background-1);\n  z-index: 100;\n  user-select: none;\n  pointer-events: none;\n  -webkit-user-select: none;\n  font-weight: 500;\n  bottom: -1.5px;\n  left: -1px;\n}\n.styles-module_container__Grkzw [type=radio]:checked ~ span {\n  color: var(--foreground-1);\n}\n.styles-module_container__Grkzw [type=radio]:checked + label::before {\n  background-color: var(--primary-1);\n  border-color: var(--primary-1);\n}\n.styles-module_container__Grkzw [type=radio]:hover:not(:checked) + label::before {\n  background-color: var(--background-4);\n  border-color: var(--background-4);\n}";
+var css_248z$9 = ".styles-module_container__Grkzw {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  color: var(--foreground-3);\n  margin-bottom: 20px;\n  position: relative;\n}\n.styles-module_container__Grkzw [type=radio] {\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}\n.styles-module_container__Grkzw [type=radio] + label {\n  position: absolute;\n  cursor: pointer;\n}\n.styles-module_container__Grkzw [type=radio] + label::before {\n  width: 15px;\n  height: 15px;\n  border-radius: 20px;\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__Grkzw .styles-module_option__nijjM {\n  position: relative;\n}\n.styles-module_container__Grkzw [type=radio] ~ span {\n  position: absolute;\n  opacity: 1;\n  color: var(--background-1);\n  z-index: 100;\n  user-select: none;\n  pointer-events: none;\n  -webkit-user-select: none;\n  font-weight: 500;\n  bottom: -1.5px;\n  left: -1px;\n}\n.styles-module_container__Grkzw [type=radio]:checked ~ span {\n  color: var(--background-1);\n}\n.styles-module_container__Grkzw [type=radio]:checked + label::before {\n  background-color: var(--primary-1);\n  border-color: var(--primary-1);\n}\n.styles-module_container__Grkzw [type=radio]:hover:not(:checked) + label::before {\n  background-color: var(--background-4);\n  border-color: var(--background-4);\n}";
 var styles$9 = {"container":"styles-module_container__Grkzw","option":"styles-module_option__nijjM"};
 styleInject(css_248z$9);
 
@@ -483,7 +482,7 @@ function RadioButtons({ options, group, selected, onClick, width = "100%" }) {
             :
                 React__default["default"].createElement("input", { type: "radio", id: option.name, name: group, value: option.name, onInput: onUpdateSelected }),
         React__default["default"].createElement("label", { htmlFor: option.name }, option.text),
-        React__default["default"].createElement(SvgIcon, { iconName: "done", size: "20px", className: styles$9.icon })))));
+        React__default["default"].createElement(SvgIcon, { iconName: "done", size: "20px" })))));
 }
 
 var css_248z$8 = ".styles-module_container__RhsQe {\n  margin-right: 8px;\n}\n.styles-module_container__RhsQe .styles-module_button__HuX-0 {\n  background: none;\n  padding: none;\n  border: none;\n  width: 40px;\n  height: 40px;\n  transition: 0.2s;\n  cursor: pointer;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: 20px;\n}\n.styles-module_container__RhsQe .styles-module_button__HuX-0 span {\n  color: var(--foreground-1);\n}\n.styles-module_container__RhsQe .styles-module_button__HuX-0:hover {\n  background: var(--background-1);\n}\n.styles-module_container__RhsQe.styles-module_middle__xg7RF .styles-module_button__HuX-0 {\n  flex-direction: row;\n  gap: 5px;\n}\n.styles-module_container__RhsQe.styles-module_middle__xg7RF .styles-module_button__HuX-0:hover {\n  background: none;\n}";

package/dist/index.esm.js

@@ -1,8 +1,7 @@
 import React, { useState, useCallback, useRef, createRef, useEffect } from 'react';
 
-function SvgIcon({ iconName, size = "24px", className = "", onClick }) {
-    return (React.createElement(React.Fragment, null,
-        React.createElement("span", { onClick: onClick, className: `material-symbols-outlined ${className}`, style: { fontSize: size } }, iconName)));
+function SvgIcon({ id, iconName, size = "24px", onClick }) {
+    return (React.createElement("span", { onClick: onClick, className: "material-symbols-outlined", id: id, style: { fontSize: size } }, iconName));
 }
 
 function styleInject(css, ref) {
@@ -450,7 +449,7 @@ function ProgressBar({ length, progress }) {
                 React.createElement("div", { className: styles$a.progress, style: { width: `${progress / length * 100}%` } })))));
 }
 
-var css_248z$9 = ".styles-module_container__Grkzw {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  color: var(--foreground-3);\n  margin-bottom: 20px;\n  position: relative;\n}\n.styles-module_container__Grkzw [type=radio] {\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}\n.styles-module_container__Grkzw [type=radio] + label {\n  position: absolute;\n  cursor: pointer;\n}\n.styles-module_container__Grkzw [type=radio] + label::before {\n  width: 15px;\n  height: 15px;\n  border-radius: 20px;\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__Grkzw .styles-module_option__nijjM {\n  position: relative;\n}\n.styles-module_container__Grkzw [type=radio] ~ span {\n  position: absolute;\n  opacity: 1;\n  color: var(--background-1);\n  z-index: 100;\n  user-select: none;\n  pointer-events: none;\n  -webkit-user-select: none;\n  font-weight: 500;\n  bottom: -1.5px;\n  left: -1px;\n}\n.styles-module_container__Grkzw [type=radio]:checked ~ span {\n  color: var(--foreground-1);\n}\n.styles-module_container__Grkzw [type=radio]:checked + label::before {\n  background-color: var(--primary-1);\n  border-color: var(--primary-1);\n}\n.styles-module_container__Grkzw [type=radio]:hover:not(:checked) + label::before {\n  background-color: var(--background-4);\n  border-color: var(--background-4);\n}";
+var css_248z$9 = ".styles-module_container__Grkzw {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  color: var(--foreground-3);\n  margin-bottom: 20px;\n  position: relative;\n}\n.styles-module_container__Grkzw [type=radio] {\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}\n.styles-module_container__Grkzw [type=radio] + label {\n  position: absolute;\n  cursor: pointer;\n}\n.styles-module_container__Grkzw [type=radio] + label::before {\n  width: 15px;\n  height: 15px;\n  border-radius: 20px;\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__Grkzw .styles-module_option__nijjM {\n  position: relative;\n}\n.styles-module_container__Grkzw [type=radio] ~ span {\n  position: absolute;\n  opacity: 1;\n  color: var(--background-1);\n  z-index: 100;\n  user-select: none;\n  pointer-events: none;\n  -webkit-user-select: none;\n  font-weight: 500;\n  bottom: -1.5px;\n  left: -1px;\n}\n.styles-module_container__Grkzw [type=radio]:checked ~ span {\n  color: var(--background-1);\n}\n.styles-module_container__Grkzw [type=radio]:checked + label::before {\n  background-color: var(--primary-1);\n  border-color: var(--primary-1);\n}\n.styles-module_container__Grkzw [type=radio]:hover:not(:checked) + label::before {\n  background-color: var(--background-4);\n  border-color: var(--background-4);\n}";
 var styles$9 = {"container":"styles-module_container__Grkzw","option":"styles-module_option__nijjM"};
 styleInject(css_248z$9);
 
@@ -475,7 +474,7 @@ function RadioButtons({ options, group, selected, onClick, width = "100%" }) {
             :
                 React.createElement("input", { type: "radio", id: option.name, name: group, value: option.name, onInput: onUpdateSelected }),
         React.createElement("label", { htmlFor: option.name }, option.text),
-        React.createElement(SvgIcon, { iconName: "done", size: "20px", className: styles$9.icon })))));
+        React.createElement(SvgIcon, { iconName: "done", size: "20px" })))));
 }
 
 var css_248z$8 = ".styles-module_container__RhsQe {\n  margin-right: 8px;\n}\n.styles-module_container__RhsQe .styles-module_button__HuX-0 {\n  background: none;\n  padding: none;\n  border: none;\n  width: 40px;\n  height: 40px;\n  transition: 0.2s;\n  cursor: pointer;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: 20px;\n}\n.styles-module_container__RhsQe .styles-module_button__HuX-0 span {\n  color: var(--foreground-1);\n}\n.styles-module_container__RhsQe .styles-module_button__HuX-0:hover {\n  background: var(--background-1);\n}\n.styles-module_container__RhsQe.styles-module_middle__xg7RF .styles-module_button__HuX-0 {\n  flex-direction: row;\n  gap: 5px;\n}\n.styles-module_container__RhsQe.styles-module_middle__xg7RF .styles-module_button__HuX-0:hover {\n  background: none;\n}";

package/package.json

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