react-asc 21.0.0 → 21.0.4

package/components/Button/Button.d.ts

@@ -8,5 +8,6 @@ export interface IButtonProps extends React.ComponentProps<"button"> {
     startIcon?: React.SVGProps<SVGSVGElement>;
     endIcon?: React.SVGProps<SVGSVGElement>;
     shadow?: boolean;
+    block?: boolean;
 }
 export declare const Button: React.FunctionComponent<IButtonProps>;

package/components/TreeView/TreeItem.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 export interface ITreeItemProps extends React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLLIElement>, HTMLLIElement> {
-    nodeId: string;
-    label: string;
+    nodeId?: string;
+    label?: string;
     isExpanded?: boolean;
     isSelected?: boolean;
     isSelectable?: boolean;

package/index.es.js

@@ -506,12 +506,12 @@ const Badge = (props) => {
         React.createElement("span", { className: getCssClassesBadge() }, content)));
 };
 
-var css_248z$O = ".Button-module_button__qeIer {\n  text-transform: uppercase !important;\n  flex-shrink: 0;\n  background-color: transparent;\n  display: inline-block;\n  font-weight: 400;\n  line-height: 1.5;\n  text-align: center;\n  text-decoration: none;\n  vertical-align: middle;\n  user-select: none;\n  border: 1px solid transparent;\n  padding: 0.375rem 0.75rem;\n  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,\r box-shadow 0.15s ease-in-out;\n  min-width: 64px;\n  font-size: 0.875rem;\n  border-radius: var(--borderRadius); }\n  .Button-module_button__qeIer.Button-module_shadow__6N2nE {\n    box-shadow: var(--shadow); }\n  .Button-module_button__qeIer:hover {\n    cursor: pointer; }\n  .Button-module_button__qeIer:focus:not(.Button-module_button__qeIer.Button-module_disabled__jiOqa) {\n    border-color: #86b7fe;\n    outline: 0;\n    box-shadow: inset 0 1px 2px #00000013, 0 0 0 0.25rem #0d6efd40; }\n\n.Button-module_btnContained__16y5l.Button-module_primary__EUyOu {\n  color: var(--primary-contrast-text);\n  background-color: var(--primary); }\n  .Button-module_btnContained__16y5l.Button-module_primary__EUyOu:hover {\n    background-color: var(--primary-dark); }\n\n.Button-module_btnContained__16y5l.Button-module_accent__opVgQ {\n  color: var(--accent-contrast-text);\n  background-color: var(--accent); }\n  .Button-module_btnContained__16y5l.Button-module_accent__opVgQ:hover {\n    background-color: var(--accent-dark); }\n\n.Button-module_btnContained__16y5l.Button-module_secondary__zKoGk {\n  color: var(--secondary-contrast-text);\n  background-color: var(--secondary); }\n  .Button-module_btnContained__16y5l.Button-module_secondary__zKoGk:hover {\n    background-color: var(--secondary-dark); }\n\n.Button-module_btnContained__16y5l.Button-module_light__LXeZy {\n  color: var(--light-contrast-text);\n  background-color: var(--light); }\n  .Button-module_btnContained__16y5l.Button-module_light__LXeZy:hover {\n    background-color: var(--light-dark); }\n\n.Button-module_btnContained__16y5l.Button-module_dark__5oFOT {\n  color: var(--dark-contrast-text);\n  background-color: var(--dark); }\n  .Button-module_btnContained__16y5l.Button-module_dark__5oFOT:hover {\n    background-color: var(--dark-dark); }\n\n.Button-module_btnContained__16y5l:disabled:hover {\n  cursor: not-allowed; }\n\n.Button-module_btnText__N5Gys {\n  box-shadow: none;\n  text-decoration: none; }\n  .Button-module_btnText__N5Gys.Button-module_primary__EUyOu {\n    color: var(--primary) !important; }\n    .Button-module_btnText__N5Gys.Button-module_primary__EUyOu:hover {\n      text-decoration: none;\n      background: var(--primary-highlight) !important; }\n  .Button-module_btnText__N5Gys.Button-module_secondary__zKoGk {\n    color: var(--secondary) !important; }\n    .Button-module_btnText__N5Gys.Button-module_secondary__zKoGk:hover {\n      text-decoration: none;\n      background: var(--secondary-highlight) !important; }\n  .Button-module_btnText__N5Gys.Button-module_accent__opVgQ {\n    color: var(--accent) !important; }\n    .Button-module_btnText__N5Gys.Button-module_accent__opVgQ:hover {\n      text-decoration: none;\n      background: var(--accent-highlight) !important; }\n  .Button-module_btnText__N5Gys.Button-module_light__LXeZy {\n    color: var(--light-contrast-text) !important; }\n    .Button-module_btnText__N5Gys.Button-module_light__LXeZy:hover {\n      text-decoration: none;\n      background: var(--light-highlight) !important; }\n  .Button-module_btnText__N5Gys.Button-module_dark__5oFOT {\n    color: var(--dark) !important; }\n    .Button-module_btnText__N5Gys.Button-module_dark__5oFOT:hover {\n      text-decoration: none;\n      background: var(--dark-highlight) !important; }\n\n.Button-module_btnOutline__CCFPI {\n  box-shadow: none;\n  text-decoration: none; }\n  .Button-module_btnOutline__CCFPI.Button-module_primary__EUyOu {\n    color: var(--primary) !important;\n    border-color: var(--primary) !important; }\n    .Button-module_btnOutline__CCFPI.Button-module_primary__EUyOu:hover {\n      background: var(--primary-highlight) !important; }\n  .Button-module_btnOutline__CCFPI.Button-module_secondary__zKoGk {\n    color: var(--secondary) !important;\n    border-color: var(--secondary) !important; }\n    .Button-module_btnOutline__CCFPI.Button-module_secondary__zKoGk:hover {\n      background: var(--secondary-highlight) !important; }\n  .Button-module_btnOutline__CCFPI.Button-module_accent__opVgQ {\n    color: var(--accent) !important;\n    border-color: var(--accent) !important; }\n    .Button-module_btnOutline__CCFPI.Button-module_accent__opVgQ:hover {\n      background: var(--accent-highlight) !important; }\n  .Button-module_btnOutline__CCFPI.Button-module_light__LXeZy {\n    color: var(--light-contrast-text) !important;\n    border-color: var(--light) !important; }\n    .Button-module_btnOutline__CCFPI.Button-module_light__LXeZy:hover {\n      background: var(--light-highlight) !important; }\n  .Button-module_btnOutline__CCFPI.Button-module_dark__5oFOT {\n    color: var(--dark) !important;\n    border-color: var(--dark) !important; }\n    .Button-module_btnOutline__CCFPI.Button-module_dark__5oFOT:hover {\n      background: var(--dark-highlight) !important; }\n\n.Button-module_startIcon__Eylwr {\n  display: inherit;\n  margin-left: -4px;\n  margin-right: 8px; }\n  .Button-module_startIcon__Eylwr svg {\n    width: 18px;\n    height: 18px; }\n\n.Button-module_endIcon__pCffL {\n  display: inherit;\n  margin-left: 8px; }\n  .Button-module_endIcon__pCffL svg {\n    width: 18px;\n    height: 18px; }\n";
-var styles$O = {"button":"Button-module_button__qeIer","shadow":"Button-module_shadow__6N2nE","disabled":"Button-module_disabled__jiOqa","btnContained":"Button-module_btnContained__16y5l","primary":"Button-module_primary__EUyOu","accent":"Button-module_accent__opVgQ","secondary":"Button-module_secondary__zKoGk","light":"Button-module_light__LXeZy","dark":"Button-module_dark__5oFOT","btnText":"Button-module_btnText__N5Gys","btnOutline":"Button-module_btnOutline__CCFPI","startIcon":"Button-module_startIcon__Eylwr","endIcon":"Button-module_endIcon__pCffL"};
+var css_248z$O = ".Button-module_button__qeIer {\n  text-transform: uppercase !important;\n  flex-shrink: 0;\n  background-color: transparent;\n  display: inline-block;\n  font-weight: 400;\n  line-height: 1.5;\n  text-align: center;\n  text-decoration: none;\n  vertical-align: middle;\n  user-select: none;\n  border: 1px solid transparent;\n  padding: 0.375rem 0.75rem;\n  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,\r box-shadow 0.15s ease-in-out;\n  min-width: 64px;\n  font-size: 0.875rem;\n  border-radius: var(--borderRadius); }\n  .Button-module_button__qeIer.Button-module_shadow__6N2nE {\n    box-shadow: var(--shadow); }\n  .Button-module_button__qeIer.Button-module_block__JIazf {\n    width: 100%; }\n  .Button-module_button__qeIer:hover {\n    cursor: pointer; }\n  .Button-module_button__qeIer:focus:not(.Button-module_button__qeIer.Button-module_disabled__jiOqa) {\n    border-color: #86b7fe;\n    outline: 0;\n    box-shadow: inset 0 1px 2px #00000013, 0 0 0 0.25rem #0d6efd40; }\n\n.Button-module_btnContained__16y5l.Button-module_primary__EUyOu {\n  color: var(--primary-contrast-text);\n  background-color: var(--primary); }\n  .Button-module_btnContained__16y5l.Button-module_primary__EUyOu:hover {\n    background-color: var(--primary-dark); }\n\n.Button-module_btnContained__16y5l.Button-module_accent__opVgQ {\n  color: var(--accent-contrast-text);\n  background-color: var(--accent); }\n  .Button-module_btnContained__16y5l.Button-module_accent__opVgQ:hover {\n    background-color: var(--accent-dark); }\n\n.Button-module_btnContained__16y5l.Button-module_secondary__zKoGk {\n  color: var(--secondary-contrast-text);\n  background-color: var(--secondary); }\n  .Button-module_btnContained__16y5l.Button-module_secondary__zKoGk:hover {\n    background-color: var(--secondary-dark); }\n\n.Button-module_btnContained__16y5l.Button-module_light__LXeZy {\n  color: var(--light-contrast-text);\n  background-color: var(--light); }\n  .Button-module_btnContained__16y5l.Button-module_light__LXeZy:hover {\n    background-color: var(--light-dark); }\n\n.Button-module_btnContained__16y5l.Button-module_dark__5oFOT {\n  color: var(--dark-contrast-text);\n  background-color: var(--dark); }\n  .Button-module_btnContained__16y5l.Button-module_dark__5oFOT:hover {\n    background-color: var(--dark-dark); }\n\n.Button-module_btnContained__16y5l:disabled:hover {\n  cursor: not-allowed; }\n\n.Button-module_btnText__N5Gys {\n  box-shadow: none;\n  text-decoration: none; }\n  .Button-module_btnText__N5Gys.Button-module_primary__EUyOu {\n    color: var(--primary) !important; }\n    .Button-module_btnText__N5Gys.Button-module_primary__EUyOu:hover {\n      text-decoration: none;\n      background: var(--primary-highlight) !important; }\n  .Button-module_btnText__N5Gys.Button-module_secondary__zKoGk {\n    color: var(--secondary) !important; }\n    .Button-module_btnText__N5Gys.Button-module_secondary__zKoGk:hover {\n      text-decoration: none;\n      background: var(--secondary-highlight) !important; }\n  .Button-module_btnText__N5Gys.Button-module_accent__opVgQ {\n    color: var(--accent) !important; }\n    .Button-module_btnText__N5Gys.Button-module_accent__opVgQ:hover {\n      text-decoration: none;\n      background: var(--accent-highlight) !important; }\n  .Button-module_btnText__N5Gys.Button-module_light__LXeZy {\n    color: var(--light-contrast-text) !important; }\n    .Button-module_btnText__N5Gys.Button-module_light__LXeZy:hover {\n      text-decoration: none;\n      background: var(--light-highlight) !important; }\n  .Button-module_btnText__N5Gys.Button-module_dark__5oFOT {\n    color: var(--dark) !important; }\n    .Button-module_btnText__N5Gys.Button-module_dark__5oFOT:hover {\n      text-decoration: none;\n      background: var(--dark-highlight) !important; }\n\n.Button-module_btnOutline__CCFPI {\n  box-shadow: none;\n  text-decoration: none; }\n  .Button-module_btnOutline__CCFPI.Button-module_primary__EUyOu {\n    color: var(--primary) !important;\n    border-color: var(--primary) !important; }\n    .Button-module_btnOutline__CCFPI.Button-module_primary__EUyOu:hover {\n      background: var(--primary-highlight) !important; }\n  .Button-module_btnOutline__CCFPI.Button-module_secondary__zKoGk {\n    color: var(--secondary) !important;\n    border-color: var(--secondary) !important; }\n    .Button-module_btnOutline__CCFPI.Button-module_secondary__zKoGk:hover {\n      background: var(--secondary-highlight) !important; }\n  .Button-module_btnOutline__CCFPI.Button-module_accent__opVgQ {\n    color: var(--accent) !important;\n    border-color: var(--accent) !important; }\n    .Button-module_btnOutline__CCFPI.Button-module_accent__opVgQ:hover {\n      background: var(--accent-highlight) !important; }\n  .Button-module_btnOutline__CCFPI.Button-module_light__LXeZy {\n    color: var(--light-contrast-text) !important;\n    border-color: var(--light) !important; }\n    .Button-module_btnOutline__CCFPI.Button-module_light__LXeZy:hover {\n      background: var(--light-highlight) !important; }\n  .Button-module_btnOutline__CCFPI.Button-module_dark__5oFOT {\n    color: var(--dark) !important;\n    border-color: var(--dark) !important; }\n    .Button-module_btnOutline__CCFPI.Button-module_dark__5oFOT:hover {\n      background: var(--dark-highlight) !important; }\n\n.Button-module_startIcon__Eylwr {\n  display: inherit;\n  margin-left: -4px;\n  margin-right: 8px; }\n  .Button-module_startIcon__Eylwr svg {\n    width: 18px;\n    height: 18px; }\n\n.Button-module_endIcon__pCffL {\n  display: inherit;\n  margin-left: 8px; }\n  .Button-module_endIcon__pCffL svg {\n    width: 18px;\n    height: 18px; }\n";
+var styles$O = {"button":"Button-module_button__qeIer","shadow":"Button-module_shadow__6N2nE","block":"Button-module_block__JIazf","disabled":"Button-module_disabled__jiOqa","btnContained":"Button-module_btnContained__16y5l","primary":"Button-module_primary__EUyOu","accent":"Button-module_accent__opVgQ","secondary":"Button-module_secondary__zKoGk","light":"Button-module_light__LXeZy","dark":"Button-module_dark__5oFOT","btnText":"Button-module_btnText__N5Gys","btnOutline":"Button-module_btnOutline__CCFPI","startIcon":"Button-module_startIcon__Eylwr","endIcon":"Button-module_endIcon__pCffL"};
 styleInject(css_248z$O);
 
 const Button = (props) => {
-    const { children, variant = VARIANT.contained, color = COLOR.primary, isRounded, isActive, className, startIcon, endIcon, shadow = true } = props, rest = __rest(props, ["children", "variant", "color", "isRounded", "isActive", "className", "startIcon", "endIcon", "shadow"]);
+    const { children, variant = VARIANT.contained, color = COLOR.primary, isRounded, isActive, className, startIcon, endIcon, shadow = true, block } = props, rest = __rest(props, ["children", "variant", "color", "isRounded", "isActive", "className", "startIcon", "endIcon", "shadow", "block"]);
     const getCssClasses = () => {
         const cssClasses = [];
         cssClasses.push(styles$O.button);
@@ -534,6 +534,7 @@ const Button = (props) => {
             cssClasses.push('active');
         }
         shadow && cssClasses.push(styles$O.shadow);
+        block && cssClasses.push(styles$O.block);
         className && cssClasses.push(className);
         return cssClasses.filter(css => css).join(' ');
     };
@@ -2230,7 +2231,7 @@ const Stepper = (props) => {
             React.createElement(StepperActions, { className: "mt-3", isFirstStep: activeIndex === 0, isStepOptional: isStepOptional(activeIndex), isCompleted: isLastStep(), onBack: handleBack, onSkip: handleSkip, onNext: handleNext, onReset: handleReset }))));
 };
 
