@laerdal/life-react-components 2.3.1-dev.1 → 2.3.1-dev.10

package/dist/Paginator/Paginator.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Paginator.cjs","names":["Container","styled","nav","BREAKPOINTS","MEDIUM","Items","ul","Item","li","ComponentMStyling","ComponentTextStyle","Regular","COLORS","neutral_600","focusStyles","Z_INDEXES","hover","primary_800","primary_20","active","primary_700","primary_100","neutral_800","neutral_20","Dots","ItemContent","primary_500","Step","up","target","disabled","page","onPageChange","id","navigateHook","useNavigate","handleButtonClick","event","Paginator","pageCount","currentPage","baseUrl","pages","from","to","i","push","findIndex","item","map"],"sources":["../../src/Paginator/Paginator.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {NavLink} from 'react-router-dom';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles} from '../styles';\nimport {SystemIcons} from '../icons';\nimport {ComponentMStyling} from '../styles';\nimport {Z_INDEXES} from '../styles';\nimport { useNavigate } from 'react-router';\nimport {IconButton} from '../Button';\n\nconst Container = styled.nav`\n  margin: 20px 0;\n  display: flex;\n  justify-content: center;\n\n  ${BREAKPOINTS.MEDIUM} {\n    width: 75%;\n  }\n`;\n\nconst Items = styled.ul`\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  display: flex;\n`;\n\nconst Item = styled.li`\n  width: 48px;\n  height: 48px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  & > * {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    height: 100%;\n    text-decoration: none;\n\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n    &:focus,\n    &:focus-within {\n      ${focusStyles}\n    }\n  }\n  & > a:hover {\n    z-index: ${Z_INDEXES.hover};\n    color: ${COLORS.primary_800};\n    background-color: ${COLORS.primary_20};\n  }\n  & > a:active {\n    z-index: ${Z_INDEXES.active};\n    color: ${COLORS.primary_700};\n    background-color: ${COLORS.primary_100};\n  }\n  & > a.active {\n    z-index: ${Z_INDEXES.active};\n    color: ${COLORS.neutral_800};\n    background-color: ${COLORS.neutral_20};\n    cursor: default;\n    &:hover {\n      color: ${COLORS.primary_800};\n      background-color: ${COLORS.primary_20};\n    }\n    &:active {\n      color: ${COLORS.primary_700};\n      background-color: ${COLORS.primary_100};\n    }\n  }\n`;\n\nconst Dots = styled(Item)`\n  cursor: not-allowed;\n  &:after{\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n    content: '...';\n  }\n`;\n\nconst ItemContent = styled('div')`\n  text-align:center;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: relative;\n  width: 100%;\n  height: 100%;\n  \n  &.active:after{\n    content: '';\n    position: absolute;\n    bottom: 4px;\n    width: 32px;\n    border-radius: 4px;\n    height: 4px;\n    background-color: ${COLORS.primary_500}\n  }\n  &.active:hover:after{\n    background-color: ${COLORS.primary_700}\n  }\n  &.active:active:after{\n    background-color: ${COLORS.primary_800}\n  }\n`\n\ntype PaginatorProps = {\n  pageCount: number;\n  currentPage: number;\n  baseUrl: string;\n  onPageChange?: (page: number) => void;\n};\n\nconst Step = ({\n  up = true,\n  target = '',\n  disabled = false,\n  page,\n  onPageChange,\n  id,\n}: {\n  up: boolean;\n  target: string;\n  disabled: boolean;\n  page: number;\n  onPageChange?: (page: number) => void;\n  id?: string;\n}) => {\n  const navigateHook = useNavigate();\n\n  const handleButtonClick = () => {\n    navigateHook(target);\n    onPageChange && onPageChange(page);\n  }\n\n  return (\n    <IconButton id={id}\n                action={event => handleButtonClick()}\n                variant={'secondary'}\n                shape={'circular'}\n                disabled={disabled}>\n      {up ? <SystemIcons.ChevronRight/> : <SystemIcons.ChevronLeft/>}\n    </IconButton>\n  )\n};\n\nconst Paginator = ({ pageCount = 1, currentPage = 1, baseUrl = '', onPageChange }: PaginatorProps) => {\n  const pages = [];\n  let from = 2;\n  let to = 4;\n  if (pageCount === 0) return null;\n\n  if (pageCount > 1) {\n    if (currentPage >= 4 && currentPage <= pageCount - 2) {\n      from = currentPage - 1;\n      to = currentPage + 1;\n    } else if (pageCount - 2 > 1 && currentPage > pageCount - 2) {\n      from = pageCount - 3;\n      to = pageCount - 1;\n    }\n    if (to > pageCount) {\n      to = pageCount;\n    }\n    for (let i = from; i <= to; i += 1) {\n      pages.push(i);\n    }\n  }\n\n  return (\n    <Container>\n      <Items>\n        <Step up={false}\n              target={`${baseUrl}/${currentPage - 1}`}\n              page={currentPage - 1}\n              disabled={currentPage === 1}\n              onPageChange={() => {\n                if (onPageChange) onPageChange(currentPage - 1);\n              }}\n              id=\"paginator-left\"/>\n        {pages.findIndex(item => item === 1) === -1 && (\n          <Item>\n            <NavLink\n              to={`${baseUrl}/1`}\n              onClick={() => {\n                if (onPageChange) onPageChange(1);\n              }}>\n                <ItemContent className={currentPage === 1 ? 'active' : ''}>\n                 <span>1</span>\n                </ItemContent>\n            </NavLink>\n          </Item>\n        )}\n        {currentPage >= 4 && pageCount > 5 && pageCount && pages.findIndex(item => item === 1) === -1 && (\n          <Dots/>\n        )}\n        {pages.map(page => (\n          <Item key={page}>\n            <NavLink\n              to={`${baseUrl}/${page}`}\n              onClick={() => {\n                if (onPageChange) onPageChange(page);\n              }}>\n                <ItemContent className={currentPage === page ? 'active' : ''}>\n                 <span>{page}</span>\n                </ItemContent>\n            </NavLink>\n          </Item>\n        ))}\n        {pageCount > 5 && currentPage <= pageCount - 3 && (\n          <Dots/>\n        )}\n        {pages.findIndex(item => item === pageCount) === -1 && pageCount !== 1 && (\n          <Item>\n            <NavLink\n              to={`${baseUrl}/${pageCount}`}\n              onClick={() => {\n                if (onPageChange) onPageChange(pageCount);\n              }}>\n                <ItemContent className={currentPage === pageCount ? 'active' : ''}>\n                 <span>{pageCount}</span>\n                </ItemContent>\n            </NavLink>\n          </Item>\n        )}\n        <Step up\n              target={`${baseUrl}/${currentPage + 1}`}\n              page={currentPage + 1}\n              disabled={currentPage === pageCount}\n              onPageChange={() => {\n                if (onPageChange) onPageChange(currentPage + 1);\n              }}\n              id=\"paginator-right\"/>\n      </Items>\n    </Container>\n  );\n};\n\nexport default Paginator;\n"],"mappings":"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"}
+{"version":3,"file":"Paginator.cjs","names":["Container","styled","nav","BREAKPOINTS","MEDIUM","Items","ul","Item","li","ComponentMStyling","ComponentTextStyle","Regular","COLORS","neutral_600","focusStyles","Z_INDEXES","hover","primary_800","primary_20","active","primary_700","primary_100","neutral_800","neutral_20","Dots","ItemContent","primary_500","Step","up","target","disabled","page","onPageChange","id","navigateHook","useNavigate","handleButtonClick","event","Paginator","pageCount","currentPage","baseUrl","pages","from","to","i","push","findIndex","item","map"],"sources":["../../src/Paginator/Paginator.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {NavLink} from 'react-router-dom';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles} from '../styles';\nimport {SystemIcons} from '../icons';\nimport {ComponentMStyling} from '../styles';\nimport {Z_INDEXES} from '../styles';\nimport { useNavigate } from 'react-router';\nimport {IconButton} from '../Button';\n\nconst Container = styled.nav`\n  margin: 20px 0;\n  display: flex;\n  justify-content: center;\n\n  ${BREAKPOINTS.MEDIUM} {\n    width: 75%;\n  }\n`;\n\nconst Items = styled.ul`\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  display: flex;\n`;\n\nconst Item = styled.li`\n  width: 48px;\n  height: 48px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  & > * {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    height: 100%;\n    text-decoration: none;\n\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n    &:focus,\n    &:focus-within {\n      ${focusStyles}\n    }\n  }\n  & > a:hover {\n    z-index: ${Z_INDEXES.hover};\n    color: ${COLORS.primary_800};\n    background-color: ${COLORS.primary_20};\n  }\n  & > a:active {\n    z-index: ${Z_INDEXES.active};\n    color: ${COLORS.primary_700};\n    background-color: ${COLORS.primary_100};\n  }\n  & > a.active {\n    z-index: ${Z_INDEXES.active};\n    color: ${COLORS.neutral_800};\n    background-color: ${COLORS.neutral_20};\n    cursor: default;\n    &:hover {\n      color: ${COLORS.primary_800};\n      background-color: ${COLORS.primary_20};\n    }\n    &:active {\n      color: ${COLORS.primary_700};\n      background-color: ${COLORS.primary_100};\n    }\n  }\n`;\n\nconst Dots = styled(Item)`\n  cursor: not-allowed;\n  &:after{\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n    content: '...';\n  }\n`;\n\nconst ItemContent = styled('div')`\n  text-align:center;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: relative;\n  width: 100%;\n  height: 100%;\n  \n  &.active:after{\n    content: '';\n    position: absolute;\n    bottom: 4px;\n    width: 32px;\n    border-radius: 4px;\n    height: 4px;\n    background-color: ${COLORS.primary_500}\n  }\n  &.active:hover:after{\n    background-color: ${COLORS.primary_700}\n  }\n  &.active:active:after{\n    background-color: ${COLORS.primary_800}\n  }\n`\n\ntype PaginatorProps = {\n  pageCount: number;\n  currentPage: number;\n  baseUrl: string;\n  onPageChange?: (page: number) => void;\n};\n\nconst Step = ({\n  up = true,\n  target = '',\n  disabled = false,\n  page,\n  onPageChange,\n  id,\n}: {\n  up: boolean;\n  target: string;\n  disabled: boolean;\n  page: number;\n  onPageChange?: (page: number) => void;\n  id?: string;\n}) => {\n  const navigateHook = useNavigate();\n\n  const handleButtonClick = () => {\n    navigateHook(target);\n    onPageChange && onPageChange(page);\n  }\n\n  return (\n    <IconButton id={id}\n                action={event => handleButtonClick()}\n                variant={'secondary'}\n                shape={'circular'}\n                disabled={disabled}>\n      {up ? <SystemIcons.ChevronRight/> : <SystemIcons.ChevronLeft/>}\n    </IconButton>\n  )\n};\n\nconst Paginator = ({ pageCount = 1, currentPage = 1, baseUrl = '', onPageChange }: PaginatorProps) => {\n  const pages = [];\n  let from = 2;\n  let to = 4;\n  if (pageCount === 0) return null;\n\n  if (pageCount > 1) {\n    if (currentPage >= 4 && currentPage <= pageCount - 2) {\n      from = currentPage - 1;\n      to = currentPage + 1;\n    } else if (pageCount - 2 > 1 && currentPage > pageCount - 2) {\n      from = pageCount - 3;\n      to = pageCount - 1;\n    }\n    if (to > pageCount) {\n      to = pageCount;\n    }\n    for (let i = from; i <= to; i += 1) {\n      pages.push(i);\n    }\n  }\n\n  return (\n    <Container>\n      <Items>\n        <Step up={false}\n              target={`${baseUrl}/${currentPage - 1}`}\n              page={currentPage - 1}\n              disabled={currentPage === 1}\n              onPageChange={() => {\n                if (onPageChange) onPageChange(currentPage - 1);\n              }}\n              id=\"paginator-left\"/>\n        {pages.findIndex(item => item === 1) === -1 && (\n          <Item>\n            <NavLink\n              to={`${baseUrl}/1`}\n              onClick={() => {\n                if (onPageChange) onPageChange(1);\n              }}>\n                <ItemContent className={currentPage === 1 ? 'active' : ''}>\n                 <span>1</span>\n                </ItemContent>\n            </NavLink>\n          </Item>\n        )}\n        {currentPage >= 4 && pageCount > 5 && pageCount && pages.findIndex(item => item === 1) === -1 && (\n          <Dots/>\n        )}\n        {pages.map(page => (\n          <Item key={page}>\n            <NavLink\n              to={`${baseUrl}/${page}`}\n              onClick={() => {\n                if (onPageChange) onPageChange(page);\n              }}>\n                <ItemContent className={currentPage === page ? 'active' : ''}>\n                 <span>{page}</span>\n                </ItemContent>\n            </NavLink>\n          </Item>\n        ))}\n        {pageCount > 5 && currentPage <= pageCount - 3 && (\n          <Dots/>\n        )}\n        {pages.findIndex(item => item === pageCount) === -1 && pageCount !== 1 && (\n          <Item>\n            <NavLink\n              to={`${baseUrl}/${pageCount}`}\n              onClick={() => {\n                if (onPageChange) onPageChange(pageCount);\n              }}>\n                <ItemContent className={currentPage === pageCount ? 'active' : ''}>\n                 <span>{pageCount}</span>\n                </ItemContent>\n            </NavLink>\n          </Item>\n        )}\n        <Step up\n              target={`${baseUrl}/${currentPage + 1}`}\n              page={currentPage + 1}\n              disabled={currentPage === pageCount}\n              onPageChange={() => {\n                if (onPageChange) onPageChange(currentPage + 1);\n              }}\n              id=\"paginator-right\"/>\n      </Items>\n    </Container>\n  );\n};\n\nexport default Paginator;\n"],"mappings":"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"}

