@dfds-ui/experiences 2.2.0-alpha.b94ad8b5 → 2.2.0-alpha.c82cfa6a

package/dynamic-table/Body/TableRow.js

@@ -4,7 +4,7 @@ import TableCell from './TableCell';
 import { tableCellCheckboxStyles, tableCellExpanderStyles } from './TableCell.styles';
 import { chevronStyles, tableRowStyles } from './TableRow.styles';
 import { ChevronRight } from '@dfds-ui/icons/system';
-import { jsx as ___EmotionJSX } from "@emotion/react";
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 var TableRow = /*#__PURE__*/React.memo(function (_ref) {
   var _row$subRows;
   var expandable = _ref.expandable,
@@ -22,7 +22,7 @@ var TableRow = /*#__PURE__*/React.memo(function (_ref) {
     _ref$showExpander = _ref.showExpander,
     showExpander = _ref$showExpander === void 0 ? false : _ref$showExpander;
   var hasSubRows = (((_row$subRows = row.subRows) === null || _row$subRows === void 0 ? void 0 : _row$subRows.length) || 0) > 0;
-  return ___EmotionJSX("tr", {
+  return _jsxs("tr", {
     css: tableRowStyles({
       active: isActive,
       expanded: isExpanded,
@@ -34,38 +34,41 @@ var TableRow = /*#__PURE__*/React.memo(function (_ref) {
     "data-row-type": isSubRow ? 'sub-row' : 'row',
     onClick: function onClick() {
       return onClickRow && onClickRow(row.id ? String(row.id) : '');
-    }
-  }, expandable && ___EmotionJSX("td", {
-    css: tableCellExpanderStyles(showExpander),
-    onClick: function onClick(e) {
-      if (!showExpander) return;
-      e.stopPropagation();
-      setIsExpanded(function (prev) {
-        return !prev;
-      });
-    }
-  }, hasSubRows ? ___EmotionJSX(ChevronRight, {
-    css: chevronStyles({
-      expanded: isExpanded
-    })
-  }) : null), selectableRows && row.id && ___EmotionJSX("td", {
-    css: tableCellCheckboxStyles
-  }, ___EmotionJSX(Checkbox, {
-    checked: selectedRows.includes(row.id),
-    name: row.id,
-    onChange: function onChange() {
-      if (!row.id) return;
-      onSelectRow(row.id);
     },
-    onLabelClick: function onLabelClick(e) {
-      e.stopPropagation();
-    },
-    visualSize: "small"
-  })), headerRow.map(function (headerCell, index) {
-    return ___EmotionJSX(TableCell, {
-      headerCell: headerRow === null || headerRow === void 0 ? void 0 : headerRow[index],
-      key: index
-    }, row[headerCell.key] || '-');
-  }));
+    children: [expandable && _jsx("td", {
+      css: tableCellExpanderStyles(showExpander),
+      onClick: function onClick(e) {
+        if (!showExpander) return;
+        e.stopPropagation();
+        setIsExpanded(function (prev) {
+          return !prev;
+        });
+      },
+      children: hasSubRows ? _jsx(ChevronRight, {
+        css: chevronStyles({
+          expanded: isExpanded
+        })
+      }) : null
+    }), selectableRows && row.id && _jsx("td", {
+      css: tableCellCheckboxStyles,
+      children: _jsx(Checkbox, {
+        checked: selectedRows.includes(row.id),
+        name: row.id,
+        onChange: function onChange() {
+          if (!row.id) return;
+          onSelectRow(row.id);
+        },
+        onLabelClick: function onLabelClick(e) {
+          e.stopPropagation();
+        },
+        visualSize: "small"
+      })
+    }), headerRow.map(function (headerCell, index) {
+      return _jsx(TableCell, {
+        headerCell: headerRow === null || headerRow === void 0 ? void 0 : headerRow[index],
+        children: row[headerCell.key] || '-'
+      }, index);
+    })]
+  });
 });
 export default TableRow;

package/dynamic-table/Body/TableRow.styles.d.ts

@@ -1,11 +1,11 @@
 import { ChevronProps } from './TableRow.types';
-export declare const genericTableRowStyles: import("@emotion/react").SerializedStyles;
-declare type TableRowProps = {
+export declare const genericTableRowStyles: import("@emotion/utils").SerializedStyles;
+type TableRowProps = {
     active?: boolean;
     expanded: boolean;
     hoverColor: boolean;
     subRow: boolean;
 };
-export declare const tableRowStyles: ({ active, expanded, hoverColor, subRow }: TableRowProps) => import("@emotion/react").SerializedStyles;
-export declare const chevronStyles: ({ expanded }: ChevronProps) => import("@emotion/react").SerializedStyles;
+export declare const tableRowStyles: ({ active, expanded, hoverColor, subRow }: TableRowProps) => import("@emotion/utils").SerializedStyles;
+export declare const chevronStyles: ({ expanded }: ChevronProps) => import("@emotion/utils").SerializedStyles;
 export {};

package/dynamic-table/Body/TableRow.types.d.ts

@@ -1,5 +1,5 @@
 import { Header, Row } from '../DynamicTable.types';
-export declare type TableRowProps = {
+export type TableRowProps = {
     expandable?: boolean;
     headerRow: Header[];
     isActive: boolean;
@@ -13,6 +13,6 @@ export declare type TableRowProps = {
     setIsExpanded: React.Dispatch<React.SetStateAction<boolean>>;
     showExpander?: boolean;
 };
-export declare type ChevronProps = {
+export type ChevronProps = {
     expanded: boolean;
 };

package/dynamic-table/Body/TableRowGroup.js

@@ -1,12 +1,12 @@
 function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
-function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) { n[e] = r[e]; } return n; }
-function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0) { ; } } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 import React from 'react';
 import TableRow from './TableRow';
-import { jsx as ___EmotionJSX } from "@emotion/react";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 var TableRowGroup = /*#__PURE__*/React.memo(function (_ref) {
   var activeRow = _ref.activeRow,
     expandable = _ref.expandable,
@@ -22,33 +22,34 @@ var TableRowGroup = /*#__PURE__*/React.memo(function (_ref) {
     setIsExpanded = _React$useState2[1];
   var subRows = row.subRows || [];
   var hasSubRows = subRows.length > 0;
-  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(TableRow, {
-    expandable: expandable,
-    headerRow: headerRow,
-    isActive: activeRow ? row.id === activeRow : false,
-    isExpanded: isExpanded,
-    onClickRow: onClickRow,
-    onSelectRow: onSelectRow,
-    row: row,
-    selectableRows: selectableRows,
-    selectedRows: selectedRows,
-    setIsExpanded: setIsExpanded,
-    showExpander: hasSubRows
-  }), subRows.map(function (subRow) {
-    return ___EmotionJSX(TableRow, {
+  return _jsxs(_Fragment, {
+    children: [_jsx(TableRow, {
       expandable: expandable,
       headerRow: headerRow,
-      isActive: activeRow ? subRow.id === activeRow : false,
+      isActive: activeRow ? row.id === activeRow : false,
       isExpanded: isExpanded,
-      isSubRow: true,
-      key: subRow.id,
       onClickRow: onClickRow,
       onSelectRow: onSelectRow,
-      row: subRow,
+      row: row,
       selectableRows: selectableRows,
       selectedRows: selectedRows,
-      setIsExpanded: setIsExpanded
-    });
-  }));
+      setIsExpanded: setIsExpanded,
+      showExpander: hasSubRows
+    }), subRows.map(function (subRow) {
+      return _jsx(TableRow, {
+        expandable: expandable,
+        headerRow: headerRow,
+        isActive: activeRow ? subRow.id === activeRow : false,
+        isExpanded: isExpanded,
+        isSubRow: true,
+        onClickRow: onClickRow,
+        onSelectRow: onSelectRow,
+        row: subRow,
+        selectableRows: selectableRows,
+        selectedRows: selectedRows,
+        setIsExpanded: setIsExpanded
+      }, subRow.id);
+    })]
+  });
 });
 export default TableRowGroup;

package/dynamic-table/Body/TableRowGroup.types.d.ts

@@ -1,5 +1,5 @@
 import { Header, Row } from '../DynamicTable.types';
-export declare type TableRowGroupProps = {
+export type TableRowGroupProps = {
     activeRow?: string;
     expandable?: boolean;
     headerRow: Header[];
@@ -9,6 +9,6 @@ export declare type TableRowGroupProps = {
     selectableRows: boolean;
     selectedRows: string[];
 };
-export declare type ChevronProps = {
+export type ChevronProps = {
     expanded: boolean;
 };

package/dynamic-table/DynamicTable.js

@@ -1,20 +1,25 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 var _excluded = ["activeRow", "descending", "expandable", "height", "headerRow", "isLoading", "onClickRow", "onSelectRow", "onSort", "rows", "selectedRows", "sortingBy", "stickyHeader"];
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) { ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } } return n; }, _extends.apply(null, arguments); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
-function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) { n[e] = r[e]; } return n; }
-function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0) { ; } } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
-function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) { o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } } return i; }
-function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) { if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } } return t; }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 import React, { useEffect, useMemo, useState } from 'react';
 import TableBody from './Body/TableBody';
 import { tableStyles, tableWrapperStyles } from './DynamicTable.styles';
 import TableHead from './Head/TableHead';
 import createSkeletonRows from './Skeleton/helpers/createSkeletonRows';
 import { fadeStyles } from './Skeleton/SkeletonTable.styles';