-var css_248z$8 = ".Typography-module_typography__sw-td {\n  text-overflow: ellipsis;\n  font-family: var(--fontFamily); }\n\nh1 {\n  font-size: 2.5rem; }\n\nh2 {\n  font-size: 2rem; }\n\nh3 {\n  font-size: 1.75rem; }\n\nh4 {\n  font-size: 1.5rem; }\n\nh5 {\n  font-size: 1.25rem; }\n\nh6 {\n  font-size: 1rem; }\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  font-weight: 500 !important;\n  margin-top: 0;\n  margin-bottom: 0.5rem;\n  line-height: 1.2; }\n";
+var css_248z$8 = ".Typography-module_typography__sw-td {\n  text-overflow: ellipsis;\n  font-family: var(--fontFamily); }\n\nh1 {\n  font-size: calc(1.375rem + 1.5vw); }\n\nh2 {\n  font-size: calc(1.325rem + 0.9vw); }\n\nh3 {\n  font-size: calc(1.3rem + 0.6vw); }\n\nh4 {\n  font-size: calc(1.275rem + 0.3vw); }\n\nh5 {\n  font-size: 1.25rem; }\n\nh6 {\n  font-size: 1rem; }\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  font-weight: 500 !important;\n  margin-top: 0;\n  margin-bottom: 0.5rem;\n  line-height: 1.2; }\n";
 var styles$8 = {"typography":"Typography-module_typography__sw-td"};
 styleInject(css_248z$8);
 