package/dist/Paginator/Paginator.js.map

@@ -1 +1 @@
-{"version":3,"file":"Paginator.js","names":["React","styled","NavLink","BREAKPOINTS","COLORS","ComponentTextStyle","focusStyles","SystemIcons","ComponentMStyling","Z_INDEXES","useNavigate","IconButton","Container","nav","MEDIUM","Items","ul","Item","li","Regular","neutral_600","hover","primary_800","primary_20","active","primary_700","primary_100","neutral_800","neutral_20","Dots","ItemContent","primary_500","Step","up","target","disabled","page","onPageChange","id","navigateHook","handleButtonClick","event","Paginator","pageCount","currentPage","baseUrl","pages","from","to","i","push","findIndex","item","map"],"sources":["../../src/Paginator/Paginator.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {NavLink} from 'react-router-dom';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles} from '../styles';\nimport {SystemIcons} from '../icons';\nimport {ComponentMStyling} from '../styles';\nimport {Z_INDEXES} from '../styles';\nimport { useNavigate } from 'react-router';\nimport {IconButton} from '../Button';\n\nconst Container = styled.nav`\n  margin: 20px 0;\n  display: flex;\n  justify-content: center;\n\n  ${BREAKPOINTS.MEDIUM} {\n    width: 75%;\n  }\n`;\n\nconst Items = styled.ul`\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  display: flex;\n`;\n\nconst Item = styled.li`\n  width: 48px;\n  height: 48px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  & > * {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    height: 100%;\n    text-decoration: none;\n\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n    &:focus,\n    &:focus-within {\n      ${focusStyles}\n    }\n  }\n  & > a:hover {\n    z-index: ${Z_INDEXES.hover};\n    color: ${COLORS.primary_800};\n    background-color: ${COLORS.primary_20};\n  }\n  & > a:active {\n    z-index: ${Z_INDEXES.active};\n    color: ${COLORS.primary_700};\n    background-color: ${COLORS.primary_100};\n  }\n  & > a.active {\n    z-index: ${Z_INDEXES.active};\n    color: ${COLORS.neutral_800};\n    background-color: ${COLORS.neutral_20};\n    cursor: default;\n    &:hover {\n      color: ${COLORS.primary_800};\n      background-color: ${COLORS.primary_20};\n    }\n    &:active {\n      color: ${COLORS.primary_700};\n      background-color: ${COLORS.primary_100};\n    }\n  }\n`;\n\nconst Dots = styled(Item)`\n  cursor: not-allowed;\n  &:after{\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n    content: '...';\n  }\n`;\n\nconst ItemContent = styled('div')`\n  text-align:center;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: relative;\n  width: 100%;\n  height: 100%;\n  \n  &.active:after{\n    content: '';\n    position: absolute;\n    bottom: 4px;\n    width: 32px;\n    border-radius: 4px;\n    height: 4px;\n    background-color: ${COLORS.primary_500}\n  }\n  &.active:hover:after{\n    background-color: ${COLORS.primary_700}\n  }\n  &.active:active:after{\n    background-color: ${COLORS.primary_800}\n  }\n`\n\ntype PaginatorProps = {\n  pageCount: number;\n  currentPage: number;\n  baseUrl: string;\n  onPageChange?: (page: number) => void;\n};\n\nconst Step = ({\n  up = true,\n  target = '',\n  disabled = false,\n  page,\n  onPageChange,\n  id,\n}: {\n  up: boolean;\n  target: string;\n  disabled: boolean;\n  page: number;\n  onPageChange?: (page: number) => void;\n  id?: string;\n}) => {\n  const navigateHook = useNavigate();\n\n  const handleButtonClick = () => {\n    navigateHook(target);\n    onPageChange && onPageChange(page);\n  }\n\n  return (\n    <IconButton id={id}\n                action={event => handleButtonClick()}\n                variant={'secondary'}\n                shape={'circular'}\n                disabled={disabled}>\n      {up ? <SystemIcons.ChevronRight/> : <SystemIcons.ChevronLeft/>}\n    </IconButton>\n  )\n};\n\nconst Paginator = ({ pageCount = 1, currentPage = 1, baseUrl = '', onPageChange }: PaginatorProps) => {\n  const pages = [];\n  let from = 2;\n  let to = 4;\n  if (pageCount === 0) return null;\n\n  if (pageCount > 1) {\n    if (currentPage >= 4 && currentPage <= pageCount - 2) {\n      from = currentPage - 1;\n      to = currentPage + 1;\n    } else if (pageCount - 2 > 1 && currentPage > pageCount - 2) {\n      from = pageCount - 3;\n      to = pageCount - 1;\n    }\n    if (to > pageCount) {\n      to = pageCount;\n    }\n    for (let i = from; i <= to; i += 1) {\n      pages.push(i);\n    }\n  }\n\n  return (\n    <Container>\n      <Items>\n        <Step up={false}\n              target={`${baseUrl}/${currentPage - 1}`}\n              page={currentPage - 1}\n              disabled={currentPage === 1}\n              onPageChange={() => {\n                if (onPageChange) onPageChange(currentPage - 1);\n              }}\n              id=\"paginator-left\"/>\n        {pages.findIndex(item => item === 1) === -1 && (\n          <Item>\n            <NavLink\n              to={`${baseUrl}/1`}\n              onClick={() => {\n                if (onPageChange) onPageChange(1);\n              }}>\n                <ItemContent className={currentPage === 1 ? 'active' : ''}>\n                 <span>1</span>\n                </ItemContent>\n            </NavLink>\n          </Item>\n        )}\n        {currentPage >= 4 && pageCount > 5 && pageCount && pages.findIndex(item => item === 1) === -1 && (\n          <Dots/>\n        )}\n        {pages.map(page => (\n          <Item key={page}>\n            <NavLink\n              to={`${baseUrl}/${page}`}\n              onClick={() => {\n                if (onPageChange) onPageChange(page);\n              }}>\n                <ItemContent className={currentPage === page ? 'active' : ''}>\n                 <span>{page}</span>\n                </ItemContent>\n            </NavLink>\n          </Item>\n        ))}\n        {pageCount > 5 && currentPage <= pageCount - 3 && (\n          <Dots/>\n        )}\n        {pages.findIndex(item => item === pageCount) === -1 && pageCount !== 1 && (\n          <Item>\n            <NavLink\n              to={`${baseUrl}/${pageCount}`}\n              onClick={() => {\n                if (onPageChange) onPageChange(pageCount);\n              }}>\n                <ItemContent className={currentPage === pageCount ? 'active' : ''}>\n                 <span>{pageCount}</span>\n                </ItemContent>\n            </NavLink>\n          </Item>\n        )}\n        <Step up\n              target={`${baseUrl}/${currentPage + 1}`}\n              page={currentPage + 1}\n              disabled={currentPage === pageCount}\n              onPageChange={() => {\n                if (onPageChange) onPageChange(currentPage + 1);\n              }}\n              id=\"paginator-right\"/>\n      </Items>\n    </Container>\n  );\n};\n\nexport default Paginator;\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAAQC,OAAO,QAAO,kBAAkB;AACxC,SAAQC,WAAW,EAAEC,MAAM,EAAEC,kBAAkB,EAAEC,WAAW,QAAO,WAAW;AAC9E,SAAQC,WAAW,QAAO,UAAU;AACpC,SAAQC,iBAAiB,QAAO,WAAW;AAC3C,SAAQC,SAAS,QAAO,WAAW;AACnC,SAASC,WAAW,QAAQ,cAAc;AAC1C,SAAQC,UAAU,QAAO,WAAW;AAAC;AAAA;AAErC,IAAMC,SAAS,GAAGX,MAAM,CAACY,GAAG,2KAKxBV,WAAW,CAACW,MAAM,CAGrB;AAED,IAAMC,KAAK,GAAGd,MAAM,CAACe,EAAE,6IAKtB;AAED,IAAMC,IAAI,GAAGhB,MAAM,CAACiB,EAAE,20BAehBV,iBAAiB,CAACH,kBAAkB,CAACc,OAAO,EAAEf,MAAM,CAACgB,WAAW,CAAC,EAI/Dd,WAAW,EAIJG,SAAS,CAACY,KAAK,EACjBjB,MAAM,CAACkB,WAAW,EACPlB,MAAM,CAACmB,UAAU,EAG1Bd,SAAS,CAACe,MAAM,EAClBpB,MAAM,CAACqB,WAAW,EACPrB,MAAM,CAACsB,WAAW,EAG3BjB,SAAS,CAACe,MAAM,EAClBpB,MAAM,CAACuB,WAAW,EACPvB,MAAM,CAACwB,UAAU,EAG1BxB,MAAM,CAACkB,WAAW,EACPlB,MAAM,CAACmB,UAAU,EAG5BnB,MAAM,CAACqB,WAAW,EACPrB,MAAM,CAACsB,WAAW,CAG3C;AAED,IAAMG,IAAI,GAAG5B,MAAM,CAACgB,IAAI,CAAC,kJAGnBT,iBAAiB,CAACH,kBAAkB,CAACc,OAAO,EAAEf,MAAM,CAACgB,WAAW,CAAC,CAGtE;AAED,IAAMU,WAAW,GAAG7B,MAAM,CAAC,KAAK,CAAC,qgBAgBTG,MAAM,CAAC2B,WAAW,EAGlB3B,MAAM,CAACqB,WAAW,EAGlBrB,MAAM,CAACkB,WAAW,CAEzC;AASD,IAAMU,IAAI,GAAG,SAAPA,IAAI,OAcJ;EAAA,mBAbJC,EAAE;IAAFA,EAAE,wBAAG,IAAI;IAAA,mBACTC,MAAM;IAANA,MAAM,4BAAG,EAAE;IAAA,qBACXC,QAAQ;IAARA,QAAQ,8BAAG,KAAK;IAChBC,IAAI,QAAJA,IAAI;IACJC,YAAY,QAAZA,YAAY;IACZC,EAAE,QAAFA,EAAE;EASF,IAAMC,YAAY,GAAG7B,WAAW,EAAE;EAElC,IAAM8B,iBAAiB,GAAG,SAApBA,iBAAiB,GAAS;IAC9BD,YAAY,CAACL,MAAM,CAAC;IACpBG,YAAY,IAAIA,YAAY,CAACD,IAAI,CAAC;EACpC,CAAC;EAED,oBACE,KAAC,UAAU;IAAC,EAAE,EAAEE,EAAG;IACP,MAAM,EAAE,gBAAAG,KAAK;MAAA,OAAID,iBAAiB,EAAE;IAAA,CAAC;IACrC,OAAO,EAAE,WAAY;IACrB,KAAK,EAAE,UAAW;IAClB,QAAQ,EAAEL,QAAS;IAAA,UAC5BF,EAAE,gBAAG,KAAC,WAAW,CAAC,YAAY,KAAE,gBAAG,KAAC,WAAW,CAAC,WAAW;EAAE,EACnD;AAEjB,CAAC;AAED,IAAMS,SAAS,GAAG,SAAZA,SAAS,QAAuF;EAAA,4BAAjFC,SAAS;IAATA,SAAS,gCAAG,CAAC;IAAA,0BAAEC,WAAW;IAAXA,WAAW,kCAAG,CAAC;IAAA,sBAAEC,OAAO;IAAPA,OAAO,8BAAG,EAAE;IAAER,aAAY,SAAZA,YAAY;EAC7E,IAAMS,KAAK,GAAG,EAAE;EAChB,IAAIC,IAAI,GAAG,CAAC;EACZ,IAAIC,EAAE,GAAG,CAAC;EACV,IAAIL,SAAS,KAAK,CAAC,EAAE,OAAO,IAAI;EAEhC,IAAIA,SAAS,GAAG,CAAC,EAAE;IACjB,IAAIC,WAAW,IAAI,CAAC,IAAIA,WAAW,IAAID,SAAS,GAAG,CAAC,EAAE;MACpDI,IAAI,GAAGH,WAAW,GAAG,CAAC;MACtBI,EAAE,GAAGJ,WAAW,GAAG,CAAC;IACtB,CAAC,MAAM,IAAID,SAAS,GAAG,CAAC,GAAG,CAAC,IAAIC,WAAW,GAAGD,SAAS,GAAG,CAAC,EAAE;MAC3DI,IAAI,GAAGJ,SAAS,GAAG,CAAC;MACpBK,EAAE,GAAGL,SAAS,GAAG,CAAC;IACpB;IACA,IAAIK,EAAE,GAAGL,SAAS,EAAE;MAClBK,EAAE,GAAGL,SAAS;IAChB;IACA,KAAK,IAAIM,CAAC,GAAGF,IAAI,EAAEE,CAAC,IAAID,EAAE,EAAEC,CAAC,IAAI,CAAC,EAAE;MAClCH,KAAK,CAACI,IAAI,CAACD,CAAC,CAAC;IACf;EACF;EAEA,oBACE,KAAC,SAAS;IAAA,uBACR,MAAC,KAAK;MAAA,wBACJ,KAAC,IAAI;QAAC,EAAE,EAAE,KAAM;QACV,MAAM,YAAKJ,OAAO,cAAID,WAAW,GAAG,CAAC,CAAG;QACxC,IAAI,EAAEA,WAAW,GAAG,CAAE;QACtB,QAAQ,EAAEA,WAAW,KAAK,CAAE;QAC5B,YAAY,EAAE,wBAAM;UAClB,IAAIP,aAAY,EAAEA,aAAY,CAACO,WAAW,GAAG,CAAC,CAAC;QACjD,CAAE;QACF,EAAE,EAAC;MAAgB,EAAE,EAC1BE,KAAK,CAACK,SAAS,CAAC,UAAAC,IAAI;QAAA,OAAIA,IAAI,KAAK,CAAC;MAAA,EAAC,KAAK,CAAC,CAAC,iBACzC,KAAC,IAAI;QAAA,uBACH,KAAC,OAAO;UACN,EAAE,YAAKP,OAAO,OAAK;UACnB,OAAO,EAAE,mBAAM;YACb,IAAIR,aAAY,EAAEA,aAAY,CAAC,CAAC,CAAC;UACnC,CAAE;UAAA,uBACA,KAAC,WAAW;YAAC,SAAS,EAAEO,WAAW,KAAK,CAAC,GAAG,QAAQ,GAAG,EAAG;YAAA,uBACzD;cAAA,UAAM;YAAC;UAAO;QACD;MACR,EAEb,EACAA,WAAW,IAAI,CAAC,IAAID,SAAS,GAAG,CAAC,IAAIA,SAAS,IAAIG,KAAK,CAACK,SAAS,CAAC,UAAAC,IAAI;QAAA,OAAIA,IAAI,KAAK,CAAC;MAAA,EAAC,KAAK,CAAC,CAAC,iBAC3F,KAAC,IAAI,KACN,EACAN,KAAK,CAACO,GAAG,CAAC,UAAAjB,IAAI;QAAA,oBACb,KAAC,IAAI;UAAA,uBACH,KAAC,OAAO;YACN,EAAE,YAAKS,OAAO,cAAIT,IAAI,CAAG;YACzB,OAAO,EAAE,mBAAM;cACb,IAAIC,aAAY,EAAEA,aAAY,CAACD,IAAI,CAAC;YACtC,CAAE;YAAA,uBACA,KAAC,WAAW;cAAC,SAAS,EAAEQ,WAAW,KAAKR,IAAI,GAAG,QAAQ,GAAG,EAAG;cAAA,uBAC5D;gBAAA,UAAOA;cAAI;YAAQ;UACN;QACR,GATDA,IAAI,CAUR;MAAA,CACR,CAAC,EACDO,SAAS,GAAG,CAAC,IAAIC,WAAW,IAAID,SAAS,GAAG,CAAC,iBAC5C,KAAC,IAAI,KACN,EACAG,KAAK,CAACK,SAAS,CAAC,UAAAC,IAAI;QAAA,OAAIA,IAAI,KAAKT,SAAS;MAAA,EAAC,KAAK,CAAC,CAAC,IAAIA,SAAS,KAAK,CAAC,iBACpE,KAAC,IAAI;QAAA,uBACH,KAAC,OAAO;UACN,EAAE,YAAKE,OAAO,cAAIF,SAAS,CAAG;UAC9B,OAAO,EAAE,mBAAM;YACb,IAAIN,aAAY,EAAEA,aAAY,CAACM,SAAS,CAAC;UAC3C,CAAE;UAAA,uBACA,KAAC,WAAW;YAAC,SAAS,EAAEC,WAAW,KAAKD,SAAS,GAAG,QAAQ,GAAG,EAAG;YAAA,uBACjE;cAAA,UAAOA;YAAS;UAAQ;QACX;MACR,EAEb,eACD,KAAC,IAAI;QAAC,EAAE;QACF,MAAM,YAAKE,OAAO,cAAID,WAAW,GAAG,CAAC,CAAG;QACxC,IAAI,EAAEA,WAAW,GAAG,CAAE;QACtB,QAAQ,EAAEA,WAAW,KAAKD,SAAU;QACpC,YAAY,EAAE,wBAAM;UAClB,IAAIN,aAAY,EAAEA,aAAY,CAACO,WAAW,GAAG,CAAC,CAAC;QACjD,CAAE;QACF,EAAE,EAAC;MAAiB,EAAE;IAAA;EACtB,EACE;AAEhB,CAAC;AAAC;EAhIAD,SAAS;EACTC,WAAW;EACXC,OAAO;EACPR,YAAY;AAAA;AA+Hd,eAAeK,SAAS"}
+{"version":3,"file":"Paginator.js","names":["React","styled","NavLink","BREAKPOINTS","COLORS","ComponentTextStyle","focusStyles","SystemIcons","ComponentMStyling","Z_INDEXES","useNavigate","IconButton","Container","nav","MEDIUM","Items","ul","Item","li","Regular","neutral_600","hover","primary_800","primary_20","active","primary_700","primary_100","neutral_800","neutral_20","Dots","ItemContent","primary_500","Step","up","target","disabled","page","onPageChange","id","navigateHook","handleButtonClick","event","Paginator","pageCount","currentPage","baseUrl","pages","from","to","i","push","findIndex","item","map"],"sources":["../../src/Paginator/Paginator.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {NavLink} from 'react-router-dom';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles} from '../styles';\nimport {SystemIcons} from '../icons';\nimport {ComponentMStyling} from '../styles';\nimport {Z_INDEXES} from '../styles';\nimport { useNavigate } from 'react-router';\nimport {IconButton} from '../Button';\n\nconst Container = styled.nav`\n  margin: 20px 0;\n  display: flex;\n  justify-content: center;\n\n  ${BREAKPOINTS.MEDIUM} {\n    width: 75%;\n  }\n`;\n\nconst Items = styled.ul`\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  display: flex;\n`;\n\nconst Item = styled.li`\n  width: 48px;\n  height: 48px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  & > * {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    height: 100%;\n    text-decoration: none;\n\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n    &:focus,\n    &:focus-within {\n      ${focusStyles}\n    }\n  }\n  & > a:hover {\n    z-index: ${Z_INDEXES.hover};\n    color: ${COLORS.primary_800};\n    background-color: ${COLORS.primary_20};\n  }\n  & > a:active {\n    z-index: ${Z_INDEXES.active};\n    color: ${COLORS.primary_700};\n    background-color: ${COLORS.primary_100};\n  }\n  & > a.active {\n    z-index: ${Z_INDEXES.active};\n    color: ${COLORS.neutral_800};\n    background-color: ${COLORS.neutral_20};\n    cursor: default;\n    &:hover {\n      color: ${COLORS.primary_800};\n      background-color: ${COLORS.primary_20};\n    }\n    &:active {\n      color: ${COLORS.primary_700};\n      background-color: ${COLORS.primary_100};\n    }\n  }\n`;\n\nconst Dots = styled(Item)`\n  cursor: not-allowed;\n  &:after{\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n    content: '...';\n  }\n`;\n\nconst ItemContent = styled('div')`\n  text-align:center;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: relative;\n  width: 100%;\n  height: 100%;\n  \n  &.active:after{\n    content: '';\n    position: absolute;\n    bottom: 4px;\n    width: 32px;\n    border-radius: 4px;\n    height: 4px;\n    background-color: ${COLORS.primary_500}\n  }\n  &.active:hover:after{\n    background-color: ${COLORS.primary_700}\n  }\n  &.active:active:after{\n    background-color: ${COLORS.primary_800}\n  }\n`\n\ntype PaginatorProps = {\n  pageCount: number;\n  currentPage: number;\n  baseUrl: string;\n  onPageChange?: (page: number) => void;\n};\n\nconst Step = ({\n  up = true,\n  target = '',\n  disabled = false,\n  page,\n  onPageChange,\n  id,\n}: {\n  up: boolean;\n  target: string;\n  disabled: boolean;\n  page: number;\n  onPageChange?: (page: number) => void;\n  id?: string;\n}) => {\n  const navigateHook = useNavigate();\n\n  const handleButtonClick = () => {\n    navigateHook(target);\n    onPageChange && onPageChange(page);\n  }\n\n  return (\n    <IconButton id={id}\n                action={event => handleButtonClick()}\n                variant={'secondary'}\n                shape={'circular'}\n                disabled={disabled}>\n      {up ? <SystemIcons.ChevronRight/> : <SystemIcons.ChevronLeft/>}\n    </IconButton>\n  )\n};\n\nconst Paginator = ({ pageCount = 1, currentPage = 1, baseUrl = '', onPageChange }: PaginatorProps) => {\n  const pages = [];\n  let from = 2;\n  let to = 4;\n  if (pageCount === 0) return null;\n\n  if (pageCount > 1) {\n    if (currentPage >= 4 && currentPage <= pageCount - 2) {\n      from = currentPage - 1;\n      to = currentPage + 1;\n    } else if (pageCount - 2 > 1 && currentPage > pageCount - 2) {\n      from = pageCount - 3;\n      to = pageCount - 1;\n    }\n    if (to > pageCount) {\n      to = pageCount;\n    }\n    for (let i = from; i <= to; i += 1) {\n      pages.push(i);\n    }\n  }\n\n  return (\n    <Container>\n      <Items>\n        <Step up={false}\n              target={`${baseUrl}/${currentPage - 1}`}\n              page={currentPage - 1}\n              disabled={currentPage === 1}\n              onPageChange={() => {\n                if (onPageChange) onPageChange(currentPage - 1);\n              }}\n              id=\"paginator-left\"/>\n        {pages.findIndex(item => item === 1) === -1 && (\n          <Item>\n            <NavLink\n              to={`${baseUrl}/1`}\n              onClick={() => {\n                if (onPageChange) onPageChange(1);\n              }}>\n                <ItemContent className={currentPage === 1 ? 'active' : ''}>\n                 <span>1</span>\n                </ItemContent>\n            </NavLink>\n          </Item>\n        )}\n        {currentPage >= 4 && pageCount > 5 && pageCount && pages.findIndex(item => item === 1) === -1 && (\n          <Dots/>\n        )}\n        {pages.map(page => (\n          <Item key={page}>\n            <NavLink\n              to={`${baseUrl}/${page}`}\n              onClick={() => {\n                if (onPageChange) onPageChange(page);\n              }}>\n                <ItemContent className={currentPage === page ? 'active' : ''}>\n                 <span>{page}</span>\n                </ItemContent>\n            </NavLink>\n          </Item>\n        ))}\n        {pageCount > 5 && currentPage <= pageCount - 3 && (\n          <Dots/>\n        )}\n        {pages.findIndex(item => item === pageCount) === -1 && pageCount !== 1 && (\n          <Item>\n            <NavLink\n              to={`${baseUrl}/${pageCount}`}\n              onClick={() => {\n                if (onPageChange) onPageChange(pageCount);\n              }}>\n                <ItemContent className={currentPage === pageCount ? 'active' : ''}>\n                 <span>{pageCount}</span>\n                </ItemContent>\n            </NavLink>\n          </Item>\n        )}\n        <Step up\n              target={`${baseUrl}/${currentPage + 1}`}\n              page={currentPage + 1}\n              disabled={currentPage === pageCount}\n              onPageChange={() => {\n                if (onPageChange) onPageChange(currentPage + 1);\n              }}\n              id=\"paginator-right\"/>\n      </Items>\n    </Container>\n  );\n};\n\nexport default Paginator;\n"],"mappings":"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"}

package/dist/Panel/Panel.cjs

@@ -0,0 +1,138 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Panel = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = _interopRequireDefault(require("react"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styles = require("../styles");
+var _Button = require("../Button");
+var _icons = require("../icons");
+var _LinearProgress = require("../LinearProgress");
+var _rooks = require("rooks");
+var _types = require("../types");
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["items", "order"],
+  _excluded2 = ["media", "content", "title", "order"];
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _Panel$propTypes;
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+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 Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  background: ", ";\n  min-height: 100%;\n  align-items: flex-end;\n  box-sizing: border-box;\n  overflow: hidden;\n\n  gap: 24px;\n  padding: 56px 32px 120px 32px;\n\n  p {\n    flex: 1;\n    color: ", ";\n  }\n\n  ", " {\n    gap: 32px;\n    padding: 56px 64px 120px 64px;\n  }\n\n  &.reverse {\n    align-items: flex-start;\n  }\n"])), _styles.COLORS.neutral_20, _styles.COLORS.neutral_600, _styles.BREAKPOINTS.LARGE);
+var Media = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  width: 320px;\n  height: 200px;\n\n\n  img {\n    object-fit: contain;\n  }\n\n  img.fit {\n    object-fit: contain;\n  }\n\n  img.fill {\n    object-fit: cover;\n  }\n\n  max-width: 100%;\n\n  img {\n    max-width: 100%;\n    width: 320px;\n    height: 200px;\n  }\n\n  ", " {\n    width: 488px;\n    height: 280px;\n\n    img {\n      width: 488px;\n      height: 280px;\n    }\n  }\n\n"])), _styles.BREAKPOINTS.LARGE);
+var Body = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  text-align: center;\n\n  max-width: 320px;\n\n  ", " {\n    max-width: 488px;\n  }\n\n"])), _styles.BREAKPOINTS.LARGE);
+var Footer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n\n  max-width: 320px;\n\n  ", " {\n    max-width: 488px;\n  }\n\n  .progress {\n    width: max-content;\n  }\n"])), _styles.BREAKPOINTS.LARGE);
+var Panel = function Panel(props) {
+  var _currentItem$media, _currentItem$media2;
+  var _React$useState = _react.default.useState(0),
+    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+    currentImage = _React$useState2[0],
+    setCurrentImage = _React$useState2[1];
+  var isLargeScreen = (0, _rooks.useMediaMatch)(_styles.BREAKPOINTS.LARGE.replace('@media ', ''));
+  var rest = {};
+  var order = undefined;
+  var media = undefined;
+  var title = '';
+  var content = undefined;
+  var items = [];
+  switch (props.type) {
+    case 'carousel':
+      var _props = props;
+      var _props$items = _props.items;
+      items = _props$items === void 0 ? [] : _props$items;
+      order = _props.order;
+      rest = (0, _objectWithoutProperties2.default)(_props, _excluded);
+      _props;
+      break;
+    case 'default':
+    default:
+      var _props2 = props;
+      media = _props2.media;
+      content = _props2.content;
+      var _props2$title = _props2.title;
+      title = _props2$title === void 0 ? '' : _props2$title;
+      order = _props2.order;
+      rest = (0, _objectWithoutProperties2.default)(_props2, _excluded2);
+      _props2;
+      break;
+  }
+  var moveLeft = function moveLeft() {
+    props.type === 'carousel' && setCurrentImage(currentImage === 0 ? items.length - 1 : currentImage - 1);
+  };
+  var moveRight = function moveRight() {
+    props.type === 'carousel' && setCurrentImage(currentImage + 1 > items.length - 1 ? 0 : currentImage + 1);
+  };
+  var currentItem = props.type === 'carousel' ? items[currentImage] : {
+    media: media,
+    title: title,
+    content: content
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Wrapper, _objectSpread(_objectSpread({}, rest), {}, {
+    className: "".concat(rest.className || '', " ").concat(order || '', " "),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(Media, {
+      children: [((_currentItem$media = currentItem.media) === null || _currentItem$media === void 0 ? void 0 : _currentItem$media.type) === 'image' && /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+        className: currentItem.media.fit,
+        src: currentItem.media.src,
+        alt: currentItem.media.alt
+      }), ((_currentItem$media2 = currentItem.media) === null || _currentItem$media2 === void 0 ? void 0 : _currentItem$media2.type) === 'custom' && currentItem.media.content]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Body, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h1", {
+        children: currentItem.title
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+        children: currentItem.content
+      })]
+    }), props.type === 'carousel' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(Footer, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
+        action: moveLeft,
+        variant: 'secondary',
+        shape: 'circular',
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.ChevronLeft, {})
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_LinearProgress.LinearProgress, {
+        size: isLargeScreen ? _types.Size.Medium : _types.Size.Small,
+        className: 'progress',
+        value: currentImage + 1,
+        max: props.items.length,
+        type: _LinearProgress.LinearProgressType.Dots
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
+        action: moveRight,
+        variant: 'secondary',
+        shape: 'circular',
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.ChevronRight, {})
+      })]
+    })]
+  }));
+};
+exports.Panel = Panel;
+Panel.propTypes = (_Panel$propTypes = {
+  type: _propTypes.default.oneOf(['default', 'carousel']),
+  media: _propTypes.default.oneOfType([_propTypes.default.shape({
+    type: _propTypes.default.oneOf(['image']).isRequired,
+    src: _propTypes.default.string.isRequired,
+    alt: _propTypes.default.string.isRequired,
+    fit: _propTypes.default.oneOf(['fill', 'fit'])
+  }), _propTypes.default.shape({
+    type: _propTypes.default.oneOf(['custom']).isRequired,
+    content: _propTypes.default.node.isRequired
+  })]),
+  title: _propTypes.default.string,
+  content: _propTypes.default.node
+}, (0, _defineProperty2.default)(_Panel$propTypes, "type", _propTypes.default.oneOf(['default'])), (0, _defineProperty2.default)(_Panel$propTypes, "order", _propTypes.default.oneOf(['default', 'reverse'])), (0, _defineProperty2.default)(_Panel$propTypes, "type", _propTypes.default.oneOf(['default', 'carousel'])), (0, _defineProperty2.default)(_Panel$propTypes, "type", _propTypes.default.oneOf(['carousel']).isRequired), (0, _defineProperty2.default)(_Panel$propTypes, "order", _propTypes.default.oneOf(['default', 'reverse'])), (0, _defineProperty2.default)(_Panel$propTypes, "items", _propTypes.default.arrayOf(_propTypes.default.shape({
+  media: _propTypes.default.oneOfType([_propTypes.default.shape({
+    type: _propTypes.default.oneOf(['image']).isRequired,
+    src: _propTypes.default.string.isRequired,
+    alt: _propTypes.default.string.isRequired,
+    fit: _propTypes.default.oneOf(['fill', 'fit'])
+  }), _propTypes.default.shape({
+    type: _propTypes.default.oneOf(['custom']).isRequired,
+    content: _propTypes.default.node.isRequired
+  })]),
+  title: _propTypes.default.string,
+  content: _propTypes.default.node
+}))), _Panel$propTypes);
+//# sourceMappingURL=Panel.cjs.map