-import { jsx as ___EmotionJSX } from "@emotion/react";
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 var DynamicTable = function DynamicTable(_ref) {
   var activeRow = _ref.activeRow,
     descending = _ref.descending,
@@ -49,37 +54,40 @@ var DynamicTable = function DynamicTable(_ref) {
       onSort(sortByKeyValue, sortDescending);
     }
   }, [sortDescending, onSort, sortByKeyValue]);
-  return ___EmotionJSX("div", _extends({
+  return _jsxs("div", _objectSpread(_objectSpread({
     css: tableWrapperStyles({
       height: height
     })
-  }, rest), ___EmotionJSX("table", {
-    css: tableStyles,
-    "data-cy": !isLoading ? "dynamic-table-isLoaded" : ''
-  }, headerRow && ___EmotionJSX(TableHead, {
-    expandable: expandable,
-    headerRow: headerRow,
-    onSelectRow: onSelectRow,
-    onSort: onSort,
-    rows: rows,
-    selectableRows: selectableRows,
-    selectedRows: selectedRows,
-    setSortDescending: setSortDescending,
-    setSortByKeyValue: setSortByKeyValue,
-    sortDescending: sortDescending,
-    sortByKeyValue: sortByKeyValue,
-    stickyHeader: stickyHeader
-  }), ___EmotionJSX(TableBody, {
-    activeRow: activeRow,
-    expandable: expandable,
-    headerRow: headerRow,
-    onClickRow: onClickRow,
-    onSelectRow: onSelectRow,
-    rows: !isLoading ? rows : skeletonRows,
-    selectableRows: selectableRows,
-    selectedRows: selectedRows
-  })), isLoading && ___EmotionJSX("div", {
-    css: fadeStyles
+  }, rest), {}, {
+    children: [_jsxs("table", {
+      css: tableStyles,
+      "data-cy": !isLoading ? "dynamic-table-isLoaded" : '',
+      children: [headerRow && _jsx(TableHead, {
+        expandable: expandable,
+        headerRow: headerRow,
+        onSelectRow: onSelectRow,
+        onSort: onSort,
+        rows: rows,
+        selectableRows: selectableRows,
+        selectedRows: selectedRows,
+        setSortDescending: setSortDescending,
+        setSortByKeyValue: setSortByKeyValue,
+        sortDescending: sortDescending,
+        sortByKeyValue: sortByKeyValue,
+        stickyHeader: stickyHeader
+      }), _jsx(TableBody, {
+        activeRow: activeRow,
+        expandable: expandable,
+        headerRow: headerRow,
+        onClickRow: onClickRow,
+        onSelectRow: onSelectRow,
+        rows: !isLoading ? rows : skeletonRows,
+        selectableRows: selectableRows,
+        selectedRows: selectedRows
+      })]
+    }), isLoading && _jsx("div", {
+      css: fadeStyles
+    })]
   }));
 };
 export default /*#__PURE__*/React.memo(DynamicTable);

package/dynamic-table/DynamicTable.styles.d.ts

@@ -1,6 +1,6 @@
-declare type TableWrapperProps = {
+type TableWrapperProps = {
     height?: string;
 };
-export declare const tableWrapperStyles: ({ height }: TableWrapperProps) => import("@emotion/react").SerializedStyles;
-export declare const tableStyles: import("@emotion/react").SerializedStyles;
+export declare const tableWrapperStyles: ({ height }: TableWrapperProps) => import("@emotion/utils").SerializedStyles;
+export declare const tableStyles: import("@emotion/utils").SerializedStyles;
 export {};

package/dynamic-table/DynamicTable.types.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-export declare type Header = {
+export type Header = {
     displayName: string | React.ReactElement;
     key: string;
     sortKey?: string;
@@ -7,18 +7,18 @@ export declare type Header = {
     textAlign?: 'center' | 'left' | 'right';
     width?: string;
 };
-export declare type SubRow = {
+export type SubRow = {
     className?: string;
     id?: string;
     [name: string]: any;
 };
-export declare type Row = {
+export type Row = {
     className?: string;
     id?: string;
     subRows?: SubRow[];
     [name: string]: any;
 };
-export declare type DynamicTableProps = {
+export type DynamicTableProps = {
     activeRow?: string;
     descending?: boolean;
     expandable?: boolean;

package/dynamic-table/Head/TableHead.js

@@ -3,7 +3,7 @@ import { ChevronDown } from '@dfds-ui/icons/system';
 import { Checkbox } from '@dfds-ui/react-components';
 import { chevronStyles, tableHeadCellCheckboxStyles, tableHeadCellExpanderStyles, tableHeadCellStyles } from './TableHead.styles';
 import { genericTableRowStyles } from '../Body/TableRow.styles';
-import { jsx as ___EmotionJSX } from "@emotion/react";
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 var TableHead = /*#__PURE__*/React.memo(function (_ref) {
   var expandable = _ref.expandable,
     headerRow = _ref.headerRow,
@@ -36,45 +36,53 @@ var TableHead = /*#__PURE__*/React.memo(function (_ref) {
       setSortDescending(!sortDescending);
     }
   }, [onSort, setSortDescending, setSortByKeyValue, sortDescending]);
-  return ___EmotionJSX("thead", null, ___EmotionJSX("tr", {
-    css: genericTableRowStyles
-  }, expandable && ___EmotionJSX("th", {
-    css: tableHeadCellExpanderStyles({
-      stickyHeader: stickyHeader
+  return _jsx("thead", {
+    children: _jsxs("tr", {
+      css: genericTableRowStyles,
+      children: [expandable && _jsx("th", {
+        css: tableHeadCellExpanderStyles({
+          stickyHeader: stickyHeader
+        })
+      }), selectableRows && _jsx("th", {
+        css: tableHeadCellCheckboxStyles({
+          stickyHeader: stickyHeader
+        }),
+        children: _jsx(Checkbox, {
+          checked: selectedRows.length > 0,
+          indeterminate: true,
+          name: "all",
+          onChange: toggleAll,
+          size: "small"
+        })
+      }), headerRow.map(function (headerCell, i) {
+        var sortKey = headerCell.sortKey || headerCell.key;
+        var clickHandler = function clickHandler() {
+          return headerCell.sortable && sort(sortByKeyValue, sortKey);
+        };
+        var showChevron = String(sortByKeyValue === sortKey);
+        return _jsx("th", {
+          align: headerCell.textAlign,
+          css: tableHeadCellStyles({
+            align: headerCell.textAlign,
+            customWidth: headerCell.width,
+            sortByKey: onSort,
+            sortable: headerCell.sortable,
+            stickyHeader: stickyHeader
+          }),
+          onClick: clickHandler,
+          children: _jsxs("div", {
+            children: [_jsx("span", {
+              children: headerCell.displayName
+            }), headerCell.sortable && onSort && _jsx(ChevronDown, {
+              css: chevronStyles({
+                descending: String(sortDescending),
+                show: showChevron
+              })
+            })]
+          })
+        }, i);
+      })]
     })
-  }), selectableRows && ___EmotionJSX("th", {
-    css: tableHeadCellCheckboxStyles({
-      stickyHeader: stickyHeader
-    })
-  }, ___EmotionJSX(Checkbox, {
-    checked: selectedRows.length > 0,
-    indeterminate: true,
-    name: "all",
-    onChange: toggleAll,
-    size: "small"
-  })), headerRow.map(function (headerCell, i) {
-    var sortKey = headerCell.sortKey || headerCell.key;
-    var clickHandler = function clickHandler() {
-      return headerCell.sortable && sort(sortByKeyValue, sortKey);
-    };
-    var showChevron = String(sortByKeyValue === sortKey);
-    return ___EmotionJSX("th", {
-      align: headerCell.textAlign,
-      css: tableHeadCellStyles({
-        align: headerCell.textAlign,
-        customWidth: headerCell.width,
-        sortByKey: onSort,
-        sortable: headerCell.sortable,
-        stickyHeader: stickyHeader
-      }),
-      key: i,
-      onClick: clickHandler
-    }, ___EmotionJSX("div", null, ___EmotionJSX("span", null, headerCell.displayName), headerCell.sortable && onSort && ___EmotionJSX(ChevronDown, {
-      css: chevronStyles({
-        descending: String(sortDescending),
-        show: showChevron
-      })
-    })));
-  })));
+  });
 });
 export default TableHead;

package/dynamic-table/Head/TableHead.styles.d.ts

@@ -1,5 +1,5 @@
 import { ChevronProps, TableHeadCellCExpanderProps, TableHeadCellCheckboxProps, TableHeadCellProps } from './TableHead.types';
-export declare const tableHeadCellStyles: ({ align, customWidth, sortable, sortByKey, stickyHeader, }: TableHeadCellProps) => import("@emotion/react").SerializedStyles;
-export declare const tableHeadCellExpanderStyles: ({ stickyHeader }: TableHeadCellCExpanderProps) => import("@emotion/react").SerializedStyles;
-export declare const tableHeadCellCheckboxStyles: ({ stickyHeader }: TableHeadCellCheckboxProps) => import("@emotion/react").SerializedStyles;
-export declare const chevronStyles: ({ descending, show }: ChevronProps) => import("@emotion/react").SerializedStyles;
+export declare const tableHeadCellStyles: ({ align, customWidth, sortable, sortByKey, stickyHeader, }: TableHeadCellProps) => import("@emotion/utils").SerializedStyles;
+export declare const tableHeadCellExpanderStyles: ({ stickyHeader }: TableHeadCellCExpanderProps) => import("@emotion/utils").SerializedStyles;
+export declare const tableHeadCellCheckboxStyles: ({ stickyHeader }: TableHeadCellCheckboxProps) => import("@emotion/utils").SerializedStyles;
+export declare const chevronStyles: ({ descending, show }: ChevronProps) => import("@emotion/utils").SerializedStyles;

package/dynamic-table/Head/TableHead.types.d.ts

@@ -1,5 +1,5 @@
 import { Header, Row } from '../DynamicTable.types';
-export declare type TableHeadProps = {
+export type TableHeadProps = {
     expandable?: boolean;
     headerRow: Header[];
     onSelectRow?: (list: string[]) => void;
@@ -13,7 +13,7 @@ export declare type TableHeadProps = {
     sortByKeyValue: string;
     stickyHeader?: boolean;
 };
-export declare type GenericTableHeadCellProps = {
+export type GenericTableHeadCellProps = {
     sortable?: boolean;
     sortByKey?: (value: string, sortDescending: boolean) => void;
     stickyHeader?: boolean;
@@ -24,13 +24,13 @@ export interface TableHeadCellProps extends GenericTableHeadCellProps {
     sortByKey?: (value: string, sortDescending: boolean) => void;
     stickyHeader?: boolean;
 }
-export declare type TableHeadCellCExpanderProps = {
+export type TableHeadCellCExpanderProps = {
     stickyHeader?: boolean;
 };
-export declare type TableHeadCellCheckboxProps = {
+export type TableHeadCellCheckboxProps = {
     stickyHeader?: boolean;
 };
-export declare type ChevronProps = {
+export type ChevronProps = {
     descending: string;
     show: string;
 };

package/dynamic-table/Skeleton/SkeletonTable.styles.d.ts

@@ -1 +1 @@
-export declare const fadeStyles: import("@emotion/react").SerializedStyles;
+export declare const fadeStyles: import("@emotion/utils").SerializedStyles;

package/dynamic-table/Skeleton/helpers/createSkeletonRows.js

@@ -3,12 +3,12 @@ function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread n
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
 function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
 function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
-function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) { n[e] = r[e]; } return n; }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 import React from 'react';
 import { Skeleton } from '@dfds-ui/react-components';
 import { css } from '@emotion/react';
-import { jsx as ___EmotionJSX } from "@emotion/react";
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 var _ref = process.env.NODE_ENV === "production" ? {
   name: "1m8u2wf",
   styles: "height:12px;width:100%;text-align:left"
@@ -20,8 +20,8 @@ var _ref = process.env.NODE_ENV === "production" ? {
 var createSkeletonRows = function createSkeletonRows(headerRow) {
   return _toConsumableArray(Array(7)).map(function (_, index) {
     var row = {};
-    headerRow === null || headerRow === void 0 ? void 0 : headerRow.forEach(function (cell) {
-      row[cell.key] = ___EmotionJSX(Skeleton, {
+    headerRow === null || headerRow === void 0 || headerRow.forEach(function (cell) {
+      row[cell.key] = _jsx(Skeleton, {
         css: _ref,
         variant: "text"
       });