@@ -2577,7 +2578,7 @@ const TimeSelect = (props) => {
                 React.createElement(MilliSecondSelect, { value: currDate.getMilliseconds(), disabled: disabled, onChange: e => handleOnChange(e, TIMEMODE.MILLISECONDS) }))));
 };
 
-var css_248z$1 = ".TreeView-module_treeView__VVj-4 {\n  list-style-type: none;\n  margin-bottom: 0;\n  padding-left: 0px !important; }\n  .TreeView-module_treeView__VVj-4 ul {\n    padding-left: 48px !important; }\n";
+var css_248z$1 = ".TreeView-module_treeView__VVj-4 {\n  list-style-type: none;\n  margin-bottom: 0;\n  padding-left: 0px !important;\n  margin-block-start: 0;\n  margin-block-end: 0;\n  margin-inline-start: 0px;\n  margin-inline-end: 0px;\n  padding-inline-start: 0px; }\n  .TreeView-module_treeView__VVj-4 ul {\n    padding-left: 48px !important; }\n";
 var styles$1 = {"treeView":"TreeView-module_treeView__VVj-4"};
 styleInject(css_248z$1);
 
@@ -2624,9 +2625,9 @@ const TreeItem = (props) => {
     };
     return (React.createElement("li", { className: getCssClasses(), style: { paddingLeft: `${(48 * (children ? 0 : 1))}px` } },
         React.createElement("div", { className: "d-flex align-items-center" },
-            children &&
+            children && nodeId &&
                 React.createElement(IconButton, { onClick: () => handleOnToggleExpand(nodeId), icon: !_isExpanded ? React.createElement(ChevronRightSolidIcon, null) : React.createElement(ChevronDownSolidIcon, null) }),
-            isSelectable &&
+            isSelectable && nodeId &&
                 React.createElement(Checkbox, { checked: _isSelected, onChange: () => handleOnSelect(nodeId) }),
             label),
         children && _isExpanded ? React.createElement("ul", null, children) : null));

