@pega/cosmos-react-core 9.0.0-build.9.8 → 9.0.0

package/lib/components/Table/Table.d.ts

@@ -44,7 +44,8 @@ export interface TableProps<RowData extends DefaultRowData = DefaultRowData> ext
     /** Ref for the wrapping element. */
     ref?: Ref<HTMLTableElement>;
 }
-export declare const StyledTableWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledTableWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+/** @deprecated */
 declare const Table: <RowData extends DefaultRowData = DefaultRowData>(props: TableProps<RowData> & ForwardProps) => ReactElement | null;
 export default Table;
 //# sourceMappingURL=Table.d.ts.map

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,EAkEL,CAAC,OAAO,SAAS,cAAc,GAAG,cAAc,EACpD,KAAK,EAAE,UAAU,CAAC,OAAO,CAAC,GAAG,YAAY,KACtC,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,6NAG9B,CAAC;AAUF,kBAAkB;AAClB,QAAA,MAAM,KAAK,EAkEL,CAAC,OAAO,SAAS,cAAc,GAAG,cAAc,EACpD,KAAK,EAAE,UAAU,CAAC,OAAO,CAAC,GAAG,YAAY,KACtC,YAAY,GAAG,IAAI,CAAC;AAEzB,eAAe,KAAK,CAAC"}

package/lib/components/Table/Table.js

@@ -114,6 +114,7 @@ const StyledTableCaption = styled.caption `
   ${hideVisually}
 `;
 StyledTableCaption.defaultProps = defaultThemeProp;
