@pega/cosmos-react-core 7.0.0-build.9.1 → 7.0.0-rc.1

package/lib/components/Tabs/Tabs.js

@@ -1,34 +1,77 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef, useRef } from 'react';
-import styled, { css } from 'styled-components';
-import { defaultThemeProp } from '../../theme';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 } from '../../hooks';
+import { useAfterInitialEffect, useConsolidatedRef, useElement, useEscape, useI18n, useUID } from '../../hooks';
+import * as arrowMicroDownIcon from '../Icon/icons/arrow-micro-down.icon';
+import { registerIcon } from '../Icon/Icon';
+import { createStringMatcher, debounce } from '../../utils';
+import TabsContext from './TabsContext';
+import { StyledErrorIcon, StyledAllTabsButton, StyledTabs, StylesAllTabsButtonWrapper, StyledAllTabsWrapper, StyledSeparator } from './Tabs.styles';
 import Tab from './Tab';
-export const StyledTabs = styled.div(({ type, theme }) => css `
-    position: relative;
-    overflow: ${type === 'horizontal' ? 'auto' : 'visible'};
-    ${type === 'horizontal' &&
-    css `
-      border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};
-      height: max-content;
-    `}
-
-    &:has(:focus-visible) {
-      box-shadow: ${type === 'vertical'
-    ? theme.base.shadow['focus-group-inset']
-    : theme.base.shadow['focus-group']};
-    }
-  `);
-StyledTabs.defaultProps = defaultThemeProp;
+registerIcon(arrowMicroDownIcon);
+const AllTabsButton = ({ tabs, tabRefs, currentTabId, onTabClick }) => {
+    const menuId = useUID();
+    const t = useI18n();
+    const menuButtonRef = useRef(null);
+    const [search, setSearch] = useState('');
+    const searchEleRef = useRef(null);
+    const [focusControlEl, setFocusControlEl] = useState();
+    const searchRegex = createStringMatcher(search);
+    const itemsToRender = useMemo(() => {
+        return tabs
+            .filter(({ name }) => searchRegex.test(name))
+            .map(({ id, name, count, disabled, errors }) => {
+            const selected = id === currentTabId;
+            const item = { id, primary: name, selected, count, disabled };
+            if (errors) {
+                item.visual = _jsx(StyledErrorIcon, { name: 'warn-solid' });
+            }
+            return item;
+        });
+    }, [tabs, search, currentTabId]);
+    useEscape(() => {
+        if (!search) {
+            menuButtonRef.current?.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
+            menuButtonRef.current?.focus();
+        }
+    }, searchEleRef);
+    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,
+            focusControlEl,
+            accent: search ? searchRegex : undefined,
+            onItemClick: (id, event) => {
+                onTabClick?.(id, event);
+                setSearch('');
+                tabRefs.current[tabs.findIndex(tab => tab.id === id)]?.focus();
+            },
+            header: (_jsx(SearchInput, { ref: searchEleRef, onSearchChange: setSearch, value: search, role: 'searchbox', "aria-controls": menuId }))
+        }, popover: {
+            onHide: () => {
+                setFocusControlEl(undefined);
+                setSearch('');
+            },
+            onShow: () => {
+                if (searchEleRef.current) {
+                    setFocusControlEl(searchEleRef.current);
+                    searchEleRef.current.focus();
+                }
+            }
+        } }));
+};
 /**
  * The tabs component will take a list of tab data objects and render out a list of tabs in either vertical or horizontal direction.
  * 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
  */
 const Tabs = forwardRef(function Tabs({ tabs = [], type = 'horizontal', currentTabId, onTabClick, ...restProps }, ref) {
-    const wrapperRef = useConsolidatedRef(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([]);
     // Handles arrow keypresses for changing the focus
@@ -60,23 +103,42 @@ const Tabs = forwardRef(function Tabs({ tabs = [], type = 'horizontal', currentT
     useAfterInitialEffect(() => {
         const event = new Event('cosmos-tab-changed', { bubbles: true, composed: true });
         wrapperRef.current?.dispatchEvent(event);
+        const currentTabEl = tabRefs.current.find(tab => tab && tab.id === currentTabId);
+        currentTabEl?.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
     }, [currentTabId]);
-    return (_jsx(Flex, { ...restProps, container: {
-            direction: type !== 'horizontal' ? 'column' : undefined
-        }, item: { shrink: 0 }, as: StyledTabs, ref: wrapperRef, type: type, role: 'tablist', "aria-orientation": type, children: tabs.map((tab, i) => {
+    useEffect(() => {
+        if (!wrapper)
+            return;
+        const ro = new ResizeObserver(debounce(([entry]) => {
+            if (!entry?.target.isConnected || !(entry.target instanceof HTMLElement))
+                return;
+            setHasScrollBar(entry.target.scrollWidth > entry.target.offsetWidth);
+        }, 1));
+        ro.observe(wrapper);
+        return () => {
+            ro.disconnect();
+        };
+    }, [wrapper]);
+    const shouldRenderAllTabsButton = type === 'horizontal' && hasScrollBar;
+    const TabList = (_jsx(Flex, { ...restProps, container: {
+            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 shouldRenderAllTabsButton ? (_jsxs(Flex, { container: { alignItems: 'stretch' }, as: StyledAllTabsWrapper, level: level, children: [_jsx(Flex, { container: true, 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 { forwardRef, useRef } from 'react';\nimport type { FunctionComponent, MouseEvent, KeyboardEvent, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport Flex from '../Flex';\nimport Link from '../Link';\nimport Count from '../Badges/Count';\nimport type { ForwardProps } from '../../types';\nimport { useAfterInitialEffect, useConsolidatedRef } from '../../hooks';\n\nimport Tab from './Tab';\nimport type { TabsProps } from './Tabs.types';\n\ntype TabItem = TabsProps['tabs'][number];\n\nexport const StyledTabs = styled.div<Partial<TabsProps>>(\n  ({ type, theme }) => css`\n    position: relative;\n    overflow: ${type === 'horizontal' ? 'auto' : 'visible'};\n    ${type === 'horizontal' &&\n    css`\n      border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n      height: max-content;\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\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 wrapperRef = useConsolidatedRef(ref);\n\n  // Used to keep a reference for every tab in order to focus them with key presses\n  const tabRefs = useRef<(HTMLButtonElement | HTMLAnchorElement)[]>([]);\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  }, [currentTabId]);\n\n  return (\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    >\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: HTMLButtonElement | HTMLAnchorElement) => {\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\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, currentTabId]);\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={{ alignItems: 'stretch' }} as={StyledAllTabsWrapper} level={level}>\n      <Flex container as={StylesAllTabsButtonWrapper}>\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

@@ -0,0 +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

@@ -0,0 +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;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

@@ -0,0 +1,110 @@
+import styled, { css } from 'styled-components';
+import Icon from '../Icon';
+import MenuButton from '../MenuButton';
+import { defaultThemeProp } from '../../theme';
+import { StyledTab } from './Tab';
+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']} -
+                  ${level > 1 ? '0px' : `calc(0.5 * ${theme.base.spacing}) - 0.0625rem `}
+              );
+
+              &:not(:hover, :focus, :active, :has(:focus-visible)) {
+                ::-webkit-scrollbar-thumb {
+                  box-shadow: none;
+                }
+
+                ::-webkit-scrollbar-track {
+                  background-color: transparent;
+                }
+              }
+
+              ${StyledTab} {
+                border-block-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);
+                }
+
+                &:disabled {
+                  opacity: 1;
+                  > * {
+                    opacity: ${theme.base['disabled-opacity']};
+                  }
+                }
+              }
+            `
+            : 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) `
+  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

@@ -0,0 +1 @@
+{"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/components/TextArea/TextArea.d.ts

@@ -29,7 +29,7 @@ export interface TextAreaProps extends FormControlProps, BaseProps, NoChildrenPr
     onChange?: ChangeEventHandler<HTMLTextAreaElement>;
 }
 declare const _default: FC<TextAreaProps & ForwardProps> & {
-    getTestIds: (testIdProp?: string | undefined) => import("../../types").TestIdsRecord<readonly ["control", "label", "info", "additional-info", "suggestion-accept", "suggestion-reject"]>;
+    getTestIds: (testIdProp?: string | null | undefined) => import("../../types").TestIdsRecord<readonly ["control", "label", "info", "additional-info", "suggestion-accept", "suggestion-reject"]>;
 };
 export default _default;
 //# sourceMappingURL=TextArea.d.ts.map

package/lib/components/TextArea/TextArea.test-ids.d.ts

@@ -1,2 +1,2 @@
-export declare const getTextAreaTestIds: (testIdProp?: string | undefined) => import("../..").TestIdsRecord<readonly ["control", "label", "info", "additional-info", "suggestion-accept", "suggestion-reject"]>;
+export declare const getTextAreaTestIds: (testIdProp?: string | null | undefined) => import("../..").TestIdsRecord<readonly ["control", "label", "info", "additional-info", "suggestion-accept", "suggestion-reject"]>;
 //# sourceMappingURL=TextArea.test-ids.d.ts.map

package/lib/components/TextArea/TextArea.test-ids.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextArea.test-ids.d.ts","sourceRoot":"","sources":["../../../src/components/TextArea/TextArea.test-ids.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,kBAAkB,wKAAgE,CAAC"}
+{"version":3,"file":"TextArea.test-ids.d.ts","sourceRoot":"","sources":["../../../src/components/TextArea/TextArea.test-ids.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,kBAAkB,+KAAgE,CAAC"}

package/lib/components/Toaster/Toaster.d.ts

@@ -8,7 +8,7 @@ declare module '../../init' {
     }
 }
 declare const _default: FunctionComponent<ToasterProps> & {
-    getTestIds: (testIdProp?: string | undefined) => import("../..").TestIdsRecord<readonly ["toast"]>;
+    getTestIds: (testIdProp?: string | null | undefined) => import("../../types").TestIdsRecord<readonly ["toast"]>;
 };
 export default _default;
 //# sourceMappingURL=Toaster.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Toaster.d.ts","sourceRoot":"","sources":["../../../src/components/Toaster/Toaster.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EACV,iBAAiB,EAGjB,OAAO,EAIR,MAAM,OAAO,CAAC;AAWf,OAAO,YAAY,CAAC;AAEpB,OAAO,KAAK,EAAgB,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAElE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,WAAW,CAAC;AAoBrD,OAAO,QAAQ,YAAY,CAAC;IAC1B,UAAiB,aAAa;QAC5B,cAAc,CAAC,EAAE,OAAO,CAAC,mBAAmB,CAAC,CAAC;KAC/C;CACF;;;;AAuPD,wBAAuD"}
+{"version":3,"file":"Toaster.d.ts","sourceRoot":"","sources":["../../../src/components/Toaster/Toaster.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EACV,iBAAiB,EAGjB,OAAO,EAIR,MAAM,OAAO,CAAC;AA6Bf,OAAO,YAAY,CAAC;AAMpB,OAAO,KAAK,EAAgB,YAAY,EAAoC,MAAM,iBAAiB,CAAC;AAEpG,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,WAAW,CAAC;AA8BrD,OAAO,QAAQ,YAAY,CAAC;IAC1B,UAAiB,aAAa;QAC5B,cAAc,CAAC,EAAE,OAAO,CAAC,mBAAmB,CAAC,CAAC;KAC/C;CACF;;;;AAwWD,wBAAuD"}