react-asc 25.3.1 → 25.4.1

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

@@ -2022,12 +2022,20 @@ const NumberSelect = (props) => {
     return (React.createElement(Select, { id: id, name: name, className: getCssClasses(), options: numberOptions, onChange: (e) => handleOnChange(parseInt(e)), disabled: disabled, value: newValue.toString() }));
 };
 
-var css_248z$l = ".Tooltip-module_tooltipContainer__9ZWx3 {\n  display: inline;\n}\n\n.Tooltip-module_tooltip__x5HOu {\n  background-color: #333;\n  color: white;\n  padding: 5px 10px;\n  border-radius: 4px;\n  font-size: 13px;\n  position: absolute;\n  left: -1000000px;\n  z-index: 1100;\n}\n.Tooltip-module_tooltip__x5HOu #Tooltip-module_arrow__B6lfe,\n.Tooltip-module_tooltip__x5HOu #Tooltip-module_arrow__B6lfe::before {\n  position: absolute;\n  width: 8px;\n  height: 8px;\n  z-index: -1;\n}\n.Tooltip-module_tooltip__x5HOu #Tooltip-module_arrow__B6lfe::before {\n  content: \"\";\n  transform: rotate(45deg);\n  background: #333;\n}\n.Tooltip-module_tooltip__x5HOu[data-popper-placement^=top] > #Tooltip-module_arrow__B6lfe {\n  bottom: -4px;\n}\n.Tooltip-module_tooltip__x5HOu[data-popper-placement^=bottom] > #Tooltip-module_arrow__B6lfe {\n  top: -4px;\n}\n.Tooltip-module_tooltip__x5HOu[data-popper-placement^=left] > #Tooltip-module_arrow__B6lfe {\n  right: -4px;\n}\n.Tooltip-module_tooltip__x5HOu[data-popper-placement^=right] > #Tooltip-module_arrow__B6lfe {\n  left: -4px;\n}";
-var styles$l = {"tooltipContainer":"Tooltip-module_tooltipContainer__9ZWx3","tooltip":"Tooltip-module_tooltip__x5HOu","arrow":"Tooltip-module_arrow__B6lfe"};
+var css_248z$l = ".Tooltip-module_tooltipContainer__9ZWx3 {\n  display: inline;\n}\n\n.Tooltip-module_tooltip__x5HOu {\n  background-color: #333;\n  color: white;\n  padding: 5px 10px;\n  border-radius: 4px;\n  font-size: 13px;\n  position: absolute;\n  left: -1000000px;\n  z-index: 1100;\n}\n\n.Tooltip-module_arrow__B6lfe, .Tooltip-module_arrow__B6lfe::before {\n  position: absolute;\n  width: 8px;\n  height: 8px;\n  z-index: -1;\n}\n.Tooltip-module_arrow__B6lfe::before {\n  content: \"\";\n  transform: rotate(45deg);\n  background: #333;\n}\n.Tooltip-module_arrow__B6lfe.Tooltip-module_placement-top__h5aww {\n  bottom: -4px;\n}\n.Tooltip-module_arrow__B6lfe.Tooltip-module_placement-bottom__dYc5B {\n  top: -4px;\n}\n.Tooltip-module_arrow__B6lfe.Tooltip-module_placement-left__8-2Jw {\n  right: -4px;\n}\n.Tooltip-module_arrow__B6lfe.Tooltip-module_placement-right__v4h4z {\n  left: -4px;\n}";
+var styles$l = {"tooltipContainer":"Tooltip-module_tooltipContainer__9ZWx3","tooltip":"Tooltip-module_tooltip__x5HOu","arrow":"Tooltip-module_arrow__B6lfe","placement-top":"Tooltip-module_placement-top__h5aww","placement-bottom":"Tooltip-module_placement-bottom__dYc5B","placement-left":"Tooltip-module_placement-left__8-2Jw","placement-right":"Tooltip-module_placement-right__v4h4z"};
 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);
