@ballistix.digital/react-components 4.2.0 → 4.4.0

package/dist/index.esm.js

@@ -178,7 +178,7 @@ var AvatarElement = function (props) {
     return (jsx("a", { href: url, children: jsxs("div", { className: "flex items-center", children: [jsxs("span", { 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", { className: "ml-3", children: children })] }) }));
 };
 
-var base$s = {
+var base$t = {
     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',
@@ -194,7 +194,7 @@ var xs$4 = {
     container: 'h-6 w-6',
     indicator: 'h-1.5 w-1.5',
 };
-var sm$5 = {
+var sm$6 = {
     loading: 'h-8 w-8',
     spinner: 'h-8 w-8',
     empty: 'h-8 w-8',
@@ -202,7 +202,7 @@ var sm$5 = {
     container: 'h-8 w-8',
     indicator: 'h-2 w-2',
 };
-var md$4 = {
+var md$5 = {
     loading: 'h-10 w-10',
     spinner: 'h-10 w-10',
     empty: 'h-10 w-10',
@@ -257,10 +257,10 @@ var blocked = {
     indicator: 'bg-red-400',
 };
 var styles$w = {
-    base: base$s,
+    base: base$t,
     xs: xs$4,
-    sm: sm$5,
-    md: md$4,
+    sm: sm$6,
+    md: md$5,
     lg: lg$5,
     xl: xl$4,
     block: block$2,
@@ -345,7 +345,7 @@ var BadgeElement$1 = function (props) {
                                     }, children: jsx(IconElement, { className: toClassName(styles.content.action, isCollapsed && styles.content.inverted), accessor: "chevron-up" }) })), jsx("div", { onClick: onClose, children: jsx(IconElement, { className: styles.content.action, accessor: "times" }) })] })] })] }) }));
 };
 
