se-design 1.0.59 → 1.0.61-dev

package/dist/index27.js.map

@@ -1 +1 @@
-{"version":3,"file":"index27.js","sources":["../src/components/Tabs/index.tsx"],"sourcesContent":["import React, { FC, ReactNode, useState, useEffect } from 'react';\nimport { Icon } from '../Icon';\nimport { Popover } from '../Popover';\nimport { MenuList } from '../MenuList';\n\nimport './style.scss';\n\ninterface TabProps {\n  label: string;\n  id: string;\n  disabled?: boolean;\n  renderTabContent?: (tab: TabProps) => ReactNode;\n  automationId?: string;\n}\ninterface TabsProps {\n  defaultActiveTab?: string;\n  tabs: TabProps[];\n  onTabChange?: (tabId: string) => void;\n  primaryTabCount?: number; // prop for controlling primary tabs\n  singleTabAsHeading?: boolean; // prop for rendering single tab as heading\n  automationId?: string;\n}\n\nexport const Tabs: FC<TabsProps> = ({\n  defaultActiveTab,\n  tabs,\n  onTabChange,\n  primaryTabCount = 0,\n  singleTabAsHeading = false\n}) => {\n  const defaultTabId = defaultActiveTab || (tabs[0] ? tabs[0].id : '');\n  const [activeTab, setActiveTab] = useState(defaultTabId);\n  const [isIconTabHover, setIsIconTabHover] = useState(false);\n\n  const visibleTabCount = primaryTabCount ? primaryTabCount : tabs?.length;\n  const visibleTabs = tabs.slice(0, visibleTabCount);\n  const overflowTabs = tabs.slice(visibleTabCount);\n  const activeOverflowTab = overflowTabs.find((tab) => tab.id === activeTab);\n\n  // Check if we should render as heading (single tab and singleTabAsHeading is true)\n  const shouldRenderAsHeading = singleTabAsHeading && tabs.length === 1;\n\n  useEffect(() => {\n    setActiveTab(defaultActiveTab || '');\n  }, [defaultActiveTab]);\n\n  const handleTabClick = (tab: TabProps) => {\n    setActiveTab(tab?.id);\n    onTabChange?.(tab?.id);\n  };\n\n  const isTabActive = (tab: TabProps, activeTab: string) => {\n    return tab.id === activeTab;\n  };\n\n  // If single tab and should render as heading, render just the heading\n  if (shouldRenderAsHeading) {\n    const singleTab = tabs[0];\n    return (\n      <>\n        <div className=\"se-design-tabs-heading text-xl font-semibold text-[var(--color-gray-900)] mb-4\">\n          {singleTab.label}\n        </div>\n        <div className=\"se-design-tabs-content\">\n          <div className=\"tab-content block\">\n            {singleTab?.renderTabContent && singleTab?.renderTabContent(singleTab)}\n          </div>\n        </div>\n      </>\n    );\n  }\n\n  return (\n    <>\n      <div\n        className=\"se-design-tabs flex items-center relative border rounded-md border-[var(--color-gray-400)] w-fit\"\n        data-automation-id=\"tabs-container\"\n      >\n        {visibleTabs.map((tab) => {\n          const isActive = activeTab === tab.id;\n          const isDisabled = tab.disabled;\n          return (\n            <div\n              key={tab.label}\n              onClick={() => !isDisabled && handleTabClick(tab)}\n              className={`se-design-tab-item text-base px-3 py-0.5 border-l first:border-l-0 first:rounded-l-[0.3rem] last:rounded-r-[0.3rem] border-[var(--color-gray-200)] ${\n                isDisabled\n                  ? 'text-[var(--color-gray-400)] cursor-not-allowed'\n                  : isActive\n                  ? 'se-design-tab-item-active text-[var(--color-blue-500)] bg-[var(--color-blue-100)] font-medium hover:cursor-pointer'\n                  : 'text-[var(--color-gray-700)] font-normal hover:bg-[var(--color-gray-50)] hover:text-[var(--color-gray-900)] cursor-pointer transition-all duration-200 ease-in-out'\n              }`}\n              data-automation-id={`tab-item-${tab.automationId || tab.id || ''}`}\n            >\n              {tab.label}\n            </div>\n          );\n        })}\n\n        {overflowTabs.length > 0 && (\n          <Popover\n            className=\"se-design-overflow-tabs\"\n            position=\"bottom-left\"\n            automationId=\"tabs-kebab-menu\"\n            noBorder\n            renderPopoverSrcElement={({ displayPopover }) => {\n              return (\n                <div\n                  className={`overflow-tabs-src-element border-l px-3 py-0.5 rounded-r-md font-medium hover:cursor-pointer transition-all duration-200 ease-in-out ${\n                    displayPopover ? 'bg-[var(--color-blue-100)]' : ''\n                  } ${activeOverflowTab?.label ? 'bg-[var(--color-blue-100)]' : 'hover:bg-[var(--color-gray-50)]'}`}\n                  onMouseEnter={() => setIsIconTabHover(true)}\n                  onMouseLeave={() => setIsIconTabHover(false)}\n                >\n                  {activeOverflowTab?.label ? (\n                    <>\n                      <span className=\"text-[var(--color-blue-500)]\">{activeOverflowTab?.label}</span>\n                      <Icon\n                        name=\"chevron\"\n                        rotation={displayPopover ? '180' : '0'}\n                        stroke={isIconTabHover ? 'var(--color-gray-900)' : 'var(--color-gray-700)'}\n                      />\n                    </>\n                  ) : (\n                    <Icon name=\"kebab-menu\" fill={isIconTabHover ? 'var(--color-gray-900)' : 'var(--color-gray-700)'} />\n                  )}\n                </div>\n              );\n            }}\n            renderPopoverContents={({ closePopoverCb }) => (\n              <MenuList\n                items={overflowTabs.map((tab) => ({\n                  id: tab?.id,\n                  label: tab?.label,\n                  automationId: tab?.automationId || tab?.id,\n                  onClick: () => {\n                    handleTabClick(tab);\n                    closePopoverCb();\n                  }\n                }))}\n              />\n            )}\n          />\n        )}\n      </div>\n\n      <div className=\"se-design-tabs-content\">\n        {tabs.map((tab) => (\n          <div key={tab.id} className={`tab-content ${isTabActive(tab, activeTab) ? 'block' : 'hidden'}`}>\n            {isTabActive(tab, activeTab) && tab?.renderTabContent && tab?.renderTabContent(tab)}\n          </div>\n        ))}\n      </div>\n    </>\n  );\n};\n"],"names":["Tabs","defaultActiveTab","tabs","onTabChange","primaryTabCount","singleTabAsHeading","defaultTabId","id","activeTab","setActiveTab","useState","isIconTabHover","setIsIconTabHover","visibleTabCount","length","visibleTabs","slice","overflowTabs","activeOverflowTab","find","tab","shouldRenderAsHeading","useEffect","handleTabClick","isTabActive","singleTab","createElement","React","Fragment","className","label","renderTabContent","map","isActive","isDisabled","disabled","key","onClick","automationId","Popover","position","noBorder","renderPopoverSrcElement","displayPopover","onMouseEnter","onMouseLeave","Icon","name","rotation","stroke","fill","renderPopoverContents","closePopoverCb","MenuList","items"],"mappings":"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"}
+{"version":3,"file":"index27.js","sources":["../src/components/SidebarOverlay/index.tsx"],"sourcesContent":["import React, { FC, useEffect, useRef, useMemo } from 'react';\nimport { Icon } from 'components/Icon';\nimport { getA11yNameAttributes, /* useFocusTrap, */ useDismissOnEscape } from '../../utils/a11y';\n\nimport './style.scss';\n\ntype SidebarOverlayA11yRole = 'dialog' | 'complementary';\n\nexport interface SidebarOverlayProps {\n  content: React.ReactNode;\n  className?: string;\n  alignment?: 'left' | 'right';\n  style?: React.CSSProperties;\n  noShadow?: boolean;\n  automationId?: string;\n  id?: string;\n  position?: 'absolute' | 'fixed' | 'relative' | 'static' | '';\n  isOpen?: boolean;\n  displayCloseSidebar?: boolean;\n  closeSidebarIcon?: string;\n  /**\n   * Accessible label for the close button. Defaults to 'Close sidebar'.\n   */\n  closeAriaLabel?: string;\n  onClose?: () => void;\n  onSidebarUnmount?: () => void;\n  onPathChange?: (route: string) => void;\n  currentPath?: string;\n  animateSidebar?: boolean;\n  /**\n   * Accessibility role that determines the full behavior bundle.\n   * - 'dialog': modal drawer (focus trap, scroll lock, aria-modal, Escape closes)\n   * - 'complementary': persistent side panel (no trap, no forced focus, no scroll lock)\n   * If not provided, derives from position: fixed|absolute → 'dialog', static|relative|'' → 'complementary'\n   */\n  a11yRole?: SidebarOverlayA11yRole;\n  /**\n   * Accessible name when no visible label exists.\n   * Prefer ariaLabelledBy when a visible title exists inside the sidebar.\n   */\n  ariaLabel?: string;\n  /**\n   * ID(s) of visible element(s) that label this sidebar.\n   * Preferred over ariaLabel when a visible title exists (keeps SR and visual text in sync).\n   */\n  ariaLabelledBy?: string;\n  /**\n   * ID(s) of element(s) that describe this sidebar (additional context).\n   */\n  ariaDescribedBy?: string;\n}\n\nexport const SidebarOverlay: FC<SidebarOverlayProps> = (props) => {\n  const {\n    content,\n    className = '',\n    alignment,\n    noShadow,\n    position = 'fixed',\n    isOpen,\n    displayCloseSidebar,\n    onClose,\n    onSidebarUnmount,\n    onPathChange,\n    style,\n    automationId,\n    id,\n    currentPath = '',\n    closeSidebarIcon = 'close',\n    closeAriaLabel = 'Close sidebar',\n    animateSidebar = true,\n    a11yRole,\n    ariaLabel,\n    ariaLabelledBy,\n    ariaDescribedBy\n  } = props;\n\n  // Compute effective a11yRole: override or derive from position\n  const effectiveA11yRole = useMemo<SidebarOverlayA11yRole>(() => {\n    if (a11yRole) return a11yRole;\n    // - fixed: modal drawer (dialog bundle)\n    // - absolute/static/relative/'' : persistent side panel (complementary bundle)\n    return position === 'fixed' ? 'dialog' : 'complementary';\n  }, [a11yRole, position]);\n  \n  const isModal = effectiveA11yRole === 'dialog';\n\n  // Get accessible name attributes\n  const accessibleNameProps = useMemo(\n    () => getA11yNameAttributes({ ariaLabel, ariaLabelledBy, ariaDescribedBy }),\n    [ariaLabel, ariaLabelledBy, ariaDescribedBy]\n  );\n\n  const sidebarRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    return () => {\n      onSidebarUnmount && onSidebarUnmount();\n    };\n  }, []);\n\n  // This is to prevent the body from scrolling when the sidebar is open\n  useEffect(() => {\n    document.body.style.overflow = isOpen ? 'hidden' : 'scroll';\n\n    return () => {\n      document.body.style.overflow = 'auto'; // Cleanup on unmount\n    };\n  }, [isOpen]);\n\n  useEffect(() => {\n    onPathChange && onPathChange(currentPath);\n  }, [currentPath]);\n\n\n  useDismissOnEscape({\n    containerRef: sidebarRef,\n    onDismiss: onClose,\n    enabled: isOpen\n  });\n\n  // Focus trap: only in modal mode\n  // useFocusTrap({\n  //   enabled: Boolean(isModal && isOpen),\n  //   containerRef: sidebarRef,\n  //   restoreFocus: true,\n  //   initialFocus: 'first'\n  // });\n\n  const getSidebarClassName = () => {\n    let defaultClass = `se-design-sidebar-overlay-container z-[1000]`;\n\n    defaultClass += className.length > 0 ? ` ${className}` : '';\n    defaultClass += alignment === 'left' ? ' left-aligned' : ' right-aligned';\n    defaultClass += noShadow ? ' no-shadow' : '';\n    defaultClass += position.length > 0 ? ` ${position}` : '';\n    defaultClass += isOpen ? ' open-sidebar' : ' closed-sidebar';\n    if(!animateSidebar) {\n      defaultClass += isOpen ? '' : ' hidden';\n    }\n    return defaultClass;\n  };\n\n  const getSidebarStyle = () => {\n    return {\n      ...style,\n      ...(isOpen && style?.width ? { width: style?.width } : { width: '0px' })\n    };\n  };\n\n  return (\n    <div\n      ref={sidebarRef}\n      id={id}\n      className={getSidebarClassName()}\n      style={getSidebarStyle()}\n      data-automation-id={automationId}\n      tabIndex={-1}\n      role={effectiveA11yRole}\n      aria-modal={isModal ? 'true' : undefined}\n      {...accessibleNameProps}\n    >\n      <div className=\"overlay-content\">\n        {displayCloseSidebar && (\n          <Icon\n            name={closeSidebarIcon}\n            onClick={onClose}\n            className=\"overlay-close\"\n            ariaLabel={closeAriaLabel}\n            automationId=\"sidebar_overlay_close\"\n          />\n        )}\n        {content}\n      </div>\n    </div>\n  );\n};\n"],"names":["SidebarOverlay","props","content","className","alignment","noShadow","position","isOpen","displayCloseSidebar","onClose","onSidebarUnmount","onPathChange","style","automationId","id","currentPath","closeSidebarIcon","closeAriaLabel","animateSidebar","a11yRole","ariaLabel","ariaLabelledBy","ariaDescribedBy","effectiveA11yRole","useMemo","isModal","accessibleNameProps","getA11yNameAttributes","sidebarRef","useRef","useEffect","document","body","overflow","useDismissOnEscape","containerRef","onDismiss","enabled","getSidebarClassName","defaultClass","length","getSidebarStyle","width","React","createElement","_extends","ref","tabIndex","role","undefined","Icon","name","onClick"],"mappings":"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"}