package/dist/Panel/Panel.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Panel.cjs","names":["Wrapper","styled","div","COLORS","neutral_20","neutral_600","BREAKPOINTS","LARGE","Media","Body","Footer","Panel","props","React","useState","currentImage","setCurrentImage","isLargeScreen","useMediaMatch","replace","rest","order","undefined","media","title","content","items","type","moveLeft","length","moveRight","currentItem","className","fit","src","alt","Size","Medium","Small","LinearProgressType","Dots"],"sources":["../../src/Panel/Panel.tsx"],"sourcesContent":["import React from 'react';\nimport styled from \"styled-components\";\nimport {BREAKPOINTS, COLORS} from \"../styles\";\nimport {IconButton} from \"../Button\";\nimport {SystemIcons} from \"../icons\";\nimport {LinearProgress, LinearProgressType} from \"../LinearProgress\";\nimport {useMediaMatch} from \"rooks\";\nimport {Size} from \"../types\";\n\nconst Wrapper = styled.div`\n  display: flex;\n  flex-direction: column;\n  background: ${COLORS.neutral_20};\n  min-height: 100%;\n  align-items: flex-end;\n  box-sizing: border-box;\n  overflow: hidden;\n\n  gap: 24px;\n  padding: 56px 32px 120px 32px;\n\n  p {\n    flex: 1;\n    color: ${COLORS.neutral_600};\n  }\n\n  ${BREAKPOINTS.LARGE} {\n    gap: 32px;\n    padding: 56px 64px 120px 64px;\n  }\n\n  &.reverse {\n    align-items: flex-start;\n  }\n`;\n\nconst Media = styled.div`\n  display: flex;\n  width: 320px;\n  height: 200px;\n\n\n  img {\n    object-fit: contain;\n  }\n\n  img.fit {\n    object-fit: contain;\n  }\n\n  img.fill {\n    object-fit: cover;\n  }\n\n  max-width: 100%;\n\n  img {\n    max-width: 100%;\n    width: 320px;\n    height: 200px;\n  }\n\n  ${BREAKPOINTS.LARGE} {\n    width: 488px;\n    height: 280px;\n\n    img {\n      width: 488px;\n      height: 280px;\n    }\n  }\n\n`;\n\nconst Body = styled.div`\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  text-align: center;\n\n  max-width: 320px;\n\n  ${BREAKPOINTS.LARGE} {\n    max-width: 488px;\n  }\n\n`;\nconst Footer = styled.div`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n\n  max-width: 320px;\n\n  ${BREAKPOINTS.LARGE} {\n    max-width: 488px;\n  }\n\n  .progress {\n    width: max-content;\n  }\n`;\n\ninterface BasePanelProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {\n  type?: 'default' | 'carousel';\n}\n\ninterface PanelContent {\n  media?: { type: 'image', src: string; alt: string, fit?: 'fill' | 'fit' } | { type: 'custom', content: React.ReactNode };\n  title?: string;\n  content?: React.ReactNode;\n}\n\ninterface DefaultPanelProps extends BasePanelProps, PanelContent {\n  type?: 'default';\n  order?: 'default' | 'reverse';\n}\n\ninterface CarouselPanelProps extends BasePanelProps {\n  type: 'carousel';\n  order?: 'default' | 'reverse';\n  items?: PanelContent[];\n}\n\nexport type PanelProps = DefaultPanelProps | CarouselPanelProps;\n\nexport const Panel = (props: PanelProps) => {\n\n  const [currentImage, setCurrentImage] = React.useState(0);\n  const isLargeScreen = useMediaMatch(BREAKPOINTS.LARGE.replace('@media ', ''));\n\n  let rest: React.HTMLAttributes<HTMLDivElement> = {};\n  let order = undefined;\n  let media = undefined;\n  let title = '';\n  let content = undefined;\n  let items: PanelContent[] = [];\n\n\n  switch (props.type) {\n    case 'carousel':\n      ({items = [], order, ...rest} = props);\n      break;\n    case 'default':\n    default:\n      ({media, content, title = '', order, ...rest} = props)\n      break;\n  }\n\n\n  const moveLeft = () => {\n    props.type === 'carousel' && setCurrentImage(currentImage === 0 ? items.length - 1 : currentImage - 1);\n  }\n  const moveRight = () => {\n    props.type === 'carousel' && setCurrentImage(currentImage + 1 > items.length - 1 ? 0 : currentImage + 1);\n  }\n\n  const currentItem: PanelContent = props.type === 'carousel' ? items[currentImage] : {media, title, content};\n\n  return (\n    <Wrapper {...rest} className={`${rest.className || ''} ${order || ''} `}>\n      <Media>\n        {\n          currentItem.media?.type === 'image' &&\n            <img className={currentItem.media.fit} src={currentItem.media.src} alt={currentItem.media.alt}/>\n        }\n        {\n          currentItem.media?.type === 'custom' && currentItem.media.content\n        }\n      </Media>\n      <Body>\n        <h1>{currentItem.title}</h1>\n        <p>{currentItem.content}</p>\n      </Body>\n      {\n        props.type === 'carousel' &&\n          <Footer>\n              <IconButton action={moveLeft} variant={'secondary'} shape={'circular'}>\n                  <SystemIcons.ChevronLeft/>\n              </IconButton>\n              <LinearProgress size={isLargeScreen ? Size.Medium : Size.Small}\n                              className={'progress'}\n                              value={currentImage + 1}\n                              max={props.items!.length }\n                              type={LinearProgressType.Dots}/>\n              <IconButton action={moveRight} variant={'secondary'} shape={'circular'}>\n                  <SystemIcons.ChevronRight/>\n              </IconButton>\n          </Footer>\n      }\n    </Wrapper>\n  )\n};\n"],"mappings":"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"}

