se-design 1.0.90-dev.0 → 1.0.90

package/dist/index31.js

@@ -1,80 +1,140 @@
-import s, { useEffect as N } from "react";
-import { Icon as g } from "./index6.js";
-import { announce as k } from "./index75.js";
-const m = {
-  pageNavigation: "px-[6px] py-[6px] flex items-center justify-center",
-  pageItem: "px-[7px] py-[1px] min-w-[24px] text-sm flex items-center justify-center rounded border hover:cursor-pointer appearance-none focus-outline"
-}, C = ({
-  currentPage: a,
-  itemsPerPage: l,
-  totalItems: i,
-  onPageChange: p,
-  mobileView: u = !1,
-  ariaLabel: b = "Pagination Controls"
-}) => {
-  const o = Math.ceil(i / l), d = 1, v = o, h = (a - 1) * l + 1, c = Math.min(a * l, i), y = c < i, $ = a > 1, f = `Showing ${h}-${c} of ${i}`;
-  N(() => {
-    k(f, {
-      batchId: "pagination-status"
-    });
-  }, [f]);
-  const E = () => {
-    const e = [], t = (n) => {
-      const x = a === n;
-      return /* @__PURE__ */ s.createElement("li", {
-        key: n
-      }, /* @__PURE__ */ s.createElement("button", {
-        type: "button",
-        onClick: () => p(n),
-        className: `${m.pageItem} ${x ? "bg-[var(--color-gray-100)] border-[var(--color-gray-300)]" : "border-[var(--color-gray-200)] hover:bg-[var(--color-gray-50)]"}`,
-        "aria-label": `Page ${n}`,
-        "aria-current": x ? "page" : void 0,
-        "data-automation-id": `page-number-${n}`
-      }, n));
-    }, r = (n) => /* @__PURE__ */ s.createElement("li", {
-      key: n,
-      "aria-hidden": "true"
-    }, /* @__PURE__ */ s.createElement("span", {
-      className: "w-5 h-5 text-sm rounded border border-[var(--color-gray-200)] flex items-end justify-center"
-    }, "..."));
-    if (u)
-      return e.push(t(a)), e;
-    if (a <= 3) {
-      for (let n = 1; n <= Math.min(3, o); n++)
-        e.push(t(n));
-      o > 3 && (e.push(r("ellipsis-end")), e.push(t(o)));
-    } else a >= o - 2 ? (e.push(t(d)), e.push(r("ellipsis-start")), e.push(t(o - 2)), e.push(t(o - 1)), e.push(t(o))) : (e.push(t(d)), e.push(r("ellipsis-start")), e.push(t(a - 1)), e.push(t(a)), e.push(t(a + 1)), e.push(r("ellipsis-end")), e.push(t(v)));
-    return e;
-  };
-  return /* @__PURE__ */ s.createElement("nav", {
-    "aria-label": b,
-    "data-automation-id": "pagination-container",
-    className: "flex items-center gap-1 font-normal"
-  }, /* @__PURE__ */ s.createElement("span", {
-    className: "text-sm text-[var(--color-gray-700)] mr-1",
-    "data-automation-id": "pagination-items-info"
-  }, `${u ? "" : "Showing "}${h}-${c} of ${i}`), /* @__PURE__ */ s.createElement(g, {
-    name: "next",
-    size: 12,
-    ariaLabel: "Previous page",
-    rotation: "180",
-    disabled: !$,
-    onClick: () => p(a - 1),
-    className: `stroke-[var(--color-gray-600)] ${m.pageNavigation}`,
-    automationId: "pagination-previous-button"
-  }), /* @__PURE__ */ s.createElement("ul", {
-    className: "flex items-center gap-1"
-  }, E()), /* @__PURE__ */ s.createElement(g, {
-    name: "next",
-    size: 12,
-    ariaLabel: "Next page",
-    disabled: !y,
-    onClick: () => p(a + 1),
-    className: m.pageNavigation,
-    automationId: "pagination-next-button"
+import e, { forwardRef as K } from "react";
+import { Icon as M } from "./index6.js";
+import { Button as d } from "./index4.js";
+import { useStableId as B } from "./index207.js";
+import { getRegionAttributes as Q } from "./index67.js";
+import { useAccessiblePress as U } from "./index68.js";
+import "./index73.js";
+/* empty css         */
+function m() {
+  return m = Object.assign ? Object.assign.bind() : function(a) {
+    for (var t = 1; t < arguments.length; t++) {
+      var r = arguments[t];
+      for (var o in r) ({}).hasOwnProperty.call(r, o) && (a[o] = r[o]);
+    }
+    return a;
+  }, m.apply(null, arguments);
+}
+const n = {
+  bannerCtn: "relative rounded-[12px] flex pr-3.5",
+  bannerContentCtn: "pt-5 pl-6 pb-5 pr-2 flex flex-col gap-2",
+  bannerLinkCta: "text-[#1088e7] cursor-pointer text-base leading-6 hover: text-[#0078d4]",
+  bannerImageCtn: "flex",
+  bannerCloseIconCtn: "absolute top-[12px] right-[12px] cursor-pointer hover:bg-[var(--color-gray-100)] rounded-full p-1 inline-flex items-center justify-center",
+  bannerButton: "self-start"
+}, re = /* @__PURE__ */ K((a, t) => {
+  const {
+    bannerClassName: r,
+    bannerBgColor: o,
+    title: E,
+    titleTag: P = "span",
+    description: b,
+    hasImage: L,
+    imagePosition: s = "right",
+    imageWidth: T = "30%",
+    imageAlt: $ = "",
+    hasCloseIcon: j,
+    closeIconName: A,
+    onClose: w,
+    onBannerClick: i,
+    hasLinkCta: p,
+    onCtaClick: u,
+    onSecondaryCtaClick: R,
+    hasButtonCta: C,
+    buttonType: S = "secondary",
+    ctaText: g,
+    ctaAriaLabel: f,
+    hasSecondaryButtonCta: y = !1,
+    secondaryButtonType: O = "secondary",
+    secondaryCtaText: _,
+    secondaryCtaAriaLabel: z,
+    automationId: F = "",
+    titleId: c,
+    disabledPrimaryButton: W = !1,
+    customContent: x = null
+  } = a, I = i ? "cursor-pointer" : "", h = B(c, "banner-title"), k = B(void 0, "banner-description"), l = Q({
+    titleId: h,
+    descriptionId: b ? k : void 0,
+    isFocusable: !!c
+  }), v = C || p || y, {
+    pressProps: q,
+    role: D,
+    tabIndex: G
+  } = U({
+    isNative: !1,
+    onClick: i && !v ? () => i() : void 0
+  }), H = i ? v ? {
+    onClick: () => i()
+  } : {
+    ...q,
+    role: D,
+    tabIndex: G
+  } : {}, N = () => L && /* @__PURE__ */ e.createElement("div", {
+    className: `${n.bannerImageCtn} ${I} banner-image-ctn ${s === "right" ? "mr-5 ml-0 justify-end" : "ml-5 mr-0 justify-start"} min-h-full`,
+    style: {
+      width: T
+    },
+    "aria-hidden": "true"
+  }, /* @__PURE__ */ e.createElement("img", {
+    src: a.bannerImage,
+    alt: $,
+    className: "max-w-[initial] h-[initial] max-h-[150px] object-contain"
   }));
-};
+  return /* @__PURE__ */ e.createElement("div", {
+    ref: t,
+    className: `${n.bannerCtn} ${I} ${r} banner-ctn`,
+    style: {
+      backgroundColor: o
+    },
+    "data-automation-id": F,
+    role: l.role,
+    "aria-labelledby": l["aria-labelledby"],
+    "aria-describedby": l["aria-describedby"],
+    tabIndex: l.tabIndex
+  }, s === "left" && N(), /* @__PURE__ */ e.createElement("div", m({
+    className: `${n.bannerContentCtn} w-[100%] banner-content-ctn`
+  }, H), /* @__PURE__ */ e.createElement(P, {
+    id: h,
+    className: "banner-title",
+    tabIndex: c ? -1 : void 0
+  }, E), x ? /* @__PURE__ */ e.createElement(e.Fragment, null, x) : /* @__PURE__ */ e.createElement("span", {
+    id: k,
+    className: "banner-description"
+  }, b), /* @__PURE__ */ e.createElement("div", {
+    className: "flex gap-3",
+    onClick: (J) => J.stopPropagation()
+  }, p && /* @__PURE__ */ e.createElement(d, {
+    type: "link",
+    className: n.bannerLinkCta,
+    onClick: u,
+    label: g,
+    ariaLabel: f
+  }), C && /* @__PURE__ */ e.createElement(d, {
+    type: S,
+    size: "sm",
+    label: g,
+    onClick: u,
+    className: n?.bannerButton,
+    "data-automation-id": "banner-main-cta",
+    ariaLabel: f,
+    disabled: W
+  }), y && /* @__PURE__ */ e.createElement(d, {
+    type: O,
+    size: "sm",
+    label: _,
+    onClick: R,
+    className: n?.secondaryBannerButton,
+    "data-automation-id": "banner-secondary-cta",
+    ariaLabel: z
+  }))), s === "right" && N(), j && /* @__PURE__ */ e.createElement(M, {
+    name: A,
+    className: n.bannerCloseIconCtn,
+    onClick: w,
+    ariaLabel: "Close banner",
+    shouldStopPropagation: !0
+  }));
+});
 export {
-  C as Pagination
+  re as Banner
 };
 //# sourceMappingURL=index31.js.map

package/dist/index31.js.map

@@ -1 +1 @@
-{"version":3,"file":"index31.js","sources":["../src/components/Pagination/index.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\n\nimport { Icon } from 'components/Icon';\nimport { announce } from 'src/utils/a11y/liveAnnouncer/LiveAnnouncer';\n\ninterface PaginationProps {\n  currentPage: number;\n  itemsPerPage: number;\n  totalItems: number;\n  onPageChange: (page: number) => void;\n  mobileView?: boolean;\n  ariaLabel?: string;\n}\n\nconst paginationClassNames = {\n  pageNavigation: \"px-[6px] py-[6px] flex items-center justify-center\",\n  pageItem: \"px-[7px] py-[1px] min-w-[24px] text-sm flex items-center justify-center rounded border hover:cursor-pointer appearance-none focus-outline\"\n}\n\nexport const Pagination: React.FC<PaginationProps> = ({ currentPage, itemsPerPage, totalItems, onPageChange, mobileView = false, ariaLabel = 'Pagination Controls' }) => {\n  const totalPages = Math.ceil(totalItems / itemsPerPage);\n  const firstPage = 1;\n  const lastPage = totalPages;\n  const startItem = (currentPage - 1) * itemsPerPage + 1;\n  const endItem = Math.min(currentPage * itemsPerPage, totalItems);\n  const hasNextPage = endItem < totalItems;\n  const hasPrevPage = currentPage > 1;\n\n  const showingText = `Showing ${startItem}-${endItem} of ${totalItems}`;\n\n  useEffect(() => {\n    announce(showingText, { batchId: 'pagination-status' });\n  }, [showingText]);\n\n  const renderPageNumbers = () => {\n    const pages: React.ReactNode[] = [];\n\n    const renderPageNumber = (pageNum: number) => {\n      const isActive = currentPage === pageNum;\n      return (\n        <li key={pageNum}>\n          <button\n            type=\"button\"\n            onClick={() => onPageChange(pageNum)}\n            className={`${paginationClassNames.pageItem} ${isActive ? 'bg-[var(--color-gray-100)] border-[var(--color-gray-300)]' : 'border-[var(--color-gray-200)] hover:bg-[var(--color-gray-50)]'}`}\n            aria-label={`Page ${pageNum}`}\n            aria-current={isActive ? 'page' : undefined}\n            data-automation-id={`page-number-${pageNum}`}\n          >\n            {pageNum}\n          </button>\n        </li>\n      );\n    };\n\n    const renderEllipsis = (key: string) => {\n      return (\n        <li key={key} aria-hidden=\"true\">\n          <span className=\"w-5 h-5 text-sm rounded border border-[var(--color-gray-200)] flex items-end justify-center\">\n            ...\n          </span>\n        </li>\n      );\n    };\n\n    if (mobileView) {\n      pages.push(renderPageNumber(currentPage));\n      return pages;\n    }\n    if (currentPage <= 3) {\n      for (let i = 1; i <= Math.min(3, totalPages); i++) {\n        pages.push(renderPageNumber(i));\n      }\n\n      if (totalPages > 3) {\n        pages.push(renderEllipsis(\"ellipsis-end\"));\n        pages.push(renderPageNumber(totalPages));\n      }\n    } else if (currentPage >= totalPages - 2) {\n      pages.push(renderPageNumber(firstPage));\n      pages.push(renderEllipsis(\"ellipsis-start\"));\n      pages.push(renderPageNumber(totalPages - 2));\n      pages.push(renderPageNumber(totalPages - 1));\n      pages.push(renderPageNumber(totalPages));\n    } else {\n      pages.push(renderPageNumber(firstPage));\n      pages.push(renderEllipsis(\"ellipsis-start\"));\n      pages.push(renderPageNumber(currentPage - 1));\n      pages.push(renderPageNumber(currentPage));\n      pages.push(renderPageNumber(currentPage + 1));\n      pages.push(renderEllipsis(\"ellipsis-end\"));\n      pages.push(renderPageNumber(lastPage));\n    }\n\n    return pages;\n  };\n\n  return (\n    <nav aria-label={ariaLabel} data-automation-id=\"pagination-container\" className=\"flex items-center gap-1 font-normal\">\n      <span\n        className=\"text-sm text-[var(--color-gray-700)] mr-1\"\n        data-automation-id=\"pagination-items-info\"\n      >\n        {`${mobileView ? \"\" : \"Showing \"}${startItem}-${endItem} of ${totalItems}`}\n      </span>\n      <Icon\n        name=\"next\"\n        size={12}\n        ariaLabel=\"Previous page\"\n        rotation=\"180\"\n        disabled={!hasPrevPage}\n        onClick={() => onPageChange(currentPage - 1)}\n        className={`stroke-[var(--color-gray-600)] ${paginationClassNames.pageNavigation}`}\n        automationId=\"pagination-previous-button\"\n      />\n      <ul className=\"flex items-center gap-1\">\n        {renderPageNumbers()}\n      </ul>\n      <Icon\n        name=\"next\"\n        size={12}\n        ariaLabel=\"Next page\"\n        disabled={!hasNextPage}\n        onClick={() => onPageChange(currentPage + 1)}\n        className={paginationClassNames.pageNavigation}\n        automationId=\"pagination-next-button\"\n      />\n    </nav>\n  );\n};\n"],"names":["React__default","useEffect","Icon","announce","paginationClassNames","pageNavigation","pageItem","Pagination","currentPage","itemsPerPage","totalItems","onPageChange","mobileView","ariaLabel","totalPages","Math","ceil","firstPage","lastPage","startItem","endItem","min","hasNextPage","hasPrevPage","showingText","batchId","renderPageNumbers","pages","renderPageNumber","pageNum","isActive","React","createElement","key","type","onClick","className","undefined","renderEllipsis","push","i","name","size","rotation","disabled","automationId"],"mappings":"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"}
+{"version":3,"file":"index31.js","sources":["../src/components/Banner/index.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { Map } from '../../utils/common.types';\nimport { Icon } from 'components/Icon';\nimport { Button } from 'components/Button';\nimport { useStableId } from '../../utils/useStableId';\nimport { useAccessiblePress } from '../../utils/a11y';\nimport { getRegionAttributes } from '../../utils/a11y/regionAttributes';\nimport './style.scss';\n\nexport interface BannerProps {\n  bannerClassName?: string | '';\n  bannerBgColor?: string | '';\n  title: string | '';\n  titleTag?: 'span' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n  description: string | '';\n  customContent?: React.ReactNode;\n  hasImage?: boolean | false;\n  imagePosition?: 'left' | 'right' | '';\n  imageWidth?: string | '30%';\n  imageAlt?: string | '';\n  bannerImage: string | '';\n  hasCloseIcon?: boolean | false;\n  closeIconName: string | '';\n  onClose: () => void | (() => {});\n  onBannerClick?: () => void | (() => {});\n  hasButtonCta?: boolean | false;\n  hasSecondaryButtonCta?: boolean | false;\n  buttonType?: 'primary' | 'secondary' | 'link';\n  secondaryButtonType?: 'primary' | 'secondary' | 'ghost' | 'link';\n  hasLinkCta?: boolean | false;\n  ctaText: string | '';\n  secondaryCtaText: string | '';\n  onCtaClick: () => void | (() => {});\n  onSecondaryCtaClick: () => void | (() => {});\n  /**\n   * Accessible name for primary CTA button (screen reader only, if different from visible label).\n   */\n  ctaAriaLabel?: string;\n  /**\n   * Accessible name for secondary CTA button (screen reader only, if different from visible label).\n   */\n  secondaryCtaAriaLabel?: string;\n  automationId?: string;\n  // Optional title ID for external control (e.g., focus management)\n  titleId?: string;\n  disabledPrimaryButton?: boolean;\n}\n\nconst classNames: Map = {\n  bannerCtn: `relative rounded-[12px] flex pr-3.5`,\n  bannerContentCtn: 'pt-5 pl-6 pb-5 pr-2 flex flex-col gap-2',\n  bannerLinkCta: 'text-[#1088e7] cursor-pointer text-base leading-6 hover: text-[#0078d4]',\n  bannerImageCtn: 'flex',\n  bannerCloseIconCtn:\n    'absolute top-[12px] right-[12px] cursor-pointer hover:bg-[var(--color-gray-100)] rounded-full p-1 inline-flex items-center justify-center',\n  bannerButton: 'self-start'\n};\n\nexport const Banner = forwardRef<HTMLDivElement, BannerProps>((props, ref) => {\n  const {\n    bannerClassName,\n    bannerBgColor,\n    title,\n    titleTag: TitleTag = 'span',\n    description,\n    hasImage,\n    imagePosition = 'right',\n    imageWidth = '30%',\n    imageAlt = '',\n    hasCloseIcon,\n    closeIconName,\n    onClose,\n    onBannerClick,\n    hasLinkCta,\n    onCtaClick,\n    onSecondaryCtaClick,\n    hasButtonCta,\n    buttonType = 'secondary',\n    ctaText,\n    ctaAriaLabel,\n    hasSecondaryButtonCta = false,\n    secondaryButtonType = 'secondary',\n    secondaryCtaText,\n    secondaryCtaAriaLabel,\n    automationId = '',\n    titleId: providedTitleId,\n    disabledPrimaryButton = false,\n    customContent = null\n  } = props;\n\n  const isClickableClass = onBannerClick ? 'cursor-pointer' : '';\n  const titleId = useStableId(providedTitleId, 'banner-title');\n  const descriptionId = useStableId(undefined, 'banner-description');\n\n  const regionAttributes = getRegionAttributes({\n    titleId,\n    descriptionId: description ? descriptionId : undefined,\n    isFocusable: !!providedTitleId\n  });\n\n  // When CTA buttons exist, they are the keyboard-accessible targets — the content area\n  // only gets onClick for mouse users (no role/tabIndex to avoid nesting interactive elements).\n  // When no CTA buttons exist, the content area is the sole interactive path and gets full a11y.\n  const hasCta = hasButtonCta || hasLinkCta || hasSecondaryButtonCta;\n\n  const { pressProps: bannerContentPressProps, role: bannerContentRole, tabIndex: bannerContentTabIndex } =\n    useAccessiblePress({\n      isNative: false,\n      onClick: onBannerClick && !hasCta ? () => onBannerClick() : undefined\n    });\n\n  const bannerContentClickableProps = onBannerClick\n    ? hasCta\n      ? { onClick: () => onBannerClick() }\n      : {\n          ...bannerContentPressProps,\n          role: bannerContentRole,\n          tabIndex: bannerContentTabIndex\n        }\n    : {};\n\n  const renderImage = () =>\n    hasImage && (\n      <div\n        className={`${classNames.bannerImageCtn} ${isClickableClass} banner-image-ctn ${imagePosition === 'right' ? 'mr-5 ml-0 justify-end' : 'ml-5 mr-0 justify-start'} min-h-full`}\n        style={{ width: imageWidth }}\n        aria-hidden=\"true\"\n      >\n        <img src={props.bannerImage} alt={imageAlt} className=\"max-w-[initial] h-[initial] max-h-[150px] object-contain\" />\n      </div>\n    );\n\n  return (\n    <div \n      ref={ref}\n      className={`${classNames.bannerCtn} ${isClickableClass} ${bannerClassName} banner-ctn`} \n      style={{ backgroundColor: bannerBgColor }} \n      data-automation-id={automationId}\n      role={regionAttributes.role}\n      aria-labelledby={regionAttributes['aria-labelledby']}\n      aria-describedby={regionAttributes['aria-describedby']}\n      tabIndex={regionAttributes.tabIndex}\n    >\n      {imagePosition === 'left' && renderImage()}\n      <div \n        className={`${classNames.bannerContentCtn} w-[100%] banner-content-ctn`} \n        {...bannerContentClickableProps}\n      >\n        <TitleTag id={titleId} className=\"banner-title\" tabIndex={providedTitleId ? -1 : undefined}>{title}</TitleTag>\n        {customContent ? <>{customContent}</> :\n        <span id={descriptionId} className=\"banner-description\">{description}</span>}\n        <div className=\"flex gap-3\" onClick={(e) => e.stopPropagation()}>\n          {hasLinkCta && (\n            <Button\n              type=\"link\"\n              className={classNames.bannerLinkCta}\n              onClick={onCtaClick}\n              label={ctaText}\n              ariaLabel={ctaAriaLabel}\n            />\n          )}\n          {hasButtonCta && (\n            <Button\n              type={buttonType}\n              size=\"sm\"\n              label={ctaText}\n              onClick={onCtaClick}\n              className={classNames?.bannerButton}\n              data-automation-id=\"banner-main-cta\"\n              ariaLabel={ctaAriaLabel}\n              disabled={disabledPrimaryButton}\n            />\n          )}\n          {hasSecondaryButtonCta && (\n            <Button\n              type={secondaryButtonType}\n              size=\"sm\"\n              label={secondaryCtaText}\n              onClick={onSecondaryCtaClick}\n              className={classNames?.secondaryBannerButton}\n              data-automation-id=\"banner-secondary-cta\"\n              ariaLabel={secondaryCtaAriaLabel}\n            />\n          )}\n        </div>\n      </div>\n      {imagePosition === 'right' && renderImage()}\n      {hasCloseIcon && (\n        <Icon\n          name={closeIconName}\n          className={classNames.bannerCloseIconCtn}\n          onClick={onClose}\n          ariaLabel=\"Close banner\"\n          shouldStopPropagation\n        />\n      )}\n    </div>\n  );\n});\n"],"names":["classNames","bannerCtn","bannerContentCtn","bannerLinkCta","bannerImageCtn","bannerCloseIconCtn","bannerButton","Banner","forwardRef","props","ref","bannerClassName","bannerBgColor","title","titleTag","TitleTag","description","hasImage","imagePosition","imageWidth","imageAlt","hasCloseIcon","closeIconName","onClose","onBannerClick","hasLinkCta","onCtaClick","onSecondaryCtaClick","hasButtonCta","buttonType","ctaText","ctaAriaLabel","hasSecondaryButtonCta","secondaryButtonType","secondaryCtaText","secondaryCtaAriaLabel","automationId","titleId","providedTitleId","disabledPrimaryButton","customContent","isClickableClass","useStableId","descriptionId","undefined","regionAttributes","getRegionAttributes","isFocusable","hasCta","pressProps","bannerContentPressProps","role","bannerContentRole","tabIndex","bannerContentTabIndex","useAccessiblePress","isNative","onClick","bannerContentClickableProps","renderImage","React","createElement","className","style","width","src","bannerImage","alt","backgroundColor","_extends","id","Fragment","e","stopPropagation","Button","type","label","ariaLabel","size","disabled","secondaryBannerButton","Icon","name","shouldStopPropagation"],"mappings":";;;;;;;;;;;;;;;;;AAgDA,MAAMA,IAAkB;AAAA,EACtBC,WAAW;AAAA,EACXC,kBAAkB;AAAA,EAClBC,eAAe;AAAA,EACfC,gBAAgB;AAAA,EAChBC,oBACE;AAAA,EACFC,cAAc;AAChB,GAEaC,KAASC,gBAAAA,EAAwC,CAACC,GAAOC,MAAQ;AAC5E,QAAM;AAAA,IACJC,iBAAAA;AAAAA,IACAC,eAAAA;AAAAA,IACAC,OAAAA;AAAAA,IACAC,UAAUC,IAAW;AAAA,IACrBC,aAAAA;AAAAA,IACAC,UAAAA;AAAAA,IACAC,eAAAA,IAAgB;AAAA,IAChBC,YAAAA,IAAa;AAAA,IACbC,UAAAA,IAAW;AAAA,IACXC,cAAAA;AAAAA,IACAC,eAAAA;AAAAA,IACAC,SAAAA;AAAAA,IACAC,eAAAA;AAAAA,IACAC,YAAAA;AAAAA,IACAC,YAAAA;AAAAA,IACAC,qBAAAA;AAAAA,IACAC,cAAAA;AAAAA,IACAC,YAAAA,IAAa;AAAA,IACbC,SAAAA;AAAAA,IACAC,cAAAA;AAAAA,IACAC,uBAAAA,IAAwB;AAAA,IACxBC,qBAAAA,IAAsB;AAAA,IACtBC,kBAAAA;AAAAA,IACAC,uBAAAA;AAAAA,IACAC,cAAAA,IAAe;AAAA,IACfC,SAASC;AAAAA,IACTC,uBAAAA,IAAwB;AAAA,IACxBC,eAAAA,IAAgB;AAAA,EAAA,IACd/B,GAEEgC,IAAmBjB,IAAgB,mBAAmB,IACtDa,IAAUK,EAAYJ,GAAiB,cAAc,GACrDK,IAAgBD,EAAYE,QAAW,oBAAoB,GAE3DC,IAAmBC,EAAoB;AAAA,IAC3CT,SAAAA;AAAAA,IACAM,eAAe3B,IAAc2B,IAAgBC;AAAAA,IAC7CG,aAAa,CAAC,CAACT;AAAAA,EAAAA,CAChB,GAKKU,IAASpB,KAAgBH,KAAcO,GAEvC;AAAA,IAAEiB,YAAYC;AAAAA,IAAyBC,MAAMC;AAAAA,IAAmBC,UAAUC;AAAAA,EAAAA,IAC9EC,EAAmB;AAAA,IACjBC,UAAU;AAAA,IACVC,SAASjC,KAAiB,CAACwB,IAAS,MAAMxB,MAAkBoB;AAAAA,EAAAA,CAC7D,GAEGc,IAA8BlC,IAChCwB,IACE;AAAA,IAAES,SAASA,MAAMjC,EAAAA;AAAAA,EAAc,IAC/B;AAAA,IACE,GAAG0B;AAAAA,IACHC,MAAMC;AAAAA,IACNC,UAAUC;AAAAA,EAAAA,IAEd,CAAA,GAEEK,IAAcA,MAClB1C,KACE2C,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEC,WAAW,GAAG9D,EAAWI,cAAc,IAAIqC,CAAgB,qBAAqBvB,MAAkB,UAAU,0BAA0B,yBAAyB;AAAA,IAC/J6C,OAAO;AAAA,MAAEC,OAAO7C;AAAAA,IAAAA;AAAAA,IAChB,eAAY;AAAA,EAAA,GAEZyC,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKI,KAAKxD,EAAMyD;AAAAA,IAAaC,KAAK/C;AAAAA,IAAU0C,WAAU;AAAA,EAAA,CAA4D,CAC/G;AAGT,SACEF,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEnD,KAAAA;AAAAA,IACAoD,WAAW,GAAG9D,EAAWC,SAAS,IAAIwC,CAAgB,IAAI9B,CAAe;AAAA,IACzEoD,OAAO;AAAA,MAAEK,iBAAiBxD;AAAAA,IAAAA;AAAAA,IAC1B,sBAAoBwB;AAAAA,IACpBe,MAAMN,EAAiBM;AAAAA,IACvB,mBAAiBN,EAAiB,iBAAiB;AAAA,IACnD,oBAAkBA,EAAiB,kBAAkB;AAAA,IACrDQ,UAAUR,EAAiBQ;AAAAA,EAAAA,GAE1BnC,MAAkB,UAAUyC,EAAAA,GAC7BC,gBAAAA,EAAAC,cAAA,OAAAQ,EAAA;AAAA,IACEP,WAAW,GAAG9D,EAAWE,gBAAgB;AAAA,EAAA,GACrCwD,CAA2B,GAE/BE,gBAAAA,EAAAC,cAAC9C,GAAQ;AAAA,IAACuD,IAAIjC;AAAAA,IAASyB,WAAU;AAAA,IAAeT,UAAUf,IAAkB,KAAKM;AAAAA,EAAAA,GAAY/B,CAAgB,GAC5G2B,IAAgBoB,gBAAAA,EAAAC,cAAAD,EAAAW,UAAA,MAAG/B,CAAgB,IACpCoB,gBAAAA,EAAAC,cAAA,QAAA;AAAA,IAAMS,IAAI3B;AAAAA,IAAemB,WAAU;AAAA,EAAA,GAAsB9C,CAAkB,GAC3E4C,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,IAAaL,SAAUe,CAAAA,MAAMA,EAAEC,gBAAAA;AAAAA,EAAgB,GAC3DhD,KACCmC,gBAAAA,EAAAC,cAACa,GAAM;AAAA,IACLC,MAAK;AAAA,IACLb,WAAW9D,EAAWG;AAAAA,IACtBsD,SAAS/B;AAAAA,IACTkD,OAAO9C;AAAAA,IACP+C,WAAW9C;AAAAA,EAAAA,CACZ,GAEFH,KACCgC,gBAAAA,EAAAC,cAACa,GAAM;AAAA,IACLC,MAAM9C;AAAAA,IACNiD,MAAK;AAAA,IACLF,OAAO9C;AAAAA,IACP2B,SAAS/B;AAAAA,IACToC,WAAW9D,GAAYM;AAAAA,IACvB,sBAAmB;AAAA,IACnBuE,WAAW9C;AAAAA,IACXgD,UAAUxC;AAAAA,EAAAA,CACX,GAEFP,KACC4B,gBAAAA,EAAAC,cAACa,GAAM;AAAA,IACLC,MAAM1C;AAAAA,IACN6C,MAAK;AAAA,IACLF,OAAO1C;AAAAA,IACPuB,SAAS9B;AAAAA,IACTmC,WAAW9D,GAAYgF;AAAAA,IACvB,sBAAmB;AAAA,IACnBH,WAAW1C;AAAAA,EAAAA,CACZ,CAEA,CACF,GACJjB,MAAkB,WAAWyC,EAAAA,GAC7BtC,KACCuC,gBAAAA,EAAAC,cAACoB,GAAI;AAAA,IACHC,MAAM5D;AAAAA,IACNwC,WAAW9D,EAAWK;AAAAA,IACtBoD,SAASlC;AAAAA,IACTsD,WAAU;AAAA,IACVM,uBAAqB;AAAA,EAAA,CACtB,CAEA;AAET,CAAC;"}

package/dist/index32.js

@@ -1,101 +1,80 @@
-import e from "react";
-import { Button as N } from "./index4.js";
-import { Badge as I } from "./index10.js";
+import s, { useEffect as N } from "react";
 import { Icon as g } from "./index6.js";
-/* empty css         */
-const t = {
-  widgetCtn: "flex flex-col gap-[2px] align-center border border-[var(--color-gray-200)] rounded-[12px] w-[385px]",
-  widgetImageCtn: "cursor-pointer",
-  descriptionCtn: "p-4 flex flex-col",
-  widgetTitle: "text-[var(--color-gray-900)] mt-[4px] mb-[8px]",
-  widgetDescription: "text-[var(--color-gray-700)] mb-[4px]",
-  widgetLinkCta: "text-[var(--color-blue-500)] cursor-pointer hover:text-[var(--color-blue-600)]",
-  widgetButtonCta: "self-start",
-  widgetBadge: "w-fit",
-  webinarInfoCtn: "flex flex-col gap-2",
-  webinarSpeaker: "text-[var(--color-gray-700)]",
-  webinarDate: "text-[var(--color-gray-700)]",
-  webinarDescriptionInfo: "flex gap-2",
-  webinarTimeInfo: "flex gap-2",
-  requestFeatureCtn: "flex gap-[12px]",
-  requestFeatureImageCtn: "w-[48px] h-[48px] border border-[var(--color-gray-200)] rounded-[50%] flex items-center flex-shrink-0 bg-[var(--color-red-50)]",
-  requestFeatureDescriptionCtn: "flex flex-col"
-}, B = ({
-  widgetClassName: d = "",
-  widgetType: a = "general",
-  widgetTitle: r = "",
-  widgetDescription: l = "",
-  widgetImage: p,
-  hasImage: x = !1,
-  hasButtonCta: n = !1,
-  hasLinkCta: i = !1,
-  ctaText: o = "",
-  hasBadge: f = !1,
-  badgeText: w = "",
-  buttonBgColor: u = "secondary",
-  onCtaClick: b,
-  onWidgetClick: v,
-  webinarDateInfo: c,
-  webinarSpeaker: s
+import { announce as k } from "./index76.js";
+const m = {
+  pageNavigation: "px-[6px] py-[6px] flex items-center justify-center",
+  pageItem: "px-[7px] py-[1px] min-w-[24px] text-sm flex items-center justify-center rounded border hover:cursor-pointer appearance-none focus-outline"
+}, C = ({
+  currentPage: a,
+  itemsPerPage: l,
+  totalItems: i,
+  onPageChange: p,
+  mobileView: u = !1,
+  ariaLabel: b = "Pagination Controls"
 }) => {
-  const E = f && /* @__PURE__ */ e.createElement(I, {
-    label: w,
-    className: t.widgetBadge,
-    bgColor: "var(--color-yellow-50)",
-    textColor: "var(--color-yellow-400)",
-    fontWeight: "normal"
-  }), m = (i || n) && /* @__PURE__ */ e.createElement(e.Fragment, null, i && /* @__PURE__ */ e.createElement("span", {
-    className: t.widgetLinkCta
-  }, o), n && /* @__PURE__ */ e.createElement(N, {
-    type: u,
-    size: "md",
-    label: o,
-    className: `${t.widgetButtonCta} mt-[4px]`,
-    onClick: b
-  })), C = x && /* @__PURE__ */ e.createElement("div", {
-    className: `${t.widgetImageCtn} widget-image-ctn`
-  }, /* @__PURE__ */ e.createElement("img", {
-    src: p,
-    alt: "widget-image"
+  const o = Math.ceil(i / l), d = 1, v = o, h = (a - 1) * l + 1, c = Math.min(a * l, i), y = c < i, $ = a > 1, f = `Showing ${h}-${c} of ${i}`;
+  N(() => {
+    k(f, {
+      batchId: "pagination-status"
+    });
+  }, [f]);
+  const E = () => {
+    const e = [], t = (n) => {
+      const x = a === n;
+      return /* @__PURE__ */ s.createElement("li", {
+        key: n
+      }, /* @__PURE__ */ s.createElement("button", {
+        type: "button",
+        onClick: () => p(n),
+        className: `${m.pageItem} ${x ? "bg-[var(--color-gray-100)] border-[var(--color-gray-300)]" : "border-[var(--color-gray-200)] hover:bg-[var(--color-gray-50)]"}`,
+        "aria-label": `Page ${n}`,
+        "aria-current": x ? "page" : void 0,
+        "data-automation-id": `page-number-${n}`
+      }, n));
+    }, r = (n) => /* @__PURE__ */ s.createElement("li", {
+      key: n,
+      "aria-hidden": "true"
+    }, /* @__PURE__ */ s.createElement("span", {
+      className: "w-5 h-5 text-sm rounded border border-[var(--color-gray-200)] flex items-end justify-center"
+    }, "..."));
+    if (u)
+      return e.push(t(a)), e;
+    if (a <= 3) {
+      for (let n = 1; n <= Math.min(3, o); n++)
+        e.push(t(n));
+      o > 3 && (e.push(r("ellipsis-end")), e.push(t(o)));
+    } else a >= o - 2 ? (e.push(t(d)), e.push(r("ellipsis-start")), e.push(t(o - 2)), e.push(t(o - 1)), e.push(t(o))) : (e.push(t(d)), e.push(r("ellipsis-start")), e.push(t(a - 1)), e.push(t(a)), e.push(t(a + 1)), e.push(r("ellipsis-end")), e.push(t(v)));
+    return e;
+  };
+  return /* @__PURE__ */ s.createElement("nav", {
+    "aria-label": b,
+    "data-automation-id": "pagination-container",
+    className: "flex items-center gap-1 font-normal"
+  }, /* @__PURE__ */ s.createElement("span", {
+    className: "text-sm text-[var(--color-gray-700)] mr-1",
+    "data-automation-id": "pagination-items-info"
+  }, `${u ? "" : "Showing "}${h}-${c} of ${i}`), /* @__PURE__ */ s.createElement(g, {
+    name: "next",
+    size: 12,
+    ariaLabel: "Previous page",
+    rotation: "180",
+    disabled: !$,
+    onClick: () => p(a - 1),
+    className: `stroke-[var(--color-gray-600)] ${m.pageNavigation}`,
+    automationId: "pagination-previous-button"
+  }), /* @__PURE__ */ s.createElement("ul", {
+    className: "flex items-center gap-1"
+  }, E()), /* @__PURE__ */ s.createElement(g, {
+    name: "next",
+    size: 12,
+    ariaLabel: "Next page",
+    disabled: !y,
+    onClick: () => p(a + 1),
+    className: m.pageNavigation,
+    automationId: "pagination-next-button"
   }));
-  return /* @__PURE__ */ e.createElement("div", {
-    className: `${t.widgetCtn} ${d} widget-ctn`,
-    onClick: v
-  }, a !== "general" && C, /* @__PURE__ */ e.createElement("div", {
-    className: t.descriptionCtn
-  }, a !== "general" && E, a !== "request-feature" && /* @__PURE__ */ e.createElement("span", {
-    className: `${t.widgetTitle} widget-title`
-  }, r), ["promotion", "general"].includes(a) && /* @__PURE__ */ e.createElement("span", {
-    className: `${t.widgetDescription} widget-description`
-  }, l), a === "webinar" && /* @__PURE__ */ e.createElement("div", {
-    className: t.webinarInfoCtn
-  }, s && /* @__PURE__ */ e.createElement("div", {
-    className: `${t.webinarDescriptionInfo} align-baseline`
-  }, /* @__PURE__ */ e.createElement(g, {
-    name: "people",
-    className: "relative top-[2px]"
-  }), /* @__PURE__ */ e.createElement("span", {
-    className: t.webinarSpeaker
-  }, s)), c && /* @__PURE__ */ e.createElement("div", {
-    className: `${t.webinarTimeInfo} align-baseline mb-[4px]`
-  }, /* @__PURE__ */ e.createElement(g, {
-    name: "clock",
-    className: "relative top-[2px]"
-  }), /* @__PURE__ */ e.createElement("span", {
-    className: t.webinarDate
-  }, c))), a === "request-feature" ? /* @__PURE__ */ e.createElement("div", {
-    className: t.requestFeatureCtn
-  }, /* @__PURE__ */ e.createElement("div", {
-    className: t.requestFeatureImageCtn
-  }), /* @__PURE__ */ e.createElement("div", {
-    className: t.requestFeatureDescriptionCtn
-  }, /* @__PURE__ */ e.createElement("span", {
-    className: `${t.widgetTitle} widget-title`
-  }, r), /* @__PURE__ */ e.createElement("span", {
-    className: `${t.widgetDescription} widget-description`
-  }, l), m)) : m));
 };
 export {
-  B as Widget
+  C as Pagination
 };
 //# sourceMappingURL=index32.js.map

package/dist/index32.js.map

@@ -1 +1 @@
-{"version":3,"file":"index32.js","sources":["../src/components/Widget/index.tsx"],"sourcesContent":["import React, { FC } from \"react\";\nimport { Map } from \"../../utils/common.types\";\nimport { Button } from \"../Button\";\nimport { Badge } from \"../Badge\";\nimport { Icon } from \"../Icon\";\nimport \"./style.scss\";\n\nexport interface WidgetProps {\n  widgetClassName?: string;\n  widgetType?: \"promotion\" | \"webinar\" | \"request-feature\" | \"general\";\n  widgetTitle?: string;\n  hasBadge?: boolean;\n  webinarSpeaker?: string;\n  badgeText?: string;\n  widgetDescription?: string;\n  webinarDateInfo?: string;\n  hasImage?: boolean;\n  widgetImage?: string;\n  hasButtonCta?: boolean;\n  buttonBgColor?: 'primary' | 'secondary';\n  hasLinkCta?: boolean;\n  ctaText?: string;\n  onCtaClick?: () => void;\n  onWidgetClick?: () => void;\n}\n\nconst className: Map = {\n  widgetCtn: 'flex flex-col gap-[2px] align-center border border-[var(--color-gray-200)] rounded-[12px] w-[385px]',\n  widgetImageCtn: 'cursor-pointer',\n  descriptionCtn: 'p-4 flex flex-col',\n  widgetTitle: 'text-[var(--color-gray-900)] mt-[4px] mb-[8px]',\n  widgetDescription: 'text-[var(--color-gray-700)] mb-[4px]',\n  widgetLinkCta: 'text-[var(--color-blue-500)] cursor-pointer hover:text-[var(--color-blue-600)]',\n  widgetButtonCta: 'self-start',\n  widgetBadge: 'w-fit',\n  webinarInfoCtn: 'flex flex-col gap-2',\n  webinarSpeaker: 'text-[var(--color-gray-700)]',\n  webinarDate: 'text-[var(--color-gray-700)]',\n  webinarDescriptionInfo: 'flex gap-2',\n  webinarTimeInfo: 'flex gap-2',\n  requestFeatureCtn: 'flex gap-[12px]',\n  requestFeatureImageCtn: 'w-[48px] h-[48px] border border-[var(--color-gray-200)] rounded-[50%] flex items-center flex-shrink-0 bg-[var(--color-red-50)]',\n  requestFeatureDescriptionCtn: 'flex flex-col',\n};\n\nexport const Widget: FC<WidgetProps> = ({\n  widgetClassName = \"\",\n  widgetType = 'general',\n  widgetTitle = \"\",\n  widgetDescription = \"\",\n  widgetImage,\n  hasImage = false,\n  hasButtonCta = false,\n  hasLinkCta = false,\n  ctaText = \"\",\n  hasBadge = false,\n  badgeText = \"\",\n  buttonBgColor = 'secondary',\n  onCtaClick,\n  onWidgetClick,\n  webinarDateInfo,\n  webinarSpeaker,\n}) => {\n\n  const renderBadge = hasBadge && (\n    <Badge\n      label={badgeText}\n      className={className.widgetBadge}\n      bgColor=\"var(--color-yellow-50)\"\n      textColor=\"var(--color-yellow-400)\"\n      fontWeight=\"normal\"\n    />\n  );\n\n  const renderCTA = (hasLinkCta || hasButtonCta) && (\n    <React.Fragment>\n      {hasLinkCta && <span className={className.widgetLinkCta}>{ctaText}</span>}\n      {hasButtonCta && <Button type={buttonBgColor} size=\"md\" label={ctaText} className={`${className.widgetButtonCta} mt-[4px]`} onClick={onCtaClick} />}\n    </React.Fragment>\n  );\n\n  const renderImage = hasImage && (\n    <div className={`${className.widgetImageCtn} widget-image-ctn`}>\n      <img src={widgetImage} alt=\"widget-image\"/>\n    </div>\n  );\n\n  return (\n    <div className={`${className.widgetCtn} ${widgetClassName} widget-ctn`} onClick={onWidgetClick}>\n      {widgetType !== \"general\" && renderImage}\n      <div className={className.descriptionCtn}>\n        {widgetType !== \"general\" && renderBadge}\n        {widgetType !== \"request-feature\" && <span className={`${className.widgetTitle} widget-title`}>{widgetTitle}</span>}\n\n        {([\"promotion\", \"general\"].includes(widgetType)) && (\n          <span className={`${className.widgetDescription} widget-description`}>{widgetDescription}</span>\n        )}\n\n        {widgetType === \"webinar\" && (\n          <div className={className.webinarInfoCtn}>\n            {webinarSpeaker && (\n            <div className={`${className.webinarDescriptionInfo} align-baseline`}>\n              <Icon name=\"people\" className=\"relative top-[2px]\" />\n              <span className={className.webinarSpeaker}>{webinarSpeaker}</span>\n            </div>\n            )}\n            {webinarDateInfo && (\n               <div className={`${className.webinarTimeInfo} align-baseline mb-[4px]`}>\n                <Icon name=\"clock\" className=\"relative top-[2px]\" />\n                <span className={className.webinarDate}>{webinarDateInfo}</span>\n              </div>\n            )}\n          </div>\n        )}\n\n        {widgetType === \"request-feature\" ? (\n          <div className={className.requestFeatureCtn}>\n            <div className={className.requestFeatureImageCtn} />\n            <div className={className.requestFeatureDescriptionCtn}>\n              <span className={`${className.widgetTitle} widget-title`}>{widgetTitle}</span>\n              <span className={`${className.widgetDescription} widget-description`}>{widgetDescription}</span>\n              {renderCTA}\n            </div>\n          </div>\n        ) : (\n          renderCTA\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport default Widget;"],"names":["React__default","Button","Badge","Icon","className","widgetCtn","widgetImageCtn","descriptionCtn","widgetTitle","widgetDescription","widgetLinkCta","widgetButtonCta","widgetBadge","webinarInfoCtn","webinarSpeaker","webinarDate","webinarDescriptionInfo","webinarTimeInfo","requestFeatureCtn","requestFeatureImageCtn","requestFeatureDescriptionCtn","Widget","widgetClassName","widgetType","widgetImage","hasImage","hasButtonCta","hasLinkCta","ctaText","hasBadge","badgeText","buttonBgColor","onCtaClick","onWidgetClick","webinarDateInfo","renderBadge","React","createElement","label","bgColor","textColor","fontWeight","renderCTA","Fragment","type","size","onClick","renderImage","src","alt","includes","name"],"mappings":"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"}
+{"version":3,"file":"index32.js","sources":["../src/components/Pagination/index.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\n\nimport { Icon } from 'components/Icon';\nimport { announce } from 'src/utils/a11y/liveAnnouncer/LiveAnnouncer';\n\ninterface PaginationProps {\n  currentPage: number;\n  itemsPerPage: number;\n  totalItems: number;\n  onPageChange: (page: number) => void;\n  mobileView?: boolean;\n  ariaLabel?: string;\n}\n\nconst paginationClassNames = {\n  pageNavigation: \"px-[6px] py-[6px] flex items-center justify-center\",\n  pageItem: \"px-[7px] py-[1px] min-w-[24px] text-sm flex items-center justify-center rounded border hover:cursor-pointer appearance-none focus-outline\"\n}\n\nexport const Pagination: React.FC<PaginationProps> = ({ currentPage, itemsPerPage, totalItems, onPageChange, mobileView = false, ariaLabel = 'Pagination Controls' }) => {\n  const totalPages = Math.ceil(totalItems / itemsPerPage);\n  const firstPage = 1;\n  const lastPage = totalPages;\n  const startItem = (currentPage - 1) * itemsPerPage + 1;\n  const endItem = Math.min(currentPage * itemsPerPage, totalItems);\n  const hasNextPage = endItem < totalItems;\n  const hasPrevPage = currentPage > 1;\n\n  const showingText = `Showing ${startItem}-${endItem} of ${totalItems}`;\n\n  useEffect(() => {\n    announce(showingText, { batchId: 'pagination-status' });\n  }, [showingText]);\n\n  const renderPageNumbers = () => {\n    const pages: React.ReactNode[] = [];\n\n    const renderPageNumber = (pageNum: number) => {\n      const isActive = currentPage === pageNum;\n      return (\n        <li key={pageNum}>\n          <button\n            type=\"button\"\n            onClick={() => onPageChange(pageNum)}\n            className={`${paginationClassNames.pageItem} ${isActive ? 'bg-[var(--color-gray-100)] border-[var(--color-gray-300)]' : 'border-[var(--color-gray-200)] hover:bg-[var(--color-gray-50)]'}`}\n            aria-label={`Page ${pageNum}`}\n            aria-current={isActive ? 'page' : undefined}\n            data-automation-id={`page-number-${pageNum}`}\n          >\n            {pageNum}\n          </button>\n        </li>\n      );\n    };\n\n    const renderEllipsis = (key: string) => {\n      return (\n        <li key={key} aria-hidden=\"true\">\n          <span className=\"w-5 h-5 text-sm rounded border border-[var(--color-gray-200)] flex items-end justify-center\">\n            ...\n          </span>\n        </li>\n      );\n    };\n\n    if (mobileView) {\n      pages.push(renderPageNumber(currentPage));\n      return pages;\n    }\n    if (currentPage <= 3) {\n      for (let i = 1; i <= Math.min(3, totalPages); i++) {\n        pages.push(renderPageNumber(i));\n      }\n\n      if (totalPages > 3) {\n        pages.push(renderEllipsis(\"ellipsis-end\"));\n        pages.push(renderPageNumber(totalPages));\n      }\n    } else if (currentPage >= totalPages - 2) {\n      pages.push(renderPageNumber(firstPage));\n      pages.push(renderEllipsis(\"ellipsis-start\"));\n      pages.push(renderPageNumber(totalPages - 2));\n      pages.push(renderPageNumber(totalPages - 1));\n      pages.push(renderPageNumber(totalPages));\n    } else {\n      pages.push(renderPageNumber(firstPage));\n      pages.push(renderEllipsis(\"ellipsis-start\"));\n      pages.push(renderPageNumber(currentPage - 1));\n      pages.push(renderPageNumber(currentPage));\n      pages.push(renderPageNumber(currentPage + 1));\n      pages.push(renderEllipsis(\"ellipsis-end\"));\n      pages.push(renderPageNumber(lastPage));\n    }\n\n    return pages;\n  };\n\n  return (\n    <nav aria-label={ariaLabel} data-automation-id=\"pagination-container\" className=\"flex items-center gap-1 font-normal\">\n      <span\n        className=\"text-sm text-[var(--color-gray-700)] mr-1\"\n        data-automation-id=\"pagination-items-info\"\n      >\n        {`${mobileView ? \"\" : \"Showing \"}${startItem}-${endItem} of ${totalItems}`}\n      </span>\n      <Icon\n        name=\"next\"\n        size={12}\n        ariaLabel=\"Previous page\"\n        rotation=\"180\"\n        disabled={!hasPrevPage}\n        onClick={() => onPageChange(currentPage - 1)}\n        className={`stroke-[var(--color-gray-600)] ${paginationClassNames.pageNavigation}`}\n        automationId=\"pagination-previous-button\"\n      />\n      <ul className=\"flex items-center gap-1\">\n        {renderPageNumbers()}\n      </ul>\n      <Icon\n        name=\"next\"\n        size={12}\n        ariaLabel=\"Next page\"\n        disabled={!hasNextPage}\n        onClick={() => onPageChange(currentPage + 1)}\n        className={paginationClassNames.pageNavigation}\n        automationId=\"pagination-next-button\"\n      />\n    </nav>\n  );\n};\n"],"names":["React__default","useEffect","Icon","announce","paginationClassNames","pageNavigation","pageItem","Pagination","currentPage","itemsPerPage","totalItems","onPageChange","mobileView","ariaLabel","totalPages","Math","ceil","firstPage","lastPage","startItem","endItem","min","hasNextPage","hasPrevPage","showingText","batchId","renderPageNumbers","pages","renderPageNumber","pageNum","isActive","React","createElement","key","type","onClick","className","undefined","renderEllipsis","push","i","name","size","rotation","disabled","automationId"],"mappings":"AAcA,OAAAA,KAAA,aAAAC,SAAA;AAAA,SAAA,QAAAC,SAAA;AAAA,SAAA,YAAAC,SAAA;AAAA,MAAMC,IAAuB;AAAA,EAC3BC,gBAAgB;AAAA,EAChBC,UAAU;AACZ,GAEaC,IAAwCA,CAAC;AAAA,EAAEC,aAAAA;AAAAA,EAAaC,cAAAA;AAAAA,EAAcC,YAAAA;AAAAA,EAAYC,cAAAA;AAAAA,EAAcC,YAAAA,IAAa;AAAA,EAAOC,WAAAA,IAAY;AAAsB,MAAM;AACvK,QAAMC,IAAaC,KAAKC,KAAKN,IAAaD,CAAY,GAChDQ,IAAY,GACZC,IAAWJ,GACXK,KAAaX,IAAc,KAAKC,IAAe,GAC/CW,IAAUL,KAAKM,IAAIb,IAAcC,GAAcC,CAAU,GACzDY,IAAcF,IAAUV,GACxBa,IAAcf,IAAc,GAE5BgB,IAAc,WAAWL,CAAS,IAAIC,CAAO,OAAOV,CAAU;AAEpET,EAAAA,EAAU,MAAM;AACdE,IAAAA,EAASqB,GAAa;AAAA,MAAEC,SAAS;AAAA,IAAA,CAAqB;AAAA,EACxD,GAAG,CAACD,CAAW,CAAC;AAEhB,QAAME,IAAoBA,MAAM;AAC9B,UAAMC,IAA2B,CAAA,GAE3BC,IAAmBA,CAACC,MAAoB;AAC5C,YAAMC,IAAWtB,MAAgBqB;AACjC,aACEE,gBAAAA,EAAAC,cAAA,MAAA;AAAA,QAAIC,KAAKJ;AAAAA,MAAAA,GACPE,gBAAAA,EAAAC,cAAA,UAAA;AAAA,QACEE,MAAK;AAAA,QACLC,SAASA,MAAMxB,EAAakB,CAAO;AAAA,QACnCO,WAAW,GAAGhC,EAAqBE,QAAQ,IAAIwB,IAAW,8DAA8D,gEAAgE;AAAA,QACxL,cAAY,QAAQD,CAAO;AAAA,QAC3B,gBAAcC,IAAW,SAASO;AAAAA,QAClC,sBAAoB,eAAeR,CAAO;AAAA,MAAA,GAEzCA,CACK,CACN;AAAA,IAER,GAEMS,IAAiBA,CAACL,MAEpBF,gBAAAA,EAAAC,cAAA,MAAA;AAAA,MAAIC,KAAAA;AAAAA,MAAU,eAAY;AAAA,IAAA,GACxBF,gBAAAA,EAAAC,cAAA,QAAA;AAAA,MAAMI,WAAU;AAAA,IAAA,GAA8F,KAExG,CACJ;AAIR,QAAIxB;AACFe,aAAAA,EAAMY,KAAKX,EAAiBpB,CAAW,CAAC,GACjCmB;AAET,QAAInB,KAAe,GAAG;AACpB,eAASgC,IAAI,GAAGA,KAAKzB,KAAKM,IAAI,GAAGP,CAAU,GAAG0B;AAC5Cb,QAAAA,EAAMY,KAAKX,EAAiBY,CAAC,CAAC;AAGhC,MAAI1B,IAAa,MACfa,EAAMY,KAAKD,EAAe,cAAc,CAAC,GACzCX,EAAMY,KAAKX,EAAiBd,CAAU,CAAC;AAAA,IAE3C,MAAA,CAAWN,KAAeM,IAAa,KACrCa,EAAMY,KAAKX,EAAiBX,CAAS,CAAC,GACtCU,EAAMY,KAAKD,EAAe,gBAAgB,CAAC,GAC3CX,EAAMY,KAAKX,EAAiBd,IAAa,CAAC,CAAC,GAC3Ca,EAAMY,KAAKX,EAAiBd,IAAa,CAAC,CAAC,GAC3Ca,EAAMY,KAAKX,EAAiBd,CAAU,CAAC,MAEvCa,EAAMY,KAAKX,EAAiBX,CAAS,CAAC,GACtCU,EAAMY,KAAKD,EAAe,gBAAgB,CAAC,GAC3CX,EAAMY,KAAKX,EAAiBpB,IAAc,CAAC,CAAC,GAC5CmB,EAAMY,KAAKX,EAAiBpB,CAAW,CAAC,GACxCmB,EAAMY,KAAKX,EAAiBpB,IAAc,CAAC,CAAC,GAC5CmB,EAAMY,KAAKD,EAAe,cAAc,CAAC,GACzCX,EAAMY,KAAKX,EAAiBV,CAAQ,CAAC;AAGvC,WAAOS;AAAAA,EACT;AAEA,SACEI,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAK,cAAYnB;AAAAA,IAAW,sBAAmB;AAAA,IAAuBuB,WAAU;AAAA,EAAA,GAC9EL,gBAAAA,EAAAC,cAAA,QAAA;AAAA,IACEI,WAAU;AAAA,IACV,sBAAmB;AAAA,EAAA,GAElB,GAAGxB,IAAa,KAAK,UAAU,GAAGO,CAAS,IAAIC,CAAO,OAAOV,CAAU,EACpE,GACNqB,gBAAAA,EAAAC,cAAC9B,GAAI;AAAA,IACHuC,MAAK;AAAA,IACLC,MAAM;AAAA,IACN7B,WAAU;AAAA,IACV8B,UAAS;AAAA,IACTC,UAAU,CAACrB;AAAAA,IACXY,SAASA,MAAMxB,EAAaH,IAAc,CAAC;AAAA,IAC3C4B,WAAW,kCAAkChC,EAAqBC,cAAc;AAAA,IAChFwC,cAAa;AAAA,EAAA,CACd,GACDd,gBAAAA,EAAAC,cAAA,MAAA;AAAA,IAAII,WAAU;AAAA,EAAA,GACXV,EAAAA,CACC,GACJK,gBAAAA,EAAAC,cAAC9B,GAAI;AAAA,IACHuC,MAAK;AAAA,IACLC,MAAM;AAAA,IACN7B,WAAU;AAAA,IACV+B,UAAU,CAACtB;AAAAA,IACXa,SAASA,MAAMxB,EAAaH,IAAc,CAAC;AAAA,IAC3C4B,WAAWhC,EAAqBC;AAAAA,IAChCwC,cAAa;AAAA,EAAA,CACd,CACE;AAET;"}