se-design 1.0.75 → 1.0.76-dev2

package/dist/index29.js

@@ -1,136 +1,147 @@
-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 "./index192.js";
-import { getRegionAttributes as K } from "./index65.js";
-import { useAccessiblePress as M } from "./index66.js";
+import r, { useState as F, useMemo as j, useRef as L, useEffect as B } from "react";
+import { Icon as O } from "./index6.js";
+import { Popover as z } from "./index19.js";
+import { MenuList as H } from "./index18.js";
+import { useStableId as U } from "./index199.js";
+import "./index72.js";
+import { useTabsA11y as V, getPanelId as q } from "./index73.js";
 /* empty css         */
-function d() {
-  return d = Object.assign ? Object.assign.bind() : function(n) {
-    for (var t = 1; t < arguments.length; t++) {
-      var r = arguments[t];
-      for (var o in r) ({}).hasOwnProperty.call(r, o) && (n[o] = r[o]);
+function i() {
+  return i = Object.assign ? Object.assign.bind() : function(l) {
+    for (var o = 1; o < arguments.length; o++) {
+      var c = arguments[o];
+      for (var d in c) ({}).hasOwnProperty.call(c, d) && (l[d] = c[d]);
     }
-    return n;
-  }, d.apply(null, arguments);
+    return l;
+  }, i.apply(null, arguments);
 }
-const a = {
-  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"
-}, ae = /* @__PURE__ */ H((n, 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: P,
-    onClose: L,
-    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,
-    disabledPrimaryButton: z = !1
-  } = n, g = i ? "cursor-pointer" : "", f = I(c, "banner-title"), y = I(void 0, "banner-description"), l = K({
-    titleId: f,
-    descriptionId: m ? y : void 0,
-    isFocusable: !!c
-  }), {
-    pressProps: F,
-    role: W,
-    tabIndex: q
-  } = M({
-    isNative: !1,
-    onClick: i ? () => i() : void 0
-  }), D = i ? {
-    ...F,
-    role: W,
-    tabIndex: q
-  } : {}, x = () => v && /* @__PURE__ */ e.createElement("div", {
-    className: `${a.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
+const re = ({
+  defaultActiveTab: l,
+  tabs: o,
+  onTabChange: c,
+  primaryTabCount: d,
+  headingLevel: g,
+  id: $,
+  ariaLabel: A = "Tabs",
+  ariaLabelledBy: K,
+  panelId: p
+}) => {
+  const M = l || (o[0] ? o[0].id : ""), [m, w] = F(M), [h, y] = F(!1), T = d ?? o?.length, f = o.slice(0, T), u = o.slice(T), b = u.find((e) => e.id === m), E = o.some((e) => e.renderTabContent), k = U($, "tabs"), R = j(() => {
+    const e = f.filter((s) => !s.disabled), t = u.filter((s) => !s.disabled), n = e.map((s) => s.id);
+    return t.length > 0 ? [...n, "overflow"] : n;
+  }, [f, u]), {
+    getTabProps: I,
+    getPanelProps: S,
+    getTabListProps: _,
+    handleKeyDown: x,
+    setFocusedTabId: C
+  } = V({
+    itemIds: R,
+    activeItem: m,
+    orientation: "horizontal",
+    idBase: k,
+    includePanelLinks: E || !!p,
+    externalPanelId: p
+  }), P = L(null), v = L(!1);
+  B(() => {
+    w(l || "");
+  }, [l]);
+  const N = (e) => {
+    w(e?.id), c?.(e?.id);
+  }, D = (e, t) => e.id === t;
+  if (g && o.length === 1) {
+    const e = o[0];
+    return /* @__PURE__ */ r.createElement(r.Fragment, null, /* @__PURE__ */ r.createElement(g, {
+      className: "se-design-tabs se-design-tabs-heading"
+    }, 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", i({
+    className: "se-design-tabs flex items-stretch relative border rounded-md border-[var(--color-gray-400)] w-fit",
+    "data-automation-id": "tabs-container"
+  }, _({
+    ariaLabel: A,
+    ariaLabelledBy: K
+  })), f.map((e) => {
+    const t = m === e.id, n = !!e.disabled, s = I(e.id);
+    return /* @__PURE__ */ r.createElement("button", i({
+      type: "button",
+      key: e.id
+    }, s, {
+      disabled: n,
+      "aria-label": e.ariaLabel,
+      onFocus: () => !n && C(e.id),
+      onKeyDown: x,
+      onClick: () => N(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" : t ? "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);
+  }), u.length > 0 && /* @__PURE__ */ r.createElement(z, {
+    className: "se-design-overflow-tabs",
+    position: "bottom-left",
+    noBorder: !0,
+    disableClickToggle: !0,
+    onPopoverToggle: (e) => {
+      e || (v.current && P.current?.focus(), v.current = !1);
     },
-    onClick: i
-  }, /* @__PURE__ */ e.createElement("img", {
-    src: n.bannerImage,
-    alt: B,
-    className: "max-w-[initial] h-[initial] max-h-[150px] object-contain"
-  }));
-  return /* @__PURE__ */ e.createElement("div", {
-    ref: t,
-    className: `${a.bannerCtn} ${g} ${r} banner-ctn`,
-    style: {
-      backgroundColor: o
+    renderPopoverSrcElement: ({
+      displayPopover: e,
+      togglePopover: t
+    }) => {
+      const n = I("overflow"), s = b ? q(b.id, k) : void 0;
+      return /* @__PURE__ */ r.createElement("div", i({}, n, {
+        ref: (a) => {
+          P.current = a, n.ref(a);
+        },
+        "aria-controls": s,
+        "aria-haspopup": "true",
+        "aria-expanded": e,
+        onClick: () => {
+          v.current = !1, t(!0);
+        },
+        onFocus: () => C("overflow"),
+        "data-automation-id": "tabs-kebab-menu",
+        onKeyDown: (a) => {
+          a.key === "Enter" || a.key === " " || a.key === "ArrowDown" ? (a.preventDefault(), v.current = !0, t(!0)) : a.key === "ArrowUp" ? (a.preventDefault(), v.current = !0, t("last")) : x(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)]" : ""} ${b?.label ? "bg-[var(--color-blue-500)]" : "hover:bg-[var(--color-gray-50)]"}`,
+        onMouseEnter: () => y(!0),
+        onMouseLeave: () => y(!1)
+      }), b?.label ? /* @__PURE__ */ r.createElement(r.Fragment, null, /* @__PURE__ */ r.createElement("span", {
+        className: "text-[var(--color-white)]"
+      }, b?.label), /* @__PURE__ */ r.createElement(O, {
+        name: "chevron",
+        rotation: e ? "180" : "0",
+        stroke: h ? "var(--color-gray-100)" : "var(--color-white)"
+      })) : /* @__PURE__ */ r.createElement(O, {
+        name: "kebab-menu",
+        fill: h ? "var(--color-gray-900)" : "var(--color-gray-700)"
+      }));
     },
-    "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: `${a.bannerContentCtn} w-[100%] banner-content-ctn`
-  }, D), /* @__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: (G) => G.stopPropagation()
-  }, T && /* @__PURE__ */ e.createElement(b, {
-    type: "link",
-    className: a.bannerLinkCta,
-    onClick: p,
-    label: C,
-    ariaLabel: u
-  }), j && /* @__PURE__ */ e.createElement(b, {
-    type: A,
-    size: "sm",
-    label: C,
-    onClick: p,
-    className: a?.bannerButton,
-    "data-automation-id": "banner-main-cta",
-    ariaLabel: u,
-    disabled: z
-  }), w && /* @__PURE__ */ e.createElement(b, {
-    type: R,
-    size: "sm",
-    label: S,
-    onClick: $,
-    className: a?.secondaryBannerButton,
-    "data-automation-id": "banner-secondary-cta",
-    ariaLabel: O
-  }))), s === "right" && x(), E && /* @__PURE__ */ e.createElement(J, {
-    name: P,
-    className: a.bannerCloseIconCtn,
-    onClick: L,
-    ariaLabel: "Close banner",
-    shouldStopPropagation: !0
-  }));
-});
+    renderPopoverContents: ({
+      closePopoverCb: e
+    }) => /* @__PURE__ */ r.createElement(H, {
+      items: u.map((t) => ({
+        id: t?.id,
+        label: t?.label,
+        automationId: t?.automationId || t?.id,
+        onClick: () => {
+          N(t), e();
+        }
+      }))
+    })
+  })), E && /* @__PURE__ */ r.createElement("div", {
+    className: "se-design-tabs-content"
+  }, o.map((e) => /* @__PURE__ */ r.createElement("div", i({
+    key: e.id
+  }, S(e.id), {
+    className: `tab-content ${D(e, m) ? "block" : "hidden"}`
+  }), D(e, m) && e.renderTabContent?.(e)))));
+};
 export {
-  ae as Banner
+  re as Tabs
 };
 //# sourceMappingURL=index29.js.map

