react-asc 21.2.2 → 22.0.0

package/components/CssTransition/CssTransition.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+interface ICssTransitionProps {
+    className: string;
+    children: React.ReactNode;
+    show: boolean | undefined;
+}
+export declare const CssTransition: (props: ICssTransitionProps) => JSX.Element;
+export {};

package/components/CssTransition/index.d.ts

@@ -0,0 +1 @@
+export * from './CssTransition';

package/components/LoadingIndicator/LoadingIndicatorContainer.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 export interface ILoadingIndicatorContainerProps {
     children: React.ReactNode;
+    isFixed?: boolean;
 }
-export declare const LoadingIndicatorContainer: ({ children }: ILoadingIndicatorContainerProps) => JSX.Element;
+export declare const LoadingIndicatorContainer: ({ children, isFixed }: ILoadingIndicatorContainerProps) => JSX.Element;

package/components/index.d.ts

@@ -10,6 +10,7 @@ export * from './Card';
 export * from './ConditionalWrapper';
 export * from './Checkbox';
 export * from './Chip';
+export * from './CssTransition';
 export * from './DateSelect';
 export * from './Drawer';
 export * from './Menu';

package/index.es.js

@@ -752,7 +752,7 @@ const Checkbox = (props) => {
         React.createElement("input", Object.assign({ type: "checkbox", ref: checkboxElement, id: id, name: name, checked: isChecked, disabled: disabled, readOnly: readOnly, hidden: true, value: value }, rest))));
 };
 
-var css_248z$C = ".Chip-module_chip__dZ5qz {\n  display: inline-flex;\n  align-items: center;\n  padding: 0.5rem;\n  text-align: center;\n  white-space: nowrap;\n  vertical-align: baseline;\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  font-size: 75%;\n  font-weight: 700;\n  border-radius: 10rem;\n  line-height: 1; }\n  .Chip-module_chip__dZ5qz svg {\n    width: 18px;\n    height: 18px; }\n  .Chip-module_chip__dZ5qz .Chip-module_deleteIcon__--rUx {\n    margin-left: 5px; }\n    .Chip-module_chip__dZ5qz .Chip-module_deleteIcon__--rUx:hover {\n      cursor: pointer; }\n  .Chip-module_chip__dZ5qz.Chip-module_primary__YVDi9 {\n    background: var(--primary);\n    color: var(--primary-contrast-text); }\n  .Chip-module_chip__dZ5qz.Chip-module_secondary__-e4xP {\n    background: var(--secondary);\n    color: var(--secondary-contrast-text); }\n  .Chip-module_chip__dZ5qz.Chip-module_accent__ZCTwu {\n    background: var(--accent);\n    color: var(--accent-contrast-text); }\n  .Chip-module_chip__dZ5qz.Chip-module_light__vKs7O {\n    color: var(--light-contrast-text);\n    background-color: var(--light); }\n  .Chip-module_chip__dZ5qz.Chip-module_dark__G-FLQ {\n    color: var(--dark-contrast-text);\n    background-color: var(--dark); }\n  .Chip-module_chip__dZ5qz.Chip-module_clickable__qAqVH:hover {\n    cursor: pointer; }\n    .Chip-module_chip__dZ5qz.Chip-module_clickable__qAqVH:hover.Chip-module_primary__YVDi9 {\n      background: var(--primary-dark); }\n    .Chip-module_chip__dZ5qz.Chip-module_clickable__qAqVH:hover.Chip-module_secondary__-e4xP {\n      background: var(--secondary-dark); }\n    .Chip-module_chip__dZ5qz.Chip-module_clickable__qAqVH:hover.Chip-module_accent__ZCTwu {\n      background: var(--accent-dark); }\n  .Chip-module_chip__dZ5qz.Chip-module_shadow__v11NF {\n    box-shadow: var(--shadow); }\n";
+var css_248z$C = ".Chip-module_chip__dZ5qz {\n  display: inline-flex;\n  align-items: center;\n  padding: 0.5rem;\n  text-align: center;\n  white-space: nowrap;\n  vertical-align: baseline;\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  font-size: 75%;\n  font-weight: 700;\n  border-radius: 10rem;\n  line-height: 1; }\n  .Chip-module_chip__dZ5qz span {\n    margin-bottom: 2px; }\n  .Chip-module_chip__dZ5qz svg {\n    width: 18px;\n    height: 18px; }\n  .Chip-module_chip__dZ5qz .Chip-module_deleteIcon__--rUx {\n    margin-left: 5px; }\n    .Chip-module_chip__dZ5qz .Chip-module_deleteIcon__--rUx:hover {\n      cursor: pointer; }\n  .Chip-module_chip__dZ5qz.Chip-module_primary__YVDi9 {\n    background: var(--primary);\n    color: var(--primary-contrast-text); }\n  .Chip-module_chip__dZ5qz.Chip-module_secondary__-e4xP {\n    background: var(--secondary);\n    color: var(--secondary-contrast-text); }\n  .Chip-module_chip__dZ5qz.Chip-module_accent__ZCTwu {\n    background: var(--accent);\n    color: var(--accent-contrast-text); }\n  .Chip-module_chip__dZ5qz.Chip-module_light__vKs7O {\n    color: var(--light-contrast-text);\n    background-color: var(--light); }\n  .Chip-module_chip__dZ5qz.Chip-module_dark__G-FLQ {\n    color: var(--dark-contrast-text);\n    background-color: var(--dark); }\n  .Chip-module_chip__dZ5qz.Chip-module_clickable__qAqVH:hover {\n    cursor: pointer; }\n    .Chip-module_chip__dZ5qz.Chip-module_clickable__qAqVH:hover.Chip-module_primary__YVDi9 {\n      background: var(--primary-dark); }\n    .Chip-module_chip__dZ5qz.Chip-module_clickable__qAqVH:hover.Chip-module_secondary__-e4xP {\n      background: var(--secondary-dark); }\n    .Chip-module_chip__dZ5qz.Chip-module_clickable__qAqVH:hover.Chip-module_accent__ZCTwu {\n      background: var(--accent-dark); }\n  .Chip-module_chip__dZ5qz.Chip-module_shadow__v11NF {\n    box-shadow: var(--shadow); }\n";
 var styles$C = {"chip":"Chip-module_chip__dZ5qz","deleteIcon":"Chip-module_deleteIcon__--rUx","primary":"Chip-module_primary__YVDi9","secondary":"Chip-module_secondary__-e4xP","accent":"Chip-module_accent__ZCTwu","light":"Chip-module_light__vKs7O","dark":"Chip-module_dark__G-FLQ","clickable":"Chip-module_clickable__qAqVH","shadow":"Chip-module_shadow__v11NF"};
 styleInject(css_248z$C);
 