@@ -2047,21 +2055,27 @@ const Tooltip = (props) => {
     }, [delay]);
     useEffect(() => {
         if (open === true && refChild && refChild.current && refTooltip && refTooltip.current) {
-            const popperInstance = createPopper(refChild.current, refTooltip.current, {
-                placement: placement,
-                modifiers: [
-                    {
-                        name: 'offset',
-                        options: { offset: [0, 8] }
-                    },
-                ]
-            });
-            setPopperInstance(popperInstance);
+            showTooltip();
         }
         else {
-            popperInstance?.destroy();
+            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);
     };
@@ -2078,18 +2092,24 @@ const Tooltip = (props) => {
         setShow(false);
     };
     useOnDestroy(() => {
-        popperInstance?.destroy();
+        hideTooltip();
     });
+    const getArrowStyles = () => {
+        const cssClasses = [];
+        cssClasses.push(styles$l.arrow);
+        placement && cssClasses.push(styles$l[`placement-${placement}`]);
+        return cssClasses.filter(css => css).join(' ');
+    };
     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 &&
-            React.createElement("div", { className: styles$l.tooltip, ref: refTooltip, id: "tooltip" },
+            React.createElement("div", { className: styles$l.tooltip, ref: refTooltip },
                 React.createElement("div", { className: 'd-flex align-items-center' },
                     text,
                     showClose &&
                         React.createElement(Icon, { className: 'ml-1', onClick: handleClickClose },
                             React.createElement(TimesSolidIcon, null))),
-                React.createElement("div", { id: "arrow", "data-popper-arrow": true }))));
+                React.createElement("div", { className: getArrowStyles(), "data-popper-arrow": true }))));
 };
 
 var css_248z$k = ":root {\n  --progress-height: 0.5rem;\n  --progress-bg: #e9ecef;\n  --progress-box-shadow: var(--shadow);\n  --progress-bar-color: #fff;\n  --progress-bar-bg: var(--primary);\n  --progress-bar-transition: width 0.6s ease;\n}\n\n.ProgressBar-module_progressBarContainer__vtbBw {\n  display: flex;\n  height: var(--progress-height);\n  overflow: hidden;\n  background-color: var(--progress-bg);\n}\n\n.ProgressBar-module_progressBar__hr8I8 {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  overflow: hidden;\n  color: var(--progress-bar-color);\n  text-align: center;\n  white-space: nowrap;\n  transition: var(--progress-bar-transition);\n  background-color: var(--progress-bar-bg);\n}\n.ProgressBar-module_progressBar__hr8I8.ProgressBar-module_indeterminate__WcQdD {\n  width: 100%;\n  height: 100%;\n  animation: ProgressBar-module_indeterminateAnimation__SlBFt 1s infinite linear;\n  transform-origin: 0% 50%;\n}\n\n@keyframes ProgressBar-module_indeterminateAnimation__SlBFt {\n  0% {\n    transform: translateX(0) scaleX(0);\n  }\n  40% {\n    transform: translateX(0) scaleX(0.4);\n  }\n  100% {\n    transform: translateX(100%) scaleX(0.5);\n  }\n}";

package/index.js

@@ -2031,12 +2031,20 @@ const NumberSelect = (props) => {
     return (React__default["default"].createElement(Select, { id: id, name: name, className: getCssClasses(), options: numberOptions, onChange: (e) => handleOnChange(parseInt(e)), disabled: disabled, value: newValue.toString() }));
 };
 
-var css_248z$l = ".Tooltip-module_tooltipContainer__9ZWx3 {\n  display: inline;\n}\n\n.Tooltip-module_tooltip__x5HOu {\n  background-color: #333;\n  color: white;\n  padding: 5px 10px;\n  border-radius: 4px;\n  font-size: 13px;\n  position: absolute;\n  left: -1000000px;\n  z-index: 1100;\n}\n.Tooltip-module_tooltip__x5HOu #Tooltip-module_arrow__B6lfe,\n.Tooltip-module_tooltip__x5HOu #Tooltip-module_arrow__B6lfe::before {\n  position: absolute;\n  width: 8px;\n  height: 8px;\n  z-index: -1;\n}\n.Tooltip-module_tooltip__x5HOu #Tooltip-module_arrow__B6lfe::before {\n  content: \"\";\n  transform: rotate(45deg);\n  background: #333;\n}\n.Tooltip-module_tooltip__x5HOu[data-popper-placement^=top] > #Tooltip-module_arrow__B6lfe {\n  bottom: -4px;\n}\n.Tooltip-module_tooltip__x5HOu[data-popper-placement^=bottom] > #Tooltip-module_arrow__B6lfe {\n  top: -4px;\n}\n.Tooltip-module_tooltip__x5HOu[data-popper-placement^=left] > #Tooltip-module_arrow__B6lfe {\n  right: -4px;\n}\n.Tooltip-module_tooltip__x5HOu[data-popper-placement^=right] > #Tooltip-module_arrow__B6lfe {\n  left: -4px;\n}";
-var styles$l = {"tooltipContainer":"Tooltip-module_tooltipContainer__9ZWx3","tooltip":"Tooltip-module_tooltip__x5HOu","arrow":"Tooltip-module_arrow__B6lfe"};
+var css_248z$l = ".Tooltip-module_tooltipContainer__9ZWx3 {\n  display: inline;\n}\n\n.Tooltip-module_tooltip__x5HOu {\n  background-color: #333;\n  color: white;\n  padding: 5px 10px;\n  border-radius: 4px;\n  font-size: 13px;\n  position: absolute;\n  left: -1000000px;\n  z-index: 1100;\n}\n\n.Tooltip-module_arrow__B6lfe, .Tooltip-module_arrow__B6lfe::before {\n  position: absolute;\n  width: 8px;\n  height: 8px;\n  z-index: -1;\n}\n.Tooltip-module_arrow__B6lfe::before {\n  content: \"\";\n  transform: rotate(45deg);\n  background: #333;\n}\n.Tooltip-module_arrow__B6lfe.Tooltip-module_placement-top__h5aww {\n  bottom: -4px;\n}\n.Tooltip-module_arrow__B6lfe.Tooltip-module_placement-bottom__dYc5B {\n  top: -4px;\n}\n.Tooltip-module_arrow__B6lfe.Tooltip-module_placement-left__8-2Jw {\n  right: -4px;\n}\n.Tooltip-module_arrow__B6lfe.Tooltip-module_placement-right__v4h4z {\n  left: -4px;\n}";
+var styles$l = {"tooltipContainer":"Tooltip-module_tooltipContainer__9ZWx3","tooltip":"Tooltip-module_tooltip__x5HOu","arrow":"Tooltip-module_arrow__B6lfe","placement-top":"Tooltip-module_placement-top__h5aww","placement-bottom":"Tooltip-module_placement-bottom__dYc5B","placement-left":"Tooltip-module_placement-left__8-2Jw","placement-right":"Tooltip-module_placement-right__v4h4z"};
 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);