package/dist/Panel/Panel.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+interface BasePanelProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
+    type?: 'default' | 'carousel';
+}
+interface PanelContent {
+    media?: {
+        type: 'image';
+        src: string;
+        alt: string;
+        fit?: 'fill' | 'fit';
+    } | {
+        type: 'custom';
+        content: React.ReactNode;
+    };
+    title?: string;
+    content?: React.ReactNode;
+}
+interface DefaultPanelProps extends BasePanelProps, PanelContent {
+    type?: 'default';
+    order?: 'default' | 'reverse';
+}
+interface CarouselPanelProps extends BasePanelProps {
+    type: 'carousel';
+    order?: 'default' | 'reverse';
+    items?: PanelContent[];
+}
+export type PanelProps = DefaultPanelProps | CarouselPanelProps;
+export declare const Panel: (props: PanelProps) => JSX.Element;
+export {};

package/dist/Panel/Panel.js

@@ -0,0 +1,131 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+import _pt from "prop-types";
+var _excluded = ["items", "order"],
+  _excluded2 = ["media", "content", "title", "order"];
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _Panel$propTypes;
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+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) { _defineProperty(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; }
+import React from 'react';
+import styled from "styled-components";
+import { BREAKPOINTS, COLORS } from "../styles";
+import { IconButton } from "../Button";
+import { SystemIcons } from "../icons";
+import { LinearProgress, LinearProgressType } from "../LinearProgress";
+import { useMediaMatch } from "rooks";
+import { Size } from "../types";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  background: ", ";\n  min-height: 100%;\n  align-items: flex-end;\n  box-sizing: border-box;\n  overflow: hidden;\n\n  gap: 24px;\n  padding: 56px 32px 120px 32px;\n\n  p {\n    flex: 1;\n    color: ", ";\n  }\n\n  ", " {\n    gap: 32px;\n    padding: 56px 64px 120px 64px;\n  }\n\n  &.reverse {\n    align-items: flex-start;\n  }\n"])), COLORS.neutral_20, COLORS.neutral_600, BREAKPOINTS.LARGE);
+var Media = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  width: 320px;\n  height: 200px;\n\n\n  img {\n    object-fit: contain;\n  }\n\n  img.fit {\n    object-fit: contain;\n  }\n\n  img.fill {\n    object-fit: cover;\n  }\n\n  max-width: 100%;\n\n  img {\n    max-width: 100%;\n    width: 320px;\n    height: 200px;\n  }\n\n  ", " {\n    width: 488px;\n    height: 280px;\n\n    img {\n      width: 488px;\n      height: 280px;\n    }\n  }\n\n"])), BREAKPOINTS.LARGE);
+var Body = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  text-align: center;\n\n  max-width: 320px;\n\n  ", " {\n    max-width: 488px;\n  }\n\n"])), BREAKPOINTS.LARGE);
+var Footer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n\n  max-width: 320px;\n\n  ", " {\n    max-width: 488px;\n  }\n\n  .progress {\n    width: max-content;\n  }\n"])), BREAKPOINTS.LARGE);
+export var Panel = function Panel(props) {
+  var _currentItem$media, _currentItem$media2;
+  var _React$useState = React.useState(0),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    currentImage = _React$useState2[0],
+    setCurrentImage = _React$useState2[1];
+  var isLargeScreen = useMediaMatch(BREAKPOINTS.LARGE.replace('@media ', ''));
+  var rest = {};
+  var order = undefined;
+  var media = undefined;
+  var title = '';
+  var content = undefined;
+  var items = [];
+  switch (props.type) {
+    case 'carousel':
+      var _props = props;
+      var _props$items = _props.items;
+      items = _props$items === void 0 ? [] : _props$items;
+      order = _props.order;
+      rest = _objectWithoutProperties(_props, _excluded);
+      _props;
+      break;
+    case 'default':
+    default:
+      var _props2 = props;
+      media = _props2.media;
+      content = _props2.content;
+      var _props2$title = _props2.title;
+      title = _props2$title === void 0 ? '' : _props2$title;
+      order = _props2.order;
+      rest = _objectWithoutProperties(_props2, _excluded2);
+      _props2;
+      break;
+  }
+  var moveLeft = function moveLeft() {
+    props.type === 'carousel' && setCurrentImage(currentImage === 0 ? items.length - 1 : currentImage - 1);
+  };
+  var moveRight = function moveRight() {
+    props.type === 'carousel' && setCurrentImage(currentImage + 1 > items.length - 1 ? 0 : currentImage + 1);
+  };
+  var currentItem = props.type === 'carousel' ? items[currentImage] : {
+    media: media,
+    title: title,
+    content: content
+  };
+  return /*#__PURE__*/_jsxs(Wrapper, _objectSpread(_objectSpread({}, rest), {}, {
+    className: "".concat(rest.className || '', " ").concat(order || '', " "),
+    children: [/*#__PURE__*/_jsxs(Media, {
+      children: [((_currentItem$media = currentItem.media) === null || _currentItem$media === void 0 ? void 0 : _currentItem$media.type) === 'image' && /*#__PURE__*/_jsx("img", {
+        className: currentItem.media.fit,
+        src: currentItem.media.src,
+        alt: currentItem.media.alt
+      }), ((_currentItem$media2 = currentItem.media) === null || _currentItem$media2 === void 0 ? void 0 : _currentItem$media2.type) === 'custom' && currentItem.media.content]
+    }), /*#__PURE__*/_jsxs(Body, {
+      children: [/*#__PURE__*/_jsx("h1", {
+        children: currentItem.title
+      }), /*#__PURE__*/_jsx("p", {
+        children: currentItem.content
+      })]
+    }), props.type === 'carousel' && /*#__PURE__*/_jsxs(Footer, {
+      children: [/*#__PURE__*/_jsx(IconButton, {
+        action: moveLeft,
+        variant: 'secondary',
+        shape: 'circular',
+        children: /*#__PURE__*/_jsx(SystemIcons.ChevronLeft, {})
+      }), /*#__PURE__*/_jsx(LinearProgress, {
+        size: isLargeScreen ? Size.Medium : Size.Small,
+        className: 'progress',
+        value: currentImage + 1,
+        max: props.items.length,
+        type: LinearProgressType.Dots
+      }), /*#__PURE__*/_jsx(IconButton, {
+        action: moveRight,
+        variant: 'secondary',
+        shape: 'circular',
+        children: /*#__PURE__*/_jsx(SystemIcons.ChevronRight, {})
+      })]
+    })]
+  }));
+};
+Panel.propTypes = (_Panel$propTypes = {
+  type: _pt.oneOf(['default', 'carousel']),
+  media: _pt.oneOfType([_pt.shape({
+    type: _pt.oneOf(['image']).isRequired,
+    src: _pt.string.isRequired,
+    alt: _pt.string.isRequired,
+    fit: _pt.oneOf(['fill', 'fit'])
+  }), _pt.shape({
+    type: _pt.oneOf(['custom']).isRequired,
+    content: _pt.node.isRequired
+  })]),
+  title: _pt.string,
+  content: _pt.node
+}, _defineProperty(_Panel$propTypes, "type", _pt.oneOf(['default'])), _defineProperty(_Panel$propTypes, "order", _pt.oneOf(['default', 'reverse'])), _defineProperty(_Panel$propTypes, "type", _pt.oneOf(['default', 'carousel'])), _defineProperty(_Panel$propTypes, "type", _pt.oneOf(['carousel']).isRequired), _defineProperty(_Panel$propTypes, "order", _pt.oneOf(['default', 'reverse'])), _defineProperty(_Panel$propTypes, "items", _pt.arrayOf(_pt.shape({
+  media: _pt.oneOfType([_pt.shape({
+    type: _pt.oneOf(['image']).isRequired,
+    src: _pt.string.isRequired,
+    alt: _pt.string.isRequired,
+    fit: _pt.oneOf(['fill', 'fit'])
+  }), _pt.shape({
+    type: _pt.oneOf(['custom']).isRequired,
+    content: _pt.node.isRequired
+  })]),
+  title: _pt.string,
+  content: _pt.node
+}))), _Panel$propTypes);
+//# sourceMappingURL=Panel.js.map

package/dist/Panel/Panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Panel.js","names":["React","styled","BREAKPOINTS","COLORS","IconButton","SystemIcons","LinearProgress","LinearProgressType","useMediaMatch","Size","Wrapper","div","neutral_20","neutral_600","LARGE","Media","Body","Footer","Panel","props","useState","currentImage","setCurrentImage","isLargeScreen","replace","rest","order","undefined","media","title","content","items","type","moveLeft","length","moveRight","currentItem","className","fit","src","alt","Medium","Small","Dots"],"sources":["../../src/Panel/Panel.tsx"],"sourcesContent":["import React from 'react';\nimport styled from \"styled-components\";\nimport {BREAKPOINTS, COLORS} from \"../styles\";\nimport {IconButton} from \"../Button\";\nimport {SystemIcons} from \"../icons\";\nimport {LinearProgress, LinearProgressType} from \"../LinearProgress\";\nimport {useMediaMatch} from \"rooks\";\nimport {Size} from \"../types\";\n\nconst Wrapper = styled.div`\n  display: flex;\n  flex-direction: column;\n  background: ${COLORS.neutral_20};\n  min-height: 100%;\n  align-items: flex-end;\n  box-sizing: border-box;\n  overflow: hidden;\n\n  gap: 24px;\n  padding: 56px 32px 120px 32px;\n\n  p {\n    flex: 1;\n    color: ${COLORS.neutral_600};\n  }\n\n  ${BREAKPOINTS.LARGE} {\n    gap: 32px;\n    padding: 56px 64px 120px 64px;\n  }\n\n  &.reverse {\n    align-items: flex-start;\n  }\n`;\n\nconst Media = styled.div`\n  display: flex;\n  width: 320px;\n  height: 200px;\n\n\n  img {\n    object-fit: contain;\n  }\n\n  img.fit {\n    object-fit: contain;\n  }\n\n  img.fill {\n    object-fit: cover;\n  }\n\n  max-width: 100%;\n\n  img {\n    max-width: 100%;\n    width: 320px;\n    height: 200px;\n  }\n\n  ${BREAKPOINTS.LARGE} {\n    width: 488px;\n    height: 280px;\n\n    img {\n      width: 488px;\n      height: 280px;\n    }\n  }\n\n`;\n\nconst Body = styled.div`\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  text-align: center;\n\n  max-width: 320px;\n\n  ${BREAKPOINTS.LARGE} {\n    max-width: 488px;\n  }\n\n`;\nconst Footer = styled.div`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n\n  max-width: 320px;\n\n  ${BREAKPOINTS.LARGE} {\n    max-width: 488px;\n  }\n\n  .progress {\n    width: max-content;\n  }\n`;\n\ninterface BasePanelProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {\n  type?: 'default' | 'carousel';\n}\n\ninterface PanelContent {\n  media?: { type: 'image', src: string; alt: string, fit?: 'fill' | 'fit' } | { type: 'custom', content: React.ReactNode };\n  title?: string;\n  content?: React.ReactNode;\n}\n\ninterface DefaultPanelProps extends BasePanelProps, PanelContent {\n  type?: 'default';\n  order?: 'default' | 'reverse';\n}\n\ninterface CarouselPanelProps extends BasePanelProps {\n  type: 'carousel';\n  order?: 'default' | 'reverse';\n  items?: PanelContent[];\n}\n\nexport type PanelProps = DefaultPanelProps | CarouselPanelProps;\n\nexport const Panel = (props: PanelProps) => {\n\n  const [currentImage, setCurrentImage] = React.useState(0);\n  const isLargeScreen = useMediaMatch(BREAKPOINTS.LARGE.replace('@media ', ''));\n\n  let rest: React.HTMLAttributes<HTMLDivElement> = {};\n  let order = undefined;\n  let media = undefined;\n  let title = '';\n  let content = undefined;\n  let items: PanelContent[] = [];\n\n\n  switch (props.type) {\n    case 'carousel':\n      ({items = [], order, ...rest} = props);\n      break;\n    case 'default':\n    default:\n      ({media, content, title = '', order, ...rest} = props)\n      break;\n  }\n\n\n  const moveLeft = () => {\n    props.type === 'carousel' && setCurrentImage(currentImage === 0 ? items.length - 1 : currentImage - 1);\n  }\n  const moveRight = () => {\n    props.type === 'carousel' && setCurrentImage(currentImage + 1 > items.length - 1 ? 0 : currentImage + 1);\n  }\n\n  const currentItem: PanelContent = props.type === 'carousel' ? items[currentImage] : {media, title, content};\n\n  return (\n    <Wrapper {...rest} className={`${rest.className || ''} ${order || ''} `}>\n      <Media>\n        {\n          currentItem.media?.type === 'image' &&\n            <img className={currentItem.media.fit} src={currentItem.media.src} alt={currentItem.media.alt}/>\n        }\n        {\n          currentItem.media?.type === 'custom' && currentItem.media.content\n        }\n      </Media>\n      <Body>\n        <h1>{currentItem.title}</h1>\n        <p>{currentItem.content}</p>\n      </Body>\n      {\n        props.type === 'carousel' &&\n          <Footer>\n              <IconButton action={moveLeft} variant={'secondary'} shape={'circular'}>\n                  <SystemIcons.ChevronLeft/>\n              </IconButton>\n              <LinearProgress size={isLargeScreen ? Size.Medium : Size.Small}\n                              className={'progress'}\n                              value={currentImage + 1}\n                              max={props.items!.length }\n                              type={LinearProgressType.Dots}/>\n              <IconButton action={moveRight} variant={'secondary'} shape={'circular'}>\n                  <SystemIcons.ChevronRight/>\n              </IconButton>\n          </Footer>\n      }\n    </Wrapper>\n  )\n};\n"],"mappings":";;;;;;;;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAAQC,WAAW,EAAEC,MAAM,QAAO,WAAW;AAC7C,SAAQC,UAAU,QAAO,WAAW;AACpC,SAAQC,WAAW,QAAO,UAAU;AACpC,SAAQC,cAAc,EAAEC,kBAAkB,QAAO,mBAAmB;AACpE,SAAQC,aAAa,QAAO,OAAO;AACnC,SAAQC,IAAI,QAAO,UAAU;AAAC;AAAA;AAE9B,IAAMC,OAAO,GAAGT,MAAM,CAACU,GAAG,kcAGVR,MAAM,CAACS,UAAU,EAWpBT,MAAM,CAACU,WAAW,EAG3BX,WAAW,CAACY,KAAK,CAQpB;AAED,IAAMC,KAAK,GAAGd,MAAM,CAACU,GAAG,keA0BpBT,WAAW,CAACY,KAAK,CAUpB;AAED,IAAME,IAAI,GAAGf,MAAM,CAACU,GAAG,mPASnBT,WAAW,CAACY,KAAK,CAIpB;AACD,IAAMG,MAAM,GAAGhB,MAAM,CAACU,GAAG,8QAQrBT,WAAW,CAACY,KAAK,CAOpB;AAyBD,OAAO,IAAMI,KAAK,GAAG,SAARA,KAAK,CAAIC,KAAiB,EAAK;EAAA;EAE1C,sBAAwCnB,KAAK,CAACoB,QAAQ,CAAC,CAAC,CAAC;IAAA;IAAlDC,YAAY;IAAEC,eAAe;EACpC,IAAMC,aAAa,GAAGf,aAAa,CAACN,WAAW,CAACY,KAAK,CAACU,OAAO,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC;EAE7E,IAAIC,IAA0C,GAAG,CAAC,CAAC;EACnD,IAAIC,KAAK,GAAGC,SAAS;EACrB,IAAIC,KAAK,GAAGD,SAAS;EACrB,IAAIE,KAAK,GAAG,EAAE;EACd,IAAIC,OAAO,GAAGH,SAAS;EACvB,IAAII,KAAqB,GAAG,EAAE;EAG9B,QAAQZ,KAAK,CAACa,IAAI;IAChB,KAAK,UAAU;MAAA,aACmBb,KAAK;MAAA,0BAAnCY,KAAK;MAALA,KAAK,6BAAG,EAAE;MAAEL,KAAK,UAALA,KAAK;MAAKD,IAAI;MAAA;MAC5B;IACF,KAAK,SAAS;IACd;MAAA,cACkDN,KAAK;MAAnDS,KAAK,WAALA,KAAK;MAAEE,OAAO,WAAPA,OAAO;MAAA,4BAAED,KAAK;MAALA,KAAK,8BAAG,EAAE;MAAEH,KAAK,WAALA,KAAK;MAAKD,IAAI;MAAA;MAC5C;EAAM;EAIV,IAAMQ,QAAQ,GAAG,SAAXA,QAAQ,GAAS;IACrBd,KAAK,CAACa,IAAI,KAAK,UAAU,IAAIV,eAAe,CAACD,YAAY,KAAK,CAAC,GAAGU,KAAK,CAACG,MAAM,GAAG,CAAC,GAAGb,YAAY,GAAG,CAAC,CAAC;EACxG,CAAC;EACD,IAAMc,SAAS,GAAG,SAAZA,SAAS,GAAS;IACtBhB,KAAK,CAACa,IAAI,KAAK,UAAU,IAAIV,eAAe,CAACD,YAAY,GAAG,CAAC,GAAGU,KAAK,CAACG,MAAM,GAAG,CAAC,GAAG,CAAC,GAAGb,YAAY,GAAG,CAAC,CAAC;EAC1G,CAAC;EAED,IAAMe,WAAyB,GAAGjB,KAAK,CAACa,IAAI,KAAK,UAAU,GAAGD,KAAK,CAACV,YAAY,CAAC,GAAG;IAACO,KAAK,EAALA,KAAK;IAAEC,KAAK,EAALA,KAAK;IAAEC,OAAO,EAAPA;EAAO,CAAC;EAE3G,oBACE,MAAC,OAAO,kCAAKL,IAAI;IAAE,SAAS,YAAKA,IAAI,CAACY,SAAS,IAAI,EAAE,cAAIX,KAAK,IAAI,EAAE,MAAI;IAAA,wBACtE,MAAC,KAAK;MAAA,WAEF,uBAAAU,WAAW,CAACR,KAAK,uDAAjB,mBAAmBI,IAAI,MAAK,OAAO,iBACjC;QAAK,SAAS,EAAEI,WAAW,CAACR,KAAK,CAACU,GAAI;QAAC,GAAG,EAAEF,WAAW,CAACR,KAAK,CAACW,GAAI;QAAC,GAAG,EAAEH,WAAW,CAACR,KAAK,CAACY;MAAI,EAAE,EAGlG,wBAAAJ,WAAW,CAACR,KAAK,wDAAjB,oBAAmBI,IAAI,MAAK,QAAQ,IAAII,WAAW,CAACR,KAAK,CAACE,OAAO;IAAA,EAE7D,eACR,MAAC,IAAI;MAAA,wBACH;QAAA,UAAKM,WAAW,CAACP;MAAK,EAAM,eAC5B;QAAA,UAAIO,WAAW,CAACN;MAAO,EAAK;IAAA,EACvB,EAELX,KAAK,CAACa,IAAI,KAAK,UAAU,iBACvB,MAAC,MAAM;MAAA,wBACH,KAAC,UAAU;QAAC,MAAM,EAAEC,QAAS;QAAC,OAAO,EAAE,WAAY;QAAC,KAAK,EAAE,UAAW;QAAA,uBAClE,KAAC,WAAW,CAAC,WAAW;MAAE,EACjB,eACb,KAAC,cAAc;QAAC,IAAI,EAAEV,aAAa,GAAGd,IAAI,CAACgC,MAAM,GAAGhC,IAAI,CAACiC,KAAM;QAC/C,SAAS,EAAE,UAAW;QACtB,KAAK,EAAErB,YAAY,GAAG,CAAE;QACxB,GAAG,EAAEF,KAAK,CAACY,KAAK,CAAEG,MAAQ;QAC1B,IAAI,EAAE3B,kBAAkB,CAACoC;MAAK,EAAE,eAChD,KAAC,UAAU;QAAC,MAAM,EAAER,SAAU;QAAC,OAAO,EAAE,WAAY;QAAC,KAAK,EAAE,UAAW;QAAA,uBACnE,KAAC,WAAW,CAAC,YAAY;MAAE,EAClB;IAAA,EACR;EAAA,GAEL;AAEd,CAAC;AAAC;EAxFAH,IAAI,aAAG,SAAS,EAAG,UAAU;EAI7BJ,KAAK;IAAKI,IAAI,aAAE,OAAO;IAAEO,GAAG;IAAUC,GAAG;IAAUF,GAAG,aAAG,MAAM,EAAG,KAAK;EAAA;IAAON,IAAI,aAAE,QAAQ;IAAEF,OAAO;EAAA;EACrGD,KAAK;EACLC,OAAO;AAAA,wDAIA,SAAS,2DACR,SAAS,EAAG,SAAS,0DAXtB,SAAS,EAAG,UAAU,0DAevB,UAAU,sEACR,SAAS,EAAG,SAAS;EAZ7BF,KAAK;IAAKI,IAAI,aAAE,OAAO;IAAEO,GAAG;IAAUC,GAAG;IAAUF,GAAG,aAAG,MAAM,EAAG,KAAK;EAAA;IAAON,IAAI,aAAE,QAAQ;IAAEF,OAAO;EAAA;EACrGD,KAAK;EACLC,OAAO;AAAA"}

