@spark-web/data-table 0.3.4 → 1.0.0-rc.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,39 @@
1
1
  # @spark-web/data-table
2
2
 
3
+ ## 1.0.0-rc.1
4
+
5
+ ### Major Changes
6
+
7
+ - rc
8
+
9
+ ### Patch Changes
10
+
11
+ - Updated dependencies []:
12
+ - @spark-web/checkbox@2.0.0-rc.1
13
+ - @spark-web/spinner@2.0.0-rc.1
14
+ - @spark-web/theme@4.0.0-rc.1
15
+ - @spark-web/utils@2.0.0-rc.1
16
+ - @spark-web/a11y@2.0.0-rc.1
17
+ - @spark-web/text@2.0.0-rc.1
18
+ - @spark-web/box@2.0.0-rc.1
19
+
20
+ ## 1.0.0-rc.0
21
+
22
+ ### Major Changes
23
+
24
+ - rc versio
25
+
26
+ ### Patch Changes
27
+
28
+ - Updated dependencies []:
29
+ - @spark-web/checkbox@2.0.0-rc.0
30
+ - @spark-web/spinner@2.0.0-rc.0
31
+ - @spark-web/theme@4.0.0-rc.0
32
+ - @spark-web/a11y@2.0.0-rc.0
33
+ - @spark-web/text@2.0.0-rc.0
34
+ - @spark-web/box@2.0.0-rc.0
35
+ - @spark-web/utils@2.0.0-rc.0
36
+
3
37
  ## 0.3.4
4
38
 
5
39
  ### Patch Changes
@@ -1,3 +1,4 @@
1
+ import type { SerializedStyles } from '@emotion/react';
1
2
  import { type DataAttributeMap } from '@spark-web/utils/internal';
2
3
  import type { ColumnDef, ColumnHelper, ExpandedState, OnChangeFn, Row, Table, TableOptions } from '@tanstack/react-table';
3
4
  import { createColumnHelper, flexRender } from '@tanstack/react-table';
@@ -7,13 +8,13 @@ import type { HTMLAttributes, ReactElement } from 'react';
7
8
  *
8
9
  * @see https://spark.brighte.com.au/package/data-table
9
10
  */
10
- declare function DataTable<T>({ data, items, className, columns, enableExpanding, enableHiding, enableMultiRowSelection, enableClickableRow, headerClassName, footerClassName, showBottomSpinner: showSpinner, rowClassName, expandedRowComponent, onBottomSpinnerShown, onRowClick, onRowSelectionChange, renderRow, ...tableOptions }: DataTableProps<T>): import("react/jsx-runtime").JSX.Element;
11
+ declare function DataTable<T>({ data, items, className, columns, enableExpanding, enableHiding, enableMultiRowSelection, enableClickableRow, headerClassName, footerClassName, showBottomSpinner: showSpinner, rowClassName, expandedRowComponent, onBottomSpinnerShown, onRowClick, onRowSelectionChange, renderRow, ...tableOptions }: DataTableProps<T>): import("@emotion/react/jsx-runtime").JSX.Element;
11
12
  declare type TableSubsetAttributes = Pick<HTMLAttributes<HTMLTableElement>, 'className'>;
12
13
  declare type TableSubsetOptions<T> = Pick<TableOptions<T>, 'columns' | 'enableExpanding' | 'enableHiding' | 'enableMultiRowSelection' | 'state' | 'onStateChange' | 'onExpandedChange' | 'onRowSelectionChange' | 'getRowId'>;
