@atom-learning/components 6.0.0-beta.1 → 6.0.0-beta.10

package/dist/components/pagination/PaginationPreviousButton.js

@@ -1,2 +1,2 @@
-import{ChevronLeft as a}from"@atom-learning/icons";import*as e from"react";import{styled as n}from"../../stitches.js";import{ActionIcon as l}from"../action-icon/ActionIcon.js";import{Icon as m}from"../icon/Icon.js";import{usePagination as s}from"./usePagination.js";const p=n(l,{mr:"$1","&:disabled":{opacity:"0.3"}}),c=t=>{const{goToPreviousPage:i,labels:o,previousAvailablePage:r}=s();return e.createElement(p,{hasTooltip:!1,size:"md",theme:"neutral",onClick:i,disabled:!r,...t,label:(o==null?void 0:o.previousPageButtonLabel)||"Previous page"},e.createElement(m,{is:a}))};export{c as PaginationPreviousButton};
+import{ChevronLeft as a}from"@atom-learning/icons";import*as e from"react";import{styled as n}from"../../styled.js";import{ActionIcon as s}from"../action-icon/ActionIcon.js";import{Icon as l}from"../icon/Icon.js";import{usePagination as m}from"./usePagination.js";const p=n(s,{base:["mr-1","disabled:opacity-30"]}),c=t=>{const{goToPreviousPage:i,labels:o,previousAvailablePage:r}=m();return e.createElement(p,{hasTooltip:!1,size:"md",theme:"neutral",onClick:i,disabled:!r,...t,label:(o==null?void 0:o.previousPageButtonLabel)||"Previous page"},e.createElement(l,{is:a}))};export{c as PaginationPreviousButton};
 //# sourceMappingURL=PaginationPreviousButton.js.map

package/dist/components/pagination/PaginationPreviousButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"PaginationPreviousButton.js","sources":["../../../src/components/pagination/PaginationPreviousButton.tsx"],"sourcesContent":["import { ChevronLeft } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { styled } from '~/stitches'\n\nimport { ActionIcon } from '../action-icon'\nimport { Icon } from '../icon'\nimport { usePagination } from './usePagination'\n\nconst StyledActionIcon = styled(ActionIcon, {\n  mr: '$1',\n  '&:disabled': {\n    opacity: '0.3'\n  }\n})\n\nexport const PaginationPreviousButton = (\n  props: Partial<React.ComponentProps<typeof StyledActionIcon>>\n) => {\n  const { goToPreviousPage, labels, previousAvailablePage } = usePagination()\n\n  const isDisabled = !previousAvailablePage\n\n  return (\n    <StyledActionIcon\n      hasTooltip={false}\n      size=\"md\"\n      theme=\"neutral\"\n      onClick={goToPreviousPage}\n      disabled={isDisabled}\n      {...props}\n      label={labels?.previousPageButtonLabel || 'Previous page'}\n    >\n      <Icon is={ChevronLeft} />\n    </StyledActionIcon>\n  )\n}\n"],"names":["StyledActionIcon","styled","ActionIcon","PaginationPreviousButton","props","goToPreviousPage","labels","previousAvailablePage","usePagination","React","Icon","ChevronLeft"],"mappings":"0QASA,MAAMA,EAAmBC,EAAOC,EAAY,CAC1C,GAAI,KACJ,aAAc,CACZ,QAAS,KACX,CACF,CAAC,EAEYC,EACXC,GACG,CACH,KAAM,CAAE,iBAAAC,EAAkB,OAAAC,EAAQ,sBAAAC,CAAsB,EAAIC,EAAc,EAI1E,OACEC,EAAA,cAACT,EAAA,CACC,WAAY,GACZ,KAAK,KACL,MAAM,UACN,QAASK,EACT,SARe,CAACE,EASf,GAAGH,EACJ,OAAOE,GAAA,KAAAA,OAAAA,EAAQ,0BAA2B,eAAA,EAE1CG,EAAA,cAACC,EAAA,CAAK,GAAIC,CAAAA,CAAa,CACzB,CAEJ"}
+{"version":3,"file":"PaginationPreviousButton.js","sources":["../../../src/components/pagination/PaginationPreviousButton.tsx"],"sourcesContent":["import { ChevronLeft } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { ActionIcon } from '../action-icon'\nimport { Icon } from '../icon'\nimport { usePagination } from './usePagination'\n\nconst StyledActionIcon = styled(ActionIcon, {\n  base: ['mr-1', 'disabled:opacity-30']\n})\n\nexport const PaginationPreviousButton = (\n  props: Partial<React.ComponentProps<typeof StyledActionIcon>>\n) => {\n  const { goToPreviousPage, labels, previousAvailablePage } = usePagination()\n\n  const isDisabled = !previousAvailablePage\n\n  return (\n    <StyledActionIcon\n      hasTooltip={false}\n      size=\"md\"\n      theme=\"neutral\"\n      onClick={goToPreviousPage}\n      disabled={isDisabled}\n      {...props}\n      label={labels?.previousPageButtonLabel || 'Previous page'}\n    >\n      <Icon is={ChevronLeft} />\n    </StyledActionIcon>\n  )\n}\n"],"names":["StyledActionIcon","styled","ActionIcon","PaginationPreviousButton","props","goToPreviousPage","labels","previousAvailablePage","usePagination","React","Icon","ChevronLeft"],"mappings":"wQASA,MAAMA,EAAmBC,EAAOC,EAAY,CAC1C,KAAM,CAAC,OAAQ,qBAAqB,CACtC,CAAC,EAEYC,EACXC,GACG,CACH,KAAM,CAAE,iBAAAC,EAAkB,OAAAC,EAAQ,sBAAAC,CAAsB,EAAIC,IAI5D,OACEC,EAAA,cAACT,EAAA,CACC,WAAY,GACZ,KAAK,KACL,MAAM,UACN,QAASK,EACT,SARe,CAACE,EASf,GAAGH,EACJ,OAAOE,GAAA,KAAAA,OAAAA,EAAQ,0BAA2B,eAAA,EAE1CG,EAAA,cAACC,EAAA,CAAK,GAAIC,CAAAA,CAAa,CACzB,CAEJ"}

