@ballistix.digital/react-components 0.4.108 → 0.4.110

package/dist/index.esm.js

@@ -108,7 +108,7 @@ var AvatarElement = function (props) {
     return (jsx("a", __assign({ href: url }, { children: jsxs("div", __assign({ className: "flex items-center" }, { children: [jsxs("span", __assign({ className: "flex items-center justify-center" }, { children: [jsx("div", { className: styles.container, style: { backgroundImage: "url(".concat(src, ")") } }), status && jsx("span", { className: styles.indicator })] })), children && jsx("div", __assign({ className: "ml-3" }, { children: children }))] })) })));
 };
 
-var base$k = {
+var base$l = {
     loading: 'inline-block relative overflow-hidden bg-gray-50 flex items-center justify-center',
     spinner: 'w-5 h-5 animate-spin text-gray-400',
     empty: 'inline-block relative overflow-hidden bg-gray-50 text-red-400',
@@ -171,7 +171,7 @@ var rounded$2 = {
     placeholder: 'rounded-full',
     container: 'rounded-full',
 };
-var disabled$5 = {
+var disabled$6 = {
     container: 'opacity-20 cursor-not-allowed',
 };
 var loading$2 = {
@@ -187,7 +187,7 @@ var blocked = {
     indicator: 'bg-red-400',
 };
 var styles$o = {
-    base: base$k,
+    base: base$l,
     xs: xs$4,
     sm: sm$5,
     md: md$4,
@@ -198,7 +198,7 @@ var styles$o = {
     offline: offline,
     online: online,
     blocked: blocked,
-    disabled: disabled$5,
+    disabled: disabled$6,
     loading: loading$2,
 };
 
@@ -220,7 +220,7 @@ var BadgeElement = function (props) {
     return (jsxs("span", __assign({ className: styles.container }, { children: [type === 'indicator' && (jsx("svg", __assign({ className: styles.indicator, fill: "currentColor", viewBox: "0 0 8 8" }, { children: jsx("circle", { cx: 4, cy: 4, r: 3 }) }))), children, type === 'close' && (jsxs("button", __assign({ type: "button", className: styles.button, onClick: onClose }, { children: [jsx("span", __assign({ className: "sr-only" }, { children: "Remove large option" })), xIcon] })))] })));
 };
 
-var base$j = {
+var base$k = {
     container: 'inline-flex items-center font-medium py-0.5',
     indicator: '',
     button: 'flex-shrink-0 ml-0.5 h-4 w-4 rounded-full inline-flex items-center justify-center focus:text-white focus:outline-none',
@@ -297,14 +297,14 @@ var pink = {
     indicator: 'text-pink-400',
     button: 'text-pink-400 hover:bg-pink-200 hover:text-pink-500 focus:bg-purple-500',
 };
-var disabled$4 = {
+var disabled$5 = {
     container: 'opacity-20 cursor-not-allowed',
 };
 var loading$1 = {
     container: 'cursor-progress',
 };
 var styles$n = {
-    base: base$j,
+    base: base$k,
     normal: normal$5,
     indicator: indicator,
     close: close,
@@ -323,7 +323,7 @@ var styles$n = {
     indigo: indigo,
     purple: purple,
     pink: pink,
-    disabled: disabled$4,
+    disabled: disabled$5,
     loading: loading$1,
 };
 
@@ -3276,7 +3276,7 @@ var ButtonElement = function (props) {
     return (jsxs("button", __assign({ type: htmlType, className: styles.container, disabled: isDisabled || status !== 'idle', onClick: onClick, ref: innerRef }, { children: [status === 'idle' && children, status === 'loading' && (jsxs("div", __assign({ className: styles.content }, { children: [jsx(IconElement, { type: "regular", accessor: "spinner", className: styles.spinner }), jsx("div", { children: children })] }))), status === 'error' && (jsxs("div", __assign({ className: styles.content }, { children: [jsx(IconElement, { type: "regular", accessor: "circle-exclamation", className: styles.icon }), jsx("div", { children: children })] }))), status === 'success' && (jsxs("div", __assign({ className: styles.content }, { children: [jsx(IconElement, { type: "regular", accessor: "circle-check", className: styles.icon }), jsx("div", { children: children })] })))] })));
 };
 
-var base$i = {
+var base$j = {
     container: 'inline-flex items-center border border-transparent font-medium focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 duration-300',
     content: 'flex gap-2',
     icon: '',
@@ -3325,11 +3325,11 @@ var error = {
     container: 'bg-rose-400 hover:bg-rose-500 !text-white duration-300',
     content: 'flex items-center',
 };
-var disabled$3 = {
+var disabled$4 = {
     container: '!opacity-20 !cursor-not-allowed',
 };
 var styles$m = {
-    base: base$i,
+    base: base$j,
     primary: primary,
     secondary: secondary,
     outline: outline,
@@ -3344,7 +3344,7 @@ var styles$m = {
     loading: loading,
     success: success,
     error: error,
-    disabled: disabled$3,
+    disabled: disabled$4,
 };
 
 var ButtonGroupElement = function (props) {
@@ -3371,14 +3371,14 @@ var ButtonGroupElement = function (props) {
         }) })));
 };
 
-var base$h = {
+var base$i = {
     container: 'relative z-0 inline-flex shadow-sm rounded-md',
     firstButton: 'relative inline-flex items-center px-4 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-primary-500 focus:border-primary-500',
     button: '-ml-px relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-primary-500 focus:border-primary-500',
     lastButton: '-ml-px relative inline-flex items-center px-4 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-primary-500 focus:border-primary-500',
 };
 var styles$l = {
-    base: base$h,
+    base: base$i,
 };
 
 var Container$3 = function (props) {
@@ -3400,7 +3400,7 @@ var DropdownElement = {
     Item: Menu.Item,
 };
 
-var base$g = {
+var base$h = {
     container: 'inline-block text-left',
     button: 'inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-primary-500',
     compact: 'bg-gray-100 rounded-full flex items-center text-gray-400 hover:text-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-primary-500',
@@ -3422,7 +3422,7 @@ var topRight = {
     items: 'origin-bottom-left left-0 bottom-0',
 };
 var styles$k = {
-    base: base$g,
+    base: base$h,
     button: button,
     compact: compact,
     'bottom-left': bottomLeft,
@@ -3459,7 +3459,7 @@ var InputGroupForm = function (props) {
                         (htmlType !== 'area' && (jsx("input", { type: mask !== undefined ? 'text' : htmlType, ref: mask && ref, name: name, id: name, className: styles.input, placeholder: placeholder, defaultValue: isSolo ? value : undefined, value: isSolo ? undefined : value, min: min, max: max, maxLength: maxLength, disabled: isDisabled, onChange: onChange, onBlur: onBlur }))), htmlType === 'area' && (jsx("textarea", { rows: rows, name: name, id: name, className: styles.input, placeholder: placeholder, defaultValue: isSolo ? value : undefined, value: isSolo ? undefined : value, maxLength: maxLength, disabled: isDisabled, onChange: onChange, onBlur: onBlur })), type === 'floored' && (jsx("div", { className: "absolute inset-x-0 bottom-0 border-t border-gray-300 peer-focus:border-t-2 peer-focus:border-primary-600", "aria-hidden": "true" })), trailing && isValid && (jsx("div", __assign({ className: styles.trailing }, { children: trailing }))), isTouched && !isValid && (jsx("div", __assign({ className: styles.trailing }, { children: invalidIcon })))] })), jsxs("div", __assign({ className: styles.foot }, { children: [description && !(error && isTouched) && (jsx("p", __assign({ className: styles.description }, { children: description }))), error && isTouched && jsx("p", __assign({ className: styles.error }, { children: error }))] }))] })));
 };
 
-var base$f = {
+var base$g = {
     container: '',
     head: 'flex justify-between',
     body: 'relative rounded-md',
@@ -3519,11 +3519,11 @@ var invalid$2 = {
     'block w-full border border-transparent text-red-900 ring-1  ring-inset ring-red-300 placeholder:text-red-300 focus:ring-2 focus:ring-inset focus:ring-red-500 pr-10',
     description: 'text-sm text-red-600',
 };
-var disabled$2 = {
+var disabled$3 = {
     input: 'block w-full rounded-md border-0 text-gray-900 shadow-sm ring-1 ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary-600 disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500 disabled:ring-gray-200 sm:text-sm sm:leading-6',
 };
 var styles$j = {
-    base: base$f,
+    base: base$g,
     leading: leading$2,
     trailing: trailing$2,
     normal: normal$4,
@@ -3532,7 +3532,7 @@ var styles$j = {
     pill: pill$2,
     floored: floored$2,
     invalid: invalid$2,
-    disabled: disabled$2,
+    disabled: disabled$3,
 };
 
 var ContainerLayout = function (props) {
@@ -3564,7 +3564,7 @@ var ContainerLayout = function (props) {
     return handleGenerateComponent();
 };
 
-var base$e = {
+var base$f = {
     container: '',
     content: '',
 };
@@ -3579,7 +3579,7 @@ var fill$1 = {
     container: 'max-w-7xl mx-auto sm:px-6 lg:px-8',
 };
 var styles$i = {
-    base: base$e,
+    base: base$f,
     break: breakStyles,
     center: center$3,
     fill: fill$1,
@@ -3599,7 +3599,7 @@ var DividerLayout = function (props) {
     return (jsxs("div", __assign({ className: styles.container }, { children: [jsx("div", __assign({ className: styles.head, "aria-hidden": "true" }, { children: jsx("div", { className: styles.line }) })), jsx("div", __assign({ className: styles.body }, { children: jsx("div", __assign({ className: styles.content }, { children: children })) }))] })));
 };
 
-var base$d = {
+var base$e = {
     container: 'relative',
     head: 'absolute inset-0 flex items-center',
     line: 'w-full border-t border-gray-300',
@@ -3616,7 +3616,7 @@ var right = {
     body: 'justify-end',
 };
 var styles$h = {
-    base: base$d,
+    base: base$e,
     left: left,
     center: center$2,
     right: right,
@@ -3639,7 +3639,7 @@ var ListContainerLayout = function (props) {
             }) })) })));
 };
 
-var base$c = {
+var base$d = {
     container: '',
     list: '',
     item: '',
@@ -3671,7 +3671,7 @@ var cardSticky = {
     item: 'bg-white shadow overflow-hidden px-4 py-4 sm:px-6 sm:rounded-md',
 };
 var styles$g = {
-    base: base$c,
+    base: base$d,
     fill: fill,
     'fill-sticky': fillSticky,
     center: center$1,
@@ -3704,7 +3704,7 @@ var MediaObjectLayout = function (props) {
     return (jsxs("div", __assign({ className: styles.container }, { children: [jsx("div", __assign({ className: styles.figure }, { children: $svg })), jsxs("div", { children: [jsx("h4", __assign({ className: styles.title }, { children: title })), jsx("p", __assign({ className: styles.paragraph }, { children: paragraph }))] })] })));
 };
 
-var base$b = {
+var base$c = {
     container: '',
     figure: 'mr-4 flex-shrink-0',
     svg: 'h-16 w-16 border border-gray-300 bg-white text-gray-300',
@@ -3760,7 +3760,7 @@ var wideReversed = {
     svg: 'h-32 w-full sm:w-32',
 };
 var styles$f = {
-    base: base$b,
+    base: base$c,
     top: top,
     'top-reversed': topReversed,
     center: center,
@@ -3806,7 +3806,7 @@ var LayoutPanel = {
     Section: Section,
 };
 
-var base$a = {
+var base$b = {
     container: 'bg-white overflow-hidden shadow',
     section: 'px-4 py-5 sm:px-6',
 };
@@ -3817,7 +3817,7 @@ var sticky$1 = {
     container: 'sm:rounded-lg',
 };
 var styles$e = {
-    base: base$a,
+    base: base$b,
     normal: normal$3,
     sticky: sticky$1,
 };
@@ -3965,7 +3965,7 @@ var PanelPaginationNavigation = function (props) {
     return (jsxs("div", __assign({ className: styles.container }, { children: [jsxs("div", __assign({ className: "flex flex-1 justify-between sm:hidden" }, { children: [jsx("button", __assign({ className: toClassName(styles.mobile.button, current === min && styles.button.disabled), disabled: current === min, onClick: function () { return handleChangeCurrent(current - 1); } }, { children: "Previous" })), jsx("button", __assign({ className: toClassName(styles.mobile.button, current === max && styles.button.disabled), disabled: current === max, onClick: function () { return handleChangeCurrent(current + 1); } }, { children: "Next" }))] })), jsxs("div", __assign({ className: styles.desktop.container }, { children: [jsx("div", { children: jsx("div", __assign({ className: "text-sm text-gray-700" }, { children: children({ min: min, max: max, current: current }) })) }), jsx("div", { children: jsxs("nav", __assign({ className: styles.desktop.navigation, "aria-label": "Pagination" }, { children: [jsxs("button", __assign({ className: toClassName(styles.desktop.leftButton, current === min && styles.button.disabled), disabled: current === min, onClick: function () { return handleChangeCurrent(current - 1); } }, { children: [jsx("span", __assign({ className: styles.label }, { children: "Previous" })), jsx(ChevronLeftIcon$1, { className: styles.icon, "aria-hidden": "true" })] })), component, jsxs("button", __assign({ className: toClassName(styles.desktop.rightButton, current === max && styles.button.disabled), disabled: current === max, onClick: function () { return handleChangeCurrent(current + 1); } }, { children: [jsx("span", __assign({ className: styles.label }, { children: "Next" })), jsx(ChevronRightIcon$1, { className: styles.icon, "aria-hidden": "true" })] }))] })) })] }))] })));
 };
 
-var base$9 = {
+var base$a = {
     container: 'flex items-center justify-between border-t border-gray-200 bg-white py-3',
     mobile: {
         container: '',
@@ -3987,7 +3987,7 @@ var base$9 = {
     icon: 'w-5 h-5',
 };
 var styles$d = {
-    base: base$9,
+    base: base$a,
 };
 
 var TableList = function (props) {
@@ -4123,7 +4123,7 @@ var TableList = function (props) {
                         : { container: 'mt-4' }, onChange: onPaginate }, { children: children }))] })) }));
 };
 
-var base$8 = {
+var base$9 = {
     container: 'px-4 sm:px-6 lg:px-8',
     head: {
         container: 'sm:flex sm:items-center',
@@ -4236,7 +4236,7 @@ var controlled = {
     },
 };
 var styles$c = {
-    base: base$8,
+    base: base$9,
     normal: normal$2,
     panel: panel$1,
     full: full,
@@ -4388,7 +4388,7 @@ var BreadcrumbsNavigation = function (props) {
     return (jsx("nav", __assign({ className: styles.container, "aria-label": "Breadcrumb" }, { children: jsxs("ol", __assign({ className: styles.list }, { children: [jsx(HomeLink, {}), pages.map(function (page) { return (jsx(PageLink, { page: page }, page.name)); })] })) })));
 };
 
-var base$7 = {
+var base$8 = {
     container: 'flex',
     list: 'flex',
     separator: '',
@@ -4474,7 +4474,7 @@ var bar = {
     },
 };
 var styles$a = {
-    base: base$7,
+    base: base$8,
     slashes: slashes,
     chevrons: chevrons,
     panel: panel,
@@ -4523,7 +4523,7 @@ var PagePaginationNavigation = function (props) {
     return (jsxs("nav", __assign({ className: styles.container }, { children: [jsx("div", __assign({ className: styles.left.container }, { children: jsxs("button", __assign({ className: toClassName(styles.left.button, current === min && styles.button.disabled), disabled: current === min, onClick: function () { return setCurrent(current - 1); } }, { children: [jsx(ArrowLongLeftIcon, { className: styles.left.icon }), "Previous"] })) })), jsx("div", __assign({ className: styles.center.container }, { children: component })), jsx("div", __assign({ className: styles.right.container }, { children: jsxs("button", __assign({ className: toClassName(styles.right.button, current === max && styles.button.disabled), disabled: current === max, onClick: function () { return setCurrent(current + 1); } }, { children: ["Next", jsx(ArrowLongRightIcon, { className: styles.right.icon })] })) }))] })));
 };
 
-var base$6 = {
+var base$7 = {
     container: 'flex items-center justify-between border-t border-gray-200 px-4 sm:px-0',
     left: {
         container: '-mt-px flex w-0 flex-1',
@@ -4546,7 +4546,7 @@ var base$6 = {
     divider: 'inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-gray-500',
 };
 var styles$9 = {
-    base: base$6,
+    base: base$7,
 };
 
 var Container$1 = function (props) {
@@ -4639,7 +4639,7 @@ var TabNavigation = {
     View: View$1,
 };
 
-var base$5 = {
+var base$6 = {
     container: '',
     list: {
         container: '',
@@ -4677,7 +4677,7 @@ var buttons = {
     },
 };
 var styles$8 = {
-    base: base$5,
+    base: base$6,
     underline: underline,
     pills: pills,
     buttons: buttons,
@@ -4760,7 +4760,7 @@ var ModalOverlay = function (props) {
     return (jsxs(Fragment$1, { children: [jsx(Transition.Root, __assign({ show: isOpen, as: Fragment }, { children: jsxs(Dialog, __assign({ as: "div", className: styles.container, onClose: setIsOpen }, { children: [jsx(Transition.Child, __assign({ as: Fragment, enter: styles.background.transition.enter, enterFrom: styles.background.transition.enterFrom, enterTo: styles.background.transition.enterTo, leave: styles.background.transition.leave, leaveFrom: styles.background.transition.leaveFrom, leaveTo: styles.background.transition.leaveTo }, { children: jsx("div", { className: styles.background.container }) })), jsx("div", __assign({ className: styles.layout.container }, { children: jsx("div", __assign({ className: styles.layout.content }, { children: jsx(Transition.Child, __assign({ as: Fragment, enter: styles.panel.transition.enter, enterFrom: styles.panel.transition.enterFrom, enterTo: styles.panel.transition.enterTo, leave: styles.panel.transition.leave, leaveFrom: styles.panel.transition.leaveFrom, leaveTo: styles.panel.transition.leaveTo }, { children: jsx(Dialog.Panel, __assign({ className: styles.panel.container }, { children: children(options) })) })) })) }))] })) })), trigger && trigger(options)] }));
 };
 
-var base$4 = {
+var base$5 = {
     container: 'relative z-20',
     background: {
         container: 'fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity',
@@ -4815,7 +4815,7 @@ var xl$2 = {
     },
 };
 var styles$6 = {
-    base: base$4,
+    base: base$5,
     xs: xs$2,
     sm: sm$2,
     md: md$2,
@@ -4859,7 +4859,7 @@ var NotificationOverlay = {
     Item: NotificationOverlayItem,
 };
 
-var base$3 = {
+var base$4 = {
     container: {
         outer: 'pointer-events-none fixed inset-0 flex items-end px-4 py-6 sm:items-start sm:p-6 z-30',
         inner: 'flex w-full flex-col items-center space-y-4 sm:items-end',
@@ -4920,7 +4920,7 @@ var xl$1 = {
     },
 };
 var styles$5 = {
-    base: base$3,
+    base: base$4,
     xs: xs$1,
     sm: sm$1,
     md: md$1,
@@ -4947,7 +4947,7 @@ var SlideOverOverlay = function (props) {
     return (jsxs(Fragment$1, { children: [jsx(Transition.Root, __assign({ show: isOpen, as: Fragment }, { children: jsxs(Dialog, __assign({ as: "div", className: styles.container, onClose: setIsOpen }, { children: [jsx(Transition.Child, __assign({ as: Fragment, enter: styles.background.transition.enter, enterFrom: styles.background.transition.enterFrom, enterTo: styles.background.transition.enterTo, leave: styles.background.transition.leave, leaveFrom: styles.background.transition.leaveFrom, leaveTo: styles.background.transition.leaveTo }, { children: jsx("div", { className: styles.background.container }) })), jsx("div", __assign({ className: styles.layout.container }, { children: jsx("div", __assign({ className: styles.layout.content }, { children: jsx("div", __assign({ className: styles.layout.inner }, { children: jsx(Transition.Child, __assign({ as: Fragment, enter: styles.panel.transition.enter, enterFrom: styles.panel.transition.enterFrom, enterTo: styles.panel.transition.enterTo, leave: styles.panel.transition.leave, leaveFrom: styles.panel.transition.leaveFrom, leaveTo: styles.panel.transition.leaveTo }, { children: jsx(Dialog.Panel, __assign({ className: styles.panel.container }, { children: children(options) })) })) })) })) }))] })) })), trigger && trigger(options)] }));
 };
 
-var base$2 = {
+var base$3 = {
     container: 'relative z-20',
     background: {
         container: 'fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity',
@@ -5003,7 +5003,7 @@ var xl = {
     },
 };
 var styles$4 = {
-    base: base$2,
+    base: base$3,
     xs: xs,
     sm: sm,
     md: md,
@@ -5605,7 +5605,7 @@ var SelectMenuForm = function (props) {
                         } }), !isSolo && (jsxs("div", __assign({ className: styles.foot }, { children: [description && !(error && isTouched) && (jsx("p", __assign({ className: styles.description }, { children: description }))), error && isTouched && (jsx("p", __assign({ className: styles.error }, { children: JSON.stringify(error).replaceAll('"', '') })))] })))] }))] })));
 };
 
-var base$1 = {
+var base$2 = {
     container: '',
     head: 'flex justify-between',
     body: 'relative rounded-md',
@@ -5680,11 +5680,11 @@ var invalid$1 = {
     'block w-full border border-transparent text-red-900 ring-1  ring-inset ring-red-300 placeholder:text-red-300 focus:ring-2 focus:ring-inset focus:ring-red-500',
     description: 'text-sm text-red-600',
 };
-var disabled$1 = {
+var disabled$2 = {
     input: 'block w-full rounded-md border-0 text-gray-900 shadow-sm ring-1 ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary-600 disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500 disabled:ring-gray-200 sm:text-sm sm:leading-6',
 };
 var styles$2 = {
-    base: base$1,
+    base: base$2,
     leading: leading$1,
     trailing: trailing$1,
     normal: normal$1,
@@ -5693,7 +5693,7 @@ var styles$2 = {
     pill: pill$1,
     floored: floored$1,
     invalid: invalid$1,
-    disabled: disabled$1,
+    disabled: disabled$2,
 };
 
 function _mergeNamespaces(n, m) {
@@ -9223,7 +9223,7 @@ var DateMenuForm = function (props) {
                                     : (_a = error === null || error === void 0 ? void 0 : error.startDate) !== null && _a !== void 0 ? _a : error === null || error === void 0 ? void 0 : error.endDate })))] })))] }))] })));
 };
 
-var base = {
+var base$1 = {
     container: '',
     head: 'flex justify-between',
     body: 'relative rounded-md',
@@ -9283,11 +9283,11 @@ var invalid = {
     'block w-full border border-transparent text-red-900 ring-1  ring-inset ring-red-300 placeholder:text-red-300 focus:ring-2 focus:ring-inset focus:ring-red-500 pr-10',
     description: 'text-sm text-red-600',
 };
-var disabled = {
+var disabled$1 = {
     input: 'block w-full rounded-md border-0 text-gray-900 shadow-sm ring-1 ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary-600 disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500 disabled:ring-gray-200 sm:text-sm sm:leading-6',
 };
 var styles$1 = {
-    base: base,
+    base: base$1,
     leading: leading,
     trailing: trailing,
     normal: normal,
@@ -9296,7 +9296,7 @@ var styles$1 = {
     pill: pill,
     floored: floored,
     invalid: invalid,
-    disabled: disabled,
+    disabled: disabled$1,
 };
 
 function getDefaultExportFromCjs (x) {
@@ -11304,10 +11304,21 @@ var FastFieldInner = function (_React$Component) {
 connect(FastFieldInner);
 
 var CheckboxInputGroupForm = function (props) {
-    var name = props.name, form = props.form, options = props.options, className = props.className, values = props.values;
-    return (jsx(FormikProvider, __assign({ value: form }, { children: jsxs("fieldset", __assign({ className: className }, { children: [jsx("legend", __assign({ className: styles.sr }, { children: name })), jsx("div", __assign({ className: styles.list }, { children: jsx(FieldArray, { name: name, render: function (_a) {
+    var name = props.name, form = props.form, options = props.options, values = props.values, isDisabled = props.isDisabled, stylesOverrides = props.styles;
+    var handleGenerateStyle = function () {
+        var result = deepCopyObject(styles.base);
+        var keys = calculateNestedKeys(styles.base);
+        keys.forEach(function (key) {
+            set(result, key, toClassName(get(styles.base, key), 
+            // isTouched === true && !isValid && get(defaultStyles.invalid, key),
+            isDisabled && get(styles.disabled, key), get(stylesOverrides, key)));
+        });
+        return result;
+    };
+    var styles$1 = handleGenerateStyle();
+    return (jsx(FormikProvider, __assign({ value: form }, { children: jsxs("fieldset", { children: [jsx("legend", __assign({ className: styles$1.sr }, { children: name })), jsx("div", __assign({ className: styles$1.list }, { children: jsx(FieldArray, { name: name, render: function (_a) {
                             var remove = _a.remove, push = _a.push;
-                            return (jsx(Fragment$1, { children: options.map(function (option) { return (jsxs("div", __assign({ className: styles.item.container }, { children: [jsx("div", __assign({ className: styles.item.head }, { children: jsx("input", { id: option.value, name: option.value, "aria-describedby": "".concat(option.value, "-description"), type: "checkbox", checked: values === null || values === void 0 ? void 0 : values.includes(option.value), className: styles.item.input, onChange: function (value) {
+                            return (jsx(Fragment$1, { children: options.map(function (option) { return (jsxs("div", __assign({ className: styles$1.item.container }, { children: [jsx("div", __assign({ className: styles$1.item.head }, { children: jsx("input", { id: option.value, name: option.value, "aria-describedby": "".concat(option.value, "-description"), type: "checkbox", checked: values === null || values === void 0 ? void 0 : values.includes(option.value), className: styles$1.item.input, onChange: function (value) {
                                                     var isChecked = value.currentTarget.checked;
                                                     if (isChecked) {
                                                         push(option.value);
@@ -11315,11 +11326,11 @@ var CheckboxInputGroupForm = function (props) {
                                                     }
                                                     var findIndex = values.findIndex(function (value) { return value === option.value; });
                                                     remove(findIndex);
-                                                } }) })), jsxs("div", __assign({ className: styles.item.body }, { children: [jsx("label", __assign({ htmlFor: "comments", className: styles.item.label }, { children: option.title })), jsx("p", __assign({ id: "comments-description", className: styles.item.description }, { children: option.description }))] }))] }), option.value)); }) }));
-                        } }) }))] })) })));
+                                                } }) })), jsxs("div", __assign({ className: styles$1.item.body }, { children: [jsx("label", __assign({ htmlFor: "comments", className: styles$1.item.label }, { children: option.title })), jsx("p", __assign({ id: "comments-description", className: styles$1.item.description }, { children: option.description }))] }))] }), option.value)); }) }));
+                        } }) }))] }) })));
 };
 
-var styles = {
+var base = {
     container: '',
     sr: 'sr-only',
     list: 'space-y-5',
@@ -11331,7 +11342,16 @@ var styles = {
         label: 'font-medium text-gray-900',
         description: 'text-gray-500',
     },
+};
+var disabled = {
+    item: {
+        input: 'block w-full rounded-md border-0 text-gray-900 shadow-sm ring-1 ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary-600 disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500 disabled:ring-gray-200 sm:text-sm sm:leading-6',
+    },
+};
+var styles = {
+    base: base,
+    disabled: disabled,
 };
 
-export { AvatarElement, BadgeElement, BreadcrumbsNavigation, ButtonElement, ButtonGroupElement, ContainerLayout, DateMenuForm, DividerLayout, DropdownElement, IconElement, InputGroupForm, ListContainerLayout, MediaObjectLayout, ModalOverlay, NotificationOverlay, PagePaginationNavigation, LayoutPanel as PanelLayout, PanelPaginationNavigation, SelectMenuForm, SlideOverOverlay, TabNavigation, TableColumnOptionsCustom, TableExcelExportCustom as TableExportCustom, TableList, TableList2, VerticalNavigation, createColumnHelper, CheckboxInputGroupForm as default, fromSelectMenuOptionToStringValue };
+export { AvatarElement, BadgeElement, BreadcrumbsNavigation, ButtonElement, ButtonGroupElement, CheckboxInputGroupForm as CheckboxInputFormGroup, ContainerLayout, DateMenuForm, DividerLayout, DropdownElement, IconElement, InputGroupForm, ListContainerLayout, MediaObjectLayout, ModalOverlay, NotificationOverlay, PagePaginationNavigation, LayoutPanel as PanelLayout, PanelPaginationNavigation, SelectMenuForm, SlideOverOverlay, TabNavigation, TableColumnOptionsCustom, TableExcelExportCustom as TableExportCustom, TableList, TableList2, VerticalNavigation, createColumnHelper, fromSelectMenuOptionToStringValue };
 //# sourceMappingURL=index.esm.js.map