@laerdal/life-react-components 2.1.1-dev.24 → 2.1.1-dev.25

package/dist/Table/Table.cjs

@@ -348,6 +348,7 @@ var Table = function Table(props) {
    * Return Table component.
    */
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_TableStyles.TableWrapper, {
+    className: props.border ? 'border' : undefined,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TableHeaders.default, _objectSpread({}, props)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TableBody.default, _objectSpread(_objectSpread({}, props), {}, {
       currentPageRows: currentPageRows,
       selected: selected,

package/dist/Table/Table.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Table.cjs","names":["Table","props","onPreviousPageClick","onNextPageClick","onRowsPerPageChange","onTriggerSortingChange","columns","rows","remoteOperations","pagination","showLoadingIndicator","selectable","multiSelect","keyExpr","sortProps","accordion","collapsed","collapsedRows","rowsPerPageLabel","React","useState","rowsPerPage","setRowsPerPage","filteredRows","setFilteredRows","currentPageRows","setCurrentPageRows","currentPage","setCurrentPage","sort","setSort","from","setFrom","to","setTo","total","setTotal","isCollapsed","setIsCollapsed","selectAllState","setSelectAllState","undefined","selected","setSelected","useEffect","selectedRows","currentList","map","row","count","filter","item","includes","length","filterAndSortRows","tmpFilteredRows","matchFilterCriteria","column","filterValue","key","toLowerCase","indexOf","direction","a","b","rowsFrom","rowsTo","slice","sortTableColumn","columnKey","sortDirection","previousPage","nextPage","changeRowsPerPage","value","onRowClick","selectedText","window","getSelection","toString","currentSelection","existing","splice","onSelectionChange","onSelectAllClick","Size","Medium"],"sources":["../../src/Table/Table.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom components.\n */\nimport {Size} from '../types'\n\n/**\n * Import custom styles.\n */\nimport {StyledTable, StyledTableSpinner, TableWrapper} from './TableStyles';\n\n/**\n * Import custom types.\n */\nimport {TableProps, TableColumn, TableSortingDirection, TableSortProps} from './TableTypes';\nimport {LoadingIndicator} from '../LoadingIndicator';\nimport TableHeader from './TableHeaders';\nimport TableFooter from './TableFooter';\nimport TableBody from './TableBody';\n\nconst Table: React.FunctionComponent<TableProps> = (props: TableProps) => {\n  let {\n    onPreviousPageClick,\n    onNextPageClick,\n    onRowsPerPageChange,\n    onTriggerSortingChange,\n    columns,\n    rows,\n    remoteOperations,\n    pagination,\n    showLoadingIndicator,\n    selectable,\n    multiSelect,\n    keyExpr,\n    sortProps,\n    accordion,\n    collapsed = true,\n    collapsedRows,\n    rowsPerPageLabel\n  } = props;\n\n  // States used within the component\n  const [rowsPerPage, setRowsPerPage] = React.useState<number>(10);\n  const [filteredRows, setFilteredRows] = React.useState<any[]>([]);\n  const [currentPageRows, setCurrentPageRows] = React.useState<any[]>([]);\n  const [currentPage, setCurrentPage] = React.useState<number>(1);\n  const [sort, setSort] = React.useState<TableSortProps | undefined>(sortProps);\n  const [from, setFrom] = React.useState<number>();\n  const [to, setTo] = React.useState<number>();\n  const [total, setTotal] = React.useState<number>();\n\n  const [isCollapsed, setIsCollapsed] = React.useState(true);\n\n  const [selectAllState, setSelectAllState] = React.useState<'all' | 'some' | 'none'>('none');\n\n  const [selected, setSelected] = React.useState<any | any[]>(multiSelect ? [] : undefined);\n\n  React.useEffect(() => {\n    setSort(sortProps);\n  }, [sortProps])\n\n  React.useEffect(() => {\n    setSelected(props.selectedRows || (multiSelect ? [] : undefined))\n  }, [props.selectedRows, multiSelect])\n\n  /**\n   * update select all checkbox state\n   */\n  React.useEffect(() => {\n    if (multiSelect) {\n      const currentList = currentPageRows.map(row => keyExpr ? row[keyExpr] : row);\n      const count = selected.filter((item: any) => currentList.includes(item)).length;\n\n      setSelectAllState(count === currentList.length ? 'all' : count > 0 ? 'some' : 'none');\n    }\n  }, [currentPageRows, multiSelect, selected, keyExpr])\n\n  /**\n   * Takes care of remote pagination.\n   * Works only in case remote pagination is set to true.\n   */\n  React.useEffect(() => {\n    if (remoteOperations) {\n      setCurrentPageRows(rows);\n\n      // Let's assign pagination values\n      setFrom(pagination?.from);\n      setTo(pagination?.to);\n      setTotal(pagination?.total);\n      setCurrentPage(pagination?.currentPage!);\n      setRowsPerPage(pagination?.rowsPerPage!);\n    }\n  }, [remoteOperations, pagination, rows]);\n\n  /**\n   * Sets number of rows to display when accordion.\n   */\n  React.useEffect(() => {\n    if (!accordion) return;\n\n    setRowsPerPage(isCollapsed ? collapsedRows || 10 : rows.length);\n  }, [rows, accordion, collapsedRows, isCollapsed])\n\n  React.useEffect(() => {\n    if (!accordion) return;\n\n    setIsCollapsed(!!collapsed);\n  }, [accordion, collapsed])\n\n  /**\n   * Filters out a rows by specific column filters and sorts them if any sorting is set.\n   * @returns Filtered and sorted rows.\n   */\n  const filterAndSortRows = (): any[] => {\n    let tmpFilteredRows = rows.filter((row) => {\n      // Let's start with matched filter criteria\n      let matchFilterCriteria = true;\n\n      // Let's go through columns\n      for (const column of columns) {\n        // Let's check if filter value is specified for the column\n        // And if it doesn't match the current row column value\n        // Then let's update match filter criteria to failed\n        if (column.filterValue && row[column.key].toLowerCase().indexOf(column.filterValue.toLowerCase()) === -1) {\n          matchFilterCriteria = false;\n        }\n      }\n\n      // Let's return row only in case match filter criteria succeeds\n      if (matchFilterCriteria) {\n        return row;\n      }\n    });\n\n    // Let's apply sorting if needed\n    if (!!sort?.column && !!sort?.direction) {\n      // Let's sort the rows\n      tmpFilteredRows.sort((a, b) => {\n        if (a[sort.column!] > b[sort.column!]) {\n          return sort.direction! === 'asc' ? 1 : -1;\n        } else if (a[sort.column!] < b[sort.column!]) {\n          return sort.direction! === 'asc' ? -1 : 1;\n        } else {\n          return 0;\n        }\n      });\n    }\n\n    // Let's return filtered rows\n    return tmpFilteredRows;\n  };\n\n  /**\n   * Takes care of local pagination.\n   * Works only in case remote pagination is not defined or is set to false.\n   */\n  React.useEffect(() => {\n    if (!remoteOperations) {\n      // Let's retrieve temporary filtered rows and update globally filtered rows\n      const tmpFilteredRows = filterAndSortRows();\n      setFilteredRows(tmpFilteredRows);\n      setTotal(tmpFilteredRows.length);\n\n      // Assign rows from and rows to\n      const rowsFrom = (currentPage - 1) * rowsPerPage;\n      const rowsTo = rowsFrom + rowsPerPage >= tmpFilteredRows.length ? tmpFilteredRows.length : rowsFrom + rowsPerPage;\n\n      // Set from and to values\n      setFrom(rowsFrom + 1);\n      setTo(rowsTo);\n\n      // Filter out the rows\n      setCurrentPageRows(tmpFilteredRows.slice(rowsFrom, rowsTo));\n    }\n  }, [rowsPerPage, rows, currentPage, columns, sort, remoteOperations]);\n\n\n  /**\n   * Applies a specific sorting to a column.\n   * If no sorting exists, then applies ascending initially\n   * @param column - Column to which sorting should be applied.\n   */\n  const sortTableColumn = (column: TableColumn): void => {\n    let columnKey = '';\n    let sortDirection: TableSortingDirection | undefined = undefined;\n\n    if (sort?.column !== column.key) {\n      columnKey = column.key;\n      sortDirection = 'asc';\n    } else {\n      if (sort?.direction === 'desc') {\n        columnKey = '';\n        sortDirection = undefined;\n      } else {\n        columnKey = sort.column;\n        sortDirection = sort.direction === 'asc' ? 'desc' : 'asc';\n      }\n    }\n\n    if(columnKey == '')\n      setSort(undefined);\n    else\n      setSort({column: columnKey, direction: sortDirection!});\n\n    remoteOperations && onTriggerSortingChange && onTriggerSortingChange(columnKey, sortDirection);\n  };\n\n  /**\n   * Navigates user back to the previous page and updates the current table page.\n   */\n  const previousPage = () => {\n    if (remoteOperations) {\n      // Let's inform parent component about page change\n      if (onPreviousPageClick) {\n        onPreviousPageClick();\n      }\n    } else {\n      // Let's change the page within the component\n      setCurrentPage(currentPage > 1 ? currentPage - 1 : 1);\n    }\n  };\n\n  /**\n   * Navigates user to the next page and updates the current table page.\n   */\n  const nextPage = () => {\n    if (remoteOperations) {\n      // Let's inform parent component about page change\n      if (onNextPageClick) {\n        onNextPageClick();\n      }\n    } else {\n      // Let's change the page within the component\n      setCurrentPage(currentPage * rowsPerPage >= filteredRows.length ? currentPage : currentPage + 1);\n    }\n  };\n\n  /**\n   * Updates the rows per page value and refreshes the table content accordingly.\n   * @param value - Newly selected rows per page value.\n   */\n  const changeRowsPerPage = (value: number) => {\n    // Let's check if we are using remote pagination\n    if (remoteOperations) {\n      // Inform parent component about rows per page change\n      if (onRowsPerPageChange) {\n        onRowsPerPageChange(value);\n      }\n    } else {\n      // Let's reset current page to 1\n      setCurrentPage(1);\n    }\n\n    // Let's set rows per page\n    setRowsPerPage(value);\n  };\n\n\n  /**\n   * Function which is called when a mouse click happens on a row to pass data to the parent component.\n   * @param row - Row in which the link is located.\n   */\n  const onRowClick = (row: any): void => {\n    const selectedText = window?.getSelection()?.toString();\n\n    if (selectedText?.length === 0 && selectable) {\n      const value = keyExpr ? row[keyExpr] : row;\n      let currentSelection = value;\n      if (!!multiSelect) {\n        const existing = selected?.indexOf(value);\n        if (existing > -1) {\n          currentSelection = [...selected];\n          currentSelection.splice(existing, 1);\n        } else {\n          currentSelection = [...selected, currentSelection];\n        }\n      }\n\n      setSelected(currentSelection)\n      props.onSelectionChange && props.onSelectionChange(currentSelection);\n    }\n  };\n\n  /**\n   * Function which is called when user clicks checkbox to select or deselect all rows.\n   */\n  const onSelectAllClick = () => {\n    const currentList = currentPageRows.map(row => keyExpr ? row[keyExpr] : row);\n\n    switch (selectAllState) {\n      case 'all':\n        setSelected([...selected].filter(item => !currentList.includes(item)));\n        setSelectAllState('none');\n        break;\n      case 'none':\n        setSelected([...selected, ...currentList]);\n        setSelectAllState('all');\n        break;\n      case 'some':\n        setSelected([...selected, ...currentList.filter(item => !selected.includes(item))]);\n        setSelectAllState('all');\n        break;\n    }\n  };\n\n  /**\n   * Return Table component.\n   */\n  return (\n    <TableWrapper>\n      <TableHeader {...props}/>\n      <TableBody {...props}\n                 currentPageRows={currentPageRows}\n                 selected={selected}\n                 onRowClick={onRowClick}\n                 sortByColumn={sortTableColumn}\n                 onSelectAllClick={onSelectAllClick}\n                 sortProps={sort}\n                 selectAllState={selectAllState}/>\n      <TableFooter {...props}\n                   onRowsPerPageChange={changeRowsPerPage}\n                   rowsPerPage={rowsPerPage}\n                   setIsCollapsed={setIsCollapsed}\n                   isCollapsed={isCollapsed}\n                   from={from}\n                   to={to}\n                   total={total}\n                   nextPage={nextPage}\n                   prevPage={previousPage}/>\n      {showLoadingIndicator && (\n        <StyledTableSpinner>\n          <LoadingIndicator size={Size.Medium}/>\n        </StyledTableSpinner>\n      )}\n    </TableWrapper>\n  );\n};\n\nexport default Table;\n"],"mappings":"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"}
+{"version":3,"file":"Table.cjs","names":["Table","props","onPreviousPageClick","onNextPageClick","onRowsPerPageChange","onTriggerSortingChange","columns","rows","remoteOperations","pagination","showLoadingIndicator","selectable","multiSelect","keyExpr","sortProps","accordion","collapsed","collapsedRows","rowsPerPageLabel","React","useState","rowsPerPage","setRowsPerPage","filteredRows","setFilteredRows","currentPageRows","setCurrentPageRows","currentPage","setCurrentPage","sort","setSort","from","setFrom","to","setTo","total","setTotal","isCollapsed","setIsCollapsed","selectAllState","setSelectAllState","undefined","selected","setSelected","useEffect","selectedRows","currentList","map","row","count","filter","item","includes","length","filterAndSortRows","tmpFilteredRows","matchFilterCriteria","column","filterValue","key","toLowerCase","indexOf","direction","a","b","rowsFrom","rowsTo","slice","sortTableColumn","columnKey","sortDirection","previousPage","nextPage","changeRowsPerPage","value","onRowClick","selectedText","window","getSelection","toString","currentSelection","existing","splice","onSelectionChange","onSelectAllClick","border","Size","Medium"],"sources":["../../src/Table/Table.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom components.\n */\nimport {Size} from '../types'\n\n/**\n * Import custom styles.\n */\nimport {StyledTable, StyledTableSpinner, TableWrapper} from './TableStyles';\n\n/**\n * Import custom types.\n */\nimport {TableProps, TableColumn, TableSortingDirection, TableSortProps} from './TableTypes';\nimport {LoadingIndicator} from '../LoadingIndicator';\nimport TableHeader from './TableHeaders';\nimport TableFooter from './TableFooter';\nimport TableBody from './TableBody';\n\nconst Table: React.FunctionComponent<TableProps> = (props: TableProps) => {\n  let {\n    onPreviousPageClick,\n    onNextPageClick,\n    onRowsPerPageChange,\n    onTriggerSortingChange,\n    columns,\n    rows,\n    remoteOperations,\n    pagination,\n    showLoadingIndicator,\n    selectable,\n    multiSelect,\n    keyExpr,\n    sortProps,\n    accordion,\n    collapsed = true,\n    collapsedRows,\n    rowsPerPageLabel\n  } = props;\n\n  // States used within the component\n  const [rowsPerPage, setRowsPerPage] = React.useState<number>(10);\n  const [filteredRows, setFilteredRows] = React.useState<any[]>([]);\n  const [currentPageRows, setCurrentPageRows] = React.useState<any[]>([]);\n  const [currentPage, setCurrentPage] = React.useState<number>(1);\n  const [sort, setSort] = React.useState<TableSortProps | undefined>(sortProps);\n  const [from, setFrom] = React.useState<number>();\n  const [to, setTo] = React.useState<number>();\n  const [total, setTotal] = React.useState<number>();\n\n  const [isCollapsed, setIsCollapsed] = React.useState(true);\n\n  const [selectAllState, setSelectAllState] = React.useState<'all' | 'some' | 'none'>('none');\n\n  const [selected, setSelected] = React.useState<any | any[]>(multiSelect ? [] : undefined);\n\n  React.useEffect(() => {\n    setSort(sortProps);\n  }, [sortProps])\n\n  React.useEffect(() => {\n    setSelected(props.selectedRows || (multiSelect ? [] : undefined))\n  }, [props.selectedRows, multiSelect])\n\n  /**\n   * update select all checkbox state\n   */\n  React.useEffect(() => {\n    if (multiSelect) {\n      const currentList = currentPageRows.map(row => keyExpr ? row[keyExpr] : row);\n      const count = selected.filter((item: any) => currentList.includes(item)).length;\n\n      setSelectAllState(count === currentList.length ? 'all' : count > 0 ? 'some' : 'none');\n    }\n  }, [currentPageRows, multiSelect, selected, keyExpr])\n\n  /**\n   * Takes care of remote pagination.\n   * Works only in case remote pagination is set to true.\n   */\n  React.useEffect(() => {\n    if (remoteOperations) {\n      setCurrentPageRows(rows);\n\n      // Let's assign pagination values\n      setFrom(pagination?.from);\n      setTo(pagination?.to);\n      setTotal(pagination?.total);\n      setCurrentPage(pagination?.currentPage!);\n      setRowsPerPage(pagination?.rowsPerPage!);\n    }\n  }, [remoteOperations, pagination, rows]);\n\n  /**\n   * Sets number of rows to display when accordion.\n   */\n  React.useEffect(() => {\n    if (!accordion) return;\n\n    setRowsPerPage(isCollapsed ? collapsedRows || 10 : rows.length);\n  }, [rows, accordion, collapsedRows, isCollapsed])\n\n  React.useEffect(() => {\n    if (!accordion) return;\n\n    setIsCollapsed(!!collapsed);\n  }, [accordion, collapsed])\n\n  /**\n   * Filters out a rows by specific column filters and sorts them if any sorting is set.\n   * @returns Filtered and sorted rows.\n   */\n  const filterAndSortRows = (): any[] => {\n    let tmpFilteredRows = rows.filter((row) => {\n      // Let's start with matched filter criteria\n      let matchFilterCriteria = true;\n\n      // Let's go through columns\n      for (const column of columns) {\n        // Let's check if filter value is specified for the column\n        // And if it doesn't match the current row column value\n        // Then let's update match filter criteria to failed\n        if (column.filterValue && row[column.key].toLowerCase().indexOf(column.filterValue.toLowerCase()) === -1) {\n          matchFilterCriteria = false;\n        }\n      }\n\n      // Let's return row only in case match filter criteria succeeds\n      if (matchFilterCriteria) {\n        return row;\n      }\n    });\n\n    // Let's apply sorting if needed\n    if (!!sort?.column && !!sort?.direction) {\n      // Let's sort the rows\n      tmpFilteredRows.sort((a, b) => {\n        if (a[sort.column!] > b[sort.column!]) {\n          return sort.direction! === 'asc' ? 1 : -1;\n        } else if (a[sort.column!] < b[sort.column!]) {\n          return sort.direction! === 'asc' ? -1 : 1;\n        } else {\n          return 0;\n        }\n      });\n    }\n\n    // Let's return filtered rows\n    return tmpFilteredRows;\n  };\n\n  /**\n   * Takes care of local pagination.\n   * Works only in case remote pagination is not defined or is set to false.\n   */\n  React.useEffect(() => {\n    if (!remoteOperations) {\n      // Let's retrieve temporary filtered rows and update globally filtered rows\n      const tmpFilteredRows = filterAndSortRows();\n      setFilteredRows(tmpFilteredRows);\n      setTotal(tmpFilteredRows.length);\n\n      // Assign rows from and rows to\n      const rowsFrom = (currentPage - 1) * rowsPerPage;\n      const rowsTo = rowsFrom + rowsPerPage >= tmpFilteredRows.length ? tmpFilteredRows.length : rowsFrom + rowsPerPage;\n\n      // Set from and to values\n      setFrom(rowsFrom + 1);\n      setTo(rowsTo);\n\n      // Filter out the rows\n      setCurrentPageRows(tmpFilteredRows.slice(rowsFrom, rowsTo));\n    }\n  }, [rowsPerPage, rows, currentPage, columns, sort, remoteOperations]);\n\n\n  /**\n   * Applies a specific sorting to a column.\n   * If no sorting exists, then applies ascending initially\n   * @param column - Column to which sorting should be applied.\n   */\n  const sortTableColumn = (column: TableColumn): void => {\n    let columnKey = '';\n    let sortDirection: TableSortingDirection | undefined = undefined;\n\n    if (sort?.column !== column.key) {\n      columnKey = column.key;\n      sortDirection = 'asc';\n    } else {\n      if (sort?.direction === 'desc') {\n        columnKey = '';\n        sortDirection = undefined;\n      } else {\n        columnKey = sort.column;\n        sortDirection = sort.direction === 'asc' ? 'desc' : 'asc';\n      }\n    }\n\n    if(columnKey == '')\n      setSort(undefined);\n    else\n      setSort({column: columnKey, direction: sortDirection!});\n\n    remoteOperations && onTriggerSortingChange && onTriggerSortingChange(columnKey, sortDirection);\n  };\n\n  /**\n   * Navigates user back to the previous page and updates the current table page.\n   */\n  const previousPage = () => {\n    if (remoteOperations) {\n      // Let's inform parent component about page change\n      if (onPreviousPageClick) {\n        onPreviousPageClick();\n      }\n    } else {\n      // Let's change the page within the component\n      setCurrentPage(currentPage > 1 ? currentPage - 1 : 1);\n    }\n  };\n\n  /**\n   * Navigates user to the next page and updates the current table page.\n   */\n  const nextPage = () => {\n    if (remoteOperations) {\n      // Let's inform parent component about page change\n      if (onNextPageClick) {\n        onNextPageClick();\n      }\n    } else {\n      // Let's change the page within the component\n      setCurrentPage(currentPage * rowsPerPage >= filteredRows.length ? currentPage : currentPage + 1);\n    }\n  };\n\n  /**\n   * Updates the rows per page value and refreshes the table content accordingly.\n   * @param value - Newly selected rows per page value.\n   */\n  const changeRowsPerPage = (value: number) => {\n    // Let's check if we are using remote pagination\n    if (remoteOperations) {\n      // Inform parent component about rows per page change\n      if (onRowsPerPageChange) {\n        onRowsPerPageChange(value);\n      }\n    } else {\n      // Let's reset current page to 1\n      setCurrentPage(1);\n    }\n\n    // Let's set rows per page\n    setRowsPerPage(value);\n  };\n\n\n  /**\n   * Function which is called when a mouse click happens on a row to pass data to the parent component.\n   * @param row - Row in which the link is located.\n   */\n  const onRowClick = (row: any): void => {\n    const selectedText = window?.getSelection()?.toString();\n\n    if (selectedText?.length === 0 && selectable) {\n      const value = keyExpr ? row[keyExpr] : row;\n      let currentSelection = value;\n      if (!!multiSelect) {\n        const existing = selected?.indexOf(value);\n        if (existing > -1) {\n          currentSelection = [...selected];\n          currentSelection.splice(existing, 1);\n        } else {\n          currentSelection = [...selected, currentSelection];\n        }\n      }\n\n      setSelected(currentSelection)\n      props.onSelectionChange && props.onSelectionChange(currentSelection);\n    }\n  };\n\n  /**\n   * Function which is called when user clicks checkbox to select or deselect all rows.\n   */\n  const onSelectAllClick = () => {\n    const currentList = currentPageRows.map(row => keyExpr ? row[keyExpr] : row);\n\n    switch (selectAllState) {\n      case 'all':\n        setSelected([...selected].filter(item => !currentList.includes(item)));\n        setSelectAllState('none');\n        break;\n      case 'none':\n        setSelected([...selected, ...currentList]);\n        setSelectAllState('all');\n        break;\n      case 'some':\n        setSelected([...selected, ...currentList.filter(item => !selected.includes(item))]);\n        setSelectAllState('all');\n        break;\n    }\n  };\n\n  /**\n   * Return Table component.\n   */\n  return (\n    <TableWrapper className={props.border ? 'border' : undefined}>\n      <TableHeader {...props}/>\n      <TableBody {...props}\n                 currentPageRows={currentPageRows}\n                 selected={selected}\n                 onRowClick={onRowClick}\n                 sortByColumn={sortTableColumn}\n                 onSelectAllClick={onSelectAllClick}\n                 sortProps={sort}\n                 selectAllState={selectAllState}/>\n      <TableFooter {...props}\n                   onRowsPerPageChange={changeRowsPerPage}\n                   rowsPerPage={rowsPerPage}\n                   setIsCollapsed={setIsCollapsed}\n                   isCollapsed={isCollapsed}\n                   from={from}\n                   to={to}\n                   total={total}\n                   nextPage={nextPage}\n                   prevPage={previousPage}/>\n      {showLoadingIndicator && (\n        <StyledTableSpinner>\n          <LoadingIndicator size={Size.Medium}/>\n        </StyledTableSpinner>\n      )}\n    </TableWrapper>\n  );\n};\n\nexport default Table;\n"],"mappings":"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"}

package/dist/Table/Table.js

@@ -355,6 +355,7 @@ var Table = function Table(props) {
    * Return Table component.
    */
   return /*#__PURE__*/_jsxs(TableWrapper, {
+    className: props.border ? 'border' : undefined,
     children: [/*#__PURE__*/_jsx(TableHeader, _objectSpread({}, props)), /*#__PURE__*/_jsx(TableBody, _objectSpread(_objectSpread({}, props), {}, {
       currentPageRows: currentPageRows,
       selected: selected,

package/dist/Table/Table.js.map

@@ -1 +1 @@
-{"version":3,"file":"Table.js","names":["React","Size","StyledTableSpinner","TableWrapper","LoadingIndicator","TableHeader","TableFooter","TableBody","Table","props","onPreviousPageClick","onNextPageClick","onRowsPerPageChange","onTriggerSortingChange","columns","rows","remoteOperations","pagination","showLoadingIndicator","selectable","multiSelect","keyExpr","sortProps","accordion","collapsed","collapsedRows","rowsPerPageLabel","useState","rowsPerPage","setRowsPerPage","filteredRows","setFilteredRows","currentPageRows","setCurrentPageRows","currentPage","setCurrentPage","sort","setSort","from","setFrom","to","setTo","total","setTotal","isCollapsed","setIsCollapsed","selectAllState","setSelectAllState","undefined","selected","setSelected","useEffect","selectedRows","currentList","map","row","count","filter","item","includes","length","filterAndSortRows","tmpFilteredRows","matchFilterCriteria","column","filterValue","key","toLowerCase","indexOf","direction","a","b","rowsFrom","rowsTo","slice","sortTableColumn","columnKey","sortDirection","previousPage","nextPage","changeRowsPerPage","value","onRowClick","selectedText","window","getSelection","toString","currentSelection","existing","splice","onSelectionChange","onSelectAllClick","Medium"],"sources":["../../src/Table/Table.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom components.\n */\nimport {Size} from '../types'\n\n/**\n * Import custom styles.\n */\nimport {StyledTable, StyledTableSpinner, TableWrapper} from './TableStyles';\n\n/**\n * Import custom types.\n */\nimport {TableProps, TableColumn, TableSortingDirection, TableSortProps} from './TableTypes';\nimport {LoadingIndicator} from '../LoadingIndicator';\nimport TableHeader from './TableHeaders';\nimport TableFooter from './TableFooter';\nimport TableBody from './TableBody';\n\nconst Table: React.FunctionComponent<TableProps> = (props: TableProps) => {\n  let {\n    onPreviousPageClick,\n    onNextPageClick,\n    onRowsPerPageChange,\n    onTriggerSortingChange,\n    columns,\n    rows,\n    remoteOperations,\n    pagination,\n    showLoadingIndicator,\n    selectable,\n    multiSelect,\n    keyExpr,\n    sortProps,\n    accordion,\n    collapsed = true,\n    collapsedRows,\n    rowsPerPageLabel\n  } = props;\n\n  // States used within the component\n  const [rowsPerPage, setRowsPerPage] = React.useState<number>(10);\n  const [filteredRows, setFilteredRows] = React.useState<any[]>([]);\n  const [currentPageRows, setCurrentPageRows] = React.useState<any[]>([]);\n  const [currentPage, setCurrentPage] = React.useState<number>(1);\n  const [sort, setSort] = React.useState<TableSortProps | undefined>(sortProps);\n  const [from, setFrom] = React.useState<number>();\n  const [to, setTo] = React.useState<number>();\n  const [total, setTotal] = React.useState<number>();\n\n  const [isCollapsed, setIsCollapsed] = React.useState(true);\n\n  const [selectAllState, setSelectAllState] = React.useState<'all' | 'some' | 'none'>('none');\n\n  const [selected, setSelected] = React.useState<any | any[]>(multiSelect ? [] : undefined);\n\n  React.useEffect(() => {\n    setSort(sortProps);\n  }, [sortProps])\n\n  React.useEffect(() => {\n    setSelected(props.selectedRows || (multiSelect ? [] : undefined))\n  }, [props.selectedRows, multiSelect])\n\n  /**\n   * update select all checkbox state\n   */\n  React.useEffect(() => {\n    if (multiSelect) {\n      const currentList = currentPageRows.map(row => keyExpr ? row[keyExpr] : row);\n      const count = selected.filter((item: any) => currentList.includes(item)).length;\n\n      setSelectAllState(count === currentList.length ? 'all' : count > 0 ? 'some' : 'none');\n    }\n  }, [currentPageRows, multiSelect, selected, keyExpr])\n\n  /**\n   * Takes care of remote pagination.\n   * Works only in case remote pagination is set to true.\n   */\n  React.useEffect(() => {\n    if (remoteOperations) {\n      setCurrentPageRows(rows);\n\n      // Let's assign pagination values\n      setFrom(pagination?.from);\n      setTo(pagination?.to);\n      setTotal(pagination?.total);\n      setCurrentPage(pagination?.currentPage!);\n      setRowsPerPage(pagination?.rowsPerPage!);\n    }\n  }, [remoteOperations, pagination, rows]);\n\n  /**\n   * Sets number of rows to display when accordion.\n   */\n  React.useEffect(() => {\n    if (!accordion) return;\n\n    setRowsPerPage(isCollapsed ? collapsedRows || 10 : rows.length);\n  }, [rows, accordion, collapsedRows, isCollapsed])\n\n  React.useEffect(() => {\n    if (!accordion) return;\n\n    setIsCollapsed(!!collapsed);\n  }, [accordion, collapsed])\n\n  /**\n   * Filters out a rows by specific column filters and sorts them if any sorting is set.\n   * @returns Filtered and sorted rows.\n   */\n  const filterAndSortRows = (): any[] => {\n    let tmpFilteredRows = rows.filter((row) => {\n      // Let's start with matched filter criteria\n      let matchFilterCriteria = true;\n\n      // Let's go through columns\n      for (const column of columns) {\n        // Let's check if filter value is specified for the column\n        // And if it doesn't match the current row column value\n        // Then let's update match filter criteria to failed\n        if (column.filterValue && row[column.key].toLowerCase().indexOf(column.filterValue.toLowerCase()) === -1) {\n          matchFilterCriteria = false;\n        }\n      }\n\n      // Let's return row only in case match filter criteria succeeds\n      if (matchFilterCriteria) {\n        return row;\n      }\n    });\n\n    // Let's apply sorting if needed\n    if (!!sort?.column && !!sort?.direction) {\n      // Let's sort the rows\n      tmpFilteredRows.sort((a, b) => {\n        if (a[sort.column!] > b[sort.column!]) {\n          return sort.direction! === 'asc' ? 1 : -1;\n        } else if (a[sort.column!] < b[sort.column!]) {\n          return sort.direction! === 'asc' ? -1 : 1;\n        } else {\n          return 0;\n        }\n      });\n    }\n\n    // Let's return filtered rows\n    return tmpFilteredRows;\n  };\n\n  /**\n   * Takes care of local pagination.\n   * Works only in case remote pagination is not defined or is set to false.\n   */\n  React.useEffect(() => {\n    if (!remoteOperations) {\n      // Let's retrieve temporary filtered rows and update globally filtered rows\n      const tmpFilteredRows = filterAndSortRows();\n      setFilteredRows(tmpFilteredRows);\n      setTotal(tmpFilteredRows.length);\n\n      // Assign rows from and rows to\n      const rowsFrom = (currentPage - 1) * rowsPerPage;\n      const rowsTo = rowsFrom + rowsPerPage >= tmpFilteredRows.length ? tmpFilteredRows.length : rowsFrom + rowsPerPage;\n\n      // Set from and to values\n      setFrom(rowsFrom + 1);\n      setTo(rowsTo);\n\n      // Filter out the rows\n      setCurrentPageRows(tmpFilteredRows.slice(rowsFrom, rowsTo));\n    }\n  }, [rowsPerPage, rows, currentPage, columns, sort, remoteOperations]);\n\n\n  /**\n   * Applies a specific sorting to a column.\n   * If no sorting exists, then applies ascending initially\n   * @param column - Column to which sorting should be applied.\n   */\n  const sortTableColumn = (column: TableColumn): void => {\n    let columnKey = '';\n    let sortDirection: TableSortingDirection | undefined = undefined;\n\n    if (sort?.column !== column.key) {\n      columnKey = column.key;\n      sortDirection = 'asc';\n    } else {\n      if (sort?.direction === 'desc') {\n        columnKey = '';\n        sortDirection = undefined;\n      } else {\n        columnKey = sort.column;\n        sortDirection = sort.direction === 'asc' ? 'desc' : 'asc';\n      }\n    }\n\n    if(columnKey == '')\n      setSort(undefined);\n    else\n      setSort({column: columnKey, direction: sortDirection!});\n\n    remoteOperations && onTriggerSortingChange && onTriggerSortingChange(columnKey, sortDirection);\n  };\n\n  /**\n   * Navigates user back to the previous page and updates the current table page.\n   */\n  const previousPage = () => {\n    if (remoteOperations) {\n      // Let's inform parent component about page change\n      if (onPreviousPageClick) {\n        onPreviousPageClick();\n      }\n    } else {\n      // Let's change the page within the component\n      setCurrentPage(currentPage > 1 ? currentPage - 1 : 1);\n    }\n  };\n\n  /**\n   * Navigates user to the next page and updates the current table page.\n   */\n  const nextPage = () => {\n    if (remoteOperations) {\n      // Let's inform parent component about page change\n      if (onNextPageClick) {\n        onNextPageClick();\n      }\n    } else {\n      // Let's change the page within the component\n      setCurrentPage(currentPage * rowsPerPage >= filteredRows.length ? currentPage : currentPage + 1);\n    }\n  };\n\n  /**\n   * Updates the rows per page value and refreshes the table content accordingly.\n   * @param value - Newly selected rows per page value.\n   */\n  const changeRowsPerPage = (value: number) => {\n    // Let's check if we are using remote pagination\n    if (remoteOperations) {\n      // Inform parent component about rows per page change\n      if (onRowsPerPageChange) {\n        onRowsPerPageChange(value);\n      }\n    } else {\n      // Let's reset current page to 1\n      setCurrentPage(1);\n    }\n\n    // Let's set rows per page\n    setRowsPerPage(value);\n  };\n\n\n  /**\n   * Function which is called when a mouse click happens on a row to pass data to the parent component.\n   * @param row - Row in which the link is located.\n   */\n  const onRowClick = (row: any): void => {\n    const selectedText = window?.getSelection()?.toString();\n\n    if (selectedText?.length === 0 && selectable) {\n      const value = keyExpr ? row[keyExpr] : row;\n      let currentSelection = value;\n      if (!!multiSelect) {\n        const existing = selected?.indexOf(value);\n        if (existing > -1) {\n          currentSelection = [...selected];\n          currentSelection.splice(existing, 1);\n        } else {\n          currentSelection = [...selected, currentSelection];\n        }\n      }\n\n      setSelected(currentSelection)\n      props.onSelectionChange && props.onSelectionChange(currentSelection);\n    }\n  };\n\n  /**\n   * Function which is called when user clicks checkbox to select or deselect all rows.\n   */\n  const onSelectAllClick = () => {\n    const currentList = currentPageRows.map(row => keyExpr ? row[keyExpr] : row);\n\n    switch (selectAllState) {\n      case 'all':\n        setSelected([...selected].filter(item => !currentList.includes(item)));\n        setSelectAllState('none');\n        break;\n      case 'none':\n        setSelected([...selected, ...currentList]);\n        setSelectAllState('all');\n        break;\n      case 'some':\n        setSelected([...selected, ...currentList.filter(item => !selected.includes(item))]);\n        setSelectAllState('all');\n        break;\n    }\n  };\n\n  /**\n   * Return Table component.\n   */\n  return (\n    <TableWrapper>\n      <TableHeader {...props}/>\n      <TableBody {...props}\n                 currentPageRows={currentPageRows}\n                 selected={selected}\n                 onRowClick={onRowClick}\n                 sortByColumn={sortTableColumn}\n                 onSelectAllClick={onSelectAllClick}\n                 sortProps={sort}\n                 selectAllState={selectAllState}/>\n      <TableFooter {...props}\n                   onRowsPerPageChange={changeRowsPerPage}\n                   rowsPerPage={rowsPerPage}\n                   setIsCollapsed={setIsCollapsed}\n                   isCollapsed={isCollapsed}\n                   from={from}\n                   to={to}\n                   total={total}\n                   nextPage={nextPage}\n                   prevPage={previousPage}/>\n      {showLoadingIndicator && (\n        <StyledTableSpinner>\n          <LoadingIndicator size={Size.Medium}/>\n        </StyledTableSpinner>\n      )}\n    </TableWrapper>\n  );\n};\n\nexport default Table;\n"],"mappings":"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"}
+{"version":3,"file":"Table.js","names":["React","Size","StyledTableSpinner","TableWrapper","LoadingIndicator","TableHeader","TableFooter","TableBody","Table","props","onPreviousPageClick","onNextPageClick","onRowsPerPageChange","onTriggerSortingChange","columns","rows","remoteOperations","pagination","showLoadingIndicator","selectable","multiSelect","keyExpr","sortProps","accordion","collapsed","collapsedRows","rowsPerPageLabel","useState","rowsPerPage","setRowsPerPage","filteredRows","setFilteredRows","currentPageRows","setCurrentPageRows","currentPage","setCurrentPage","sort","setSort","from","setFrom","to","setTo","total","setTotal","isCollapsed","setIsCollapsed","selectAllState","setSelectAllState","undefined","selected","setSelected","useEffect","selectedRows","currentList","map","row","count","filter","item","includes","length","filterAndSortRows","tmpFilteredRows","matchFilterCriteria","column","filterValue","key","toLowerCase","indexOf","direction","a","b","rowsFrom","rowsTo","slice","sortTableColumn","columnKey","sortDirection","previousPage","nextPage","changeRowsPerPage","value","onRowClick","selectedText","window","getSelection","toString","currentSelection","existing","splice","onSelectionChange","onSelectAllClick","border","Medium"],"sources":["../../src/Table/Table.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom components.\n */\nimport {Size} from '../types'\n\n/**\n * Import custom styles.\n */\nimport {StyledTable, StyledTableSpinner, TableWrapper} from './TableStyles';\n\n/**\n * Import custom types.\n */\nimport {TableProps, TableColumn, TableSortingDirection, TableSortProps} from './TableTypes';\nimport {LoadingIndicator} from '../LoadingIndicator';\nimport TableHeader from './TableHeaders';\nimport TableFooter from './TableFooter';\nimport TableBody from './TableBody';\n\nconst Table: React.FunctionComponent<TableProps> = (props: TableProps) => {\n  let {\n    onPreviousPageClick,\n    onNextPageClick,\n    onRowsPerPageChange,\n    onTriggerSortingChange,\n    columns,\n    rows,\n    remoteOperations,\n    pagination,\n    showLoadingIndicator,\n    selectable,\n    multiSelect,\n    keyExpr,\n    sortProps,\n    accordion,\n    collapsed = true,\n    collapsedRows,\n    rowsPerPageLabel\n  } = props;\n\n  // States used within the component\n  const [rowsPerPage, setRowsPerPage] = React.useState<number>(10);\n  const [filteredRows, setFilteredRows] = React.useState<any[]>([]);\n  const [currentPageRows, setCurrentPageRows] = React.useState<any[]>([]);\n  const [currentPage, setCurrentPage] = React.useState<number>(1);\n  const [sort, setSort] = React.useState<TableSortProps | undefined>(sortProps);\n  const [from, setFrom] = React.useState<number>();\n  const [to, setTo] = React.useState<number>();\n  const [total, setTotal] = React.useState<number>();\n\n  const [isCollapsed, setIsCollapsed] = React.useState(true);\n\n  const [selectAllState, setSelectAllState] = React.useState<'all' | 'some' | 'none'>('none');\n\n  const [selected, setSelected] = React.useState<any | any[]>(multiSelect ? [] : undefined);\n\n  React.useEffect(() => {\n    setSort(sortProps);\n  }, [sortProps])\n\n  React.useEffect(() => {\n    setSelected(props.selectedRows || (multiSelect ? [] : undefined))\n  }, [props.selectedRows, multiSelect])\n\n  /**\n   * update select all checkbox state\n   */\n  React.useEffect(() => {\n    if (multiSelect) {\n      const currentList = currentPageRows.map(row => keyExpr ? row[keyExpr] : row);\n      const count = selected.filter((item: any) => currentList.includes(item)).length;\n\n      setSelectAllState(count === currentList.length ? 'all' : count > 0 ? 'some' : 'none');\n    }\n  }, [currentPageRows, multiSelect, selected, keyExpr])\n\n  /**\n   * Takes care of remote pagination.\n   * Works only in case remote pagination is set to true.\n   */\n  React.useEffect(() => {\n    if (remoteOperations) {\n      setCurrentPageRows(rows);\n\n      // Let's assign pagination values\n      setFrom(pagination?.from);\n      setTo(pagination?.to);\n      setTotal(pagination?.total);\n      setCurrentPage(pagination?.currentPage!);\n      setRowsPerPage(pagination?.rowsPerPage!);\n    }\n  }, [remoteOperations, pagination, rows]);\n\n  /**\n   * Sets number of rows to display when accordion.\n   */\n  React.useEffect(() => {\n    if (!accordion) return;\n\n    setRowsPerPage(isCollapsed ? collapsedRows || 10 : rows.length);\n  }, [rows, accordion, collapsedRows, isCollapsed])\n\n  React.useEffect(() => {\n    if (!accordion) return;\n\n    setIsCollapsed(!!collapsed);\n  }, [accordion, collapsed])\n\n  /**\n   * Filters out a rows by specific column filters and sorts them if any sorting is set.\n   * @returns Filtered and sorted rows.\n   */\n  const filterAndSortRows = (): any[] => {\n    let tmpFilteredRows = rows.filter((row) => {\n      // Let's start with matched filter criteria\n      let matchFilterCriteria = true;\n\n      // Let's go through columns\n      for (const column of columns) {\n        // Let's check if filter value is specified for the column\n        // And if it doesn't match the current row column value\n        // Then let's update match filter criteria to failed\n        if (column.filterValue && row[column.key].toLowerCase().indexOf(column.filterValue.toLowerCase()) === -1) {\n          matchFilterCriteria = false;\n        }\n      }\n\n      // Let's return row only in case match filter criteria succeeds\n      if (matchFilterCriteria) {\n        return row;\n      }\n    });\n\n    // Let's apply sorting if needed\n    if (!!sort?.column && !!sort?.direction) {\n      // Let's sort the rows\n      tmpFilteredRows.sort((a, b) => {\n        if (a[sort.column!] > b[sort.column!]) {\n          return sort.direction! === 'asc' ? 1 : -1;\n        } else if (a[sort.column!] < b[sort.column!]) {\n          return sort.direction! === 'asc' ? -1 : 1;\n        } else {\n          return 0;\n        }\n      });\n    }\n\n    // Let's return filtered rows\n    return tmpFilteredRows;\n  };\n\n  /**\n   * Takes care of local pagination.\n   * Works only in case remote pagination is not defined or is set to false.\n   */\n  React.useEffect(() => {\n    if (!remoteOperations) {\n      // Let's retrieve temporary filtered rows and update globally filtered rows\n      const tmpFilteredRows = filterAndSortRows();\n      setFilteredRows(tmpFilteredRows);\n      setTotal(tmpFilteredRows.length);\n\n      // Assign rows from and rows to\n      const rowsFrom = (currentPage - 1) * rowsPerPage;\n      const rowsTo = rowsFrom + rowsPerPage >= tmpFilteredRows.length ? tmpFilteredRows.length : rowsFrom + rowsPerPage;\n\n      // Set from and to values\n      setFrom(rowsFrom + 1);\n      setTo(rowsTo);\n\n      // Filter out the rows\n      setCurrentPageRows(tmpFilteredRows.slice(rowsFrom, rowsTo));\n    }\n  }, [rowsPerPage, rows, currentPage, columns, sort, remoteOperations]);\n\n\n  /**\n   * Applies a specific sorting to a column.\n   * If no sorting exists, then applies ascending initially\n   * @param column - Column to which sorting should be applied.\n   */\n  const sortTableColumn = (column: TableColumn): void => {\n    let columnKey = '';\n    let sortDirection: TableSortingDirection | undefined = undefined;\n\n    if (sort?.column !== column.key) {\n      columnKey = column.key;\n      sortDirection = 'asc';\n    } else {\n      if (sort?.direction === 'desc') {\n        columnKey = '';\n        sortDirection = undefined;\n      } else {\n        columnKey = sort.column;\n        sortDirection = sort.direction === 'asc' ? 'desc' : 'asc';\n      }\n    }\n\n    if(columnKey == '')\n      setSort(undefined);\n    else\n      setSort({column: columnKey, direction: sortDirection!});\n\n    remoteOperations && onTriggerSortingChange && onTriggerSortingChange(columnKey, sortDirection);\n  };\n\n  /**\n   * Navigates user back to the previous page and updates the current table page.\n   */\n  const previousPage = () => {\n    if (remoteOperations) {\n      // Let's inform parent component about page change\n      if (onPreviousPageClick) {\n        onPreviousPageClick();\n      }\n    } else {\n      // Let's change the page within the component\n      setCurrentPage(currentPage > 1 ? currentPage - 1 : 1);\n    }\n  };\n\n  /**\n   * Navigates user to the next page and updates the current table page.\n   */\n  const nextPage = () => {\n    if (remoteOperations) {\n      // Let's inform parent component about page change\n      if (onNextPageClick) {\n        onNextPageClick();\n      }\n    } else {\n      // Let's change the page within the component\n      setCurrentPage(currentPage * rowsPerPage >= filteredRows.length ? currentPage : currentPage + 1);\n    }\n  };\n\n  /**\n   * Updates the rows per page value and refreshes the table content accordingly.\n   * @param value - Newly selected rows per page value.\n   */\n  const changeRowsPerPage = (value: number) => {\n    // Let's check if we are using remote pagination\n    if (remoteOperations) {\n      // Inform parent component about rows per page change\n      if (onRowsPerPageChange) {\n        onRowsPerPageChange(value);\n      }\n    } else {\n      // Let's reset current page to 1\n      setCurrentPage(1);\n    }\n\n    // Let's set rows per page\n    setRowsPerPage(value);\n  };\n\n\n  /**\n   * Function which is called when a mouse click happens on a row to pass data to the parent component.\n   * @param row - Row in which the link is located.\n   */\n  const onRowClick = (row: any): void => {\n    const selectedText = window?.getSelection()?.toString();\n\n    if (selectedText?.length === 0 && selectable) {\n      const value = keyExpr ? row[keyExpr] : row;\n      let currentSelection = value;\n      if (!!multiSelect) {\n        const existing = selected?.indexOf(value);\n        if (existing > -1) {\n          currentSelection = [...selected];\n          currentSelection.splice(existing, 1);\n        } else {\n          currentSelection = [...selected, currentSelection];\n        }\n      }\n\n      setSelected(currentSelection)\n      props.onSelectionChange && props.onSelectionChange(currentSelection);\n    }\n  };\n\n  /**\n   * Function which is called when user clicks checkbox to select or deselect all rows.\n   */\n  const onSelectAllClick = () => {\n    const currentList = currentPageRows.map(row => keyExpr ? row[keyExpr] : row);\n\n    switch (selectAllState) {\n      case 'all':\n        setSelected([...selected].filter(item => !currentList.includes(item)));\n        setSelectAllState('none');\n        break;\n      case 'none':\n        setSelected([...selected, ...currentList]);\n        setSelectAllState('all');\n        break;\n      case 'some':\n        setSelected([...selected, ...currentList.filter(item => !selected.includes(item))]);\n        setSelectAllState('all');\n        break;\n    }\n  };\n\n  /**\n   * Return Table component.\n   */\n  return (\n    <TableWrapper className={props.border ? 'border' : undefined}>\n      <TableHeader {...props}/>\n      <TableBody {...props}\n                 currentPageRows={currentPageRows}\n                 selected={selected}\n                 onRowClick={onRowClick}\n                 sortByColumn={sortTableColumn}\n                 onSelectAllClick={onSelectAllClick}\n                 sortProps={sort}\n                 selectAllState={selectAllState}/>\n      <TableFooter {...props}\n                   onRowsPerPageChange={changeRowsPerPage}\n                   rowsPerPage={rowsPerPage}\n                   setIsCollapsed={setIsCollapsed}\n                   isCollapsed={isCollapsed}\n                   from={from}\n                   to={to}\n                   total={total}\n                   nextPage={nextPage}\n                   prevPage={previousPage}/>\n      {showLoadingIndicator && (\n        <StyledTableSpinner>\n          <LoadingIndicator size={Size.Medium}/>\n        </StyledTableSpinner>\n      )}\n    </TableWrapper>\n  );\n};\n\nexport default Table;\n"],"mappings":";;;;;;;;AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAK,MAAM,OAAO;;AAE9B;AACA;AACA;AACA,SAAQC,IAAI,QAAO,UAAU;;AAE7B;AACA;AACA;AACA,SAAqBC,kBAAkB,EAAEC,YAAY,QAAO,eAAe;;AAE3E;AACA;AACA;;AAEA,SAAQC,gBAAgB,QAAO,qBAAqB;AACpD,OAAOC,WAAW,MAAM,gBAAgB;AACxC,OAAOC,WAAW,MAAM,eAAe;AACvC,OAAOC,SAAS,MAAM,aAAa;AAAC;AAAA;AAEpC,IAAMC,KAA0C,GAAG,SAA7CA,KAA0C,CAAIC,KAAiB,EAAK;EACxE,IACEC,mBAAmB,GAiBjBD,KAAK,CAjBPC,mBAAmB;IACnBC,eAAe,GAgBbF,KAAK,CAhBPE,eAAe;IACfC,mBAAmB,GAejBH,KAAK,CAfPG,mBAAmB;IACnBC,sBAAsB,GAcpBJ,KAAK,CAdPI,sBAAsB;IACtBC,OAAO,GAaLL,KAAK,CAbPK,OAAO;IACPC,IAAI,GAYFN,KAAK,CAZPM,IAAI;IACJC,gBAAgB,GAWdP,KAAK,CAXPO,gBAAgB;IAChBC,UAAU,GAURR,KAAK,CAVPQ,UAAU;IACVC,oBAAoB,GASlBT,KAAK,CATPS,oBAAoB;IACpBC,UAAU,GAQRV,KAAK,CARPU,UAAU;IACVC,WAAW,GAOTX,KAAK,CAPPW,WAAW;IACXC,OAAO,GAMLZ,KAAK,CANPY,OAAO;IACPC,SAAS,GAKPb,KAAK,CALPa,SAAS;IACTC,SAAS,GAIPd,KAAK,CAJPc,SAAS;IAAA,mBAIPd,KAAK,CAHPe,SAAS;IAATA,SAAS,iCAAG,IAAI;IAChBC,aAAa,GAEXhB,KAAK,CAFPgB,aAAa;IACbC,gBAAgB,GACdjB,KAAK,CADPiB,gBAAgB;;EAGlB;EACA,sBAAsC1B,KAAK,CAAC2B,QAAQ,CAAS,EAAE,CAAC;IAAA;IAAzDC,WAAW;IAAEC,cAAc;EAClC,uBAAwC7B,KAAK,CAAC2B,QAAQ,CAAQ,EAAE,CAAC;IAAA;IAA1DG,YAAY;IAAEC,eAAe;EACpC,uBAA8C/B,KAAK,CAAC2B,QAAQ,CAAQ,EAAE,CAAC;IAAA;IAAhEK,eAAe;IAAEC,kBAAkB;EAC1C,uBAAsCjC,KAAK,CAAC2B,QAAQ,CAAS,CAAC,CAAC;IAAA;IAAxDO,WAAW;IAAEC,cAAc;EAClC,uBAAwBnC,KAAK,CAAC2B,QAAQ,CAA6BL,SAAS,CAAC;IAAA;IAAtEc,IAAI;IAAEC,OAAO;EACpB,wBAAwBrC,KAAK,CAAC2B,QAAQ,EAAU;IAAA;IAAzCW,IAAI;IAAEC,OAAO;EACpB,wBAAoBvC,KAAK,CAAC2B,QAAQ,EAAU;IAAA;IAArCa,EAAE;IAAEC,KAAK;EAChB,wBAA0BzC,KAAK,CAAC2B,QAAQ,EAAU;IAAA;IAA3Ce,KAAK;IAAEC,QAAQ;EAEtB,wBAAsC3C,KAAK,CAAC2B,QAAQ,CAAC,IAAI,CAAC;IAAA;IAAnDiB,WAAW;IAAEC,cAAc;EAElC,wBAA4C7C,KAAK,CAAC2B,QAAQ,CAA0B,MAAM,CAAC;IAAA;IAApFmB,cAAc;IAAEC,iBAAiB;EAExC,wBAAgC/C,KAAK,CAAC2B,QAAQ,CAAcP,WAAW,GAAG,EAAE,GAAG4B,SAAS,CAAC;IAAA;IAAlFC,QAAQ;IAAEC,WAAW;EAE5BlD,KAAK,CAACmD,SAAS,CAAC,YAAM;IACpBd,OAAO,CAACf,SAAS,CAAC;EACpB,CAAC,EAAE,CAACA,SAAS,CAAC,CAAC;EAEftB,KAAK,CAACmD,SAAS,CAAC,YAAM;IACpBD,WAAW,CAACzC,KAAK,CAAC2C,YAAY,KAAKhC,WAAW,GAAG,EAAE,GAAG4B,SAAS,CAAC,CAAC;EACnE,CAAC,EAAE,CAACvC,KAAK,CAAC2C,YAAY,EAAEhC,WAAW,CAAC,CAAC;;EAErC;AACF;AACA;EACEpB,KAAK,CAACmD,SAAS,CAAC,YAAM;IACpB,IAAI/B,WAAW,EAAE;MACf,IAAMiC,WAAW,GAAGrB,eAAe,CAACsB,GAAG,CAAC,UAAAC,GAAG;QAAA,OAAIlC,OAAO,GAAGkC,GAAG,CAAClC,OAAO,CAAC,GAAGkC,GAAG;MAAA,EAAC;MAC5E,IAAMC,KAAK,GAAGP,QAAQ,CAACQ,MAAM,CAAC,UAACC,IAAS;QAAA,OAAKL,WAAW,CAACM,QAAQ,CAACD,IAAI,CAAC;MAAA,EAAC,CAACE,MAAM;MAE/Eb,iBAAiB,CAACS,KAAK,KAAKH,WAAW,CAACO,MAAM,GAAG,KAAK,GAAGJ,KAAK,GAAG,CAAC,GAAG,MAAM,GAAG,MAAM,CAAC;IACvF;EACF,CAAC,EAAE,CAACxB,eAAe,EAAEZ,WAAW,EAAE6B,QAAQ,EAAE5B,OAAO,CAAC,CAAC;;EAErD;AACF;AACA;AACA;EACErB,KAAK,CAACmD,SAAS,CAAC,YAAM;IACpB,IAAInC,gBAAgB,EAAE;MACpBiB,kBAAkB,CAAClB,IAAI,CAAC;;MAExB;MACAwB,OAAO,CAACtB,UAAU,aAAVA,UAAU,uBAAVA,UAAU,CAAEqB,IAAI,CAAC;MACzBG,KAAK,CAACxB,UAAU,aAAVA,UAAU,uBAAVA,UAAU,CAAEuB,EAAE,CAAC;MACrBG,QAAQ,CAAC1B,UAAU,aAAVA,UAAU,uBAAVA,UAAU,CAAEyB,KAAK,CAAC;MAC3BP,cAAc,CAAClB,UAAU,aAAVA,UAAU,uBAAVA,UAAU,CAAEiB,WAAW,CAAE;MACxCL,cAAc,CAACZ,UAAU,aAAVA,UAAU,uBAAVA,UAAU,CAAEW,WAAW,CAAE;IAC1C;EACF,CAAC,EAAE,CAACZ,gBAAgB,EAAEC,UAAU,EAAEF,IAAI,CAAC,CAAC;;EAExC;AACF;AACA;EACEf,KAAK,CAACmD,SAAS,CAAC,YAAM;IACpB,IAAI,CAAC5B,SAAS,EAAE;IAEhBM,cAAc,CAACe,WAAW,GAAGnB,aAAa,IAAI,EAAE,GAAGV,IAAI,CAAC6C,MAAM,CAAC;EACjE,CAAC,EAAE,CAAC7C,IAAI,EAAEQ,SAAS,EAAEE,aAAa,EAAEmB,WAAW,CAAC,CAAC;EAEjD5C,KAAK,CAACmD,SAAS,CAAC,YAAM;IACpB,IAAI,CAAC5B,SAAS,EAAE;IAEhBsB,cAAc,CAAC,CAAC,CAACrB,SAAS,CAAC;EAC7B,CAAC,EAAE,CAACD,SAAS,EAAEC,SAAS,CAAC,CAAC;;EAE1B;AACF;AACA;AACA;EACE,IAAMqC,iBAAiB,GAAG,SAApBA,iBAAiB,GAAgB;IACrC,IAAIC,eAAe,GAAG/C,IAAI,CAAC0C,MAAM,CAAC,UAACF,GAAG,EAAK;MACzC;MACA,IAAIQ,mBAAmB,GAAG,IAAI;;MAE9B;MAAA,2CACqBjD,OAAO;QAAA;MAAA;QAA5B,oDAA8B;UAAA,IAAnBkD,MAAM;UACf;UACA;UACA;UACA,IAAIA,MAAM,CAACC,WAAW,IAAIV,GAAG,CAACS,MAAM,CAACE,GAAG,CAAC,CAACC,WAAW,EAAE,CAACC,OAAO,CAACJ,MAAM,CAACC,WAAW,CAACE,WAAW,EAAE,CAAC,KAAK,CAAC,CAAC,EAAE;YACxGJ,mBAAmB,GAAG,KAAK;UAC7B;QACF;;QAEA;MAAA;QAAA;MAAA;QAAA;MAAA;MACA,IAAIA,mBAAmB,EAAE;QACvB,OAAOR,GAAG;MACZ;IACF,CAAC,CAAC;;IAEF;IACA,IAAI,CAAC,EAACnB,IAAI,aAAJA,IAAI,eAAJA,IAAI,CAAE4B,MAAM,KAAI,CAAC,EAAC5B,IAAI,aAAJA,IAAI,eAAJA,IAAI,CAAEiC,SAAS,GAAE;MACvC;MACAP,eAAe,CAAC1B,IAAI,CAAC,UAACkC,CAAC,EAAEC,CAAC,EAAK;QAC7B,IAAID,CAAC,CAAClC,IAAI,CAAC4B,MAAM,CAAE,GAAGO,CAAC,CAACnC,IAAI,CAAC4B,MAAM,CAAE,EAAE;UACrC,OAAO5B,IAAI,CAACiC,SAAS,KAAM,KAAK,GAAG,CAAC,GAAG,CAAC,CAAC;QAC3C,CAAC,MAAM,IAAIC,CAAC,CAAClC,IAAI,CAAC4B,MAAM,CAAE,GAAGO,CAAC,CAACnC,IAAI,CAAC4B,MAAM,CAAE,EAAE;UAC5C,OAAO5B,IAAI,CAACiC,SAAS,KAAM,KAAK,GAAG,CAAC,CAAC,GAAG,CAAC;QAC3C,CAAC,MAAM;UACL,OAAO,CAAC;QACV;MACF,CAAC,CAAC;IACJ;;IAEA;IACA,OAAOP,eAAe;EACxB,CAAC;;EAED;AACF;AACA;AACA;EACE9D,KAAK,CAACmD,SAAS,CAAC,YAAM;IACpB,IAAI,CAACnC,gBAAgB,EAAE;MACrB;MACA,IAAM8C,eAAe,GAAGD,iBAAiB,EAAE;MAC3C9B,eAAe,CAAC+B,eAAe,CAAC;MAChCnB,QAAQ,CAACmB,eAAe,CAACF,MAAM,CAAC;;MAEhC;MACA,IAAMY,QAAQ,GAAG,CAACtC,WAAW,GAAG,CAAC,IAAIN,WAAW;MAChD,IAAM6C,MAAM,GAAGD,QAAQ,GAAG5C,WAAW,IAAIkC,eAAe,CAACF,MAAM,GAAGE,eAAe,CAACF,MAAM,GAAGY,QAAQ,GAAG5C,WAAW;;MAEjH;MACAW,OAAO,CAACiC,QAAQ,GAAG,CAAC,CAAC;MACrB/B,KAAK,CAACgC,MAAM,CAAC;;MAEb;MACAxC,kBAAkB,CAAC6B,eAAe,CAACY,KAAK,CAACF,QAAQ,EAAEC,MAAM,CAAC,CAAC;IAC7D;EACF,CAAC,EAAE,CAAC7C,WAAW,EAAEb,IAAI,EAAEmB,WAAW,EAAEpB,OAAO,EAAEsB,IAAI,EAAEpB,gBAAgB,CAAC,CAAC;;EAGrE;AACF;AACA;AACA;AACA;EACE,IAAM2D,eAAe,GAAG,SAAlBA,eAAe,CAAIX,MAAmB,EAAW;IACrD,IAAIY,SAAS,GAAG,EAAE;IAClB,IAAIC,aAAgD,GAAG7B,SAAS;IAEhE,IAAI,CAAAZ,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAE4B,MAAM,MAAKA,MAAM,CAACE,GAAG,EAAE;MAC/BU,SAAS,GAAGZ,MAAM,CAACE,GAAG;MACtBW,aAAa,GAAG,KAAK;IACvB,CAAC,MAAM;MACL,IAAI,CAAAzC,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEiC,SAAS,MAAK,MAAM,EAAE;QAC9BO,SAAS,GAAG,EAAE;QACdC,aAAa,GAAG7B,SAAS;MAC3B,CAAC,MAAM;QACL4B,SAAS,GAAGxC,IAAI,CAAC4B,MAAM;QACvBa,aAAa,GAAGzC,IAAI,CAACiC,SAAS,KAAK,KAAK,GAAG,MAAM,GAAG,KAAK;MAC3D;IACF;IAEA,IAAGO,SAAS,IAAI,EAAE,EAChBvC,OAAO,CAACW,SAAS,CAAC,CAAC,KAEnBX,OAAO,CAAC;MAAC2B,MAAM,EAAEY,SAAS;MAAEP,SAAS,EAAEQ;IAAc,CAAC,CAAC;IAEzD7D,gBAAgB,IAAIH,sBAAsB,IAAIA,sBAAsB,CAAC+D,SAAS,EAAEC,aAAa,CAAC;EAChG,CAAC;;EAED;AACF;AACA;EACE,IAAMC,YAAY,GAAG,SAAfA,YAAY,GAAS;IACzB,IAAI9D,gBAAgB,EAAE;MACpB;MACA,IAAIN,mBAAmB,EAAE;QACvBA,mBAAmB,EAAE;MACvB;IACF,CAAC,MAAM;MACL;MACAyB,cAAc,CAACD,WAAW,GAAG,CAAC,GAAGA,WAAW,GAAG,CAAC,GAAG,CAAC,CAAC;IACvD;EACF,CAAC;;EAED;AACF;AACA;EACE,IAAM6C,QAAQ,GAAG,SAAXA,QAAQ,GAAS;IACrB,IAAI/D,gBAAgB,EAAE;MACpB;MACA,IAAIL,eAAe,EAAE;QACnBA,eAAe,EAAE;MACnB;IACF,CAAC,MAAM;MACL;MACAwB,cAAc,CAACD,WAAW,GAAGN,WAAW,IAAIE,YAAY,CAAC8B,MAAM,GAAG1B,WAAW,GAAGA,WAAW,GAAG,CAAC,CAAC;IAClG;EACF,CAAC;;EAED;AACF;AACA;AACA;EACE,IAAM8C,iBAAiB,GAAG,SAApBA,iBAAiB,CAAIC,KAAa,EAAK;IAC3C;IACA,IAAIjE,gBAAgB,EAAE;MACpB;MACA,IAAIJ,mBAAmB,EAAE;QACvBA,mBAAmB,CAACqE,KAAK,CAAC;MAC5B;IACF,CAAC,MAAM;MACL;MACA9C,cAAc,CAAC,CAAC,CAAC;IACnB;;IAEA;IACAN,cAAc,CAACoD,KAAK,CAAC;EACvB,CAAC;;EAGD;AACF;AACA;AACA;EACE,IAAMC,UAAU,GAAG,SAAbA,UAAU,CAAI3B,GAAQ,EAAW;IAAA;IACrC,IAAM4B,YAAY,cAAGC,MAAM,oEAAN,QAAQC,YAAY,EAAE,yDAAtB,qBAAwBC,QAAQ,EAAE;IAEvD,IAAI,CAAAH,YAAY,aAAZA,YAAY,uBAAZA,YAAY,CAAEvB,MAAM,MAAK,CAAC,IAAIzC,UAAU,EAAE;MAC5C,IAAM8D,KAAK,GAAG5D,OAAO,GAAGkC,GAAG,CAAClC,OAAO,CAAC,GAAGkC,GAAG;MAC1C,IAAIgC,gBAAgB,GAAGN,KAAK;MAC5B,IAAI,CAAC,CAAC7D,WAAW,EAAE;QACjB,IAAMoE,QAAQ,GAAGvC,QAAQ,aAARA,QAAQ,uBAARA,QAAQ,CAAEmB,OAAO,CAACa,KAAK,CAAC;QACzC,IAAIO,QAAQ,GAAG,CAAC,CAAC,EAAE;UACjBD,gBAAgB,sBAAOtC,QAAQ,CAAC;UAChCsC,gBAAgB,CAACE,MAAM,CAACD,QAAQ,EAAE,CAAC,CAAC;QACtC,CAAC,MAAM;UACLD,gBAAgB,gCAAOtC,QAAQ,IAAEsC,gBAAgB,EAAC;QACpD;MACF;MAEArC,WAAW,CAACqC,gBAAgB,CAAC;MAC7B9E,KAAK,CAACiF,iBAAiB,IAAIjF,KAAK,CAACiF,iBAAiB,CAACH,gBAAgB,CAAC;IACtE;EACF,CAAC;;EAED;AACF;AACA;EACE,IAAMI,gBAAgB,GAAG,SAAnBA,gBAAgB,GAAS;IAC7B,IAAMtC,WAAW,GAAGrB,eAAe,CAACsB,GAAG,CAAC,UAAAC,GAAG;MAAA,OAAIlC,OAAO,GAAGkC,GAAG,CAAClC,OAAO,CAAC,GAAGkC,GAAG;IAAA,EAAC;IAE5E,QAAQT,cAAc;MACpB,KAAK,KAAK;QACRI,WAAW,CAAC,mBAAID,QAAQ,EAAEQ,MAAM,CAAC,UAAAC,IAAI;UAAA,OAAI,CAACL,WAAW,CAACM,QAAQ,CAACD,IAAI,CAAC;QAAA,EAAC,CAAC;QACtEX,iBAAiB,CAAC,MAAM,CAAC;QACzB;MACF,KAAK,MAAM;QACTG,WAAW,8BAAKD,QAAQ,sBAAKI,WAAW,GAAE;QAC1CN,iBAAiB,CAAC,KAAK,CAAC;QACxB;MACF,KAAK,MAAM;QACTG,WAAW,8BAAKD,QAAQ,sBAAKI,WAAW,CAACI,MAAM,CAAC,UAAAC,IAAI;UAAA,OAAI,CAACT,QAAQ,CAACU,QAAQ,CAACD,IAAI,CAAC;QAAA,EAAC,GAAE;QACnFX,iBAAiB,CAAC,KAAK,CAAC;QACxB;IAAM;EAEZ,CAAC;;EAED;AACF;AACA;EACE,oBACE,MAAC,YAAY;IAAC,SAAS,EAAEtC,KAAK,CAACmF,MAAM,GAAG,QAAQ,GAAG5C,SAAU;IAAA,wBAC3D,KAAC,WAAW,oBAAKvC,KAAK,EAAG,eACzB,KAAC,SAAS,kCAAKA,KAAK;MACT,eAAe,EAAEuB,eAAgB;MACjC,QAAQ,EAAEiB,QAAS;MACnB,UAAU,EAAEiC,UAAW;MACvB,YAAY,EAAEP,eAAgB;MAC9B,gBAAgB,EAAEgB,gBAAiB;MACnC,SAAS,EAAEvD,IAAK;MAChB,cAAc,EAAEU;IAAe,GAAE,eAC5C,KAAC,WAAW,kCAAKrC,KAAK;MACT,mBAAmB,EAAEuE,iBAAkB;MACvC,WAAW,EAAEpD,WAAY;MACzB,cAAc,EAAEiB,cAAe;MAC/B,WAAW,EAAED,WAAY;MACzB,IAAI,EAAEN,IAAK;MACX,EAAE,EAAEE,EAAG;MACP,KAAK,EAAEE,KAAM;MACb,QAAQ,EAAEqC,QAAS;MACnB,QAAQ,EAAED;IAAa,GAAE,EACrC5D,oBAAoB,iBACnB,KAAC,kBAAkB;MAAA,uBACjB,KAAC,gBAAgB;QAAC,IAAI,EAAEjB,IAAI,CAAC4F;MAAO;IAAE,EAEzC;EAAA,EACY;AAEnB,CAAC;AAED,eAAerF,KAAK"}

package/dist/Table/TableStyles.cjs

@@ -17,9 +17,9 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
  * Table styles
  */
 
-var TableWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n"])));
+var TableWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n\n  &.border{\n    border-left: 1px solid ", ";\n    border-right: 1px solid ", ";\n  }\n"])), _styles.COLORS.neutral_200, _styles.COLORS.neutral_200);
 exports.TableWrapper = TableWrapper;
-var StyledTable = _styledComponents.default.table(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  background: transparent;\n  width: 100%;\n\n  &.fixed {\n    table-layout: fixed;\n  }\n\n  &.auto {\n    table-layout: auto;\n  }\n"])));
+var StyledTable = _styledComponents.default.table(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  background: transparent;\n  border-collapse: collapse;\n  width: 100%;\n\n  &.fixed {\n    table-layout: fixed;\n  }\n\n  &.auto {\n    table-layout: auto;\n  }\n"])));
 exports.StyledTable = StyledTable;
 var StyledTableHeader = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n"])));
 exports.StyledTableHeader = StyledTableHeader;
@@ -37,11 +37,11 @@ var StyledTableHeaderColumnSortDirection = _styledComponents.default.span(_templ
 exports.StyledTableHeaderColumnSortDirection = StyledTableHeaderColumnSortDirection;
 var StyledTableHeaderColumn = _styledComponents.default.th(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  position: relative;\n  text-align: unset;\n  background-color: ", ";\n\n  //fixes header heights no idea why\n  height: 1px;\n\n  &.sortable {\n    cursor: pointer;\n\n    &:hover {\n      background-color: ", ";\n      color: ", ";\n      z-index: ", ";\n    }\n\n    &:active {\n      background-color: ", ";\n      color: ", ";\n      z-index: ", ";\n    }\n\n    &:focus {\n      ", "\n    }\n  }\n\n  &.left {\n    & > div {\n      justify-content: left;\n    }\n  }\n\n  &.right {\n    & > div {\n      justify-content: right;\n    }\n  }\n\n  &.center {\n    & > div {\n      justify-content: center;\n    }\n  }\n\n  &.sortable ", " > svg {\n    opacity: 0;\n  }\n\n  &.sortable.sorted ", " > svg {\n    opacity: 1;\n  }\n\n  &.sorted {\n    background-color: ", ";\n  }\n"])), (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Bold, _styles.COLORS.neutral_600), _styles.COLORS.white, _styles.COLORS.primary_20, _styles.COLORS.primary_700, _zIndexes.Z_INDEXES.hover, _styles.COLORS.primary_100, _styles.COLORS.primary_800, _zIndexes.Z_INDEXES.active, _styles.focusStyles, StyledTableHeaderColumnContent, StyledTableHeaderColumnContent, _styles.COLORS.neutral_20);
 exports.StyledTableHeaderColumn = StyledTableHeaderColumn;
-var StyledTableBodyRow = _styledComponents.default.tr(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  cursor: pointer;\n  position: relative;\n  outline: none;\n\n  &.selected{\n    background-color: ", ";\n  }\n  \n  &:hover {\n    background-color: ", ";\n    z-index: ", ";\n  }\n\n  &:focus {\n    ", "\n  }\n\n  &:active {\n    z-index: ", ";\n  }\n\n"])), _styles.COLORS.primary_100, _styles.COLORS.primary_200, _zIndexes.Z_INDEXES.hover, _styles.focusStyles, _zIndexes.Z_INDEXES.active);
+var StyledTableBodyRow = _styledComponents.default.tr(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  cursor: pointer;\n  position: relative;\n  outline: none;\n  background-color: ", ";\n  \n  &:not(:last-child) {\n    border-bottom: 1px solid ", ";\n  }\n\n  &.selected{\n    background-color: ", ";\n  }\n  \n  &:hover {\n    background-color: ", ";\n    z-index: ", ";\n  }\n\n  &:focus {\n    ", "\n  }\n\n  &:active {\n    z-index: ", ";\n  }\n\n"])), _styles.COLORS.white, _styles.COLORS.neutral_200, _styles.COLORS.primary_100, _styles.COLORS.primary_100, _zIndexes.Z_INDEXES.hover, _styles.focusStyles, _zIndexes.Z_INDEXES.active);
 exports.StyledTableBodyRow = StyledTableBodyRow;
 var StyledTableNoRowsLabelRow = _styledComponents.default.tr(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  outline: none;\n  background-color: ", ";\n"])), _styles.COLORS.neutral_50);
 exports.StyledTableNoRowsLabelRow = StyledTableNoRowsLabelRow;
-var StyledTableBody = _styledComponents.default.tbody(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n  ", ":nth-child(odd):not(.selected):not(:hover):not(:focus):not(:active) {\n    background-color: ", ";\n  }\n\n  ", ":nth-child(even):not(.selected):not(:hover):not(:focus):not(:active) {\n    background-color: ", ";\n  }\n"])), StyledTableBodyRow, _styles.COLORS.neutral_50, StyledTableBodyRow, _styles.COLORS.neutral_20);
+var StyledTableBody = _styledComponents.default.tbody(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n"])));
 exports.StyledTableBody = StyledTableBody;
 var StyledTableCell = _styledComponents.default.td(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)([""])));
 exports.StyledTableCell = StyledTableCell;

package/dist/Table/TableStyles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TableStyles.cjs","names":["TableWrapper","styled","div","StyledTable","table","StyledTableHeader","StyledTableHeaderTitle","StyledTableHeaderTitleContent","COLORS","neutral_200","ComponentLStyling","ComponentTextStyle","Bold","black","StyledTableHeaderRow","thead","StyledTableHeaderColumns","tr","StyledTableHeaderColumnContent","StyledTableHeaderColumnSortDirection","span","StyledTableHeaderColumn","th","ComponentSStyling","neutral_600","white","primary_20","primary_700","Z_INDEXES","hover","primary_100","primary_800","active","focusStyles","neutral_20","StyledTableBodyRow","primary_200","StyledTableNoRowsLabelRow","neutral_50","StyledTableBody","tbody","StyledTableCell","td","StyledTableCellContent","Regular","StyledCheckBox","StyledTableCellIcon","neutral_700","StyledTableCellText","StyledTableFooter","StyledTableFooterContent","StyledTableFooterCurrentInfo","ComponentXSStyling","StyledTableFooterControls","StyledTableSpinner","backdrop","StyledTableFooterCollapseButton","button","ComponentMStyling","StyledTableBodyWrapper","scrollBarStyling","Size","Small"],"sources":["../../src/Table/TableStyles.ts"],"sourcesContent":["/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\n\n/**\n * Import custom style properties.\n */\nimport {COLORS, focusStyles, scrollBarStyling} from '../styles';\nimport {\n  ComponentLStyling,\n  ComponentMStyling,\n  ComponentSStyling,\n  ComponentTextStyle,\n  ComponentXSStyling\n} from '../styles/typography';\nimport {Z_INDEXES} from '../styles/z-indexes';\nimport {StyledCheckBox} from '../InputFields/Checkbox';\nimport {Size} from \"../types\";\n\n/**\n * Table styles\n */\n\nexport const TableWrapper = styled.div`\n  position: relative;\n`;\n\n\nexport const StyledTable = styled.table`\n  background: transparent;\n  width: 100%;\n\n  &.fixed {\n    table-layout: fixed;\n  }\n\n  &.auto {\n    table-layout: auto;\n  }\n`;\n\nexport const StyledTableHeader = styled.div`\n`;\n\nexport const StyledTableHeaderTitle = styled.div`\n`;\n\nexport const StyledTableHeaderTitleContent = styled.div`\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  box-sizing: border-box;\n  min-height: 56px;\n  border-bottom: 1px solid ${COLORS.neutral_200};\n  border-top: 2px solid ${COLORS.neutral_200};\n  padding: 0 16px;\n\n  ${ComponentLStyling(ComponentTextStyle.Bold, COLORS.black)}\n  .title-menu {\n    margin-right: -16px;\n  }\n`;\n\nexport const StyledTableHeaderRow = styled.thead`\n`;\n\nexport const StyledTableHeaderColumns = styled.tr`\n`;\n\nexport const StyledTableHeaderColumnContent = styled.div`\n  box-sizing: border-box;\n  min-height: 56px;\n  padding: 0 16px;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  border-top: 1px solid ${COLORS.neutral_200};\n  border-bottom: 1px solid ${COLORS.neutral_200};\n`;\n\nexport const StyledTableHeaderColumnSortDirection = styled.span`\n  width: 24px;\n  height: 24px;\n`;\n\nexport const StyledTableHeaderColumn = styled.th`\n  ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  position: relative;\n  text-align: unset;\n  background-color: ${COLORS.white};\n\n  //fixes header heights no idea why\n  height: 1px;\n\n  &.sortable {\n    cursor: pointer;\n\n    &:hover {\n      background-color: ${COLORS.primary_20};\n      color: ${COLORS.primary_700};\n      z-index: ${Z_INDEXES.hover};\n    }\n\n    &:active {\n      background-color: ${COLORS.primary_100};\n      color: ${COLORS.primary_800};\n      z-index: ${Z_INDEXES.active};\n    }\n\n    &:focus {\n      ${focusStyles}\n    }\n  }\n\n  &.left {\n    & > div {\n      justify-content: left;\n    }\n  }\n\n  &.right {\n    & > div {\n      justify-content: right;\n    }\n  }\n\n  &.center {\n    & > div {\n      justify-content: center;\n    }\n  }\n\n  &.sortable ${StyledTableHeaderColumnContent} > svg {\n    opacity: 0;\n  }\n\n  &.sortable.sorted ${StyledTableHeaderColumnContent} > svg {\n    opacity: 1;\n  }\n\n  &.sorted {\n    background-color: ${COLORS.neutral_20};\n  }\n`;\n\nexport const StyledTableBodyRow = styled.tr`\n  cursor: pointer;\n  position: relative;\n  outline: none;\n\n  &.selected{\n    background-color: ${COLORS.primary_100};\n  }\n  \n  &:hover {\n    background-color: ${COLORS.primary_200};\n    z-index: ${Z_INDEXES.hover};\n  }\n\n  &:focus {\n    ${focusStyles}\n  }\n\n  &:active {\n    z-index: ${Z_INDEXES.active};\n  }\n\n`;\n\nexport const StyledTableNoRowsLabelRow = styled.tr`\n  position: relative;\n  outline: none;\n  background-color: ${COLORS.neutral_50};\n`;\n\nexport const StyledTableBody = styled.tbody`\n  ${StyledTableBodyRow}:nth-child(odd):not(.selected):not(:hover):not(:focus):not(:active) {\n    background-color: ${COLORS.neutral_50};\n  }\n\n  ${StyledTableBodyRow}:nth-child(even):not(.selected):not(:hover):not(:focus):not(:active) {\n    background-color: ${COLORS.neutral_20};\n  }\n`;\n\n\nexport const StyledTableCell = styled.td``;\n\nexport const StyledTableCellContent = styled.div`\n  min-height: 48px;\n\n  padding: 0 16px;\n  ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n\n  display: flex;\n  align-items: center;\n  justify-content: left;\n  gap: 8px;\n\n  &.truncate-text,\n  &.truncate-text span {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  &.left {\n    justify-content: left;\n  }\n\n  &.right {\n    justify-content: right;\n  }\n\n  &.center {\n    justify-content: center;\n  }\n\n  a:first-letter,\n  span:first-letter {\n    text-transform: uppercase;\n  }\n  \n  ${StyledCheckBox}{\n    width: fit-content;\n  }\n`;\n\nexport const StyledTableCellIcon = styled.div`\n  color: ${COLORS.neutral_700};\n  width: 24px;\n  height: 24px;\n\n  svg {\n    color: ${COLORS.neutral_700};\n    width: 24px;\n    height: 24px;\n  }\n`;\n\nexport const StyledTableCellText = styled.span`\n  padding: 12px 0;\n`;\n\n\nexport const StyledTableFooter = styled.div`\n`;\n\nexport const StyledTableFooterContent = styled.div`\n  border-top: 2px solid ${COLORS.neutral_200};\n  border-bottom: 1px solid ${COLORS.neutral_200};\n  box-sizing: border-box;\n  min-height: 56px;\n\n  display: flex;\n  align-items: center;\n  justify-content: right;\n\n`;\n\nexport const StyledTableFooterCurrentInfo = styled.span`\n  padding: 0 16px;\n  ${ComponentXSStyling(ComponentTextStyle.Regular, COLORS.black)}\n`;\n\nexport const StyledTableFooterControls = styled.div`\n  display: flex;\n`;\n\nexport const StyledTableSpinner = styled.div`\n  height: 100%;\n  width: 100%;\n  position: absolute;\n  background-color: rgba(255, 255, 255, 0.75);\n  top: 0;\n  z-index: ${Z_INDEXES.backdrop};\n`;\n\nexport const StyledTableFooterCollapseButton = styled.button`\n  position: relative;\n  border-bottom: 1px solid ${COLORS.neutral_200};\n  border-top: 1px solid ${COLORS.neutral_200};\n  border-left: none;\n  border-right: none;\n  box-sizing: border-box;\n  min-height: 48px;\n  display: flex;\n  width: 100%;\n  align-items: center;\n  justify-content: center;\n  gap: 4px;\n  background: ${COLORS.white};\n\n  cursor: pointer;\n\n  ${ComponentMStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  \n  &:focus {\n    ${focusStyles}\n  }\n\n  &:hover {\n    z-index: ${Z_INDEXES.hover};\n    background: ${COLORS.primary_20};\n    color: ${COLORS.primary_700};\n  }\n\n  &:active {\n    z-index: ${Z_INDEXES.active};\n    background: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n  }\n\n  &:disabled {\n    display: none;\n  }\n\n`;\n\n\nexport const StyledTableBodyWrapper = styled.div`\n  overflow-x: auto;\n  ${scrollBarStyling(Size.Small)}\n\n  ::-webkit-scrollbar-track {\n    margin: 6px;\n  }\n\n  &.scrollable{\n    margin-bottom: 6px;\n    padding-bottom: 10px;\n  }\n`;\n"],"mappings":"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"}
+{"version":3,"file":"TableStyles.cjs","names":["TableWrapper","styled","div","COLORS","neutral_200","StyledTable","table","StyledTableHeader","StyledTableHeaderTitle","StyledTableHeaderTitleContent","ComponentLStyling","ComponentTextStyle","Bold","black","StyledTableHeaderRow","thead","StyledTableHeaderColumns","tr","StyledTableHeaderColumnContent","StyledTableHeaderColumnSortDirection","span","StyledTableHeaderColumn","th","ComponentSStyling","neutral_600","white","primary_20","primary_700","Z_INDEXES","hover","primary_100","primary_800","active","focusStyles","neutral_20","StyledTableBodyRow","StyledTableNoRowsLabelRow","neutral_50","StyledTableBody","tbody","StyledTableCell","td","StyledTableCellContent","Regular","StyledCheckBox","StyledTableCellIcon","neutral_700","StyledTableCellText","StyledTableFooter","StyledTableFooterContent","StyledTableFooterCurrentInfo","ComponentXSStyling","StyledTableFooterControls","StyledTableSpinner","backdrop","StyledTableFooterCollapseButton","button","ComponentMStyling","StyledTableBodyWrapper","scrollBarStyling","Size","Small"],"sources":["../../src/Table/TableStyles.ts"],"sourcesContent":["/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\n\n/**\n * Import custom style properties.\n */\nimport {COLORS, focusStyles, scrollBarStyling} from '../styles';\nimport {\n  ComponentLStyling,\n  ComponentMStyling,\n  ComponentSStyling,\n  ComponentTextStyle,\n  ComponentXSStyling\n} from '../styles/typography';\nimport {Z_INDEXES} from '../styles/z-indexes';\nimport {StyledCheckBox} from '../InputFields/Checkbox';\nimport {Size} from \"../types\";\n\n/**\n * Table styles\n */\n\nexport const TableWrapper = styled.div`\n  position: relative;\n\n  &.border{\n    border-left: 1px solid ${COLORS.neutral_200};\n    border-right: 1px solid ${COLORS.neutral_200};\n  }\n`;\n\n\nexport const StyledTable = styled.table`\n  background: transparent;\n  border-collapse: collapse;\n  width: 100%;\n\n  &.fixed {\n    table-layout: fixed;\n  }\n\n  &.auto {\n    table-layout: auto;\n  }\n`;\n\nexport const StyledTableHeader = styled.div`\n`;\n\nexport const StyledTableHeaderTitle = styled.div`\n`;\n\nexport const StyledTableHeaderTitleContent = styled.div`\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  box-sizing: border-box;\n  min-height: 56px;\n  border-bottom: 1px solid ${COLORS.neutral_200};\n  border-top: 2px solid ${COLORS.neutral_200};\n  padding: 0 16px;\n\n  ${ComponentLStyling(ComponentTextStyle.Bold, COLORS.black)}\n  .title-menu {\n    margin-right: -16px;\n  }\n`;\n\nexport const StyledTableHeaderRow = styled.thead`\n`;\n\nexport const StyledTableHeaderColumns = styled.tr`\n`;\n\nexport const StyledTableHeaderColumnContent = styled.div`\n  box-sizing: border-box;\n  min-height: 56px;\n  padding: 0 16px;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  border-top: 1px solid ${COLORS.neutral_200};\n  border-bottom: 1px solid ${COLORS.neutral_200};\n`;\n\nexport const StyledTableHeaderColumnSortDirection = styled.span`\n  width: 24px;\n  height: 24px;\n`;\n\nexport const StyledTableHeaderColumn = styled.th`\n  ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  position: relative;\n  text-align: unset;\n  background-color: ${COLORS.white};\n\n  //fixes header heights no idea why\n  height: 1px;\n\n  &.sortable {\n    cursor: pointer;\n\n    &:hover {\n      background-color: ${COLORS.primary_20};\n      color: ${COLORS.primary_700};\n      z-index: ${Z_INDEXES.hover};\n    }\n\n    &:active {\n      background-color: ${COLORS.primary_100};\n      color: ${COLORS.primary_800};\n      z-index: ${Z_INDEXES.active};\n    }\n\n    &:focus {\n      ${focusStyles}\n    }\n  }\n\n  &.left {\n    & > div {\n      justify-content: left;\n    }\n  }\n\n  &.right {\n    & > div {\n      justify-content: right;\n    }\n  }\n\n  &.center {\n    & > div {\n      justify-content: center;\n    }\n  }\n\n  &.sortable ${StyledTableHeaderColumnContent} > svg {\n    opacity: 0;\n  }\n\n  &.sortable.sorted ${StyledTableHeaderColumnContent} > svg {\n    opacity: 1;\n  }\n\n  &.sorted {\n    background-color: ${COLORS.neutral_20};\n  }\n`;\n\nexport const StyledTableBodyRow = styled.tr`\n  cursor: pointer;\n  position: relative;\n  outline: none;\n  background-color: ${COLORS.white};\n  \n  &:not(:last-child) {\n    border-bottom: 1px solid ${COLORS.neutral_200};\n  }\n\n  &.selected{\n    background-color: ${COLORS.primary_100};\n  }\n  \n  &:hover {\n    background-color: ${COLORS.primary_100};\n    z-index: ${Z_INDEXES.hover};\n  }\n\n  &:focus {\n    ${focusStyles}\n  }\n\n  &:active {\n    z-index: ${Z_INDEXES.active};\n  }\n\n`;\n\nexport const StyledTableNoRowsLabelRow = styled.tr`\n  position: relative;\n  outline: none;\n  background-color: ${COLORS.neutral_50};\n`;\n\nexport const StyledTableBody = styled.tbody`\n`;\n\n\nexport const StyledTableCell = styled.td``;\n\nexport const StyledTableCellContent = styled.div`\n  min-height: 48px;\n\n  padding: 0 16px;\n  ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n\n  display: flex;\n  align-items: center;\n  justify-content: left;\n  gap: 8px;\n\n  &.truncate-text,\n  &.truncate-text span {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  &.left {\n    justify-content: left;\n  }\n\n  &.right {\n    justify-content: right;\n  }\n\n  &.center {\n    justify-content: center;\n  }\n\n  a:first-letter,\n  span:first-letter {\n    text-transform: uppercase;\n  }\n  \n  ${StyledCheckBox}{\n    width: fit-content;\n  }\n`;\n\nexport const StyledTableCellIcon = styled.div`\n  color: ${COLORS.neutral_700};\n  width: 24px;\n  height: 24px;\n\n  svg {\n    color: ${COLORS.neutral_700};\n    width: 24px;\n    height: 24px;\n  }\n`;\n\nexport const StyledTableCellText = styled.span`\n  padding: 12px 0;\n`;\n\n\nexport const StyledTableFooter = styled.div`\n`;\n\nexport const StyledTableFooterContent = styled.div`\n  border-top: 2px solid ${COLORS.neutral_200};\n  border-bottom: 1px solid ${COLORS.neutral_200};\n  box-sizing: border-box;\n  min-height: 56px;\n\n  display: flex;\n  align-items: center;\n  justify-content: right;\n\n`;\n\nexport const StyledTableFooterCurrentInfo = styled.span`\n  padding: 0 16px;\n  ${ComponentXSStyling(ComponentTextStyle.Regular, COLORS.black)}\n`;\n\nexport const StyledTableFooterControls = styled.div`\n  display: flex;\n`;\n\nexport const StyledTableSpinner = styled.div`\n  height: 100%;\n  width: 100%;\n  position: absolute;\n  background-color: rgba(255, 255, 255, 0.75);\n  top: 0;\n  z-index: ${Z_INDEXES.backdrop};\n`;\n\nexport const StyledTableFooterCollapseButton = styled.button`\n  position: relative;\n  border-bottom: 1px solid ${COLORS.neutral_200};\n  border-top: 1px solid ${COLORS.neutral_200};\n  border-left: none;\n  border-right: none;\n  box-sizing: border-box;\n  min-height: 48px;\n  display: flex;\n  width: 100%;\n  align-items: center;\n  justify-content: center;\n  gap: 4px;\n  background: ${COLORS.white};\n\n  cursor: pointer;\n\n  ${ComponentMStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  \n  &:focus {\n    ${focusStyles}\n  }\n\n  &:hover {\n    z-index: ${Z_INDEXES.hover};\n    background: ${COLORS.primary_20};\n    color: ${COLORS.primary_700};\n  }\n\n  &:active {\n    z-index: ${Z_INDEXES.active};\n    background: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n  }\n\n  &:disabled {\n    display: none;\n  }\n\n`;\n\n\nexport const StyledTableBodyWrapper = styled.div`\n  overflow-x: auto;\n  ${scrollBarStyling(Size.Small)}\n\n  ::-webkit-scrollbar-track {\n    margin: 6px;\n  }\n\n  &.scrollable{\n    margin-bottom: 6px;\n    padding-bottom: 10px;\n  }\n`;\n"],"mappings":"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"}

package/dist/Table/TableStyles.js

@@ -18,8 +18,8 @@ import { Size } from "../types";
  * Table styles
  */
 
-export var TableWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n"])));
-export var StyledTable = styled.table(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  background: transparent;\n  width: 100%;\n\n  &.fixed {\n    table-layout: fixed;\n  }\n\n  &.auto {\n    table-layout: auto;\n  }\n"])));
+export var TableWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n\n  &.border{\n    border-left: 1px solid ", ";\n    border-right: 1px solid ", ";\n  }\n"])), COLORS.neutral_200, COLORS.neutral_200);
+export var StyledTable = styled.table(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  background: transparent;\n  border-collapse: collapse;\n  width: 100%;\n\n  &.fixed {\n    table-layout: fixed;\n  }\n\n  &.auto {\n    table-layout: auto;\n  }\n"])));
 export var StyledTableHeader = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n"])));
 export var StyledTableHeaderTitle = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n"])));
 export var StyledTableHeaderTitleContent = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  box-sizing: border-box;\n  min-height: 56px;\n  border-bottom: 1px solid ", ";\n  border-top: 2px solid ", ";\n  padding: 0 16px;\n\n  ", "\n  .title-menu {\n    margin-right: -16px;\n  }\n"])), COLORS.neutral_200, COLORS.neutral_200, ComponentLStyling(ComponentTextStyle.Bold, COLORS.black));
@@ -28,9 +28,9 @@ export var StyledTableHeaderColumns = styled.tr(_templateObject7 || (_templateOb
 export var StyledTableHeaderColumnContent = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  box-sizing: border-box;\n  min-height: 56px;\n  padding: 0 16px;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  border-top: 1px solid ", ";\n  border-bottom: 1px solid ", ";\n"])), COLORS.neutral_200, COLORS.neutral_200);
 export var StyledTableHeaderColumnSortDirection = styled.span(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  width: 24px;\n  height: 24px;\n"])));
 export var StyledTableHeaderColumn = styled.th(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  ", "\n  position: relative;\n  text-align: unset;\n  background-color: ", ";\n\n  //fixes header heights no idea why\n  height: 1px;\n\n  &.sortable {\n    cursor: pointer;\n\n    &:hover {\n      background-color: ", ";\n      color: ", ";\n      z-index: ", ";\n    }\n\n    &:active {\n      background-color: ", ";\n      color: ", ";\n      z-index: ", ";\n    }\n\n    &:focus {\n      ", "\n    }\n  }\n\n  &.left {\n    & > div {\n      justify-content: left;\n    }\n  }\n\n  &.right {\n    & > div {\n      justify-content: right;\n    }\n  }\n\n  &.center {\n    & > div {\n      justify-content: center;\n    }\n  }\n\n  &.sortable ", " > svg {\n    opacity: 0;\n  }\n\n  &.sortable.sorted ", " > svg {\n    opacity: 1;\n  }\n\n  &.sorted {\n    background-color: ", ";\n  }\n"])), ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600), COLORS.white, COLORS.primary_20, COLORS.primary_700, Z_INDEXES.hover, COLORS.primary_100, COLORS.primary_800, Z_INDEXES.active, focusStyles, StyledTableHeaderColumnContent, StyledTableHeaderColumnContent, COLORS.neutral_20);
-export var StyledTableBodyRow = styled.tr(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  cursor: pointer;\n  position: relative;\n  outline: none;\n\n  &.selected{\n    background-color: ", ";\n  }\n  \n  &:hover {\n    background-color: ", ";\n    z-index: ", ";\n  }\n\n  &:focus {\n    ", "\n  }\n\n  &:active {\n    z-index: ", ";\n  }\n\n"])), COLORS.primary_100, COLORS.primary_200, Z_INDEXES.hover, focusStyles, Z_INDEXES.active);
+export var StyledTableBodyRow = styled.tr(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  cursor: pointer;\n  position: relative;\n  outline: none;\n  background-color: ", ";\n  \n  &:not(:last-child) {\n    border-bottom: 1px solid ", ";\n  }\n\n  &.selected{\n    background-color: ", ";\n  }\n  \n  &:hover {\n    background-color: ", ";\n    z-index: ", ";\n  }\n\n  &:focus {\n    ", "\n  }\n\n  &:active {\n    z-index: ", ";\n  }\n\n"])), COLORS.white, COLORS.neutral_200, COLORS.primary_100, COLORS.primary_100, Z_INDEXES.hover, focusStyles, Z_INDEXES.active);
 export var StyledTableNoRowsLabelRow = styled.tr(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  position: relative;\n  outline: none;\n  background-color: ", ";\n"])), COLORS.neutral_50);
-export var StyledTableBody = styled.tbody(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  ", ":nth-child(odd):not(.selected):not(:hover):not(:focus):not(:active) {\n    background-color: ", ";\n  }\n\n  ", ":nth-child(even):not(.selected):not(:hover):not(:focus):not(:active) {\n    background-color: ", ";\n  }\n"])), StyledTableBodyRow, COLORS.neutral_50, StyledTableBodyRow, COLORS.neutral_20);
+export var StyledTableBody = styled.tbody(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n"])));
 export var StyledTableCell = styled.td(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral([""])));
 export var StyledTableCellContent = styled.div(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n  min-height: 48px;\n\n  padding: 0 16px;\n  ", "\n\n  display: flex;\n  align-items: center;\n  justify-content: left;\n  gap: 8px;\n\n  &.truncate-text,\n  &.truncate-text span {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  &.left {\n    justify-content: left;\n  }\n\n  &.right {\n    justify-content: right;\n  }\n\n  &.center {\n    justify-content: center;\n  }\n\n  a:first-letter,\n  span:first-letter {\n    text-transform: uppercase;\n  }\n  \n  ", "{\n    width: fit-content;\n  }\n"])), ComponentSStyling(ComponentTextStyle.Regular, COLORS.black), StyledCheckBox);
 export var StyledTableCellIcon = styled.div(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n  color: ", ";\n  width: 24px;\n  height: 24px;\n\n  svg {\n    color: ", ";\n    width: 24px;\n    height: 24px;\n  }\n"])), COLORS.neutral_700, COLORS.neutral_700);

package/dist/Table/TableStyles.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableStyles.js","names":["styled","COLORS","focusStyles","scrollBarStyling","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","ComponentXSStyling","Z_INDEXES","StyledCheckBox","Size","TableWrapper","div","StyledTable","table","StyledTableHeader","StyledTableHeaderTitle","StyledTableHeaderTitleContent","neutral_200","Bold","black","StyledTableHeaderRow","thead","StyledTableHeaderColumns","tr","StyledTableHeaderColumnContent","StyledTableHeaderColumnSortDirection","span","StyledTableHeaderColumn","th","neutral_600","white","primary_20","primary_700","hover","primary_100","primary_800","active","neutral_20","StyledTableBodyRow","primary_200","StyledTableNoRowsLabelRow","neutral_50","StyledTableBody","tbody","StyledTableCell","td","StyledTableCellContent","Regular","StyledTableCellIcon","neutral_700","StyledTableCellText","StyledTableFooter","StyledTableFooterContent","StyledTableFooterCurrentInfo","StyledTableFooterControls","StyledTableSpinner","backdrop","StyledTableFooterCollapseButton","button","StyledTableBodyWrapper","Small"],"sources":["../../src/Table/TableStyles.ts"],"sourcesContent":["/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\n\n/**\n * Import custom style properties.\n */\nimport {COLORS, focusStyles, scrollBarStyling} from '../styles';\nimport {\n  ComponentLStyling,\n  ComponentMStyling,\n  ComponentSStyling,\n  ComponentTextStyle,\n  ComponentXSStyling\n} from '../styles/typography';\nimport {Z_INDEXES} from '../styles/z-indexes';\nimport {StyledCheckBox} from '../InputFields/Checkbox';\nimport {Size} from \"../types\";\n\n/**\n * Table styles\n */\n\nexport const TableWrapper = styled.div`\n  position: relative;\n`;\n\n\nexport const StyledTable = styled.table`\n  background: transparent;\n  width: 100%;\n\n  &.fixed {\n    table-layout: fixed;\n  }\n\n  &.auto {\n    table-layout: auto;\n  }\n`;\n\nexport const StyledTableHeader = styled.div`\n`;\n\nexport const StyledTableHeaderTitle = styled.div`\n`;\n\nexport const StyledTableHeaderTitleContent = styled.div`\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  box-sizing: border-box;\n  min-height: 56px;\n  border-bottom: 1px solid ${COLORS.neutral_200};\n  border-top: 2px solid ${COLORS.neutral_200};\n  padding: 0 16px;\n\n  ${ComponentLStyling(ComponentTextStyle.Bold, COLORS.black)}\n  .title-menu {\n    margin-right: -16px;\n  }\n`;\n\nexport const StyledTableHeaderRow = styled.thead`\n`;\n\nexport const StyledTableHeaderColumns = styled.tr`\n`;\n\nexport const StyledTableHeaderColumnContent = styled.div`\n  box-sizing: border-box;\n  min-height: 56px;\n  padding: 0 16px;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  border-top: 1px solid ${COLORS.neutral_200};\n  border-bottom: 1px solid ${COLORS.neutral_200};\n`;\n\nexport const StyledTableHeaderColumnSortDirection = styled.span`\n  width: 24px;\n  height: 24px;\n`;\n\nexport const StyledTableHeaderColumn = styled.th`\n  ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  position: relative;\n  text-align: unset;\n  background-color: ${COLORS.white};\n\n  //fixes header heights no idea why\n  height: 1px;\n\n  &.sortable {\n    cursor: pointer;\n\n    &:hover {\n      background-color: ${COLORS.primary_20};\n      color: ${COLORS.primary_700};\n      z-index: ${Z_INDEXES.hover};\n    }\n\n    &:active {\n      background-color: ${COLORS.primary_100};\n      color: ${COLORS.primary_800};\n      z-index: ${Z_INDEXES.active};\n    }\n\n    &:focus {\n      ${focusStyles}\n    }\n  }\n\n  &.left {\n    & > div {\n      justify-content: left;\n    }\n  }\n\n  &.right {\n    & > div {\n      justify-content: right;\n    }\n  }\n\n  &.center {\n    & > div {\n      justify-content: center;\n    }\n  }\n\n  &.sortable ${StyledTableHeaderColumnContent} > svg {\n    opacity: 0;\n  }\n\n  &.sortable.sorted ${StyledTableHeaderColumnContent} > svg {\n    opacity: 1;\n  }\n\n  &.sorted {\n    background-color: ${COLORS.neutral_20};\n  }\n`;\n\nexport const StyledTableBodyRow = styled.tr`\n  cursor: pointer;\n  position: relative;\n  outline: none;\n\n  &.selected{\n    background-color: ${COLORS.primary_100};\n  }\n  \n  &:hover {\n    background-color: ${COLORS.primary_200};\n    z-index: ${Z_INDEXES.hover};\n  }\n\n  &:focus {\n    ${focusStyles}\n  }\n\n  &:active {\n    z-index: ${Z_INDEXES.active};\n  }\n\n`;\n\nexport const StyledTableNoRowsLabelRow = styled.tr`\n  position: relative;\n  outline: none;\n  background-color: ${COLORS.neutral_50};\n`;\n\nexport const StyledTableBody = styled.tbody`\n  ${StyledTableBodyRow}:nth-child(odd):not(.selected):not(:hover):not(:focus):not(:active) {\n    background-color: ${COLORS.neutral_50};\n  }\n\n  ${StyledTableBodyRow}:nth-child(even):not(.selected):not(:hover):not(:focus):not(:active) {\n    background-color: ${COLORS.neutral_20};\n  }\n`;\n\n\nexport const StyledTableCell = styled.td``;\n\nexport const StyledTableCellContent = styled.div`\n  min-height: 48px;\n\n  padding: 0 16px;\n  ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n\n  display: flex;\n  align-items: center;\n  justify-content: left;\n  gap: 8px;\n\n  &.truncate-text,\n  &.truncate-text span {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  &.left {\n    justify-content: left;\n  }\n\n  &.right {\n    justify-content: right;\n  }\n\n  &.center {\n    justify-content: center;\n  }\n\n  a:first-letter,\n  span:first-letter {\n    text-transform: uppercase;\n  }\n  \n  ${StyledCheckBox}{\n    width: fit-content;\n  }\n`;\n\nexport const StyledTableCellIcon = styled.div`\n  color: ${COLORS.neutral_700};\n  width: 24px;\n  height: 24px;\n\n  svg {\n    color: ${COLORS.neutral_700};\n    width: 24px;\n    height: 24px;\n  }\n`;\n\nexport const StyledTableCellText = styled.span`\n  padding: 12px 0;\n`;\n\n\nexport const StyledTableFooter = styled.div`\n`;\n\nexport const StyledTableFooterContent = styled.div`\n  border-top: 2px solid ${COLORS.neutral_200};\n  border-bottom: 1px solid ${COLORS.neutral_200};\n  box-sizing: border-box;\n  min-height: 56px;\n\n  display: flex;\n  align-items: center;\n  justify-content: right;\n\n`;\n\nexport const StyledTableFooterCurrentInfo = styled.span`\n  padding: 0 16px;\n  ${ComponentXSStyling(ComponentTextStyle.Regular, COLORS.black)}\n`;\n\nexport const StyledTableFooterControls = styled.div`\n  display: flex;\n`;\n\nexport const StyledTableSpinner = styled.div`\n  height: 100%;\n  width: 100%;\n  position: absolute;\n  background-color: rgba(255, 255, 255, 0.75);\n  top: 0;\n  z-index: ${Z_INDEXES.backdrop};\n`;\n\nexport const StyledTableFooterCollapseButton = styled.button`\n  position: relative;\n  border-bottom: 1px solid ${COLORS.neutral_200};\n  border-top: 1px solid ${COLORS.neutral_200};\n  border-left: none;\n  border-right: none;\n  box-sizing: border-box;\n  min-height: 48px;\n  display: flex;\n  width: 100%;\n  align-items: center;\n  justify-content: center;\n  gap: 4px;\n  background: ${COLORS.white};\n\n  cursor: pointer;\n\n  ${ComponentMStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  \n  &:focus {\n    ${focusStyles}\n  }\n\n  &:hover {\n    z-index: ${Z_INDEXES.hover};\n    background: ${COLORS.primary_20};\n    color: ${COLORS.primary_700};\n  }\n\n  &:active {\n    z-index: ${Z_INDEXES.active};\n    background: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n  }\n\n  &:disabled {\n    display: none;\n  }\n\n`;\n\n\nexport const StyledTableBodyWrapper = styled.div`\n  overflow-x: auto;\n  ${scrollBarStyling(Size.Small)}\n\n  ::-webkit-scrollbar-track {\n    margin: 6px;\n  }\n\n  &.scrollable{\n    margin-bottom: 6px;\n    padding-bottom: 10px;\n  }\n`;\n"],"mappings":"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"}
+{"version":3,"file":"TableStyles.js","names":["styled","COLORS","focusStyles","scrollBarStyling","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","ComponentXSStyling","Z_INDEXES","StyledCheckBox","Size","TableWrapper","div","neutral_200","StyledTable","table","StyledTableHeader","StyledTableHeaderTitle","StyledTableHeaderTitleContent","Bold","black","StyledTableHeaderRow","thead","StyledTableHeaderColumns","tr","StyledTableHeaderColumnContent","StyledTableHeaderColumnSortDirection","span","StyledTableHeaderColumn","th","neutral_600","white","primary_20","primary_700","hover","primary_100","primary_800","active","neutral_20","StyledTableBodyRow","StyledTableNoRowsLabelRow","neutral_50","StyledTableBody","tbody","StyledTableCell","td","StyledTableCellContent","Regular","StyledTableCellIcon","neutral_700","StyledTableCellText","StyledTableFooter","StyledTableFooterContent","StyledTableFooterCurrentInfo","StyledTableFooterControls","StyledTableSpinner","backdrop","StyledTableFooterCollapseButton","button","StyledTableBodyWrapper","Small"],"sources":["../../src/Table/TableStyles.ts"],"sourcesContent":["/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\n\n/**\n * Import custom style properties.\n */\nimport {COLORS, focusStyles, scrollBarStyling} from '../styles';\nimport {\n  ComponentLStyling,\n  ComponentMStyling,\n  ComponentSStyling,\n  ComponentTextStyle,\n  ComponentXSStyling\n} from '../styles/typography';\nimport {Z_INDEXES} from '../styles/z-indexes';\nimport {StyledCheckBox} from '../InputFields/Checkbox';\nimport {Size} from \"../types\";\n\n/**\n * Table styles\n */\n\nexport const TableWrapper = styled.div`\n  position: relative;\n\n  &.border{\n    border-left: 1px solid ${COLORS.neutral_200};\n    border-right: 1px solid ${COLORS.neutral_200};\n  }\n`;\n\n\nexport const StyledTable = styled.table`\n  background: transparent;\n  border-collapse: collapse;\n  width: 100%;\n\n  &.fixed {\n    table-layout: fixed;\n  }\n\n  &.auto {\n    table-layout: auto;\n  }\n`;\n\nexport const StyledTableHeader = styled.div`\n`;\n\nexport const StyledTableHeaderTitle = styled.div`\n`;\n\nexport const StyledTableHeaderTitleContent = styled.div`\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  box-sizing: border-box;\n  min-height: 56px;\n  border-bottom: 1px solid ${COLORS.neutral_200};\n  border-top: 2px solid ${COLORS.neutral_200};\n  padding: 0 16px;\n\n  ${ComponentLStyling(ComponentTextStyle.Bold, COLORS.black)}\n  .title-menu {\n    margin-right: -16px;\n  }\n`;\n\nexport const StyledTableHeaderRow = styled.thead`\n`;\n\nexport const StyledTableHeaderColumns = styled.tr`\n`;\n\nexport const StyledTableHeaderColumnContent = styled.div`\n  box-sizing: border-box;\n  min-height: 56px;\n  padding: 0 16px;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  border-top: 1px solid ${COLORS.neutral_200};\n  border-bottom: 1px solid ${COLORS.neutral_200};\n`;\n\nexport const StyledTableHeaderColumnSortDirection = styled.span`\n  width: 24px;\n  height: 24px;\n`;\n\nexport const StyledTableHeaderColumn = styled.th`\n  ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  position: relative;\n  text-align: unset;\n  background-color: ${COLORS.white};\n\n  //fixes header heights no idea why\n  height: 1px;\n\n  &.sortable {\n    cursor: pointer;\n\n    &:hover {\n      background-color: ${COLORS.primary_20};\n      color: ${COLORS.primary_700};\n      z-index: ${Z_INDEXES.hover};\n    }\n\n    &:active {\n      background-color: ${COLORS.primary_100};\n      color: ${COLORS.primary_800};\n      z-index: ${Z_INDEXES.active};\n    }\n\n    &:focus {\n      ${focusStyles}\n    }\n  }\n\n  &.left {\n    & > div {\n      justify-content: left;\n    }\n  }\n\n  &.right {\n    & > div {\n      justify-content: right;\n    }\n  }\n\n  &.center {\n    & > div {\n      justify-content: center;\n    }\n  }\n\n  &.sortable ${StyledTableHeaderColumnContent} > svg {\n    opacity: 0;\n  }\n\n  &.sortable.sorted ${StyledTableHeaderColumnContent} > svg {\n    opacity: 1;\n  }\n\n  &.sorted {\n    background-color: ${COLORS.neutral_20};\n  }\n`;\n\nexport const StyledTableBodyRow = styled.tr`\n  cursor: pointer;\n  position: relative;\n  outline: none;\n  background-color: ${COLORS.white};\n  \n  &:not(:last-child) {\n    border-bottom: 1px solid ${COLORS.neutral_200};\n  }\n\n  &.selected{\n    background-color: ${COLORS.primary_100};\n  }\n  \n  &:hover {\n    background-color: ${COLORS.primary_100};\n    z-index: ${Z_INDEXES.hover};\n  }\n\n  &:focus {\n    ${focusStyles}\n  }\n\n  &:active {\n    z-index: ${Z_INDEXES.active};\n  }\n\n`;\n\nexport const StyledTableNoRowsLabelRow = styled.tr`\n  position: relative;\n  outline: none;\n  background-color: ${COLORS.neutral_50};\n`;\n\nexport const StyledTableBody = styled.tbody`\n`;\n\n\nexport const StyledTableCell = styled.td``;\n\nexport const StyledTableCellContent = styled.div`\n  min-height: 48px;\n\n  padding: 0 16px;\n  ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n\n  display: flex;\n  align-items: center;\n  justify-content: left;\n  gap: 8px;\n\n  &.truncate-text,\n  &.truncate-text span {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  &.left {\n    justify-content: left;\n  }\n\n  &.right {\n    justify-content: right;\n  }\n\n  &.center {\n    justify-content: center;\n  }\n\n  a:first-letter,\n  span:first-letter {\n    text-transform: uppercase;\n  }\n  \n  ${StyledCheckBox}{\n    width: fit-content;\n  }\n`;\n\nexport const StyledTableCellIcon = styled.div`\n  color: ${COLORS.neutral_700};\n  width: 24px;\n  height: 24px;\n\n  svg {\n    color: ${COLORS.neutral_700};\n    width: 24px;\n    height: 24px;\n  }\n`;\n\nexport const StyledTableCellText = styled.span`\n  padding: 12px 0;\n`;\n\n\nexport const StyledTableFooter = styled.div`\n`;\n\nexport const StyledTableFooterContent = styled.div`\n  border-top: 2px solid ${COLORS.neutral_200};\n  border-bottom: 1px solid ${COLORS.neutral_200};\n  box-sizing: border-box;\n  min-height: 56px;\n\n  display: flex;\n  align-items: center;\n  justify-content: right;\n\n`;\n\nexport const StyledTableFooterCurrentInfo = styled.span`\n  padding: 0 16px;\n  ${ComponentXSStyling(ComponentTextStyle.Regular, COLORS.black)}\n`;\n\nexport const StyledTableFooterControls = styled.div`\n  display: flex;\n`;\n\nexport const StyledTableSpinner = styled.div`\n  height: 100%;\n  width: 100%;\n  position: absolute;\n  background-color: rgba(255, 255, 255, 0.75);\n  top: 0;\n  z-index: ${Z_INDEXES.backdrop};\n`;\n\nexport const StyledTableFooterCollapseButton = styled.button`\n  position: relative;\n  border-bottom: 1px solid ${COLORS.neutral_200};\n  border-top: 1px solid ${COLORS.neutral_200};\n  border-left: none;\n  border-right: none;\n  box-sizing: border-box;\n  min-height: 48px;\n  display: flex;\n  width: 100%;\n  align-items: center;\n  justify-content: center;\n  gap: 4px;\n  background: ${COLORS.white};\n\n  cursor: pointer;\n\n  ${ComponentMStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  \n  &:focus {\n    ${focusStyles}\n  }\n\n  &:hover {\n    z-index: ${Z_INDEXES.hover};\n    background: ${COLORS.primary_20};\n    color: ${COLORS.primary_700};\n  }\n\n  &:active {\n    z-index: ${Z_INDEXES.active};\n    background: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n  }\n\n  &:disabled {\n    display: none;\n  }\n\n`;\n\n\nexport const StyledTableBodyWrapper = styled.div`\n  overflow-x: auto;\n  ${scrollBarStyling(Size.Small)}\n\n  ::-webkit-scrollbar-track {\n    margin: 6px;\n  }\n\n  &.scrollable{\n    margin-bottom: 6px;\n    padding-bottom: 10px;\n  }\n`;\n"],"mappings":";;AAAA;AACA;AACA;AACA,OAAOA,MAAM,MAAM,mBAAmB;;AAEtC;AACA;AACA;AACA,SAAQC,MAAM,EAAEC,WAAW,EAAEC,gBAAgB,QAAO,WAAW;AAC/D,SACEC,iBAAiB,EACjBC,iBAAiB,EACjBC,iBAAiB,EACjBC,kBAAkB,EAClBC,kBAAkB,QACb,sBAAsB;AAC7B,SAAQC,SAAS,QAAO,qBAAqB;AAC7C,SAAQC,cAAc,QAAO,yBAAyB;AACtD,SAAQC,IAAI,QAAO,UAAU;;AAE7B;AACA;AACA;;AAEA,OAAO,IAAMC,YAAY,GAAGZ,MAAM,CAACa,GAAG,wLAITZ,MAAM,CAACa,WAAW,EACjBb,MAAM,CAACa,WAAW,CAE/C;AAGD,OAAO,IAAMC,WAAW,GAAGf,MAAM,CAACgB,KAAK,6OAYtC;AAED,OAAO,IAAMC,iBAAiB,GAAGjB,MAAM,CAACa,GAAG,yEAC1C;AAED,OAAO,IAAMK,sBAAsB,GAAGlB,MAAM,CAACa,GAAG,yEAC/C;AAED,OAAO,IAAMM,6BAA6B,GAAGnB,MAAM,CAACa,GAAG,sWAO1BZ,MAAM,CAACa,WAAW,EACrBb,MAAM,CAACa,WAAW,EAGxCV,iBAAiB,CAACG,kBAAkB,CAACa,IAAI,EAAEnB,MAAM,CAACoB,KAAK,CAAC,CAI3D;AAED,OAAO,IAAMC,oBAAoB,GAAGtB,MAAM,CAACuB,KAAK,yEAC/C;AAED,OAAO,IAAMC,wBAAwB,GAAGxB,MAAM,CAACyB,EAAE,yEAChD;AAED,OAAO,IAAMC,8BAA8B,GAAG1B,MAAM,CAACa,GAAG,6SAQ9BZ,MAAM,CAACa,WAAW,EACfb,MAAM,CAACa,WAAW,CAC9C;AAED,OAAO,IAAMa,oCAAoC,GAAG3B,MAAM,CAAC4B,IAAI,0GAG9D;AAED,OAAO,IAAMC,uBAAuB,GAAG7B,MAAM,CAAC8B,EAAE,k2BAC5CxB,iBAAiB,CAACC,kBAAkB,CAACa,IAAI,EAAEnB,MAAM,CAAC8B,WAAW,CAAC,EAG5C9B,MAAM,CAAC+B,KAAK,EASR/B,MAAM,CAACgC,UAAU,EAC5BhC,MAAM,CAACiC,WAAW,EAChBzB,SAAS,CAAC0B,KAAK,EAINlC,MAAM,CAACmC,WAAW,EAC7BnC,MAAM,CAACoC,WAAW,EAChB5B,SAAS,CAAC6B,MAAM,EAIzBpC,WAAW,EAsBJwB,8BAA8B,EAIvBA,8BAA8B,EAK5BzB,MAAM,CAACsC,UAAU,CAExC;AAED,OAAO,IAAMC,kBAAkB,GAAGxC,MAAM,CAACyB,EAAE,4aAIrBxB,MAAM,CAAC+B,KAAK,EAGH/B,MAAM,CAACa,WAAW,EAIzBb,MAAM,CAACmC,WAAW,EAIlBnC,MAAM,CAACmC,WAAW,EAC3B3B,SAAS,CAAC0B,KAAK,EAIxBjC,WAAW,EAIFO,SAAS,CAAC6B,MAAM,CAG9B;AAED,OAAO,IAAMG,yBAAyB,GAAGzC,MAAM,CAACyB,EAAE,gJAG5BxB,MAAM,CAACyC,UAAU,CACtC;AAED,OAAO,IAAMC,eAAe,GAAG3C,MAAM,CAAC4C,KAAK,2EAC1C;AAGD,OAAO,IAAMC,eAAe,GAAG7C,MAAM,CAAC8C,EAAE,yEAAE;AAE1C,OAAO,IAAMC,sBAAsB,GAAG/C,MAAM,CAACa,GAAG,qmBAI5CP,iBAAiB,CAACC,kBAAkB,CAACyC,OAAO,EAAE/C,MAAM,CAACoB,KAAK,CAAC,EA+B3DX,cAAc,CAGjB;AAED,OAAO,IAAMuC,mBAAmB,GAAGjD,MAAM,CAACa,GAAG,oMAClCZ,MAAM,CAACiD,WAAW,EAKhBjD,MAAM,CAACiD,WAAW,CAI9B;AAED,OAAO,IAAMC,mBAAmB,GAAGnD,MAAM,CAAC4B,IAAI,+FAE7C;AAGD,OAAO,IAAMwB,iBAAiB,GAAGpD,MAAM,CAACa,GAAG,2EAC1C;AAED,OAAO,IAAMwC,wBAAwB,GAAGrD,MAAM,CAACa,GAAG,sQACxBZ,MAAM,CAACa,WAAW,EACfb,MAAM,CAACa,WAAW,CAQ9C;AAED,OAAO,IAAMwC,4BAA4B,GAAGtD,MAAM,CAAC4B,IAAI,wGAEnDpB,kBAAkB,CAACD,kBAAkB,CAACyC,OAAO,EAAE/C,MAAM,CAACoB,KAAK,CAAC,CAC/D;AAED,OAAO,IAAMkC,yBAAyB,GAAGvD,MAAM,CAACa,GAAG,6FAElD;AAED,OAAO,IAAM2C,kBAAkB,GAAGxD,MAAM,CAACa,GAAG,iNAM/BJ,SAAS,CAACgD,QAAQ,CAC9B;AAED,OAAO,IAAMC,+BAA+B,GAAG1D,MAAM,CAAC2D,MAAM,yoBAE/B1D,MAAM,CAACa,WAAW,EACrBb,MAAM,CAACa,WAAW,EAU5Bb,MAAM,CAAC+B,KAAK,EAIxB3B,iBAAiB,CAACE,kBAAkB,CAACa,IAAI,EAAEnB,MAAM,CAAC8B,WAAW,CAAC,EAG5D7B,WAAW,EAIFO,SAAS,CAAC0B,KAAK,EACZlC,MAAM,CAACgC,UAAU,EACtBhC,MAAM,CAACiC,WAAW,EAIhBzB,SAAS,CAAC6B,MAAM,EACbrC,MAAM,CAACmC,WAAW,EACvBnC,MAAM,CAACoC,WAAW,CAO9B;AAGD,OAAO,IAAMuB,sBAAsB,GAAG5D,MAAM,CAACa,GAAG,6OAE5CV,gBAAgB,CAACQ,IAAI,CAACkD,KAAK,CAAC,CAU/B"}

package/dist/Table/TableTypes.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TableTypes.cjs","names":[],"sources":["../../src/Table/TableTypes.ts"],"sourcesContent":["/**\n * Types for the table.\n */\nimport {DropdownButtonProps} from '../Dropdown/DropdownButtonTypes';\nimport {ButtonProps} from '../Button/Button';\nimport {IconButtonProps} from '../Button/Iconbutton';\nimport {HyperlinkProps} from '../HyperLink/HyperLink';\n\nexport interface TableProps {\n  title?: string; // Will render header row\n\n  columns: TableColumn[];\n  rows: any[];\n\n  accordion?: boolean; // Will render accordion table\n  collapsed?: boolean; // whether table should be collapsed or not\n  collapsedRows?: number; // Number of rows to show when table is collapsed\n  sortProps?: TableSortProps;\n\n  remoteOperations?: boolean; // Indicates that pagination should be done remotely\n  pagination?: TablePagination; // Required only in case remotePagination is set to true\n  onPreviousPageClick?: () => void; // Will fire on previous page click in case remotePagination is set to true\n  onNextPageClick?: () => void; // Will fire on next page click in case remotePagination is set to true\n  onRowsPerPageChange?: (count: number) => void; // Will fire when rows per page changes in case remotePagination is set to true\n  onTriggerSortingChange?: (key: string, direction?: TableSortingDirection) => void; // Will fire when the sorting direction changes. Used with remote pagination,\n\n  showLoadingIndicator?: boolean;\n  rowsPerPageLabel? :string; //label that will be shown next to the rows per page selector\n  noRowsLabel?: string; //label that will be shown when there are no rows in the grid\n  showMoreLabel?: string; //label that will be shown for 'accordion' grid when there are some rows collapsed\n  showFewerLabel?: string; //label that will be shown for 'accordion' grid when user can 'collapse' some of the rows\n\n  menu?: Pick<DropdownButtonProps, 'items' | 'onClick' | 'disabled' | 'width' | 'itemsType' | 'multiSelect'>;\n\n  selectable?: boolean;\n  onSelectionChange?: (value: any | any[]) => void;\n  multiSelect?: boolean;\n  keyExpr?: string;\n  selectedRows?: any[];\n\n  layout?: TableLayout;\n}\n\nexport interface TableSortProps {\n  column: string;\n  direction: TableSortingDirection;\n}\n\nexport interface TableColumn {\n  key: string;\n  name: string;\n  filterValue?: string;\n\n  icon?: React.ReactNode;\n\n  width?: string | number;\n  colorFn?: (row: any, key: string) => string;\n  justify?: TableJustification;\n  shortenText?: boolean;\n\n  action?: (row: any, event: any) => void;\n  type?: TableColumnTypes;\n  additionalProps?: Pick<ButtonProps, 'variant' | 'size' | 'width' | 'icon'> | Pick<IconButtonProps, 'variant' | 'shape' | 'disabled'> | Pick<HyperlinkProps, 'variant'>;\n  customContent?: (row: any, key: string) => any;\n\n  sortable?: boolean;\n}\n\nexport type TableColumnTypes = 'text' | 'boolean' | 'number' | 'custom' | 'button' | 'icon' | 'link';\n\nexport type TableJustification = 'right' | 'left' | 'center';\n\nexport type TableSortingDirection = 'asc' | 'desc';\n\nexport type TableLayout = 'auto' | 'fixed';\n\nexport interface TablePagination {\n  from: number;\n  to: number;\n  total: number;\n  currentPage: number;\n  rowsPerPage: number;\n}\n\n// will override component properties in case of button, icon and link\n"],"mappings":""}
+{"version":3,"file":"TableTypes.cjs","names":[],"sources":["../../src/Table/TableTypes.ts"],"sourcesContent":["/**\n * Types for the table.\n */\nimport {DropdownButtonProps} from '../Dropdown/DropdownButtonTypes';\nimport {ButtonProps} from '../Button/Button';\nimport {IconButtonProps} from '../Button/Iconbutton';\nimport {HyperlinkProps} from '../HyperLink/HyperLink';\n\nexport interface TableProps {\n  title?: string; // Will render header row\n\n  columns: TableColumn[];\n  rows: any[];\n\n  border?: boolean;\n  accordion?: boolean; // Will render accordion table\n  collapsed?: boolean; // whether table should be collapsed or not\n  collapsedRows?: number; // Number of rows to show when table is collapsed\n  sortProps?: TableSortProps;\n\n  remoteOperations?: boolean; // Indicates that pagination should be done remotely\n  pagination?: TablePagination; // Required only in case remotePagination is set to true\n  onPreviousPageClick?: () => void; // Will fire on previous page click in case remotePagination is set to true\n  onNextPageClick?: () => void; // Will fire on next page click in case remotePagination is set to true\n  onRowsPerPageChange?: (count: number) => void; // Will fire when rows per page changes in case remotePagination is set to true\n  onTriggerSortingChange?: (key: string, direction?: TableSortingDirection) => void; // Will fire when the sorting direction changes. Used with remote pagination,\n\n  showLoadingIndicator?: boolean;\n  rowsPerPageLabel? :string; //label that will be shown next to the rows per page selector\n  noRowsLabel?: string; //label that will be shown when there are no rows in the grid\n  showMoreLabel?: string; //label that will be shown for 'accordion' grid when there are some rows collapsed\n  showFewerLabel?: string; //label that will be shown for 'accordion' grid when user can 'collapse' some of the rows\n\n  menu?: Pick<DropdownButtonProps, 'items' | 'onClick' | 'disabled' | 'width' | 'itemsType' | 'multiSelect'>;\n\n  selectable?: boolean;\n  onSelectionChange?: (value: any | any[]) => void;\n  multiSelect?: boolean;\n  keyExpr?: string;\n  selectedRows?: any[];\n\n  layout?: TableLayout;\n}\n\nexport interface TableSortProps {\n  column: string;\n  direction: TableSortingDirection;\n}\n\nexport interface TableColumn {\n  key: string;\n  name: string;\n  filterValue?: string;\n\n  icon?: React.ReactNode;\n\n  width?: string | number;\n  colorFn?: (row: any, key: string) => string;\n  justify?: TableJustification;\n  shortenText?: boolean;\n\n  action?: (row: any, event: any) => void;\n  type?: TableColumnTypes;\n  additionalProps?: Pick<ButtonProps, 'variant' | 'size' | 'width' | 'icon'> | Pick<IconButtonProps, 'variant' | 'shape' | 'disabled'> | Pick<HyperlinkProps, 'variant'>;\n  customContent?: (row: any, key: string) => any;\n\n  sortable?: boolean;\n}\n\nexport type TableColumnTypes = 'text' | 'boolean' | 'number' | 'custom' | 'button' | 'icon' | 'link';\n\nexport type TableJustification = 'right' | 'left' | 'center';\n\nexport type TableSortingDirection = 'asc' | 'desc';\n\nexport type TableLayout = 'auto' | 'fixed';\n\nexport interface TablePagination {\n  from: number;\n  to: number;\n  total: number;\n  currentPage: number;\n  rowsPerPage: number;\n}\n\n// will override component properties in case of button, icon and link\n"],"mappings":""}

package/dist/Table/TableTypes.d.ts

@@ -9,6 +9,7 @@ export interface TableProps {
     title?: string;
     columns: TableColumn[];
     rows: any[];
+    border?: boolean;
     accordion?: boolean;
     collapsed?: boolean;
     collapsedRows?: number;

package/dist/Table/TableTypes.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableTypes.js","names":[],"sources":["../../src/Table/TableTypes.ts"],"sourcesContent":["/**\n * Types for the table.\n */\nimport {DropdownButtonProps} from '../Dropdown/DropdownButtonTypes';\nimport {ButtonProps} from '../Button/Button';\nimport {IconButtonProps} from '../Button/Iconbutton';\nimport {HyperlinkProps} from '../HyperLink/HyperLink';\n\nexport interface TableProps {\n  title?: string; // Will render header row\n\n  columns: TableColumn[];\n  rows: any[];\n\n  accordion?: boolean; // Will render accordion table\n  collapsed?: boolean; // whether table should be collapsed or not\n  collapsedRows?: number; // Number of rows to show when table is collapsed\n  sortProps?: TableSortProps;\n\n  remoteOperations?: boolean; // Indicates that pagination should be done remotely\n  pagination?: TablePagination; // Required only in case remotePagination is set to true\n  onPreviousPageClick?: () => void; // Will fire on previous page click in case remotePagination is set to true\n  onNextPageClick?: () => void; // Will fire on next page click in case remotePagination is set to true\n  onRowsPerPageChange?: (count: number) => void; // Will fire when rows per page changes in case remotePagination is set to true\n  onTriggerSortingChange?: (key: string, direction?: TableSortingDirection) => void; // Will fire when the sorting direction changes. Used with remote pagination,\n\n  showLoadingIndicator?: boolean;\n  rowsPerPageLabel? :string; //label that will be shown next to the rows per page selector\n  noRowsLabel?: string; //label that will be shown when there are no rows in the grid\n  showMoreLabel?: string; //label that will be shown for 'accordion' grid when there are some rows collapsed\n  showFewerLabel?: string; //label that will be shown for 'accordion' grid when user can 'collapse' some of the rows\n\n  menu?: Pick<DropdownButtonProps, 'items' | 'onClick' | 'disabled' | 'width' | 'itemsType' | 'multiSelect'>;\n\n  selectable?: boolean;\n  onSelectionChange?: (value: any | any[]) => void;\n  multiSelect?: boolean;\n  keyExpr?: string;\n  selectedRows?: any[];\n\n  layout?: TableLayout;\n}\n\nexport interface TableSortProps {\n  column: string;\n  direction: TableSortingDirection;\n}\n\nexport interface TableColumn {\n  key: string;\n  name: string;\n  filterValue?: string;\n\n  icon?: React.ReactNode;\n\n  width?: string | number;\n  colorFn?: (row: any, key: string) => string;\n  justify?: TableJustification;\n  shortenText?: boolean;\n\n  action?: (row: any, event: any) => void;\n  type?: TableColumnTypes;\n  additionalProps?: Pick<ButtonProps, 'variant' | 'size' | 'width' | 'icon'> | Pick<IconButtonProps, 'variant' | 'shape' | 'disabled'> | Pick<HyperlinkProps, 'variant'>;\n  customContent?: (row: any, key: string) => any;\n\n  sortable?: boolean;\n}\n\nexport type TableColumnTypes = 'text' | 'boolean' | 'number' | 'custom' | 'button' | 'icon' | 'link';\n\nexport type TableJustification = 'right' | 'left' | 'center';\n\nexport type TableSortingDirection = 'asc' | 'desc';\n\nexport type TableLayout = 'auto' | 'fixed';\n\nexport interface TablePagination {\n  from: number;\n  to: number;\n  total: number;\n  currentPage: number;\n  rowsPerPage: number;\n}\n\n// will override component properties in case of button, icon and link\n"],"mappings":""}
+{"version":3,"file":"TableTypes.js","names":[],"sources":["../../src/Table/TableTypes.ts"],"sourcesContent":["/**\n * Types for the table.\n */\nimport {DropdownButtonProps} from '../Dropdown/DropdownButtonTypes';\nimport {ButtonProps} from '../Button/Button';\nimport {IconButtonProps} from '../Button/Iconbutton';\nimport {HyperlinkProps} from '../HyperLink/HyperLink';\n\nexport interface TableProps {\n  title?: string; // Will render header row\n\n  columns: TableColumn[];\n  rows: any[];\n\n  border?: boolean;\n  accordion?: boolean; // Will render accordion table\n  collapsed?: boolean; // whether table should be collapsed or not\n  collapsedRows?: number; // Number of rows to show when table is collapsed\n  sortProps?: TableSortProps;\n\n  remoteOperations?: boolean; // Indicates that pagination should be done remotely\n  pagination?: TablePagination; // Required only in case remotePagination is set to true\n  onPreviousPageClick?: () => void; // Will fire on previous page click in case remotePagination is set to true\n  onNextPageClick?: () => void; // Will fire on next page click in case remotePagination is set to true\n  onRowsPerPageChange?: (count: number) => void; // Will fire when rows per page changes in case remotePagination is set to true\n  onTriggerSortingChange?: (key: string, direction?: TableSortingDirection) => void; // Will fire when the sorting direction changes. Used with remote pagination,\n\n  showLoadingIndicator?: boolean;\n  rowsPerPageLabel? :string; //label that will be shown next to the rows per page selector\n  noRowsLabel?: string; //label that will be shown when there are no rows in the grid\n  showMoreLabel?: string; //label that will be shown for 'accordion' grid when there are some rows collapsed\n  showFewerLabel?: string; //label that will be shown for 'accordion' grid when user can 'collapse' some of the rows\n\n  menu?: Pick<DropdownButtonProps, 'items' | 'onClick' | 'disabled' | 'width' | 'itemsType' | 'multiSelect'>;\n\n  selectable?: boolean;\n  onSelectionChange?: (value: any | any[]) => void;\n  multiSelect?: boolean;\n  keyExpr?: string;\n  selectedRows?: any[];\n\n  layout?: TableLayout;\n}\n\nexport interface TableSortProps {\n  column: string;\n  direction: TableSortingDirection;\n}\n\nexport interface TableColumn {\n  key: string;\n  name: string;\n  filterValue?: string;\n\n  icon?: React.ReactNode;\n\n  width?: string | number;\n  colorFn?: (row: any, key: string) => string;\n  justify?: TableJustification;\n  shortenText?: boolean;\n\n  action?: (row: any, event: any) => void;\n  type?: TableColumnTypes;\n  additionalProps?: Pick<ButtonProps, 'variant' | 'size' | 'width' | 'icon'> | Pick<IconButtonProps, 'variant' | 'shape' | 'disabled'> | Pick<HyperlinkProps, 'variant'>;\n  customContent?: (row: any, key: string) => any;\n\n  sortable?: boolean;\n}\n\nexport type TableColumnTypes = 'text' | 'boolean' | 'number' | 'custom' | 'button' | 'icon' | 'link';\n\nexport type TableJustification = 'right' | 'left' | 'center';\n\nexport type TableSortingDirection = 'asc' | 'desc';\n\nexport type TableLayout = 'auto' | 'fixed';\n\nexport interface TablePagination {\n  from: number;\n  to: number;\n  total: number;\n  currentPage: number;\n  rowsPerPage: number;\n}\n\n// will override component properties in case of button, icon and link\n"],"mappings":""}

package/dist/Tile/TileCommonItems.cjs

@@ -24,11 +24,11 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var TileNoteText = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)([""])));
 exports.TileNoteText = TileNoteText;
-var TileNoteIcon = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["display: flex;"])));
+var TileNoteIcon = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)([""])));
 exports.TileNoteIcon = TileNoteIcon;
 var TileNoteWrapper = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  color: ", ";\n\n  &.small {\n    gap: 4px;\n\n    ", " {\n      width: 16px;\n      height: 16px;\n    }\n\n    ", " {\n      ", "\n    }\n  }\n\n  &.medium {\n    gap: 6px;\n\n    ", " {\n      width: 16px;\n      height: 16px;\n    }\n\n    ", " {\n      ", "\n    }\n\n  }\n\n  &.large {\n    gap: 8px;\n\n    ", " {\n      width: 20px;\n      height: 20px;\n    }\n\n    ", " {\n      ", "\n    }\n  }\n"])), _styles.COLORS.neutral_600, TileNoteIcon, TileNoteText, (0, _styles.ComponentXXSStyling)(_styles.ComponentTextStyle.Regular, null), TileNoteIcon, TileNoteText, (0, _styles.ComponentXSStyling)(_styles.ComponentTextStyle.Regular, null), TileNoteIcon, TileNoteText, (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Regular, null));
 exports.TileNoteWrapper = TileNoteWrapper;
-var TileHyperLinkIcon = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["display: flex"])));
+var TileHyperLinkIcon = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)([""])));
 exports.TileHyperLinkIcon = TileHyperLinkIcon;
 var TileHyperLinkText = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)([""])));
 exports.TileHyperLinkText = TileHyperLinkText;

package/dist/Tile/TileCommonItems.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TileCommonItems.cjs","names":["TileNoteText","styled","div","TileNoteIcon","TileNoteWrapper","COLORS","neutral_600","ComponentXXSStyling","ComponentTextStyle","Regular","ComponentXSStyling","ComponentSStyling","TileHyperLinkIcon","TileHyperLinkText","TileHyperLinkWrapper","Bold","primary_500","ComponentMStyling","ComponentLStyling","RenderTileItem","item","size","key","undefined","componentType","action","disabled","icon","active","onChange","defaultState","activeState","items","itemsType","onClick","actionIcon","actionLabel","actionVariant","actionLoading","multiSelect","scrollable","pinTopItem","maxHeight","noteIcon","React","cloneElement","Size","Large","noteText","linkText","linkIcon","rest","buttonText"],"sources":["../../src/Tile/TileCommonItems.tsx"],"sourcesContent":["import {\n  TileDropdownButton,\n  TileHyperLink,\n  TileIconButton,\n  TileNote,\n  TileStandardButton,\n  TileToggleButton\n} from './TileTypes';\nimport {Button, IconButton} from '../Button';\nimport {ToggleButton} from '../Toggles';\nimport {DropdownButton} from '../Dropdown';\nimport React from 'react';\nimport styled from 'styled-components';\nimport {\n  COLORS, ComponentLStyling,\n  ComponentMStyling,\n  ComponentSStyling,\n  ComponentTextStyle,\n  ComponentXSStyling,\n  ComponentXXSStyling\n} from '../styles';\nimport {HyperLink} from '../HyperLink';\nimport {Size} from '../types';\n\n\nexport const TileNoteText = styled.div``;\nexport const TileNoteIcon = styled.div`display: flex;`;\nexport const TileNoteWrapper = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  color: ${COLORS.neutral_600};\n\n  &.small {\n    gap: 4px;\n\n    ${TileNoteIcon} {\n      width: 16px;\n      height: 16px;\n    }\n\n    ${TileNoteText} {\n      ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\n    }\n  }\n\n  &.medium {\n    gap: 6px;\n\n    ${TileNoteIcon} {\n      width: 16px;\n      height: 16px;\n    }\n\n    ${TileNoteText} {\n      ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n    }\n\n  }\n\n  &.large {\n    gap: 8px;\n\n    ${TileNoteIcon} {\n      width: 20px;\n      height: 20px;\n    }\n\n    ${TileNoteText} {\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n    }\n  }\n`;\n\n\nexport const TileHyperLinkIcon = styled.div`display: flex`;\nexport const TileHyperLinkText = styled.div``;\n\nexport const TileHyperLinkWrapper = styled.div`\n  width: max-content;\n\n  ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.primary_500)}\n  a {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: 4px;\n  }\n\n  &.small {\n    ${TileHyperLinkIcon} {\n      width: 24px;\n      height: 24px;\n    }\n\n    ${TileHyperLinkText} {\n      ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n    }\n\n    a {\n      gap: 4px;\n    }\n  }\n\n  &.medium {\n    ${TileHyperLinkIcon} {\n      width: 24px;\n      height: 24px;\n    }\n\n    ${TileHyperLinkText} {\n      ${ComponentMStyling(ComponentTextStyle.Bold, null)}\n    }\n\n    a {\n      gap: 6px;\n    }\n  }\n\n  &.large {\n    ${TileHyperLinkIcon} {\n      width: 28px;\n      height: 28px;\n    }\n\n    ${TileHyperLinkText} {\n      ${ComponentLStyling(ComponentTextStyle.Bold, null)}\n    }\n\n    a {\n      gap: 8px;\n    }\n  }\n`\n\nexport const RenderTileItem = (item: TileIconButton | TileToggleButton | TileDropdownButton | TileStandardButton | TileNote | TileHyperLink,\n                               size: Size,\n                               key: any | undefined = undefined) => {\n  switch (item.componentType) {\n    case 'icon': {\n      return <IconButton key={key}\n                         variant={'secondary'}\n                         useTransparentBackground={true}\n                         shape={'circular'}\n                         action={item.action}\n                         disabled={item.disabled}>\n        {item.icon}\n      </IconButton>\n    }\n    case 'toggle': {\n      return <ToggleButton key={key}\n                           active={item.active}\n                           onChange={item.onChange}\n                           defaultState={item.defaultState}\n                           activeState={item.activeState}\n                           disabled={item.disabled}/>\n    }\n    case 'dropdown': {\n      return <DropdownButton key={key}\n                             type={'icon'}\n                             items={item.items}\n                             itemsType={item.itemsType}\n                             onClick={item.onClick}\n                             icon={item.icon}\n                             action={item.action}\n                             actionIcon={item.actionIcon}\n                             actionLabel={item.actionLabel}\n                             actionVariant={item.actionVariant}\n                             actionLoading={item.actionLoading}\n                             multiSelect={item.multiSelect}\n                             scrollable={item.scrollable}\n                             pinTopItem={item.pinTopItem}\n                             maxHeight={item.maxHeight}\n                             disabled={item.disabled}/>\n\n    }\n    case 'note': {\n      return <TileNoteWrapper key={key} className={size}>\n        {\n          item.noteIcon &&\n          <TileNoteIcon>\n            {React.cloneElement(item.noteIcon as React.ReactElement, {size: size === Size.Large ? '20px' : '16'})}\n          </TileNoteIcon>\n        }\n        <TileNoteText>{item.noteText}</TileNoteText>\n      </TileNoteWrapper>\n\n    }\n    case 'link': {\n      const {linkText, componentType, linkIcon, ...rest} = item;\n      return <TileHyperLinkWrapper className={size} key={key}>\n        <HyperLink {...rest}>\n          <TileHyperLinkIcon>\n            {React.cloneElement(linkIcon as React.ReactElement, {size: size === Size.Large ? '28px' : '24px'})}\n          </TileHyperLinkIcon>\n          <TileHyperLinkText>{linkText}</TileHyperLinkText>\n        </HyperLink>\n      </TileHyperLinkWrapper>\n    }\n    case 'button': {\n      const {buttonText, componentType, ...rest} = item;\n      return <Button key={key}\n                     size={size}\n                     {...rest}>\n        {buttonText}\n      </Button>\n    }\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"TileCommonItems.cjs","names":["TileNoteText","styled","div","TileNoteIcon","TileNoteWrapper","COLORS","neutral_600","ComponentXXSStyling","ComponentTextStyle","Regular","ComponentXSStyling","ComponentSStyling","TileHyperLinkIcon","TileHyperLinkText","TileHyperLinkWrapper","Bold","primary_500","ComponentMStyling","ComponentLStyling","RenderTileItem","item","size","key","undefined","componentType","action","disabled","icon","active","onChange","defaultState","activeState","items","itemsType","onClick","actionIcon","actionLabel","actionVariant","actionLoading","multiSelect","scrollable","pinTopItem","maxHeight","noteIcon","React","cloneElement","Size","Large","noteText","linkText","linkIcon","rest","buttonText"],"sources":["../../src/Tile/TileCommonItems.tsx"],"sourcesContent":["import {\n  TileDropdownButton,\n  TileHyperLink,\n  TileIconButton,\n  TileNote,\n  TileStandardButton,\n  TileToggleButton\n} from './TileTypes';\nimport {Button, IconButton} from '../Button';\nimport {ToggleButton} from '../Toggles';\nimport {DropdownButton} from '../Dropdown';\nimport React from 'react';\nimport styled from 'styled-components';\nimport {\n  COLORS, ComponentLStyling,\n  ComponentMStyling,\n  ComponentSStyling,\n  ComponentTextStyle,\n  ComponentXSStyling,\n  ComponentXXSStyling\n} from '../styles';\nimport {HyperLink} from '../HyperLink';\nimport {Size} from '../types';\n\n\nexport const TileNoteText = styled.div``;\nexport const TileNoteIcon = styled.div``;\nexport const TileNoteWrapper = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  color: ${COLORS.neutral_600};\n\n  &.small {\n    gap: 4px;\n\n    ${TileNoteIcon} {\n      width: 16px;\n      height: 16px;\n    }\n\n    ${TileNoteText} {\n      ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\n    }\n  }\n\n  &.medium {\n    gap: 6px;\n\n    ${TileNoteIcon} {\n      width: 16px;\n      height: 16px;\n    }\n\n    ${TileNoteText} {\n      ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n    }\n\n  }\n\n  &.large {\n    gap: 8px;\n\n    ${TileNoteIcon} {\n      width: 20px;\n      height: 20px;\n    }\n\n    ${TileNoteText} {\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n    }\n  }\n`;\n\n\nexport const TileHyperLinkIcon = styled.div``;\nexport const TileHyperLinkText = styled.div``;\n\nexport const TileHyperLinkWrapper = styled.div`\n  width: max-content;\n\n  ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.primary_500)}\n  a {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: 4px;\n  }\n\n  &.small {\n    ${TileHyperLinkIcon} {\n      width: 24px;\n      height: 24px;\n    }\n\n    ${TileHyperLinkText} {\n      ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n    }\n\n    a {\n      gap: 4px;\n    }\n  }\n\n  &.medium {\n    ${TileHyperLinkIcon} {\n      width: 24px;\n      height: 24px;\n    }\n\n    ${TileHyperLinkText} {\n      ${ComponentMStyling(ComponentTextStyle.Bold, null)}\n    }\n\n    a {\n      gap: 6px;\n    }\n  }\n\n  &.large {\n    ${TileHyperLinkIcon} {\n      width: 28px;\n      height: 28px;\n    }\n\n    ${TileHyperLinkText} {\n      ${ComponentLStyling(ComponentTextStyle.Bold, null)}\n    }\n\n    a {\n      gap: 8px;\n    }\n  }\n`\n\nexport const RenderTileItem = (item: TileIconButton | TileToggleButton | TileDropdownButton | TileStandardButton | TileNote | TileHyperLink,\n                               size: Size,\n                               key: any | undefined = undefined) => {\n  switch (item.componentType) {\n    case 'icon': {\n      return <IconButton key={key}\n                         variant={'secondary'}\n                         useTransparentBackground={true}\n                         shape={'circular'}\n                         action={item.action}\n                         disabled={item.disabled}>\n        {item.icon}\n      </IconButton>\n    }\n    case 'toggle': {\n      return <ToggleButton key={key}\n                           active={item.active}\n                           onChange={item.onChange}\n                           defaultState={item.defaultState}\n                           activeState={item.activeState}\n                           disabled={item.disabled}/>\n    }\n    case 'dropdown': {\n      return <DropdownButton key={key}\n                             type={'icon'}\n                             items={item.items}\n                             itemsType={item.itemsType}\n                             onClick={item.onClick}\n                             icon={item.icon}\n                             action={item.action}\n                             actionIcon={item.actionIcon}\n                             actionLabel={item.actionLabel}\n                             actionVariant={item.actionVariant}\n                             actionLoading={item.actionLoading}\n                             multiSelect={item.multiSelect}\n                             scrollable={item.scrollable}\n                             pinTopItem={item.pinTopItem}\n                             maxHeight={item.maxHeight}\n                             disabled={item.disabled}/>\n\n    }\n    case 'note': {\n      return <TileNoteWrapper key={key} className={size}>\n        {\n          item.noteIcon &&\n          <TileNoteIcon>\n            {React.cloneElement(item.noteIcon as React.ReactElement, {size: size === Size.Large ? '20px' : '16'})}\n          </TileNoteIcon>\n        }\n        <TileNoteText>{item.noteText}</TileNoteText>\n      </TileNoteWrapper>\n\n    }\n    case 'link': {\n      const {linkText, componentType, linkIcon, ...rest} = item;\n      return <TileHyperLinkWrapper className={size} key={key}>\n        <HyperLink {...rest}>\n          <TileHyperLinkIcon>\n            {React.cloneElement(linkIcon as React.ReactElement, {size: size === Size.Large ? '28px' : '24px'})}\n          </TileHyperLinkIcon>\n          <TileHyperLinkText>{linkText}</TileHyperLinkText>\n        </HyperLink>\n      </TileHyperLinkWrapper>\n    }\n    case 'button': {\n      const {buttonText, componentType, ...rest} = item;\n      return <Button key={key}\n                     size={size}\n                     {...rest}>\n        {buttonText}\n      </Button>\n    }\n  }\n}\n"],"mappings":"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"}

package/dist/Tile/TileCommonItems.js

@@ -17,9 +17,9 @@ import { Size } from '../types';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export var TileNoteText = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral([""])));
-export var TileNoteIcon = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["display: flex;"])));
+export var TileNoteIcon = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral([""])));
 export var TileNoteWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  color: ", ";\n\n  &.small {\n    gap: 4px;\n\n    ", " {\n      width: 16px;\n      height: 16px;\n    }\n\n    ", " {\n      ", "\n    }\n  }\n\n  &.medium {\n    gap: 6px;\n\n    ", " {\n      width: 16px;\n      height: 16px;\n    }\n\n    ", " {\n      ", "\n    }\n\n  }\n\n  &.large {\n    gap: 8px;\n\n    ", " {\n      width: 20px;\n      height: 20px;\n    }\n\n    ", " {\n      ", "\n    }\n  }\n"])), COLORS.neutral_600, TileNoteIcon, TileNoteText, ComponentXXSStyling(ComponentTextStyle.Regular, null), TileNoteIcon, TileNoteText, ComponentXSStyling(ComponentTextStyle.Regular, null), TileNoteIcon, TileNoteText, ComponentSStyling(ComponentTextStyle.Regular, null));
-export var TileHyperLinkIcon = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["display: flex"])));
+export var TileHyperLinkIcon = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral([""])));
 export var TileHyperLinkText = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral([""])));
 export var TileHyperLinkWrapper = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  width: max-content;\n\n  ", "\n  a {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: 4px;\n  }\n\n  &.small {\n    ", " {\n      width: 24px;\n      height: 24px;\n    }\n\n    ", " {\n      ", "\n    }\n\n    a {\n      gap: 4px;\n    }\n  }\n\n  &.medium {\n    ", " {\n      width: 24px;\n      height: 24px;\n    }\n\n    ", " {\n      ", "\n    }\n\n    a {\n      gap: 6px;\n    }\n  }\n\n  &.large {\n    ", " {\n      width: 28px;\n      height: 28px;\n    }\n\n    ", " {\n      ", "\n    }\n\n    a {\n      gap: 8px;\n    }\n  }\n"])), ComponentSStyling(ComponentTextStyle.Bold, COLORS.primary_500), TileHyperLinkIcon, TileHyperLinkText, ComponentSStyling(ComponentTextStyle.Bold, null), TileHyperLinkIcon, TileHyperLinkText, ComponentMStyling(ComponentTextStyle.Bold, null), TileHyperLinkIcon, TileHyperLinkText, ComponentLStyling(ComponentTextStyle.Bold, null));
 export var RenderTileItem = function RenderTileItem(item, size) {

package/dist/Tile/TileCommonItems.js.map

@@ -1 +1 @@
-{"version":3,"file":"TileCommonItems.js","names":["Button","IconButton","ToggleButton","DropdownButton","React","styled","COLORS","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","ComponentXSStyling","ComponentXXSStyling","HyperLink","Size","TileNoteText","div","TileNoteIcon","TileNoteWrapper","neutral_600","Regular","TileHyperLinkIcon","TileHyperLinkText","TileHyperLinkWrapper","Bold","primary_500","RenderTileItem","item","size","key","undefined","componentType","action","disabled","icon","active","onChange","defaultState","activeState","items","itemsType","onClick","actionIcon","actionLabel","actionVariant","actionLoading","multiSelect","scrollable","pinTopItem","maxHeight","noteIcon","cloneElement","Large","noteText","linkText","linkIcon","rest","buttonText"],"sources":["../../src/Tile/TileCommonItems.tsx"],"sourcesContent":["import {\n  TileDropdownButton,\n  TileHyperLink,\n  TileIconButton,\n  TileNote,\n  TileStandardButton,\n  TileToggleButton\n} from './TileTypes';\nimport {Button, IconButton} from '../Button';\nimport {ToggleButton} from '../Toggles';\nimport {DropdownButton} from '../Dropdown';\nimport React from 'react';\nimport styled from 'styled-components';\nimport {\n  COLORS, ComponentLStyling,\n  ComponentMStyling,\n  ComponentSStyling,\n  ComponentTextStyle,\n  ComponentXSStyling,\n  ComponentXXSStyling\n} from '../styles';\nimport {HyperLink} from '../HyperLink';\nimport {Size} from '../types';\n\n\nexport const TileNoteText = styled.div``;\nexport const TileNoteIcon = styled.div`display: flex;`;\nexport const TileNoteWrapper = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  color: ${COLORS.neutral_600};\n\n  &.small {\n    gap: 4px;\n\n    ${TileNoteIcon} {\n      width: 16px;\n      height: 16px;\n    }\n\n    ${TileNoteText} {\n      ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\n    }\n  }\n\n  &.medium {\n    gap: 6px;\n\n    ${TileNoteIcon} {\n      width: 16px;\n      height: 16px;\n    }\n\n    ${TileNoteText} {\n      ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n    }\n\n  }\n\n  &.large {\n    gap: 8px;\n\n    ${TileNoteIcon} {\n      width: 20px;\n      height: 20px;\n    }\n\n    ${TileNoteText} {\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n    }\n  }\n`;\n\n\nexport const TileHyperLinkIcon = styled.div`display: flex`;\nexport const TileHyperLinkText = styled.div``;\n\nexport const TileHyperLinkWrapper = styled.div`\n  width: max-content;\n\n  ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.primary_500)}\n  a {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: 4px;\n  }\n\n  &.small {\n    ${TileHyperLinkIcon} {\n      width: 24px;\n      height: 24px;\n    }\n\n    ${TileHyperLinkText} {\n      ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n    }\n\n    a {\n      gap: 4px;\n    }\n  }\n\n  &.medium {\n    ${TileHyperLinkIcon} {\n      width: 24px;\n      height: 24px;\n    }\n\n    ${TileHyperLinkText} {\n      ${ComponentMStyling(ComponentTextStyle.Bold, null)}\n    }\n\n    a {\n      gap: 6px;\n    }\n  }\n\n  &.large {\n    ${TileHyperLinkIcon} {\n      width: 28px;\n      height: 28px;\n    }\n\n    ${TileHyperLinkText} {\n      ${ComponentLStyling(ComponentTextStyle.Bold, null)}\n    }\n\n    a {\n      gap: 8px;\n    }\n  }\n`\n\nexport const RenderTileItem = (item: TileIconButton | TileToggleButton | TileDropdownButton | TileStandardButton | TileNote | TileHyperLink,\n                               size: Size,\n                               key: any | undefined = undefined) => {\n  switch (item.componentType) {\n    case 'icon': {\n      return <IconButton key={key}\n                         variant={'secondary'}\n                         useTransparentBackground={true}\n                         shape={'circular'}\n                         action={item.action}\n                         disabled={item.disabled}>\n        {item.icon}\n      </IconButton>\n    }\n    case 'toggle': {\n      return <ToggleButton key={key}\n                           active={item.active}\n                           onChange={item.onChange}\n                           defaultState={item.defaultState}\n                           activeState={item.activeState}\n                           disabled={item.disabled}/>\n    }\n    case 'dropdown': {\n      return <DropdownButton key={key}\n                             type={'icon'}\n                             items={item.items}\n                             itemsType={item.itemsType}\n                             onClick={item.onClick}\n                             icon={item.icon}\n                             action={item.action}\n                             actionIcon={item.actionIcon}\n                             actionLabel={item.actionLabel}\n                             actionVariant={item.actionVariant}\n                             actionLoading={item.actionLoading}\n                             multiSelect={item.multiSelect}\n                             scrollable={item.scrollable}\n                             pinTopItem={item.pinTopItem}\n                             maxHeight={item.maxHeight}\n                             disabled={item.disabled}/>\n\n    }\n    case 'note': {\n      return <TileNoteWrapper key={key} className={size}>\n        {\n          item.noteIcon &&\n          <TileNoteIcon>\n            {React.cloneElement(item.noteIcon as React.ReactElement, {size: size === Size.Large ? '20px' : '16'})}\n          </TileNoteIcon>\n        }\n        <TileNoteText>{item.noteText}</TileNoteText>\n      </TileNoteWrapper>\n\n    }\n    case 'link': {\n      const {linkText, componentType, linkIcon, ...rest} = item;\n      return <TileHyperLinkWrapper className={size} key={key}>\n        <HyperLink {...rest}>\n          <TileHyperLinkIcon>\n            {React.cloneElement(linkIcon as React.ReactElement, {size: size === Size.Large ? '28px' : '24px'})}\n          </TileHyperLinkIcon>\n          <TileHyperLinkText>{linkText}</TileHyperLinkText>\n        </HyperLink>\n      </TileHyperLinkWrapper>\n    }\n    case 'button': {\n      const {buttonText, componentType, ...rest} = item;\n      return <Button key={key}\n                     size={size}\n                     {...rest}>\n        {buttonText}\n      </Button>\n    }\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"TileCommonItems.js","names":["Button","IconButton","ToggleButton","DropdownButton","React","styled","COLORS","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","ComponentXSStyling","ComponentXXSStyling","HyperLink","Size","TileNoteText","div","TileNoteIcon","TileNoteWrapper","neutral_600","Regular","TileHyperLinkIcon","TileHyperLinkText","TileHyperLinkWrapper","Bold","primary_500","RenderTileItem","item","size","key","undefined","componentType","action","disabled","icon","active","onChange","defaultState","activeState","items","itemsType","onClick","actionIcon","actionLabel","actionVariant","actionLoading","multiSelect","scrollable","pinTopItem","maxHeight","noteIcon","cloneElement","Large","noteText","linkText","linkIcon","rest","buttonText"],"sources":["../../src/Tile/TileCommonItems.tsx"],"sourcesContent":["import {\n  TileDropdownButton,\n  TileHyperLink,\n  TileIconButton,\n  TileNote,\n  TileStandardButton,\n  TileToggleButton\n} from './TileTypes';\nimport {Button, IconButton} from '../Button';\nimport {ToggleButton} from '../Toggles';\nimport {DropdownButton} from '../Dropdown';\nimport React from 'react';\nimport styled from 'styled-components';\nimport {\n  COLORS, ComponentLStyling,\n  ComponentMStyling,\n  ComponentSStyling,\n  ComponentTextStyle,\n  ComponentXSStyling,\n  ComponentXXSStyling\n} from '../styles';\nimport {HyperLink} from '../HyperLink';\nimport {Size} from '../types';\n\n\nexport const TileNoteText = styled.div``;\nexport const TileNoteIcon = styled.div``;\nexport const TileNoteWrapper = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  color: ${COLORS.neutral_600};\n\n  &.small {\n    gap: 4px;\n\n    ${TileNoteIcon} {\n      width: 16px;\n      height: 16px;\n    }\n\n    ${TileNoteText} {\n      ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\n    }\n  }\n\n  &.medium {\n    gap: 6px;\n\n    ${TileNoteIcon} {\n      width: 16px;\n      height: 16px;\n    }\n\n    ${TileNoteText} {\n      ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n    }\n\n  }\n\n  &.large {\n    gap: 8px;\n\n    ${TileNoteIcon} {\n      width: 20px;\n      height: 20px;\n    }\n\n    ${TileNoteText} {\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n    }\n  }\n`;\n\n\nexport const TileHyperLinkIcon = styled.div``;\nexport const TileHyperLinkText = styled.div``;\n\nexport const TileHyperLinkWrapper = styled.div`\n  width: max-content;\n\n  ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.primary_500)}\n  a {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: 4px;\n  }\n\n  &.small {\n    ${TileHyperLinkIcon} {\n      width: 24px;\n      height: 24px;\n    }\n\n    ${TileHyperLinkText} {\n      ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n    }\n\n    a {\n      gap: 4px;\n    }\n  }\n\n  &.medium {\n    ${TileHyperLinkIcon} {\n      width: 24px;\n      height: 24px;\n    }\n\n    ${TileHyperLinkText} {\n      ${ComponentMStyling(ComponentTextStyle.Bold, null)}\n    }\n\n    a {\n      gap: 6px;\n    }\n  }\n\n  &.large {\n    ${TileHyperLinkIcon} {\n      width: 28px;\n      height: 28px;\n    }\n\n    ${TileHyperLinkText} {\n      ${ComponentLStyling(ComponentTextStyle.Bold, null)}\n    }\n\n    a {\n      gap: 8px;\n    }\n  }\n`\n\nexport const RenderTileItem = (item: TileIconButton | TileToggleButton | TileDropdownButton | TileStandardButton | TileNote | TileHyperLink,\n                               size: Size,\n                               key: any | undefined = undefined) => {\n  switch (item.componentType) {\n    case 'icon': {\n      return <IconButton key={key}\n                         variant={'secondary'}\n                         useTransparentBackground={true}\n                         shape={'circular'}\n                         action={item.action}\n                         disabled={item.disabled}>\n        {item.icon}\n      </IconButton>\n    }\n    case 'toggle': {\n      return <ToggleButton key={key}\n                           active={item.active}\n                           onChange={item.onChange}\n                           defaultState={item.defaultState}\n                           activeState={item.activeState}\n                           disabled={item.disabled}/>\n    }\n    case 'dropdown': {\n      return <DropdownButton key={key}\n                             type={'icon'}\n                             items={item.items}\n                             itemsType={item.itemsType}\n                             onClick={item.onClick}\n                             icon={item.icon}\n                             action={item.action}\n                             actionIcon={item.actionIcon}\n                             actionLabel={item.actionLabel}\n                             actionVariant={item.actionVariant}\n                             actionLoading={item.actionLoading}\n                             multiSelect={item.multiSelect}\n                             scrollable={item.scrollable}\n                             pinTopItem={item.pinTopItem}\n                             maxHeight={item.maxHeight}\n                             disabled={item.disabled}/>\n\n    }\n    case 'note': {\n      return <TileNoteWrapper key={key} className={size}>\n        {\n          item.noteIcon &&\n          <TileNoteIcon>\n            {React.cloneElement(item.noteIcon as React.ReactElement, {size: size === Size.Large ? '20px' : '16'})}\n          </TileNoteIcon>\n        }\n        <TileNoteText>{item.noteText}</TileNoteText>\n      </TileNoteWrapper>\n\n    }\n    case 'link': {\n      const {linkText, componentType, linkIcon, ...rest} = item;\n      return <TileHyperLinkWrapper className={size} key={key}>\n        <HyperLink {...rest}>\n          <TileHyperLinkIcon>\n            {React.cloneElement(linkIcon as React.ReactElement, {size: size === Size.Large ? '28px' : '24px'})}\n          </TileHyperLinkIcon>\n          <TileHyperLinkText>{linkText}</TileHyperLinkText>\n        </HyperLink>\n      </TileHyperLinkWrapper>\n    }\n    case 'button': {\n      const {buttonText, componentType, ...rest} = item;\n      return <Button key={key}\n                     size={size}\n                     {...rest}>\n        {buttonText}\n      </Button>\n    }\n  }\n}\n"],"mappings":"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"}

package/dist/Tile/TileHeader.cjs

@@ -15,17 +15,15 @@ var _Button = require("../Button");
 var _SystemIcons = require("../icons/systemicons/SystemIcons");
 var _TileCommonItems = require("./TileCommonItems");
 var _jsxRuntime = require("react/jsx-runtime");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
-var SubtitleIconContainer = _styledComponents.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  width: 16px;\n  height: 16px;\n  .large & {\n    width: 20px;\n    height: 20px;\n  }\n"])));
-var SubtitleContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  display: flex;\n  align-items: center;\n  gap: 4px;\n"])), _styles.COLORS.neutral_600);
-var TitleContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n"])), _styles.COLORS.black);
-var TextContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  gap: 4px;\n  flex: 1;\n"])));
-var ActionContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n"])));
-var Wrapper = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n\n  min-height: 56px;\n  box-sizing: border-box;\n\n  &.small {\n    padding: 8px 16px;\n    min-height: 56px;\n\n    ", " {\n      ", "\n    }\n\n    ", " {\n      ", "\n    }\n  }\n\n  &.medium {\n    padding: 12px 20px;\n    min-height: 64px;\n\n    ", " {\n      ", "\n    }\n\n    ", " {\n      ", "\n    }\n\n  }\n\n  &.large {\n    padding: 16px 24px;\n    min-height: 72px;\n\n    ", " {\n      ", "\n    }\n\n    ", " {\n      ", "\n    }\n\n  }\n"])), SubtitleContainer, (0, _styles.ComponentXXSStyling)(_styles.ComponentTextStyle.Regular, null), TitleContainer, (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, null), SubtitleContainer, (0, _styles.ComponentXSStyling)(_styles.ComponentTextStyle.Regular, null), TitleContainer, (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Bold, null), SubtitleContainer, (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Regular, null), TitleContainer, (0, _styles.ComponentLStyling)(_styles.ComponentTextStyle.Bold, null));
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+var TagLineContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n"])), _styles.COLORS.neutral_600);
+var TitleContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n"])), _styles.COLORS.black);
+var TextContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  flex: 1;\n"])));
+var ActionContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n"])));
+var Wrapper = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n\n  min-height: 56px;\n  box-sizing: border-box;\n\n  &.small {\n    padding: 4px 16px;\n    min-height: 56px;\n\n    ", " {\n      ", "\n    }\n\n    ", " {\n      ", "\n    }\n  }\n\n  &.medium {\n    padding: 8px 20px;\n    min-height: 64px;\n\n    ", " {\n      ", "\n    }\n\n    ", " {\n      ", "\n    }\n\n  }\n\n  &.large {\n    padding: 12px 24px;\n    min-height: 72px;\n\n    ", " {\n      ", "\n    }\n\n    ", " {\n      ", "\n    }\n\n  }\n"])), TagLineContainer, (0, _styles.ComponentXXSStyling)(_styles.ComponentTextStyle.Regular, null), TitleContainer, (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, null), TagLineContainer, (0, _styles.ComponentXSStyling)(_styles.ComponentTextStyle.Regular, null), TitleContainer, (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Bold, null), TagLineContainer, (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Regular, null), TitleContainer, (0, _styles.ComponentLStyling)(_styles.ComponentTextStyle.Bold, null));
 var TileHeader = function TileHeader(_ref) {
   var title = _ref.title,
-    subtitle = _ref.subtitle,
-    subtitleIcon = _ref.subtitleIcon,
+    tagLine = _ref.tagLine,
     tooltip = _ref.tooltip,
     buttons = _ref.buttons,
     size = _ref.size;
@@ -54,16 +52,10 @@ var TileHeader = function TileHeader(_ref) {
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Wrapper, {
     className: size,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(TextContainer, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(TitleContainer, {
+      children: [tagLine && /*#__PURE__*/(0, _jsxRuntime.jsx)(TagLineContainer, {
+        children: tagLine
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(TitleContainer, {
         children: title
-      }), subtitle && /*#__PURE__*/(0, _jsxRuntime.jsxs)(SubtitleContainer, {
-        children: [subtitleIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(SubtitleIconContainer, {
-          children: /*#__PURE__*/_react.default.cloneElement(subtitleIcon, {
-            size: size === _types.Size.Large ? '20px' : '16px'
-          })
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-          children: subtitle
-        })]
       })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(ActionContainer, {
       children: [renderTooltip(), buttons && buttons.map(function (item, index) {

package/dist/Tile/TileHeader.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TileHeader.cjs","names":["SubtitleIconContainer","styled","span","SubtitleContainer","div","COLORS","neutral_600","TitleContainer","black","TextContainer","ActionContainer","Wrapper","ComponentXXSStyling","ComponentTextStyle","Regular","ComponentSStyling","Bold","ComponentXSStyling","ComponentMStyling","ComponentLStyling","TileHeader","title","subtitle","subtitleIcon","tooltip","buttons","size","renderTooltip","Size","XSmall","cursor","React","cloneElement","Large","map","item","index","RenderTileItem"],"sources":["../../src/Tile/TileHeader.tsx"],"sourcesContent":["import React from 'react';\nimport {TileHeaderProps} from './TileTypes';\nimport {Size} from '../types';\nimport styled from 'styled-components';\nimport {\n  COLORS,\n  ComponentLStyling,\n  ComponentMStyling,\n  ComponentSStyling,\n  ComponentTextStyle,\n  ComponentXSStyling,\n  ComponentXXSStyling\n} from '../styles';\nimport {TooltipWrapper} from '../Tooltips';\nimport {IconButton} from '../Button';\nimport {Help} from '../icons/systemicons/SystemIcons';\nimport {RenderTileItem} from './TileCommonItems';\n\nconst SubtitleIconContainer = styled.span`\n  display: flex;\n  width: 16px;\n  height: 16px;\n  .large & {\n    width: 20px;\n    height: 20px;\n  }\n`;\n\nconst SubtitleContainer = styled.div`\n  color: ${COLORS.neutral_600};\n  display: flex;\n  align-items: center;\n  gap: 4px;\n`;\n\nconst TitleContainer = styled.div`\n  color: ${COLORS.black};\n`;\n\nconst TextContainer = styled.div`\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  gap: 4px;\n  flex: 1;\n`;\n\nconst ActionContainer = styled.div`\n  display: flex;\n  align-items: center;\n`;\n\nconst Wrapper = styled.div`\n  display: flex;\n  align-items: center;\n\n  min-height: 56px;\n  box-sizing: border-box;\n\n  &.small {\n    padding: 8px 16px;\n    min-height: 56px;\n\n    ${SubtitleContainer} {\n      ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    ${TitleContainer} {\n      ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n    }\n  }\n\n  &.medium {\n    padding: 12px 20px;\n    min-height: 64px;\n\n    ${SubtitleContainer} {\n      ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    ${TitleContainer} {\n      ${ComponentMStyling(ComponentTextStyle.Bold, null)}\n    }\n\n  }\n\n  &.large {\n    padding: 16px 24px;\n    min-height: 72px;\n\n    ${SubtitleContainer} {\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    ${TitleContainer} {\n      ${ComponentLStyling(ComponentTextStyle.Bold, null)}\n    }\n\n  }\n`;\n\n\nconst TileHeader: React.FunctionComponent<TileHeaderProps & { size: Size }> = ({\n                                                                                 title,\n                                                                                 subtitle,\n                                                                                 subtitleIcon,\n                                                                                 tooltip,\n                                                                                 buttons,\n                                                                                 size\n                                                                               }) => {\n\n  const renderTooltip = () =>\n    !!tooltip &&\n    <TooltipWrapper delay=\"0s\" size={Size.XSmall}\n                    align=\"center\"\n                    position=\"bottom\"\n                    withArrow={false}\n                    label={tooltip}>\n      <IconButton variant=\"secondary\"\n                  shape=\"circular\"\n                  style={{cursor: 'help'}}\n                  action={() => {\n                  }}>\n        <Help size=\"24px\" color={COLORS.neutral_600}/>\n      </IconButton>\n    </TooltipWrapper>;\n\n\n  return (\n    <Wrapper className={size}>\n      <TextContainer>\n        <TitleContainer>{title}</TitleContainer>\n        {\n          subtitle &&\n          <SubtitleContainer>\n            {\n              subtitleIcon &&\n              <SubtitleIconContainer>{React.cloneElement(subtitleIcon as React.ReactElement, {size: size === Size.Large ? '20px' : '16px'})}</SubtitleIconContainer>\n            }\n            <span>{subtitle}</span>\n          </SubtitleContainer>\n        }\n      </TextContainer>\n      <ActionContainer>\n        {renderTooltip()}\n        {buttons && buttons.map((item, index) => RenderTileItem(item, size, index))}\n      </ActionContainer>\n    </Wrapper>\n  )\n}\n\nexport default TileHeader;\n"],"mappings":"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"}
+{"version":3,"file":"TileHeader.cjs","names":["TagLineContainer","styled","div","COLORS","neutral_600","TitleContainer","black","TextContainer","ActionContainer","Wrapper","ComponentXXSStyling","ComponentTextStyle","Regular","ComponentSStyling","Bold","ComponentXSStyling","ComponentMStyling","ComponentLStyling","TileHeader","title","tagLine","tooltip","buttons","size","renderTooltip","Size","XSmall","cursor","map","item","index","RenderTileItem"],"sources":["../../src/Tile/TileHeader.tsx"],"sourcesContent":["import React from 'react';\nimport {TileHeaderProps} from './TileTypes';\nimport {Size} from '../types';\nimport styled from 'styled-components';\nimport {\n  COLORS,\n  ComponentLStyling,\n  ComponentMStyling,\n  ComponentSStyling,\n  ComponentTextStyle, ComponentXSStyling,\n  ComponentXXSStyling\n} from '../styles';\nimport {TooltipWrapper} from '../Tooltips';\nimport {IconButton} from '../Button';\nimport {Help} from '../icons/systemicons/SystemIcons';\nimport {RenderTileItem} from './TileCommonItems';\n\nconst TagLineContainer = styled.div`\n  color: ${COLORS.neutral_600};\n`;\n\nconst TitleContainer = styled.div`\n  color: ${COLORS.black};\n`;\n\nconst TextContainer = styled.div`\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  flex: 1;\n`;\n\nconst ActionContainer = styled.div`\n  display: flex;\n  align-items: center;\n`;\n\nconst Wrapper = styled.div`\n  display: flex;\n  align-items: center;\n\n  min-height: 56px;\n  box-sizing: border-box;\n\n  &.small {\n    padding: 4px 16px;\n    min-height: 56px;\n\n    ${TagLineContainer} {\n      ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    ${TitleContainer} {\n      ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n    }\n  }\n\n  &.medium {\n    padding: 8px 20px;\n    min-height: 64px;\n\n    ${TagLineContainer} {\n      ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    ${TitleContainer} {\n      ${ComponentMStyling(ComponentTextStyle.Bold, null)}\n    }\n\n  }\n\n  &.large {\n    padding: 12px 24px;\n    min-height: 72px;\n\n    ${TagLineContainer} {\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    ${TitleContainer} {\n      ${ComponentLStyling(ComponentTextStyle.Bold, null)}\n    }\n\n  }\n`;\n\n\nconst TileHeader: React.FunctionComponent<TileHeaderProps & { size: Size }> = ({\n                                                                                 title,\n                                                                                 tagLine,\n                                                                                 tooltip,\n                                                                                 buttons,\n                                                                                 size\n                                                                               }) => {\n\n  const renderTooltip = () =>\n    !!tooltip &&\n    <TooltipWrapper delay=\"0s\" size={Size.XSmall}\n                    align=\"center\"\n                    position=\"bottom\"\n                    withArrow={false}\n                    label={tooltip}>\n      <IconButton variant=\"secondary\"\n                  shape=\"circular\"\n                  style={{cursor: 'help'}}\n                  action={() => {\n                  }}>\n        <Help size=\"24px\" color={COLORS.neutral_600}/>\n      </IconButton>\n    </TooltipWrapper>;\n\n\n  return (\n    <Wrapper className={size}>\n      <TextContainer>\n        {tagLine && <TagLineContainer>{tagLine}</TagLineContainer>}\n        <TitleContainer>{title}</TitleContainer>\n      </TextContainer>\n      <ActionContainer>\n        {renderTooltip()}\n        {buttons && buttons.map((item, index) => RenderTileItem(item, size, index))}\n      </ActionContainer>\n    </Wrapper>\n  )\n}\n\nexport default TileHeader;\n"],"mappings":";;;;;;;;AAAA;AAEA;AACA;AACA;AAQA;AACA;AACA;AACA;AAAiD;AAAA;AAEjD,IAAMA,gBAAgB,GAAGC,yBAAM,CAACC,GAAG,sGACxBC,cAAM,CAACC,WAAW,CAC5B;AAED,IAAMC,cAAc,GAAGJ,yBAAM,CAACC,GAAG,wGACtBC,cAAM,CAACG,KAAK,CACtB;AAED,IAAMC,aAAa,GAAGN,yBAAM,CAACC,GAAG,4KAK/B;AAED,IAAMM,eAAe,GAAGP,yBAAM,CAACC,GAAG,iIAGjC;AAED,IAAMO,OAAO,GAAGR,yBAAM,CAACC,GAAG,ykBAWpBF,gBAAgB,EACd,IAAAU,2BAAmB,EAACC,0BAAkB,CAACC,OAAO,EAAE,IAAI,CAAC,EAGvDP,cAAc,EACZ,IAAAQ,yBAAiB,EAACF,0BAAkB,CAACG,IAAI,EAAE,IAAI,CAAC,EAQlDd,gBAAgB,EACd,IAAAe,0BAAkB,EAACJ,0BAAkB,CAACC,OAAO,EAAE,IAAI,CAAC,EAGtDP,cAAc,EACZ,IAAAW,yBAAiB,EAACL,0BAAkB,CAACG,IAAI,EAAE,IAAI,CAAC,EASlDd,gBAAgB,EACd,IAAAa,yBAAiB,EAACF,0BAAkB,CAACC,OAAO,EAAE,IAAI,CAAC,EAGrDP,cAAc,EACZ,IAAAY,yBAAiB,EAACN,0BAAkB,CAACG,IAAI,EAAE,IAAI,CAAC,CAIvD;AAGD,IAAMI,UAAqE,GAAG,SAAxEA,UAAqE,OAMU;EAAA,IALJC,KAAK,QAALA,KAAK;IACLC,OAAO,QAAPA,OAAO;IACPC,OAAO,QAAPA,OAAO;IACPC,OAAO,QAAPA,OAAO;IACPC,IAAI,QAAJA,IAAI;EAGnF,IAAMC,aAAa,GAAG,SAAhBA,aAAa;IAAA,OACjB,CAAC,CAACH,OAAO,iBACT,qBAAC,wBAAc;MAAC,KAAK,EAAC,IAAI;MAAC,IAAI,EAAEI,WAAI,CAACC,MAAO;MAC7B,KAAK,EAAC,QAAQ;MACd,QAAQ,EAAC,QAAQ;MACjB,SAAS,EAAE,KAAM;MACjB,KAAK,EAAEL,OAAQ;MAAA,uBAC7B,qBAAC,kBAAU;QAAC,OAAO,EAAC,WAAW;QACnB,KAAK,EAAC,UAAU;QAChB,KAAK,EAAE;UAACM,MAAM,EAAE;QAAM,CAAE;QACxB,MAAM,EAAE,kBAAM,CACd,CAAE;QAAA,uBACZ,qBAAC,iBAAI;UAAC,IAAI,EAAC,MAAM;UAAC,KAAK,EAAExB,cAAM,CAACC;QAAY;MAAE;IACnC,EACE;EAAA;EAGnB,oBACE,sBAAC,OAAO;IAAC,SAAS,EAAEmB,IAAK;IAAA,wBACvB,sBAAC,aAAa;MAAA,WACXH,OAAO,iBAAI,qBAAC,gBAAgB;QAAA,UAAEA;MAAO,EAAoB,eAC1D,qBAAC,cAAc;QAAA,UAAED;MAAK,EAAkB;IAAA,EAC1B,eAChB,sBAAC,eAAe;MAAA,WACbK,aAAa,EAAE,EACfF,OAAO,IAAIA,OAAO,CAACM,GAAG,CAAC,UAACC,IAAI,EAAEC,KAAK;QAAA,OAAK,IAAAC,+BAAc,EAACF,IAAI,EAAEN,IAAI,EAAEO,KAAK,CAAC;MAAA,EAAC;IAAA,EAC3D;EAAA,EACV;AAEd,CAAC;AAAA,eAEcZ,UAAU;AAAA"}

package/dist/Tile/TileHeader.js

@@ -1,5 +1,5 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 import React from 'react';
 import { Size } from '../types';
 import styled from 'styled-components';
@@ -10,16 +10,14 @@ import { Help } from '../icons/systemicons/SystemIcons';
 import { RenderTileItem } from './TileCommonItems';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var SubtitleIconContainer = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  width: 16px;\n  height: 16px;\n  .large & {\n    width: 20px;\n    height: 20px;\n  }\n"])));
-var SubtitleContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  color: ", ";\n  display: flex;\n  align-items: center;\n  gap: 4px;\n"])), COLORS.neutral_600);
-var TitleContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  color: ", ";\n"])), COLORS.black);
-var TextContainer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  gap: 4px;\n  flex: 1;\n"])));
-var ActionContainer = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n"])));
-var Wrapper = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n\n  min-height: 56px;\n  box-sizing: border-box;\n\n  &.small {\n    padding: 8px 16px;\n    min-height: 56px;\n\n    ", " {\n      ", "\n    }\n\n    ", " {\n      ", "\n    }\n  }\n\n  &.medium {\n    padding: 12px 20px;\n    min-height: 64px;\n\n    ", " {\n      ", "\n    }\n\n    ", " {\n      ", "\n    }\n\n  }\n\n  &.large {\n    padding: 16px 24px;\n    min-height: 72px;\n\n    ", " {\n      ", "\n    }\n\n    ", " {\n      ", "\n    }\n\n  }\n"])), SubtitleContainer, ComponentXXSStyling(ComponentTextStyle.Regular, null), TitleContainer, ComponentSStyling(ComponentTextStyle.Bold, null), SubtitleContainer, ComponentXSStyling(ComponentTextStyle.Regular, null), TitleContainer, ComponentMStyling(ComponentTextStyle.Bold, null), SubtitleContainer, ComponentSStyling(ComponentTextStyle.Regular, null), TitleContainer, ComponentLStyling(ComponentTextStyle.Bold, null));
+var TagLineContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: ", ";\n"])), COLORS.neutral_600);
+var TitleContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  color: ", ";\n"])), COLORS.black);
+var TextContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  flex: 1;\n"])));
+var ActionContainer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n"])));
+var Wrapper = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n\n  min-height: 56px;\n  box-sizing: border-box;\n\n  &.small {\n    padding: 4px 16px;\n    min-height: 56px;\n\n    ", " {\n      ", "\n    }\n\n    ", " {\n      ", "\n    }\n  }\n\n  &.medium {\n    padding: 8px 20px;\n    min-height: 64px;\n\n    ", " {\n      ", "\n    }\n\n    ", " {\n      ", "\n    }\n\n  }\n\n  &.large {\n    padding: 12px 24px;\n    min-height: 72px;\n\n    ", " {\n      ", "\n    }\n\n    ", " {\n      ", "\n    }\n\n  }\n"])), TagLineContainer, ComponentXXSStyling(ComponentTextStyle.Regular, null), TitleContainer, ComponentSStyling(ComponentTextStyle.Bold, null), TagLineContainer, ComponentXSStyling(ComponentTextStyle.Regular, null), TitleContainer, ComponentMStyling(ComponentTextStyle.Bold, null), TagLineContainer, ComponentSStyling(ComponentTextStyle.Regular, null), TitleContainer, ComponentLStyling(ComponentTextStyle.Bold, null));
 var TileHeader = function TileHeader(_ref) {
   var title = _ref.title,
-    subtitle = _ref.subtitle,
-    subtitleIcon = _ref.subtitleIcon,
+    tagLine = _ref.tagLine,
     tooltip = _ref.tooltip,
     buttons = _ref.buttons,
     size = _ref.size;
@@ -48,16 +46,10 @@ var TileHeader = function TileHeader(_ref) {
   return /*#__PURE__*/_jsxs(Wrapper, {
     className: size,
     children: [/*#__PURE__*/_jsxs(TextContainer, {
-      children: [/*#__PURE__*/_jsx(TitleContainer, {
+      children: [tagLine && /*#__PURE__*/_jsx(TagLineContainer, {
+        children: tagLine
+      }), /*#__PURE__*/_jsx(TitleContainer, {
         children: title
-      }), subtitle && /*#__PURE__*/_jsxs(SubtitleContainer, {
-        children: [subtitleIcon && /*#__PURE__*/_jsx(SubtitleIconContainer, {
-          children: /*#__PURE__*/React.cloneElement(subtitleIcon, {
-            size: size === Size.Large ? '20px' : '16px'
-          })
-        }), /*#__PURE__*/_jsx("span", {
-          children: subtitle
-        })]
       })]
     }), /*#__PURE__*/_jsxs(ActionContainer, {
       children: [renderTooltip(), buttons && buttons.map(function (item, index) {

package/dist/Tile/TileHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"TileHeader.js","names":["React","Size","styled","COLORS","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","ComponentXSStyling","ComponentXXSStyling","TooltipWrapper","IconButton","Help","RenderTileItem","SubtitleIconContainer","span","SubtitleContainer","div","neutral_600","TitleContainer","black","TextContainer","ActionContainer","Wrapper","Regular","Bold","TileHeader","title","subtitle","subtitleIcon","tooltip","buttons","size","renderTooltip","XSmall","cursor","cloneElement","Large","map","item","index"],"sources":["../../src/Tile/TileHeader.tsx"],"sourcesContent":["import React from 'react';\nimport {TileHeaderProps} from './TileTypes';\nimport {Size} from '../types';\nimport styled from 'styled-components';\nimport {\n  COLORS,\n  ComponentLStyling,\n  ComponentMStyling,\n  ComponentSStyling,\n  ComponentTextStyle,\n  ComponentXSStyling,\n  ComponentXXSStyling\n} from '../styles';\nimport {TooltipWrapper} from '../Tooltips';\nimport {IconButton} from '../Button';\nimport {Help} from '../icons/systemicons/SystemIcons';\nimport {RenderTileItem} from './TileCommonItems';\n\nconst SubtitleIconContainer = styled.span`\n  display: flex;\n  width: 16px;\n  height: 16px;\n  .large & {\n    width: 20px;\n    height: 20px;\n  }\n`;\n\nconst SubtitleContainer = styled.div`\n  color: ${COLORS.neutral_600};\n  display: flex;\n  align-items: center;\n  gap: 4px;\n`;\n\nconst TitleContainer = styled.div`\n  color: ${COLORS.black};\n`;\n\nconst TextContainer = styled.div`\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  gap: 4px;\n  flex: 1;\n`;\n\nconst ActionContainer = styled.div`\n  display: flex;\n  align-items: center;\n`;\n\nconst Wrapper = styled.div`\n  display: flex;\n  align-items: center;\n\n  min-height: 56px;\n  box-sizing: border-box;\n\n  &.small {\n    padding: 8px 16px;\n    min-height: 56px;\n\n    ${SubtitleContainer} {\n      ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    ${TitleContainer} {\n      ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n    }\n  }\n\n  &.medium {\n    padding: 12px 20px;\n    min-height: 64px;\n\n    ${SubtitleContainer} {\n      ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    ${TitleContainer} {\n      ${ComponentMStyling(ComponentTextStyle.Bold, null)}\n    }\n\n  }\n\n  &.large {\n    padding: 16px 24px;\n    min-height: 72px;\n\n    ${SubtitleContainer} {\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    ${TitleContainer} {\n      ${ComponentLStyling(ComponentTextStyle.Bold, null)}\n    }\n\n  }\n`;\n\n\nconst TileHeader: React.FunctionComponent<TileHeaderProps & { size: Size }> = ({\n                                                                                 title,\n                                                                                 subtitle,\n                                                                                 subtitleIcon,\n                                                                                 tooltip,\n                                                                                 buttons,\n                                                                                 size\n                                                                               }) => {\n\n  const renderTooltip = () =>\n    !!tooltip &&\n    <TooltipWrapper delay=\"0s\" size={Size.XSmall}\n                    align=\"center\"\n                    position=\"bottom\"\n                    withArrow={false}\n                    label={tooltip}>\n      <IconButton variant=\"secondary\"\n                  shape=\"circular\"\n                  style={{cursor: 'help'}}\n                  action={() => {\n                  }}>\n        <Help size=\"24px\" color={COLORS.neutral_600}/>\n      </IconButton>\n    </TooltipWrapper>;\n\n\n  return (\n    <Wrapper className={size}>\n      <TextContainer>\n        <TitleContainer>{title}</TitleContainer>\n        {\n          subtitle &&\n          <SubtitleContainer>\n            {\n              subtitleIcon &&\n              <SubtitleIconContainer>{React.cloneElement(subtitleIcon as React.ReactElement, {size: size === Size.Large ? '20px' : '16px'})}</SubtitleIconContainer>\n            }\n            <span>{subtitle}</span>\n          </SubtitleContainer>\n        }\n      </TextContainer>\n      <ActionContainer>\n        {renderTooltip()}\n        {buttons && buttons.map((item, index) => RenderTileItem(item, size, index))}\n      </ActionContainer>\n    </Wrapper>\n  )\n}\n\nexport default TileHeader;\n"],"mappings":"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"}
+{"version":3,"file":"TileHeader.js","names":["React","Size","styled","COLORS","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","ComponentXSStyling","ComponentXXSStyling","TooltipWrapper","IconButton","Help","RenderTileItem","TagLineContainer","div","neutral_600","TitleContainer","black","TextContainer","ActionContainer","Wrapper","Regular","Bold","TileHeader","title","tagLine","tooltip","buttons","size","renderTooltip","XSmall","cursor","map","item","index"],"sources":["../../src/Tile/TileHeader.tsx"],"sourcesContent":["import React from 'react';\nimport {TileHeaderProps} from './TileTypes';\nimport {Size} from '../types';\nimport styled from 'styled-components';\nimport {\n  COLORS,\n  ComponentLStyling,\n  ComponentMStyling,\n  ComponentSStyling,\n  ComponentTextStyle, ComponentXSStyling,\n  ComponentXXSStyling\n} from '../styles';\nimport {TooltipWrapper} from '../Tooltips';\nimport {IconButton} from '../Button';\nimport {Help} from '../icons/systemicons/SystemIcons';\nimport {RenderTileItem} from './TileCommonItems';\n\nconst TagLineContainer = styled.div`\n  color: ${COLORS.neutral_600};\n`;\n\nconst TitleContainer = styled.div`\n  color: ${COLORS.black};\n`;\n\nconst TextContainer = styled.div`\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  flex: 1;\n`;\n\nconst ActionContainer = styled.div`\n  display: flex;\n  align-items: center;\n`;\n\nconst Wrapper = styled.div`\n  display: flex;\n  align-items: center;\n\n  min-height: 56px;\n  box-sizing: border-box;\n\n  &.small {\n    padding: 4px 16px;\n    min-height: 56px;\n\n    ${TagLineContainer} {\n      ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    ${TitleContainer} {\n      ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n    }\n  }\n\n  &.medium {\n    padding: 8px 20px;\n    min-height: 64px;\n\n    ${TagLineContainer} {\n      ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    ${TitleContainer} {\n      ${ComponentMStyling(ComponentTextStyle.Bold, null)}\n    }\n\n  }\n\n  &.large {\n    padding: 12px 24px;\n    min-height: 72px;\n\n    ${TagLineContainer} {\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    ${TitleContainer} {\n      ${ComponentLStyling(ComponentTextStyle.Bold, null)}\n    }\n\n  }\n`;\n\n\nconst TileHeader: React.FunctionComponent<TileHeaderProps & { size: Size }> = ({\n                                                                                 title,\n                                                                                 tagLine,\n                                                                                 tooltip,\n                                                                                 buttons,\n                                                                                 size\n                                                                               }) => {\n\n  const renderTooltip = () =>\n    !!tooltip &&\n    <TooltipWrapper delay=\"0s\" size={Size.XSmall}\n                    align=\"center\"\n                    position=\"bottom\"\n                    withArrow={false}\n                    label={tooltip}>\n      <IconButton variant=\"secondary\"\n                  shape=\"circular\"\n                  style={{cursor: 'help'}}\n                  action={() => {\n                  }}>\n        <Help size=\"24px\" color={COLORS.neutral_600}/>\n      </IconButton>\n    </TooltipWrapper>;\n\n\n  return (\n    <Wrapper className={size}>\n      <TextContainer>\n        {tagLine && <TagLineContainer>{tagLine}</TagLineContainer>}\n        <TitleContainer>{title}</TitleContainer>\n      </TextContainer>\n      <ActionContainer>\n        {renderTooltip()}\n        {buttons && buttons.map((item, index) => RenderTileItem(item, size, index))}\n      </ActionContainer>\n    </Wrapper>\n  )\n}\n\nexport default TileHeader;\n"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAAQC,IAAI,QAAO,UAAU;AAC7B,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SACEC,MAAM,EACNC,iBAAiB,EACjBC,iBAAiB,EACjBC,iBAAiB,EACjBC,kBAAkB,EAAEC,kBAAkB,EACtCC,mBAAmB,QACd,WAAW;AAClB,SAAQC,cAAc,QAAO,aAAa;AAC1C,SAAQC,UAAU,QAAO,WAAW;AACpC,SAAQC,IAAI,QAAO,kCAAkC;AACrD,SAAQC,cAAc,QAAO,mBAAmB;AAAC;AAAA;AAEjD,IAAMC,gBAAgB,GAAGZ,MAAM,CAACa,GAAG,wFACxBZ,MAAM,CAACa,WAAW,CAC5B;AAED,IAAMC,cAAc,GAAGf,MAAM,CAACa,GAAG,0FACtBZ,MAAM,CAACe,KAAK,CACtB;AAED,IAAMC,aAAa,GAAGjB,MAAM,CAACa,GAAG,8JAK/B;AAED,IAAMK,eAAe,GAAGlB,MAAM,CAACa,GAAG,mHAGjC;AAED,IAAMM,OAAO,GAAGnB,MAAM,CAACa,GAAG,2jBAWpBD,gBAAgB,EACdL,mBAAmB,CAACF,kBAAkB,CAACe,OAAO,EAAE,IAAI,CAAC,EAGvDL,cAAc,EACZX,iBAAiB,CAACC,kBAAkB,CAACgB,IAAI,EAAE,IAAI,CAAC,EAQlDT,gBAAgB,EACdN,kBAAkB,CAACD,kBAAkB,CAACe,OAAO,EAAE,IAAI,CAAC,EAGtDL,cAAc,EACZZ,iBAAiB,CAACE,kBAAkB,CAACgB,IAAI,EAAE,IAAI,CAAC,EASlDT,gBAAgB,EACdR,iBAAiB,CAACC,kBAAkB,CAACe,OAAO,EAAE,IAAI,CAAC,EAGrDL,cAAc,EACZb,iBAAiB,CAACG,kBAAkB,CAACgB,IAAI,EAAE,IAAI,CAAC,CAIvD;AAGD,IAAMC,UAAqE,GAAG,SAAxEA,UAAqE,OAMU;EAAA,IALJC,KAAK,QAALA,KAAK;IACLC,OAAO,QAAPA,OAAO;IACPC,OAAO,QAAPA,OAAO;IACPC,OAAO,QAAPA,OAAO;IACPC,IAAI,QAAJA,IAAI;EAGnF,IAAMC,aAAa,GAAG,SAAhBA,aAAa;IAAA,OACjB,CAAC,CAACH,OAAO,iBACT,KAAC,cAAc;MAAC,KAAK,EAAC,IAAI;MAAC,IAAI,EAAE1B,IAAI,CAAC8B,MAAO;MAC7B,KAAK,EAAC,QAAQ;MACd,QAAQ,EAAC,QAAQ;MACjB,SAAS,EAAE,KAAM;MACjB,KAAK,EAAEJ,OAAQ;MAAA,uBAC7B,KAAC,UAAU;QAAC,OAAO,EAAC,WAAW;QACnB,KAAK,EAAC,UAAU;QAChB,KAAK,EAAE;UAACK,MAAM,EAAE;QAAM,CAAE;QACxB,MAAM,EAAE,kBAAM,CACd,CAAE;QAAA,uBACZ,KAAC,IAAI;UAAC,IAAI,EAAC,MAAM;UAAC,KAAK,EAAE7B,MAAM,CAACa;QAAY;MAAE;IACnC,EACE;EAAA;EAGnB,oBACE,MAAC,OAAO;IAAC,SAAS,EAAEa,IAAK;IAAA,wBACvB,MAAC,aAAa;MAAA,WACXH,OAAO,iBAAI,KAAC,gBAAgB;QAAA,UAAEA;MAAO,EAAoB,eAC1D,KAAC,cAAc;QAAA,UAAED;MAAK,EAAkB;IAAA,EAC1B,eAChB,MAAC,eAAe;MAAA,WACbK,aAAa,EAAE,EACfF,OAAO,IAAIA,OAAO,CAACK,GAAG,CAAC,UAACC,IAAI,EAAEC,KAAK;QAAA,OAAKtB,cAAc,CAACqB,IAAI,EAAEL,IAAI,EAAEM,KAAK,CAAC;MAAA,EAAC;IAAA,EAC3D;EAAA,EACV;AAEd,CAAC;AAED,eAAeX,UAAU"}

package/dist/Tile/TileTypes.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TileTypes.cjs","names":[],"sources":["../../src/Tile/TileTypes.ts"],"sourcesContent":["import React from 'react';\nimport {IconButtonProps} from '../Button/Iconbutton';\nimport {ToggleButtonProps} from '../Toggles/ToggleButton';\nimport {DropdownButtonProps} from '../Dropdown/DropdownButtonTypes';\nimport {ButtonProps} from '../Button/Button';\nimport {HyperlinkProps} from '../HyperLink/HyperLink';\nimport {Size} from '../types';\n\n\nexport type TileIconButton = Pick<IconButtonProps, 'action' | 'disabled'> & {\n  componentType: 'icon';\n  icon: React.ReactNode;\n}\n\nexport type TileToggleButton =\n  Pick<ToggleButtonProps, 'active' | 'onChange' | 'disabled' | 'defaultState' | 'activeState'>\n  & { componentType: 'toggle'; }\n\nexport type TileDropdownButton =\n  Pick<DropdownButtonProps, 'items' | 'onClick' | 'disabled' | 'itemsType' | 'action' | 'actionIcon' | 'actionLabel' | 'actionLoading' | 'actionVariant' | 'multiSelect' | 'scrollable' | 'pinTopItem' | 'maxHeight'>\n  & {\n  componentType: 'dropdown';\n  icon: React.ReactNode;\n}\n\nexport type TileStandardButton = Pick<ButtonProps, 'variant' | 'loading' | 'icon' | 'onClick' | 'disabled'> & {\n  componentType: 'button';\n  buttonText: string;\n}\n\nexport type TileNote = {\n  componentType: 'note';\n  noteIcon?: React.ReactNode;\n  noteText: string;\n}\n\n\nexport type TileHyperLink = HyperlinkProps & {\n  componentType: 'link';\n  linkIcon?: React.ReactNode;\n  linkText: string;\n}\n\nexport type FooterButtons = TileIconButton | TileToggleButton | TileDropdownButton | TileStandardButton;\nexport type HeaderButtons = TileIconButton | TileToggleButton | TileDropdownButton;\n\nexport interface TileHeaderProps {\n  title: string;\n  tooltip?: string;\n  subtitle?: string;\n  subtitleIcon?: React.ReactNode;\n\n  buttons?: HeaderButtons[];\n}\n\nexport interface TileFooterProps {\n  leftItem?: TileNote | TileHyperLink | TileStandardButton;\n  buttons?: FooterButtons[];\n}\n\n\nexport interface TileProps extends React.HTMLAttributes<HTMLDivElement>{\n  style?: {\n    width?: string,\n    minWidth?: string,\n    maxWidth?: string,\n    height?: string,\n    minHeight?: string,\n    maxHeight?: string,\n  };\n\n  size?: Size.Small | Size.Medium | Size.Large\n\n  header?: TileHeaderProps;\n  footer?: TileFooterProps;\n}\n"],"mappings":""}
+{"version":3,"file":"TileTypes.cjs","names":[],"sources":["../../src/Tile/TileTypes.ts"],"sourcesContent":["import React from 'react';\nimport {IconButtonProps} from '../Button/Iconbutton';\nimport {ToggleButtonProps} from '../Toggles/ToggleButton';\nimport {DropdownButtonProps} from '../Dropdown/DropdownButtonTypes';\nimport {ButtonProps} from '../Button/Button';\nimport {HyperlinkProps} from '../HyperLink/HyperLink';\nimport {Size} from '../types';\n\n\nexport type TileIconButton = Pick<IconButtonProps, 'action' | 'disabled'> & {\n  componentType: 'icon';\n  icon: React.ReactNode;\n}\n\nexport type TileToggleButton =\n  Pick<ToggleButtonProps, 'active' | 'onChange' | 'disabled' | 'defaultState' | 'activeState'>\n  & { componentType: 'toggle'; }\n\nexport type TileDropdownButton =\n  Pick<DropdownButtonProps, 'items' | 'onClick' | 'disabled' | 'itemsType' | 'action' | 'actionIcon' | 'actionLabel' | 'actionLoading' | 'actionVariant' | 'multiSelect' | 'scrollable' | 'pinTopItem' | 'maxHeight'>\n  & {\n  componentType: 'dropdown';\n  icon: React.ReactNode;\n}\n\nexport type TileStandardButton = Pick<ButtonProps, 'variant' | 'loading' | 'icon' | 'onClick' | 'disabled'> & {\n  componentType: 'button';\n  buttonText: string;\n}\n\nexport type TileNote = {\n  componentType: 'note';\n  noteIcon?: React.ReactNode;\n  noteText: string;\n}\n\n\nexport type TileHyperLink = HyperlinkProps & {\n  componentType: 'link';\n  linkIcon?: React.ReactNode;\n  linkText: string;\n}\n\nexport type FooterButtons = TileIconButton | TileToggleButton | TileDropdownButton | TileStandardButton;\nexport type HeaderButtons = TileIconButton | TileToggleButton | TileDropdownButton;\n\nexport interface TileHeaderProps {\n  title: string;\n  tooltip?: string;\n  tagLine?: string;\n  buttons?: HeaderButtons[];\n}\n\nexport interface TileFooterProps {\n  leftItem?: TileNote | TileHyperLink | TileStandardButton;\n  buttons?: FooterButtons[];\n}\n\n\nexport interface TileProps extends React.HTMLAttributes<HTMLDivElement>{\n  style?: {\n    width?: string,\n    minWidth?: string,\n    maxWidth?: string,\n    height?: string,\n    minHeight?: string,\n    maxHeight?: string,\n  };\n\n  size?: Size.Small | Size.Medium | Size.Large\n\n  header?: TileHeaderProps;\n  footer?: TileFooterProps;\n}\n"],"mappings":""}

package/dist/Tile/TileTypes.d.ts

@@ -35,8 +35,7 @@ export type HeaderButtons = TileIconButton | TileToggleButton | TileDropdownButt
 export interface TileHeaderProps {
     title: string;
     tooltip?: string;
-    subtitle?: string;
-    subtitleIcon?: React.ReactNode;
+    tagLine?: string;
     buttons?: HeaderButtons[];
 }
 export interface TileFooterProps {

package/dist/Tile/TileTypes.js.map

@@ -1 +1 @@
-{"version":3,"file":"TileTypes.js","names":[],"sources":["../../src/Tile/TileTypes.ts"],"sourcesContent":["import React from 'react';\nimport {IconButtonProps} from '../Button/Iconbutton';\nimport {ToggleButtonProps} from '../Toggles/ToggleButton';\nimport {DropdownButtonProps} from '../Dropdown/DropdownButtonTypes';\nimport {ButtonProps} from '../Button/Button';\nimport {HyperlinkProps} from '../HyperLink/HyperLink';\nimport {Size} from '../types';\n\n\nexport type TileIconButton = Pick<IconButtonProps, 'action' | 'disabled'> & {\n  componentType: 'icon';\n  icon: React.ReactNode;\n}\n\nexport type TileToggleButton =\n  Pick<ToggleButtonProps, 'active' | 'onChange' | 'disabled' | 'defaultState' | 'activeState'>\n  & { componentType: 'toggle'; }\n\nexport type TileDropdownButton =\n  Pick<DropdownButtonProps, 'items' | 'onClick' | 'disabled' | 'itemsType' | 'action' | 'actionIcon' | 'actionLabel' | 'actionLoading' | 'actionVariant' | 'multiSelect' | 'scrollable' | 'pinTopItem' | 'maxHeight'>\n  & {\n  componentType: 'dropdown';\n  icon: React.ReactNode;\n}\n\nexport type TileStandardButton = Pick<ButtonProps, 'variant' | 'loading' | 'icon' | 'onClick' | 'disabled'> & {\n  componentType: 'button';\n  buttonText: string;\n}\n\nexport type TileNote = {\n  componentType: 'note';\n  noteIcon?: React.ReactNode;\n  noteText: string;\n}\n\n\nexport type TileHyperLink = HyperlinkProps & {\n  componentType: 'link';\n  linkIcon?: React.ReactNode;\n  linkText: string;\n}\n\nexport type FooterButtons = TileIconButton | TileToggleButton | TileDropdownButton | TileStandardButton;\nexport type HeaderButtons = TileIconButton | TileToggleButton | TileDropdownButton;\n\nexport interface TileHeaderProps {\n  title: string;\n  tooltip?: string;\n  subtitle?: string;\n  subtitleIcon?: React.ReactNode;\n\n  buttons?: HeaderButtons[];\n}\n\nexport interface TileFooterProps {\n  leftItem?: TileNote | TileHyperLink | TileStandardButton;\n  buttons?: FooterButtons[];\n}\n\n\nexport interface TileProps extends React.HTMLAttributes<HTMLDivElement>{\n  style?: {\n    width?: string,\n    minWidth?: string,\n    maxWidth?: string,\n    height?: string,\n    minHeight?: string,\n    maxHeight?: string,\n  };\n\n  size?: Size.Small | Size.Medium | Size.Large\n\n  header?: TileHeaderProps;\n  footer?: TileFooterProps;\n}\n"],"mappings":""}
+{"version":3,"file":"TileTypes.js","names":[],"sources":["../../src/Tile/TileTypes.ts"],"sourcesContent":["import React from 'react';\nimport {IconButtonProps} from '../Button/Iconbutton';\nimport {ToggleButtonProps} from '../Toggles/ToggleButton';\nimport {DropdownButtonProps} from '../Dropdown/DropdownButtonTypes';\nimport {ButtonProps} from '../Button/Button';\nimport {HyperlinkProps} from '../HyperLink/HyperLink';\nimport {Size} from '../types';\n\n\nexport type TileIconButton = Pick<IconButtonProps, 'action' | 'disabled'> & {\n  componentType: 'icon';\n  icon: React.ReactNode;\n}\n\nexport type TileToggleButton =\n  Pick<ToggleButtonProps, 'active' | 'onChange' | 'disabled' | 'defaultState' | 'activeState'>\n  & { componentType: 'toggle'; }\n\nexport type TileDropdownButton =\n  Pick<DropdownButtonProps, 'items' | 'onClick' | 'disabled' | 'itemsType' | 'action' | 'actionIcon' | 'actionLabel' | 'actionLoading' | 'actionVariant' | 'multiSelect' | 'scrollable' | 'pinTopItem' | 'maxHeight'>\n  & {\n  componentType: 'dropdown';\n  icon: React.ReactNode;\n}\n\nexport type TileStandardButton = Pick<ButtonProps, 'variant' | 'loading' | 'icon' | 'onClick' | 'disabled'> & {\n  componentType: 'button';\n  buttonText: string;\n}\n\nexport type TileNote = {\n  componentType: 'note';\n  noteIcon?: React.ReactNode;\n  noteText: string;\n}\n\n\nexport type TileHyperLink = HyperlinkProps & {\n  componentType: 'link';\n  linkIcon?: React.ReactNode;\n  linkText: string;\n}\n\nexport type FooterButtons = TileIconButton | TileToggleButton | TileDropdownButton | TileStandardButton;\nexport type HeaderButtons = TileIconButton | TileToggleButton | TileDropdownButton;\n\nexport interface TileHeaderProps {\n  title: string;\n  tooltip?: string;\n  tagLine?: string;\n  buttons?: HeaderButtons[];\n}\n\nexport interface TileFooterProps {\n  leftItem?: TileNote | TileHyperLink | TileStandardButton;\n  buttons?: FooterButtons[];\n}\n\n\nexport interface TileProps extends React.HTMLAttributes<HTMLDivElement>{\n  style?: {\n    width?: string,\n    minWidth?: string,\n    maxWidth?: string,\n    height?: string,\n    minHeight?: string,\n    maxHeight?: string,\n  };\n\n  size?: Size.Small | Size.Medium | Size.Large\n\n  header?: TileHeaderProps;\n  footer?: TileFooterProps;\n}\n"],"mappings":""}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@laerdal/life-react-components",
-  "version": "2.1.1-dev.24",
+  "version": "2.1.1-dev.25",
   "private": false,
   "author": "Erik Martirosyan <erik.martirosyan@laerdal.com>",
   "contributors": [],