react-asc 22.0.0 → 23.2.0

package/components/ExpansionPanel/ExpansionPanel.d.ts

@@ -3,6 +3,7 @@ export interface IExpansionPanelProps {
     header: ReactNode;
     children: ReactNode;
     isExpanded?: boolean;
+    shadow?: boolean;
     onChange?: (event: React.MouseEvent, isExpanded: boolean) => void;
 }
 export declare const ExpansionPanel: (props: IExpansionPanelProps) => JSX.Element;

package/components/FloatingActionButton/FloatingActionButton.d.ts

@@ -7,6 +7,7 @@ export interface IFloatingActionButtonProps extends React.DetailedHTMLProps<Reac
     fixed?: boolean;
     isActive?: boolean;
     disabled?: boolean;
+    position?: 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom';
     onClick?: (e: React.MouseEvent) => void;
 }
 export declare const FloatingActionButton: (props: IFloatingActionButtonProps) => JSX.Element;

package/components/Typography/Typography.d.ts

@@ -3,8 +3,10 @@ export interface IWrapperProps {
     as?: string;
     children: React.ReactNode;
     className?: string;
+    wrap?: boolean;
 }
 export interface ITypographyProps extends React.ComponentProps<"span"> {
     as?: string;
+    wrap?: boolean;
 }
-export declare const Typography: ({ children, as, ...rest }: ITypographyProps) => JSX.Element;
+export declare const Typography: ({ children, as, wrap, ...rest }: ITypographyProps) => JSX.Element;

package/hooks/index.d.ts

@@ -1,5 +1,6 @@
-export * from './useWindowSize';
-export * from './useHover';
-export * from './useConstructor';
 export * from './useDebounce';
+export * from './useConstructor';
 export * from './useCssClasses';
+export * from './useHover';
+export * from './useMobileDetect';
+export * from './useWindowSize';

package/hooks/useMobileDetect.d.ts

@@ -0,0 +1,3 @@
+export declare function useMobileDetect(): {
+    isMobile: boolean;
+};

package/index.es.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef, Fragment, Component, createRef, cloneElement, createContext, useContext } from 'react';
+import React, { useRef, useEffect, useState, Fragment, Component, createRef, cloneElement, createContext, useContext } from 'react';
 import { createPortal, render, unmountComponentAtNode } from 'react-dom';
 import { createPopper } from '@popperjs/core';
 
