@ballistix.digital/react-components 3.3.0 → 3.3.2

package/dist/index.js

@@ -5822,11 +5822,11 @@ var isValidState = function (state) {
 };
 
 var TableList2 = function (props) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
     var id = props.id, config = props.table, head = props.head, foot = props.foot, leftSide = props.leftSide, isLoading = props.isLoading, onRowClick = props.onRowClick, onChange = props.onChange, stylesOverrides = props.styles, dragConfig = props.dragConfig;
-    var _l = React.useState({}), columnVisibility = _l[0], setColumnVisibility = _l[1];
-    var _m = React.useState([]), columnOrder = _m[0], setColumnOrder = _m[1];
-    var _o = React.useState((_b = (_a = config.options) === null || _a === void 0 ? void 0 : _a.defaultSorting) !== null && _b !== void 0 ? _b : []), sorting = _o[0], setSorting = _o[1];
+    var _x = React.useState({}), columnVisibility = _x[0], setColumnVisibility = _x[1];
+    var _y = React.useState([]), columnOrder = _y[0], setColumnOrder = _y[1];
+    var _z = React.useState((_b = (_a = config.options) === null || _a === void 0 ? void 0 : _a.defaultSorting) !== null && _b !== void 0 ? _b : []), sorting = _z[0], setSorting = _z[1];
     var handleGenerateStyle = function () {
         var result = deepCopyObject(styles$g.base);
         var keys = calculateNestedKeys(styles$g.base);
@@ -5896,6 +5896,7 @@ var TableList2 = function (props) {
                 }
             ], config.columns, true) : config.columns,
         data: config.data,
+        enableColumnPinning: true,
         state: {
             sorting: sorting,
             columnVisibility: columnVisibility,
@@ -5906,6 +5907,10 @@ var TableList2 = function (props) {
                 ? __assign$1({ 'drag-handle': true }, initialVisibilityState) : initialVisibilityState,
             columnOrder: isDraggable
                 ? __spreadArray(['drag-handle'], ((_e = (_d = config.options) === null || _d === void 0 ? void 0 : _d.defaultOrder) !== null && _e !== void 0 ? _e : []), true) : (_f = config.options) === null || _f === void 0 ? void 0 : _f.defaultOrder,
+            columnPinning: {
+                left: (_j = lodash.map((_h = (_g = config.options) === null || _g === void 0 ? void 0 : _g.columnPinning) === null || _h === void 0 ? void 0 : _h.left, 'name')) !== null && _j !== void 0 ? _j : [],
+                right: (_m = lodash.map((_l = (_k = config.options) === null || _k === void 0 ? void 0 : _k.columnPinning) === null || _l === void 0 ? void 0 : _l.right, 'name')) !== null && _m !== void 0 ? _m : [],
+            },
         },
         manualPagination: true,
         manualSorting: true,
@@ -5956,7 +5961,7 @@ var TableList2 = function (props) {
             }
             setColumnVisibility(visibility_1);
         }
-    }, [(_g = config === null || config === void 0 ? void 0 : config.options) === null || _g === void 0 ? void 0 : _g.defaultVisibility, id, table]);
+    }, [(_o = config === null || config === void 0 ? void 0 : config.options) === null || _o === void 0 ? void 0 : _o.defaultVisibility, id, table]);
     React.useEffect(function () {
         var _a, _b, _c, _d;
         var savedOrder = (_a = getTableState(id)) === null || _a === void 0 ? void 0 : _a.columnOrder;
@@ -5971,7 +5976,7 @@ var TableList2 = function (props) {
             var mappedColumns = lodash.map(config.columns, function (column) { var _a; return ((_a = column === null || column === void 0 ? void 0 : column.id) !== null && _a !== void 0 ? _a : lodash.get(column, 'accessorKey')); });
             setColumnOrder(isDraggable ? __spreadArray(['drag-handle'], mappedColumns, true) : mappedColumns);
         }
-    }, [config.columns, (_h = config === null || config === void 0 ? void 0 : config.options) === null || _h === void 0 ? void 0 : _h.defaultOrder, id, isDraggable]);
+    }, [config.columns, (_p = config === null || config === void 0 ? void 0 : config.options) === null || _p === void 0 ? void 0 : _p.defaultOrder, id, isDraggable]);
     // Write state to local storage when it changes
     React.useEffect(function () {
         if (state) {
@@ -6006,7 +6011,52 @@ var TableList2 = function (props) {
             }) }, row.id));
     };
     var sensors = useSensors(useSensor(MouseSensor, {}), useSensor(TouchSensor, {}), useSensor(KeyboardSensor, {}));
