@pega/cosmos-react-core 7.0.0-build.26.3 → 7.0.0-build.26.5

package/lib/components/Tabs/TabPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TabPanel.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/TabPanel.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,SAAS,EAAE,GAAG,EAAmB,SAAS,EAAE,MAAM,OAAO,CAAC;AAK3F,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAIhD,UAAU,aAAa;IACrB,0DAA0D;IAC1D,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gCAAgC;IAChC,QAAQ,EAAE,SAAS,CAAC;IACpB,kCAAkC;IAClC,UAAU,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC,CAAC;IACpC,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAMD,eAAO,MAAM,cAAc;aAChB,OAAO;SAgBhB,CAAC;AAgBH,QAAA,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,GAAG,YAAY,CA8C5D,CAAC;AAIH,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"TabPanel.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/TabPanel.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,SAAS,EAAE,GAAG,EAAmB,SAAS,EAAE,MAAM,OAAO,CAAC;AAK3F,OAAO,KAAK,EAAE,YAAY,EAAc,MAAM,aAAa,CAAC;AAM5D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAG9C,UAAU,aAAa;IACrB,0DAA0D;IAC1D,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kCAAkC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gCAAgC;IAChC,QAAQ,EAAE,SAAS,CAAC;IACpB,kCAAkC;IAClC,UAAU,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC,CAAC;IACpC;;;OAGG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IAChC,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAMD,eAAO,MAAM,cAAc;aAEd,OAAO;WACT,MAAM;SAyBf,CAAC;AAgBH,QAAA,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,GAAG,YAAY,CAuE5D,CAAC;AAIH,eAAe,QAAQ,CAAC"}

package/lib/components/Tabs/TabPanel.js

@@ -1,27 +1,38 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useState, useCallback } from 'react';
+import { forwardRef, useState, useCallback, useMemo, useContext } from 'react';
 import styled, { css } from 'styled-components';
 import { useConsolidatedRef, useI18n, useFocusWithin, useEvent } from '../../hooks';
 import { defaultThemeProp } from '../../theme';
 import Button from '../Button';
 import { getFocusables } from '../../utils';
+import Flex from '../Flex';
+import Text from '../Text';
+import TabsContext from './TabsContext';
 const defaultProps = {
     tabId: ''
 };
