@infinite-table/infinite-react 0.0.2-canary.5 → 0.0.4

package/index.css

@@ -191,7 +191,7 @@
   }
 }
 
-/* vanilla-extract-css-ns:@infinite-table/infinite-react/src/components/InfiniteTable/utilities.css.ts.vanilla.css?source=Ll8xNmxtMWl3MCB7CiAgYm94LXNpemluZzogYm9yZGVyLWJveDsKfQouXzE2bG0xaXcwOmJlZm9yZSB7CiAgYm94LXNpemluZzogYm9yZGVyLWJveDsKfQouXzE2bG0xaXcwOmFmdGVyIHsKICBib3gtc2l6aW5nOiBib3JkZXItYm94Owp9Ci5fMTZsbTFpdzAgKiB7CiAgYm94LXNpemluZzogYm9yZGVyLWJveDsKfQouXzE2bG0xaXcwICo6YmVmb3JlIHsKICBib3gtc2l6aW5nOiBib3JkZXItYm94Owp9Ci5fMTZsbTFpdzAgKjphZnRlciB7CiAgYm94LXNpemluZzogYm9yZGVyLWJveDsKfQouXzE2bG0xaXcxIHsKICBwb3NpdGlvbjogcmVsYXRpdmU7Cn0KLl8xNmxtMWl3MiB7CiAgcG9zaXRpb246IGFic29sdXRlOwp9Ci5fMTZsbTFpdzMgewogIHBvc2l0aW9uOiBzdGlja3k7Cn0KLl8xNmxtMWl3NCB7CiAgcG9zaXRpb246IGZpeGVkOwp9Ci5fMTZsbTFpdzUgewogIGZpbGw6IGN1cnJlbnRDb2xvcjsKfQouXzE2bG0xaXc2IHsKICBmaWxsOiB2YXIoLS1pbmZpbml0ZS1hY2NlbnQtY29sb3IpOwp9Ci5fMTZsbTFpdzcgewogIGJhY2tncm91bmQ6IGluaGVyaXQ7Cn0KLl8xNmxtMWl3OCB7CiAgdHJhbnNmb3JtOiB0cmFuc2xhdGUzZCgwLDAsMCk7Cn0KLl8xNmxtMWl3OSB7CiAgY3Vyc29yOiBwb2ludGVyOwp9Ci5fMTZsbTFpd2EgewogIGZsZXg6IDE7Cn0KLl8xNmxtMWl3YiB7CiAgZmxleDogbm9uZTsKfQouXzE2bG0xaXdjIHsKICB6LWluZGV4OiAxOwp9Ci5fMTZsbTFpd2QgewogIHotaW5kZXg6IDEwOwp9Ci5fMTZsbTFpd2UgewogIHotaW5kZXg6IDEwMDA7Cn0KLl8xNmxtMWl3ZiB7CiAgei1pbmRleDogMTAwMDA7Cn0KLl8xNmxtMWl3ZyB7CiAgei1pbmRleDogMTAwMDAwOwp9Ci5fMTZsbTFpd2ggewogIGRpc3BsYXk6IGZsZXg7Cn0KLl8xNmxtMWl3aSB7CiAgZGlzcGxheTogYmxvY2s7Cn0KLl8xNmxtMWl3aiB7CiAgZGlzcGxheTogaW5saW5lLWJsb2NrOwp9Ci5fMTZsbTFpd2sgewogIHVzZXItc2VsZWN0OiBub25lOwp9Ci5fMTZsbTFpd2wgewogIGhlaWdodDogMDsKfQouXzE2bG0xaXdtIHsKICBoZWlnaHQ6IDEwMCU7Cn0KLl8xNmxtMWl3biB7CiAgd2lkdGg6IDA7Cn0KLl8xNmxtMWl3byB7CiAgd2lkdGg6IDEwMCU7Cn0KLl8xNmxtMWl3cCB7CiAgdG9wOiAwOwp9Ci5fMTZsbTFpd3EgewogIHRvcDogMTAwJTsKfQouXzE2bG0xaXdyIHsKICBsZWZ0OiAwOwp9Ci5fMTZsbTFpd3MgewogIGxlZnQ6IDEwMCU7Cn0KLl8xNmxtMWl3dCB7CiAgYm90dG9tOiAwOwp9Ci5fMTZsbTFpd3UgewogIGJvdHRvbTogMTAwJTsKfQouXzE2bG0xaXd2IHsKICByaWdodDogMDsKfQouXzE2bG0xaXd3IHsKICByaWdodDogMTAwJTsKfQouXzE2bG0xaXd4IHsKICBmbGV4LWZsb3c6IGNvbHVtbjsKfQouXzE2bG0xaXd5IHsKICBmbGV4LWZsb3c6IHJvdzsKfQouXzE2bG0xaXd6IHsKICBhbGlnbi1pdGVtczogY2VudGVyOwp9Ci5fMTZsbTFpdzEwIHsKICBhbGlnbi1pdGVtczogc3RyZXRjaDsKfQouXzE2bG0xaXcxMSB7CiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7Cn0KLl8xNmxtMWl3MTIgewogIGp1c3RpZnktY29udGVudDogZmxleC1zdGFydDsKfQouXzE2bG0xaXcxMyB7CiAganVzdGlmeS1jb250ZW50OiBmbGV4LWVuZDsKfQouXzE2bG0xaXcxNCB7CiAgb3ZlcmZsb3c6IGhpZGRlbjsKfQouXzE2bG0xaXcxNSB7CiAgb3ZlcmZsb3c6IGF1dG87Cn0KLl8xNmxtMWl3MTYgewogIG92ZXJmbG93OiB2aXNpYmxlOwp9Ci5fMTZsbTFpdzE3IHsKICB3aWxsLWNoYW5nZTogdHJhbnNmb3JtOwp9Ci5fMTZsbTFpdzE4IHsKICB3aGl0ZS1zcGFjZTogbm93cmFwOwp9Ci5fMTZsbTFpdzE5IHsKICB0ZXh0LW92ZXJmbG93OiBlbGxpcHNpczsKfQ== */
+/* vanilla-extract-css-ns:@infinite-table/infinite-react/src/components/InfiniteTable/utilities.css.ts.vanilla.css?source=Ll8xNmxtMWl3MCB7CiAgYm94LXNpemluZzogYm9yZGVyLWJveDsKfQouXzE2bG0xaXcwOmJlZm9yZSB7CiAgYm94LXNpemluZzogYm9yZGVyLWJveDsKfQouXzE2bG0xaXcwOmFmdGVyIHsKICBib3gtc2l6aW5nOiBib3JkZXItYm94Owp9Ci5fMTZsbTFpdzAgKiB7CiAgYm94LXNpemluZzogYm9yZGVyLWJveDsKfQouXzE2bG0xaXcwICo6YmVmb3JlIHsKICBib3gtc2l6aW5nOiBib3JkZXItYm94Owp9Ci5fMTZsbTFpdzAgKjphZnRlciB7CiAgYm94LXNpemluZzogYm9yZGVyLWJveDsKfQouXzE2bG0xaXcxIHsKICBwb3NpdGlvbjogcmVsYXRpdmU7Cn0KLl8xNmxtMWl3MiB7CiAgcG9zaXRpb246IGFic29sdXRlOwp9Ci5fMTZsbTFpdzMgewogIHBvc2l0aW9uOiBzdGlja3k7Cn0KLl8xNmxtMWl3NCB7CiAgcG9zaXRpb246IGZpeGVkOwp9Ci5fMTZsbTFpdzUgewogIGZpbGw6IGN1cnJlbnRDb2xvcjsKfQouXzE2bG0xaXc2IHsKICBmaWxsOiB2YXIoLS1pbmZpbml0ZS1hY2NlbnQtY29sb3IpOwp9Ci5fMTZsbTFpdzcgewogIGJhY2tncm91bmQ6IGluaGVyaXQ7Cn0KLl8xNmxtMWl3OCB7CiAgdHJhbnNmb3JtOiB0cmFuc2xhdGUzZCgwLDAsMCk7Cn0KLl8xNmxtMWl3OSB7CiAgdHJhbnNmb3JtOiB0cmFuc2xhdGUzZCgwLDAsMCk7Cn0KLl8xNmxtMWl3YSB7CiAgdHJhbnNmb3JtOiByb3RhdGUoOTBkZWcpOwp9Ci5fMTZsbTFpd2IgewogIGN1cnNvcjogcG9pbnRlcjsKfQouXzE2bG0xaXdjIHsKICBmbGV4OiAxOwp9Ci5fMTZsbTFpd2QgewogIGZsZXg6IG5vbmU7Cn0KLl8xNmxtMWl3ZSB7CiAgei1pbmRleDogMTsKfQouXzE2bG0xaXdmIHsKICB6LWluZGV4OiAxMDsKfQouXzE2bG0xaXdnIHsKICB6LWluZGV4OiAxMDAwOwp9Ci5fMTZsbTFpd2ggewogIHotaW5kZXg6IDEwMDAwOwp9Ci5fMTZsbTFpd2kgewogIHotaW5kZXg6IDEwMDAwMDsKfQouXzE2bG0xaXdqIHsKICBkaXNwbGF5OiBmbGV4Owp9Ci5fMTZsbTFpd2sgewogIGRpc3BsYXk6IGJsb2NrOwp9Ci5fMTZsbTFpd2wgewogIGRpc3BsYXk6IGlubGluZS1ibG9jazsKfQouXzE2bG0xaXdtIHsKICB1c2VyLXNlbGVjdDogbm9uZTsKfQouXzE2bG0xaXduIHsKICBoZWlnaHQ6IDA7Cn0KLl8xNmxtMWl3byB7CiAgaGVpZ2h0OiAxMDAlOwp9Ci5fMTZsbTFpd3AgewogIHdpZHRoOiAwOwp9Ci5fMTZsbTFpd3EgewogIHdpZHRoOiAxMDAlOwp9Ci5fMTZsbTFpd3IgewogIHRvcDogMDsKfQouXzE2bG0xaXdzIHsKICB0b3A6IDEwMCU7Cn0KLl8xNmxtMWl3dCB7CiAgbGVmdDogMDsKfQouXzE2bG0xaXd1IHsKICBsZWZ0OiAxMDAlOwp9Ci5fMTZsbTFpd3YgewogIGJvdHRvbTogMDsKfQouXzE2bG0xaXd3IHsKICBib3R0b206IDEwMCU7Cn0KLl8xNmxtMWl3eCB7CiAgcmlnaHQ6IDA7Cn0KLl8xNmxtMWl3eSB7CiAgcmlnaHQ6IDEwMCU7Cn0KLl8xNmxtMWl3eiB7CiAgZmxleC1mbG93OiBjb2x1bW47Cn0KLl8xNmxtMWl3MTAgewogIGZsZXgtZmxvdzogcm93Owp9Ci5fMTZsbTFpdzExIHsKICBhbGlnbi1pdGVtczogY2VudGVyOwp9Ci5fMTZsbTFpdzEyIHsKICBhbGlnbi1pdGVtczogc3RyZXRjaDsKfQouXzE2bG0xaXcxMyB7CiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7Cn0KLl8xNmxtMWl3MTQgewogIGp1c3RpZnktY29udGVudDogZmxleC1zdGFydDsKfQouXzE2bG0xaXcxNSB7CiAganVzdGlmeS1jb250ZW50OiBmbGV4LWVuZDsKfQouXzE2bG0xaXcxNiB7CiAgb3ZlcmZsb3c6IGhpZGRlbjsKfQouXzE2bG0xaXcxNyB7CiAgb3ZlcmZsb3c6IGF1dG87Cn0KLl8xNmxtMWl3MTggewogIG92ZXJmbG93OiB2aXNpYmxlOwp9Ci5fMTZsbTFpdzE5IHsKICB3aWxsLWNoYW5nZTogdHJhbnNmb3JtOwp9Ci5fMTZsbTFpdzFhIHsKICB3aGl0ZS1zcGFjZTogbm93cmFwOwp9Ci5fMTZsbTFpdzFiIHsKICB0ZXh0LW92ZXJmbG93OiBlbGxpcHNpczsKfQ== */
 ._16lm1iw0 {
   box-sizing: border-box;
 }