-var base$r = {
+var base$s = {
     container: 'rounded-sm p-4 border-l-4',
     icon: 'h-5 w-5',
     content: {
@@ -403,7 +403,7 @@ var info = {
     },
 };
 var styles$v = {
-    base: base$r,
+    base: base$s,
     generic: generic,
     error: error$1,
     warn: warn,
@@ -429,7 +429,7 @@ var BadgeElement = function (props) {
     return (jsxs("span", { className: styles.container, "data-cy": dataCy, children: [type === 'indicator' && (jsx("svg", { className: styles.indicator, fill: "currentColor", viewBox: "0 0 8 8", children: jsx("circle", { cx: 4, cy: 4, r: 3 }) })), children, type === 'close' && (jsxs("button", { type: "button", className: styles.button, onClick: onClose, children: [jsx("span", { className: "sr-only", children: "Remove large option" }), xIcon] }))] }));
 };
 
-var base$q = {
+var base$r = {
     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',
@@ -452,7 +452,7 @@ var secondary$1 = {
 var outline$1 = {
     container: "border-gray-300  text-gray-700 bg-white hover:bg-gray-50",
 };
-var sm$4 = {
+var sm$5 = {
     container: 'text-xs',
     indicator: 'mr-1.5 h-2 w-2 ',
 };
@@ -513,14 +513,14 @@ var loading$1 = {
     container: 'cursor-progress',
 };
 var styles$u = {
-    base: base$q,
+    base: base$r,
     normal: normal$8,
     indicator: indicator,
     close: close,
     primary: primary$1,
     secondary: secondary$1,
     outline: outline$1,
-    sm: sm$4,
+    sm: sm$5,
     lg: lg$4,
     block: block$1,
     rounded: rounded$1,
@@ -595,7 +595,7 @@ var TooltipElement = function (props) {
     return (jsxs(Fragment, { children: [childrenWithProps, isOpen && (jsxs("div", __assign$1({ "data-cy": dataCy, ref: refs.setFloating, style: floatingStyles, className: toClassName(styles.content, stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.content) }, getFloatingProps(), { children: [isPointing && (jsx(FloatingArrow, { ref: arrowRef, context: context, fill: styles.arrow.fill, stroke: styles.arrow.stroke, strokeWidth: Number(styles.arrow.strokeWidth) })), content] })))] }));
 };
 
-var base$p = {
+var base$q = {
     container: 'w-fit h-fit relative group/tooltip',
     content: 'absolute flex justify-center items-center z-200 tooltip-animate px-4 py-2 border whitespace-nowrap border-palette-grayDarker bg-white font-light text-xs rounded-sm',
     arrow: {
@@ -605,7 +605,7 @@ var base$p = {
     },
 };
 var styles$t = {
-    base: base$p,
+    base: base$q,
 };
 
 var ButtonElement = function (props) {
@@ -624,7 +624,7 @@ var ButtonElement = function (props) {
         }, ref: innerRef, "data-cy": dataCy, children: [status === 'idle' && children, status === 'loading' && (jsxs("div", { className: styles.content, children: [jsx(IconElement, { type: "regular", accessor: "spinner", className: styles.spinner }), jsx("div", { children: children })] })), status === 'error' && (jsxs("div", { className: styles.content, children: [jsx(IconElement, { type: "regular", accessor: "circle-exclamation", className: styles.icon }), jsx("div", { children: children })] })), status === 'success' && (jsxs("div", { className: styles.content, children: [jsx(IconElement, { type: "regular", accessor: "circle-check", className: styles.icon }), jsx("div", { children: children })] }))] }));
 };
 
-var base$o = {
+var base$p = {
     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: '',
@@ -642,10 +642,10 @@ var outline = {
 var xs$3 = {
     container: 'px-3 py-1.5 text-xs',
 };
-var sm$3 = {
+var sm$4 = {
     container: 'px-3.5 py-2 text-sm',
 };
-var md$3 = {
+var md$4 = {
     container: 'px-4 py-2.5 text-sm',
 };
 var lg$3 = {
@@ -677,13 +677,13 @@ var disabled$8 = {
     container: '!opacity-20 !cursor-not-allowed',
 };
 var styles$s = {
-    base: base$o,
+    base: base$p,
     primary: primary,
     secondary: secondary,
     outline: outline,
     xs: xs$3,
-    sm: sm$3,
-    md: md$3,
+    sm: sm$4,
+    md: md$4,
     lg: lg$3,
     xl: xl$3,
     block: block,
@@ -719,14 +719,14 @@ var ButtonGroupElement = function (props) {
         }) }));
 };
 
-var base$n = {
+var base$o = {
     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$r = {
-    base: base$n,
+    base: base$o,
 };
 
 var Container$3 = function (props) {
@@ -748,7 +748,7 @@ var DropdownElement = {
     Item: Menu.Item,
 };
 
-var base$m = {
+var base$n = {
     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',
@@ -770,7 +770,7 @@ var topRight = {
     items: 'origin-bottom-left left-0 bottom-0',
 };
 var styles$q = {
-    base: base$m,
+    base: base$n,
     button: button,
     compact: compact,
     'bottom-left': bottomLeft,
@@ -782,7 +782,7 @@ var styles$q = {
 var InputGroupForm = function (props) {
     var _a;
     var _b;
-    var name = props.name, _c = props.htmlType, htmlType = _c === void 0 ? 'text' : _c, label = props.label, description = props.description, placeholder = props.placeholder, leading = props.leading, trailing = props.trailing, required = props.required, value = props.value, mask = props.mask, min = props.min, max = props.max, maxLength = props.maxLength, rows = props.rows, error = props.error, _d = props.type, type = _d === void 0 ? 'normal' : _d, isDisabled = props.isDisabled, _e = props.isRequired, isRequired = _e === void 0 ? false : _e, _f = props.isTouched, isTouched = _f === void 0 ? false : _f, _g = props.isSolo, isSolo = _g === void 0 ? false : _g, onChange = props.onChange, onClear = props.onClear, onBlur = props.onBlur, onClick = props.onClick, onKeyDown = props.onKeyDown, stylesOverrides = props.styles;
+    var name = props.name, _c = props.htmlType, htmlType = _c === void 0 ? 'text' : _c, label = props.label, description = props.description, placeholder = props.placeholder, leading = props.leading, trailing = props.trailing, required = props.required, value = props.value, mask = props.mask, min = props.min, max = props.max, maxLength = props.maxLength, rows = props.rows, error = props.error, _d = props.type, type = _d === void 0 ? 'normal' : _d, isDisabled = props.isDisabled, _e = props.isRequired, isRequired = _e === void 0 ? false : _e, _f = props.isTouched, isTouched = _f === void 0 ? false : _f, _g = props.isSolo, isSolo = _g === void 0 ? false : _g, onChange = props.onChange, onClear = props.onClear, onBlur = props.onBlur, onClick = props.onClick, onKeyDown = props.onKeyDown, setRefOnLoad = props.setRefOnLoad, stylesOverrides = props.styles;
     var isValid = error === undefined;
     var ref = useMask({
         mask: mask === null || mask === void 0 ? void 0 : mask.mask,
@@ -801,11 +801,15 @@ var InputGroupForm = function (props) {
     var isClearable = !trailing && isValid && onClear && value !== '' && value;
     var inputDataCy = "form-input-".concat(name);
     var errorDataCy = "form-input-error-".concat(name);
+    useEffect(function () {
+        if (ref.current && ref.current !== null && setRefOnLoad)
+            setRefOnLoad(ref);
+    }, [ref, setRefOnLoad]);
     return (jsxs("div", { className: styles.container, children: [jsxs("div", { className: styles.head, children: [label && (jsx("label", { htmlFor: name, className: styles.label, children: label })), !required && !isRequired && typeof label === 'string' && (jsx("span", { className: styles.hint, children: "Optional" })), required && required({ isRequired: isRequired })] }), jsxs("div", { className: styles.body, children: [leading && jsx("div", { className: styles.leading, children: leading }), !htmlType ||
                         (htmlType !== 'area' && (jsxs("div", { className: "flex items-center", children: [jsx("input", { type: mask !== undefined ? 'text' : htmlType, ref: mask && ref, name: name, id: name, "data-cy": inputDataCy, className: toClassName(styles.input, htmlType === 'color' && '!h-10'), placeholder: placeholder, defaultValue: isSolo ? value : undefined, value: isSolo ? undefined : value, min: min, max: max, maxLength: maxLength, disabled: isDisabled, onChange: onChange, onBlur: onBlur, onClick: onClick, onKeyDown: onKeyDown }), htmlType === 'text' && isClearable && (jsx("div", { className: "right-5 px-2 absolute cursor-pointer hover:opacity-60", onClick: onClear, children: jsx(IconElement, { accessor: "times", className: "text-gray-500" }) })), htmlType === 'date' && isClearable && (jsx("div", { className: "right-10 px-2 absolute cursor-pointer hover:opacity-60", onClick: onClear, children: jsx(IconElement, { accessor: "times", className: "text-gray-500" }) }))] }))), htmlType === 'area' && (jsx("textarea", { rows: rows, name: name, id: name, "data-cy": inputDataCy, className: styles.input, placeholder: placeholder, defaultValue: isSolo ? value : undefined, value: isSolo ? undefined : value, maxLength: maxLength, disabled: isDisabled, onChange: onChange, onBlur: onBlur, onClick: onClick, onKeyDown: onKeyDown })), 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", { className: styles.trailing, children: trailing })), isTouched && !isValid && (jsx("div", { className: styles.trailing, children: invalidIcon }))] }), jsxs("div", { className: styles.foot, children: [description && !(error && isTouched) && (jsx("p", { className: styles.description, children: description })), error && isTouched && (jsx("p", { className: styles.error, "data-cy": errorDataCy, children: error }))] })] }));
 };
 
-var base$l = {
+var base$m = {
     container: '',
     head: 'flex justify-between',
     body: 'relative rounded-md',
@@ -869,7 +873,7 @@ var disabled$7 = {
     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',
 };
 var styles$p = {
-    base: base$l,
+    base: base$m,
     leading: leading$5,
     trailing: trailing$5,
     normal: normal$7,
@@ -910,7 +914,7 @@ var ContainerLayout = function (props) {
     return handleGenerateComponent();
 };
 
-var base$k = {
+var base$l = {
     container: '',
     content: '',
 };
@@ -925,7 +929,7 @@ var fill$1 = {
     container: 'max-w-7xl mx-auto sm:px-6 lg:px-8',
 };
 var styles$o = {
-    base: base$k,
+    base: base$l,
     break: breakStyles,
     center: center$3,
     fill: fill$1,
@@ -945,7 +949,7 @@ var DividerLayout = function (props) {
     return (jsxs("div", { className: styles.container, children: [jsx("div", { className: styles.head, "aria-hidden": "true", children: jsx("div", { className: styles.line }) }), jsx("div", { className: styles.body, children: jsx("div", { className: styles.content, children: children }) })] }));
 };
 
-var base$j = {
+var base$k = {
     container: 'relative',
     head: 'absolute inset-0 flex items-center',
     line: 'w-full border-t border-gray-300',
@@ -962,7 +966,7 @@ var right = {
     body: 'justify-end',
 };
 var styles$n = {
-    base: base$j,
+    base: base$k,
     left: left,
     center: center$2,
     right: right,
@@ -985,7 +989,7 @@ var ListContainerLayout = function (props) {
             }) }) }));
 };
 
-var base$i = {
+var base$j = {
     container: '',
     list: '',
     item: '',
@@ -1017,7 +1021,7 @@ var cardSticky = {
     item: 'bg-white shadow overflow-hidden px-4 py-4 sm:px-6 sm:rounded-md',
 };
 var styles$m = {
-    base: base$i,
+    base: base$j,
     fill: fill,
     'fill-sticky': fillSticky,
     center: center$1,
@@ -1050,7 +1054,7 @@ var MediaObjectLayout = function (props) {
     return (jsxs("div", { className: styles.container, children: [jsx("div", { className: styles.figure, children: $svg }), jsxs("div", { children: [jsx("h4", { className: styles.title, children: title }), jsx("p", { className: styles.paragraph, children: paragraph })] })] }));
 };
 
-var base$h = {
+var base$i = {
     container: '',
     figure: 'mr-4 flex-shrink-0',
     svg: 'h-16 w-16 border border-gray-300 bg-white text-gray-300',
@@ -1106,7 +1110,7 @@ var wideReversed = {
     svg: 'h-32 w-full sm:w-32',
 };
 var styles$l = {
-    base: base$h,
+    base: base$i,
     top: top,
     'top-reversed': topReversed,
     center: center,
@@ -1152,7 +1156,7 @@ var LayoutPanel = {
     Section: Section,
 };
 
-var base$g = {
+var base$h = {
     container: 'bg-white overflow-hidden shadow',
     section: 'px-4 py-5 sm:px-6',
 };
@@ -1163,7 +1167,7 @@ var sticky$1 = {
     container: 'sm:rounded-lg',
 };
 var styles$k = {
-    base: base$g,
+    base: base$h,
     normal: normal$6,
     sticky: sticky$1,
 };
@@ -1341,7 +1345,7 @@ var SelectMenuForm = function (props) {
                             } }) }), !isSolo && (jsxs("div", { className: styles.foot, children: [description && !(error && isTouched) && (jsx("p", { className: styles.description, children: description })), error && isTouched && (jsx("p", { className: styles.error, "data-cy": errorDataCy, children: JSON.stringify(error).replaceAll('"', '') }))] }))] })] }));
 };
 
-var base$f = {
+var base$g = {
     container: '',
     head: 'flex justify-between',
     body: 'relative rounded-md',
@@ -1420,7 +1424,7 @@ var disabled$6 = {
     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 cursor-not-allowed bg-gray-50 text-gray-500 ring-gray-200',
 };
 var styles$j = {
-    base: base$f,
+    base: base$g,
     leading: leading$4,
     trailing: trailing$4,
     normal: normal$5,
@@ -1505,7 +1509,7 @@ var PanelPaginationNavigation = function (props) {
                         } })), jsx("div", { children: jsxs("nav", { className: styles.desktop.navigation, "aria-label": "Pagination", children: [jsxs("button", { className: toClassName(styles.desktop.outerLeftButton, current === min && styles.button.disabled), disabled: current === min, onClick: function () { return handleChangeCurrent(1); }, children: [jsx("span", { className: styles.label, children: "First" }), jsx(ChevronDoubleLeftIcon, { className: styles.icon, "aria-hidden": "true" })] }), jsxs("button", { className: toClassName(styles.desktop.innerButton, current === min && styles.button.disabled), disabled: current === min, onClick: function () { return handleChangeCurrent(current - 1); }, children: [jsx("span", { className: styles.label, children: "Previous" }), jsx(ChevronLeftIcon, { className: styles.icon, "aria-hidden": "true" })] }), component, jsxs("button", { className: toClassName(styles.desktop.innerButton, current === max && styles.button.disabled), disabled: current === max, onClick: function () { return handleChangeCurrent(current + 1); }, children: [jsx("span", { className: styles.label, children: "Next" }), jsx(ChevronRightIcon, { className: styles.icon, "aria-hidden": "true" })] }), jsxs("button", { className: toClassName(styles.desktop.outerRightButton, current === max && styles.button.disabled), disabled: current === max, onClick: function () { return handleChangeCurrent(max); }, children: [jsx("span", { className: styles.label, children: "Last" }), jsx(ChevronDoubleRightIcon, { className: styles.icon, "aria-hidden": "true" })] })] }) })] })] }));
 };
 
-var base$e = {
+var base$f = {
     container: 'flex items-center justify-between border-t border-gray-200 bg-white py-3',
     mobile: {
         container: '',
@@ -1529,7 +1533,7 @@ var base$e = {
     pageSizeList: '!overflow-hidden',
 };
 var styles$i = {
-    base: base$e,
+    base: base$f,
 };
 
 var TableList = function (props) {
@@ -1665,7 +1669,7 @@ var TableList = function (props) {
                         : { container: 'mt-4' }, onChange: onPaginate, children: children })] }) }));
 };
 
-var base$d = {
+var base$e = {
     container: 'px-4 sm:px-6 lg:px-8',
     head: {
         container: 'sm:flex sm:items-center',
@@ -1778,7 +1782,7 @@ var controlled = {
     },
 };
 var styles$h = {
-    base: base$d,
+    base: base$e,
     normal: normal$4,
     panel: panel$1,
     full: full,
@@ -6095,7 +6099,7 @@ var TableList2 = function (props) {
     return isDraggable ? (jsx(DndContext, { collisionDetection: closestCenter, modifiers: [restrictToVerticalAxis], onDragEnd: onDragEnd, sensors: sensors, children: Content })) : (Content);
 };
 
-var base$c = {
+var base$d = {
     container: '',
     head: '',
     body: {
@@ -6154,7 +6158,7 @@ var base$c = {
     leftSide: 'text-sm text-gray-500',
 };
 var styles$g = {
-    base: base$c,
+    base: base$d,
     loading: {
         container: 'flex flex-col gap-y-2 w-full pt-5',
         row: {
@@ -6212,7 +6216,7 @@ var BreadcrumbsNavigation = function (props) {
     return (jsx("nav", { className: styles.container, "aria-label": "Breadcrumb", children: jsxs("ol", { className: styles.list, children: [jsx(HomeLink, {}), pages === null || pages === void 0 ? void 0 : pages.map(function (page) { return jsx(PageLink, { page: page }, page.name); })] }) }));
 };
 
-var base$b = {
+var base$c = {
     container: 'flex',
     list: 'flex',
     separator: '',
@@ -6298,7 +6302,7 @@ var bar = {
     },
 };
 var styles$f = {
-    base: base$b,
+    base: base$c,
     slashes: slashes,
     chevrons: chevrons,
     panel: panel,
@@ -6353,7 +6357,7 @@ var PagePaginationNavigation = function (props) {
     return (jsxs("nav", { className: styles.container, children: [jsx("div", { className: styles.left.container, children: jsxs("button", { 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", { className: styles.center.container, children: component }), jsx("div", { className: styles.right.container, children: jsxs("button", { 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$a = {
+var base$b = {
     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',
@@ -6376,7 +6380,7 @@ var base$a = {
     divider: 'inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-gray-500',
 };
 var styles$e = {
-    base: base$a,
+    base: base$b,
 };
 
 var Container$1 = function (props) {
@@ -6469,7 +6473,7 @@ var TabNavigation = {
     View: View$1,
 };
 
-var base$9 = {
+var base$a = {
     container: '',
     list: {
         container: '',
@@ -6507,7 +6511,7 @@ var buttons = {
     },
 };
 var styles$d = {
-    base: base$9,
+    base: base$a,
     underline: underline,
     pills: pills,
     buttons: buttons,
@@ -6590,7 +6594,7 @@ var ModalOverlay = function (props) {
     return (jsxs(Fragment, { children: [jsx(Transition.Root, { show: isOpen, as: Fragment$1, children: jsxs(Dialog, { as: "div", className: styles.container, onClose: handleClose, children: [jsx(Transition.Child, { as: Fragment$1, 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", { className: styles.layout.container, children: jsx("div", { className: styles.layout.content, "data-cy": dataCy, children: jsx(Transition.Child, { as: Fragment$1, 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, { className: styles.panel.container, children: children(options) }) }) }) })] }) }), trigger && trigger(options)] }));
 };
 
-var base$8 = {
+var base$9 = {
     container: 'relative z-20',
     background: {
         container: 'fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity',
@@ -6624,12 +6628,12 @@ var xs$2 = {
         container: 'sm:max-w-xs',
     },
 };
-var sm$2 = {
+var sm$3 = {
     panel: {
         container: 'sm:max-w-sm',
     },
 };
-var md$2 = {
+var md$3 = {
     panel: {
         container: 'sm:max-w-md',
     },
@@ -6645,10 +6649,10 @@ var xl$2 = {
     },
 };
 var styles$b = {
-    base: base$8,
+    base: base$9,
     xs: xs$2,
-    sm: sm$2,
-    md: md$2,
+    sm: sm$3,
+    md: md$3,
     lg: lg$2,
     xl: xl$2,
 };
@@ -6689,7 +6693,7 @@ var NotificationOverlay = {
     Item: NotificationOverlayItem,
 };
 
-var base$7 = {
+var base$8 = {
     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',
@@ -6721,14 +6725,14 @@ var xs$1 = {
         },
     },
 };
-var sm$1 = {
+var sm$2 = {
     item: {
         panel: {
             container: 'sm:max-w-sm',
         },
     },
 };
-var md$1 = {
+var md$2 = {
     item: {
         panel: {
             container: 'sm:max-w-md',
@@ -6750,10 +6754,10 @@ var xl$1 = {
     },
 };
 var styles$a = {
-    base: base$7,
+    base: base$8,
     xs: xs$1,
-    sm: sm$1,
-    md: md$1,
+    sm: sm$2,
+    md: md$2,
     lg: lg$1,
     xl: xl$1,
 };
@@ -6777,7 +6781,7 @@ var SlideOverOverlay = function (props) {
     return (jsxs(Fragment, { children: [jsx(Transition.Root, { show: isOpen, as: Fragment$1, children: jsxs(Dialog, { as: "div", className: styles.container, onClose: setIsOpen, children: [jsx(Transition.Child, { as: Fragment$1, 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", { className: styles.layout.container, children: jsx("div", { className: styles.layout.content, children: jsx("div", { className: styles.layout.inner, children: jsx(Transition.Child, { as: Fragment$1, 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, { className: styles.panel.container, children: children(options) }) }) }) }) })] }) }), trigger && trigger(options)] }));
 };
 
-var base$6 = {
+var base$7 = {
     container: 'relative z-20',
     background: {
         container: 'fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity',
@@ -6812,12 +6816,12 @@ var xs = {
         container: 'sm:max-w-xs',
     },
 };
-var sm = {
+var sm$1 = {
     panel: {
         container: 'sm:max-w-sm',
     },
 };
-var md = {
+var md$1 = {
     panel: {
         container: 'sm:max-w-md',
     },
@@ -6833,10 +6837,10 @@ var xl = {
     },
 };
 var styles$9 = {
-    base: base$6,
+    base: base$7,
     xs: xs,
-    sm: sm,
-    md: md,
+    sm: sm$1,
+    md: md$1,
     lg: lg,
     xl: xl,
 };
@@ -6924,7 +6928,7 @@ var DateMenuForm = function (props) {
     return (jsx(DateRangeMenu, __assign$1({}, props, { onChange: handleChange, isRanged: false, value: value })));
 };
 
-var base$5 = {
+var base$6 = {
     container: '',
     head: 'flex justify-between',
     body: 'relative rounded-md',
@@ -6988,7 +6992,7 @@ var disabled$5 = {
     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',
 };
 var styles$7 = {
-    base: base$5,
+    base: base$6,
     leading: leading$3,
     trailing: trailing$3,
     normal: normal$3,
@@ -7109,7 +7113,7 @@ var CheckboxInputGroupForm = function (props) {
                         } }) })] }) }));
 };
 
-var base$4 = {
+var base$5 = {
     container: '',
     sr: 'sr-only',
     list: 'space-y-5',
@@ -7128,7 +7132,7 @@ var disabled$4 = {
     },
 };
 var styles$6 = {
-    base: base$4,
+    base: base$5,
     disabled: disabled$4,
 };
 
@@ -7179,7 +7183,7 @@ var CheckboxInputForm = function (props) {
     return (jsxs("div", { className: styles.container, children: [jsxs("div", { className: styles.head, children: [jsx("input", { ref: $inputRef, name: name, "data-cy": "form-".concat(name, "-checkbox"), "aria-describedby": "".concat(name, "-description"), type: "checkbox", checked: !!value, className: toClassName(styles.input, isInputReplaced ? styles.inputHidden : ''), disabled: isDisabled, onChange: handleToggle }), jsxs("div", { className: styles.replacement, onClick: handleClick, children: [isInputReplaced && value === true && checkedElement, isInputReplaced && value === false && uncheckedElement, isInputReplaced && value === null && indeterminableElement] })] }), jsxs("div", { className: styles.body, children: [jsx("label", { htmlFor: name, className: styles.label, children: title }), description && (jsx("p", { id: "".concat(name, "-description"), className: styles.description, children: description }))] })] }));
 };
 
-var base$3 = {
+var base$4 = {
     container: 'relative flex items-start',
     head: 'flex h-6 items-center select-none',
     body: 'ml-3 text-sm leading-6',
@@ -7193,42 +7197,42 @@ var disabled$3 = {
     input: 'block 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-500 disabled:text-gray-500 disabled:ring-gray-200',
 };
 var styles$5 = {
-    base: base$3,
+    base: base$4,
     disabled: disabled$3,
 };
 
 var Switch = function (props) {
-    var name = props.name, label = props.label, description = props.description, isDisabled = props.isDisabled, _a = props.isRequired, isRequired = _a === void 0 ? false : _a, required = props.required, _b = props.isTouched, isTouched = _b === void 0 ? false : _b, error = props.error, value = props.value, stylesOverrides = props.styles, onChange = props.onChange, iconAccessorChecked = props.iconAccessorChecked, iconAccessorUnchecked = props.iconAccessorUnchecked;
+    var name = props.name, label = props.label, description = props.description, isDisabled = props.isDisabled, _a = props.isRequired, isRequired = _a === void 0 ? false : _a, required = props.required, _b = props.isTouched, isTouched = _b === void 0 ? false : _b, error = props.error, value = props.value, stylesOverrides = props.styles, _c = props.size, size = _c === void 0 ? 'md' : _c, onChange = props.onChange, iconAccessorChecked = props.iconAccessorChecked, iconAccessorUnchecked = props.iconAccessorUnchecked;
     var inputDataCy = "form-input-".concat(name);
     var errorDataCy = "form-input-error-".concat(name);
     var handleGenerateStyle = function () {
-        var result = deepCopyObject(styles$4);
-        var keys = calculateNestedKeys(styles$4);
+        var result = deepCopyObject(styles$4.base);
+        var keys = calculateNestedKeys(styles$4.base);
         forEach(keys, function (key) {
-            set(result, key, toClassName(get(styles$4, key), get(stylesOverrides, key)));
+            set(result, key, toClassName(get(styles$4.base, key), get(styles$4[size], key), get(stylesOverrides, key)));
         });
         return result;
     };
     var styles = handleGenerateStyle();
-    return (jsxs("div", { className: styles.container, children: [jsxs("div", { className: styles.head, children: [label && (jsx("label", { htmlFor: name, className: styles.label, children: label })), !required && !isRequired && typeof label === 'string' && (jsx("span", { className: styles.hint, children: "Optional" })), required && required({ isRequired: isRequired })] }), jsx("div", { className: styles.container, children: jsx("div", { "data-cy": inputDataCy, children: jsxs(Switch$1, { checked: value, disabled: isDisabled, onChange: onChange, className: toClassName(styles.switch.base, value ? styles.switch.checked : styles.switch.unchecked, isDisabled && styles.switch.disabled), children: [jsxs("span", { className: styles.switch.screenreader, children: ["Switch setting for ", name] }), jsx("span", { className: toClassName(styles.toggle.base, value ? styles.toggle.checked : styles.toggle.unchecked), children: iconAccessorChecked && iconAccessorUnchecked && (jsxs(Fragment, { children: [jsx("span", { className: toClassName(value ? styles.icon.hidden : styles.icon.shown, styles.icon.base), "aria-hidden": "true", children: jsx(IconElement, { accessor: iconAccessorUnchecked, className: styles.icon.icon }) }), jsx("span", { className: toClassName(value ? styles.icon.shown : styles.icon.hidden, styles.icon.base), "aria-hidden": "true", children: jsx(IconElement, { accessor: iconAccessorChecked, className: styles.icon.icon }) })] })) })] }) }) }), jsxs("div", { className: styles.foot, children: [description && !(error && isTouched) && (jsx("p", { className: styles.description, children: description })), error && isTouched && (jsx("p", { className: styles.error, "data-cy": errorDataCy, children: error }))] })] }));
+    return (jsxs("div", { className: styles.container, children: [jsxs("div", { className: styles.head, children: [label && (jsx("label", { htmlFor: name, className: styles.label, children: label })), !required && !isRequired && typeof label === 'string' && (jsx("span", { className: styles.hint, children: "Optional" })), required && required({ isRequired: isRequired })] }), jsx("div", { className: styles.container, "data-cy": inputDataCy, children: jsxs(Switch$1, { checked: value, disabled: isDisabled, onChange: onChange, className: toClassName(styles.switch.base, value ? styles.switch.checked : styles.switch.unchecked, isDisabled && styles.switch.disabled), children: [jsxs("span", { className: styles.switch.screenreader, children: ["Switch setting for ", name] }), jsx("span", { className: toClassName(styles.toggle.base, value ? styles.toggle.checked : styles.toggle.unchecked), children: iconAccessorChecked && iconAccessorUnchecked && (jsxs(Fragment, { children: [jsx("span", { className: toClassName(value ? styles.icon.hidden : styles.icon.shown, styles.icon.base), "aria-hidden": "true", children: jsx(IconElement, { accessor: iconAccessorUnchecked, className: styles.icon.icon }) }), jsx("span", { className: toClassName(value ? styles.icon.shown : styles.icon.hidden, styles.icon.base), "aria-hidden": "true", children: jsx(IconElement, { accessor: iconAccessorChecked, className: styles.icon.icon }) })] })) })] }) }), jsxs("div", { className: styles.foot, children: [description && !(error && isTouched) && (jsx("p", { className: styles.description, children: description })), error && isTouched && (jsx("p", { className: styles.error, "data-cy": errorDataCy, children: error }))] })] }));
 };
 
-var styles$4 = {
+var base$3 = {
     label: 'block font-medium text-gray-900 leading-6 text-sm mb-2 mr-1',
-    container: '',
+    container: 'flex flex-col',
     head: 'flex justify-between',
     hint: 'text-xs text-gray-500',
-    foot: '',
+    foot: 'flex flex-col',
     description: 'text-gray-400 text-xs mt-1',
     switch: {
-        base: 'relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out',
+        base: 'relative inline-flex w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out',
         screenreader: 'sr-only',
         checked: 'bg-primary-600 focus:outline-none focus:ring-0 focus:ring-primary-600 focus:ring-offset-2',
         unchecked: 'bg-gray-200 focus:outline-none focus:ring-0 focus:ring-primary-600 focus:ring-offset-2',
         disabled: 'opacity-50 !cursor-not-allowed',
     },
     toggle: {
-        base: 'pointer-events-none relative inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out',
+        base: 'pointer-events-none relative inline-block my-auto transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out',
         checked: 'translate-x-5',
         unchecked: 'translate-x-0',
     },
@@ -7240,6 +7244,19 @@ var styles$4 = {
     },
     error: 'text-red-500 text-xs ml-0 mt-2',
 };
+var md = {
+    switch: { base: 'h-6' },
+    toggle: { base: 'h-5 w-5' },
+};
+var sm = {
+    switch: { base: 'h-5' },
+    toggle: { base: 'h-4 w-4' },
+};
+var styles$4 = {
+    base: base$3,
+    md: md,
+    sm: sm,
+};
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};