react-asc 23.0.0 → 23.3.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/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

@@ -4,3 +4,4 @@ export * from './useCssClasses';
 export * from './useHover';
 export * from './useMobileDetect';
 export * from './useWindowSize';
+export * from './useOnDestroy';

package/hooks/useOnDestroy.d.ts

@@ -0,0 +1 @@
+export declare const useOnDestroy: (callBack: () => void) => void;

package/index.es.js

@@ -242,8 +242,7 @@ const useConstructor = (callBack) => {
 };
 
 function useCssClasses(cssClasses) {
-    const cssClassName = (cssClasses === null || cssClasses === void 0 ? void 0 : cssClasses.filter(css => css).join(' ')) || '';
-    return [cssClassName];
+    return [(cssClasses === null || cssClasses === void 0 ? void 0 : cssClasses.filter(css => css).join(' ')) || ''];
 }
 
 function useHover() {
@@ -301,6 +300,14 @@ function useMobileDetect() {
     return { isMobile };
 }
 
+const useOnDestroy = (callBack) => {
+    useEffect(() => {
+        return () => {
+            callBack();
+        };
+    }, []);
+};
+
 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";
 var styles$X = {"backdrop":"Backdrop-module_backdrop__IRMoL","isTransparent":"Backdrop-module_isTransparent__F5nA5"};
 styleInject(css_248z$X);
@@ -498,21 +505,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";
@@ -571,7 +579,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);
 
@@ -1660,12 +1668,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);
@@ -1676,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) => {
@@ -2300,24 +2309,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";
@@ -2731,4 +2741,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, useMobileDetect, 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, useOnDestroy, useWindowSize };

package/index.js

@@ -250,8 +250,7 @@ const useConstructor = (callBack) => {
 };
 
 function useCssClasses(cssClasses) {
-    const cssClassName = (cssClasses === null || cssClasses === void 0 ? void 0 : cssClasses.filter(css => css).join(' ')) || '';
-    return [cssClassName];
+    return [(cssClasses === null || cssClasses === void 0 ? void 0 : cssClasses.filter(css => css).join(' ')) || ''];
 }
 
 function useHover() {
@@ -309,6 +308,14 @@ function useMobileDetect() {
     return { isMobile };
 }
 
+const useOnDestroy = (callBack) => {
+    React.useEffect(() => {
+        return () => {
+            callBack();
+        };
+    }, []);
+};
+
 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";
 var styles$X = {"backdrop":"Backdrop-module_backdrop__IRMoL","isTransparent":"Backdrop-module_isTransparent__F5nA5"};
 styleInject(css_248z$X);
@@ -506,21 +513,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";
@@ -579,7 +587,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);
 
@@ -1668,12 +1676,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);
@@ -1684,6 +1692,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) => {
@@ -2308,24 +2317,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";
@@ -2854,4 +2864,5 @@ exports.useCssClasses = useCssClasses;
 exports.useDebounce = useDebounce;
 exports.useHover = useHover;
 exports.useMobileDetect = useMobileDetect;
+exports.useOnDestroy = useOnDestroy;
 exports.useWindowSize = useWindowSize;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "react-asc",
-	"version": "23.0.0",
+	"version": "23.3.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;