@laerdal/life-react-components 1.2.2-dev.7 → 1.2.2-dev.8

package/dist/esm/Switcher/SwitcherMenuItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Switcher/SwitcherMenuItem.tsx"],"names":["React","styled","COLORS","ComponentTextStyle","ComponentMStyling","StyledSwitcherItem","div","Regular","neutral_600","neutral_800","primary_500","neutral_300","neutral_100","primary_600","primary_20","primary_800","primary_100","A","a","SwitcherMenuItem","label","url","disabled","Icon","as","testId","window","location","href"],"mappings":"AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAAQC,MAAR,EAAgBC,kBAAhB,QAAyC,WAAzC;AAEA,SAAQC,iBAAR,QAAgC,sBAAhC;AAEA,MAAMC,kBAAkB,GAAGJ,MAAM,CAACK,GAAI;AACtC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAIF,iBAAiB,CAACD,kBAAkB,CAACI,OAApB,EAA6BL,MAAM,CAACM,WAApC,CAAiD;AACtE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAaN,MAAM,CAACO,WAAY;AAChC;AACA;AACA,0BAA0BP,MAAM,CAACQ,WAAY;AAC7C;AACA;AACA;AACA,cAAcR,MAAM,CAACO,WAAY;AACjC;AACA;AACA;AACA;AACA,aAAaP,MAAM,CAACS,WAAY;AAChC,wBAAwBT,MAAM,CAACU,WAAY;AAC3C;AACA;AACA;AACA,aAAaV,MAAM,CAACW,WAAY;AAChC,wBAAwBX,MAAM,CAACY,UAAW;AAC1C;AACA;AACA,cAAcZ,MAAM,CAACW,WAAY;AACjC;AACA;AACA;AACA;AACA,aAAaX,MAAM,CAACa,WAAY;AAChC,wBAAwBb,MAAM,CAACc,WAAY;AAC3C;AACA;AACA;AACA,0BAA0Bd,MAAM,CAACQ,WAAY;AAC7C;AACA;AACA;AACA,cAAcR,MAAM,CAACa,WAAY;AACjC;AACA;AACA;AACA;AACA,8BAA8Bb,MAAM,CAACQ,WAAY;AACjD;AACA;AACA,CA1EA;AA4EA,MAAMO,CAAC,GAAGhB,MAAM,CAACiB,CAAE,EAAnB;;AAEA,MAAMC,gBAAgB,GAAG,CAAC;AAAEC,EAAAA,KAAF;AAASC,EAAAA,GAAT;AAAcC,EAAAA,QAAd;AAAwBC,EAAAA,IAAxB;AAA8BC,EAAAA,EAAE,GAAGP,CAAnC;AAAsCQ,EAAAA;AAAtC,CAAD,kBACvB,oBAAC,kBAAD;AACE,EAAA,OAAO,EAAE,MAAOC,MAAM,CAACC,QAAP,CAAgBC,IAAhB,GAAuBP,GAAG,IAAI,EADhD;AAEE,EAAA,EAAE,EAAEG,EAFN;AAGE,EAAA,IAAI,EAAEH,GAAG,IAAI,EAHf;AAIE,EAAA,MAAM,EAAC,SAJT;AAKE,EAAA,GAAG,EAAED,KALP;AAME,EAAA,SAAS,EAAEE,QAAQ,GAAG,UAAH,GAAgB,EANrC;AAOE,iBAAaG;AAPf,GAQGF,IAAI,iBAAI,oBAAC,IAAD;AAAM,EAAA,IAAI,EAAC,MAAX;AAAkB,EAAA,KAAK,EAAC;AAAxB,EARX,EASGH,KATH,CADF;;AAcA,eAAeD,gBAAf","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {COLORS, ComponentTextStyle} from '../styles';\nimport {SwitcherNavItem} from '../types';\nimport {ComponentMStyling} from '../styles/typography';\n\nconst StyledSwitcherItem = styled.div`\n  padding: 16px 25px;\n  margin: 0 2px;\n\n  display: flex;\n  align-items: center;\n  text-align: center;\n  position: relative;\n\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n  text-decoration: none;\n\n  svg {\n    margin-right: 16px;\n  }\n\n  &:after {\n    content: '';\n    display: block;\n    position: absolute;\n    left: 4px;\n    top: 4px;\n    bottom: 4px;\n    width: 4px;\n    background-color: transparent;\n    border-radius: 2px;\n  }\n\n  &.active:not(.disabled) {\n    font-weight: bold;\n    color: ${COLORS.neutral_800};\n\n    &:after {\n      background-color: ${COLORS.primary_500};\n    }\n\n    svg path {\n      fill: ${COLORS.neutral_800};\n    }\n  }\n\n  &.disabled {\n    color: ${COLORS.neutral_300};\n    background-color: ${COLORS.neutral_100};\n  }\n\n  &:hover:not(.disabled) {\n    color: ${COLORS.primary_600};\n    background-color: ${COLORS.primary_20};\n\n    svg path {\n      fill: ${COLORS.primary_600};\n    }\n  }\n\n  &:active:not(.disabled) {\n    color: ${COLORS.primary_800};\n    background-color: ${COLORS.primary_100};\n    box-shadow: none;\n\n    &:after {\n      background-color: ${COLORS.primary_500};\n    }\n\n    svg path {\n      fill: ${COLORS.primary_800};\n    }\n  }\n\n  &:focus:not(.disabled) {\n    box-shadow: 0px 0px 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n    outline: none;\n  }\n`;\n\nconst A = styled.a``;\n\nconst SwitcherMenuItem = ({ label, url, disabled, Icon, as = A, testId }: SwitcherNavItem) => (\n  <StyledSwitcherItem\n    onClick={() => (window.location.href = url || '')}\n    as={as}\n    href={url || ''}\n    target=\"_parent\"\n    key={label}\n    className={disabled ? 'disabled' : ''}\n    data-testid={testId}>\n    {Icon && <Icon size=\"22px\" color=\"#666666\" />}\n    {label}\n  </StyledSwitcherItem>\n);\n\nexport default SwitcherMenuItem;\n"],"file":"SwitcherMenuItem.js"}
+{"version":3,"sources":["../../../src/Switcher/SwitcherMenuItem.tsx"],"names":["React","styled","COLORS","ComponentTextStyle","ComponentMStyling","Z_INDEXES","StyledSwitcherItem","div","Regular","neutral_600","active","neutral_800","primary_500","neutral_300","neutral_100","hover","primary_600","primary_20","primary_800","primary_100","focus","A","a","SwitcherMenuItem","label","url","disabled","Icon","as","testId","window","location","href"],"mappings":"AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAAQC,MAAR,EAAgBC,kBAAhB,QAAyC,WAAzC;AAEA,SAAQC,iBAAR,QAAgC,sBAAhC;AACA,SAAQC,SAAR,QAAwB,qBAAxB;AAEA,MAAMC,kBAAkB,GAAGL,MAAM,CAACM,GAAI;AACtC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAIH,iBAAiB,CAACD,kBAAkB,CAACK,OAApB,EAA6BN,MAAM,CAACO,WAApC,CAAiD;AACtE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAeJ,SAAS,CAACK,MAAO;AAChC;AACA,aAAaR,MAAM,CAACS,WAAY;AAChC;AACA;AACA,0BAA0BT,MAAM,CAACU,WAAY;AAC7C;AACA;AACA;AACA,cAAcV,MAAM,CAACS,WAAY;AACjC;AACA;AACA;AACA;AACA,aAAaT,MAAM,CAACW,WAAY;AAChC,wBAAwBX,MAAM,CAACY,WAAY;AAC3C;AACA;AACA;AACA,eAAeT,SAAS,CAACU,KAAM;AAC/B,aAAab,MAAM,CAACc,WAAY;AAChC,wBAAwBd,MAAM,CAACe,UAAW;AAC1C;AACA;AACA,cAAcf,MAAM,CAACc,WAAY;AACjC;AACA;AACA;AACA;AACA,eAAeX,SAAS,CAACK,MAAO;AAChC,aAAaR,MAAM,CAACgB,WAAY;AAChC,wBAAwBhB,MAAM,CAACiB,WAAY;AAC3C;AACA;AACA;AACA,0BAA0BjB,MAAM,CAACU,WAAY;AAC7C;AACA;AACA;AACA,cAAcV,MAAM,CAACgB,WAAY;AACjC;AACA;AACA;AACA;AACA,eAAeb,SAAS,CAACe,KAAM;AAC/B,8BAA8BlB,MAAM,CAACU,WAAY;AACjD;AACA;AACA,CA9EA;AAgFA,MAAMS,CAAC,GAAGpB,MAAM,CAACqB,CAAE,EAAnB;;AAEA,MAAMC,gBAAgB,GAAG,CAAC;AAAEC,EAAAA,KAAF;AAASC,EAAAA,GAAT;AAAcC,EAAAA,QAAd;AAAwBC,EAAAA,IAAxB;AAA8BC,EAAAA,EAAE,GAAGP,CAAnC;AAAsCQ,EAAAA;AAAtC,CAAD,kBACvB,oBAAC,kBAAD;AACE,EAAA,OAAO,EAAE,MAAOC,MAAM,CAACC,QAAP,CAAgBC,IAAhB,GAAuBP,GAAG,IAAI,EADhD;AAEE,EAAA,EAAE,EAAEG,EAFN;AAGE,EAAA,IAAI,EAAEH,GAAG,IAAI,EAHf;AAIE,EAAA,MAAM,EAAC,SAJT;AAKE,EAAA,GAAG,EAAED,KALP;AAME,EAAA,SAAS,EAAEE,QAAQ,GAAG,UAAH,GAAgB,EANrC;AAOE,iBAAaG;AAPf,GAQGF,IAAI,iBAAI,oBAAC,IAAD;AAAM,EAAA,IAAI,EAAC,MAAX;AAAkB,EAAA,KAAK,EAAC;AAAxB,EARX,EASGH,KATH,CADF;;AAcA,eAAeD,gBAAf","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {COLORS, ComponentTextStyle} from '../styles';\nimport {SwitcherNavItem} from '../types';\nimport {ComponentMStyling} from '../styles/typography';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\nconst StyledSwitcherItem = styled.div`\n  padding: 16px 25px;\n  margin: 0 2px;\n\n  display: flex;\n  align-items: center;\n  text-align: center;\n  position: relative;\n\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n  text-decoration: none;\n\n  svg {\n    margin-right: 16px;\n  }\n\n  &:after {\n    content: '';\n    display: block;\n    position: absolute;\n    left: 4px;\n    top: 4px;\n    bottom: 4px;\n    width: 4px;\n    background-color: transparent;\n    border-radius: 2px;\n  }\n\n  &.active:not(.disabled) {\n    z-index: ${Z_INDEXES.active};\n    font-weight: bold;\n    color: ${COLORS.neutral_800};\n\n    &:after {\n      background-color: ${COLORS.primary_500};\n    }\n\n    svg path {\n      fill: ${COLORS.neutral_800};\n    }\n  }\n\n  &.disabled {\n    color: ${COLORS.neutral_300};\n    background-color: ${COLORS.neutral_100};\n  }\n\n  &:hover:not(.disabled) {\n    z-index: ${Z_INDEXES.hover};\n    color: ${COLORS.primary_600};\n    background-color: ${COLORS.primary_20};\n\n    svg path {\n      fill: ${COLORS.primary_600};\n    }\n  }\n\n  &:active:not(.disabled) {\n    z-index: ${Z_INDEXES.active};\n    color: ${COLORS.primary_800};\n    background-color: ${COLORS.primary_100};\n    box-shadow: none;\n\n    &:after {\n      background-color: ${COLORS.primary_500};\n    }\n\n    svg path {\n      fill: ${COLORS.primary_800};\n    }\n  }\n\n  &:focus:not(.disabled) {\n    z-index: ${Z_INDEXES.focus};\n    box-shadow: 0px 0px 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n    outline: none;\n  }\n`;\n\nconst A = styled.a``;\n\nconst SwitcherMenuItem = ({ label, url, disabled, Icon, as = A, testId }: SwitcherNavItem) => (\n  <StyledSwitcherItem\n    onClick={() => (window.location.href = url || '')}\n    as={as}\n    href={url || ''}\n    target=\"_parent\"\n    key={label}\n    className={disabled ? 'disabled' : ''}\n    data-testid={testId}>\n    {Icon && <Icon size=\"22px\" color=\"#666666\" />}\n    {label}\n  </StyledSwitcherItem>\n);\n\nexport default SwitcherMenuItem;\n"],"file":"SwitcherMenuItem.js"}