@@ -772,11 +772,76 @@ const Chip = (props) => {
         onDelete && onDelete(e);
     };
     return (React.createElement("div", Object.assign({ className: getCssClass() }, rest, { style: style }),
-        React.createElement("div", null, children),
+        React.createElement("span", null, children),
         isDeletable && (React.createElement("div", { className: styles$C.deleteIcon, onClick: e => handleClickOnDelete(e) }, deleteIcon))));
 };
 
-var css_248z$B = ".Column-module_column__fcTgl {\n  flex: 1 0 0%; }\n";
+const CssTransition = (props) => {
+    const { className, children, show } = props;
+    const [isShow, setIsShow] = useState(undefined);
+    const [cssState, setCssState] = useState({
+        hidden: true
+    });
+    const transitionConainter = useRef(null);
+    useEffect(() => {
+        if (show !== undefined) {
+            setIsShow(show);
+        }
+    }, [show]);
+    const nextFrame = () => {
+        return new Promise((resolve) => {
+            requestAnimationFrame(() => {
+                requestAnimationFrame(resolve);
+            });
+        });
+    };
+    const afterTransition = (element) => {
+        return new Promise((resolve) => {
+            if (element) {
+                const duration = Number(getComputedStyle(element).transitionDuration.replace("s", "")) * 1000;
+                setTimeout(() => { resolve(); }, duration);
+            }
+            else {
+                resolve();
+            }
+        });
+    };
+    const renderAnimation = async (show) => {
+        if (show === true) {
+            setCssState({ enter: true, enterStart: true });
+            await nextFrame();
+            setCssState({ enter: true, enterEnd: true });
+            await afterTransition(transitionConainter.current);
+            setCssState(undefined);
+        }
+        if (show === false) {
+            setCssState({ leave: true, leaveStart: true });
+            await nextFrame();
+            setCssState({ leave: true, leaveEnd: true });
+            await afterTransition(transitionConainter.current);
+            setCssState({ hidden: true });
+        }
+    };
+    useEffect(() => {
+        if (isShow !== undefined && (isShow === true || isShow === false)) {
+            renderAnimation(isShow);
+        }
+    }, [isShow]);
+    const getCssClasses = () => {
+        const cssClasses = [];
+        (cssState === null || cssState === void 0 ? void 0 : cssState.hidden) && cssClasses.push(`hidden`);
+        (cssState === null || cssState === void 0 ? void 0 : cssState.enter) && cssClasses.push(`${className}-enter`);
+        (cssState === null || cssState === void 0 ? void 0 : cssState.enterStart) && cssClasses.push(`${className}-enter-start`);
+        (cssState === null || cssState === void 0 ? void 0 : cssState.enterEnd) && cssClasses.push(`${className}-enter-end`);
+        (cssState === null || cssState === void 0 ? void 0 : cssState.leave) && cssClasses.push(`${className}-leave`);
+        (cssState === null || cssState === void 0 ? void 0 : cssState.leaveStart) && cssClasses.push(`${className}-leave-start`);
+        (cssState === null || cssState === void 0 ? void 0 : cssState.leaveEnd) && cssClasses.push(`${className}-leave-end`);
+        return cssClasses.filter((css) => css).join(" ");
+    };
+    return (React.createElement("div", { ref: transitionConainter, className: getCssClasses() }, children));
+};
+
+var css_248z$B = ".Column-module_column__fcTgl {\n  flex: 1 0 0%; }\n\n@media (max-width: 575.98px) {\n  .Column-module_column__fcTgl {\n    flex: 1; } }\n";
 var styles$B = {"column":"Column-module_column__fcTgl"};
 styleInject(css_248z$B);
 
@@ -864,8 +929,8 @@ const FileInput = (props) => {
         React.createElement("input", Object.assign({ type: "file", ref: inputFileElement, className: getCssClasses(), id: id, name: name, multiple: multiple, accept: accept, disabled: disabled, readOnly: readOnly, hidden: true, onChange: handleOnChange, value: model }, rest))));
 };
 