package/index.js

@@ -514,12 +514,12 @@ const Badge = (props) => {
         React__default["default"].createElement("span", { className: getCssClassesBadge() }, content)));
 };
 
-var css_248z$O = ".Button-module_button__qeIer {\n  text-transform: uppercase !important;\n  flex-shrink: 0;\n  background-color: transparent;\n  display: inline-block;\n  font-weight: 400;\n  line-height: 1.5;\n  text-align: center;\n  text-decoration: none;\n  vertical-align: middle;\n  user-select: none;\n  border: 1px solid transparent;\n  padding: 0.375rem 0.75rem;\n  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,\r box-shadow 0.15s ease-in-out;\n  min-width: 64px;\n  font-size: 0.875rem;\n  border-radius: var(--borderRadius); }\n  .Button-module_button__qeIer.Button-module_shadow__6N2nE {\n    box-shadow: var(--shadow); }\n  .Button-module_button__qeIer:hover {\n    cursor: pointer; }\n  .Button-module_button__qeIer:focus:not(.Button-module_button__qeIer.Button-module_disabled__jiOqa) {\n    border-color: #86b7fe;\n    outline: 0;\n    box-shadow: inset 0 1px 2px #00000013, 0 0 0 0.25rem #0d6efd40; }\n\n.Button-module_btnContained__16y5l.Button-module_primary__EUyOu {\n  color: var(--primary-contrast-text);\n  background-color: var(--primary); }\n  .Button-module_btnContained__16y5l.Button-module_primary__EUyOu:hover {\n    background-color: var(--primary-dark); }\n\n.Button-module_btnContained__16y5l.Button-module_accent__opVgQ {\n  color: var(--accent-contrast-text);\n  background-color: var(--accent); }\n  .Button-module_btnContained__16y5l.Button-module_accent__opVgQ:hover {\n    background-color: var(--accent-dark); }\n\n.Button-module_btnContained__16y5l.Button-module_secondary__zKoGk {\n  color: var(--secondary-contrast-text);\n  background-color: var(--secondary); }\n  .Button-module_btnContained__16y5l.Button-module_secondary__zKoGk:hover {\n    background-color: var(--secondary-dark); }\n\n.Button-module_btnContained__16y5l.Button-module_light__LXeZy {\n  color: var(--light-contrast-text);\n  background-color: var(--light); }\n  .Button-module_btnContained__16y5l.Button-module_light__LXeZy:hover {\n    background-color: var(--light-dark); }\n\n.Button-module_btnContained__16y5l.Button-module_dark__5oFOT {\n  color: var(--dark-contrast-text);\n  background-color: var(--dark); }\n  .Button-module_btnContained__16y5l.Button-module_dark__5oFOT:hover {\n    background-color: var(--dark-dark); }\n\n.Button-module_btnContained__16y5l:disabled:hover {\n  cursor: not-allowed; }\n\n.Button-module_btnText__N5Gys {\n  box-shadow: none;\n  text-decoration: none; }\n  .Button-module_btnText__N5Gys.Button-module_primary__EUyOu {\n    color: var(--primary) !important; }\n    .Button-module_btnText__N5Gys.Button-module_primary__EUyOu:hover {\n      text-decoration: none;\n      background: var(--primary-highlight) !important; }\n  .Button-module_btnText__N5Gys.Button-module_secondary__zKoGk {\n    color: var(--secondary) !important; }\n    .Button-module_btnText__N5Gys.Button-module_secondary__zKoGk:hover {\n      text-decoration: none;\n      background: var(--secondary-highlight) !important; }\n  .Button-module_btnText__N5Gys.Button-module_accent__opVgQ {\n    color: var(--accent) !important; }\n    .Button-module_btnText__N5Gys.Button-module_accent__opVgQ:hover {\n      text-decoration: none;\n      background: var(--accent-highlight) !important; }\n  .Button-module_btnText__N5Gys.Button-module_light__LXeZy {\n    color: var(--light-contrast-text) !important; }\n    .Button-module_btnText__N5Gys.Button-module_light__LXeZy:hover {\n      text-decoration: none;\n      background: var(--light-highlight) !important; }\n  .Button-module_btnText__N5Gys.Button-module_dark__5oFOT {\n    color: var(--dark) !important; }\n    .Button-module_btnText__N5Gys.Button-module_dark__5oFOT:hover {\n      text-decoration: none;\n      background: var(--dark-highlight) !important; }\n\n.Button-module_btnOutline__CCFPI {\n  box-shadow: none;\n  text-decoration: none; }\n  .Button-module_btnOutline__CCFPI.Button-module_primary__EUyOu {\n    color: var(--primary) !important;\n    border-color: var(--primary) !important; }\n    .Button-module_btnOutline__CCFPI.Button-module_primary__EUyOu:hover {\n      background: var(--primary-highlight) !important; }\n  .Button-module_btnOutline__CCFPI.Button-module_secondary__zKoGk {\n    color: var(--secondary) !important;\n    border-color: var(--secondary) !important; }\n    .Button-module_btnOutline__CCFPI.Button-module_secondary__zKoGk:hover {\n      background: var(--secondary-highlight) !important; }\n  .Button-module_btnOutline__CCFPI.Button-module_accent__opVgQ {\n    color: var(--accent) !important;\n    border-color: var(--accent) !important; }\n    .Button-module_btnOutline__CCFPI.Button-module_accent__opVgQ:hover {\n      background: var(--accent-highlight) !important; }\n  .Button-module_btnOutline__CCFPI.Button-module_light__LXeZy {\n    color: var(--light-contrast-text) !important;\n    border-color: var(--light) !important; }\n    .Button-module_btnOutline__CCFPI.Button-module_light__LXeZy:hover {\n      background: var(--light-highlight) !important; }\n  .Button-module_btnOutline__CCFPI.Button-module_dark__5oFOT {\n    color: var(--dark) !important;\n    border-color: var(--dark) !important; }\n    .Button-module_btnOutline__CCFPI.Button-module_dark__5oFOT:hover {\n      background: var(--dark-highlight) !important; }\n\n.Button-module_startIcon__Eylwr {\n  display: inherit;\n  margin-left: -4px;\n  margin-right: 8px; }\n  .Button-module_startIcon__Eylwr svg {\n    width: 18px;\n    height: 18px; }\n\n.Button-module_endIcon__pCffL {\n  display: inherit;\n  margin-left: 8px; }\n  .Button-module_endIcon__pCffL svg {\n    width: 18px;\n    height: 18px; }\n";
-var styles$O = {"button":"Button-module_button__qeIer","shadow":"Button-module_shadow__6N2nE","disabled":"Button-module_disabled__jiOqa","btnContained":"Button-module_btnContained__16y5l","primary":"Button-module_primary__EUyOu","accent":"Button-module_accent__opVgQ","secondary":"Button-module_secondary__zKoGk","light":"Button-module_light__LXeZy","dark":"Button-module_dark__5oFOT","btnText":"Button-module_btnText__N5Gys","btnOutline":"Button-module_btnOutline__CCFPI","startIcon":"Button-module_startIcon__Eylwr","endIcon":"Button-module_endIcon__pCffL"};
+var css_248z$O = ".Button-module_button__qeIer {\n  text-transform: uppercase !important;\n  flex-shrink: 0;\n  background-color: transparent;\n  display: inline-block;\n  font-weight: 400;\n  line-height: 1.5;\n  text-align: center;\n  text-decoration: none;\n  vertical-align: middle;\n  user-select: none;\n  border: 1px solid transparent;\n  padding: 0.375rem 0.75rem;\n  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,\r box-shadow 0.15s ease-in-out;\n  min-width: 64px;\n  font-size: 0.875rem;\n  border-radius: var(--borderRadius); }\n  .Button-module_button__qeIer.Button-module_shadow__6N2nE {\n    box-shadow: var(--shadow); }\n  .Button-module_button__qeIer.Button-module_block__JIazf {\n    width: 100%; }\n  .Button-module_button__qeIer:hover {\n    cursor: pointer; }\n  .Button-module_button__qeIer:focus:not(.Button-module_button__qeIer.Button-module_disabled__jiOqa) {\n    border-color: #86b7fe;\n    outline: 0;\n    box-shadow: inset 0 1px 2px #00000013, 0 0 0 0.25rem #0d6efd40; }\n\n.Button-module_btnContained__16y5l.Button-module_primary__EUyOu {\n  color: var(--primary-contrast-text);\n  background-color: var(--primary); }\n  .Button-module_btnContained__16y5l.Button-module_primary__EUyOu:hover {\n    background-color: var(--primary-dark); }\n\n.Button-module_btnContained__16y5l.Button-module_accent__opVgQ {\n  color: var(--accent-contrast-text);\n  background-color: var(--accent); }\n  .Button-module_btnContained__16y5l.Button-module_accent__opVgQ:hover {\n    background-color: var(--accent-dark); }\n\n.Button-module_btnContained__16y5l.Button-module_secondary__zKoGk {\n  color: var(--secondary-contrast-text);\n  background-color: var(--secondary); }\n  .Button-module_btnContained__16y5l.Button-module_secondary__zKoGk:hover {\n    background-color: var(--secondary-dark); }\n\n.Button-module_btnContained__16y5l.Button-module_light__LXeZy {\n  color: var(--light-contrast-text);\n  background-color: var(--light); }\n  .Button-module_btnContained__16y5l.Button-module_light__LXeZy:hover {\n    background-color: var(--light-dark); }\n\n.Button-module_btnContained__16y5l.Button-module_dark__5oFOT {\n  color: var(--dark-contrast-text);\n  background-color: var(--dark); }\n  .Button-module_btnContained__16y5l.Button-module_dark__5oFOT:hover {\n    background-color: var(--dark-dark); }\n\n.Button-module_btnContained__16y5l:disabled:hover {\n  cursor: not-allowed; }\n\n.Button-module_btnText__N5Gys {\n  box-shadow: none;\n  text-decoration: none; }\n  .Button-module_btnText__N5Gys.Button-module_primary__EUyOu {\n    color: var(--primary) !important; }\n    .Button-module_btnText__N5Gys.Button-module_primary__EUyOu:hover {\n      text-decoration: none;\n      background: var(--primary-highlight) !important; }\n  .Button-module_btnText__N5Gys.Button-module_secondary__zKoGk {\n    color: var(--secondary) !important; }\n    .Button-module_btnText__N5Gys.Button-module_secondary__zKoGk:hover {\n      text-decoration: none;\n      background: var(--secondary-highlight) !important; }\n  .Button-module_btnText__N5Gys.Button-module_accent__opVgQ {\n    color: var(--accent) !important; }\n    .Button-module_btnText__N5Gys.Button-module_accent__opVgQ:hover {\n      text-decoration: none;\n      background: var(--accent-highlight) !important; }\n  .Button-module_btnText__N5Gys.Button-module_light__LXeZy {\n    color: var(--light-contrast-text) !important; }\n    .Button-module_btnText__N5Gys.Button-module_light__LXeZy:hover {\n      text-decoration: none;\n      background: var(--light-highlight) !important; }\n  .Button-module_btnText__N5Gys.Button-module_dark__5oFOT {\n    color: var(--dark) !important; }\n    .Button-module_btnText__N5Gys.Button-module_dark__5oFOT:hover {\n      text-decoration: none;\n      background: var(--dark-highlight) !important; }\n\n.Button-module_btnOutline__CCFPI {\n  box-shadow: none;\n  text-decoration: none; }\n  .Button-module_btnOutline__CCFPI.Button-module_primary__EUyOu {\n    color: var(--primary) !important;\n    border-color: var(--primary) !important; }\n    .Button-module_btnOutline__CCFPI.Button-module_primary__EUyOu:hover {\n      background: var(--primary-highlight) !important; }\n  .Button-module_btnOutline__CCFPI.Button-module_secondary__zKoGk {\n    color: var(--secondary) !important;\n    border-color: var(--secondary) !important; }\n    .Button-module_btnOutline__CCFPI.Button-module_secondary__zKoGk:hover {\n      background: var(--secondary-highlight) !important; }\n  .Button-module_btnOutline__CCFPI.Button-module_accent__opVgQ {\n    color: var(--accent) !important;\n    border-color: var(--accent) !important; }\n    .Button-module_btnOutline__CCFPI.Button-module_accent__opVgQ:hover {\n      background: var(--accent-highlight) !important; }\n  .Button-module_btnOutline__CCFPI.Button-module_light__LXeZy {\n    color: var(--light-contrast-text) !important;\n    border-color: var(--light) !important; }\n    .Button-module_btnOutline__CCFPI.Button-module_light__LXeZy:hover {\n      background: var(--light-highlight) !important; }\n  .Button-module_btnOutline__CCFPI.Button-module_dark__5oFOT {\n    color: var(--dark) !important;\n    border-color: var(--dark) !important; }\n    .Button-module_btnOutline__CCFPI.Button-module_dark__5oFOT:hover {\n      background: var(--dark-highlight) !important; }\n\n.Button-module_startIcon__Eylwr {\n  display: inherit;\n  margin-left: -4px;\n  margin-right: 8px; }\n  .Button-module_startIcon__Eylwr svg {\n    width: 18px;\n    height: 18px; }\n\n.Button-module_endIcon__pCffL {\n  display: inherit;\n  margin-left: 8px; }\n  .Button-module_endIcon__pCffL svg {\n    width: 18px;\n    height: 18px; }\n";
+var styles$O = {"button":"Button-module_button__qeIer","shadow":"Button-module_shadow__6N2nE","block":"Button-module_block__JIazf","disabled":"Button-module_disabled__jiOqa","btnContained":"Button-module_btnContained__16y5l","primary":"Button-module_primary__EUyOu","accent":"Button-module_accent__opVgQ","secondary":"Button-module_secondary__zKoGk","light":"Button-module_light__LXeZy","dark":"Button-module_dark__5oFOT","btnText":"Button-module_btnText__N5Gys","btnOutline":"Button-module_btnOutline__CCFPI","startIcon":"Button-module_startIcon__Eylwr","endIcon":"Button-module_endIcon__pCffL"};
 styleInject(css_248z$O);
 
 const Button = (props) => {
-    const { children, variant = exports.VARIANT.contained, color = exports.COLOR.primary, isRounded, isActive, className, startIcon, endIcon, shadow = true } = props, rest = __rest(props, ["children", "variant", "color", "isRounded", "isActive", "className", "startIcon", "endIcon", "shadow"]);
+    const { children, variant = exports.VARIANT.contained, color = exports.COLOR.primary, isRounded, isActive, className, startIcon, endIcon, shadow = true, block } = props, rest = __rest(props, ["children", "variant", "color", "isRounded", "isActive", "className", "startIcon", "endIcon", "shadow", "block"]);
     const getCssClasses = () => {
         const cssClasses = [];
         cssClasses.push(styles$O.button);
@@ -542,6 +542,7 @@ const Button = (props) => {
             cssClasses.push('active');
         }
         shadow && cssClasses.push(styles$O.shadow);
+        block && cssClasses.push(styles$O.block);
         className && cssClasses.push(className);
         return cssClasses.filter(css => css).join(' ');
     };
@@ -2238,7 +2239,7 @@ const Stepper = (props) => {
             React__default["default"].createElement(StepperActions, { className: "mt-3", isFirstStep: activeIndex === 0, isStepOptional: isStepOptional(activeIndex), isCompleted: isLastStep(), onBack: handleBack, onSkip: handleSkip, onNext: handleNext, onReset: handleReset }))));
 };
 