+/** @deprecated */
 const Table = forwardRef(function Table(props, ref) {
     const { columns, data = [], hoverHighlight = false, loading = false, loadingMessage = '', title, ...restProps } = props;
     return (_jsx(Card, { children: _jsxs(CardContent, { container: { rowGap: 1 }, children: [title && (_jsx(Text, { variant: 'h2', as: 'span', "aria-hidden": true, children: title })), _jsx(StyledTableWrapper, { children: _jsxs(StyledTable, { ref: ref, hoverHighlight: hoverHighlight, ...restProps, children: [title && _jsx(StyledTableCaption, { children: title }), _jsx("thead", { children: _jsx("tr", { children: columns.map(col => (_createElement(StyledCell, { as: StyledHeaderCell, ...col, scope: 'col', key: col.label }, col.label))) }) }), _jsxs("tbody", { children: [loading && (_jsx("tr", { children: _jsx(StyledLoadingCell, { colSpan: columns.length, children: _jsx(Progress, { placement: 'local', message: loadingMessage }) }) })), data.length > 0 &&

package/lib/components/Table/Table.js.map

@@ -1 +1 @@
-{"version":3,"file":"Table.js","sourceRoot":"","sources":["../../../src/components/Table/Table.tsx"],"names":[],"mappings":";;AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAGxC,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAEjD,OAAO,QAAQ,MAAM,aAAa,CAAC;AACnC,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,UAAU,MAAM,eAAe,CAAC;AACvC,OAAO,IAAI,EAAE,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAqD5C,MAAM,WAAW,GAAG,MAAM,CAAC,KAAK,CAAiD,KAAK,CAAC,EAAE;IACvF,MAAM,EACJ,cAAc,EACd,KAAK,EAAE,EACL,IAAI,EAAE,EACJ,OAAO,EAAE,EAAE,sBAAsB,EAAE,OAAO,EAAE,EAC5C,OAAO,EACR,EACD,UAAU,EAAE,EAAE,KAAK,EAAE,EACtB,EACF,GAAG,KAAK,CAAC;IAEV,MAAM,qBAAqB,GAAG,QAAQ,KAAK,CAAC,MAAM,CAAC,kBAAkB,CAAC,MAAM,OAAO,GAAG,CAAC;IACvF,MAAM,mBAAmB,GAAG,QAAQ,KAAK,CAAC,IAAI,CAAC,kBAAkB,CAAC,MAAM,OAAO,GAAG,CAAC;IACnF,MAAM,iBAAiB,GAAG,YAAY,KAAK,CAAC,MAAM,CAAC,oBAAoB,CAAC,KAAK,KAAK,CAAC,IAAI,CAAC,oBAAoB,CAAC,OAAO,OAAO,GAAG,CAAC;IAE/H,MAAM,YAAY,GAAG,GAAG,KAAK,CAAC,MAAM,CAAC,cAAc,CAAC,UAAU,KAAK,CAAC,MAAM,CAAC,cAAc,CAAC,EAAE,CAAC;IAC7F,MAAM,UAAU,GAAG,GAAG,KAAK,CAAC,IAAI,CAAC,cAAc,CAAC,UAAU,KAAK,CAAC,IAAI,CAAC,cAAc,CAAC,EAAE,CAAC;IAEvF,OAAO,GAAG,CAAA;;;;;;;mBAOO,GAAG,KAAK,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,GAAG,IACzE,KAAK,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,GAC1D,EAAE;yBACe,KAAK,CAAC,MAAM,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,MAAM;6BACpD,KAAK,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,MAAM;;;;uBAI5D,KAAK,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,GAAG;sBAC9D,KAAK,CAAC,MAAM,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,MAAM;;;;gCAI9C,KAAK,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,GAAG;+BAC5D,KAAK,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,MAAM;;;;8BAIvD,KAAK,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,GAAG;6BAC5D,KAAK,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,MAAM;;;;;;mBAMhE,GAAG,KAAK,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,GAAG,IACvE,KAAK,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,GAC1D,EAAE;yBACe,KAAK,CAAC,MAAM,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM;6BAClD,KAAK,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM;;;;0BAIvD,KAAK,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,GAAG;yBAC5D,KAAK,CAAC,MAAM,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM;;;;gCAI/C,KAAK,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,GAAG;+BAC5D,KAAK,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM;;;;8BAIrD,KAAK,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,GAAG;6BAC5D,KAAK,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM;;;;MAI3E,cAAc;QAChB,GAAG,CAAA;;;4BAGqB,OAAO;;KAE9B;GACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,WAAW,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE5C,MAAM,UAAU,GAAG,MAAM,CAAC,EAAE,CAC1B,CAAC,EAAE,KAAK,EAAE,MAAM,GAAG,KAAK,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;kBAClB,KAAK,IAAI,MAAM;mBACd,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI;GACxC,CACF,CAAC;AAEF,UAAU,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE3C,MAAM,gBAAgB,GAAG,MAAM,CAAC,EAAE,CAChC,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,YAAY,EAAE,SAAS,EAAE,EACxD,UAAU,EAAE,EACV,KAAK,EAAE,EAAE,MAAM,EAAE,EAClB,EACF,EACF,EAAE,EAAE;IACH,MAAM,SAAS,GAAG,iBAAiB,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC;IAEzD,OAAO,GAAG,CAAA;mBACK,SAAS,CAAC,MAAM,CAAC,WAAW,CAAa,CAAC;qBACxC,MAAM,CAAC,aAAa,CAAC;eAC3B,MAAM,CAAC,kBAAkB,CAAC;0BACf,MAAM,CAAC,kBAAkB,CAAC;KAC/C,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,cAAc,GAAG,MAAM,CAAC,EAAE,CAC9B,CAAC,EACC,KAAK,EAAE,EACL,UAAU,EAAE,EACV,KAAK,EAAE,EAAE,IAAI,EAAE,EAChB,EACF,EACF,EAAE,EAAE,CAAC,GAAG,CAAA;aACE,IAAI,CAAC,kBAAkB,CAAC;wBACb,IAAI,CAAC,kBAAkB,CAAC;GAC7C,CACF,CAAC;AAEF,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE/C,MAAM,eAAe,GAAG,MAAM,CAAC,EAAE,CAAA;sBACX,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO;CACtD,CAAC;AAEF,eAAe,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEhD,MAAM,iBAAiB,GAAG,MAAM,CAAC,EAAE,CAAA;;;CAGlC,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAA;;;CAG3C,CAAC;AAEF,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,kBAAkB,GAAG,MAAM,CAAC,OAAO,CAAA;IACrC,YAAY;CACf,CAAC;AAEF,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,KAAK,GAAG,UAAU,CAAC,SAAS,KAAK,CACrC,KAAkC,EAClC,GAA0B;IAE1B,MAAM,EACJ,OAAO,EACP,IAAI,GAAG,EAAE,EACT,cAAc,GAAG,KAAK,EACtB,OAAO,GAAG,KAAK,EACf,cAAc,GAAG,EAAE,EACnB,KAAK,EACL,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAEV,OAAO,CACL,KAAC,IAAI,cACH,MAAC,WAAW,IAAC,SAAS,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,aAClC,KAAK,IAAI,CACR,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,EAAC,EAAE,EAAC,MAAM,iCACzB,KAAK,GACD,CACR,EACD,KAAC,kBAAkB,cACjB,MAAC,WAAW,IAAC,GAAG,EAAE,GAAG,EAAE,cAAc,EAAE,cAAc,KAAM,SAAS,aACjE,KAAK,IAAI,KAAC,kBAAkB,cAAE,KAAK,GAAsB,EAC1D,0BACE,uBACG,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,CAClB,eAAC,UAAU,IAAC,EAAE,EAAE,gBAAgB,KAAM,GAAG,EAAE,KAAK,EAAC,KAAK,EAAC,GAAG,EAAE,GAAG,CAAC,KAAK,IAClE,GAAG,CAAC,KAAK,CACC,CACd,CAAC,GACC,GACC,EACR,4BACG,OAAO,IAAI,CACV,uBACE,KAAC,iBAAiB,IAAC,OAAO,EAAE,OAAO,CAAC,MAAM,YACxC,KAAC,QAAQ,IAAC,SAAS,EAAC,OAAO,EAAC,OAAO,EAAE,cAAc,GAAI,GACrC,GACjB,CACN,EACA,IAAI,CAAC,MAAM,GAAG,CAAC;wCACd,CAAC,OAAO;wCACR,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,CACd,uBACG,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,GAAG,EAAE,EAAE,EAAE,CAAC,CAC/C,eAAC,UAAU,IAAC,EAAE,EAAE,cAAc,KAAM,GAAG,EAAE,GAAG,EAAE,GAAG,GAAG,CAAC,KAAK,IAAI,GAAG,CAAC,EAAE,EAAE,IACnE,OAAO,QAAQ,KAAK,UAAU,CAAC,CAAC,CAAC,KAAC,QAAQ,OAAK,GAAG,GAAI,CAAC,CAAC,CAAC,GAAG,CAAC,QAAQ,CAAC,CAC5D,CACd,CAAC,IALK,GAAG,CAAC,EAAE,CAMV,CACN,CAAC,EACH,IAAI,CAAC,MAAM,KAAK,CAAC,IAAI,CAAC,OAAO,IAAI,CAChC,uBACE,KAAC,eAAe,IAAC,OAAO,EAAE,OAAO,CAAC,MAAM,YACtC,KAAC,UAAU,KAAG,GACE,GACf,CACN,IACK,IACI,GACK,IACT,GACT,CACR,CAAC;AACJ,CAAC,CAEuB,CAAC;AAEzB,eAAe,KAAK,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { PropsWithoutRef, Ref, ReactNode, ReactElement, ComponentType } from 'react';\nimport styled, { css } from 'styled-components';\nimport { hideVisually } from 'polished';\n\nimport type { BaseProps, ForwardProps, NoChildrenProp, PropsWithDefaults } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport { calculateFontSize } from '../../styles';\nimport type { FontSize } from '../../styles';\nimport Progress from '../Progress';\nimport Text from '../Text';\nimport EmptyState from '../EmptyState';\nimport Card, { CardContent } from '../Card';\n\nexport interface DefaultRowData {\n  id: string | number;\n}\n\nexport interface ColumnProps<RowData extends DefaultRowData = DefaultRowData> {\n  /** Render cell content for a column with a component or by passing a property key on the row object to serve as an accessor. */\n  renderer: ComponentType<RowData> | keyof RowData;\n  /** The visual label for the column. */\n  label: string;\n  /**\n   * The text alignment of the column header and the row contents for the column.\n   * @default 'left'\n   */\n  align?: 'left' | 'center' | 'right';\n  /**\n   * If true, this column will not wrap text on overflow.\n   * @default false\n   */\n  noWrap?: boolean;\n}\n\nexport interface TableProps<RowData extends DefaultRowData = DefaultRowData>\n  extends BaseProps,\n    NoChildrenProp {\n  /** The column headers that will structure the Table. */\n  columns: ColumnProps<RowData>[];\n  /**\n   * The content of the Table, represented as an array of objects with key value pairs.\n   * @default []\n   */\n  data?: RowData[];\n  /**\n   * Should the data rows highlight when the mouse hovers over them.\n   * @default false\n   */\n  hoverHighlight?: boolean;\n  /**\n   * Indicates if the data to populate the Table is still loading.\n   * @default false\n   */\n  loading?: boolean;\n  /** A message to be displayed when Table data is loading. */\n  loadingMessage?: string;\n  /** The title that will render above the Table if provided. */\n  title?: ReactNode;\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLTableElement>;\n}\n\ntype TablePropsWithDefaults = PropsWithDefaults<TableProps, 'hoverHighlight' | 'loading'>;\n\nconst StyledTable = styled.table<Pick<TablePropsWithDefaults, 'hoverHighlight'>>(props => {\n  const {\n    hoverHighlight,\n    theme: {\n      base: {\n        palette: { 'secondary-background': hoverBg },\n        spacing\n      },\n      components: { table }\n    }\n  } = props;\n\n  const verticalSpacingHeader = `calc(${table.header['vertical-spacing']} * ${spacing})`;\n  const verticalSpacingBody = `calc(${table.body['vertical-spacing']} * ${spacing})`;\n  const horizontalSpacing = `calc(max(${table.header['horizontal-spacing']}, ${table.body['horizontal-spacing']}) * ${spacing})`;\n\n  const borderHeader = `${table.header['border-width']} solid ${table.header['border-color']}`;\n  const borderBody = `${table.body['border-width']} solid ${table.body['border-color']}`;\n\n  return css`\n    border-collapse: collapse;\n    width: 100%;\n    background-color: transparent;\n\n    thead {\n      tr th {\n        padding: ${`${table.spacing['vertical-inner'] ? verticalSpacingHeader : '0'} ${\n          table.spacing['horizontal-inner'] ? horizontalSpacing : '0'\n        }`};\n        border-bottom: ${table.border['horizontal-inner'] ? borderHeader : 'none'};\n        border-inline-end: ${table.border['vertical-inner'] ? borderHeader : 'none'};\n      }\n\n      tr:first-of-type th {\n        padding-top: ${table.spacing['vertical-outer'] ? verticalSpacingHeader : '0'};\n        border-top: ${table.border['horizontal-outer'] ? borderHeader : 'none'};\n      }\n\n      tr th:first-of-type {\n        padding-inline-start: ${table.spacing['horizontal-outer'] ? horizontalSpacing : '0'};\n        border-inline-start: ${table.border['vertical-outer'] ? borderHeader : 'none'};\n      }\n\n      tr th:last-of-type {\n        padding-inline-end: ${table.spacing['horizontal-outer'] ? horizontalSpacing : '0'};\n        border-inline-end: ${table.border['vertical-outer'] ? borderHeader : 'none'};\n      }\n    }\n\n    tbody {\n      tr td {\n        padding: ${`${table.spacing['vertical-inner'] ? verticalSpacingBody : '0'} ${\n          table.spacing['horizontal-inner'] ? horizontalSpacing : '0'\n        }`};\n        border-bottom: ${table.border['horizontal-inner'] ? borderBody : 'none'};\n        border-inline-end: ${table.border['vertical-inner'] ? borderBody : 'none'};\n      }\n\n      tr:last-of-type td {\n        padding-bottom: ${table.spacing['vertical-outer'] ? verticalSpacingBody : '0'};\n        border-bottom: ${table.border['horizontal-outer'] ? borderBody : 'none'};\n      }\n\n      tr td:first-of-type {\n        padding-inline-start: ${table.spacing['horizontal-outer'] ? horizontalSpacing : '0'};\n        border-inline-start: ${table.border['vertical-outer'] ? borderBody : 'none'};\n      }\n\n      tr td:last-of-type {\n        padding-inline-end: ${table.spacing['horizontal-outer'] ? horizontalSpacing : '0'};\n        border-inline-end: ${table.border['vertical-outer'] ? borderBody : 'none'};\n      }\n    }\n\n    ${hoverHighlight &&\n    css`\n      tbody tr:hover td,\n      tbody tr:focus-within td {\n        background-color: ${hoverBg};\n      }\n    `}\n  `;\n});\n\nStyledTable.defaultProps = defaultThemeProp;\n\nconst StyledCell = styled.td<Pick<ColumnProps, 'align' | 'noWrap'>>(\n  ({ align, noWrap = false }) => css`\n    text-align: ${align || 'left'};\n    white-space: ${noWrap ? 'nowrap' : null};\n  `\n);\n\nStyledCell.defaultProps = defaultThemeProp;\n\nconst StyledHeaderCell = styled.th(\n  ({\n    theme: {\n      base: { 'font-size': fontSize, 'font-scale': fontScale },\n      components: {\n        table: { header }\n      }\n    }\n  }) => {\n    const fontSizes = calculateFontSize(fontSize, fontScale);\n\n    return css`\n      font-size: ${fontSizes[header['font-size'] as FontSize]};\n      font-weight: ${header['font-weight']};\n      color: ${header['foreground-color']};\n      background-color: ${header['background-color']};\n    `;\n  }\n);\n\nStyledHeaderCell.defaultProps = defaultThemeProp;\n\nconst StyledBodyCell = styled.td(\n  ({\n    theme: {\n      components: {\n        table: { body }\n      }\n    }\n  }) => css`\n    color: ${body['foreground-color']};\n    background-color: ${body['background-color']};\n  `\n);\n\nStyledBodyCell.defaultProps = defaultThemeProp;\n\nconst StyledEmptyCell = styled.td`\n  padding: calc(2 * ${props => props.theme.base.spacing});\n`;\n\nStyledEmptyCell.defaultProps = defaultThemeProp;\n\nconst StyledLoadingCell = styled.td`\n  position: relative;\n  height: 6rem;\n`;\n\nexport const StyledTableWrapper = styled.div`\n  /* Setting it on a table element requires 'display: block' which breaks a11y. */\n  overflow-x: auto;\n`;\n\nStyledTableWrapper.defaultProps = defaultThemeProp;\n\nconst StyledTableCaption = styled.caption`\n  ${hideVisually}\n`;\n\nStyledTableCaption.defaultProps = defaultThemeProp;\n\nconst Table = forwardRef(function Table(\n  props: PropsWithoutRef<TableProps>,\n  ref: Ref<HTMLTableElement>\n) {\n  const {\n    columns,\n    data = [],\n    hoverHighlight = false,\n    loading = false,\n    loadingMessage = '',\n    title,\n    ...restProps\n  } = props;\n\n  return (\n    <Card>\n      <CardContent container={{ rowGap: 1 }}>\n        {title && (\n          <Text variant='h2' as='span' aria-hidden>\n            {title}\n          </Text>\n        )}\n        <StyledTableWrapper>\n          <StyledTable ref={ref} hoverHighlight={hoverHighlight} {...restProps}>\n            {title && <StyledTableCaption>{title}</StyledTableCaption>}\n            <thead>\n              <tr>\n                {columns.map(col => (\n                  <StyledCell as={StyledHeaderCell} {...col} scope='col' key={col.label}>\n                    {col.label}\n                  </StyledCell>\n                ))}\n              </tr>\n            </thead>\n            <tbody>\n              {loading && (\n                <tr>\n                  <StyledLoadingCell colSpan={columns.length}>\n                    <Progress placement='local' message={loadingMessage} />\n                  </StyledLoadingCell>\n                </tr>\n              )}\n              {data.length > 0 &&\n                !loading &&\n                data.map(row => (\n                  <tr key={row.id}>\n                    {columns.map(({ renderer: Renderer, ...col }) => (\n                      <StyledCell as={StyledBodyCell} {...col} key={`${col.label}-${row.id}`}>\n                        {typeof Renderer === 'function' ? <Renderer {...row} /> : row[Renderer]}\n                      </StyledCell>\n                    ))}\n                  </tr>\n                ))}\n              {data.length === 0 && !loading && (\n                <tr>\n                  <StyledEmptyCell colSpan={columns.length}>\n                    <EmptyState />\n                  </StyledEmptyCell>\n                </tr>\n              )}\n            </tbody>\n          </StyledTable>\n        </StyledTableWrapper>\n      </CardContent>\n    </Card>\n  );\n}) as <RowData extends DefaultRowData = DefaultRowData>(\n  props: TableProps<RowData> & ForwardProps\n) => ReactElement | null;\n\nexport default Table;\n"]}
+{"version":3,"file":"Table.js","sourceRoot":"","sources":["../../../src/components/Table/Table.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef } from 'react';\nimport type { PropsWithoutRef, Ref, ReactNode, ReactElement, ComponentType } from 'react';\nimport styled, { css } from 'styled-components';\nimport { hideVisually } from 'polished';\n\nimport type { BaseProps, ForwardProps, NoChildrenProp, PropsWithDefaults } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport { calculateFontSize } from '../../styles';\nimport type { FontSize } from '../../styles';\nimport Progress from '../Progress';\nimport Text from '../Text';\nimport EmptyState from '../EmptyState';\nimport Card, { CardContent } from '../Card';\n\nexport interface DefaultRowData {\n  id: string | number;\n}\n\nexport interface ColumnProps<RowData extends DefaultRowData = DefaultRowData> {\n  /** Render cell content for a column with a component or by passing a property key on the row object to serve as an accessor. */\n  renderer: ComponentType<RowData> | keyof RowData;\n  /** The visual label for the column. */\n  label: string;\n  /**\n   * The text alignment of the column header and the row contents for the column.\n   * @default 'left'\n   */\n  align?: 'left' | 'center' | 'right';\n  /**\n   * If true, this column will not wrap text on overflow.\n   * @default false\n   */\n  noWrap?: boolean;\n}\n\nexport interface TableProps<RowData extends DefaultRowData = DefaultRowData>\n  extends BaseProps,\n    NoChildrenProp {\n  /** The column headers that will structure the Table. */\n  columns: ColumnProps<RowData>[];\n  /**\n   * The content of the Table, represented as an array of objects with key value pairs.\n   * @default []\n   */\n  data?: RowData[];\n  /**\n   * Should the data rows highlight when the mouse hovers over them.\n   * @default false\n   */\n  hoverHighlight?: boolean;\n  /**\n   * Indicates if the data to populate the Table is still loading.\n   * @default false\n   */\n  loading?: boolean;\n  /** A message to be displayed when Table data is loading. */\n  loadingMessage?: string;\n  /** The title that will render above the Table if provided. */\n  title?: ReactNode;\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLTableElement>;\n}\n\ntype TablePropsWithDefaults = PropsWithDefaults<TableProps, 'hoverHighlight' | 'loading'>;\n\nconst StyledTable = styled.table<Pick<TablePropsWithDefaults, 'hoverHighlight'>>(props => {\n  const {\n    hoverHighlight,\n    theme: {\n      base: {\n        palette: { 'secondary-background': hoverBg },\n        spacing\n      },\n      components: { table }\n    }\n  } = props;\n\n  const verticalSpacingHeader = `calc(${table.header['vertical-spacing']} * ${spacing})`;\n  const verticalSpacingBody = `calc(${table.body['vertical-spacing']} * ${spacing})`;\n  const horizontalSpacing = `calc(max(${table.header['horizontal-spacing']}, ${table.body['horizontal-spacing']}) * ${spacing})`;\n\n  const borderHeader = `${table.header['border-width']} solid ${table.header['border-color']}`;\n  const borderBody = `${table.body['border-width']} solid ${table.body['border-color']}`;\n\n  return css`\n    border-collapse: collapse;\n    width: 100%;\n    background-color: transparent;\n\n    thead {\n      tr th {\n        padding: ${`${table.spacing['vertical-inner'] ? verticalSpacingHeader : '0'} ${\n          table.spacing['horizontal-inner'] ? horizontalSpacing : '0'\n        }`};\n        border-bottom: ${table.border['horizontal-inner'] ? borderHeader : 'none'};\n        border-inline-end: ${table.border['vertical-inner'] ? borderHeader : 'none'};\n      }\n\n      tr:first-of-type th {\n        padding-top: ${table.spacing['vertical-outer'] ? verticalSpacingHeader : '0'};\n        border-top: ${table.border['horizontal-outer'] ? borderHeader : 'none'};\n      }\n\n      tr th:first-of-type {\n        padding-inline-start: ${table.spacing['horizontal-outer'] ? horizontalSpacing : '0'};\n        border-inline-start: ${table.border['vertical-outer'] ? borderHeader : 'none'};\n      }\n\n      tr th:last-of-type {\n        padding-inline-end: ${table.spacing['horizontal-outer'] ? horizontalSpacing : '0'};\n        border-inline-end: ${table.border['vertical-outer'] ? borderHeader : 'none'};\n      }\n    }\n\n    tbody {\n      tr td {\n        padding: ${`${table.spacing['vertical-inner'] ? verticalSpacingBody : '0'} ${\n          table.spacing['horizontal-inner'] ? horizontalSpacing : '0'\n        }`};\n        border-bottom: ${table.border['horizontal-inner'] ? borderBody : 'none'};\n        border-inline-end: ${table.border['vertical-inner'] ? borderBody : 'none'};\n      }\n\n      tr:last-of-type td {\n        padding-bottom: ${table.spacing['vertical-outer'] ? verticalSpacingBody : '0'};\n        border-bottom: ${table.border['horizontal-outer'] ? borderBody : 'none'};\n      }\n\n      tr td:first-of-type {\n        padding-inline-start: ${table.spacing['horizontal-outer'] ? horizontalSpacing : '0'};\n        border-inline-start: ${table.border['vertical-outer'] ? borderBody : 'none'};\n      }\n\n      tr td:last-of-type {\n        padding-inline-end: ${table.spacing['horizontal-outer'] ? horizontalSpacing : '0'};\n        border-inline-end: ${table.border['vertical-outer'] ? borderBody : 'none'};\n      }\n    }\n\n    ${hoverHighlight &&\n    css`\n      tbody tr:hover td,\n      tbody tr:focus-within td {\n        background-color: ${hoverBg};\n      }\n    `}\n  `;\n});\n\nStyledTable.defaultProps = defaultThemeProp;\n\nconst StyledCell = styled.td<Pick<ColumnProps, 'align' | 'noWrap'>>(\n  ({ align, noWrap = false }) => css`\n    text-align: ${align || 'left'};\n    white-space: ${noWrap ? 'nowrap' : null};\n  `\n);\n\nStyledCell.defaultProps = defaultThemeProp;\n\nconst StyledHeaderCell = styled.th(\n  ({\n    theme: {\n      base: { 'font-size': fontSize, 'font-scale': fontScale },\n      components: {\n        table: { header }\n      }\n    }\n  }) => {\n    const fontSizes = calculateFontSize(fontSize, fontScale);\n\n    return css`\n      font-size: ${fontSizes[header['font-size'] as FontSize]};\n      font-weight: ${header['font-weight']};\n      color: ${header['foreground-color']};\n      background-color: ${header['background-color']};\n    `;\n  }\n);\n\nStyledHeaderCell.defaultProps = defaultThemeProp;\n\nconst StyledBodyCell = styled.td(\n  ({\n    theme: {\n      components: {\n        table: { body }\n      }\n    }\n  }) => css`\n    color: ${body['foreground-color']};\n    background-color: ${body['background-color']};\n  `\n);\n\nStyledBodyCell.defaultProps = defaultThemeProp;\n\nconst StyledEmptyCell = styled.td`\n  padding: calc(2 * ${props => props.theme.base.spacing});\n`;\n\nStyledEmptyCell.defaultProps = defaultThemeProp;\n\nconst StyledLoadingCell = styled.td`\n  position: relative;\n  height: 6rem;\n`;\n\nexport const StyledTableWrapper = styled.div`\n  /* Setting it on a table element requires 'display: block' which breaks a11y. */\n  overflow-x: auto;\n`;\n\nStyledTableWrapper.defaultProps = defaultThemeProp;\n\nconst StyledTableCaption = styled.caption`\n  ${hideVisually}\n`;\n\nStyledTableCaption.defaultProps = defaultThemeProp;\n\n/** @deprecated */\nconst Table = forwardRef(function Table(\n  props: PropsWithoutRef<TableProps>,\n  ref: Ref<HTMLTableElement>\n) {\n  const {\n    columns,\n    data = [],\n    hoverHighlight = false,\n    loading = false,\n    loadingMessage = '',\n    title,\n    ...restProps\n  } = props;\n\n  return (\n    <Card>\n      <CardContent container={{ rowGap: 1 }}>\n        {title && (\n          <Text variant='h2' as='span' aria-hidden>\n            {title}\n          </Text>\n        )}\n        <StyledTableWrapper>\n          <StyledTable ref={ref} hoverHighlight={hoverHighlight} {...restProps}>\n            {title && <StyledTableCaption>{title}</StyledTableCaption>}\n            <thead>\n              <tr>\n                {columns.map(col => (\n                  <StyledCell as={StyledHeaderCell} {...col} scope='col' key={col.label}>\n                    {col.label}\n                  </StyledCell>\n                ))}\n              </tr>\n            </thead>\n            <tbody>\n              {loading && (\n                <tr>\n                  <StyledLoadingCell colSpan={columns.length}>\n                    <Progress placement='local' message={loadingMessage} />\n                  </StyledLoadingCell>\n                </tr>\n              )}\n              {data.length > 0 &&\n                !loading &&\n                data.map(row => (\n                  <tr key={row.id}>\n                    {columns.map(({ renderer: Renderer, ...col }) => (\n                      <StyledCell as={StyledBodyCell} {...col} key={`${col.label}-${row.id}`}>\n                        {typeof Renderer === 'function' ? <Renderer {...row} /> : row[Renderer]}\n                      </StyledCell>\n                    ))}\n                  </tr>\n                ))}\n              {data.length === 0 && !loading && (\n                <tr>\n                  <StyledEmptyCell colSpan={columns.length}>\n                    <EmptyState />\n                  </StyledEmptyCell>\n                </tr>\n              )}\n            </tbody>\n          </StyledTable>\n        </StyledTableWrapper>\n      </CardContent>\n    </Card>\n  );\n}) as <RowData extends DefaultRowData = DefaultRowData>(\n  props: TableProps<RowData> & ForwardProps\n) => ReactElement | null;\n\nexport default Table;\n"]}

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

@@ -1,6 +1,5 @@
 import type { Ref } from 'react';
 import type { ForwardRefForwardPropsComponent } from '../../types';
-import type { TabsContextValue } from './TabsContext';
 import type { TabsProps, Tab as TabType } from './Tabs.types';
 export interface TabProps {
     /** Indicates if this Tab is active. */
@@ -22,9 +21,9 @@ export interface StyledTabProps {
     selected: TabProps['selected'];
     tabType: TabProps['type'];
 }
-export declare const StyledTab: import("styled-components").StyledComponent<ForwardRefForwardPropsComponent<import("../Button/BareButton").BareButtonProps>, import("styled-components").DefaultTheme, StyledTabProps & {
-    level?: TabsContextValue["level"];
-}, never>;
+export declare const StyledTab: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<Omit<import("../Button/BareButton").BareButtonProps, "ref"> & import("react").RefAttributes<HTMLAnchorElement | HTMLButtonElement> & import("../../types").ForwardProps, "ref"> & {
+    ref?: ((instance: HTMLAnchorElement | HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLAnchorElement | HTMLButtonElement> | null | undefined;
+}, StyledTabProps>> & string & Omit<ForwardRefForwardPropsComponent<import("../Button/BareButton").BareButtonProps>, keyof import("react").Component<any, {}, any>>;
 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,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAalD,OAAO,KAAK,EAAE,+BAA+B,EAAE,MAAM,aAAa,CAAC;AAKnE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACtD,OAAO,KAAK,EAAE,SAAS,EAAE,GAAG,IAAI,OAAO,EAAE,MAAM,cAAc,CAAC;AAK9D,MAAM,WAAW,QAAQ;IACvB,uCAAuC;IACvC,QAAQ,EAAE,OAAO,CAAC;IAClB,kDAAkD;IAClD,OAAO,EAAE,MAAM,CAAC;IAChB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,OAAO,CAAC,OAAO,CAAC,CAAC;IACzB,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;AAsQD,eAAO,MAAM,SAAS;YAEV,gBAAgB,CAAC,OAAO,CAAC;SAmCpC,CAAC;AAIF,QAAA,MAAM,GAAG,EAAE,+BAA+B,CAAC,QAAQ,CAiDjD,CAAC;AAEH,eAAe,GAAG,CAAC"}
+{"version":3,"file":"Tab.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/Tab.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAalD,OAAO,KAAK,EAAE,+BAA+B,EAAE,MAAM,aAAa,CAAC;AAInE,OAAO,KAAK,EAAE,SAAS,EAAE,GAAG,IAAI,OAAO,EAAE,MAAM,cAAc,CAAC;AAK9D,MAAM,WAAW,QAAQ;IACvB,uCAAuC;IACvC,QAAQ,EAAE,OAAO,CAAC;IAClB,kDAAkD;IAClD,OAAO,EAAE,MAAM,CAAC;IAChB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,OAAO,CAAC,OAAO,CAAC,CAAC;IACzB,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;AAmPD,eAAO,MAAM,SAAS;;mKA6CrB,CAAC;AAIF,QAAA,MAAM,GAAG,EAAE,+BAA+B,CAAC,QAAQ,CA+CjD,CAAC;AAEH,eAAe,GAAG,CAAC"}

package/lib/components/Tabs/Tab.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useContext } from 'react';
+import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 import { meetsContrastGuidelines, mix, readableColor, transparentize } from 'polished';
 import { calculateForegroundColor, isSolidColor, readableHue } from '../../styles';
@@ -12,42 +12,15 @@ import { tryCatch } from '../../utils';
 import Count, { StyledCount } from '../Badges/Count';
 import BareButton from '../Button/BareButton';
 import HiddenText from '../HiddenText';
-import TabsContext from './TabsContext';
 import { StyledErrorIcon } from './Tabs.styles';
 registerIcon(warnSolidIcon);
-const activeStyle = (color) => css `
-  ::after {
-    display: block;
-    background-color: ${color};
-  }
-`;
-const getHorizontalUnselectedHoverStyle = ({ detached, level, opacity, color }) => level && level > 1 && !detached
-    ? 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: ${detached ? 0 : 'calc(0.5rem * 0.5)'};
-        border-start-end-radius: ${detached ? 0 : 'calc(0.5rem * 0.5)'};
-      `;
-const getHorizontalStyles = ({ selected, level, theme }) => {
+const getHorizontalStyles = ({ selected, theme }) => {
     const color = theme.components.button.color;
     const foreground = theme.base.palette['foreground-color'];
     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)) ?? '';
     // 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);
@@ -71,6 +44,9 @@ const getHorizontalStyles = ({ selected, level, theme }) => {
     padding: 0 calc(1.5 * ${spacing});
     border: none;
     text-decoration: none;
+    transition-property: background-color;
+    transition-duration: max(${theme.base.animation.speed}, 1ms);
+    transition-timing-function: ${theme.base.animation.timing.ease};
 
     @media (pointer: coarse) {
       height: ${theme.base['hit-area']['finger-min']};
@@ -79,8 +55,11 @@ const getHorizontalStyles = ({ selected, level, theme }) => {
     span:first-of-type {
       color: ${selected ? color : foreground};
       display: inline-block;
+      transition-property: color;
+      transition-duration: ${selected ? `max(${theme.base.animation.speed}, 1ms)` : '0s'};
+      transition-timing-function: ${theme.base.animation.timing.ease};
 
-      ::before {
+      &::before {
         content: attr(data-content) / '';
         display: block;
         font-weight: bold;
@@ -91,61 +70,45 @@ 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});
+      margin-inline-start: 0;
     }
 
-    ${!selected
-        ? css `
-          @media (hover: hover) {
-            &:not(:disabled):hover {
-              text-decoration: none;
-              ${getHorizontalUnselectedHoverStyle({
-            detached: tabsDetached,
-            level,
-            opacity: 0.1,
-            color: hoverBackgroundColor
-        })}
-            }
+    ${!selected &&
+        css `
+      @media (hover: hover) {
+        &:not(:disabled):hover {
+          text-decoration: none;
+          background-color: ${hoverBackgroundColor};
+        }
 
-            &:not(:disabled):active {
-              text-decoration: none;
-              ${getHorizontalUnselectedHoverStyle({
-            detached: tabsDetached,
-            level,
-            opacity: 0.2,
-            color: activeBackgroundColor
-        })}
-            }
-          }
-        `
-        : css `
-          ${level &&
-            level > 1 &&
-            css `
-            background-color: ${theme.base.palette['primary-background']};
-          `}
-        `}
+        &:not(:disabled):active {
+          text-decoration: none;
+          background-color: ${activeBackgroundColor};
+        }
+      }
+    `}
 
-    &:focus,
-    &:not([disabled]):focus {
-      border-radius: calc(0.5rem * 0.5);
-      box-shadow: ${theme.base.shadow['focus-inset']};
+    &:focus-visible,
+    &:not(:disabled):focus-visible {
       text-decoration: none;
-      ::after {
-        display: none;
+      outline: none;
+
+      &::after {
+        content: '';
+        position: absolute;
+        inset: 0;
+        border-radius: calc(0.5rem * 0.5);
+        box-shadow: ${theme.base.shadow['focus-inset']};
+        pointer-events: none;
+        z-index: 3;
       }
     }
 
+    &:first-child:focus-visible::after,
+    &:first-child:not(:disabled):focus-visible::after {
+      border-start-start-radius: var(--border-radius, ${theme.base['border-radius']});
+    }
+
     @media (pointer: coarse) {
       min-block-size: ${theme.base['hit-area'].finger};
     }
@@ -157,8 +120,8 @@ const getHorizontalStyles = ({ selected, level, theme }) => {
     ${tabsDetached &&
         css `
       &[aria-selected='true'],
-      &:focus,
-      &:not([disabled]):focus {
+      &:focus-visible,
+      &:not([disabled]):focus-visible {
         color: ${activeTabColor};
         span:first-of-type {
           color: ${activeTabColor};
@@ -176,18 +139,18 @@ const getHorizontalStyles = ({ selected, level, theme }) => {
     `}
   `;
 };
-const getVerticalStyles = ({ selected, theme }) => {
+const getVerticalStyles = ({ theme, selected }) => {
     const { detached: tabsDetached } = theme.components.tabs;
-    const borderColor = theme.base.palette['border-line'];
     const interactive = theme.base.palette.interactive;
     const foreground = theme.base.palette['foreground-color'];
     const secondary = theme.base.palette['secondary-background'];
-    const lightenedColor = tryCatch(() => transparentize(tabsDetached ? 0.95 : 0.5, tabsDetached ? foreground : interactive)) ?? '';
     const { spacing } = theme.base;
+    const lightenedColor = tryCatch(() => transparentize(tabsDetached ? 0.95 : 0.5, tabsDetached ? foreground : interactive)) ?? '';
     const activeTabBg = tabsDetached ? secondary : transparentize(0.75, interactive);
     const activeTabColor = tabsDetached
         ? interactive
         : calculateForegroundColor(activeTabBg, foreground);
+    const borderColor = theme.base.palette['border-line'];
     return css `
     display: flex;
     justify-content: space-between;
@@ -200,66 +163,109 @@ const getVerticalStyles = ({ selected, theme }) => {
     margin-top: -0.0625rem;
     padding: 0 calc(2 * ${spacing});
     text-decoration: none;
+    transition-property: ${selected ? 'color, font-weight, background-color' : 'background-color'};
+    transition-duration: max(${theme.base.animation.speed}, 1ms);
+    transition-timing-function: ${theme.base.animation.timing.ease};
 
     &:first-child {
       border-top: 0.0625rem solid ${tabsDetached ? 'transparent' : borderColor};
     }
-    ::after {
+
+    &::before {
       content: '';
       position: absolute;
-      display: ${selected ? 'block' : 'none'};
-      top: 0;
-      bottom: 0;
-      ${tabsDetached ? 'left: 0;' : 'right: 0;'}
+      ${tabsDetached ? 'inset-inline-start: 0;' : 'inset-inline-end: 0;'}
+      inset-block-start: 0;
+      inset-block-end: 0;
       width: 0.25rem;
-      background: ${interactive};
+      background: ${lightenedColor};
+      pointer-events: none;
+      z-index: 2;
+      opacity: 0;
+      transition-property: opacity;
+      transition-duration: max(${theme.base.animation.speed}, 1ms);
+      transition-timing-function: ${theme.base.animation.timing.ease};
     }
-    &:hover&:not(:disabled) {
-      ${activeStyle(lightenedColor)}
-      text-decoration: none;
+
+    &:active {
+      background: none;
+    }
+
+    &:active::before {
+      opacity: 1;
     }
 
-    &:focus,
-    &:not([disabled]):focus {
-      ${activeStyle(interactive)}
-      box-shadow: inset 0 0 0 0.0625rem ${interactive};
+    &:hover:not(:disabled)::before {
+      opacity: 1;
+    }
+
+    &:focus-visible,
+    &:not(:disabled):focus-visible {
       text-decoration: none;
+      outline: none;
+
+      &::after {
+        content: '';
+        position: absolute;
+        inset: 0;
+        box-shadow: inset 0 0 0 0.0625rem ${interactive};
+        pointer-events: none;
+        z-index: 3;
+      }
     }
 
     ${tabsDetached &&
         css `
       border-radius: calc(0.5 * ${theme.base['border-radius']});
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
+      border-start-start-radius: 0;
+      border-end-start-radius: 0;
       margin: calc(0.125 * ${spacing}) calc(2 * ${spacing});
 
-      &:not([disabled]):focus,
+      &:focus-visible::after,
+      &:not(:disabled):focus-visible::after {
+        border-radius: calc(0.5 * ${theme.base['border-radius']});
+        border-start-start-radius: 0;
+        border-end-start-radius: 0;
+      }
+
+      &:not(:disabled):focus-visible,
       &[aria-selected='true'] {
-        background: ${activeTabBg};
         color: ${activeTabColor};
       }
-      &:hover&:not(:disabled):not([aria-selected='true']) {
+      &:hover:not(:disabled):not([aria-selected='true']) {
         background: ${lightenedColor};
       }
     `}
   `;
 };
-export const StyledTab = styled(BareButton)(({ theme, tabType, selected, level }) => css `
+export const StyledTab = styled(BareButton)(({ theme, tabType, selected }) => css `
     position: relative;
-    background: none;
     cursor: pointer;
     white-space: nowrap;
 
+    > * {
+      position: relative;
+      z-index: 1;
+    }
+
     ${selected &&
     css `
       font-weight: bold;
+      transition-property: font-weight;
+      transition-duration: max(${theme.base.animation.speed}, 1ms);
+      transition-timing-function: ${theme.base.animation.timing.ease};
+    `}
+
+    ${!selected &&
+    css `
+      transition: font-weight 0s;
     `}
 
     & + & {
       margin-inline-start: 0;
     }
 
-    &:focus {
+    &:focus-visible {
       outline: none;
     }
 
@@ -269,7 +275,7 @@ export const StyledTab = styled(BareButton)(({ theme, tabType, selected, level }
     }
 
     ${tabType === 'horizontal'
-    ? getHorizontalStyles({ theme, selected, level })
+    ? getHorizontalStyles({ theme, selected })
     : getVerticalStyles({ theme, selected })}
 
     ${StyledErrorIcon} {
@@ -281,7 +287,6 @@ const Tab = forwardRef(function Tab({ selected, content, count, type, disabled,
     const t = useI18n();
     const [tabEl, setTabEl] = useElement();
     const tabRef = useConsolidatedRef(ref, setTabEl);
-    const { level } = useContext(TabsContext);
     const countDescID = useUID();
     const errorDescID = useUID();
     const commaDescID = useUID();
@@ -295,7 +300,7 @@ const Tab = forwardRef(function Tab({ selected, content, count, type, disabled,
     if (errors) {
         describedBy.push(errorDescID);
     }
-    return (_jsxs(StyledTab, { ref: tabRef, selected: selected, tabType: type, disabled: disabled, level: level, "aria-describedby": describedBy.length > 0 ? describedBy.join(' ') : undefined, ...restProps, children: [_jsxs("span", { children: [!!errors && (_jsxs(_Fragment, { children: [_jsx(StyledErrorIcon, { name: 'warn-solid' }), _jsx(Tooltip, { target: tabEl, hideDelay: 'none', showDelay: 'none', describeTarget: false, children: t('tab_error_tooltip', [content]) }), _jsx(HiddenText, { id: errorDescID, children: t('tab_error_description') })] })), _jsx("span", { "data-content": content, children: content })] }), typeof count === 'number' && _jsx(Count, { id: countDescID, children: count }), typeof count === 'number' && errors && _jsx(HiddenText, { id: commaDescID, children: "," })] }));
+    return (_jsxs(StyledTab, { ref: tabRef, selected: selected, tabType: type, disabled: disabled, "aria-describedby": describedBy.length > 0 ? describedBy.join(' ') : undefined, ...restProps, children: [_jsxs("span", { children: [!!errors && (_jsxs(_Fragment, { children: [_jsx(StyledErrorIcon, { name: 'warn-solid' }), _jsx(Tooltip, { target: tabEl, hideDelay: 'none', showDelay: 'none', describeTarget: false, children: t('tab_error_tooltip', [content]) }), _jsx(HiddenText, { id: errorDescID, children: t('tab_error_description') })] })), _jsx("span", { "data-content": content, children: content })] }), typeof count === 'number' && _jsx(Count, { id: countDescID, children: count }), typeof count === 'number' && errors && _jsx(HiddenText, { id: commaDescID, children: "," })] }));
 });
 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, useContext } from 'react';\nimport type { 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 { calculateForegroundColor, isSolidColor, readableHue } from '../../styles';\nimport * as warnSolidIcon from '../Icon/icons/warn-solid.icon';\nimport { registerIcon } from '../Icon';\nimport { useConsolidatedRef, useElement, useI18n, useUID } from '../../hooks';\nimport Tooltip from '../Tooltip';\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch } from '../../utils';\nimport Count, { StyledCount } from '../Badges/Count';\nimport type { ForwardRefForwardPropsComponent } from '../../types';\nimport BareButton from '../Button/BareButton';\nimport HiddenText from '../HiddenText';\n\nimport TabsContext from './TabsContext';\nimport type { TabsContextValue } from './TabsContext';\nimport type { TabsProps, Tab as TabType } 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?: TabType['count'];\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  detached,\n  level,\n  opacity,\n  color\n}: { level?: TabsContextValue['level'] } & {\n  detached?: boolean;\n  color?: string;\n  opacity: number;\n}) =>\n  level && level > 1 && !detached\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: ${detached ? 0 : 'calc(0.5rem * 0.5)'};\n        border-start-end-radius: ${detached ? 0 : '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 foreground = theme.base.palette['foreground-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 = tabsDetached\n    ? tryCatch(() => transparentize(0.95, foreground))\n    : tryCatch(() => mix(0.9, fallbackBackground, usableColor));\n  const activeBackgroundColor = tabsDetached\n    ? theme.base.palette['secondary-background']\n    : tryCatch(() => mix(0.8, fallbackBackground, usableColor));\n\n  const { spacing } = theme.base;\n\n  let activeTabColor = theme.base.palette.interactive;\n  if (!meetsContrastGuidelines(activeTabColor, fallbackBackground).AA) {\n    activeTabColor = readableHue(activeTabColor, fallbackBackground);\n  }\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 : foreground};\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    ::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                detached: tabsDetached,\n                level,\n                opacity: 0.1,\n                color: hoverBackgroundColor\n              })}\n            }\n\n            &:not(:disabled):active {\n              text-decoration: none;\n              ${getHorizontalUnselectedHoverStyle({\n                detached: tabsDetached,\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        color: ${activeTabColor};\n        span:first-of-type {\n          color: ${activeTabColor};\n        }\n        background: ${activeBackgroundColor};\n      }\n      &:hover:not(:disabled):not([aria-selected='true']) {\n        background: ${hoverBackgroundColor};\n        border-radius: 0;\n        color: ${foreground};\n        span:first-of-type {\n          color: ${foreground};\n        }\n      }\n    `}\n  `;\n};\n\nconst getVerticalStyles = ({\n  selected,\n  theme\n}: Pick<StyledProps<StyledTabProps>, 'theme' | 'selected'>) => {\n  const { detached: tabsDetached } = theme.components.tabs;\n  const borderColor = theme.base.palette['border-line'];\n  const interactive = theme.base.palette.interactive;\n  const foreground = theme.base.palette['foreground-color'];\n  const secondary = theme.base.palette['secondary-background'];\n  const lightenedColor =\n    tryCatch(() =>\n      transparentize(tabsDetached ? 0.95 : 0.5, tabsDetached ? foreground : interactive)\n    ) ?? '';\n  const { spacing } = theme.base;\n  const activeTabBg = tabsDetached ? secondary : transparentize(0.75, interactive);\n  const activeTabColor = tabsDetached\n    ? interactive\n    : calculateForegroundColor(activeTabBg, foreground);\n\n  return css`\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    border-style: solid;\n    color: ${foreground};\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    ::after {\n      content: '';\n      position: absolute;\n      display: ${selected ? 'block' : 'none'};\n      top: 0;\n      bottom: 0;\n      ${tabsDetached ? 'left: 0;' : 'right: 0;'}\n      width: 0.25rem;\n      background: ${interactive};\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      border-top-left-radius: 0;\n      border-bottom-left-radius: 0;\n      margin: calc(0.125 * ${spacing}) calc(2 * ${spacing});\n\n      &:not([disabled]):focus,\n      &[aria-selected='true'] {\n        background: ${activeTabBg};\n        color: ${activeTabColor};\n      }\n      &:hover&:not(:disabled):not([aria-selected='true']) {\n        background: ${lightenedColor};\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  const countDescID = useUID();\n  const errorDescID = useUID();\n  const commaDescID = useUID();\n\n  const describedBy: string[] = [];\n  if (typeof count === 'number') {\n    describedBy.push(countDescID);\n  }\n  if (typeof count === 'number' && errors) {\n    describedBy.push(commaDescID);\n  }\n  if (errors) {\n    describedBy.push(errorDescID);\n  }\n\n  return (\n    <StyledTab\n      ref={tabRef}\n      selected={selected}\n      tabType={type}\n      disabled={disabled}\n      level={level}\n      aria-describedby={describedBy.length > 0 ? describedBy.join(' ') : undefined}\n      {...restProps}\n    >\n      <span>\n        {!!errors && (\n          <>\n            <StyledErrorIcon name='warn-solid' />\n            <Tooltip target={tabEl} hideDelay='none' showDelay='none' describeTarget={false}>\n              {t('tab_error_tooltip', [content])}\n            </Tooltip>\n            <HiddenText id={errorDescID}>{t('tab_error_description')}</HiddenText>\n          </>\n        )}\n        <span data-content={content}>{content}</span>\n      </span>\n      {typeof count === 'number' && <Count id={countDescID}>{count}</Count>}\n      {typeof count === 'number' && errors && <HiddenText id={commaDescID}>,</HiddenText>}\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 } from 'react';\nimport type { PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\nimport type { DefaultTheme } from 'styled-components';\nimport { meetsContrastGuidelines, mix, readableColor, transparentize } from 'polished';\n\nimport { calculateForegroundColor, isSolidColor, readableHue } from '../../styles';\nimport * as warnSolidIcon from '../Icon/icons/warn-solid.icon';\nimport { registerIcon } from '../Icon';\nimport { useConsolidatedRef, useElement, useI18n, useUID } from '../../hooks';\nimport Tooltip from '../Tooltip';\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch } from '../../utils';\nimport Count, { StyledCount } from '../Badges/Count';\nimport type { ForwardRefForwardPropsComponent } from '../../types';\nimport BareButton from '../Button/BareButton';\nimport HiddenText from '../HiddenText';\n\nimport type { TabsProps, Tab as TabType } 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?: TabType['count'];\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 getHorizontalStyles = ({\n  selected,\n  theme\n}: Pick<StyledTabProps, 'selected'> & { theme: DefaultTheme }) => {\n  const color = theme.components.button.color;\n  const foreground = theme.base.palette['foreground-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\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 = tabsDetached\n    ? tryCatch(() => transparentize(0.95, foreground))\n    : tryCatch(() => mix(0.9, fallbackBackground, usableColor));\n  const activeBackgroundColor = tabsDetached\n    ? theme.base.palette['secondary-background']\n    : tryCatch(() => mix(0.8, fallbackBackground, usableColor));\n\n  const { spacing } = theme.base;\n\n  let activeTabColor = theme.base.palette.interactive;\n  if (!meetsContrastGuidelines(activeTabColor, fallbackBackground).AA) {\n    activeTabColor = readableHue(activeTabColor, fallbackBackground);\n  }\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    transition-property: background-color;\n    transition-duration: max(${theme.base.animation.speed}, 1ms);\n    transition-timing-function: ${theme.base.animation.timing.ease};\n\n    @media (pointer: coarse) {\n      height: ${theme.base['hit-area']['finger-min']};\n    }\n\n    span:first-of-type {\n      color: ${selected ? color : foreground};\n      display: inline-block;\n      transition-property: color;\n      transition-duration: ${selected ? `max(${theme.base.animation.speed}, 1ms)` : '0s'};\n      transition-timing-function: ${theme.base.animation.timing.ease};\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-inline-start: 0;\n    }\n\n    ${!selected &&\n    css`\n      @media (hover: hover) {\n        &:not(:disabled):hover {\n          text-decoration: none;\n          background-color: ${hoverBackgroundColor};\n        }\n\n        &:not(:disabled):active {\n          text-decoration: none;\n          background-color: ${activeBackgroundColor};\n        }\n      }\n    `}\n\n    &:focus-visible,\n    &:not(:disabled):focus-visible {\n      text-decoration: none;\n      outline: none;\n\n      &::after {\n        content: '';\n        position: absolute;\n        inset: 0;\n        border-radius: calc(0.5rem * 0.5);\n        box-shadow: ${theme.base.shadow['focus-inset']};\n        pointer-events: none;\n        z-index: 3;\n      }\n    }\n\n    &:first-child:focus-visible::after,\n    &:first-child:not(:disabled):focus-visible::after {\n      border-start-start-radius: var(--border-radius, ${theme.base['border-radius']});\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-visible,\n      &:not([disabled]):focus-visible {\n        color: ${activeTabColor};\n        span:first-of-type {\n          color: ${activeTabColor};\n        }\n        background: ${activeBackgroundColor};\n      }\n      &:hover:not(:disabled):not([aria-selected='true']) {\n        background: ${hoverBackgroundColor};\n        border-radius: 0;\n        color: ${foreground};\n        span:first-of-type {\n          color: ${foreground};\n        }\n      }\n    `}\n  `;\n};\n\nconst getVerticalStyles = ({\n  theme,\n  selected\n}: Pick<StyledTabProps, 'selected'> & { theme: DefaultTheme }) => {\n  const { detached: tabsDetached } = theme.components.tabs;\n  const interactive = theme.base.palette.interactive;\n  const foreground = theme.base.palette['foreground-color'];\n  const secondary = theme.base.palette['secondary-background'];\n  const { spacing } = theme.base;\n  const lightenedColor =\n    tryCatch(() =>\n      transparentize(tabsDetached ? 0.95 : 0.5, tabsDetached ? foreground : interactive)\n    ) ?? '';\n  const activeTabBg = tabsDetached ? secondary : transparentize(0.75, interactive);\n  const activeTabColor = tabsDetached\n    ? interactive\n    : calculateForegroundColor(activeTabBg, foreground);\n\n  const borderColor = theme.base.palette['border-line'];\n\n  return css`\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    border-style: solid;\n    color: ${foreground};\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    transition-property: ${selected ? 'color, font-weight, background-color' : 'background-color'};\n    transition-duration: max(${theme.base.animation.speed}, 1ms);\n    transition-timing-function: ${theme.base.animation.timing.ease};\n\n    &:first-child {\n      border-top: 0.0625rem solid ${tabsDetached ? 'transparent' : borderColor};\n    }\n\n    &::before {\n      content: '';\n      position: absolute;\n      ${tabsDetached ? 'inset-inline-start: 0;' : 'inset-inline-end: 0;'}\n      inset-block-start: 0;\n      inset-block-end: 0;\n      width: 0.25rem;\n      background: ${lightenedColor};\n      pointer-events: none;\n      z-index: 2;\n      opacity: 0;\n      transition-property: opacity;\n      transition-duration: max(${theme.base.animation.speed}, 1ms);\n      transition-timing-function: ${theme.base.animation.timing.ease};\n    }\n\n    &:active {\n      background: none;\n    }\n\n    &:active::before {\n      opacity: 1;\n    }\n\n    &:hover:not(:disabled)::before {\n      opacity: 1;\n    }\n\n    &:focus-visible,\n    &:not(:disabled):focus-visible {\n      text-decoration: none;\n      outline: none;\n\n      &::after {\n        content: '';\n        position: absolute;\n        inset: 0;\n        box-shadow: inset 0 0 0 0.0625rem ${interactive};\n        pointer-events: none;\n        z-index: 3;\n      }\n    }\n\n    ${tabsDetached &&\n    css`\n      border-radius: calc(0.5 * ${theme.base['border-radius']});\n      border-start-start-radius: 0;\n      border-end-start-radius: 0;\n      margin: calc(0.125 * ${spacing}) calc(2 * ${spacing});\n\n      &:focus-visible::after,\n      &:not(:disabled):focus-visible::after {\n        border-radius: calc(0.5 * ${theme.base['border-radius']});\n        border-start-start-radius: 0;\n        border-end-start-radius: 0;\n      }\n\n      &:not(:disabled):focus-visible,\n      &[aria-selected='true'] {\n        color: ${activeTabColor};\n      }\n      &:hover:not(:disabled):not([aria-selected='true']) {\n        background: ${lightenedColor};\n      }\n    `}\n  `;\n};\n\nexport const StyledTab = styled(BareButton)<StyledTabProps>(\n  ({ theme, tabType, selected }) => css`\n    position: relative;\n    cursor: pointer;\n    white-space: nowrap;\n\n    > * {\n      position: relative;\n      z-index: 1;\n    }\n\n    ${selected &&\n    css`\n      font-weight: bold;\n      transition-property: font-weight;\n      transition-duration: max(${theme.base.animation.speed}, 1ms);\n      transition-timing-function: ${theme.base.animation.timing.ease};\n    `}\n\n    ${!selected &&\n    css`\n      transition: font-weight 0s;\n    `}\n\n    & + & {\n      margin-inline-start: 0;\n    }\n\n    &:focus-visible {\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: 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<HTMLButtonElement | HTMLAnchorElement>();\n  const tabRef = useConsolidatedRef(ref, setTabEl);\n  const countDescID = useUID();\n  const errorDescID = useUID();\n  const commaDescID = useUID();\n\n  const describedBy: string[] = [];\n  if (typeof count === 'number') {\n    describedBy.push(countDescID);\n  }\n  if (typeof count === 'number' && errors) {\n    describedBy.push(commaDescID);\n  }\n  if (errors) {\n    describedBy.push(errorDescID);\n  }\n\n  return (\n    <StyledTab\n      ref={tabRef}\n      selected={selected}\n      tabType={type}\n      disabled={disabled}\n      aria-describedby={describedBy.length > 0 ? describedBy.join(' ') : undefined}\n      {...restProps}\n    >\n      <span>\n        {!!errors && (\n          <>\n            <StyledErrorIcon name='warn-solid' />\n            <Tooltip target={tabEl} hideDelay='none' showDelay='none' describeTarget={false}>\n              {t('tab_error_tooltip', [content])}\n            </Tooltip>\n            <HiddenText id={errorDescID}>{t('tab_error_description')}</HiddenText>\n          </>\n        )}\n        <span data-content={content}>{content}</span>\n      </span>\n      {typeof count === 'number' && <Count id={countDescID}>{count}</Count>}\n      {typeof count === 'number' && errors && <HiddenText id={commaDescID}>,</HiddenText>}\n    </StyledTab>\n  );\n});\n\nexport default Tab;\n"]}