@@ -2056,21 +2064,27 @@ const Tooltip = (props) => {
     }, [delay]);
     React.useEffect(() => {
         if (open === true && refChild && refChild.current && refTooltip && refTooltip.current) {
-            const popperInstance = core.createPopper(refChild.current, refTooltip.current, {
-                placement: placement,
-                modifiers: [
-                    {
-                        name: 'offset',
-                        options: { offset: [0, 8] }
-                    },
-                ]
-            });
-            setPopperInstance(popperInstance);
+            showTooltip();
         }
         else {
-            popperInstance?.destroy();
+            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);
     };
@@ -2087,18 +2101,24 @@ const Tooltip = (props) => {
         setShow(false);
     };
     useOnDestroy(() => {
-        popperInstance?.destroy();
+        hideTooltip();
     });
+    const getArrowStyles = () => {
+        const cssClasses = [];
+        cssClasses.push(styles$l.arrow);
+        placement && cssClasses.push(styles$l[`placement-${placement}`]);
+        return cssClasses.filter(css => css).join(' ');
+    };
     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 &&
-            React__default["default"].createElement("div", { className: styles$l.tooltip, ref: refTooltip, id: "tooltip" },
+            React__default["default"].createElement("div", { className: styles$l.tooltip, ref: refTooltip },
                 React__default["default"].createElement("div", { className: 'd-flex align-items-center' },
                     text,
                     showClose &&
                         React__default["default"].createElement(Icon, { className: 'ml-1', onClick: handleClickClose },
                             React__default["default"].createElement(TimesSolidIcon, null))),
-                React__default["default"].createElement("div", { id: "arrow", "data-popper-arrow": true }))));
+                React__default["default"].createElement("div", { className: getArrowStyles(), "data-popper-arrow": true }))));
 };
 
 var css_248z$k = ":root {\n  --progress-height: 0.5rem;\n  --progress-bg: #e9ecef;\n  --progress-box-shadow: var(--shadow);\n  --progress-bar-color: #fff;\n  --progress-bar-bg: var(--primary);\n  --progress-bar-transition: width 0.6s ease;\n}\n\n.ProgressBar-module_progressBarContainer__vtbBw {\n  display: flex;\n  height: var(--progress-height);\n  overflow: hidden;\n  background-color: var(--progress-bg);\n}\n\n.ProgressBar-module_progressBar__hr8I8 {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  overflow: hidden;\n  color: var(--progress-bar-color);\n  text-align: center;\n  white-space: nowrap;\n  transition: var(--progress-bar-transition);\n  background-color: var(--progress-bar-bg);\n}\n.ProgressBar-module_progressBar__hr8I8.ProgressBar-module_indeterminate__WcQdD {\n  width: 100%;\n  height: 100%;\n  animation: ProgressBar-module_indeterminateAnimation__SlBFt 1s infinite linear;\n  transform-origin: 0% 50%;\n}\n\n@keyframes ProgressBar-module_indeterminateAnimation__SlBFt {\n  0% {\n    transform: translateX(0) scaleX(0);\n  }\n  40% {\n    transform: translateX(0) scaleX(0.4);\n  }\n  100% {\n    transform: translateX(100%) scaleX(0.5);\n  }\n}";

package/package.json

@@ -1,28 +1,28 @@
-{
-	"name": "react-asc",
-	"version": "25.3.1",
-	"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.1",
+	"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