@pega/cosmos-react-core 7.0.0-build.3.4 → 7.0.0-build.30.1

package/lib/components/SummaryList/SummaryList.js

@@ -17,10 +17,10 @@ import Button from '../Button';
 import ErrorState from '../ErrorState';
 import { StyledCardFooter } from '../Card/CardFooter';
 export const StyledSummaryListHeader = styled(CardHeader)(({ theme }) => css `
-      &:not(${StyledCard} ${StyledCard} > &) {
-        padding-block-end: calc(${theme.base.spacing} / 2);
-      }
-    `);
+    &:not(${StyledCard} ${StyledCard} > &) {
+      padding-block-end: calc(${theme.base.spacing} / 2);
+    }
+  `);
 StyledSummaryListHeader.defaultProps = defaultThemeProp;
 export const StyledSummaryListContent = styled(CardContent).withConfig(omitProps('loading'))(({ theme, loading }) => css `
     ${loading &&
@@ -42,12 +42,12 @@ export const StyledSummaryListContent = styled(CardContent).withConfig(omitProps
   `);
 StyledSummaryListContent.defaultProps = defaultThemeProp;
 export const StyledSummaryListItem = styled(SummaryItem)(({ theme }) => css `
-      padding-block: ${theme.base.spacing};
+    padding-block: ${theme.base.spacing};
 
-      &:not(:last-child) {
-        border-block-end: 0.0625rem solid ${theme.base.palette['border-line']};
-      }
-    `);
+    &:not(:last-child) {
+      border-block-end: 0.0625rem solid ${theme.base.palette['border-line']};
+    }
+  `);
 StyledSummaryListItem.defaultProps = defaultThemeProp;
 export const SummaryListItems = ({ name, items }) => {
     const t = useI18n();

package/lib/components/SummaryList/SummaryList.js.map

@@ -1 +1 @@
-{"version":3,"file":"SummaryList.js","sourceRoot":"","sources":["../../../src/components/SummaryList/SummaryList.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useMemo } from 'react';\nimport type { PropsWithoutRef, Ref, FC } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Actions from '../Actions';\nimport type { ActionsProps } from '../Actions';\nimport Flex from '../Flex';\nimport Text from '../Text';\nimport Count from '../Badges/Count';\nimport Icon from '../Icon';\nimport Card, { CardHeader, CardContent, CardFooter, StyledCard } from '../Card';\nimport EmptyState from '../EmptyState';\nimport type { EmptyStateProps } from '../EmptyState';\nimport type { ForwardProps, NoChildrenProp, OmitStrict, Action, HeadingTag } from '../../types';\nimport { omitProps } from '../../styles';\nimport { useI18n } from '../../hooks';\nimport { defaultThemeProp } from '../../theme';\nimport SummaryItem from '../SummaryItem';\nimport type { SummaryItemProps } from '../SummaryItem';\nimport Progress from '../Progress';\nimport Button from '../Button';\nimport ErrorState from '../ErrorState';\nimport type { ErrorStateProps } from '../ErrorState';\nimport { StyledCardFooter } from '../Card/CardFooter';\n\nexport interface SummaryListProps extends NoChildrenProp {\n  /** Name of the utility to be used as its heading along with associated actions and aria attributes. */\n  name?: string;\n  /**\n   * The heading tag to render the provided name as with.\n   * @default 'h2'\n   */\n  headingTag?: HeadingTag;\n  /** Identifier for the icon within Pega icons. */\n  icon?: string;\n  /** Integer representing the total count of items for a list utility dataset. */\n  count?: number;\n  /** Top level actions for the utility. If more than one action is passed a consolidated ActionMenu will be generated. */\n  actions?: Action[];\n  /** If the utility is in a state of fetching data. */\n  loading?: boolean | string;\n  /** An array of SummaryListItem objects to render. Pass an appropriately limited length array with a desired sort order based on design system defaults or config. */\n  items: SummaryListItem[];\n  /** User click initiated callback for when to show view all modal. List lengths less than the count prop will display a \"View all\" button with this function is bound to. */\n  onViewAll?: (callback: Function) => void;\n  /** A simple message to display when there are no items. */\n  noItemsText?: EmptyStateProps['message'];\n  /**\n   * Indicate an error occurred while acquiring data for the list.\n   * The default error state may be overridden with custom props.\n   */\n  error?: boolean | ErrorStateProps;\n  /** Ref for the SummaryList's root element. */\n  ref?: Ref<HTMLElement>;\n}\n\nexport interface SummaryListItem\n  extends OmitStrict<SummaryItemProps, 'actions'>,\n    Pick<ActionsProps, 'contextualLabel'>,\n    ForwardProps {\n  /** A unique id to represent the item. */\n  id: string;\n  /** A set of Actions to render alongside the item. If more than one action is passed a consolidated ActionMenu will be generated. */\n  actions?: Action[];\n}\n\nexport const StyledSummaryListHeader = styled(CardHeader)(\n  ({ theme }) =>\n    css`\n      &:not(${StyledCard} ${StyledCard} > &) {\n        padding-block-end: calc(${theme.base.spacing} / 2);\n      }\n    `\n);\n\nStyledSummaryListHeader.defaultProps = defaultThemeProp;\n\nexport const StyledSummaryListContent = styled(CardContent).withConfig<{ loading?: boolean }>(\n  omitProps('loading')\n)(\n  ({ theme, loading }) => css`\n    ${loading &&\n    css`\n      min-height: 4rem;\n    `}\n\n    &:not(:last-child) > ul > li:last-child {\n      border-block-end: 0.0625rem solid ${theme.base.palette['border-line']};\n    }\n\n    &:not(${StyledCard} ${StyledCard} > &) {\n      padding-block-end: calc(${theme.base.spacing} / 2);\n\n      & + ${StyledCardFooter} {\n        padding-block-start: ${theme.base.spacing};\n      }\n    }\n  `\n);\n\nStyledSummaryListContent.defaultProps = defaultThemeProp;\n\nexport const StyledSummaryListItem: typeof SummaryItem = styled(SummaryItem)(\n  ({ theme }) =>\n    css`\n      padding-block: ${theme.base.spacing};\n\n      &:not(:last-child) {\n        border-block-end: 0.0625rem solid ${theme.base.palette['border-line']};\n      }\n    `\n);\n\nStyledSummaryListItem.defaultProps = defaultThemeProp;\n\nexport const SummaryListItems = ({ name, items }: Pick<SummaryListProps, 'items' | 'name'>) => {\n  const t = useI18n();\n  return (\n    <ul>\n      {items.map(({ id, actions: itemActions, contextualLabel, ...restItemProps }) => {\n        return (\n          <StyledSummaryListItem\n            key={id}\n            {...restItemProps}\n            forwardedAs='li'\n            actions={\n              itemActions && (\n                <Actions\n                  items={itemActions}\n                  contextualLabel={\n                    name && contextualLabel\n                      ? t('action_from_summarylist_heading', [contextualLabel, name])\n                      : contextualLabel\n                  }\n                />\n              )\n            }\n          />\n        );\n      })}\n    </ul>\n  );\n};\n\nconst SummaryList: FC<SummaryListProps & ForwardProps> = forwardRef(function SummaryList(\n  {\n    icon,\n    name,\n    headingTag = 'h2',\n    count,\n    actions,\n    items,\n    onViewAll,\n    loading,\n    noItemsText,\n    error,\n    ...restProps\n  }: PropsWithoutRef<SummaryListProps>,\n  ref: SummaryListProps['ref']\n) {\n  const t = useI18n();\n\n  const content = useMemo(() => {\n    if (loading) {\n      return (\n        <Progress placement='local' message={typeof loading === 'string' ? loading : undefined} />\n      );\n    }\n\n    if (error) {\n      return <ErrorState {...(error === true ? {} : error)} />;\n    }\n\n    return items.length > 0 ? (\n      <SummaryListItems name={name} items={items} />\n    ) : (\n      <EmptyState message={noItemsText} />\n    );\n  }, [loading, items, noItemsText, error]);\n\n  return (\n    <Card ref={ref} {...restProps}>\n      {(icon || name || typeof count === 'number' || actions) && (\n        <StyledSummaryListHeader>\n          <Flex container={{ alignItems: 'center', gap: 1 }}>\n            {icon && <Icon name={icon} />}\n            {name && <Text variant={headingTag}>{name}</Text>}\n            {typeof count === 'number' && <Count>{count}</Count>}\n          </Flex>\n          {actions && <Actions items={actions} contextualLabel={name} />}\n        </StyledSummaryListHeader>\n      )}\n\n      <StyledSummaryListContent loading={loading}>{content}</StyledSummaryListContent>\n\n      {!error && typeof count === 'number' && count > items.length && onViewAll && (\n        <CardFooter justify='center'>\n          <Button\n            variant='link'\n            aria-label={name ? t('view_all_noun', [name.toLowerCase()]) : t('view_all')}\n            onClick={onViewAll}\n          >\n            {t('view_all')}\n          </Button>\n        </CardFooter>\n      )}\n    </Card>\n  );\n});\n\nexport default SummaryList;\n"]}
+{"version":3,"file":"SummaryList.js","sourceRoot":"","sources":["../../../src/components/SummaryList/SummaryList.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useMemo } from 'react';\nimport type { PropsWithoutRef, Ref, FC } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Actions from '../Actions';\nimport type { ActionsProps } from '../Actions';\nimport Flex from '../Flex';\nimport Text from '../Text';\nimport Count from '../Badges/Count';\nimport Icon from '../Icon';\nimport Card, { CardHeader, CardContent, CardFooter, StyledCard } from '../Card';\nimport EmptyState from '../EmptyState';\nimport type { EmptyStateProps } from '../EmptyState';\nimport type { ForwardProps, NoChildrenProp, OmitStrict, Action, HeadingTag } from '../../types';\nimport { omitProps } from '../../styles';\nimport { useI18n } from '../../hooks';\nimport { defaultThemeProp } from '../../theme';\nimport SummaryItem from '../SummaryItem';\nimport type { SummaryItemProps } from '../SummaryItem';\nimport Progress from '../Progress';\nimport Button from '../Button';\nimport ErrorState from '../ErrorState';\nimport type { ErrorStateProps } from '../ErrorState';\nimport { StyledCardFooter } from '../Card/CardFooter';\n\nexport interface SummaryListProps extends NoChildrenProp {\n  /** Name of the utility to be used as its heading along with associated actions and aria attributes. */\n  name?: string;\n  /**\n   * The heading tag to render the provided name as with.\n   * @default 'h2'\n   */\n  headingTag?: HeadingTag;\n  /** Identifier for the icon within Pega icons. */\n  icon?: string;\n  /** Integer representing the total count of items for a list utility dataset. */\n  count?: number;\n  /** Top level actions for the utility. If more than one action is passed a consolidated ActionMenu will be generated. */\n  actions?: Action[];\n  /** If the utility is in a state of fetching data. */\n  loading?: boolean | string;\n  /** An array of SummaryListItem objects to render. Pass an appropriately limited length array with a desired sort order based on design system defaults or config. */\n  items: SummaryListItem[];\n  /** User click initiated callback for when to show view all modal. List lengths less than the count prop will display a \"View all\" button with this function is bound to. */\n  onViewAll?: (callback: Function) => void;\n  /** A simple message to display when there are no items. */\n  noItemsText?: EmptyStateProps['message'];\n  /**\n   * Indicate an error occurred while acquiring data for the list.\n   * The default error state may be overridden with custom props.\n   */\n  error?: boolean | ErrorStateProps;\n  /** Ref for the SummaryList's root element. */\n  ref?: Ref<HTMLElement>;\n}\n\nexport interface SummaryListItem\n  extends OmitStrict<SummaryItemProps, 'actions'>,\n    Pick<ActionsProps, 'contextualLabel'>,\n    ForwardProps {\n  /** A unique id to represent the item. */\n  id: string;\n  /** A set of Actions to render alongside the item. If more than one action is passed a consolidated ActionMenu will be generated. */\n  actions?: Action[];\n}\n\nexport const StyledSummaryListHeader = styled(CardHeader)(\n  ({ theme }) => css`\n    &:not(${StyledCard} ${StyledCard} > &) {\n      padding-block-end: calc(${theme.base.spacing} / 2);\n    }\n  `\n);\n\nStyledSummaryListHeader.defaultProps = defaultThemeProp;\n\nexport const StyledSummaryListContent = styled(CardContent).withConfig<{ loading?: boolean }>(\n  omitProps('loading')\n)(\n  ({ theme, loading }) => css`\n    ${loading &&\n    css`\n      min-height: 4rem;\n    `}\n\n    &:not(:last-child) > ul > li:last-child {\n      border-block-end: 0.0625rem solid ${theme.base.palette['border-line']};\n    }\n\n    &:not(${StyledCard} ${StyledCard} > &) {\n      padding-block-end: calc(${theme.base.spacing} / 2);\n\n      & + ${StyledCardFooter} {\n        padding-block-start: ${theme.base.spacing};\n      }\n    }\n  `\n);\n\nStyledSummaryListContent.defaultProps = defaultThemeProp;\n\nexport const StyledSummaryListItem: typeof SummaryItem = styled(SummaryItem)(\n  ({ theme }) => css`\n    padding-block: ${theme.base.spacing};\n\n    &:not(:last-child) {\n      border-block-end: 0.0625rem solid ${theme.base.palette['border-line']};\n    }\n  `\n);\n\nStyledSummaryListItem.defaultProps = defaultThemeProp;\n\nexport const SummaryListItems = ({ name, items }: Pick<SummaryListProps, 'items' | 'name'>) => {\n  const t = useI18n();\n  return (\n    <ul>\n      {items.map(({ id, actions: itemActions, contextualLabel, ...restItemProps }) => {\n        return (\n          <StyledSummaryListItem\n            key={id}\n            {...restItemProps}\n            forwardedAs='li'\n            actions={\n              itemActions && (\n                <Actions\n                  items={itemActions}\n                  contextualLabel={\n                    name && contextualLabel\n                      ? t('action_from_summarylist_heading', [contextualLabel, name])\n                      : contextualLabel\n                  }\n                />\n              )\n            }\n          />\n        );\n      })}\n    </ul>\n  );\n};\n\nconst SummaryList: FC<SummaryListProps & ForwardProps> = forwardRef(function SummaryList(\n  {\n    icon,\n    name,\n    headingTag = 'h2',\n    count,\n    actions,\n    items,\n    onViewAll,\n    loading,\n    noItemsText,\n    error,\n    ...restProps\n  }: PropsWithoutRef<SummaryListProps>,\n  ref: SummaryListProps['ref']\n) {\n  const t = useI18n();\n\n  const content = useMemo(() => {\n    if (loading) {\n      return (\n        <Progress placement='local' message={typeof loading === 'string' ? loading : undefined} />\n      );\n    }\n\n    if (error) {\n      return <ErrorState {...(error === true ? {} : error)} />;\n    }\n\n    return items.length > 0 ? (\n      <SummaryListItems name={name} items={items} />\n    ) : (\n      <EmptyState message={noItemsText} />\n    );\n  }, [loading, items, noItemsText, error]);\n\n  return (\n    <Card ref={ref} {...restProps}>\n      {(icon || name || typeof count === 'number' || actions) && (\n        <StyledSummaryListHeader>\n          <Flex container={{ alignItems: 'center', gap: 1 }}>\n            {icon && <Icon name={icon} />}\n            {name && <Text variant={headingTag}>{name}</Text>}\n            {typeof count === 'number' && <Count>{count}</Count>}\n          </Flex>\n          {actions && <Actions items={actions} contextualLabel={name} />}\n        </StyledSummaryListHeader>\n      )}\n\n      <StyledSummaryListContent loading={loading}>{content}</StyledSummaryListContent>\n\n      {!error && typeof count === 'number' && count > items.length && onViewAll && (\n        <CardFooter justify='center'>\n          <Button\n            variant='link'\n            aria-label={name ? t('view_all_noun', [name.toLowerCase()]) : t('view_all')}\n            onClick={onViewAll}\n          >\n            {t('view_all')}\n          </Button>\n        </CardFooter>\n      )}\n    </Card>\n  );\n});\n\nexport default SummaryList;\n"]}

package/lib/components/Switch/Switch.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
-import { hideVisually, readableColor } from 'polished';
+import { hideVisually } from 'polished';
 import { defaultThemeProp } from '../../theme';
 import { useDirection, useUID } from '../../hooks';
 import Flex from '../Flex';
-import { getHoverColors } from '../../styles';
+import { getHoverColors, readableColor } from '../../styles';
 import Icon, { StyledIcon, registerIcon } from '../Icon';
 import * as checkIcon from '../Icon/icons/check.icon';
 import { tryCatch } from '../../utils';

package/lib/components/Switch/Switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.js","sourceRoot":"","sources":["../../../src/components/Switch/Switch.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef } from 'react';\nimport type { ChangeEvent, FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\nimport { hideVisually, readableColor } from 'polished';\n\nimport type { BaseProps, ForwardProps, NoChildrenProp } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport type { FormControlProps } from '../FormControl';\nimport { useDirection, useUID } from '../../hooks';\nimport Flex from '../Flex';\nimport { getHoverColors } from '../../styles';\nimport Icon, { StyledIcon, registerIcon } from '../Icon';\nimport * as checkIcon from '../Icon/icons/check.icon';\nimport { tryCatch } from '../../utils';\n\nregisterIcon(checkIcon);\n\nexport interface SwitchProps extends BaseProps, NoChildrenProp {\n  /**\n   * Sets DOM id for the control and associates label element via 'for' attribute.\n   * If an id is not pass, a random id will be generated for any render.\n   */\n  id?: FormControlProps['id'];\n  /** Pass a string or a fragment with an Icon and string. */\n  label?: FormControlProps['label'];\n  /**\n   * Disables the control.\n   * @default false\n   */\n  disabled?: FormControlProps['disabled'];\n  /**\n   * Sets checked prop via onChange.\n   * @default false\n   */\n  on?: boolean;\n  /** Callback that is triggered when the Switch is toggled. */\n  onChange?: (e: ChangeEvent<HTMLInputElement>) => void;\n  /** Ref for the input element. */\n  ref?: Ref<HTMLInputElement>;\n}\n\nexport const SwitchLabel = styled.label(\n  ({\n    theme: {\n      base,\n      components: {\n        switch: { width, height, 'touch-width': touchWidth, 'touch-height': touchHeight, off }\n      }\n    }\n  }) => {\n    return css`\n      position: relative;\n      cursor: pointer;\n      padding-inline-end: calc(${width} + 0.5rem);\n      height: ${height};\n      width: 100%;\n\n      @media (pointer: coarse) {\n        padding-inline-end: calc(${touchWidth} + 0.5rem);\n        height: ${touchHeight};\n      }\n\n      /** Checkmark */\n      & > ${StyledIcon} {\n        position: absolute;\n        inset-inline-end: calc(0.5 * ${width} + 0.25rem);\n        height: calc(0.5 * ${height});\n        width: calc(0.5 * ${height});\n\n        @media (pointer: coarse) {\n          inset-inline-end: calc(0.5 * ${touchWidth} + 0.25rem);\n          height: calc(0.5 * ${touchHeight});\n          width: calc(0.5 * ${touchHeight});\n        }\n      }\n\n      /** Track */\n      &::before {\n        position: absolute;\n        content: '';\n        inset-inline-end: 0;\n        width: ${width};\n        height: ${height};\n        background-color: ${off.color};\n        transition: background-color calc(0.5 * ${base.animation.speed})\n          ${base.animation.timing.ease};\n        border-radius: calc(9999 * ${base['border-radius']});\n\n        @media (pointer: coarse) {\n          width: ${touchWidth};\n          height: ${touchHeight};\n        }\n      }\n\n      /** Switch */\n      &::after {\n        position: absolute;\n        content: '';\n        inset-inline-end: calc(${width} - ${height} + 0.0625rem);\n        height: calc(${height} - 0.125rem);\n        width: calc(${height} - 0.125rem);\n        background-color: ${base.palette['primary-background']};\n        transition: transform calc(0.5 * ${base.animation.speed}) ${base.animation.timing.ease};\n        border-radius: calc(9999 * ${base['border-radius']});\n\n        @media (pointer: coarse) {\n          inset-inline-end: calc(${touchWidth} - ${touchHeight} + 0.0625rem);\n          height: calc(${touchHeight} - 0.125rem);\n          width: calc(${touchHeight} - 0.125rem);\n        }\n      }\n    `;\n  }\n);\n\nSwitchLabel.defaultProps = defaultThemeProp;\n\nexport const SwitchInput = styled.input(\n  ({\n    theme: {\n      base,\n      components: {\n        'form-control': {\n          ':focus': { 'box-shadow': shadow }\n        },\n        switch: { height, width, 'touch-height': touchHeight, 'touch-width': touchWidth, on, off }\n      }\n    }\n  }) => {\n    const { ltr } = useDirection();\n\n    const checkmarkColor = tryCatch(() => readableColor(on.color));\n\n    const onHoverColors = getHoverColors(on.color);\n    const offHoverColors = getHoverColors(off.color);\n\n    return css`\n      ${hideVisually}\n\n      & + ${SwitchLabel} {\n        min-height: ${base['hit-area']['mouse-min']};\n        @media (pointer: coarse) {\n          min-height: ${base['hit-area']['finger-min']};\n        }\n      }\n\n      & + ${SwitchLabel} > ${StyledIcon} {\n        color: ${checkmarkColor};\n      }\n\n      &:checked + ${SwitchLabel}::before {\n        background-color: ${on.color};\n      }\n\n      &:checked + ${SwitchLabel}::after {\n        transform: translateX(calc((${width} - ${height}) * ${ltr ? '1' : '-1'}));\n\n        @media (pointer: coarse) {\n          transform: translateX(calc((${touchWidth} - ${touchHeight}) * ${ltr ? '1' : '-1'}));\n        }\n      }\n\n      &:hover + ${SwitchLabel} > ${StyledIcon} {\n        color: ${onHoverColors.foreground};\n      }\n\n      &:hover:checked + ${SwitchLabel}::before {\n        background-color: ${onHoverColors.background};\n      }\n\n      &:hover + ${SwitchLabel}::before {\n        background-color: ${offHoverColors.background};\n      }\n\n      &:focus + ${SwitchLabel}::before {\n        box-shadow: ${shadow};\n      }\n\n      &:disabled + ${SwitchLabel} {\n        opacity: ${base['disabled-opacity']};\n      }\n    `;\n  }\n);\n\nSwitchInput.defaultProps = defaultThemeProp;\n\nexport const StyledSwitch = styled.div``;\n\nconst Switch: FunctionComponent<SwitchProps & ForwardProps> = forwardRef(function Switch(\n  props: PropsWithoutRef<SwitchProps>,\n  ref: SwitchProps['ref']\n) {\n  const uid = useUID();\n  const { id = uid, label, disabled = false, on = false, onChange, ...restProps } = props;\n\n  return (\n    <StyledSwitch>\n      <SwitchInput\n        {...restProps}\n        id={id}\n        type='checkbox'\n        role='switch'\n        checked={on}\n        aria-checked={on}\n        disabled={disabled}\n        onChange={onChange}\n        ref={ref}\n      />\n      <Flex container={{ alignItems: 'center' }} as={SwitchLabel} htmlFor={id}>\n        {label}\n        {on && <Icon name='check' />}\n      </Flex>\n    </StyledSwitch>\n  );\n});\n\nexport default Switch;\n"]}
+{"version":3,"file":"Switch.js","sourceRoot":"","sources":["../../../src/components/Switch/Switch.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef } from 'react';\nimport type { ChangeEvent, FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\nimport { hideVisually } from 'polished';\n\nimport type { BaseProps, ForwardProps, NoChildrenProp } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport type { FormControlProps } from '../FormControl';\nimport { useDirection, useUID } from '../../hooks';\nimport Flex from '../Flex';\nimport { getHoverColors, readableColor } from '../../styles';\nimport Icon, { StyledIcon, registerIcon } from '../Icon';\nimport * as checkIcon from '../Icon/icons/check.icon';\nimport { tryCatch } from '../../utils';\n\nregisterIcon(checkIcon);\n\nexport interface SwitchProps extends BaseProps, NoChildrenProp {\n  /**\n   * Sets DOM id for the control and associates label element via 'for' attribute.\n   * If an id is not pass, a random id will be generated for any render.\n   */\n  id?: FormControlProps['id'];\n  /** Pass a string or a fragment with an Icon and string. */\n  label?: FormControlProps['label'];\n  /**\n   * Disables the control.\n   * @default false\n   */\n  disabled?: FormControlProps['disabled'];\n  /**\n   * Sets checked prop via onChange.\n   * @default false\n   */\n  on?: boolean;\n  /** Callback that is triggered when the Switch is toggled. */\n  onChange?: (e: ChangeEvent<HTMLInputElement>) => void;\n  /** Ref for the input element. */\n  ref?: Ref<HTMLInputElement>;\n}\n\nexport const SwitchLabel = styled.label(\n  ({\n    theme: {\n      base,\n      components: {\n        switch: { width, height, 'touch-width': touchWidth, 'touch-height': touchHeight, off }\n      }\n    }\n  }) => {\n    return css`\n      position: relative;\n      cursor: pointer;\n      padding-inline-end: calc(${width} + 0.5rem);\n      height: ${height};\n      width: 100%;\n\n      @media (pointer: coarse) {\n        padding-inline-end: calc(${touchWidth} + 0.5rem);\n        height: ${touchHeight};\n      }\n\n      /** Checkmark */\n      & > ${StyledIcon} {\n        position: absolute;\n        inset-inline-end: calc(0.5 * ${width} + 0.25rem);\n        height: calc(0.5 * ${height});\n        width: calc(0.5 * ${height});\n\n        @media (pointer: coarse) {\n          inset-inline-end: calc(0.5 * ${touchWidth} + 0.25rem);\n          height: calc(0.5 * ${touchHeight});\n          width: calc(0.5 * ${touchHeight});\n        }\n      }\n\n      /** Track */\n      &::before {\n        position: absolute;\n        content: '';\n        inset-inline-end: 0;\n        width: ${width};\n        height: ${height};\n        background-color: ${off.color};\n        transition: background-color calc(0.5 * ${base.animation.speed})\n          ${base.animation.timing.ease};\n        border-radius: calc(9999 * ${base['border-radius']});\n\n        @media (pointer: coarse) {\n          width: ${touchWidth};\n          height: ${touchHeight};\n        }\n      }\n\n      /** Switch */\n      &::after {\n        position: absolute;\n        content: '';\n        inset-inline-end: calc(${width} - ${height} + 0.0625rem);\n        height: calc(${height} - 0.125rem);\n        width: calc(${height} - 0.125rem);\n        background-color: ${base.palette['primary-background']};\n        transition: transform calc(0.5 * ${base.animation.speed}) ${base.animation.timing.ease};\n        border-radius: calc(9999 * ${base['border-radius']});\n\n        @media (pointer: coarse) {\n          inset-inline-end: calc(${touchWidth} - ${touchHeight} + 0.0625rem);\n          height: calc(${touchHeight} - 0.125rem);\n          width: calc(${touchHeight} - 0.125rem);\n        }\n      }\n    `;\n  }\n);\n\nSwitchLabel.defaultProps = defaultThemeProp;\n\nexport const SwitchInput = styled.input(\n  ({\n    theme: {\n      base,\n      components: {\n        'form-control': {\n          ':focus': { 'box-shadow': shadow }\n        },\n        switch: { height, width, 'touch-height': touchHeight, 'touch-width': touchWidth, on, off }\n      }\n    }\n  }) => {\n    const { ltr } = useDirection();\n\n    const checkmarkColor = tryCatch(() => readableColor(on.color));\n\n    const onHoverColors = getHoverColors(on.color);\n    const offHoverColors = getHoverColors(off.color);\n\n    return css`\n      ${hideVisually}\n\n      & + ${SwitchLabel} {\n        min-height: ${base['hit-area']['mouse-min']};\n        @media (pointer: coarse) {\n          min-height: ${base['hit-area']['finger-min']};\n        }\n      }\n\n      & + ${SwitchLabel} > ${StyledIcon} {\n        color: ${checkmarkColor};\n      }\n\n      &:checked + ${SwitchLabel}::before {\n        background-color: ${on.color};\n      }\n\n      &:checked + ${SwitchLabel}::after {\n        transform: translateX(calc((${width} - ${height}) * ${ltr ? '1' : '-1'}));\n\n        @media (pointer: coarse) {\n          transform: translateX(calc((${touchWidth} - ${touchHeight}) * ${ltr ? '1' : '-1'}));\n        }\n      }\n\n      &:hover + ${SwitchLabel} > ${StyledIcon} {\n        color: ${onHoverColors.foreground};\n      }\n\n      &:hover:checked + ${SwitchLabel}::before {\n        background-color: ${onHoverColors.background};\n      }\n\n      &:hover + ${SwitchLabel}::before {\n        background-color: ${offHoverColors.background};\n      }\n\n      &:focus + ${SwitchLabel}::before {\n        box-shadow: ${shadow};\n      }\n\n      &:disabled + ${SwitchLabel} {\n        opacity: ${base['disabled-opacity']};\n      }\n    `;\n  }\n);\n\nSwitchInput.defaultProps = defaultThemeProp;\n\nexport const StyledSwitch = styled.div``;\n\nconst Switch: FunctionComponent<SwitchProps & ForwardProps> = forwardRef(function Switch(\n  props: PropsWithoutRef<SwitchProps>,\n  ref: SwitchProps['ref']\n) {\n  const uid = useUID();\n  const { id = uid, label, disabled = false, on = false, onChange, ...restProps } = props;\n\n  return (\n    <StyledSwitch>\n      <SwitchInput\n        {...restProps}\n        id={id}\n        type='checkbox'\n        role='switch'\n        checked={on}\n        aria-checked={on}\n        disabled={disabled}\n        onChange={onChange}\n        ref={ref}\n      />\n      <Flex container={{ alignItems: 'center' }} as={SwitchLabel} htmlFor={id}>\n        {label}\n        {on && <Icon name='check' />}\n      </Flex>\n    </StyledSwitch>\n  );\n});\n\nexport default Switch;\n"]}

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

@@ -1,7 +1,7 @@
-import type { FC, ReactNode } from 'react';
+import type { FC, ReactNode, Ref } from 'react';
 import type { ForwardProps } from '../../types';
 import type { TabsProps } from './Tabs.types';
-interface TabProps {
+export interface TabProps {
     /** Indicates if this Tab is active. */
     selected: boolean;
     /** The text to display as the name of the Tab. */
@@ -14,12 +14,16 @@ interface TabProps {
     disabled?: boolean;
     /** An error to associate with the Tab. */
     errors?: number | boolean;
+    /** Ref to the tab element. */
+    ref?: Ref<HTMLButtonElement | HTMLAnchorElement>;
 }
 export interface StyledTabProps {
     selected: TabProps['selected'];
     tabType: TabProps['type'];
 }
-export declare const StyledTab: import("styled-components").StyledComponent<import("react").FunctionComponent<import("../Button/BareButton").BareButtonProps & ForwardProps>, import("styled-components").DefaultTheme, StyledTabProps, never>;
+export declare const StyledTab: import("styled-components").StyledComponent<import("react").FunctionComponent<import("../Button/BareButton").BareButtonProps & ForwardProps>, import("styled-components").DefaultTheme, StyledTabProps & {
+    level?: number | undefined;
+}, never>;
 declare const Tab: FC<TabProps & ForwardProps>;
 export default Tab;
 //# sourceMappingURL=Tab.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Tab.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/Tab.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAE,SAAS,EAAwB,MAAM,OAAO,CAAC;AAYjE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAGhD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAI9C,UAAU,QAAQ;IAChB,uCAAuC;IACvC,QAAQ,EAAE,OAAO,CAAC;IAClB,kDAAkD;IAClD,OAAO,EAAE,MAAM,CAAC;IAChB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,6DAA6D;IAC7D,IAAI,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IACxB,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0CAA0C;IAC1C,MAAM,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CAC3B;AAED,MAAM,WAAW,cAAc;IAC7B,QAAQ,EAAE,QAAQ,CAAC,UAAU,CAAC,CAAC;IAC/B,OAAO,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC;CAC3B;AAoID,eAAO,MAAM,SAAS,gNAiCrB,CAAC;AAIF,QAAA,MAAM,GAAG,EAAE,EAAE,CAAC,QAAQ,GAAG,YAAY,CAwBnC,CAAC;AAEH,eAAe,GAAG,CAAC"}
+{"version":3,"file":"Tab.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/Tab.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAE,SAAS,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAajE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAKhD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAK9C,MAAM,WAAW,QAAQ;IACvB,uCAAuC;IACvC,QAAQ,EAAE,OAAO,CAAC;IAClB,kDAAkD;IAClD,OAAO,EAAE,MAAM,CAAC;IAChB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,6DAA6D;IAC7D,IAAI,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IACxB,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0CAA0C;IAC1C,MAAM,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC1B,8BAA8B;IAC9B,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,CAAC;CAClD;AAED,MAAM,WAAW,cAAc;IAC7B,QAAQ,EAAE,QAAQ,CAAC,UAAU,CAAC,CAAC;IAC/B,OAAO,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC;CAC3B;AAkMD,eAAO,MAAM,SAAS;;SAqCrB,CAAC;AAIF,QAAA,MAAM,GAAG,EAAE,EAAE,CAAC,QAAQ,GAAG,YAAY,CAgCnC,CAAC;AAEH,eAAe,GAAG,CAAC"}

package/lib/components/Tabs/Tab.js

@@ -1,15 +1,18 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef } from 'react';
+import { forwardRef, useContext } from 'react';
 import styled, { css } from 'styled-components';
-import { transparentize } from 'polished';
+import { meetsContrastGuidelines, mix, transparentize } from 'polished';
+import { readableHue } from '../../styles';
 import * as warnSolidIcon from '../Icon/icons/warn-solid.icon';
-import Icon, { registerIcon } from '../Icon';
+import { registerIcon } from '../Icon';
 import { useConsolidatedRef, useElement, useI18n } from '../../hooks';
 import Tooltip from '../Tooltip';
 import { defaultThemeProp } from '../../theme';
 import { tryCatch } from '../../utils';
 import { StyledCount } from '../Badges/Count';
 import BareButton from '../Button/BareButton';
+import TabsContext from './TabsContext';
+import { StyledErrorIcon } from './Tabs.styles';
 registerIcon(warnSolidIcon);
 const activeStyle = (color) => css `
   ::after {
@@ -17,25 +20,49 @@ const activeStyle = (color) => css `
     background-color: ${color};
   }
 `;
-const StyledErrorIcon = styled(Icon)(({ theme }) => css `
-    color: ${theme.base.palette.urgent};
-  `);
-StyledErrorIcon.defaultProps = defaultThemeProp;
-const getHorizontalStyles = ({ selected, theme }) => {
-    const primaryColor = theme.base.palette.interactive;
-    const lightenedColor = tryCatch(() => transparentize(0.3, primaryColor)) ?? '';
+const getHorizontalUnselectedHoverStyle = ({ level, opacity, color }) => level && level > 1
+    ? css `
+        ::before {
+          content: '';
+          position: absolute;
+          top: 0;
+          bottom: 0;
+          left: 0;
+          right: 0;
+          border-radius: inherit;
+          background-color: currentColor;
+          opacity: ${opacity};
+        }
+      `
+    : css `
+        background-color: ${color};
+        border-start-start-radius: calc(0.5rem * 0.5);
+        border-start-end-radius: calc(0.5rem * 0.5);
+      `;
+const getHorizontalStyles = ({ selected, level, theme }) => {
+    const color = theme.components.button.color;
+    const secondaryColor = theme.base.palette['secondary-background'];
+    const lightenedColor = tryCatch(() => transparentize(0.3, color)) ?? '';
+    const backgroundUsable = meetsContrastGuidelines(color, secondaryColor).AA;
+    const usableColor = backgroundUsable ? color : readableHue(color, secondaryColor);
+    const hoverBackgroundColor = tryCatch(() => mix(0.9, secondaryColor, usableColor));
+    const activeBackgroundColor = tryCatch(() => mix(0.8, secondaryColor, usableColor));
     const { spacing } = theme.base;
     return css `
     align-items: center;
     display: flex;
     flex-direction: row;
     height: calc(4 * ${spacing});
-    padding: 0 calc(2 * ${spacing});
+    padding: 0 calc(1.5 * ${spacing});
     border: none;
     text-decoration: none;
 
+    @media (pointer: coarse) {
+      height: ${theme.base['hit-area']['finger-min']};
+    }
+
     span:first-of-type {
-      color: ${selected ? primaryColor : theme.base.palette['foreground-color']};
+      color: ${selected ? color : theme.base.palette['foreground-color']};
       display: inline-block;
 
       ::before {
@@ -53,26 +80,58 @@ const getHorizontalStyles = ({ selected, theme }) => {
     }
 
     ::after {
-      background: ${selected ? primaryColor : lightenedColor};
+      background: ${selected ? color : lightenedColor};
       display: ${selected ? 'block' : 'none'};
       content: '';
       position: absolute;
       height: 0.125rem;
       bottom: 0;
-      left: 0;
-      right: 0;
+      left: calc(1.5 * ${spacing});
+      right: calc(1.5 * ${spacing});
     }
 
-    &:hover&:not(:disabled) {
-      ${activeStyle(lightenedColor)}
-      text-decoration: none;
-    }
+    ${!selected
+        ? css `
+          @media (hover: hover) {
+            &:not(:disabled):hover {
+              text-decoration: none;
+              ${getHorizontalUnselectedHoverStyle({
+            level,
+            opacity: 0.1,
+            color: hoverBackgroundColor
+        })}
+            }
+
+            &:not(:disabled):active {
+              text-decoration: none;
+              ${getHorizontalUnselectedHoverStyle({
+            level,
+            opacity: 0.2,
+            color: activeBackgroundColor
+        })}
+            }
+          }
+        `
+        : css `
+          ${level &&
+            level > 1 &&
+            css `
+            background-color: ${theme.base.palette['primary-background']};
+          `}
+        `}
 
     &:focus,
     &:not([disabled]):focus {
-      ${activeStyle(lightenedColor)}
+      border-radius: calc(0.5rem * 0.5);
       box-shadow: ${theme.base.shadow['focus-inset']};
       text-decoration: none;
+      ::after {
+        display: none;
+      }
+    }
+
+    @media (pointer: coarse) {
+      min-block-size: ${theme.base['hit-area'].finger};
     }
 
     ${StyledCount} {
@@ -126,7 +185,7 @@ const getVerticalStyles = ({ selected, theme }) => {
     }
   `;
 };
-export const StyledTab = styled(BareButton)(({ theme, tabType, selected }) => css `
+export const StyledTab = styled(BareButton)(({ theme, tabType, selected, level }) => css `
     position: relative;
     background: none;
     cursor: pointer;
@@ -151,7 +210,7 @@ export const StyledTab = styled(BareButton)(({ theme, tabType, selected }) => cs
     }
 
     ${tabType === 'horizontal'
-    ? getHorizontalStyles({ theme, selected })
+    ? getHorizontalStyles({ theme, selected, level })
     : getVerticalStyles({ theme, selected })}
 
     ${StyledErrorIcon} {
@@ -163,7 +222,8 @@ const Tab = forwardRef(function Tab({ selected, content, count, type, disabled,
     const t = useI18n();
     const [tabEl, setTabEl] = useElement();
     const tabRef = useConsolidatedRef(ref, setTabEl);
-    return (_jsxs(StyledTab, { ref: tabRef, selected: selected, tabType: type, disabled: disabled, ...restProps, children: [_jsxs("span", { children: [!!errors && (_jsxs(_Fragment, { children: [_jsx(StyledErrorIcon, { name: 'warn-solid' }), _jsx(Tooltip, { target: tabEl, hideDelay: 'none', showDelay: 'none', children: t('tab_error_tooltip', [content]) })] })), _jsx("span", { "data-content": content, children: content })] }), count] }));
+    const { level } = useContext(TabsContext);
+    return (_jsxs(StyledTab, { ref: tabRef, selected: selected, tabType: type, disabled: disabled, level: level, ...restProps, children: [_jsxs("span", { children: [!!errors && (_jsxs(_Fragment, { children: [_jsx(StyledErrorIcon, { name: 'warn-solid' }), _jsx(Tooltip, { target: tabEl, hideDelay: 'none', showDelay: 'none', children: t('tab_error_tooltip', [content]) })] })), _jsx("span", { "data-content": content, children: content })] }), count] }));
 });
 export default Tab;
 //# sourceMappingURL=Tab.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Tab.js","sourceRoot":"","sources":["../../../src/components/Tabs/Tab.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef } from 'react';\nimport type { FC, ReactNode, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\nimport type { StyledProps } from 'styled-components';\nimport { transparentize } from 'polished';\n\nimport * as warnSolidIcon from '../Icon/icons/warn-solid.icon';\nimport Icon, { registerIcon } from '../Icon';\nimport { useConsolidatedRef, useElement, useI18n } from '../../hooks';\nimport Tooltip from '../Tooltip';\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch } from '../../utils';\nimport { StyledCount } from '../Badges/Count';\nimport type { ForwardProps } from '../../types';\nimport BareButton from '../Button/BareButton';\n\nimport type { TabsProps } from './Tabs.types';\n\nregisterIcon(warnSolidIcon);\n\ninterface TabProps {\n  /** Indicates if this Tab is active. */\n  selected: boolean;\n  /** The text to display as the name of the Tab. */\n  content: string;\n  /** A number to associate with the Tab. */\n  count?: ReactNode;\n  /** Determines the direction in which the Tab will render. */\n  type: TabsProps['type'];\n  /** Disables the tab if true */\n  disabled?: boolean;\n  /** An error to associate with the Tab. */\n  errors?: number | boolean;\n}\n\nexport interface StyledTabProps {\n  selected: TabProps['selected'];\n  tabType: TabProps['type'];\n}\n\nconst activeStyle = (color: string) => css`\n  ::after {\n    display: block;\n    background-color: ${color};\n  }\n`;\n\nconst StyledErrorIcon = styled(Icon)(\n  ({ theme }) => css`\n    color: ${theme.base.palette.urgent};\n  `\n);\n\nStyledErrorIcon.defaultProps = defaultThemeProp;\n\nconst getHorizontalStyles = ({\n  selected,\n  theme\n}: Pick<StyledProps<StyledTabProps>, 'theme' | 'selected'>) => {\n  const primaryColor = theme.base.palette.interactive;\n  const lightenedColor = tryCatch(() => transparentize(0.3, primaryColor)) ?? '';\n  const { spacing } = theme.base;\n\n  return css`\n    align-items: center;\n    display: flex;\n    flex-direction: row;\n    height: calc(4 * ${spacing});\n    padding: 0 calc(2 * ${spacing});\n    border: none;\n    text-decoration: none;\n\n    span:first-of-type {\n      color: ${selected ? primaryColor : theme.base.palette['foreground-color']};\n      display: inline-block;\n\n      ::before {\n        content: attr(data-content);\n        display: block;\n        font-weight: bold;\n        height: 0;\n        overflow: hidden;\n        visibility: hidden;\n      }\n    }\n\n    &:first-child {\n      margin-left: 0;\n    }\n\n    ::after {\n      background: ${selected ? primaryColor : lightenedColor};\n      display: ${selected ? 'block' : 'none'};\n      content: '';\n      position: absolute;\n      height: 0.125rem;\n      bottom: 0;\n      left: 0;\n      right: 0;\n    }\n\n    &:hover&:not(:disabled) {\n      ${activeStyle(lightenedColor)}\n      text-decoration: none;\n    }\n\n    &:focus,\n    &:not([disabled]):focus {\n      ${activeStyle(lightenedColor)}\n      box-shadow: ${theme.base.shadow['focus-inset']};\n      text-decoration: none;\n    }\n\n    ${StyledCount} {\n      margin-inline-start: calc(0.5 * ${spacing});\n    }\n  `;\n};\n\nconst getVerticalStyles = ({\n  selected,\n  theme\n}: Pick<StyledProps<StyledTabProps>, 'theme' | 'selected'>) => {\n  const borderColor = theme.base.palette['border-line'];\n  const primaryColor = theme.base.palette.interactive;\n  const lightenedColor = tryCatch(() => transparentize(0.5, primaryColor)) ?? '';\n  const { spacing } = theme.base;\n\n  return css`\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    border-style: solid;\n    color: ${theme.base.palette['foreground-color']};\n    border-width: 0.0625rem 0;\n    border-color: ${borderColor};\n    height: calc(5.5 * ${spacing});\n    margin-top: -0.0625rem;\n    padding: 0 calc(2 * ${spacing});\n    text-decoration: none;\n\n    &:first-child {\n      border-top: 0.0625rem solid ${borderColor};\n    }\n\n    ::after {\n      content: '';\n      position: absolute;\n      display: ${selected ? 'block' : 'none'};\n      top: 0;\n      bottom: 0;\n      right: 0;\n      width: 0.25rem;\n      background: ${primaryColor};\n    }\n\n    &:hover&:not(:disabled) {\n      ${activeStyle(lightenedColor)}\n      text-decoration: none;\n    }\n\n    &:focus,\n    &:not([disabled]):focus {\n      ${activeStyle(primaryColor)}\n      box-shadow: inset 0 0 0 0.0625rem ${primaryColor};\n      text-decoration: none;\n    }\n  `;\n};\n\nexport const StyledTab = styled(BareButton)<StyledTabProps>(\n  ({ theme, tabType, selected }) => css`\n    position: relative;\n    background: none;\n    cursor: pointer;\n    white-space: nowrap;\n\n    ${selected &&\n    css`\n      font-weight: bold;\n    `}\n\n    & + & {\n      margin-inline-start: 0;\n    }\n\n    &:focus {\n      outline: none;\n    }\n\n    &:disabled {\n      cursor: not-allowed;\n      opacity: ${theme.base['disabled-opacity']};\n    }\n\n    ${tabType === 'horizontal'\n      ? getHorizontalStyles({ theme, selected })\n      : getVerticalStyles({ theme, selected })}\n\n    ${StyledErrorIcon} {\n      margin-inline-end: calc(0.5 * ${theme.base.spacing});\n    }\n  `\n);\n\nStyledTab.defaultProps = defaultThemeProp;\n\nconst Tab: FC<TabProps & ForwardProps> = forwardRef(function Tab(\n  { selected, content, count, type, disabled, errors, ...restProps }: PropsWithoutRef<TabProps>,\n  ref: Ref<HTMLButtonElement>\n) {\n  const t = useI18n();\n  const [tabEl, setTabEl] = useElement();\n  const tabRef = useConsolidatedRef<HTMLButtonElement>(ref, setTabEl);\n\n  return (\n    <StyledTab ref={tabRef} selected={selected} tabType={type} disabled={disabled} {...restProps}>\n      <span>\n        {!!errors && (\n          <>\n            <StyledErrorIcon name='warn-solid' />\n            <Tooltip target={tabEl} hideDelay='none' showDelay='none'>\n              {t('tab_error_tooltip', [content])}\n            </Tooltip>\n          </>\n        )}\n        <span data-content={content}>{content}</span>\n      </span>\n      {count}\n    </StyledTab>\n  );\n});\n\nexport default Tab;\n"]}
+{"version":3,"file":"Tab.js","sourceRoot":"","sources":["../../../src/components/Tabs/Tab.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useContext } from 'react';\nimport type { FC, ReactNode, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\nimport type { StyledProps } from 'styled-components';\nimport { meetsContrastGuidelines, mix, transparentize } from 'polished';\n\nimport { readableHue } from '../../styles';\nimport * as warnSolidIcon from '../Icon/icons/warn-solid.icon';\nimport { registerIcon } from '../Icon';\nimport { useConsolidatedRef, useElement, useI18n } from '../../hooks';\nimport Tooltip from '../Tooltip';\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch } from '../../utils';\nimport { StyledCount } from '../Badges/Count';\nimport type { ForwardProps } from '../../types';\nimport BareButton from '../Button/BareButton';\n\nimport TabsContext from './TabsContext';\nimport type { TabsContextValue } from './TabsContext';\nimport type { TabsProps } from './Tabs.types';\nimport { StyledErrorIcon } from './Tabs.styles';\n\nregisterIcon(warnSolidIcon);\n\nexport interface TabProps {\n  /** Indicates if this Tab is active. */\n  selected: boolean;\n  /** The text to display as the name of the Tab. */\n  content: string;\n  /** A number to associate with the Tab. */\n  count?: ReactNode;\n  /** Determines the direction in which the Tab will render. */\n  type: TabsProps['type'];\n  /** Disables the tab if true */\n  disabled?: boolean;\n  /** An error to associate with the Tab. */\n  errors?: number | boolean;\n  /** Ref to the tab element. */\n  ref?: Ref<HTMLButtonElement | HTMLAnchorElement>;\n}\n\nexport interface StyledTabProps {\n  selected: TabProps['selected'];\n  tabType: TabProps['type'];\n}\n\nconst activeStyle = (color: string) => css`\n  ::after {\n    display: block;\n    background-color: ${color};\n  }\n`;\n\nconst getHorizontalUnselectedHoverStyle = ({\n  level,\n  opacity,\n  color\n}: { level?: TabsContextValue['level'] } & { color?: string; opacity: number }) =>\n  level && level > 1\n    ? css`\n        ::before {\n          content: '';\n          position: absolute;\n          top: 0;\n          bottom: 0;\n          left: 0;\n          right: 0;\n          border-radius: inherit;\n          background-color: currentColor;\n          opacity: ${opacity};\n        }\n      `\n    : css`\n        background-color: ${color};\n        border-start-start-radius: calc(0.5rem * 0.5);\n        border-start-end-radius: calc(0.5rem * 0.5);\n      `;\n\nconst getHorizontalStyles = ({\n  selected,\n  level,\n  theme\n}: Pick<StyledProps<StyledTabProps>, 'theme' | 'selected'> & {\n  level?: TabsContextValue['level'];\n}) => {\n  const color = theme.components.button.color;\n  const secondaryColor = theme.base.palette['secondary-background'];\n  const lightenedColor = tryCatch(() => transparentize(0.3, color)) ?? '';\n  const backgroundUsable = meetsContrastGuidelines(color, secondaryColor).AA;\n  const usableColor = backgroundUsable ? color : readableHue(color, secondaryColor);\n  const hoverBackgroundColor = tryCatch(() => mix(0.9, secondaryColor, usableColor));\n  const activeBackgroundColor = tryCatch(() => mix(0.8, secondaryColor, usableColor));\n\n  const { spacing } = theme.base;\n\n  return css`\n    align-items: center;\n    display: flex;\n    flex-direction: row;\n    height: calc(4 * ${spacing});\n    padding: 0 calc(1.5 * ${spacing});\n    border: none;\n    text-decoration: none;\n\n    @media (pointer: coarse) {\n      height: ${theme.base['hit-area']['finger-min']};\n    }\n\n    span:first-of-type {\n      color: ${selected ? color : theme.base.palette['foreground-color']};\n      display: inline-block;\n\n      ::before {\n        content: attr(data-content);\n        display: block;\n        font-weight: bold;\n        height: 0;\n        overflow: hidden;\n        visibility: hidden;\n      }\n    }\n\n    &:first-child {\n      margin-left: 0;\n    }\n\n    ::after {\n      background: ${selected ? color : lightenedColor};\n      display: ${selected ? 'block' : 'none'};\n      content: '';\n      position: absolute;\n      height: 0.125rem;\n      bottom: 0;\n      left: calc(1.5 * ${spacing});\n      right: calc(1.5 * ${spacing});\n    }\n\n    ${!selected\n      ? css`\n          @media (hover: hover) {\n            &:not(:disabled):hover {\n              text-decoration: none;\n              ${getHorizontalUnselectedHoverStyle({\n                level,\n                opacity: 0.1,\n                color: hoverBackgroundColor\n              })}\n            }\n\n            &:not(:disabled):active {\n              text-decoration: none;\n              ${getHorizontalUnselectedHoverStyle({\n                level,\n                opacity: 0.2,\n                color: activeBackgroundColor\n              })}\n            }\n          }\n        `\n      : css`\n          ${level &&\n          level > 1 &&\n          css`\n            background-color: ${theme.base.palette['primary-background']};\n          `}\n        `}\n\n    &:focus,\n    &:not([disabled]):focus {\n      border-radius: calc(0.5rem * 0.5);\n      box-shadow: ${theme.base.shadow['focus-inset']};\n      text-decoration: none;\n      ::after {\n        display: none;\n      }\n    }\n\n    @media (pointer: coarse) {\n      min-block-size: ${theme.base['hit-area'].finger};\n    }\n\n    ${StyledCount} {\n      margin-inline-start: calc(0.5 * ${spacing});\n    }\n  `;\n};\n\nconst getVerticalStyles = ({\n  selected,\n  theme\n}: Pick<StyledProps<StyledTabProps>, 'theme' | 'selected'>) => {\n  const borderColor = theme.base.palette['border-line'];\n  const primaryColor = theme.base.palette.interactive;\n  const lightenedColor = tryCatch(() => transparentize(0.5, primaryColor)) ?? '';\n  const { spacing } = theme.base;\n\n  return css`\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    border-style: solid;\n    color: ${theme.base.palette['foreground-color']};\n    border-width: 0.0625rem 0;\n    border-color: ${borderColor};\n    height: calc(5.5 * ${spacing});\n    margin-top: -0.0625rem;\n    padding: 0 calc(2 * ${spacing});\n    text-decoration: none;\n\n    &:first-child {\n      border-top: 0.0625rem solid ${borderColor};\n    }\n\n    ::after {\n      content: '';\n      position: absolute;\n      display: ${selected ? 'block' : 'none'};\n      top: 0;\n      bottom: 0;\n      right: 0;\n      width: 0.25rem;\n      background: ${primaryColor};\n    }\n\n    &:hover&:not(:disabled) {\n      ${activeStyle(lightenedColor)}\n      text-decoration: none;\n    }\n\n    &:focus,\n    &:not([disabled]):focus {\n      ${activeStyle(primaryColor)}\n      box-shadow: inset 0 0 0 0.0625rem ${primaryColor};\n      text-decoration: none;\n    }\n  `;\n};\n\nexport const StyledTab = styled(BareButton)<\n  StyledTabProps & {\n    level?: TabsContextValue['level'];\n  }\n>(\n  ({ theme, tabType, selected, level }) => css`\n    position: relative;\n    background: none;\n    cursor: pointer;\n    white-space: nowrap;\n\n    ${selected &&\n    css`\n      font-weight: bold;\n    `}\n\n    & + & {\n      margin-inline-start: 0;\n    }\n\n    &:focus {\n      outline: none;\n    }\n\n    &:disabled {\n      cursor: not-allowed;\n      opacity: ${theme.base['disabled-opacity']};\n    }\n\n    ${tabType === 'horizontal'\n      ? getHorizontalStyles({ theme, selected, level })\n      : getVerticalStyles({ theme, selected })}\n\n    ${StyledErrorIcon} {\n      margin-inline-end: calc(0.5 * ${theme.base.spacing});\n    }\n  `\n);\n\nStyledTab.defaultProps = defaultThemeProp;\n\nconst Tab: FC<TabProps & ForwardProps> = forwardRef(function Tab(\n  { selected, content, count, type, disabled, errors, ...restProps }: PropsWithoutRef<TabProps>,\n  ref: TabProps['ref']\n) {\n  const t = useI18n();\n  const [tabEl, setTabEl] = useElement();\n  const tabRef = useConsolidatedRef(ref, setTabEl);\n  const { level } = useContext(TabsContext);\n\n  return (\n    <StyledTab\n      ref={tabRef}\n      selected={selected}\n      tabType={type}\n      disabled={disabled}\n      level={level}\n      {...restProps}\n    >\n      <span>\n        {!!errors && (\n          <>\n            <StyledErrorIcon name='warn-solid' />\n            <Tooltip target={tabEl} hideDelay='none' showDelay='none'>\n              {t('tab_error_tooltip', [content])}\n            </Tooltip>\n          </>\n        )}\n        <span data-content={content}>{content}</span>\n      </span>\n      {count}\n    </StyledTab>\n  );\n});\n\nexport default Tab;\n"]}

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

@@ -1,5 +1,6 @@
-import type { FunctionComponent, ReactNode, Ref } from 'react';
+import type { FunctionComponent, ReactNode, Ref, RefObject } from 'react';
 import type { ForwardProps } from '../../types';
+import type { TabsProps } from './Tabs.types';
 interface TabPanelProps {
     /** The id of the Tab that the tab panel is related to. */
     tabId: string;
@@ -8,13 +9,23 @@ interface TabPanelProps {
      * The tabsValue must match the tabId in order for the TabPanel to show itself.
      */
     currentTabId?: string;
+    /** The title for the tab panel */
+    title?: string;
     /** Content of the tab panel. */
     children: ReactNode;
+    /** Ref to the tablist element. */
+    tablistRef?: RefObject<HTMLElement>;
+    /**
+     * The tablist type indicates what direction the tabs are rendered in.
+     * @default 'horizontal'
+     */
+    tablistType?: TabsProps['type'];
     /** Ref for the wrapping element. */
     ref?: Ref<HTMLDivElement>;
 }
-export declare const StyledTabPanel: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+export declare const StyledTabPanel: import("styled-components").StyledComponent<FunctionComponent<import("../Flex").FlexProps & ForwardProps>, import("styled-components").DefaultTheme, Pick<TabPanelProps, "tablistType"> & {
     current: boolean;
+    level: number;
 }, never>;
 declare const TabPanel: FunctionComponent<TabPanelProps & ForwardProps>;
 export default TabPanel;

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,MAAM,OAAO,CAAC;AAGhF,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAEhD,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,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAMD,eAAO,MAAM,cAAc;aAChB,OAAO;SAehB,CAAC;AAEH,QAAA,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,GAAG,YAAY,CAgB5D,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;SA4Bf,CAAC;AAgBH,QAAA,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,GAAG,YAAY,CAyE5D,CAAC;AAIH,eAAe,QAAQ,CAAC"}

package/lib/components/Tabs/TabPanel.js

@@ -1,26 +1,81 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 }) => {
+export const StyledTabPanel = styled(Flex)(({ current, tablistType, level, theme }) => {
     return css `
     min-width: 0;
     max-width: 100%;
 
     :focus {
       outline: none;
+      box-shadow: ${tablistType === 'horizontal' && level > 1
+        ? theme.base.shadow['focus-inset']
+        : theme.base.shadow.focus};
     }
 
     ${!current &&
         css `
       display: none;
     `}
+    ${tablistType === 'horizontal' &&
+        level > 1 &&
+        css `
+      background-color: ${theme.base.palette['primary-background']};
+      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;
+const StyledButton = styled(Button)(({ theme }) => {
+    return css `
+    padding-inline: calc(${theme.base.spacing});
+    opacity: 0;
+    &:focus {
+      opacity: 1;
+    }
   `;
 });
-const TabPanel = forwardRef(function TabPanel({ tabId, currentTabId, children, ...restProps }, ref) {
-    return (_jsx(StyledTabPanel, { ...restProps, current: currentTabId && tabId ? currentTabId === tabId : true, role: 'tabpanel', "aria-labelledby": `${tabId}`, id: `${tabId}-panel`, ref: ref, children: children }));
+StyledButton.defaultProps = defaultThemeProp;
+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 (_jsx(TabsContext.Provider, { value: contextValue, children: _jsxs(StyledTabPanel, { ...restProps, container: {
+                direction: 'column',
+                rowGap: 1,
+                ...(tablistType === 'horizontal' && {
+                    pad: level > 1 ? [1, 1.5, undefined] : [1, undefined, undefined]
+                })
+            }, 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":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAkBhD,MAAM,YAAY,GAA2B;IAC3C,KAAK,EAAE,EAAE;CACV,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAErC,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE;IACjB,OAAO,GAAG,CAAA;;;;;;;;MAQN,CAAC,OAAO;QACV,GAAG,CAAA;;KAEF;GACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,QAAQ,GAAoD,UAAU,CAAC,SAAS,QAAQ,CAC5F,EAAE,KAAK,EAAE,YAAY,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAkC,EAC/E,GAAyB;IAEzB,OAAO,CACL,KAAC,cAAc,OACT,SAAS,EACb,OAAO,EAAE,YAAY,IAAI,KAAK,CAAC,CAAC,CAAC,YAAY,KAAK,KAAK,CAAC,CAAC,CAAC,IAAI,EAC9D,IAAI,EAAC,UAAU,qBACE,GAAG,KAAK,EAAE,EAC3B,EAAE,EAAE,GAAG,KAAK,QAAQ,EACpB,GAAG,EAAE,GAAG,YAEP,QAAQ,GACM,CAClB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,QAAQ,CAAC,YAAY,GAAG,YAAY,CAAC;AAErC,eAAe,QAAQ,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { FunctionComponent, ReactNode, Ref, PropsWithoutRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport type { ForwardProps } from '../../types';\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 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 }) => {\n  return css`\n    min-width: 0;\n    max-width: 100%;\n\n    :focus {\n      outline: none;\n    }\n\n    ${!current &&\n    css`\n      display: none;\n    `}\n  `;\n});\n\nconst TabPanel: FunctionComponent<TabPanelProps & ForwardProps> = forwardRef(function TabPanel(\n  { tabId, currentTabId, children, ...restProps }: PropsWithoutRef<TabPanelProps>,\n  ref: TabPanelProps['ref']\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={ref}\n    >\n      {children}\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: ${tablistType === 'horizontal' && level > 1\n        ? theme.base.shadow['focus-inset']\n        : theme.base.shadow.focus};\n    }\n\n    ${!current &&\n    css`\n      display: none;\n    `}\n    ${tablistType === 'horizontal' &&\n    level > 1 &&\n    css`\n      background-color: ${theme.base.palette['primary-background']};\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' && {\n            pad: level > 1 ? [1, 1.5, undefined] : [1, undefined, undefined]\n          })\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

@@ -1,7 +1,6 @@
 import type { FunctionComponent } from 'react';
 import type { ForwardProps } from '../../types';
 import type { TabsProps } from './Tabs.types';
-export declare const StyledTabs: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, Partial<TabsProps>, never>;
 /**
  * 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

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":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAmD,MAAM,OAAO,CAAC;AAOhG,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAIhD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAI9C,eAAO,MAAM,UAAU,yHAgBtB,CAAC;AAIF;;;GAGG;AACH,QAAA,MAAM,IAAI,EAAE,iBAAiB,CAAC,SAAS,GAAG,YAAY,CAgGpD,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"}