package/dist/index28.js

@@ -1,134 +1,84 @@
-import e, { forwardRef as G } from "react";
-import { Icon as H } from "./index5.js";
-import { Button as b } from "./index3.js";
-import { useStableId as I } from "./index181.js";
-import { getRegionAttributes as J } from "./index64.js";
-import { useAccessiblePress as K } from "./index65.js";
+import r, { useState as f, useEffect as k } from "react";
+import { Icon as E } from "./index5.js";
+import { Popover as N } from "./index18.js";
+import { MenuList as I } from "./index17.js";
 /* empty css         */
-function d() {
-  return d = 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;
-  }, d.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"
-}, ee = /* @__PURE__ */ G((a, t) => {
-  const {
-    bannerClassName: r,
-    bannerBgColor: o,
-    title: h,
-    titleTag: k = "span",
-    description: m,
-    hasImage: v,
-    imagePosition: s = "right",
-    imageWidth: N = "30%",
-    imageAlt: B = "",
-    hasCloseIcon: E,
-    closeIconName: L,
-    onClose: P,
-    onBannerClick: i,
-    hasLinkCta: T,
-    onCtaClick: p,
-    onSecondaryCtaClick: $,
-    hasButtonCta: j,
-    buttonType: A = "secondary",
-    ctaText: C,
-    ctaAriaLabel: u,
-    hasSecondaryButtonCta: w = !1,
-    secondaryButtonType: R = "secondary",
-    secondaryCtaText: S,
-    secondaryCtaAriaLabel: O,
-    automationId: _ = "",
-    titleId: c
-  } = a, g = i ? "cursor-pointer" : "", f = I(c, "banner-title"), y = I(void 0, "banner-description"), l = J({
-    titleId: f,
-    descriptionId: m ? y : void 0,
-    isFocusable: !!c
-  }), {
-    pressProps: z,
-    role: F,
-    tabIndex: W
-  } = K({
-    isNative: !1,
-    onClick: i ? () => i() : void 0
-  }), q = i ? {
-    ...z,
-    role: F,
-    tabIndex: W
-  } : {}, x = () => v && /* @__PURE__ */ e.createElement("div", {
-    className: `${n.bannerImageCtn} ${g} banner-image-ctn ${s === "right" ? "mr-5 ml-0 justify-end" : "ml-5 mr-0 justify-start"} min-h-full`,
-    style: {
-      width: N
-    },
-    onClick: i
-  }, /* @__PURE__ */ e.createElement("img", {
-    src: a.bannerImage,
-    alt: B,
-    className: "max-w-[initial] h-[initial] max-h-[150px] object-contain"
-  }));
-  return /* @__PURE__ */ e.createElement("div", {
-    ref: t,
-    className: `${n.bannerCtn} ${g} ${r} banner-ctn`,
-    style: {
-      backgroundColor: o
-    },
-    "data-automation-id": _,
-    role: l.role,
-    "aria-labelledby": l["aria-labelledby"],
-    "aria-describedby": l["aria-describedby"],
-    tabIndex: l.tabIndex
-  }, s === "left" && x(), /* @__PURE__ */ e.createElement("div", d({
-    className: `${n.bannerContentCtn} w-[100%] banner-content-ctn`
-  }, q), /* @__PURE__ */ e.createElement(k, {
-    id: f,
-    className: "banner-title",
-    tabIndex: c ? -1 : void 0
-  }, h), /* @__PURE__ */ e.createElement("span", {
-    id: y,
-    className: "banner-description"
-  }, m), /* @__PURE__ */ e.createElement("div", {
-    className: "flex gap-3",
-    onClick: (D) => D.stopPropagation()
-  }, T && /* @__PURE__ */ e.createElement(b, {
-    type: "link",
-    className: n.bannerLinkCta,
-    onClick: p,
-    label: C,
-    ariaLabel: u
-  }), j && /* @__PURE__ */ e.createElement(b, {
-    type: A,
-    size: "sm",
-    label: C,
-    onClick: p,
-    className: n?.bannerButton,
-    "data-automation-id": "banner-main-cta",
-    ariaLabel: u
-  }), w && /* @__PURE__ */ e.createElement(b, {
-    type: R,
-    size: "sm",
-    label: S,
-    onClick: $,
-    className: n?.secondaryBannerButton,
-    "data-automation-id": "banner-secondary-cta",
-    ariaLabel: O
-  }))), s === "right" && x(), E && /* @__PURE__ */ e.createElement(H, {
-    name: L,
-    className: n.bannerCloseIconCtn,
-    onClick: P,
-    ariaLabel: "Close banner",
-    shouldStopPropagation: !0
-  }));
-});
+const M = ({
+  defaultActiveTab: a,
+  tabs: o,
+  onTabChange: p,
+  primaryTabCount: i = 0,
+  singleTabAsHeading: y = !1
+}) => {
+  const T = a || (o[0] ? o[0].id : ""), [n, c] = f(T), [d, m] = f(!1), v = i || o?.length, h = o.slice(0, v), l = o.slice(v), s = l.find((e) => e.id === n), x = y && o.length === 1;
+  k(() => {
+    c(a || "");
+  }, [a]);
+  const u = (e) => {
+    c(e?.id), p?.(e?.id);
+  }, b = (e, t) => e.id === t;
+  if (x) {
+    const e = o[0];
+    return /* @__PURE__ */ r.createElement(r.Fragment, null, /* @__PURE__ */ r.createElement("div", {
+      className: "se-design-tabs-heading text-xl font-semibold text-[var(--color-gray-900)] mb-4"
+    }, e.label), /* @__PURE__ */ r.createElement("div", {
+      className: "se-design-tabs-content"
+    }, /* @__PURE__ */ r.createElement("div", {
+      className: "tab-content block"
+    }, e?.renderTabContent && e?.renderTabContent(e))));
+  }
+  return /* @__PURE__ */ r.createElement(r.Fragment, null, /* @__PURE__ */ r.createElement("div", {
+    className: "se-design-tabs flex items-center relative border rounded-md border-[var(--color-gray-400)] w-fit",
+    "data-automation-id": "tabs-container"
+  }, h.map((e) => {
+    const t = n === e.id, g = e.disabled;
+    return /* @__PURE__ */ r.createElement("div", {
+      key: e.label,
+      onClick: () => !g && u(e),
+      className: `se-design-tab-item text-base px-3 py-0.5 border-l first:border-l-0 first:rounded-l-[0.3rem] last:rounded-r-[0.3rem] border-[var(--color-gray-200)] ${g ? "text-[var(--color-gray-400)] cursor-not-allowed" : t ? "se-design-tab-item-active text-[var(--color-blue-500)] bg-[var(--color-blue-100)] font-medium hover:cursor-pointer" : "text-[var(--color-gray-700)] font-normal hover:bg-[var(--color-gray-50)] hover:text-[var(--color-gray-900)] cursor-pointer transition-all duration-200 ease-in-out"}`,
+      "data-automation-id": `tab-item-${e.automationId || e.id || ""}`
+    }, e.label);
+  }), l.length > 0 && /* @__PURE__ */ r.createElement(N, {
+    className: "se-design-overflow-tabs",
+    position: "bottom-left",
+    automationId: "tabs-kebab-menu",
+    noBorder: !0,
+    renderPopoverSrcElement: ({
+      displayPopover: e
+    }) => /* @__PURE__ */ r.createElement("div", {
+      className: `overflow-tabs-src-element border-l px-3 py-0.5 rounded-r-md font-medium hover:cursor-pointer transition-all duration-200 ease-in-out ${e ? "bg-[var(--color-blue-100)]" : ""} ${s?.label ? "bg-[var(--color-blue-100)]" : "hover:bg-[var(--color-gray-50)]"}`,
+      onMouseEnter: () => m(!0),
+      onMouseLeave: () => m(!1)
+    }, s?.label ? /* @__PURE__ */ r.createElement(r.Fragment, null, /* @__PURE__ */ r.createElement("span", {
+      className: "text-[var(--color-blue-500)]"
+    }, s?.label), /* @__PURE__ */ r.createElement(E, {
+      name: "chevron",
+      rotation: e ? "180" : "0",
+      stroke: d ? "var(--color-gray-900)" : "var(--color-gray-700)"
+    })) : /* @__PURE__ */ r.createElement(E, {
+      name: "kebab-menu",
+      fill: d ? "var(--color-gray-900)" : "var(--color-gray-700)"
+    })),
+    renderPopoverContents: ({
+      closePopoverCb: e
+    }) => /* @__PURE__ */ r.createElement(I, {
+      items: l.map((t) => ({
+        id: t?.id,
+        label: t?.label,
+        automationId: t?.automationId || t?.id,
+        onClick: () => {
+          u(t), e();
+        }
+      }))
+    })
+  })), /* @__PURE__ */ r.createElement("div", {
+    className: "se-design-tabs-content"
+  }, o.map((e) => /* @__PURE__ */ r.createElement("div", {
+    key: e.id,
+    className: `tab-content ${b(e, n) ? "block" : "hidden"}`
+  }, b(e, n) && e?.renderTabContent && e?.renderTabContent(e)))));
+};
 export {
-  ee as Banner
+  M as Tabs
 };
 //# sourceMappingURL=index28.js.map

