se-design 1.0.90-dev.0 → 1.0.91-r-dev.1

package/dist/index30.js

@@ -1,140 +1,154 @@
-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 "./index206.js";
-import { getRegionAttributes as Q } from "./index66.js";
-import { useAccessiblePress as U } from "./index67.js";
-import "./index72.js";
+import t, { useState as L, useMemo as z, useRef as O, useEffect as H } from "react";
+import { Icon as A } from "./index6.js";
+import { Popover as U } from "./index19.js";
+import { MenuList as V } from "./index18.js";
+import { useStableId as q } from "./index211.js";
+import "./index77.js";
+import { useTabsA11y as G, getPanelId as J } from "./index78.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]);
+function d() {
+  return d = Object.assign ? Object.assign.bind() : function(i) {
+    for (var o = 1; o < arguments.length; o++) {
+      var m = arguments[o];
+      for (var u in m) ({}).hasOwnProperty.call(m, u) && (i[u] = m[u]);
     }
-    return a;
-  }, m.apply(null, arguments);
+    return i;
+  }, 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"
-}, 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
+const oe = ({
+  defaultActiveTab: i,
+  tabs: o,
+  onTabChange: m,
+  primaryTabCount: u,
+  headingLevel: g,
+  id: F,
+  ariaLabel: M = "Tabs",
+  ariaLabelledBy: K,
+  panelId: p,
+  appearance: h = "solid"
+}) => {
+  const R = i || (o[0] ? o[0].id : ""), S = h === "outline" ? "se-design-tab-item-active font-medium hover:cursor-pointer" : "se-design-tab-item-active text-[var(--color-white)] bg-[var(--color-blue-500)] font-medium hover:cursor-pointer", [b, w] = L(R), [T, y] = L(!1), E = u ?? o?.length, f = o.slice(0, E), c = o.slice(E), l = c.find((e) => e.id === b), k = o.some((e) => e.renderTabContent), x = q(F, "tabs"), _ = z(() => {
+    const e = f.filter((s) => !s.disabled), r = c.filter((s) => !s.disabled), n = e.map((s) => s.id);
+    return r.length > 0 ? [...n, "overflow"] : n;
+  }, [f, c]), {
+    getTabProps: I,
+    getPanelProps: j,
+    getTabListProps: B,
+    handleKeyDown: C,
+    setFocusedTabId: N
+  } = G({
+    itemIds: _,
+    activeItem: b,
+    orientation: "horizontal",
+    idBase: x,
+    includePanelLinks: k || !!p,
+    externalPanelId: p
+  }), P = O(null), v = O(!1);
+  H(() => {
+    w(i || "");
+  }, [i]);
+  const D = (e) => {
+    w(e?.id), m?.(e?.id);
+  }, $ = (e, r) => e.id === r;
+  if (g && o.length === 1) {
+    const e = o[0];
+    return /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement(g, {
+      className: "se-design-tabs se-design-tabs-heading"
+    }, e.label), /* @__PURE__ */ t.createElement("div", {
+      className: "se-design-tabs-content"
+    }, /* @__PURE__ */ t.createElement("div", {
+      className: "tab-content block"
+    }, e?.renderTabContent && e?.renderTabContent(e))));
+  }
+  return /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement("div", d({
+    className: `se-design-tabs flex items-stretch relative border rounded-md border-[var(--color-gray-400)] w-fit ${h === "outline" ? "se-design-tabs--outline" : ""}`,
+    "data-automation-id": "tabs-container"
+  }, B({
+    ariaLabel: M,
+    ariaLabelledBy: K
+  })), f.map((e) => {
+    const r = b === e.id, n = !!e.disabled, s = I(e.id);
+    return /* @__PURE__ */ t.createElement("button", d({
+      type: "button",
+      key: e.id
+    }, s, {
+      disabled: n,
+      "aria-label": e.ariaLabel,
+      onFocus: () => !n && N(e.id),
+      onKeyDown: C,
+      onClick: () => D(e),
+      className: `se-design-tab-item flex items-center text-base px-3 py-0.5 min-w-0 border-l first:border-l-0 first:rounded-l-[0.3rem] last:rounded-r-[0.3rem] border-[var(--color-gray-400)] ${n ? "" : "focus-outline"} ${n ? "text-[var(--color-gray-400)] cursor-not-allowed" : r ? S : "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);
+  }), c.length > 0 && /* @__PURE__ */ t.createElement(U, {
+    className: "se-design-overflow-tabs",
+    position: "bottom-left",
+    noBorder: !0,
+    disableClickToggle: !0,
+    onPopoverToggle: (e) => {
+      e || (v.current && P.current?.focus(), v.current = !1);
     },
-    "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
+    renderPopoverSrcElement: ({
+      displayPopover: e,
+      togglePopover: r
+    }) => {
+      const n = I("overflow"), s = l ? J(l.id, x) : void 0;
+      return /* @__PURE__ */ t.createElement("div", d({}, n, {
+        ref: (a) => {
+          P.current = a, n.ref(a);
+        },
+        "aria-selected": !!l,
+        "aria-label": l?.label ? void 0 : `More tabs (${c.length})`,
+        "aria-controls": s,
+        "aria-haspopup": "true",
+        "aria-expanded": e,
+        onClick: () => {
+          v.current = !1, r(!0);
+        },
+        onFocus: () => N("overflow"),
+        "data-automation-id": "tabs-kebab-menu",
+        onKeyDown: (a) => {
+          a.key === "Enter" || a.key === " " || a.key === "ArrowDown" ? (a.preventDefault(), v.current = !0, r(!0)) : a.key === "ArrowUp" ? (a.preventDefault(), v.current = !0, r("last")) : C(a);
+        },
+        className: `overflow-tabs-src-element focus-outline 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)]" : ""} ${l?.label ? "bg-[var(--color-blue-500)]" : "hover:bg-[var(--color-gray-50)]"}`,
+        onMouseEnter: () => y(!0),
+        onMouseLeave: () => y(!1)
+      }), l?.label ? /* @__PURE__ */ t.createElement("span", {
+        className: "pointer-events-none flex items-center gap-1"
+      }, /* @__PURE__ */ t.createElement("span", {
+        className: "text-[var(--color-white)]"
+      }, l?.label), /* @__PURE__ */ t.createElement(A, {
+        name: "chevron",
+        rotation: e ? "180" : "0",
+        stroke: T ? "var(--color-gray-100)" : "var(--color-white)"
+      })) : /* @__PURE__ */ t.createElement("span", {
+        className: "pointer-events-none"
+      }, /* @__PURE__ */ t.createElement(A, {
+        name: "kebab-menu",
+        fill: T ? "var(--color-gray-900)" : "var(--color-gray-700)"
+      })));
     },
