se-design 1.0.71 → 1.0.73-dev1

package/dist/index28.js

@@ -1,84 +1,143 @@
-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";
+import o, { useState as F, useMemo as R, useRef as S, useEffect as _ } from "react";
+import { Icon as $ } from "./index5.js";
+import { Popover as j } from "./index18.js";
+import { MenuList as B } from "./index17.js";
+import { useStableId as z } from "./index190.js";
+import { getA11yNameAttributes as H } from "./index71.js";
+import { useTabsA11y as V, getPanelId as q } from "./index69.js";
 /* empty css         */
-const M = ({
-  defaultActiveTab: a,
-  tabs: o,
-  onTabChange: p,
-  primaryTabCount: i = 0,
-  singleTabAsHeading: y = !1
+function s() {
+  return s = Object.assign ? Object.assign.bind() : function(l) {
+    for (var t = 1; t < arguments.length; t++) {
+      var i = arguments[t];
+      for (var c in i) ({}).hasOwnProperty.call(i, c) && (l[c] = i[c]);
+    }
+    return l;
+  }, s.apply(null, arguments);
+}
+const ee = ({
+  defaultActiveTab: l,
+  tabs: t,
+  onTabChange: i,
+  primaryTabCount: c,
+  headingLevel: v,
+  id: A,
+  ariaLabel: D = "Tabs",
+  ariaLabelledBy: L,
+  panelId: f
 }) => {
-  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", {
+  const O = l || (t[0] ? t[0].id : ""), [d, g] = F(O), [p, h] = F(!1), T = c ?? t?.length, b = t.slice(0, T), m = t.slice(T), u = m.find((e) => e.id === d), w = t.some((e) => e.renderTabContent), y = z(A, "tabs"), M = R(() => {
+    const e = b.filter((a) => !a.disabled), r = m.filter((a) => !a.disabled), n = e.map((a) => a.id);
+    return r.length > 0 ? [...n, "overflow"] : n;
+  }, [b, m]), {
+    getTabProps: E,
+    getPanelProps: K,
+    handleKeyDown: I,
+    setFocusedTabId: x
+  } = V({
+    itemIds: M,
+    activeItem: d,
+    orientation: "horizontal",
+    idBase: y,
+    includePanelLinks: w || !!f,
+    externalPanelId: f
+  }), k = S(null);
+  _(() => {
+    g(l || "");
+  }, [l]);
+  const C = (e) => {
+    g(e?.id), i?.(e?.id);
+  }, P = (e, r) => e.id === r;
+  if (v && t.length === 1) {
+    const e = t[0];
+    return /* @__PURE__ */ o.createElement(o.Fragment, null, /* @__PURE__ */ o.createElement(v, {
+      className: "se-design-tabs se-design-tabs-heading"
+    }, e.label), /* @__PURE__ */ o.createElement("div", {
       className: "se-design-tabs-content"
-    }, /* @__PURE__ */ r.createElement("div", {
+    }, /* @__PURE__ */ o.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",
+  return /* @__PURE__ */ o.createElement(o.Fragment, null, /* @__PURE__ */ o.createElement("div", s({
+    className: "se-design-tabs flex items-stretch relative border rounded-md border-[var(--color-gray-400)] w-fit",
+    role: "tablist",
     "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"}`,
+  }, H({
+    ariaLabel: D,
+    ariaLabelledBy: L
+  })), b.map((e) => {
+    const r = d === e.id, n = !!e.disabled, a = E(e.id);
+    return /* @__PURE__ */ o.createElement("button", s({
+      type: "button",
+      key: e.id
+    }, a, {
+      disabled: n,
+      "aria-label": e.ariaLabel,
+      onFocus: () => !n && x(e.id),
+      onKeyDown: I,
+      onClick: () => C(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 ? "se-design-tab-item-active text-[var(--color-white)] bg-[var(--color-blue-500)] 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, {
+    }), e.label);
+  }), m.length > 0 && /* @__PURE__ */ o.createElement(j, {
     className: "se-design-overflow-tabs",
     position: "bottom-left",
     automationId: "tabs-kebab-menu",
     noBorder: !0,
+    disableClickToggle: !0,
+    onPopoverToggle: (e) => {
+      e || k.current?.focus();
+    },
     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)"
-    })),
+      displayPopover: e,
+      togglePopover: r
+    }) => {
+      const n = E("overflow"), a = u ? q(u.id, y) : void 0;
+      return /* @__PURE__ */ o.createElement("div", s({}, n, {
+        ref: (N) => {
+          k.current = N, n.ref(N);
+        },
+        "aria-controls": a,
+        "aria-haspopup": "true",
+        "aria-expanded": e,
+        onClick: () => r(),
+        onFocus: () => x("overflow"),
+        onKeyDown: I,
+        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)]" : ""} ${u?.label ? "bg-[var(--color-blue-500)]" : "hover:bg-[var(--color-gray-50)]"}`,
+        onMouseEnter: () => h(!0),
+        onMouseLeave: () => h(!1)
+      }), u?.label ? /* @__PURE__ */ o.createElement(o.Fragment, null, /* @__PURE__ */ o.createElement("span", {
+        className: "text-[var(--color-white)]"
+      }, u?.label), /* @__PURE__ */ o.createElement($, {
+        name: "chevron",
+        rotation: e ? "180" : "0",
+        stroke: p ? "var(--color-gray-100)" : "var(--color-white)"
+      })) : /* @__PURE__ */ o.createElement($, {
+        name: "kebab-menu",
+        fill: p ? "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,
+    }) => /* @__PURE__ */ o.createElement(B, {
+      items: m.map((r) => ({
+        id: r?.id,
+        label: r?.label,
+        automationId: r?.automationId || r?.id,
         onClick: () => {
-          u(t), e();
+          C(r), e();
         }
       }))
     })
-  })), /* @__PURE__ */ r.createElement("div", {
+  })), w && /* @__PURE__ */ o.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)))));
+  }, t.map((e) => /* @__PURE__ */ o.createElement("div", s({
+    key: e.id
+  }, K(e.id), {
+    className: `tab-content ${P(e, d) ? "block" : "hidden"}`
+  }), P(e, d) && e.renderTabContent?.(e)))));
 };
 export {
-  M as Tabs
+  ee as Tabs
 };
 //# sourceMappingURL=index28.js.map

