@pega/cosmos-react-core 8.0.0-build.3.2 → 8.0.0-build.30.0

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 } 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"]}
+{"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, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\nimport { hideVisually } from 'polished';\n\nimport type { BaseProps, ForwardRefForwardPropsComponent, 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: ForwardRefForwardPropsComponent<SwitchProps> = 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        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/Table/Table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../src/components/Table/Table.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAmB,GAAG,EAAE,SAAS,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAI1F,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAqB,MAAM,aAAa,CAAC;AAS9F,MAAM,WAAW,cAAc;IAC7B,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,WAAW,CAAC,OAAO,SAAS,cAAc,GAAG,cAAc;IAC1E,gIAAgI;IAChI,QAAQ,EAAE,aAAa,CAAC,OAAO,CAAC,GAAG,MAAM,OAAO,CAAC;IACjD,uCAAuC;IACvC,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,UAAU,CAAC,OAAO,SAAS,cAAc,GAAG,cAAc,CACzE,SAAQ,SAAS,EACf,cAAc;IAChB,wDAAwD;IACxD,OAAO,EAAE,WAAW,CAAC,OAAO,CAAC,EAAE,CAAC;IAChC;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,EAAE,CAAC;IACjB;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,4DAA4D;IAC5D,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,8DAA8D;IAC9D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B;AAmJD,eAAO,MAAM,kBAAkB,yGAG9B,CAAC;AAUF,QAAA,MAAM,KAAK,kGAoEN,YAAY,GAAG,IAAI,CAAC;AAEzB,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../src/components/Table/Table.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAmB,GAAG,EAAE,SAAS,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAI1F,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAqB,MAAM,aAAa,CAAC;AAS9F,MAAM,WAAW,cAAc;IAC7B,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,WAAW,CAAC,OAAO,SAAS,cAAc,GAAG,cAAc;IAC1E,gIAAgI;IAChI,QAAQ,EAAE,aAAa,CAAC,OAAO,CAAC,GAAG,MAAM,OAAO,CAAC;IACjD,uCAAuC;IACvC,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,UAAU,CAAC,OAAO,SAAS,cAAc,GAAG,cAAc,CACzE,SAAQ,SAAS,EACf,cAAc;IAChB,wDAAwD;IACxD,OAAO,EAAE,WAAW,CAAC,OAAO,CAAC,EAAE,CAAC;IAChC;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,EAAE,CAAC;IACjB;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,4DAA4D;IAC5D,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,8DAA8D;IAC9D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B;AAmJD,eAAO,MAAM,kBAAkB,yGAG9B,CAAC;AAUF,QAAA,MAAM,KAAK,EAkEL,CAAC,OAA+C,SAA/B,cAAc,GAAG,cAAc,EACpD,KAAK,EAAE,UAAU,CAAC,OAAO,CAAC,GAAG,YAAY,KACtC,YAAY,GAAG,IAAI,CAAC;AAEzB,eAAe,KAAK,CAAC"}

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

