labsense-ui-kit 1.0.1 → 1.0.2

package/README.md

@@ -21,13 +21,13 @@ If you want to run the project follow the next steps
 ```
   // Terminal 1
 
-  npm start --workspace=packages/ui-lib
+  npm run dev --workspace=packages/ui-lib
 ```
 
 ```
   // Terminal 2
 
-  npm start --workspace=packages/example
+  npm run dev --workspace=packages/example
 ```
 
 - If you want to run the storybook
@@ -35,7 +35,7 @@ If you want to run the project follow the next steps
 ```
   // Terminal 3
 
-  npm start --workspace=packages/storybook
+  npm run dev --workspace=packages/storybook
 ```
 
 ## Icons

package/dist/Buttons/Button.d.ts

@@ -3,8 +3,7 @@ interface ButtonProps {
     onClick?: () => void;
     svg?: React.ReactNode;
     text: string;
-    width?: string;
-    height?: string;
+    size?: 'Small' | 'Regular' | 'Large' | 'CustomUsingPadding';
     background?: string;
     color?: string;
     fontWeight?: string;
@@ -17,5 +16,5 @@ interface ButtonProps {
     padding?: string;
     gap?: string;
 }
-declare const MultiFunctionButtonComponent: React.FC<ButtonProps>;
-export default MultiFunctionButtonComponent;
+declare const ButtonComponent: React.FC<ButtonProps>;
+export default ButtonComponent;

package/dist/index.js

@@ -10,70 +10,60 @@ function _taggedTemplateLiteralLoose(e, t) {
 
 var _templateObject, _templateObject2, _templateObject3;
 var Container = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose([""])));