package/dist/index28.js.map

@@ -1 +1 @@
-{"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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"}
+{"version":3,"file":"index28.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, getA11yNameAttributes } 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}\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}) => {\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 ?? 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, 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\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        role=\"tablist\"\n        data-automation-id=\"tabs-container\"\n        {...getA11yNameAttributes({\n          ariaLabel,\n          ariaLabelledBy\n        })}\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                  ? 'se-design-tab-item-active text-[var(--color-white)] bg-[var(--color-blue-500)] 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            </button>\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            disableClickToggle={true}\n            onPopoverToggle={(isOpen) => {\n              // Return focus to the overflow button when the menu closes (e.g. Escape)\n              if (!isOpen) overflowDivRef.current?.focus();\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-controls={overflowAriaControls}\n                  aria-haspopup=\"true\"\n                  aria-expanded={displayPopover}\n                  onClick={() => togglePopover()}\n                  onFocus={() => setFocusedTabId('overflow')}\n                  onKeyDown={handleKeyDown}\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                    <>\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                    </>\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      {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","defaultTabId","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","handleKeyDown","setFocusedTabId","useTabsA11y","activeItem","orientation","idBase","includePanelLinks","externalPanelId","overflowDivRef","useRef","useEffect","handleTabClick","isTabActive","singleTab","createElement","React","Fragment","className","label","_extends","role","getA11yNameAttributes","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","onMouseEnter","onMouseLeave","Icon","name","rotation","stroke","fill","renderPopoverContents","closePopoverCb","MenuList","items"],"mappings":"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"}

package/dist/index29.js

@@ -1,7 +1,7 @@
 import e, { forwardRef as H } from "react";
 import { Icon as J } from "./index5.js";
 import { Button as b } from "./index3.js";
-import { useStableId as I } from "./index189.js";
+import { useStableId as I } from "./index190.js";
 import { getRegionAttributes as K } from "./index65.js";
 import { useAccessiblePress as M } from "./index66.js";
 /* empty css         */