package/dist/components/pagination/pagination.constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"pagination.constants.js","sources":["../../../src/components/pagination/pagination.constants.ts"],"sourcesContent":["export enum VisibleElementsAmount {\n  LESS = 6,\n  MORE = 8\n}\n\nexport const VIEW_ALL_POPOVER = 'VIEW_ALL_POPOVER'\nexport const GO_TO_PREVIOUS_PAGE = 'GO_TO_PREVIOUS_PAGE'\nexport const GO_TO_NEXT_PAGE = 'GO_TO_NEXT_PAGE'\n"],"names":["VisibleElementsAmount","_","VIEW_ALL_POPOVER","GO_TO_PREVIOUS_PAGE","GO_TO_NEXT_PAGE"],"mappings":"AAAO,IAAKA,GAAAA,IACVA,EAAAA,EAAA,KAAO,GAAP,OACAA,EAAAC,EAAA,KAAO,GAAP,OAFUD,IAAAA,GAKL,CAAA,CAAA,EAAA,MAAME,EAAmB,mBACnBC,EAAsB,sBACtBC,EAAkB"}
+{"version":3,"file":"pagination.constants.js","sources":["../../../src/components/pagination/pagination.constants.ts"],"sourcesContent":["export enum VisibleElementsAmount {\n  LESS = 6,\n  MORE = 8\n}\n\nexport const VIEW_ALL_POPOVER = 'VIEW_ALL_POPOVER'\nexport const GO_TO_PREVIOUS_PAGE = 'GO_TO_PREVIOUS_PAGE'\nexport const GO_TO_NEXT_PAGE = 'GO_TO_NEXT_PAGE'\n"],"names":["VisibleElementsAmount","_","VIEW_ALL_POPOVER","GO_TO_PREVIOUS_PAGE","GO_TO_NEXT_PAGE"],"mappings":"AAAO,IAAKA,GAAAA,IACVA,EAAAA,EAAA,KAAO,CAAA,EAAP,OACAA,EAAAC,EAAA,KAAO,CAAP,EAAA,OAFUD,IAAAA,GAKL,CAAA,CAAA,EAAA,MAAME,EAAmB,mBACnBC,EAAsB,sBACtBC,EAAkB"}

package/dist/components/pagination/pagination.helper.js.map

