react-asc 25.3.0 → 25.4.0

package/components/Tooltip/Tooltip.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
+import { TooltipPlacement } from './tooltip.enums';
 export interface ITooltipProps extends React.ComponentProps<'div'> {
-    placement?: 'top' | 'bottom' | 'right' | 'left';
+    placement?: TooltipPlacement;
     text?: string;
     delay?: number;
     isOpen?: boolean;

package/components/Tooltip/tooltip.enums.d.ts

@@ -0,0 +1,6 @@
+export declare enum TooltipPlacement {
+    top = "top",
+    bottom = "bottom",
+    right = "right",
+    left = "left"
+}

package/index.es.js

@@ -269,7 +269,7 @@ function useMobileDetect() {
     useEffect(() => {
         windowSize && checkIsMobile(windowSize.height, windowSize.width);
     }, [windowSize]);
-    return { isMobile };
+    return { isMobile: isMobile };
 }
 
 const useOnDestroy = (callBack) => {
@@ -1117,11 +1117,11 @@ const FormInput = (props) => {
     };
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const handleOnInput = (value, type, name) => {
-        onInput && onInput({ value, type, name });
+        onInput && onInput({ value: value, type: type, name: name });
     };
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const handleOnChange = (value, type, name) => {
-        onChange && onChange({ value, type, name });
+        onChange && onChange({ value: value, type: type, name: name });
     };
     return (React.createElement(React.Fragment, null,
         (type === 'text' ||
@@ -1547,10 +1547,11 @@ styleInject(css_248z$x);
 
 const MenuBody = (props) => {
     const { parentRef, children, className, shadow = true, menuPosition = 'left', onClickBackdrop } = props;
+    const [popperInstance, setPopperInstance] = useState();
     const menuBodyRef = useRef(null);
     useEffect(() => {
         if (menuBodyRef && parentRef.current && menuBodyRef.current) {
-            createPopper(parentRef.current, menuBodyRef.current, {
+            const popperInstance = createPopper(parentRef.current, menuBodyRef.current, {
                 placement: `${menuPosition}-start`,
                 modifiers: [
                     {
@@ -1570,6 +1571,10 @@ const MenuBody = (props) => {
                     },
                 ]
             });
+            setPopperInstance(popperInstance);
+        }
+        else {
+            popperInstance?.destroy();
         }
     }, [menuBodyRef]);
     const getCssClasses = () => {
@@ -1582,6 +1587,9 @@ const MenuBody = (props) => {
     const handleClickBackdrop = () => {
         onClickBackdrop && onClickBackdrop();
     };
+    useOnDestroy(() => {
+        popperInstance?.destroy();
+    });
     return (React.createElement(Portal, { className: 'menu-root' },
         React.createElement("div", { ref: menuBodyRef, className: getCssClasses() },
             React.createElement(List, null, children)),
@@ -2018,8 +2026,17 @@ var css_248z$l = ".Tooltip-module_tooltipContainer__9ZWx3 {\n  display: inline;\
 var styles$l = {"tooltipContainer":"Tooltip-module_tooltipContainer__9ZWx3","tooltip":"Tooltip-module_tooltip__x5HOu","arrow":"Tooltip-module_arrow__B6lfe"};
 styleInject(css_248z$l);
 
+var TooltipPlacement;
+(function (TooltipPlacement) {
+    TooltipPlacement["top"] = "top";
+    TooltipPlacement["bottom"] = "bottom";
+    TooltipPlacement["right"] = "right";
+    TooltipPlacement["left"] = "left";
+})(TooltipPlacement || (TooltipPlacement = {}));
+
 const Tooltip = (props) => {
-    const { children, text, placement = 'bottom', isOpen = false, isShowClose = false, delay = 0 } = props;
+    const { children, text, placement = TooltipPlacement.bottom, isOpen = false, isShowClose = false, delay = 0 } = props;
+    const [popperInstance, setPopperInstance] = useState();
     const [debounce, setDebounce] = useState(delay);
     const [open, setOpen] = useState(isOpen);
     const [show, setShow] = useState(isOpen);
@@ -2038,17 +2055,27 @@ const Tooltip = (props) => {
     }, [delay]);
     useEffect(() => {
         if (open === true && refChild && refChild.current && refTooltip && refTooltip.current) {
-            createPopper(refChild.current, refTooltip.current, {
-                placement: placement,
-                modifiers: [
-                    {
-                        name: 'offset',
-                        options: { offset: [0, 8] }
-                    },
-                ]
-            });
+            showTooltip();
+        }
+        else {
+            hideTooltip();
         }
     }, [open]);
+    const showTooltip = () => {
+        const popperInstance = createPopper(refChild.current, refTooltip.current, {
+            placement: placement,
+            modifiers: [
+                {
+                    name: 'offset',
+                    options: { offset: [0, 8] }
+                },
+            ]
+        });
+        setPopperInstance(popperInstance);
+    };
+    const hideTooltip = () => {
+        popperInstance?.destroy();
+    };
     const handleMouseOver = () => {
         setShow(true);
     };
@@ -2064,6 +2091,9 @@ const Tooltip = (props) => {
     const handleClickClose = () => {
         setShow(false);
     };
+    useOnDestroy(() => {
+        hideTooltip();
+    });
     return (React.createElement(React.Fragment, null,
         React.createElement("div", { ref: refChild, className: styles$l.tooltipContainer, onMouseOver: handleMouseOver, onMouseLeave: handleMouseLeave, onFocus: handleFocus, onBlur: handleBlur }, children),
         open && text &&
@@ -2520,7 +2550,7 @@ const Step = (props) => {
     const [hoverRef, isHovered] = useHover();
     const handleClick = (event) => {
         if (!isDisabled) {
-            onClick && onClick({ event, value });
+            onClick && onClick({ event: event, value: value });
         }
     };
     const getCssClasses = () => {
@@ -2697,9 +2727,9 @@ const Tabs = (props) => {
     const [selectedValue, setSelectedValue] = useState('');
     const [selectedIndex, setSelectedIndex] = useState(0);
     const tabContext = ({
-        selectedValue,
-        setSelectedValue,
-        fixed
+        selectedValue: selectedValue,
+        setSelectedValue: setSelectedValue,
+        fixed: fixed
     });
     const prevSelectedValueRef = useRef();
     useEffect(() => {
@@ -2746,7 +2776,7 @@ const Tab = (props) => {
         return cssClasses.filter(css => css).join(' ');
     };
     const handleClick = (event) => {
-        onClick && onClick({ event, value });
+        onClick && onClick({ event: event, value: value });
         setSelectedValue && setSelectedValue(value);
     };
     return (React.createElement(Button, { className: getCssClasses(), onClick: handleClick, isActive: selectedValue === value, disabled: disabled }, label));

package/index.js

@@ -278,7 +278,7 @@ function useMobileDetect() {
     React.useEffect(() => {
         windowSize && checkIsMobile(windowSize.height, windowSize.width);
     }, [windowSize]);
-    return { isMobile };
+    return { isMobile: isMobile };
 }
 
 const useOnDestroy = (callBack) => {
@@ -1126,11 +1126,11 @@ const FormInput = (props) => {
     };
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const handleOnInput = (value, type, name) => {
-        onInput && onInput({ value, type, name });
+        onInput && onInput({ value: value, type: type, name: name });
     };
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const handleOnChange = (value, type, name) => {
-        onChange && onChange({ value, type, name });
+        onChange && onChange({ value: value, type: type, name: name });
     };
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
         (type === 'text' ||
@@ -1556,10 +1556,11 @@ styleInject(css_248z$x);
 
 const MenuBody = (props) => {
     const { parentRef, children, className, shadow = true, menuPosition = 'left', onClickBackdrop } = props;
+    const [popperInstance, setPopperInstance] = React.useState();
     const menuBodyRef = React.useRef(null);
     React.useEffect(() => {
         if (menuBodyRef && parentRef.current && menuBodyRef.current) {
-            core.createPopper(parentRef.current, menuBodyRef.current, {
+            const popperInstance = core.createPopper(parentRef.current, menuBodyRef.current, {
                 placement: `${menuPosition}-start`,
                 modifiers: [
                     {
@@ -1579,6 +1580,10 @@ const MenuBody = (props) => {
                     },
                 ]
             });
+            setPopperInstance(popperInstance);
+        }
+        else {
+            popperInstance?.destroy();
         }
     }, [menuBodyRef]);
     const getCssClasses = () => {
@@ -1591,6 +1596,9 @@ const MenuBody = (props) => {
     const handleClickBackdrop = () => {
         onClickBackdrop && onClickBackdrop();
     };
+    useOnDestroy(() => {
+        popperInstance?.destroy();
+    });
     return (React__default["default"].createElement(Portal, { className: 'menu-root' },
         React__default["default"].createElement("div", { ref: menuBodyRef, className: getCssClasses() },
             React__default["default"].createElement(List, null, children)),
@@ -2027,8 +2035,17 @@ var css_248z$l = ".Tooltip-module_tooltipContainer__9ZWx3 {\n  display: inline;\
 var styles$l = {"tooltipContainer":"Tooltip-module_tooltipContainer__9ZWx3","tooltip":"Tooltip-module_tooltip__x5HOu","arrow":"Tooltip-module_arrow__B6lfe"};
 styleInject(css_248z$l);
 
+var TooltipPlacement;
+(function (TooltipPlacement) {
+    TooltipPlacement["top"] = "top";
+    TooltipPlacement["bottom"] = "bottom";
+    TooltipPlacement["right"] = "right";
+    TooltipPlacement["left"] = "left";
+})(TooltipPlacement || (TooltipPlacement = {}));
+
 const Tooltip = (props) => {
-    const { children, text, placement = 'bottom', isOpen = false, isShowClose = false, delay = 0 } = props;
+    const { children, text, placement = TooltipPlacement.bottom, isOpen = false, isShowClose = false, delay = 0 } = props;
+    const [popperInstance, setPopperInstance] = React.useState();
     const [debounce, setDebounce] = React.useState(delay);
     const [open, setOpen] = React.useState(isOpen);
     const [show, setShow] = React.useState(isOpen);
@@ -2047,17 +2064,27 @@ const Tooltip = (props) => {
     }, [delay]);
     React.useEffect(() => {
         if (open === true && refChild && refChild.current && refTooltip && refTooltip.current) {
-            core.createPopper(refChild.current, refTooltip.current, {
-                placement: placement,
-                modifiers: [
-                    {
-                        name: 'offset',
-                        options: { offset: [0, 8] }
-                    },
-                ]
-            });
+            showTooltip();
+        }
+        else {
+            hideTooltip();
         }
     }, [open]);
+    const showTooltip = () => {
+        const popperInstance = core.createPopper(refChild.current, refTooltip.current, {
+            placement: placement,
+            modifiers: [
+                {
+                    name: 'offset',
+                    options: { offset: [0, 8] }
+                },
+            ]
+        });
+        setPopperInstance(popperInstance);
+    };
+    const hideTooltip = () => {
+        popperInstance?.destroy();
+    };
     const handleMouseOver = () => {
         setShow(true);
     };
@@ -2073,6 +2100,9 @@ const Tooltip = (props) => {
     const handleClickClose = () => {
         setShow(false);
     };
+    useOnDestroy(() => {
+        hideTooltip();
+    });
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
         React__default["default"].createElement("div", { ref: refChild, className: styles$l.tooltipContainer, onMouseOver: handleMouseOver, onMouseLeave: handleMouseLeave, onFocus: handleFocus, onBlur: handleBlur }, children),
         open && text &&
@@ -2529,7 +2559,7 @@ const Step = (props) => {
     const [hoverRef, isHovered] = useHover();
     const handleClick = (event) => {
         if (!isDisabled) {
-            onClick && onClick({ event, value });
+            onClick && onClick({ event: event, value: value });
         }
     };
     const getCssClasses = () => {
@@ -2706,9 +2736,9 @@ const Tabs = (props) => {
     const [selectedValue, setSelectedValue] = React.useState('');
     const [selectedIndex, setSelectedIndex] = React.useState(0);
     const tabContext = ({
-        selectedValue,
-        setSelectedValue,
-        fixed
+        selectedValue: selectedValue,
+        setSelectedValue: setSelectedValue,
+        fixed: fixed
     });
     const prevSelectedValueRef = React.useRef();
     React.useEffect(() => {
@@ -2755,7 +2785,7 @@ const Tab = (props) => {
         return cssClasses.filter(css => css).join(' ');
     };
     const handleClick = (event) => {
-        onClick && onClick({ event, value });
+        onClick && onClick({ event: event, value: value });
         setSelectedValue && setSelectedValue(value);
     };
     return (React__default["default"].createElement(Button, { className: getCssClasses(), onClick: handleClick, isActive: selectedValue === value, disabled: disabled }, label));

package/package.json

@@ -1,28 +1,28 @@
-{
-	"name": "react-asc",
-	"version": "25.3.0",
-	"description": "handcrafted react components",
-	"main": "index.js",
-	"module": "index.es.js",
-	"jsnext:main": "index.es.js",
-	"author": "Ardian Shala",
-	"homepage": "https://react-asc.netlify.app",
-	"license": "MIT",
-	"dependencies": {
-		"@popperjs/core": "2.11.5",
-		"react": "18.2.0",
-		"react-dom": "18.2.0",
-		"modern-normalize": "1.1.0"
-	},
-	"scripts": {
-		"pub": "npm publish --access public"
-	},
-	"keywords": [
-		"react",
-		"component library",
-		"ui library",
-		"components",
-		"library",
-		"material"
-	]
-}
+{
+	"name": "react-asc",
+	"version": "25.4.0",
+	"description": "handcrafted react components",
+	"main": "index.js",
+	"module": "index.es.js",
+	"jsnext:main": "index.es.js",
+	"author": "Ardian Shala",
+	"homepage": "https://react-asc.netlify.app",
+	"license": "MIT",
+	"dependencies": {
+		"@popperjs/core": "2.11.5",
+		"react": "18.2.0",
+		"react-dom": "18.2.0",
+		"modern-normalize": "1.1.0"
+	},
+	"scripts": {
+		"pub": "npm publish --access public"
+	},
+	"keywords": [
+		"react",
+		"component library",
+		"ui library",
+		"components",
+		"library",
+		"material"
+	]
+}

package/react-asc.scss

@@ -1,354 +1,354 @@
-:root {
-	--breakpoint-xs: 0;
-	--breakpoint-sm: 576px;
-	--breakpoint-md: 768px;
-	--breakpoint-lg: 992px;
-	--breakpoint-xl: 1200px;
-	--breakpoint-xxl: 1400px;
-}
-
-:root {
-	--buttonMinWidth: 62px;
-	--buttonPadding: 11px 15px;
-}
-
-:root {
-	--primary-light: #6573c3;
-	--primary: #3f51b5;
-	--primary-dark: #2c387e;
-	--primary-contrast-text: #fff;
-	--primary-highlight: #d6dbf7;
-
-	--secondary-light: #e5e7eb;
-	--secondary: #8f8f8f;
-	--secondary-dark: #9c9da1;
-	--secondary-contrast-text: #fff;
-	--secondary-highlight: rgb(233, 233, 233);
-
-	--accent-light: #fd96b8;
-	--accent: #ff4081;
-	--accent-dark: #fd2c72;
-	--accent-contrast-text: #fff;
-	--accent-highlight: #fca9c5;
-
-	// rename!?
-	--light-light: #ffffff;
-	--light: #f8f9fa;
-	--light-dark: #ebebeb;
-	--light-contrast-text: #212529;
-	--light-highlight: #f8f9fa;
-
-	--dark-light: #616468;
-	--dark: #343a40;
-	--dark-dark: #343a40;
-	--dark-contrast-text: #fff;
-	--dark-highlight: #5e6164;
-
-	--white: #fff;
-
-	--bodyBg: white;
-	--bodyColor: #212529;
-
-	--highlight: rgba(204, 216, 224, 0.2); // ???
-
-	--shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14),
-	0px 1px 5px 0px rgba(0, 0, 0, 0.12);
-
-	--shadowColor: rgba(0, 0, 0, 0.12);
-
-	--muted: #6c757d !important;
-}
-
-:root {
-	--fontFamily: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans",
-		sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-	--fontSize: 16px;
-	--fontWeight: 400;
-
-	--fontLineHeight: 1.5;
-
-	--textBody1FontSize: 13px;
-	--textBody1LineHeight: 18px;
-
-	--textBody2FontSize: 13px;
-	--textBody2LineHeight: 18px;
-
-	--textOverlineFontSize: 13px;
-	--textOverlineLineHeight: 18px;
-	--textOverlineTransform: uppercase;
-}
-
-:root {
-	.ml-0 {
-		margin-left: var(--0);
-	}
-
-	.ml-1 {
-		margin-left: var(--1);
-	}
-
-	.ml-2 {
-		margin-left: var(--2);
-	}
-
-	.ml-3 {
-		margin-left: var(--3);
-	}
-
-	.ml-auto {
-		margin-left: var(--auto);
-	}
-
-	.mr-0 {
-		margin-right: var(--0);
-	}
-
-	.mr-1 {
-		margin-right: var(--1);
-	}
-
-	.mr-2 {
-		margin-right: var(--2);
-	}
-
-	.mr-3 {
-		margin-right: var(--3);
-	}
-
-	.mr-auto {
-		margin-right: var(--auto);
-	}
-
-	.mt-0 {
-		margin-top: var(--0);
-	}
-
-	.mt-1 {
-		margin-top: var(--1);
-	}
-
-	.mt-2 {
-		margin-top: var(--2);
-	}
-
-	.mt-3 {
-		margin-top: var(--3);
-	}
-
-	.mt-4 {
-		margin-top: var(--4);
-	}
-
-	.mb-0 {
-		margin-bottom: var(--0);
-	}
-
-	.mb-1 {
-		margin-bottom: var(--1);
-	}
-
-	.mb-2 {
-		margin-bottom: var(--2);
-	}
-
-	.mb-3 {
-		margin-bottom: var(--3);
-	}
-}
-
-:root {
-	.pt-1 {
-		padding-top: var(--1);
-	}
-
-	.pt-2 {
-		padding-top: var(--2);
-	}
-
-	.pt-3 {
-		padding-top: var(--3);
-	}
-
-	.pb-1 {
-		padding-bottom: var(--1);
-	}
-
-	.pb-2 {
-		padding-bottom: var(--2);
-	}
-
-	.pb-3 {
-		padding-bottom: var(--3);
-	}
-
-	.pb-4 {
-		padding-bottom: var(--4);
-	}
-
-	.p-3 {
-		padding: var(--3);
-	}
-
-	.p-1 {
-		padding: var(--1);
-	}
-
-	.p-2 {
-		padding: var(--2);
-	}
-
-	.p-3 {
-		padding: var(--3);
-	}
-
-	.p-4 {
-		padding: var(--3);
-	}
-
-	.pt-0 {
-		padding-top: var(--0);
-	}
-
-	.pb-0 {
-		padding-bottom: var(--0);
-	}
-}
-
-:root {
-	--borderRadius: 5px;
-	--0: 0px !important;
-	--1: 15px !important;
-	--2: 25px !important;
-	--3: 35px !important;
-	--4: 45px !important;
-	--auto: auto !important;
-}
-
-.input-group-append {
-	.btn {
-		min-width: auto;
-
-		.svg-icon {
-			margin-left: 0;
-			margin-right: 0;
-		}
-	}
-}
-
-.text-muted {
-	color: var(--muted);
-}
-
-.flex-1 {
-	flex: 1;
-}
-
-.d-flex {
-	display: flex !important;
-}
-
-.justify-content-center {
-	justify-content: center !important;
-}
-
-.align-items-center {
-	align-items: center !important;
-}
-
-.flex-wrap {
-	flex-wrap: wrap;
-}
-
-.flex-row {
-	flex-direction: row;
-}
-
-.flex-row-reverse {
-	flex-direction: row-reverse;
-}
-
-.flex-column {
-	flex-direction: column;
-}
-
-.flex-column-reverse {
-	flex-direction: column-reverse;
-}
-
-.w-100 {
-	width: 100%;
-}
-
-.h-100 {
-	height: 100%;
-}
-
-.text-center {
-	text-align: center;
-}
-
-.text-uppercase {
-	text-transform: uppercase;
-}
-
-.rounded-pill {
-	border-radius: 50rem !important;
-}
-
-.fw-bold {
-    font-weight: 700!important;
-}
-
-@media (max-width: 576px) {
-	.flex-row {
-		flex-direction: column !important;
-	}
-}
-@media (min-width: 768px) {
-	.justify-content-md-center {
-		justify-content: center !important;
-	}
-	.align-items-md-center {
-		align-items: center !important;
-	}
-}
-
-.modal-open {
-	overflow: hidden !important;
-}
-
-
-* {
-	min-width: 0;
-	min-height: 0;
-}
-
-label.required {
-	&::after {
-		display: inline-block;
-		line-height: 0.8;
-		content: "*";
-		vertical-align: text-top;
-	}
-}
-
-.overline {
-	font-size: var(--textOverlineFontSize) !important;
-	line-height: var(--textOverlineLineHeight) !important;
-	text-transform: var(--textOverlineTransform) !important;
-	font-weight: bold;
-}
-
-.body1 {
-	font-size: var(--textBody1FontSize) !important;
-	line-height: var(--textBody1LineHeight) !important;
-}
-
-.body2 {
-	font-size: var(--textBody2FontSize) !important;
-	line-height: var(--textBody2LineHeight) !important;
-}
-
-.uppercase {
-	text-transform: uppercase !important;
-}
+:root {
+	--breakpoint-xs: 0;
+	--breakpoint-sm: 576px;
+	--breakpoint-md: 768px;
+	--breakpoint-lg: 992px;
+	--breakpoint-xl: 1200px;
+	--breakpoint-xxl: 1400px;
+}
+
+:root {
+	--buttonMinWidth: 62px;
+	--buttonPadding: 11px 15px;
+}
+
+:root {
+	--primary-light: #6573c3;
+	--primary: #3f51b5;
+	--primary-dark: #2c387e;
+	--primary-contrast-text: #fff;
+	--primary-highlight: #d6dbf7;
+
+	--secondary-light: #e5e7eb;
+	--secondary: #8f8f8f;
+	--secondary-dark: #9c9da1;
+	--secondary-contrast-text: #fff;
+	--secondary-highlight: rgb(233, 233, 233);
+
+	--accent-light: #fd96b8;
+	--accent: #ff4081;
+	--accent-dark: #fd2c72;
+	--accent-contrast-text: #fff;
+	--accent-highlight: #fca9c5;
+
+	// rename!?
+	--light-light: #ffffff;
+	--light: #f8f9fa;
+	--light-dark: #ebebeb;
+	--light-contrast-text: #212529;
+	--light-highlight: #f8f9fa;
+
+	--dark-light: #616468;
+	--dark: #343a40;
+	--dark-dark: #343a40;
+	--dark-contrast-text: #fff;
+	--dark-highlight: #5e6164;
+
+	--white: #fff;
+
+	--bodyBg: white;
+	--bodyColor: #212529;
+
+	--highlight: rgba(204, 216, 224, 0.2); // ???
+
+	--shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14),
+	0px 1px 5px 0px rgba(0, 0, 0, 0.12);
+
+	--shadowColor: rgba(0, 0, 0, 0.12);
+
+	--muted: #6c757d !important;
+}
+
+:root {
+	--fontFamily: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans",
+		sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+	--fontSize: 16px;
+	--fontWeight: 400;
+
+	--fontLineHeight: 1.5;
+
+	--textBody1FontSize: 13px;
+	--textBody1LineHeight: 18px;
+
+	--textBody2FontSize: 13px;
+	--textBody2LineHeight: 18px;
+
+	--textOverlineFontSize: 13px;
+	--textOverlineLineHeight: 18px;
+	--textOverlineTransform: uppercase;
+}
+
+:root {
+	.ml-0 {
+		margin-left: var(--0);
+	}
+
+	.ml-1 {
+		margin-left: var(--1);
+	}
+
+	.ml-2 {
+		margin-left: var(--2);
+	}
+
+	.ml-3 {
+		margin-left: var(--3);
+	}
+
+	.ml-auto {
+		margin-left: var(--auto);
+	}
+
+	.mr-0 {
+		margin-right: var(--0);
+	}
+
+	.mr-1 {
+		margin-right: var(--1);
+	}
+
+	.mr-2 {
+		margin-right: var(--2);
+	}
+
+	.mr-3 {
+		margin-right: var(--3);
+	}
+
+	.mr-auto {
+		margin-right: var(--auto);
+	}
+
+	.mt-0 {
+		margin-top: var(--0);
+	}
+
+	.mt-1 {
+		margin-top: var(--1);
+	}
+
+	.mt-2 {
+		margin-top: var(--2);
+	}
+
+	.mt-3 {
+		margin-top: var(--3);
+	}
+
+	.mt-4 {
+		margin-top: var(--4);
+	}
+
+	.mb-0 {
+		margin-bottom: var(--0);
+	}
+
+	.mb-1 {
+		margin-bottom: var(--1);
+	}
+
+	.mb-2 {
+		margin-bottom: var(--2);
+	}
+
+	.mb-3 {
+		margin-bottom: var(--3);
+	}
+}
+
+:root {
+	.pt-1 {
+		padding-top: var(--1);
+	}
+
+	.pt-2 {
+		padding-top: var(--2);
+	}
+
+	.pt-3 {
+		padding-top: var(--3);
+	}
+
+	.pb-1 {
+		padding-bottom: var(--1);
+	}
+
+	.pb-2 {
+		padding-bottom: var(--2);
+	}
+
+	.pb-3 {
+		padding-bottom: var(--3);
+	}
+
+	.pb-4 {
+		padding-bottom: var(--4);
+	}
+
+	.p-3 {
+		padding: var(--3);
+	}
+
+	.p-1 {
+		padding: var(--1);
+	}
+
+	.p-2 {
+		padding: var(--2);
+	}
+
+	.p-3 {
+		padding: var(--3);
+	}
+
+	.p-4 {
+		padding: var(--3);
+	}
+
+	.pt-0 {
+		padding-top: var(--0);
+	}
+
+	.pb-0 {
+		padding-bottom: var(--0);
+	}
+}
+
+:root {
+	--borderRadius: 5px;
+	--0: 0px !important;
+	--1: 15px !important;
+	--2: 25px !important;
+	--3: 35px !important;
+	--4: 45px !important;
+	--auto: auto !important;
+}
+
+.input-group-append {
+	.btn {
+		min-width: auto;
+
+		.svg-icon {
+			margin-left: 0;
+			margin-right: 0;
+		}
+	}
+}
+
+.text-muted {
+	color: var(--muted);
+}
+
+.flex-1 {
+	flex: 1;
+}
+
+.d-flex {
+	display: flex !important;
+}
+
+.justify-content-center {
+	justify-content: center !important;
+}
+
+.align-items-center {
+	align-items: center !important;
+}
+
+.flex-wrap {
+	flex-wrap: wrap;
+}
+
+.flex-row {
+	flex-direction: row;
+}
+
+.flex-row-reverse {
+	flex-direction: row-reverse;
+}
+
+.flex-column {
+	flex-direction: column;
+}
+
+.flex-column-reverse {
+	flex-direction: column-reverse;
+}
+
+.w-100 {
+	width: 100%;
+}
+
+.h-100 {
+	height: 100%;
+}
+
+.text-center {
+	text-align: center;
+}
+
+.text-uppercase {
+	text-transform: uppercase;
+}
+
+.rounded-pill {
+	border-radius: 50rem !important;
+}
+
+.fw-bold {
+    font-weight: 700!important;
+}
+
+@media (max-width: 576px) {
+	.flex-row {
+		flex-direction: column !important;
+	}
+}
+@media (min-width: 768px) {
+	.justify-content-md-center {
+		justify-content: center !important;
+	}
+	.align-items-md-center {
+		align-items: center !important;
+	}
+}
+
+.modal-open {
+	overflow: hidden !important;
+}
+
+
+* {
+	min-width: 0;
+	min-height: 0;
+}
+
+label.required {
+	&::after {
+		display: inline-block;
+		line-height: 0.8;
+		content: "*";
+		vertical-align: text-top;
+	}
+}
+
+.overline {
+	font-size: var(--textOverlineFontSize) !important;
+	line-height: var(--textOverlineLineHeight) !important;
+	text-transform: var(--textOverlineTransform) !important;
+	font-weight: bold;
+}
+
+.body1 {
+	font-size: var(--textBody1FontSize) !important;
+	line-height: var(--textBody1LineHeight) !important;
+}
+
+.body2 {
+	font-size: var(--textBody2FontSize) !important;
+	line-height: var(--textBody2LineHeight) !important;
+}
+
+.uppercase {
+	text-transform: uppercase !important;
+}

package/readme.md

@@ -1,91 +1,91 @@
-# react-asc
-
-handcrafted components inspired by Material Design and bundled with rollup.
-
-## showcase
-
-react-asc interactive showcase [link](https://react-asc.netlify.app)
-
-## usage
-
-### install package
-
-`npm install react-asc`
-
-### install modern-normalize
-
-`npm install modern-normalize`
-
-### Include styles
-
-```scss
-@import "modern-normalize";
-@import "react-asc/react-asc.scss";
-```
-
-### Usage
-
-```js
-import React from "react";
-import { Button } from "react-asc";
-
-const MyApp = () => {
-	return <Button>some button</Button>;
-};
-```
-
-
-## TypeScript
-react-asc provides built-in ts definition
-
-
-## Included Components
-
--   Alert (beta)
--   AppBar
--   AutoComplete (beta)
--   Backdrop
--   Badge
--   Breadcrumb
--   Button
--   ButtonGroup
--   Card
--   Checkbox
--   Chip
--	CssTransition
--   ConditionalWrapper
--   DateSelect
--   Drawer
--   ExpansionPanel
--   FileInput
--   FloatingActionButton
--   Form (beta)
--   Grid
--   Icon
--   IconButton
--   Link
--   List
--   LoadingIndicator
--   Menu
--   Modal + ModalService
--   NumberSelect
-	Portal
--   Select
--   Sidebar
--	Skeleton (Avatar, Image, Text, SkeletonFooter)
--   Snackbar + SnackbarService
--   SpeedDial
--   Stepper (beta)
--   Table (beta)
--   Tabs
--   Textarea
--   TimeSelect
--   Tooltip
--   TreeView (beta)
--   Typography
-
-
-## Credit
-
-uses fontawesome icons as SVGs
-https://fontawesome.com/license
+# react-asc
+
+handcrafted components inspired by Material Design and bundled with rollup.
+
+## showcase
+
+react-asc interactive showcase [link](https://react-asc.netlify.app)
+
+## usage
+
+### install package
+
+`npm install react-asc`
+
+### install modern-normalize
+
+`npm install modern-normalize`
+
+### Include styles
+
+```scss
+@import "modern-normalize";
+@import "react-asc/react-asc.scss";
+```
+
+### Usage
+
+```js
+import React from "react";
+import { Button } from "react-asc";
+
+const MyApp = () => {
+	return <Button>some button</Button>;
+};
+```
+
+
+## TypeScript
+react-asc provides built-in ts definition
+
+
+## Included Components
+
+-   Alert (beta)
+-   AppBar
+-   AutoComplete (beta)
+-   Backdrop
+-   Badge
+-   Breadcrumb
+-   Button
+-   ButtonGroup
+-   Card
+-   Checkbox
+-   Chip
+-	CssTransition
+-   ConditionalWrapper
+-   DateSelect
+-   Drawer
+-   ExpansionPanel
+-   FileInput
+-   FloatingActionButton
+-   Form (beta)
+-   Grid
+-   Icon
+-   IconButton
+-   Link
+-   List
+-   LoadingIndicator
+-   Menu
+-   Modal + ModalService
+-   NumberSelect
+	Portal
+-   Select
+-   Sidebar
+-	Skeleton (Avatar, Image, Text, SkeletonFooter)
+-   Snackbar + SnackbarService
+-   SpeedDial
+-   Stepper (beta)
+-   Table (beta)
+-   Tabs
+-   Textarea
+-   TimeSelect
+-   Tooltip
+-   TreeView (beta)
+-   Typography
+
+
+## Credit
+
+uses fontawesome icons as SVGs
+https://fontawesome.com/license