-var Button = styled.button(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  width: ", ";\n  height: ", ";\n  padding: ", ";\n  box-sizing : border-box;\n  gap: ", ";\n  border: ", ";\n  border-radius: ", ";\n  outline : none;\n  background: ", ";              \n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n  opacity : 0.8;\n\n  &:hover{\n    opacity : 1;\n    // border: ", ";\n  }\n\n  &:focus {\n    outline: none;\n    // border : none;\n  }\n"])), function (_ref) {
-  var width = _ref.width;
-  return width || "max-content";
+var Button = styled.button(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  width: max-content;\n  padding: ", ";\n  box-sizing : border-box;\n  gap: ", ";\n  border: ", ";\n  border-radius: ", ";\n  outline : none;\n  background: ", ";              \n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n  opacity : 0.8;\n\n  &:hover{\n    opacity : 1;\n  }\n\n  &:focus {\n    outline: none;\n  }\n"])), function (_ref) {
+  var size = _ref.size,
+    padding = _ref.padding;
+  return size === 'Small' ? '5px' : size === 'Regular' ? '10px 16px' : size === 'Large' ? '15px 20px' : size === 'CustomUsingPadding' ? padding : '10px 16px';
 }, function (_ref2) {
-  var height = _ref2.height;
-  return height || "42px";
+  var gap = _ref2.gap;
+  return gap || '10px';
 }, function (_ref3) {
-  var padding = _ref3.padding;
-  return padding || '10px 16px';
+  var border = _ref3.border;
+  return border || 'none';
 }, function (_ref4) {
-  var gap = _ref4.gap;
-  return gap || '10px';
+  var borderRadius = _ref4.borderRadius;
+  return borderRadius || '5px';
 }, function (_ref5) {
-  var border = _ref5.border;
-  return border || 'none';
-}, function (_ref6) {
-  var borderRadius = _ref6.borderRadius;
-  return borderRadius || '1000px';
-}, function (_ref7) {
-  var background = _ref7.background;
+  var background = _ref5.background;
   return background || " #4c9eeb;";
-}, function (_ref8) {
-  var border = _ref8.border;
-  return border || 'none';
 });
-var ButtonText = styled.p(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  color:  ", ";\n  white-space : nowrap;\n"])), function (_ref9) {
-  var fontFamily = _ref9.fontFamily;
-  return fontFamily || 'Noto Sans';
-}, function (_ref10) {
-  var fontSize = _ref10.fontSize;
+var ButtonText = styled.span(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  font-family: ", ";\n  margin: 0px;\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  color:  ", ";\n  white-space : nowrap;\n"])), function (_ref6) {
+  var fontFamily = _ref6.fontFamily;
+  return fontFamily || 'sans-serif';
+}, function (_ref7) {
+  var fontSize = _ref7.fontSize;
   return fontSize || '18px';
-}, function (_ref11) {
-  var fontWeight = _ref11.fontWeight;
+}, function (_ref8) {
+  var fontWeight = _ref8.fontWeight;
   return fontWeight || '500';
-}, function (_ref12) {
-  var lineHeight = _ref12.lineHeight;
+}, function (_ref9) {
+  var lineHeight = _ref9.lineHeight;
   return lineHeight || '18px';
-}, function (_ref13) {
-  var color = _ref13.color;
+}, function (_ref10) {
+  var color = _ref10.color;
   return color || '#ffffff';
 });
-var MultiFunctionButtonComponent = function MultiFunctionButtonComponent(_ref14) {
-  var onClick = _ref14.onClick,
-    text = _ref14.text,
-    width = _ref14.width,
-    height = _ref14.height,
-    background = _ref14.background,
-    color = _ref14.color,
-    border = _ref14.border,
-    borderRadius = _ref14.borderRadius,
-    fontWeight = _ref14.fontWeight,
-    fontSize = _ref14.fontSize,
-    fontFamily = _ref14.fontFamily,
-    lineHeight = _ref14.lineHeight,
-    padding = _ref14.padding,
-    svg = _ref14.svg,
-    gap = _ref14.gap;
+var ButtonComponent = function ButtonComponent(_ref11) {
+  var onClick = _ref11.onClick,
+    text = _ref11.text,
+    size = _ref11.size,
+    background = _ref11.background,
+    color = _ref11.color,
+    border = _ref11.border,
+    borderRadius = _ref11.borderRadius,
+    fontWeight = _ref11.fontWeight,
+    fontSize = _ref11.fontSize,
+    fontFamily = _ref11.fontFamily,
+    lineHeight = _ref11.lineHeight,
+    padding = _ref11.padding,
+    svg = _ref11.svg,
+    gap = _ref11.gap;
   return React__default.createElement(Container, null, React__default.createElement(Button, {
     onClick: onClick,
-    width: width,
-    height: height,
     background: background,
     border: border,
     borderRadius: borderRadius,
+    size: size,
     padding: padding,
     gap: gap
   }, svg, React__default.createElement(ButtonText, {
@@ -184,6 +174,6 @@ var MultiFunctionInputComponent = function MultiFunctionInputComponent(_ref18) {
   }));
 };
 
-exports.Button = MultiFunctionButtonComponent;
+exports.Button = ButtonComponent;
 exports.Input = MultiFunctionInputComponent;
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../src/Buttons/Button.tsx","../src/Inputs/Input.tsx"],"sourcesContent":["import React from \"react\";\nimport styled from \"styled-components\";\n\nconst Container = styled.div``;\n\nconst Button = styled.button<{\n  width?: string;\n  height?: string;\n  background?: string;\n  border?: string;\n  borderRadius?: string;\n  padding? : string;\n  gap?: string;\n  \n}>`\n  width: ${({ width }) => width || \"max-content\"};\n  height: ${({ height }) => height || \"42px\"};\n  padding: ${({padding})=> padding || '10px 16px'};\n  box-sizing : border-box;\n  gap: ${({gap}) => gap || '10px'};\n  border: ${( {border} )=> border || 'none'};\n  border-radius: ${( {borderRadius} )=> borderRadius || '1000px'};\n  outline : none;\n  background: ${({ background }) => background || \" #4c9eeb;\"};              \n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n  opacity : 0.8;\n\n  &:hover{\n    opacity : 1;\n    // border: ${( {border} )=> border || 'none'};\n  }\n\n  &:focus {\n    outline: none;\n    // border : none;\n  }\n`;\n\nconst ButtonText = styled.p<{\n  fontFamily?: string;\n  fontSize?: string;\n  fontWeight?: string;\n  lineHeight?: string;\n  color?: string;\n}>`\n  font-family: ${({ fontFamily }) => fontFamily || 'Noto Sans'};\n  font-size: ${( { fontSize } ) => fontSize || '18px'};\n  font-weight: ${ ({ fontWeight }) => fontWeight  || '500' };\n  line-height: ${ ({ lineHeight }) => lineHeight  || '18px' };\n  color:  ${ ({ color }) => color  || '#ffffff' };\n  white-space : nowrap;\n`;\n\ninterface ButtonProps {\n  onClick?: () => void;\n  svg?: React.ReactNode;\n  text: string;\n  width?: string;\n  height? : string;\n  background? : string;\n  color? : string;\n  fontWeight? : string;\n  fontStyle? : string;\n  fontSize? : string;\n  fontFamily? : string;\n  lineHeight? : string;\n  border? : string;\n  borderRadius? : string;\n  padding? : string;\n  gap?: string;\n};\n\nconst MultiFunctionButtonComponent: React.FC<ButtonProps> = ({\n  onClick,\n  text,\n  width,\n  height,\n  background,\n  color,\n  border,\n  borderRadius,\n  fontWeight,\n  fontSize,\n  fontFamily,\n  lineHeight,\n  padding,\n  svg,\n  gap\n}) => {\n  return (\n    <Container>\n      <Button \n        onClick={onClick} \n        width={width} \n        height={height} \n        background={background} \n        border={border} \n        borderRadius={borderRadius} \n        padding={padding}\n        gap={gap}\n      >\n        {svg}\n        <ButtonText \n          color={color} \n          fontFamily={fontFamily} \n          fontSize={fontSize} \n          fontWeight={fontWeight} \n          lineHeight={lineHeight}\n        >\n          {text}\n          </ButtonText>\n      </Button>\n    </Container>\n  );\n};\n\nexport default MultiFunctionButtonComponent;\n","import React, { useRef, useState } from \"react\";\nimport styled from \"styled-components\";\n\nconst InputContainer = styled.div<{\n  width?: string;\n  height?: string;\n  border?: string;\n  backgroundColor?: string;\n  fontColor?: string;\n  fontSize?: string;\n  padding?: string;\n  borderRadius? : string;\n  fontWeight? : string;\n  lineHeight? : string\n  }>`\n  position: relative; \n  width: ${({ width }) => width || \"100%\"};\n  height: ${({ height }) => height || \"54px\"};\n  border-radius: ${({ borderRadius }) => borderRadius || \"4px\"};\n  border: 1px solid ${({ border }) => (border ? 'border' : '#657786')};\n  background: ${({backgroundColor}) => backgroundColor || 'transparent'};\n  display: flex; \n  flex-direction : column;\n  justify-content : center; \n`;\n\n\nconst WrittenTextAfterInput = styled.p<{ show: boolean }>`\n  position: relative; \n  top: 9px;\n  left: 8px;\n  width: auto;\n  height: auto;\n  font-family: Noto Sans;\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 14px;\n  text-align: left;\n  color: #4c9eeb;\n  margin: 2px;\n  visibility: ${({ show }) => (show ? \"visible\" : \"hidden\")};\n`;\n\nconst InputBlock = styled.input<{\n  width?: string;\n  height?: string;\n  borderColor?: string;\n  backgroundColor?: string;\n  fontColor?: string;\n  fontSize?: string;\n  padding?: string;\n  borderRadius? : string;\n  fontWeight? : string;\n  lineHeight? : string\n}>`\n  width: ${({ width }) => width || \"100%\"};\n  height: ${({ height }) => height || \"54px\"};\n  border-radius: ${({ borderRadius }) => borderRadius || \"4px\"};\n  border: 1px solid ${({ borderColor }) => borderColor || \"transparent\"};\n  background: ${({ backgroundColor }) => backgroundColor || \"transparent\"};\n  color: ${({ fontColor }) => fontColor || \"#14171A\"};\n  padding: ${({ padding }) => padding || \"8px\"};\n  box-sizing: border-box;\n  font-family: Noto Sans;\n  font-size: ${({ fontSize }) => fontSize || \"16px\"};\n  font-weight: ${({ fontWeight }) => fontWeight || 400};\n  line-height: ${({ lineHeight }) => lineHeight || '16px'};\n  text-align: left;\n  outline: none;\n\n  ::placeholder {\n    color: ${({ fontColor }) => fontColor || \"#AABBCC\"};\n  }\n`;\n\ninterface InputProps {\n  type?: string;\n  placeholder?: string;\n  width?: string;\n  height?: string;\n  borderColor?: string;\n  backgroundColor?: string;\n  fontColor?: string;\n  fontSize?: string;\n  value?: string;\n  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;\n  label: string; // To display label for each input block\n}\n\nconst MultiFunctionInputComponent = ({\n  label,\n  type,\n  placeholder,\n  width,\n  height,\n  borderColor,\n  backgroundColor,\n  fontColor,\n  fontSize,\n  value,\n  onChange,\n}: InputProps) => {\n  const [blockText, setBlockContent] = useState(false); // For showing the placeholder at top\n  const inputRef = useRef<HTMLInputElement>(null);\n\n\n  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    setBlockContent(true);\n    let inputValue = e.target.value;\n\n    if (type === \"phone\" && inputValue.length > 10) {\n      inputValue = inputValue.slice(0, 10); // Limiting phone number to 10 digits\n    }\n\n    setBlockContent(inputValue.length > 0); // Show label at top when user starts typing\n    onChange(e); // Pass the input value back to the parent component\n  };\n\n  return (\n    <InputContainer\n      \n      width={width}\n    >\n      <WrittenTextAfterInput show={blockText}>\n        {label} \n      </WrittenTextAfterInput>\n      <InputBlock\n        ref={inputRef}\n        type={type === \"phone\" ? \"tel\" : type} // Use 'tel' for phone input\n        placeholder={placeholder || label}\n        width={width}\n        height={height}\n        borderColor={borderColor}\n        backgroundColor={backgroundColor}\n        fontColor={fontColor}\n        fontSize={fontSize}\n        value={value}\n        onChange={handleInputChange}\n      />\n    </InputContainer>\n  );\n};\n\nexport default MultiFunctionInputComponent;"],"names":["Container","styled","div","_templateObject","_taggedTemplateLiteralLoose","Button","button","_templateObject2","_ref","width","_ref2","height","_ref3","padding","_ref4","gap","_ref5","border","_ref6","borderRadius","_ref7","background","_ref8","ButtonText","p","_templateObject3","_ref9","fontFamily","_ref10","fontSize","_ref11","fontWeight","_ref12","lineHeight","_ref13","color","MultiFunctionButtonComponent","_ref14","onClick","text","svg","React","InputContainer","backgroundColor","WrittenTextAfterInput","show","InputBlock","input","borderColor","fontColor","_ref15","_ref16","_ref17","MultiFunctionInputComponent","_ref18","label","type","placeholder","value","onChange","_useState","useState","blockText","setBlockContent","inputRef","useRef","handleInputChange","e","inputValue","target","length","slice","ref"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../src/Buttons/Button.tsx","../src/Inputs/Input.tsx"],"sourcesContent":["import React from \"react\";\nimport styled from \"styled-components\";\n\nconst Container = styled.div``;\n\nconst Button = styled.button<{\n  background?: string;\n  border?: string;\n  borderRadius?: string;\n  size?: string;\n  padding? : string;\n  gap?: string;\n  \n}>`\n  width: max-content;\n  padding: ${({size, padding})=> size === 'Small' ? '5px' : size === 'Regular' ? '10px 16px' : size === 'Large' ? '15px 20px' : size === 'CustomUsingPadding' ? padding : '10px 16px'};\n  box-sizing : border-box;\n  gap: ${({gap}) => gap || '10px'};\n  border: ${( {border} )=> border || 'none'};\n  border-radius: ${( {borderRadius} )=> borderRadius || '5px'};\n  outline : none;\n  background: ${({ background }) => background || \" #4c9eeb;\"};              \n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n  opacity : 0.8;\n\n  &:hover{\n    opacity : 1;\n  }\n\n  &:focus {\n    outline: none;\n  }\n`;\n\nconst ButtonText = styled.span<{\n  fontFamily?: string;\n  fontSize?: string;\n  fontWeight?: string;\n  lineHeight?: string;\n  color?: string;\n}>`\n  font-family: ${({ fontFamily }) => fontFamily || 'sans-serif'};\n  margin: 0px;\n  font-size: ${( { fontSize } ) => fontSize || '18px'};\n  font-weight: ${ ({ fontWeight }) => fontWeight  || '500' };\n  line-height: ${ ({ lineHeight }) => lineHeight  || '18px' };\n  color:  ${ ({ color }) => color  || '#ffffff' };\n  white-space : nowrap;\n`;\n\ninterface ButtonProps {\n  onClick?: () => void;\n  svg?: React.ReactNode;\n  text: string;\n  size?: 'Small' | 'Regular' | 'Large' | 'CustomUsingPadding';\n  background? : string;\n  color? : string;\n  fontWeight? : string;\n  fontStyle? : string;\n  fontSize? : string;\n  fontFamily? : string;\n  lineHeight? : string;\n  border? : string;\n  borderRadius? : string;\n  padding? : string;\n  gap?: string;\n};\n\nconst ButtonComponent: React.FC<ButtonProps> = ({\n  onClick,\n  text,\n  size,\n  background,\n  color,\n  border,\n  borderRadius,\n  fontWeight,\n  fontSize,\n  fontFamily,\n  lineHeight,\n  padding,\n  svg,\n  gap\n}) => {\n  return (\n    <Container>\n      <Button \n        onClick={onClick} \n        background={background} \n        border={border} \n        borderRadius={borderRadius} \n        size={size}\n        padding={padding}\n        gap={gap}\n      >\n        {svg}\n        <ButtonText \n          color={color} \n          fontFamily={fontFamily} \n          fontSize={fontSize} \n          fontWeight={fontWeight} \n          lineHeight={lineHeight}\n        >\n          {text}\n          </ButtonText>\n      </Button>\n    </Container>\n  );\n};\n\nexport default ButtonComponent;\n","import React, { useRef, useState } from \"react\";\nimport styled from \"styled-components\";\n\nconst InputContainer = styled.div<{\n  width?: string;\n  height?: string;\n  border?: string;\n  backgroundColor?: string;\n  fontColor?: string;\n  fontSize?: string;\n  padding?: string;\n  borderRadius? : string;\n  fontWeight? : string;\n  lineHeight? : string\n  }>`\n  position: relative; \n  width: ${({ width }) => width || \"100%\"};\n  height: ${({ height }) => height || \"54px\"};\n  border-radius: ${({ borderRadius }) => borderRadius || \"4px\"};\n  border: 1px solid ${({ border }) => (border ? 'border' : '#657786')};\n  background: ${({backgroundColor}) => backgroundColor || 'transparent'};\n  display: flex; \n  flex-direction : column;\n  justify-content : center; \n`;\n\n\nconst WrittenTextAfterInput = styled.p<{ show: boolean }>`\n  position: relative; \n  top: 9px;\n  left: 8px;\n  width: auto;\n  height: auto;\n  font-family: Noto Sans;\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 14px;\n  text-align: left;\n  color: #4c9eeb;\n  margin: 2px;\n  visibility: ${({ show }) => (show ? \"visible\" : \"hidden\")};\n`;\n\nconst InputBlock = styled.input<{\n  width?: string;\n  height?: string;\n  borderColor?: string;\n  backgroundColor?: string;\n  fontColor?: string;\n  fontSize?: string;\n  padding?: string;\n  borderRadius? : string;\n  fontWeight? : string;\n  lineHeight? : string\n}>`\n  width: ${({ width }) => width || \"100%\"};\n  height: ${({ height }) => height || \"54px\"};\n  border-radius: ${({ borderRadius }) => borderRadius || \"4px\"};\n  border: 1px solid ${({ borderColor }) => borderColor || \"transparent\"};\n  background: ${({ backgroundColor }) => backgroundColor || \"transparent\"};\n  color: ${({ fontColor }) => fontColor || \"#14171A\"};\n  padding: ${({ padding }) => padding || \"8px\"};\n  box-sizing: border-box;\n  font-family: Noto Sans;\n  font-size: ${({ fontSize }) => fontSize || \"16px\"};\n  font-weight: ${({ fontWeight }) => fontWeight || 400};\n  line-height: ${({ lineHeight }) => lineHeight || '16px'};\n  text-align: left;\n  outline: none;\n\n  ::placeholder {\n    color: ${({ fontColor }) => fontColor || \"#AABBCC\"};\n  }\n`;\n\ninterface InputProps {\n  type?: string;\n  placeholder?: string;\n  width?: string;\n  height?: string;\n  borderColor?: string;\n  backgroundColor?: string;\n  fontColor?: string;\n  fontSize?: string;\n  value?: string;\n  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;\n  label: string; // To display label for each input block\n}\n\nconst MultiFunctionInputComponent = ({\n  label,\n  type,\n  placeholder,\n  width,\n  height,\n  borderColor,\n  backgroundColor,\n  fontColor,\n  fontSize,\n  value,\n  onChange,\n}: InputProps) => {\n  const [blockText, setBlockContent] = useState(false); // For showing the placeholder at top\n  const inputRef = useRef<HTMLInputElement>(null);\n\n\n  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    setBlockContent(true);\n    let inputValue = e.target.value;\n\n    if (type === \"phone\" && inputValue.length > 10) {\n      inputValue = inputValue.slice(0, 10); // Limiting phone number to 10 digits\n    }\n\n    setBlockContent(inputValue.length > 0); // Show label at top when user starts typing\n    onChange(e); // Pass the input value back to the parent component\n  };\n\n  return (\n    <InputContainer\n      \n      width={width}\n    >\n      <WrittenTextAfterInput show={blockText}>\n        {label} \n      </WrittenTextAfterInput>\n      <InputBlock\n        ref={inputRef}\n        type={type === \"phone\" ? \"tel\" : type} // Use 'tel' for phone input\n        placeholder={placeholder || label}\n        width={width}\n        height={height}\n        borderColor={borderColor}\n        backgroundColor={backgroundColor}\n        fontColor={fontColor}\n        fontSize={fontSize}\n        value={value}\n        onChange={handleInputChange}\n      />\n    </InputContainer>\n  );\n};\n\nexport default MultiFunctionInputComponent;"],"names":["Container","styled","div","_templateObject","_taggedTemplateLiteralLoose","Button","button","_templateObject2","_ref","size","padding","_ref2","gap","_ref3","border","_ref4","borderRadius","_ref5","background","ButtonText","span","_templateObject3","_ref6","fontFamily","_ref7","fontSize","_ref8","fontWeight","_ref9","lineHeight","_ref10","color","ButtonComponent","_ref11","onClick","text","svg","React","InputContainer","width","height","backgroundColor","WrittenTextAfterInput","p","show","InputBlock","input","borderColor","_ref12","fontColor","_ref13","_ref14","_ref15","_ref16","_ref17","MultiFunctionInputComponent","_ref18","label","type","placeholder","value","onChange","_useState","useState","blockText","setBlockContent","inputRef","useRef","handleInputChange","e","inputValue","target","length","slice","ref"],"mappings":"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"}

package/dist/index.modern.js

@@ -7,70 +7,60 @@ function _taggedTemplateLiteralLoose(e, t) {
 
 var _templateObject, _templateObject2, _templateObject3;
 var Container = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose([""])));
-var Button = styled.button(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  width: ", ";\n  height: ", ";\n  padding: ", ";\n  box-sizing : border-box;\n  gap: ", ";\n  border: ", ";\n  border-radius: ", ";\n  outline : none;\n  background: ", ";              \n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n  opacity : 0.8;\n\n  &:hover{\n    opacity : 1;\n    // border: ", ";\n  }\n\n  &:focus {\n    outline: none;\n    // border : none;\n  }\n"])), function (_ref) {
-  var width = _ref.width;
-  return width || "max-content";
+var Button = styled.button(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  width: max-content;\n  padding: ", ";\n  box-sizing : border-box;\n  gap: ", ";\n  border: ", ";\n  border-radius: ", ";\n  outline : none;\n  background: ", ";              \n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n  opacity : 0.8;\n\n  &:hover{\n    opacity : 1;\n  }\n\n  &:focus {\n    outline: none;\n  }\n"])), function (_ref) {
+  var size = _ref.size,
+    padding = _ref.padding;
+  return size === 'Small' ? '5px' : size === 'Regular' ? '10px 16px' : size === 'Large' ? '15px 20px' : size === 'CustomUsingPadding' ? padding : '10px 16px';
 }, function (_ref2) {
-  var height = _ref2.height;
-  return height || "42px";
+  var gap = _ref2.gap;
+  return gap || '10px';
 }, function (_ref3) {
-  var padding = _ref3.padding;
-  return padding || '10px 16px';
+  var border = _ref3.border;
+  return border || 'none';
 }, function (_ref4) {
-  var gap = _ref4.gap;
-  return gap || '10px';
+  var borderRadius = _ref4.borderRadius;
+  return borderRadius || '5px';
 }, function (_ref5) {
-  var border = _ref5.border;
-  return border || 'none';
-}, function (_ref6) {
-  var borderRadius = _ref6.borderRadius;
-  return borderRadius || '1000px';
-}, function (_ref7) {
-  var background = _ref7.background;
+  var background = _ref5.background;
   return background || " #4c9eeb;";
-}, function (_ref8) {
-  var border = _ref8.border;
-  return border || 'none';
 });
-var ButtonText = styled.p(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  color:  ", ";\n  white-space : nowrap;\n"])), function (_ref9) {
-  var fontFamily = _ref9.fontFamily;
-  return fontFamily || 'Noto Sans';
-}, function (_ref10) {
-  var fontSize = _ref10.fontSize;
+var ButtonText = styled.span(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  font-family: ", ";\n  margin: 0px;\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  color:  ", ";\n  white-space : nowrap;\n"])), function (_ref6) {
+  var fontFamily = _ref6.fontFamily;
+  return fontFamily || 'sans-serif';
+}, function (_ref7) {
+  var fontSize = _ref7.fontSize;
   return fontSize || '18px';
-}, function (_ref11) {
-  var fontWeight = _ref11.fontWeight;
+}, function (_ref8) {
+  var fontWeight = _ref8.fontWeight;
   return fontWeight || '500';
-}, function (_ref12) {
-  var lineHeight = _ref12.lineHeight;
+}, function (_ref9) {
+  var lineHeight = _ref9.lineHeight;
   return lineHeight || '18px';
-}, function (_ref13) {
-  var color = _ref13.color;
+}, function (_ref10) {
+  var color = _ref10.color;
   return color || '#ffffff';
 });
-var MultiFunctionButtonComponent = function MultiFunctionButtonComponent(_ref14) {
-  var onClick = _ref14.onClick,
-    text = _ref14.text,
-    width = _ref14.width,
-    height = _ref14.height,
-    background = _ref14.background,
-    color = _ref14.color,
-    border = _ref14.border,
-    borderRadius = _ref14.borderRadius,
-    fontWeight = _ref14.fontWeight,
-    fontSize = _ref14.fontSize,
-    fontFamily = _ref14.fontFamily,
-    lineHeight = _ref14.lineHeight,
-    padding = _ref14.padding,
-    svg = _ref14.svg,
-    gap = _ref14.gap;
+var ButtonComponent = function ButtonComponent(_ref11) {
+  var onClick = _ref11.onClick,
+    text = _ref11.text,
+    size = _ref11.size,
+    background = _ref11.background,
+    color = _ref11.color,
+    border = _ref11.border,
+    borderRadius = _ref11.borderRadius,
+    fontWeight = _ref11.fontWeight,
+    fontSize = _ref11.fontSize,
+    fontFamily = _ref11.fontFamily,
+    lineHeight = _ref11.lineHeight,
+    padding = _ref11.padding,
+    svg = _ref11.svg,
+    gap = _ref11.gap;
   return React.createElement(Container, null, React.createElement(Button, {
     onClick: onClick,
-    width: width,
-    height: height,
     background: background,
     border: border,
     borderRadius: borderRadius,
+    size: size,
     padding: padding,
     gap: gap
   }, svg, React.createElement(ButtonText, {
@@ -181,5 +171,5 @@ var MultiFunctionInputComponent = function MultiFunctionInputComponent(_ref18) {
   }));
 };
 
-export { MultiFunctionButtonComponent as Button, MultiFunctionInputComponent as Input };
+export { ButtonComponent as Button, MultiFunctionInputComponent as Input };
 //# sourceMappingURL=index.modern.js.map

package/dist/index.modern.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.modern.js","sources":["../src/Buttons/Button.tsx","../src/Inputs/Input.tsx"],"sourcesContent":["import React from \"react\";\nimport styled from \"styled-components\";\n\nconst Container = styled.div``;\n\nconst Button = styled.button<{\n  width?: string;\n  height?: string;\n  background?: string;\n  border?: string;\n  borderRadius?: string;\n  padding? : string;\n  gap?: string;\n  \n}>`\n  width: ${({ width }) => width || \"max-content\"};\n  height: ${({ height }) => height || \"42px\"};\n  padding: ${({padding})=> padding || '10px 16px'};\n  box-sizing : border-box;\n  gap: ${({gap}) => gap || '10px'};\n  border: ${( {border} )=> border || 'none'};\n  border-radius: ${( {borderRadius} )=> borderRadius || '1000px'};\n  outline : none;\n  background: ${({ background }) => background || \" #4c9eeb;\"};              \n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n  opacity : 0.8;\n\n  &:hover{\n    opacity : 1;\n    // border: ${( {border} )=> border || 'none'};\n  }\n\n  &:focus {\n    outline: none;\n    // border : none;\n  }\n`;\n\nconst ButtonText = styled.p<{\n  fontFamily?: string;\n  fontSize?: string;\n  fontWeight?: string;\n  lineHeight?: string;\n  color?: string;\n}>`\n  font-family: ${({ fontFamily }) => fontFamily || 'Noto Sans'};\n  font-size: ${( { fontSize } ) => fontSize || '18px'};\n  font-weight: ${ ({ fontWeight }) => fontWeight  || '500' };\n  line-height: ${ ({ lineHeight }) => lineHeight  || '18px' };\n  color:  ${ ({ color }) => color  || '#ffffff' };\n  white-space : nowrap;\n`;\n\ninterface ButtonProps {\n  onClick?: () => void;\n  svg?: React.ReactNode;\n  text: string;\n  width?: string;\n  height? : string;\n  background? : string;\n  color? : string;\n  fontWeight? : string;\n  fontStyle? : string;\n  fontSize? : string;\n  fontFamily? : string;\n  lineHeight? : string;\n  border? : string;\n  borderRadius? : string;\n  padding? : string;\n  gap?: string;\n};\n\nconst MultiFunctionButtonComponent: React.FC<ButtonProps> = ({\n  onClick,\n  text,\n  width,\n  height,\n  background,\n  color,\n  border,\n  borderRadius,\n  fontWeight,\n  fontSize,\n  fontFamily,\n  lineHeight,\n  padding,\n  svg,\n  gap\n}) => {\n  return (\n    <Container>\n      <Button \n        onClick={onClick} \n        width={width} \n        height={height} \n        background={background} \n        border={border} \n        borderRadius={borderRadius} \n        padding={padding}\n        gap={gap}\n      >\n        {svg}\n        <ButtonText \n          color={color} \n          fontFamily={fontFamily} \n          fontSize={fontSize} \n          fontWeight={fontWeight} \n          lineHeight={lineHeight}\n        >\n          {text}\n          </ButtonText>\n      </Button>\n    </Container>\n  );\n};\n\nexport default MultiFunctionButtonComponent;\n","import React, { useRef, useState } from \"react\";\nimport styled from \"styled-components\";\n\nconst InputContainer = styled.div<{\n  width?: string;\n  height?: string;\n  border?: string;\n  backgroundColor?: string;\n  fontColor?: string;\n  fontSize?: string;\n  padding?: string;\n  borderRadius? : string;\n  fontWeight? : string;\n  lineHeight? : string\n  }>`\n  position: relative; \n  width: ${({ width }) => width || \"100%\"};\n  height: ${({ height }) => height || \"54px\"};\n  border-radius: ${({ borderRadius }) => borderRadius || \"4px\"};\n  border: 1px solid ${({ border }) => (border ? 'border' : '#657786')};\n  background: ${({backgroundColor}) => backgroundColor || 'transparent'};\n  display: flex; \n  flex-direction : column;\n  justify-content : center; \n`;\n\n\nconst WrittenTextAfterInput = styled.p<{ show: boolean }>`\n  position: relative; \n  top: 9px;\n  left: 8px;\n  width: auto;\n  height: auto;\n  font-family: Noto Sans;\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 14px;\n  text-align: left;\n  color: #4c9eeb;\n  margin: 2px;\n  visibility: ${({ show }) => (show ? \"visible\" : \"hidden\")};\n`;\n\nconst InputBlock = styled.input<{\n  width?: string;\n  height?: string;\n  borderColor?: string;\n  backgroundColor?: string;\n  fontColor?: string;\n  fontSize?: string;\n  padding?: string;\n  borderRadius? : string;\n  fontWeight? : string;\n  lineHeight? : string\n}>`\n  width: ${({ width }) => width || \"100%\"};\n  height: ${({ height }) => height || \"54px\"};\n  border-radius: ${({ borderRadius }) => borderRadius || \"4px\"};\n  border: 1px solid ${({ borderColor }) => borderColor || \"transparent\"};\n  background: ${({ backgroundColor }) => backgroundColor || \"transparent\"};\n  color: ${({ fontColor }) => fontColor || \"#14171A\"};\n  padding: ${({ padding }) => padding || \"8px\"};\n  box-sizing: border-box;\n  font-family: Noto Sans;\n  font-size: ${({ fontSize }) => fontSize || \"16px\"};\n  font-weight: ${({ fontWeight }) => fontWeight || 400};\n  line-height: ${({ lineHeight }) => lineHeight || '16px'};\n  text-align: left;\n  outline: none;\n\n  ::placeholder {\n    color: ${({ fontColor }) => fontColor || \"#AABBCC\"};\n  }\n`;\n\ninterface InputProps {\n  type?: string;\n  placeholder?: string;\n  width?: string;\n  height?: string;\n  borderColor?: string;\n  backgroundColor?: string;\n  fontColor?: string;\n  fontSize?: string;\n  value?: string;\n  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;\n  label: string; // To display label for each input block\n}\n\nconst MultiFunctionInputComponent = ({\n  label,\n  type,\n  placeholder,\n  width,\n  height,\n  borderColor,\n  backgroundColor,\n  fontColor,\n  fontSize,\n  value,\n  onChange,\n}: InputProps) => {\n  const [blockText, setBlockContent] = useState(false); // For showing the placeholder at top\n  const inputRef = useRef<HTMLInputElement>(null);\n\n\n  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    setBlockContent(true);\n    let inputValue = e.target.value;\n\n    if (type === \"phone\" && inputValue.length > 10) {\n      inputValue = inputValue.slice(0, 10); // Limiting phone number to 10 digits\n    }\n\n    setBlockContent(inputValue.length > 0); // Show label at top when user starts typing\n    onChange(e); // Pass the input value back to the parent component\n  };\n\n  return (\n    <InputContainer\n      \n      width={width}\n    >\n      <WrittenTextAfterInput show={blockText}>\n        {label} \n      </WrittenTextAfterInput>\n      <InputBlock\n        ref={inputRef}\n        type={type === \"phone\" ? \"tel\" : type} // Use 'tel' for phone input\n        placeholder={placeholder || label}\n        width={width}\n        height={height}\n        borderColor={borderColor}\n        backgroundColor={backgroundColor}\n        fontColor={fontColor}\n        fontSize={fontSize}\n        value={value}\n        onChange={handleInputChange}\n      />\n    </InputContainer>\n  );\n};\n\nexport default MultiFunctionInputComponent;"],"names":["Container","styled","div","_templateObject","_taggedTemplateLiteralLoose","Button","button","_templateObject2","_ref","width","_ref2","height","_ref3","padding","_ref4","gap","_ref5","border","_ref6","borderRadius","_ref7","background","_ref8","ButtonText","p","_templateObject3","_ref9","fontFamily","_ref10","fontSize","_ref11","fontWeight","_ref12","lineHeight","_ref13","color","MultiFunctionButtonComponent","_ref14","onClick","text","svg","React","InputContainer","backgroundColor","WrittenTextAfterInput","show","InputBlock","input","borderColor","fontColor","_ref15","_ref16","_ref17","MultiFunctionInputComponent","_ref18","label","type","placeholder","value","onChange","_useState","useState","blockText","setBlockContent","inputRef","useRef","handleInputChange","e","inputValue","target","length","slice","ref"],"mappings":"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"}
+{"version":3,"file":"index.modern.js","sources":["../src/Buttons/Button.tsx","../src/Inputs/Input.tsx"],"sourcesContent":["import React from \"react\";\nimport styled from \"styled-components\";\n\nconst Container = styled.div``;\n\nconst Button = styled.button<{\n  background?: string;\n  border?: string;\n  borderRadius?: string;\n  size?: string;\n  padding? : string;\n  gap?: string;\n  \n}>`\n  width: max-content;\n  padding: ${({size, padding})=> size === 'Small' ? '5px' : size === 'Regular' ? '10px 16px' : size === 'Large' ? '15px 20px' : size === 'CustomUsingPadding' ? padding : '10px 16px'};\n  box-sizing : border-box;\n  gap: ${({gap}) => gap || '10px'};\n  border: ${( {border} )=> border || 'none'};\n  border-radius: ${( {borderRadius} )=> borderRadius || '5px'};\n  outline : none;\n  background: ${({ background }) => background || \" #4c9eeb;\"};              \n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n  opacity : 0.8;\n\n  &:hover{\n    opacity : 1;\n  }\n\n  &:focus {\n    outline: none;\n  }\n`;\n\nconst ButtonText = styled.span<{\n  fontFamily?: string;\n  fontSize?: string;\n  fontWeight?: string;\n  lineHeight?: string;\n  color?: string;\n}>`\n  font-family: ${({ fontFamily }) => fontFamily || 'sans-serif'};\n  margin: 0px;\n  font-size: ${( { fontSize } ) => fontSize || '18px'};\n  font-weight: ${ ({ fontWeight }) => fontWeight  || '500' };\n  line-height: ${ ({ lineHeight }) => lineHeight  || '18px' };\n  color:  ${ ({ color }) => color  || '#ffffff' };\n  white-space : nowrap;\n`;\n\ninterface ButtonProps {\n  onClick?: () => void;\n  svg?: React.ReactNode;\n  text: string;\n  size?: 'Small' | 'Regular' | 'Large' | 'CustomUsingPadding';\n  background? : string;\n  color? : string;\n  fontWeight? : string;\n  fontStyle? : string;\n  fontSize? : string;\n  fontFamily? : string;\n  lineHeight? : string;\n  border? : string;\n  borderRadius? : string;\n  padding? : string;\n  gap?: string;\n};\n\nconst ButtonComponent: React.FC<ButtonProps> = ({\n  onClick,\n  text,\n  size,\n  background,\n  color,\n  border,\n  borderRadius,\n  fontWeight,\n  fontSize,\n  fontFamily,\n  lineHeight,\n  padding,\n  svg,\n  gap\n}) => {\n  return (\n    <Container>\n      <Button \n        onClick={onClick} \n        background={background} \n        border={border} \n        borderRadius={borderRadius} \n        size={size}\n        padding={padding}\n        gap={gap}\n      >\n        {svg}\n        <ButtonText \n          color={color} \n          fontFamily={fontFamily} \n          fontSize={fontSize} \n          fontWeight={fontWeight} \n          lineHeight={lineHeight}\n        >\n          {text}\n          </ButtonText>\n      </Button>\n    </Container>\n  );\n};\n\nexport default ButtonComponent;\n","import React, { useRef, useState } from \"react\";\nimport styled from \"styled-components\";\n\nconst InputContainer = styled.div<{\n  width?: string;\n  height?: string;\n  border?: string;\n  backgroundColor?: string;\n  fontColor?: string;\n  fontSize?: string;\n  padding?: string;\n  borderRadius? : string;\n  fontWeight? : string;\n  lineHeight? : string\n  }>`\n  position: relative; \n  width: ${({ width }) => width || \"100%\"};\n  height: ${({ height }) => height || \"54px\"};\n  border-radius: ${({ borderRadius }) => borderRadius || \"4px\"};\n  border: 1px solid ${({ border }) => (border ? 'border' : '#657786')};\n  background: ${({backgroundColor}) => backgroundColor || 'transparent'};\n  display: flex; \n  flex-direction : column;\n  justify-content : center; \n`;\n\n\nconst WrittenTextAfterInput = styled.p<{ show: boolean }>`\n  position: relative; \n  top: 9px;\n  left: 8px;\n  width: auto;\n  height: auto;\n  font-family: Noto Sans;\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 14px;\n  text-align: left;\n  color: #4c9eeb;\n  margin: 2px;\n  visibility: ${({ show }) => (show ? \"visible\" : \"hidden\")};\n`;\n\nconst InputBlock = styled.input<{\n  width?: string;\n  height?: string;\n  borderColor?: string;\n  backgroundColor?: string;\n  fontColor?: string;\n  fontSize?: string;\n  padding?: string;\n  borderRadius? : string;\n  fontWeight? : string;\n  lineHeight? : string\n}>`\n  width: ${({ width }) => width || \"100%\"};\n  height: ${({ height }) => height || \"54px\"};\n  border-radius: ${({ borderRadius }) => borderRadius || \"4px\"};\n  border: 1px solid ${({ borderColor }) => borderColor || \"transparent\"};\n  background: ${({ backgroundColor }) => backgroundColor || \"transparent\"};\n  color: ${({ fontColor }) => fontColor || \"#14171A\"};\n  padding: ${({ padding }) => padding || \"8px\"};\n  box-sizing: border-box;\n  font-family: Noto Sans;\n  font-size: ${({ fontSize }) => fontSize || \"16px\"};\n  font-weight: ${({ fontWeight }) => fontWeight || 400};\n  line-height: ${({ lineHeight }) => lineHeight || '16px'};\n  text-align: left;\n  outline: none;\n\n  ::placeholder {\n    color: ${({ fontColor }) => fontColor || \"#AABBCC\"};\n  }\n`;\n\ninterface InputProps {\n  type?: string;\n  placeholder?: string;\n  width?: string;\n  height?: string;\n  borderColor?: string;\n  backgroundColor?: string;\n  fontColor?: string;\n  fontSize?: string;\n  value?: string;\n  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;\n  label: string; // To display label for each input block\n}\n\nconst MultiFunctionInputComponent = ({\n  label,\n  type,\n  placeholder,\n  width,\n  height,\n  borderColor,\n  backgroundColor,\n  fontColor,\n  fontSize,\n  value,\n  onChange,\n}: InputProps) => {\n  const [blockText, setBlockContent] = useState(false); // For showing the placeholder at top\n  const inputRef = useRef<HTMLInputElement>(null);\n\n\n  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    setBlockContent(true);\n    let inputValue = e.target.value;\n\n    if (type === \"phone\" && inputValue.length > 10) {\n      inputValue = inputValue.slice(0, 10); // Limiting phone number to 10 digits\n    }\n\n    setBlockContent(inputValue.length > 0); // Show label at top when user starts typing\n    onChange(e); // Pass the input value back to the parent component\n  };\n\n  return (\n    <InputContainer\n      \n      width={width}\n    >\n      <WrittenTextAfterInput show={blockText}>\n        {label} \n      </WrittenTextAfterInput>\n      <InputBlock\n        ref={inputRef}\n        type={type === \"phone\" ? \"tel\" : type} // Use 'tel' for phone input\n        placeholder={placeholder || label}\n        width={width}\n        height={height}\n        borderColor={borderColor}\n        backgroundColor={backgroundColor}\n        fontColor={fontColor}\n        fontSize={fontSize}\n        value={value}\n        onChange={handleInputChange}\n      />\n    </InputContainer>\n  );\n};\n\nexport default MultiFunctionInputComponent;"],"names":["Container","styled","div","_templateObject","_taggedTemplateLiteralLoose","Button","button","_templateObject2","_ref","size","padding","_ref2","gap","_ref3","border","_ref4","borderRadius","_ref5","background","ButtonText","span","_templateObject3","_ref6","fontFamily","_ref7","fontSize","_ref8","fontWeight","_ref9","lineHeight","_ref10","color","ButtonComponent","_ref11","onClick","text","svg","React","InputContainer","width","height","backgroundColor","WrittenTextAfterInput","p","show","InputBlock","input","borderColor","_ref12","fontColor","_ref13","_ref14","_ref15","_ref16","_ref17","MultiFunctionInputComponent","_ref18","label","type","placeholder","value","onChange","_useState","useState","blockText","setBlockContent","inputRef","useRef","handleInputChange","e","inputValue","target","length","slice","ref"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "labsense-ui-kit",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "labSense UI Components",
   "author": "SNet Labs Pvt. Ltd.",
   "license": "MIT",
@@ -16,7 +16,7 @@
   },
   "scripts": {
     "build": "microbundle-crl --no-compress --format modern,cjs",
-    "start": "microbundle-crl watch --no-compress --format modern,cjs",
+    "dev": "microbundle-crl watch --no-compress --format modern,cjs",
     "prepublishOnly": "run-s build",
     "test": "run-s test:unit test:lint test:build",
     "test:build": "run-s build",
@@ -38,8 +38,14 @@
     "styled-components": "^5.3.5"
   },
   "devDependencies": {
+    "@babel/plugin-proposal-unicode-property-regex": "^7.18.6",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-nullish-coalescing-operator": "^7.26.6",
+    "@babel/plugin-transform-numeric-separator": "^7.25.9",
+    "@babel/plugin-transform-private-methods": "^7.25.9",
+    "@babel/plugin-transform-unicode-property-regex": "^7.25.9",
     "@svgr/cli": "^6.5.1",
-    "@types/jest": "^28.1.8",
+    "@types/jest": "^29.5.14",
     "@types/lodash.debounce": "^4.0.9",
     "@types/lodash.defaultsdeep": "^4.6.9",
     "@types/lodash.isequal": "^4.5.8",
@@ -55,22 +61,25 @@
     "eslint-config-standard-react": "^11.0.1",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-promise": "^6.6.0",
+    "eslint-plugin-promise": "^7.2.1",
     "eslint-plugin-react": "^7.37.4",
-    "eslint-plugin-react-hooks": "^4.6.2",
-    "eslint-plugin-standard": "^4.1.0",
+    "eslint-plugin-react-hooks": "^5.1.0",
+    "eslint-plugin-standard": "^5.0.0",
     "gh-pages": "^5.0.0",
     "microbundle-crl": "^0.13.11",
     "npm-run-all": "^4.1.5",
-    "react-scripts": "^5.0.1"
+    "react-scripts": "^5.0.1",
+    "svgo": "^2.8.0",
+    "vite": "^6.0.5",
+    "vite-plugin-svgr": "^4.3.0"
   },
   "dependencies": {
     "@types/react-dom": "^17.0.26",
     "date-fns": "^2.30.0",
+    "glob": "^9.3.5",
     "immutability-helper": "^3.1.1",
     "lodash.debounce": "^4.0.8",
-    "lodash.defaultsdeep": "^4.6.1",
-    "lodash.isequal": "^4.5.0"
+    "lodash.defaultsdeep": "^4.6.1"
   },
   "files": [
     "dist"