package/dist/index3.js

@@ -1,5 +1,5 @@
 import r, { forwardRef as I } from "react";
-import { getA11yNameAttributes as R } from "./index70.js";
+import { getA11yNameAttributes as R } from "./index71.js";
 import { useAccessiblePress as z } from "./index66.js";
 import { Icon as b } from "./index5.js";
 /* empty css        */

package/dist/index30.js

@@ -1,58 +1,73 @@
-import o from "react";
-import { Icon as h } from "./index5.js";
+import n from "react";
+import { Icon as f } 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,
+  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"
+}, k = ({
+  currentPage: a,
   itemsPerPage: l,
-  totalItems: r,
+  totalItems: i,
   onPageChange: p,
-  mobileView: m = !1
+  mobileView: m = !1,
+  ariaLabel: x = "Pagination Controls"
 }) => {
-  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", {
+  const o = Math.ceil(i / l), d = 1, b = o, g = (a - 1) * l + 1, u = Math.min(a * l, i), v = u < i, y = a > 1, E = () => {
+    const e = [], t = (s) => {
+      const h = a === s;
+      return /* @__PURE__ */ n.createElement("li", {
+        key: s
+      }, /* @__PURE__ */ n.createElement("button", {
+        type: "button",
+        onClick: () => p(s),
+        className: `${c.pageItem} ${h ? "bg-[var(--color-gray-100)] border-[var(--color-gray-300)]" : "border-[var(--color-gray-200)] hover:bg-[var(--color-gray-50)]"}`,
+        "aria-label": `Page ${s}`,
+        "aria-current": h ? "page" : void 0,
+        "data-automation-id": `page-number-${s}`
+      }, s));
+    }, r = (s) => /* @__PURE__ */ n.createElement("li", {
       key: s,
+      "aria-hidden": "true"
+    }, /* @__PURE__ */ n.createElement("span", {
       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.push(t(a)), e;
+    if (a <= 3) {
+      for (let s = 1; s <= Math.min(3, o); s++)
+        e.push(t(s));
+      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(b)));
     return e;
   };
-  return /* @__PURE__ */ o.createElement("div", {
-    className: "flex items-center gap-1 font-normal",
-    "data-automation-id": "pagination-container"
-  }, /* @__PURE__ */ o.createElement("span", {
+  return /* @__PURE__ */ n.createElement("nav", {
+    "aria-label": x,
+    "data-automation-id": "pagination-container",
+    className: "flex items-center gap-1 font-normal"
+  }, /* @__PURE__ */ n.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, {
+  }, `${m ? "" : "Showing "}${g}-${u} of ${i}`), /* @__PURE__ */ n.createElement(f, {
     name: "next",
-    className: "rotate-180 transition-transform stroke-[var(--color-gray-600)]"
-  })), /* @__PURE__ */ o.createElement("div", {
+    size: 12,
+    ariaLabel: "Previous page",
+    rotation: "180",
+    disabled: !y,
+    onClick: () => p(a - 1),
+    className: `stroke-[var(--color-gray-600)] ${c.pageNavigation}`,
+    automationId: "pagination-previous-button"
+  }), /* @__PURE__ */ n.createElement("ul", {
     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"
-  })));
+  }, E()), /* @__PURE__ */ n.createElement(f, {
+    name: "next",
+    size: 12,
+    ariaLabel: "Next page",
+    disabled: !v,
+    onClick: () => p(a + 1),
+    className: c.pageNavigation,
+    automationId: "pagination-next-button"
+  }));
 };
 export {
-  E as Pagination
+  k as Pagination
 };
 //# sourceMappingURL=index30.js.map

package/dist/index30.js.map