package/dist/index28.js.map

@@ -1 +1 @@
-{"version":3,"file":"index28.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  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}\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  } = 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 banner is clickable, make the content area keyboard-activatable (Enter/Space).\n  // We intentionally keep this as an extra tab stop (per dashboard banner behavior).\n  const { pressProps: bannerContentPressProps, role: bannerContentRole, tabIndex: bannerContentTabIndex } =\n    useAccessiblePress({\n      isNative: false,\n      onClick: onBannerClick ? () => onBannerClick() : undefined\n    });\n\n  const bannerContentClickableProps = 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        onClick={onBannerClick}\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        <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            />\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","isClickableClass","useStableId","descriptionId","undefined","regionAttributes","getRegionAttributes","isFocusable","pressProps","bannerContentPressProps","role","bannerContentRole","tabIndex","bannerContentTabIndex","useAccessiblePress","isNative","onClick","bannerContentClickableProps","renderImage","React","createElement","className","style","width","src","bannerImage","alt","backgroundColor","_extends","id","e","stopPropagation","Button","type","label","ariaLabel","size","secondaryBannerButton","Icon","name","shouldStopPropagation"],"mappings":"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"}
+{"version":3,"file":"index28.js","sources":["../src/components/Tabs/index.tsx"],"sourcesContent":["import React, { FC, ReactNode, useState, useEffect } from 'react';\nimport { Icon } from '../Icon';\nimport { Popover } from '../Popover';\nimport { MenuList } from '../MenuList';\n\nimport './style.scss';\n\ninterface TabProps {\n  label: string;\n  id: string;\n  disabled?: boolean;\n  renderTabContent?: (tab: TabProps) => ReactNode;\n  automationId?: string;\n}\ninterface TabsProps {\n  defaultActiveTab?: string;\n  tabs: TabProps[];\n  onTabChange?: (tabId: string) => void;\n  primaryTabCount?: number; // prop for controlling primary tabs\n  singleTabAsHeading?: boolean; // prop for rendering single tab as heading\n  automationId?: string;\n}\n\nexport const Tabs: FC<TabsProps> = ({\n  defaultActiveTab,\n  tabs,\n  onTabChange,\n  primaryTabCount = 0,\n  singleTabAsHeading = false\n}) => {\n  const defaultTabId = defaultActiveTab || (tabs[0] ? tabs[0].id : '');\n  const [activeTab, setActiveTab] = useState(defaultTabId);\n  const [isIconTabHover, setIsIconTabHover] = useState(false);\n\n  const visibleTabCount = primaryTabCount ? primaryTabCount : tabs?.length;\n  const visibleTabs = tabs.slice(0, visibleTabCount);\n  const overflowTabs = tabs.slice(visibleTabCount);\n  const activeOverflowTab = overflowTabs.find((tab) => tab.id === activeTab);\n\n  // Check if we should render as heading (single tab and singleTabAsHeading is true)\n  const shouldRenderAsHeading = singleTabAsHeading && tabs.length === 1;\n\n  useEffect(() => {\n    setActiveTab(defaultActiveTab || '');\n  }, [defaultActiveTab]);\n\n  const handleTabClick = (tab: TabProps) => {\n    setActiveTab(tab?.id);\n    onTabChange?.(tab?.id);\n  };\n\n  const isTabActive = (tab: TabProps, activeTab: string) => {\n    return tab.id === activeTab;\n  };\n\n  // If single tab and should render as heading, render just the heading\n  if (shouldRenderAsHeading) {\n    const singleTab = tabs[0];\n    return (\n      <>\n        <div className=\"se-design-tabs-heading text-xl font-semibold text-[var(--color-gray-900)] mb-4\">\n          {singleTab.label}\n        </div>\n        <div className=\"se-design-tabs-content\">\n          <div className=\"tab-content block\">\n            {singleTab?.renderTabContent && singleTab?.renderTabContent(singleTab)}\n          </div>\n        </div>\n      </>\n    );\n  }\n\n  return (\n    <>\n      <div\n        className=\"se-design-tabs flex items-center relative border rounded-md border-[var(--color-gray-400)] w-fit\"\n        data-automation-id=\"tabs-container\"\n      >\n        {visibleTabs.map((tab) => {\n          const isActive = activeTab === tab.id;\n          const isDisabled = tab.disabled;\n          return (\n            <div\n              key={tab.label}\n              onClick={() => !isDisabled && handleTabClick(tab)}\n              className={`se-design-tab-item text-base px-3 py-0.5 border-l first:border-l-0 first:rounded-l-[0.3rem] last:rounded-r-[0.3rem] border-[var(--color-gray-200)] ${\n                isDisabled\n                  ? 'text-[var(--color-gray-400)] cursor-not-allowed'\n                  : isActive\n                  ? 'se-design-tab-item-active text-[var(--color-blue-500)] bg-[var(--color-blue-100)] font-medium hover:cursor-pointer'\n                  : 'text-[var(--color-gray-700)] font-normal hover:bg-[var(--color-gray-50)] hover:text-[var(--color-gray-900)] cursor-pointer transition-all duration-200 ease-in-out'\n              }`}\n              data-automation-id={`tab-item-${tab.automationId || tab.id || ''}`}\n            >\n              {tab.label}\n            </div>\n          );\n        })}\n\n        {overflowTabs.length > 0 && (\n          <Popover\n            className=\"se-design-overflow-tabs\"\n            position=\"bottom-left\"\n            automationId=\"tabs-kebab-menu\"\n            noBorder\n            renderPopoverSrcElement={({ displayPopover }) => {\n              return (\n                <div\n                  className={`overflow-tabs-src-element border-l px-3 py-0.5 rounded-r-md font-medium hover:cursor-pointer transition-all duration-200 ease-in-out ${\n                    displayPopover ? 'bg-[var(--color-blue-100)]' : ''\n                  } ${activeOverflowTab?.label ? 'bg-[var(--color-blue-100)]' : 'hover:bg-[var(--color-gray-50)]'}`}\n                  onMouseEnter={() => setIsIconTabHover(true)}\n                  onMouseLeave={() => setIsIconTabHover(false)}\n                >\n                  {activeOverflowTab?.label ? (\n                    <>\n                      <span className=\"text-[var(--color-blue-500)]\">{activeOverflowTab?.label}</span>\n                      <Icon\n                        name=\"chevron\"\n                        rotation={displayPopover ? '180' : '0'}\n                        stroke={isIconTabHover ? 'var(--color-gray-900)' : 'var(--color-gray-700)'}\n                      />\n                    </>\n                  ) : (\n                    <Icon name=\"kebab-menu\" fill={isIconTabHover ? 'var(--color-gray-900)' : 'var(--color-gray-700)'} />\n                  )}\n                </div>\n              );\n            }}\n            renderPopoverContents={({ closePopoverCb }) => (\n              <MenuList\n                items={overflowTabs.map((tab) => ({\n                  id: tab?.id,\n                  label: tab?.label,\n                  automationId: tab?.automationId || tab?.id,\n                  onClick: () => {\n                    handleTabClick(tab);\n                    closePopoverCb();\n                  }\n                }))}\n              />\n            )}\n          />\n        )}\n      </div>\n\n      <div className=\"se-design-tabs-content\">\n        {tabs.map((tab) => (\n          <div key={tab.id} className={`tab-content ${isTabActive(tab, activeTab) ? 'block' : 'hidden'}`}>\n            {isTabActive(tab, activeTab) && tab?.renderTabContent && tab?.renderTabContent(tab)}\n          </div>\n        ))}\n      </div>\n    </>\n  );\n};\n"],"names":["Tabs","defaultActiveTab","tabs","onTabChange","primaryTabCount","singleTabAsHeading","defaultTabId","id","activeTab","setActiveTab","useState","isIconTabHover","setIsIconTabHover","visibleTabCount","length","visibleTabs","slice","overflowTabs","activeOverflowTab","find","tab","shouldRenderAsHeading","useEffect","handleTabClick","isTabActive","singleTab","createElement","React","Fragment","className","label","renderTabContent","map","isActive","isDisabled","disabled","key","onClick","automationId","Popover","position","noBorder","renderPopoverSrcElement","displayPopover","onMouseEnter","onMouseLeave","Icon","name","rotation","stroke","fill","renderPopoverContents","closePopoverCb","MenuList","items"],"mappings":"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"}