@@ -1,5 +1,6 @@
-import type { FC, ReactNode, Ref } from 'react';
-import type { ForwardProps } from '../../types';
+import type { ReactNode, Ref } from 'react';
+import type { ForwardRefForwardPropsComponent } from '../../types';
+import type { TabsContextValue } from './TabsContext';
 import type { TabsProps } from './Tabs.types';
 export interface TabProps {
     /** Indicates if this Tab is active. */
@@ -21,9 +22,9 @@ 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 & {
-    level?: number | undefined;
+export declare const StyledTab: import("styled-components").StyledComponent<ForwardRefForwardPropsComponent<import("../Button/BareButton").BareButtonProps>, import("styled-components").DefaultTheme, StyledTabProps & {
+    level?: TabsContextValue["level"];
 }, never>;
-declare const Tab: FC<TabProps & ForwardProps>;
+declare const Tab: ForwardRefForwardPropsComponent<TabProps>;
 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,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"}
+{"version":3,"file":"Tab.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/Tab.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAa7D,OAAO,KAAK,EAAE,+BAA+B,EAAE,MAAM,aAAa,CAAC;AAInE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACtD,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;AA4OD,eAAO,MAAM,SAAS;YAEV,gBAAgB,CAAC,OAAO,CAAC;SAmCpC,CAAC;AAIF,QAAA,MAAM,GAAG,EAAE,+BAA+B,CAAC,QAAQ,CAgCjD,CAAC;AAEH,eAAe,GAAG,CAAC"}

package/lib/components/Tabs/Tab.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useContext } from 'react';
 import styled, { css } from 'styled-components';
-import { meetsContrastGuidelines, mix, transparentize } from 'polished';
-import { readableHue } from '../../styles';
+import { meetsContrastGuidelines, mix, readableColor, transparentize } from 'polished';
+import { isSolidColor, readableHue } from '../../styles';
 import * as warnSolidIcon from '../Icon/icons/warn-solid.icon';
 import { registerIcon } from '../Icon';
 import { useConsolidatedRef, useElement, useI18n } from '../../hooks';
@@ -41,12 +41,17 @@ const getHorizontalUnselectedHoverStyle = ({ level, opacity, color }) => level &
       `;
 const getHorizontalStyles = ({ selected, level, theme }) => {
     const color = theme.components.button.color;
-    const secondaryColor = theme.base.palette['secondary-background'];
+    const { detached: tabsDetached } = theme.components.tabs;
+    const secondaryColor = tabsDetached
+        ? theme.base.palette['primary-background']
+        : 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));
+    // If the secondary color is not a solid color, use the readable color as the fallback background.
+    const fallbackBackground = isSolidColor(secondaryColor) ? secondaryColor : readableColor(color);
+    const backgroundUsable = tryCatch(() => meetsContrastGuidelines(color, fallbackBackground).AA);
+    const usableColor = backgroundUsable ? color : readableHue(color, fallbackBackground);
+    const hoverBackgroundColor = tryCatch(() => mix(0.9, fallbackBackground, usableColor));
+    const activeBackgroundColor = tryCatch(() => mix(0.8, fallbackBackground, usableColor));
     const { spacing } = theme.base;
     return css `
     align-items: center;
@@ -78,17 +83,19 @@ const getHorizontalStyles = ({ selected, level, theme }) => {
     &:first-child {
       margin-left: 0;
     }
-
-    ::after {
-      background: ${selected ? color : lightenedColor};
-      display: ${selected ? 'block' : 'none'};
-      content: '';
-      position: absolute;
-      height: 0.125rem;
-      bottom: 0;
-      left: calc(1.5 * ${spacing});
-      right: calc(1.5 * ${spacing});
-    }
+    ${!tabsDetached &&
+        css `
+      ::after {
+        background: ${selected ? color : lightenedColor};
+        display: ${selected ? 'block' : 'none'};
+        content: '';
+        position: absolute;
+        height: 0.125rem;
+        bottom: 0;
+        left: calc(1.5 * ${spacing});
+        right: calc(1.5 * ${spacing});
+      }
+    `}
 
     ${!selected
         ? css `
@@ -137,13 +144,31 @@ const getHorizontalStyles = ({ selected, level, theme }) => {
     ${StyledCount} {
       margin-inline-start: calc(0.5 * ${spacing});
     }
+
+    ${tabsDetached &&
+        css `
+      &[aria-selected='true'],
+      &:focus,
+      &:not([disabled]):focus,
+      &:hover:not(:disabled) {
+        color: ${theme.base.palette.interactive};
+        span:first-of-type {
+          color: ${theme.base.palette.interactive};
+        }
+        background: ${theme.base.palette['primary-background']};
+      }
+      &:hover:not(:disabled):not([aria-selected='true']) {
+        background: ${hoverBackgroundColor};
+      }
+    `}
   `;
 };
 const getVerticalStyles = ({ selected, theme }) => {
     const borderColor = theme.base.palette['border-line'];
-    const primaryColor = theme.base.palette.interactive;
-    const lightenedColor = tryCatch(() => transparentize(0.5, primaryColor)) ?? '';
+    const interactive = theme.base.palette.interactive;
+    const lightenedColor = tryCatch(() => transparentize(0.5, interactive)) ?? '';
     const { spacing } = theme.base;
+    const { detached: tabsDetached } = theme.components.tabs;
     return css `
     display: flex;
     justify-content: space-between;
@@ -151,26 +176,28 @@ const getVerticalStyles = ({ selected, theme }) => {
     border-style: solid;
     color: ${theme.base.palette['foreground-color']};
     border-width: 0.0625rem 0;
-    border-color: ${borderColor};
+    border-color: ${tabsDetached ? 'transparent' : borderColor};
     height: calc(5.5 * ${spacing});
     margin-top: -0.0625rem;
     padding: 0 calc(2 * ${spacing});
     text-decoration: none;
 
     &:first-child {
-      border-top: 0.0625rem solid ${borderColor};
-    }
-
-    ::after {
-      content: '';
-      position: absolute;
-      display: ${selected ? 'block' : 'none'};
-      top: 0;
-      bottom: 0;
-      right: 0;
-      width: 0.25rem;
-      background: ${primaryColor};
+      border-top: 0.0625rem solid ${tabsDetached ? 'transparent' : borderColor};
     }
+    ${!tabsDetached &&
+        css `
+      ::after {
+        content: '';
+        position: absolute;
+        display: ${selected ? 'block' : 'none'};
+        top: 0;
+        bottom: 0;
+        right: 0;
+        width: 0.25rem;
+        background: ${interactive};
+      }
+    `}
 
     &:hover&:not(:disabled) {
       ${activeStyle(lightenedColor)}
@@ -179,10 +206,24 @@ const getVerticalStyles = ({ selected, theme }) => {
 
     &:focus,
     &:not([disabled]):focus {
-      ${activeStyle(primaryColor)}
-      box-shadow: inset 0 0 0 0.0625rem ${primaryColor};
+      ${activeStyle(interactive)}
+      box-shadow: inset 0 0 0 0.0625rem ${interactive};
       text-decoration: none;
     }
+
+    ${tabsDetached &&
+        css `
+      border-radius: calc(0.5 * ${theme.base['border-radius']});
+      margin: calc(0.125 * ${spacing}) calc(2 * ${spacing});
+
+      &:hover&:not(:disabled),
+      &:focus,
+      &:not([disabled]):focus,
+      &[aria-selected='true'] {
+        background: ${transparentize(0.75, interactive)};
+        color: ${theme.components['app-shell'].nav['foreground-color']};
+      }
+    `}
   `;
 };
 export const StyledTab = styled(BareButton)(({ theme, tabType, selected, level }) => css `

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, 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"]}
+{"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 { ReactNode, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\nimport type { StyledProps } from 'styled-components';\nimport { meetsContrastGuidelines, mix, readableColor, transparentize } from 'polished';\n\nimport { isSolidColor, 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 { ForwardRefForwardPropsComponent } 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 { detached: tabsDetached } = theme.components.tabs;\n  const secondaryColor = tabsDetached\n    ? theme.base.palette['primary-background']\n    : theme.base.palette['secondary-background'];\n  const lightenedColor = tryCatch(() => transparentize(0.3, color)) ?? '';\n\n  // If the secondary color is not a solid color, use the readable color as the fallback background.\n  const fallbackBackground = isSolidColor(secondaryColor) ? secondaryColor : readableColor(color);\n  const backgroundUsable = tryCatch(() => meetsContrastGuidelines(color, fallbackBackground).AA);\n  const usableColor = backgroundUsable ? color : readableHue(color, fallbackBackground);\n  const hoverBackgroundColor = tryCatch(() => mix(0.9, fallbackBackground, usableColor));\n  const activeBackgroundColor = tryCatch(() => mix(0.8, fallbackBackground, 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    ${!tabsDetached &&\n    css`\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\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    ${tabsDetached &&\n    css`\n      &[aria-selected='true'],\n      &:focus,\n      &:not([disabled]):focus,\n      &:hover:not(:disabled) {\n        color: ${theme.base.palette.interactive};\n        span:first-of-type {\n          color: ${theme.base.palette.interactive};\n        }\n        background: ${theme.base.palette['primary-background']};\n      }\n      &:hover:not(:disabled):not([aria-selected='true']) {\n        background: ${hoverBackgroundColor};\n      }\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 interactive = theme.base.palette.interactive;\n  const lightenedColor = tryCatch(() => transparentize(0.5, interactive)) ?? '';\n  const { spacing } = theme.base;\n  const { detached: tabsDetached } = theme.components.tabs;\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: ${tabsDetached ? 'transparent' : 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 ${tabsDetached ? 'transparent' : borderColor};\n    }\n    ${!tabsDetached &&\n    css`\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: ${interactive};\n      }\n    `}\n\n    &:hover&:not(:disabled) {\n      ${activeStyle(lightenedColor)}\n      text-decoration: none;\n    }\n\n    &:focus,\n    &:not([disabled]):focus {\n      ${activeStyle(interactive)}\n      box-shadow: inset 0 0 0 0.0625rem ${interactive};\n      text-decoration: none;\n    }\n\n    ${tabsDetached &&\n    css`\n      border-radius: calc(0.5 * ${theme.base['border-radius']});\n      margin: calc(0.125 * ${spacing}) calc(2 * ${spacing});\n\n      &:hover&:not(:disabled),\n      &:focus,\n      &:not([disabled]):focus,\n      &[aria-selected='true'] {\n        background: ${transparentize(0.75, interactive)};\n        color: ${theme.components['app-shell'].nav['foreground-color']};\n      }\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: ForwardRefForwardPropsComponent<TabProps> = 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,5 @@
-import type { FunctionComponent, ReactNode, Ref, RefObject } from 'react';
-import type { ForwardProps } from '../../types';
+import type { ReactNode, Ref, RefObject } from 'react';
+import type { ForwardRefForwardPropsComponent } from '../../types';
 import type { TabsProps } from './Tabs.types';
 interface TabPanelProps {
     /** The id of the Tab that the tab panel is related to. */
@@ -23,10 +23,10 @@ interface TabPanelProps {
     /** Ref for the wrapping element. */
     ref?: Ref<HTMLDivElement>;
 }
-export declare const StyledTabPanel: import("styled-components").StyledComponent<FunctionComponent<import("../Flex").FlexProps & ForwardProps>, import("styled-components").DefaultTheme, Pick<TabPanelProps, "tablistType"> & {
+export declare const StyledTabPanel: import("styled-components").StyledComponent<ForwardRefForwardPropsComponent<import("../Flex").FlexProps>, import("styled-components").DefaultTheme, Pick<TabPanelProps, "tablistType"> & {
     current: boolean;
     level: number;
 }, never>;
-declare const TabPanel: FunctionComponent<TabPanelProps & ForwardProps>;
+declare const TabPanel: ForwardRefForwardPropsComponent<TabPanelProps>;
 export default TabPanel;
 //# sourceMappingURL=TabPanel.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"TabPanel.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/TabPanel.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,SAAS,EAAE,GAAG,EAAmB,SAAS,EAAE,MAAM,OAAO,CAAC;AAK3F,OAAO,KAAK,EAAE,YAAY,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"}
+{"version":3,"file":"TabPanel.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/TabPanel.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,GAAG,EAAmB,SAAS,EAAE,MAAM,OAAO,CAAC;AAMxE,OAAO,KAAK,EAAE,+BAA+B,EAAc,MAAM,aAAa,CAAC;AAM/E,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAK9C,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;SA2Ff,CAAC;AAgBH,QAAA,MAAM,QAAQ,EAAE,+BAA+B,CAAC,aAAa,CAyE3D,CAAC;AAIH,eAAe,QAAQ,CAAC"}

package/lib/components/Tabs/TabPanel.js

@@ -1,6 +1,7 @@
 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 { transparentize } from 'polished';
 import { useConsolidatedRef, useI18n, useFocusWithin, useEvent } from '../../hooks';
 import { defaultThemeProp } from '../../theme';
 import Button from '../Button';
@@ -8,6 +9,8 @@ import { getFocusables } from '../../utils';
 import Flex from '../Flex';
 import Text from '../Text';
 import TabsContext from './TabsContext';
+import { StyledAllTabsWrapper, StyledTabs } from './Tabs.styles';
+import { StyledTab } from './Tab';
 const defaultProps = {
     tabId: ''
 };
@@ -16,7 +19,7 @@ export const StyledTabPanel = styled(Flex)(({ current, tablistType, level, theme
     min-width: 0;
     max-width: 100%;
 
-    :focus {
+    :focus-visible {
       outline: none;
       box-shadow: ${tablistType === 'horizontal' && level > 1
         ? theme.base.shadow['focus-inset']
@@ -27,6 +30,7 @@ export const StyledTabPanel = styled(Flex)(({ current, tablistType, level, theme
         css `
       display: none;
     `}
+
     ${tablistType === 'horizontal' &&
         level > 1 &&
         css `
@@ -36,6 +40,68 @@ export const StyledTabPanel = styled(Flex)(({ current, tablistType, level, theme
       border-end-start-radius: calc(0.5rem * 0.5);
       border-end-end-radius: calc(0.5rem * 0.5);
     `}
+
+    ${theme.components.tabs.detached &&
+        tablistType === 'horizontal' &&
+        css `
+      background: ${theme.base.palette['primary-background']};
+      border: none;
+      border-radius: ${theme.components.card['border-radius']};
+      border-start-start-radius: 0;
+      border-start-end-radius: 0;
+      padding: ${theme.base.spacing} calc(2 * ${theme.base.spacing});
+
+      ${StyledTabs} {
+        border-radius: calc(0.5 * ${theme.base['border-radius']});
+        margin-block-end: ${theme.base.spacing};
+
+        ${StyledTab} {
+          border-radius: calc(0.5 * ${theme.base['border-radius']});
+          color: ${theme.base.palette.interactive};
+          span:first-of-type {
+            color: ${theme.base.palette.interactive};
+          }
+          &[aria-selected='true'],
+          &:focus,
+          &:not([disabled]):focus,
+          &:hover:not(:disabled) {
+            background: ${transparentize(0.8, theme.base.palette.interactive)};
+            color: ${theme.base.palette['foreground-color']};
+            span:first-of-type {
+              color: ${theme.base.palette['foreground-color']};
+            }
+          }
+        }
+      }
+
+      ${StyledAllTabsWrapper} {
+        border-radius: calc(0.5 * ${theme.base['border-radius']});
+        margin-block-end: ${theme.base.spacing};
+        ${StyledTabs} {
+          margin-block-end: 0;
+        }
+      }
+
+      ${level > 1 &&
+            css `
+        :has(&) {
+          border: 0.0625rem solid ${theme.base.palette['border-line']};
+          border-radius: calc(0.5 * ${theme.base['border-radius']});
+          padding: 0;
+
+          ${StyledTabs} {
+            margin: ${theme.base.spacing} calc(2 * ${theme.base.spacing});
+          }
+
+          ${StyledAllTabsWrapper} {
+            margin: ${theme.base.spacing} calc(2 * ${theme.base.spacing});
+            ${StyledTabs} {
+              margin: 0;
+            }
+          }
+        }
+      `}
+    `}
   `;
 });
 StyledTabPanel.defaultProps = defaultThemeProp;
@@ -54,7 +120,7 @@ const TabPanel = forwardRef(function TabPanel({ tabId, currentTabId, title, tabl
     const tabPanelRef = useConsolidatedRef(ref);
     const [showReturnButton, setShowReturnButton] = useState(false);
     const { level } = useContext(TabsContext);
-    const onFocusChange = useCallback(isFocused => {
+    const onFocusChange = useCallback((isFocused) => {
         if (!isFocused) {
             setShowReturnButton(false);
         }

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

@@ -1 +1 @@
-{"version":3,"file":"TabPanel.js","sourceRoot":"","sources":["../../../src/components/Tabs/TabPanel.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useState, useCallback, 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"]}
+{"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 { ReactNode, Ref, PropsWithoutRef, RefObject } from 'react';\nimport styled, { css } from 'styled-components';\nimport { transparentize } from 'polished';\n\nimport { useConsolidatedRef, useI18n, useFocusWithin, useEvent } from '../../hooks';\nimport { defaultThemeProp } from '../../theme';\nimport type { ForwardRefForwardPropsComponent, 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';\nimport { StyledAllTabsWrapper, StyledTabs } from './Tabs.styles';\nimport { StyledTab } from './Tab';\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-visible {\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\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    ${theme.components.tabs.detached &&\n    tablistType === 'horizontal' &&\n    css`\n      background: ${theme.base.palette['primary-background']};\n      border: none;\n      border-radius: ${theme.components.card['border-radius']};\n      border-start-start-radius: 0;\n      border-start-end-radius: 0;\n      padding: ${theme.base.spacing} calc(2 * ${theme.base.spacing});\n\n      ${StyledTabs} {\n        border-radius: calc(0.5 * ${theme.base['border-radius']});\n        margin-block-end: ${theme.base.spacing};\n\n        ${StyledTab} {\n          border-radius: calc(0.5 * ${theme.base['border-radius']});\n          color: ${theme.base.palette.interactive};\n          span:first-of-type {\n            color: ${theme.base.palette.interactive};\n          }\n          &[aria-selected='true'],\n          &:focus,\n          &:not([disabled]):focus,\n          &:hover:not(:disabled) {\n            background: ${transparentize(0.8, theme.base.palette.interactive)};\n            color: ${theme.base.palette['foreground-color']};\n            span:first-of-type {\n              color: ${theme.base.palette['foreground-color']};\n            }\n          }\n        }\n      }\n\n      ${StyledAllTabsWrapper} {\n        border-radius: calc(0.5 * ${theme.base['border-radius']});\n        margin-block-end: ${theme.base.spacing};\n        ${StyledTabs} {\n          margin-block-end: 0;\n        }\n      }\n\n      ${level > 1 &&\n      css`\n        :has(&) {\n          border: 0.0625rem solid ${theme.base.palette['border-line']};\n          border-radius: calc(0.5 * ${theme.base['border-radius']});\n          padding: 0;\n\n          ${StyledTabs} {\n            margin: ${theme.base.spacing} calc(2 * ${theme.base.spacing});\n          }\n\n          ${StyledAllTabsWrapper} {\n            margin: ${theme.base.spacing} calc(2 * ${theme.base.spacing});\n            ${StyledTabs} {\n              margin: 0;\n            }\n          }\n        }\n      `}\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: ForwardRefForwardPropsComponent<TabPanelProps> = 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: boolean) => {\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.map

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

package/lib/components/Tabs/Tabs.js

@@ -4,7 +4,7 @@ import SearchInput from '../SearchInput';
 import Flex from '../Flex';
 import Link from '../Link';
 import Count from '../Badges/Count';
-import { useAfterInitialEffect, useConsolidatedRef, useElement, useEscape, useI18n, useUID } from '../../hooks';
+import { useAfterInitialEffect, useConsolidatedRef, useElement, useEscape, useI18n, useTheme, useUID } from '../../hooks';
 import * as arrowMicroDownIcon from '../Icon/icons/arrow-micro-down.icon';
 import { registerIcon } from '../Icon/Icon';
 import { createStringMatcher, debounce } from '../../utils';
@@ -72,6 +72,7 @@ const Tabs = forwardRef(function Tabs({ tabs = [], type = 'horizontal', currentT
     const wrapperRef = useConsolidatedRef(ref, setWrapper);
     const { level } = useContext(TabsContext);
     const [hasScrollBar, setHasScrollBar] = useState(false);
+    const { components: { tabs: { detached: tabsDetached } } } = useTheme();
     // 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
@@ -121,12 +122,11 @@ const Tabs = forwardRef(function Tabs({ tabs = [], type = 'horizontal', currentT
     }, [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) => {
+            direction: type !== 'horizontal' ? 'column' : undefined
+        }, item: { shrink: 0 }, as: StyledTabs, ref: wrapperRef, 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 (_jsxs(Fragment, { children: [level > 1 && (_jsx(StyledSeparator, { transparent: selected ||
+            return (_jsxs(Fragment, { children: [level > 1 && !tabsDetached && (_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 => {