-    "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
-  }));
-});
+    renderPopoverContents: ({
+      closePopoverCb: e
+    }) => /* @__PURE__ */ t.createElement(V, {
+      items: c.map((r) => ({
+        id: r?.id,
+        label: r?.label,
+        automationId: r?.automationId || r?.id,
+        onClick: () => {
+          D(r), e();
+        }
+      }))
+    })
+  })), k && /* @__PURE__ */ t.createElement("div", {
+    className: "se-design-tabs-content"
+  }, o.map((e) => /* @__PURE__ */ t.createElement("div", d({
+    key: e.id
+  }, j(e.id), {
+    className: `tab-content ${$(e, b) ? "block" : "hidden"}`
+  }), $(e, b) && e.renderTabContent?.(e)))));
+};
 export {
-  re as Banner
+  oe as Tabs
 };
 //# sourceMappingURL=index30.js.map

package/dist/index30.js.map

@@ -1 +1 @@
-{"version":3,"file":"index30.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":"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"}
+{"version":3,"file":"index30.js","sources":["../src/components/Tabs/index.tsx"],"sourcesContent":["import React, { FC, ReactNode, useState, useEffect, useMemo, useRef } from 'react';\nimport { Icon } from '../Icon';\nimport { Popover } from '../Popover';\nimport { MenuList } from '../MenuList';\nimport { useStableId } from '../../utils/useStableId';\nimport { useTabsA11y, getPanelId } from '../../utils/a11y';\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  ariaLabel?: string;\n}\ninterface TabsProps {\n  defaultActiveTab?: string;\n  tabs: TabProps[];\n  onTabChange?: (tabId: string) => void;\n  primaryTabCount?: number; // prop for controlling primary tabs\n  headingLevel?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span'; // heading tag to render single tab as a heading element when only one tab is present\n  automationId?: string;\n  id?: string; // custom ID for baseId (passed to useStableId)\n  ariaLabel?: string; // Accessible name when no visible label exists\n  ariaLabelledBy?: string; // ID of element that labels this tablist (preferred over ariaLabel)\n  panelId?: string; // When consumer manages a single external panel, pass its id here\n  // Active-tab treatment: 'solid' (default) fills with brand blue; 'outline' uses a white pill with a blue ring\n  appearance?: 'solid' | 'outline';\n}\n\nexport const Tabs: FC<TabsProps> = ({\n  defaultActiveTab,\n  tabs,\n  onTabChange,\n  primaryTabCount,\n  headingLevel: HeadingTag,\n  id,\n  ariaLabel = 'Tabs',\n  ariaLabelledBy,\n  panelId,\n  appearance = 'solid'\n}) => {\n  const defaultTabId = defaultActiveTab || (tabs[0] ? tabs[0].id : '');\n  // 'outline' active styling lives in .se-design-tabs--outline (style.scss), so omit the solid fill/text utilities here\n  const activeTabClassName =\n    appearance === 'outline'\n      ? 'se-design-tab-item-active font-medium hover:cursor-pointer'\n      : 'se-design-tab-item-active text-[var(--color-white)] bg-[var(--color-blue-500)] font-medium hover:cursor-pointer';\n  const [activeTab, setActiveTab] = useState(defaultTabId);\n  const [isIconTabHover, setIsIconTabHover] = useState(false);\n\n  const visibleTabCount = 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  // Only render internal panels if at least one tab provides content via renderTabContent\n  const hasPanelContent = tabs.some(t => t.renderTabContent);\n\n  // A11y setup\n  const baseId = useStableId(id, 'tabs');\n  const itemIds = useMemo(() => {\n    const enabledVisibleTabs = visibleTabs.filter(t => !t.disabled);\n    const enabledOverflowTabs = overflowTabs.filter(t => !t.disabled);\n    const visibleIds = enabledVisibleTabs.map(t => t.id);\n    return enabledOverflowTabs.length > 0 ? [...visibleIds, 'overflow'] : visibleIds;\n  }, [visibleTabs, overflowTabs]);\n\n  const { getTabProps, getPanelProps, getTabListProps, handleKeyDown, setFocusedTabId } = useTabsA11y({\n    itemIds,\n    activeItem: activeTab,\n    orientation: 'horizontal',\n    idBase: baseId,\n    includePanelLinks: hasPanelContent || !!panelId,\n    externalPanelId: panelId\n  });\n\n  // Ref for the overflow button div — needed to return focus after menu closes\n  const overflowDivRef = useRef<HTMLDivElement>(null);\n  // Track whether the overflow popover was opened via keyboard — only return focus\n  // programmatically in that case (mouse-opened popovers should not trigger :focus-visible on close)\n  const wasKeyboardOpenedRef = useRef(false);\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 (HeadingTag && tabs.length === 1) {\n    const singleTab = tabs[0];\n    return (\n      <>\n        <HeadingTag className=\"se-design-tabs se-design-tabs-heading\">\n          {singleTab.label}\n        </HeadingTag>\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-stretch relative border rounded-md border-[var(--color-gray-400)] w-fit ${\n          appearance === 'outline' ? 'se-design-tabs--outline' : ''\n        }`}\n        data-automation-id=\"tabs-container\"\n        {...getTabListProps({ ariaLabel, ariaLabelledBy })}\n      >\n        {visibleTabs.map((tab) => {\n          const isActive = activeTab === tab.id;\n          const isDisabled = !!tab.disabled;\n          const tabProps = getTabProps(tab.id);\n          return (\n            <button\n              type=\"button\"\n              key={tab.id}\n              {...tabProps}\n              disabled={isDisabled}\n              aria-label={tab.ariaLabel}\n              onFocus={() => !isDisabled && setFocusedTabId(tab.id)}\n              onKeyDown={handleKeyDown}\n              onClick={() => handleTabClick(tab)}\n              className={`se-design-tab-item flex items-center text-base px-3 py-0.5 min-w-0 border-l first:border-l-0 first:rounded-l-[0.3rem] last:rounded-r-[0.3rem] border-[var(--color-gray-400)] ${!isDisabled ? 'focus-outline' : ''} ${\n                isDisabled\n                  ? 'text-[var(--color-gray-400)] cursor-not-allowed'\n                  : isActive\n                  ? activeTabClassName\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            </button>\n          );\n        })}\n\n        {overflowTabs.length > 0 && (\n          <Popover\n            className=\"se-design-overflow-tabs\"\n            position=\"bottom-left\"\n            noBorder\n            disableClickToggle={true}\n            onPopoverToggle={(isOpen) => {\n              if (!isOpen) {\n                if (wasKeyboardOpenedRef.current) overflowDivRef.current?.focus();\n                wasKeyboardOpenedRef.current = false;\n              }\n            }}\n            renderPopoverSrcElement={({ displayPopover, togglePopover }) => {\n              const overflowTabProps = getTabProps('overflow');\n              const overflowAriaControls = activeOverflowTab\n                ? getPanelId(activeOverflowTab.id, baseId)\n                : undefined;\n\n              return (\n                <div\n                  {...overflowTabProps}\n                  ref={(el) => { overflowDivRef.current = el; overflowTabProps.ref(el); }}\n                  aria-selected={!!activeOverflowTab}\n                  aria-label={activeOverflowTab?.label ? undefined : `More tabs (${overflowTabs.length})`}\n                  aria-controls={overflowAriaControls}\n                  aria-haspopup=\"true\"\n                  aria-expanded={displayPopover}\n                  onClick={() => { wasKeyboardOpenedRef.current = false; togglePopover(true); }}\n                  onFocus={() => setFocusedTabId('overflow')}\n                  data-automation-id=\"tabs-kebab-menu\"\n                  onKeyDown={(e) => {\n                    if (e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowDown') {\n                      e.preventDefault();\n                      wasKeyboardOpenedRef.current = true;\n                      togglePopover(true);\n                    } else if (e.key === 'ArrowUp') {\n                      e.preventDefault();\n                      wasKeyboardOpenedRef.current = true;\n                      togglePopover('last');\n                    } else {\n                      handleKeyDown(e);\n                    }\n                  }}\n                  className={`overflow-tabs-src-element focus-outline 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-500)]' : 'hover:bg-[var(--color-gray-50)]'}`}\n                  onMouseEnter={() => setIsIconTabHover(true)}\n                  onMouseLeave={() => setIsIconTabHover(false)}\n                >\n                  {activeOverflowTab?.label ? (\n                    <span className=\"pointer-events-none flex items-center gap-1\">\n                      <span className=\"text-[var(--color-white)]\">{activeOverflowTab?.label}</span>\n                      <Icon\n                        name=\"chevron\"\n                        rotation={displayPopover ? '180' : '0'}\n                        stroke={isIconTabHover ? 'var(--color-gray-100)' : 'var(--color-white)'}\n                      />\n                    </span>\n                  ) : (\n                    <span className=\"pointer-events-none\">\n                      <Icon name=\"kebab-menu\" fill={isIconTabHover ? 'var(--color-gray-900)' : 'var(--color-gray-700)'} />\n                    </span>\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      {hasPanelContent && (\n        <div className=\"se-design-tabs-content\">\n          {tabs.map((tab) => (\n            <div\n              key={tab.id}\n              {...getPanelProps(tab.id)}\n              className={`tab-content ${isTabActive(tab, activeTab) ? 'block' : 'hidden'}`}\n            >\n              {isTabActive(tab, activeTab) && tab.renderTabContent?.(tab)}\n            </div>\n          ))}\n        </div>\n      )}\n    </>\n  );\n};\n"],"names":["Tabs","defaultActiveTab","tabs","onTabChange","primaryTabCount","headingLevel","HeadingTag","id","ariaLabel","ariaLabelledBy","panelId","appearance","defaultTabId","activeTabClassName","activeTab","setActiveTab","useState","isIconTabHover","setIsIconTabHover","visibleTabCount","length","visibleTabs","slice","overflowTabs","activeOverflowTab","find","tab","hasPanelContent","some","t","renderTabContent","baseId","useStableId","itemIds","useMemo","enabledVisibleTabs","filter","disabled","enabledOverflowTabs","visibleIds","map","getTabProps","getPanelProps","getTabListProps","handleKeyDown","setFocusedTabId","useTabsA11y","activeItem","orientation","idBase","includePanelLinks","externalPanelId","overflowDivRef","useRef","wasKeyboardOpenedRef","useEffect","handleTabClick","isTabActive","singleTab","createElement","React","Fragment","className","label","_extends","isActive","isDisabled","tabProps","type","key","onFocus","onKeyDown","onClick","automationId","Popover","position","noBorder","disableClickToggle","onPopoverToggle","isOpen","current","focus","renderPopoverSrcElement","displayPopover","togglePopover","overflowTabProps","overflowAriaControls","getPanelId","undefined","ref","el","e","preventDefault","onMouseEnter","onMouseLeave","Icon","name","rotation","stroke","fill","renderPopoverContents","closePopoverCb","MenuList","items"],"mappings":"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"}

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 "./index211.js";
+import { getRegionAttributes as Q } from "./index71.js";
+import { useAccessiblePress as U } from "./index72.js";
+import "./index77.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