package/dist/index29.js

@@ -1,58 +1,134 @@
-import o from "react";
-import { Icon as h } from "./index5.js";
-const c = {
-  pageNavigation: "px-[6px] flex items-center justify-center disabled:opacity-50 hover:cursor-pointer",
-  pageItem: "px-[6px] text-sm flex items-center justify-center rounded border hover:cursor-pointer"
-}, E = ({
-  currentPage: t,
-  itemsPerPage: l,
-  totalItems: r,
-  onPageChange: p,
-  mobileView: m = !1
-}) => {
-  const n = Math.ceil(r / l), d = 1, f = n, x = (t - 1) * l + 1, u = Math.min(t * l, r), v = u < r, g = t > 1, b = () => {
-    const e = [], a = (s) => /* @__PURE__ */ o.createElement("span", {
-      key: s,
-      onClick: () => p(s),
-      className: `${c.pageItem} ${t === s ? "bg-[var(--color-gray-100)] border-[var(--color-gray-300)]" : "border-[var(--color-gray-200)] hover:bg-[var(--color-gray-50)]"}`,
-      "data-automation-id": `page-number-${s}`
-    }, s), i = (s) => /* @__PURE__ */ o.createElement("span", {
-      key: s,
-      className: "w-5 h-5 text-sm rounded border border-[var(--color-gray-200)] flex items-end justify-center"
-    }, "...");
-    if (m)
-      return e.push(a(t)), e;
-    if (t <= 3) {
-      for (let s = 1; s <= Math.min(3, n); s++)
-        e.push(a(s));
-      n > 3 && (e.push(i("ellipsis-end")), e.push(a(n)));
-    } else t >= n - 2 ? (e.push(a(d)), e.push(i("ellipsis-start")), e.push(a(n - 2)), e.push(a(n - 1)), e.push(a(n))) : (e.push(a(d)), e.push(i("ellipsis-start")), e.push(a(t - 1)), e.push(a(t)), e.push(a(t + 1)), e.push(i("ellipsis-end")), e.push(a(f)));
-    return e;
-  };
-  return /* @__PURE__ */ o.createElement("div", {
-    className: "flex items-center gap-1 font-normal",
-    "data-automation-id": "pagination-container"
-  }, /* @__PURE__ */ o.createElement("span", {
-    className: "text-sm text-[var(--color-gray-700)] mr-1",
-    "data-automation-id": "pagination-items-info"
-  }, `${m ? "" : "Showing "}${x}-${u} of ${r}`), /* @__PURE__ */ o.createElement("span", {
-    onClick: () => g && p(t - 1),
-    className: `${c.pageNavigation}`,
-    "data-automation-id": "pagination-previous-button"
-  }, /* @__PURE__ */ o.createElement(h, {
-    name: "next",
-    className: "rotate-180 transition-transform stroke-[var(--color-gray-600)]"
-  })), /* @__PURE__ */ o.createElement("div", {
-    className: "flex items-center gap-1"
-  }, b()), /* @__PURE__ */ o.createElement("span", {
-    onClick: () => v && p(t + 1),
-    className: `${c.pageNavigation}`,
-    "data-automation-id": "pagination-next-button"
-  }, /* @__PURE__ */ o.createElement(h, {
-    name: "next"
-  })));
-};
+import e, { forwardRef as G } from "react";
+import { Icon as H } from "./index5.js";
+import { Button as b } from "./index3.js";
+import { useStableId as I } from "./index184.js";
+import { getRegionAttributes as J } from "./index65.js";
+import { useAccessiblePress as K } from "./index66.js";
+/* empty css         */
+function d() {
+  return d = 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;
+  }, d.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"
+}, ee = /* @__PURE__ */ G((a, t) => {
+  const {
+    bannerClassName: r,
+    bannerBgColor: o,
+    title: h,
+    titleTag: k = "span",
+    description: m,
+    hasImage: v,
+    imagePosition: s = "right",
+    imageWidth: N = "30%",
+    imageAlt: B = "",
+    hasCloseIcon: E,
+    closeIconName: L,
+    onClose: P,
+    onBannerClick: i,
+    hasLinkCta: T,
+    onCtaClick: p,
+    onSecondaryCtaClick: $,
+    hasButtonCta: j,
+    buttonType: A = "secondary",
+    ctaText: C,
+    ctaAriaLabel: u,
+    hasSecondaryButtonCta: w = !1,
+    secondaryButtonType: R = "secondary",
+    secondaryCtaText: S,
+    secondaryCtaAriaLabel: O,
+    automationId: _ = "",
+    titleId: c
+  } = a, g = i ? "cursor-pointer" : "", f = I(c, "banner-title"), y = I(void 0, "banner-description"), l = J({
+    titleId: f,
+    descriptionId: m ? y : void 0,
+    isFocusable: !!c
+  }), {
+    pressProps: z,
+    role: F,
+    tabIndex: W
+  } = K({
+    isNative: !1,
+    onClick: i ? () => i() : void 0
+  }), q = i ? {
+    ...z,
+    role: F,
+    tabIndex: W
+  } : {}, x = () => v && /* @__PURE__ */ e.createElement("div", {
+    className: `${n.bannerImageCtn} ${g} banner-image-ctn ${s === "right" ? "mr-5 ml-0 justify-end" : "ml-5 mr-0 justify-start"} min-h-full`,
+    style: {
+      width: N
+    },
+    onClick: i
+  }, /* @__PURE__ */ e.createElement("img", {
+    src: a.bannerImage,
+    alt: B,
+    className: "max-w-[initial] h-[initial] max-h-[150px] object-contain"
+  }));
+  return /* @__PURE__ */ e.createElement("div", {
+    ref: t,
+    className: `${n.bannerCtn} ${g} ${r} banner-ctn`,
+    style: {
+      backgroundColor: o
+    },
+    "data-automation-id": _,
+    role: l.role,
+    "aria-labelledby": l["aria-labelledby"],
+    "aria-describedby": l["aria-describedby"],
+    tabIndex: l.tabIndex
+  }, s === "left" && x(), /* @__PURE__ */ e.createElement("div", d({
+    className: `${n.bannerContentCtn} w-[100%] banner-content-ctn`
+  }, q), /* @__PURE__ */ e.createElement(k, {
+    id: f,
+    className: "banner-title",
+    tabIndex: c ? -1 : void 0
+  }, h), /* @__PURE__ */ e.createElement("span", {
+    id: y,
+    className: "banner-description"
+  }, m), /* @__PURE__ */ e.createElement("div", {
+    className: "flex gap-3",
+    onClick: (D) => D.stopPropagation()
+  }, T && /* @__PURE__ */ e.createElement(b, {
+    type: "link",
+    className: n.bannerLinkCta,
+    onClick: p,
+    label: C,
+    ariaLabel: u
+  }), j && /* @__PURE__ */ e.createElement(b, {
+    type: A,
+    size: "sm",
+    label: C,
+    onClick: p,
+    className: n?.bannerButton,
+    "data-automation-id": "banner-main-cta",
+    ariaLabel: u
+  }), w && /* @__PURE__ */ e.createElement(b, {
+    type: R,
+    size: "sm",
+    label: S,
+    onClick: $,
+    className: n?.secondaryBannerButton,
+    "data-automation-id": "banner-secondary-cta",
+    ariaLabel: O
+  }))), s === "right" && x(), E && /* @__PURE__ */ e.createElement(H, {
+    name: L,
+    className: n.bannerCloseIconCtn,
+    onClick: P,
+    ariaLabel: "Close banner",
+    shouldStopPropagation: !0
+  }));
+});
 export {
-  E as Pagination
+  ee as Banner
 };
 //# sourceMappingURL=index29.js.map