@@ -236,117 +236,123 @@
   transform: translate3d(0, 0, 0);
 }
 ._16lm1iw9 {
-  cursor: pointer;
+  transform: translate3d(0, 0, 0);
 }
 ._16lm1iwa {
-  flex: 1;
+  transform: rotate(90deg);
 }
 ._16lm1iwb {
-  flex: none;
+  cursor: pointer;
 }
 ._16lm1iwc {
-  z-index: 1;
+  flex: 1;
 }
 ._16lm1iwd {
-  z-index: 10;
+  flex: none;
 }
 ._16lm1iwe {
-  z-index: 1000;
+  z-index: 1;
 }
 ._16lm1iwf {
-  z-index: 10000;
+  z-index: 10;
 }
 ._16lm1iwg {
-  z-index: 100000;
+  z-index: 1000;
 }
 ._16lm1iwh {
-  display: flex;
+  z-index: 10000;
 }
 ._16lm1iwi {
-  display: block;
+  z-index: 100000;
 }
 ._16lm1iwj {
-  display: inline-block;
+  display: flex;
 }
 ._16lm1iwk {
+  display: block;
+}
+._16lm1iwl {
+  display: inline-block;
+}
+._16lm1iwm {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
 }
-._16lm1iwl {
+._16lm1iwn {
   height: 0;
 }
-._16lm1iwm {
+._16lm1iwo {
   height: 100%;
 }
-._16lm1iwn {
+._16lm1iwp {
   width: 0;
 }
-._16lm1iwo {
+._16lm1iwq {
   width: 100%;
 }
-._16lm1iwp {
+._16lm1iwr {
   top: 0;
 }
-._16lm1iwq {
+._16lm1iws {
   top: 100%;
 }
-._16lm1iwr {
+._16lm1iwt {
   left: 0;
 }
-._16lm1iws {
+._16lm1iwu {
   left: 100%;
 }
-._16lm1iwt {
+._16lm1iwv {
   bottom: 0;
 }
-._16lm1iwu {
+._16lm1iww {
   bottom: 100%;
 }
-._16lm1iwv {
+._16lm1iwx {
   right: 0;
 }
-._16lm1iww {
+._16lm1iwy {
   right: 100%;
 }
-._16lm1iwx {
+._16lm1iwz {
   flex-flow: column;
 }
-._16lm1iwy {
+._16lm1iw10 {
   flex-flow: row;
 }
-._16lm1iwz {
+._16lm1iw11 {
   align-items: center;
 }
-._16lm1iw10 {
+._16lm1iw12 {
   align-items: stretch;
 }
-._16lm1iw11 {
+._16lm1iw13 {
   justify-content: center;
 }
-._16lm1iw12 {
+._16lm1iw14 {
   justify-content: flex-start;
 }
-._16lm1iw13 {
+._16lm1iw15 {
   justify-content: flex-end;
 }
-._16lm1iw14 {
+._16lm1iw16 {
   overflow: hidden;
 }
-._16lm1iw15 {
+._16lm1iw17 {
   overflow: auto;
 }
-._16lm1iw16 {
+._16lm1iw18 {
   overflow: visible;
 }
-._16lm1iw17 {
+._16lm1iw19 {
   will-change: transform;
 }
-._16lm1iw18 {
+._16lm1iw1a {
   white-space: nowrap;
 }
-._16lm1iw19 {
+._16lm1iw1b {
   text-overflow: ellipsis;
 }
 

package/index.d.ts

@@ -147,6 +147,7 @@ declare module "components/hooks/useComponentState" {
         [propName in keyof TYPE_PROPS & keyof TYPE_RESULT]: 1 | ((value: TYPE_PROPS[propName]) => TYPE_RESULT[propName]);
     }>;
     type ComponentStateRootConfig<T_PROPS, COMPONENT_MAPPED_STATE, COMPONENT_SETUP_STATE = {}, COMPONENT_DERIVED_STATE = {}, T_ACTIONS = {}, T_PARENT_STATE = {}> = {
+        debugName?: string;
         initSetupState?: () => COMPONENT_SETUP_STATE;
         forwardProps?: () => ForwardPropsToStateFnResult<T_PROPS, COMPONENT_MAPPED_STATE>;
         allowedControlledPropOverrides?: Record<keyof T_PROPS, true>;
@@ -367,7 +368,7 @@ declare module "components/DataSource/GroupRowsState" {
 }
 declare module "components/types/Renderable" {
     import * as React from 'react';
-    export type Renderable = React.ReactNode | string | number | null;
+    export type Renderable = React.ReactNode;
 }
 declare module "components/InfiniteTable/types/Utility" {
     export type ArrayElement<ArrayType extends readonly unknown[]> = ArrayType extends readonly (infer ElementType)[] ? ElementType : never;
@@ -405,6 +406,7 @@ declare module "components/InfiniteTable/types/InfiniteTableColumn" {
         toggleGroupRow: InfiniteTableToggleGroupRowFn;
         groupRowsBy: DataSourceState<DATA_TYPE>['groupRowsBy'];
     }
+    export type InfiniteTableColumnRenderValueParam<DATA_TYPE, COL_TYPE = InfiniteTableComputedColumn<DATA_TYPE>> = InfiniteTableColumnRenderParam<DATA_TYPE, COL_TYPE>;
     export type InfiniteTableColumnRowspanFnParams<DATA_TYPE, COL_TYPE = InfiniteTableComputedColumn<DATA_TYPE>> = {
         data: DATA_TYPE | null;
         rowInfo: InfiniteTableRowInfo<DATA_TYPE>;
@@ -419,6 +421,7 @@ declare module "components/InfiniteTable/types/InfiniteTableColumn" {
     }
     export type InfiniteTableColumnPinned = 'start' | 'end' | false;
     export type InfiniteTableColumnRenderFunction<DATA_TYPE, COL_TYPE = InfiniteTableComputedColumn<DATA_TYPE>> = ({ value, rowIndex, column, data, toggleGroupRow, toggleCurrentGroupRow, rowInfo, groupRowsBy, }: InfiniteTableColumnRenderParam<DATA_TYPE, COL_TYPE>) => Renderable | null;
+    export type InfiniteTableColumnRenderValueFunction<DATA_TYPE, COL_TYPE = InfiniteTableComputedColumn<DATA_TYPE>> = InfiniteTableColumnRenderFunction<DATA_TYPE, COL_TYPE>;
     export type InfiniteTableColumnHeaderRenderFunction<T> = ({ columnSortInfo, column, }: InfiniteTableColumnHeaderRenderParams<T>) => Renderable;
     export type InfiniteTableColumnWithField<T> = {
         field: keyof T;
@@ -492,7 +495,7 @@ declare module "components/InfiniteTable/types/InfiniteTableColumn" {
         pivotColumn?: true;
         pivotTotalColumn?: true;
         pivotGroupKeys?: any[];
-        renderValue?: InfiniteTableColumnRenderFunction<T>;
+        renderValue?: InfiniteTableColumnRenderValueFunction<T>;
     };
     type InfiniteTableComputedColumnBase<T> = {
         computedWidth: number;
@@ -651,6 +654,11 @@ declare module "components/InfiniteTable/theme.css" {
         fontFamily: string;
         minHeight: string;
         borderRadius: string;
+        /**
+         * The background color for the whole component.
+         *
+         * Overriden in the `dark` theme.
+         */
         background: string;
         components: {
             LoadMask: {
@@ -665,12 +673,27 @@ declare module "components/InfiniteTable/theme.css" {
                 borderRadius: string;
             };
             Header: {
+                /**
+                 * Background color for the header. Defaults to [`--infinie-header-cell-background`](#header-cell-background).
+                 *
+                 * Overriden in the `dark` theme.
+                 */
                 background: string;
+                /**
+                 * The text color inside the header.
+                 *
+                 * Overriden in the `dark` theme.
+                 */
                 color: string;
                 height: string;
             };
             HeaderCell: {
                 draggingBackground: string;
+                /**
+                 * Background for header cells.
+                 *
+                 * Overriden in the `dark` theme.
+                 */
                 background: string;
                 padding: string;
                 iconSize: string;
@@ -678,14 +701,39 @@ declare module "components/InfiniteTable/theme.css" {
             Cell: {
                 padding: string;
                 borderWidth: string;
+                /**
+                 * Specifies the border for cells.
+                 *
+                 * Overriden in the `dark` theme - eg: `1px solid #2a323d`
+                 */
                 border: string;
                 borderInvisible: string;
                 borderRadius: string;
             };
             Row: {
+                /**
+                 * Text color inside rows. Defaults to `currentColor`
+                 *
+                 * Overriden in `dark` theme.
+                 */
                 color: string;
+                /**
+                 * Background color for rows. Defaults to [`--infinite-background`](#background).
+                 *
+                 * Overriden in `dark` theme.
+                 */
                 background: string;
+                /**
+                 * Background color for odd rows. Even rows will use [`--infinite-row-background`](#row-background).
+                 *
+                 * Overriden in `dark` theme.
+                 */
                 oddBackground: string;
+                /**
+                 * Background color for rows, on hover.
+                 *
+                 * Overriden in the `dark` theme.
+                 */
                 hoverBackground: string;
                 groupRowBackground: string;
                 groupRowColumnNesting: string;
@@ -704,6 +752,7 @@ declare module "components/InfiniteTable/utilities.css" {
     export const fill: Record<"accentColor" | "currentColor", string>;
     export const background: Record<"inherit", string>;
     export const transformTranslateZero: string;
+    export const transform: Record<"translateZero" | "rotate90", string>;
     export const cursor: Record<"pointer", string>;
     export const flex: Record<"none" | 1, string>;
     export const zIndex: Record<1 | 10 | 1000 | 10000 | 100000, string>;
@@ -809,10 +858,11 @@ declare module "components/InfiniteTable/types/InfiniteTableProps" {
         columns: string[];
         depth: number;
     };
-    export type GroupColumnGetterOptions<T> = {
-        groupIndex?: number;
+    export type InfiniteTableGroupColumnGetterOptions<T> = {
+        groupIndexForColumn?: number;
+        groupByForColumn?: DataSourceGroupRowsBy<T>;
+        groupRenderStrategy: InfiniteTablePropGroupRenderStrategy;
         groupCount: number;
-        groupBy?: DataSourceGroupRowsBy<T>;
         groupRowsBy: DataSourceGroupRowsBy<T>[];
     };
     export type PivotColumnGetterOptions<T> = {
@@ -827,7 +877,8 @@ declare module "components/InfiniteTable/types/InfiniteTableProps" {
     export type InfiniteTablePivotColumnBase<T> = InfiniteTableColumn<T> & InfiniteTableColumnWithSize & {
         renderValue?: InfiniteTableColumnRenderFunction<T>;
     };
-    export type InfiniteTablePropGroupColumn<T> = InfiniteTableGroupColumnBase<T> | ((options: GroupColumnGetterOptions<T>, toggleGroupRow: (groupKeys: any[]) => void) => InfiniteTableGroupColumnBase<T>);
+    export type InfiniteTablePropGroupColumn<T> = InfiniteTableGroupColumnBase<T> | InfiniteTableGroupColumnFunction<T>;
+    export type InfiniteTableGroupColumnFunction<T> = (options: InfiniteTableGroupColumnGetterOptions<T>, toggleGroupRow: (groupKeys: any[]) => void) => InfiniteTableGroupColumnBase<T>;
     export type InfiniteTablePropPivotColumn<T> = InfiniteTablePivotColumnBase<T> | ((options: PivotColumnGetterOptions<T>) => InfiniteTablePivotColumnBase<T>);
     export type InfiniteTablePropPivotRowLabelsColumn<T> = InfiniteTablePropPivotColumn<T>;
     export type InfiniteTablePropComponents = {
@@ -1089,12 +1140,12 @@ declare module "components/InfiniteTable/types/index" {
     import type { InfiniteTableState } from "components/InfiniteTable/types/InfiniteTableState";
     import type { InfiniteTableAction } from "components/InfiniteTable/types/InfiniteTableAction";
     import type { InfiniteTableActionType } from "components/InfiniteTable/types/InfiniteTableActionType";
-    import type { InfiniteTableProps, InfiniteTableImperativeApi, InfiniteTablePropColumnOrder, InfiniteTablePropColumnVisibility, InfiniteTablePropColumnPinning, InfiniteTableColumnAggregator, InfiniteTableColumnGroup, InfiniteTablePropGroupRenderStrategy, InfiniteTablePropColumnAggregations, InfiniteTablePropColumnGroups, InfiniteTablePropRowStyle, InfiniteTableRowStyleFn, InfiniteTableRowClassNameFn, InfiniteTablePropRowClassName, InfiniteTablePropColumns, InfiniteTablePropComponents } from "components/InfiniteTable/types/InfiniteTableProps";
-    import type { InfiniteTableColumn, InfiniteTableComputedColumn, InfiniteTableColumnRenderParam } from "components/InfiniteTable/types/InfiniteTableColumn";
+    import type { InfiniteTableProps, InfiniteTableImperativeApi, InfiniteTablePropColumnOrder, InfiniteTablePropColumnVisibility, InfiniteTablePropColumnPinning, InfiniteTableColumnAggregator, InfiniteTableColumnGroup, InfiniteTablePropGroupRenderStrategy, InfiniteTablePropColumnAggregations, InfiniteTablePropColumnGroups, InfiniteTablePropRowStyle, InfiniteTableRowStyleFn, InfiniteTableRowClassNameFn, InfiniteTablePropRowClassName, InfiniteTablePropColumns, InfiniteTablePropComponents, InfiniteTableGroupColumnFunction, InfiniteTableGroupColumnGetterOptions } from "components/InfiniteTable/types/InfiniteTableProps";
+    import type { InfiniteTableColumn, InfiniteTableComputedColumn, InfiniteTableColumnRenderParam, InfiniteTableColumnRenderValueParam } from "components/InfiniteTable/types/InfiniteTableColumn";
     import type { InfiniteTableComputedValues } from "components/InfiniteTable/types/InfiniteTableComputedValues";
     import type { InfiniteTableContextValue } from "components/InfiniteTable/types/InfiniteTableContextValue";
     import type { InfiniteTableRowInfo } from "utils/groupAndPivot/index";
-    export type { InfiniteTableColumnAggregator, InfiniteTableComputedValues, InfiniteTablePropColumns, InfiniteTableRowInfo, InfiniteTablePropColumnOrder, InfiniteTablePropComponents, InfiniteTablePropColumnVisibility, InfiniteTablePropColumnPinning, InfiniteTableColumnGroup, InfiniteTableColumn, InfiniteTableComputedColumn, InfiniteTableColumnRenderParam, InfiniteTableContextValue, InfiniteTablePropGroupRenderStrategy, InfiniteTablePropColumnAggregations, InfiniteTablePropColumnGroups, InfiniteTableState, InfiniteTableAction, InfiniteTableProps, InfiniteTableImperativeApi, InfiniteTableActionType, InfiniteTablePropRowStyle, InfiniteTablePropRowClassName, InfiniteTableRowStyleFn, InfiniteTableRowClassNameFn, };
+    export type { InfiniteTableColumnAggregator, InfiniteTableComputedValues, InfiniteTablePropColumns, InfiniteTableRowInfo, InfiniteTableGroupColumnFunction, InfiniteTablePropColumnOrder, InfiniteTablePropComponents, InfiniteTablePropColumnVisibility, InfiniteTablePropColumnPinning, InfiniteTableColumnGroup, InfiniteTableColumn, InfiniteTableComputedColumn, InfiniteTableColumnRenderParam, InfiniteTableColumnRenderValueParam, InfiniteTableContextValue, InfiniteTablePropGroupRenderStrategy, InfiniteTablePropColumnAggregations, InfiniteTablePropColumnGroups, InfiniteTableState, InfiniteTableAction, InfiniteTableProps, InfiniteTableImperativeApi, InfiniteTableActionType, InfiniteTablePropRowStyle, InfiniteTablePropRowClassName, InfiniteTableRowStyleFn, InfiniteTableRowClassNameFn, InfiniteTableGroupColumnGetterOptions, };
 }
 declare module "components/InfiniteTable/InfiniteTableContext" {
     import { InfiniteTableContextValue } from "components/InfiniteTable/types/InfiniteTableContextValue";
@@ -1130,7 +1181,7 @@ declare module "components/InfiniteTable/state/getInitialState" {
         pivotColumn: 1 | ((value: Partial<import("components/InfiniteTable/types/InfiniteTableProps").InfiniteTablePropPivotColumn<T>> | undefined) => Partial<import("components/InfiniteTable/types/InfiniteTableProps").InfiniteTablePropPivotColumn<T>> | undefined);
         components: 1 | ((value: import("components/InfiniteTable/types").InfiniteTablePropComponents | undefined) => import("components/InfiniteTable/types").InfiniteTablePropComponents | undefined);
         groupColumn: 1 | ((value: Partial<InfiniteTablePropGroupColumn<T>> | undefined) => Partial<InfiniteTablePropGroupColumn<T>> | undefined);
-        loadingText: 1 | ((value: import("components/types/Renderable").Renderable) => import("components/types/Renderable").Renderable);
+        loadingText: 1 | ((value: import("react").ReactNode) => import("react").ReactNode);
         onReady: 1 | ((value: ((api: import("components/InfiniteTable/types").InfiniteTableImperativeApi<T>) => void) | undefined) => ((api: import("components/InfiniteTable/types").InfiniteTableImperativeApi<T>) => void) | undefined);
         onSelfFocus: 1 | ((value: ((event: import("react").FocusEvent<HTMLDivElement>) => void) | undefined) => ((event: import("react").FocusEvent<HTMLDivElement>) => void) | undefined);
         onSelfBlur: 1 | ((value: ((event: import("react").FocusEvent<HTMLDivElement>) => void) | undefined) => ((event: import("react").FocusEvent<HTMLDivElement>) => void) | undefined);
@@ -1393,19 +1444,6 @@ declare module "components/InfiniteTable/components/icons/ExpanderIcon" {
     };
     export function ExpanderIcon(props: ExpanderIconProps): JSX.Element;
 }
-declare module "components/InfiniteTable/state/getComputedPivotColumnsFromDataSourcePivotColumns" {
-    import { DataSourcePropGroupRowsBy, DataSourcePropPivotBy } from "components/DataSource/index";
-    import { InfiniteTableProps } from "components/InfiniteTable/types/index";
-    import { InfiniteTableState } from "components/InfiniteTable/types/InfiniteTableState";
-    export function getComputedPivotColumnsFromDataSourcePivotColumns<T>(pivotColumns: InfiniteTableProps<T>['pivotColumns'], params: {
-        toggleGroupRow: (groupKeys: any[]) => void;
-        pivotColumn: InfiniteTableProps<T>['pivotColumn'];
-        pivotRowLabelsColumn: InfiniteTableProps<T>['pivotRowLabelsColumn'];
-        pivotTotalColumnPosition: InfiniteTableState<T>['pivotTotalColumnPosition'];
-        pivotBy: DataSourcePropPivotBy<T>;
-        groupRowsBy: DataSourcePropGroupRowsBy<T>;
-    }): InfiniteTableProps<T>['pivotColumns'];
-}
 declare module "components/InfiniteTable/components/InfiniteTableRow/row.css" {
     export const RowHoverCls: string;
     export const RowClsRecipe: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<{
@@ -1437,22 +1475,35 @@ declare module "components/InfiniteTable/components/InfiniteTableRow/row.css" {
     }>;
     export const GroupRowExpanderCls: string;
 }
+declare module "components/InfiniteTable/state/getComputedPivotColumnsFromDataSourcePivotColumns" {
+    import { DataSourcePropGroupRowsBy, DataSourcePropPivotBy } from "components/DataSource/index";
+    import { InfiniteTableProps } from "components/InfiniteTable/types/index";
+    import { InfiniteTableState } from "components/InfiniteTable/types/InfiniteTableState";
+    export function getComputedPivotColumnsFromDataSourcePivotColumns<T>(pivotColumns: InfiniteTableProps<T>['pivotColumns'], params: {
+        toggleGroupRow: (groupKeys: any[]) => void;
+        pivotColumn: InfiniteTableProps<T>['pivotColumn'];
+        pivotRowLabelsColumn: InfiniteTableProps<T>['pivotRowLabelsColumn'];
+        pivotTotalColumnPosition: InfiniteTableState<T>['pivotTotalColumnPosition'];
+        pivotBy: DataSourcePropPivotBy<T>;
+        groupRowsBy: DataSourcePropGroupRowsBy<T>;
+    }): InfiniteTableProps<T>['pivotColumns'];
+}
 declare module "components/InfiniteTable/utils/getColumnForGroupBy" {
+    import * as React from 'react';
     import { InfiniteTableColumnRenderParam } from "components/InfiniteTable/index";
     import { DataSourceGroupRowsBy } from "components/DataSource/index";
     import { InfiniteTableGeneratedGroupColumn } from "components/InfiniteTable/types/InfiniteTableColumn";
-    import { GroupColumnGetterOptions, InfiniteTablePropGroupColumn, InfiniteTablePropGroupRenderStrategy } from "components/InfiniteTable/types/InfiniteTableProps";
-    export function getGroupColumnRender<T>({ groupIndex, groupRenderStrategy, toggleGroupRow, }: {
+    import { InfiniteTableGroupColumnGetterOptions, InfiniteTablePropGroupColumn, InfiniteTablePropGroupRenderStrategy } from "components/InfiniteTable/types/InfiniteTableProps";
+    export function getGroupColumnRender<T>({ groupIndexForColumn, groupRenderStrategy, toggleGroupRow, }: {
         toggleGroupRow: (groupRowKeys: any[]) => void;
         groupRenderStrategy: InfiniteTablePropGroupRenderStrategy;
-        groupIndex: number;
-    }): (renderOptions: InfiniteTableColumnRenderParam<T>) => import("components/types/Renderable").Renderable;
-    export function getColumnForGroupBy<T>(options: GroupColumnGetterOptions<T> & {
-        groupIndex: number;
-        groupBy: DataSourceGroupRowsBy<T>;
-        groupRenderStrategy: InfiniteTablePropGroupRenderStrategy;
+        groupIndexForColumn: number;
+    }): (renderOptions: InfiniteTableColumnRenderParam<T>) => React.ReactNode;
+    export function getColumnForGroupBy<T>(options: InfiniteTableGroupColumnGetterOptions<T> & {
+        groupIndexForColumn: number;
+        groupByForColumn: DataSourceGroupRowsBy<T>;
     }, toggleGroupRow: (groupRowKeys: any[]) => void, groupColumnFromProps?: InfiniteTablePropGroupColumn<T>): InfiniteTableGeneratedGroupColumn<T>;
-    export function getSingleGroupColumn<T>(options: GroupColumnGetterOptions<T>, toggleGroupRow: (groupRowKeys: any[]) => void, groupColumnFromProps?: InfiniteTablePropGroupColumn<T>): InfiniteTableGeneratedGroupColumn<T>;
+    export function getSingleGroupColumn<T>(options: InfiniteTableGroupColumnGetterOptions<T>, toggleGroupRow: (groupRowKeys: any[]) => void, groupColumnFromProps?: InfiniteTablePropGroupColumn<T>): InfiniteTableGeneratedGroupColumn<T>;
 }
 declare module "components/InfiniteTable/hooks/useToggleGroupRow" {
     export type ToggleGrouRowFn = (groupKeys: any[]) => void;

package/index.esm.css

@@ -191,7 +191,7 @@
   }
 }
 
-/* vanilla-extract-css-ns:@infinite-table/infinite-react/src/components/InfiniteTable/utilities.css.ts.vanilla.css?source=Ll8xNmxtMWl3MCB7CiAgYm94LXNpemluZzogYm9yZGVyLWJveDsKfQouXzE2bG0xaXcwOmJlZm9yZSB7CiAgYm94LXNpemluZzogYm9yZGVyLWJveDsKfQouXzE2bG0xaXcwOmFmdGVyIHsKICBib3gtc2l6aW5nOiBib3JkZXItYm94Owp9Ci5fMTZsbTFpdzAgKiB7CiAgYm94LXNpemluZzogYm9yZGVyLWJveDsKfQouXzE2bG0xaXcwICo6YmVmb3JlIHsKICBib3gtc2l6aW5nOiBib3JkZXItYm94Owp9Ci5fMTZsbTFpdzAgKjphZnRlciB7CiAgYm94LXNpemluZzogYm9yZGVyLWJveDsKfQouXzE2bG0xaXcxIHsKICBwb3NpdGlvbjogcmVsYXRpdmU7Cn0KLl8xNmxtMWl3MiB7CiAgcG9zaXRpb246IGFic29sdXRlOwp9Ci5fMTZsbTFpdzMgewogIHBvc2l0aW9uOiBzdGlja3k7Cn0KLl8xNmxtMWl3NCB7CiAgcG9zaXRpb246IGZpeGVkOwp9Ci5fMTZsbTFpdzUgewogIGZpbGw6IGN1cnJlbnRDb2xvcjsKfQouXzE2bG0xaXc2IHsKICBmaWxsOiB2YXIoLS1pbmZpbml0ZS1hY2NlbnQtY29sb3IpOwp9Ci5fMTZsbTFpdzcgewogIGJhY2tncm91bmQ6IGluaGVyaXQ7Cn0KLl8xNmxtMWl3OCB7CiAgdHJhbnNmb3JtOiB0cmFuc2xhdGUzZCgwLDAsMCk7Cn0KLl8xNmxtMWl3OSB7CiAgY3Vyc29yOiBwb2ludGVyOwp9Ci5fMTZsbTFpd2EgewogIGZsZXg6IDE7Cn0KLl8xNmxtMWl3YiB7CiAgZmxleDogbm9uZTsKfQouXzE2bG0xaXdjIHsKICB6LWluZGV4OiAxOwp9Ci5fMTZsbTFpd2QgewogIHotaW5kZXg6IDEwOwp9Ci5fMTZsbTFpd2UgewogIHotaW5kZXg6IDEwMDA7Cn0KLl8xNmxtMWl3ZiB7CiAgei1pbmRleDogMTAwMDA7Cn0KLl8xNmxtMWl3ZyB7CiAgei1pbmRleDogMTAwMDAwOwp9Ci5fMTZsbTFpd2ggewogIGRpc3BsYXk6IGZsZXg7Cn0KLl8xNmxtMWl3aSB7CiAgZGlzcGxheTogYmxvY2s7Cn0KLl8xNmxtMWl3aiB7CiAgZGlzcGxheTogaW5saW5lLWJsb2NrOwp9Ci5fMTZsbTFpd2sgewogIHVzZXItc2VsZWN0OiBub25lOwp9Ci5fMTZsbTFpd2wgewogIGhlaWdodDogMDsKfQouXzE2bG0xaXdtIHsKICBoZWlnaHQ6IDEwMCU7Cn0KLl8xNmxtMWl3biB7CiAgd2lkdGg6IDA7Cn0KLl8xNmxtMWl3byB7CiAgd2lkdGg6IDEwMCU7Cn0KLl8xNmxtMWl3cCB7CiAgdG9wOiAwOwp9Ci5fMTZsbTFpd3EgewogIHRvcDogMTAwJTsKfQouXzE2bG0xaXdyIHsKICBsZWZ0OiAwOwp9Ci5fMTZsbTFpd3MgewogIGxlZnQ6IDEwMCU7Cn0KLl8xNmxtMWl3dCB7CiAgYm90dG9tOiAwOwp9Ci5fMTZsbTFpd3UgewogIGJvdHRvbTogMTAwJTsKfQouXzE2bG0xaXd2IHsKICByaWdodDogMDsKfQouXzE2bG0xaXd3IHsKICByaWdodDogMTAwJTsKfQouXzE2bG0xaXd4IHsKICBmbGV4LWZsb3c6IGNvbHVtbjsKfQouXzE2bG0xaXd5IHsKICBmbGV4LWZsb3c6IHJvdzsKfQouXzE2bG0xaXd6IHsKICBhbGlnbi1pdGVtczogY2VudGVyOwp9Ci5fMTZsbTFpdzEwIHsKICBhbGlnbi1pdGVtczogc3RyZXRjaDsKfQouXzE2bG0xaXcxMSB7CiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7Cn0KLl8xNmxtMWl3MTIgewogIGp1c3RpZnktY29udGVudDogZmxleC1zdGFydDsKfQouXzE2bG0xaXcxMyB7CiAganVzdGlmeS1jb250ZW50OiBmbGV4LWVuZDsKfQouXzE2bG0xaXcxNCB7CiAgb3ZlcmZsb3c6IGhpZGRlbjsKfQouXzE2bG0xaXcxNSB7CiAgb3ZlcmZsb3c6IGF1dG87Cn0KLl8xNmxtMWl3MTYgewogIG92ZXJmbG93OiB2aXNpYmxlOwp9Ci5fMTZsbTFpdzE3IHsKICB3aWxsLWNoYW5nZTogdHJhbnNmb3JtOwp9Ci5fMTZsbTFpdzE4IHsKICB3aGl0ZS1zcGFjZTogbm93cmFwOwp9Ci5fMTZsbTFpdzE5IHsKICB0ZXh0LW92ZXJmbG93OiBlbGxpcHNpczsKfQ== */
+/* vanilla-extract-css-ns:@infinite-table/infinite-react/src/components/InfiniteTable/utilities.css.ts.vanilla.css?source=Ll8xNmxtMWl3MCB7CiAgYm94LXNpemluZzogYm9yZGVyLWJveDsKfQouXzE2bG0xaXcwOmJlZm9yZSB7CiAgYm94LXNpemluZzogYm9yZGVyLWJveDsKfQouXzE2bG0xaXcwOmFmdGVyIHsKICBib3gtc2l6aW5nOiBib3JkZXItYm94Owp9Ci5fMTZsbTFpdzAgKiB7CiAgYm94LXNpemluZzogYm9yZGVyLWJveDsKfQouXzE2bG0xaXcwICo6YmVmb3JlIHsKICBib3gtc2l6aW5nOiBib3JkZXItYm94Owp9Ci5fMTZsbTFpdzAgKjphZnRlciB7CiAgYm94LXNpemluZzogYm9yZGVyLWJveDsKfQouXzE2bG0xaXcxIHsKICBwb3NpdGlvbjogcmVsYXRpdmU7Cn0KLl8xNmxtMWl3MiB7CiAgcG9zaXRpb246IGFic29sdXRlOwp9Ci5fMTZsbTFpdzMgewogIHBvc2l0aW9uOiBzdGlja3k7Cn0KLl8xNmxtMWl3NCB7CiAgcG9zaXRpb246IGZpeGVkOwp9Ci5fMTZsbTFpdzUgewogIGZpbGw6IGN1cnJlbnRDb2xvcjsKfQouXzE2bG0xaXc2IHsKICBmaWxsOiB2YXIoLS1pbmZpbml0ZS1hY2NlbnQtY29sb3IpOwp9Ci5fMTZsbTFpdzcgewogIGJhY2tncm91bmQ6IGluaGVyaXQ7Cn0KLl8xNmxtMWl3OCB7CiAgdHJhbnNmb3JtOiB0cmFuc2xhdGUzZCgwLDAsMCk7Cn0KLl8xNmxtMWl3OSB7CiAgdHJhbnNmb3JtOiB0cmFuc2xhdGUzZCgwLDAsMCk7Cn0KLl8xNmxtMWl3YSB7CiAgdHJhbnNmb3JtOiByb3RhdGUoOTBkZWcpOwp9Ci5fMTZsbTFpd2IgewogIGN1cnNvcjogcG9pbnRlcjsKfQouXzE2bG0xaXdjIHsKICBmbGV4OiAxOwp9Ci5fMTZsbTFpd2QgewogIGZsZXg6IG5vbmU7Cn0KLl8xNmxtMWl3ZSB7CiAgei1pbmRleDogMTsKfQouXzE2bG0xaXdmIHsKICB6LWluZGV4OiAxMDsKfQouXzE2bG0xaXdnIHsKICB6LWluZGV4OiAxMDAwOwp9Ci5fMTZsbTFpd2ggewogIHotaW5kZXg6IDEwMDAwOwp9Ci5fMTZsbTFpd2kgewogIHotaW5kZXg6IDEwMDAwMDsKfQouXzE2bG0xaXdqIHsKICBkaXNwbGF5OiBmbGV4Owp9Ci5fMTZsbTFpd2sgewogIGRpc3BsYXk6IGJsb2NrOwp9Ci5fMTZsbTFpd2wgewogIGRpc3BsYXk6IGlubGluZS1ibG9jazsKfQouXzE2bG0xaXdtIHsKICB1c2VyLXNlbGVjdDogbm9uZTsKfQouXzE2bG0xaXduIHsKICBoZWlnaHQ6IDA7Cn0KLl8xNmxtMWl3byB7CiAgaGVpZ2h0OiAxMDAlOwp9Ci5fMTZsbTFpd3AgewogIHdpZHRoOiAwOwp9Ci5fMTZsbTFpd3EgewogIHdpZHRoOiAxMDAlOwp9Ci5fMTZsbTFpd3IgewogIHRvcDogMDsKfQouXzE2bG0xaXdzIHsKICB0b3A6IDEwMCU7Cn0KLl8xNmxtMWl3dCB7CiAgbGVmdDogMDsKfQouXzE2bG0xaXd1IHsKICBsZWZ0OiAxMDAlOwp9Ci5fMTZsbTFpd3YgewogIGJvdHRvbTogMDsKfQouXzE2bG0xaXd3IHsKICBib3R0b206IDEwMCU7Cn0KLl8xNmxtMWl3eCB7CiAgcmlnaHQ6IDA7Cn0KLl8xNmxtMWl3eSB7CiAgcmlnaHQ6IDEwMCU7Cn0KLl8xNmxtMWl3eiB7CiAgZmxleC1mbG93OiBjb2x1bW47Cn0KLl8xNmxtMWl3MTAgewogIGZsZXgtZmxvdzogcm93Owp9Ci5fMTZsbTFpdzExIHsKICBhbGlnbi1pdGVtczogY2VudGVyOwp9Ci5fMTZsbTFpdzEyIHsKICBhbGlnbi1pdGVtczogc3RyZXRjaDsKfQouXzE2bG0xaXcxMyB7CiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7Cn0KLl8xNmxtMWl3MTQgewogIGp1c3RpZnktY29udGVudDogZmxleC1zdGFydDsKfQouXzE2bG0xaXcxNSB7CiAganVzdGlmeS1jb250ZW50OiBmbGV4LWVuZDsKfQouXzE2bG0xaXcxNiB7CiAgb3ZlcmZsb3c6IGhpZGRlbjsKfQouXzE2bG0xaXcxNyB7CiAgb3ZlcmZsb3c6IGF1dG87Cn0KLl8xNmxtMWl3MTggewogIG92ZXJmbG93OiB2aXNpYmxlOwp9Ci5fMTZsbTFpdzE5IHsKICB3aWxsLWNoYW5nZTogdHJhbnNmb3JtOwp9Ci5fMTZsbTFpdzFhIHsKICB3aGl0ZS1zcGFjZTogbm93cmFwOwp9Ci5fMTZsbTFpdzFiIHsKICB0ZXh0LW92ZXJmbG93OiBlbGxpcHNpczsKfQ== */
 ._16lm1iw0 {
   box-sizing: border-box;
 }
@@ -236,117 +236,123 @@
   transform: translate3d(0, 0, 0);
 }
 ._16lm1iw9 {
-  cursor: pointer;
+  transform: translate3d(0, 0, 0);
 }
 ._16lm1iwa {
-  flex: 1;
+  transform: rotate(90deg);
 }
 ._16lm1iwb {
-  flex: none;
+  cursor: pointer;
 }
 ._16lm1iwc {
-  z-index: 1;
+  flex: 1;
 }
 ._16lm1iwd {
-  z-index: 10;
+  flex: none;
 }
 ._16lm1iwe {
-  z-index: 1000;
+  z-index: 1;
 }
 ._16lm1iwf {
-  z-index: 10000;
+  z-index: 10;
 }
 ._16lm1iwg {
-  z-index: 100000;
+  z-index: 1000;
 }
 ._16lm1iwh {
-  display: flex;
+  z-index: 10000;
 }
 ._16lm1iwi {
-  display: block;
+  z-index: 100000;
 }
 ._16lm1iwj {
-  display: inline-block;
+  display: flex;
 }
 ._16lm1iwk {
+  display: block;
+}
+._16lm1iwl {
+  display: inline-block;
+}
+._16lm1iwm {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
 }
-._16lm1iwl {
+._16lm1iwn {
   height: 0;
 }
-._16lm1iwm {
+._16lm1iwo {
   height: 100%;
 }
-._16lm1iwn {
+._16lm1iwp {
   width: 0;
 }
-._16lm1iwo {
+._16lm1iwq {
   width: 100%;
 }
-._16lm1iwp {
+._16lm1iwr {
   top: 0;
 }
-._16lm1iwq {
+._16lm1iws {
   top: 100%;
 }
-._16lm1iwr {
+._16lm1iwt {
   left: 0;
 }
-._16lm1iws {
+._16lm1iwu {
   left: 100%;
 }
-._16lm1iwt {
+._16lm1iwv {
   bottom: 0;
 }
-._16lm1iwu {
+._16lm1iww {
   bottom: 100%;
 }
-._16lm1iwv {
+._16lm1iwx {
   right: 0;
 }
-._16lm1iww {
+._16lm1iwy {
   right: 100%;
 }
-._16lm1iwx {
+._16lm1iwz {
   flex-flow: column;
 }
-._16lm1iwy {
+._16lm1iw10 {
   flex-flow: row;
 }
-._16lm1iwz {
+._16lm1iw11 {
   align-items: center;
 }
-._16lm1iw10 {
+._16lm1iw12 {
   align-items: stretch;
 }
-._16lm1iw11 {
+._16lm1iw13 {
   justify-content: center;
 }
-._16lm1iw12 {
+._16lm1iw14 {
   justify-content: flex-start;
 }
-._16lm1iw13 {
+._16lm1iw15 {
   justify-content: flex-end;
 }
-._16lm1iw14 {
+._16lm1iw16 {
   overflow: hidden;
 }
-._16lm1iw15 {
+._16lm1iw17 {
   overflow: auto;
 }
-._16lm1iw16 {
+._16lm1iw18 {
   overflow: visible;
 }
-._16lm1iw17 {
+._16lm1iw19 {
   will-change: transform;
 }
-._16lm1iw18 {
+._16lm1iw1a {
   white-space: nowrap;
 }
-._16lm1iw19 {
+._16lm1iw1b {
   text-overflow: ellipsis;
 }