package/dist/esm/Table/Table.js

@@ -402,7 +402,7 @@ const Table = ({
     cellSpacing: "0",
     "data-testid": "TestTable"
   }, renderHeader(), renderBody(), renderFooter()), showLoadingIndicator && /*#__PURE__*/React.createElement(TableLoadingIndicator, null, /*#__PURE__*/React.createElement(LoadingIndicator, {
-    size: Size.Medium,
+    size: "medium",
     color: "#ffffff"
   })));
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Table/Table.tsx"],"names":["React","MoreVertical","ChevronRight","ChevronLeft","ArrowLineDown","ArrowLineUp","SystemIcons","icons","DropdownFilter","IconButton","Button","Size","COLORS","TableHeaderRowCol","TableColumnHeaderCol","TableContainer","TableDataCol","TableDataRow","TableFooterCol","TableWrapper","TableLoadingIndicator","LoadingIndicator","Table","rowClick","linkClick","iconClick","previousPageClick","nextPageClick","rowsPerPageChange","triggerSortingChange","title","columns","rows","remotePagination","pagination","showLoadingIndicator","rowsPerPage","setRowsPerPage","useState","filteredRows","setFilteredRows","currentPageRows","setCurrentPageRows","currentPage","setCurrentPage","sortedColumn","setSortedColumn","sortedDirection","setSortedDirection","from","setFrom","to","setTo","total","setTotal","useEffect","tmpFilteredRows","filterAndSortRows","length","rowsFrom","rowsTo","slice","filter","row","matchFilterCriteria","column","filterValue","key","toLowerCase","indexOf","some","sortingDirection","sortingColumn","find","sort","a","b","sortTableColumn","map","tmpColumn","sortable","undefined","previousPage","nextPage","changeRowsPerPage","value","parseInt","renderHeader","neutral_600","width","justify","name","onLinkClick","event","stopPropagation","onIconClick","onRowClick","selectedText","window","getSelection","toString","renderBody","index","colorFn","color","maxWidth","shortenText","isLink","Small","isIcon","icon","size","className","customContent","renderFooter","rowsPerPageValues","x","label","Medium"],"mappings":"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","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom components.\n */\nimport { MoreVertical, ChevronRight, ChevronLeft, ArrowLineDown, ArrowLineUp } from '../icons/systemicons/SystemIcons';\nimport { SystemIcons as icons } from '../icons/index';\nimport { DropdownFilter } from '../Dropdown/index';\nimport { IconButton, Button } from '../Button/index';\nimport { Size } from '../types'\n\n/**\n * Import custom styles.\n */\nimport { COLORS } from '../styles';\nimport { TableHeaderRowCol, TableColumnHeaderCol, TableContainer, TableDataCol, TableDataRow, TableFooterCol, TableWrapper, TableLoadingIndicator } from './TableStyles';\n\n/**\n * Import custom types.\n */\nimport { TableProps, TableColumn, TableSortingDirection } from './TableTypes';\nimport { LoadingIndicator } from '../LoadingIndicator';\n\nconst Table: React.FunctionComponent<TableProps> = ({\n  rowClick,\n  linkClick,\n  iconClick,\n  previousPageClick,\n  nextPageClick,\n  rowsPerPageChange,\n  triggerSortingChange,\n  title,\n  columns,\n  rows,\n  remotePagination,\n  pagination,\n  showLoadingIndicator,\n}: TableProps) => {\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 [sortedColumn, setSortedColumn] = React.useState<string>('');\n  const [sortedDirection, setSortedDirection] = React.useState<TableSortingDirection>('asc');\n  const [from, setFrom] = React.useState<number>();\n  const [to, setTo] = React.useState<number>();\n  const [total, setTotal] = React.useState<number>();\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 (!remotePagination) {\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, sortedColumn, sortedDirection, remotePagination]);\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 (remotePagination) {\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  }, [remotePagination, pagination, rows]);\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 (columns.some((column) => column.sortingDirection)) {\n      // Let's find the sorting column\n      const sortingColumn = columns.find((column) => column.sortingDirection)!;\n\n      // Update sorted column data\n      setSortedDirection(sortingColumn.sortingDirection!);\n      setSortedColumn(sortingColumn.key!);\n\n      // Let's sort the rows\n      tmpFilteredRows.sort((a, b) => {\n        if (a[sortingColumn.key] > b[sortingColumn.key]) {\n          return sortingColumn.sortingDirection === 'asc' ? 1 : -1;\n        } else if (a[sortingColumn.key] < b[sortingColumn.key]) {\n          return sortingColumn.sortingDirection === '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   * 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's remove any active sorting\n    columns = columns.map((tmpColumn: TableColumn) => {\n      // Let's apply new sorting\n      // Let's check if it is the column for which we have to apply sorting\n      if (column.key === tmpColumn.key && tmpColumn.sortable) {\n        // Let's check if sorting is not defined\n        // If so, let's toggle the sorting direction\n        if (tmpColumn.sortingDirection !== undefined) {\n          if (tmpColumn.sortingDirection === 'asc') {\n            tmpColumn.sortingDirection = 'desc';\n\n            // Update sorted column and direction\n            setSortedColumn(column.key);\n            setSortedDirection('desc');\n\n            // Let's trigger remote sorting trigger function\n            if (remotePagination && triggerSortingChange) {\n              triggerSortingChange(column.key, 'desc');\n            }\n          } else {\n            tmpColumn.sortingDirection = 'asc';\n\n            // Update sorted column and direction\n            setSortedColumn(column.key);\n            setSortedDirection('asc');\n\n            // Let's trigger remote sorting trigger function\n            if (remotePagination && triggerSortingChange) {\n              triggerSortingChange(column.key, 'asc');\n            }\n          }\n        } else {\n          // Let's apply the initial sorting\n          tmpColumn.sortingDirection = 'asc';\n\n          // Update sorted column and direction\n          setSortedColumn(column.key);\n          setSortedDirection('asc');\n\n          // Let's trigger remote sorting trigger function\n          if (remotePagination && triggerSortingChange) {\n            triggerSortingChange(column.key, 'asc');\n          }\n        }\n      } else if (tmpColumn.sortingDirection !== undefined) {\n        // Let's remove sorting\n        tmpColumn.sortingDirection = undefined;\n      }\n\n      return tmpColumn;\n    });\n  };\n\n  /**\n   * Navigates user back to the previous page and updates the current table page.\n   */\n  const previousPage = () => {\n    if (remotePagination) {\n      // Let's inform parent component about page change\n      if (previousPageClick) {\n        previousPageClick();\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 (remotePagination) {\n      // Let's inform parent component about page change\n      if (nextPageClick) {\n        nextPageClick();\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: string) => {\n    // Let's check if we are using remote pagination\n    if (remotePagination) {\n      // Inform parent component about rows per page change\n      if (rowsPerPageChange) {\n        rowsPerPageChange(parseInt(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(parseInt(value));\n  };\n\n  /**\n   * Renders the table header.\n   */\n  const renderHeader = () => {\n    return (\n      <thead>\n        {title && (\n          <tr data-testid=\"TestTableHeaderRow\">\n            <TableHeaderRowCol colSpan={columns.length}>\n              <div>\n                {title}\n                <MoreVertical size=\"18px\" color={COLORS.neutral_600} />\n              </div>\n            </TableHeaderRowCol>\n          </tr>\n        )}\n        <tr data-testid=\"TestTableColumnHeaderRow\">\n          {columns.map((column: TableColumn) => (\n            <TableColumnHeaderCol\n              onClick={() => sortTableColumn(column)}\n              key={column.key}\n              style={{ width: column.width }}\n              className={`${column.sortable ? 'sortable' : ''} ${!title ? 'no-border' : ''} ${column.justify ? `justify-${column.justify}` : ''}`}>\n              {column.name}\n\n              {column.sortingDirection === 'asc' ? <ArrowLineUp size=\"20px\" /> : column.sortingDirection === 'desc' ? <ArrowLineDown size=\"20px\" /> : ''}\n            </TableColumnHeaderCol>\n          ))}\n        </tr>\n      </thead>\n    );\n  };\n\n  /**\n   * Function which is called when a mouse click happens on a link to pass data to the parent component.\n   * @param row - Row in which the link is located.\n   * @param key - Key of the column for which the link is set.\n   * @param event - Click event handler.\n   */\n  const onLinkClick = (row: any, key: string, event: React.MouseEvent) => {\n    if (linkClick) {\n      event.stopPropagation();\n\n      linkClick(row, key);\n    }\n  };\n\n  /**\n   * Function which is called when a mouse click happens on an icon to pass data to the parent component.\n   * @param row - Row in which the icon is located.\n   * @param key - Key of the column for which the icon is set.\n   * @param event - Click event handler.\n   */\n  const onIconClick = (row: any, key: string, event: React.MouseEvent<HTMLButtonElement>) => {\n    if (iconClick) {\n      event.stopPropagation();\n\n      iconClick(row, key);\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    // Let's trigger row click only if we haven't selected any text and action exists\n    if (selectedText?.length === 0 && rowClick) {\n      rowClick(row);\n    }\n  };\n\n  /**\n   * Renders the table body.\n   */\n  const renderBody = () => {\n    return (\n      <tbody>\n        {currentPageRows.length > 0 ? (\n          currentPageRows.map((row: any, index: number) => (\n            <TableDataRow key={`row_${index}`} onClick={() => onRowClick(row)} data-testid=\"TestTableDataRow\">\n              {columns.map((column: TableColumn) => (\n                <TableDataCol\n                  key={`row_${index}_${column.key}`}\n                  style={column.colorFn ? { color: column.colorFn(row, column.key), maxWidth: column.width } : { maxWidth: column.width }}\n                  className={`${column.shortenText && `truncate-text`} ${column.justify ? `justify-${column.justify}` : ''} `}\n                  title={column.shortenText && row[column.key]}>\n                  {column.isLink && row[column.key] ? (\n                    <Button\n                      size={Size.Small}\n                      variant=\"tertiary\"\n                      onClick={(event) => onLinkClick(row, column.key, event)}\n                      style={column.colorFn && { color: column.colorFn(row, column.key) }}>\n                      {row[column.key]}\n                    </Button>\n                  ) : column.isIcon && column.icon ? (\n                    <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground={true} action={(event) => onIconClick(row, column.key, event!)}>\n                      {icons[column.icon!]({ size: '24', className: 'icon' })}\n                    </IconButton>\n                  ) : column.customContent ? (\n                    column.customContent(row, column.key)\n                  ) : (\n                    row[column.key]\n                  )}\n                </TableDataCol>\n              ))}\n            </TableDataRow>\n          ))\n        ) : (\n          <TableDataRow className=\"no-rows\" data-testid=\"TestTableNoDataRow\">\n            <TableDataCol colSpan={columns.length} className=\"center\">\n              There are no rows to display\n            </TableDataCol>\n          </TableDataRow>\n        )}\n      </tbody>\n    );\n  };\n\n  /**\n   * Renders the table footer.\n   */\n  const renderFooter = () => {\n    // Define local values used within the footer\n    const rowsPerPageValues = ['10', '20', '50', '100'];\n\n    return (\n      <tfoot>\n        <tr>\n          <TableFooterCol colSpan={columns.length} data-testid=\"TestTableFooterRow\">\n            <div>\n              <span>Rows per page: </span>\n              <DropdownFilter\n                id=\"rows-per-page\"\n                list={rowsPerPageValues.map(x => ({ label: x }))}\n                disableSorting={true}\n                onSelect={(value) => changeRowsPerPage(value)}\n                initalValue={rowsPerPage.toString()}\n                isButton={true}\n              />\n              <span className=\"current-page-info\">\n                {total === 0 ? 0 : from}-{to} of {total}\n              </span>\n              <div className=\"controls\">\n                <IconButton variant=\"secondary\" shape=\"circular\" action={() => previousPage()} disabled={from === 1}>\n                  <ChevronLeft size=\"24\" color={COLORS.neutral_600} />\n                </IconButton>\n                <IconButton variant=\"secondary\" shape=\"circular\" action={() => nextPage()} disabled={to === total}>\n                  <ChevronRight size=\"24\" color={COLORS.neutral_600} />\n                </IconButton>\n              </div>\n            </div>\n          </TableFooterCol>\n        </tr>\n      </tfoot>\n    );\n  };\n\n  /**\n   * Return Table component.\n   */\n  return (\n    <TableWrapper>\n      <TableContainer cellPadding=\"0\" cellSpacing=\"0\" data-testid=\"TestTable\">\n        {renderHeader()}\n        {renderBody()}\n        {renderFooter()}\n      </TableContainer>\n      {showLoadingIndicator && (\n        <TableLoadingIndicator>\n          <LoadingIndicator size={Size.Medium} color=\"#ffffff\"></LoadingIndicator>\n        </TableLoadingIndicator>\n      )}\n    </TableWrapper>\n  );\n};\n\nexport default Table;\n"],"file":"Table.js"}
+{"version":3,"sources":["../../../src/Table/Table.tsx"],"names":["React","MoreVertical","ChevronRight","ChevronLeft","ArrowLineDown","ArrowLineUp","SystemIcons","icons","DropdownFilter","IconButton","Button","Size","COLORS","TableHeaderRowCol","TableColumnHeaderCol","TableContainer","TableDataCol","TableDataRow","TableFooterCol","TableWrapper","TableLoadingIndicator","LoadingIndicator","Table","rowClick","linkClick","iconClick","previousPageClick","nextPageClick","rowsPerPageChange","triggerSortingChange","title","columns","rows","remotePagination","pagination","showLoadingIndicator","rowsPerPage","setRowsPerPage","useState","filteredRows","setFilteredRows","currentPageRows","setCurrentPageRows","currentPage","setCurrentPage","sortedColumn","setSortedColumn","sortedDirection","setSortedDirection","from","setFrom","to","setTo","total","setTotal","useEffect","tmpFilteredRows","filterAndSortRows","length","rowsFrom","rowsTo","slice","filter","row","matchFilterCriteria","column","filterValue","key","toLowerCase","indexOf","some","sortingDirection","sortingColumn","find","sort","a","b","sortTableColumn","map","tmpColumn","sortable","undefined","previousPage","nextPage","changeRowsPerPage","value","parseInt","renderHeader","neutral_600","width","justify","name","onLinkClick","event","stopPropagation","onIconClick","onRowClick","selectedText","window","getSelection","toString","renderBody","index","colorFn","color","maxWidth","shortenText","isLink","Small","isIcon","icon","size","className","customContent","renderFooter","rowsPerPageValues","x","label"],"mappings":"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","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom components.\n */\nimport { MoreVertical, ChevronRight, ChevronLeft, ArrowLineDown, ArrowLineUp } from '../icons/systemicons/SystemIcons';\nimport { SystemIcons as icons } from '../icons/index';\nimport { DropdownFilter } from '../Dropdown/index';\nimport { IconButton, Button } from '../Button/index';\nimport { Size } from '../types'\n\n/**\n * Import custom styles.\n */\nimport { COLORS } from '../styles';\nimport { TableHeaderRowCol, TableColumnHeaderCol, TableContainer, TableDataCol, TableDataRow, TableFooterCol, TableWrapper, TableLoadingIndicator } from './TableStyles';\n\n/**\n * Import custom types.\n */\nimport { TableProps, TableColumn, TableSortingDirection } from './TableTypes';\nimport { LoadingIndicator } from '../LoadingIndicator';\n\nconst Table: React.FunctionComponent<TableProps> = ({\n  rowClick,\n  linkClick,\n  iconClick,\n  previousPageClick,\n  nextPageClick,\n  rowsPerPageChange,\n  triggerSortingChange,\n  title,\n  columns,\n  rows,\n  remotePagination,\n  pagination,\n  showLoadingIndicator,\n}: TableProps) => {\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 [sortedColumn, setSortedColumn] = React.useState<string>('');\n  const [sortedDirection, setSortedDirection] = React.useState<TableSortingDirection>('asc');\n  const [from, setFrom] = React.useState<number>();\n  const [to, setTo] = React.useState<number>();\n  const [total, setTotal] = React.useState<number>();\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 (!remotePagination) {\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, sortedColumn, sortedDirection, remotePagination]);\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 (remotePagination) {\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  }, [remotePagination, pagination, rows]);\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 (columns.some((column) => column.sortingDirection)) {\n      // Let's find the sorting column\n      const sortingColumn = columns.find((column) => column.sortingDirection)!;\n\n      // Update sorted column data\n      setSortedDirection(sortingColumn.sortingDirection!);\n      setSortedColumn(sortingColumn.key!);\n\n      // Let's sort the rows\n      tmpFilteredRows.sort((a, b) => {\n        if (a[sortingColumn.key] > b[sortingColumn.key]) {\n          return sortingColumn.sortingDirection === 'asc' ? 1 : -1;\n        } else if (a[sortingColumn.key] < b[sortingColumn.key]) {\n          return sortingColumn.sortingDirection === '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   * 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's remove any active sorting\n    columns = columns.map((tmpColumn: TableColumn) => {\n      // Let's apply new sorting\n      // Let's check if it is the column for which we have to apply sorting\n      if (column.key === tmpColumn.key && tmpColumn.sortable) {\n        // Let's check if sorting is not defined\n        // If so, let's toggle the sorting direction\n        if (tmpColumn.sortingDirection !== undefined) {\n          if (tmpColumn.sortingDirection === 'asc') {\n            tmpColumn.sortingDirection = 'desc';\n\n            // Update sorted column and direction\n            setSortedColumn(column.key);\n            setSortedDirection('desc');\n\n            // Let's trigger remote sorting trigger function\n            if (remotePagination && triggerSortingChange) {\n              triggerSortingChange(column.key, 'desc');\n            }\n          } else {\n            tmpColumn.sortingDirection = 'asc';\n\n            // Update sorted column and direction\n            setSortedColumn(column.key);\n            setSortedDirection('asc');\n\n            // Let's trigger remote sorting trigger function\n            if (remotePagination && triggerSortingChange) {\n              triggerSortingChange(column.key, 'asc');\n            }\n          }\n        } else {\n          // Let's apply the initial sorting\n          tmpColumn.sortingDirection = 'asc';\n\n          // Update sorted column and direction\n          setSortedColumn(column.key);\n          setSortedDirection('asc');\n\n          // Let's trigger remote sorting trigger function\n          if (remotePagination && triggerSortingChange) {\n            triggerSortingChange(column.key, 'asc');\n          }\n        }\n      } else if (tmpColumn.sortingDirection !== undefined) {\n        // Let's remove sorting\n        tmpColumn.sortingDirection = undefined;\n      }\n\n      return tmpColumn;\n    });\n  };\n\n  /**\n   * Navigates user back to the previous page and updates the current table page.\n   */\n  const previousPage = () => {\n    if (remotePagination) {\n      // Let's inform parent component about page change\n      if (previousPageClick) {\n        previousPageClick();\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 (remotePagination) {\n      // Let's inform parent component about page change\n      if (nextPageClick) {\n        nextPageClick();\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: string) => {\n    // Let's check if we are using remote pagination\n    if (remotePagination) {\n      // Inform parent component about rows per page change\n      if (rowsPerPageChange) {\n        rowsPerPageChange(parseInt(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(parseInt(value));\n  };\n\n  /**\n   * Renders the table header.\n   */\n  const renderHeader = () => {\n    return (\n      <thead>\n        {title && (\n          <tr data-testid=\"TestTableHeaderRow\">\n            <TableHeaderRowCol colSpan={columns.length}>\n              <div>\n                {title}\n                <MoreVertical size=\"18px\" color={COLORS.neutral_600} />\n              </div>\n            </TableHeaderRowCol>\n          </tr>\n        )}\n        <tr data-testid=\"TestTableColumnHeaderRow\">\n          {columns.map((column: TableColumn) => (\n            <TableColumnHeaderCol\n              onClick={() => sortTableColumn(column)}\n              key={column.key}\n              style={{ width: column.width }}\n              className={`${column.sortable ? 'sortable' : ''} ${!title ? 'no-border' : ''} ${column.justify ? `justify-${column.justify}` : ''}`}>\n              {column.name}\n\n              {column.sortingDirection === 'asc' ? <ArrowLineUp size=\"20px\" /> : column.sortingDirection === 'desc' ? <ArrowLineDown size=\"20px\" /> : ''}\n            </TableColumnHeaderCol>\n          ))}\n        </tr>\n      </thead>\n    );\n  };\n\n  /**\n   * Function which is called when a mouse click happens on a link to pass data to the parent component.\n   * @param row - Row in which the link is located.\n   * @param key - Key of the column for which the link is set.\n   * @param event - Click event handler.\n   */\n  const onLinkClick = (row: any, key: string, event: React.MouseEvent) => {\n    if (linkClick) {\n      event.stopPropagation();\n\n      linkClick(row, key);\n    }\n  };\n\n  /**\n   * Function which is called when a mouse click happens on an icon to pass data to the parent component.\n   * @param row - Row in which the icon is located.\n   * @param key - Key of the column for which the icon is set.\n   * @param event - Click event handler.\n   */\n  const onIconClick = (row: any, key: string, event: React.MouseEvent<HTMLButtonElement>) => {\n    if (iconClick) {\n      event.stopPropagation();\n\n      iconClick(row, key);\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    // Let's trigger row click only if we haven't selected any text and action exists\n    if (selectedText?.length === 0 && rowClick) {\n      rowClick(row);\n    }\n  };\n\n  /**\n   * Renders the table body.\n   */\n  const renderBody = () => {\n    return (\n      <tbody>\n        {currentPageRows.length > 0 ? (\n          currentPageRows.map((row: any, index: number) => (\n            <TableDataRow key={`row_${index}`} onClick={() => onRowClick(row)} data-testid=\"TestTableDataRow\">\n              {columns.map((column: TableColumn) => (\n                <TableDataCol\n                  key={`row_${index}_${column.key}`}\n                  style={column.colorFn ? { color: column.colorFn(row, column.key), maxWidth: column.width } : { maxWidth: column.width }}\n                  className={`${column.shortenText && `truncate-text`} ${column.justify ? `justify-${column.justify}` : ''} `}\n                  title={column.shortenText && row[column.key]}>\n                  {column.isLink && row[column.key] ? (\n                    <Button\n                      size={Size.Small}\n                      variant=\"tertiary\"\n                      onClick={(event) => onLinkClick(row, column.key, event)}\n                      style={column.colorFn && { color: column.colorFn(row, column.key) }}>\n                      {row[column.key]}\n                    </Button>\n                  ) : column.isIcon && column.icon ? (\n                    <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground={true} action={(event) => onIconClick(row, column.key, event!)}>\n                      {icons[column.icon!]({ size: '24', className: 'icon' })}\n                    </IconButton>\n                  ) : column.customContent ? (\n                    column.customContent(row, column.key)\n                  ) : (\n                    row[column.key]\n                  )}\n                </TableDataCol>\n              ))}\n            </TableDataRow>\n          ))\n        ) : (\n          <TableDataRow className=\"no-rows\" data-testid=\"TestTableNoDataRow\">\n            <TableDataCol colSpan={columns.length} className=\"center\">\n              There are no rows to display\n            </TableDataCol>\n          </TableDataRow>\n        )}\n      </tbody>\n    );\n  };\n\n  /**\n   * Renders the table footer.\n   */\n  const renderFooter = () => {\n    // Define local values used within the footer\n    const rowsPerPageValues = ['10', '20', '50', '100'];\n\n    return (\n      <tfoot>\n        <tr>\n          <TableFooterCol colSpan={columns.length} data-testid=\"TestTableFooterRow\">\n            <div>\n              <span>Rows per page: </span>\n              <DropdownFilter\n                id=\"rows-per-page\"\n                list={rowsPerPageValues.map(x => ({ label: x }))}\n                disableSorting={true}\n                onSelect={(value) => changeRowsPerPage(value)}\n                initalValue={rowsPerPage.toString()}\n                isButton={true}\n              />\n              <span className=\"current-page-info\">\n                {total === 0 ? 0 : from}-{to} of {total}\n              </span>\n              <div className=\"controls\">\n                <IconButton variant=\"secondary\" shape=\"circular\" action={() => previousPage()} disabled={from === 1}>\n                  <ChevronLeft size=\"24\" color={COLORS.neutral_600} />\n                </IconButton>\n                <IconButton variant=\"secondary\" shape=\"circular\" action={() => nextPage()} disabled={to === total}>\n                  <ChevronRight size=\"24\" color={COLORS.neutral_600} />\n                </IconButton>\n              </div>\n            </div>\n          </TableFooterCol>\n        </tr>\n      </tfoot>\n    );\n  };\n\n  /**\n   * Return Table component.\n   */\n  return (\n    <TableWrapper>\n      <TableContainer cellPadding=\"0\" cellSpacing=\"0\" data-testid=\"TestTable\">\n        {renderHeader()}\n        {renderBody()}\n        {renderFooter()}\n      </TableContainer>\n      {showLoadingIndicator && (\n        <TableLoadingIndicator>\n          <LoadingIndicator size=\"medium\" color=\"#ffffff\"></LoadingIndicator>\n        </TableLoadingIndicator>\n      )}\n    </TableWrapper>\n  );\n};\n\nexport default Table;\n"],"file":"Table.js"}