-export const StyledTabPanel = styled.div(({ current, theme }) => {
+export const StyledTabPanel = styled(Flex)(({ current, tablistType, level, theme }) => {
     return css `
     min-width: 0;
     max-width: 100%;
 
     :focus {
       outline: none;
-      box-shadow: ${theme.base.shadow.focus};
+      box-shadow: ${theme.base.shadow['focus-inset']};
     }
 
     ${!current &&
         css `
       display: none;
     `}
+    ${tablistType === 'horizontal' &&
+        level > 1 &&
+        css `
+      border: 0.0625rem solid ${theme.base.palette['border-line']};
+      border-block-start: none;
+      border-end-start-radius: calc(0.5rem * 0.5);
+      border-end-end-radius: calc(0.5rem * 0.5);
+    `}
   `;
 });
 StyledTabPanel.defaultProps = defaultThemeProp;
@@ -35,25 +46,31 @@ const StyledButton = styled(Button)(({ theme }) => {
   `;
 });
 StyledButton.defaultProps = defaultThemeProp;
-const TabPanel = forwardRef(function TabPanel({ tabId, currentTabId, tablistRef, children, ...restProps }, ref) {
+const TabPanel = forwardRef(function TabPanel({ tabId, currentTabId, title, tablistRef, tablistType = 'horizontal', children, ...restProps }, ref) {
     const t = useI18n();
     const tabPanelRef = useConsolidatedRef(ref);
     const [showReturnButton, setShowReturnButton] = useState(false);
+    const { level } = useContext(TabsContext);
     const onFocusChange = useCallback(isFocused => {
         if (!isFocused) {
             setShowReturnButton(false);
         }
     }, []);
     useFocusWithin([tabPanelRef], onFocusChange);
+    const contextValue = useMemo(() => ({ level: tablistType === 'horizontal' ? level + 1 : 1 }), [level, tablistType]);
     const onKeyUp = () => {
         if (tabPanelRef.current?.contains(document.activeElement)) {
             setShowReturnButton(true);
         }
     };
     useEvent('keyup', onKeyUp);
-    return (_jsxs(StyledTabPanel, { ...restProps, current: currentTabId && tabId ? currentTabId === tabId : true, role: 'tabpanel', "aria-labelledby": `${tabId}`, id: `${tabId}-panel`, ref: tabPanelRef, tabIndex: 0, children: [children, tablistRef?.current && showReturnButton && (_jsx(StyledButton, { variant: 'link', onClick: () => {
-                    getFocusables(tablistRef)[0]?.focus();
-                }, children: t('return_to_tab_list') }))] }));
+    return (_jsx(TabsContext.Provider, { value: contextValue, children: _jsxs(StyledTabPanel, { ...restProps, container: {
+                direction: 'column',
+                rowGap: 1,
+                ...(tablistType === 'horizontal' && { pad: level > 1 ? [1, 1.5, 1.5] : [1, 2, 2] })
+            }, item: { grow: 1 }, current: currentTabId && tabId ? currentTabId === tabId : true, role: 'tabpanel', "aria-labelledby": `${tabId}`, id: `${tabId}-panel`, ref: tabPanelRef, tabIndex: 0, tablistType: tablistType, level: level, children: [title && _jsx(Text, { variant: `h${Math.min(2 + level, 6)}`, children: title }), children, tablistRef?.current && showReturnButton && (_jsx(StyledButton, { variant: 'link', onClick: () => {
+                        getFocusables(tablistRef)[0]?.focus();
+                    }, children: t('return_to_tab_list') }))] }) }));
 });
 TabPanel.defaultProps = defaultProps;
 export default TabPanel;

package/lib/components/Tabs/TabPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabPanel.js","sourceRoot":"","sources":["../../../src/components/Tabs/TabPanel.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useState, useCallback } from 'react';\nimport type { FunctionComponent, ReactNode, Ref, PropsWithoutRef, RefObject } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { useConsolidatedRef, useI18n, useFocusWithin, useEvent } from '../../hooks';\nimport { defaultThemeProp } from '../../theme';\nimport type { ForwardProps } from '../../types';\nimport Button from '../Button';\nimport { getFocusables } from '../../utils';\n\ninterface TabPanelProps {\n  /** The id of the Tab that the tab panel is related to. */\n  tabId: string;\n  /**\n   * The current selected value of the tabs. Controls the visibility of the tab panel.\n   * The tabsValue must match the tabId in order for the TabPanel to show itself.\n   */\n  currentTabId?: string;\n  /** Content of the tab panel. */\n  children: ReactNode;\n  /** Ref to the tablist element. */\n  tablistRef?: RefObject<HTMLElement>;\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst defaultProps: Partial<TabPanelProps> = {\n  tabId: ''\n};\n\nexport const StyledTabPanel = styled.div<{\n  current: boolean;\n}>(({ current, theme }) => {\n  return css`\n    min-width: 0;\n    max-width: 100%;\n\n    :focus {\n      outline: none;\n      box-shadow: ${theme.base.shadow.focus};\n    }\n\n    ${!current &&\n    css`\n      display: none;\n    `}\n  `;\n});\n\nStyledTabPanel.defaultProps = defaultThemeProp;\n\nconst StyledButton = styled(Button)(({ theme }) => {\n  return css`\n    padding-inline: calc(${theme.base.spacing});\n    opacity: 0;\n    &:focus {\n      opacity: 1;\n    }\n  `;\n});\n\nStyledButton.defaultProps = defaultThemeProp;\n\nconst TabPanel: FunctionComponent<TabPanelProps & ForwardProps> = forwardRef(function TabPanel(\n  { tabId, currentTabId, tablistRef, children, ...restProps }: PropsWithoutRef<TabPanelProps>,\n  ref: TabPanelProps['ref']\n) {\n  const t = useI18n();\n  const tabPanelRef = useConsolidatedRef(ref);\n  const [showReturnButton, setShowReturnButton] = useState(false);\n\n  const onFocusChange = useCallback(isFocused => {\n    if (!isFocused) {\n      setShowReturnButton(false);\n    }\n  }, []);\n\n  useFocusWithin([tabPanelRef], onFocusChange);\n\n  const onKeyUp = () => {\n    if (tabPanelRef.current?.contains(document.activeElement)) {\n      setShowReturnButton(true);\n    }\n  };\n  useEvent('keyup', onKeyUp);\n\n  return (\n    <StyledTabPanel\n      {...restProps}\n      current={currentTabId && tabId ? currentTabId === tabId : true}\n      role='tabpanel'\n      aria-labelledby={`${tabId}`}\n      id={`${tabId}-panel`}\n      ref={tabPanelRef}\n      tabIndex={0}\n    >\n      {children}\n      {tablistRef?.current && showReturnButton && (\n        <StyledButton\n          variant='link'\n          onClick={() => {\n            getFocusables(tablistRef)[0]?.focus();\n          }}\n        >\n          {t('return_to_tab_list')}\n        </StyledButton>\n      )}\n    </StyledTabPanel>\n  );\n});\n\nTabPanel.defaultProps = defaultProps;\n\nexport default TabPanel;\n"]}
+{"version":3,"file":"TabPanel.js","sourceRoot":"","sources":["../../../src/components/Tabs/TabPanel.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useState, useCallback, useMemo, useContext } from 'react';\nimport type { FunctionComponent, ReactNode, Ref, PropsWithoutRef, RefObject } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { useConsolidatedRef, useI18n, useFocusWithin, useEvent } from '../../hooks';\nimport { defaultThemeProp } from '../../theme';\nimport type { ForwardProps, HeadingTag } from '../../types';\nimport Button from '../Button';\nimport { getFocusables } from '../../utils';\nimport Flex from '../Flex';\nimport Text from '../Text';\n\nimport type { TabsProps } from './Tabs.types';\nimport TabsContext from './TabsContext';\n\ninterface TabPanelProps {\n  /** The id of the Tab that the tab panel is related to. */\n  tabId: string;\n  /**\n   * The current selected value of the tabs. Controls the visibility of the tab panel.\n   * The tabsValue must match the tabId in order for the TabPanel to show itself.\n   */\n  currentTabId?: string;\n  /** The title for the tab panel */\n  title?: string;\n  /** Content of the tab panel. */\n  children: ReactNode;\n  /** Ref to the tablist element. */\n  tablistRef?: RefObject<HTMLElement>;\n  /**\n   * The tablist type indicates what direction the tabs are rendered in.\n   * @default 'horizontal'\n   */\n  tablistType?: TabsProps['type'];\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst defaultProps: Partial<TabPanelProps> = {\n  tabId: ''\n};\n\nexport const StyledTabPanel = styled(Flex)<\n  Pick<TabPanelProps, 'tablistType'> & {\n    current: boolean;\n    level: number;\n  }\n>(({ current, tablistType, level, theme }) => {\n  return css`\n    min-width: 0;\n    max-width: 100%;\n\n    :focus {\n      outline: none;\n      box-shadow: ${theme.base.shadow['focus-inset']};\n    }\n\n    ${!current &&\n    css`\n      display: none;\n    `}\n    ${tablistType === 'horizontal' &&\n    level > 1 &&\n    css`\n      border: 0.0625rem solid ${theme.base.palette['border-line']};\n      border-block-start: none;\n      border-end-start-radius: calc(0.5rem * 0.5);\n      border-end-end-radius: calc(0.5rem * 0.5);\n    `}\n  `;\n});\n\nStyledTabPanel.defaultProps = defaultThemeProp;\n\nconst StyledButton = styled(Button)(({ theme }) => {\n  return css`\n    padding-inline: calc(${theme.base.spacing});\n    opacity: 0;\n    &:focus {\n      opacity: 1;\n    }\n  `;\n});\n\nStyledButton.defaultProps = defaultThemeProp;\n\nconst TabPanel: FunctionComponent<TabPanelProps & ForwardProps> = forwardRef(function TabPanel(\n  {\n    tabId,\n    currentTabId,\n    title,\n    tablistRef,\n    tablistType = 'horizontal',\n    children,\n    ...restProps\n  }: PropsWithoutRef<TabPanelProps>,\n  ref: TabPanelProps['ref']\n) {\n  const t = useI18n();\n  const tabPanelRef = useConsolidatedRef(ref);\n  const [showReturnButton, setShowReturnButton] = useState(false);\n  const { level } = useContext(TabsContext);\n\n  const onFocusChange = useCallback(isFocused => {\n    if (!isFocused) {\n      setShowReturnButton(false);\n    }\n  }, []);\n\n  useFocusWithin([tabPanelRef], onFocusChange);\n\n  const contextValue = useMemo(\n    () => ({ level: tablistType === 'horizontal' ? level + 1 : 1 }),\n    [level, tablistType]\n  );\n\n  const onKeyUp = () => {\n    if (tabPanelRef.current?.contains(document.activeElement)) {\n      setShowReturnButton(true);\n    }\n  };\n  useEvent('keyup', onKeyUp);\n\n  return (\n    <TabsContext.Provider value={contextValue}>\n      <StyledTabPanel\n        {...restProps}\n        container={{\n          direction: 'column',\n          rowGap: 1,\n          ...(tablistType === 'horizontal' && { pad: level > 1 ? [1, 1.5, 1.5] : [1, 2, 2] })\n        }}\n        item={{ grow: 1 }}\n        current={currentTabId && tabId ? currentTabId === tabId : true}\n        role='tabpanel'\n        aria-labelledby={`${tabId}`}\n        id={`${tabId}-panel`}\n        ref={tabPanelRef}\n        tabIndex={0}\n        tablistType={tablistType}\n        level={level}\n      >\n        {title && <Text variant={`h${Math.min(2 + level, 6)}` as HeadingTag}>{title}</Text>}\n        {children}\n        {tablistRef?.current && showReturnButton && (\n          <StyledButton\n            variant='link'\n            onClick={() => {\n              getFocusables(tablistRef)[0]?.focus();\n            }}\n          >\n            {t('return_to_tab_list')}\n          </StyledButton>\n        )}\n      </StyledTabPanel>\n    </TabsContext.Provider>\n  );\n});\n\nTabPanel.defaultProps = defaultProps;\n\nexport default TabPanel;\n"]}

package/lib/components/Tabs/Tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,iBAAiB,EAMlB,MAAM,OAAO,CAAC;AAOf,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAehD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAwF9C;;;GAGG;AACH,QAAA,MAAM,IAAI,EAAE,iBAAiB,CAAC,SAAS,GAAG,YAAY,CAsIpD,CAAC;AAEH,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,iBAAiB,EAMlB,MAAM,OAAO,CAAC;AAOf,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAuBhD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAwF9C;;;GAGG;AACH,QAAA,MAAM,IAAI,EAAE,iBAAiB,CAAC,SAAS,GAAG,YAAY,CAyJpD,CAAC;AAEH,eAAe,IAAI,CAAC"}

package/lib/components/Tabs/Tabs.js

@@ -1,16 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useEffect, useMemo, useRef, useState } from 'react';
+import { useContext, forwardRef, useEffect, useMemo, useRef, useState, Fragment } from 'react';
 import SearchInput from '../SearchInput';
 import Flex from '../Flex';
 import Link from '../Link';
 import Count from '../Badges/Count';
 import { useAfterInitialEffect, useConsolidatedRef, useElement, useEscape, useI18n, useUID } from '../../hooks';
-import * as caretDownIcon from '../Icon/icons/caret-down.icon';
+import * as arrowMicroDownIcon from '../Icon/icons/arrow-micro-down.icon';
 import { registerIcon } from '../Icon/Icon';
 import { createStringMatcher, debounce } from '../../utils';
-import { StyledErrorIcon, StyledAllTabsButton, StyledTabs } from './Tabs.styles';
+import TabsContext from './TabsContext';
+import { StyledErrorIcon, StyledAllTabsButton, StyledTabs, StylesAllTabsButtonWrapper, StyledAllTabsWrapper, StyledSeparator } from './Tabs.styles';
 import Tab from './Tab';
-registerIcon(caretDownIcon);
+registerIcon(arrowMicroDownIcon);
 const AllTabsButton = ({ tabs, tabRefs, currentTabId, onTabClick }) => {
     const menuId = useUID();
     const t = useI18n();
@@ -37,7 +38,7 @@ const AllTabsButton = ({ tabs, tabRefs, currentTabId, onTabClick }) => {
             menuButtonRef.current?.focus();
         }
     }, searchEleRef);
-    return (_jsx(StyledAllTabsButton, { ref: menuButtonRef, text: t('all_tabs'), iconOnly: true, variant: 'simple', icon: 'caret-down', menu: {
+    return (_jsx(StyledAllTabsButton, { ref: menuButtonRef, text: t('all_tabs'), iconOnly: true, variant: 'simple', icon: 'arrow-micro-down', menu: {
             listId: menuId,
             mode: 'single-select',
             items: itemsToRender,
@@ -69,6 +70,7 @@ const AllTabsButton = ({ tabs, tabRefs, currentTabId, onTabClick }) => {
 const Tabs = forwardRef(function Tabs({ tabs = [], type = 'horizontal', currentTabId, onTabClick, ...restProps }, ref) {
     const [wrapper, setWrapper] = useElement();
     const wrapperRef = useConsolidatedRef(ref, setWrapper);
+    const { level } = useContext(TabsContext);
     const [hasScrollBar, setHasScrollBar] = useState(false);
     // Used to keep a reference for every tab in order to focus them with key presses
     const tabRefs = useRef([]);
@@ -117,23 +119,26 @@ const Tabs = forwardRef(function Tabs({ tabs = [], type = 'horizontal', currentT
             ro.disconnect();
         };
     }, [wrapper]);
+    const shouldRenderAllTabsButton = type === 'horizontal' && hasScrollBar;
     const TabList = (_jsx(Flex, { ...restProps, container: {
-            direction: type !== 'horizontal' ? 'column' : undefined
-        }, item: { shrink: 0 }, as: StyledTabs, ref: wrapperRef, type: type, role: 'tablist', "aria-orientation": type, hasScrollBar: hasScrollBar, children: tabs.map((tab, i) => {
+            direction: type !== 'horizontal' ? 'column' : undefined,
+            pad: type === 'horizontal' && !hasScrollBar && level === 1 ? [0, 0, 0, 0.5] : undefined
+        }, item: { shrink: 0 }, as: StyledTabs, ref: wrapperRef, type: type, role: 'tablist', "aria-orientation": type, hasScrollBar: hasScrollBar, level: level, children: tabs.map((tab, i) => {
             const { href, name, count, id, disabled, errors } = tab;
             const selected = id === currentTabId;
-            return (_jsx(Tab, { id: id, "aria-selected": selected, "aria-controls": `${id}-panel`, content: name, count: typeof count === 'number' && _jsx(Count, { children: count }), href: href, selected: selected, onClick: (event) => {
-                    onTabClick?.(id, event);
-                }, role: 'tab', ref: el => {
-                    tabRefs.current[i] = el;
-                }, onKeyDown: (e) => {
-                    if (['ArrowRight', 'ArrowDown', 'ArrowLeft', 'ArrowUp'].includes(e.key)) {
-                        e.preventDefault();
-                        changeTabFocus(e, i);
-                    }
-                }, as: href ? Link : undefined, tabIndex: selected ? undefined : -1, "aria-label": name, type: type, disabled: disabled, errors: errors }, id));
+            return (_jsxs(Fragment, { children: [level > 1 && (_jsx(StyledSeparator, { transparent: selected ||
+                            (i === 0 ? !shouldRenderAllTabsButton : tabs[i - 1].id === currentTabId) })), _jsx(Tab, { id: id, "aria-selected": selected, "aria-controls": `${id}-panel`, content: name, count: typeof count === 'number' && _jsx(Count, { children: count }), href: href, selected: selected, onClick: (event) => {
+                            onTabClick?.(id, event);
+                        }, role: 'tab', ref: el => {
+                            tabRefs.current[i] = el;
+                        }, onKeyDown: (e) => {
+                            if (['ArrowRight', 'ArrowDown', 'ArrowLeft', 'ArrowUp'].includes(e.key)) {
+                                e.preventDefault();
+                                changeTabFocus(e, i);
+                            }
+                        }, as: href ? Link : undefined, tabIndex: selected ? undefined : -1, "aria-label": name, type: type, disabled: disabled, errors: errors })] }, id));
         }) }));
-    return type === 'horizontal' && hasScrollBar ? (_jsxs(Flex, { container: { direction: 'row' }, children: [_jsx(AllTabsButton, { tabs: tabs, tabRefs: tabRefs, currentTabId: currentTabId, onTabClick: onTabClick }), TabList] })) : (TabList);
+    return shouldRenderAllTabsButton ? (_jsxs(Flex, { container: { direction: 'row' }, as: StyledAllTabsWrapper, level: level, children: [_jsx(Flex, { container: { pad: level === 1 ? [0, 0, 0, 0.5] : undefined }, as: StylesAllTabsButtonWrapper, children: _jsx(AllTabsButton, { tabs: tabs, tabRefs: tabRefs, currentTabId: currentTabId, onTabClick: onTabClick }) }), TabList] })) : (TabList);
 });
 export default Tabs;
 //# sourceMappingURL=Tabs.js.map

package/lib/components/Tabs/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.tsx"],"names":[],"mappings":"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","sourcesContent":["import type {\n  FunctionComponent,\n  KeyboardEvent,\n  MouseEvent,\n  MutableRefObject,\n  PropsWithoutRef,\n  Ref\n} from 'react';\nimport { forwardRef, useEffect, useMemo, useRef, useState } from 'react';\n\nimport SearchInput from '../SearchInput';\nimport Flex from '../Flex';\nimport Link from '../Link';\nimport Count from '../Badges/Count';\nimport type { ForwardProps } from '../../types';\nimport {\n  useAfterInitialEffect,\n  useConsolidatedRef,\n  useElement,\n  useEscape,\n  useI18n,\n  useUID\n} from '../../hooks';\nimport * as caretDownIcon from '../Icon/icons/caret-down.icon';\nimport { registerIcon } from '../Icon/Icon';\nimport type { MenuItemProps, MenuProps } from '../Menu';\nimport { createStringMatcher, debounce } from '../../utils';\n\nimport { StyledErrorIcon, StyledAllTabsButton, StyledTabs } from './Tabs.styles';\nimport type { TabsProps } from './Tabs.types';\nimport Tab from './Tab';\n\nregisterIcon(caretDownIcon);\n\ntype TabItem = TabsProps['tabs'][number];\n\nconst AllTabsButton = ({\n  tabs,\n  tabRefs,\n  currentTabId,\n  onTabClick\n}: Pick<TabsProps, 'tabs' | 'currentTabId' | 'onTabClick'> & {\n  tabRefs: MutableRefObject<(HTMLAnchorElement | HTMLButtonElement | null)[]>;\n}) => {\n  const menuId = useUID();\n  const t = useI18n();\n  const menuButtonRef = useRef<HTMLButtonElement>(null);\n  const [search, setSearch] = useState('');\n  const searchEleRef = useRef<HTMLInputElement>(null);\n  const [focusControlEl, setFocusControlEl] = useState<MenuProps['focusControlEl']>();\n\n  const searchRegex = createStringMatcher(search);\n\n  const itemsToRender = useMemo(() => {\n    return tabs\n      .filter(({ name }) => searchRegex.test(name))\n      .map(({ id, name, count, disabled, errors }) => {\n        const selected = id === currentTabId;\n        const item: MenuItemProps = { id, primary: name, selected, count, disabled };\n        if (errors) {\n          item.visual = <StyledErrorIcon name='warn-solid' />;\n        }\n        return item;\n      });\n  }, [tabs, search]);\n\n  useEscape(() => {\n    if (!search) {\n      menuButtonRef.current?.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));\n      menuButtonRef.current?.focus();\n    }\n  }, searchEleRef);\n\n  return (\n    <StyledAllTabsButton\n      ref={menuButtonRef}\n      text={t('all_tabs')}\n      iconOnly\n      variant='simple'\n      icon='caret-down'\n      menu={{\n        listId: menuId,\n        mode: 'single-select',\n        items: itemsToRender,\n        focusControlEl,\n        accent: search ? searchRegex : undefined,\n        onItemClick: (id: string, event: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n          onTabClick?.(id, event);\n          setSearch('');\n          tabRefs.current[tabs.findIndex(tab => tab.id === id)]?.focus();\n        },\n        header: (\n          <SearchInput\n            ref={searchEleRef}\n            onSearchChange={setSearch}\n            value={search}\n            role='searchbox'\n            aria-controls={menuId}\n          />\n        )\n      }}\n      popover={{\n        onHide: () => {\n          setFocusControlEl(undefined);\n          setSearch('');\n        },\n        onShow: () => {\n          if (searchEleRef.current) {\n            setFocusControlEl(searchEleRef.current);\n            searchEleRef.current.focus();\n          }\n        }\n      }}\n    />\n  );\n};\n\n/**\n * The tabs component will take a list of tab data objects and render out a list of tabs in either vertical or horizontal direction.\n * The tabs component handles which tab is active but will give you a callback function that allows you to make changes when a new tab is activated\n */\nconst Tabs: FunctionComponent<TabsProps & ForwardProps> = forwardRef(function Tabs(\n  {\n    tabs = [],\n    type = 'horizontal',\n    currentTabId,\n    onTabClick,\n    ...restProps\n  }: PropsWithoutRef<TabsProps>,\n  ref: Ref<HTMLElement>\n) {\n  const [wrapper, setWrapper] = useElement<HTMLDivElement>();\n  const wrapperRef = useConsolidatedRef(ref, setWrapper);\n  const [hasScrollBar, setHasScrollBar] = useState(false);\n\n  // Used to keep a reference for every tab in order to focus them with key presses\n  const tabRefs = useRef<(HTMLButtonElement | HTMLAnchorElement | null)[]>([]);\n\n  // Handles arrow keypresses for changing the focus\n  const changeTabFocus = (event: KeyboardEvent, index: number): void => {\n    if (tabRefs.current?.length) {\n      const { key } = event;\n      if (key === 'ArrowRight' || key === 'ArrowDown') {\n        const nextIndex = index + 1 < tabs.length ? index + 1 : 0;\n        const nextTab = tabRefs.current[nextIndex] as HTMLButtonElement;\n\n        if (!nextTab?.disabled) {\n          nextTab?.focus();\n        } else {\n          changeTabFocus(event, nextIndex);\n        }\n      } else if (key === 'ArrowLeft' || key === 'ArrowUp') {\n        const prevIndex = index === 0 ? tabs.length - 1 : index - 1;\n        const prevTab = tabRefs.current[prevIndex] as HTMLButtonElement;\n        if (!prevTab?.disabled) {\n          prevTab?.focus();\n        } else {\n          changeTabFocus(event, prevIndex);\n        }\n      }\n    }\n  };\n\n  useAfterInitialEffect(() => {\n    const event = new Event('cosmos-tab-changed', { bubbles: true, composed: true });\n    wrapperRef.current?.dispatchEvent(event);\n\n    const currentTabEl = tabRefs.current.find(tab => tab && tab.id === currentTabId);\n    currentTabEl?.scrollIntoView({ behavior: 'smooth', block: 'nearest' });\n  }, [currentTabId]);\n\n  useEffect(() => {\n    if (!wrapper) return;\n\n    const ro = new ResizeObserver(\n      debounce(([entry]) => {\n        if (!entry?.target.isConnected || !(entry.target instanceof HTMLElement)) return;\n\n        setHasScrollBar(entry.target.scrollWidth > entry.target.offsetWidth);\n      }, 1)\n    );\n\n    ro.observe(wrapper);\n\n    return () => {\n      ro.disconnect();\n    };\n  }, [wrapper]);\n\n  const TabList = (\n    <Flex\n      {...restProps}\n      container={{\n        direction: type !== 'horizontal' ? 'column' : undefined\n      }}\n      item={{ shrink: 0 }}\n      as={StyledTabs}\n      ref={wrapperRef}\n      type={type}\n      role='tablist'\n      aria-orientation={type}\n      hasScrollBar={hasScrollBar}\n    >\n      {tabs.map((tab: TabItem, i) => {\n        const { href, name, count, id, disabled, errors } = tab;\n        const selected = id === currentTabId;\n\n        return (\n          <Tab\n            id={id}\n            aria-selected={selected}\n            aria-controls={`${id}-panel`}\n            content={name}\n            count={typeof count === 'number' && <Count>{count}</Count>}\n            href={href}\n            selected={selected}\n            onClick={(event: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n              onTabClick?.(id, event);\n            }}\n            role='tab'\n            ref={el => {\n              tabRefs.current[i] = el;\n            }}\n            onKeyDown={(e: KeyboardEvent) => {\n              if (['ArrowRight', 'ArrowDown', 'ArrowLeft', 'ArrowUp'].includes(e.key)) {\n                e.preventDefault();\n                changeTabFocus(e, i);\n              }\n            }}\n            key={id}\n            as={href ? Link : undefined}\n            tabIndex={selected ? undefined : -1}\n            aria-label={name}\n            type={type}\n            disabled={disabled}\n            errors={errors}\n          />\n        );\n      })}\n    </Flex>\n  );\n\n  return type === 'horizontal' && hasScrollBar ? (\n    <Flex container={{ direction: 'row' }}>\n      <AllTabsButton\n        tabs={tabs}\n        tabRefs={tabRefs}\n        currentTabId={currentTabId}\n        onTabClick={onTabClick}\n      />\n      {TabList}\n    </Flex>\n  ) : (\n    TabList\n  );\n});\n\nexport default Tabs;\n"]}
+{"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.tsx"],"names":[],"mappings":"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","sourcesContent":["import type {\n  FunctionComponent,\n  KeyboardEvent,\n  MouseEvent,\n  MutableRefObject,\n  PropsWithoutRef,\n  Ref\n} from 'react';\nimport { useContext, forwardRef, useEffect, useMemo, useRef, useState, Fragment } from 'react';\n\nimport SearchInput from '../SearchInput';\nimport Flex from '../Flex';\nimport Link from '../Link';\nimport Count from '../Badges/Count';\nimport type { ForwardProps } from '../../types';\nimport {\n  useAfterInitialEffect,\n  useConsolidatedRef,\n  useElement,\n  useEscape,\n  useI18n,\n  useUID\n} from '../../hooks';\nimport * as arrowMicroDownIcon from '../Icon/icons/arrow-micro-down.icon';\nimport { registerIcon } from '../Icon/Icon';\nimport type { MenuItemProps, MenuProps } from '../Menu';\nimport { createStringMatcher, debounce } from '../../utils';\n\nimport TabsContext from './TabsContext';\nimport {\n  StyledErrorIcon,\n  StyledAllTabsButton,\n  StyledTabs,\n  StylesAllTabsButtonWrapper,\n  StyledAllTabsWrapper,\n  StyledSeparator\n} from './Tabs.styles';\nimport type { TabsProps } from './Tabs.types';\nimport Tab from './Tab';\n\nregisterIcon(arrowMicroDownIcon);\n\ntype TabItem = TabsProps['tabs'][number];\n\nconst AllTabsButton = ({\n  tabs,\n  tabRefs,\n  currentTabId,\n  onTabClick\n}: Pick<TabsProps, 'tabs' | 'currentTabId' | 'onTabClick'> & {\n  tabRefs: MutableRefObject<(HTMLAnchorElement | HTMLButtonElement | null)[]>;\n}) => {\n  const menuId = useUID();\n  const t = useI18n();\n  const menuButtonRef = useRef<HTMLButtonElement>(null);\n  const [search, setSearch] = useState('');\n  const searchEleRef = useRef<HTMLInputElement>(null);\n  const [focusControlEl, setFocusControlEl] = useState<MenuProps['focusControlEl']>();\n\n  const searchRegex = createStringMatcher(search);\n\n  const itemsToRender = useMemo(() => {\n    return tabs\n      .filter(({ name }) => searchRegex.test(name))\n      .map(({ id, name, count, disabled, errors }) => {\n        const selected = id === currentTabId;\n        const item: MenuItemProps = { id, primary: name, selected, count, disabled };\n        if (errors) {\n          item.visual = <StyledErrorIcon name='warn-solid' />;\n        }\n        return item;\n      });\n  }, [tabs, search]);\n\n  useEscape(() => {\n    if (!search) {\n      menuButtonRef.current?.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));\n      menuButtonRef.current?.focus();\n    }\n  }, searchEleRef);\n\n  return (\n    <StyledAllTabsButton\n      ref={menuButtonRef}\n      text={t('all_tabs')}\n      iconOnly\n      variant='simple'\n      icon='arrow-micro-down'\n      menu={{\n        listId: menuId,\n        mode: 'single-select',\n        items: itemsToRender,\n        focusControlEl,\n        accent: search ? searchRegex : undefined,\n        onItemClick: (id: string, event: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n          onTabClick?.(id, event);\n          setSearch('');\n          tabRefs.current[tabs.findIndex(tab => tab.id === id)]?.focus();\n        },\n        header: (\n          <SearchInput\n            ref={searchEleRef}\n            onSearchChange={setSearch}\n            value={search}\n            role='searchbox'\n            aria-controls={menuId}\n          />\n        )\n      }}\n      popover={{\n        onHide: () => {\n          setFocusControlEl(undefined);\n          setSearch('');\n        },\n        onShow: () => {\n          if (searchEleRef.current) {\n            setFocusControlEl(searchEleRef.current);\n            searchEleRef.current.focus();\n          }\n        }\n      }}\n    />\n  );\n};\n\n/**\n * The tabs component will take a list of tab data objects and render out a list of tabs in either vertical or horizontal direction.\n * The tabs component handles which tab is active but will give you a callback function that allows you to make changes when a new tab is activated\n */\nconst Tabs: FunctionComponent<TabsProps & ForwardProps> = forwardRef(function Tabs(\n  {\n    tabs = [],\n    type = 'horizontal',\n    currentTabId,\n    onTabClick,\n    ...restProps\n  }: PropsWithoutRef<TabsProps>,\n  ref: Ref<HTMLElement>\n) {\n  const [wrapper, setWrapper] = useElement<HTMLDivElement>();\n  const wrapperRef = useConsolidatedRef(ref, setWrapper);\n  const { level } = useContext(TabsContext);\n  const [hasScrollBar, setHasScrollBar] = useState(false);\n\n  // Used to keep a reference for every tab in order to focus them with key presses\n  const tabRefs = useRef<(HTMLButtonElement | HTMLAnchorElement | null)[]>([]);\n\n  // Handles arrow keypresses for changing the focus\n  const changeTabFocus = (event: KeyboardEvent, index: number): void => {\n    if (tabRefs.current?.length) {\n      const { key } = event;\n      if (key === 'ArrowRight' || key === 'ArrowDown') {\n        const nextIndex = index + 1 < tabs.length ? index + 1 : 0;\n        const nextTab = tabRefs.current[nextIndex] as HTMLButtonElement;\n\n        if (!nextTab?.disabled) {\n          nextTab?.focus();\n        } else {\n          changeTabFocus(event, nextIndex);\n        }\n      } else if (key === 'ArrowLeft' || key === 'ArrowUp') {\n        const prevIndex = index === 0 ? tabs.length - 1 : index - 1;\n        const prevTab = tabRefs.current[prevIndex] as HTMLButtonElement;\n        if (!prevTab?.disabled) {\n          prevTab?.focus();\n        } else {\n          changeTabFocus(event, prevIndex);\n        }\n      }\n    }\n  };\n\n  useAfterInitialEffect(() => {\n    const event = new Event('cosmos-tab-changed', { bubbles: true, composed: true });\n    wrapperRef.current?.dispatchEvent(event);\n\n    const currentTabEl = tabRefs.current.find(tab => tab && tab.id === currentTabId);\n    currentTabEl?.scrollIntoView({ behavior: 'smooth', block: 'nearest' });\n  }, [currentTabId]);\n\n  useEffect(() => {\n    if (!wrapper) return;\n\n    const ro = new ResizeObserver(\n      debounce(([entry]) => {\n        if (!entry?.target.isConnected || !(entry.target instanceof HTMLElement)) return;\n\n        setHasScrollBar(entry.target.scrollWidth > entry.target.offsetWidth);\n      }, 1)\n    );\n\n    ro.observe(wrapper);\n\n    return () => {\n      ro.disconnect();\n    };\n  }, [wrapper]);\n\n  const shouldRenderAllTabsButton = type === 'horizontal' && hasScrollBar;\n\n  const TabList = (\n    <Flex\n      {...restProps}\n      container={{\n        direction: type !== 'horizontal' ? 'column' : undefined,\n        pad: type === 'horizontal' && !hasScrollBar && level === 1 ? [0, 0, 0, 0.5] : undefined\n      }}\n      item={{ shrink: 0 }}\n      as={StyledTabs}\n      ref={wrapperRef}\n      type={type}\n      role='tablist'\n      aria-orientation={type}\n      hasScrollBar={hasScrollBar}\n      level={level}\n    >\n      {tabs.map((tab: TabItem, i) => {\n        const { href, name, count, id, disabled, errors } = tab;\n        const selected = id === currentTabId;\n\n        return (\n          <Fragment key={id}>\n            {level > 1 && (\n              <StyledSeparator\n                transparent={\n                  selected ||\n                  (i === 0 ? !shouldRenderAllTabsButton : tabs[i - 1].id === currentTabId)\n                }\n              />\n            )}\n            <Tab\n              id={id}\n              aria-selected={selected}\n              aria-controls={`${id}-panel`}\n              content={name}\n              count={typeof count === 'number' && <Count>{count}</Count>}\n              href={href}\n              selected={selected}\n              onClick={(event: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n                onTabClick?.(id, event);\n              }}\n              role='tab'\n              ref={el => {\n                tabRefs.current[i] = el;\n              }}\n              onKeyDown={(e: KeyboardEvent) => {\n                if (['ArrowRight', 'ArrowDown', 'ArrowLeft', 'ArrowUp'].includes(e.key)) {\n                  e.preventDefault();\n                  changeTabFocus(e, i);\n                }\n              }}\n              as={href ? Link : undefined}\n              tabIndex={selected ? undefined : -1}\n              aria-label={name}\n              type={type}\n              disabled={disabled}\n              errors={errors}\n            />\n          </Fragment>\n        );\n      })}\n    </Flex>\n  );\n\n  return shouldRenderAllTabsButton ? (\n    <Flex container={{ direction: 'row' }} as={StyledAllTabsWrapper} level={level}>\n      <Flex\n        container={{ pad: level === 1 ? [0, 0, 0, 0.5] : undefined }}\n        as={StylesAllTabsButtonWrapper}\n      >\n        <AllTabsButton\n          tabs={tabs}\n          tabRefs={tabRefs}\n          currentTabId={currentTabId}\n          onTabClick={onTabClick}\n        />\n      </Flex>\n      {TabList}\n    </Flex>\n  ) : (\n    TabList\n  );\n});\n\nexport default Tabs;\n"]}

package/lib/components/Tabs/Tabs.styles.d.ts

@@ -1,9 +1,17 @@
 import type { TabsProps } from './Tabs.types';
 export declare const StyledTabs: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, Partial<TabsProps> & {
     hasScrollBar: boolean;
+    level: number;
 }, never>;
 export declare const StyledAllTabsButton: import("styled-components").StyledComponent<import("react").FunctionComponent<import("../..").ForwardProps & import("../MenuButton").MenuButtonProps> & {
     getTestIds: (testIdProp?: string | null | undefined) => import("../..").TestIdsRecord<readonly []>;
 }, import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledErrorIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../Icon").IconProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StylesAllTabsButtonWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledAllTabsWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    level: number;
+}, never>;
+export declare const StyledSeparator: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {
+    transparent: boolean;
+}, never>;
 //# sourceMappingURL=Tabs.styles.d.ts.map

package/lib/components/Tabs/Tabs.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.styles.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,eAAO,MAAM,UAAU;kBAAmD,OAAO;SA2ChF,CAAC;AAIF,eAAO,MAAM,mBAAmB;;uDAkB/B,CAAC;AAIF,eAAO,MAAM,eAAe,0KAI3B,CAAC"}
+{"version":3,"file":"Tabs.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.styles.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,eAAO,MAAM,UAAU;kBAAmD,OAAO;WAAS,MAAM;SA6D/F,CAAC;AAIF,eAAO,MAAM,mBAAmB;;uDAI/B,CAAC;AAIF,eAAO,MAAM,eAAe,0KAI3B,CAAC;AAIF,eAAO,MAAM,0BAA0B,yGAUtC,CAAC;AAIF,eAAO,MAAM,oBAAoB;WACxB,MAAM;SAiBd,CAAC;AAIF,eAAO,MAAM,eAAe;iBAA8B,OAAO;SAOhE,CAAC"}

package/lib/components/Tabs/Tabs.styles.js

@@ -3,62 +3,108 @@ import Icon from '../Icon';
 import MenuButton from '../MenuButton';
 import { defaultThemeProp } from '../../theme';
 import { StyledTab } from './Tab';
-export const StyledTabs = styled.div(({ type, theme, hasScrollBar }) => css `
-    position: relative;
+export const StyledTabs = styled.div(({ type, theme, hasScrollBar, level }) => {
+    return css `
+      position: relative;
 
-    ${type === 'horizontal' &&
-    css `
-      height: max-content;
-      overflow: auto;
-      ${hasScrollBar
-        ? css `
-            max-width: calc(100% - ${theme.base['hit-area']['mouse-min']});
+      ${type === 'horizontal' &&
+        css `
+        height: max-content;
+        overflow: auto;
+        ${hasScrollBar
+            ? css `
+              max-width: calc(
+                100% - ${theme.base['hit-area']['mouse-min']} -
+                  ${level > 1 ? '0px' : `calc(0.5 * ${theme.base.spacing}) - 0.0625rem `}
+              );
 
-            &:not(:hover, :focus, :active, :has(:focus-visible)) {
-              ::-webkit-scrollbar-thumb {
-                box-shadow: none;
-              }
+              &:not(:hover, :focus, :active, :has(:focus-visible)) {
+                ::-webkit-scrollbar-thumb {
+                  box-shadow: none;
+                }
 
-              ::-webkit-scrollbar-track {
-                background-color: transparent;
+                ::-webkit-scrollbar-track {
+                  background-color: transparent;
+                }
               }
-            }
 
-            ${StyledTab} {
-              border-block-end: 0.0625rem solid ${theme.base.palette['border-line']};
+              ${StyledTab} {
+                border-block-end: 0.0625rem solid ${theme.base.palette['border-line']};
+                height: calc(${theme.base['hit-area']['mouse-min']} + 0.0625rem);
 
-              &:disabled {
-                opacity: 1;
-                > * {
-                  opacity: ${theme.base['disabled-opacity']};
+                @media (pointer: coarse) {
+                  height: calc(${theme.base['hit-area']['finger-min']} + 0.0625rem);
+                }
+
+                &:disabled {
+                  opacity: 1;
+                  > * {
+                    opacity: ${theme.base['disabled-opacity']};
+                  }
                 }
               }
-            }
-          `
-        : css `
-            border-block-end: 0.0625rem solid ${theme.base.palette['border-line']};
-          `}
-    `}
-    &:has(:focus-visible) {
-      box-shadow: ${type === 'vertical'
-    ? theme.base.shadow['focus-group-inset']
-    : theme.base.shadow['focus-group']};
-    }
-  `);
+            `
+            : css `
+              border-block-end: 0.0625rem solid ${theme.base.palette['border-line']};
+              ${level > 1 &&
+                css `
+                background-color: ${theme.base.palette['secondary-background']};
+                border: 0.0625rem solid ${theme.base.palette['border-line']};
+                border-block-end: none;
+                border-start-start-radius: calc(0.5rem * 0.5);
+                border-start-end-radius: calc(0.5rem * 0.5);
+              `}
+            `}
+      `}
+      &:has(:focus-visible) {
+        box-shadow: ${type === 'vertical'
+        ? theme.base.shadow['focus-group-inset']
+        : theme.base.shadow['focus-group']};
+      }
+    `;
+});
 StyledTabs.defaultProps = defaultThemeProp;
-export const StyledAllTabsButton = styled(MenuButton)(({ theme: { base: { palette, 'hit-area': { 'mouse-min': hitAreaMouse } } } }) => css `
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    height: ${hitAreaMouse};
-    width: ${hitAreaMouse};
-    border-block-end: 0.0625rem solid ${palette['border-line']};
-    border-inline-end: 0.0625rem solid ${palette['border-line']};
-    border-radius: 0;
-  `);
+export const StyledAllTabsButton = styled(MenuButton) `
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+`;
 StyledAllTabsButton.defaultProps = defaultThemeProp;
 export const StyledErrorIcon = styled(Icon)(({ theme }) => css `
     color: ${theme.base.palette.urgent};
   `);
 StyledErrorIcon.defaultProps = defaultThemeProp;
+export const StylesAllTabsButtonWrapper = styled.div(({ theme }) => css `
+    border-block-end: 0.0625rem solid ${theme.base.palette['border-line']};
+    border-inline-end: 0.0625rem solid ${theme.base.palette['border-line']};
+    height: calc(${theme.base['hit-area']['mouse-min']} + 0.0625rem);
+
+    @media (pointer: coarse) {
+      height: calc(${theme.base['hit-area']['finger-min']} + 0.0625rem);
+    }
+  `);
+StylesAllTabsButtonWrapper.defaultProps = defaultThemeProp;
+export const StyledAllTabsWrapper = styled.div(({ theme, level }) => css `
+    ${level > 1 &&
+    css `
+      background-color: ${theme.base.palette['secondary-background']};
+      border-inline: 0.0625rem solid ${theme.base.palette['border-line']};
+      border-block-start: 0.0625rem solid ${theme.base.palette['border-line']};
+      border-start-start-radius: calc(0.5rem * 0.5);
+      border-start-end-radius: calc(0.5rem * 0.5);
+
+      ${StylesAllTabsButtonWrapper}, ${StyledTab} {
+        border-block-end: none;
+        border-inline-end: none;
+      }
+    `}
+  `);
+StyledAllTabsWrapper.defaultProps = defaultThemeProp;
+export const StyledSeparator = styled.span(({ theme, transparent }) => css `
+    align-self: center;
+    height: 1em;
+    min-width: 0.0625rem;
+    background-color: ${transparent ? 'transparent' : theme.base.palette['border-line']};
+  `);
+StyledSeparator.defaultProps = defaultThemeProp;
 //# sourceMappingURL=Tabs.styles.js.map

package/lib/components/Tabs/Tabs.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.styles.js","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,UAAU,MAAM,eAAe,CAAC;AACvC,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGlC,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAClC,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;;;MAGlC,IAAI,KAAK,YAAY;IACvB,GAAG,CAAA;;;QAGC,YAAY;QACZ,CAAC,CAAC,GAAG,CAAA;qCACwB,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;cAY1D,SAAS;kDAC2B,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;;;;;6BAKtD,KAAK,CAAC,IAAI,CAAC,kBAAkB,CAAC;;;;WAIhD;QACH,CAAC,CAAC,GAAG,CAAA;gDACmC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;WACtE;KACN;;oBAEe,IAAI,KAAK,UAAU;IAC/B,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,mBAAmB,CAAC;IACxC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC;;GAEvC,CACF,CAAC;AAEF,UAAU,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE3C,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,UAAU,CAAC,CACnD,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EACJ,OAAO,EACP,UAAU,EAAE,EAAE,WAAW,EAAE,YAAY,EAAE,EAC1C,EACF,EACF,EAAE,EAAE,CAAC,GAAG,CAAA;;;;cAIG,YAAY;aACb,YAAY;wCACe,OAAO,CAAC,aAAa,CAAC;yCACrB,OAAO,CAAC,aAAa,CAAC;;GAE5D,CACF,CAAC;AAEF,mBAAmB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEpD,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,IAAI,CAAC,CACzC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;aACP,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM;GACnC,CACF,CAAC;AAEF,eAAe,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport Icon from '../Icon';\nimport MenuButton from '../MenuButton';\nimport { defaultThemeProp } from '../../theme';\n\nimport { StyledTab } from './Tab';\nimport type { TabsProps } from './Tabs.types';\n\nexport const StyledTabs = styled.div<Partial<TabsProps> & { hasScrollBar: boolean }>(\n  ({ type, theme, hasScrollBar }) => css`\n    position: relative;\n\n    ${type === 'horizontal' &&\n    css`\n      height: max-content;\n      overflow: auto;\n      ${hasScrollBar\n        ? css`\n            max-width: calc(100% - ${theme.base['hit-area']['mouse-min']});\n\n            &:not(:hover, :focus, :active, :has(:focus-visible)) {\n              ::-webkit-scrollbar-thumb {\n                box-shadow: none;\n              }\n\n              ::-webkit-scrollbar-track {\n                background-color: transparent;\n              }\n            }\n\n            ${StyledTab} {\n              border-block-end: 0.0625rem solid ${theme.base.palette['border-line']};\n\n              &:disabled {\n                opacity: 1;\n                > * {\n                  opacity: ${theme.base['disabled-opacity']};\n                }\n              }\n            }\n          `\n        : css`\n            border-block-end: 0.0625rem solid ${theme.base.palette['border-line']};\n          `}\n    `}\n    &:has(:focus-visible) {\n      box-shadow: ${type === 'vertical'\n        ? theme.base.shadow['focus-group-inset']\n        : theme.base.shadow['focus-group']};\n    }\n  `\n);\n\nStyledTabs.defaultProps = defaultThemeProp;\n\nexport const StyledAllTabsButton = styled(MenuButton)(\n  ({\n    theme: {\n      base: {\n        palette,\n        'hit-area': { 'mouse-min': hitAreaMouse }\n      }\n    }\n  }) => css`\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    height: ${hitAreaMouse};\n    width: ${hitAreaMouse};\n    border-block-end: 0.0625rem solid ${palette['border-line']};\n    border-inline-end: 0.0625rem solid ${palette['border-line']};\n    border-radius: 0;\n  `\n);\n\nStyledAllTabsButton.defaultProps = defaultThemeProp;\n\nexport const StyledErrorIcon = styled(Icon)(\n  ({ theme }) => css`\n    color: ${theme.base.palette.urgent};\n  `\n);\n\nStyledErrorIcon.defaultProps = defaultThemeProp;\n"]}
+{"version":3,"file":"Tabs.styles.js","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport Icon from '../Icon';\nimport MenuButton from '../MenuButton';\nimport { defaultThemeProp } from '../../theme';\n\nimport { StyledTab } from './Tab';\nimport type { TabsProps } from './Tabs.types';\n\nexport const StyledTabs = styled.div<Partial<TabsProps> & { hasScrollBar: boolean; level: number }>(\n  ({ type, theme, hasScrollBar, level }) => {\n    return css`\n      position: relative;\n\n      ${type === 'horizontal' &&\n      css`\n        height: max-content;\n        overflow: auto;\n        ${hasScrollBar\n          ? css`\n              max-width: calc(\n                100% - ${theme.base['hit-area']['mouse-min']} -\n                  ${level > 1 ? '0px' : `calc(0.5 * ${theme.base.spacing}) - 0.0625rem `}\n              );\n\n              &:not(:hover, :focus, :active, :has(:focus-visible)) {\n                ::-webkit-scrollbar-thumb {\n                  box-shadow: none;\n                }\n\n                ::-webkit-scrollbar-track {\n                  background-color: transparent;\n                }\n              }\n\n              ${StyledTab} {\n                border-block-end: 0.0625rem solid ${theme.base.palette['border-line']};\n                height: calc(${theme.base['hit-area']['mouse-min']} + 0.0625rem);\n\n                @media (pointer: coarse) {\n                  height: calc(${theme.base['hit-area']['finger-min']} + 0.0625rem);\n                }\n\n                &:disabled {\n                  opacity: 1;\n                  > * {\n                    opacity: ${theme.base['disabled-opacity']};\n                  }\n                }\n              }\n            `\n          : css`\n              border-block-end: 0.0625rem solid ${theme.base.palette['border-line']};\n              ${level > 1 &&\n              css`\n                background-color: ${theme.base.palette['secondary-background']};\n                border: 0.0625rem solid ${theme.base.palette['border-line']};\n                border-block-end: none;\n                border-start-start-radius: calc(0.5rem * 0.5);\n                border-start-end-radius: calc(0.5rem * 0.5);\n              `}\n            `}\n      `}\n      &:has(:focus-visible) {\n        box-shadow: ${type === 'vertical'\n          ? theme.base.shadow['focus-group-inset']\n          : theme.base.shadow['focus-group']};\n      }\n    `;\n  }\n);\n\nStyledTabs.defaultProps = defaultThemeProp;\n\nexport const StyledAllTabsButton = styled(MenuButton)`\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n`;\n\nStyledAllTabsButton.defaultProps = defaultThemeProp;\n\nexport const StyledErrorIcon = styled(Icon)(\n  ({ theme }) => css`\n    color: ${theme.base.palette.urgent};\n  `\n);\n\nStyledErrorIcon.defaultProps = defaultThemeProp;\n\nexport const StylesAllTabsButtonWrapper = styled.div(\n  ({ theme }) => css`\n    border-block-end: 0.0625rem solid ${theme.base.palette['border-line']};\n    border-inline-end: 0.0625rem solid ${theme.base.palette['border-line']};\n    height: calc(${theme.base['hit-area']['mouse-min']} + 0.0625rem);\n\n    @media (pointer: coarse) {\n      height: calc(${theme.base['hit-area']['finger-min']} + 0.0625rem);\n    }\n  `\n);\n\nStylesAllTabsButtonWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledAllTabsWrapper = styled.div<{\n  level: number;\n}>(\n  ({ theme, level }) => css`\n    ${level > 1 &&\n    css`\n      background-color: ${theme.base.palette['secondary-background']};\n      border-inline: 0.0625rem solid ${theme.base.palette['border-line']};\n      border-block-start: 0.0625rem solid ${theme.base.palette['border-line']};\n      border-start-start-radius: calc(0.5rem * 0.5);\n      border-start-end-radius: calc(0.5rem * 0.5);\n\n      ${StylesAllTabsButtonWrapper}, ${StyledTab} {\n        border-block-end: none;\n        border-inline-end: none;\n      }\n    `}\n  `\n);\n\nStyledAllTabsWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledSeparator = styled.span<{ transparent: boolean }>(\n  ({ theme, transparent }) => css`\n    align-self: center;\n    height: 1em;\n    min-width: 0.0625rem;\n    background-color: ${transparent ? 'transparent' : theme.base.palette['border-line']};\n  `\n);\n\nStyledSeparator.defaultProps = defaultThemeProp;\n"]}

package/lib/components/Tabs/TabsContext.d.ts

@@ -0,0 +1,6 @@
+export interface TabsContextValue {
+    level: number;
+}
+declare const TabsContext: import("react").Context<TabsContextValue>;
+export default TabsContext;
+//# sourceMappingURL=TabsContext.d.ts.map

package/lib/components/Tabs/TabsContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabsContext.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/TabsContext.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;CACf;AAED,QAAA,MAAM,WAAW,2CAEf,CAAC;AAEH,eAAe,WAAW,CAAC"}

package/lib/components/Tabs/TabsContext.js

@@ -0,0 +1,6 @@
+import { createContext } from 'react';
+const TabsContext = createContext({
+    level: 1
+});
+export default TabsContext;
+//# sourceMappingURL=TabsContext.js.map

package/lib/components/Tabs/TabsContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabsContext.js","sourceRoot":"","sources":["../../../src/components/Tabs/TabsContext.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAMtC,MAAM,WAAW,GAAG,aAAa,CAAmB;IAClD,KAAK,EAAE,CAAC;CACT,CAAC,CAAC;AAEH,eAAe,WAAW,CAAC","sourcesContent":["import { createContext } from 'react';\n\nexport interface TabsContextValue {\n  level: number;\n}\n\nconst TabsContext = createContext<TabsContextValue>({\n  level: 1\n});\n\nexport default TabsContext;\n"]}

package/lib/components/Tabs/index.d.ts

@@ -1,4 +1,5 @@
 export { default } from './Tabs';
 export { default as TabPanel } from './TabPanel';
+export { default as TabsContext } from './TabsContext';
 export type { TabsProps, Tab } from './Tabs.types';
 //# sourceMappingURL=index.d.ts.map

package/lib/components/Tabs/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACjC,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,YAAY,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACjC,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,YAAY,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC"}

package/lib/components/Tabs/index.js

@@ -1,3 +1,4 @@
 export { default } from './Tabs';
 export { default as TabPanel } from './TabPanel';
+export { default as TabsContext } from './TabsContext';
 //# sourceMappingURL=index.js.map

package/lib/components/Tabs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Tabs/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACjC,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC","sourcesContent":["export { default } from './Tabs';\nexport { default as TabPanel } from './TabPanel';\nexport type { TabsProps, Tab } from './Tabs.types';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Tabs/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACjC,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC","sourcesContent":["export { default } from './Tabs';\nexport { default as TabPanel } from './TabPanel';\nexport { default as TabsContext } from './TabsContext';\nexport type { TabsProps, Tab } from './Tabs.types';\n"]}

package/lib/components/Text/Text.js

@@ -6,7 +6,7 @@ import { defaultThemeProp } from '../../theme';
 import { tryCatch } from '../../utils';
 import { calculateFontSize } from '../../styles';
 export const StyledText = styled.span(props => {
-    const { variant, status, theme: { base: { 'font-size': fontSize, 'font-scale': fontScale, palette: { 'foreground-color': foregroundColor, urgent: error, warn: warning, success }, transparency: { 'transparent-2': secondaryAlpha } }, components: { text } } } = props;
+    const { variant, status, theme: { base: { 'font-size': fontSize, 'font-scale': fontScale, palette: { 'foreground-color': foregroundColor, urgent: error, warn: warning, success }, transparency: { 'transparent-3': secondaryAlpha } }, components: { text } } } = props;
     let color;
     if (status) {
         color = {

package/lib/components/Text/Text.js.map

@@ -1 +1 @@
-{"version":3,"file":"Text.js","sourceRoot":"","sources":["../../../src/components/Text/Text.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAGhC,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAmBjD,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAwB,KAAK,CAAC,EAAE;IACnE,MAAM,EACJ,OAAO,EACP,MAAM,EACN,KAAK,EAAE,EACL,IAAI,EAAE,EACJ,WAAW,EAAE,QAAQ,EACrB,YAAY,EAAE,SAAS,EACvB,OAAO,EAAE,EAAE,kBAAkB,EAAE,eAAe,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,EACvF,YAAY,EAAE,EAAE,eAAe,EAAE,cAAc,EAAE,EAClD,EACD,UAAU,EAAE,EAAE,IAAI,EAAE,EACrB,EACF,GAAG,KAAK,CAAC;IAEV,IAAI,KAAyB,CAAC;IAE9B,IAAI,MAAM,EAAE;QACV,KAAK,GAAG;YACN,KAAK;YACL,OAAO;YACP,OAAO;SACR,CAAC,MAAM,CAAC,CAAC;KACX;IAED,IAAI,OAAO,KAAK,WAAW,EAAE;QAC3B,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,IAAI,eAAe,EAAE,cAAc,CAAC,CAAC,CAAC;KACxE;IAED,MAAM,SAAS,GAAG,iBAAiB,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC;IAEzD,OAAO,GAAG,CAAA;iBACK,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,WAAW,CAAa,CAAC;mBAC/C,IAAI,CAAC,OAAO,CAAC,CAAC,aAAa,CAAC;aAClC,KAAK;GACf,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,UAAU,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE3C,MAAM,IAAI,GAAgD,UAAU,CAAC,SAAS,IAAI,CAChF,EAAE,OAAO,GAAG,SAAS,EAAE,EAAE,EAAE,GAAG,SAAS,EAA8B,EACrE,GAAqB;IAErB,2EAA2E;IAC3E,IAAI,CAAC,EAAE,IAAI,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC;QAAE,EAAE,GAAG,OAAqB,CAAC;IAC5D,OAAO,KAAC,UAAU,IAAC,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,OAAO,EAAE,EAAE,EAAE,EAAE,KAAM,SAAS,GAAI,CAAC;AAC3E,CAAC,CAAC,CAAC;AAEH,eAAe,IAAI,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { FunctionComponent, ReactNode, Ref, PropsWithoutRef } from 'react';\nimport styled, { css } from 'styled-components';\nimport { rgba } from 'polished';\n\nimport type { HeadingTag, BaseProps, ForwardProps, AsProp, PropsWithDefaults } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch } from '../../utils';\nimport { calculateFontSize } from '../../styles';\nimport type { FontSize } from '../../styles';\n\nexport interface TextProps extends BaseProps, AsProp {\n  /** Text content. */\n  children: ReactNode;\n  /**\n   * Typographical sizes and styles.\n   * @default 'primary'\n   */\n  variant?: 'primary' | 'secondary' | HeadingTag;\n  /** Render text with semantic color based on a status. */\n  status?: 'error' | 'warning' | 'success';\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLSpanElement | HTMLHeadingElement>;\n}\n\ntype TextPropsWithDefaults = PropsWithDefaults<TextProps, 'variant'>;\n\nexport const StyledText = styled.span<TextPropsWithDefaults>(props => {\n  const {\n    variant,\n    status,\n    theme: {\n      base: {\n        'font-size': fontSize,\n        'font-scale': fontScale,\n        palette: { 'foreground-color': foregroundColor, urgent: error, warn: warning, success },\n        transparency: { 'transparent-2': secondaryAlpha }\n      },\n      components: { text }\n    }\n  } = props;\n\n  let color: string | undefined;\n\n  if (status) {\n    color = {\n      error,\n      warning,\n      success\n    }[status];\n  }\n\n  if (variant === 'secondary') {\n    color = tryCatch(() => rgba(color ?? foregroundColor, secondaryAlpha));\n  }\n\n  const fontSizes = calculateFontSize(fontSize, fontScale);\n\n  return css`\n    font-size: ${fontSizes[text[variant]['font-size'] as FontSize]};\n    font-weight: ${text[variant]['font-weight']};\n    color: ${color};\n  `;\n});\n\nStyledText.defaultProps = defaultThemeProp;\n\nconst Text: FunctionComponent<TextProps & ForwardProps> = forwardRef(function Text(\n  { variant = 'primary', as, ...restProps }: PropsWithoutRef<TextProps>,\n  ref: TextProps['ref']\n) {\n  // If variant is for a heading, and no as is passed, set as to heading tag.\n  if (!as && /h\\d/i.test(variant)) as = variant as HeadingTag;\n  return <StyledText ref={ref} variant={variant} as={as} {...restProps} />;\n});\n\nexport default Text;\n"]}
+{"version":3,"file":"Text.js","sourceRoot":"","sources":["../../../src/components/Text/Text.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAGhC,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAmBjD,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAwB,KAAK,CAAC,EAAE;IACnE,MAAM,EACJ,OAAO,EACP,MAAM,EACN,KAAK,EAAE,EACL,IAAI,EAAE,EACJ,WAAW,EAAE,QAAQ,EACrB,YAAY,EAAE,SAAS,EACvB,OAAO,EAAE,EAAE,kBAAkB,EAAE,eAAe,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,EACvF,YAAY,EAAE,EAAE,eAAe,EAAE,cAAc,EAAE,EAClD,EACD,UAAU,EAAE,EAAE,IAAI,EAAE,EACrB,EACF,GAAG,KAAK,CAAC;IAEV,IAAI,KAAyB,CAAC;IAE9B,IAAI,MAAM,EAAE;QACV,KAAK,GAAG;YACN,KAAK;YACL,OAAO;YACP,OAAO;SACR,CAAC,MAAM,CAAC,CAAC;KACX;IAED,IAAI,OAAO,KAAK,WAAW,EAAE;QAC3B,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,IAAI,eAAe,EAAE,cAAc,CAAC,CAAC,CAAC;KACxE;IAED,MAAM,SAAS,GAAG,iBAAiB,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC;IAEzD,OAAO,GAAG,CAAA;iBACK,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,WAAW,CAAa,CAAC;mBAC/C,IAAI,CAAC,OAAO,CAAC,CAAC,aAAa,CAAC;aAClC,KAAK;GACf,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,UAAU,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE3C,MAAM,IAAI,GAAgD,UAAU,CAAC,SAAS,IAAI,CAChF,EAAE,OAAO,GAAG,SAAS,EAAE,EAAE,EAAE,GAAG,SAAS,EAA8B,EACrE,GAAqB;IAErB,2EAA2E;IAC3E,IAAI,CAAC,EAAE,IAAI,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC;QAAE,EAAE,GAAG,OAAqB,CAAC;IAC5D,OAAO,KAAC,UAAU,IAAC,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,OAAO,EAAE,EAAE,EAAE,EAAE,KAAM,SAAS,GAAI,CAAC;AAC3E,CAAC,CAAC,CAAC;AAEH,eAAe,IAAI,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { FunctionComponent, ReactNode, Ref, PropsWithoutRef } from 'react';\nimport styled, { css } from 'styled-components';\nimport { rgba } from 'polished';\n\nimport type { HeadingTag, BaseProps, ForwardProps, AsProp, PropsWithDefaults } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch } from '../../utils';\nimport { calculateFontSize } from '../../styles';\nimport type { FontSize } from '../../styles';\n\nexport interface TextProps extends BaseProps, AsProp {\n  /** Text content. */\n  children: ReactNode;\n  /**\n   * Typographical sizes and styles.\n   * @default 'primary'\n   */\n  variant?: 'primary' | 'secondary' | HeadingTag;\n  /** Render text with semantic color based on a status. */\n  status?: 'error' | 'warning' | 'success';\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLSpanElement | HTMLHeadingElement>;\n}\n\ntype TextPropsWithDefaults = PropsWithDefaults<TextProps, 'variant'>;\n\nexport const StyledText = styled.span<TextPropsWithDefaults>(props => {\n  const {\n    variant,\n    status,\n    theme: {\n      base: {\n        'font-size': fontSize,\n        'font-scale': fontScale,\n        palette: { 'foreground-color': foregroundColor, urgent: error, warn: warning, success },\n        transparency: { 'transparent-3': secondaryAlpha }\n      },\n      components: { text }\n    }\n  } = props;\n\n  let color: string | undefined;\n\n  if (status) {\n    color = {\n      error,\n      warning,\n      success\n    }[status];\n  }\n\n  if (variant === 'secondary') {\n    color = tryCatch(() => rgba(color ?? foregroundColor, secondaryAlpha));\n  }\n\n  const fontSizes = calculateFontSize(fontSize, fontScale);\n\n  return css`\n    font-size: ${fontSizes[text[variant]['font-size'] as FontSize]};\n    font-weight: ${text[variant]['font-weight']};\n    color: ${color};\n  `;\n});\n\nStyledText.defaultProps = defaultThemeProp;\n\nconst Text: FunctionComponent<TextProps & ForwardProps> = forwardRef(function Text(\n  { variant = 'primary', as, ...restProps }: PropsWithoutRef<TextProps>,\n  ref: TextProps['ref']\n) {\n  // If variant is for a heading, and no as is passed, set as to heading tag.\n  if (!as && /h\\d/i.test(variant)) as = variant as HeadingTag;\n  return <StyledText ref={ref} variant={variant} as={as} {...restProps} />;\n});\n\nexport default Text;\n"]}

package/lib/hooks/useI18n.d.ts

@@ -307,6 +307,7 @@ declare const useI18n: () => import("../i18n/translate").TranslationFunction<Rea
     minimize_gen_ai: string;
     maximize_gen_ai: string;
     close_gen_ai: string;
+    ask_coach: string;
     accept_suggestion_button_a11y: string;
     reject_suggestion_button_a11y: string;
     suggestion_info: string;

package/lib/hooks/useI18n.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useI18n.d.ts","sourceRoot":"","sources":["../../src/hooks/useI18n.ts"],"names":[],"mappings":"AAMA;;;GAGG;AACH,QAAA,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAGZ,CAAC;AAEF,eAAe,OAAO,CAAC"}
+{"version":3,"file":"useI18n.d.ts","sourceRoot":"","sources":["../../src/hooks/useI18n.ts"],"names":[],"mappings":"AAMA;;;GAGG;AACH,QAAA,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAGZ,CAAC;AAEF,eAAe,OAAO,CAAC"}