-var css_248z$y = ".Select-module_selectContainer__DHFDZ {\n  position: relative; }\n\n.Select-module_select__Fbn38 {\n  width: 100%;\n  padding: 0.375rem 0.75rem;\n  font-size: 1rem;\n  font-weight: 400;\n  line-height: 1.5;\n  color: #212529;\n  background-color: #fff;\n  background-clip: padding-box;\n  border: 1px solid #ced4da;\n  appearance: none;\n  border-radius: 0.25rem;\n  box-shadow: inset 0 1px 2px #00000013;\n  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n  align-items: center;\n  min-height: calc(1.5em + 0.75rem + 2px);\n  height: auto;\n  display: flex; }\n  .Select-module_select__Fbn38:hover {\n    cursor: pointer; }\n  .Select-module_select__Fbn38:focus:not(.Select-module_select__Fbn38.Select-module_disabled__2XXut) {\n    color: #212529;\n    background-color: #fff;\n    border-color: #86b7fe;\n    outline: 0;\n    box-shadow: inset 0 1px 2px #00000013, 0 0 0 0.25rem #0d6efd40; }\n  .Select-module_select__Fbn38.Select-module_disabled__2XXut, .Select-module_select__Fbn38.Select-module_readOnly__VoTER {\n    background-color: #e9ecef; }\n  .Select-module_select__Fbn38.Select-module_disabled__2XXut:hover {\n    cursor: not-allowed; }\n  .Select-module_select__Fbn38.Select-module_readOnly__VoTER:hover {\n    cursor: inherit; }\n\n.Select-module_selectMenu__8y4kQ {\n  background-color: var(--light);\n  position: absolute;\n  box-shadow: var(--shadow);\n  border-radius: var(--borderRadius);\n  width: 100%;\n  top: 2px;\n  z-index: 1112;\n  max-height: 280px;\n  overflow: auto; }\n";
-var styles$y = {"selectContainer":"Select-module_selectContainer__DHFDZ","select":"Select-module_select__Fbn38","disabled":"Select-module_disabled__2XXut","readOnly":"Select-module_readOnly__VoTER","selectMenu":"Select-module_selectMenu__8y4kQ"};
+var css_248z$y = ".Select-module_selectContainer__DHFDZ {\n  position: relative; }\n\n.Select-module_select__Fbn38 {\n  width: 100%;\n  padding: 0.375rem 0.75rem;\n  font-size: 1rem;\n  font-weight: 400;\n  line-height: 1.5;\n  color: #212529;\n  background-color: #fff;\n  background-clip: padding-box;\n  border: 1px solid #ced4da;\n  appearance: none;\n  border-radius: 0.25rem;\n  box-shadow: inset 0 1px 2px #00000013;\n  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n  align-items: center;\n  min-height: calc(1.5em + 0.75rem + 2px);\n  height: auto;\n  display: flex;\n  flex-wrap: wrap; }\n  .Select-module_select__Fbn38 > span {\n    flex: 1; }\n  .Select-module_select__Fbn38:hover {\n    cursor: pointer; }\n  .Select-module_select__Fbn38:focus:not(.Select-module_select__Fbn38.Select-module_disabled__2XXut) {\n    color: #212529;\n    background-color: #fff;\n    border-color: #86b7fe;\n    outline: 0;\n    box-shadow: inset 0 1px 2px #00000013, 0 0 0 0.25rem #0d6efd40; }\n  .Select-module_select__Fbn38.Select-module_disabled__2XXut, .Select-module_select__Fbn38.Select-module_readOnly__VoTER {\n    background-color: #e9ecef; }\n  .Select-module_select__Fbn38.Select-module_disabled__2XXut:hover {\n    cursor: not-allowed; }\n  .Select-module_select__Fbn38.Select-module_readOnly__VoTER:hover {\n    cursor: inherit; }\n\n.Select-module_chipContainer__1poFF {\n  gap: 10px;\n  flex: 1;\n  display: inline-flex;\n  flex-wrap: wrap; }\n\n.Select-module_selectMenu__8y4kQ {\n  background-color: var(--light);\n  position: absolute;\n  box-shadow: var(--shadow);\n  border-radius: var(--borderRadius);\n  width: 100%;\n  top: 2px;\n  z-index: 1112;\n  max-height: 280px;\n  overflow: auto; }\n";
+var styles$y = {"selectContainer":"Select-module_selectContainer__DHFDZ","select":"Select-module_select__Fbn38","disabled":"Select-module_disabled__2XXut","readOnly":"Select-module_readOnly__VoTER","chipContainer":"Select-module_chipContainer__1poFF","selectMenu":"Select-module_selectMenu__8y4kQ"};
 styleInject(css_248z$y);
 
 const Select = (props) => {
@@ -961,7 +1026,7 @@ const Select = (props) => {
         let result = null;
         if (selectedOptions.length <= multipleMaxCountItems && selectedOptions.length > 0) {
             result = selectedOptions
-                .map(option => React.createElement(Chip, { key: option.value, className: "mr-2", color: COLOR.primary, isDeletable: true, onDelete: (e) => handleOnDelete(e, option) }, option.label));
+                .map(option => React.createElement(Chip, { key: option.value, color: COLOR.primary, isDeletable: true, onDelete: (e) => handleOnDelete(e, option) }, option.label));
         }
         else {
             result = React.createElement("span", null,
@@ -1006,8 +1071,9 @@ const Select = (props) => {
     return (React.createElement("div", { ref: selectConainter, className: styles$y.selectContainer },
         React.createElement("div", { id: id, className: getCssClass(), onClick: () => show(), tabIndex: 0, onKeyDown: e => handleOnKeyDown(e) },
             !multiple && renderSingleViewModel(),
-            multiple && renderMultipleViewModel(),
-            React.createElement(Icon, { className: "ml-auto" },
+            multiple &&
+                React.createElement("div", { className: styles$y.chipContainer }, renderMultipleViewModel()),
+            React.createElement(Icon, { className: "ml-2" },
                 React.createElement(ChevronDownSolidIcon, null))),
         isShow &&
             createPortal(React.createElement(React.Fragment, null,
@@ -1415,7 +1481,7 @@ const DateSelect = (props) => {
 // 	return Math.ceil((((d - yearStart) / 86400000) + 1) / 7)
 // };
 
-var css_248z$u = ".Drawer-module_drawer__kdQCk {\n  height: 100%;\n  z-index: 1101;\n  bottom: 0;\n  position: fixed;\n  background: white;\n  min-width: 280px;\n  overflow-y: auto; }\n  .Drawer-module_drawer__kdQCk.Drawer-module_permanent__c-y8y {\n    position: inherit;\n    z-index: 0; }\n  .Drawer-module_drawer__kdQCk.Drawer-module_left__loQVO {\n    order: 0; }\n  .Drawer-module_drawer__kdQCk.Drawer-module_right__sJ3mZ {\n    order: 2; }\n  .Drawer-module_drawer__kdQCk.Drawer-module_shadow__Myo3n {\n    box-shadow: var(--shadow); }\n\n.Drawer-module_drawerOpen__07ptP {\n  overflow: hidden; }\n";
+var css_248z$u = ".Drawer-module_drawer__kdQCk {\n  height: 100%;\n  z-index: 1101;\n  bottom: 0;\n  position: fixed;\n  background: white;\n  min-width: 320px;\n  overflow-y: auto; }\n  .Drawer-module_drawer__kdQCk.Drawer-module_permanent__c-y8y {\n    position: inherit;\n    z-index: 0; }\n  .Drawer-module_drawer__kdQCk.Drawer-module_left__loQVO {\n    order: 0; }\n  .Drawer-module_drawer__kdQCk.Drawer-module_right__sJ3mZ {\n    order: 2; }\n  .Drawer-module_drawer__kdQCk.Drawer-module_shadow__Myo3n {\n    box-shadow: var(--shadow); }\n\n.Drawer-module_drawerOpen__07ptP {\n  overflow: hidden; }\n";
 var styles$u = {"drawer":"Drawer-module_drawer__kdQCk","permanent":"Drawer-module_permanent__c-y8y","left":"Drawer-module_left__loQVO","right":"Drawer-module_right__sJ3mZ","shadow":"Drawer-module_shadow__Myo3n","drawerOpen":"Drawer-module_drawerOpen__07ptP"};
 styleInject(css_248z$u);
 
@@ -1645,8 +1711,8 @@ const Link = (props) => {
     return (React.createElement("a", Object.assign({ className: cssClassName, href: href, target: target, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave }, rest), children));
 };
 
-var css_248z$k = ".LoadingIndicator-module_loadingIndicatorContainer__GS9OG {\n  position: fixed;\n  top: 0;\n  left: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  width: 100%; }\n\n.LoadingIndicator-module_loadingIndicator__EC9sx {\n  animation-name: LoadingIndicator-module_spinAnimation__LeY4Z;\n  animation-duration: 5000ms;\n  animation-iteration-count: infinite;\n  animation-timing-function: linear;\n  width: 24px;\n  height: 24px; }\n\n@keyframes LoadingIndicator-module_spinAnimation__LeY4Z {\n  from {\n    transform: rotate(0deg); }\n  to {\n    transform: rotate(360deg); } }\n";
-var styles$k = {"loadingIndicatorContainer":"LoadingIndicator-module_loadingIndicatorContainer__GS9OG","loadingIndicator":"LoadingIndicator-module_loadingIndicator__EC9sx","spinAnimation":"LoadingIndicator-module_spinAnimation__LeY4Z"};
+var css_248z$k = ".LoadingIndicator-module_loadingIndicatorContainer__GS9OG {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  width: 100%; }\n  .LoadingIndicator-module_loadingIndicatorContainer__GS9OG.LoadingIndicator-module_isFixed__WCFNG {\n    position: fixed;\n    top: 0;\n    left: 0; }\n\n.LoadingIndicator-module_loadingIndicator__EC9sx {\n  animation-name: LoadingIndicator-module_spinAnimation__LeY4Z;\n  animation-duration: 5000ms;\n  animation-iteration-count: infinite;\n  animation-timing-function: linear;\n  width: 24px;\n  height: 24px; }\n\n@keyframes LoadingIndicator-module_spinAnimation__LeY4Z {\n  from {\n    transform: rotate(0deg); }\n  to {\n    transform: rotate(360deg); } }\n";
+var styles$k = {"loadingIndicatorContainer":"LoadingIndicator-module_loadingIndicatorContainer__GS9OG","isFixed":"LoadingIndicator-module_isFixed__WCFNG","loadingIndicator":"LoadingIndicator-module_loadingIndicator__EC9sx","spinAnimation":"LoadingIndicator-module_spinAnimation__LeY4Z"};
 styleInject(css_248z$k);
 
 const LoadingIndicator = (_a) => {
@@ -1660,10 +1726,11 @@ const LoadingIndicator = (_a) => {
         React.createElement(SpinnerSolidIcon, null)));
 };
 
-const LoadingIndicatorContainer = ({ children }) => {
+const LoadingIndicatorContainer = ({ children, isFixed }) => {
     const getCssClasses = () => {
         const cssClasses = [];
         cssClasses.push(styles$k.loadingIndicatorContainer);
+        isFixed && cssClasses.push(styles$k.isFixed);
         return cssClasses.filter(css => css).join(' ');
     };
     return (React.createElement("div", { className: getCssClasses() }, children));
@@ -1677,7 +1744,7 @@ class LoadingIndicatorService {
         this.container = document.createElement('div');
         this.container.classList.add('snackbar-container');
         document.body.appendChild(this.container);
-        render(React.createElement(LoadingIndicatorContainer, null,
+        render(React.createElement(LoadingIndicatorContainer, { isFixed: true },
             React.createElement(LoadingIndicator, null)), this.container);
     }
     hide() {
@@ -2649,4 +2716,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, 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, useWindowSize };

package/index.js

@@ -760,7 +760,7 @@ const Checkbox = (props) => {
         React__default["default"].createElement("input", Object.assign({ type: "checkbox", ref: checkboxElement, id: id, name: name, checked: isChecked, disabled: disabled, readOnly: readOnly, hidden: true, value: value }, rest))));
 };
 
-var css_248z$C = ".Chip-module_chip__dZ5qz {\n  display: inline-flex;\n  align-items: center;\n  padding: 0.5rem;\n  text-align: center;\n  white-space: nowrap;\n  vertical-align: baseline;\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  font-size: 75%;\n  font-weight: 700;\n  border-radius: 10rem;\n  line-height: 1; }\n  .Chip-module_chip__dZ5qz svg {\n    width: 18px;\n    height: 18px; }\n  .Chip-module_chip__dZ5qz .Chip-module_deleteIcon__--rUx {\n    margin-left: 5px; }\n    .Chip-module_chip__dZ5qz .Chip-module_deleteIcon__--rUx:hover {\n      cursor: pointer; }\n  .Chip-module_chip__dZ5qz.Chip-module_primary__YVDi9 {\n    background: var(--primary);\n    color: var(--primary-contrast-text); }\n  .Chip-module_chip__dZ5qz.Chip-module_secondary__-e4xP {\n    background: var(--secondary);\n    color: var(--secondary-contrast-text); }\n  .Chip-module_chip__dZ5qz.Chip-module_accent__ZCTwu {\n    background: var(--accent);\n    color: var(--accent-contrast-text); }\n  .Chip-module_chip__dZ5qz.Chip-module_light__vKs7O {\n    color: var(--light-contrast-text);\n    background-color: var(--light); }\n  .Chip-module_chip__dZ5qz.Chip-module_dark__G-FLQ {\n    color: var(--dark-contrast-text);\n    background-color: var(--dark); }\n  .Chip-module_chip__dZ5qz.Chip-module_clickable__qAqVH:hover {\n    cursor: pointer; }\n    .Chip-module_chip__dZ5qz.Chip-module_clickable__qAqVH:hover.Chip-module_primary__YVDi9 {\n      background: var(--primary-dark); }\n    .Chip-module_chip__dZ5qz.Chip-module_clickable__qAqVH:hover.Chip-module_secondary__-e4xP {\n      background: var(--secondary-dark); }\n    .Chip-module_chip__dZ5qz.Chip-module_clickable__qAqVH:hover.Chip-module_accent__ZCTwu {\n      background: var(--accent-dark); }\n  .Chip-module_chip__dZ5qz.Chip-module_shadow__v11NF {\n    box-shadow: var(--shadow); }\n";
+var css_248z$C = ".Chip-module_chip__dZ5qz {\n  display: inline-flex;\n  align-items: center;\n  padding: 0.5rem;\n  text-align: center;\n  white-space: nowrap;\n  vertical-align: baseline;\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  font-size: 75%;\n  font-weight: 700;\n  border-radius: 10rem;\n  line-height: 1; }\n  .Chip-module_chip__dZ5qz span {\n    margin-bottom: 2px; }\n  .Chip-module_chip__dZ5qz svg {\n    width: 18px;\n    height: 18px; }\n  .Chip-module_chip__dZ5qz .Chip-module_deleteIcon__--rUx {\n    margin-left: 5px; }\n    .Chip-module_chip__dZ5qz .Chip-module_deleteIcon__--rUx:hover {\n      cursor: pointer; }\n  .Chip-module_chip__dZ5qz.Chip-module_primary__YVDi9 {\n    background: var(--primary);\n    color: var(--primary-contrast-text); }\n  .Chip-module_chip__dZ5qz.Chip-module_secondary__-e4xP {\n    background: var(--secondary);\n    color: var(--secondary-contrast-text); }\n  .Chip-module_chip__dZ5qz.Chip-module_accent__ZCTwu {\n    background: var(--accent);\n    color: var(--accent-contrast-text); }\n  .Chip-module_chip__dZ5qz.Chip-module_light__vKs7O {\n    color: var(--light-contrast-text);\n    background-color: var(--light); }\n  .Chip-module_chip__dZ5qz.Chip-module_dark__G-FLQ {\n    color: var(--dark-contrast-text);\n    background-color: var(--dark); }\n  .Chip-module_chip__dZ5qz.Chip-module_clickable__qAqVH:hover {\n    cursor: pointer; }\n    .Chip-module_chip__dZ5qz.Chip-module_clickable__qAqVH:hover.Chip-module_primary__YVDi9 {\n      background: var(--primary-dark); }\n    .Chip-module_chip__dZ5qz.Chip-module_clickable__qAqVH:hover.Chip-module_secondary__-e4xP {\n      background: var(--secondary-dark); }\n    .Chip-module_chip__dZ5qz.Chip-module_clickable__qAqVH:hover.Chip-module_accent__ZCTwu {\n      background: var(--accent-dark); }\n  .Chip-module_chip__dZ5qz.Chip-module_shadow__v11NF {\n    box-shadow: var(--shadow); }\n";
 var styles$C = {"chip":"Chip-module_chip__dZ5qz","deleteIcon":"Chip-module_deleteIcon__--rUx","primary":"Chip-module_primary__YVDi9","secondary":"Chip-module_secondary__-e4xP","accent":"Chip-module_accent__ZCTwu","light":"Chip-module_light__vKs7O","dark":"Chip-module_dark__G-FLQ","clickable":"Chip-module_clickable__qAqVH","shadow":"Chip-module_shadow__v11NF"};
 styleInject(css_248z$C);
 
@@ -780,11 +780,76 @@ const Chip = (props) => {
         onDelete && onDelete(e);
     };
     return (React__default["default"].createElement("div", Object.assign({ className: getCssClass() }, rest, { style: style }),
-        React__default["default"].createElement("div", null, children),
+        React__default["default"].createElement("span", null, children),
         isDeletable && (React__default["default"].createElement("div", { className: styles$C.deleteIcon, onClick: e => handleClickOnDelete(e) }, deleteIcon))));
 };
 
-var css_248z$B = ".Column-module_column__fcTgl {\n  flex: 1 0 0%; }\n";
+const CssTransition = (props) => {
+    const { className, children, show } = props;
+    const [isShow, setIsShow] = React.useState(undefined);
+    const [cssState, setCssState] = React.useState({
+        hidden: true
+    });
+    const transitionConainter = React.useRef(null);
+    React.useEffect(() => {
+        if (show !== undefined) {
+            setIsShow(show);
+        }
+    }, [show]);
+    const nextFrame = () => {
+        return new Promise((resolve) => {
+            requestAnimationFrame(() => {
+                requestAnimationFrame(resolve);
+            });
+        });
+    };
+    const afterTransition = (element) => {
+        return new Promise((resolve) => {
+            if (element) {
+                const duration = Number(getComputedStyle(element).transitionDuration.replace("s", "")) * 1000;
+                setTimeout(() => { resolve(); }, duration);
+            }
+            else {
+                resolve();
+            }
+        });
+    };
+    const renderAnimation = async (show) => {
+        if (show === true) {
+            setCssState({ enter: true, enterStart: true });
+            await nextFrame();
+            setCssState({ enter: true, enterEnd: true });
+            await afterTransition(transitionConainter.current);
+            setCssState(undefined);
+        }
+        if (show === false) {
+            setCssState({ leave: true, leaveStart: true });
+            await nextFrame();
+            setCssState({ leave: true, leaveEnd: true });
+            await afterTransition(transitionConainter.current);
+            setCssState({ hidden: true });
+        }
+    };
+    React.useEffect(() => {
+        if (isShow !== undefined && (isShow === true || isShow === false)) {
+            renderAnimation(isShow);
+        }
+    }, [isShow]);
+    const getCssClasses = () => {
+        const cssClasses = [];
+        (cssState === null || cssState === void 0 ? void 0 : cssState.hidden) && cssClasses.push(`hidden`);
+        (cssState === null || cssState === void 0 ? void 0 : cssState.enter) && cssClasses.push(`${className}-enter`);
+        (cssState === null || cssState === void 0 ? void 0 : cssState.enterStart) && cssClasses.push(`${className}-enter-start`);
+        (cssState === null || cssState === void 0 ? void 0 : cssState.enterEnd) && cssClasses.push(`${className}-enter-end`);
+        (cssState === null || cssState === void 0 ? void 0 : cssState.leave) && cssClasses.push(`${className}-leave`);
+        (cssState === null || cssState === void 0 ? void 0 : cssState.leaveStart) && cssClasses.push(`${className}-leave-start`);
+        (cssState === null || cssState === void 0 ? void 0 : cssState.leaveEnd) && cssClasses.push(`${className}-leave-end`);
+        return cssClasses.filter((css) => css).join(" ");
+    };
+    return (React__default["default"].createElement("div", { ref: transitionConainter, className: getCssClasses() }, children));
+};
+
+var css_248z$B = ".Column-module_column__fcTgl {\n  flex: 1 0 0%; }\n\n@media (max-width: 575.98px) {\n  .Column-module_column__fcTgl {\n    flex: 1; } }\n";
 var styles$B = {"column":"Column-module_column__fcTgl"};
 styleInject(css_248z$B);
 
@@ -872,8 +937,8 @@ const FileInput = (props) => {
         React__default["default"].createElement("input", Object.assign({ type: "file", ref: inputFileElement, className: getCssClasses(), id: id, name: name, multiple: multiple, accept: accept, disabled: disabled, readOnly: readOnly, hidden: true, onChange: handleOnChange, value: model }, rest))));
 };
 
-var css_248z$y = ".Select-module_selectContainer__DHFDZ {\n  position: relative; }\n\n.Select-module_select__Fbn38 {\n  width: 100%;\n  padding: 0.375rem 0.75rem;\n  font-size: 1rem;\n  font-weight: 400;\n  line-height: 1.5;\n  color: #212529;\n  background-color: #fff;\n  background-clip: padding-box;\n  border: 1px solid #ced4da;\n  appearance: none;\n  border-radius: 0.25rem;\n  box-shadow: inset 0 1px 2px #00000013;\n  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n  align-items: center;\n  min-height: calc(1.5em + 0.75rem + 2px);\n  height: auto;\n  display: flex; }\n  .Select-module_select__Fbn38:hover {\n    cursor: pointer; }\n  .Select-module_select__Fbn38:focus:not(.Select-module_select__Fbn38.Select-module_disabled__2XXut) {\n    color: #212529;\n    background-color: #fff;\n    border-color: #86b7fe;\n    outline: 0;\n    box-shadow: inset 0 1px 2px #00000013, 0 0 0 0.25rem #0d6efd40; }\n  .Select-module_select__Fbn38.Select-module_disabled__2XXut, .Select-module_select__Fbn38.Select-module_readOnly__VoTER {\n    background-color: #e9ecef; }\n  .Select-module_select__Fbn38.Select-module_disabled__2XXut:hover {\n    cursor: not-allowed; }\n  .Select-module_select__Fbn38.Select-module_readOnly__VoTER:hover {\n    cursor: inherit; }\n\n.Select-module_selectMenu__8y4kQ {\n  background-color: var(--light);\n  position: absolute;\n  box-shadow: var(--shadow);\n  border-radius: var(--borderRadius);\n  width: 100%;\n  top: 2px;\n  z-index: 1112;\n  max-height: 280px;\n  overflow: auto; }\n";
-var styles$y = {"selectContainer":"Select-module_selectContainer__DHFDZ","select":"Select-module_select__Fbn38","disabled":"Select-module_disabled__2XXut","readOnly":"Select-module_readOnly__VoTER","selectMenu":"Select-module_selectMenu__8y4kQ"};
+var css_248z$y = ".Select-module_selectContainer__DHFDZ {\n  position: relative; }\n\n.Select-module_select__Fbn38 {\n  width: 100%;\n  padding: 0.375rem 0.75rem;\n  font-size: 1rem;\n  font-weight: 400;\n  line-height: 1.5;\n  color: #212529;\n  background-color: #fff;\n  background-clip: padding-box;\n  border: 1px solid #ced4da;\n  appearance: none;\n  border-radius: 0.25rem;\n  box-shadow: inset 0 1px 2px #00000013;\n  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n  align-items: center;\n  min-height: calc(1.5em + 0.75rem + 2px);\n  height: auto;\n  display: flex;\n  flex-wrap: wrap; }\n  .Select-module_select__Fbn38 > span {\n    flex: 1; }\n  .Select-module_select__Fbn38:hover {\n    cursor: pointer; }\n  .Select-module_select__Fbn38:focus:not(.Select-module_select__Fbn38.Select-module_disabled__2XXut) {\n    color: #212529;\n    background-color: #fff;\n    border-color: #86b7fe;\n    outline: 0;\n    box-shadow: inset 0 1px 2px #00000013, 0 0 0 0.25rem #0d6efd40; }\n  .Select-module_select__Fbn38.Select-module_disabled__2XXut, .Select-module_select__Fbn38.Select-module_readOnly__VoTER {\n    background-color: #e9ecef; }\n  .Select-module_select__Fbn38.Select-module_disabled__2XXut:hover {\n    cursor: not-allowed; }\n  .Select-module_select__Fbn38.Select-module_readOnly__VoTER:hover {\n    cursor: inherit; }\n\n.Select-module_chipContainer__1poFF {\n  gap: 10px;\n  flex: 1;\n  display: inline-flex;\n  flex-wrap: wrap; }\n\n.Select-module_selectMenu__8y4kQ {\n  background-color: var(--light);\n  position: absolute;\n  box-shadow: var(--shadow);\n  border-radius: var(--borderRadius);\n  width: 100%;\n  top: 2px;\n  z-index: 1112;\n  max-height: 280px;\n  overflow: auto; }\n";
+var styles$y = {"selectContainer":"Select-module_selectContainer__DHFDZ","select":"Select-module_select__Fbn38","disabled":"Select-module_disabled__2XXut","readOnly":"Select-module_readOnly__VoTER","chipContainer":"Select-module_chipContainer__1poFF","selectMenu":"Select-module_selectMenu__8y4kQ"};
 styleInject(css_248z$y);
 
 const Select = (props) => {
@@ -969,7 +1034,7 @@ const Select = (props) => {
         let result = null;
         if (selectedOptions.length <= multipleMaxCountItems && selectedOptions.length > 0) {
             result = selectedOptions
-                .map(option => React__default["default"].createElement(Chip, { key: option.value, className: "mr-2", color: exports.COLOR.primary, isDeletable: true, onDelete: (e) => handleOnDelete(e, option) }, option.label));
+                .map(option => React__default["default"].createElement(Chip, { key: option.value, color: exports.COLOR.primary, isDeletable: true, onDelete: (e) => handleOnDelete(e, option) }, option.label));
         }
         else {
             result = React__default["default"].createElement("span", null,
@@ -1014,8 +1079,9 @@ const Select = (props) => {
     return (React__default["default"].createElement("div", { ref: selectConainter, className: styles$y.selectContainer },
         React__default["default"].createElement("div", { id: id, className: getCssClass(), onClick: () => show(), tabIndex: 0, onKeyDown: e => handleOnKeyDown(e) },
             !multiple && renderSingleViewModel(),
-            multiple && renderMultipleViewModel(),
-            React__default["default"].createElement(Icon, { className: "ml-auto" },
+            multiple &&
+                React__default["default"].createElement("div", { className: styles$y.chipContainer }, renderMultipleViewModel()),
+            React__default["default"].createElement(Icon, { className: "ml-2" },
                 React__default["default"].createElement(ChevronDownSolidIcon, null))),
         isShow &&
             reactDom.createPortal(React__default["default"].createElement(React__default["default"].Fragment, null,
@@ -1423,7 +1489,7 @@ const DateSelect = (props) => {
 // 	return Math.ceil((((d - yearStart) / 86400000) + 1) / 7)
 // };
 
-var css_248z$u = ".Drawer-module_drawer__kdQCk {\n  height: 100%;\n  z-index: 1101;\n  bottom: 0;\n  position: fixed;\n  background: white;\n  min-width: 280px;\n  overflow-y: auto; }\n  .Drawer-module_drawer__kdQCk.Drawer-module_permanent__c-y8y {\n    position: inherit;\n    z-index: 0; }\n  .Drawer-module_drawer__kdQCk.Drawer-module_left__loQVO {\n    order: 0; }\n  .Drawer-module_drawer__kdQCk.Drawer-module_right__sJ3mZ {\n    order: 2; }\n  .Drawer-module_drawer__kdQCk.Drawer-module_shadow__Myo3n {\n    box-shadow: var(--shadow); }\n\n.Drawer-module_drawerOpen__07ptP {\n  overflow: hidden; }\n";
+var css_248z$u = ".Drawer-module_drawer__kdQCk {\n  height: 100%;\n  z-index: 1101;\n  bottom: 0;\n  position: fixed;\n  background: white;\n  min-width: 320px;\n  overflow-y: auto; }\n  .Drawer-module_drawer__kdQCk.Drawer-module_permanent__c-y8y {\n    position: inherit;\n    z-index: 0; }\n  .Drawer-module_drawer__kdQCk.Drawer-module_left__loQVO {\n    order: 0; }\n  .Drawer-module_drawer__kdQCk.Drawer-module_right__sJ3mZ {\n    order: 2; }\n  .Drawer-module_drawer__kdQCk.Drawer-module_shadow__Myo3n {\n    box-shadow: var(--shadow); }\n\n.Drawer-module_drawerOpen__07ptP {\n  overflow: hidden; }\n";
 var styles$u = {"drawer":"Drawer-module_drawer__kdQCk","permanent":"Drawer-module_permanent__c-y8y","left":"Drawer-module_left__loQVO","right":"Drawer-module_right__sJ3mZ","shadow":"Drawer-module_shadow__Myo3n","drawerOpen":"Drawer-module_drawerOpen__07ptP"};
 styleInject(css_248z$u);
 
@@ -1653,8 +1719,8 @@ const Link = (props) => {
     return (React__default["default"].createElement("a", Object.assign({ className: cssClassName, href: href, target: target, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave }, rest), children));
 };
 
-var css_248z$k = ".LoadingIndicator-module_loadingIndicatorContainer__GS9OG {\n  position: fixed;\n  top: 0;\n  left: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  width: 100%; }\n\n.LoadingIndicator-module_loadingIndicator__EC9sx {\n  animation-name: LoadingIndicator-module_spinAnimation__LeY4Z;\n  animation-duration: 5000ms;\n  animation-iteration-count: infinite;\n  animation-timing-function: linear;\n  width: 24px;\n  height: 24px; }\n\n@keyframes LoadingIndicator-module_spinAnimation__LeY4Z {\n  from {\n    transform: rotate(0deg); }\n  to {\n    transform: rotate(360deg); } }\n";
-var styles$k = {"loadingIndicatorContainer":"LoadingIndicator-module_loadingIndicatorContainer__GS9OG","loadingIndicator":"LoadingIndicator-module_loadingIndicator__EC9sx","spinAnimation":"LoadingIndicator-module_spinAnimation__LeY4Z"};
+var css_248z$k = ".LoadingIndicator-module_loadingIndicatorContainer__GS9OG {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  width: 100%; }\n  .LoadingIndicator-module_loadingIndicatorContainer__GS9OG.LoadingIndicator-module_isFixed__WCFNG {\n    position: fixed;\n    top: 0;\n    left: 0; }\n\n.LoadingIndicator-module_loadingIndicator__EC9sx {\n  animation-name: LoadingIndicator-module_spinAnimation__LeY4Z;\n  animation-duration: 5000ms;\n  animation-iteration-count: infinite;\n  animation-timing-function: linear;\n  width: 24px;\n  height: 24px; }\n\n@keyframes LoadingIndicator-module_spinAnimation__LeY4Z {\n  from {\n    transform: rotate(0deg); }\n  to {\n    transform: rotate(360deg); } }\n";
+var styles$k = {"loadingIndicatorContainer":"LoadingIndicator-module_loadingIndicatorContainer__GS9OG","isFixed":"LoadingIndicator-module_isFixed__WCFNG","loadingIndicator":"LoadingIndicator-module_loadingIndicator__EC9sx","spinAnimation":"LoadingIndicator-module_spinAnimation__LeY4Z"};
 styleInject(css_248z$k);
 
 const LoadingIndicator = (_a) => {
@@ -1668,10 +1734,11 @@ const LoadingIndicator = (_a) => {
         React__default["default"].createElement(SpinnerSolidIcon, null)));
 };
 
-const LoadingIndicatorContainer = ({ children }) => {
+const LoadingIndicatorContainer = ({ children, isFixed }) => {
     const getCssClasses = () => {
         const cssClasses = [];
         cssClasses.push(styles$k.loadingIndicatorContainer);
+        isFixed && cssClasses.push(styles$k.isFixed);
         return cssClasses.filter(css => css).join(' ');
     };
     return (React__default["default"].createElement("div", { className: getCssClasses() }, children));
@@ -1685,7 +1752,7 @@ class LoadingIndicatorService {
         this.container = document.createElement('div');
         this.container.classList.add('snackbar-container');
         document.body.appendChild(this.container);
-        reactDom.render(React__default["default"].createElement(LoadingIndicatorContainer, null,
+        reactDom.render(React__default["default"].createElement(LoadingIndicatorContainer, { isFixed: true },
             React__default["default"].createElement(LoadingIndicator, null)), this.container);
     }
     hide() {
@@ -2686,6 +2753,7 @@ exports.Chip = Chip;
 exports.CircleSolidIcon = CircleSolidIcon;
 exports.Column = Column;
 exports.ConditionalWrapper = ConditionalWrapper;
+exports.CssTransition = CssTransition;
 exports.DateSelect = DateSelect;
 exports.DaySelect = DaySelect;
 exports.Drawer = Drawer;

package/package.json

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

package/readme.md

@@ -47,6 +47,7 @@ const MyApp = () => {
 -   Card
 -   Checkbox
 -   Chip
+-	CssTransition
 -   ConditionalWrapper
 -   DateSelect
 -   Drawer