@@ -1 +1 @@
-{"version":3,"file":"pagination.helper.js","sources":["../../../src/components/pagination/pagination.helper.ts"],"sourcesContent":["import {\n  GO_TO_NEXT_PAGE,\n  GO_TO_PREVIOUS_PAGE,\n  VIEW_ALL_POPOVER\n} from './pagination.constants'\nimport { PaginationItemsToRender } from './types'\n\nexport const getPaginationElementsToRender = (\n  currentPage: number,\n  pagesCount: number,\n  visibleElementsCount: number\n): PaginationItemsToRender => {\n  const paginationPages = Array.from(\n    { length: pagesCount },\n    (_, index) => index + 1\n  )\n\n  /*\n   * As we always show the `<` `>` arrows,\n   * subtract 2 from `visibleElementsCount` (one for each of the GO_TO_PREVIOUS/NEXT_PAGE arrows)\n   * to get the `visiblePagesCount`\n   */\n  let visiblePagesCount = visibleElementsCount - 2\n  const withPreviousNextPageArrows = (paginationPages) => [\n    GO_TO_PREVIOUS_PAGE,\n    ...paginationPages,\n    GO_TO_NEXT_PAGE\n  ]\n\n  /**\n   * If fewer pages than threshold for truncating render them all.\n   *\n   * pagesCount: 6\n   * visibleElementsCount: >=6\n   * returns [GO_TO_PREVIOUS_PAGE, 1, 2, 3, 4, GO_TO_NEXT_PAGE]\n   *  +---+  +---+  +---+  +---+  +---+  +---+\n   *  | < |  | 1 |  | 2 |  | 3 |  | 4 |  | > |\n   *  +---+  +---+  +---+  +---+  +---+  +---+\n   *\n   */\n  if (pagesCount <= visiblePagesCount) {\n    return withPreviousNextPageArrows(paginationPages)\n  }\n\n  /**\n   * If current page is either at the very start or at the very end of the pages\n   */\n  const canFitEdgePage = visibleElementsCount >= 5\n  const canFitViewAllPopover = visibleElementsCount >= 4\n  const canFitPages = visibleElementsCount >= 3\n\n  if (canFitViewAllPopover) {\n    // Subtract one from visiblePagesCount to accomodate for us adding the `[…]` VIEW_ALL_POPOVER\n    visiblePagesCount -= 1\n  }\n\n  if (canFitEdgePage) {\n    // Subtract one more from visiblePagesCount to accomodate for us adding the GO_TO_PREVIOUS/NEXT_PAGE arrows\n    visiblePagesCount -= 1\n  }\n\n  const firstPage = paginationPages[0]\n  const lastPage = paginationPages[paginationPages.length - 1]\n\n  /**\n   * If we're truncating and current page is at the start of the page list,\n   * render the initial truncated page list, e.g.\n   *\n   *  pagesCount: 8\n   *  currentPage: 1/2\n   *  visibleElementsCount: 6\n   *  returns [GO_TO_PREVIOUS_PAGE, 1, 2, VIEW_ALL_POPOVER, 6, GO_TO_NEXT_PAGE]\n   *  +---+  +---+  +---+  +---+  +---+  +---+\n   *  | < |  | 1 |  | 2 |  | … |  | 8 |  | > |\n   *  +---+  +---+  +---+  +---+  +---+  +---+\n   *\n   */\n  if (currentPage < visiblePagesCount) {\n    const newPaginationItems = [] as PaginationItemsToRender\n    if (canFitPages) {\n      newPaginationItems.push(...paginationPages.slice(0, visiblePagesCount))\n    }\n    if (canFitViewAllPopover) {\n      newPaginationItems.push(VIEW_ALL_POPOVER)\n    }\n    if (canFitEdgePage) {\n      newPaginationItems.push(lastPage)\n    }\n    return withPreviousNextPageArrows(newPaginationItems)\n  }\n\n  /**\n   * If we're truncating and the current page is towards the end of the\n   * page list (depending on visibleElementsCount),\n   * render a truncated page list from the end, e.g.\n   *\n   *  pagesCount: 8\n   *  currentPage: 7/8\n   *  visibleElementsCount: 6\n   *  returns [GO_TO_PREVIOUS_PAGE, 1, VIEW_ALL_POPOVER, 7, 8, GO_TO_NEXT_PAGE]\n   *  +---+  +---+  +---+  +---+  +---+  +---+\n   *  | < |  | 1 |  | … |  | 7 |  | 8 |  | > |\n   *  +---+  +---+  +---+  +---+  +---+  +---+\n   *\n   */\n  if (currentPage > pagesCount - visiblePagesCount) {\n    const newPaginationItems = [] as PaginationItemsToRender\n    if (canFitEdgePage) {\n      newPaginationItems.push(firstPage)\n    }\n    if (canFitViewAllPopover) {\n      newPaginationItems.push(VIEW_ALL_POPOVER)\n    }\n    if (canFitPages) {\n      newPaginationItems.push(\n        ...paginationPages.slice(pagesCount - visiblePagesCount, pagesCount)\n      )\n    }\n    return withPreviousNextPageArrows(newPaginationItems)\n  }\n\n  /**\n   * If we're truncating and the current page doesn't meet any of the previous conditions\n   * (we're in the middle)\n   * render a truncated page list from a specific index relative to `currentPage`, e.g.\n   *\n   *  currentPage: 4\n   *  visibleElementsCount: 6 // VisibleElementsAmount.LESS\n   *  returns [GO_TO_PREVIOUS_PAGE, 3, 4, VIEW_ALL_POPOVER, 6, GO_TO_NEXT_PAGE]\n   *  +---+  +---+  +---+  +---+  +---+  +---+\n   *  | < |  | 3 |  | 4 |  | … |  | 6 |  | > |\n   *  +---+  +---+  +---+  +---+  +---+  +---+\n   *\n   *  currentPage: 6\n   *  visibleElementsCount: 8 // VisibleElementsAmount.MORE\n   *  returns [GO_TO_PREVIOUS_PAGE, 4, 5, 6, 7, VIEW_ALL_POPOVER, 10, GO_TO_NEXT_PAGE]\n   *  +---+  +---+  +---+  +---+  +---+  +---+  +---+  +---+\n   *  | < |  | 4 |  | 5 |  | 6 |  | 7 |  | … |  | 10 | | > |\n   *  +---+  +---+  +---+  +---+  +---+  +---+  +---+  +---+\n   */\n  const canFitCurrentPage = canFitPages\n  const canFitCurrentPageAndPreviousPage = visibleElementsCount >= 6\n  const canFitCurrentPageAndPreviousPageAndNextPage = visibleElementsCount >= 7\n  const canFitLastPage = canFitEdgePage\n\n  const newPaginationItems = [] as PaginationItemsToRender\n  if (canFitCurrentPageAndPreviousPageAndNextPage) {\n    newPaginationItems.push(\n      ...paginationPages.slice(\n        currentPage + 1 - visiblePagesCount,\n        currentPage + 1\n      )\n    )\n  } else if (canFitCurrentPageAndPreviousPage) {\n    newPaginationItems.push(\n      ...paginationPages.slice(currentPage - visiblePagesCount, currentPage)\n    )\n  } else if (canFitCurrentPage) {\n    newPaginationItems.push(\n      ...paginationPages.slice(currentPage - 1, currentPage - 1 + 1)\n    )\n  }\n  if (canFitViewAllPopover) {\n    newPaginationItems.push(VIEW_ALL_POPOVER)\n  }\n  if (canFitLastPage) {\n    newPaginationItems.push(lastPage)\n  }\n  return withPreviousNextPageArrows(newPaginationItems)\n}\n\nexport const findNextAvailablePage = (\n  startPage: number,\n  disabledPages: number[],\n  pagesCount: number\n): number | undefined => {\n  if (startPage > pagesCount) return\n  let nextPage = startPage\n  while (disabledPages.includes(nextPage)) {\n    nextPage++\n  }\n  return nextPage\n}\n\nexport const findPreviousAvailablePage = (\n  startPage: number,\n  disabledPages: number[]\n): number | undefined => {\n  if (startPage < 1) return\n  let previousPage = startPage\n  while (disabledPages.includes(previousPage)) {\n    previousPage--\n  }\n  return previousPage\n}\n"],"names":["getPaginationElementsToRender","currentPage","pagesCount","visibleElementsCount","paginationPages","_","index","visiblePagesCount","withPreviousNextPageArrows","GO_TO_PREVIOUS_PAGE","GO_TO_NEXT_PAGE","canFitEdgePage","canFitViewAllPopover","canFitPages","firstPage","lastPage","newPaginationItems","VIEW_ALL_POPOVER","canFitCurrentPage","canFitCurrentPageAndPreviousPage","canFitCurrentPageAndPreviousPageAndNextPage","canFitLastPage","findNextAvailablePage","startPage","disabledPages","nextPage","findPreviousAvailablePage","previousPage"],"mappings":"2GAOa,MAAAA,EAAgC,CAC3CC,EACAC,EACAC,IAC4B,CAC5B,MAAMC,EAAkB,MAAM,KAC5B,CAAE,OAAQF,CAAW,EACrB,CAACG,EAAGC,IAAUA,EAAQ,CACxB,EAOA,IAAIC,EAAoBJ,EAAuB,EAC/C,MAAMK,EAA8BJ,GAAoB,CACtDK,EACA,GAAGL,EACHM,CACF,EAaA,GAAIR,GAAcK,EAChB,OAAOC,EAA2BJ,CAAe,EAMnD,MAAMO,EAAiBR,GAAwB,EACzCS,EAAuBT,GAAwB,EAC/CU,EAAcV,GAAwB,EAExCS,IAEFL,GAAqB,GAGnBI,IAEFJ,GAAqB,GAGvB,MAAMO,EAAYV,EAAgB,GAC5BW,EAAWX,EAAgBA,EAAgB,OAAS,GAe1D,GAAIH,EAAcM,EAAmB,CACnC,MAAMS,EAAqB,CAC3B,EAAA,OAAIH,GACFG,EAAmB,KAAK,GAAGZ,EAAgB,MAAM,EAAGG,CAAiB,CAAC,EAEpEK,GACFI,EAAmB,KAAKC,CAAgB,EAEtCN,GACFK,EAAmB,KAAKD,CAAQ,EAE3BP,EAA2BQ,CAAkB,CACtD,CAgBA,GAAIf,EAAcC,EAAaK,EAAmB,CAChD,MAAMS,EAAqB,GAC3B,OAAIL,GACFK,EAAmB,KAAKF,CAAS,EAE/BF,GACFI,EAAmB,KAAKC,CAAgB,EAEtCJ,GACFG,EAAmB,KACjB,GAAGZ,EAAgB,MAAMF,EAAaK,EAAmBL,CAAU,CACrE,EAEKM,EAA2BQ,CAAkB,CACtD,CAqBA,MAAME,EAAoBL,EACpBM,EAAmChB,GAAwB,EAC3DiB,EAA8CjB,GAAwB,EACtEkB,EAAiBV,EAEjBK,EAAqB,CAAC,EAC5B,OAAII,EACFJ,EAAmB,KACjB,GAAGZ,EAAgB,MACjBH,EAAc,EAAIM,EAClBN,EAAc,CAChB,CACF,EACSkB,EACTH,EAAmB,KACjB,GAAGZ,EAAgB,MAAMH,EAAcM,EAAmBN,CAAW,CACvE,EACSiB,GACTF,EAAmB,KACjB,GAAGZ,EAAgB,MAAMH,EAAc,EAAGA,EAAc,EAAI,CAAC,CAC/D,EAEEW,GACFI,EAAmB,KAAKC,CAAgB,EAEtCI,GACFL,EAAmB,KAAKD,CAAQ,EAE3BP,EAA2BQ,CAAkB,CACtD,EAEaM,EAAwB,CACnCC,EACAC,EACAtB,IACuB,CACvB,GAAIqB,EAAYrB,EAAY,OAC5B,IAAIuB,EAAWF,EACf,KAAOC,EAAc,SAASC,CAAQ,GACpCA,IAEF,OAAOA,CACT,EAEaC,EAA4B,CACvCH,EACAC,IACuB,CACvB,GAAID,EAAY,EAAG,OACnB,IAAII,EAAeJ,EACnB,KAAOC,EAAc,SAASG,CAAY,GACxCA,IAEF,OAAOA,CACT"}
+{"version":3,"file":"pagination.helper.js","sources":["../../../src/components/pagination/pagination.helper.ts"],"sourcesContent":["import {\n  GO_TO_NEXT_PAGE,\n  GO_TO_PREVIOUS_PAGE,\n  VIEW_ALL_POPOVER\n} from './pagination.constants'\nimport { PaginationItemsToRender } from './types'\n\nexport const getPaginationElementsToRender = (\n  currentPage: number,\n  pagesCount: number,\n  visibleElementsCount: number\n): PaginationItemsToRender => {\n  const paginationPages = Array.from(\n    { length: pagesCount },\n    (_, index) => index + 1\n  )\n\n  /*\n   * As we always show the `<` `>` arrows,\n   * subtract 2 from `visibleElementsCount` (one for each of the GO_TO_PREVIOUS/NEXT_PAGE arrows)\n   * to get the `visiblePagesCount`\n   */\n  let visiblePagesCount = visibleElementsCount - 2\n  const withPreviousNextPageArrows = (paginationPages) => [\n    GO_TO_PREVIOUS_PAGE,\n    ...paginationPages,\n    GO_TO_NEXT_PAGE\n  ]\n\n  /**\n   * If fewer pages than threshold for truncating render them all.\n   *\n   * pagesCount: 6\n   * visibleElementsCount: >=6\n   * returns [GO_TO_PREVIOUS_PAGE, 1, 2, 3, 4, GO_TO_NEXT_PAGE]\n   *  +---+  +---+  +---+  +---+  +---+  +---+\n   *  | < |  | 1 |  | 2 |  | 3 |  | 4 |  | > |\n   *  +---+  +---+  +---+  +---+  +---+  +---+\n   *\n   */\n  if (pagesCount <= visiblePagesCount) {\n    return withPreviousNextPageArrows(paginationPages)\n  }\n\n  /**\n   * If current page is either at the very start or at the very end of the pages\n   */\n  const canFitEdgePage = visibleElementsCount >= 5\n  const canFitViewAllPopover = visibleElementsCount >= 4\n  const canFitPages = visibleElementsCount >= 3\n\n  if (canFitViewAllPopover) {\n    // Subtract one from visiblePagesCount to accomodate for us adding the `[…]` VIEW_ALL_POPOVER\n    visiblePagesCount -= 1\n  }\n\n  if (canFitEdgePage) {\n    // Subtract one more from visiblePagesCount to accomodate for us adding the GO_TO_PREVIOUS/NEXT_PAGE arrows\n    visiblePagesCount -= 1\n  }\n\n  const firstPage = paginationPages[0]\n  const lastPage = paginationPages[paginationPages.length - 1]\n\n  /**\n   * If we're truncating and current page is at the start of the page list,\n   * render the initial truncated page list, e.g.\n   *\n   *  pagesCount: 8\n   *  currentPage: 1/2\n   *  visibleElementsCount: 6\n   *  returns [GO_TO_PREVIOUS_PAGE, 1, 2, VIEW_ALL_POPOVER, 6, GO_TO_NEXT_PAGE]\n   *  +---+  +---+  +---+  +---+  +---+  +---+\n   *  | < |  | 1 |  | 2 |  | … |  | 8 |  | > |\n   *  +---+  +---+  +---+  +---+  +---+  +---+\n   *\n   */\n  if (currentPage < visiblePagesCount) {\n    const newPaginationItems = [] as PaginationItemsToRender\n    if (canFitPages) {\n      newPaginationItems.push(...paginationPages.slice(0, visiblePagesCount))\n    }\n    if (canFitViewAllPopover) {\n      newPaginationItems.push(VIEW_ALL_POPOVER)\n    }\n    if (canFitEdgePage) {\n      newPaginationItems.push(lastPage)\n    }\n    return withPreviousNextPageArrows(newPaginationItems)\n  }\n\n  /**\n   * If we're truncating and the current page is towards the end of the\n   * page list (depending on visibleElementsCount),\n   * render a truncated page list from the end, e.g.\n   *\n   *  pagesCount: 8\n   *  currentPage: 7/8\n   *  visibleElementsCount: 6\n   *  returns [GO_TO_PREVIOUS_PAGE, 1, VIEW_ALL_POPOVER, 7, 8, GO_TO_NEXT_PAGE]\n   *  +---+  +---+  +---+  +---+  +---+  +---+\n   *  | < |  | 1 |  | … |  | 7 |  | 8 |  | > |\n   *  +---+  +---+  +---+  +---+  +---+  +---+\n   *\n   */\n  if (currentPage > pagesCount - visiblePagesCount) {\n    const newPaginationItems = [] as PaginationItemsToRender\n    if (canFitEdgePage) {\n      newPaginationItems.push(firstPage)\n    }\n    if (canFitViewAllPopover) {\n      newPaginationItems.push(VIEW_ALL_POPOVER)\n    }\n    if (canFitPages) {\n      newPaginationItems.push(\n        ...paginationPages.slice(pagesCount - visiblePagesCount, pagesCount)\n      )\n    }\n    return withPreviousNextPageArrows(newPaginationItems)\n  }\n\n  /**\n   * If we're truncating and the current page doesn't meet any of the previous conditions\n   * (we're in the middle)\n   * render a truncated page list from a specific index relative to `currentPage`, e.g.\n   *\n   *  currentPage: 4\n   *  visibleElementsCount: 6 // VisibleElementsAmount.LESS\n   *  returns [GO_TO_PREVIOUS_PAGE, 3, 4, VIEW_ALL_POPOVER, 6, GO_TO_NEXT_PAGE]\n   *  +---+  +---+  +---+  +---+  +---+  +---+\n   *  | < |  | 3 |  | 4 |  | … |  | 6 |  | > |\n   *  +---+  +---+  +---+  +---+  +---+  +---+\n   *\n   *  currentPage: 6\n   *  visibleElementsCount: 8 // VisibleElementsAmount.MORE\n   *  returns [GO_TO_PREVIOUS_PAGE, 4, 5, 6, 7, VIEW_ALL_POPOVER, 10, GO_TO_NEXT_PAGE]\n   *  +---+  +---+  +---+  +---+  +---+  +---+  +---+  +---+\n   *  | < |  | 4 |  | 5 |  | 6 |  | 7 |  | … |  | 10 | | > |\n   *  +---+  +---+  +---+  +---+  +---+  +---+  +---+  +---+\n   */\n  const canFitCurrentPage = canFitPages\n  const canFitCurrentPageAndPreviousPage = visibleElementsCount >= 6\n  const canFitCurrentPageAndPreviousPageAndNextPage = visibleElementsCount >= 7\n  const canFitLastPage = canFitEdgePage\n\n  const newPaginationItems = [] as PaginationItemsToRender\n  if (canFitCurrentPageAndPreviousPageAndNextPage) {\n    newPaginationItems.push(\n      ...paginationPages.slice(\n        currentPage + 1 - visiblePagesCount,\n        currentPage + 1\n      )\n    )\n  } else if (canFitCurrentPageAndPreviousPage) {\n    newPaginationItems.push(\n      ...paginationPages.slice(currentPage - visiblePagesCount, currentPage)\n    )\n  } else if (canFitCurrentPage) {\n    newPaginationItems.push(\n      ...paginationPages.slice(currentPage - 1, currentPage - 1 + 1)\n    )\n  }\n  if (canFitViewAllPopover) {\n    newPaginationItems.push(VIEW_ALL_POPOVER)\n  }\n  if (canFitLastPage) {\n    newPaginationItems.push(lastPage)\n  }\n  return withPreviousNextPageArrows(newPaginationItems)\n}\n\nexport const findNextAvailablePage = (\n  startPage: number,\n  disabledPages: number[],\n  pagesCount: number\n): number | undefined => {\n  if (startPage > pagesCount) return\n  let nextPage = startPage\n  while (disabledPages.includes(nextPage)) {\n    nextPage++\n  }\n  return nextPage\n}\n\nexport const findPreviousAvailablePage = (\n  startPage: number,\n  disabledPages: number[]\n): number | undefined => {\n  if (startPage < 1) return\n  let previousPage = startPage\n  while (disabledPages.includes(previousPage)) {\n    previousPage--\n  }\n  return previousPage\n}\n"],"names":["getPaginationElementsToRender","currentPage","pagesCount","visibleElementsCount","paginationPages","_","index","visiblePagesCount","withPreviousNextPageArrows","GO_TO_PREVIOUS_PAGE","GO_TO_NEXT_PAGE","canFitEdgePage","canFitViewAllPopover","canFitPages","firstPage","lastPage","newPaginationItems","VIEW_ALL_POPOVER","canFitCurrentPage","canFitCurrentPageAndPreviousPage","canFitCurrentPageAndPreviousPageAndNextPage","canFitLastPage","findNextAvailablePage","startPage","disabledPages","nextPage","findPreviousAvailablePage","previousPage"],"mappings":"2GAOa,MAAAA,EAAgC,CAC3CC,EACAC,EACAC,IAC4B,CAC5B,MAAMC,EAAkB,MAAM,KAC5B,CAAE,OAAQF,CAAW,EACrB,CAACG,EAAGC,IAAUA,EAAQ,CACxB,EAOA,IAAIC,EAAoBJ,EAAuB,EAC/C,MAAMK,EAA8BJ,GAAoB,CACtDK,EACA,GAAGL,EACHM,CACF,EAaA,GAAIR,GAAcK,EAChB,OAAOC,EAA2BJ,CAAe,EAMnD,MAAMO,EAAiBR,GAAwB,EACzCS,EAAuBT,GAAwB,EAC/CU,EAAcV,GAAwB,EAExCS,IAEFL,GAAqB,GAGnBI,IAEFJ,GAAqB,GAGvB,MAAMO,EAAYV,EAAgB,CAAC,EAC7BW,EAAWX,EAAgBA,EAAgB,OAAS,CAAC,EAe3D,GAAIH,EAAcM,EAAmB,CACnC,MAAMS,EAAqB,CAAC,EAC5B,OAAIH,GACFG,EAAmB,KAAK,GAAGZ,EAAgB,MAAM,EAAGG,CAAiB,CAAC,EAEpEK,GACFI,EAAmB,KAAKC,CAAgB,EAEtCN,GACFK,EAAmB,KAAKD,CAAQ,EAE3BP,EAA2BQ,CAAkB,CACtD,CAgBA,GAAIf,EAAcC,EAAaK,EAAmB,CAChD,MAAMS,EAAqB,GAC3B,OAAIL,GACFK,EAAmB,KAAKF,CAAS,EAE/BF,GACFI,EAAmB,KAAKC,CAAgB,EAEtCJ,GACFG,EAAmB,KACjB,GAAGZ,EAAgB,MAAMF,EAAaK,EAAmBL,CAAU,CACrE,EAEKM,EAA2BQ,CAAkB,CACtD,CAqBA,MAAME,EAAoBL,EACpBM,EAAmChB,GAAwB,EAC3DiB,EAA8CjB,GAAwB,EACtEkB,EAAiBV,EAEjBK,EAAqB,CAC3B,EAAA,OAAII,EACFJ,EAAmB,KACjB,GAAGZ,EAAgB,MACjBH,EAAc,EAAIM,EAClBN,EAAc,CAChB,CACF,EACSkB,EACTH,EAAmB,KACjB,GAAGZ,EAAgB,MAAMH,EAAcM,EAAmBN,CAAW,CACvE,EACSiB,GACTF,EAAmB,KACjB,GAAGZ,EAAgB,MAAMH,EAAc,EAAGA,EAAc,EAAI,CAAC,CAC/D,EAEEW,GACFI,EAAmB,KAAKC,CAAgB,EAEtCI,GACFL,EAAmB,KAAKD,CAAQ,EAE3BP,EAA2BQ,CAAkB,CACtD,EAEaM,EAAwB,CACnCC,EACAC,EACAtB,IACuB,CACvB,GAAIqB,EAAYrB,EAAY,OAC5B,IAAIuB,EAAWF,EACf,KAAOC,EAAc,SAASC,CAAQ,GACpCA,IAEF,OAAOA,CACT,EAEaC,EAA4B,CACvCH,EACAC,IACuB,CACvB,GAAID,EAAY,EAAG,OACnB,IAAII,EAAeJ,EACnB,KAAOC,EAAc,SAASG,CAAY,GACxCA,IAEF,OAAOA,CACT"}