package/dist/esm/Tabs/HorizontalTabs.js

@@ -4,7 +4,6 @@ import _pt from "prop-types";
  * Import React libraries.
  */
 import * as React from 'react';
-import { Size } from '../types';
 /**
  * Import custom styles.
  */
@@ -15,7 +14,8 @@ import { COLORS, ComponentTextStyle } from '../styles';
  */
 
 import styled from 'styled-components';
-import { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXSStyling } from '../styles/typography'; // Add custom styles
+import { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXSStyling } from '../styles/typography';
+import { Z_INDEXES } from '../styles/z-indexes'; // Add custom styles
 
 const HorizontalTabContainer = styled.div`
   width: 100%;
@@ -26,8 +26,7 @@ const HorizontalTabContainer = styled.div`
 const TabSideFill = styled.div`
   position: absolute;
   border-bottom: 1px solid ${COLORS.neutral_100};
-  height: Calc(100% - 1px);
-  z-index: 1;
+  bottom: 0;
   width: 100%;
 
   &.fill {
@@ -38,7 +37,6 @@ const TabButton = styled.button`
   color: ${COLORS.neutral_800};
   border: none;
   background-color: transparent;
-  z-index: 2;
   cursor: pointer;
   padding: 0px;
 
@@ -56,6 +54,7 @@ const TabButton = styled.button`
   }
 
   &:hover {
+    z-index: ${Z_INDEXES.hover};
     div {
       background: ${COLORS.primary_20};
       color: ${COLORS.primary_700};
@@ -68,8 +67,14 @@ const TabButton = styled.button`
       }
     }
   }