@@ -1 +1 @@
-{"version":3,"file":"index30.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":"index30.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  ariaLabel?: string;\n}\n\nconst paginationClassNames = {\n  pageNavigation: \"px-[6px] py-[6px] flex items-center justify-center\",\n  pageItem: \"px-[7px] py-[1px] min-w-[24px] text-sm flex items-center justify-center rounded border hover:cursor-pointer appearance-none focus-outline\"\n}\n\nexport const Pagination: React.FC<PaginationProps> = ({ currentPage, itemsPerPage, totalItems, onPageChange, mobileView = false, ariaLabel = 'Pagination Controls' }) => {\n  const totalPages = Math.ceil(totalItems / itemsPerPage);\n  const firstPage = 1;\n  const lastPage = totalPages;\n  const startItem = (currentPage - 1) * itemsPerPage + 1;\n  const endItem = Math.min(currentPage * itemsPerPage, totalItems);\n  const hasNextPage = endItem < totalItems;\n  const hasPrevPage = currentPage > 1;\n\n  const renderPageNumbers = () => {\n    const pages: React.ReactNode[] = [];\n\n    const renderPageNumber = (pageNum: number) => {\n      const isActive = currentPage === pageNum;\n      return (\n        <li key={pageNum}>\n          <button\n            type=\"button\"\n            onClick={() => onPageChange(pageNum)}\n            className={`${paginationClassNames.pageItem} ${isActive ? 'bg-[var(--color-gray-100)] border-[var(--color-gray-300)]' : 'border-[var(--color-gray-200)] hover:bg-[var(--color-gray-50)]'}`}\n            aria-label={`Page ${pageNum}`}\n            aria-current={isActive ? 'page' : undefined}\n            data-automation-id={`page-number-${pageNum}`}\n          >\n            {pageNum}\n          </button>\n        </li>\n      );\n    };\n\n    const renderEllipsis = (key: string) => {\n      return (\n        <li key={key} aria-hidden=\"true\">\n          <span className=\"w-5 h-5 text-sm rounded border border-[var(--color-gray-200)] flex items-end justify-center\">\n            ...\n          </span>\n        </li>\n      );\n    };\n\n    if (mobileView) {\n      pages.push(renderPageNumber(currentPage));\n      return pages;\n    }\n    if (currentPage <= 3) {\n      for (let i = 1; i <= Math.min(3, totalPages); i++) {\n        pages.push(renderPageNumber(i));\n      }\n\n      if (totalPages > 3) {\n        pages.push(renderEllipsis(\"ellipsis-end\"));\n        pages.push(renderPageNumber(totalPages));\n      }\n    } else if (currentPage >= totalPages - 2) {\n      pages.push(renderPageNumber(firstPage));\n      pages.push(renderEllipsis(\"ellipsis-start\"));\n      pages.push(renderPageNumber(totalPages - 2));\n      pages.push(renderPageNumber(totalPages - 1));\n      pages.push(renderPageNumber(totalPages));\n    } else {\n      pages.push(renderPageNumber(firstPage));\n      pages.push(renderEllipsis(\"ellipsis-start\"));\n      pages.push(renderPageNumber(currentPage - 1));\n      pages.push(renderPageNumber(currentPage));\n      pages.push(renderPageNumber(currentPage + 1));\n      pages.push(renderEllipsis(\"ellipsis-end\"));\n      pages.push(renderPageNumber(lastPage));\n    }\n\n    return pages;\n  };\n\n  return (\n    <nav aria-label={ariaLabel} data-automation-id=\"pagination-container\" className=\"flex items-center gap-1 font-normal\">\n      <span\n        className=\"text-sm text-[var(--color-gray-700)] mr-1\"\n        data-automation-id=\"pagination-items-info\"\n      >\n        {`${mobileView ? \"\" : \"Showing \"}${startItem}-${endItem} of ${totalItems}`}\n      </span>\n      <Icon\n        name=\"next\"\n        size={12}\n        ariaLabel=\"Previous page\"\n        rotation=\"180\"\n        disabled={!hasPrevPage}\n        onClick={() => onPageChange(currentPage - 1)}\n        className={`stroke-[var(--color-gray-600)] ${paginationClassNames.pageNavigation}`}\n        automationId=\"pagination-previous-button\"\n      />\n      <ul className=\"flex items-center gap-1\">\n        {renderPageNumbers()}\n      </ul>\n      <Icon\n        name=\"next\"\n        size={12}\n        ariaLabel=\"Next page\"\n        disabled={!hasNextPage}\n        onClick={() => onPageChange(currentPage + 1)}\n        className={paginationClassNames.pageNavigation}\n        automationId=\"pagination-next-button\"\n      />\n    </nav>\n  );\n};\n"],"names":["React__default","Icon","paginationClassNames","pageNavigation","pageItem","Pagination","currentPage","itemsPerPage","totalItems","onPageChange","mobileView","ariaLabel","totalPages","Math","ceil","firstPage","lastPage","startItem","endItem","min","hasNextPage","hasPrevPage","renderPageNumbers","pages","renderPageNumber","pageNum","isActive","React","createElement","key","type","onClick","className","undefined","renderEllipsis","push","i","name","size","rotation","disabled","automationId"],"mappings":"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"}

