react-asc 18.8.7 → 18.8.8

package/components/Alert/Alert.d.ts

@@ -1,7 +1,7 @@
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 import { VARIANT } from '../component.enums';
 import { COLOR, SIZE } from '../component.enums';
-export interface IAlertProps {
+export interface IAlertProps extends React.ComponentProps<"div"> {
     children?: ReactNode;
     className?: string;
     variant?: VARIANT;

package/components/AppBar/AppBar.d.ts

@@ -1,6 +1,6 @@
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 import { COLOR, SIZE } from '../component.enums';
-export interface IAppBarProps {
+export interface IAppBarProps extends React.ComponentProps<"nav"> {
     children?: ReactNode;
     className?: string;
     color?: COLOR.primary | COLOR.light;

package/components/AppBar/AppBarTitle.d.ts

@@ -1,7 +1,5 @@
-import { ReactNode } from 'react';
-export interface IAppBarTitleProps {
+import React, { ReactNode } from 'react';
+export interface IAppBarTitleProps extends React.ComponentProps<"div"> {
     children?: ReactNode;
-    onClick?: () => void;
-    className?: string;
 }
 export declare const AppBarTitle: (props: IAppBarTitleProps) => JSX.Element;

package/components/Backdrop/Backdrop.d.ts

@@ -1,9 +1,7 @@
 import React from 'react';
-interface IBackdropProps {
+interface IBackdropProps extends React.ComponentProps<"div"> {
     target?: HTMLElement;
-    onClick?: () => void;
     isTransparent?: boolean;
-    style?: any;
 }
 export declare const Backdrop: (props: IBackdropProps) => React.ReactPortal;
 export {};

package/components/Badge/Badge.d.ts

@@ -1,8 +1,7 @@
 import React from 'react';
 import { COLOR } from "../component.enums";
-export interface IBadgeProps extends React.DetailedHTMLProps<React.HtmlHTMLAttributes<HTMLDivElement>, HTMLDivElement> {
+export interface IBadgeProps extends React.ComponentProps<"div"> {
     color?: COLOR;
     content?: any;
-    onClick?: (e: React.MouseEvent) => void;
 }
 export declare const Badge: (props: IBadgeProps) => JSX.Element;

package/components/Breadcrumb/Breadcrumb.d.ts

@@ -1,6 +1,5 @@
-import { ReactNode } from 'react';
-export interface IBreadcrumbProps {
-    className?: string;
+import React, { ReactNode } from 'react';
+export interface IBreadcrumbProps extends React.ComponentProps<"nav"> {
     children?: ReactNode;
 }
 export declare const Breadcrumb: (props: IBreadcrumbProps) => JSX.Element;

package/components/Button/Button.d.ts

@@ -1,12 +1,11 @@
 import React from 'react';
 import { COLOR, VARIANT } from '../component.enums';
-export interface IButtonProps extends React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {
+export interface IButtonProps extends React.ComponentProps<"button"> {
     color?: COLOR;
     isActive?: boolean;
     isRounded?: boolean;
-    onClick?: (e: React.MouseEvent) => void;
     variant?: VARIANT;
     startIcon?: React.SVGProps<SVGSVGElement>;
     endIcon?: React.SVGProps<SVGSVGElement>;
 }
-export declare const Button: (props: IButtonProps) => JSX.Element;
+export declare const Button: React.FunctionComponent<IButtonProps>;

package/components/ButtonGroup/ButtonGroup.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
-export interface IButtonGroupProps extends React.DetailedHTMLProps<React.HtmlHTMLAttributes<HTMLDivElement>, HTMLDivElement> {
+export interface IButtonGroupProps extends React.ComponentProps<"div"> {
 }
 export declare const ButtonGroup: (props: IButtonGroupProps) => JSX.Element;

package/components/Card/Card.d.ts

@@ -1,7 +1,6 @@
 import React from 'react';
-interface ICardProps extends React.DetailedHTMLProps<React.HtmlHTMLAttributes<HTMLDivElement>, HTMLDivElement> {
+interface ICardProps extends React.ComponentProps<"div"> {
     shadow?: boolean;
-    style?: any;
 }
 export declare const Card: (props: ICardProps) => JSX.Element;
 export {};

package/components/Card/CardBody.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-interface ICardBodyProps extends React.DetailedHTMLProps<React.HtmlHTMLAttributes<HTMLDivElement>, HTMLDivElement> {
+interface ICardBodyProps extends React.ComponentProps<"div"> {
 }
 export declare const CardBody: (props: ICardBodyProps) => JSX.Element;
 export {};

package/components/Card/CardFooter.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-interface ICardFooter extends React.DetailedHTMLProps<React.HtmlHTMLAttributes<HTMLDivElement>, HTMLDivElement> {
+interface ICardFooter extends React.ComponentProps<"div"> {
 }
 export declare const CardFooter: (props: ICardFooter) => JSX.Element;
 export {};

package/components/Card/CardImage.d.ts

@@ -1,8 +1,5 @@
 import React from 'react';
-interface ICardImageProps extends React.DetailedHTMLProps<React.HtmlHTMLAttributes<HTMLImageElement>, HTMLImageElement> {
-    src?: string;
-    alt?: string;
-    className?: string;
+interface ICardImageProps extends React.ComponentProps<"img"> {
 }
 export declare const CardImage: (props: ICardImageProps) => JSX.Element;
 export {};

package/components/Card/CardSubtitle.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-interface ICardSubtitleProps extends React.DetailedHTMLProps<React.HtmlHTMLAttributes<HTMLDivElement>, HTMLDivElement> {
+interface ICardSubtitleProps extends React.ComponentProps<"div"> {
 }
 export declare const CardSubtitle: (props: ICardSubtitleProps) => JSX.Element;
 export {};

package/components/Card/CardText.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-interface ICardTextProps extends React.DetailedHTMLProps<React.HtmlHTMLAttributes<HTMLDivElement>, HTMLDivElement> {
+interface ICardTextProps extends React.ComponentProps<"p"> {
 }
 export declare const CardText: (props: ICardTextProps) => JSX.Element;
 export {};

package/components/Card/CardTitle.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-interface ICardTitleProps extends React.DetailedHTMLProps<React.HtmlHTMLAttributes<HTMLDivElement>, HTMLDivElement> {
+interface ICardTitleProps extends React.ComponentProps<"div"> {
     as?: any;
 }
 export declare const CardTitle: (props: ICardTitleProps) => JSX.Element;

package/components/Checkbox/Checkbox.d.ts

@@ -1,10 +1,5 @@
 import React from 'react';
-import { HtmlBaseProps } from '../component.interfaces';
-export interface ICheckboxProps extends HtmlBaseProps {
-    id?: string;
-    name?: string;
-    className?: string;
-    checked?: boolean;
+export interface ICheckboxProps extends React.ComponentProps<"input"> {
     label?: string;
     value?: string;
     onChange?: (val: React.FocusEvent<HTMLInputElement>) => void;

package/components/Chip/Chip.d.ts

@@ -1,14 +1,11 @@
-import React, { ReactNode } from "react";
+import React from "react";
 import { COLOR } from '../component.enums';
-export interface IChipProps {
+export interface IChipProps extends React.ComponentProps<"div"> {
     color?: COLOR;
-    children?: ReactNode;
-    className?: string;
     shadow?: boolean;
     onClick?: (e: React.MouseEvent<Element>) => void;
     isDeletable?: boolean;
     onDelete?: (e: React.MouseEvent<Element>) => void;
     deleteIcon?: any;
-    style?: any;
 }
 export declare const Chip: (props: IChipProps) => JSX.Element;

package/components/Form/FormHint/FormHint.d.ts

@@ -1,5 +1,5 @@
-import { FunctionComponent, HTMLAttributes } from 'react';
-interface IFormHintProps {
+import React from 'react';
+interface IFormHintProps extends React.ComponentProps<"small"> {
 }
-export declare const FormHint: FunctionComponent<IFormHintProps & HTMLAttributes<HTMLElement>>;
+export declare const FormHint: (props: IFormHintProps) => JSX.Element;
 export {};

package/index.es.js

@@ -140,14 +140,14 @@ const AppBarTitle = (props) => {
         className && cssClasses.push(className);
         return cssClasses.filter(r => r).join(' ');
     };
-    return (React.createElement("div", { className: getCssClass(), onClick: () => onClick && onClick() }, children));
+    return (React.createElement("div", { className: getCssClass(), onClick: onClick }, children));
 };
 
 const Backdrop = (props) => {
-    const { target = document.body, isTransparent = false, onClick, style } = props;
+    const { target = document.body, isTransparent = false, onClick, style } = props, rest = __rest(props, ["target", "isTransparent", "onClick", "style"]);
     const handleClick = (e) => {
         e.stopPropagation();
-        onClick && onClick();
+        onClick && onClick(e);
     };
     const getCssClasses = () => {
         const cssClasses = [];
@@ -161,7 +161,7 @@ const Backdrop = (props) => {
         const styles = Object.assign({ height: '100%', width: '100%', position: 'absolute' }, style);
         return styles;
     };
-    return (createPortal(React.createElement("div", { className: getCssClasses(), onClick: handleClick, style: getStyles() }), target));
+    return (createPortal(React.createElement("div", Object.assign({ className: getCssClasses(), onClick: handleClick, style: getStyles() }, rest)), target));
 };
 
 var css_248z$S = ".List-module_list__1ax9w {\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  padding-left: 0;\n  margin-bottom: 0;\n  margin-top: 0;\n  background-color: var(--white); }\n";
@@ -325,18 +325,17 @@ const AutoComplete = (props) => {
         setModel('');
         setSearchText('');
     };
-    return (React.createElement(React.Fragment, null,
-        React.createElement("div", { ref: selectConainter, className: styles$M.selectContainer },
-            React.createElement("div", { className: "d-flex" },
-                React.createElement("input", { type: "text", className: getCssClass(), id: id, name: name, tabIndex: 0, readOnly: readOnly, disabled: disabled, onChange: handleOnChange, onFocus: handleOnFocus, placeholder: placeholder, value: model }),
-                showClearButton && (model === null || model === void 0 ? void 0 : model.length) > 0 &&
-                    React.createElement(IconButton, { icon: React.createElement(TimesSolidIcon, null), onClick: handleClickReset })),
-            isShow &&
-                React.createElement(React.Fragment, null,
-                    React.createElement("div", { className: styles$M.selectMenu },
-                        React.createElement(List, null, optionsTemp && optionsTemp.map((option, index) => React.createElement(ListItem, { id: `list-item-${index}`, key: option.value, onClick: () => handleOnClick(option), disabled: !option.value },
-                            React.createElement(ListItemText, { primary: option.label ? option.label : option.value }))))),
-                    React.createElement(Backdrop, { isTransparent: true, onClick: () => hide() })))));
+    return (React.createElement("div", { ref: selectConainter, className: styles$M.selectContainer },
+        React.createElement("div", { className: "d-flex" },
+            React.createElement("input", { type: "text", className: getCssClass(), id: id, name: name, tabIndex: 0, readOnly: readOnly, disabled: disabled, onChange: handleOnChange, onFocus: handleOnFocus, placeholder: placeholder, value: model }),
+            showClearButton && (model === null || model === void 0 ? void 0 : model.length) > 0 &&
+                React.createElement(IconButton, { icon: React.createElement(TimesSolidIcon, null), onClick: handleClickReset })),
+        isShow &&
+            React.createElement(React.Fragment, null,
+                React.createElement("div", { className: styles$M.selectMenu },
+                    React.createElement(List, null, optionsTemp && optionsTemp.map((option, index) => React.createElement(ListItem, { id: `list-item-${index}`, key: option.value, onClick: () => handleOnClick(option), disabled: !option.value },
+                        React.createElement(ListItemText, { primary: option.label ? option.label : option.value }))))),
+                React.createElement(Backdrop, { isTransparent: true, onClick: () => hide() }))));
 };
 
 var css_248z$L = ".Badge-module_badgeContainer__1QtTD {\n  display: inline-flex;\n  position: relative;\n  flex-shrink: 0;\n  vertical-align: middle; }\n\n.Badge-module_badge__2Y_LO {\n  top: 0;\n  right: 0;\n  transform: scale(1) translate(50%, -50%);\n  transform-origin: 100% 0%;\n  height: 20px;\n  display: flex;\n  padding: 0 6px;\n  z-index: 1;\n  position: absolute;\n  flex-wrap: wrap;\n  font-size: 0.75rem;\n  min-width: 20px;\n  align-items: center;\n  font-weight: 500;\n  line-height: 1;\n  align-content: center;\n  flex-direction: row;\n  justify-content: center;\n  border-radius: 10px;\n  transition: transform 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; }\n  .Badge-module_badge__2Y_LO.Badge-module_primary__2mn7_ {\n    color: var(--primary-contrast-text);\n    background-color: var(--primary); }\n  .Badge-module_badge__2Y_LO.Badge-module_accent__8Hg8z {\n    color: var(--accent-contrast-text);\n    background-color: var(--accent); }\n  .Badge-module_badge__2Y_LO.Badge-module_secondary__1QqDc {\n    color: var(--secondary-contrast-text);\n    background-color: var(--secondary); }\n  .Badge-module_badge__2Y_LO.Badge-module_light__3Z7JO {\n    color: var(--light-contrast-text);\n    background-color: var(--light); }\n  .Badge-module_badge__2Y_LO.Badge-module_dark__2qWe_ {\n    color: var(--dark-contrast-text);\n    background-color: var(--dark); }\n";
@@ -362,42 +361,26 @@ const Badge = (props) => {
         React.createElement("span", { className: getCssClassesBadge() }, content)));
 };
 
-var css_248z$K = ".Icon-module_icon__2etAT {\n  align-items: center;\n  justify-content: center;\n  display: flex;\n  width: 20px;\n  height: 20px; }\n  .Icon-module_icon__2etAT svg {\n    width: inherit;\n    height: inherit; }\n  .Icon-module_icon__2etAT.Icon-module_primary__32Mh4 {\n    color: var(--primary); }\n  .Icon-module_icon__2etAT.Icon-module_accent__2U_no {\n    color: var(--accent); }\n  .Icon-module_icon__2etAT.Icon-module_secondary__3cMmx {\n    color: var(--secondary); }\n  .Icon-module_icon__2etAT.Icon-module_light__2SugS {\n    color: var(--light); }\n  .Icon-module_icon__2etAT.Icon-module_dark__GWMzb {\n    color: var(--dark); }\n";
-var styles$K = {"icon":"Icon-module_icon__2etAT","primary":"Icon-module_primary__32Mh4","accent":"Icon-module_accent__2U_no","secondary":"Icon-module_secondary__3cMmx","light":"Icon-module_light__2SugS","dark":"Icon-module_dark__GWMzb"};
+var css_248z$K = ".Button-module_button__3cIVZ {\n  text-transform: uppercase !important;\n  flex-shrink: 0;\n  background-color: transparent;\n  display: inline-block;\n  font-weight: 400;\n  line-height: 1.5;\n  text-align: center;\n  text-decoration: none;\n  vertical-align: middle;\n  user-select: none;\n  border: 1px solid transparent;\n  padding: 0.375rem 0.75rem;\n  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n  min-width: 64px;\n  font-size: 0.875rem;\n  border-radius: var(--borderRadius);\n  box-shadow: var(--shadow); }\n\n.Button-module_btnContained__8Q4uL.Button-module_primary__2soUg {\n  color: var(--primary-contrast-text);\n  background-color: var(--primary); }\n  .Button-module_btnContained__8Q4uL.Button-module_primary__2soUg:hover {\n    background-color: var(--primary-dark); }\n\n.Button-module_btnContained__8Q4uL.Button-module_accent__1_cP6 {\n  color: var(--accent-contrast-text);\n  background-color: var(--accent); }\n  .Button-module_btnContained__8Q4uL.Button-module_accent__1_cP6:hover {\n    background-color: var(--accent-dark); }\n\n.Button-module_btnContained__8Q4uL.Button-module_secondary__psAvb {\n  color: var(--secondary-contrast-text);\n  background-color: var(--secondary); }\n  .Button-module_btnContained__8Q4uL.Button-module_secondary__psAvb:hover {\n    background-color: var(--secondary-dark); }\n\n.Button-module_btnContained__8Q4uL.Button-module_light__JVK1z {\n  color: var(--light-contrast-text);\n  background-color: var(--light); }\n  .Button-module_btnContained__8Q4uL.Button-module_light__JVK1z:hover {\n    background-color: var(--light-dark); }\n\n.Button-module_btnContained__8Q4uL.Button-module_dark__O89wU {\n  color: var(--dark-contrast-text);\n  background-color: var(--dark); }\n  .Button-module_btnContained__8Q4uL.Button-module_dark__O89wU:hover {\n    background-color: var(--dark-dark); }\n\n.Button-module_btnContained__8Q4uL:disabled:hover {\n  cursor: not-allowed; }\n\n.Button-module_btnText__32H44 {\n  box-shadow: none;\n  text-decoration: none; }\n  .Button-module_btnText__32H44.Button-module_primary__2soUg {\n    color: var(--primary) !important; }\n    .Button-module_btnText__32H44.Button-module_primary__2soUg:hover {\n      text-decoration: none;\n      background: var(--primary-highlight) !important; }\n  .Button-module_btnText__32H44.Button-module_secondary__psAvb {\n    color: var(--secondary) !important; }\n    .Button-module_btnText__32H44.Button-module_secondary__psAvb:hover {\n      text-decoration: none;\n      background: var(--secondary-highlight) !important; }\n  .Button-module_btnText__32H44.Button-module_accent__1_cP6 {\n    color: var(--accent) !important; }\n    .Button-module_btnText__32H44.Button-module_accent__1_cP6:hover {\n      text-decoration: none;\n      background: var(--accent-highlight) !important; }\n  .Button-module_btnText__32H44.Button-module_light__JVK1z {\n    color: var(--light-contrast-text) !important; }\n    .Button-module_btnText__32H44.Button-module_light__JVK1z:hover {\n      text-decoration: none;\n      background: var(--light-highlight) !important; }\n  .Button-module_btnText__32H44.Button-module_dark__O89wU {\n    color: var(--dark) !important; }\n    .Button-module_btnText__32H44.Button-module_dark__O89wU:hover {\n      text-decoration: none;\n      background: var(--dark-highlight) !important; }\n\n.Button-module_btnOutline__2drkn {\n  box-shadow: none;\n  text-decoration: none; }\n  .Button-module_btnOutline__2drkn.Button-module_primary__2soUg {\n    color: var(--primary) !important;\n    border-color: var(--primary) !important; }\n    .Button-module_btnOutline__2drkn.Button-module_primary__2soUg:hover {\n      background: var(--primary-highlight) !important; }\n  .Button-module_btnOutline__2drkn.Button-module_secondary__psAvb {\n    color: var(--secondary) !important;\n    border-color: var(--secondary) !important; }\n    .Button-module_btnOutline__2drkn.Button-module_secondary__psAvb:hover {\n      background: var(--secondary-highlight) !important; }\n  .Button-module_btnOutline__2drkn.Button-module_accent__1_cP6 {\n    color: var(--accent) !important;\n    border-color: var(--accent) !important; }\n    .Button-module_btnOutline__2drkn.Button-module_accent__1_cP6:hover {\n      background: var(--accent-highlight) !important; }\n  .Button-module_btnOutline__2drkn.Button-module_light__JVK1z {\n    color: var(--light-contrast-text) !important;\n    border-color: var(--light) !important; }\n    .Button-module_btnOutline__2drkn.Button-module_light__JVK1z:hover {\n      background: var(--light-highlight) !important; }\n  .Button-module_btnOutline__2drkn.Button-module_dark__O89wU {\n    color: var(--dark) !important;\n    border-color: var(--dark) !important; }\n    .Button-module_btnOutline__2drkn.Button-module_dark__O89wU:hover {\n      background: var(--dark-highlight) !important; }\n\n.Button-module_startIcon__1TN-G {\n  display: inherit;\n  margin-left: -4px;\n  margin-right: 8px; }\n  .Button-module_startIcon__1TN-G svg {\n    width: 18px;\n    height: 18px; }\n\n.Button-module_endIcon__3uZjE {\n  display: inherit;\n  margin-left: 8px; }\n  .Button-module_endIcon__3uZjE svg {\n    width: 18px;\n    height: 18px; }\n";
+var styles$K = {"button":"Button-module_button__3cIVZ","btnContained":"Button-module_btnContained__8Q4uL","primary":"Button-module_primary__2soUg","accent":"Button-module_accent__1_cP6","secondary":"Button-module_secondary__psAvb","light":"Button-module_light__JVK1z","dark":"Button-module_dark__O89wU","btnText":"Button-module_btnText__32H44","btnOutline":"Button-module_btnOutline__2drkn","startIcon":"Button-module_startIcon__1TN-G","endIcon":"Button-module_endIcon__3uZjE"};
 styleInject(css_248z$K);
 
-const Icon = (props) => {
-    const { children, iconColor, className } = props, rest = __rest(props, ["children", "iconColor", "className"]);
-    const getCssClasses = () => {
-        const cssClasses = [];
-        cssClasses.push(styles$K.icon);
-        iconColor && cssClasses.push(styles$K[iconColor]);
-        className && cssClasses.push(className);
-        return cssClasses.filter(css => css).join(' ');
-    };
-    return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
-};
-
-var css_248z$J = ".Button-module_button__3cIVZ {\n  text-transform: uppercase !important;\n  flex-shrink: 0;\n  background-color: transparent;\n  display: inline-block;\n  font-weight: 400;\n  line-height: 1.5;\n  text-align: center;\n  text-decoration: none;\n  vertical-align: middle;\n  user-select: none;\n  border: 1px solid transparent;\n  padding: 0.375rem 0.75rem;\n  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n  min-width: 64px;\n  font-size: 0.875rem;\n  border-radius: var(--borderRadius);\n  box-shadow: var(--shadow); }\n\n.Button-module_btnContained__8Q4uL.Button-module_primary__2soUg {\n  color: var(--primary-contrast-text);\n  background-color: var(--primary); }\n  .Button-module_btnContained__8Q4uL.Button-module_primary__2soUg:hover {\n    background-color: var(--primary-dark); }\n\n.Button-module_btnContained__8Q4uL.Button-module_accent__1_cP6 {\n  color: var(--accent-contrast-text);\n  background-color: var(--accent); }\n  .Button-module_btnContained__8Q4uL.Button-module_accent__1_cP6:hover {\n    background-color: var(--accent-dark); }\n\n.Button-module_btnContained__8Q4uL.Button-module_secondary__psAvb {\n  color: var(--secondary-contrast-text);\n  background-color: var(--secondary); }\n  .Button-module_btnContained__8Q4uL.Button-module_secondary__psAvb:hover {\n    background-color: var(--secondary-dark); }\n\n.Button-module_btnContained__8Q4uL.Button-module_light__JVK1z {\n  color: var(--light-contrast-text);\n  background-color: var(--light); }\n  .Button-module_btnContained__8Q4uL.Button-module_light__JVK1z:hover {\n    background-color: var(--light-dark); }\n\n.Button-module_btnContained__8Q4uL.Button-module_dark__O89wU {\n  color: var(--dark-contrast-text);\n  background-color: var(--dark); }\n  .Button-module_btnContained__8Q4uL.Button-module_dark__O89wU:hover {\n    background-color: var(--dark-dark); }\n\n.Button-module_btnContained__8Q4uL:disabled:hover {\n  cursor: not-allowed; }\n\n.Button-module_btnText__32H44 {\n  box-shadow: none;\n  text-decoration: none; }\n  .Button-module_btnText__32H44.Button-module_primary__2soUg {\n    color: var(--primary) !important; }\n    .Button-module_btnText__32H44.Button-module_primary__2soUg:hover {\n      text-decoration: none;\n      background: var(--primary-highlight) !important; }\n  .Button-module_btnText__32H44.Button-module_secondary__psAvb {\n    color: var(--secondary) !important; }\n    .Button-module_btnText__32H44.Button-module_secondary__psAvb:hover {\n      text-decoration: none;\n      background: var(--secondary-highlight) !important; }\n  .Button-module_btnText__32H44.Button-module_accent__1_cP6 {\n    color: var(--accent) !important; }\n    .Button-module_btnText__32H44.Button-module_accent__1_cP6:hover {\n      text-decoration: none;\n      background: var(--accent-highlight) !important; }\n  .Button-module_btnText__32H44.Button-module_light__JVK1z {\n    color: var(--light-contrast-text) !important; }\n    .Button-module_btnText__32H44.Button-module_light__JVK1z:hover {\n      text-decoration: none;\n      background: var(--light-highlight) !important; }\n  .Button-module_btnText__32H44.Button-module_dark__O89wU {\n    color: var(--dark) !important; }\n    .Button-module_btnText__32H44.Button-module_dark__O89wU:hover {\n      text-decoration: none;\n      background: var(--dark-highlight) !important; }\n\n.Button-module_btnOutline__2drkn {\n  box-shadow: none;\n  text-decoration: none; }\n  .Button-module_btnOutline__2drkn.Button-module_primary__2soUg {\n    color: var(--primary) !important;\n    border-color: var(--primary) !important; }\n    .Button-module_btnOutline__2drkn.Button-module_primary__2soUg:hover {\n      background: var(--primary-highlight) !important; }\n  .Button-module_btnOutline__2drkn.Button-module_secondary__psAvb {\n    color: var(--secondary) !important;\n    border-color: var(--secondary) !important; }\n    .Button-module_btnOutline__2drkn.Button-module_secondary__psAvb:hover {\n      background: var(--secondary-highlight) !important; }\n  .Button-module_btnOutline__2drkn.Button-module_accent__1_cP6 {\n    color: var(--accent) !important;\n    border-color: var(--accent) !important; }\n    .Button-module_btnOutline__2drkn.Button-module_accent__1_cP6:hover {\n      background: var(--accent-highlight) !important; }\n  .Button-module_btnOutline__2drkn.Button-module_light__JVK1z {\n    color: var(--light-contrast-text) !important;\n    border-color: var(--light) !important; }\n    .Button-module_btnOutline__2drkn.Button-module_light__JVK1z:hover {\n      background: var(--light-highlight) !important; }\n  .Button-module_btnOutline__2drkn.Button-module_dark__O89wU {\n    color: var(--dark) !important;\n    border-color: var(--dark) !important; }\n    .Button-module_btnOutline__2drkn.Button-module_dark__O89wU:hover {\n      background: var(--dark-highlight) !important; }\n\n.Button-module_startIcon__1TN-G {\n  display: inherit;\n  margin-left: -4px;\n  margin-right: 8px; }\n  .Button-module_startIcon__1TN-G svg {\n    width: 18px;\n    height: 18px; }\n\n.Button-module_endIcon__3uZjE {\n  display: inherit;\n  margin-left: 8px; }\n  .Button-module_endIcon__3uZjE svg {\n    width: 18px;\n    height: 18px; }\n";
-var styles$J = {"button":"Button-module_button__3cIVZ","btnContained":"Button-module_btnContained__8Q4uL","primary":"Button-module_primary__2soUg","accent":"Button-module_accent__1_cP6","secondary":"Button-module_secondary__psAvb","light":"Button-module_light__JVK1z","dark":"Button-module_dark__O89wU","btnText":"Button-module_btnText__32H44","btnOutline":"Button-module_btnOutline__2drkn","startIcon":"Button-module_startIcon__1TN-G","endIcon":"Button-module_endIcon__3uZjE"};
-styleInject(css_248z$J);
-
-const ButtonTemplate = (props) => {
+const Button = (props) => {
     const { children, variant = VARIANT.contained, color = COLOR.primary, isRounded, isActive, className, startIcon, endIcon } = props, rest = __rest(props, ["children", "variant", "color", "isRounded", "isActive", "className", "startIcon", "endIcon"]);
     const getCssClasses = () => {
         const cssClasses = [];
-        cssClasses.push(styles$J.button);
+        cssClasses.push(styles$K.button);
         if (variant !== 'outline' && variant !== 'text') {
-            cssClasses.push(styles$J.btnContained);
-            cssClasses.push(styles$J[color]);
+            cssClasses.push(styles$K.btnContained);
+            cssClasses.push(styles$K[color]);
         }
         if (variant === 'outline') {
-            cssClasses.push(styles$J.btnOutline);
-            cssClasses.push(styles$J[color]);
+            cssClasses.push(styles$K.btnOutline);
+            cssClasses.push(styles$K[color]);
         }
         if (variant === 'text') {
-            cssClasses.push(styles$J.btnText);
-            cssClasses.push(styles$J[color]);
+            cssClasses.push(styles$K.btnText);
+            cssClasses.push(styles$K[color]);
         }
         if (isRounded && variant !== 'text') {
             cssClasses.push(`rounded-pill`);
@@ -408,61 +391,57 @@ const ButtonTemplate = (props) => {
         className && cssClasses.push(className);
         return cssClasses.filter(css => css).join(' ');
     };
-    return (React.createElement("button", Object.assign({ type: "button", className: getCssClasses() }, rest),
+    return (React.createElement("button", Object.assign({ className: getCssClasses() }, rest),
         React.createElement("span", { className: "d-flex justify-content-center" },
             startIcon &&
-                React.createElement(Icon, { className: styles$J.startIcon }, startIcon),
+                React.createElement(Icon, { className: styles$K.startIcon }, startIcon),
             children,
             endIcon &&
-                React.createElement(Icon, { className: styles$J.endIcon }, endIcon))));
+                React.createElement(Icon, { className: styles$K.endIcon }, endIcon))));
 };
 
-const Button = (props) => {
-    return (React.createElement(ButtonTemplate, Object.assign({}, props)));
-};
-
-var css_248z$I = ".ButtonGroup-module_buttonGroup__2RS71 button:not(:last-child) {\n  border-top-right-radius: 0;\n  border-bottom-right-radius: 0; }\n\n.ButtonGroup-module_buttonGroup__2RS71 button:not(:first-child) {\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0; }\n";
-var styles$I = {"buttonGroup":"ButtonGroup-module_buttonGroup__2RS71"};
-styleInject(css_248z$I);
+var css_248z$J = ".ButtonGroup-module_buttonGroup__2RS71 button:not(:last-child) {\n  border-top-right-radius: 0;\n  border-bottom-right-radius: 0; }\n\n.ButtonGroup-module_buttonGroup__2RS71 button:not(:first-child) {\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0; }\n";
+var styles$J = {"buttonGroup":"ButtonGroup-module_buttonGroup__2RS71"};
+styleInject(css_248z$J);
 
 const ButtonGroup = (props) => {
     const { children, className } = props, rest = __rest(props, ["children", "className"]);
     const getCssClasses = () => {
         const cssClasses = [];
-        cssClasses.push(styles$I.buttonGroup);
+        cssClasses.push(styles$J.buttonGroup);
         className && cssClasses.push(className);
         return cssClasses.filter(css => css).join(' ');
     };
     return (React.createElement("div", Object.assign({ className: getCssClasses(), role: "group" }, rest), children));
 };
 
-var css_248z$H = ".Breadcrumb-module_breadcrumb__2BHXS {\n  display: flex;\n  flex-wrap: wrap;\n  padding: 0.75rem 1rem;\n  margin-bottom: 0;\n  list-style: none;\n  border-radius: var(--borderRadius); }\n";
-var styles$H = {"breadcrumb":"Breadcrumb-module_breadcrumb__2BHXS"};
-styleInject(css_248z$H);
+var css_248z$I = ".Breadcrumb-module_breadcrumb__2BHXS {\n  display: flex;\n  flex-wrap: wrap;\n  padding: 0.75rem 1rem;\n  margin-bottom: 0;\n  list-style: none;\n  border-radius: var(--borderRadius); }\n";
+var styles$I = {"breadcrumb":"Breadcrumb-module_breadcrumb__2BHXS"};
+styleInject(css_248z$I);
 
 const Breadcrumb = (props) => {
-    const { children, className } = props;
+    const { children, className } = props, rest = __rest(props, ["children", "className"]);
     const getCssClasses = () => {
         const cssClasses = [];
-        cssClasses.push(styles$H.breadcrumb);
+        cssClasses.push(styles$I.breadcrumb);
         className && cssClasses.push(className);
         return cssClasses.filter(css => css).join(' ');
     };
-    return (React.createElement("nav", null,
+    return (React.createElement("nav", Object.assign({}, rest),
         React.createElement("ol", { className: getCssClasses() }, children)));
 };
 
 const ConditionalWrapper = ({ condition, wrapper, children }) => condition ? wrapper(children) : children;
 
-var css_248z$G = ".BreadcrumbItem-module_breadcrumbItem__1yy-D + .BreadcrumbItem-module_breadcrumbItem__1yy-D {\n  padding-left: 0.5rem; }\n\n.BreadcrumbItem-module_breadcrumbItem__1yy-D + .BreadcrumbItem-module_breadcrumbItem__1yy-D::before {\n  float: left;\n  padding-right: 0.5rem;\n  color: #6c757d;\n  content: \"/\"; }\n\n.BreadcrumbItem-module_breadcrumbItem__1yy-D a:not([href]):not([class]) {\n  color: var(--primary); }\n\n.BreadcrumbItem-module_breadcrumbItem__1yy-D:hover {\n  cursor: pointer; }\n\n.BreadcrumbItem-module_breadcrumbItem__1yy-D.BreadcrumbItem-module_active__3iVU2:hover {\n  cursor: unset; }\n";
-var styles$G = {"breadcrumbItem":"BreadcrumbItem-module_breadcrumbItem__1yy-D","active":"BreadcrumbItem-module_active__3iVU2"};
-styleInject(css_248z$G);
+var css_248z$H = ".BreadcrumbItem-module_breadcrumbItem__1yy-D + .BreadcrumbItem-module_breadcrumbItem__1yy-D {\n  padding-left: 0.5rem; }\n\n.BreadcrumbItem-module_breadcrumbItem__1yy-D + .BreadcrumbItem-module_breadcrumbItem__1yy-D::before {\n  float: left;\n  padding-right: 0.5rem;\n  color: #6c757d;\n  content: \"/\"; }\n\n.BreadcrumbItem-module_breadcrumbItem__1yy-D a:not([href]):not([class]) {\n  color: var(--primary); }\n\n.BreadcrumbItem-module_breadcrumbItem__1yy-D:hover {\n  cursor: pointer; }\n\n.BreadcrumbItem-module_breadcrumbItem__1yy-D.BreadcrumbItem-module_active__3iVU2:hover {\n  cursor: unset; }\n";
+var styles$H = {"breadcrumbItem":"BreadcrumbItem-module_breadcrumbItem__1yy-D","active":"BreadcrumbItem-module_active__3iVU2"};
+styleInject(css_248z$H);
 
 const BreadcrumbItem = (props) => {
     const { children, className, isActive, onClick } = props;
     const getCssClasses = () => {
         const cssClasses = [];
-        cssClasses.push(styles$G.breadcrumbItem);
+        cssClasses.push(styles$H.breadcrumbItem);
         className && cssClasses.push(className);
         isActive && cssClasses.push('active');
         return cssClasses.filter(css => css).join(' ');
@@ -476,106 +455,106 @@ const BreadcrumbItem = (props) => {
             wrapper: label => React.createElement("a", null, label) }, children)));
 };
 
-var css_248z$F = ".Card-module_card__31o3Z {\n  background: var(--white);\n  border-radius: var(--borderRadius); }\n  .Card-module_card__31o3Z.Card-module_shadow__2lpYq {\n    box-shadow: var(--shadow); }\n";
-var styles$F = {"card":"Card-module_card__31o3Z","shadow":"Card-module_shadow__2lpYq"};
-styleInject(css_248z$F);
+var css_248z$G = ".Card-module_card__31o3Z {\n  background: var(--white);\n  border-radius: var(--borderRadius); }\n  .Card-module_card__31o3Z.Card-module_shadow__2lpYq {\n    box-shadow: var(--shadow); }\n";
+var styles$G = {"card":"Card-module_card__31o3Z","shadow":"Card-module_shadow__2lpYq"};
+styleInject(css_248z$G);
 
 const Card = (props) => {
     const { children, className, shadow = true } = props, rest = __rest(props, ["children", "className", "shadow"]);
     const getCssClasses = () => {
         const cssClasses = [];
-        cssClasses.push(styles$F.card);
-        shadow && cssClasses.push(styles$F.shadow);
+        cssClasses.push(styles$G.card);
+        shadow && cssClasses.push(styles$G.shadow);
         className && cssClasses.push(className);
         return cssClasses.filter(css => css).join(' ');
     };
     return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
 };
 
-var css_248z$E = ".CardBody-module_cardBody__N8z-L {\n  flex: 1 1 auto;\n  min-height: 1px;\n  padding: 1.25rem; }\n";
-var styles$E = {"cardBody":"CardBody-module_cardBody__N8z-L"};
-styleInject(css_248z$E);
+var css_248z$F = ".CardBody-module_cardBody__N8z-L {\n  flex: 1 1 auto;\n  min-height: 1px;\n  padding: 1.25rem; }\n";
+var styles$F = {"cardBody":"CardBody-module_cardBody__N8z-L"};
+styleInject(css_248z$F);
 
 const CardBody = (props) => {
     const { children, className } = props, rest = __rest(props, ["children", "className"]);
     const getCssClasses = () => {
         const cssClasses = [];
-        cssClasses.push(styles$E.cardBody);
+        cssClasses.push(styles$F.cardBody);
         className && cssClasses.push(className);
         return cssClasses.filter(css => css).join(' ');
     };
     return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
 };
 
-var css_248z$D = ".CardFooter-module_cardFooter__3dYKa {\n  padding: 0.75rem 1.25rem;\n  background-color: rgba(0, 0, 0, 0.03);\n  border-top: 1px solid rgba(0, 0, 0, 0.125); }\n  .CardFooter-module_cardFooter__3dYKa:last-child {\n    border-radius: 0 0 calc(0.25rem - 1px) calc(0.25rem - 1px); }\n";
-var styles$D = {"cardFooter":"CardFooter-module_cardFooter__3dYKa"};
-styleInject(css_248z$D);
+var css_248z$E = ".CardFooter-module_cardFooter__3dYKa {\n  padding: 0.75rem 1.25rem;\n  background-color: rgba(0, 0, 0, 0.03);\n  border-top: 1px solid rgba(0, 0, 0, 0.125); }\n  .CardFooter-module_cardFooter__3dYKa:last-child {\n    border-radius: 0 0 calc(0.25rem - 1px) calc(0.25rem - 1px); }\n";
+var styles$E = {"cardFooter":"CardFooter-module_cardFooter__3dYKa"};
+styleInject(css_248z$E);
 
 const CardFooter = (props) => {
     const { children, className } = props, rest = __rest(props, ["children", "className"]);
     const getCssClasses = () => {
         const cssClasses = [];
-        cssClasses.push(styles$D.cardFooter);
+        cssClasses.push(styles$E.cardFooter);
         className && cssClasses.push(className);
         return cssClasses.filter(css => css).join(' ');
     };
     return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
 };
 
-var css_248z$C = ".CardSubtitle-module_cardSubtitle__2WWHW {\n  color: #6c757d !important; }\n";
-var styles$C = {"cardSubtitle":"CardSubtitle-module_cardSubtitle__2WWHW"};
-styleInject(css_248z$C);
+var css_248z$D = ".CardSubtitle-module_cardSubtitle__2WWHW {\n  color: #6c757d !important; }\n";
+var styles$D = {"cardSubtitle":"CardSubtitle-module_cardSubtitle__2WWHW"};
+styleInject(css_248z$D);
 
 const CardSubtitle = (props) => {
     const { children, className } = props, rest = __rest(props, ["children", "className"]);
     const getCssClasses = () => {
         const cssClasses = [];
-        cssClasses.push(styles$C.cardSubtitle);
+        cssClasses.push(styles$D.cardSubtitle);
         className && cssClasses.push(className);
         return cssClasses.filter(css => css).join(' ');
     };
     return (React.createElement("p", Object.assign({ className: getCssClasses() }, rest), children));
 };
 
-var css_248z$B = ".CardText-module_cardText__1LWJi:last-child {\n  margin-bottom: 0; }\n";
-var styles$B = {"cardText":"CardText-module_cardText__1LWJi"};
-styleInject(css_248z$B);
+var css_248z$C = ".CardText-module_cardText__1LWJi:last-child {\n  margin-bottom: 0; }\n";
+var styles$C = {"cardText":"CardText-module_cardText__1LWJi"};
+styleInject(css_248z$C);
 
 const CardText = (props) => {
     const { children, className } = props, rest = __rest(props, ["children", "className"]);
     const getCssClasses = () => {
         const cssClasses = [];
-        cssClasses.push(styles$B.cardText);
+        cssClasses.push(styles$C.cardText);
         className && cssClasses.push(className);
         return cssClasses.filter(css => css).join(' ');
     };
     return (React.createElement("p", Object.assign({ className: getCssClasses() }, rest), props.children));
 };
 
-var css_248z$A = ".CardTitle-module_cardTitle__24Amb {\n  margin-bottom: 0;\n  font-size: 1.5rem;\n  font-weight: 400;\n  line-height: 1.334;\n  letter-spacing: 0em; }\n";
-var styles$A = {"cardTitle":"CardTitle-module_cardTitle__24Amb"};
-styleInject(css_248z$A);
+var css_248z$B = ".CardTitle-module_cardTitle__24Amb {\n  margin-bottom: 0;\n  font-size: 1.5rem;\n  font-weight: 400;\n  line-height: 1.334;\n  letter-spacing: 0em; }\n";
+var styles$B = {"cardTitle":"CardTitle-module_cardTitle__24Amb"};
+styleInject(css_248z$B);
 
 const CardTitle = (props) => {
     const { children, className, as: As = 'div' } = props, rest = __rest(props, ["children", "className", "as"]);
     const getCssClasses = () => {
         const cssClasses = [];
-        cssClasses.push(styles$A.cardTitle);
+        cssClasses.push(styles$B.cardTitle);
         className && cssClasses.push(className);
         return cssClasses.filter(css => css).join(' ');
     };
     return (React.createElement(As, Object.assign({ className: getCssClasses() }, rest), children));
 };
 
-var css_248z$z = ".CardImage-module_cardImage__1tZM4 {\n  flex-shrink: 0;\n  width: 100%;\n  border-top-left-radius: calc(0.25rem - 1px);\n  border-top-right-radius: calc(0.25rem - 1px); }\n";
-var styles$z = {"cardImage":"CardImage-module_cardImage__1tZM4"};
-styleInject(css_248z$z);
+var css_248z$A = ".CardImage-module_cardImage__1tZM4 {\n  flex-shrink: 0;\n  width: 100%;\n  border-top-left-radius: calc(0.25rem - 1px);\n  border-top-right-radius: calc(0.25rem - 1px); }\n";
+var styles$A = {"cardImage":"CardImage-module_cardImage__1tZM4"};
+styleInject(css_248z$A);
 
 const CardImage = (props) => {
     const { src, alt, className } = props, rest = __rest(props, ["src", "alt", "className"]);
     const getCssClasses = () => {
         const cssClasses = [];
-        cssClasses.push(styles$z.cardImage);
+        cssClasses.push(styles$A.cardImage);
         className && cssClasses.push(className);
         return cssClasses.filter(css => css).join(' ');
     };
@@ -624,6 +603,22 @@ 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" })));
 
+var css_248z$z = ".Icon-module_icon__2etAT {\n  align-items: center;\n  justify-content: center;\n  display: flex;\n  width: 20px;\n  height: 20px; }\n  .Icon-module_icon__2etAT svg {\n    width: inherit;\n    height: inherit; }\n  .Icon-module_icon__2etAT.Icon-module_primary__32Mh4 {\n    color: var(--primary); }\n  .Icon-module_icon__2etAT.Icon-module_accent__2U_no {\n    color: var(--accent); }\n  .Icon-module_icon__2etAT.Icon-module_secondary__3cMmx {\n    color: var(--secondary); }\n  .Icon-module_icon__2etAT.Icon-module_light__2SugS {\n    color: var(--light); }\n  .Icon-module_icon__2etAT.Icon-module_dark__GWMzb {\n    color: var(--dark); }\n";
+var styles$z = {"icon":"Icon-module_icon__2etAT","primary":"Icon-module_primary__32Mh4","accent":"Icon-module_accent__2U_no","secondary":"Icon-module_secondary__3cMmx","light":"Icon-module_light__2SugS","dark":"Icon-module_dark__GWMzb"};
+styleInject(css_248z$z);
+
+const Icon = (props) => {
+    const { children, iconColor, className } = props, rest = __rest(props, ["children", "iconColor", "className"]);
+    const getCssClasses = () => {
+        const cssClasses = [];
+        cssClasses.push(styles$z.icon);
+        iconColor && cssClasses.push(styles$z[iconColor]);
+        className && cssClasses.push(className);
+        return cssClasses.filter(css => css).join(' ');
+    };
+    return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
+};
+
 var css_248z$y = ".Typography-module_typography__2bM6E {\n  text-overflow: ellipsis;\n  overflow: hidden !important; }\n";
 var styles$y = {"typography":"Typography-module_typography__2bM6E"};
 styleInject(css_248z$y);
@@ -700,8 +695,10 @@ const Checkbox = (props) => {
     };
     const handleClick = () => {
         var _a;
-        setIsChecked(!isChecked);
-        (_a = checkboxElement === null || checkboxElement === void 0 ? void 0 : checkboxElement.current) === null || _a === void 0 ? void 0 : _a.click();
+        if (!disabled && !readOnly) {
+            setIsChecked(!isChecked);
+            (_a = checkboxElement === null || checkboxElement === void 0 ? void 0 : checkboxElement.current) === null || _a === void 0 ? void 0 : _a.click();
+        }
     };
     return (React.createElement("div", { className: styles$w.checkboxContainer },
         React.createElement(IconButton, { className: getCssClasses(), onClick: handleClick, icon: getIcon(), disabled: disabled || readOnly }),