+  &.selected{
+    z-index: ${Z_INDEXES.active};
+  }
   
   &:focus {
+    z-index: ${Z_INDEXES.focus};
+    outline: none;
+    
     div {
       color: ${COLORS.primary_800};
       box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;
@@ -147,28 +152,28 @@ const TabButton = styled.button`
       }
     }
 
-    &.size-${Size.XSmall} {
+    &.size-XS {
       ${ComponentXSStyling(ComponentTextStyle.Regular, null)}
       padding: 0px 16px;
       height: 32px;
       margin-top: 16px;
     }
 
-    &.size-${Size.Small} {
+    &.size-S {
       ${ComponentSStyling(ComponentTextStyle.Regular, null)}
       padding: 0px 16px;
       height: 40px;
       margin-top: 8px;
     }
 
-    &.size-${Size.Medium} {
+    &.size-M {
       ${ComponentMStyling(ComponentTextStyle.Regular, null)}
       height: 48px;
       min-width: 96px;
       padding: 0px 16px;
     }
 
-    &.size-${Size.Large} {
+    &.size-L {
       ${ComponentLStyling(ComponentTextStyle.Regular, null)}
       height: 56px;
       min-width: 144px;
@@ -212,6 +217,7 @@ const HorizontalTabs = ({
 };
 
 HorizontalTabs.propTypes = {
+  size: _pt.oneOf(['XS', 'S', 'M', 'L']).isRequired,
   tabs: _pt.arrayOf(_pt.shape({
     value: _pt.string.isRequired,
     selected: _pt.bool.isRequired,

package/dist/esm/Tabs/HorizontalTabs.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Tabs/HorizontalTabs.tsx"],"names":["React","Size","COLORS","ComponentTextStyle","styled","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentXSStyling","HorizontalTabContainer","div","TabSideFill","neutral_100","white","TabButton","button","neutral_800","neutral_300","primary_20","primary_700","primary_800","focus_25","focus","primary_500","primary_100","XSmall","Regular","Small","Medium","Large","HorizontalTabs","size","tabs","sideFill","fullWidth","onTabChange","doTabChange","to","document","activeElement","HTMLElement","blur","map","tab","index","width","length","selected","disabled","value"],"mappings":"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","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\nimport { Size } from '../types';\n\n/**\n * Import custom styles.\n */\nimport {COLORS, ComponentTextStyle} from '../styles';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXSStyling} from '../styles/typography';\n\n// Add custom styles\nconst HorizontalTabContainer = styled.div`\n  width: 100%;\n  display: flex;\n  position: relative;\n  flex-direction: row;\n`;\n\nconst TabSideFill = styled.div`\n  position: absolute;\n  border-bottom: 1px solid ${COLORS.neutral_100};\n  height: Calc(100% - 1px);\n  z-index: 1;\n  width: 100%;\n\n  &.fill {\n    background: ${COLORS.white};\n  }\n`;\n\nconst TabButton = styled.button`\n  color: ${COLORS.neutral_800};\n  border: none;\n  background-color: transparent;\n  z-index: 2;\n  cursor: pointer;\n  padding: 0px;\n\n  &.disabled {\n    &:hover, &:focus {\n      cursor: not-allowed;\n      \n      div {\n        color: ${COLORS.neutral_300};\n        box-shadow: none !important;\n        background-color: transparent;\n        color: ${COLORS.neutral_300};\n      }\n    }\n  }\n\n  &:hover {\n    div {\n      background: ${COLORS.primary_20};\n      color: ${COLORS.primary_700};\n  \n      &.selected {\n        border-top: 2px solid ${COLORS.primary_700};\n        border-bottom: 0px;\n        border-left: 1px solid ${COLORS.neutral_100};\n        border-right: 1px solid ${COLORS.neutral_100};\n      }\n    }\n  }\n  \n  &:focus {\n    div {\n      color: ${COLORS.primary_800};\n      box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n      outline: none;\n\n      &.selected {\n        border-top: 2px solid ${COLORS.primary_800};\n        border-bottom: 0px;\n        border-left: 1px solid ${COLORS.neutral_100};\n        border-right: 1px solid ${COLORS.neutral_100};\n      }\n    }\n  }\n\n  div {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n\n    &:hover {\n      background: ${COLORS.primary_20};\n      color: ${COLORS.primary_700};\n  \n      &.selected {\n        border-top: 2px solid ${COLORS.primary_700};\n        border-bottom: 0px;\n        border-left: 1px solid ${COLORS.neutral_100};\n        border-right: 1px solid ${COLORS.neutral_100};\n      }\n    }\n  \n    &.selected {\n      background-color: ${COLORS.white};\n      border-top: 2px solid ${COLORS.primary_500};\n      border-bottom: 0px;\n      border-left: 1px solid ${COLORS.neutral_100};\n      border-right: 1px solid ${COLORS.neutral_100};\n    }\n  \n    &:focus {\n      color: ${COLORS.primary_800};\n      box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n      outline: none;\n  \n      &.selected {\n        border-top: 2px solid ${COLORS.primary_800};\n        border-bottom: 0px;\n        border-left: 1px solid ${COLORS.neutral_100};\n        border-right: 1px solid ${COLORS.neutral_100};\n      }\n    }\n  \n    &:active {\n      background: ${COLORS.primary_100};\n      color: ${COLORS.primary_800};\n      box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n      outline: none;\n  \n      &.selected {\n        border-top: 2px solid ${COLORS.primary_800};\n        border-bottom: 0px;\n        border-left: 1px solid ${COLORS.neutral_100};\n        border-right: 1px solid ${COLORS.neutral_100};\n      }\n    }\n  \n    &.disabled {\n      color: ${COLORS.neutral_300};\n      cursor: not-allowed;\n      box-shadow: none !important;\n  \n      &:hover, &:focus {\n        background-color: transparent;\n        color: ${COLORS.neutral_300};\n      }\n    }\n\n    &.size-${Size.XSmall} {\n      ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n      padding: 0px 16px;\n      height: 32px;\n      margin-top: 16px;\n    }\n\n    &.size-${Size.Small} {\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n      padding: 0px 16px;\n      height: 40px;\n      margin-top: 8px;\n    }\n\n    &.size-${Size.Medium} {\n      ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n      height: 48px;\n      min-width: 96px;\n      padding: 0px 16px;\n    }\n\n    &.size-${Size.Large} {\n      ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n      height: 56px;\n      min-width: 144px;\n      padding: 0px 16px;\n    }\n  }\n`;\n\n// Add component-specific types\ninterface HorizontalTabProps {\n  size: Size;\n  tabs: HorizontalTab[];\n  sideFill?: boolean;\n  fullWidth?: boolean;\n  onTabChange: (to: string) => void;\n}\n\ninterface HorizontalTab {\n  value: string;\n  selected: boolean;\n  to: string;\n  disabled?: boolean;\n}\n\nconst HorizontalTabs = ({ size, tabs, sideFill, fullWidth, onTabChange }: HorizontalTabProps) => {\n  /**\n   * Informs parent component of tab change and clears focus.\n   * @param to - A link to which user should be navigated.\n   */\n  const doTabChange = (to: string): void => {\n    // Let's inform parent component\n    onTabChange(to);\n\n    // Let's clear focus\n    if (document.activeElement instanceof HTMLElement) {\n      document.activeElement!.blur();\n    }\n  };\n\n  return (\n    <HorizontalTabContainer>\n      <TabSideFill className={`${sideFill ? 'fill' : ''}`} />\n      {tabs.map((tab: HorizontalTab, index: number) => (\n        <TabButton\n          key={`${tab}_${index}`}\n          style={fullWidth ? { width: `${100 / tabs.length}%` } : {}}\n          className={`size-${size} ${tab.selected ? 'selected' : ''} ${tab.disabled ? 'disabled' : ''}`}\n          onClick={() => !tab.disabled && doTabChange(tab.to)}>\n          <div className={`size-${size} ${tab.selected ? 'selected' : ''} ${tab.disabled ? 'disabled' : ''}`}>\n            {tab.value}\n          </div>\n        </TabButton>\n      ))}\n    </HorizontalTabContainer>\n  );\n};\n\nexport default HorizontalTabs;\n"],"file":"HorizontalTabs.js"}
+{"version":3,"sources":["../../../src/Tabs/HorizontalTabs.tsx"],"names":["React","COLORS","ComponentTextStyle","styled","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentXSStyling","Z_INDEXES","HorizontalTabContainer","div","TabSideFill","neutral_100","white","TabButton","button","neutral_800","neutral_300","hover","primary_20","primary_700","active","focus","primary_800","focus_25","primary_500","primary_100","Regular","HorizontalTabs","size","tabs","sideFill","fullWidth","onTabChange","doTabChange","to","document","activeElement","HTMLElement","blur","map","tab","index","width","length","selected","disabled","value"],"mappings":";;AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAEA;AACA;AACA;;AACA,SAAQC,MAAR,EAAgBC,kBAAhB,QAAyC,WAAzC;AAEA;AACA;AACA;;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAAQC,iBAAR,EAA2BC,iBAA3B,EAA8CC,iBAA9C,EAAiEC,kBAAjE,QAA0F,sBAA1F;AACA,SAAQC,SAAR,QAAwB,qBAAxB,C,CAEA;;AACA,MAAMC,sBAAsB,GAAGN,MAAM,CAACO,GAAI;AAC1C;AACA;AACA;AACA;AACA,CALA;AAOA,MAAMC,WAAW,GAAGR,MAAM,CAACO,GAAI;AAC/B;AACA,6BAA6BT,MAAM,CAACW,WAAY;AAChD;AACA;AACA;AACA;AACA,kBAAkBX,MAAM,CAACY,KAAM;AAC/B;AACA,CATA;AAWA,MAAMC,SAAS,GAAGX,MAAM,CAACY,MAAO;AAChC,WAAWd,MAAM,CAACe,WAAY;AAC9B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iBAAiBf,MAAM,CAACgB,WAAY;AACpC;AACA;AACA,iBAAiBhB,MAAM,CAACgB,WAAY;AACpC;AACA;AACA;AACA;AACA;AACA,eAAeT,SAAS,CAACU,KAAM;AAC/B;AACA,oBAAoBjB,MAAM,CAACkB,UAAW;AACtC,eAAelB,MAAM,CAACmB,WAAY;AAClC;AACA;AACA,gCAAgCnB,MAAM,CAACmB,WAAY;AACnD;AACA,iCAAiCnB,MAAM,CAACW,WAAY;AACpD,kCAAkCX,MAAM,CAACW,WAAY;AACrD;AACA;AACA;AACA;AACA,eAAeJ,SAAS,CAACa,MAAO;AAChC;AACA;AACA;AACA,eAAeb,SAAS,CAACc,KAAM;AAC/B;AACA;AACA;AACA,eAAerB,MAAM,CAACsB,WAAY;AAClC,iCAAiCtB,MAAM,CAACuB,QAAS,iBAAgBvB,MAAM,CAACqB,KAAM;AAC9E;AACA;AACA;AACA,gCAAgCrB,MAAM,CAACsB,WAAY;AACnD;AACA,iCAAiCtB,MAAM,CAACW,WAAY;AACpD,kCAAkCX,MAAM,CAACW,WAAY;AACrD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,oBAAoBX,MAAM,CAACkB,UAAW;AACtC,eAAelB,MAAM,CAACmB,WAAY;AAClC;AACA;AACA,gCAAgCnB,MAAM,CAACmB,WAAY;AACnD;AACA,iCAAiCnB,MAAM,CAACW,WAAY;AACpD,kCAAkCX,MAAM,CAACW,WAAY;AACrD;AACA;AACA;AACA;AACA,0BAA0BX,MAAM,CAACY,KAAM;AACvC,8BAA8BZ,MAAM,CAACwB,WAAY;AACjD;AACA,+BAA+BxB,MAAM,CAACW,WAAY;AAClD,gCAAgCX,MAAM,CAACW,WAAY;AACnD;AACA;AACA;AACA,eAAeX,MAAM,CAACsB,WAAY;AAClC,iCAAiCtB,MAAM,CAACuB,QAAS,iBAAgBvB,MAAM,CAACqB,KAAM;AAC9E;AACA;AACA;AACA,gCAAgCrB,MAAM,CAACsB,WAAY;AACnD;AACA,iCAAiCtB,MAAM,CAACW,WAAY;AACpD,kCAAkCX,MAAM,CAACW,WAAY;AACrD;AACA;AACA;AACA;AACA,oBAAoBX,MAAM,CAACyB,WAAY;AACvC,eAAezB,MAAM,CAACsB,WAAY;AAClC,iCAAiCtB,MAAM,CAACuB,QAAS,iBAAgBvB,MAAM,CAACqB,KAAM;AAC9E;AACA;AACA;AACA,gCAAgCrB,MAAM,CAACsB,WAAY;AACnD;AACA,iCAAiCtB,MAAM,CAACW,WAAY;AACpD,kCAAkCX,MAAM,CAACW,WAAY;AACrD;AACA;AACA;AACA;AACA,eAAeX,MAAM,CAACgB,WAAY;AAClC;AACA;AACA;AACA;AACA;AACA,iBAAiBhB,MAAM,CAACgB,WAAY;AACpC;AACA;AACA;AACA;AACA,QAAQV,kBAAkB,CAACL,kBAAkB,CAACyB,OAApB,EAA6B,IAA7B,CAAmC;AAC7D;AACA;AACA;AACA;AACA;AACA;AACA,QAAQrB,iBAAiB,CAACJ,kBAAkB,CAACyB,OAApB,EAA6B,IAA7B,CAAmC;AAC5D;AACA;AACA;AACA;AACA;AACA;AACA,QAAQtB,iBAAiB,CAACH,kBAAkB,CAACyB,OAApB,EAA6B,IAA7B,CAAmC;AAC5D;AACA;AACA;AACA;AACA;AACA;AACA,QAAQvB,iBAAiB,CAACF,kBAAkB,CAACyB,OAApB,EAA6B,IAA7B,CAAmC;AAC5D;AACA;AACA;AACA;AACA;AACA,CAnJA,C,CAqJA;;AAkBA,MAAMC,cAAc,GAAG,CAAC;AAAEC,EAAAA,IAAF;AAAQC,EAAAA,IAAR;AAAcC,EAAAA,QAAd;AAAwBC,EAAAA,SAAxB;AAAmCC,EAAAA;AAAnC,CAAD,KAA0E;AAC/F;AACF;AACA;AACA;AACE,QAAMC,WAAW,GAAIC,EAAD,IAAsB;AACxC;AACAF,IAAAA,WAAW,CAACE,EAAD,CAAX,CAFwC,CAIxC;;AACA,QAAIC,QAAQ,CAACC,aAAT,YAAkCC,WAAtC,EAAmD;AACjDF,MAAAA,QAAQ,CAACC,aAAT,CAAwBE,IAAxB;AACD;AACF,GARD;;AAUA,sBACE,oBAAC,sBAAD,qBACE,oBAAC,WAAD;AAAa,IAAA,SAAS,EAAG,GAAER,QAAQ,GAAG,MAAH,GAAY,EAAG;AAAlD,IADF,EAEGD,IAAI,CAACU,GAAL,CAAS,CAACC,GAAD,EAAqBC,KAArB,kBACR,oBAAC,SAAD;AACE,IAAA,GAAG,EAAG,GAAED,GAAI,IAAGC,KAAM,EADvB;AAEE,IAAA,KAAK,EAAEV,SAAS,GAAG;AAAEW,MAAAA,KAAK,EAAG,GAAE,MAAMb,IAAI,CAACc,MAAO;AAA9B,KAAH,GAAwC,EAF1D;AAGE,IAAA,SAAS,EAAG,QAAOf,IAAK,IAAGY,GAAG,CAACI,QAAJ,GAAe,UAAf,GAA4B,EAAG,IAAGJ,GAAG,CAACK,QAAJ,GAAe,UAAf,GAA4B,EAAG,EAH9F;AAIE,IAAA,OAAO,EAAE,MAAM,CAACL,GAAG,CAACK,QAAL,IAAiBZ,WAAW,CAACO,GAAG,CAACN,EAAL;AAJ7C,kBAKE;AAAK,IAAA,SAAS,EAAG,QAAON,IAAK,IAAGY,GAAG,CAACI,QAAJ,GAAe,UAAf,GAA4B,EAAG,IAAGJ,GAAG,CAACK,QAAJ,GAAe,UAAf,GAA4B,EAAG;AAAjG,KACGL,GAAG,CAACM,KADP,CALF,CADD,CAFH,CADF;AAgBD,CA/BD;;;AAhBElB,EAAAA,I,aAcwB,I,EAAO,G,EAAM,G,EAAM,G;AAb3CC,EAAAA,I;AAOAiB,IAAAA,K;AACAF,IAAAA,Q;AACAV,IAAAA,E;AACAW,IAAAA,Q;;AATAf,EAAAA,Q;AACAC,EAAAA,S;AACAC,EAAAA,W;;AA6CF,eAAeL,cAAf","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom styles.\n */\nimport {COLORS, ComponentTextStyle} from '../styles';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXSStyling} from '../styles/typography';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\n// Add custom styles\nconst HorizontalTabContainer = styled.div`\n  width: 100%;\n  display: flex;\n  position: relative;\n  flex-direction: row;\n`;\n\nconst TabSideFill = styled.div`\n  position: absolute;\n  border-bottom: 1px solid ${COLORS.neutral_100};\n  bottom: 0;\n  width: 100%;\n\n  &.fill {\n    background: ${COLORS.white};\n  }\n`;\n\nconst TabButton = styled.button`\n  color: ${COLORS.neutral_800};\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  padding: 0px;\n\n  &.disabled {\n    &:hover, &:focus {\n      cursor: not-allowed;\n      \n      div {\n        color: ${COLORS.neutral_300};\n        box-shadow: none !important;\n        background-color: transparent;\n        color: ${COLORS.neutral_300};\n      }\n    }\n  }\n\n  &:hover {\n    z-index: ${Z_INDEXES.hover};\n    div {\n      background: ${COLORS.primary_20};\n      color: ${COLORS.primary_700};\n  \n      &.selected {\n        border-top: 2px solid ${COLORS.primary_700};\n        border-bottom: 0px;\n        border-left: 1px solid ${COLORS.neutral_100};\n        border-right: 1px solid ${COLORS.neutral_100};\n      }\n    }\n  }\n  &.selected{\n    z-index: ${Z_INDEXES.active};\n  }\n  \n  &:focus {\n    z-index: ${Z_INDEXES.focus};\n    outline: none;\n    \n    div {\n      color: ${COLORS.primary_800};\n      box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n      outline: none;\n\n      &.selected {\n        border-top: 2px solid ${COLORS.primary_800};\n        border-bottom: 0px;\n        border-left: 1px solid ${COLORS.neutral_100};\n        border-right: 1px solid ${COLORS.neutral_100};\n      }\n    }\n  }\n\n  div {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n\n    &:hover {\n      background: ${COLORS.primary_20};\n      color: ${COLORS.primary_700};\n  \n      &.selected {\n        border-top: 2px solid ${COLORS.primary_700};\n        border-bottom: 0px;\n        border-left: 1px solid ${COLORS.neutral_100};\n        border-right: 1px solid ${COLORS.neutral_100};\n      }\n    }\n  \n    &.selected {\n      background-color: ${COLORS.white};\n      border-top: 2px solid ${COLORS.primary_500};\n      border-bottom: 0px;\n      border-left: 1px solid ${COLORS.neutral_100};\n      border-right: 1px solid ${COLORS.neutral_100};\n    }\n  \n    &:focus {\n      color: ${COLORS.primary_800};\n      box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n      outline: none;\n  \n      &.selected {\n        border-top: 2px solid ${COLORS.primary_800};\n        border-bottom: 0px;\n        border-left: 1px solid ${COLORS.neutral_100};\n        border-right: 1px solid ${COLORS.neutral_100};\n      }\n    }\n  \n    &:active {\n      background: ${COLORS.primary_100};\n      color: ${COLORS.primary_800};\n      box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n      outline: none;\n  \n      &.selected {\n        border-top: 2px solid ${COLORS.primary_800};\n        border-bottom: 0px;\n        border-left: 1px solid ${COLORS.neutral_100};\n        border-right: 1px solid ${COLORS.neutral_100};\n      }\n    }\n  \n    &.disabled {\n      color: ${COLORS.neutral_300};\n      cursor: not-allowed;\n      box-shadow: none !important;\n  \n      &:hover, &:focus {\n        background-color: transparent;\n        color: ${COLORS.neutral_300};\n      }\n    }\n\n    &.size-XS {\n      ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n      padding: 0px 16px;\n      height: 32px;\n      margin-top: 16px;\n    }\n\n    &.size-S {\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n      padding: 0px 16px;\n      height: 40px;\n      margin-top: 8px;\n    }\n\n    &.size-M {\n      ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n      height: 48px;\n      min-width: 96px;\n      padding: 0px 16px;\n    }\n\n    &.size-L {\n      ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n      height: 56px;\n      min-width: 144px;\n      padding: 0px 16px;\n    }\n  }\n`;\n\n// Add component-specific types\ninterface HorizontalTabProps {\n  size: HorizontalTabSizes;\n  tabs: HorizontalTab[];\n  sideFill?: boolean;\n  fullWidth?: boolean;\n  onTabChange: (to: string) => void;\n}\n\ninterface HorizontalTab {\n  value: string;\n  selected: boolean;\n  to: string;\n  disabled?: boolean;\n}\n\ntype HorizontalTabSizes = 'XS' | 'S' | 'M' | 'L';\n\nconst HorizontalTabs = ({ size, tabs, sideFill, fullWidth, onTabChange }: HorizontalTabProps) => {\n  /**\n   * Informs parent component of tab change and clears focus.\n   * @param to - A link to which user should be navigated.\n   */\n  const doTabChange = (to: string): void => {\n    // Let's inform parent component\n    onTabChange(to);\n\n    // Let's clear focus\n    if (document.activeElement instanceof HTMLElement) {\n      document.activeElement!.blur();\n    }\n  };\n\n  return (\n    <HorizontalTabContainer>\n      <TabSideFill className={`${sideFill ? 'fill' : ''}`} />\n      {tabs.map((tab: HorizontalTab, index: number) => (\n        <TabButton\n          key={`${tab}_${index}`}\n          style={fullWidth ? { width: `${100 / tabs.length}%` } : {}}\n          className={`size-${size} ${tab.selected ? 'selected' : ''} ${tab.disabled ? 'disabled' : ''}`}\n          onClick={() => !tab.disabled && doTabChange(tab.to)}>\n          <div className={`size-${size} ${tab.selected ? 'selected' : ''} ${tab.disabled ? 'disabled' : ''}`}>\n            {tab.value}\n          </div>\n        </TabButton>\n      ))}\n    </HorizontalTabContainer>\n  );\n};\n\nexport default HorizontalTabs;\n"],"file":"HorizontalTabs.js"}

package/dist/esm/Tabs/TabLink.js

@@ -3,8 +3,8 @@ import * as React from 'react';
 import { NavLink, useLocation } from 'react-router-dom';
 import styled from 'styled-components';
 import { NotificationDot } from '../NotificationDot';
-import { Size } from '../types';
 import { COLORS } from '../styles';
+import { Z_INDEXES } from '../styles/z-indexes';
 const StyledTabLink = styled(NavLink)`
   display: flex;
   flex-direction: row;
@@ -26,6 +26,7 @@ const StyledTabLink = styled(NavLink)`
   }
 
   &:focus {
+    z-index: ${Z_INDEXES.focus};
     background-color: ${COLORS.white};
     box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;
     outline: none;
@@ -36,24 +37,31 @@ const StyledTabLink = styled(NavLink)`
   }
 
   &.active {
+    z-index: ${Z_INDEXES.active};
     background-color: ${COLORS.neutral_20};
   }
+
   &.active:hover {
     background-color: ${COLORS.primary_20};
   }
+
   &.active:focus {
     background-color: ${COLORS.white};
   }
 
   &:hover {
+    z-index: ${Z_INDEXES.hover};
     background-color: ${COLORS.primary_20};
     color: ${COLORS.primary_600};
   }
+
   &:active {
+    z-index: ${Z_INDEXES.active};
     box-shadow: none;
     background-color: ${COLORS.primary_100};
     color: ${COLORS.primary_800};
   }
+
   &.active {
     &::after {
       position: absolute;
@@ -64,17 +72,16 @@ const StyledTabLink = styled(NavLink)`
       left: -1px;
       background-color: ${COLORS.primary_500};
 
-      border-top-left-radius: 2px;
-      border-top-right-radius: 2px;
-      border-bottom-left-radius: 2px;
-      border-bottom-right-radius: 2px;
+      border-radius: 2px;
     }
   }
+
   &.active:hover {
     &::after {
       background-color: ${COLORS.primary_600};
     }
   }
+
   &.active:active {
     background-color: ${COLORS.primary_100};
 
@@ -82,12 +89,15 @@ const StyledTabLink = styled(NavLink)`
       background-color: ${COLORS.primary_800};
     }
   }
+
   &:disabled {
     box-shadow: none;
     background-color: ${COLORS.white};
+
     span {
       color: ${COLORS.neutral_300};
     }
+
     &::after {
       background-color: ${COLORS.white};
     }
@@ -129,7 +139,7 @@ const TabLink = ({
   onLinkClick,
   testId,
   showNotificationDot = false,
-  size = Size.Small,
+  size = 'small',
   variant = 'critical'
 }) => {
   const location = useLocation();
@@ -166,6 +176,7 @@ TabLink.propTypes = {
   onLinkClick: _pt.func,
   testId: _pt.string,
   showNotificationDot: _pt.bool,
+  size: _pt.string,
   variant: _pt.oneOf(['positive', 'critical'])
 };
 export default TabLink;

package/dist/esm/Tabs/TabLink.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Tabs/TabLink.tsx"],"names":["React","NavLink","useLocation","styled","NotificationDot","Size","COLORS","StyledTabLink","neutral_600","props","disabled","neutral_100","white","neutral_20","primary_20","primary_600","primary_100","primary_800","primary_500","neutral_300","OptionalLineWrapperWithIcon","div","TopWrapper","TextContainer","StyledNotification","OptionalLineWrapper","TabLink","to","exact","requiredLine","optionalLine","OptionalLineIcon","onLinkClick","testId","showNotificationDot","size","Small","variant","location","ref","useRef","toString","pathname","current","blur","undefined"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { NavLink, NavLinkProps, useLocation } from 'react-router-dom';\nimport styled from 'styled-components';\nimport { NotificationDot } from '../NotificationDot';\nimport { BaseProps } from '../icons';\nimport { Size } from '../types';\nimport { COLORS } from '../styles';\n\ntype TabLinkProps = {\n  disabled?: boolean;\n  requiredLine: string;\n  optionalLine?: string;\n  OptionalLineIcon?: React.FunctionComponent<BaseProps>;\n  onLinkClick?: () => void;\n  testId?: string;\n  showNotificationDot?: boolean;\n  size?: Size.Small | Size.Medium | Size.Large;\n  variant?: 'positive' | 'critical';\n} & NavLinkProps;\n\ntype StyledTabLinkProps = {\n  disabled?: boolean;\n  exact: boolean;\n};\n\nconst StyledTabLink = styled(NavLink)<StyledTabLinkProps>`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  font-size: 16px;\n  line-height: 120%;\n  color: ${COLORS.neutral_600};\n\n  background-color: ${(props) => (props.disabled ? COLORS.neutral_100 : 'transparent')};\n  cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};\n  border-left: 1px solid transparent;\n  text-decoration: none;\n  position: relative;\n  border-radius: 2px;\n\n  &:not(:last-child) {\n    margin-bottom: 4px;\n  }\n\n  &:focus {\n    background-color: ${COLORS.white};\n    box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n    outline: none;\n\n    &::after {\n      background-color: ${COLORS.white};\n    }\n  }\n\n  &.active {\n    background-color: ${COLORS.neutral_20};\n  }\n  &.active:hover {\n    background-color: ${COLORS.primary_20};\n  }\n  &.active:focus {\n    background-color: ${COLORS.white};\n  }\n\n  &:hover {\n    background-color: ${COLORS.primary_20};\n    color: ${COLORS.primary_600};\n  }\n  &:active {\n    box-shadow: none;\n    background-color: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n  }\n  &.active {\n    &::after {\n      position: absolute;\n      content: ' ';\n      width: 4px;\n      top: 0;\n      bottom: 0;\n      left: -1px;\n      background-color: ${COLORS.primary_500};\n\n      border-top-left-radius: 2px;\n      border-top-right-radius: 2px;\n      border-bottom-left-radius: 2px;\n      border-bottom-right-radius: 2px;\n    }\n  }\n  &.active:hover {\n    &::after {\n      background-color: ${COLORS.primary_600};\n    }\n  }\n  &.active:active {\n    background-color: ${COLORS.primary_100};\n\n    &::after {\n      background-color: ${COLORS.primary_800};\n    }\n  }\n  &:disabled {\n    box-shadow: none;\n    background-color: ${COLORS.white};\n    span {\n      color: ${COLORS.neutral_300};\n    }\n    &::after {\n      background-color: ${COLORS.white};\n    }\n  }\n`;\n\nconst OptionalLineWrapperWithIcon = styled.div`\n  display: flex;\n  flex-direction: row;\n  span {\n    margin: 0 0 0 4px !important;\n    font-size: 12px;\n    line-height: 16px;\n  }\n`;\n\nconst TopWrapper = styled.div`\n  display: flex;\n  flex-direction: row;\n  span:not(:only-child) {\n    width: calc(100% - 32px);\n  }\n`;\n\nconst TextContainer = styled.div`\n  width: 100%;\n`;\n\nconst StyledNotification = styled.div`\n  margin: 0 15px 0 0 !important;\n`;\n\nconst OptionalLineWrapper = styled.div`\n  font-size: 12px;\n`;\n\nconst TabLink = ({ to, disabled = false, exact = false, requiredLine, optionalLine, OptionalLineIcon, onLinkClick, testId, showNotificationDot = false, size = Size.Small, variant = 'critical' }: TabLinkProps) => {\n  const location = useLocation();\n  const ref = React.useRef<any>(null);\n\n  return (\n    <StyledTabLink\n      to={to.toString()}\n      activeClassName=\"active\"\n      disabled={disabled}\n      exact={exact}\n      role=\"tab\"\n      aria-selected={to === location.pathname}\n      onClick={() => {\n        ref?.current?.blur();\n        if (onLinkClick) {\n          onLinkClick();\n        }\n      }}\n      ref={ref}\n      data-testid={testId}>\n      <TextContainer>  \n      <TopWrapper>\n        <span>{requiredLine}</span>        \n      </TopWrapper>\n      {optionalLine && OptionalLineIcon ? (\n        <OptionalLineWrapperWithIcon>\n          {OptionalLineIcon && <OptionalLineIcon size=\"16px\" />}\n          {optionalLine !== undefined && <span>{optionalLine}</span>}\n        </OptionalLineWrapperWithIcon>\n      ) : optionalLine ? (\n        <OptionalLineWrapper>\n          <span>{optionalLine}</span>\n        </OptionalLineWrapper>\n      ) : (\n        <></>\n      )}\n      </TextContainer>\n      <StyledNotification>\n        {showNotificationDot && <NotificationDot testId=\"NotificationDot\" size={size} variant={variant} />}\n      </StyledNotification>\n    </StyledTabLink>\n  );\n};\n\nexport default TabLink;\n"],"file":"TabLink.js"}
+{"version":3,"sources":["../../../src/Tabs/TabLink.tsx"],"names":["React","NavLink","useLocation","styled","NotificationDot","COLORS","Z_INDEXES","StyledTabLink","neutral_600","props","disabled","neutral_100","focus","white","active","neutral_20","primary_20","hover","primary_600","primary_100","primary_800","primary_500","neutral_300","OptionalLineWrapperWithIcon","div","TopWrapper","TextContainer","StyledNotification","OptionalLineWrapper","TabLink","to","exact","requiredLine","optionalLine","OptionalLineIcon","onLinkClick","testId","showNotificationDot","size","variant","location","ref","useRef","toString","pathname","current","blur","undefined"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { NavLink, NavLinkProps, useLocation } from 'react-router-dom';\nimport styled from 'styled-components';\nimport { NotificationDot } from '../NotificationDot';\nimport { BaseProps } from '../icons';\nimport { COLORS } from '../styles';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\ntype TabLinkProps = {\n  disabled?: boolean;\n  requiredLine: string;\n  optionalLine?: string;\n  OptionalLineIcon?: React.FunctionComponent<BaseProps>;\n  onLinkClick?: () => void;\n  testId?: string;\n  showNotificationDot?: boolean;\n  size?: string;\n  variant?: 'positive' | 'critical';\n} & NavLinkProps;\n\ntype StyledTabLinkProps = {\n  disabled?: boolean;\n  exact: boolean;\n};\n\nconst StyledTabLink = styled(NavLink)<StyledTabLinkProps>`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  font-size: 16px;\n  line-height: 120%;\n  color: ${COLORS.neutral_600};\n\n  background-color: ${(props) => (props.disabled ? COLORS.neutral_100 : 'transparent')};\n  cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};\n  border-left: 1px solid transparent;\n  text-decoration: none;\n  position: relative;\n  border-radius: 2px;\n\n  &:not(:last-child) {\n    margin-bottom: 4px;\n  }\n\n  &:focus {\n    z-index: ${Z_INDEXES.focus};\n    background-color: ${COLORS.white};\n    box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n    outline: none;\n\n    &::after {\n      background-color: ${COLORS.white};\n    }\n  }\n\n  &.active {\n    z-index: ${Z_INDEXES.active};\n    background-color: ${COLORS.neutral_20};\n  }\n\n  &.active:hover {\n    background-color: ${COLORS.primary_20};\n  }\n\n  &.active:focus {\n    background-color: ${COLORS.white};\n  }\n\n  &:hover {\n    z-index: ${Z_INDEXES.hover};\n    background-color: ${COLORS.primary_20};\n    color: ${COLORS.primary_600};\n  }\n\n  &:active {\n    z-index: ${Z_INDEXES.active};\n    box-shadow: none;\n    background-color: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n  }\n\n  &.active {\n    &::after {\n      position: absolute;\n      content: ' ';\n      width: 4px;\n      top: 0;\n      bottom: 0;\n      left: -1px;\n      background-color: ${COLORS.primary_500};\n\n      border-radius: 2px;\n    }\n  }\n\n  &.active:hover {\n    &::after {\n      background-color: ${COLORS.primary_600};\n    }\n  }\n\n  &.active:active {\n    background-color: ${COLORS.primary_100};\n\n    &::after {\n      background-color: ${COLORS.primary_800};\n    }\n  }\n\n  &:disabled {\n    box-shadow: none;\n    background-color: ${COLORS.white};\n\n    span {\n      color: ${COLORS.neutral_300};\n    }\n\n    &::after {\n      background-color: ${COLORS.white};\n    }\n  }\n`;\n\nconst OptionalLineWrapperWithIcon = styled.div`\n  display: flex;\n  flex-direction: row;\n  span {\n    margin: 0 0 0 4px !important;\n    font-size: 12px;\n    line-height: 16px;\n  }\n`;\n\nconst TopWrapper = styled.div`\n  display: flex;\n  flex-direction: row;\n  span:not(:only-child) {\n    width: calc(100% - 32px);\n  }\n`;\n\nconst TextContainer = styled.div`\n  width: 100%;\n`;\n\nconst StyledNotification = styled.div`\n  margin: 0 15px 0 0 !important;\n`;\n\nconst OptionalLineWrapper = styled.div`\n  font-size: 12px;\n`;\n\nconst TabLink = ({ to, disabled = false, exact = false, requiredLine, optionalLine, OptionalLineIcon, onLinkClick, testId, showNotificationDot = false, size = 'small', variant = 'critical' }: TabLinkProps) => {\n  const location = useLocation();\n  const ref = React.useRef<any>(null);\n\n  return (\n    <StyledTabLink\n      to={to.toString()}\n      activeClassName=\"active\"\n      disabled={disabled}\n      exact={exact}\n      role=\"tab\"\n      aria-selected={to === location.pathname}\n      onClick={() => {\n        ref?.current?.blur();\n        if (onLinkClick) {\n          onLinkClick();\n        }\n      }}\n      ref={ref}\n      data-testid={testId}>\n      <TextContainer>  \n      <TopWrapper>\n        <span>{requiredLine}</span>        \n      </TopWrapper>\n      {optionalLine && OptionalLineIcon ? (\n        <OptionalLineWrapperWithIcon>\n          {OptionalLineIcon && <OptionalLineIcon size=\"16px\" />}\n          {optionalLine !== undefined && <span>{optionalLine}</span>}\n        </OptionalLineWrapperWithIcon>\n      ) : optionalLine ? (\n        <OptionalLineWrapper>\n          <span>{optionalLine}</span>\n        </OptionalLineWrapper>\n      ) : (\n        <></>\n      )}\n      </TextContainer>\n      <StyledNotification>\n        {showNotificationDot && <NotificationDot testId=\"NotificationDot\" size={size} variant={variant} />}\n      </StyledNotification>\n    </StyledTabLink>\n  );\n};\n\nexport default TabLink;\n"],"file":"TabLink.js"}

package/dist/esm/Tabs/Tabs.js

@@ -1,17 +1,16 @@
 import _pt from "prop-types";
 import * as React from 'react';
 import styled from 'styled-components';
-import { Size } from '../types';
 
 const getHeight = size => {
   switch (size) {
-    case Size.Small:
+    case 'small':
       return '48px';
 
-    case Size.Medium:
+    case 'medium':
       return '56px';
 
-    case Size.Large:
+    case 'large':
       return '64px';
 
     default:
@@ -21,13 +20,13 @@ const getHeight = size => {
 
 const getFontSize = size => {
   switch (size) {
-    case Size.Small:
+    case 'small':
       return '16px';
 
-    case Size.Medium:
+    case 'medium':
       return '18px';
 
-    case Size.Large:
+    case 'large':
       return '20px';
 
     default:
@@ -37,13 +36,13 @@ const getFontSize = size => {
 
 const getTopMargin = size => {
   switch (size) {
-    case Size.Small:
+    case 'small':
       return '6px';
 
-    case Size.Medium:
+    case 'medium':
       return '10px';
 
-    case Size.Large:
+    case 'large':
       return '12px';
 
     default:
@@ -53,13 +52,13 @@ const getTopMargin = size => {
 
 const getBottomMargin = size => {
   switch (size) {
-    case Size.Small:
+    case 'small':
       return '2px';
 
-    case Size.Medium:
+    case 'medium':
       return '3px';
 
-    case Size.Large:
+    case 'large':
       return '4px';
 
     default:
@@ -102,7 +101,8 @@ const Tabs = ({
 }, children);
 
 Tabs.propTypes = {
-  children: _pt.any
+  children: _pt.any,
+  size: _pt.string.isRequired
 };
 export default Tabs;
 //# sourceMappingURL=Tabs.js.map

package/dist/esm/Tabs/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Tabs/Tabs.tsx"],"names":["React","styled","Size","getHeight","size","Small","Medium","Large","getFontSize","getTopMargin","getBottomMargin","Nav","nav","props","Tabs","children"],"mappings":";AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAASC,IAAT,QAAqB,UAArB;;AAOA,MAAMC,SAAS,GAAIC,IAAD,IAAgB;AAChC,UAAQA,IAAR;AACE,SAAKF,IAAI,CAACG,KAAV;AACE,aAAO,MAAP;;AACF,SAAKH,IAAI,CAACI,MAAV;AACE,aAAO,MAAP;;AACF,SAAKJ,IAAI,CAACK,KAAV;AACE,aAAO,MAAP;;AACF;AACE,aAAO,MAAP;AARJ;AAUD,CAXD;;AAaA,MAAMC,WAAW,GAAIJ,IAAD,IAAgB;AAClC,UAAQA,IAAR;AACE,SAAKF,IAAI,CAACG,KAAV;AACE,aAAO,MAAP;;AACF,SAAKH,IAAI,CAACI,MAAV;AACE,aAAO,MAAP;;AACF,SAAKJ,IAAI,CAACK,KAAV;AACE,aAAO,MAAP;;AACF;AACE,aAAO,MAAP;AARJ;AAUD,CAXD;;AAaA,MAAME,YAAY,GAAIL,IAAD,IAAgB;AACnC,UAAQA,IAAR;AACE,SAAKF,IAAI,CAACG,KAAV;AACE,aAAO,KAAP;;AACF,SAAKH,IAAI,CAACI,MAAV;AACE,aAAO,MAAP;;AACF,SAAKJ,IAAI,CAACK,KAAV;AACE,aAAO,MAAP;;AACF;AACE,aAAO,MAAP;AARJ;AAUD,CAXD;;AAaA,MAAMG,eAAe,GAAIN,IAAD,IAAgB;AACtC,UAAQA,IAAR;AACE,SAAKF,IAAI,CAACG,KAAV;AACE,aAAO,KAAP;;AACF,SAAKH,IAAI,CAACI,MAAV;AACE,aAAO,KAAP;;AACF,SAAKJ,IAAI,CAACK,KAAV;AACE,aAAO,KAAP;;AACF;AACE,aAAO,KAAP;AARJ;AAUD,CAXD;;AAaA,MAAMI,GAAG,GAAGV,MAAM,CAACW,GAAe;AAClC;AACA;AACA;AACA;AACA,cAAeC,KAAD,IAAWV,SAAS,CAACU,KAAK,CAACT,IAAP,CAAa;AAC/C;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iBAAkBS,KAAD,IAAWL,WAAW,CAACK,KAAK,CAACT,IAAP,CAAa;AACpD,cAAeS,KAAD,IAAWJ,YAAY,CAACI,KAAK,CAACT,IAAP,CAAa,MAAMS,KAAD,IAAWH,eAAe,CAACG,KAAK,CAACT,IAAP,CAAa;AAC9F;AACA;AACA,iBAAkBS,KAAD,IAAWL,WAAW,CAACK,KAAK,CAACT,IAAP,CAAa;AACpD;AACA;AACA;AACA;AACA;AACA;AACA,CAxBA;;AA0BA,MAAMU,IAAwC,GAAG,CAAC;AAAEC,EAAAA,QAAF;AAAYX,EAAAA;AAAZ,CAAD,kBAC/C,oBAAC,GAAD;AAAK,EAAA,IAAI,EAAC,SAAV;AAAoB,EAAA,IAAI,EAAEA;AAA1B,GACGW,QADH,CADF;;;AAlFEA,EAAAA,Q;;AAwFF,eAAeD,IAAf","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { Size } from '../types';\n\ntype TabsProps = {\n  children?: any;\n  size: Size;\n};\n\nconst getHeight = (size: Size) => {\n  switch (size) {\n    case Size.Small:\n      return '48px';\n    case Size.Medium:\n      return '56px';\n    case Size.Large:\n      return '64px';\n    default:\n      return '48px';\n  }\n};\n\nconst getFontSize = (size: Size) => {\n  switch (size) {\n    case Size.Small:\n      return '16px';\n    case Size.Medium:\n      return '18px';\n    case Size.Large:\n      return '20px';\n    default:\n      return '20px';\n  }\n};\n\nconst getTopMargin = (size: Size) => {\n  switch (size) {\n    case Size.Small:\n      return '6px';\n    case Size.Medium:\n      return '10px';\n    case Size.Large:\n      return '12px';\n    default:\n      return '12px';\n  }\n};\n\nconst getBottomMargin = (size: Size) => {\n  switch (size) {\n    case Size.Small:\n      return '2px';\n    case Size.Medium:\n      return '3px';\n    case Size.Large:\n      return '4px';\n    default:\n      return '4px';\n  }\n};\n\nconst Nav = styled.nav<TabsProps>`\n  display: flex;\n  flex-direction: column;\n\n  a {\n    height: ${(props) => getHeight(props.size)};\n  }\n\n  a > div:last-of-type {\n    font-size: 12px;\n    margin: 0 0 8px 16px;\n  }\n  a > div:first-child {\n    font-size: ${(props) => getFontSize(props.size)};\n    margin: ${(props) => getTopMargin(props.size)} 0 ${(props) => getBottomMargin(props.size)} 16px;\n  }\n  a > div:only-of-type {\n    font-size: ${(props) => getFontSize(props.size)};\n    margin: auto 0 auto 16px;\n  }\n\n  @media print {\n    display: none;\n  }\n`;\n\nconst Tabs: React.FunctionComponent<TabsProps> = ({ children, size }) => (\n  <Nav role=\"tablist\" size={size}>\n    {children}\n  </Nav>\n);\n\nexport default Tabs;\n"],"file":"Tabs.js"}
+{"version":3,"sources":["../../../src/Tabs/Tabs.tsx"],"names":["React","styled","getHeight","size","getFontSize","getTopMargin","getBottomMargin","Nav","nav","props","Tabs","children"],"mappings":";AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;;AAOA,MAAMC,SAAS,GAAIC,IAAD,IAAkB;AAClC,UAAQA,IAAR;AACE,SAAK,OAAL;AACE,aAAO,MAAP;;AACF,SAAK,QAAL;AACE,aAAO,MAAP;;AACF,SAAK,OAAL;AACE,aAAO,MAAP;;AACF;AACE,aAAO,MAAP;AARJ;AAUD,CAXD;;AAaA,MAAMC,WAAW,GAAID,IAAD,IAAkB;AACpC,UAAQA,IAAR;AACE,SAAK,OAAL;AACE,aAAO,MAAP;;AACF,SAAK,QAAL;AACE,aAAO,MAAP;;AACF,SAAK,OAAL;AACE,aAAO,MAAP;;AACF;AACE,aAAO,MAAP;AARJ;AAUD,CAXD;;AAaA,MAAME,YAAY,GAAIF,IAAD,IAAkB;AACrC,UAAQA,IAAR;AACE,SAAK,OAAL;AACE,aAAO,KAAP;;AACF,SAAK,QAAL;AACE,aAAO,MAAP;;AACF,SAAK,OAAL;AACE,aAAO,MAAP;;AACF;AACE,aAAO,MAAP;AARJ;AAUD,CAXD;;AAaA,MAAMG,eAAe,GAAIH,IAAD,IAAkB;AACxC,UAAQA,IAAR;AACE,SAAK,OAAL;AACE,aAAO,KAAP;;AACF,SAAK,QAAL;AACE,aAAO,KAAP;;AACF,SAAK,OAAL;AACE,aAAO,KAAP;;AACF;AACE,aAAO,KAAP;AARJ;AAUD,CAXD;;AAaA,MAAMI,GAAG,GAAGN,MAAM,CAACO,GAAe;AAClC;AACA;AACA;AACA;AACA,cAAeC,KAAD,IAAWP,SAAS,CAACO,KAAK,CAACN,IAAP,CAAa;AAC/C;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iBAAkBM,KAAD,IAAWL,WAAW,CAACK,KAAK,CAACN,IAAP,CAAa;AACpD,cAAeM,KAAD,IAAWJ,YAAY,CAACI,KAAK,CAACN,IAAP,CAAa,MAAMM,KAAD,IAAWH,eAAe,CAACG,KAAK,CAACN,IAAP,CAAa;AAC9F;AACA;AACA,iBAAkBM,KAAD,IAAWL,WAAW,CAACK,KAAK,CAACN,IAAP,CAAa;AACpD;AACA;AACA;AACA;AACA;AACA;AACA,CAxBA;;AA0BA,MAAMO,IAAwC,GAAG,CAAC;AAAEC,EAAAA,QAAF;AAAYR,EAAAA;AAAZ,CAAD,kBAC/C,oBAAC,GAAD;AAAK,EAAA,IAAI,EAAC,SAAV;AAAoB,EAAA,IAAI,EAAEA;AAA1B,GACGQ,QADH,CADF;;;AAlFEA,EAAAA,Q;AACAR,EAAAA,I;;AAuFF,eAAeO,IAAf","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\ntype TabsProps = {\n  children?: any;\n  size: string;\n};\n\nconst getHeight = (size: string) => {\n  switch (size) {\n    case 'small':\n      return '48px';\n    case 'medium':\n      return '56px';\n    case 'large':\n      return '64px';\n    default:\n      return '48px';\n  }\n};\n\nconst getFontSize = (size: string) => {\n  switch (size) {\n    case 'small':\n      return '16px';\n    case 'medium':\n      return '18px';\n    case 'large':\n      return '20px';\n    default:\n      return '20px';\n  }\n};\n\nconst getTopMargin = (size: string) => {\n  switch (size) {\n    case 'small':\n      return '6px';\n    case 'medium':\n      return '10px';\n    case 'large':\n      return '12px';\n    default:\n      return '12px';\n  }\n};\n\nconst getBottomMargin = (size: string) => {\n  switch (size) {\n    case 'small':\n      return '2px';\n    case 'medium':\n      return '3px';\n    case 'large':\n      return '4px';\n    default:\n      return '4px';\n  }\n};\n\nconst Nav = styled.nav<TabsProps>`\n  display: flex;\n  flex-direction: column;\n\n  a {\n    height: ${(props) => getHeight(props.size)};\n  }\n\n  a > div:last-of-type {\n    font-size: 12px;\n    margin: 0 0 8px 16px;\n  }\n  a > div:first-child {\n    font-size: ${(props) => getFontSize(props.size)};\n    margin: ${(props) => getTopMargin(props.size)} 0 ${(props) => getBottomMargin(props.size)} 16px;\n  }\n  a > div:only-of-type {\n    font-size: ${(props) => getFontSize(props.size)};\n    margin: auto 0 auto 16px;\n  }\n\n  @media print {\n    display: none;\n  }\n`;\n\nconst Tabs: React.FunctionComponent<TabsProps> = ({ children, size }) => (\n  <Nav role=\"tablist\" size={size}>\n    {children}\n  </Nav>\n);\n\nexport default Tabs;\n"],"file":"Tabs.js"}

package/dist/esm/Tabs/VerticalTabs.js

@@ -2,14 +2,13 @@ import _pt from "prop-types";
 import * as React from 'react';
 import Tabs from './Tabs';
 import TabLink from './TabLink';
-import { Size } from '../types';
 
 const VerticalTabs = ({
   size,
   entries
 }) => {
   return /*#__PURE__*/React.createElement(Tabs, {
-    size: size ?? Size.Large
+    size: size || 'large'
   }, entries?.map(entry => /*#__PURE__*/React.createElement(TabLink, {
     key: entry.to,
     to: entry.to,
@@ -30,6 +29,7 @@ const VerticalTabs = ({
 };
 
 VerticalTabs.propTypes = {
+  size: _pt.string,
   entries: _pt.arrayOf(_pt.shape({
     requiredLine: _pt.string.isRequired,
     optionalLine: _pt.string,