-var css_248z$8 = ".Typography-module_typography__sw-td {\n  text-overflow: ellipsis;\n  font-family: var(--fontFamily); }\n\nh1 {\n  font-size: 2.5rem; }\n\nh2 {\n  font-size: 2rem; }\n\nh3 {\n  font-size: 1.75rem; }\n\nh4 {\n  font-size: 1.5rem; }\n\nh5 {\n  font-size: 1.25rem; }\n\nh6 {\n  font-size: 1rem; }\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  font-weight: 500 !important;\n  margin-top: 0;\n  margin-bottom: 0.5rem;\n  line-height: 1.2; }\n";
+var css_248z$8 = ".Typography-module_typography__sw-td {\n  text-overflow: ellipsis;\n  font-family: var(--fontFamily); }\n\nh1 {\n  font-size: calc(1.375rem + 1.5vw); }\n\nh2 {\n  font-size: calc(1.325rem + 0.9vw); }\n\nh3 {\n  font-size: calc(1.3rem + 0.6vw); }\n\nh4 {\n  font-size: calc(1.275rem + 0.3vw); }\n\nh5 {\n  font-size: 1.25rem; }\n\nh6 {\n  font-size: 1rem; }\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  font-weight: 500 !important;\n  margin-top: 0;\n  margin-bottom: 0.5rem;\n  line-height: 1.2; }\n";
 var styles$8 = {"typography":"Typography-module_typography__sw-td"};
 styleInject(css_248z$8);
 