package/dist/Panel/index.cjs

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _Panel = require("./Panel");
+Object.keys(_Panel).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Panel[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Panel[key];
+    }
+  });
+});
+//# sourceMappingURL=index.cjs.map

package/dist/Panel/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":[],"sources":["../../src/Panel/index.ts"],"sourcesContent":["export * from './Panel';\n"],"mappings":";;;;;AAAA;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}

package/dist/Panel/index.d.ts

@@ -0,0 +1 @@
+export * from './Panel';

package/dist/Panel/index.js

@@ -0,0 +1,2 @@
+export * from './Panel';
+//# sourceMappingURL=index.js.map

package/dist/Panel/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../src/Panel/index.ts"],"sourcesContent":["export * from './Panel';\n"],"mappings":"AAAA,cAAc,SAAS"}

package/dist/Table/Table.cjs

@@ -23,7 +23,7 @@ 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; }
 function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
 var Table = function Table(props) {
   var onPreviousPageClick = props.onPreviousPageClick,
     onNextPageClick = props.onNextPageClick,

package/dist/Table/Table.js

@@ -5,7 +5,7 @@ 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) { _defineProperty(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; }
 function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
 /**
  * Import React libraries.
  */

package/dist/Table/TableFooter.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TableFooter.cjs","names":["TableFooter","props","rowsPerPageValues","value","dropDownText","rowsPerPageLabel","rowsPerPage","accordion","setIsCollapsed","isCollapsed","defaultOnMouseDownHandler","rows","length","showMoreLabel","showFewerLabel","showLoadingIndicator","onRowsPerPageChange","total","from","to","prevPage","COLORS","neutral_600","nextPage"],"sources":["../../src/Table/TableFooter.tsx"],"sourcesContent":["import React from 'react';\nimport {TableProps} from './TableTypes';\nimport {DropdownButton, DropdownItem} from '../Dropdown';\nimport {IconButton} from '../Button';\nimport { SystemIcons} from '../icons';\nimport {COLORS} from '../styles';\nimport {\n  StyledTableFooter, StyledTableFooterCollapseButton,\n  StyledTableFooterContent,\n  StyledTableFooterControls,\n  StyledTableFooterCurrentInfo\n} from './TableStyles';\nimport {defaultOnMouseDownHandler} from '../common';\n\n\ninterface TableFooterProps extends TableProps {\n  onRowsPerPageChange: (value: number) => void;\n  rowsPerPage: number;\n  from?: number;\n  to?: number;\n  total?: number;\n  nextPage: () => void;\n  prevPage: () => void;\n  setIsCollapsed: (isCollapsed: boolean) => void;\n  isCollapsed: boolean;\n}\n\nconst TableFooter: React.FunctionComponent<TableFooterProps> = (props) => {\n  const rowsPerPageValues: DropdownItem[] = [{value: '10'}, {value: '20'}, {value: '50'}, {value: '100'}];\n\n  const dropDownText = `${props.rowsPerPageLabel ?? 'Rows per page'} : ${props.rowsPerPage}`;\n\n  return (\n    <StyledTableFooter data-testid=\"TestTableFooterRow\">\n          {\n            props.accordion &&\n            <StyledTableFooterCollapseButton onClick={() => props.setIsCollapsed(!props.isCollapsed)}\n                                             onMouseDown={defaultOnMouseDownHandler}\n                                             disabled={props.isCollapsed && props.rows.length <= props.rowsPerPage}>\n              {\n                props.isCollapsed &&\n                <>\n                  <span>{props.showMoreLabel ?? 'Show more'} ({props.rows.length - props.rowsPerPage})</span>\n                  <SystemIcons.ArrowDropDown/>\n                </>\n              }\n              {\n                !props.isCollapsed &&\n                <>\n                  <span>{props.showFewerLabel ?? 'Show fewer'}</span>\n                  <SystemIcons.ArrowDropUp/>\n                </>\n              }\n            </StyledTableFooterCollapseButton>\n          }\n          {\n            !props.accordion &&\n            <StyledTableFooterContent>\n              <DropdownButton\n                type={'text'}\n                items={rowsPerPageValues}\n                disabled={props.showLoadingIndicator}\n                value={[`${props.rowsPerPage}`]}\n                onClick={(value) => props.onRowsPerPageChange(+value[0])}\n                label={dropDownText}\n                keepLabel={true}\n              />\n              <StyledTableFooterCurrentInfo>\n                {props.total === 0 ? 0 : props.from}-{props.to} of {props.total}\n              </StyledTableFooterCurrentInfo>\n              <StyledTableFooterControls>\n                <IconButton variant=\"secondary\" shape=\"circular\" action={() => props.prevPage()}\n                            disabled={props.from === 1 || props.showLoadingIndicator}>\n                  <SystemIcons.ChevronLeft size=\"24\" color={COLORS.neutral_600}/>\n                </IconButton>\n                <IconButton variant=\"secondary\" shape=\"circular\" action={() => props.nextPage()}\n                            disabled={props.to === props.total || props.showLoadingIndicator}>\n                  <SystemIcons.ChevronRight size=\"24\" color={COLORS.neutral_600}/>\n                </IconButton>\n              </StyledTableFooterControls>\n            </StyledTableFooterContent>\n          }\n    </StyledTableFooter>\n  );\n};\n\n\nexport default TableFooter;\n"],"mappings":"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"}
+{"version":3,"file":"TableFooter.cjs","names":["TableFooter","props","rowsPerPageValues","value","dropDownText","rowsPerPageLabel","rowsPerPage","accordion","setIsCollapsed","isCollapsed","defaultOnMouseDownHandler","rows","length","showMoreLabel","showFewerLabel","showLoadingIndicator","onRowsPerPageChange","total","from","to","prevPage","COLORS","neutral_600","nextPage"],"sources":["../../src/Table/TableFooter.tsx"],"sourcesContent":["import React from 'react';\nimport {TableProps} from './TableTypes';\nimport {DropdownButton, DropdownItem} from '../Dropdown';\nimport {IconButton} from '../Button';\nimport { SystemIcons} from '../icons';\nimport {COLORS} from '../styles';\nimport {\n  StyledTableFooter, StyledTableFooterCollapseButton,\n  StyledTableFooterContent,\n  StyledTableFooterControls,\n  StyledTableFooterCurrentInfo\n} from './TableStyles';\nimport {defaultOnMouseDownHandler} from '../common';\n\n\ninterface TableFooterProps extends TableProps {\n  onRowsPerPageChange: (value: number) => void;\n  rowsPerPage: number;\n  from?: number;\n  to?: number;\n  total?: number;\n  nextPage: () => void;\n  prevPage: () => void;\n  setIsCollapsed: (isCollapsed: boolean) => void;\n  isCollapsed: boolean;\n}\n\nconst TableFooter: React.FunctionComponent<TableFooterProps> = (props) => {\n  const rowsPerPageValues: DropdownItem[] = [{value: '10'}, {value: '20'}, {value: '50'}, {value: '100'}];\n\n  const dropDownText = `${props.rowsPerPageLabel ?? 'Rows per page'} : ${props.rowsPerPage}`;\n\n  return (\n    <StyledTableFooter data-testid=\"TestTableFooterRow\">\n          {\n            props.accordion &&\n            <StyledTableFooterCollapseButton onClick={() => props.setIsCollapsed(!props.isCollapsed)}\n                                             onMouseDown={defaultOnMouseDownHandler}\n                                             disabled={props.isCollapsed && props.rows.length <= props.rowsPerPage}>\n              {\n                props.isCollapsed &&\n                <>\n                  <span>{props.showMoreLabel ?? 'Show more'} ({props.rows.length - props.rowsPerPage})</span>\n                  <SystemIcons.ArrowDropDown/>\n                </>\n              }\n              {\n                !props.isCollapsed &&\n                <>\n                  <span>{props.showFewerLabel ?? 'Show fewer'}</span>\n                  <SystemIcons.ArrowDropUp/>\n                </>\n              }\n            </StyledTableFooterCollapseButton>\n          }\n          {\n            !props.accordion &&\n            <StyledTableFooterContent>\n              <DropdownButton\n                type={'text'}\n                items={rowsPerPageValues}\n                disabled={props.showLoadingIndicator}\n                value={[`${props.rowsPerPage}`]}\n                onClick={(value) => props.onRowsPerPageChange(+value[0])}\n                label={dropDownText}\n                keepLabel={true}\n              />\n              <StyledTableFooterCurrentInfo>\n                {props.total === 0 ? 0 : props.from}-{props.to} of {props.total}\n              </StyledTableFooterCurrentInfo>\n              <StyledTableFooterControls>\n                <IconButton variant=\"secondary\" shape=\"circular\" action={() => props.prevPage()}\n                            disabled={props.from === 1 || props.showLoadingIndicator}>\n                  <SystemIcons.ChevronLeft size=\"24\" color={COLORS.neutral_600}/>\n                </IconButton>\n                <IconButton variant=\"secondary\" shape=\"circular\" action={() => props.nextPage()}\n                            disabled={props.to === props.total || props.showLoadingIndicator}>\n                  <SystemIcons.ChevronRight size=\"24\" color={COLORS.neutral_600}/>\n                </IconButton>\n              </StyledTableFooterControls>\n            </StyledTableFooterContent>\n          }\n    </StyledTableFooter>\n  );\n};\n\n\nexport default TableFooter;\n"],"mappings":"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"}

package/dist/Table/TableFooter.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableFooter.js","names":["React","DropdownButton","IconButton","SystemIcons","COLORS","StyledTableFooter","StyledTableFooterCollapseButton","StyledTableFooterContent","StyledTableFooterControls","StyledTableFooterCurrentInfo","defaultOnMouseDownHandler","TableFooter","props","rowsPerPageValues","value","dropDownText","rowsPerPageLabel","rowsPerPage","accordion","setIsCollapsed","isCollapsed","rows","length","showMoreLabel","showFewerLabel","showLoadingIndicator","onRowsPerPageChange","total","from","to","prevPage","neutral_600","nextPage"],"sources":["../../src/Table/TableFooter.tsx"],"sourcesContent":["import React from 'react';\nimport {TableProps} from './TableTypes';\nimport {DropdownButton, DropdownItem} from '../Dropdown';\nimport {IconButton} from '../Button';\nimport { SystemIcons} from '../icons';\nimport {COLORS} from '../styles';\nimport {\n  StyledTableFooter, StyledTableFooterCollapseButton,\n  StyledTableFooterContent,\n  StyledTableFooterControls,\n  StyledTableFooterCurrentInfo\n} from './TableStyles';\nimport {defaultOnMouseDownHandler} from '../common';\n\n\ninterface TableFooterProps extends TableProps {\n  onRowsPerPageChange: (value: number) => void;\n  rowsPerPage: number;\n  from?: number;\n  to?: number;\n  total?: number;\n  nextPage: () => void;\n  prevPage: () => void;\n  setIsCollapsed: (isCollapsed: boolean) => void;\n  isCollapsed: boolean;\n}\n\nconst TableFooter: React.FunctionComponent<TableFooterProps> = (props) => {\n  const rowsPerPageValues: DropdownItem[] = [{value: '10'}, {value: '20'}, {value: '50'}, {value: '100'}];\n\n  const dropDownText = `${props.rowsPerPageLabel ?? 'Rows per page'} : ${props.rowsPerPage}`;\n\n  return (\n    <StyledTableFooter data-testid=\"TestTableFooterRow\">\n          {\n            props.accordion &&\n            <StyledTableFooterCollapseButton onClick={() => props.setIsCollapsed(!props.isCollapsed)}\n                                             onMouseDown={defaultOnMouseDownHandler}\n                                             disabled={props.isCollapsed && props.rows.length <= props.rowsPerPage}>\n              {\n                props.isCollapsed &&\n                <>\n                  <span>{props.showMoreLabel ?? 'Show more'} ({props.rows.length - props.rowsPerPage})</span>\n                  <SystemIcons.ArrowDropDown/>\n                </>\n              }\n              {\n                !props.isCollapsed &&\n                <>\n                  <span>{props.showFewerLabel ?? 'Show fewer'}</span>\n                  <SystemIcons.ArrowDropUp/>\n                </>\n              }\n            </StyledTableFooterCollapseButton>\n          }\n          {\n            !props.accordion &&\n            <StyledTableFooterContent>\n              <DropdownButton\n                type={'text'}\n                items={rowsPerPageValues}\n                disabled={props.showLoadingIndicator}\n                value={[`${props.rowsPerPage}`]}\n                onClick={(value) => props.onRowsPerPageChange(+value[0])}\n                label={dropDownText}\n                keepLabel={true}\n              />\n              <StyledTableFooterCurrentInfo>\n                {props.total === 0 ? 0 : props.from}-{props.to} of {props.total}\n              </StyledTableFooterCurrentInfo>\n              <StyledTableFooterControls>\n                <IconButton variant=\"secondary\" shape=\"circular\" action={() => props.prevPage()}\n                            disabled={props.from === 1 || props.showLoadingIndicator}>\n                  <SystemIcons.ChevronLeft size=\"24\" color={COLORS.neutral_600}/>\n                </IconButton>\n                <IconButton variant=\"secondary\" shape=\"circular\" action={() => props.nextPage()}\n                            disabled={props.to === props.total || props.showLoadingIndicator}>\n                  <SystemIcons.ChevronRight size=\"24\" color={COLORS.neutral_600}/>\n                </IconButton>\n              </StyledTableFooterControls>\n            </StyledTableFooterContent>\n          }\n    </StyledTableFooter>\n  );\n};\n\n\nexport default TableFooter;\n"],"mappings":"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"}
+{"version":3,"file":"TableFooter.js","names":["React","DropdownButton","IconButton","SystemIcons","COLORS","StyledTableFooter","StyledTableFooterCollapseButton","StyledTableFooterContent","StyledTableFooterControls","StyledTableFooterCurrentInfo","defaultOnMouseDownHandler","TableFooter","props","rowsPerPageValues","value","dropDownText","rowsPerPageLabel","rowsPerPage","accordion","setIsCollapsed","isCollapsed","rows","length","showMoreLabel","showFewerLabel","showLoadingIndicator","onRowsPerPageChange","total","from","to","prevPage","neutral_600","nextPage"],"sources":["../../src/Table/TableFooter.tsx"],"sourcesContent":["import React from 'react';\nimport {TableProps} from './TableTypes';\nimport {DropdownButton, DropdownItem} from '../Dropdown';\nimport {IconButton} from '../Button';\nimport { SystemIcons} from '../icons';\nimport {COLORS} from '../styles';\nimport {\n  StyledTableFooter, StyledTableFooterCollapseButton,\n  StyledTableFooterContent,\n  StyledTableFooterControls,\n  StyledTableFooterCurrentInfo\n} from './TableStyles';\nimport {defaultOnMouseDownHandler} from '../common';\n\n\ninterface TableFooterProps extends TableProps {\n  onRowsPerPageChange: (value: number) => void;\n  rowsPerPage: number;\n  from?: number;\n  to?: number;\n  total?: number;\n  nextPage: () => void;\n  prevPage: () => void;\n  setIsCollapsed: (isCollapsed: boolean) => void;\n  isCollapsed: boolean;\n}\n\nconst TableFooter: React.FunctionComponent<TableFooterProps> = (props) => {\n  const rowsPerPageValues: DropdownItem[] = [{value: '10'}, {value: '20'}, {value: '50'}, {value: '100'}];\n\n  const dropDownText = `${props.rowsPerPageLabel ?? 'Rows per page'} : ${props.rowsPerPage}`;\n\n  return (\n    <StyledTableFooter data-testid=\"TestTableFooterRow\">\n          {\n            props.accordion &&\n            <StyledTableFooterCollapseButton onClick={() => props.setIsCollapsed(!props.isCollapsed)}\n                                             onMouseDown={defaultOnMouseDownHandler}\n                                             disabled={props.isCollapsed && props.rows.length <= props.rowsPerPage}>\n              {\n                props.isCollapsed &&\n                <>\n                  <span>{props.showMoreLabel ?? 'Show more'} ({props.rows.length - props.rowsPerPage})</span>\n                  <SystemIcons.ArrowDropDown/>\n                </>\n              }\n              {\n                !props.isCollapsed &&\n                <>\n                  <span>{props.showFewerLabel ?? 'Show fewer'}</span>\n                  <SystemIcons.ArrowDropUp/>\n                </>\n              }\n            </StyledTableFooterCollapseButton>\n          }\n          {\n            !props.accordion &&\n            <StyledTableFooterContent>\n              <DropdownButton\n                type={'text'}\n                items={rowsPerPageValues}\n                disabled={props.showLoadingIndicator}\n                value={[`${props.rowsPerPage}`]}\n                onClick={(value) => props.onRowsPerPageChange(+value[0])}\n                label={dropDownText}\n                keepLabel={true}\n              />\n              <StyledTableFooterCurrentInfo>\n                {props.total === 0 ? 0 : props.from}-{props.to} of {props.total}\n              </StyledTableFooterCurrentInfo>\n              <StyledTableFooterControls>\n                <IconButton variant=\"secondary\" shape=\"circular\" action={() => props.prevPage()}\n                            disabled={props.from === 1 || props.showLoadingIndicator}>\n                  <SystemIcons.ChevronLeft size=\"24\" color={COLORS.neutral_600}/>\n                </IconButton>\n                <IconButton variant=\"secondary\" shape=\"circular\" action={() => props.nextPage()}\n                            disabled={props.to === props.total || props.showLoadingIndicator}>\n                  <SystemIcons.ChevronRight size=\"24\" color={COLORS.neutral_600}/>\n                </IconButton>\n              </StyledTableFooterControls>\n            </StyledTableFooterContent>\n          }\n    </StyledTableFooter>\n  );\n};\n\n\nexport default TableFooter;\n"],"mappings":"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"}