package/dist/index29.js.map

@@ -1 +1 @@
-{"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  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  } = 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              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","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","disabled","secondaryBannerButton","Icon","name","shouldStopPropagation"],"mappings":"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"}
+{"version":3,"file":"index29.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}\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, 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        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                  ? '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            noBorder\n            disableClickToggle={true}\n            onPopoverToggle={(isOpen) => {\n              if (!isOpen) {\n                // Only return focus programmatically when the popover was opened via keyboard.\n                // Mouse-opened popovers must not call .focus() — programmatic focus after a\n                // pointer interaction triggers :focus-visible intermittently across browsers.\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-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                    <>\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","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/index3.js

@@ -1,105 +1,64 @@
-import r, { forwardRef as I } from "react";
-import { getA11yNameAttributes as R } from "./index71.js";
-import { useAccessiblePress as z } from "./index66.js";
-import { Icon as b } from "./index5.js";
-/* empty css        */
-function c() {
-  return c = Object.assign ? Object.assign.bind() : function(e) {
-    for (var n = 1; n < arguments.length; n++) {
-      var s = arguments[n];
-      for (var t in s) ({}).hasOwnProperty.call(s, t) && (e[t] = s[t]);
+import P, { forwardRef as x } from "react";
+import { getA11yNameAttributes as N } from "./index78.js";
+import { useAccessiblePress as O } from "./index67.js";
+import "./index72.js";
+function o() {
+  return o = Object.assign ? Object.assign.bind() : function(e) {
+    for (var t = 1; t < arguments.length; t++) {
+      var r = arguments[t];
+      for (var s in r) ({}).hasOwnProperty.call(r, s) && (e[s] = r[s]);
     }
     return e;
-  }, c.apply(null, arguments);
+  }, o.apply(null, arguments);
 }
-const a = "focus-outline", D = {
-  primary: "primary-btn disabled-btn pointer-events-none cursor-not-allowed",
-  secondary: "secondary-btn disabled-btn pointer-events-none cursor-not-allowed",
-  ghost: "ghost-btn disabled-btn pointer-events-none cursor-not-allowed",
-  link: "link-btn w-fit disabled-btn pointer-events-none cursor-not-allowed",
-  unstyled: "unstyled-btn disabled-btn pointer-events-none cursor-not-allowed",
-  sm: "py-1 px-3 small",
-  // padding: 4px, 12px
-  md: "py-2 px-3 medium",
-  // padding: 8px, 12px
-  lg: "py-3 px-4 large"
-  // padding: 12px, 16px
-}, p = {
-  primary: `primary-btn ${a}`,
-  secondary: `secondary-btn ${a}`,
-  ghost: `ghost-btn ${a}`,
-  link: `link-btn w-fit ${a}`,
-  unstyled: `unstyled-btn ${a}`,
-  sm: "py-1 px-3 small",
-  // padding: 4px, 12px
-  md: "py-2 px-3 medium",
-  // padding: 8px, 12px
-  lg: "py-3 px-4 large"
-  // padding: 12px, 16px
-}, U = {
-  blue: "theme-blue",
-  red: "theme-red",
-  yellow: "theme-yellow",
-  green: "theme-green",
-  ai: "theme-ai",
-  white: "theme-white"
-}, q = /* @__PURE__ */ I(({
-  type: e = "primary",
-  theme: n = "blue",
-  size: s = "md",
-  label: t = "",
-  iconPosition: u = "left",
-  disabled: y = !1,
-  loading: o = !1,
-  className: f = "",
-  iconProps: i = {
-    name: ""
-  },
-  automationId: g = "",
-  autoFocus: h = !1,
-  ariaLabel: w,
-  ariaLabelledBy: N,
-  ariaDescribedBy: v,
-  isPressed: x,
-  onClick: k,
-  onKeyboardActivate: C,
-  ...E
-}, $) => {
-  const m = e === "unstyled", {
-    pressProps: P,
-    isDisabled: d
-  } = z({
-    disabled: y,
-    loading: o,
-    isNative: !0,
-    // native <button> => hook does NOT add Enter/Space onKeyDown
-    pressed: x,
-    onClick: k,
-    onKeyboardActivate: C
-  }), j = !m && e !== "link" ? p[s] : "", A = m ? "" : U[n], B = d ? D[e] : p[e], l = i?.name ? {
-    ...i,
-    stroke: d ? "var(--color-gray-600)" : i.stroke
-  } : void 0, O = ["se-design-button", A, j, B, f, m ? "" : "rounded-[6px] inline-flex gap-1 items-center min-w-fit"].filter(Boolean).join(" "), _ = R({
-    ariaLabel: w,
-    ariaLabelledBy: N,
-    ariaDescribedBy: v
-  });
-  return /* @__PURE__ */ r.createElement("button", c({
-    ref: $,
-    type: "button",
-    className: O,
-    disabled: d,
-    autoFocus: h,
-    "data-automation-id": g
-  }, E, P, _), o && /* @__PURE__ */ r.createElement("div", {
-    "aria-hidden": "true",
-    className: "animate-spin w-4 h-4 border-2 border-current border-t-transparent rounded-full"
-  }), !o && l?.name && u === "left" && /* @__PURE__ */ r.createElement(b, l), t && /* @__PURE__ */ r.createElement("span", {
-    className: "button-label [font-weight:inherit]"
-  }, t), !o && l?.name && u === "right" && /* @__PURE__ */ r.createElement(b, l));
+const R = /* @__PURE__ */ x(({
+  onClick: e,
+  onKeyboardActivate: t,
+  role: r = "button",
+  disabled: s,
+  loading: c,
+  stopPropagation: l,
+  ariaLabel: u,
+  ariaLabelledBy: m,
+  ariaDescribedBy: f,
+  automationId: i,
+  className: n = "",
+  children: p,
+  ...v
+}, d) => {
+  const a = !!e, {
+    pressProps: b,
+    role: g,
+    tabIndex: A
+  } = O({
+    onClick: a ? e : void 0,
+    onKeyboardActivate: t,
+    isNative: !1,
+    role: r,
+    disabled: s,
+    loading: c,
+    stopPropagation: l
+  }), y = a ? {
+    role: g,
+    tabIndex: A,
+    className: `focus-outline ${n}`.trim(),
+    ...N({
+      ariaLabel: u,
+      ariaLabelledBy: m,
+      ariaDescribedBy: f
+    }),
+    ...b
+  } : {
+    className: n
+  };
+  return /* @__PURE__ */ P.createElement("div", o({
+    ref: d
+  }, y, i ? {
+    "data-automation-id": i
+  } : {}, v), p);
 });
-q.displayName = "Button";
+R.displayName = "AccessibleDiv";
 export {
-  q as Button
+  R as AccessibleDiv
 };
 //# sourceMappingURL=index3.js.map

package/dist/index3.js.map

@@ -1 +1 @@
-{"version":3,"file":"index3.js","sources":["../src/components/Button/index.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { Map } from '../../utils/common.types';\nimport { useAccessiblePress, getA11yNameAttributes } from '../../utils/a11y';\nimport { Icon, IconProps } from '../Icon';\nimport './style.scss';\n\n/**\n * Allows native button attributes (aria-*, data-*, etc.) to be passed through,\n * but keeps our own onClick/disabled/type typing AND aria-label/aria-labelledby/aria-describedby.\n * Note: We omit 'type' because we use it for button variant, not HTML type attribute.\n * The HTML type is always set to 'button' internally.\n */\ntype NativeButtonProps = Omit<\n  React.ButtonHTMLAttributes<HTMLButtonElement>,\n  'onClick' | 'disabled' | 'type' | 'aria-label' | 'aria-labelledby' | 'aria-describedby' | 'aria-pressed'\n>;\n\nexport interface ButtonProps extends NativeButtonProps {\n  /**\n   * Type of the button. \n   */\n  type?: 'primary' | 'secondary' | 'ghost' | 'link' | 'unstyled';\n  /**\n   * Color pallet of the button\n   */\n  theme?: 'blue' | 'red' | 'yellow' | 'green' | 'ai' | 'white';\n  /**\n   * Size of the button\n   */\n  size?: 'sm' | 'md' | 'lg';\n  /**\n   * Button contents\n   */\n  label: string | '';\n  /**\n   * Icon props\n   */\n  iconProps?: IconProps;\n  /**\n   * Icon position\n   */\n  iconPosition?: 'left' | 'right';\n  /**\n   * Disabled state\n   */\n  disabled?: boolean;\n  /**\n   * Loading state - will disable button and show spinner\n   */\n  loading?: boolean;\n  /**\n   * Optional click handler (called for pointer/mouse activations)\n   */\n  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;\n  /**\n   * Optional keyboard activation handler\n   * Called when button is activated via keyboard (Enter/Space) or assistive technology virtual activation.\n   * Use when you want to have different behavior for keyboard and pointer activations.\n   * If not provided, onClick will be called for all activations.\n   */\n  onKeyboardActivate?: (e: React.MouseEvent<HTMLButtonElement>) => void;\n  /**\n   * Custom class name\n   */\n  className?: string;\n  /**\n   * Automation ID for testing\n   */\n  automationId?: string;\n  /**\n   * If true, button will be focused on mount.\n   * For programmatic focus control, use ref with .focus() instead.\n   */\n  autoFocus?: boolean;\n  /**\n   * Accessible name for the button. Use when there's no visible label (e.g., icon-only buttons).\n   * Prefer ariaLabelledBy when a visible label exists.\n   */\n  ariaLabel?: string;\n  /**\n   * ID(s) of element(s) that label this button.\n   * Preferred over ariaLabel when a visible label exists (keeps SR and visual text in sync).\n   */\n  ariaLabelledBy?: string;\n  /**\n   * ID(s) of element(s) that describe this button.\n   * Provides additional context announced after the accessible name.\n   */\n  ariaDescribedBy?: string;\n  /**\n   * When true, sets aria-pressed for toggle/pressed state \n   */\n  isPressed?: boolean;\n}\n\nconst focusClass = 'focus-outline';\nconst disabledClassNames: Map = {\n  primary: 'primary-btn disabled-btn pointer-events-none cursor-not-allowed',\n  secondary: 'secondary-btn disabled-btn pointer-events-none cursor-not-allowed',\n  ghost: 'ghost-btn disabled-btn pointer-events-none cursor-not-allowed',\n  link: 'link-btn w-fit disabled-btn pointer-events-none cursor-not-allowed',\n  unstyled: 'unstyled-btn disabled-btn pointer-events-none cursor-not-allowed',\n  sm: 'py-1 px-3 small', // padding: 4px, 12px\n  md: 'py-2 px-3 medium', // padding: 8px, 12px\n  lg: 'py-3 px-4 large' // padding: 12px, 16px\n};\nconst classNames: Map = {\n  primary: `primary-btn ${focusClass}`,\n  secondary: `secondary-btn ${focusClass}`,\n  ghost: `ghost-btn ${focusClass}`,\n  link: `link-btn w-fit ${focusClass}`,\n  unstyled: `unstyled-btn ${focusClass}`,\n  sm: 'py-1 px-3 small', // padding: 4px, 12px\n  md: 'py-2 px-3 medium', // padding: 8px, 12px\n  lg: 'py-3 px-4 large' // padding: 12px, 16px\n};\n\nconst colorPalletClassNames: Map = {\n  blue: 'theme-blue',\n  red: 'theme-red',\n  yellow: 'theme-yellow',\n  green: 'theme-green',\n  ai: 'theme-ai',\n  white: 'theme-white'\n};\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      type = 'primary',\n      theme = 'blue',\n      size = 'md',\n      label = '',\n      iconPosition = 'left',\n      disabled = false,\n      loading = false,\n      className = '',\n      iconProps = { name: '' },\n      automationId = '',\n      autoFocus = false,\n      ariaLabel,\n      ariaLabelledBy,\n      ariaDescribedBy,\n      isPressed,\n      onClick,\n      onKeyboardActivate,\n      ...props\n    },\n    ref\n  ) => {\n  const isUnstyled = type === 'unstyled';\n\n  // Use shared hook for activation handling (pointer vs keyboard/virtual click routing) \n  const { pressProps, isDisabled } = useAccessiblePress({\n    disabled,\n    loading,\n    isNative: true, // native <button> => hook does NOT add Enter/Space onKeyDown\n    pressed: isPressed,\n    onClick: onClick as (e: React.MouseEvent<HTMLElement>) => void,\n    onKeyboardActivate: onKeyboardActivate as (e: React.MouseEvent<HTMLElement>) => void\n  });\n\n  // Skip size/color classes for unstyled variant\n  const sizeClassName = !isUnstyled && type !== 'link' ? classNames[size] : '';\n  const colorPalletClassName = !isUnstyled ? colorPalletClassNames[theme] : '';\n  const typeClassName = isDisabled ? disabledClassNames[type] : classNames[type];\n\n  // Avoid mutating incoming iconProps\n  const computedIconProps: IconProps | undefined = iconProps?.name\n    ? {\n        ...iconProps,\n        stroke: isDisabled ? 'var(--color-gray-600)' : iconProps.stroke\n      }\n    : undefined;\n\n  const buttonClassName = [\n    'se-design-button',\n    colorPalletClassName,\n    sizeClassName,\n    typeClassName,\n    className,\n    !isUnstyled ? 'rounded-[6px] inline-flex gap-1 items-center min-w-fit' : ''\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  // Compute accessible name/description props with correct precedence\n  const accessibleNameProps = getA11yNameAttributes({\n    ariaLabel,\n    ariaLabelledBy,\n    ariaDescribedBy\n  });\n\n  return (\n    <button\n      ref={ref}\n      type=\"button\"\n      className={buttonClassName}\n      disabled={isDisabled}\n      autoFocus={autoFocus}\n      data-automation-id={automationId}\n      {...props}\n      {...(pressProps as React.ButtonHTMLAttributes<HTMLButtonElement>)}\n      {...accessibleNameProps}\n    >\n      {loading && (\n        <div\n          aria-hidden=\"true\"\n          className=\"animate-spin w-4 h-4 border-2 border-current border-t-transparent rounded-full\"\n        />\n      )}\n      {!loading && computedIconProps?.name && iconPosition === 'left' && (\n        <Icon {...computedIconProps} />\n      )}\n      {label && <span className=\"button-label [font-weight:inherit]\">{label}</span>}\n      {!loading && computedIconProps?.name && iconPosition === 'right' && (\n        <Icon {...computedIconProps} />\n      )}\n    </button>\n  );\n  }\n);\n\nButton.displayName = 'Button';\n"],"names":["focusClass","disabledClassNames","primary","secondary","ghost","link","unstyled","sm","md","lg","classNames","colorPalletClassNames","blue","red","yellow","green","ai","white","Button","type","theme","size","label","iconPosition","disabled","loading","className","iconProps","name","automationId","autoFocus","ariaLabel","ariaLabelledBy","ariaDescribedBy","isPressed","onClick","onKeyboardActivate","props","ref","isUnstyled","pressProps","isDisabled","useAccessiblePress","isNative","pressed","sizeClassName","colorPalletClassName","typeClassName","computedIconProps","stroke","undefined","buttonClassName","filter","Boolean","join","accessibleNameProps","getA11yNameAttributes","React","createElement","_extends","Icon","displayName"],"mappings":"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"}
+{"version":3,"file":"index3.js","sources":["../src/components/AccessibleDiv/index.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { useAccessiblePress, getA11yNameAttributes } from '../../utils/a11y';\nimport type { UseAccessiblePressOptions } from '../../utils/a11y';\nimport type { AccessibleNameInput } from '../../utils/a11y';\n\ntype NativeDivProps = Omit<\n  React.HTMLAttributes<HTMLDivElement>,\n  'onClick' | 'role' | 'tabIndex' | 'aria-label' | 'aria-labelledby' | 'aria-describedby'\n>;\n\nexport interface AccessibleDivProps extends NativeDivProps, AccessibleNameInput {\n  onClick?: UseAccessiblePressOptions['onClick'];\n  onKeyboardActivate?: UseAccessiblePressOptions['onKeyboardActivate'];\n  /** ARIA role. Defaults to 'button'. */\n  role?: string;\n  disabled?: boolean;\n  loading?: boolean;\n  /** Calls e.stopPropagation() before onClick. Useful for nested clickable elements. */\n  stopPropagation?: boolean;\n  className?: string;\n  id?: string;\n  automationId?: string;\n  children?: React.ReactNode;\n}\n\n/**\n * Accessible clickable container for complex interactive content.\n * Use when children can't fit into se-design Button's label+icon API.\n * For simple icon+label, prefer se-design Button instead.\n */\nexport const AccessibleDiv = forwardRef<HTMLDivElement, AccessibleDivProps>(\n  (\n    {\n      onClick,\n      onKeyboardActivate,\n      role = 'button',\n      disabled,\n      loading,\n      stopPropagation,\n      ariaLabel,\n      ariaLabelledBy,\n      ariaDescribedBy,\n      automationId,\n      className = '',\n      children,\n      ...rest\n    },\n    ref\n  ) => {\n    const isInteractive = Boolean(onClick);\n\n    const { pressProps, role: resolvedRole, tabIndex } = useAccessiblePress({\n      onClick: isInteractive ? onClick : undefined,\n      onKeyboardActivate,\n      isNative: false,\n      role,\n      disabled,\n      loading,\n      stopPropagation\n    });\n\n    const interactiveProps = isInteractive\n      ? {\n          role: resolvedRole,\n          tabIndex,\n          className: `focus-outline ${className}`.trim(),\n          ...getA11yNameAttributes({ ariaLabel, ariaLabelledBy, ariaDescribedBy }),\n          ...pressProps\n        }\n      : { className };\n\n    return (\n      <div\n        ref={ref}\n        {...interactiveProps}\n        {...(automationId ? { 'data-automation-id': automationId } : {})}\n        {...rest}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n\nAccessibleDiv.displayName = 'AccessibleDiv';\n"],"names":["AccessibleDiv","onClick","onKeyboardActivate","role","disabled","loading","stopPropagation","ariaLabel","ariaLabelledBy","ariaDescribedBy","automationId","className","children","rest","ref","isInteractive","Boolean","pressProps","resolvedRole","tabIndex","useAccessiblePress","undefined","isNative","interactiveProps","trim","getA11yNameAttributes","React","createElement","_extends","displayName"],"mappings":";;;;;;;;;;;;;AA8BO,MAAMA,sBACX,CACE;AAAA,EACEC,SAAAA;AAAAA,EACAC,oBAAAA;AAAAA,EACAC,MAAAA,IAAO;AAAA,EACPC,UAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAC,iBAAAA;AAAAA,EACAC,WAAAA;AAAAA,EACAC,gBAAAA;AAAAA,EACAC,iBAAAA;AAAAA,EACAC,cAAAA;AAAAA,EACAC,WAAAA,IAAY;AAAA,EACZC,UAAAA;AAAAA,EACA,GAAGC;AACL,GACAC,MACG;AACH,QAAMC,IAAgBC,EAAQf,GAExB;AAAA,IAAEgB,YAAAA;AAAAA,IAAYd,MAAMe;AAAAA,IAAcC,UAAAA;AAAAA,EAAAA,IAAaC,EAAmB;AAAA,IACtEnB,SAASc,IAAgBd,IAAUoB;AAAAA,IACnCnB,oBAAAA;AAAAA,IACAoB,UAAU;AAAA,IACVnB,MAAAA;AAAAA,IACAC,UAAAA;AAAAA,IACAC,SAAAA;AAAAA,IACAC,iBAAAA;AAAAA,EAAAA,CACD,GAEKiB,IAAmBR,IACrB;AAAA,IACEZ,MAAMe;AAAAA,IACNC,UAAAA;AAAAA,IACAR,WAAW,iBAAiBA,CAAS,GAAGa,KAAAA;AAAAA,IACxC,GAAGC,EAAsB;AAAA,MAAElB,WAAAA;AAAAA,MAAWC,gBAAAA;AAAAA,MAAgBC,iBAAAA;AAAAA,IAAAA,CAAiB;AAAA,IACvE,GAAGQ;AAAAA,EAAAA,IAEL;AAAA,IAAEN,WAAAA;AAAAA,EAAAA;AAEN,SACEe,gBAAAA,EAAAC,cAAA,OAAAC,EAAA;AAAA,IACEd,KAAAA;AAAAA,EAAAA,GACIS,GACCb,IAAe;AAAA,IAAE,sBAAsBA;AAAAA,EAAAA,IAAiB,CAAA,GACzDG,CAAI,GAEPD,CACE;AAET,CACF;AAEAZ,EAAc6B,cAAc;"}