package/dist/components/pagination/types.d.ts

@@ -1,5 +1,4 @@
 import { TcolorScheme } from '../../experiments/color-scheme';
-import { CSS } from '../../stitches';
 import { GO_TO_NEXT_PAGE, GO_TO_PREVIOUS_PAGE, VIEW_ALL_POPOVER } from './pagination.constants';
 export type PaginationItemsToRender = (number | typeof VIEW_ALL_POPOVER | typeof GO_TO_PREVIOUS_PAGE | typeof GO_TO_NEXT_PAGE)[];
 interface Labels {
@@ -18,7 +17,7 @@ interface BasePaginationProps {
 export type TVisibleElementsCount = 6 | 8;
 export interface PaginationPageProps {
     pageNumber: number;
-    css?: CSS;
+    className?: string;
     onClick?: () => void;
 }
 export interface PaginationContextValue extends BasePaginationProps {
@@ -36,7 +35,7 @@ export type PaginationProviderProps = Pick<BasePaginationProps, 'pagesCount'> &
 };
 export interface PaginationProps extends PaginationProviderProps {
     colorScheme?: TcolorScheme;
-    css?: CSS;
+    className?: string;
     children?: React.ReactNode;
 }
 export {};

package/dist/components/password-field/PasswordField.d.ts

@@ -5,7 +5,7 @@ type PasswordFieldProps = React.ComponentProps<typeof PasswordInput> & Omit<Fiel
     label?: string;
 };
 export declare const PasswordField: {
-    ({ css, hideLabel, label, name, prompt, description, validation, appearance, ...remainingProps }: PasswordFieldProps): React.JSX.Element;
+    ({ className, hideLabel, label, name, prompt, description, validation, appearance, ...remainingProps }: PasswordFieldProps): React.JSX.Element;
     displayName: string;
 };
 export {};

package/dist/components/password-field/PasswordField.js

@@ -1,2 +1,2 @@
-import*as p from"react";import{useFormContext as F}from"react-hook-form";import{FieldWrapper as w}from"../field-wrapper/FieldWrapper.js";import"../field-wrapper/InlineFieldWrapper.js";import"../form/Form.js";import{useFieldError as b}from"../form/useFieldError.js";import{useFormCustomContext as C}from"../form/useFormCustomContext.js";import{PasswordInput as P}from"../password-input/PasswordInput.js";const s=({css:m={},hideLabel:d,label:l="Password",name:e,prompt:n=void 0,description:c,validation:r,appearance:u,...f})=>{const{register:o}=F(),t=C(),{error:a}=b(e),v=r?o(r):o,i=(t==null?void 0:t.appearance)||u;return p.createElement(w,{css:{...m,position:"relative"},description:c,error:a,fieldId:e,hideLabel:d,label:l,prompt:n,required:Boolean(r==null?void 0:r.required),appearance:i},p.createElement(P,{autoComplete:"current-password",name:e,id:e,ref:v,appearance:i,...a!==void 0&&{state:"error"},...f}))};s.displayName="PasswordField";export{s as PasswordField};
+import v from"clsx";import*as p from"react";import{useFormContext as w}from"react-hook-form";import{FieldWrapper as b}from"../field-wrapper/FieldWrapper.js";import"../field-wrapper/InlineFieldWrapper.js";import"../form/Form.js";import{useFieldError as C}from"../form/useFieldError.js";import{useFormCustomContext as P}from"../form/useFormCustomContext.js";import{PasswordInput as x}from"../password-input/PasswordInput.js";const m=({className:s,hideLabel:d,label:l="Password",name:e,prompt:n=void 0,description:c,validation:r,appearance:u,...f})=>{const{register:o}=w(),a=P(),{error:t}=C(e),F=r?o(r):o,i=(a==null?void 0:a.appearance)||u;return p.createElement(b,{description:c,error:t,fieldId:e,hideLabel:d,label:l,prompt:n,required:!!(r!=null&&r.required),appearance:i,className:v(s,"relative")},p.createElement(x,{autoComplete:"current-password",name:e,id:e,ref:F,appearance:i,...t!==void 0&&{state:"error"},...f}))};m.displayName="PasswordField";export{m as PasswordField};
 //# sourceMappingURL=PasswordField.js.map

package/dist/components/password-field/PasswordField.js.map

@@ -1 +1 @@
-{"version":3,"file":"PasswordField.js","sources":["../../../src/components/password-field/PasswordField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useFormContext } from 'react-hook-form'\n\nimport {\n  FieldElementWrapperProps,\n  FieldWrapper\n} from '~/components/field-wrapper'\nimport { useFieldError, useFormCustomContext } from '~/components/form'\nimport { PasswordInput } from '~/components/password-input'\nimport { CSS } from '~/stitches'\n\ntype PasswordFieldProps = React.ComponentProps<typeof PasswordInput> &\n  Omit<FieldElementWrapperProps, 'label'> & {\n    label?: string\n  }\n\nexport const PasswordField = ({\n  css = {},\n  hideLabel,\n  label = 'Password',\n  name,\n  prompt = undefined,\n  description,\n  validation,\n  appearance,\n  ...remainingProps\n}: PasswordFieldProps) => {\n  const { register } = useFormContext()\n  const context = useFormCustomContext()\n  const { error } = useFieldError(name)\n\n  const ref = validation ? register(validation) : register\n  const formAppearance = context?.appearance || appearance\n\n  return (\n    <FieldWrapper\n      css={{ ...css, position: 'relative' } as CSS}\n      description={description}\n      error={error}\n      fieldId={name}\n      hideLabel={hideLabel}\n      label={label}\n      prompt={prompt}\n      required={Boolean(validation?.required)}\n      appearance={formAppearance}\n    >\n      <PasswordInput\n        autoComplete=\"current-password\"\n        name={name}\n        id={name}\n        ref={ref}\n        appearance={formAppearance}\n        {...(error !== undefined && { state: 'error' })}\n        {...remainingProps}\n      />\n    </FieldWrapper>\n  )\n}\n\nPasswordField.displayName = 'PasswordField'\n"],"names":["PasswordField","css","hideLabel","label","name","prompt","description","validation","appearance","remainingProps","register","useFormContext","context","useFormCustomContext","error","useFieldError","ref","formAppearance","React","FieldWrapper","PasswordInput"],"mappings":"mZAgBO,MAAMA,EAAgB,CAAC,CAC5B,IAAAC,EAAM,CAAA,EACN,UAAAC,EACA,MAAAC,EAAQ,WACR,KAAAC,EACA,OAAAC,EAAS,OACT,YAAAC,EACA,WAAAC,EACA,WAAAC,KACGC,CACL,IAA0B,CACxB,KAAM,CAAE,SAAAC,CAAS,EAAIC,EAAe,EAC9BC,EAAUC,IACV,CAAE,MAAAC,CAAM,EAAIC,EAAcX,CAAI,EAE9BY,EAAMT,EAAaG,EAASH,CAAU,EAAIG,EAC1CO,GAAiBL,GAAA,KAAAA,OAAAA,EAAS,aAAcJ,EAE9C,OACEU,EAAA,cAACC,EAAA,CACC,IAAK,CAAE,GAAGlB,EAAK,SAAU,UAAW,EACpC,YAAaK,EACb,MAAOQ,EACP,QAASV,EACT,UAAWF,EACX,MAAOC,EACP,OAAQE,EACR,SAAU,QAAQE,GAAA,KAAAA,OAAAA,EAAY,QAAQ,EACtC,WAAYU,CAAAA,EAEZC,EAAA,cAACE,EAAA,CACC,aAAa,mBACb,KAAMhB,EACN,GAAIA,EACJ,IAAKY,EACL,WAAYC,EACX,GAAIH,IAAU,QAAa,CAAE,MAAO,OAAQ,EAC5C,GAAGL,CACN,CAAA,CACF,CAEJ,EAEAT,EAAc,YAAc"}
+{"version":3,"file":"PasswordField.js","sources":["../../../src/components/password-field/PasswordField.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport * as React from 'react'\nimport { useFormContext } from 'react-hook-form'\n\nimport {\n  FieldElementWrapperProps,\n  FieldWrapper\n} from '~/components/field-wrapper'\nimport { useFieldError, useFormCustomContext } from '~/components/form'\nimport { PasswordInput } from '~/components/password-input'\n\ntype PasswordFieldProps = React.ComponentProps<typeof PasswordInput> &\n  Omit<FieldElementWrapperProps, 'label'> & {\n    label?: string\n  }\n\nexport const PasswordField = ({\n  className,\n  hideLabel,\n  label = 'Password',\n  name,\n  prompt = undefined,\n  description,\n  validation,\n  appearance,\n  ...remainingProps\n}: PasswordFieldProps) => {\n  const { register } = useFormContext()\n  const context = useFormCustomContext()\n  const { error } = useFieldError(name)\n\n  const ref = validation ? register(validation) : register\n  const formAppearance = context?.appearance || appearance\n\n  return (\n    <FieldWrapper\n      description={description}\n      error={error}\n      fieldId={name}\n      hideLabel={hideLabel}\n      label={label}\n      prompt={prompt}\n      required={Boolean(validation?.required)}\n      appearance={formAppearance}\n      className={clsx(className, 'relative')}\n    >\n      <PasswordInput\n        autoComplete=\"current-password\"\n        name={name}\n        id={name}\n        ref={ref}\n        appearance={formAppearance}\n        {...(error !== undefined && { state: 'error' })}\n        {...remainingProps}\n      />\n    </FieldWrapper>\n  )\n}\n\nPasswordField.displayName = 'PasswordField'\n"],"names":["PasswordField","className","hideLabel","label","name","prompt","description","validation","appearance","remainingProps","register","useFormContext","context","useFormCustomContext","error","useFieldError","ref","formAppearance","React","FieldWrapper","clsx","PasswordInput"],"mappings":"uaAgBa,MAAAA,EAAgB,CAAC,CAC5B,UAAAC,EACA,UAAAC,EACA,MAAAC,EAAQ,WACR,KAAAC,EACA,OAAAC,EAAS,OACT,YAAAC,EACA,WAAAC,EACA,WAAAC,EACA,GAAGC,CACL,IAA0B,CACxB,KAAM,CAAE,SAAAC,CAAS,EAAIC,IACfC,EAAUC,EACV,EAAA,CAAE,MAAAC,CAAM,EAAIC,EAAcX,CAAI,EAE9BY,EAAMT,EAAaG,EAASH,CAAU,EAAIG,EAC1CO,GAAiBL,GAAA,KAAA,OAAAA,EAAS,aAAcJ,EAE9C,OACEU,EAAA,cAACC,EAAA,CACC,YAAab,EACb,MAAOQ,EACP,QAASV,EACT,UAAWF,EACX,MAAOC,EACP,OAAQE,EACR,SAAU,CAAA,EAAQE,GAAA,MAAAA,EAAY,UAC9B,WAAYU,EACZ,UAAWG,EAAKnB,EAAW,UAAU,CAAA,EAErCiB,EAAA,cAACG,EAAA,CACC,aAAa,mBACb,KAAMjB,EACN,GAAIA,EACJ,IAAKY,EACL,WAAYC,EACX,GAAIH,IAAU,QAAa,CAAE,MAAO,OAAQ,EAC5C,GAAGL,CACN,CAAA,CACF,CAEJ,EAEAT,EAAc,YAAc"}

package/dist/components/password-input/PasswordInput.d.ts

@@ -4,5 +4,5 @@ type PasswordInputProps = Omit<InputProps, 'type'> & {
     hidePasswordText?: string;
     showPasswordText?: string;
 };
-export declare const PasswordInput: React.ForwardRefExoticComponent<PasswordInputProps>;
+export declare const PasswordInput: React.ForwardRefExoticComponent<Omit<PasswordInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
 export {};

package/dist/components/password-input/PasswordInput.js

@@ -1,2 +1,2 @@
-import{Eye as f,EyeCrossed as w}from"@atom-learning/icons";import*as e from"react";import{useState as u}from"react";import{ActionIcon as x}from"../action-icon/ActionIcon.js";import{Box as E}from"../box/Box.js";import{Icon as I}from"../icon/Icon.js";import{Input as h}from"../input/Input.js";import"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import"../../utilities/style/keyframe-animations.js";import{getFieldIconSize as z}from"../../utilities/style/get-icon-size.js";const s=e.forwardRef(({css:i,hidePasswordText:m="Hide password",showPasswordText:p="Show password",size:o="md",...a},n)=>{const[t,c]=u(!1),d=()=>c(r=>!r),l=e.useMemo(()=>z(o),[o]);return e.createElement(E,{css:{position:"relative",...i}},e.createElement(h,{...a,size:o,type:t?"text":"password",ref:n,css:{pr:"$sizes$2"}}),e.createElement(x,{appearance:"simple",theme:"neutral",css:{bottom:o==="lg"?"4px":0,position:"absolute",right:0},label:t?m:p,onClick:d,onMouseDown:r=>r.preventDefault(),size:l},e.createElement(I,{is:t?f:w})))});s.displayName="PasswordInput";export{s as PasswordInput};
+import{Eye as u,EyeCrossed as w}from"@atom-learning/icons";import s from"clsx";import*as e from"react";import{useState as E}from"react";import{ActionIcon as I}from"../action-icon/ActionIcon.js";import{Icon as h}from"../icon/Icon.js";import{Input as N}from"../input/Input.js";import"../../utilities/css-wrapper/CSSWrapper.js";import{getFieldIconSize as b}from"../../utilities/style/get-icon-size.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";const m=e.forwardRef(({className:a,hidePasswordText:i="Hide password",showPasswordText:p="Show password",size:o="md",...l},n)=>{const[t,c]=E(!1),d=()=>c(r=>!r),f=e.useMemo(()=>b(o),[o]);return e.createElement("div",{className:s("relative",a)},e.createElement(N,{...l,size:o,type:t?"text":"password",ref:n,className:"pr-6"}),e.createElement(I,{appearance:"simple",theme:"neutral",label:t?i:p,onClick:d,onMouseDown:r=>r.preventDefault(),size:f,className:s(o==="lg"?"bottom-1":"bottom-0","absolute","right-0")},e.createElement(h,{is:t?u:w})))});m.displayName="PasswordInput";export{m as PasswordInput};
 //# sourceMappingURL=PasswordInput.js.map

package/dist/components/password-input/PasswordInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"PasswordInput.js","sources":["../../../src/components/password-input/PasswordInput.tsx"],"sourcesContent":["import { Eye, EyeCrossed } from '@atom-learning/icons'\nimport * as React from 'react'\nimport { useState } from 'react'\n\nimport { ActionIcon } from '~/components/action-icon'\nimport { Box } from '~/components/box'\nimport { Icon } from '~/components/icon'\nimport type { InputProps } from '~/components/input'\nimport { Input } from '~/components/input'\nimport type { CSS } from '~/stitches'\nimport { getFieldIconSize } from '~/utilities'\n\ntype PasswordInputProps = Omit<InputProps, 'type'> & {\n  hidePasswordText?: string\n  showPasswordText?: string\n}\n\nexport const PasswordInput: React.ForwardRefExoticComponent<PasswordInputProps> =\n  React.forwardRef(\n    (\n      {\n        css,\n        hidePasswordText = 'Hide password',\n        showPasswordText = 'Show password',\n        size = 'md',\n        ...restProps\n      },\n      ref\n    ) => {\n      const [isPasswordVisible, setIsPasswordVisible] = useState<boolean>(false)\n      const togglePasswordVisibility = () =>\n        setIsPasswordVisible((currentState) => !currentState)\n\n      const iconSize = React.useMemo(() => getFieldIconSize(size), [size])\n\n      return (\n        <Box css={{ position: 'relative', ...css } as CSS}>\n          <Input\n            {...restProps}\n            size={size}\n            type={isPasswordVisible ? 'text' : 'password'}\n            ref={ref}\n            css={{ pr: '$sizes$2' }}\n          />\n          <ActionIcon\n            appearance=\"simple\"\n            theme=\"neutral\"\n            css={{\n              bottom: size === 'lg' ? '4px' : 0,\n              position: 'absolute',\n              right: 0\n            }}\n            label={isPasswordVisible ? hidePasswordText : showPasswordText}\n            onClick={togglePasswordVisibility}\n            onMouseDown={(e) => e.preventDefault()} // prevent focus being lost from password input\n            size={iconSize}\n          >\n            <Icon is={isPasswordVisible ? Eye : EyeCrossed} />\n          </ActionIcon>\n        </Box>\n      )\n    }\n  )\n\nPasswordInput.displayName = 'PasswordInput'\n"],"names":["PasswordInput","React","css","hidePasswordText","showPasswordText","size","restProps","ref","isPasswordVisible","setIsPasswordVisible","useState","togglePasswordVisibility","currentState","iconSize","getFieldIconSize","Box","Input","ActionIcon","e","Icon","Eye","EyeCrossed"],"mappings":"+jBAiBO,MAAMA,EACXC,EAAM,WACJ,CACE,CACE,IAAAC,EACA,iBAAAC,EAAmB,gBACnB,iBAAAC,EAAmB,gBACnB,KAAAC,EAAO,QACJC,CACL,EACAC,IACG,CACH,KAAM,CAACC,EAAmBC,CAAoB,EAAIC,EAAkB,EAAK,EACnEC,EAA2B,IAC/BF,EAAsBG,GAAiB,CAACA,CAAY,EAEhDC,EAAWZ,EAAM,QAAQ,IAAMa,EAAiBT,CAAI,EAAG,CAACA,CAAI,CAAC,EAEnE,OACEJ,EAAA,cAACc,EAAA,CAAI,IAAK,CAAE,SAAU,WAAY,GAAGb,CAAI,CAAA,EACvCD,EAAA,cAACe,EAAA,CACE,GAAGV,EACJ,KAAMD,EACN,KAAMG,EAAoB,OAAS,WACnC,IAAKD,EACL,IAAK,CAAE,GAAI,UAAW,CACxB,CAAA,EACAN,EAAA,cAACgB,EAAA,CACC,WAAW,SACX,MAAM,UACN,IAAK,CACH,OAAQZ,IAAS,KAAO,MAAQ,EAChC,SAAU,WACV,MAAO,CACT,EACA,MAAOG,EAAoBL,EAAmBC,EAC9C,QAASO,EACT,YAAcO,GAAMA,EAAE,iBACtB,KAAML,CAAAA,EAENZ,EAAA,cAACkB,EAAA,CAAK,GAAIX,EAAoBY,EAAMC,EAAY,CAClD,CACF,CAEJ,CACF,EAEFrB,EAAc,YAAc"}
+{"version":3,"file":"PasswordInput.js","sources":["../../../src/components/password-input/PasswordInput.tsx"],"sourcesContent":["import { Eye, EyeCrossed } from '@atom-learning/icons'\nimport clsx from 'clsx'\nimport * as React from 'react'\nimport { useState } from 'react'\n\nimport { ActionIcon } from '~/components/action-icon'\nimport { Icon } from '~/components/icon'\nimport type { InputProps } from '~/components/input'\nimport { Input } from '~/components/input'\nimport { getFieldIconSize } from '~/utilities'\n\ntype PasswordInputProps = Omit<InputProps, 'type'> & {\n  hidePasswordText?: string\n  showPasswordText?: string\n}\n\nexport const PasswordInput = React.forwardRef<\n  HTMLInputElement,\n  PasswordInputProps\n>(\n  (\n    {\n      className,\n      hidePasswordText = 'Hide password',\n      showPasswordText = 'Show password',\n      size = 'md',\n      ...restProps\n    },\n    ref\n  ) => {\n    const [isPasswordVisible, setIsPasswordVisible] = useState<boolean>(false)\n    const togglePasswordVisibility = () =>\n      setIsPasswordVisible((currentState) => !currentState)\n\n    const iconSize = React.useMemo(() => getFieldIconSize(size), [size])\n\n    return (\n      <div className={clsx('relative', className)}>\n        <Input\n          {...restProps}\n          size={size}\n          type={isPasswordVisible ? 'text' : 'password'}\n          ref={ref}\n          className=\"pr-6\"\n        />\n        <ActionIcon\n          appearance=\"simple\"\n          theme=\"neutral\"\n          label={isPasswordVisible ? hidePasswordText : showPasswordText}\n          onClick={togglePasswordVisibility}\n          onMouseDown={(e) => e.preventDefault()} // prevent focus being lost from password input\n          size={iconSize}\n          className={clsx(\n            size === 'lg' ? 'bottom-1' : 'bottom-0',\n            'absolute',\n            'right-0'\n          )}\n        >\n          <Icon is={isPasswordVisible ? Eye : EyeCrossed} />\n        </ActionIcon>\n      </div>\n    )\n  }\n)\n\nPasswordInput.displayName = 'PasswordInput'\n"],"names":["PasswordInput","React","className","hidePasswordText","showPasswordText","size","restProps","ref","isPasswordVisible","setIsPasswordVisible","useState","togglePasswordVisibility","currentState","iconSize","getFieldIconSize","clsx","Input","ActionIcon","e","Icon","Eye","EyeCrossed"],"mappings":"gdAgBa,MAAAA,EAAgBC,EAAM,WAIjC,CACE,CACE,UAAAC,EACA,iBAAAC,EAAmB,gBACnB,iBAAAC,EAAmB,gBACnB,KAAAC,EAAO,KACP,GAAGC,CACL,EACAC,IACG,CACH,KAAM,CAACC,EAAmBC,CAAoB,EAAIC,EAAkB,EAAK,EACnEC,EAA2B,IAC/BF,EAAsBG,GAAiB,CAACA,CAAY,EAEhDC,EAAWZ,EAAM,QAAQ,IAAMa,EAAiBT,CAAI,EAAG,CAACA,CAAI,CAAC,EAEnE,OACEJ,EAAA,cAAC,MAAA,CAAI,UAAWc,EAAK,WAAYb,CAAS,CAAA,EACxCD,EAAA,cAACe,EAAA,CACE,GAAGV,EACJ,KAAMD,EACN,KAAMG,EAAoB,OAAS,WACnC,IAAKD,EACL,UAAU,MAAA,CACZ,EACAN,EAAA,cAACgB,EAAA,CACC,WAAW,SACX,MAAM,UACN,MAAOT,EAAoBL,EAAmBC,EAC9C,QAASO,EACT,YAAcO,GAAMA,EAAE,iBACtB,KAAML,EACN,UAAWE,EACTV,IAAS,KAAO,WAAa,WAC7B,WACA,SACF,CAEAJ,EAAAA,EAAA,cAACkB,EAAA,CAAK,GAAIX,EAAoBY,EAAMC,CAAAA,CAAY,CAClD,CACF,CAEJ,CACF,EAEArB,EAAc,YAAc"}