package/dist/index29.js.map

@@ -1 +1 @@
-{"version":3,"file":"index29.js","sources":["../src/components/Pagination/index.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Icon } from 'components/Icon';\n\ninterface PaginationProps {\n  currentPage: number;\n  itemsPerPage: number;\n  totalItems: number;\n  onPageChange: (page: number) => void;\n  mobileView?: boolean;\n}\n\nconst paginationClassNames = {\n  pageNavigation: \"px-[6px] flex items-center justify-center disabled:opacity-50 hover:cursor-pointer\",\n  pageItem: \"px-[6px] text-sm flex items-center justify-center rounded border hover:cursor-pointer\"\n}\n\nexport const Pagination: React.FC<PaginationProps> = ({ currentPage, itemsPerPage, totalItems, onPageChange, mobileView = false }) => {\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 renderPageNumbers = () => {\n    const pages = [];\n\n    const renderPageNumber = (pageNum: number) => {\n      return (\n        <span\n          key={pageNum}\n          onClick={() => onPageChange(pageNum)}\n          className={`${paginationClassNames.pageItem} ${currentPage === pageNum ? 'bg-[var(--color-gray-100)] border-[var(--color-gray-300)]' : 'border-[var(--color-gray-200)] hover:bg-[var(--color-gray-50)]'}`}\n          data-automation-id={`page-number-${pageNum}`}\n        >\n          {pageNum}\n        </span>\n      );\n    };\n\n    const renderEllipsis = (key: string) => {\n      return (\n        <span key={key} className=\"w-5 h-5 text-sm rounded border border-[var(--color-gray-200)] flex items-end justify-center\">\n          ...\n        </span>\n      );\n    };\n    if(mobileView) {\n      pages.push(renderPageNumber(currentPage));\n\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    <div className=\"flex items-center gap-1 font-normal\" data-automation-id=\"pagination-container\">\n      <span className=\"text-sm text-[var(--color-gray-700)] mr-1\" data-automation-id=\"pagination-items-info\">\n        {`${mobileView ? \"\" : \"Showing \"}${startItem}-${endItem} of ${totalItems}`}\n      </span>\n      <span\n        onClick={() => hasPrevPage && onPageChange(currentPage - 1)}\n        className={`${paginationClassNames.pageNavigation}`}\n        data-automation-id=\"pagination-previous-button\"\n      >\n        <Icon name=\"next\" className=\"rotate-180 transition-transform stroke-[var(--color-gray-600)]\" />\n      </span>\n      {/* Render page numbers */}\n      <div className=\"flex items-center gap-1\">{renderPageNumbers()}</div>\n      <span\n        onClick={() => hasNextPage && onPageChange(currentPage + 1)}\n        className={`${paginationClassNames.pageNavigation}`}\n        data-automation-id=\"pagination-next-button\"\n      >\n        <Icon name=\"next\" />\n      </span>\n    </div>\n  );\n};\n"],"names":["React__default","Icon","paginationClassNames","pageNavigation","pageItem","Pagination","currentPage","itemsPerPage","totalItems","onPageChange","mobileView","totalPages","Math","ceil","firstPage","lastPage","startItem","endItem","min","hasNextPage","hasPrevPage","renderPageNumbers","pages","renderPageNumber","pageNum","React","createElement","key","onClick","className","renderEllipsis","push","i","name"],"mappings":"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"}
+{"version":3,"file":"index29.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  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}\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  } = 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 banner is clickable, make the content area keyboard-activatable (Enter/Space).\n  // We intentionally keep this as an extra tab stop (per dashboard banner behavior).\n  const { pressProps: bannerContentPressProps, role: bannerContentRole, tabIndex: bannerContentTabIndex } =\n    useAccessiblePress({\n      isNative: false,\n      onClick: onBannerClick ? () => onBannerClick() : undefined\n    });\n\n  const bannerContentClickableProps = 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        onClick={onBannerClick}\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        <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            />\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","isClickableClass","useStableId","descriptionId","undefined","regionAttributes","getRegionAttributes","isFocusable","pressProps","bannerContentPressProps","role","bannerContentRole","tabIndex","bannerContentTabIndex","useAccessiblePress","isNative","onClick","bannerContentClickableProps","renderImage","React","createElement","className","style","width","src","bannerImage","alt","backgroundColor","_extends","id","e","stopPropagation","Button","type","label","ariaLabel","size","secondaryBannerButton","Icon","name","shouldStopPropagation"],"mappings":"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"}

package/dist/index3.js

@@ -1,6 +1,6 @@
 import r, { forwardRef as _ } from "react";
-import { getA11yNameAttributes as I } from "./index67.js";
-import { useAccessiblePress as R } from "./index65.js";
+import { getA11yNameAttributes as I } from "./index69.js";
+import { useAccessiblePress as R } from "./index66.js";
 import { Icon as b } from "./index5.js";
 /* empty css        */
 function c() {