package/dist/index31.js

@@ -1,7 +1,7 @@
 import e from "react";
 import { Button as N } from "./index3.js";
 import { Badge as I } from "./index9.js";
-import { Icon as g } from "./index5.js";
+import { Icon as d } from "./index5.js";
 /* empty css         */
 const t = {
   widgetCtn: "flex flex-col gap-[2px] align-center border border-[var(--color-gray-200)] rounded-[12px] w-[385px]",
@@ -21,16 +21,16 @@ const t = {
   requestFeatureImageCtn: "w-[48px] h-[48px] border border-[var(--color-gray-200)] rounded-[50%] flex items-center flex-shrink-0 bg-[var(--color-red-50)]",
   requestFeatureDescriptionCtn: "flex flex-col"
 }, B = ({
-  widgetClassName: d = "",
+  widgetClassName: g = "",
   widgetType: a = "general",
   widgetTitle: r = "",
   widgetDescription: l = "",
   widgetImage: p,
-  hasImage: x = !1,
+  hasImage: f = !1,
   hasButtonCta: n = !1,
   hasLinkCta: i = !1,
   ctaText: o = "",
-  hasBadge: f = !1,
+  hasBadge: x = !1,
   badgeText: w = "",
   buttonBgColor: u = "secondary",
   onCtaClick: b,
@@ -38,7 +38,7 @@ const t = {
   webinarDateInfo: c,
   webinarSpeaker: s
 }) => {
-  const E = f && /* @__PURE__ */ e.createElement(I, {
+  const E = x && /* @__PURE__ */ e.createElement(I, {
     label: w,
     className: t.widgetBadge,
     bgColor: "var(--color-yellow-50)",
@@ -52,14 +52,14 @@ const t = {
     label: o,
     className: `${t.widgetButtonCta} mt-[4px]`,
     onClick: b
-  })), C = x && /* @__PURE__ */ e.createElement("div", {
+  })), C = f && /* @__PURE__ */ e.createElement("div", {
     className: `${t.widgetImageCtn} widget-image-ctn`
   }, /* @__PURE__ */ e.createElement("img", {
     src: p,
     alt: "widget-image"
   }));
   return /* @__PURE__ */ e.createElement("div", {
-    className: `${t.widgetCtn} ${d} widget-ctn`,
+    className: `${t.widgetCtn} ${g} widget-ctn`,
     onClick: v
   }, a !== "general" && C, /* @__PURE__ */ e.createElement("div", {
     className: t.descriptionCtn
@@ -71,14 +71,14 @@ const t = {
     className: t.webinarInfoCtn
   }, s && /* @__PURE__ */ e.createElement("div", {
     className: `${t.webinarDescriptionInfo} align-baseline`
-  }, /* @__PURE__ */ e.createElement(g, {
+  }, /* @__PURE__ */ e.createElement(d, {
     name: "people",
     className: "relative top-[2px]"
   }), /* @__PURE__ */ e.createElement("span", {
     className: t.webinarSpeaker
   }, s)), c && /* @__PURE__ */ e.createElement("div", {
     className: `${t.webinarTimeInfo} align-baseline mb-[4px]`
-  }, /* @__PURE__ */ e.createElement(g, {
+  }, /* @__PURE__ */ e.createElement(d, {
     name: "clock",
     className: "relative top-[2px]"
   }), /* @__PURE__ */ e.createElement("span", {
@@ -96,6 +96,7 @@ const t = {
   }, l), m)) : m));
 };
 export {
-  B as Widget
+  B as Widget,
+  B as default
 };
 //# sourceMappingURL=index31.js.map