@atom-learning/components 6.6.0-beta.1 → 6.6.0-beta.3

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

@@ -1 +1 @@
-{"version":3,"file":"pagination.constants.js","names":[],"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"],"mappings":";AAAA,IAAY,IAAL,yBAAA,GAAA;QACL,EAAA,EAAA,OAAA,KAAA,QACA,EAAA,EAAA,OAAA,KAAA;KACD,EAEY,IAAmB,oBACnB,IAAsB,uBACtB,IAAkB"}
+{"version":3,"file":"pagination.constants.js","names":[],"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"],"mappings":";AAAA,IAAY,wBAAL,yBAAA,uBAAA;AACL,uBAAA,sBAAA,UAAA,KAAA;AACA,uBAAA,sBAAA,UAAA,KAAA;;KACD;AAED,IAAa,mBAAmB;AAChC,IAAa,sBAAsB;AACnC,IAAa,kBAAkB"}

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

@@ -1,37 +1,120 @@
-import { GO_TO_NEXT_PAGE as e, GO_TO_PREVIOUS_PAGE as t, VIEW_ALL_POPOVER as n } from "./pagination.constants.js";
+import { GO_TO_NEXT_PAGE, GO_TO_PREVIOUS_PAGE, VIEW_ALL_POPOVER } from "./pagination.constants.js";
 //#region src/components/pagination/pagination.helper.ts