@@ -2585,7 +2586,7 @@ const TimeSelect = (props) => {
                 React__default["default"].createElement(MilliSecondSelect, { value: currDate.getMilliseconds(), disabled: disabled, onChange: e => handleOnChange(e, exports.TIMEMODE.MILLISECONDS) }))));
 };
 
-var css_248z$1 = ".TreeView-module_treeView__VVj-4 {\n  list-style-type: none;\n  margin-bottom: 0;\n  padding-left: 0px !important; }\n  .TreeView-module_treeView__VVj-4 ul {\n    padding-left: 48px !important; }\n";
+var css_248z$1 = ".TreeView-module_treeView__VVj-4 {\n  list-style-type: none;\n  margin-bottom: 0;\n  padding-left: 0px !important;\n  margin-block-start: 0;\n  margin-block-end: 0;\n  margin-inline-start: 0px;\n  margin-inline-end: 0px;\n  padding-inline-start: 0px; }\n  .TreeView-module_treeView__VVj-4 ul {\n    padding-left: 48px !important; }\n";
 var styles$1 = {"treeView":"TreeView-module_treeView__VVj-4"};
 styleInject(css_248z$1);
 
@@ -2632,9 +2633,9 @@ const TreeItem = (props) => {
     };
     return (React__default["default"].createElement("li", { className: getCssClasses(), style: { paddingLeft: `${(48 * (children ? 0 : 1))}px` } },
         React__default["default"].createElement("div", { className: "d-flex align-items-center" },
-            children &&
+            children && nodeId &&
                 React__default["default"].createElement(IconButton, { onClick: () => handleOnToggleExpand(nodeId), icon: !_isExpanded ? React__default["default"].createElement(ChevronRightSolidIcon, null) : React__default["default"].createElement(ChevronDownSolidIcon, null) }),
-            isSelectable &&
+            isSelectable && nodeId &&
                 React__default["default"].createElement(Checkbox, { checked: _isSelected, onChange: () => handleOnSelect(nodeId) }),
             label),
         children && _isExpanded ? React__default["default"].createElement("ul", null, children) : null));

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "react-asc",
-	"version": "21.0.0",
+	"version": "21.0.4",
 	"description": "handcrafted react components",
 	"main": "index.js",
 	"module": "index.es.js",

