se-design 1.0.80 → 1.0.81-dev1

package/dist/index29.js.map

@@ -1 +1 @@
-{"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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"}
+{"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-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                    <>\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.map

@@ -1 +1 @@
-{"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":";;;;;;;;;;;;;AA8BaA,MAAAA,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;AACGC,QAAAA,IAAgBC,EAAQf,GAExB;AAAA,IAAEgB,YAAAA;AAAAA,IAAYd,MAAMe;AAAAA,IAAcC,UAAAA;AAAAA,MAAaC,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,KAAK;AAAA,IAC7C,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;AAGJe,SAAAA,gBAAAA,EAAAC,cAAA,OAAAC,EAAA;AAAA,IACEd,KAAAA;AAAAA,EAAAA,GACIS,GACCb,IAAe;AAAA,IAAE,sBAAsBA;AAAAA,EAAiB,IAAA,IACzDG,CAAI,GAEPD,CACE;AAET,CACF;AAEAZ,EAAc6B,cAAc;"}
+{"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;"}

package/dist/index30.js

@@ -1,19 +1,19 @@
-import e, { forwardRef as J } from "react";
-import { Icon as K } from "./index6.js";
-import { Button as m } from "./index4.js";
-import { useStableId as h } from "./index199.js";
-import { getRegionAttributes as M } from "./index66.js";
-import { useAccessiblePress as Q } from "./index67.js";
+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 "./index83.js";
+import { getRegionAttributes as Q } from "./index66.js";
+import { useAccessiblePress as U } from "./index67.js";
 import "./index72.js";
 /* empty css         */
-function b() {
-  return b = Object.assign ? Object.assign.bind() : function(a) {
+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;
-  }, b.apply(null, arguments);
+  }, m.apply(null, arguments);
 }
 const n = {
   bannerCtn: "relative rounded-[12px] flex pr-3.5",
@@ -22,117 +22,119 @@ const n = {
   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"
-}, te = /* @__PURE__ */ J((a, t) => {
+}, re = /* @__PURE__ */ K((a, t) => {
   const {
     bannerClassName: r,
     bannerBgColor: o,
-    title: k,
-    titleTag: v = "span",
-    description: d,
-    hasImage: N,
+    title: E,
+    titleTag: P = "span",
+    description: b,
+    hasImage: L,
     imagePosition: s = "right",
-    imageWidth: B = "30%",
-    imageAlt: E = "",
-    hasCloseIcon: P,
-    closeIconName: L,
-    onClose: T,
+    imageWidth: T = "30%",
+    imageAlt: $ = "",
+    hasCloseIcon: j,
+    closeIconName: A,
+    onClose: w,
     onBannerClick: i,
-    hasLinkCta: $,
-    onCtaClick: p,
-    onSecondaryCtaClick: j,
-    hasButtonCta: A,
-    buttonType: w = "secondary",
-    ctaText: u,
-    ctaAriaLabel: C,
-    hasSecondaryButtonCta: R = !1,
-    secondaryButtonType: S = "secondary",
-    secondaryCtaText: O,
-    secondaryCtaAriaLabel: _,
-    automationId: z = "",
+    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: F = !1,
-    customContent: g = null
-  } = a, f = i ? "cursor-pointer" : "", y = h(c, "banner-title"), x = h(void 0, "banner-description"), l = M({
-    titleId: y,
-    descriptionId: d ? x : void 0,
+    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
-  }), {
-    pressProps: W,
-    role: q,
-    tabIndex: D
-  } = Q({
+  }), v = C || p || y, {
+    pressProps: q,
+    role: D,
+    tabIndex: G
+  } = U({
     isNative: !1,
-    onClick: i ? () => i() : void 0
-  }), G = i ? {
-    ...W,
-    role: q,
-    tabIndex: D
-  } : {}, I = () => N && /* @__PURE__ */ e.createElement("div", {
-    className: `${n.bannerImageCtn} ${f} banner-image-ctn ${s === "right" ? "mr-5 ml-0 justify-end" : "ml-5 mr-0 justify-start"} min-h-full`,
+    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: B
+      width: T
     },
-    onClick: i
+    "aria-hidden": "true"
   }, /* @__PURE__ */ e.createElement("img", {
     src: a.bannerImage,
-    alt: E,
+    alt: $,
     className: "max-w-[initial] h-[initial] max-h-[150px] object-contain"
   }));
   return /* @__PURE__ */ e.createElement("div", {
     ref: t,
-    className: `${n.bannerCtn} ${f} ${r} banner-ctn`,
+    className: `${n.bannerCtn} ${I} ${r} banner-ctn`,
     style: {
       backgroundColor: o
     },
-    "data-automation-id": z,
+    "data-automation-id": F,
     role: l.role,
     "aria-labelledby": l["aria-labelledby"],
     "aria-describedby": l["aria-describedby"],
     tabIndex: l.tabIndex
-  }, s === "left" && I(), /* @__PURE__ */ e.createElement("div", b({
+  }, s === "left" && N(), /* @__PURE__ */ e.createElement("div", m({
     className: `${n.bannerContentCtn} w-[100%] banner-content-ctn`
-  }, G), /* @__PURE__ */ e.createElement(v, {
-    id: y,
+  }, H), /* @__PURE__ */ e.createElement(P, {
+    id: h,
     className: "banner-title",
     tabIndex: c ? -1 : void 0
-  }, k), g ? /* @__PURE__ */ e.createElement(e.Fragment, null, g) : /* @__PURE__ */ e.createElement("span", {
-    id: x,
+  }, E), x ? /* @__PURE__ */ e.createElement(e.Fragment, null, x) : /* @__PURE__ */ e.createElement("span", {
+    id: k,
     className: "banner-description"
-  }, d), /* @__PURE__ */ e.createElement("div", {
+  }, b), /* @__PURE__ */ e.createElement("div", {
     className: "flex gap-3",
-    onClick: (H) => H.stopPropagation()
-  }, $ && /* @__PURE__ */ e.createElement(m, {
+    onClick: (J) => J.stopPropagation()
+  }, p && /* @__PURE__ */ e.createElement(d, {
     type: "link",
     className: n.bannerLinkCta,
-    onClick: p,
-    label: u,
-    ariaLabel: C
-  }), A && /* @__PURE__ */ e.createElement(m, {
-    type: w,
+    onClick: u,
+    label: g,
+    ariaLabel: f
+  }), C && /* @__PURE__ */ e.createElement(d, {
+    type: S,
     size: "sm",
-    label: u,
-    onClick: p,
+    label: g,
+    onClick: u,
     className: n?.bannerButton,
     "data-automation-id": "banner-main-cta",
-    ariaLabel: C,
-    disabled: F
-  }), R && /* @__PURE__ */ e.createElement(m, {
-    type: S,
+    ariaLabel: f,
+    disabled: W
+  }), y && /* @__PURE__ */ e.createElement(d, {
+    type: O,
     size: "sm",
-    label: O,
-    onClick: j,
+    label: _,
+    onClick: R,
     className: n?.secondaryBannerButton,
     "data-automation-id": "banner-secondary-cta",
-    ariaLabel: _
-  }))), s === "right" && I(), P && /* @__PURE__ */ e.createElement(K, {
-    name: L,
+    ariaLabel: z
+  }))), s === "right" && N(), j && /* @__PURE__ */ e.createElement(M, {
+    name: A,
     className: n.bannerCloseIconCtn,
-    onClick: T,
+    onClick: w,
     ariaLabel: "Close banner",
     shouldStopPropagation: !0
   }));
 });
 export {
-  te as Banner
+  re as Banner
 };
 //# 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 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        {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","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/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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"}

package/dist/index31.js.map

@@ -1 +1 @@
-{"version":3,"file":"index31.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":"AAaA,OAAAA,OAAA;AAAA,SAAA,QAAAC,SAAA;AAAA,MAAMC,IAAuB;AAAA,EAC3BC,gBAAgB;AAAA,EAChBC,UAAU;AACZ,GAEaC,IAAwCA,CAAC;AAAA,EAAEC,aAAAA;AAAAA,EAAaC,cAAAA;AAAAA,EAAcC,YAAAA;AAAAA,EAAYC,cAAAA;AAAAA,EAAcC,YAAAA,IAAa;AAAA,EAAOC,WAAAA,IAAY;AAAsB,MAAM;AACvK,QAAMC,IAAaC,KAAKC,KAAKN,IAAaD,CAAY,GAChDQ,IAAY,GACZC,IAAWJ,GACXK,KAAaX,IAAc,KAAKC,IAAe,GAC/CW,IAAUL,KAAKM,IAAIb,IAAcC,GAAcC,CAAU,GACzDY,IAAcF,IAAUV,GACxBa,IAAcf,IAAc,GAE5BgB,IAAoBA,MAAM;AAC9B,UAAMC,IAA2B,CAAA,GAE3BC,IAAmBA,CAACC,MAAoB;AAC5C,YAAMC,IAAWpB,MAAgBmB;AAE/BE,aAAAA,gBAAAA,EAAAC,cAAA,MAAA;AAAA,QAAIC,KAAKJ;AAAAA,MAAAA,GACPG,gBAAAA,EAAAA,cAAA,UAAA;AAAA,QACEE,MAAK;AAAA,QACLC,SAASA,MAAMtB,EAAagB,CAAO;AAAA,QACnCO,WAAW,GAAG9B,EAAqBE,QAAQ,IAAIsB,IAAW,8DAA8D,gEAAgE;AAAA,QACxL,cAAY,QAAQD,CAAO;AAAA,QAC3B,gBAAcC,IAAW,SAASO;AAAAA,QAClC,sBAAoB,eAAeR,CAAO;AAAA,MAAA,GAEzCA,CACK,CACN;AAAA,IAAA,GAIFS,IAAiBA,CAACL,MAEpBF,gBAAAA,EAAAC,cAAA,MAAA;AAAA,MAAIC,KAAAA;AAAAA,MAAU,eAAY;AAAA,IAAA,GACxBD,gBAAAA,EAAAA,cAAA,QAAA;AAAA,MAAMI,WAAU;AAAA,IAAA,GAA8F,KAExG,CACJ;AAIR,QAAItB;AACIyB,aAAAA,EAAAA,KAAKX,EAAiBlB,CAAW,CAAC,GACjCiB;AAET,QAAIjB,KAAe,GAAG;AACX8B,eAAAA,IAAI,GAAGA,KAAKvB,KAAKM,IAAI,GAAGP,CAAU,GAAGwB;AACtCD,QAAAA,EAAAA,KAAKX,EAAiBY,CAAC,CAAC;AAGhC,MAAIxB,IAAa,MACTuB,EAAAA,KAAKD,EAAe,cAAc,CAAC,GACnCC,EAAAA,KAAKX,EAAiBZ,CAAU,CAAC;AAAA,IACzC,MACF,CAAWN,KAAeM,IAAa,KAC/BuB,EAAAA,KAAKX,EAAiBT,CAAS,CAAC,GAChCoB,EAAAA,KAAKD,EAAe,gBAAgB,CAAC,GAC3CX,EAAMY,KAAKX,EAAiBZ,IAAa,CAAC,CAAC,GAC3CW,EAAMY,KAAKX,EAAiBZ,IAAa,CAAC,CAAC,GACrCuB,EAAAA,KAAKX,EAAiBZ,CAAU,CAAC,MAEjCuB,EAAAA,KAAKX,EAAiBT,CAAS,CAAC,GAChCoB,EAAAA,KAAKD,EAAe,gBAAgB,CAAC,GAC3CX,EAAMY,KAAKX,EAAiBlB,IAAc,CAAC,CAAC,GACtC6B,EAAAA,KAAKX,EAAiBlB,CAAW,CAAC,GACxCiB,EAAMY,KAAKX,EAAiBlB,IAAc,CAAC,CAAC,GACtC6B,EAAAA,KAAKD,EAAe,cAAc,CAAC,GACnCC,EAAAA,KAAKX,EAAiBR,CAAQ,CAAC;AAGhCO,WAAAA;AAAAA,EAAAA;AAIPI,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAK,cAAYjB;AAAAA,IAAW,sBAAmB;AAAA,IAAuBqB,WAAU;AAAA,EAAA,GAC9EJ,gBAAAA,EAAAA,cAAA,QAAA;AAAA,IACEI,WAAU;AAAA,IACV,sBAAmB;AAAA,EAAA,GAElB,GAAGtB,IAAa,KAAK,UAAU,GAAGO,CAAS,IAAIC,CAAO,OAAOV,CAAU,EACpE,GACNmB,gBAAAA,EAAAC,cAAC3B,GAAI;AAAA,IACHoC,MAAK;AAAA,IACLC,MAAM;AAAA,IACN3B,WAAU;AAAA,IACV4B,UAAS;AAAA,IACTC,UAAU,CAACnB;AAAAA,IACXU,SAASA,MAAMtB,EAAaH,IAAc,CAAC;AAAA,IAC3C0B,WAAW,kCAAkC9B,EAAqBC,cAAc;AAAA,IAChFsC,cAAa;AAAA,EAAA,CACd,GACDb,gBAAAA,EAAAA,cAAA,MAAA;AAAA,IAAII,WAAU;AAAA,KACXV,EAAkB,CACjB,GACJK,gBAAAA,EAAAC,cAAC3B,GAAI;AAAA,IACHoC,MAAK;AAAA,IACLC,MAAM;AAAA,IACN3B,WAAU;AAAA,IACV6B,UAAU,CAACpB;AAAAA,IACXW,SAASA,MAAMtB,EAAaH,IAAc,CAAC;AAAA,IAC3C0B,WAAW9B,EAAqBC;AAAAA,IAChCsC,cAAa;AAAA,EACd,CAAA,CACE;AAET;"}
+{"version":3,"file":"index31.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/index32.js.map

@@ -1 +1 @@
-{"version":3,"file":"index32.js","sources":["../src/components/Widget/index.tsx"],"sourcesContent":["import React, { FC } from \"react\";\nimport { Map } from \"../../utils/common.types\";\nimport { Button } from \"../Button\";\nimport { Badge } from \"../Badge\";\nimport { Icon } from \"../Icon\";\nimport \"./style.scss\";\n\nexport interface WidgetProps {\n  widgetClassName?: string;\n  widgetType?: \"promotion\" | \"webinar\" | \"request-feature\" | \"general\";\n  widgetTitle?: string;\n  hasBadge?: boolean;\n  webinarSpeaker?: string;\n  badgeText?: string;\n  widgetDescription?: string;\n  webinarDateInfo?: string;\n  hasImage?: boolean;\n  widgetImage?: string;\n  hasButtonCta?: boolean;\n  buttonBgColor?: 'primary' | 'secondary';\n  hasLinkCta?: boolean;\n  ctaText?: string;\n  onCtaClick?: () => void;\n  onWidgetClick?: () => void;\n}\n\nconst className: Map = {\n  widgetCtn: 'flex flex-col gap-[2px] align-center border border-[var(--color-gray-200)] rounded-[12px] w-[385px]',\n  widgetImageCtn: 'cursor-pointer',\n  descriptionCtn: 'p-4 flex flex-col',\n  widgetTitle: 'text-[var(--color-gray-900)] mt-[4px] mb-[8px]',\n  widgetDescription: 'text-[var(--color-gray-700)] mb-[4px]',\n  widgetLinkCta: 'text-[var(--color-blue-500)] cursor-pointer hover:text-[var(--color-blue-600)]',\n  widgetButtonCta: 'self-start',\n  widgetBadge: 'w-fit',\n  webinarInfoCtn: 'flex flex-col gap-2',\n  webinarSpeaker: 'text-[var(--color-gray-700)]',\n  webinarDate: 'text-[var(--color-gray-700)]',\n  webinarDescriptionInfo: 'flex gap-2',\n  webinarTimeInfo: 'flex gap-2',\n  requestFeatureCtn: 'flex gap-[12px]',\n  requestFeatureImageCtn: 'w-[48px] h-[48px] border border-[var(--color-gray-200)] rounded-[50%] flex items-center flex-shrink-0 bg-[var(--color-red-50)]',\n  requestFeatureDescriptionCtn: 'flex flex-col',\n};\n\nexport const Widget: FC<WidgetProps> = ({\n  widgetClassName = \"\",\n  widgetType = 'general',\n  widgetTitle = \"\",\n  widgetDescription = \"\",\n  widgetImage,\n  hasImage = false,\n  hasButtonCta = false,\n  hasLinkCta = false,\n  ctaText = \"\",\n  hasBadge = false,\n  badgeText = \"\",\n  buttonBgColor = 'secondary',\n  onCtaClick,\n  onWidgetClick,\n  webinarDateInfo,\n  webinarSpeaker,\n}) => {\n\n  const renderBadge = hasBadge && (\n    <Badge\n      label={badgeText}\n      className={className.widgetBadge}\n      bgColor=\"var(--color-yellow-50)\"\n      textColor=\"var(--color-yellow-400)\"\n      fontWeight=\"normal\"\n    />\n  );\n\n  const renderCTA = (hasLinkCta || hasButtonCta) && (\n    <React.Fragment>\n      {hasLinkCta && <span className={className.widgetLinkCta}>{ctaText}</span>}\n      {hasButtonCta && <Button type={buttonBgColor} size=\"md\" label={ctaText} className={`${className.widgetButtonCta} mt-[4px]`} onClick={onCtaClick} />}\n    </React.Fragment>\n  );\n\n  const renderImage = hasImage && (\n    <div className={`${className.widgetImageCtn} widget-image-ctn`}>\n      <img src={widgetImage} alt=\"widget-image\"/>\n    </div>\n  );\n\n  return (\n    <div className={`${className.widgetCtn} ${widgetClassName} widget-ctn`} onClick={onWidgetClick}>\n      {widgetType !== \"general\" && renderImage}\n      <div className={className.descriptionCtn}>\n        {widgetType !== \"general\" && renderBadge}\n        {widgetType !== \"request-feature\" && <span className={`${className.widgetTitle} widget-title`}>{widgetTitle}</span>}\n\n        {([\"promotion\", \"general\"].includes(widgetType)) && (\n          <span className={`${className.widgetDescription} widget-description`}>{widgetDescription}</span>\n        )}\n\n        {widgetType === \"webinar\" && (\n          <div className={className.webinarInfoCtn}>\n            {webinarSpeaker && (\n            <div className={`${className.webinarDescriptionInfo} align-baseline`}>\n              <Icon name=\"people\" className=\"relative top-[2px]\" />\n              <span className={className.webinarSpeaker}>{webinarSpeaker}</span>\n            </div>\n            )}\n            {webinarDateInfo && (\n               <div className={`${className.webinarTimeInfo} align-baseline mb-[4px]`}>\n                <Icon name=\"clock\" className=\"relative top-[2px]\" />\n                <span className={className.webinarDate}>{webinarDateInfo}</span>\n              </div>\n            )}\n          </div>\n        )}\n\n        {widgetType === \"request-feature\" ? (\n          <div className={className.requestFeatureCtn}>\n            <div className={className.requestFeatureImageCtn} />\n            <div className={className.requestFeatureDescriptionCtn}>\n              <span className={`${className.widgetTitle} widget-title`}>{widgetTitle}</span>\n              <span className={`${className.widgetDescription} widget-description`}>{widgetDescription}</span>\n              {renderCTA}\n            </div>\n          </div>\n        ) : (\n          renderCTA\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport default Widget;"],"names":["React__default","Button","Badge","Icon","className","widgetCtn","widgetImageCtn","descriptionCtn","widgetTitle","widgetDescription","widgetLinkCta","widgetButtonCta","widgetBadge","webinarInfoCtn","webinarSpeaker","webinarDate","webinarDescriptionInfo","webinarTimeInfo","requestFeatureCtn","requestFeatureImageCtn","requestFeatureDescriptionCtn","Widget","widgetClassName","widgetType","widgetImage","hasImage","hasButtonCta","hasLinkCta","ctaText","hasBadge","badgeText","buttonBgColor","onCtaClick","onWidgetClick","webinarDateInfo","renderBadge","createElement","label","bgColor","textColor","fontWeight","renderCTA","React","Fragment","type","size","onClick","renderImage","src","alt","includes","name"],"mappings":"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"}
+{"version":3,"file":"index32.js","sources":["../src/components/Widget/index.tsx"],"sourcesContent":["import React, { FC } from \"react\";\nimport { Map } from \"../../utils/common.types\";\nimport { Button } from \"../Button\";\nimport { Badge } from \"../Badge\";\nimport { Icon } from \"../Icon\";\nimport \"./style.scss\";\n\nexport interface WidgetProps {\n  widgetClassName?: string;\n  widgetType?: \"promotion\" | \"webinar\" | \"request-feature\" | \"general\";\n  widgetTitle?: string;\n  hasBadge?: boolean;\n  webinarSpeaker?: string;\n  badgeText?: string;\n  widgetDescription?: string;\n  webinarDateInfo?: string;\n  hasImage?: boolean;\n  widgetImage?: string;\n  hasButtonCta?: boolean;\n  buttonBgColor?: 'primary' | 'secondary';\n  hasLinkCta?: boolean;\n  ctaText?: string;\n  onCtaClick?: () => void;\n  onWidgetClick?: () => void;\n}\n\nconst className: Map = {\n  widgetCtn: 'flex flex-col gap-[2px] align-center border border-[var(--color-gray-200)] rounded-[12px] w-[385px]',\n  widgetImageCtn: 'cursor-pointer',\n  descriptionCtn: 'p-4 flex flex-col',\n  widgetTitle: 'text-[var(--color-gray-900)] mt-[4px] mb-[8px]',\n  widgetDescription: 'text-[var(--color-gray-700)] mb-[4px]',\n  widgetLinkCta: 'text-[var(--color-blue-500)] cursor-pointer hover:text-[var(--color-blue-600)]',\n  widgetButtonCta: 'self-start',\n  widgetBadge: 'w-fit',\n  webinarInfoCtn: 'flex flex-col gap-2',\n  webinarSpeaker: 'text-[var(--color-gray-700)]',\n  webinarDate: 'text-[var(--color-gray-700)]',\n  webinarDescriptionInfo: 'flex gap-2',\n  webinarTimeInfo: 'flex gap-2',\n  requestFeatureCtn: 'flex gap-[12px]',\n  requestFeatureImageCtn: 'w-[48px] h-[48px] border border-[var(--color-gray-200)] rounded-[50%] flex items-center flex-shrink-0 bg-[var(--color-red-50)]',\n  requestFeatureDescriptionCtn: 'flex flex-col',\n};\n\nexport const Widget: FC<WidgetProps> = ({\n  widgetClassName = \"\",\n  widgetType = 'general',\n  widgetTitle = \"\",\n  widgetDescription = \"\",\n  widgetImage,\n  hasImage = false,\n  hasButtonCta = false,\n  hasLinkCta = false,\n  ctaText = \"\",\n  hasBadge = false,\n  badgeText = \"\",\n  buttonBgColor = 'secondary',\n  onCtaClick,\n  onWidgetClick,\n  webinarDateInfo,\n  webinarSpeaker,\n}) => {\n\n  const renderBadge = hasBadge && (\n    <Badge\n      label={badgeText}\n      className={className.widgetBadge}\n      bgColor=\"var(--color-yellow-50)\"\n      textColor=\"var(--color-yellow-400)\"\n      fontWeight=\"normal\"\n    />\n  );\n\n  const renderCTA = (hasLinkCta || hasButtonCta) && (\n    <React.Fragment>\n      {hasLinkCta && <span className={className.widgetLinkCta}>{ctaText}</span>}\n      {hasButtonCta && <Button type={buttonBgColor} size=\"md\" label={ctaText} className={`${className.widgetButtonCta} mt-[4px]`} onClick={onCtaClick} />}\n    </React.Fragment>\n  );\n\n  const renderImage = hasImage && (\n    <div className={`${className.widgetImageCtn} widget-image-ctn`}>\n      <img src={widgetImage} alt=\"widget-image\"/>\n    </div>\n  );\n\n  return (\n    <div className={`${className.widgetCtn} ${widgetClassName} widget-ctn`} onClick={onWidgetClick}>\n      {widgetType !== \"general\" && renderImage}\n      <div className={className.descriptionCtn}>\n        {widgetType !== \"general\" && renderBadge}\n        {widgetType !== \"request-feature\" && <span className={`${className.widgetTitle} widget-title`}>{widgetTitle}</span>}\n\n        {([\"promotion\", \"general\"].includes(widgetType)) && (\n          <span className={`${className.widgetDescription} widget-description`}>{widgetDescription}</span>\n        )}\n\n        {widgetType === \"webinar\" && (\n          <div className={className.webinarInfoCtn}>\n            {webinarSpeaker && (\n            <div className={`${className.webinarDescriptionInfo} align-baseline`}>\n              <Icon name=\"people\" className=\"relative top-[2px]\" />\n              <span className={className.webinarSpeaker}>{webinarSpeaker}</span>\n            </div>\n            )}\n            {webinarDateInfo && (\n               <div className={`${className.webinarTimeInfo} align-baseline mb-[4px]`}>\n                <Icon name=\"clock\" className=\"relative top-[2px]\" />\n                <span className={className.webinarDate}>{webinarDateInfo}</span>\n              </div>\n            )}\n          </div>\n        )}\n\n        {widgetType === \"request-feature\" ? (\n          <div className={className.requestFeatureCtn}>\n            <div className={className.requestFeatureImageCtn} />\n            <div className={className.requestFeatureDescriptionCtn}>\n              <span className={`${className.widgetTitle} widget-title`}>{widgetTitle}</span>\n              <span className={`${className.widgetDescription} widget-description`}>{widgetDescription}</span>\n              {renderCTA}\n            </div>\n          </div>\n        ) : (\n          renderCTA\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport default Widget;"],"names":["React__default","Button","Badge","Icon","className","widgetCtn","widgetImageCtn","descriptionCtn","widgetTitle","widgetDescription","widgetLinkCta","widgetButtonCta","widgetBadge","webinarInfoCtn","webinarSpeaker","webinarDate","webinarDescriptionInfo","webinarTimeInfo","requestFeatureCtn","requestFeatureImageCtn","requestFeatureDescriptionCtn","Widget","widgetClassName","widgetType","widgetImage","hasImage","hasButtonCta","hasLinkCta","ctaText","hasBadge","badgeText","buttonBgColor","onCtaClick","onWidgetClick","webinarDateInfo","renderBadge","React","createElement","label","bgColor","textColor","fontWeight","renderCTA","Fragment","type","size","onClick","renderImage","src","alt","includes","name"],"mappings":"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"}

package/dist/index33.js

@@ -1,6 +1,6 @@
-import e, { useRef as $ } from "react";
-import { useStableId as y } from "./index199.js";
-function L(a) {
+import e, { useRef as y } from "react";
+import { useStableId as N } from "./index83.js";
+function I(a) {
   const {
     label: s,
     value: n,
@@ -14,26 +14,27 @@ function L(a) {
     automationId: h = "",
     bgColor: b = "var(--color-white)",
     withBorder: x = !0,
-    content: c
-  } = a, o = $(null), d = y(void 0, `${i}-${n}`);
+    content: c,
+    ariaControls: C
+  } = a, o = y(null), d = N(void 0, `${i}-${n}`);
   e.useLayoutEffect(() => {
     o.current && (o.current.checked = l);
   }, [l]);
-  const C = () => {
+  const g = () => {
     t || (o.current?.focus(), o.current?.click());
-  }, g = (r) => {
-    r.stopPropagation();
   }, k = (r) => {
     r.stopPropagation();
-  }, w = () => {
+  }, w = (r) => {
+    r.stopPropagation();
+  }, v = () => {
     u?.({
       ...a,
       checked: !0
     });
-  }, v = l ? "border-[var(--color-blue-500)]" : "border-[var(--color-gray-400)]";
+  }, $ = l ? "border-[var(--color-blue-500)]" : "border-[var(--color-gray-400)]";
   return /* @__PURE__ */ e.createElement("div", {
-    className: `se-design-radio-container flex flex-col justify-center items-start gap-2 ${t ? "cursor-not-allowed" : "cursor-pointer"} ${x ? `border ${v} p-4` : ""} rounded-[6px] transition-colors duration-300 ${t ? "opacity-50" : ""} ${p}`,
-    onClick: C,
+    className: `se-design-radio-container flex flex-col justify-center items-start gap-2 ${t ? "cursor-not-allowed" : "cursor-pointer"} ${x ? `border ${$} p-4` : ""} rounded-[6px] transition-colors duration-300 ${t ? "opacity-50" : ""} ${p}`,
+    onClick: g,
     style: {
       width: m || "auto",
       backgroundColor: b
@@ -50,13 +51,14 @@ function L(a) {
     value: n,
     disabled: t,
     className: "radio-field-input cursor-pointer accent-[var(--color-blue-500)] disabled:cursor-not-allowed disabled:opacity-50 text-[var(--color-blue-500)] w-[14px] h-[14px] p-[3px]",
-    onClick: k,
-    onChange: w
+    "aria-controls": C,
+    onClick: w,
+    onChange: v
   }), /* @__PURE__ */ e.createElement("label", {
     htmlFor: d,
     className: `${a.helperLabel ? "flex flex-col gap-[6px] " : ""}${t ? "cursor-not-allowed" : "cursor-pointer"}`,
     "data-automation-id": "radio-field-label",
-    onClick: g
+    onClick: k
   }, /* @__PURE__ */ e.createElement("span", {
     className: `text-sm text-[var(--color-gray-800)] ${f} `,
     style: {
@@ -72,6 +74,6 @@ function L(a) {
   }, a.helperLabel));
 }
 export {
-  L as Radio
+  I as Radio
 };
 //# sourceMappingURL=index33.js.map

package/dist/index33.js.map

@@ -1 +1 @@
-{"version":3,"file":"index33.js","sources":["../src/components/Radio/index.tsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport { useStableId } from '../../utils/useStableId';\n\nexport interface RadioProps {\n  label: string;\n  value: string;\n  checked: boolean;\n  disabled: boolean;\n  name: string;\n  onChange?: (props: RadioProps) => void;\n  helperLabel?: string;\n  maxWidth?: string;\n  width?: string;\n  radioLabelClassName?: string;\n  radioContainerClassName?: string;\n  automationId?: string;\n  withBorder?: boolean;\n  bgColor?: string;\n  content?: () => React.ReactNode;\n}\n\nexport function Radio(props: RadioProps) {\n  const {\n    label,\n    value,\n    checked,\n    disabled,\n    name,\n    onChange,\n    width,\n    radioLabelClassName = '',\n    radioContainerClassName = '',\n    automationId = '',\n    bgColor = 'var(--color-white)',\n    withBorder = true,\n    content\n  } = props;\n  const radioRef = useRef<HTMLInputElement>(null);\n  const inputId = useStableId(undefined, `${name}-${value}`);\n\n  // Sync DOM checked state with prop — bypasses React's controlled-input restore mechanism\n  // which resets DOM.checked=false after the first click on an unselected radio.\n  React.useLayoutEffect(() => {\n    if (radioRef.current) {\n      radioRef.current.checked = checked;\n    }\n  }, [checked]);\n\n  const handleContainerClick = () => {\n    if (!disabled) {\n      radioRef.current?.focus();\n      radioRef.current?.click();\n    }\n  };\n\n  const handleLabelClick = (e: React.MouseEvent<HTMLLabelElement>) => {\n    // Stop label click from bubbling to container (which would double-fire handleContainerClick).\n    // No preventDefault — native htmlFor redirect fires a new click on the input, which handles\n    // check + focus + onChange via handleInputChange. No manual replication needed.\n    e.stopPropagation();\n  };\n\n  const handleInputClick = (e: React.MouseEvent<HTMLInputElement>) => {\n    e.stopPropagation();\n  };\n\n  const handleInputChange = () => {\n    onChange?.({ ...props, checked: true });\n  };\n\n  const borderColor = checked ? 'border-[var(--color-blue-500)]' : 'border-[var(--color-gray-400)]';\n\n  return (\n    <div\n      className={`se-design-radio-container flex flex-col justify-center items-start gap-2 ${\n        disabled ? 'cursor-not-allowed' : 'cursor-pointer'\n      } ${\n        withBorder ? `border ${borderColor} p-4` : ''\n      } rounded-[6px] transition-colors duration-300 ${disabled ? 'opacity-50' : ''} ${radioContainerClassName}`}\n      onClick={handleContainerClick}\n      style={{ width: width || 'auto', backgroundColor: bgColor }}\n      data-automation-id={automationId}\n    >\n      <div className=\"flex items-center gap-[0.625rem]\" data-automation-id=\"radio-field-content\">\n        <input\n          ref={radioRef}\n          type=\"radio\"\n          id={inputId}\n          name={name}\n          value={value}\n          disabled={disabled}\n          className=\"radio-field-input cursor-pointer accent-[var(--color-blue-500)] disabled:cursor-not-allowed disabled:opacity-50 text-[var(--color-blue-500)] w-[14px] h-[14px] p-[3px]\"\n          onClick={handleInputClick}\n          onChange={handleInputChange}\n        />\n        <label\n          htmlFor={inputId}\n          className={`${props.helperLabel ? 'flex flex-col gap-[6px] ' : ''}${\n            disabled ? 'cursor-not-allowed' : 'cursor-pointer'\n          }`}\n          data-automation-id=\"radio-field-label\"\n          onClick={handleLabelClick}\n        >\n          <span\n            className={`text-sm text-[var(--color-gray-800)] ${radioLabelClassName} `}\n            style={{ fontSize: '16px', fontWeight: '400' }}\n          >\n            {label}\n          </span>\n        </label>\n      </div>\n      {checked && content && (\n        <div className=\"radio-child-content pl-[1.5rem] w-full\" onClick={(e) => e.stopPropagation()}>\n          {content()}\n        </div>\n      )}\n      {props.helperLabel && (\n        <span\n          className={`text-sm font-normal text-[var(--color-gray-600)] ${\n            props.maxWidth ? `max-w-[${props.maxWidth}]` : 'max-w-full'\n          } break-words whitespace-normal`}\n          data-automation-id=\"radio-field-helper-text\"\n        >\n          {props.helperLabel}\n        </span>\n      )}\n    </div>\n  );\n}\n"],"names":["Radio","props","label","value","checked","disabled","name","onChange","width","radioLabelClassName","radioContainerClassName","automationId","bgColor","withBorder","content","radioRef","useRef","inputId","useStableId","undefined","React","useLayoutEffect","current","handleContainerClick","focus","click","handleLabelClick","e","stopPropagation","handleInputClick","handleInputChange","borderColor","createElement","className","onClick","style","backgroundColor","ref","type","id","htmlFor","helperLabel","fontSize","fontWeight","maxWidth"],"mappings":";;AAqBO,SAASA,EAAMC,GAAmB;AACjC,QAAA;AAAA,IACJC,OAAAA;AAAAA,IACAC,OAAAA;AAAAA,IACAC,SAAAA;AAAAA,IACAC,UAAAA;AAAAA,IACAC,MAAAA;AAAAA,IACAC,UAAAA;AAAAA,IACAC,OAAAA;AAAAA,IACAC,qBAAAA,IAAsB;AAAA,IACtBC,yBAAAA,IAA0B;AAAA,IAC1BC,cAAAA,IAAe;AAAA,IACfC,SAAAA,IAAU;AAAA,IACVC,YAAAA,IAAa;AAAA,IACbC,SAAAA;AAAAA,EACEb,IAAAA,GACEc,IAAWC,EAAyB,IAAI,GACxCC,IAAUC,EAAYC,QAAW,GAAGb,CAAI,IAAIH,CAAK,EAAE;AAIzDiB,EAAAA,EAAMC,gBAAgB,MAAM;AAC1B,IAAIN,EAASO,YACXP,EAASO,QAAQlB,UAAUA;AAAAA,EAC7B,GACC,CAACA,CAAO,CAAC;AAEZ,QAAMmB,IAAuBA,MAAM;AACjC,IAAKlB,MACHU,EAASO,SAASE,SAClBT,EAASO,SAASG;EACpB,GAGIC,IAAmBA,CAACC,MAA0C;AAIlEA,IAAAA,EAAEC,gBAAgB;AAAA,EAAA,GAGdC,IAAmBA,CAACF,MAA0C;AAClEA,IAAAA,EAAEC,gBAAgB;AAAA,EAAA,GAGdE,IAAoBA,MAAM;AACnB,IAAAvB,IAAA;AAAA,MAAE,GAAGN;AAAAA,MAAOG,SAAS;AAAA,IAAA,CAAM;AAAA,EAAA,GAGlC2B,IAAc3B,IAAU,mCAAmC;AAG/DgB,SAAAA,gBAAAA,EAAAY,cAAA,OAAA;AAAA,IACEC,WAAW,4EACT5B,IAAW,uBAAuB,gBAAgB,IAElDQ,IAAa,UAAUkB,CAAW,SAAS,EAAE,iDACE1B,IAAW,eAAe,EAAE,IAAIK,CAAuB;AAAA,IACxGwB,SAASX;AAAAA,IACTY,OAAO;AAAA,MAAE3B,OAAOA,KAAS;AAAA,MAAQ4B,iBAAiBxB;AAAAA,IAAQ;AAAA,IAC1D,sBAAoBD;AAAAA,EAAAA,GAEpBqB,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,IAAmC,sBAAmB;AAAA,EAAA,GACnED,gBAAAA,EAAAA,cAAA,SAAA;AAAA,IACEK,KAAKtB;AAAAA,IACLuB,MAAK;AAAA,IACLC,IAAItB;AAAAA,IACJX,MAAAA;AAAAA,IACAH,OAAAA;AAAAA,IACAE,UAAAA;AAAAA,IACA4B,WAAU;AAAA,IACVC,SAASL;AAAAA,IACTtB,UAAUuB;AAAAA,EAAAA,CACX,GACDE,gBAAAA,EAAAA,cAAA,SAAA;AAAA,IACEQ,SAASvB;AAAAA,IACTgB,WAAW,GAAGhC,EAAMwC,cAAc,6BAA6B,EAAE,GAC/DpC,IAAW,uBAAuB,gBAAgB;AAAA,IAEpD,sBAAmB;AAAA,IACnB6B,SAASR;AAAAA,EAAAA,GAETM,gBAAAA,EAAAA,cAAA,QAAA;AAAA,IACEC,WAAW,wCAAwCxB,CAAmB;AAAA,IACtE0B,OAAO;AAAA,MAAEO,UAAU;AAAA,MAAQC,YAAY;AAAA,IAAM;AAAA,EAAA,GAE5CzC,CACG,CACD,CACJ,GACJE,KAAWU,KACVkB,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,IAAyCC,SAAUP,CAAMA,MAAAA,EAAEC,gBAAgB;AAAA,EAAA,GACvFd,EACE,CAAA,GAENb,EAAMwC,eACLrB,gBAAAA,EAAAY,cAAA,QAAA;AAAA,IACEC,WAAW,oDACThC,EAAM2C,WAAW,UAAU3C,EAAM2C,QAAQ,MAAM,YAAY;AAAA,IAE7D,sBAAmB;AAAA,EAAA,GAElB3C,EAAMwC,WACH,CAEL;AAET;"}
+{"version":3,"file":"index33.js","sources":["../src/components/Radio/index.tsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport { useStableId } from '../../utils/useStableId';\n\nexport interface RadioProps {\n  label: string;\n  value: string;\n  checked: boolean;\n  disabled: boolean;\n  name: string;\n  onChange?: (props: RadioProps) => void;\n  helperLabel?: string;\n  maxWidth?: string;\n  width?: string;\n  radioLabelClassName?: string;\n  radioContainerClassName?: string;\n  automationId?: string;\n  withBorder?: boolean;\n  bgColor?: string;\n  content?: () => React.ReactNode;\n  /**\n   * ID of the element controlled by this radio (e.g. an expandable content region).\n   */\n  ariaControls?: string;\n}\n\nexport function Radio(props: RadioProps) {\n  const {\n    label,\n    value,\n    checked,\n    disabled,\n    name,\n    onChange,\n    width,\n    radioLabelClassName = '',\n    radioContainerClassName = '',\n    automationId = '',\n    bgColor = 'var(--color-white)',\n    withBorder = true,\n    content,\n    ariaControls\n  } = props;\n  const radioRef = useRef<HTMLInputElement>(null);\n  const inputId = useStableId(undefined, `${name}-${value}`);\n\n  // Sync DOM checked state with prop — bypasses React's controlled-input restore mechanism\n  // which resets DOM.checked=false after the first click on an unselected radio.\n  React.useLayoutEffect(() => {\n    if (radioRef.current) {\n      radioRef.current.checked = checked;\n    }\n  }, [checked]);\n\n  const handleContainerClick = () => {\n    if (!disabled) {\n      radioRef.current?.focus();\n      radioRef.current?.click();\n    }\n  };\n\n  const handleLabelClick = (e: React.MouseEvent<HTMLLabelElement>) => {\n    // Stop label click from bubbling to container (which would double-fire handleContainerClick).\n    // No preventDefault — native htmlFor redirect fires a new click on the input, which handles\n    // check + focus + onChange via handleInputChange. No manual replication needed.\n    e.stopPropagation();\n  };\n\n  const handleInputClick = (e: React.MouseEvent<HTMLInputElement>) => {\n    e.stopPropagation();\n  };\n\n  const handleInputChange = () => {\n    onChange?.({ ...props, checked: true });\n  };\n\n  const borderColor = checked ? 'border-[var(--color-blue-500)]' : 'border-[var(--color-gray-400)]';\n\n  return (\n    <div\n      className={`se-design-radio-container flex flex-col justify-center items-start gap-2 ${\n        disabled ? 'cursor-not-allowed' : 'cursor-pointer'\n      } ${\n        withBorder ? `border ${borderColor} p-4` : ''\n      } rounded-[6px] transition-colors duration-300 ${disabled ? 'opacity-50' : ''} ${radioContainerClassName}`}\n      onClick={handleContainerClick}\n      style={{ width: width || 'auto', backgroundColor: bgColor }}\n      data-automation-id={automationId}\n    >\n      <div className=\"flex items-center gap-[0.625rem]\" data-automation-id=\"radio-field-content\">\n        <input\n          ref={radioRef}\n          type=\"radio\"\n          id={inputId}\n          name={name}\n          value={value}\n          disabled={disabled}\n          className=\"radio-field-input cursor-pointer accent-[var(--color-blue-500)] disabled:cursor-not-allowed disabled:opacity-50 text-[var(--color-blue-500)] w-[14px] h-[14px] p-[3px]\"\n          aria-controls={ariaControls}\n          onClick={handleInputClick}\n          onChange={handleInputChange}\n        />\n        <label\n          htmlFor={inputId}\n          className={`${props.helperLabel ? 'flex flex-col gap-[6px] ' : ''}${\n            disabled ? 'cursor-not-allowed' : 'cursor-pointer'\n          }`}\n          data-automation-id=\"radio-field-label\"\n          onClick={handleLabelClick}\n        >\n          <span\n            className={`text-sm text-[var(--color-gray-800)] ${radioLabelClassName} `}\n            style={{ fontSize: '16px', fontWeight: '400' }}\n          >\n            {label}\n          </span>\n        </label>\n      </div>\n      {checked && content && (\n        <div className=\"radio-child-content pl-[1.5rem] w-full\" onClick={(e) => e.stopPropagation()}>\n          {content()}\n        </div>\n      )}\n      {props.helperLabel && (\n        <span\n          className={`text-sm font-normal text-[var(--color-gray-600)] ${\n            props.maxWidth ? `max-w-[${props.maxWidth}]` : 'max-w-full'\n          } break-words whitespace-normal`}\n          data-automation-id=\"radio-field-helper-text\"\n        >\n          {props.helperLabel}\n        </span>\n      )}\n    </div>\n  );\n}\n"],"names":["Radio","props","label","value","checked","disabled","name","onChange","width","radioLabelClassName","radioContainerClassName","automationId","bgColor","withBorder","content","ariaControls","radioRef","useRef","inputId","useStableId","undefined","React","useLayoutEffect","current","handleContainerClick","focus","click","handleLabelClick","e","stopPropagation","handleInputClick","handleInputChange","borderColor","createElement","className","onClick","style","backgroundColor","ref","type","id","htmlFor","helperLabel","fontSize","fontWeight","maxWidth"],"mappings":"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"}