-var r = (r, i, a) => {
-	let o = Array.from({ length: i }, (e, t) => t + 1), s = a - 2, c = (n) => [
-		t,
-		...n,
-		e
+var getPaginationElementsToRender = (currentPage, pagesCount, visibleElementsCount) => {
+	const paginationPages = Array.from({ length: pagesCount }, (_, index) => index + 1);
+	let visiblePagesCount = visibleElementsCount - 2;
+	const withPreviousNextPageArrows = (paginationPages) => [
+		GO_TO_PREVIOUS_PAGE,
+		...paginationPages,
+		GO_TO_NEXT_PAGE
 	];
-	if (i <= s) return c(o);
-	let l = a >= 5, u = a >= 4, d = a >= 3;
-	u && --s, l && --s;
-	let f = o[0], p = o[o.length - 1];
-	if (r < s) {
-		let e = [];
-		return d && e.push(...o.slice(0, s)), u && e.push(n), l && e.push(p), c(e);
+	/**
+	* If fewer pages than threshold for truncating render them all.
+	*
+	* pagesCount: 6
+	* visibleElementsCount: >=6
+	* returns [GO_TO_PREVIOUS_PAGE, 1, 2, 3, 4, GO_TO_NEXT_PAGE]
+	*  +---+  +---+  +---+  +---+  +---+  +---+
+	*  | < |  | 1 |  | 2 |  | 3 |  | 4 |  | > |
+	*  +---+  +---+  +---+  +---+  +---+  +---+
+	*
+	*/
+	if (pagesCount <= visiblePagesCount) return withPreviousNextPageArrows(paginationPages);
+	/**
+	* If current page is either at the very start or at the very end of the pages
+	*/
+	const canFitEdgePage = visibleElementsCount >= 5;
+	const canFitViewAllPopover = visibleElementsCount >= 4;
+	const canFitPages = visibleElementsCount >= 3;
+	if (canFitViewAllPopover) visiblePagesCount -= 1;
+	if (canFitEdgePage) visiblePagesCount -= 1;
+	const firstPage = paginationPages[0];
+	const lastPage = paginationPages[paginationPages.length - 1];
+	/**
+	* If we're truncating and current page is at the start of the page list,
+	* render the initial truncated page list, e.g.
+	*
+	*  pagesCount: 8
+	*  currentPage: 1/2
+	*  visibleElementsCount: 6
+	*  returns [GO_TO_PREVIOUS_PAGE, 1, 2, VIEW_ALL_POPOVER, 6, GO_TO_NEXT_PAGE]
+	*  +---+  +---+  +---+  +---+  +---+  +---+
+	*  | < |  | 1 |  | 2 |  | … |  | 8 |  | > |
+	*  +---+  +---+  +---+  +---+  +---+  +---+
+	*
+	*/
+	if (currentPage < visiblePagesCount) {
+		const newPaginationItems = [];
+		if (canFitPages) newPaginationItems.push(...paginationPages.slice(0, visiblePagesCount));
+		if (canFitViewAllPopover) newPaginationItems.push(VIEW_ALL_POPOVER);
+		if (canFitEdgePage) newPaginationItems.push(lastPage);
+		return withPreviousNextPageArrows(newPaginationItems);
 	}
-	if (r > i - s) {
-		let e = [];
-		return l && e.push(f), u && e.push(n), d && e.push(...o.slice(i - s, i)), c(e);
+	/**
+	* If we're truncating and the current page is towards the end of the
+	* page list (depending on visibleElementsCount),
+	* render a truncated page list from the end, e.g.
+	*
+	*  pagesCount: 8
+	*  currentPage: 7/8
+	*  visibleElementsCount: 6
+	*  returns [GO_TO_PREVIOUS_PAGE, 1, VIEW_ALL_POPOVER, 7, 8, GO_TO_NEXT_PAGE]
+	*  +---+  +---+  +---+  +---+  +---+  +---+
+	*  | < |  | 1 |  | … |  | 7 |  | 8 |  | > |
+	*  +---+  +---+  +---+  +---+  +---+  +---+
+	*
+	*/
+	if (currentPage > pagesCount - visiblePagesCount) {
+		const newPaginationItems = [];
+		if (canFitEdgePage) newPaginationItems.push(firstPage);
+		if (canFitViewAllPopover) newPaginationItems.push(VIEW_ALL_POPOVER);
+		if (canFitPages) newPaginationItems.push(...paginationPages.slice(pagesCount - visiblePagesCount, pagesCount));
+		return withPreviousNextPageArrows(newPaginationItems);
 	}
-	let m = d, h = a >= 6, g = a >= 7, _ = l, v = [];
-	return g ? v.push(...o.slice(r + 1 - s, r + 1)) : h ? v.push(...o.slice(r - s, r)) : m && v.push(...o.slice(r - 1, r - 1 + 1)), u && v.push(n), _ && v.push(p), c(v);
-}, i = (e, t, n) => {
-	if (e > n) return;
-	let r = e;
-	for (; t.includes(r);) r++;
-	return r;
-}, a = (e, t) => {
-	if (e < 1) return;
-	let n = e;
-	for (; t.includes(n);) n--;
-	return n;
+	/**
+	* If we're truncating and the current page doesn't meet any of the previous conditions
+	* (we're in the middle)
+	* render a truncated page list from a specific index relative to `currentPage`, e.g.
+	*
+	*  currentPage: 4
+	*  visibleElementsCount: 6 // VisibleElementsAmount.LESS
+	*  returns [GO_TO_PREVIOUS_PAGE, 3, 4, VIEW_ALL_POPOVER, 6, GO_TO_NEXT_PAGE]
+	*  +---+  +---+  +---+  +---+  +---+  +---+
+	*  | < |  | 3 |  | 4 |  | … |  | 6 |  | > |
+	*  +---+  +---+  +---+  +---+  +---+  +---+
+	*
+	*  currentPage: 6
+	*  visibleElementsCount: 8 // VisibleElementsAmount.MORE
+	*  returns [GO_TO_PREVIOUS_PAGE, 4, 5, 6, 7, VIEW_ALL_POPOVER, 10, GO_TO_NEXT_PAGE]
+	*  +---+  +---+  +---+  +---+  +---+  +---+  +---+  +---+
+	*  | < |  | 4 |  | 5 |  | 6 |  | 7 |  | … |  | 10 | | > |
+	*  +---+  +---+  +---+  +---+  +---+  +---+  +---+  +---+
+	*/
+	const canFitCurrentPage = canFitPages;
+	const canFitCurrentPageAndPreviousPage = visibleElementsCount >= 6;
+	const canFitCurrentPageAndPreviousPageAndNextPage = visibleElementsCount >= 7;
+	const canFitLastPage = canFitEdgePage;
+	const newPaginationItems = [];
+	if (canFitCurrentPageAndPreviousPageAndNextPage) newPaginationItems.push(...paginationPages.slice(currentPage + 1 - visiblePagesCount, currentPage + 1));
+	else if (canFitCurrentPageAndPreviousPage) newPaginationItems.push(...paginationPages.slice(currentPage - visiblePagesCount, currentPage));
+	else if (canFitCurrentPage) newPaginationItems.push(...paginationPages.slice(currentPage - 1, currentPage - 1 + 1));
+	if (canFitViewAllPopover) newPaginationItems.push(VIEW_ALL_POPOVER);
+	if (canFitLastPage) newPaginationItems.push(lastPage);
+	return withPreviousNextPageArrows(newPaginationItems);
+};
+var findNextAvailablePage = (startPage, disabledPages, pagesCount) => {
+	if (startPage > pagesCount) return;
+	let nextPage = startPage;
+	while (disabledPages.includes(nextPage)) nextPage++;
+	return nextPage;
+};
+var findPreviousAvailablePage = (startPage, disabledPages) => {
+	if (startPage < 1) return;
+	let previousPage = startPage;
+	while (disabledPages.includes(previousPage)) previousPage--;
+	return previousPage;
 };
 //#endregion
-export { i as findNextAvailablePage, a as findPreviousAvailablePage, r as getPaginationElementsToRender };
+export { findNextAvailablePage, findPreviousAvailablePage, getPaginationElementsToRender };
 
 //# sourceMappingURL=pagination.helper.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"pagination.helper.js","names":[],"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"],"mappings":";;AAOA,IAAa,KACX,GACA,GACA,MAC4B;CAC5B,IAAM,IAAkB,MAAM,KAC5B,EAAE,QAAQ,GAAY,GACrB,GAAG,MAAU,IAAQ,EACvB,EAOG,IAAoB,IAAuB,GACzC,KAA8B,MAAoB;EACtD;EACA,GAAG;EACH;EACD;AAaD,KAAI,KAAc,EAChB,QAAO,EAA2B,EAAgB;CAMpD,IAAM,IAAiB,KAAwB,GACzC,IAAuB,KAAwB,GAC/C,IAAc,KAAwB;AAO5C,CALI,KAEF,KAGE,KAEF;CAGF,IAAM,IAAY,EAAgB,IAC5B,IAAW,EAAgB,EAAgB,SAAS;AAe1D,KAAI,IAAc,GAAmB;EACnC,IAAM,IAAqB,EAAE;AAU7B,SATI,KACF,EAAmB,KAAK,GAAG,EAAgB,MAAM,GAAG,EAAkB,CAAC,EAErE,KACF,EAAmB,KAAK,EAAiB,EAEvC,KACF,EAAmB,KAAK,EAAS,EAE5B,EAA2B,EAAmB;;AAiBvD,KAAI,IAAc,IAAa,GAAmB;EAChD,IAAM,IAAqB,EAAE;AAY7B,SAXI,KACF,EAAmB,KAAK,EAAU,EAEhC,KACF,EAAmB,KAAK,EAAiB,EAEvC,KACF,EAAmB,KACjB,GAAG,EAAgB,MAAM,IAAa,GAAmB,EAAW,CACrE,EAEI,EAA2B,EAAmB;;CAsBvD,IAAM,IAAoB,GACpB,IAAmC,KAAwB,GAC3D,IAA8C,KAAwB,GACtE,IAAiB,GAEjB,IAAqB,EAAE;AAuB7B,QAtBI,IACF,EAAmB,KACjB,GAAG,EAAgB,MACjB,IAAc,IAAI,GAClB,IAAc,EACf,CACF,GACQ,IACT,EAAmB,KACjB,GAAG,EAAgB,MAAM,IAAc,GAAmB,EAAY,CACvE,GACQ,KACT,EAAmB,KACjB,GAAG,EAAgB,MAAM,IAAc,GAAG,IAAc,IAAI,EAAE,CAC/D,EAEC,KACF,EAAmB,KAAK,EAAiB,EAEvC,KACF,EAAmB,KAAK,EAAS,EAE5B,EAA2B,EAAmB;GAG1C,KACX,GACA,GACA,MACuB;AACvB,KAAI,IAAY,EAAY;CAC5B,IAAI,IAAW;AACf,QAAO,EAAc,SAAS,EAAS,EACrC;AAEF,QAAO;GAGI,KACX,GACA,MACuB;AACvB,KAAI,IAAY,EAAG;CACnB,IAAI,IAAe;AACnB,QAAO,EAAc,SAAS,EAAa,EACzC;AAEF,QAAO"}
+{"version":3,"file":"pagination.helper.js","names":[],"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"],"mappings":";;AAOA,IAAa,iCACX,aACA,YACA,yBAC4B;CAC5B,MAAM,kBAAkB,MAAM,KAC5B,EAAE,QAAQ,YAAY,GACrB,GAAG,UAAU,QAAQ,EACvB;CAOD,IAAI,oBAAoB,uBAAuB;CAC/C,MAAM,8BAA8B,oBAAoB;EACtD;EACA,GAAG;EACH;EACD;;;;;;;;;;;;AAaD,KAAI,cAAc,kBAChB,QAAO,2BAA2B,gBAAgB;;;;CAMpD,MAAM,iBAAiB,wBAAwB;CAC/C,MAAM,uBAAuB,wBAAwB;CACrD,MAAM,cAAc,wBAAwB;AAE5C,KAAI,qBAEF,sBAAqB;AAGvB,KAAI,eAEF,sBAAqB;CAGvB,MAAM,YAAY,gBAAgB;CAClC,MAAM,WAAW,gBAAgB,gBAAgB,SAAS;;;;;;;;;;;;;;AAe1D,KAAI,cAAc,mBAAmB;EACnC,MAAM,qBAAqB,EAAE;AAC7B,MAAI,YACF,oBAAmB,KAAK,GAAG,gBAAgB,MAAM,GAAG,kBAAkB,CAAC;AAEzE,MAAI,qBACF,oBAAmB,KAAK,iBAAiB;AAE3C,MAAI,eACF,oBAAmB,KAAK,SAAS;AAEnC,SAAO,2BAA2B,mBAAmB;;;;;;;;;;;;;;;;AAiBvD,KAAI,cAAc,aAAa,mBAAmB;EAChD,MAAM,qBAAqB,EAAE;AAC7B,MAAI,eACF,oBAAmB,KAAK,UAAU;AAEpC,MAAI,qBACF,oBAAmB,KAAK,iBAAiB;AAE3C,MAAI,YACF,oBAAmB,KACjB,GAAG,gBAAgB,MAAM,aAAa,mBAAmB,WAAW,CACrE;AAEH,SAAO,2BAA2B,mBAAmB;;;;;;;;;;;;;;;;;;;;;CAsBvD,MAAM,oBAAoB;CAC1B,MAAM,mCAAmC,wBAAwB;CACjE,MAAM,8CAA8C,wBAAwB;CAC5E,MAAM,iBAAiB;CAEvB,MAAM,qBAAqB,EAAE;AAC7B,KAAI,4CACF,oBAAmB,KACjB,GAAG,gBAAgB,MACjB,cAAc,IAAI,mBAClB,cAAc,EACf,CACF;UACQ,iCACT,oBAAmB,KACjB,GAAG,gBAAgB,MAAM,cAAc,mBAAmB,YAAY,CACvE;UACQ,kBACT,oBAAmB,KACjB,GAAG,gBAAgB,MAAM,cAAc,GAAG,cAAc,IAAI,EAAE,CAC/D;AAEH,KAAI,qBACF,oBAAmB,KAAK,iBAAiB;AAE3C,KAAI,eACF,oBAAmB,KAAK,SAAS;AAEnC,QAAO,2BAA2B,mBAAmB;;AAGvD,IAAa,yBACX,WACA,eACA,eACuB;AACvB,KAAI,YAAY,WAAY;CAC5B,IAAI,WAAW;AACf,QAAO,cAAc,SAAS,SAAS,CACrC;AAEF,QAAO;;AAGT,IAAa,6BACX,WACA,kBACuB;AACvB,KAAI,YAAY,EAAG;CACnB,IAAI,eAAe;AACnB,QAAO,cAAc,SAAS,aAAa,CACzC;AAEF,QAAO"}

package/dist/components/pagination/usePagination.js

@@ -1,12 +1,12 @@
-import { PaginationContext as e } from "./pagination-context/PaginationContext.js";
-import * as t from "react";
+import { PaginationContext } from "./pagination-context/PaginationContext.js";
+import * as React$1 from "react";
 //#region src/components/pagination/usePagination.tsx
-var n = () => {
-	let n = t.useContext(e);
-	if (!n) throw Error("Ensure that you wrap any components with the PaginationProvider component");
-	return n;
+var usePagination = () => {
+	const context = React$1.useContext(PaginationContext);
+	if (!context) throw new Error("Ensure that you wrap any components with the PaginationProvider component");
+	return context;
 };
 //#endregion
-export { n as usePagination };
+export { usePagination };
 
 //# sourceMappingURL=usePagination.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"usePagination.js","names":[],"sources":["../../../src/components/pagination/usePagination.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { PaginationContext } from './pagination-context/PaginationContext'\nimport type { PaginationContextValue } from './types'\n\nexport const usePagination = (): PaginationContextValue => {\n  const context = React.useContext(PaginationContext)\n\n  if (!context) {\n    throw new Error(\n      'Ensure that you wrap any components with the PaginationProvider component'\n    )\n  }\n\n  return context\n}\n"],"mappings":";;;AAKA,IAAa,UAA8C;CACzD,IAAM,IAAU,EAAM,WAAW,EAAkB;AAEnD,KAAI,CAAC,EACH,OAAU,MACR,4EACD;AAGH,QAAO"}
+{"version":3,"file":"usePagination.js","names":[],"sources":["../../../src/components/pagination/usePagination.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { PaginationContext } from './pagination-context/PaginationContext'\nimport type { PaginationContextValue } from './types'\n\nexport const usePagination = (): PaginationContextValue => {\n  const context = React.useContext(PaginationContext)\n\n  if (!context) {\n    throw new Error(\n      'Ensure that you wrap any components with the PaginationProvider component'\n    )\n  }\n\n  return context\n}\n"],"mappings":";;;AAKA,IAAa,sBAA8C;CACzD,MAAM,UAAU,QAAM,WAAW,kBAAkB;AAEnD,KAAI,CAAC,QACH,OAAM,IAAI,MACR,4EACD;AAGH,QAAO"}

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

@@ -1,35 +1,39 @@
-import { useFieldError as e } from "../form/useFieldError.js";
-import { FieldWrapper as t } from "../field-wrapper/FieldWrapper.js";
-import { useFormCustomContext as n } from "../form/useFormCustomContext.js";
-import { PasswordInput as r } from "../password-input/PasswordInput.js";
-import i from "clsx";
-import * as a from "react";
-import { useFormContext as o } from "react-hook-form";
+import { useFieldError } from "../form/useFieldError.js";
+import { FieldWrapper } from "../field-wrapper/FieldWrapper.js";
+import { useFormCustomContext } from "../form/useFormCustomContext.js";
+import { PasswordInput } from "../password-input/PasswordInput.js";
+import clsx from "clsx";
+import * as React$1 from "react";
+import { useFormContext } from "react-hook-form";
 //#region src/components/password-field/PasswordField.tsx
-var s = ({ className: s, hideLabel: c, label: l = "Password", name: u, prompt: d = void 0, description: f, validation: p, appearance: m, ...h }) => {
-	let { register: g } = o(), _ = n(), { error: v } = e(u), y = p ? g(p) : g, b = _?.appearance || m;
-	return /* @__PURE__ */ a.createElement(t, {
-		description: f,
-		error: v,
-		fieldId: u,
-		hideLabel: c,
-		label: l,
-		prompt: d,
-		required: !!p?.required,
-		appearance: b,
-		className: i(s, "relative")
-	}, /* @__PURE__ */ a.createElement(r, {
+var PasswordField = ({ className, hideLabel, label = "Password", name, prompt = void 0, description, validation, appearance, ...remainingProps }) => {
+	const { register } = useFormContext();
+	const context = useFormCustomContext();
+	const { error } = useFieldError(name);
+	const ref = validation ? register(validation) : register;
+	const formAppearance = context?.appearance || appearance;
+	return /* @__PURE__ */ React$1.createElement(FieldWrapper, {
+		description,
+		error,
+		fieldId: name,
+		hideLabel,
+		label,
+		prompt,
+		required: Boolean(validation?.required),
+		appearance: formAppearance,
+		className: clsx(className, "relative")
+	}, /* @__PURE__ */ React$1.createElement(PasswordInput, {
 		autoComplete: "current-password",
-		name: u,
-		id: u,
-		ref: y,
-		appearance: b,
-		...v !== void 0 && { state: "error" },
-		...h
+		name,
+		id: name,
+		ref,
+		appearance: formAppearance,
+		...error !== void 0 && { state: "error" },
+		...remainingProps
 	}));
 };
-s.displayName = "PasswordField";
+PasswordField.displayName = "PasswordField";
 //#endregion
-export { s as PasswordField };
+export { PasswordField };
 
 //# sourceMappingURL=PasswordField.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"PasswordField.js","names":[],"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/FieldWrapper'\nimport { useFieldError } from '~/components/form/useFieldError'\nimport { useFormCustomContext } from '~/components/form/useFormCustomContext'\nimport { PasswordInput } from '~/components/password-input/PasswordInput'\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"],"mappings":";;;;;;;;AAiBA,IAAa,KAAiB,EAC5B,cACA,cACA,WAAQ,YACR,SACA,YAAS,KAAA,GACT,gBACA,eACA,eACA,GAAG,QACqB;CACxB,IAAM,EAAE,gBAAa,GAAgB,EAC/B,IAAU,GAAsB,EAChC,EAAE,aAAU,EAAc,EAAK,EAE/B,IAAM,IAAa,EAAS,EAAW,GAAG,GAC1C,IAAiB,GAAS,cAAc;AAE9C,QACE,kBAAA,cAAC,GAAD;EACe;EACN;EACP,SAAS;EACE;EACJ;EACC;EACR,UAAU,EAAQ,GAAY;EAC9B,YAAY;EACZ,WAAW,EAAK,GAAW,WAAW;EAWzB,EATb,kBAAA,cAAC,GAAD;EACE,cAAa;EACP;EACN,IAAI;EACC;EACL,YAAY;EACZ,GAAK,MAAU,KAAA,KAAa,EAAE,OAAO,SAAS;EAC9C,GAAI;EACJ,CAAA,CACW;;AAInB,EAAc,cAAc"}
+{"version":3,"file":"PasswordField.js","names":[],"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/FieldWrapper'\nimport { useFieldError } from '~/components/form/useFieldError'\nimport { useFormCustomContext } from '~/components/form/useFormCustomContext'\nimport { PasswordInput } from '~/components/password-input/PasswordInput'\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"],"mappings":";;;;;;;;AAiBA,IAAa,iBAAiB,EAC5B,WACA,WACA,QAAQ,YACR,MACA,SAAS,KAAA,GACT,aACA,YACA,YACA,GAAG,qBACqB;CACxB,MAAM,EAAE,aAAa,gBAAgB;CACrC,MAAM,UAAU,sBAAsB;CACtC,MAAM,EAAE,UAAU,cAAc,KAAK;CAErC,MAAM,MAAM,aAAa,SAAS,WAAW,GAAG;CAChD,MAAM,iBAAiB,SAAS,cAAc;AAE9C,QACE,wBAAA,cAAC,cAAD;EACe;EACN;EACP,SAAS;EACE;EACJ;EACC;EACR,UAAU,QAAQ,YAAY,SAAS;EACvC,YAAY;EACZ,WAAW,KAAK,WAAW,WAAW;EAWzB,EATb,wBAAA,cAAC,eAAD;EACE,cAAa;EACP;EACN,IAAI;EACC;EACL,YAAY;EACZ,GAAK,UAAU,KAAA,KAAa,EAAE,OAAO,SAAS;EAC9C,GAAI;EACJ,CAAA,CACW;;AAInB,cAAc,cAAc"}

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

@@ -1,32 +1,34 @@
-import { Icon as e } from "../icon/Icon.js";
-import { ActionIcon as t } from "../action-icon/ActionIcon.js";
-import { Input as n } from "../input/Input.js";
-import { getFieldIconSize as r } from "../../utilities/style/get-icon-size.js";
-import i from "clsx";
-import * as a from "react";
-import { useState as o } from "react";
-import { Eye as s, EyeCrossed as c } from "@atom-learning/icons";
+import { Icon } from "../icon/Icon.js";
+import { ActionIcon } from "../action-icon/ActionIcon.js";
+import { Input } from "../input/Input.js";
+import { getFieldIconSize } from "../../utilities/style/get-icon-size.js";
+import clsx from "clsx";
+import * as React$1 from "react";
+import { useState } from "react";
+import { Eye, EyeCrossed } from "@atom-learning/icons";
 //#region src/components/password-input/PasswordInput.tsx
-var l = a.forwardRef(({ className: l, hidePasswordText: u = "Hide password", showPasswordText: d = "Show password", size: f = "md", ...p }, m) => {
-	let [h, g] = o(!1), _ = () => g((e) => !e), v = a.useMemo(() => r(f), [f]);
-	return /* @__PURE__ */ a.createElement("div", { className: i("relative", l) }, /* @__PURE__ */ a.createElement(n, {
-		...p,
-		size: f,
-		type: h ? "text" : "password",
-		ref: m,
+var PasswordInput = React$1.forwardRef(({ className, hidePasswordText = "Hide password", showPasswordText = "Show password", size = "md", ...restProps }, ref) => {
+	const [isPasswordVisible, setIsPasswordVisible] = useState(false);
+	const togglePasswordVisibility = () => setIsPasswordVisible((currentState) => !currentState);
+	const iconSize = React$1.useMemo(() => getFieldIconSize(size), [size]);
+	return /* @__PURE__ */ React$1.createElement("div", { className: clsx("relative", className) }, /* @__PURE__ */ React$1.createElement(Input, {
+		...restProps,
+		size,
+		type: isPasswordVisible ? "text" : "password",
+		ref,
 		className: "pr-6"
-	}), /* @__PURE__ */ a.createElement(t, {
+	}), /* @__PURE__ */ React$1.createElement(ActionIcon, {
 		appearance: "simple",
 		theme: "neutral",
-		label: h ? u : d,
-		onClick: _,
+		label: isPasswordVisible ? hidePasswordText : showPasswordText,
+		onClick: togglePasswordVisibility,
 		onMouseDown: (e) => e.preventDefault(),
-		size: v,
-		className: i(f === "lg" ? "bottom-1" : "bottom-0", "absolute", "right-0")
-	}, /* @__PURE__ */ a.createElement(e, { is: h ? s : c })));
+		size: iconSize,
+		className: clsx(size === "lg" ? "bottom-1" : "bottom-0", "absolute", "right-0")
+	}, /* @__PURE__ */ React$1.createElement(Icon, { is: isPasswordVisible ? Eye : EyeCrossed })));
 });
-l.displayName = "PasswordInput";
+PasswordInput.displayName = "PasswordInput";
 //#endregion
-export { l as PasswordInput };
+export { PasswordInput };
 
 //# sourceMappingURL=PasswordInput.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"PasswordInput.js","names":[],"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/ActionIcon'\nimport { Icon } from '~/components/icon/Icon'\nimport type { InputProps } from '~/components/input/Input'\nimport { Input } from '~/components/input/Input'\nimport { getFieldIconSize } from '~/utilities/style/get-icon-size'\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"],"mappings":";;;;;;;;;AAgBA,IAAa,IAAgB,EAAM,YAK/B,EACE,cACA,sBAAmB,iBACnB,sBAAmB,iBACnB,UAAO,MACP,GAAG,KAEL,MACG;CACH,IAAM,CAAC,GAAmB,KAAwB,EAAkB,GAAM,EACpE,UACJ,GAAsB,MAAiB,CAAC,EAAa,EAEjD,IAAW,EAAM,cAAc,EAAiB,EAAK,EAAE,CAAC,EAAK,CAAC;AAEpE,QACE,kBAAA,cAAC,OAAD,EAAK,WAAW,EAAK,YAAY,EAAU,EAuBrC,EAtBJ,kBAAA,cAAC,GAAD;EACE,GAAI;EACE;EACN,MAAM,IAAoB,SAAS;EAC9B;EACL,WAAU;EACV,CAAA,EACF,kBAAA,cAAC,GAAD;EACE,YAAW;EACX,OAAM;EACN,OAAO,IAAoB,IAAmB;EAC9C,SAAS;EACT,cAAc,MAAM,EAAE,gBAAgB;EACtC,MAAM;EACN,WAAW,EACT,MAAS,OAAO,aAAa,YAC7B,YACA,UACD;EAGU,EADX,kBAAA,cAAC,GAAD,EAAM,IAAI,IAAoB,IAAM,GAAc,CAAA,CACvC,CACT;EAGX;AAED,EAAc,cAAc"}
+{"version":3,"file":"PasswordInput.js","names":[],"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/ActionIcon'\nimport { Icon } from '~/components/icon/Icon'\nimport type { InputProps } from '~/components/input/Input'\nimport { Input } from '~/components/input/Input'\nimport { getFieldIconSize } from '~/utilities/style/get-icon-size'\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"],"mappings":";;;;;;;;;AAgBA,IAAa,gBAAgB,QAAM,YAK/B,EACE,WACA,mBAAmB,iBACnB,mBAAmB,iBACnB,OAAO,MACP,GAAG,aAEL,QACG;CACH,MAAM,CAAC,mBAAmB,wBAAwB,SAAkB,MAAM;CAC1E,MAAM,iCACJ,sBAAsB,iBAAiB,CAAC,aAAa;CAEvD,MAAM,WAAW,QAAM,cAAc,iBAAiB,KAAK,EAAE,CAAC,KAAK,CAAC;AAEpE,QACE,wBAAA,cAAC,OAAD,EAAK,WAAW,KAAK,YAAY,UAAU,EAuBrC,EAtBJ,wBAAA,cAAC,OAAD;EACE,GAAI;EACE;EACN,MAAM,oBAAoB,SAAS;EAC9B;EACL,WAAU;EACV,CAAA,EACF,wBAAA,cAAC,YAAD;EACE,YAAW;EACX,OAAM;EACN,OAAO,oBAAoB,mBAAmB;EAC9C,SAAS;EACT,cAAc,MAAM,EAAE,gBAAgB;EACtC,MAAM;EACN,WAAW,KACT,SAAS,OAAO,aAAa,YAC7B,YACA,UACD;EAGU,EADX,wBAAA,cAAC,MAAD,EAAM,IAAI,oBAAoB,MAAM,YAAc,CAAA,CACvC,CACT;EAGX;AAED,cAAc,cAAc"}

package/dist/components/popover/Popover.js

@@ -1,14 +1,14 @@
-import { PopoverContent as e } from "./PopoverContent.js";
-import { Anchor as t, Portal as n, Root as r, Trigger as i } from "@radix-ui/react-popover";
+import { PopoverContent } from "./PopoverContent.js";
+import { Anchor, Portal, Root, Trigger } from "@radix-ui/react-popover";
 //#region src/components/popover/Popover.tsx
-var a = Object.assign(r, {
-	Content: e,
-	Portal: n,
-	Anchor: t,
-	Trigger: i
+var Popover = Object.assign(Root, {
+	Content: PopoverContent,
+	Portal,
+	Anchor,
+	Trigger
 });
-r.displayName = "Popover";
+Root.displayName = "Popover";
 //#endregion
-export { a as Popover };
+export { Popover };
 
 //# sourceMappingURL=Popover.js.map

package/dist/components/popover/Popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.js","names":[],"sources":["../../../src/components/popover/Popover.tsx"],"sourcesContent":["import { Anchor, Portal, Root, Trigger } from '@radix-ui/react-popover'\n\nimport { PopoverContent } from './PopoverContent'\n\nexport const Popover = Object.assign(Root, {\n  Content: PopoverContent,\n  Portal,\n  Anchor,\n  Trigger\n})\n\nRoot.displayName = 'Popover'\n"],"mappings":";;;AAIA,IAAa,IAAU,OAAO,OAAO,GAAM;CACzC,SAAS;CACT;CACA;CACA;CACD,CAAC;AAEF,EAAK,cAAc"}
+{"version":3,"file":"Popover.js","names":[],"sources":["../../../src/components/popover/Popover.tsx"],"sourcesContent":["import { Anchor, Portal, Root, Trigger } from '@radix-ui/react-popover'\n\nimport { PopoverContent } from './PopoverContent'\n\nexport const Popover = Object.assign(Root, {\n  Content: PopoverContent,\n  Portal,\n  Anchor,\n  Trigger\n})\n\nRoot.displayName = 'Popover'\n"],"mappings":";;;AAIA,IAAa,UAAU,OAAO,OAAO,MAAM;CACzC,SAAS;CACT;CACA;CACA;CACD,CAAC;AAEF,KAAK,cAAc"}

package/dist/components/popover/PopoverContent.js

@@ -1,11 +1,11 @@
-import { styled as e } from "../../styled.js";
-import { Icon as t } from "../icon/Icon.js";
-import { ActionIcon as n } from "../action-icon/ActionIcon.js";
-import * as r from "react";
-import { Close as i } from "@atom-learning/icons";
-import { Arrow as a, Close as o, Content as s } from "@radix-ui/react-popover";
+import { styled } from "../../styled.js";
+import { Icon } from "../icon/Icon.js";
+import { ActionIcon } from "../action-icon/ActionIcon.js";
+import * as React$1 from "react";
+import { Close } from "@atom-learning/icons";
+import { Arrow, Close as Close$1, Content } from "@radix-ui/react-popover";
 //#region src/components/popover/PopoverContent.tsx
-var c = e(s, {
+var StyledContent = styled(Content, {
 	base: [
 		"bg-white",
 		"rounded-md",
@@ -31,27 +31,29 @@ var c = e(s, {
 		md: ["max-w-100"],
 		lg: ["max-w-150"]
 	} }
-}), l = e(a, { base: [
+});
+var StyledArrow = styled(Arrow, { base: [
 	"fill-white",
 	"z-1",
 	"in-data-[align=end]:mx-6"
-] }), u = ({ children: e, side: a = "top", sideOffset: s = 8, closePopoverText: u = "Close popover", showCloseButton: d = !0, size: f = "md", ...p }) => /* @__PURE__ */ r.createElement(c, {
-	size: f,
-	side: a,
-	sideOffset: s,
-	...p
-}, d && /* @__PURE__ */ r.createElement(n, {
-	as: o,
-	label: u,
+] });
+var PopoverContent = ({ children, side = "top", sideOffset = 8, closePopoverText = "Close popover", showCloseButton = true, size = "md", ...remainingProps }) => /* @__PURE__ */ React$1.createElement(StyledContent, {
+	size,
+	side,
+	sideOffset,
+	...remainingProps
+}, showCloseButton && /* @__PURE__ */ React$1.createElement(ActionIcon, {
+	as: Close$1,
+	label: closePopoverText,
 	size: "md",
-	hasTooltip: !1,
+	hasTooltip: false,
 	theme: "neutral",
 	className: "absolute top-0.5 right-0.5"
-}, /* @__PURE__ */ r.createElement(t, { is: i })), e, /* @__PURE__ */ r.createElement(l, {
+}, /* @__PURE__ */ React$1.createElement(Icon, { is: Close })), children, /* @__PURE__ */ React$1.createElement(StyledArrow, {
 	width: 16,
 	height: 8
 }));
 //#endregion
-export { u as PopoverContent };
+export { PopoverContent };
 
 //# sourceMappingURL=PopoverContent.js.map

package/dist/components/popover/PopoverContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"PopoverContent.js","names":[],"sources":["../../../src/components/popover/PopoverContent.tsx"],"sourcesContent":["import { Close as CloseIcon } from '@atom-learning/icons'\nimport { Arrow, Close, Content } from '@radix-ui/react-popover'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\n\nconst StyledContent = styled(Content, {\n  base: [\n    'bg-white',\n    'rounded-md',\n    'shadow-lg',\n    'max-w-[90vw]',\n    'p-6',\n    'pr-10',\n    'relative',\n    'z-10',\n    'will-change-transform',\n    'will-change-opacity',\n    'animation-duration-75',\n    '[--slide-opacity-out:0]',\n    'data-[side=top]:[--slide-direction-out-y:-4px]',\n    'data-[side=right]:[--slide-direction-out-x:4px]',\n    'data-[side=bottom]:[--slide-direction-out-y:4px]',\n    'data-[side=left]:[--slide-direction-out-x:-4px]',\n    'motion-safe:data-[state=open]:animate-slide-direction-in',\n    'motion-safe:data-[state=closed]:animate-slide-direction-out'\n  ],\n  variants: {\n    size: {\n      sm: ['max-w-50'],\n      md: ['max-w-100'],\n      lg: ['max-w-150']\n    }\n  }\n})\n\nconst StyledArrow = styled(Arrow, {\n  base: ['fill-white', 'z-1', 'in-data-[align=end]:mx-6']\n})\n\ntype PopoverContentProps = React.ComponentProps<typeof StyledContent> &\n  React.ComponentProps<typeof Content> & {\n    closePopoverText?: string\n    showCloseButton?: boolean\n  }\n\nexport const PopoverContent = ({\n  children,\n  side = 'top',\n  sideOffset = 8,\n  closePopoverText = 'Close popover',\n  showCloseButton = true,\n  size = 'md',\n  ...remainingProps\n}: PopoverContentProps) => (\n  <StyledContent\n    size={size}\n    side={side}\n    sideOffset={sideOffset}\n    {...remainingProps}\n  >\n    {showCloseButton && (\n      <ActionIcon\n        as={Close}\n        label={closePopoverText}\n        size=\"md\"\n        hasTooltip={false}\n        theme=\"neutral\"\n        className=\"absolute top-0.5 right-0.5\"\n      >\n        <Icon is={CloseIcon} />\n      </ActionIcon>\n    )}\n    {children}\n    <StyledArrow width={16} height={8} />\n  </StyledContent>\n)\n"],"mappings":";;;;;;;AASA,IAAM,IAAgB,EAAO,GAAS;CACpC,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,WAAW;EAChB,IAAI,CAAC,YAAY;EACjB,IAAI,CAAC,YAAY;EAClB,EACF;CACF,CAAC,EAEI,IAAc,EAAO,GAAO,EAChC,MAAM;CAAC;CAAc;CAAO;CAA2B,EACxD,CAAC,EAQW,KAAkB,EAC7B,aACA,UAAO,OACP,gBAAa,GACb,sBAAmB,iBACnB,qBAAkB,IAClB,UAAO,MACP,GAAG,QAEH,kBAAA,cAAC,GAAD;CACQ;CACA;CACM;CACZ,GAAI;CAgBU,EAdb,KACC,kBAAA,cAAC,GAAD;CACE,IAAI;CACJ,OAAO;CACP,MAAK;CACL,YAAY;CACZ,OAAM;CACN,WAAU;CAGC,EADX,kBAAA,cAAC,GAAD,EAAM,IAAI,GAAa,CAAA,CACZ,EAEd,GACD,kBAAA,cAAC,GAAD;CAAa,OAAO;CAAI,QAAQ;CAAK,CAAA,CACvB"}
+{"version":3,"file":"PopoverContent.js","names":[],"sources":["../../../src/components/popover/PopoverContent.tsx"],"sourcesContent":["import { Close as CloseIcon } from '@atom-learning/icons'\nimport { Arrow, Close, Content } from '@radix-ui/react-popover'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\n\nconst StyledContent = styled(Content, {\n  base: [\n    'bg-white',\n    'rounded-md',\n    'shadow-lg',\n    'max-w-[90vw]',\n    'p-6',\n    'pr-10',\n    'relative',\n    'z-10',\n    'will-change-transform',\n    'will-change-opacity',\n    'animation-duration-75',\n    '[--slide-opacity-out:0]',\n    'data-[side=top]:[--slide-direction-out-y:-4px]',\n    'data-[side=right]:[--slide-direction-out-x:4px]',\n    'data-[side=bottom]:[--slide-direction-out-y:4px]',\n    'data-[side=left]:[--slide-direction-out-x:-4px]',\n    'motion-safe:data-[state=open]:animate-slide-direction-in',\n    'motion-safe:data-[state=closed]:animate-slide-direction-out'\n  ],\n  variants: {\n    size: {\n      sm: ['max-w-50'],\n      md: ['max-w-100'],\n      lg: ['max-w-150']\n    }\n  }\n})\n\nconst StyledArrow = styled(Arrow, {\n  base: ['fill-white', 'z-1', 'in-data-[align=end]:mx-6']\n})\n\ntype PopoverContentProps = React.ComponentProps<typeof StyledContent> &\n  React.ComponentProps<typeof Content> & {\n    closePopoverText?: string\n    showCloseButton?: boolean\n  }\n\nexport const PopoverContent = ({\n  children,\n  side = 'top',\n  sideOffset = 8,\n  closePopoverText = 'Close popover',\n  showCloseButton = true,\n  size = 'md',\n  ...remainingProps\n}: PopoverContentProps) => (\n  <StyledContent\n    size={size}\n    side={side}\n    sideOffset={sideOffset}\n    {...remainingProps}\n  >\n    {showCloseButton && (\n      <ActionIcon\n        as={Close}\n        label={closePopoverText}\n        size=\"md\"\n        hasTooltip={false}\n        theme=\"neutral\"\n        className=\"absolute top-0.5 right-0.5\"\n      >\n        <Icon is={CloseIcon} />\n      </ActionIcon>\n    )}\n    {children}\n    <StyledArrow width={16} height={8} />\n  </StyledContent>\n)\n"],"mappings":";;;;;;;AASA,IAAM,gBAAgB,OAAO,SAAS;CACpC,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,WAAW;EAChB,IAAI,CAAC,YAAY;EACjB,IAAI,CAAC,YAAY;EAClB,EACF;CACF,CAAC;AAEF,IAAM,cAAc,OAAO,OAAO,EAChC,MAAM;CAAC;CAAc;CAAO;CAA2B,EACxD,CAAC;AAQF,IAAa,kBAAkB,EAC7B,UACA,OAAO,OACP,aAAa,GACb,mBAAmB,iBACnB,kBAAkB,MAClB,OAAO,MACP,GAAG,qBAEH,wBAAA,cAAC,eAAD;CACQ;CACA;CACM;CACZ,GAAI;CAgBU,EAdb,mBACC,wBAAA,cAAC,YAAD;CACE,IAAI;CACJ,OAAO;CACP,MAAK;CACL,YAAY;CACZ,OAAM;CACN,WAAU;CAGC,EADX,wBAAA,cAAC,MAAD,EAAM,IAAI,OAAa,CAAA,CACZ,EAEd,UACD,wBAAA,cAAC,aAAD;CAAa,OAAO;CAAI,QAAQ;CAAK,CAAA,CACvB"}

package/dist/components/progress-bar/ProgressBar.js

@@ -1,8 +1,8 @@
-import { styled as e } from "../../styled.js";
-import * as t from "react";
-import * as n from "@radix-ui/react-progress";
+import { styled } from "../../styled.js";
+import * as React$1 from "react";
+import * as Progress from "@radix-ui/react-progress";
 //#region src/components/progress-bar/ProgressBar.tsx
-var r = e(n.Root, {
+var StyledProgressBar = styled(Progress.Root, {
 	base: [
 		"rounded-full",
 		"bg-grey-200",
@@ -24,7 +24,8 @@ var r = e(n.Root, {
 			neutral: ["bg-grey-400", "text-grey-800"]
 		}
 	}
-}, { enabledResponsiveVariants: !0 }), i = e(n.Indicator, { base: [
+}, { enabledResponsiveVariants: true });
+var StyledIndicator = styled(Progress.Indicator, { base: [
 	"bg-current",
 	"rounded-full",
 	"box-border",
@@ -33,18 +34,19 @@ var r = e(n.Root, {
 	"transition-all",
 	"duration-300",
 	"ease-out"
-] }), a = ({ value: e, max: n = 100, size: a = "md", theme: o = "primary", ...s }) => /* @__PURE__ */ t.createElement(r, {
-	value: e,
-	max: n,
-	theme: o,
-	size: a,
-	...s
-}, /* @__PURE__ */ t.createElement(i, {
+] });
+var ProgressBar = ({ value, max = 100, size = "md", theme = "primary", ...remainingProps }) => /* @__PURE__ */ React$1.createElement(StyledProgressBar, {
+	value,
+	max,
+	theme,
+	size,
+	...remainingProps
+}, /* @__PURE__ */ React$1.createElement(StyledIndicator, {
 	className: "w-full translate-x-(--progress)",
-	style: { "--progress": `-${100 - (e || 0) / n * 100}%` }
+	style: { "--progress": `-${100 - (value || 0) / max * 100}%` }
 }));
-a.displayName = "ProgressBar";
+ProgressBar.displayName = "ProgressBar";
 //#endregion
-export { a as ProgressBar };
+export { ProgressBar };
 
 //# sourceMappingURL=ProgressBar.js.map

package/dist/components/progress-bar/ProgressBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressBar.js","names":[],"sources":["../../../src/components/progress-bar/ProgressBar.tsx"],"sourcesContent":["import * as Progress from '@radix-ui/react-progress'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nconst StyledProgressBar = styled(\n  Progress.Root,\n  {\n    base: [\n      'rounded-full',\n      'bg-grey-200',\n      'relative',\n      'overflow-hidden',\n      'w-full'\n    ],\n    variants: {\n      size: {\n        sm: ['h-1'],\n        md: ['h-2']\n      },\n      theme: {\n        primary: ['text-primary-800'],\n        info: ['text-info'],\n        success: ['text-success'],\n        warning: ['text-warning'],\n        danger: ['text-danger'],\n        neutral: ['bg-grey-400', 'text-grey-800']\n      }\n    }\n  },\n  { enabledResponsiveVariants: true }\n)\n\nconst StyledIndicator = styled(Progress.Indicator, {\n  base: [\n    'bg-current',\n    'rounded-full',\n    'box-border',\n    'h-full',\n    'absolute',\n    'transition-all',\n    'duration-300',\n    'ease-out'\n  ]\n})\n\ntype ProgressBarProps = React.ComponentPropsWithoutRef<\n  typeof StyledProgressBar\n> &\n  (\n    | { id: string; 'aria-label'?: string }\n    | { 'aria-label': string; id?: string }\n  )\n\nexport const ProgressBar = ({\n  value,\n  max = 100,\n  size = 'md',\n  theme = 'primary',\n  ...remainingProps\n}: ProgressBarProps) => (\n  <StyledProgressBar\n    value={value}\n    max={max}\n    theme={theme}\n    size={size}\n    {...remainingProps}\n  >\n    <StyledIndicator\n      className=\"w-full translate-x-(--progress)\"\n      style={{\n        '--progress': `-${100 - ((value || 0) / max) * 100}%`\n      }}\n    />\n  </StyledProgressBar>\n)\n\nProgressBar.displayName = 'ProgressBar'\n"],"mappings":";;;;AAKA,IAAM,IAAoB,EACxB,EAAS,MACT;CACE,MAAM;EACJ;EACA;EACA;EACA;EACA;EACD;CACD,UAAU;EACR,MAAM;GACJ,IAAI,CAAC,MAAM;GACX,IAAI,CAAC,MAAM;GACZ;EACD,OAAO;GACL,SAAS,CAAC,mBAAmB;GAC7B,MAAM,CAAC,YAAY;GACnB,SAAS,CAAC,eAAe;GACzB,SAAS,CAAC,eAAe;GACzB,QAAQ,CAAC,cAAc;GACvB,SAAS,CAAC,eAAe,gBAAgB;GAC1C;EACF;CACF,EACD,EAAE,2BAA2B,IAAM,CACpC,EAEK,IAAkB,EAAO,EAAS,WAAW,EACjD,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC,EAUW,KAAe,EAC1B,UACA,SAAM,KACN,UAAO,MACP,WAAQ,WACR,GAAG,QAEH,kBAAA,cAAC,GAAD;CACS;CACF;CACE;CACD;CACN,GAAI;CAQc,EANlB,kBAAA,cAAC,GAAD;CACE,WAAU;CACV,OAAO,EACL,cAAc,IAAI,OAAQ,KAAS,KAAK,IAAO,IAAI,IACpD;CACD,CAAA,CACgB;AAGtB,EAAY,cAAc"}
+{"version":3,"file":"ProgressBar.js","names":[],"sources":["../../../src/components/progress-bar/ProgressBar.tsx"],"sourcesContent":["import * as Progress from '@radix-ui/react-progress'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nconst StyledProgressBar = styled(\n  Progress.Root,\n  {\n    base: [\n      'rounded-full',\n      'bg-grey-200',\n      'relative',\n      'overflow-hidden',\n      'w-full'\n    ],\n    variants: {\n      size: {\n        sm: ['h-1'],\n        md: ['h-2']\n      },\n      theme: {\n        primary: ['text-primary-800'],\n        info: ['text-info'],\n        success: ['text-success'],\n        warning: ['text-warning'],\n        danger: ['text-danger'],\n        neutral: ['bg-grey-400', 'text-grey-800']\n      }\n    }\n  },\n  { enabledResponsiveVariants: true }\n)\n\nconst StyledIndicator = styled(Progress.Indicator, {\n  base: [\n    'bg-current',\n    'rounded-full',\n    'box-border',\n    'h-full',\n    'absolute',\n    'transition-all',\n    'duration-300',\n    'ease-out'\n  ]\n})\n\ntype ProgressBarProps = React.ComponentPropsWithoutRef<\n  typeof StyledProgressBar\n> &\n  (\n    | { id: string; 'aria-label'?: string }\n    | { 'aria-label': string; id?: string }\n  )\n\nexport const ProgressBar = ({\n  value,\n  max = 100,\n  size = 'md',\n  theme = 'primary',\n  ...remainingProps\n}: ProgressBarProps) => (\n  <StyledProgressBar\n    value={value}\n    max={max}\n    theme={theme}\n    size={size}\n    {...remainingProps}\n  >\n    <StyledIndicator\n      className=\"w-full translate-x-(--progress)\"\n      style={{\n        '--progress': `-${100 - ((value || 0) / max) * 100}%`\n      }}\n    />\n  </StyledProgressBar>\n)\n\nProgressBar.displayName = 'ProgressBar'\n"],"mappings":";;;;AAKA,IAAM,oBAAoB,OACxB,SAAS,MACT;CACE,MAAM;EACJ;EACA;EACA;EACA;EACA;EACD;CACD,UAAU;EACR,MAAM;GACJ,IAAI,CAAC,MAAM;GACX,IAAI,CAAC,MAAM;GACZ;EACD,OAAO;GACL,SAAS,CAAC,mBAAmB;GAC7B,MAAM,CAAC,YAAY;GACnB,SAAS,CAAC,eAAe;GACzB,SAAS,CAAC,eAAe;GACzB,QAAQ,CAAC,cAAc;GACvB,SAAS,CAAC,eAAe,gBAAgB;GAC1C;EACF;CACF,EACD,EAAE,2BAA2B,MAAM,CACpC;AAED,IAAM,kBAAkB,OAAO,SAAS,WAAW,EACjD,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC;AAUF,IAAa,eAAe,EAC1B,OACA,MAAM,KACN,OAAO,MACP,QAAQ,WACR,GAAG,qBAEH,wBAAA,cAAC,mBAAD;CACS;CACF;CACE;CACD;CACN,GAAI;CAQc,EANlB,wBAAA,cAAC,iBAAD;CACE,WAAU;CACV,OAAO,EACL,cAAc,IAAI,OAAQ,SAAS,KAAK,MAAO,IAAI,IACpD;CACD,CAAA,CACgB;AAGtB,YAAY,cAAc"}