-    var Content = (jsxRuntime.jsxs("div", { className: styles.container, "data-cy": "table-list-".concat(id), children: [head && jsxRuntime.jsx("div", { className: styles.head, children: head(state) }), jsxRuntime.jsx("div", { className: styles.body.content, children: jsxRuntime.jsx("div", { className: styles.body.wrapper, children: jsxRuntime.jsxs("div", { className: styles.body.styleWrapper, children: [leftSide && (jsxRuntime.jsx("div", { className: styles.leftSide, children: leftSide(state) })), jsxRuntime.jsxs("div", { className: styles.body.tableWrapper, children: [jsxRuntime.jsxs("table", { className: styles.body.table.container, children: [jsxRuntime.jsx("thead", { className: styles.body.table.head.container, children: lodash.map(table === null || table === void 0 ? void 0 : table.getHeaderGroups(), function (headerGroup) { return (jsxRuntime.jsx("tr", { className: styles.body.table.head.row, children: lodash.map(headerGroup.headers, function (header) {
+    var getPinnedColumnsWidth = React.useCallback(function (side, id) {
+        var _a, _b, _c, _d;
+        var pinnedColumns = lodash.map((_b = (_a = config.options) === null || _a === void 0 ? void 0 : _a.columnPinning) === null || _b === void 0 ? void 0 : _b[side], 'size');
+        var pinnedColumnIndex = lodash.findIndex((_d = (_c = config.options) === null || _c === void 0 ? void 0 : _c.columnPinning) === null || _d === void 0 ? void 0 : _d[side], { name: id });
+        if (pinnedColumnIndex === -1)
+            return null;
+        var startIndex = side === 'left' ? 0 : pinnedColumnIndex + 1;
+        var endIndex = side === 'left'
+            ? pinnedColumnIndex
+            : pinnedColumns.length - pinnedColumnIndex + 1;
+        return pinnedColumns
+            .slice(startIndex, endIndex)
+            .reduce(function (acc, size) { return acc + size; }, 0);
+    }, [(_q = config.options) === null || _q === void 0 ? void 0 : _q.columnPinning]);
+    var getCommonPinningStyles = React.useCallback(function (column) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+        var isPinned = column.getIsPinned();
+        var isLastLeftPinnedColumn = column.id == ((_c = lodash.last((_b = (_a = config.options) === null || _a === void 0 ? void 0 : _a.columnPinning) === null || _b === void 0 ? void 0 : _b.left)) === null || _c === void 0 ? void 0 : _c.name);
+        var isFirstRightPinnedColumn = column.id == ((_f = lodash.first((_e = (_d = config.options) === null || _d === void 0 ? void 0 : _d.columnPinning) === null || _e === void 0 ? void 0 : _e.right)) === null || _f === void 0 ? void 0 : _f.name);
+        if (isFirstRightPinnedColumn)
+            console.log(column.id);
+        var width = (_l = lodash.find(lodash.concat((_h = (_g = config.options) === null || _g === void 0 ? void 0 : _g.columnPinning) === null || _h === void 0 ? void 0 : _h.left, (_k = (_j = config.options) === null || _j === void 0 ? void 0 : _j.columnPinning) === null || _k === void 0 ? void 0 : _k.right), {
+            name: column.id,
+        })) === null || _l === void 0 ? void 0 : _l.size;
+        return {
+            width: width,
+            maxWidth: width,
+            minWidth: width,
+            boxShadow: isLastLeftPinnedColumn
+                ? '-4px 0 4px -4px gray inset'
+                : isFirstRightPinnedColumn
+                    ? '4px 0 4px -4px gray inset'
+                    : undefined,
+            left: isPinned === 'left'
+                ? "".concat(getPinnedColumnsWidth('left', column.id), "px")
+                : undefined,
+            right: isPinned === 'right'
+                ? "".concat(getPinnedColumnsWidth('right', column.id), "px")
+                : undefined,
+        };
+    }, [
+        (_s = (_r = config.options) === null || _r === void 0 ? void 0 : _r.columnPinning) === null || _s === void 0 ? void 0 : _s.left,
+        (_u = (_t = config.options) === null || _t === void 0 ? void 0 : _t.columnPinning) === null || _u === void 0 ? void 0 : _u.right,
+        getPinnedColumnsWidth,
+    ]);
+    var Content = (jsxRuntime.jsxs("div", { className: styles.container, "data-cy": "table-list-".concat(id), children: [head && jsxRuntime.jsx("div", { className: styles.head, children: head(state) }), jsxRuntime.jsx("div", { className: styles.body.content, children: jsxRuntime.jsx("div", { className: styles.body.wrapper, children: jsxRuntime.jsxs("div", { className: styles.body.styleWrapper, children: [leftSide && (jsxRuntime.jsx("div", { className: styles.leftSide, children: leftSide(state) })), jsxRuntime.jsxs("div", { className: toClassName(styles.body.tableWrapper, leftSide && styles.body.tableWrapperWithLeftSide), children: [jsxRuntime.jsxs("table", { className: styles.body.table.container, children: [jsxRuntime.jsx("thead", { className: styles.body.table.head.container, children: lodash.map(table === null || table === void 0 ? void 0 : table.getHeaderGroups(), function (headerGroup) { return (jsxRuntime.jsx("tr", { className: styles.body.table.head.row, children: lodash.map(headerGroup.headers, function (header) {
                                                         // Default sort icon to show a user that the column is sortable
                                                         var SortIconElement = solid.ChevronUpDownIcon;
                                                         if (header.column.getIsSorted()) {
@@ -6015,12 +6065,11 @@ var TableList2 = function (props) {
                                                                     ? solid.ChevronUpIcon
                                                                     : solid.ChevronDownIcon;
                                                         }
-                                                        return (jsxRuntime.jsx("th", { colSpan: header.colSpan, className: toClassName(styles.body.table.head.cell.container, 'border-b', header.column.getCanSort() && 'cursor-pointer'), onClick: header.column.getToggleSortingHandler(), style: {
-                                                                minWidth: !!header.column.columnDef.size &&
+                                                        return (jsxRuntime.jsx("th", { colSpan: header.colSpan, className: toClassName(styles.body.table.head.cell.container, 'border-b', header.column.getCanSort() && 'cursor-pointer', header.column.getIsPinned() &&
+                                                                styles.body.table.body.column.pinned.cell), onClick: header.column.getToggleSortingHandler(), style: __assign$1({ minWidth: !!header.column.columnDef.size &&
                                                                     header.column.columnDef.size !== 150
                                                                     ? "".concat(header.column.columnDef.size, "px")
-                                                                    : 'auto',
-                                                            }, children: jsxRuntime.jsxs("div", { className: "grid gap-x-1 items-center", style: {
+                                                                    : 'auto' }, getCommonPinningStyles(header.column)), children: jsxRuntime.jsxs("div", { className: "grid gap-x-1 items-center", style: {
                                                                     gridTemplateColumns: '1fr auto',
                                                                 }, children: [header.isPlaceholder ? null : (jsxRuntime.jsx("div", { className: styles.body.table.head.cell.text, children: reactTable.flexRender(header.column.columnDef.header, header.getContext()) })), header.column.getCanSort() && (jsxRuntime.jsx("span", { className: toClassName(styles.body.table.head.cell.sortIndicator
                                                                             .container, header.column.getIsSorted()
@@ -6041,9 +6090,10 @@ var TableList2 = function (props) {
                                                                     index !==
                                                                         ((_c = (_b = table === null || table === void 0 ? void 0 : table.getState()) === null || _b === void 0 ? void 0 : _b.pagination) === null || _c === void 0 ? void 0 : _c.pageSize) -
                                                                             1 &&
-                                                                    'border-b border-gray-200'), style: { width: cell.column.getSize() }, children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id));
+                                                                    'border-b border-gray-200', cell.column.getIsPinned() &&
+                                                                    styles.body.table.body.column.pinned.cell), style: __assign$1({ width: cell.column.getSize() }, getCommonPinningStyles(cell.column)), children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id));
                                                         }) }, row.id));
-                                                })) }))] }), lodash.isEmpty(table === null || table === void 0 ? void 0 : table.getRowModel().rows) && !isLoading && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: ((_j = config === null || config === void 0 ? void 0 : config.options) === null || _j === void 0 ? void 0 : _j.emptyComponent) ? ((_k = config === null || config === void 0 ? void 0 : config.options) === null || _k === void 0 ? void 0 : _k.emptyComponent) : (jsxRuntime.jsx("div", { className: "w-full flex justify-center my-2", children: "There is no data to show..." })) })), isLoading && (jsxRuntime.jsx("div", { className: "flex flex-col gap-y-2 w-full pt-5", children: lodash.times(8, function (index) { return (jsxRuntime.jsxs("div", { className: "flex gap-2", children: [jsxRuntime.jsx("div", { className: "w-20 h-12 rounded-md bg-gray-100 animate-pulse" }), jsxRuntime.jsx("div", { className: "w-full h-12 rounded-md bg-gray-100 animate-pulse" })] }, index)); }) }))] })] }) }) }), foot && jsxRuntime.jsx("div", { className: styles.foot, children: foot(state) })] }));
+                                                })) }))] }), lodash.isEmpty(table === null || table === void 0 ? void 0 : table.getRowModel().rows) && !isLoading && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: ((_v = config === null || config === void 0 ? void 0 : config.options) === null || _v === void 0 ? void 0 : _v.emptyComponent) ? ((_w = config === null || config === void 0 ? void 0 : config.options) === null || _w === void 0 ? void 0 : _w.emptyComponent) : (jsxRuntime.jsx("div", { className: "w-full flex justify-center my-2", children: "There is no data to show..." })) })), isLoading && (jsxRuntime.jsx("div", { className: "flex flex-col gap-y-2 w-full pt-5", children: lodash.times(8, function (index) { return (jsxRuntime.jsxs("div", { className: "flex gap-2", children: [jsxRuntime.jsx("div", { className: "w-20 h-12 rounded-md bg-gray-100 animate-pulse" }), jsxRuntime.jsx("div", { className: "w-full h-12 rounded-md bg-gray-100 animate-pulse" })] }, index)); }) }))] })] }) }) }), foot && jsxRuntime.jsx("div", { className: styles.foot, children: foot(state) })] }));
     return isDraggable ? (jsxRuntime.jsx(DndContext, { collisionDetection: closestCenter, modifiers: [restrictToVerticalAxis], onDragEnd: onDragEnd, sensors: sensors, children: Content })) : (Content);
 };
 
@@ -6056,6 +6106,7 @@ var base$c = {
         content: '',
         styleWrapper: 'flex overflow-x-scroll overflow-y-visible',
         tableWrapper: 'inline-block min-w-full align-middle',
+        tableWrapperWithLeftSide: '!min-w-max w-full',
         table: {
             container: 'min-w-full border-separate border-spacing-0',
             head: {
@@ -6078,6 +6129,11 @@ var base$c = {
             body: {
                 container: 'divide-y divide-gray-200 border-t',
                 row: '',
+                column: {
+                    pinned: {
+                        cell: 'bg-white sticky z-10 overflow-hidden text-ellipsis',
+                    },
+                },
                 cell: 'whitespace-nowrap py-2.5 px-3 text-sm text-gray-500',
                 checkbox: 'absolute left-4 top-1/2 -mt-2 h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500 sm:left-6',
                 indicator: 'absolute inset-y-0 left-0 w-0.5 bg-primary-600',
@@ -6837,6 +6893,95 @@ var TableExcelExportCustom = function (props) {
 };
 
 var DateMenuForm = function (props) {
+    var onChange = props.onChange, defaultValue = props.value;
+    var handleChange = React.useCallback(function (value) {
+        onChange && onChange(value.startDate);
+    }, [onChange]);
+    var value = React.useMemo(function () {
+        return defaultValue
+            ? { startDate: defaultValue, endDate: defaultValue }
+            : { startDate: '', endDate: '' };
+    }, [defaultValue]);
+    return (jsxRuntime.jsx(DateRangeMenu, __assign$1({}, props, { onChange: handleChange, isRanged: false, value: value })));
+};
+
+var base$5 = {
+    container: '',
+    head: 'flex justify-between',
+    body: 'relative rounded-md',
+    foot: '',
+    label: 'block font-medium text-gray-900',
+    hint: 'text-xs text-gray-500',
+    leading: 'pointer-events-none absolute inset-y-0 left-0 flex items-center',
+    input: 'block w-full inline-flex',
+    trailing: 'pointer-events-none absolute inset-y-0 right-0 flex items-center',
+    description: 'text-gray-400 text-xs mt-1',
+    error: 'text-red-500 text-xs ml-5 mt-1',
+};
+var leading$3 = {
+    input: 'pl-10',
+};
+var trailing$3 = {};
+var normal$3 = {
+    label: 'leading-6 text-sm mb-2',
+    hint: 'leading-6',
+    leading: 'pl-3',
+    input: 'rounded-md border-gray-200 shadow-sm focus:border-primary-500 focus:ring-primary-500 sm:text-sm placeholder-gray-300',
+    trailing: 'pr-3',
+    description: 'mt-2 text-sm',
+};
+var inset$3 = {
+    container: 'rounded-md px-3 pt-2.5 pb-1.5 shadow-sm ring-1 ring-inset ring-gray-300 focus-within:ring-2 focus-within:ring-primary-600',
+    label: 'text-xs',
+    hint: 'text-xs',
+    input: 'border-0 !ring-0 p-0 text-gray-900 placeholder:text-gray-400 focus:ring-0 sm:text-sm pl-0',
+    description: 'hidden',
+};
+var overlapping$3 = {
+    container: 'relative',
+    head: ' absolute flex justify-between items-center left-0 -top-2 right-0 mx-2 z-10 w-full',
+    label: 'inline-block bg-white px-1 text-xs font-medium text-gray-900 ',
+    hint: 'text-xs mr-4 bg-white px-1',
+    input: 'block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:text-sm sm:leading-6',
+    description: 'hidden',
+};
+var pill$3 = {
+    head: 'mx-px block px-4 text-sm font-medium leading-6 text-gray-900 mb-1 pr-6',
+    foot: 'mx-px block px-4 text-sm font-medium leading-6 text-gray-900 mt-1 pr-6',
+    input: 'block w-full rounded-full border-0 px-4 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:text-sm sm:leading-6',
+    trailing: 'pr-2',
+    description: 'text-xs',
+};
+var floored$3 = {
+    body: 'relative mt-2',
+    label: 'block text-sm font-medium leading-6 text-gray-900',
+    input: 'peer block w-full border-0 bg-gray-50 py-1.5 text-gray-900 focus:ring-0 sm:text-sm sm:leading-6 ring-0',
+    description: 'text-xs mt-2',
+};
+var invalid$3 = {
+    container: '!ring-red-500',
+    input: 
+    // '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 sm:leading-6 pr-10',
+    '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$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,
+    leading: leading$3,
+    trailing: trailing$3,
+    normal: normal$3,
+    inset: inset$3,
+    overlapping: overlapping$3,
+    pill: pill$3,
+    floored: floored$3,
+    invalid: invalid$3,
+    disabled: disabled$5,
+};
+
+var DateRangeMenu = function (props) {
     var _a;
     var _b = props.name, name = _b === void 0 ? 'date-menu-form' : _b, _c = props.size, size = _c === void 0 ? 'compact' : _c, label = props.label, _d = props.i18n, i18n = _d === void 0 ? 'en' : _d, description = props.description, placeholder = props.placeholder, separator = props.separator, startFrom = props.startFrom, _e = props.displayFormat, displayFormat = _e === void 0 ? 'DD.MM.YYYY' : _e, _f = props.direction, direction = _f === void 0 ? 'down' : _f, minDate = props.minDate, maxDate = props.maxDate, _g = props.startWeekOn, startWeekOn = _g === void 0 ? 'mon' : _g, _h = props.icon, icon = _h === void 0 ? function (isEmpty) {
         return isEmpty ? (jsxRuntime.jsx(IconElement, { accessor: "calendar" })) : (jsxRuntime.jsx(IconElement, { accessor: "xmark", className: "text-black" }));
@@ -6918,82 +7063,6 @@ 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$5 = {
-    container: '',
-    head: 'flex justify-between',
-    body: 'relative rounded-md',
-    foot: '',
-    label: 'block font-medium text-gray-900',
-    hint: 'text-xs text-gray-500',
-    leading: 'pointer-events-none absolute inset-y-0 left-0 flex items-center',
-    input: 'block w-full inline-flex',
-    trailing: 'pointer-events-none absolute inset-y-0 right-0 flex items-center',
-    description: 'text-gray-400 text-xs mt-1',
-    error: 'text-red-500 text-xs ml-5 mt-1',
-};
-var leading$3 = {
-    input: 'pl-10',
-};
-var trailing$3 = {};
-var normal$3 = {
-    label: 'leading-6 text-sm mb-2',
-    hint: 'leading-6',
-    leading: 'pl-3',
-    input: 'rounded-md border-gray-200 shadow-sm focus:border-primary-500 focus:ring-primary-500 sm:text-sm placeholder-gray-300',
-    trailing: 'pr-3',
-    description: 'mt-2 text-sm',
-};
-var inset$3 = {
-    container: 'rounded-md px-3 pt-2.5 pb-1.5 shadow-sm ring-1 ring-inset ring-gray-300 focus-within:ring-2 focus-within:ring-primary-600',
-    label: 'text-xs',
-    hint: 'text-xs',
-    input: 'border-0 !ring-0 p-0 text-gray-900 placeholder:text-gray-400 focus:ring-0 sm:text-sm pl-0',
-    description: 'hidden',
-};
-var overlapping$3 = {
-    container: 'relative',
-    head: ' absolute flex justify-between items-center left-0 -top-2 right-0 mx-2 z-10 w-full',
-    label: 'inline-block bg-white px-1 text-xs font-medium text-gray-900 ',
-    hint: 'text-xs mr-4 bg-white px-1',
-    input: 'block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:text-sm sm:leading-6',
-    description: 'hidden',
-};
-var pill$3 = {
-    head: 'mx-px block px-4 text-sm font-medium leading-6 text-gray-900 mb-1 pr-6',
-    foot: 'mx-px block px-4 text-sm font-medium leading-6 text-gray-900 mt-1 pr-6',
-    input: 'block w-full rounded-full border-0 px-4 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:text-sm sm:leading-6',
-    trailing: 'pr-2',
-    description: 'text-xs',
-};
-var floored$3 = {
-    body: 'relative mt-2',
-    label: 'block text-sm font-medium leading-6 text-gray-900',
-    input: 'peer block w-full border-0 bg-gray-50 py-1.5 text-gray-900 focus:ring-0 sm:text-sm sm:leading-6 ring-0',
-    description: 'text-xs mt-2',
-};
-var invalid$3 = {
-    container: '!ring-red-500',
-    input: 
-    // '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 sm:leading-6 pr-10',
-    '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$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,
-    leading: leading$3,
-    trailing: trailing$3,
-    normal: normal$3,
-    inset: inset$3,
-    overlapping: overlapping$3,
-    pill: pill$3,
-    floored: floored$3,
-    invalid: invalid$3,
-    disabled: disabled$5,
-};
-
 var CheckboxInputGroupForm = function (props) {
     var name = props.name, form = props.form, options = props.options, values = props.values, isDisabled = props.isDisabled, stylesOverrides = props.styles;
     var handleGenerateStyle = function () {
@@ -15223,6 +15292,7 @@ exports.ButtonGroupElement = ButtonGroupElement;
 exports.CheckboxInput = CheckboxInputForm;
 exports.ContainerLayout = ContainerLayout;
 exports.DateMenuForm = DateMenuForm;
+exports.DateRangeMenuForm = DateRangeMenu;
 exports.DividerLayout = DividerLayout;
 exports.DropdownElement = DropdownElement;
 exports.FileInputGroupForm = FileInputGroupForm;