13
14
  declare type DataTableProps<T> = TableSubsetAttributes & TableSubsetOptions<T> & {
14
- headerClassName?: string;
15
+ headerClassName?: SerializedStyles;
15
16
  footerClassName?: string;
16
- rowClassName?: (row: Row<T>, index: number) => string;
17
+ rowClassName?: (row: Row<T>, index: number) => SerializedStyles;
17
18
  /** Map of data attributes. */
18
19
  data?: DataAttributeMap;
19
20
  items: Array<T>;
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
6
6
  var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
7
- var css = require('@emotion/css');
7
+ var react = require('@emotion/react');
8
8
  var box = require('@spark-web/box');
9
9
  var spinner = require('@spark-web/spinner');
10
10
  var theme = require('@spark-web/theme');
@@ -64,41 +64,47 @@ function DataTable(_ref) {
64
64
  as: "table"
65
65
  }, data ? internal.buildDataAttributes(data) : undefined), {}, {
66
66
  className: className,
67
- children: [headerGroups.length > 0 ? /*#__PURE__*/jsxRuntime.jsx(box.Box, {
68
- as: "thead",
69
- background: "neutral",
70
- className: css.cx(css.css({
71
- // we use box shadow instead of bottom border
72
- // to allow the border to stay in the header on scroll
73
- // when the table is sticky
74
- boxShadow: "inset 0 -2px 0 ".concat(theme$1.border.color.primary)
75
- }, headerClassName)),
76
- children: headerGroups.map(function (headerGroup) {
67
+ children: [headerGroups.length > 0 ? /*#__PURE__*/jsxRuntime.jsx(react.ClassNames, {
68
+ children: function children(_ref2) {
69
+ var css = _ref2.css,
70
+ cx = _ref2.cx;
77
71
  return /*#__PURE__*/jsxRuntime.jsx(box.Box, {
78
- as: "tr",
79
- children: headerGroup.headers.map(function (header) {
72
+ as: "thead",
73
+ background: "neutral",
74
+ className: cx(css({
75
+ // we use box shadow instead of bottom border
76
+ // to allow the border to stay in the header on scroll
77
+ // when the table is sticky
78
+ boxShadow: "inset 0 -2px 0 ".concat(theme$1.border.color.primary)
79
+ }, headerClassName)),
80
+ children: headerGroups.map(function (headerGroup) {
80
81
  return /*#__PURE__*/jsxRuntime.jsx(box.Box, {
81
- as: "th",
82
- color: theme$1.color.foreground.muted,
83
- padding: "medium",
84
- className: css.css({
85
- fontFamily: theme$1.typography.fontFamily.sans.name,
86
- fontWeight: theme$1.typography.fontWeight.semibold,
87
- textAlign: 'left',
88
- textTransform: 'uppercase'
89
- }),
90
- children: header.isPlaceholder ? null : reactTable.flexRender(header.column.columnDef.header, header.getContext())
91
- }, header.id);
82
+ as: "tr",
83
+ children: headerGroup.headers.map(function (header) {
84
+ return /*#__PURE__*/jsxRuntime.jsx(box.Box, {
85
+ as: "th",
86
+ color: theme$1.color.foreground.muted,
87
+ padding: "medium",
88
+ css: css({
89
+ fontFamily: theme$1.typography.fontFamily.sans.name,
90
+ fontWeight: theme$1.typography.fontWeight.semibold,
91
+ textAlign: 'left',
92
+ textTransform: 'uppercase'
93
+ }),
94
+ children: header.isPlaceholder ? null : reactTable.flexRender(header.column.columnDef.header, header.getContext())
95
+ }, header.id);
96
+ })
97
+ }, headerGroup.id);
92
98
  })
93
- }, headerGroup.id);
94
- })
99
+ });
100
+ }
95
101
  }) : null, /*#__PURE__*/jsxRuntime.jsxs(box.Box, {
96
102
  as: "tbody",
97
103
  children: [!renderRow ? table.getRowModel().rows.map(function (row) {
98
104
  return /*#__PURE__*/jsxRuntime.jsxs(React__default["default"].Fragment, {
99
105
  children: [/*#__PURE__*/jsxRuntime.jsx(box.Box, {
100
106
  as: "tr",
101
- className: css.css({
107
+ css: react.css({
102
108
  '&[data-is-selected="true"],&[data-is-expanded="true"]': {
103
109
  background: theme$1.color.background.primaryMuted
104
110
  },
@@ -116,7 +122,7 @@ function DataTable(_ref) {
116
122
  return /*#__PURE__*/jsxRuntime.jsx(box.Box, {
117
123
  as: "td",
118
124
  padding: "large",
119
- className: css.css({
125
+ css: react.css({
120
126
  borderBottom: '1px',
121
127
  borderBottomStyle: 'solid',
122
128
  borderColor: theme$1.border.color.standard,
@@ -129,8 +135,10 @@ function DataTable(_ref) {
129
135
  }), enableExpanding && row.getIsExpanded() && expandedRowComponent && expandedRowComponent(row, table)]
130
136
  }, row.id);
131
137
  }) : renderRow(table), showSpinner && /*#__PURE__*/jsxRuntime.jsx(reactIntersectionObserver.InView, {
132
- as: "tr",
133
- className: css.css({
138
+ as: "tr"
139
+ // @ts-ignore
140
+ ,
141
+ className: react.css({
134
142
  columnSpan: 'all'
135
143
  }),
136
144
  onChange: onBottomSpinnerShown,
@@ -142,7 +150,7 @@ function DataTable(_ref) {
142
150
  }).reduce(function (sum, len) {
143
151
  return len + 1;
144
152
  }, 0),
145
- className: css.css({
153
+ css: react.css({
146
154
  textAlign: 'center',
147
155
  verticalAlign: 'middle'
148
156
  }),
@@ -154,20 +162,25 @@ function DataTable(_ref) {
154
162
  })
155
163
  })
156
164
  })]
157
- }), footerGroups.length > 0 ? /*#__PURE__*/jsxRuntime.jsx(box.Box, {
158
- as: "tfoot",
159
- className: css.cx(footerClassName),
160
- children: footerGroups.map(function (footerGroup) {
165
+ }), footerGroups.length > 0 ? /*#__PURE__*/jsxRuntime.jsx(react.ClassNames, {
166
+ children: function children(_ref3) {
167
+ var cx = _ref3.cx;
161
168
  return /*#__PURE__*/jsxRuntime.jsx(box.Box, {
162
- as: "tr",
163
- children: footerGroup.headers.map(function (footer) {
169
+ as: "tfoot",
170
+ className: cx(footerClassName),
171
+ children: footerGroups.map(function (footerGroup) {
164
172
  return /*#__PURE__*/jsxRuntime.jsx(box.Box, {
165
- as: "td",
166
- children: reactTable.flexRender(footer.column.columnDef.footer, footer.getContext())
167
- }, footer.id);
173
+ as: "tr",
174
+ children: footerGroup.headers.map(function (footer) {
175
+ return /*#__PURE__*/jsxRuntime.jsx(box.Box, {
176
+ as: "td",
177
+ children: reactTable.flexRender(footer.column.columnDef.footer, footer.getContext())
178
+ }, footer.id);
179
+ })
180
+ }, footerGroup.id);
168
181
  })
169
- }, footerGroup.id);
170
- })
182
+ });
183
+ }
171
184
  }) : null]
172
185
  }));
173
186
  }
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
6
6
  var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
7
- var css = require('@emotion/css');
7
+ var react = require('@emotion/react');
8
8
  var box = require('@spark-web/box');
9
9
  var spinner = require('@spark-web/spinner');
10
10
  var theme = require('@spark-web/theme');
@@ -64,41 +64,47 @@ function DataTable(_ref) {
64
64
  as: "table"
65
65
  }, data ? internal.buildDataAttributes(data) : undefined), {}, {
66
66
  className: className,
67
- children: [headerGroups.length > 0 ? /*#__PURE__*/jsxRuntime.jsx(box.Box, {
68
- as: "thead",
69
- background: "neutral",
70
- className: css.cx(css.css({
71
- // we use box shadow instead of bottom border
72
- // to allow the border to stay in the header on scroll
73
- // when the table is sticky
74
- boxShadow: "inset 0 -2px 0 ".concat(theme$1.border.color.primary)
75
- }, headerClassName)),
76
- children: headerGroups.map(function (headerGroup) {
67
+ children: [headerGroups.length > 0 ? /*#__PURE__*/jsxRuntime.jsx(react.ClassNames, {
68
+ children: function children(_ref2) {
69
+ var css = _ref2.css,
70
+ cx = _ref2.cx;
77
71
  return /*#__PURE__*/jsxRuntime.jsx(box.Box, {
78
- as: "tr",
79
- children: headerGroup.headers.map(function (header) {
72
+ as: "thead",
73
+ background: "neutral",
74
+ className: cx(css({
75
+ // we use box shadow instead of bottom border
76
+ // to allow the border to stay in the header on scroll
77
+ // when the table is sticky
78
+ boxShadow: "inset 0 -2px 0 ".concat(theme$1.border.color.primary)
79
+ }, headerClassName)),
80
+ children: headerGroups.map(function (headerGroup) {
80
81
  return /*#__PURE__*/jsxRuntime.jsx(box.Box, {
81
- as: "th",
82
- color: theme$1.color.foreground.muted,
83
- padding: "medium",
84
- className: css.css({
85
- fontFamily: theme$1.typography.fontFamily.sans.name,
86
- fontWeight: theme$1.typography.fontWeight.semibold,
87
- textAlign: 'left',
88
- textTransform: 'uppercase'
89
- }),
90
- children: header.isPlaceholder ? null : reactTable.flexRender(header.column.columnDef.header, header.getContext())
91
- }, header.id);
82
+ as: "tr",
83
+ children: headerGroup.headers.map(function (header) {
84
+ return /*#__PURE__*/jsxRuntime.jsx(box.Box, {
85
+ as: "th",
86
+ color: theme$1.color.foreground.muted,
87
+ padding: "medium",
88
+ css: css({
89
+ fontFamily: theme$1.typography.fontFamily.sans.name,
90
+ fontWeight: theme$1.typography.fontWeight.semibold,
91
+ textAlign: 'left',
92
+ textTransform: 'uppercase'
93
+ }),
94
+ children: header.isPlaceholder ? null : reactTable.flexRender(header.column.columnDef.header, header.getContext())
95
+ }, header.id);
96
+ })
97
+ }, headerGroup.id);
92
98
  })
93
- }, headerGroup.id);
94
- })
99
+ });
100
+ }
95
101
  }) : null, /*#__PURE__*/jsxRuntime.jsxs(box.Box, {
96
102
  as: "tbody",
97
103
  children: [!renderRow ? table.getRowModel().rows.map(function (row) {
98
104
  return /*#__PURE__*/jsxRuntime.jsxs(React__default["default"].Fragment, {
99
105
  children: [/*#__PURE__*/jsxRuntime.jsx(box.Box, {
100
106
  as: "tr",
101
- className: css.css({
107
+ css: react.css({
102
108
  '&[data-is-selected="true"],&[data-is-expanded="true"]': {
103
109
  background: theme$1.color.background.primaryMuted
104
110
  },
@@ -116,7 +122,7 @@ function DataTable(_ref) {
116
122
  return /*#__PURE__*/jsxRuntime.jsx(box.Box, {
117
123
  as: "td",
118
124
  padding: "large",
119
- className: css.css({
125
+ css: react.css({
120
126
  borderBottom: '1px',
121
127
  borderBottomStyle: 'solid',
122
128
  borderColor: theme$1.border.color.standard,
@@ -129,8 +135,10 @@ function DataTable(_ref) {
129
135
  }), enableExpanding && row.getIsExpanded() && expandedRowComponent && expandedRowComponent(row, table)]
130
136
  }, row.id);
131
137
  }) : renderRow(table), showSpinner && /*#__PURE__*/jsxRuntime.jsx(reactIntersectionObserver.InView, {
132
- as: "tr",
133
- className: css.css({
138
+ as: "tr"
139
+ // @ts-ignore
140
+ ,
141
+ className: react.css({
134
142
  columnSpan: 'all'
135
143
  }),
136
144
  onChange: onBottomSpinnerShown,
@@ -142,7 +150,7 @@ function DataTable(_ref) {
142
150
  }).reduce(function (sum, len) {
143
151
  return len + 1;
144
152
  }, 0),
145
- className: css.css({
153
+ css: react.css({
146
154
  textAlign: 'center',
147
155
  verticalAlign: 'middle'
148
156
  }),
@@ -154,20 +162,25 @@ function DataTable(_ref) {
154
162
  })
155
163
  })
156
164
  })]
157
- }), footerGroups.length > 0 ? /*#__PURE__*/jsxRuntime.jsx(box.Box, {
158
- as: "tfoot",
159
- className: css.cx(footerClassName),
160
- children: footerGroups.map(function (footerGroup) {
165
+ }), footerGroups.length > 0 ? /*#__PURE__*/jsxRuntime.jsx(react.ClassNames, {
166
+ children: function children(_ref3) {
167
+ var cx = _ref3.cx;
161
168
  return /*#__PURE__*/jsxRuntime.jsx(box.Box, {
162
- as: "tr",
163
- children: footerGroup.headers.map(function (footer) {
169
+ as: "tfoot",
170
+ className: cx(footerClassName),
171
+ children: footerGroups.map(function (footerGroup) {
164
172
  return /*#__PURE__*/jsxRuntime.jsx(box.Box, {
165
- as: "td",
166
- children: reactTable.flexRender(footer.column.columnDef.footer, footer.getContext())
167
- }, footer.id);
173
+ as: "tr",
174
+ children: footerGroup.headers.map(function (footer) {
175
+ return /*#__PURE__*/jsxRuntime.jsx(box.Box, {
176
+ as: "td",
177
+ children: reactTable.flexRender(footer.column.columnDef.footer, footer.getContext())
178
+ }, footer.id);
179
+ })
180
+ }, footerGroup.id);
168
181
  })
169
- }, footerGroup.id);
170
- })
182
+ });
183
+ }
171
184
  }) : null]
172
185
  }));
173
186
  }
@@ -1,6 +1,6 @@
1
1
  import _objectSpread from '@babel/runtime/helpers/esm/objectSpread2';
2
2
  import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
3
- import { cx, css } from '@emotion/css';
3
+ import { ClassNames, css } from '@emotion/react';
4
4
  import { Box } from '@spark-web/box';
5
5
  import { Spinner } from '@spark-web/spinner';
6
6
  import { useTheme } from '@spark-web/theme';
@@ -57,41 +57,47 @@ function DataTable(_ref) {
57
57
  as: "table"
58
58
  }, data ? buildDataAttributes(data) : undefined), {}, {
59
59
  className: className,
60
- children: [headerGroups.length > 0 ? /*#__PURE__*/jsx(Box, {
61
- as: "thead",
62
- background: "neutral",
63
- className: cx(css({
64
- // we use box shadow instead of bottom border
65
- // to allow the border to stay in the header on scroll
66
- // when the table is sticky
67
- boxShadow: "inset 0 -2px 0 ".concat(theme.border.color.primary)
68
- }, headerClassName)),
69
- children: headerGroups.map(function (headerGroup) {
60
+ children: [headerGroups.length > 0 ? /*#__PURE__*/jsx(ClassNames, {
61
+ children: function children(_ref2) {
62
+ var css = _ref2.css,
63
+ cx = _ref2.cx;
70
64
  return /*#__PURE__*/jsx(Box, {
71
- as: "tr",
72
- children: headerGroup.headers.map(function (header) {
65
+ as: "thead",
66
+ background: "neutral",
67
+ className: cx(css({
68
+ // we use box shadow instead of bottom border
69
+ // to allow the border to stay in the header on scroll
70
+ // when the table is sticky
71
+ boxShadow: "inset 0 -2px 0 ".concat(theme.border.color.primary)
72
+ }, headerClassName)),
73
+ children: headerGroups.map(function (headerGroup) {
73
74
  return /*#__PURE__*/jsx(Box, {
74
- as: "th",
75
- color: theme.color.foreground.muted,
76
- padding: "medium",
77
- className: css({
78
- fontFamily: theme.typography.fontFamily.sans.name,
79
- fontWeight: theme.typography.fontWeight.semibold,
80
- textAlign: 'left',
81
- textTransform: 'uppercase'
82
- }),
83
- children: header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())
84
- }, header.id);
75
+ as: "tr",
76
+ children: headerGroup.headers.map(function (header) {
77
+ return /*#__PURE__*/jsx(Box, {
78
+ as: "th",
79
+ color: theme.color.foreground.muted,
80
+ padding: "medium",
81
+ css: css({
82
+ fontFamily: theme.typography.fontFamily.sans.name,
83
+ fontWeight: theme.typography.fontWeight.semibold,
84
+ textAlign: 'left',
85
+ textTransform: 'uppercase'
86
+ }),
87
+ children: header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())
88
+ }, header.id);
89
+ })
90
+ }, headerGroup.id);
85
91
  })
86
- }, headerGroup.id);
87
- })
92
+ });
93
+ }
88
94
  }) : null, /*#__PURE__*/jsxs(Box, {
89
95
  as: "tbody",
90
96
  children: [!renderRow ? table.getRowModel().rows.map(function (row) {
91
97
  return /*#__PURE__*/jsxs(React.Fragment, {
92
98
  children: [/*#__PURE__*/jsx(Box, {
93
99
  as: "tr",
94
- className: css({
100
+ css: css({
95
101
  '&[data-is-selected="true"],&[data-is-expanded="true"]': {
96
102
  background: theme.color.background.primaryMuted
97
103
  },
@@ -109,7 +115,7 @@ function DataTable(_ref) {
109
115
  return /*#__PURE__*/jsx(Box, {
110
116
  as: "td",
111
117
  padding: "large",
112
- className: css({
118
+ css: css({
113
119
  borderBottom: '1px',
114
120
  borderBottomStyle: 'solid',
115
121
  borderColor: theme.border.color.standard,
@@ -122,7 +128,9 @@ function DataTable(_ref) {
122
128
  }), enableExpanding && row.getIsExpanded() && expandedRowComponent && expandedRowComponent(row, table)]
123
129
  }, row.id);
124
130
  }) : renderRow(table), showSpinner && /*#__PURE__*/jsx(InView, {
125
- as: "tr",
131
+ as: "tr"
132
+ // @ts-ignore
133
+ ,
126
134
  className: css({
127
135
  columnSpan: 'all'
128
136
  }),
@@ -135,7 +143,7 @@ function DataTable(_ref) {
135
143
  }).reduce(function (sum, len) {
136
144
  return len + 1;
137
145
  }, 0),
138
- className: css({
146
+ css: css({
139
147
  textAlign: 'center',
140
148
  verticalAlign: 'middle'
141
149
  }),
@@ -147,20 +155,25 @@ function DataTable(_ref) {
147
155
  })
148
156
  })
149
157
  })]
150
- }), footerGroups.length > 0 ? /*#__PURE__*/jsx(Box, {
151
- as: "tfoot",
152
- className: cx(footerClassName),
153
- children: footerGroups.map(function (footerGroup) {
158
+ }), footerGroups.length > 0 ? /*#__PURE__*/jsx(ClassNames, {
159
+ children: function children(_ref3) {
160
+ var cx = _ref3.cx;
154
161
  return /*#__PURE__*/jsx(Box, {
155
- as: "tr",
156
- children: footerGroup.headers.map(function (footer) {
162
+ as: "tfoot",
163
+ className: cx(footerClassName),
164
+ children: footerGroups.map(function (footerGroup) {
157
165
  return /*#__PURE__*/jsx(Box, {
158
- as: "td",
159
- children: flexRender(footer.column.columnDef.footer, footer.getContext())
160
- }, footer.id);
166
+ as: "tr",
167
+ children: footerGroup.headers.map(function (footer) {
168
+ return /*#__PURE__*/jsx(Box, {
169
+ as: "td",
170
+ children: flexRender(footer.column.columnDef.footer, footer.getContext())
171
+ }, footer.id);
172
+ })
173
+ }, footerGroup.id);
161
174
  })
162
- }, footerGroup.id);
163
- })
175
+ });
176
+ }
164
177
  }) : null]
165
178
  }));
166
179
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spark-web/data-table",
3
- "version": "0.3.4",
3
+ "version": "1.0.0-rc.1",
4
4
  "homepage": "https://github.com/brighte-labs/spark-web#readme",
5
5
  "repository": {
6
6
  "type": "git",
@@ -17,14 +17,14 @@
17
17
  ],
18
18
  "dependencies": {
19
19
  "@babel/runtime": "^7.25.0",
20
- "@emotion/css": "^11.11.2",
21
- "@spark-web/a11y": "^1.4.0",
22
- "@spark-web/box": "^1.0.9",
23
- "@spark-web/checkbox": "^1.1.0",
24
- "@spark-web/spinner": "^1.1.0",
25
- "@spark-web/text": "^1.2.0",
26
- "@spark-web/theme": "^3.2.1",
27
- "@spark-web/utils": "^1.3.0",
20
+ "@emotion/react": "^11.13.5",
21
+ "@spark-web/a11y": "^2.0.0-rc.1",
22
+ "@spark-web/box": "^2.0.0-rc.1",
23
+ "@spark-web/checkbox": "^2.0.0-rc.1",
24
+ "@spark-web/spinner": "^2.0.0-rc.1",
25
+ "@spark-web/text": "^2.0.0-rc.1",
26
+ "@spark-web/theme": "^4.0.0-rc.1",
27
+ "@spark-web/utils": "^2.0.0-rc.1",
28
28
  "@tanstack/react-table": "^8.14.0",
29
29
  "react-intersection-observer": "^9.8.2"
30
30
  },