@hitachivantara/uikit-react-core 5.16.0 → 5.18.0

package/dist/esm/components/Table/TableCell/TableCell.styles.js

@@ -1,12 +1,17 @@
 import { theme } from "@hitachivantara/uikit-styles";
-import tableCellClasses from "./tableCellClasses.js";
-const styles = {
+import { createClasses } from "../../../utils/classes.js";
+const {
+  staticClasses,
+  useClasses
+} = createClasses("HvTableCell", {
+  /** Styles applied to the component root class. */
   root: {
     verticalAlign: "inherit",
     textAlign: "left",
     padding: `${theme.table.cellPaddingTop} ${theme.space.xs} ${theme.table.cellPaddingBottom} ${theme.spacing(4)}`,
     borderBottom: `1px solid ${theme.colors.atmo4}`
   },
+  /** Styles applied to the cell when it's in the table head. */
   head: {
     height: 52,
     verticalAlign: "top",
@@ -15,6 +20,7 @@ const styles = {
     borderBottom: `1px solid ${theme.colors.atmo4}`,
     ...theme.typography.label
   },
+  /** Styles applied to the cell when it's in the table body. */
   body: {
     minHeight: 32,
     "td&": {
@@ -24,24 +30,32 @@ const styles = {
     ...theme.typography.body,
     fontFamily: theme.fontFamily.body
   },
+  /** Styles applied to the cell when it's in the table footer. */
   footer: {},
+  /** Styles applied to the cell when it's part of a sorted column. */
   sorted: {},
+  /** Styles applied to the component root when it is left aligned */
   alignLeft: {
     textAlign: "left"
   },
+  /** Styles applied to the component root when it is center aligned */
   alignCenter: {
     textAlign: "center"
   },
+  /** Styles applied to the component root when it is right aligned */
   alignRight: {
     textAlign: "right",
     flexDirection: "row-reverse"
   },
+  /** Styles applied to the component root when it is justified */
   alignJustify: {
     textAlign: "justify"
   },
+  /** Styles applied to the component root when its variant is none */
   variantNone: {
     padding: 0
   },
+  /** Styles applied to the component root when its variant is checkbox */
   variantCheckbox: {
     boxSizing: "content-box",
     padding: 0,
@@ -49,6 +63,7 @@ const styles = {
     maxWidth: 32,
     borderRight: theme.table.cellBorder
   },
+  /** Styles applied to the component root when its variant is actions */
   variantActions: {
     boxSizing: "content-box",
     padding: 0,
@@ -56,11 +71,13 @@ const styles = {
     maxWidth: 32,
     borderLeft: theme.table.cellBorder
   },
+  /** Styles applied to the component root when its variant is expand */
   variantExpand: {
     paddingLeft: 0,
     paddingTop: 0,
     paddingBottom: 0
   },
+  /** Styles applied to the component root when its variant is list */
   variantList: {
     minHeight: 52,
     "td&": {
@@ -69,12 +86,14 @@ const styles = {
     padding: "0, 0, 0, 32px",
     border: 0
   },
+  /** Styles applied to the cell when its variant is list and the type is head. */
   variantListHead: {
     backgroundColor: "inherit",
     "td&": {
       height: 16
     }
   },
+  /** Styles applied to the cell when its variant is list and actions. */
   variantListactions: {
     verticalAlign: "middle",
     borderLeft: theme.table.cellListBorder,
@@ -83,6 +102,7 @@ const styles = {
     width: 130,
     maxWidth: 130
   },
+  /** Styles applied to the cell when its variant is list and checkbox. */
   variantListcheckbox: {
     borderRight: theme.table.cellListBorder,
     padding: 0,
@@ -90,26 +110,31 @@ const styles = {
     width: 34,
     maxWidth: 34
   },
+  /** Styles applied to the cell when it's part of a sticky column. */
   stickyColumn: {
     position: "sticky",
     zIndex: 2,
     background: theme.colors.atmo2,
-    [`&.${tableCellClasses.groupColumnMostRight}+.${tableCellClasses.stickyColumn}`]: {
+    "&$groupColumnMostRight+$stickyColumn": {
       borderLeft: 0
     }
   },
+  /** Styles applied to the cell when it's part of the last sticky to the left column. */
   stickyColumnMostLeft: {
     borderRight: theme.table.cellBorder
   },
+  /** Styles applied to the cell when it's part of the first right sticky column. */
   stickyColumnLeastRight: {
     borderLeft: theme.table.cellBorder
   },
+  /** Styles applied to the cell when it's part of the first column in the group. */
   groupColumnMostLeft: {
     borderLeft: theme.table.cellBorder,
     "&:first-of-type": {
       borderLeft: 0
     }
   },
+  /** Styles applied to the cell when it's part of the last column in the group. */
   groupColumnMostRight: {
     borderRight: theme.table.cellBorder,
     // due to the ":has()" selector not being supported in browsers,
@@ -119,18 +144,21 @@ const styles = {
     "&:last-child": {
       borderRight: 0
     },
-    [`&+:not(${tableCellClasses.stickyColumn})`]: {
+    "&+:not($stickyColumn)": {
       borderLeft: 0
     }
   },
+  /** Styles applied to the cell when it's part of a resizable column. */
   resizable: {
     borderRight: theme.table.cellBorder
   },
+  /** Styles applied to the cell when it's part of a resizing column. */
   resizing: {
     borderRight: `solid 2px ${theme.colors.secondary}`
   }
-};
+});
 export {
-  styles
+  staticClasses,
+  useClasses
 };
 //# sourceMappingURL=TableCell.styles.js.map

package/dist/esm/components/Table/TableCell/TableCell.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableCell.styles.js","sources":["../../../../../src/components/Table/TableCell/TableCell.styles.tsx"],"sourcesContent":["import { CSSInterpolation } from \"@emotion/serialize\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { CSSProperties } from \"react\";\nimport tableCellClasses, { HvTableCellClasses } from \"./tableCellClasses\";\n\nexport const styles: Partial<\n  Record<keyof HvTableCellClasses, CSSInterpolation>\n> = {\n  root: {\n    verticalAlign: \"inherit\",\n    textAlign: \"left\",\n    padding: `${theme.table.cellPaddingTop} ${theme.space.xs} ${\n      theme.table.cellPaddingBottom\n    } ${theme.spacing(4)}`,\n    borderBottom: `1px solid ${theme.colors.atmo4}`,\n  },\n  head: {\n    height: 52,\n    verticalAlign: \"top\",\n\n    backgroundColor: theme.colors.atmo1,\n    borderTop: `1px solid ${theme.table.headerBorderTopColor}`,\n    borderBottom: `1px solid ${theme.colors.atmo4}`,\n    ...(theme.typography.label as CSSProperties),\n  },\n  body: {\n    minHeight: 32,\n    \"td&\": {\n      height: 32,\n    },\n    backgroundColor: \"inherit\",\n    ...(theme.typography.body as CSSProperties),\n    fontFamily: theme.fontFamily.body,\n  },\n  footer: {},\n\n  sorted: {},\n\n  alignLeft: {\n    textAlign: \"left\",\n  },\n  alignCenter: {\n    textAlign: \"center\",\n  },\n  alignRight: {\n    textAlign: \"right\",\n    flexDirection: \"row-reverse\",\n  },\n  alignJustify: {\n    textAlign: \"justify\",\n  },\n\n  variantNone: {\n    padding: 0,\n  },\n  variantCheckbox: {\n    boxSizing: \"content-box\",\n    padding: 0,\n    width: 32,\n    maxWidth: 32,\n    borderRight: theme.table.cellBorder,\n  },\n  variantActions: {\n    boxSizing: \"content-box\",\n    padding: 0,\n    width: 32,\n    maxWidth: 32,\n    borderLeft: theme.table.cellBorder,\n  },\n  variantExpand: {\n    paddingLeft: 0,\n    paddingTop: 0,\n    paddingBottom: 0,\n  },\n  variantList: {\n    minHeight: 52,\n    \"td&\": {\n      height: 52,\n    },\n    padding: \"0, 0, 0, 32px\",\n    border: 0,\n  },\n  variantListHead: {\n    backgroundColor: \"inherit\",\n    \"td&\": {\n      height: 16,\n    },\n  },\n  variantListactions: {\n    verticalAlign: \"middle\",\n    borderLeft: theme.table.cellListBorder,\n    paddingLeft: \"0\",\n    textAlign: \"center\",\n    width: 130,\n    maxWidth: 130,\n  },\n  variantListcheckbox: {\n    borderRight: theme.table.cellListBorder,\n    padding: 0,\n    textAlign: \"center\",\n    width: 34,\n    maxWidth: 34,\n  },\n  stickyColumn: {\n    position: \"sticky\",\n    zIndex: 2,\n    background: theme.colors.atmo2,\n\n    [`&.${tableCellClasses.groupColumnMostRight}+.${tableCellClasses.stickyColumn}`]:\n      {\n        borderLeft: 0,\n      },\n  },\n  stickyColumnMostLeft: {\n    borderRight: theme.table.cellBorder,\n  },\n  stickyColumnLeastRight: {\n    borderLeft: theme.table.cellBorder,\n  },\n\n  groupColumnMostLeft: {\n    borderLeft: theme.table.cellBorder,\n\n    \"&:first-of-type\": {\n      borderLeft: 0,\n    },\n  },\n  groupColumnMostRight: {\n    borderRight: theme.table.cellBorder,\n\n    // due to the \":has()\" selector not being supported in browsers,\n    // this need to be managed with inline styles\n    // To be uncommented when not needed (see comment in src/Table/hooks/useSticky.js)\n    // \"&:last-child,&:has(+ $stickyColumnLeastRight)\": {\n    \"&:last-child\": {\n      borderRight: 0,\n    },\n\n    [`&+:not(${tableCellClasses.stickyColumn})`]: {\n      borderLeft: 0,\n    },\n  },\n\n  resizable: {\n    borderRight: theme.table.cellBorder,\n  },\n\n  resizing: {\n    borderRight: `solid 2px ${theme.colors.secondary}`,\n  },\n};\n"],"names":["styles","root","verticalAlign","textAlign","padding","theme","table","cellPaddingTop","space","xs","cellPaddingBottom","spacing","borderBottom","colors","atmo4","head","height","backgroundColor","atmo1","borderTop","headerBorderTopColor","typography","label","body","minHeight","fontFamily","footer","sorted","alignLeft","alignCenter","alignRight","flexDirection","alignJustify","variantNone","variantCheckbox","boxSizing","width","maxWidth","borderRight","cellBorder","variantActions","borderLeft","variantExpand","paddingLeft","paddingTop","paddingBottom","variantList","border","variantListHead","variantListactions","cellListBorder","variantListcheckbox","stickyColumn","position","zIndex","background","atmo2","tableCellClasses","groupColumnMostRight","stickyColumnMostLeft","stickyColumnLeastRight","groupColumnMostLeft","resizable","resizing","secondary"],"mappings":"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"}
+{"version":3,"file":"TableCell.styles.js","sources":["../../../../../src/components/Table/TableCell/TableCell.styles.tsx"],"sourcesContent":["import { createClasses } from \"@core/utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { CSSProperties } from \"react\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvTableCell\", {\n  /** Styles applied to the component root class. */\n  root: {\n    verticalAlign: \"inherit\",\n    textAlign: \"left\",\n    padding: `${theme.table.cellPaddingTop} ${theme.space.xs} ${\n      theme.table.cellPaddingBottom\n    } ${theme.spacing(4)}`,\n    borderBottom: `1px solid ${theme.colors.atmo4}`,\n  },\n  /** Styles applied to the cell when it's in the table head. */\n  head: {\n    height: 52,\n    verticalAlign: \"top\",\n\n    backgroundColor: theme.colors.atmo1,\n    borderTop: `1px solid ${theme.table.headerBorderTopColor}`,\n    borderBottom: `1px solid ${theme.colors.atmo4}`,\n    ...(theme.typography.label as CSSProperties),\n  },\n  /** Styles applied to the cell when it's in the table body. */\n  body: {\n    minHeight: 32,\n    \"td&\": {\n      height: 32,\n    },\n    backgroundColor: \"inherit\",\n    ...(theme.typography.body as CSSProperties),\n    fontFamily: theme.fontFamily.body,\n  },\n  /** Styles applied to the cell when it's in the table footer. */\n  footer: {},\n  /** Styles applied to the cell when it's part of a sorted column. */\n  sorted: {},\n  /** Styles applied to the component root when it is left aligned */\n  alignLeft: {\n    textAlign: \"left\",\n  },\n  /** Styles applied to the component root when it is center aligned */\n  alignCenter: {\n    textAlign: \"center\",\n  },\n  /** Styles applied to the component root when it is right aligned */\n  alignRight: {\n    textAlign: \"right\",\n    flexDirection: \"row-reverse\",\n  },\n  /** Styles applied to the component root when it is justified */\n  alignJustify: {\n    textAlign: \"justify\",\n  },\n\n  /** Styles applied to the component root when its variant is none */\n  variantNone: {\n    padding: 0,\n  },\n  /** Styles applied to the component root when its variant is checkbox */\n  variantCheckbox: {\n    boxSizing: \"content-box\",\n    padding: 0,\n    width: 32,\n    maxWidth: 32,\n    borderRight: theme.table.cellBorder,\n  },\n  /** Styles applied to the component root when its variant is actions */\n  variantActions: {\n    boxSizing: \"content-box\",\n    padding: 0,\n    width: 32,\n    maxWidth: 32,\n    borderLeft: theme.table.cellBorder,\n  },\n  /** Styles applied to the component root when its variant is expand */\n  variantExpand: {\n    paddingLeft: 0,\n    paddingTop: 0,\n    paddingBottom: 0,\n  },\n  /** Styles applied to the component root when its variant is list */\n  variantList: {\n    minHeight: 52,\n    \"td&\": {\n      height: 52,\n    },\n    padding: \"0, 0, 0, 32px\",\n    border: 0,\n  },\n  /** Styles applied to the cell when its variant is list and the type is head. */\n  variantListHead: {\n    backgroundColor: \"inherit\",\n    \"td&\": {\n      height: 16,\n    },\n  },\n  /** Styles applied to the cell when its variant is list and actions. */\n  variantListactions: {\n    verticalAlign: \"middle\",\n    borderLeft: theme.table.cellListBorder,\n    paddingLeft: \"0\",\n    textAlign: \"center\",\n    width: 130,\n    maxWidth: 130,\n  },\n  /** Styles applied to the cell when its variant is list and checkbox. */\n  variantListcheckbox: {\n    borderRight: theme.table.cellListBorder,\n    padding: 0,\n    textAlign: \"center\",\n    width: 34,\n    maxWidth: 34,\n  },\n  /** Styles applied to the cell when it's part of a sticky column. */\n  stickyColumn: {\n    position: \"sticky\",\n    zIndex: 2,\n    background: theme.colors.atmo2,\n\n    \"&$groupColumnMostRight+$stickyColumn\": {\n      borderLeft: 0,\n    },\n  },\n  /** Styles applied to the cell when it's part of the last sticky to the left column. */\n  stickyColumnMostLeft: {\n    borderRight: theme.table.cellBorder,\n  },\n  /** Styles applied to the cell when it's part of the first right sticky column. */\n  stickyColumnLeastRight: {\n    borderLeft: theme.table.cellBorder,\n  },\n\n  /** Styles applied to the cell when it's part of the first column in the group. */\n  groupColumnMostLeft: {\n    borderLeft: theme.table.cellBorder,\n\n    \"&:first-of-type\": {\n      borderLeft: 0,\n    },\n  },\n  /** Styles applied to the cell when it's part of the last column in the group. */\n  groupColumnMostRight: {\n    borderRight: theme.table.cellBorder,\n\n    // due to the \":has()\" selector not being supported in browsers,\n    // this need to be managed with inline styles\n    // To be uncommented when not needed (see comment in src/Table/hooks/useSticky.js)\n    // \"&:last-child,&:has(+ $stickyColumnLeastRight)\": {\n    \"&:last-child\": {\n      borderRight: 0,\n    },\n\n    \"&+:not($stickyColumn)\": {\n      borderLeft: 0,\n    },\n  },\n\n  /** Styles applied to the cell when it's part of a resizable column. */\n  resizable: {\n    borderRight: theme.table.cellBorder,\n  },\n  /** Styles applied to the cell when it's part of a resizing column. */\n  resizing: {\n    borderRight: `solid 2px ${theme.colors.secondary}`,\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","verticalAlign","textAlign","padding","theme","table","cellPaddingTop","space","xs","cellPaddingBottom","spacing","borderBottom","colors","atmo4","head","height","backgroundColor","atmo1","borderTop","headerBorderTopColor","typography","label","body","minHeight","fontFamily","footer","sorted","alignLeft","alignCenter","alignRight","flexDirection","alignJustify","variantNone","variantCheckbox","boxSizing","width","maxWidth","borderRight","cellBorder","variantActions","borderLeft","variantExpand","paddingLeft","paddingTop","paddingBottom","variantList","border","variantListHead","variantListactions","cellListBorder","variantListcheckbox","stickyColumn","position","zIndex","background","atmo2","stickyColumnMostLeft","stickyColumnLeastRight","groupColumnMostLeft","groupColumnMostRight","resizable","resizing","secondary"],"mappings":"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"}

package/dist/esm/components/Table/TableRow/TableRow.js

@@ -1,12 +1,11 @@
 import _styled from "@emotion/styled/base";
 import { forwardRef, useContext, useState, useMemo, useEffect } from "react";
-import { ClassNames } from "@emotion/react";
 import { theme } from "@hitachivantara/uikit-styles";
 import { transientOptions } from "../../../utils/transientOptions.js";
-import tableRowClasses from "./tableRowClasses.js";
 import TableContext from "../TableContext.js";
 import TableSectionContext from "../TableSectionContext.js";
-import { styles } from "./TableRow.styles.js";
+import { useClasses } from "./TableRow.styles.js";
+import { staticClasses } from "./TableRow.styles.js";
 import { jsx } from "@emotion/react/jsx-runtime";
 import checkValidHexColorValue from "../../../utils/checkValidHexColorValue.js";
 import fade from "../../../utils/hexToRgbA.js";
@@ -51,18 +50,23 @@ const StyledTableRow = (c) => /* @__PURE__ */ _styled(c, process.env.NODE_ENV ==
       }
     }
   }
-}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvVGFibGUvVGFibGVSb3cvVGFibGVSb3cudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWtDRSIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay9odi11aWtpdC1yZWFjdC9odi11aWtpdC1yZWFjdC9wYWNrYWdlcy9jb3JlL3NyYy9jb21wb25lbnRzL1RhYmxlL1RhYmxlUm93L1RhYmxlUm93LnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGZvcndhcmRSZWYsIHVzZUNvbnRleHQsIHVzZUVmZmVjdCwgdXNlTWVtbywgdXNlU3RhdGUgfSBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCB7IENsYXNzTmFtZXMgfSBmcm9tIFwiQGVtb3Rpb24vcmVhY3RcIjtcbmltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuaW1wb3J0IHsgdGhlbWUgfSBmcm9tIFwiQGhpdGFjaGl2YW50YXJhL3Vpa2l0LXN0eWxlc1wiO1xuaW1wb3J0IHsgY2hlY2tWYWxpZEhleENvbG9yVmFsdWUsIGdldFZhclZhbHVlLCBoZXhUb1JnYkEgfSBmcm9tIFwiQGNvcmUvdXRpbHNcIjtcbmltcG9ydCB7IHRyYW5zaWVudE9wdGlvbnMgfSBmcm9tIFwiQGNvcmUvdXRpbHMvdHJhbnNpZW50T3B0aW9uc1wiO1xuaW1wb3J0IHsgSHZCYXNlUHJvcHMgfSBmcm9tIFwiQGNvcmUvdHlwZXNcIjtcbmltcG9ydCB7IHVzZVRoZW1lIH0gZnJvbSBcIkBjb3JlL2hvb2tzXCI7XG5pbXBvcnQgdGFibGVSb3dDbGFzc2VzLCB7IEh2VGFibGVSb3dDbGFzc2VzIH0gZnJvbSBcIi4vdGFibGVSb3dDbGFzc2VzXCI7XG5pbXBvcnQgVGFibGVDb250ZXh0IGZyb20gXCIuLi9UYWJsZUNvbnRleHRcIjtcbmltcG9ydCBUYWJsZVNlY3Rpb25Db250ZXh0IGZyb20gXCIuLi9UYWJsZVNlY3Rpb25Db250ZXh0XCI7XG5pbXBvcnQgeyBzdHlsZXMgfSBmcm9tIFwiLi9UYWJsZVJvdy5zdHlsZXNcIjtcblxuZXhwb3J0IGludGVyZmFjZSBIdlRhYmxlUm93UHJvcHNcbiAgZXh0ZW5kcyBIdkJhc2VQcm9wczxIVE1MVGFibGVSb3dFbGVtZW50LCBcImNoaWxkcmVuXCI+IHtcbiAgLyoqIENvbnRlbnQgdG8gYmUgcmVuZGVyZWQgKi9cbiAgY2hpbGRyZW46IFJlYWN0LlJlYWN0Tm9kZTtcbiAgLyoqIFRoZSBjb21wb25lbnQgdXNlZCBmb3IgdGhlIHJvb3Qgbm9kZS4gRWl0aGVyIGEgc3RyaW5nIHRvIHVzZSBhIEhUTUwgZWxlbWVudCBvciBhIGNvbXBvbmVudC4gRGVmYXVsdHMgdG8gdGJvZHkuICovXG4gIGNvbXBvbmVudD86IFJlYWN0LkVsZW1lbnRUeXBlO1xuICAvKiogV2hldGhlciB0aGUgdGFibGUgcm93IHdpbGwgc2hhZGUgb24gaG92ZXIuICovXG4gIGhvdmVyPzogYm9vbGVhbjtcbiAgLyoqIFdoZXRoZXIgdGhlIHRhYmxlIHJvdyB3aWxsIGhhdmUgdGhlIHNlbGVjdGVkIHNoYWRpbmcuICovXG4gIHNlbGVjdGVkPzogYm9vbGVhbjtcbiAgLyoqIFdoZXRoZXIgdGhlIHRhYmxlIHJvdyBpcyBleHBhbmRlZC4gKi9cbiAgZXhwYW5kZWQ/OiBib29sZWFuO1xuICAvKiogV2hldGhlciB0aGUgdGFibGUgcm93IGJhY2tncm91bmQgaXMgc3RyaXBlZC4gKi9cbiAgc3RyaXBlZD86IGJvb2xlYW47XG4gIC8qKiBBIEpzcyBPYmplY3QgdXNlZCB0byBvdmVycmlkZSBvciBleHRlbmQgdGhlIHN0eWxlcyBhcHBsaWVkIHRvIHRoZSBjb21wb25lbnQuICovXG4gIGNsYXNzZXM/OiBIdlRhYmxlUm93Q2xhc3Nlcztcbn1cblxuY29uc3QgZGVmYXVsdENvbXBvbmVudCA9IFwidHJcIjtcblxuY29uc3QgU3R5bGVkVGFibGVSb3cgPSAoYzogYW55KSA9PlxuICBzdHlsZWQoXG4gICAgYyxcbiAgICB0cmFuc2llbnRPcHRpb25zXG4gICkoXG4gICAgKHtcbiAgICAgICRzdHJpcGVkLFxuICAgICAgJHN0cmlwZWRDb2xvckV2ZW4sXG4gICAgICAkc3RyaXBlZENvbG9yT2RkLFxuICAgIH06IHtcbiAgICAgICRzdHJpcGVkOiBib29sZWFuO1xuICAgICAgJHN0cmlwZWRDb2xvckV2ZW46IHN0cmluZztcbiAgICAgICRzdHJpcGVkQ29sb3JPZGQ6IHN0cmluZztcbiAgICB9KSA9PiAoe1xuICAgICAgLi4uKCRzdHJpcGVkICYmIHtcbiAgICAgICAgXCImOm50aC1vZi10eXBlKGV2ZW4pXCI6IHtcbiAgICAgICAgICBiYWNrZ3JvdW5kQ29sb3I6ICRzdHJpcGVkQ29sb3JFdmVuLFxuICAgICAgICAgIFwiJjpob3ZlclwiOiB7XG4gICAgICAgICAgICBiYWNrZ3JvdW5kQ29sb3I6IHRoZW1lLnRhYmxlLnJvd0hvdmVyQ29sb3IsXG4gICAgICAgICAgfSxcbiAgICAgICAgfSxcbiAgICAgICAgXCImOm50aC1vZi10eXBlKG9kZClcIjoge1xuICAgICAgICAgIGJhY2tncm91bmRDb2xvcjogJHN0cmlwZWRDb2xvck9kZCxcbiAgICAgICAgICBcIiY6aG92ZXJcIjoge1xuICAgICAgICAgICAgYmFja2dyb3VuZENvbG9yOiB0aGVtZS50YWJsZS5yb3dIb3ZlckNvbG9yLFxuICAgICAgICAgIH0sXG4gICAgICAgIH0sXG4gICAgICB9KSxcbiAgICB9KVxuICApO1xuXG4vKipcbiAqIGBIdlRhYmxlUm93YCBhY3RzIGFzIGEgYHRyYCBlbGVtZW50IGFuZCBpbmhlcml0cyBzdHlsZXMgZnJvbSBpdHMgY29udGV4dFxuICovXG5leHBvcnQgY29uc3QgSHZUYWJsZVJvdyA9IGZvcndhcmRSZWY8SFRNTEVsZW1lbnQsIEh2VGFibGVSb3dQcm9wcz4oXG4gIChcbiAgICB7XG4gICAgICBjbGFzc2VzLFxuICAgICAgY2xhc3NOYW1lLFxuICAgICAgY29tcG9uZW50LFxuICAgICAgaG92ZXIgPSBmYWxzZSxcbiAgICAgIHNlbGVjdGVkID0gZmFsc2UsXG4gICAgICBleHBhbmRlZCA9IGZhbHNlLFxuICAgICAgc3RyaXBlZCA9IGZhbHNlLFxuICAgICAgLi4ub3RoZXJzXG4gICAgfSxcbiAgICBleHRlcm5hbFJlZlxuICApID0+IHtcbiAgICBjb25zdCB7IGFjdGl2ZVRoZW1lLCBzZWxlY3RlZE1vZGUgfSA9IHVzZVRoZW1lKCk7XG4gICAgY29uc3QgdGFibGVDb250ZXh0ID0gdXNlQ29udGV4dChUYWJsZUNvbnRleHQpO1xuICAgIGNvbnN0IHRhYmxlU2VjdGlvbkNvbnRleHQgPSB1c2VDb250ZXh0KFRhYmxlU2VjdGlvbkNvbnRleHQpO1xuXG4gICAgY29uc3QgW2V2ZW4sIHNldEV2ZW5dID0gdXNlU3RhdGU8c3RyaW5nIHwgdW5kZWZpbmVkPigpO1xuICAgIGNvbnN0IFtvZGQsIHNldE9kZF0gPSB1c2VTdGF0ZTxzdHJpbmcgfCB1bmRlZmluZWQ+KCk7XG5cbiAgICBjb25zdCB0eXBlID0gdGFibGVTZWN0aW9uQ29udGV4dD8udHlwZSB8fCBcImJvZHlcIjtcblxuICAgIGNvbnN0IGlzTGlzdCA9IHRhYmxlQ29udGV4dC52YXJpYW50ID09PSBcImxpc3Ryb3dcIjtcblxuICAgIGNvbnN0IENvbXBvbmVudCA9XG4gICAgICBjb21wb25lbnQgfHwgdGFibGVDb250ZXh0Py5jb21wb25lbnRzPy5UciB8fCBkZWZhdWx0Q29tcG9uZW50O1xuXG4gICAgY29uc3QgVGFibGVSb3cgPSB1c2VNZW1vKCgpID0+IFN0eWxlZFRhYmxlUm93KENvbXBvbmVudCksIFtDb21wb25lbnRdKTtcblxuICAgIGxldCBzdHJpcGVkQ29sb3JFdmVuID0gY2hlY2tWYWxpZEhleENvbG9yVmFsdWUoZXZlbilcbiAgICAgID8gaGV4VG9SZ2JBKGV2ZW4sIDAuNilcbiAgICAgIDogZXZlbjtcblxuICAgIGxldCBzdHJpcGVkQ29sb3JPZGQgPSBjaGVja1ZhbGlkSGV4Q29sb3JWYWx1ZShvZGQpXG4gICAgICA/IGhleFRvUmdiQShvZGQsIDAuNilcbiAgICAgIDogb2RkO1xuXG4gICAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICAgIHNldEV2ZW4oZ2V0VmFyVmFsdWUodGhlbWUudGFibGUucm93U3RyaXBlZEJhY2tncm91bmRDb2xvckV2ZW4pKTtcbiAgICAgIHNldE9kZChnZXRWYXJWYWx1ZSh0aGVtZS50YWJsZS5yb3dTdHJpcGVkQmFja2dyb3VuZENvbG9yT2RkKSk7XG4gICAgICBzdHJpcGVkQ29sb3JFdmVuID0gY2hlY2tWYWxpZEhleENvbG9yVmFsdWUoZXZlbilcbiAgICAgICAgPyBoZXhUb1JnYkEoZXZlbiwgMC42KVxuICAgICAgICA6IGV2ZW47XG4gICAgICBzdHJpcGVkQ29sb3JPZGQgPSBjaGVja1ZhbGlkSGV4Q29sb3JWYWx1ZShvZGQpXG4gICAgICAgID8gaGV4VG9SZ2JBKG9kZCwgMC42KVxuICAgICAgICA6IG9kZDtcbiAgICB9LCBbYWN0aXZlVGhlbWU/LmNvbG9ycz8ubW9kZXNbc2VsZWN0ZWRNb2RlXSwgZXZlbiwgb2RkXSk7XG5cbiAgICByZXR1cm4gKFxuICAgICAgPENsYXNzTmFtZXM+XG4gICAgICAgIHsoeyBjc3MsIGN4IH0pID0+IChcbiAgICAgICAgICA8VGFibGVSb3dcbiAgICAgICAgICAgIHJlZj17ZXh0ZXJuYWxSZWZ9XG4gICAgICAgICAgICBjbGFzc05hbWU9e2N4KFxuICAgICAgICAgICAgICB0YWJsZVNlY3Rpb25Db250ZXh0LmZpbHRlckNsYXNzTmFtZSxcbiAgICAgICAgICAgICAgdGFibGVSb3dDbGFzc2VzLnJvb3QsXG4gICAgICAgICAgICAgIGNsYXNzTmFtZSxcbiAgICAgICAgICAgICAgY2xhc3Nlcz8ucm9vdCxcbiAgICAgICAgICAgICAgY3NzKHN0eWxlcy5yb290KSxcbiAgICAgICAgICAgICAgdGFibGVSb3dDbGFzc2VzW3R5cGVdLFxuICAgICAgICAgICAgICBjbGFzc2VzPy5bdHlwZV0sXG4gICAgICAgICAgICAgIGNzcyhzdHlsZXNbdHlwZV0pLFxuICAgICAgICAgICAgICBob3ZlciAmJlxuICAgICAgICAgICAgICAgICh0YWJsZVJvd0NsYXNzZXMuaG92ZXIsIGNsYXNzZXM/LmhvdmVyLCBjc3Moc3R5bGVzLmhvdmVyKSksXG4gICAgICAgICAgICAgIHNlbGVjdGVkICYmXG4gICAgICAgICAgICAgICAgY3goXG4gICAgICAgICAgICAgICAgICB0YWJsZVJvd0NsYXNzZXMuc2VsZWN0ZWQsXG4gICAgICAgICAgICAgICAgICBjbGFzc2VzPy5zZWxlY3RlZCxcbiAgICAgICAgICAgICAgICAgIGNzcyhzdHlsZXMuc2VsZWN0ZWQpXG4gICAgICAgICAgICAgICAgKSxcbiAgICAgICAgICAgICAgZXhwYW5kZWQgJiZcbiAgICAgICAgICAgICAgICBjeChcbiAgICAgICAgICAgICAgICAgIHRhYmxlUm93Q2xhc3Nlcy5leHBhbmRlZCxcbiAgICAgICAgICAgICAgICAgIGNsYXNzZXM/LmV4cGFuZGVkLFxuICAgICAgICAgICAgICAgICAgY3NzKHN0eWxlcy5leHBhbmRlZClcbiAgICAgICAgICAgICAgICApLFxuICAgICAgICAgICAgICBzdHJpcGVkICYmXG4gICAgICAgICAgICAgICAgY3goXG4gICAgICAgICAgICAgICAgICB0YWJsZVJvd0NsYXNzZXMuc3RyaXBlZCxcbiAgICAgICAgICAgICAgICAgIGNsYXNzZXM/LnN0cmlwZWQsXG4gICAgICAgICAgICAgICAgICBjc3Moc3R5bGVzLnN0cmlwZWQpXG4gICAgICAgICAgICAgICAgKSxcbiAgICAgICAgICAgICAgaXNMaXN0ICYmXG4gICAgICAgICAgICAgICAgdHlwZSA9PT0gXCJib2R5XCIgJiZcbiAgICAgICAgICAgICAgICBjeChcbiAgICAgICAgICAgICAgICAgIHRhYmxlUm93Q2xhc3Nlcy52YXJpYW50TGlzdCxcbiAgICAgICAgICAgICAgICAgIGNsYXNzZXM/LnZhcmlhbnRMaXN0LFxuICAgICAgICAgICAgICAgICAgY3NzKHN0eWxlcy52YXJpYW50TGlzdClcbiAgICAgICAgICAgICAgICApLFxuICAgICAgICAgICAgICBpc0xpc3QgJiZcbiAgICAgICAgICAgICAgICB0eXBlID09PSBcImhlYWRcIiAmJlxuICAgICAgICAgICAgICAgIGN4KFxuICAgICAgICAgICAgICAgICAgdGFibGVSb3dDbGFzc2VzLnZhcmlhbnRMaXN0SGVhZCxcbiAgICAgICAgICAgICAgICAgIGNsYXNzZXM/LnZhcmlhbnRMaXN0SGVhZCxcbiAgICAgICAgICAgICAgICAgIGNzcyhzdHlsZXMudmFyaWFudExpc3RIZWFkKVxuICAgICAgICAgICAgICAgIClcbiAgICAgICAgICAgICl9XG4gICAgICAgICAgICByb2xlPXtDb21wb25lbnQgPT09IGRlZmF1bHRDb21wb25lbnQgPyBudWxsIDogXCJyb3dcIn1cbiAgICAgICAgICAgICRzdHJpcGVkPXtzdHJpcGVkfVxuICAgICAgICAgICAgJHN0cmlwZWRDb2xvckV2ZW49e3N0cmlwZWRDb2xvckV2ZW59XG4gICAgICAgICAgICAkc3RyaXBlZENvbG9yT2RkPXtzdHJpcGVkQ29sb3JPZGR9XG4gICAgICAgICAgICB7Li4ub3RoZXJzfVxuICAgICAgICAgIC8+XG4gICAgICAgICl9XG4gICAgICA8L0NsYXNzTmFtZXM+XG4gICAgKTtcbiAgfVxuKTtcbiJdfQ== */");
-const HvTableRow = forwardRef(({
-  classes,
-  className,
-  component,
-  hover = false,
-  selected = false,
-  expanded = false,
-  striped = false,
-  ...others
-}, externalRef) => {
+}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvVGFibGUvVGFibGVSb3cvVGFibGVSb3cudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXlDRSIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay9odi11aWtpdC1yZWFjdC9odi11aWtpdC1yZWFjdC9wYWNrYWdlcy9jb3JlL3NyYy9jb21wb25lbnRzL1RhYmxlL1RhYmxlUm93L1RhYmxlUm93LnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGZvcndhcmRSZWYsIHVzZUNvbnRleHQsIHVzZUVmZmVjdCwgdXNlTWVtbywgdXNlU3RhdGUgfSBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuaW1wb3J0IHsgdGhlbWUgfSBmcm9tIFwiQGhpdGFjaGl2YW50YXJhL3Vpa2l0LXN0eWxlc1wiO1xuaW1wb3J0IHtcbiAgRXh0cmFjdE5hbWVzLFxuICBjaGVja1ZhbGlkSGV4Q29sb3JWYWx1ZSxcbiAgZ2V0VmFyVmFsdWUsXG4gIGhleFRvUmdiQSxcbn0gZnJvbSBcIkBjb3JlL3V0aWxzXCI7XG5pbXBvcnQgeyB0cmFuc2llbnRPcHRpb25zIH0gZnJvbSBcIkBjb3JlL3V0aWxzL3RyYW5zaWVudE9wdGlvbnNcIjtcbmltcG9ydCB7IEh2QmFzZVByb3BzIH0gZnJvbSBcIkBjb3JlL3R5cGVzXCI7XG5pbXBvcnQgeyB1c2VUaGVtZSB9IGZyb20gXCJAY29yZS9ob29rc1wiO1xuaW1wb3J0IFRhYmxlQ29udGV4dCBmcm9tIFwiLi4vVGFibGVDb250ZXh0XCI7XG5pbXBvcnQgVGFibGVTZWN0aW9uQ29udGV4dCBmcm9tIFwiLi4vVGFibGVTZWN0aW9uQ29udGV4dFwiO1xuaW1wb3J0IHsgc3RhdGljQ2xhc3NlcywgdXNlQ2xhc3NlcyB9IGZyb20gXCIuL1RhYmxlUm93LnN0eWxlc1wiO1xuXG5leHBvcnQgeyBzdGF0aWNDbGFzc2VzIGFzIHRhYmxlUm93Q2xhc3NlcyB9O1xuXG5leHBvcnQgdHlwZSBIdlRhYmxlUm93Q2xhc3NlcyA9IEV4dHJhY3ROYW1lczx0eXBlb2YgdXNlQ2xhc3Nlcz47XG5cbmV4cG9ydCBpbnRlcmZhY2UgSHZUYWJsZVJvd1Byb3BzXG4gIGV4dGVuZHMgSHZCYXNlUHJvcHM8SFRNTFRhYmxlUm93RWxlbWVudCwgXCJjaGlsZHJlblwiPiB7XG4gIC8qKiBDb250ZW50IHRvIGJlIHJlbmRlcmVkICovXG4gIGNoaWxkcmVuOiBSZWFjdC5SZWFjdE5vZGU7XG4gIC8qKiBUaGUgY29tcG9uZW50IHVzZWQgZm9yIHRoZSByb290IG5vZGUuIEVpdGhlciBhIHN0cmluZyB0byB1c2UgYSBIVE1MIGVsZW1lbnQgb3IgYSBjb21wb25lbnQuIERlZmF1bHRzIHRvIHRib2R5LiAqL1xuICBjb21wb25lbnQ/OiBSZWFjdC5FbGVtZW50VHlwZTtcbiAgLyoqIFdoZXRoZXIgdGhlIHRhYmxlIHJvdyB3aWxsIHNoYWRlIG9uIGhvdmVyLiAqL1xuICBob3Zlcj86IGJvb2xlYW47XG4gIC8qKiBXaGV0aGVyIHRoZSB0YWJsZSByb3cgd2lsbCBoYXZlIHRoZSBzZWxlY3RlZCBzaGFkaW5nLiAqL1xuICBzZWxlY3RlZD86IGJvb2xlYW47XG4gIC8qKiBXaGV0aGVyIHRoZSB0YWJsZSByb3cgaXMgZXhwYW5kZWQuICovXG4gIGV4cGFuZGVkPzogYm9vbGVhbjtcbiAgLyoqIFdoZXRoZXIgdGhlIHRhYmxlIHJvdyBiYWNrZ3JvdW5kIGlzIHN0cmlwZWQuICovXG4gIHN0cmlwZWQ/OiBib29sZWFuO1xuICAvKiogQSBKc3MgT2JqZWN0IHVzZWQgdG8gb3ZlcnJpZGUgb3IgZXh0ZW5kIHRoZSBzdHlsZXMgYXBwbGllZCB0byB0aGUgY29tcG9uZW50LiAqL1xuICBjbGFzc2VzPzogSHZUYWJsZVJvd0NsYXNzZXM7XG59XG5cbmNvbnN0IGRlZmF1bHRDb21wb25lbnQgPSBcInRyXCI7XG5cbmNvbnN0IFN0eWxlZFRhYmxlUm93ID0gKGM6IGFueSkgPT5cbiAgc3R5bGVkKFxuICAgIGMsXG4gICAgdHJhbnNpZW50T3B0aW9uc1xuICApKFxuICAgICh7XG4gICAgICAkc3RyaXBlZCxcbiAgICAgICRzdHJpcGVkQ29sb3JFdmVuLFxuICAgICAgJHN0cmlwZWRDb2xvck9kZCxcbiAgICB9OiB7XG4gICAgICAkc3RyaXBlZDogYm9vbGVhbjtcbiAgICAgICRzdHJpcGVkQ29sb3JFdmVuOiBzdHJpbmc7XG4gICAgICAkc3RyaXBlZENvbG9yT2RkOiBzdHJpbmc7XG4gICAgfSkgPT4gKHtcbiAgICAgIC4uLigkc3RyaXBlZCAmJiB7XG4gICAgICAgIFwiJjpudGgtb2YtdHlwZShldmVuKVwiOiB7XG4gICAgICAgICAgYmFja2dyb3VuZENvbG9yOiAkc3RyaXBlZENvbG9yRXZlbixcbiAgICAgICAgICBcIiY6aG92ZXJcIjoge1xuICAgICAgICAgICAgYmFja2dyb3VuZENvbG9yOiB0aGVtZS50YWJsZS5yb3dIb3ZlckNvbG9yLFxuICAgICAgICAgIH0sXG4gICAgICAgIH0sXG4gICAgICAgIFwiJjpudGgtb2YtdHlwZShvZGQpXCI6IHtcbiAgICAgICAgICBiYWNrZ3JvdW5kQ29sb3I6ICRzdHJpcGVkQ29sb3JPZGQsXG4gICAgICAgICAgXCImOmhvdmVyXCI6IHtcbiAgICAgICAgICAgIGJhY2tncm91bmRDb2xvcjogdGhlbWUudGFibGUucm93SG92ZXJDb2xvcixcbiAgICAgICAgICB9LFxuICAgICAgICB9LFxuICAgICAgfSksXG4gICAgfSlcbiAgKTtcblxuLyoqXG4gKiBgSHZUYWJsZVJvd2AgYWN0cyBhcyBhIGB0cmAgZWxlbWVudCBhbmQgaW5oZXJpdHMgc3R5bGVzIGZyb20gaXRzIGNvbnRleHRcbiAqL1xuZXhwb3J0IGNvbnN0IEh2VGFibGVSb3cgPSBmb3J3YXJkUmVmPEhUTUxFbGVtZW50LCBIdlRhYmxlUm93UHJvcHM+KFxuICAocHJvcHMsIGV4dGVybmFsUmVmKSA9PiB7XG4gICAgY29uc3Qge1xuICAgICAgY2xhc3NlczogY2xhc3Nlc1Byb3AsXG4gICAgICBjbGFzc05hbWUsXG4gICAgICBjb21wb25lbnQsXG4gICAgICBob3ZlciA9IGZhbHNlLFxuICAgICAgc2VsZWN0ZWQgPSBmYWxzZSxcbiAgICAgIGV4cGFuZGVkID0gZmFsc2UsXG4gICAgICBzdHJpcGVkID0gZmFsc2UsXG4gICAgICAuLi5vdGhlcnNcbiAgICB9ID0gcHJvcHM7XG4gICAgY29uc3QgeyBjbGFzc2VzLCBjeCB9ID0gdXNlQ2xhc3NlcyhjbGFzc2VzUHJvcCk7XG4gICAgY29uc3QgeyBhY3RpdmVUaGVtZSwgc2VsZWN0ZWRNb2RlIH0gPSB1c2VUaGVtZSgpO1xuICAgIGNvbnN0IHRhYmxlQ29udGV4dCA9IHVzZUNvbnRleHQoVGFibGVDb250ZXh0KTtcbiAgICBjb25zdCB0YWJsZVNlY3Rpb25Db250ZXh0ID0gdXNlQ29udGV4dChUYWJsZVNlY3Rpb25Db250ZXh0KTtcblxuICAgIGNvbnN0IFtldmVuLCBzZXRFdmVuXSA9IHVzZVN0YXRlPHN0cmluZyB8IHVuZGVmaW5lZD4oKTtcbiAgICBjb25zdCBbb2RkLCBzZXRPZGRdID0gdXNlU3RhdGU8c3RyaW5nIHwgdW5kZWZpbmVkPigpO1xuXG4gICAgY29uc3QgdHlwZSA9IHRhYmxlU2VjdGlvbkNvbnRleHQ/LnR5cGUgfHwgXCJib2R5XCI7XG5cbiAgICBjb25zdCBpc0xpc3QgPSB0YWJsZUNvbnRleHQudmFyaWFudCA9PT0gXCJsaXN0cm93XCI7XG5cbiAgICBjb25zdCBDb21wb25lbnQgPVxuICAgICAgY29tcG9uZW50IHx8IHRhYmxlQ29udGV4dD8uY29tcG9uZW50cz8uVHIgfHwgZGVmYXVsdENvbXBvbmVudDtcblxuICAgIGNvbnN0IFRhYmxlUm93ID0gdXNlTWVtbygoKSA9PiBTdHlsZWRUYWJsZVJvdyhDb21wb25lbnQpLCBbQ29tcG9uZW50XSk7XG5cbiAgICBsZXQgc3RyaXBlZENvbG9yRXZlbiA9IGNoZWNrVmFsaWRIZXhDb2xvclZhbHVlKGV2ZW4pXG4gICAgICA/IGhleFRvUmdiQShldmVuLCAwLjYpXG4gICAgICA6IGV2ZW47XG5cbiAgICBsZXQgc3RyaXBlZENvbG9yT2RkID0gY2hlY2tWYWxpZEhleENvbG9yVmFsdWUob2RkKVxuICAgICAgPyBoZXhUb1JnYkEob2RkLCAwLjYpXG4gICAgICA6IG9kZDtcblxuICAgIHVzZUVmZmVjdCgoKSA9PiB7XG4gICAgICBzZXRFdmVuKGdldFZhclZhbHVlKHRoZW1lLnRhYmxlLnJvd1N0cmlwZWRCYWNrZ3JvdW5kQ29sb3JFdmVuKSk7XG4gICAgICBzZXRPZGQoZ2V0VmFyVmFsdWUodGhlbWUudGFibGUucm93U3RyaXBlZEJhY2tncm91bmRDb2xvck9kZCkpO1xuICAgICAgc3RyaXBlZENvbG9yRXZlbiA9IGNoZWNrVmFsaWRIZXhDb2xvclZhbHVlKGV2ZW4pXG4gICAgICAgID8gaGV4VG9SZ2JBKGV2ZW4sIDAuNilcbiAgICAgICAgOiBldmVuO1xuICAgICAgc3RyaXBlZENvbG9yT2RkID0gY2hlY2tWYWxpZEhleENvbG9yVmFsdWUob2RkKVxuICAgICAgICA/IGhleFRvUmdiQShvZGQsIDAuNilcbiAgICAgICAgOiBvZGQ7XG4gICAgfSwgW2FjdGl2ZVRoZW1lPy5jb2xvcnM/Lm1vZGVzW3NlbGVjdGVkTW9kZV0sIGV2ZW4sIG9kZF0pO1xuXG4gICAgcmV0dXJuIChcbiAgICAgIDxUYWJsZVJvd1xuICAgICAgICByZWY9e2V4dGVybmFsUmVmfVxuICAgICAgICBjbGFzc05hbWU9e2N4KFxuICAgICAgICAgIHRhYmxlU2VjdGlvbkNvbnRleHQuZmlsdGVyQ2xhc3NOYW1lLFxuICAgICAgICAgIGNsYXNzTmFtZSxcbiAgICAgICAgICBjbGFzc2VzLnJvb3QsXG4gICAgICAgICAgY2xhc3Nlcz8uW3R5cGVdLFxuICAgICAgICAgIHtcbiAgICAgICAgICAgIFtjbGFzc2VzLmhvdmVyXTogaG92ZXIsXG4gICAgICAgICAgICBbY2xhc3Nlcy5zZWxlY3RlZF06IHNlbGVjdGVkLFxuICAgICAgICAgICAgW2NsYXNzZXMuZXhwYW5kZWRdOiBleHBhbmRlZCxcbiAgICAgICAgICAgIFtjbGFzc2VzLnN0cmlwZWRdOiBzdHJpcGVkLFxuICAgICAgICAgICAgW2NsYXNzZXMudmFyaWFudExpc3RdOiBpc0xpc3QgJiYgdHlwZSA9PT0gXCJib2R5XCIsXG4gICAgICAgICAgICBbY2xhc3Nlcy52YXJpYW50TGlzdEhlYWRdOiBpc0xpc3QgJiYgdHlwZSA9PT0gXCJoZWFkXCIsXG4gICAgICAgICAgfVxuICAgICAgICApfVxuICAgICAgICByb2xlPXtDb21wb25lbnQgPT09IGRlZmF1bHRDb21wb25lbnQgPyBudWxsIDogXCJyb3dcIn1cbiAgICAgICAgJHN0cmlwZWQ9e3N0cmlwZWR9XG4gICAgICAgICRzdHJpcGVkQ29sb3JFdmVuPXtzdHJpcGVkQ29sb3JFdmVufVxuICAgICAgICAkc3RyaXBlZENvbG9yT2RkPXtzdHJpcGVkQ29sb3JPZGR9XG4gICAgICAgIHsuLi5vdGhlcnN9XG4gICAgICAvPlxuICAgICk7XG4gIH1cbik7XG4iXX0= */");
+const HvTableRow = forwardRef((props, externalRef) => {
   var _a, _b;
+  const {
+    classes: classesProp,
+    className,
+    component,
+    hover = false,
+    selected = false,
+    expanded = false,
+    striped = false,
+    ...others
+  } = props;
+  const {
+    classes,
+    cx
+  } = useClasses(classesProp);
   const {
     activeTheme,
     selectedMode
@@ -83,22 +87,25 @@ const HvTableRow = forwardRef(({
     stripedColorEven = checkValidHexColorValue(even) ? fade(even, 0.6) : even;
     stripedColorOdd = checkValidHexColorValue(odd) ? fade(odd, 0.6) : odd;
   }, [(_b = activeTheme == null ? void 0 : activeTheme.colors) == null ? void 0 : _b.modes[selectedMode], even, odd]);
-  return /* @__PURE__ */ jsx(ClassNames, {
-    children: ({
-      css,
-      cx
-    }) => /* @__PURE__ */ jsx(TableRow, {
-      ref: externalRef,
-      className: cx(tableSectionContext.filterClassName, tableRowClasses.root, className, classes == null ? void 0 : classes.root, css(styles.root), tableRowClasses[type], classes == null ? void 0 : classes[type], css(styles[type]), hover && (tableRowClasses.hover, classes == null ? void 0 : classes.hover, css(styles.hover)), selected && cx(tableRowClasses.selected, classes == null ? void 0 : classes.selected, css(styles.selected)), expanded && cx(tableRowClasses.expanded, classes == null ? void 0 : classes.expanded, css(styles.expanded)), striped && cx(tableRowClasses.striped, classes == null ? void 0 : classes.striped, css(styles.striped)), isList && type === "body" && cx(tableRowClasses.variantList, classes == null ? void 0 : classes.variantList, css(styles.variantList)), isList && type === "head" && cx(tableRowClasses.variantListHead, classes == null ? void 0 : classes.variantListHead, css(styles.variantListHead))),
-      role: Component === defaultComponent ? null : "row",
-      $striped: striped,
-      $stripedColorEven: stripedColorEven,
-      $stripedColorOdd: stripedColorOdd,
-      ...others
-    })
+  return /* @__PURE__ */ jsx(TableRow, {
+    ref: externalRef,
+    className: cx(tableSectionContext.filterClassName, className, classes.root, classes == null ? void 0 : classes[type], {
+      [classes.hover]: hover,
+      [classes.selected]: selected,
+      [classes.expanded]: expanded,
+      [classes.striped]: striped,
+      [classes.variantList]: isList && type === "body",
+      [classes.variantListHead]: isList && type === "head"
+    }),
+    role: Component === defaultComponent ? null : "row",
+    $striped: striped,
+    $stripedColorEven: stripedColorEven,
+    $stripedColorOdd: stripedColorOdd,
+    ...others
   });
 });
 export {
-  HvTableRow
+  HvTableRow,
+  staticClasses as tableRowClasses
 };
 //# sourceMappingURL=TableRow.js.map

package/dist/esm/components/Table/TableRow/TableRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableRow.js","sources":["../../../../../src/components/Table/TableRow/TableRow.tsx"],"sourcesContent":["import { forwardRef, useContext, useEffect, useMemo, useState } from \"react\";\nimport { ClassNames } from \"@emotion/react\";\nimport styled from \"@emotion/styled\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { checkValidHexColorValue, getVarValue, hexToRgbA } from \"@core/utils\";\nimport { transientOptions } from \"@core/utils/transientOptions\";\nimport { HvBaseProps } from \"@core/types\";\nimport { useTheme } from \"@core/hooks\";\nimport tableRowClasses, { HvTableRowClasses } from \"./tableRowClasses\";\nimport TableContext from \"../TableContext\";\nimport TableSectionContext from \"../TableSectionContext\";\nimport { styles } from \"./TableRow.styles\";\n\nexport interface HvTableRowProps\n  extends HvBaseProps<HTMLTableRowElement, \"children\"> {\n  /** Content to be rendered */\n  children: React.ReactNode;\n  /** The component used for the root node. Either a string to use a HTML element or a component. Defaults to tbody. */\n  component?: React.ElementType;\n  /** Whether the table row will shade on hover. */\n  hover?: boolean;\n  /** Whether the table row will have the selected shading. */\n  selected?: boolean;\n  /** Whether the table row is expanded. */\n  expanded?: boolean;\n  /** Whether the table row background is striped. */\n  striped?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvTableRowClasses;\n}\n\nconst defaultComponent = \"tr\";\n\nconst StyledTableRow = (c: any) =>\n  styled(\n    c,\n    transientOptions\n  )(\n    ({\n      $striped,\n      $stripedColorEven,\n      $stripedColorOdd,\n    }: {\n      $striped: boolean;\n      $stripedColorEven: string;\n      $stripedColorOdd: string;\n    }) => ({\n      ...($striped && {\n        \"&:nth-of-type(even)\": {\n          backgroundColor: $stripedColorEven,\n          \"&:hover\": {\n            backgroundColor: theme.table.rowHoverColor,\n          },\n        },\n        \"&:nth-of-type(odd)\": {\n          backgroundColor: $stripedColorOdd,\n          \"&:hover\": {\n            backgroundColor: theme.table.rowHoverColor,\n          },\n        },\n      }),\n    })\n  );\n\n/**\n * `HvTableRow` acts as a `tr` element and inherits styles from its context\n */\nexport const HvTableRow = forwardRef<HTMLElement, HvTableRowProps>(\n  (\n    {\n      classes,\n      className,\n      component,\n      hover = false,\n      selected = false,\n      expanded = false,\n      striped = false,\n      ...others\n    },\n    externalRef\n  ) => {\n    const { activeTheme, selectedMode } = useTheme();\n    const tableContext = useContext(TableContext);\n    const tableSectionContext = useContext(TableSectionContext);\n\n    const [even, setEven] = useState<string | undefined>();\n    const [odd, setOdd] = useState<string | undefined>();\n\n    const type = tableSectionContext?.type || \"body\";\n\n    const isList = tableContext.variant === \"listrow\";\n\n    const Component =\n      component || tableContext?.components?.Tr || defaultComponent;\n\n    const TableRow = useMemo(() => StyledTableRow(Component), [Component]);\n\n    let stripedColorEven = checkValidHexColorValue(even)\n      ? hexToRgbA(even, 0.6)\n      : even;\n\n    let stripedColorOdd = checkValidHexColorValue(odd)\n      ? hexToRgbA(odd, 0.6)\n      : odd;\n\n    useEffect(() => {\n      setEven(getVarValue(theme.table.rowStripedBackgroundColorEven));\n      setOdd(getVarValue(theme.table.rowStripedBackgroundColorOdd));\n      stripedColorEven = checkValidHexColorValue(even)\n        ? hexToRgbA(even, 0.6)\n        : even;\n      stripedColorOdd = checkValidHexColorValue(odd)\n        ? hexToRgbA(odd, 0.6)\n        : odd;\n    }, [activeTheme?.colors?.modes[selectedMode], even, odd]);\n\n    return (\n      <ClassNames>\n        {({ css, cx }) => (\n          <TableRow\n            ref={externalRef}\n            className={cx(\n              tableSectionContext.filterClassName,\n              tableRowClasses.root,\n              className,\n              classes?.root,\n              css(styles.root),\n              tableRowClasses[type],\n              classes?.[type],\n              css(styles[type]),\n              hover &&\n                (tableRowClasses.hover, classes?.hover, css(styles.hover)),\n              selected &&\n                cx(\n                  tableRowClasses.selected,\n                  classes?.selected,\n                  css(styles.selected)\n                ),\n              expanded &&\n                cx(\n                  tableRowClasses.expanded,\n                  classes?.expanded,\n                  css(styles.expanded)\n                ),\n              striped &&\n                cx(\n                  tableRowClasses.striped,\n                  classes?.striped,\n                  css(styles.striped)\n                ),\n              isList &&\n                type === \"body\" &&\n                cx(\n                  tableRowClasses.variantList,\n                  classes?.variantList,\n                  css(styles.variantList)\n                ),\n              isList &&\n                type === \"head\" &&\n                cx(\n                  tableRowClasses.variantListHead,\n                  classes?.variantListHead,\n                  css(styles.variantListHead)\n                )\n            )}\n            role={Component === defaultComponent ? null : \"row\"}\n            $striped={striped}\n            $stripedColorEven={stripedColorEven}\n            $stripedColorOdd={stripedColorOdd}\n            {...others}\n          />\n        )}\n      </ClassNames>\n    );\n  }\n);\n"],"names":["defaultComponent","StyledTableRow","c","process","env","NODE_ENV","_extends","target","transientOptions","label","$striped","$stripedColorEven","$stripedColorOdd","backgroundColor","theme","table","rowHoverColor","HvTableRow","forwardRef","classes","className","component","hover","selected","expanded","striped","others","externalRef","activeTheme","selectedMode","useTheme","tableContext","useContext","TableContext","tableSectionContext","TableSectionContext","even","setEven","useState","odd","setOdd","type","isList","variant","Component","components","Tr","TableRow","useMemo","stripedColorEven","checkValidHexColorValue","hexToRgbA","stripedColorOdd","useEffect","getVarValue","rowStripedBackgroundColorEven","rowStripedBackgroundColorOdd","colors","modes","ClassNames","children","css","cx","ref","filterClassName","tableRowClasses","root","styles","variantList","variantListHead","role"],"mappings":"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"}
+{"version":3,"file":"TableRow.js","sources":["../../../../../src/components/Table/TableRow/TableRow.tsx"],"sourcesContent":["import { forwardRef, useContext, useEffect, useMemo, useState } from \"react\";\nimport styled from \"@emotion/styled\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport {\n  ExtractNames,\n  checkValidHexColorValue,\n  getVarValue,\n  hexToRgbA,\n} from \"@core/utils\";\nimport { transientOptions } from \"@core/utils/transientOptions\";\nimport { HvBaseProps } from \"@core/types\";\nimport { useTheme } from \"@core/hooks\";\nimport TableContext from \"../TableContext\";\nimport TableSectionContext from \"../TableSectionContext\";\nimport { staticClasses, useClasses } from \"./TableRow.styles\";\n\nexport { staticClasses as tableRowClasses };\n\nexport type HvTableRowClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTableRowProps\n  extends HvBaseProps<HTMLTableRowElement, \"children\"> {\n  /** Content to be rendered */\n  children: React.ReactNode;\n  /** The component used for the root node. Either a string to use a HTML element or a component. Defaults to tbody. */\n  component?: React.ElementType;\n  /** Whether the table row will shade on hover. */\n  hover?: boolean;\n  /** Whether the table row will have the selected shading. */\n  selected?: boolean;\n  /** Whether the table row is expanded. */\n  expanded?: boolean;\n  /** Whether the table row background is striped. */\n  striped?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvTableRowClasses;\n}\n\nconst defaultComponent = \"tr\";\n\nconst StyledTableRow = (c: any) =>\n  styled(\n    c,\n    transientOptions\n  )(\n    ({\n      $striped,\n      $stripedColorEven,\n      $stripedColorOdd,\n    }: {\n      $striped: boolean;\n      $stripedColorEven: string;\n      $stripedColorOdd: string;\n    }) => ({\n      ...($striped && {\n        \"&:nth-of-type(even)\": {\n          backgroundColor: $stripedColorEven,\n          \"&:hover\": {\n            backgroundColor: theme.table.rowHoverColor,\n          },\n        },\n        \"&:nth-of-type(odd)\": {\n          backgroundColor: $stripedColorOdd,\n          \"&:hover\": {\n            backgroundColor: theme.table.rowHoverColor,\n          },\n        },\n      }),\n    })\n  );\n\n/**\n * `HvTableRow` acts as a `tr` element and inherits styles from its context\n */\nexport const HvTableRow = forwardRef<HTMLElement, HvTableRowProps>(\n  (props, externalRef) => {\n    const {\n      classes: classesProp,\n      className,\n      component,\n      hover = false,\n      selected = false,\n      expanded = false,\n      striped = false,\n      ...others\n    } = props;\n    const { classes, cx } = useClasses(classesProp);\n    const { activeTheme, selectedMode } = useTheme();\n    const tableContext = useContext(TableContext);\n    const tableSectionContext = useContext(TableSectionContext);\n\n    const [even, setEven] = useState<string | undefined>();\n    const [odd, setOdd] = useState<string | undefined>();\n\n    const type = tableSectionContext?.type || \"body\";\n\n    const isList = tableContext.variant === \"listrow\";\n\n    const Component =\n      component || tableContext?.components?.Tr || defaultComponent;\n\n    const TableRow = useMemo(() => StyledTableRow(Component), [Component]);\n\n    let stripedColorEven = checkValidHexColorValue(even)\n      ? hexToRgbA(even, 0.6)\n      : even;\n\n    let stripedColorOdd = checkValidHexColorValue(odd)\n      ? hexToRgbA(odd, 0.6)\n      : odd;\n\n    useEffect(() => {\n      setEven(getVarValue(theme.table.rowStripedBackgroundColorEven));\n      setOdd(getVarValue(theme.table.rowStripedBackgroundColorOdd));\n      stripedColorEven = checkValidHexColorValue(even)\n        ? hexToRgbA(even, 0.6)\n        : even;\n      stripedColorOdd = checkValidHexColorValue(odd)\n        ? hexToRgbA(odd, 0.6)\n        : odd;\n    }, [activeTheme?.colors?.modes[selectedMode], even, odd]);\n\n    return (\n      <TableRow\n        ref={externalRef}\n        className={cx(\n          tableSectionContext.filterClassName,\n          className,\n          classes.root,\n          classes?.[type],\n          {\n            [classes.hover]: hover,\n            [classes.selected]: selected,\n            [classes.expanded]: expanded,\n            [classes.striped]: striped,\n            [classes.variantList]: isList && type === \"body\",\n            [classes.variantListHead]: isList && type === \"head\",\n          }\n        )}\n        role={Component === defaultComponent ? null : \"row\"}\n        $striped={striped}\n        $stripedColorEven={stripedColorEven}\n        $stripedColorOdd={stripedColorOdd}\n        {...others}\n      />\n    );\n  }\n);\n"],"names":["defaultComponent","StyledTableRow","c","process","env","NODE_ENV","_extends","target","transientOptions","label","$striped","$stripedColorEven","$stripedColorOdd","backgroundColor","theme","table","rowHoverColor","HvTableRow","forwardRef","props","externalRef","classes","classesProp","className","component","hover","selected","expanded","striped","others","cx","useClasses","activeTheme","selectedMode","useTheme","tableContext","useContext","TableContext","tableSectionContext","TableSectionContext","even","setEven","useState","odd","setOdd","type","isList","variant","Component","components","Tr","TableRow","useMemo","stripedColorEven","checkValidHexColorValue","hexToRgbA","stripedColorOdd","useEffect","getVarValue","rowStripedBackgroundColorEven","rowStripedBackgroundColorOdd","colors","modes","ref","filterClassName","root","variantList","variantListHead","role"],"mappings":"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"}

package/dist/esm/components/Table/TableRow/TableRow.styles.js

@@ -1,7 +1,11 @@
 import { theme } from "@hitachivantara/uikit-styles";
 import { getBorderStyles } from "../utils/utils.js";
-import tableRowClasses from "./tableRowClasses.js";
-const styles = {
+import { createClasses } from "../../../utils/classes.js";
+const {
+  staticClasses,
+  useClasses
+} = createClasses("HvTableRow", {
+  /** Styles applied to the component root class. */
   root: {
     color: "inherit",
     backgroundColor: theme.table.rowBackgroundColor,
@@ -12,6 +16,7 @@ const styles = {
       height: 32
     }
   },
+  /** Styles applied to the component root when inside a `HvTableHead`. */
   head: {
     "&:first-of-type": {
       height: 52
@@ -20,17 +25,22 @@ const styles = {
       height: 52
     }
   },
+  /** Styles applied to the component root when inside a `HvTableBody`. */
   body: {},
+  /** Styles applied to the component root when inside a `HvTableFooter`. */
   footer: {},
+  /** Styles applied to the component root when selected. */
   selected: {
     backgroundColor: theme.table.selectedRowBackgroundColor
   },
+  /** Styles applied to the component root when expanded. */
   expanded: {
     backgroundColor: theme.colors.atmo1,
     "& > *[role=cell]": {
       borderBottom: "none"
     }
   },
+  /** Styles applied to the component root when striped. */
   striped: {
     // these styles were left on a styled component because of the access to the css var value to add an alpha.
     // "&:nth-of-type(even)": {
@@ -43,17 +53,19 @@ const styles = {
     //   },
     // },
   },
+  /** Styles applied to the component root on hover. */
   hover: {
     transition: "background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms",
     "&:hover": {
       backgroundColor: theme.table.rowHoverColor
     }
   },
+  /** Styles applied to the component root when its table variant is list. */
   variantList: {
     ...getBorderStyles("row", theme.table.rowListBorderColor, theme.table.rowListBorderRadius),
     backgroundColor: theme.colors.atmo1,
     height: 52,
-    [`&.${tableRowClasses.selected}`]: {
+    "&$selected": {
       ...getBorderStyles("row", theme.colors.secondary, theme.table.rowListBorderRadius),
       "&:hover": {
         ...getBorderStyles("row", theme.table.rowHoverBorderColor, theme.table.rowListBorderRadius)
@@ -66,6 +78,7 @@ const styles = {
       borderRadius: theme.table.rowListBorderRadius
     }
   },
+  /** Styles applied to the component root when its table variant is list. */
   variantListHead: {
     backgroundColor: theme.table.rowListBackgroundColor,
     height: 16,
@@ -76,8 +89,9 @@ const styles = {
       height: 16
     }
   }
-};
+});
 export {
-  styles
+  staticClasses,
+  useClasses
 };
 //# sourceMappingURL=TableRow.styles.js.map

package/dist/esm/components/Table/TableRow/TableRow.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableRow.styles.js","sources":["../../../../../src/components/Table/TableRow/TableRow.styles.tsx"],"sourcesContent":["import { CSSInterpolation } from \"@emotion/serialize\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { getBorderStyles } from \"../utils/utils\";\nimport tableRowClasses, { HvTableRowClasses } from \"./tableRowClasses\";\n\nexport const styles: Partial<\n  Record<keyof HvTableRowClasses, CSSInterpolation>\n> = {\n  root: {\n    color: \"inherit\",\n    backgroundColor: theme.table.rowBackgroundColor,\n    verticalAlign: \"middle\",\n    outline: 0,\n    minHeight: 32,\n    \"tr&\": {\n      height: 32,\n    },\n  },\n  head: {\n    \"&:first-of-type\": {\n      height: 52,\n    },\n\n    \"tr&:first-of-type\": {\n      height: 52,\n    },\n  },\n  body: {},\n  footer: {},\n  selected: {\n    backgroundColor: theme.table.selectedRowBackgroundColor,\n  },\n  expanded: {\n    backgroundColor: theme.colors.atmo1,\n    \"& > *[role=cell]\": {\n      borderBottom: \"none\",\n    },\n  },\n  striped: {\n    // these styles were left on a styled component because of the access to the css var value to add an alpha.\n    // \"&:nth-of-type(even)\": {\n    // backgroundColor: hexToRgbA(\n    //   getVarValue(theme.table.rowStripedBackgroundColor),\n    //   0.6\n    // ),\n    //   \"&:hover\": {\n    //     backgroundColor: theme.table.rowHoverColor,\n    //   },\n    // },\n  },\n  hover: {\n    transition: \"background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms\",\n    \"&:hover\": {\n      backgroundColor: theme.table.rowHoverColor,\n    },\n  },\n  variantList: {\n    ...getBorderStyles(\n      \"row\",\n      theme.table.rowListBorderColor,\n      theme.table.rowListBorderRadius\n    ),\n    backgroundColor: theme.colors.atmo1,\n    height: 52,\n    [`&.${tableRowClasses.selected}`]: {\n      ...getBorderStyles(\n        \"row\",\n        theme.colors.secondary,\n        theme.table.rowListBorderRadius\n      ),\n\n      \"&:hover\": {\n        ...getBorderStyles(\n          \"row\",\n          theme.table.rowHoverBorderColor,\n          theme.table.rowListBorderRadius\n        ),\n      },\n    },\n\n    \"&:hover\": {\n      ...getBorderStyles(\n        \"row\",\n        theme.table.rowHoverBorderColor,\n        theme.table.rowListBorderRadius\n      ),\n    },\n    \"&.HvIsFocused\": {\n      borderRadius: theme.table.rowListBorderRadius,\n    },\n  },\n  variantListHead: {\n    backgroundColor: theme.table.rowListBackgroundColor,\n    height: 16,\n    \"&:first-of-type\": {\n      height: 16,\n    },\n\n    \"tr&:first-of-type\": {\n      height: 16,\n    },\n  },\n};\n"],"names":["styles","root","color","backgroundColor","theme","table","rowBackgroundColor","verticalAlign","outline","minHeight","height","head","body","footer","selected","selectedRowBackgroundColor","expanded","colors","atmo1","borderBottom","striped","hover","transition","rowHoverColor","variantList","getBorderStyles","rowListBorderColor","rowListBorderRadius","tableRowClasses","secondary","rowHoverBorderColor","borderRadius","variantListHead","rowListBackgroundColor"],"mappings":";;;AAKO,MAAMA,SAET;AAAA,EACFC,MAAM;AAAA,IACJC,OAAO;AAAA,IACPC,iBAAiBC,MAAMC,MAAMC;AAAAA,IAC7BC,eAAe;AAAA,IACfC,SAAS;AAAA,IACTC,WAAW;AAAA,IACX,OAAO;AAAA,MACLC,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EACAC,MAAM;AAAA,IACJ,mBAAmB;AAAA,MACjBD,QAAQ;AAAA,IACV;AAAA,IAEA,qBAAqB;AAAA,MACnBA,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EACAE,MAAM,CAAC;AAAA,EACPC,QAAQ,CAAC;AAAA,EACTC,UAAU;AAAA,IACRX,iBAAiBC,MAAMC,MAAMU;AAAAA,EAC/B;AAAA,EACAC,UAAU;AAAA,IACRb,iBAAiBC,MAAMa,OAAOC;AAAAA,IAC9B,oBAAoB;AAAA,MAClBC,cAAc;AAAA,IAChB;AAAA,EACF;AAAA,EACAC,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAUP;AAAA,EAEFC,OAAO;AAAA,IACLC,YAAY;AAAA,IACZ,WAAW;AAAA,MACTnB,iBAAiBC,MAAMC,MAAMkB;AAAAA,IAC/B;AAAA,EACF;AAAA,EACAC,aAAa;AAAA,IACX,GAAGC,gBACD,OACArB,MAAMC,MAAMqB,oBACZtB,MAAMC,MAAMsB,mBACd;AAAA,IACAxB,iBAAiBC,MAAMa,OAAOC;AAAAA,IAC9BR,QAAQ;AAAA,IACR,CAAE,KAAIkB,gBAAgBd,UAAU,GAAG;AAAA,MACjC,GAAGW,gBACD,OACArB,MAAMa,OAAOY,WACbzB,MAAMC,MAAMsB,mBACd;AAAA,MAEA,WAAW;AAAA,QACT,GAAGF,gBACD,OACArB,MAAMC,MAAMyB,qBACZ1B,MAAMC,MAAMsB,mBACd;AAAA,MACF;AAAA,IACF;AAAA,IAEA,WAAW;AAAA,MACT,GAAGF,gBACD,OACArB,MAAMC,MAAMyB,qBACZ1B,MAAMC,MAAMsB,mBACd;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACfI,cAAc3B,MAAMC,MAAMsB;AAAAA,IAC5B;AAAA,EACF;AAAA,EACAK,iBAAiB;AAAA,IACf7B,iBAAiBC,MAAMC,MAAM4B;AAAAA,IAC7BvB,QAAQ;AAAA,IACR,mBAAmB;AAAA,MACjBA,QAAQ;AAAA,IACV;AAAA,IAEA,qBAAqB;AAAA,MACnBA,QAAQ;AAAA,IACV;AAAA,EACF;AACF;"}
+{"version":3,"file":"TableRow.styles.js","sources":["../../../../../src/components/Table/TableRow/TableRow.styles.tsx"],"sourcesContent":["import { createClasses } from \"@core/utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { getBorderStyles } from \"../utils/utils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvTableRow\", {\n  /** Styles applied to the component root class. */\n  root: {\n    color: \"inherit\",\n    backgroundColor: theme.table.rowBackgroundColor,\n    verticalAlign: \"middle\",\n    outline: 0,\n    minHeight: 32,\n    \"tr&\": {\n      height: 32,\n    },\n  },\n  /** Styles applied to the component root when inside a `HvTableHead`. */\n  head: {\n    \"&:first-of-type\": {\n      height: 52,\n    },\n\n    \"tr&:first-of-type\": {\n      height: 52,\n    },\n  },\n  /** Styles applied to the component root when inside a `HvTableBody`. */\n  body: {},\n  /** Styles applied to the component root when inside a `HvTableFooter`. */\n  footer: {},\n  /** Styles applied to the component root when selected. */\n  selected: {\n    backgroundColor: theme.table.selectedRowBackgroundColor,\n  },\n  /** Styles applied to the component root when expanded. */\n  expanded: {\n    backgroundColor: theme.colors.atmo1,\n    \"& > *[role=cell]\": {\n      borderBottom: \"none\",\n    },\n  },\n  /** Styles applied to the component root when striped. */\n  striped: {\n    // these styles were left on a styled component because of the access to the css var value to add an alpha.\n    // \"&:nth-of-type(even)\": {\n    // backgroundColor: hexToRgbA(\n    //   getVarValue(theme.table.rowStripedBackgroundColor),\n    //   0.6\n    // ),\n    //   \"&:hover\": {\n    //     backgroundColor: theme.table.rowHoverColor,\n    //   },\n    // },\n  },\n  /** Styles applied to the component root on hover. */\n  hover: {\n    transition: \"background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms\",\n    \"&:hover\": {\n      backgroundColor: theme.table.rowHoverColor,\n    },\n  },\n  /** Styles applied to the component root when its table variant is list. */\n  variantList: {\n    ...getBorderStyles(\n      \"row\",\n      theme.table.rowListBorderColor,\n      theme.table.rowListBorderRadius\n    ),\n    backgroundColor: theme.colors.atmo1,\n    height: 52,\n    \"&$selected\": {\n      ...getBorderStyles(\n        \"row\",\n        theme.colors.secondary,\n        theme.table.rowListBorderRadius\n      ),\n\n      \"&:hover\": {\n        ...getBorderStyles(\n          \"row\",\n          theme.table.rowHoverBorderColor,\n          theme.table.rowListBorderRadius\n        ),\n      },\n    },\n\n    \"&:hover\": {\n      ...getBorderStyles(\n        \"row\",\n        theme.table.rowHoverBorderColor,\n        theme.table.rowListBorderRadius\n      ),\n    },\n    \"&.HvIsFocused\": {\n      borderRadius: theme.table.rowListBorderRadius,\n    },\n  },\n  /** Styles applied to the component root when its table variant is list. */\n  variantListHead: {\n    backgroundColor: theme.table.rowListBackgroundColor,\n    height: 16,\n    \"&:first-of-type\": {\n      height: 16,\n    },\n\n    \"tr&:first-of-type\": {\n      height: 16,\n    },\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","color","backgroundColor","theme","table","rowBackgroundColor","verticalAlign","outline","minHeight","height","head","body","footer","selected","selectedRowBackgroundColor","expanded","colors","atmo1","borderBottom","striped","hover","transition","rowHoverColor","variantList","getBorderStyles","rowListBorderColor","rowListBorderRadius","secondary","rowHoverBorderColor","borderRadius","variantListHead","rowListBackgroundColor"],"mappings":";;;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,cAAc;AAAA;AAAA,EAEvEC,MAAM;AAAA,IACJC,OAAO;AAAA,IACPC,iBAAiBC,MAAMC,MAAMC;AAAAA,IAC7BC,eAAe;AAAA,IACfC,SAAS;AAAA,IACTC,WAAW;AAAA,IACX,OAAO;AAAA,MACLC,QAAQ;AAAA,IACV;AAAA,EACF;AAAA;AAAA,EAEAC,MAAM;AAAA,IACJ,mBAAmB;AAAA,MACjBD,QAAQ;AAAA,IACV;AAAA,IAEA,qBAAqB;AAAA,MACnBA,QAAQ;AAAA,IACV;AAAA,EACF;AAAA;AAAA,EAEAE,MAAM,CAAC;AAAA;AAAA,EAEPC,QAAQ,CAAC;AAAA;AAAA,EAETC,UAAU;AAAA,IACRX,iBAAiBC,MAAMC,MAAMU;AAAAA,EAC/B;AAAA;AAAA,EAEAC,UAAU;AAAA,IACRb,iBAAiBC,MAAMa,OAAOC;AAAAA,IAC9B,oBAAoB;AAAA,MAClBC,cAAc;AAAA,IAChB;AAAA,EACF;AAAA;AAAA,EAEAC,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAUP;AAAA;AAAA,EAGFC,OAAO;AAAA,IACLC,YAAY;AAAA,IACZ,WAAW;AAAA,MACTnB,iBAAiBC,MAAMC,MAAMkB;AAAAA,IAC/B;AAAA,EACF;AAAA;AAAA,EAEAC,aAAa;AAAA,IACX,GAAGC,gBACD,OACArB,MAAMC,MAAMqB,oBACZtB,MAAMC,MAAMsB,mBACd;AAAA,IACAxB,iBAAiBC,MAAMa,OAAOC;AAAAA,IAC9BR,QAAQ;AAAA,IACR,cAAc;AAAA,MACZ,GAAGe,gBACD,OACArB,MAAMa,OAAOW,WACbxB,MAAMC,MAAMsB,mBACd;AAAA,MAEA,WAAW;AAAA,QACT,GAAGF,gBACD,OACArB,MAAMC,MAAMwB,qBACZzB,MAAMC,MAAMsB,mBACd;AAAA,MACF;AAAA,IACF;AAAA,IAEA,WAAW;AAAA,MACT,GAAGF,gBACD,OACArB,MAAMC,MAAMwB,qBACZzB,MAAMC,MAAMsB,mBACd;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACfG,cAAc1B,MAAMC,MAAMsB;AAAAA,IAC5B;AAAA,EACF;AAAA;AAAA,EAEAI,iBAAiB;AAAA,IACf5B,iBAAiBC,MAAMC,MAAM2B;AAAAA,IAC7BtB,QAAQ;AAAA,IACR,mBAAmB;AAAA,MACjBA,QAAQ;AAAA,IACV;AAAA,IAEA,qBAAqB;AAAA,MACnBA,QAAQ;AAAA,IACV;AAAA,EACF;AACF,CAAC;"}