package/react-asc.scss

@@ -1,3 +1,17 @@
+: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;
@@ -35,121 +49,182 @@
 	--bodyBg: white;
 	--bodyColor: #212529;
 
-	--borderRadius: 5px;
+	--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);
+	0px 1px 5px 0px rgba(0, 0, 0, 0.12);
 
-	--buttonMinWidth: 62px;
-	--buttonPadding: 11px 15px;
+	--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;
 
-	--highlight: rgba(204, 216, 224, 0.2); // ???
+	--fontLineHeight: 1.5;
+}
 
-	--breakpointMd: 768px;
+:root {
+	.ml-0 {
+		margin-left: var(--0);
+	}
 
-	--bodyLineHeight: 1.5;
+	.ml-1 {
+		margin-left: var(--1);
+	}
 
-	--breakpoint-xs: 0;
-	--breakpoint-sm: 576px;
-	--breakpoint-md: 768px;
-	--breakpoint-lg: 992px;
-	--breakpoint-xl: 1200px;
-	--breakpoint-xxl: 1400px;
-}
+	.ml-2 {
+		margin-left: var(--2);
+	}
 
-.input-group-append {
-	.btn {
-		min-width: auto;
+	.ml-3 {
+		margin-left: var(--3);
+	}
 
-		.svg-icon {
-			margin-left: 0;
-			margin-right: 0;
-		}
+	.ml-auto {
+		margin-left: var(--auto);
 	}
-}
 
-.text-muted {
-	color: #6c757d !important;
-}
+	.mr-0 {
+		margin-right: var(--0);
+	}
 
-.ml-0 {
-	margin-left: 0px !important;
-}
+	.mr-1 {
+		margin-right: var(--1);
+	}
 
-.ml-1 {
-	margin-left: 10px !important;
-}
+	.mr-2 {
+		margin-right: var(--2);
+	}
 
-.ml-2 {
-	margin-left: 20px !important;
-}
+	.mr-3 {
+		margin-right: var(--3);
+	}
 
-.ml-3 {
-	margin-left: 30px !important;
-}
+	.mr-auto {
+		margin-right: var(--auto);
+	}
 
-.ml-auto {
-	margin-left: auto !important;
-}
+	.mt-0 {
+		margin-top: var(--0);
+	}
 
-.mr-0 {
-	margin-right: 0px !important;
-}
+	.mt-1 {
+		margin-top: var(--1);
+	}
 
-.mr-1 {
-	margin-right: 10px !important;
-}
+	.mt-2 {
+		margin-top: var(--2);
+	}
 
-.mr-2 {
-	margin-right: 20px !important;
-}
+	.mt-3 {
+		margin-top: var(--3);
+	}
 
-.mr-3 {
-	margin-right: 30px !important;
-}
+	.mt-4 {
+		margin-top: var(--4);
+	}
 
-.mr-auto {
-	margin-right: auto !important;
-}
+	.mb-0 {
+		margin-bottom: var(--0);
+	}
 
-.mt-0 {
-	margin-top: 0px !important;
-}
+	.mb-1 {
+		margin-bottom: var(--1);
+	}
 
-.mt-1 {
-	margin-top: 10px !important;
-}
+	.mb-2 {
+		margin-bottom: var(--2);
+	}
 
-.mt-2 {
-	margin-top: 20px !important;
+	.mb-3 {
+		margin-bottom: var(--3);
+	}
 }
 
-.mt-3 {
-	margin-top: 30px !important;
-}
+:root {
+	.pt-1 {
+		padding-top: var(--1);
+	}
 
-.mt-4 {
-    margin-top: 40px!important;
-}
+	.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);
+	}
 