@@ -224,23 +224,25 @@ const CircleSolidIcon = () => (React.createElement("svg", { "aria-hidden": "true
 const ChevronLeftSolidIcon = () => (React.createElement("svg", { "aria-hidden": "true", focusable: "false", role: "img", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 320 512" },
     React.createElement("path", { fill: "currentColor", d: "M34.52 239.03L228.87 44.69c9.37-9.37 24.57-9.37 33.94 0l22.67 22.67c9.36 9.36 9.37 24.52.04 33.9L131.49 256l154.02 154.75c9.34 9.38 9.32 24.54-.04 33.9l-22.67 22.67c-9.37 9.37-24.57 9.37-33.94 0L34.52 272.97c-9.37-9.37-9.37-24.57 0-33.94z" })));
 
-function useWindowSize() {
-    const [windowSize, setWindowSize] = useState({
-        width: 0,
-        height: 0,
-    });
+function useDebounce(callback, timeout, deps) {
+    const timeoutId = useRef();
     useEffect(() => {
-        function handleResize() {
-            setWindowSize({
-                width: window.innerWidth,
-                height: window.innerHeight,
-            });
-        }
-        window.addEventListener("resize", handleResize);
-        handleResize();
-        return () => window.removeEventListener("resize", handleResize);
-    }, []);
-    return windowSize;
+        clearTimeout(timeoutId.current);
+        timeoutId.current = setTimeout(callback, timeout);
+        return () => clearTimeout(timeoutId.current);
+    }, deps);
+}
+
+const useConstructor = (callBack) => {
+    const [hasBeenCalled, setHasBeenCalled] = useState(false);
+    if (hasBeenCalled)
+        return;
+    callBack();
+    setHasBeenCalled(true);
+};
+
+function useCssClasses(cssClasses) {
+    return [(cssClasses === null || cssClasses === void 0 ? void 0 : cssClasses.filter(css => css).join(' ')) || ''];
 }
 
 function useHover() {
@@ -265,26 +267,37 @@ function useHover() {
     return [ref, value];
 }
 
-const useConstructor = (callBack) => {
-    const [hasBeenCalled, setHasBeenCalled] = useState(false);
-    if (hasBeenCalled)
-        return;
-    callBack();
-    setHasBeenCalled(true);
-};
-
-function useDebounce(callback, timeout, deps) {
-    const timeoutId = useRef();
+function useWindowSize() {
+    const [windowSize, setWindowSize] = useState({
+        width: 0,
+        height: 0,
+    });
     useEffect(() => {
-        clearTimeout(timeoutId.current);
-        timeoutId.current = setTimeout(callback, timeout);
-        return () => clearTimeout(timeoutId.current);
-    }, deps);
+        function handleResize() {
+            setWindowSize({
+                width: window.innerWidth,
+                height: window.innerHeight,
+            });
+        }
+        window.addEventListener("resize", handleResize);
+        handleResize();
+        return () => window.removeEventListener("resize", handleResize);
+    }, []);
+    return windowSize;
 }
 
-function useCssClasses(cssClasses) {
-    const cssClassName = (cssClasses === null || cssClasses === void 0 ? void 0 : cssClasses.filter(css => css).join(' ')) || '';
-    return [cssClassName];
+function useMobileDetect() {
+    const [isMobile, setIsMobile] = useState(false);
+    const windowSize = useWindowSize();
+    const checkIsMobile = (height, width) => {
+        if (height > 0 && width > 0) {
+            setIsMobile(!(width >= 1024));
+        }
+    };
+    useEffect(() => {
+        windowSize && checkIsMobile(windowSize.height, windowSize.width);
+    }, [windowSize]);
+    return { isMobile };
 }
 
 var css_248z$X = ".Backdrop-module_backdrop__IRMoL {\n  height: 100%;\n  width: 100%;\n  position: absolute;\n  opacity: 0.5;\n  z-index: 1040;\n  top: 0;\n  left: 0;\n  background-color: #000; }\n  .Backdrop-module_backdrop__IRMoL.Backdrop-module_isTransparent__F5nA5 {\n    opacity: 0; }\n";
@@ -484,21 +497,22 @@ styleInject(css_248z$P);
 
 const Badge = (props) => {
     const { children, content, className, color = COLOR.primary } = props, rest = __rest(props, ["children", "content", "className", "color"]);
-    const getCssClassesBadgeContainer = () => {
-        const cssClasses = [];
-        cssClasses.push(styles$P.badgeContainer);
-        className && cssClasses.push(className);
-        return cssClasses.filter(css => css).join(' ');
-    };
-    const getCssClassesBadge = () => {
-        const cssClasses = [];
-        cssClasses.push(styles$P.badge);
-        cssClasses.push(styles$P[color]);
-        return cssClasses.filter(css => css).join(' ');
-    };
-    return (React.createElement("div", Object.assign({ className: getCssClassesBadgeContainer() }, rest),
+    const [cssClassName] = useCssClasses([
+        styles$P.badge,
+        styles$P[color],
+        className
+    ]);
+    return (React.createElement(BadgeContainer, null,
         children,
-        React.createElement("span", { className: getCssClassesBadge() }, content)));
+        React.createElement("span", Object.assign({ className: cssClassName }, rest), content)));
+};
+const BadgeContainer = (props) => {
+    const { children, className } = props, rest = __rest(props, ["children", "className"]);
+    const [cssClassName] = useCssClasses([
+        styles$P.badgeContainer,
+        className,
+    ]);
+    return (React.createElement("div", Object.assign({ className: cssClassName }, rest), children));
 };
 
 var css_248z$O = ".Button-module_button__qeIer {\n  text-transform: uppercase;\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:not(:disabled) {\n    cursor: pointer; }\n  .Button-module_button__qeIer:focus:not(:disabled) {\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:not(:disabled) {\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:not(:disabled) {\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:not(:disabled) {\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:not(:disabled) {\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:not(:disabled) {\n    background-color: var(--dark-dark); }\n\n.Button-module_btnContained__16y5l:disabled {\n  color: rgba(0, 0, 0, 0.26);\n  box-shadow: none;\n  background-color: rgba(0, 0, 0, 0.12); }\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); }\n    .Button-module_btnText__N5Gys.Button-module_primary__EUyOu:hover:not(:disabled) {\n      text-decoration: none;\n      background: var(--primary-highlight); }\n  .Button-module_btnText__N5Gys.Button-module_secondary__zKoGk {\n    color: var(--secondary); }\n    .Button-module_btnText__N5Gys.Button-module_secondary__zKoGk:hover:not(:disabled) {\n      text-decoration: none;\n      background: var(--secondary-highlight); }\n  .Button-module_btnText__N5Gys.Button-module_accent__opVgQ {\n    color: var(--accent); }\n    .Button-module_btnText__N5Gys.Button-module_accent__opVgQ:hover:not(:disabled) {\n      text-decoration: none;\n      background: var(--accent-highlight); }\n  .Button-module_btnText__N5Gys.Button-module_light__LXeZy {\n    color: var(--light-contrast-text); }\n    .Button-module_btnText__N5Gys.Button-module_light__LXeZy:hover:not(:disabled) {\n      text-decoration: none;\n      background: var(--light-highlight); }\n  .Button-module_btnText__N5Gys.Button-module_dark__5oFOT {\n    color: var(--dark); }\n    .Button-module_btnText__N5Gys.Button-module_dark__5oFOT:hover:not(:disabled) {\n      text-decoration: none;\n      background: var(--dark-highlight); }\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);\n    border-color: var(--primary); }\n    .Button-module_btnOutline__CCFPI.Button-module_primary__EUyOu:hover:not(:disabled) {\n      background: var(--primary-highlight); }\n  .Button-module_btnOutline__CCFPI.Button-module_secondary__zKoGk {\n    color: var(--secondary);\n    border-color: var(--secondary); }\n    .Button-module_btnOutline__CCFPI.Button-module_secondary__zKoGk:hover:not(:disabled) {\n      background: var(--secondary-highlight); }\n  .Button-module_btnOutline__CCFPI.Button-module_accent__opVgQ {\n    color: var(--accent);\n    border-color: var(--accent); }\n    .Button-module_btnOutline__CCFPI.Button-module_accent__opVgQ:hover:not(:disabled) {\n      background: var(--accent-highlight); }\n  .Button-module_btnOutline__CCFPI.Button-module_light__LXeZy {\n    color: var(--light-contrast-text);\n    border-color: var(--light); }\n    .Button-module_btnOutline__CCFPI.Button-module_light__LXeZy:hover:not(:disabled) {\n      background: var(--light-highlight); }\n  .Button-module_btnOutline__CCFPI.Button-module_dark__5oFOT {\n    color: var(--dark);\n    border-color: var(--dark); }\n    .Button-module_btnOutline__CCFPI.Button-module_dark__5oFOT:hover:not(:disabled) {\n      background: var(--dark-highlight); }\n  .Button-module_btnOutline__CCFPI:disabled {\n    color: rgba(0, 0, 0, 0.26);\n    border: 1px solid rgba(0, 0, 0, 0.12); }\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";
@@ -557,7 +571,7 @@ const ButtonGroup = (props) => {
     return (React.createElement("div", Object.assign({ className: getCssClasses(), role: "group" }, rest), children));
 };
 
-var css_248z$M = ".Breadcrumb-module_breadcrumb__-pvAn {\n  display: flex;\n  flex-wrap: wrap;\n  padding: 0;\n  margin-bottom: 0;\n  list-style: none;\n  margin-bottom: 1rem; }\n";
+var css_248z$M = ".Breadcrumb-module_breadcrumb__-pvAn {\n  display: flex;\n  flex-wrap: wrap;\n  padding: 0;\n  list-style: none;\n  margin: 0; }\n";
 var styles$M = {"breadcrumb":"Breadcrumb-module_breadcrumb__-pvAn"};
 styleInject(css_248z$M);
 
@@ -1646,12 +1660,12 @@ const ExpansionPanelHeader = (props) => {
             React.createElement(Icon, null, isExpanded ? React.createElement(ChevronUpSolidIcon, null) : React.createElement(ChevronDownSolidIcon, null)))));
 };
 
-var css_248z$n = ".ExpansionPanel-module_expansionPanel__m1yQq {\n  background-color: var(--white);\n  box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);\n  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; }\n  .ExpansionPanel-module_expansionPanel__m1yQq:first-child {\n    border-top-left-radius: 4px;\n    border-top-right-radius: 4px; }\n  .ExpansionPanel-module_expansionPanel__m1yQq:last-child {\n    border-bottom-left-radius: 4px;\n    border-bottom-right-radius: 4px; }\n  .ExpansionPanel-module_expansionPanel__m1yQq.ExpansionPanel-module_isExpanded__TS1ph {\n    margin: 16px 0; }\n    .ExpansionPanel-module_expansionPanel__m1yQq.ExpansionPanel-module_isExpanded__TS1ph:first-child {\n      margin-top: 0; }\n    .ExpansionPanel-module_expansionPanel__m1yQq.ExpansionPanel-module_isExpanded__TS1ph:last-child {\n      margin-bottom: 0; }\n";
-var styles$n = {"expansionPanel":"ExpansionPanel-module_expansionPanel__m1yQq","isExpanded":"ExpansionPanel-module_isExpanded__TS1ph"};
+var css_248z$n = ".ExpansionPanel-module_expansionPanel__m1yQq {\n  background-color: var(--white);\n  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; }\n  .ExpansionPanel-module_expansionPanel__m1yQq.ExpansionPanel-module_shadow__zIjJ6 {\n    box-shadow: var(--shadow); }\n  .ExpansionPanel-module_expansionPanel__m1yQq:first-child {\n    border-top-left-radius: 4px;\n    border-top-right-radius: 4px; }\n  .ExpansionPanel-module_expansionPanel__m1yQq:last-child {\n    border-bottom-left-radius: 4px;\n    border-bottom-right-radius: 4px; }\n  .ExpansionPanel-module_expansionPanel__m1yQq.ExpansionPanel-module_isExpanded__TS1ph:first-child {\n    margin-top: 0; }\n  .ExpansionPanel-module_expansionPanel__m1yQq.ExpansionPanel-module_isExpanded__TS1ph:last-child {\n    margin-bottom: 0; }\n";
+var styles$n = {"expansionPanel":"ExpansionPanel-module_expansionPanel__m1yQq","shadow":"ExpansionPanel-module_shadow__zIjJ6","isExpanded":"ExpansionPanel-module_isExpanded__TS1ph"};
 styleInject(css_248z$n);
 
 const ExpansionPanel = (props) => {
-    const { header, children, isExpanded = false, onChange } = props;
+    const { header, children, isExpanded = false, shadow, onChange } = props;
     const [_isExpanded, setIsExpanded] = useState(false);
     useEffect(() => {
         setIsExpanded(isExpanded);
@@ -1662,6 +1676,7 @@ const ExpansionPanel = (props) => {
         if (_isExpanded) {
             cssClasses.push(styles$n.isExpanded);
         }
+        shadow && cssClasses.push(styles$n.shadow);
         return cssClasses.filter(css => css).join(' ');
     };
     const handleClickHeader = (event) => {
@@ -1674,16 +1689,17 @@ const ExpansionPanel = (props) => {
             React.createElement(ExpansionPanelContent, null, children)));
 };
 
-var css_248z$m = ".FloatingActionButton-module_fab__Rw3kd {\n  box-shadow: var(--shadow); }\n  .FloatingActionButton-module_fab__Rw3kd.FloatingActionButton-module_fixed__XQOkG {\n    position: fixed;\n    bottom: 16px;\n    right: 16px;\n    z-index: 1000; }\n";
-var styles$m = {"fab":"FloatingActionButton-module_fab__Rw3kd","fixed":"FloatingActionButton-module_fixed__XQOkG"};
+var css_248z$m = ".FloatingActionButton-module_fab__Rw3kd {\n  box-shadow: var(--shadow); }\n\n.FloatingActionButton-module_fixed__XQOkG {\n  position: fixed;\n  z-index: 1000; }\n  .FloatingActionButton-module_fixed__XQOkG.FloatingActionButton-module_leftTop__ZiHQN {\n    top: 16px;\n    left: 16px; }\n  .FloatingActionButton-module_fixed__XQOkG.FloatingActionButton-module_leftBottom__210sl {\n    bottom: 16px;\n    left: 16px; }\n  .FloatingActionButton-module_fixed__XQOkG.FloatingActionButton-module_rightTop__VUsvT {\n    top: 64px;\n    right: 16px; }\n  .FloatingActionButton-module_fixed__XQOkG.FloatingActionButton-module_rightBottom__FaUFl {\n    bottom: 16px;\n    right: 16px; }\n";
+var styles$m = {"fab":"FloatingActionButton-module_fab__Rw3kd","fixed":"FloatingActionButton-module_fixed__XQOkG","leftTop":"FloatingActionButton-module_leftTop__ZiHQN","leftBottom":"FloatingActionButton-module_leftBottom__210sl","rightTop":"FloatingActionButton-module_rightTop__VUsvT","rightBottom":"FloatingActionButton-module_rightBottom__FaUFl"};
 styleInject(css_248z$m);
 
 const FloatingActionButton = (props) => {
-    const { className, icon, color = COLOR.primary, fixed, size = SIZE.lg, isActive, disabled, onClick } = props;
+    const { className, icon, color = COLOR.primary, fixed, position = 'rightBottom', size = SIZE.lg, isActive, disabled, onClick } = props;
     const getCssClasses = () => {
         const cssClasses = [];
         cssClasses.push(styles$m.fab);
-        fixed && cssClasses.push(styles$m['fixed']);
+        fixed && cssClasses.push(styles$m.fixed);
+        position && fixed && cssClasses.push(styles$m[position]);
         className && cssClasses.push(className);
         return cssClasses.filter(css => css).join(' ');
     };
@@ -2285,24 +2301,25 @@ 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: 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"};
+var css_248z$8 = ".Typography-module_typography__sw-td {\n  font-family: var(--fontFamily); }\n  .Typography-module_typography__sw-td.Typography-module_wrap__W7G0R {\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis; }\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","wrap":"Typography-module_wrap__W7G0R"};
 styleInject(css_248z$8);
 
 const Wrapper = (props) => {
-    const { as = 'span', children, className } = props, rest = __rest(props, ["as", "children", "className"]);
+    const { as = 'span', wrap, children, className } = props, rest = __rest(props, ["as", "wrap", "children", "className"]);
     const getCssClasses = () => {
         const cssClasses = [];
         cssClasses.push(styles$8.typography);
         cssClasses.push(styles$8.as);
+        wrap && cssClasses.push(styles$8.wrap);
         className && cssClasses.push(className);
         return cssClasses.filter(css => css).join(' ');
     };
     return React.createElement(as, Object.assign(Object.assign({}, rest), { className: getCssClasses() }), children);
 };
 const Typography = (_a) => {
-    var { children, as = 'span' } = _a, rest = __rest(_a, ["children", "as"]);
-    return (React.createElement(Wrapper, Object.assign({ as: as }, rest), children));
+    var { children, as = 'span', wrap } = _a, rest = __rest(_a, ["children", "as", "wrap"]);
+    return (React.createElement(Wrapper, Object.assign({ as: as, wrap: wrap }, rest), children));
 };
 
 var css_248z$7 = ".Step-module_stepWrapper__IQwq1 {\n  display: flex;\n  align-items: center;\n  padding-left: 8px;\n  padding-right: 8px;\n  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; }\n  .Step-module_stepWrapper__IQwq1.Step-module_hasLabel__LZNvd:not(.Step-module_disabled__JnxUP):hover {\n    cursor: pointer;\n    background-color: rgba(0, 0, 0, 0.04);\n    border-radius: var(--borderRadius); }\n\n.Step-module_step__k42go {\n  width: 40px;\n  height: 40px;\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; }\n  .Step-module_step__k42go:not(.Step-module_hasLabel__LZNvd):not(.Step-module_disabled__JnxUP):hover {\n    border-radius: 100%;\n    cursor: pointer;\n    background-color: rgba(0, 0, 0, 0.04); }\n  .Step-module_step__k42go.Step-module_hasLabel__LZNvd svg {\n    width: 18px !important;\n    height: 18px !important; }\n\n.Step-module_stepIconCircle__hnxIV svg {\n  width: 24px;\n  height: 24px; }\n\n.Step-module_stepValue__B0-xv {\n  position: absolute;\n  color: var(--secondary-contrast-text); }\n  .Step-module_stepValue__B0-xv .Step-module_isActive__3GGcl {\n    color: var(--primary-contrast-text); }\n";
@@ -2716,4 +2733,4 @@ const TreeItem = (props) => {
         children && _isExpanded ? React.createElement("ul", null, children) : null));
 };
 
-export { Alert, AppBar, AppBarTitle, AutoComplete, Backdrop, Badge, Breadcrumb, BreadcrumbItem, Button, ButtonGroup, COLOR, Card, CardBody, CardFooter, CardImage, CardSubtitle, CardText, CardTitle, CaretDownSolidIcon, CheckSolidIcon, CheckSquareRegularIcon, Checkbox, ChevronDownSolidIcon, ChevronLeftSolidIcon, ChevronRightSolidIcon, ChevronUpSolidIcon, Chip, CircleSolidIcon, Column, ConditionalWrapper, CssTransition, DATEMODE, DateSelect, DaySelect, Drawer, EmailValidator, ExpansionPanel, ExpansionPanelContent, ExpansionPanelHeader, FileInput, FloatingActionButton, Form, FormControl, FormError, FormGroup, FormHint, FormInput, FormLabel, GlobalModal, HomeSolidIcon, HourSelect, Icon, IconButton, IsEmptyValidator, IsEqualValidator, Link, List, ListItem, ListItemAction, ListItemAvatar, ListItemIcon, ListItemText, LoadingIndicator, LoadingIndicatorContainer, MODALBUTTONTYPE, MODALTYPE, Menu, MenuBody, MenuDivider, MenuItem, MenuToggle, MilliSecondSelect, MinuteSelect, Modal, ModalBody, ModalFooter, ModalHeader, MonthSelect, NumberSelect, POSITION, PlusSolidIcon, Row, SIZE, STATUS, SecondSelect, Select, Sidebar, Snackbar, SpeedDial, SpeedDialAction, SpeedDialIcon, SpinnerSolidIcon, SquareRegularIcon, Step, Stepper, StepperActions, TIMEMODE, Tab, TabPanel, Table, TableBody, TableCell, TableHead, TableRow, Tabs, Textarea, TimeSelect, TimesCircleSolidIcon, TimesSolidIcon, Tooltip, TreeItem, TreeView, Typography, VARIANT, YearSelect, loadingIndicatorService, modalService, snackbarService, useConstructor, useCssClasses, useDebounce, useHover, useWindowSize };
+export { Alert, AppBar, AppBarTitle, AutoComplete, Backdrop, Badge, Breadcrumb, BreadcrumbItem, Button, ButtonGroup, COLOR, Card, CardBody, CardFooter, CardImage, CardSubtitle, CardText, CardTitle, CaretDownSolidIcon, CheckSolidIcon, CheckSquareRegularIcon, Checkbox, ChevronDownSolidIcon, ChevronLeftSolidIcon, ChevronRightSolidIcon, ChevronUpSolidIcon, Chip, CircleSolidIcon, Column, ConditionalWrapper, CssTransition, DATEMODE, DateSelect, DaySelect, Drawer, EmailValidator, ExpansionPanel, ExpansionPanelContent, ExpansionPanelHeader, FileInput, FloatingActionButton, Form, FormControl, FormError, FormGroup, FormHint, FormInput, FormLabel, GlobalModal, HomeSolidIcon, HourSelect, Icon, IconButton, IsEmptyValidator, IsEqualValidator, Link, List, ListItem, ListItemAction, ListItemAvatar, ListItemIcon, ListItemText, LoadingIndicator, LoadingIndicatorContainer, MODALBUTTONTYPE, MODALTYPE, Menu, MenuBody, MenuDivider, MenuItem, MenuToggle, MilliSecondSelect, MinuteSelect, Modal, ModalBody, ModalFooter, ModalHeader, MonthSelect, NumberSelect, POSITION, PlusSolidIcon, Row, SIZE, STATUS, SecondSelect, Select, Sidebar, Snackbar, SpeedDial, SpeedDialAction, SpeedDialIcon, SpinnerSolidIcon, SquareRegularIcon, Step, Stepper, StepperActions, TIMEMODE, Tab, TabPanel, Table, TableBody, TableCell, TableHead, TableRow, Tabs, Textarea, TimeSelect, TimesCircleSolidIcon, TimesSolidIcon, Tooltip, TreeItem, TreeView, Typography, VARIANT, YearSelect, loadingIndicatorService, modalService, snackbarService, useConstructor, useCssClasses, useDebounce, useHover, useMobileDetect, useWindowSize };

package/index.js

@@ -232,23 +232,25 @@ const CircleSolidIcon = () => (React__default["default"].createElement("svg", {
 const ChevronLeftSolidIcon = () => (React__default["default"].createElement("svg", { "aria-hidden": "true", focusable: "false", role: "img", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 320 512" },
     React__default["default"].createElement("path", { fill: "currentColor", d: "M34.52 239.03L228.87 44.69c9.37-9.37 24.57-9.37 33.94 0l22.67 22.67c9.36 9.36 9.37 24.52.04 33.9L131.49 256l154.02 154.75c9.34 9.38 9.32 24.54-.04 33.9l-22.67 22.67c-9.37 9.37-24.57 9.37-33.94 0L34.52 272.97c-9.37-9.37-9.37-24.57 0-33.94z" })));
 
-function useWindowSize() {
-    const [windowSize, setWindowSize] = React.useState({
-        width: 0,
-        height: 0,
-    });
+function useDebounce(callback, timeout, deps) {
+    const timeoutId = React.useRef();
     React.useEffect(() => {
-        function handleResize() {
-            setWindowSize({
-                width: window.innerWidth,
-                height: window.innerHeight,
-            });
-        }
-        window.addEventListener("resize", handleResize);
-        handleResize();
-        return () => window.removeEventListener("resize", handleResize);
-    }, []);
-    return windowSize;
+        clearTimeout(timeoutId.current);
+        timeoutId.current = setTimeout(callback, timeout);
+        return () => clearTimeout(timeoutId.current);
+    }, deps);
+}
+
+const useConstructor = (callBack) => {
+    const [hasBeenCalled, setHasBeenCalled] = React.useState(false);
+    if (hasBeenCalled)
+        return;
+    callBack();
+    setHasBeenCalled(true);
+};
+
+function useCssClasses(cssClasses) {
+    return [(cssClasses === null || cssClasses === void 0 ? void 0 : cssClasses.filter(css => css).join(' ')) || ''];
 }
 
 function useHover() {
@@ -273,26 +275,37 @@ function useHover() {
     return [ref, value];
 }
 
-const useConstructor = (callBack) => {
-    const [hasBeenCalled, setHasBeenCalled] = React.useState(false);
-    if (hasBeenCalled)
-        return;
-    callBack();
-    setHasBeenCalled(true);
-};
-
-function useDebounce(callback, timeout, deps) {
-    const timeoutId = React.useRef();
+function useWindowSize() {
+    const [windowSize, setWindowSize] = React.useState({
+        width: 0,
+        height: 0,
+    });
     React.useEffect(() => {
-        clearTimeout(timeoutId.current);
-        timeoutId.current = setTimeout(callback, timeout);
-        return () => clearTimeout(timeoutId.current);
-    }, deps);
+        function handleResize() {
+            setWindowSize({
+                width: window.innerWidth,
+                height: window.innerHeight,
+            });
+        }
+        window.addEventListener("resize", handleResize);
+        handleResize();
+        return () => window.removeEventListener("resize", handleResize);
+    }, []);
+    return windowSize;
 }
 
-function useCssClasses(cssClasses) {
-    const cssClassName = (cssClasses === null || cssClasses === void 0 ? void 0 : cssClasses.filter(css => css).join(' ')) || '';
-    return [cssClassName];
+function useMobileDetect() {
+    const [isMobile, setIsMobile] = React.useState(false);
+    const windowSize = useWindowSize();
+    const checkIsMobile = (height, width) => {
+        if (height > 0 && width > 0) {
+            setIsMobile(!(width >= 1024));
+        }
+    };
+    React.useEffect(() => {
+        windowSize && checkIsMobile(windowSize.height, windowSize.width);
+    }, [windowSize]);
+    return { isMobile };
 }
 
 var css_248z$X = ".Backdrop-module_backdrop__IRMoL {\n  height: 100%;\n  width: 100%;\n  position: absolute;\n  opacity: 0.5;\n  z-index: 1040;\n  top: 0;\n  left: 0;\n  background-color: #000; }\n  .Backdrop-module_backdrop__IRMoL.Backdrop-module_isTransparent__F5nA5 {\n    opacity: 0; }\n";
@@ -492,21 +505,22 @@ styleInject(css_248z$P);
 
 const Badge = (props) => {
     const { children, content, className, color = exports.COLOR.primary } = props, rest = __rest(props, ["children", "content", "className", "color"]);
-    const getCssClassesBadgeContainer = () => {
-        const cssClasses = [];
-        cssClasses.push(styles$P.badgeContainer);
-        className && cssClasses.push(className);
-        return cssClasses.filter(css => css).join(' ');
-    };
-    const getCssClassesBadge = () => {
-        const cssClasses = [];
-        cssClasses.push(styles$P.badge);
-        cssClasses.push(styles$P[color]);
-        return cssClasses.filter(css => css).join(' ');
-    };
-    return (React__default["default"].createElement("div", Object.assign({ className: getCssClassesBadgeContainer() }, rest),
+    const [cssClassName] = useCssClasses([
+        styles$P.badge,
+        styles$P[color],
+        className
+    ]);
+    return (React__default["default"].createElement(BadgeContainer, null,
         children,
-        React__default["default"].createElement("span", { className: getCssClassesBadge() }, content)));
+        React__default["default"].createElement("span", Object.assign({ className: cssClassName }, rest), content)));
+};
+const BadgeContainer = (props) => {
+    const { children, className } = props, rest = __rest(props, ["children", "className"]);
+    const [cssClassName] = useCssClasses([
+        styles$P.badgeContainer,
+        className,
+    ]);
+    return (React__default["default"].createElement("div", Object.assign({ className: cssClassName }, rest), children));
 };
 
 var css_248z$O = ".Button-module_button__qeIer {\n  text-transform: uppercase;\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:not(:disabled) {\n    cursor: pointer; }\n  .Button-module_button__qeIer:focus:not(:disabled) {\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:not(:disabled) {\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:not(:disabled) {\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:not(:disabled) {\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:not(:disabled) {\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:not(:disabled) {\n    background-color: var(--dark-dark); }\n\n.Button-module_btnContained__16y5l:disabled {\n  color: rgba(0, 0, 0, 0.26);\n  box-shadow: none;\n  background-color: rgba(0, 0, 0, 0.12); }\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); }\n    .Button-module_btnText__N5Gys.Button-module_primary__EUyOu:hover:not(:disabled) {\n      text-decoration: none;\n      background: var(--primary-highlight); }\n  .Button-module_btnText__N5Gys.Button-module_secondary__zKoGk {\n    color: var(--secondary); }\n    .Button-module_btnText__N5Gys.Button-module_secondary__zKoGk:hover:not(:disabled) {\n      text-decoration: none;\n      background: var(--secondary-highlight); }\n  .Button-module_btnText__N5Gys.Button-module_accent__opVgQ {\n    color: var(--accent); }\n    .Button-module_btnText__N5Gys.Button-module_accent__opVgQ:hover:not(:disabled) {\n      text-decoration: none;\n      background: var(--accent-highlight); }\n  .Button-module_btnText__N5Gys.Button-module_light__LXeZy {\n    color: var(--light-contrast-text); }\n    .Button-module_btnText__N5Gys.Button-module_light__LXeZy:hover:not(:disabled) {\n      text-decoration: none;\n      background: var(--light-highlight); }\n  .Button-module_btnText__N5Gys.Button-module_dark__5oFOT {\n    color: var(--dark); }\n    .Button-module_btnText__N5Gys.Button-module_dark__5oFOT:hover:not(:disabled) {\n      text-decoration: none;\n      background: var(--dark-highlight); }\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);\n    border-color: var(--primary); }\n    .Button-module_btnOutline__CCFPI.Button-module_primary__EUyOu:hover:not(:disabled) {\n      background: var(--primary-highlight); }\n  .Button-module_btnOutline__CCFPI.Button-module_secondary__zKoGk {\n    color: var(--secondary);\n    border-color: var(--secondary); }\n    .Button-module_btnOutline__CCFPI.Button-module_secondary__zKoGk:hover:not(:disabled) {\n      background: var(--secondary-highlight); }\n  .Button-module_btnOutline__CCFPI.Button-module_accent__opVgQ {\n    color: var(--accent);\n    border-color: var(--accent); }\n    .Button-module_btnOutline__CCFPI.Button-module_accent__opVgQ:hover:not(:disabled) {\n      background: var(--accent-highlight); }\n  .Button-module_btnOutline__CCFPI.Button-module_light__LXeZy {\n    color: var(--light-contrast-text);\n    border-color: var(--light); }\n    .Button-module_btnOutline__CCFPI.Button-module_light__LXeZy:hover:not(:disabled) {\n      background: var(--light-highlight); }\n  .Button-module_btnOutline__CCFPI.Button-module_dark__5oFOT {\n    color: var(--dark);\n    border-color: var(--dark); }\n    .Button-module_btnOutline__CCFPI.Button-module_dark__5oFOT:hover:not(:disabled) {\n      background: var(--dark-highlight); }\n  .Button-module_btnOutline__CCFPI:disabled {\n    color: rgba(0, 0, 0, 0.26);\n    border: 1px solid rgba(0, 0, 0, 0.12); }\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";
@@ -565,7 +579,7 @@ const ButtonGroup = (props) => {
     return (React__default["default"].createElement("div", Object.assign({ className: getCssClasses(), role: "group" }, rest), children));
 };
 
-var css_248z$M = ".Breadcrumb-module_breadcrumb__-pvAn {\n  display: flex;\n  flex-wrap: wrap;\n  padding: 0;\n  margin-bottom: 0;\n  list-style: none;\n  margin-bottom: 1rem; }\n";
+var css_248z$M = ".Breadcrumb-module_breadcrumb__-pvAn {\n  display: flex;\n  flex-wrap: wrap;\n  padding: 0;\n  list-style: none;\n  margin: 0; }\n";
 var styles$M = {"breadcrumb":"Breadcrumb-module_breadcrumb__-pvAn"};
 styleInject(css_248z$M);
 
@@ -1654,12 +1668,12 @@ const ExpansionPanelHeader = (props) => {
             React__default["default"].createElement(Icon, null, isExpanded ? React__default["default"].createElement(ChevronUpSolidIcon, null) : React__default["default"].createElement(ChevronDownSolidIcon, null)))));
 };
 
-var css_248z$n = ".ExpansionPanel-module_expansionPanel__m1yQq {\n  background-color: var(--white);\n  box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);\n  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; }\n  .ExpansionPanel-module_expansionPanel__m1yQq:first-child {\n    border-top-left-radius: 4px;\n    border-top-right-radius: 4px; }\n  .ExpansionPanel-module_expansionPanel__m1yQq:last-child {\n    border-bottom-left-radius: 4px;\n    border-bottom-right-radius: 4px; }\n  .ExpansionPanel-module_expansionPanel__m1yQq.ExpansionPanel-module_isExpanded__TS1ph {\n    margin: 16px 0; }\n    .ExpansionPanel-module_expansionPanel__m1yQq.ExpansionPanel-module_isExpanded__TS1ph:first-child {\n      margin-top: 0; }\n    .ExpansionPanel-module_expansionPanel__m1yQq.ExpansionPanel-module_isExpanded__TS1ph:last-child {\n      margin-bottom: 0; }\n";
-var styles$n = {"expansionPanel":"ExpansionPanel-module_expansionPanel__m1yQq","isExpanded":"ExpansionPanel-module_isExpanded__TS1ph"};
+var css_248z$n = ".ExpansionPanel-module_expansionPanel__m1yQq {\n  background-color: var(--white);\n  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; }\n  .ExpansionPanel-module_expansionPanel__m1yQq.ExpansionPanel-module_shadow__zIjJ6 {\n    box-shadow: var(--shadow); }\n  .ExpansionPanel-module_expansionPanel__m1yQq:first-child {\n    border-top-left-radius: 4px;\n    border-top-right-radius: 4px; }\n  .ExpansionPanel-module_expansionPanel__m1yQq:last-child {\n    border-bottom-left-radius: 4px;\n    border-bottom-right-radius: 4px; }\n  .ExpansionPanel-module_expansionPanel__m1yQq.ExpansionPanel-module_isExpanded__TS1ph:first-child {\n    margin-top: 0; }\n  .ExpansionPanel-module_expansionPanel__m1yQq.ExpansionPanel-module_isExpanded__TS1ph:last-child {\n    margin-bottom: 0; }\n";
+var styles$n = {"expansionPanel":"ExpansionPanel-module_expansionPanel__m1yQq","shadow":"ExpansionPanel-module_shadow__zIjJ6","isExpanded":"ExpansionPanel-module_isExpanded__TS1ph"};
 styleInject(css_248z$n);
 
 const ExpansionPanel = (props) => {
-    const { header, children, isExpanded = false, onChange } = props;
+    const { header, children, isExpanded = false, shadow, onChange } = props;
     const [_isExpanded, setIsExpanded] = React.useState(false);
     React.useEffect(() => {
         setIsExpanded(isExpanded);
@@ -1670,6 +1684,7 @@ const ExpansionPanel = (props) => {
         if (_isExpanded) {
             cssClasses.push(styles$n.isExpanded);
         }
+        shadow && cssClasses.push(styles$n.shadow);
         return cssClasses.filter(css => css).join(' ');
     };
     const handleClickHeader = (event) => {
@@ -1682,16 +1697,17 @@ const ExpansionPanel = (props) => {
             React__default["default"].createElement(ExpansionPanelContent, null, children)));
 };
 
-var css_248z$m = ".FloatingActionButton-module_fab__Rw3kd {\n  box-shadow: var(--shadow); }\n  .FloatingActionButton-module_fab__Rw3kd.FloatingActionButton-module_fixed__XQOkG {\n    position: fixed;\n    bottom: 16px;\n    right: 16px;\n    z-index: 1000; }\n";
-var styles$m = {"fab":"FloatingActionButton-module_fab__Rw3kd","fixed":"FloatingActionButton-module_fixed__XQOkG"};
+var css_248z$m = ".FloatingActionButton-module_fab__Rw3kd {\n  box-shadow: var(--shadow); }\n\n.FloatingActionButton-module_fixed__XQOkG {\n  position: fixed;\n  z-index: 1000; }\n  .FloatingActionButton-module_fixed__XQOkG.FloatingActionButton-module_leftTop__ZiHQN {\n    top: 16px;\n    left: 16px; }\n  .FloatingActionButton-module_fixed__XQOkG.FloatingActionButton-module_leftBottom__210sl {\n    bottom: 16px;\n    left: 16px; }\n  .FloatingActionButton-module_fixed__XQOkG.FloatingActionButton-module_rightTop__VUsvT {\n    top: 64px;\n    right: 16px; }\n  .FloatingActionButton-module_fixed__XQOkG.FloatingActionButton-module_rightBottom__FaUFl {\n    bottom: 16px;\n    right: 16px; }\n";
+var styles$m = {"fab":"FloatingActionButton-module_fab__Rw3kd","fixed":"FloatingActionButton-module_fixed__XQOkG","leftTop":"FloatingActionButton-module_leftTop__ZiHQN","leftBottom":"FloatingActionButton-module_leftBottom__210sl","rightTop":"FloatingActionButton-module_rightTop__VUsvT","rightBottom":"FloatingActionButton-module_rightBottom__FaUFl"};
 styleInject(css_248z$m);
 
 const FloatingActionButton = (props) => {
-    const { className, icon, color = exports.COLOR.primary, fixed, size = exports.SIZE.lg, isActive, disabled, onClick } = props;
+    const { className, icon, color = exports.COLOR.primary, fixed, position = 'rightBottom', size = exports.SIZE.lg, isActive, disabled, onClick } = props;
     const getCssClasses = () => {
         const cssClasses = [];
         cssClasses.push(styles$m.fab);
-        fixed && cssClasses.push(styles$m['fixed']);
+        fixed && cssClasses.push(styles$m.fixed);
+        position && fixed && cssClasses.push(styles$m[position]);
         className && cssClasses.push(className);
         return cssClasses.filter(css => css).join(' ');
     };
@@ -2293,24 +2309,25 @@ 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: 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"};
+var css_248z$8 = ".Typography-module_typography__sw-td {\n  font-family: var(--fontFamily); }\n  .Typography-module_typography__sw-td.Typography-module_wrap__W7G0R {\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis; }\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","wrap":"Typography-module_wrap__W7G0R"};
 styleInject(css_248z$8);
 
 const Wrapper = (props) => {
-    const { as = 'span', children, className } = props, rest = __rest(props, ["as", "children", "className"]);
+    const { as = 'span', wrap, children, className } = props, rest = __rest(props, ["as", "wrap", "children", "className"]);
     const getCssClasses = () => {
         const cssClasses = [];
         cssClasses.push(styles$8.typography);
         cssClasses.push(styles$8.as);
+        wrap && cssClasses.push(styles$8.wrap);
         className && cssClasses.push(className);
         return cssClasses.filter(css => css).join(' ');
     };
     return React__default["default"].createElement(as, Object.assign(Object.assign({}, rest), { className: getCssClasses() }), children);
 };
 const Typography = (_a) => {
-    var { children, as = 'span' } = _a, rest = __rest(_a, ["children", "as"]);
-    return (React__default["default"].createElement(Wrapper, Object.assign({ as: as }, rest), children));
+    var { children, as = 'span', wrap } = _a, rest = __rest(_a, ["children", "as", "wrap"]);
+    return (React__default["default"].createElement(Wrapper, Object.assign({ as: as, wrap: wrap }, rest), children));
 };
 
 var css_248z$7 = ".Step-module_stepWrapper__IQwq1 {\n  display: flex;\n  align-items: center;\n  padding-left: 8px;\n  padding-right: 8px;\n  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; }\n  .Step-module_stepWrapper__IQwq1.Step-module_hasLabel__LZNvd:not(.Step-module_disabled__JnxUP):hover {\n    cursor: pointer;\n    background-color: rgba(0, 0, 0, 0.04);\n    border-radius: var(--borderRadius); }\n\n.Step-module_step__k42go {\n  width: 40px;\n  height: 40px;\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; }\n  .Step-module_step__k42go:not(.Step-module_hasLabel__LZNvd):not(.Step-module_disabled__JnxUP):hover {\n    border-radius: 100%;\n    cursor: pointer;\n    background-color: rgba(0, 0, 0, 0.04); }\n  .Step-module_step__k42go.Step-module_hasLabel__LZNvd svg {\n    width: 18px !important;\n    height: 18px !important; }\n\n.Step-module_stepIconCircle__hnxIV svg {\n  width: 24px;\n  height: 24px; }\n\n.Step-module_stepValue__B0-xv {\n  position: absolute;\n  color: var(--secondary-contrast-text); }\n  .Step-module_stepValue__B0-xv .Step-module_isActive__3GGcl {\n    color: var(--primary-contrast-text); }\n";
@@ -2838,4 +2855,5 @@ exports.useConstructor = useConstructor;
 exports.useCssClasses = useCssClasses;
 exports.useDebounce = useDebounce;
 exports.useHover = useHover;
+exports.useMobileDetect = useMobileDetect;
 exports.useWindowSize = useWindowSize;

package/package.json

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

package/react-asc.scss

@@ -306,6 +306,11 @@
 }
 
 
+* {
+	min-width: 0;
+	min-height: 0;
+}
+
 label.required {
 	&::after {
 		display: inline-block;