@ballistix.digital/react-components 0.4.108 → 0.4.110

package/dist/index.js

@@ -119,7 +119,7 @@ var AvatarElement = function (props) {
     return (jsxRuntime.jsx("a", __assign({ href: url }, { children: jsxRuntime.jsxs("div", __assign({ className: "flex items-center" }, { children: [jsxRuntime.jsxs("span", __assign({ className: "flex items-center justify-center" }, { children: [jsxRuntime.jsx("div", { className: styles.container, style: { backgroundImage: "url(".concat(src, ")") } }), status && jsxRuntime.jsx("span", { className: styles.indicator })] })), children && jsxRuntime.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',
@@ -182,7 +182,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 = {
@@ -198,7 +198,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,
@@ -209,7 +209,7 @@ var styles$o = {
     offline: offline,
     online: online,
     blocked: blocked,
-    disabled: disabled$5,
+    disabled: disabled$6,
     loading: loading$2,
 };
 
@@ -231,7 +231,7 @@ var BadgeElement = function (props) {
     return (jsxRuntime.jsxs("span", __assign({ className: styles.container }, { children: [type === 'indicator' && (jsxRuntime.jsx("svg", __assign({ className: styles.indicator, fill: "currentColor", viewBox: "0 0 8 8" }, { children: jsxRuntime.jsx("circle", { cx: 4, cy: 4, r: 3 }) }))), children, type === 'close' && (jsxRuntime.jsxs("button", __assign({ type: "button", className: styles.button, onClick: onClose }, { children: [jsxRuntime.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',
@@ -308,14 +308,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,
@@ -334,7 +334,7 @@ var styles$n = {
     indigo: indigo,
     purple: purple,
     pink: pink,
-    disabled: disabled$4,
+    disabled: disabled$5,
     loading: loading$1,
 };
 
@@ -3287,7 +3287,7 @@ var ButtonElement = function (props) {
     return (jsxRuntime.jsxs("button", __assign({ type: htmlType, className: styles.container, disabled: isDisabled || status !== 'idle', onClick: onClick, ref: innerRef }, { children: [status === 'idle' && children, status === 'loading' && (jsxRuntime.jsxs("div", __assign({ className: styles.content }, { children: [jsxRuntime.jsx(IconElement, { type: "regular", accessor: "spinner", className: styles.spinner }), jsxRuntime.jsx("div", { children: children })] }))), status === 'error' && (jsxRuntime.jsxs("div", __assign({ className: styles.content }, { children: [jsxRuntime.jsx(IconElement, { type: "regular", accessor: "circle-exclamation", className: styles.icon }), jsxRuntime.jsx("div", { children: children })] }))), status === 'success' && (jsxRuntime.jsxs("div", __assign({ className: styles.content }, { children: [jsxRuntime.jsx(IconElement, { type: "regular", accessor: "circle-check", className: styles.icon }), jsxRuntime.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: '',
@@ -3336,11 +3336,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,
@@ -3355,7 +3355,7 @@ var styles$m = {
     loading: loading,
     success: success,
     error: error,
-    disabled: disabled$3,
+    disabled: disabled$4,
 };
 
 var ButtonGroupElement = function (props) {
@@ -3382,14 +3382,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) {
@@ -3411,7 +3411,7 @@ var DropdownElement = {
     Item: react.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',
@@ -3433,7 +3433,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,
@@ -3470,7 +3470,7 @@ var InputGroupForm = function (props) {
                         (htmlType !== 'area' && (jsxRuntime.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' && (jsxRuntime.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' && (jsxRuntime.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 && (jsxRuntime.jsx("div", __assign({ className: styles.trailing }, { children: trailing }))), isTouched && !isValid && (jsxRuntime.jsx("div", __assign({ className: styles.trailing }, { children: invalidIcon })))] })), jsxRuntime.jsxs("div", __assign({ className: styles.foot }, { children: [description && !(error && isTouched) && (jsxRuntime.jsx("p", __assign({ className: styles.description }, { children: description }))), error && isTouched && jsxRuntime.jsx("p", __assign({ className: styles.error }, { children: error }))] }))] })));
 };
 
-var base$f = {
+var base$g = {
     container: '',
     head: 'flex justify-between',
     body: 'relative rounded-md',
@@ -3530,11 +3530,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,
@@ -3543,7 +3543,7 @@ var styles$j = {
     pill: pill$2,
     floored: floored$2,
     invalid: invalid$2,
-    disabled: disabled$2,
+    disabled: disabled$3,
 };
 
 var ContainerLayout = function (props) {
@@ -3575,7 +3575,7 @@ var ContainerLayout = function (props) {
     return handleGenerateComponent();
 };
 
-var base$e = {
+var base$f = {
     container: '',
     content: '',
 };
@@ -3590,7 +3590,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,
@@ -3610,7 +3610,7 @@ var DividerLayout = function (props) {
     return (jsxRuntime.jsxs("div", __assign({ className: styles.container }, { children: [jsxRuntime.jsx("div", __assign({ className: styles.head, "aria-hidden": "true" }, { children: jsxRuntime.jsx("div", { className: styles.line }) })), jsxRuntime.jsx("div", __assign({ className: styles.body }, { children: jsxRuntime.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',
@@ -3627,7 +3627,7 @@ var right = {
     body: 'justify-end',
 };
 var styles$h = {
-    base: base$d,
+    base: base$e,
     left: left,
     center: center$2,
     right: right,
@@ -3650,7 +3650,7 @@ var ListContainerLayout = function (props) {
             }) })) })));
 };
 
-var base$c = {
+var base$d = {
     container: '',
     list: '',
     item: '',
@@ -3682,7 +3682,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,
@@ -3715,7 +3715,7 @@ var MediaObjectLayout = function (props) {
     return (jsxRuntime.jsxs("div", __assign({ className: styles.container }, { children: [jsxRuntime.jsx("div", __assign({ className: styles.figure }, { children: $svg })), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("h4", __assign({ className: styles.title }, { children: title })), jsxRuntime.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',
@@ -3771,7 +3771,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,
@@ -3817,7 +3817,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',
 };
@@ -3828,7 +3828,7 @@ var sticky$1 = {
     container: 'sm:rounded-lg',
 };
 var styles$e = {
-    base: base$a,
+    base: base$b,
     normal: normal$3,
     sticky: sticky$1,
 };
@@ -3976,7 +3976,7 @@ var PanelPaginationNavigation = function (props) {
     return (jsxRuntime.jsxs("div", __assign({ className: styles.container }, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex flex-1 justify-between sm:hidden" }, { children: [jsxRuntime.jsx("button", __assign({ className: toClassName(styles.mobile.button, current === min && styles.button.disabled), disabled: current === min, onClick: function () { return handleChangeCurrent(current - 1); } }, { children: "Previous" })), jsxRuntime.jsx("button", __assign({ className: toClassName(styles.mobile.button, current === max && styles.button.disabled), disabled: current === max, onClick: function () { return handleChangeCurrent(current + 1); } }, { children: "Next" }))] })), jsxRuntime.jsxs("div", __assign({ className: styles.desktop.container }, { children: [jsxRuntime.jsx("div", { children: jsxRuntime.jsx("div", __assign({ className: "text-sm text-gray-700" }, { children: children({ min: min, max: max, current: current }) })) }), jsxRuntime.jsx("div", { children: jsxRuntime.jsxs("nav", __assign({ className: styles.desktop.navigation, "aria-label": "Pagination" }, { children: [jsxRuntime.jsxs("button", __assign({ className: toClassName(styles.desktop.leftButton, current === min && styles.button.disabled), disabled: current === min, onClick: function () { return handleChangeCurrent(current - 1); } }, { children: [jsxRuntime.jsx("span", __assign({ className: styles.label }, { children: "Previous" })), jsxRuntime.jsx(solid.ChevronLeftIcon, { className: styles.icon, "aria-hidden": "true" })] })), component, jsxRuntime.jsxs("button", __assign({ className: toClassName(styles.desktop.rightButton, current === max && styles.button.disabled), disabled: current === max, onClick: function () { return handleChangeCurrent(current + 1); } }, { children: [jsxRuntime.jsx("span", __assign({ className: styles.label }, { children: "Next" })), jsxRuntime.jsx(solid.ChevronRightIcon, { 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: '',
@@ -3998,7 +3998,7 @@ var base$9 = {
     icon: 'w-5 h-5',
 };
 var styles$d = {
-    base: base$9,
+    base: base$a,
 };
 
 var TableList = function (props) {
@@ -4134,7 +4134,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',
@@ -4247,7 +4247,7 @@ var controlled = {
     },
 };
 var styles$c = {
-    base: base$8,
+    base: base$9,
     normal: normal$2,
     panel: panel$1,
     full: full,
@@ -4399,7 +4399,7 @@ var BreadcrumbsNavigation = function (props) {
     return (jsxRuntime.jsx("nav", __assign({ className: styles.container, "aria-label": "Breadcrumb" }, { children: jsxRuntime.jsxs("ol", __assign({ className: styles.list }, { children: [jsxRuntime.jsx(HomeLink, {}), pages.map(function (page) { return (jsxRuntime.jsx(PageLink, { page: page }, page.name)); })] })) })));
 };
 
-var base$7 = {
+var base$8 = {
     container: 'flex',
     list: 'flex',
     separator: '',
@@ -4485,7 +4485,7 @@ var bar = {
     },
 };
 var styles$a = {
-    base: base$7,
+    base: base$8,
     slashes: slashes,
     chevrons: chevrons,
     panel: panel,
@@ -4534,7 +4534,7 @@ var PagePaginationNavigation = function (props) {
     return (jsxRuntime.jsxs("nav", __assign({ className: styles.container }, { children: [jsxRuntime.jsx("div", __assign({ className: styles.left.container }, { children: jsxRuntime.jsxs("button", __assign({ className: toClassName(styles.left.button, current === min && styles.button.disabled), disabled: current === min, onClick: function () { return setCurrent(current - 1); } }, { children: [jsxRuntime.jsx(solid.ArrowLongLeftIcon, { className: styles.left.icon }), "Previous"] })) })), jsxRuntime.jsx("div", __assign({ className: styles.center.container }, { children: component })), jsxRuntime.jsx("div", __assign({ className: styles.right.container }, { children: jsxRuntime.jsxs("button", __assign({ className: toClassName(styles.right.button, current === max && styles.button.disabled), disabled: current === max, onClick: function () { return setCurrent(current + 1); } }, { children: ["Next", jsxRuntime.jsx(solid.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',
@@ -4557,7 +4557,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) {
@@ -4650,7 +4650,7 @@ var TabNavigation = {
     View: View$1,
 };
 
-var base$5 = {
+var base$6 = {
     container: '',
     list: {
         container: '',
@@ -4688,7 +4688,7 @@ var buttons = {
     },
 };
 var styles$8 = {
-    base: base$5,
+    base: base$6,
     underline: underline,
     pills: pills,
     buttons: buttons,
@@ -4771,7 +4771,7 @@ var ModalOverlay = function (props) {
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(react.Transition.Root, __assign({ show: isOpen, as: React.Fragment }, { children: jsxRuntime.jsxs(react.Dialog, __assign({ as: "div", className: styles.container, onClose: setIsOpen }, { children: [jsxRuntime.jsx(react.Transition.Child, __assign({ as: React.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: jsxRuntime.jsx("div", { className: styles.background.container }) })), jsxRuntime.jsx("div", __assign({ className: styles.layout.container }, { children: jsxRuntime.jsx("div", __assign({ className: styles.layout.content }, { children: jsxRuntime.jsx(react.Transition.Child, __assign({ as: React.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: jsxRuntime.jsx(react.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',
@@ -4826,7 +4826,7 @@ var xl$2 = {
     },
 };
 var styles$6 = {
-    base: base$4,
+    base: base$5,
     xs: xs$2,
     sm: sm$2,
     md: md$2,
@@ -4870,7 +4870,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',
@@ -4931,7 +4931,7 @@ var xl$1 = {
     },
 };
 var styles$5 = {
-    base: base$3,
+    base: base$4,
     xs: xs$1,
     sm: sm$1,
     md: md$1,
@@ -4958,7 +4958,7 @@ var SlideOverOverlay = function (props) {
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(react.Transition.Root, __assign({ show: isOpen, as: React.Fragment }, { children: jsxRuntime.jsxs(react.Dialog, __assign({ as: "div", className: styles.container, onClose: setIsOpen }, { children: [jsxRuntime.jsx(react.Transition.Child, __assign({ as: React.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: jsxRuntime.jsx("div", { className: styles.background.container }) })), jsxRuntime.jsx("div", __assign({ className: styles.layout.container }, { children: jsxRuntime.jsx("div", __assign({ className: styles.layout.content }, { children: jsxRuntime.jsx("div", __assign({ className: styles.layout.inner }, { children: jsxRuntime.jsx(react.Transition.Child, __assign({ as: React.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: jsxRuntime.jsx(react.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',
@@ -5014,7 +5014,7 @@ var xl = {
     },
 };
 var styles$4 = {
-    base: base$2,
+    base: base$3,
     xs: xs,
     sm: sm,
     md: md,
@@ -5616,7 +5616,7 @@ var SelectMenuForm = function (props) {
                         } }), !isSolo && (jsxRuntime.jsxs("div", __assign({ className: styles.foot }, { children: [description && !(error && isTouched) && (jsxRuntime.jsx("p", __assign({ className: styles.description }, { children: description }))), error && isTouched && (jsxRuntime.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',
@@ -5691,11 +5691,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,
@@ -5704,7 +5704,7 @@ var styles$2 = {
     pill: pill$1,
     floored: floored$1,
     invalid: invalid$1,
-    disabled: disabled$1,
+    disabled: disabled$2,
 };
 
 function _mergeNamespaces$1(n, m) {
@@ -9234,7 +9234,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',
@@ -9294,11 +9294,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,
@@ -9307,7 +9307,7 @@ var styles$1 = {
     pill: pill,
     floored: floored,
     invalid: invalid,
-    disabled: disabled,
+    disabled: disabled$1,
 };
 
 function getDefaultExportFromCjs (x) {
@@ -11315,10 +11315,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 (jsxRuntime.jsx(FormikProvider, __assign({ value: form }, { children: jsxRuntime.jsxs("fieldset", __assign({ className: className }, { children: [jsxRuntime.jsx("legend", __assign({ className: styles.sr }, { children: name })), jsxRuntime.jsx("div", __assign({ className: styles.list }, { children: jsxRuntime.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) {
+            lodash.set(result, key, toClassName(lodash.get(styles.base, key), 
+            // isTouched === true && !isValid && get(defaultStyles.invalid, key),
+            isDisabled && lodash.get(styles.disabled, key), lodash.get(stylesOverrides, key)));
+        });
+        return result;
+    };
+    var styles$1 = handleGenerateStyle();
+    return (jsxRuntime.jsx(FormikProvider, __assign({ value: form }, { children: jsxRuntime.jsxs("fieldset", { children: [jsxRuntime.jsx("legend", __assign({ className: styles$1.sr }, { children: name })), jsxRuntime.jsx("div", __assign({ className: styles$1.list }, { children: jsxRuntime.jsx(FieldArray, { name: name, render: function (_a) {
                             var remove = _a.remove, push = _a.push;
-                            return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: options.map(function (option) { return (jsxRuntime.jsxs("div", __assign({ className: styles.item.container }, { children: [jsxRuntime.jsx("div", __assign({ className: styles.item.head }, { children: jsxRuntime.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 (jsxRuntime.jsx(jsxRuntime.Fragment, { children: options.map(function (option) { return (jsxRuntime.jsxs("div", __assign({ className: styles$1.item.container }, { children: [jsxRuntime.jsx("div", __assign({ className: styles$1.item.head }, { children: jsxRuntime.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);
@@ -11326,11 +11337,11 @@ var CheckboxInputGroupForm = function (props) {
                                                     }
                                                     var findIndex = values.findIndex(function (value) { return value === option.value; });
                                                     remove(findIndex);
-                                                } }) })), jsxRuntime.jsxs("div", __assign({ className: styles.item.body }, { children: [jsxRuntime.jsx("label", __assign({ htmlFor: "comments", className: styles.item.label }, { children: option.title })), jsxRuntime.jsx("p", __assign({ id: "comments-description", className: styles.item.description }, { children: option.description }))] }))] }), option.value)); }) }));
-                        } }) }))] })) })));
+                                                } }) })), jsxRuntime.jsxs("div", __assign({ className: styles$1.item.body }, { children: [jsxRuntime.jsx("label", __assign({ htmlFor: "comments", className: styles$1.item.label }, { children: option.title })), jsxRuntime.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',
@@ -11342,6 +11353,15 @@ 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,
 };
 
 exports.AvatarElement = AvatarElement;
@@ -11349,6 +11369,7 @@ exports.BadgeElement = BadgeElement;
 exports.BreadcrumbsNavigation = BreadcrumbsNavigation;
 exports.ButtonElement = ButtonElement;
 exports.ButtonGroupElement = ButtonGroupElement;
+exports.CheckboxInputFormGroup = CheckboxInputGroupForm;
 exports.ContainerLayout = ContainerLayout;
 exports.DateMenuForm = DateMenuForm;
 exports.DividerLayout = DividerLayout;
@@ -11371,6 +11392,5 @@ exports.TableList = TableList;
 exports.TableList2 = TableList2;
 exports.VerticalNavigation = VerticalNavigation;
 exports.createColumnHelper = createColumnHelper;
-exports["default"] = CheckboxInputGroupForm;
 exports.fromSelectMenuOptionToStringValue = fromSelectMenuOptionToStringValue;
 //# sourceMappingURL=index.js.map