-.mb-0 {
-	margin-bottom: 0px !important;
+	.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);
+	}
 }
 
-.mb-1 {
-	margin-bottom: 10px !important;
+:root {
+	--borderRadius: 5px;
+	--0: 0px !important;
+	--1: 15px !important;
+	--2: 25px !important;
+	--3: 35px !important;
+	--4: 45px !important;
+	--auto: auto !important;
 }
 
-.mb-2 {
-	margin-bottom: 20px !important;
+.input-group-append {
+	.btn {
+		min-width: auto;
+
+		.svg-icon {
+			margin-left: 0;
+			margin-right: 0;
+		}
+	}
 }
 
-.mb-3 {
-	margin-bottom: 30px !important;
+.text-muted {
+	color: var(--muted);
 }
 
 .d-flex {
@@ -171,12 +246,15 @@
 .flex-row {
 	flex-direction: row;
 }
+
 .flex-row-reverse {
 	flex-direction: row-reverse;
 }
+
 .flex-column {
 	flex-direction: column;
 }
+
 .flex-column-reverse {
 	flex-direction: column-reverse;
 }
@@ -189,54 +267,16 @@
 	height: 100%;
 }
 
-.pt-1 {
-	padding-top: 10px !important;
-}
 
-.pt-2 {
-	padding-top: 20px !important;
-}
 
-.pt-3 {
-	padding-top: 30px !important;
-}
-
-
-
-.pb-1 {
-	padding-bottom: 10px !important;
-}
-
-.pb-2 {
-	padding-bottom: 20px !important;
-}
-
-.pb-3 {
-	padding-bottom: 30px !important;
-}
-
-.pb-4 {
-	padding-bottom: 40px !important;
-}
-
-.p-3 {
-    padding: 1rem!important;
-}
-
-.pt-0 {
-	padding-top: 0px !important;
-}
-
-
-.pb-0 {
-	padding-bottom: 0px !important;
+.text-center {
+	text-align: center;
 }
 
 .rounded-pill {
-    border-radius: 50rem!important;
+	border-radius: 50rem !important;
 }
 
-
 @media (max-width: 576px) {
 	.flex-row {
 		flex-direction: column !important;
@@ -244,10 +284,10 @@
 }
 @media (min-width: 768px) {
 	.justify-content-md-center {
-		justify-content: center!important;
+		justify-content: center !important;
 	}
 	.align-items-md-center {
-		align-items: center!important;
+		align-items: center !important;
 	}
 }
 

package/readme.md

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