@pega/cosmos-react-core 4.0.0-dev.23.0 → 4.0.0-dev.24.0

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

@@ -1 +1 @@
-{"version":3,"file":"ViewAll.js","sourceRoot":"","sources":["../../../src/components/SummaryList/ViewAll.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, Ref, FC, useState } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Actions from '../Actions';\nimport Flex from '../Flex';\nimport EmptyState from '../EmptyState';\nimport SearchInput, { SearchInputProps, StyledSearchInput } from '../SearchInput';\nimport { defaultThemeProp } from '../../theme';\nimport Progress from '../Progress';\nimport { StyledCard } from '../Card';\nimport { StyledCardContent } from '../Card/CardContent';\nimport { omitProps } from '../../styles';\nimport type { ForwardProps } from '../../types';\n\nimport SummaryList, { SummaryListProps } from './SummaryList';\n\nexport interface ViewAllProps extends Pick<SummaryListProps, 'loading' | 'actions' | 'items'> {\n  searchInputProps?: SearchInputProps;\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst StyledToolbar = styled.div(({ theme: { base } }) => {\n  return css`\n    position: sticky;\n    top: 0;\n    z-index: 1;\n    background-color: ${base.palette['primary-background']};\n    margin-bottom: ${base.spacing};\n    transform: translateY(calc(-0.5 * ${base.spacing}));\n    padding: ${base.spacing} 0;\n\n    ${StyledSearchInput} {\n      flex-grow: 1;\n    }\n  `;\n});\n\nStyledToolbar.defaultProps = defaultThemeProp;\n\nexport const StyledViewAll = styled.div.withConfig<{ loading: ViewAllProps['loading'] }>(\n  omitProps('loading')\n)(\n  ({ loading }) => css`\n    ${StyledCardContent}:not(${StyledCard} ${StyledCard} > ${StyledCardContent}) {\n      padding: 0;\n    }\n\n    ${loading &&\n    css`\n      min-height: 8rem;\n    `}\n  `\n);\n\nconst SearchableList: FC<ViewAllProps & ForwardProps> = forwardRef(\n  ({ loading, actions, items, searchInputProps, ...restProps }, ref: ViewAllProps['ref']) => {\n    const [searchValue, setSearchValue] = useState<SearchInputProps['value']>('');\n    return (\n      <StyledViewAll ref={ref} loading={loading} {...restProps}>\n        {!loading && (searchInputProps || actions) && (\n          <Flex container={{ justify: 'between', alignItems: 'center', gap: 2 }} as={StyledToolbar}>\n            {searchInputProps && (\n              <Flex container={{ alignItems: 'center', gap: 1 }} item={{ grow: 1 }}>\n                <SearchInput\n                  onSearchChange={val => {\n                    searchInputProps.onSearchChange?.(val);\n                    setSearchValue(val);\n                  }}\n                  value={searchInputProps.value || searchValue}\n                />\n              </Flex>\n            )}\n            {actions && <Actions iconOnly={false} items={actions} />}\n          </Flex>\n        )}\n\n        {loading && <Progress placement='local' />}\n        {!loading && (items.length ? <SummaryList items={items} /> : <EmptyState />)}\n      </StyledViewAll>\n    );\n  }\n);\n\nexport default SearchableList;\n"]}
+{"version":3,"file":"ViewAll.js","sourceRoot":"","sources":["../../../src/components/SummaryList/ViewAll.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, Ref, FC, useState } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Actions from '../Actions';\nimport Flex from '../Flex';\nimport EmptyState from '../EmptyState';\nimport SearchInput, { SearchInputProps, StyledSearchInput } from '../SearchInput';\nimport { defaultThemeProp } from '../../theme';\nimport Progress from '../Progress';\nimport { StyledCard } from '../Card';\nimport { StyledCardContent } from '../Card/CardContent';\nimport { omitProps } from '../../styles';\nimport type { ForwardProps } from '../../types';\n\nimport SummaryList, { SummaryListProps } from './SummaryList';\n\nexport interface ViewAllProps extends Pick<SummaryListProps, 'loading' | 'actions' | 'items'> {\n  searchInputProps?: SearchInputProps;\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst StyledToolbar = styled.div(({ theme: { base } }) => {\n  return css`\n    position: sticky;\n    top: 0;\n    z-index: 1;\n    background-color: ${base.palette['primary-background']};\n    margin-bottom: ${base.spacing};\n    transform: translateY(calc(-0.5 * ${base.spacing}));\n    padding: ${base.spacing} 0;\n\n    ${StyledSearchInput} {\n      flex-grow: 1;\n    }\n  `;\n});\n\nStyledToolbar.defaultProps = defaultThemeProp;\n\nexport const StyledViewAll = styled.div.withConfig<{ loading: ViewAllProps['loading'] }>(\n  omitProps('loading')\n)(\n  ({ loading }) => css`\n    ${StyledCardContent}:not(${StyledCard} ${StyledCard} > ${StyledCardContent}) {\n      padding: 0;\n    }\n\n    ${loading &&\n    css`\n      min-height: 8rem;\n    `}\n  `\n);\n\nconst SearchableList: FC<ViewAllProps & ForwardProps> = forwardRef(function SearchableList(\n  { loading, actions, items, searchInputProps, ...restProps },\n  ref: ViewAllProps['ref']\n) {\n  const [searchValue, setSearchValue] = useState<SearchInputProps['value']>('');\n  return (\n    <StyledViewAll ref={ref} loading={loading} {...restProps}>\n      {!loading && (searchInputProps || actions) && (\n        <Flex container={{ justify: 'between', alignItems: 'center', gap: 2 }} as={StyledToolbar}>\n          {searchInputProps && (\n            <Flex container={{ alignItems: 'center', gap: 1 }} item={{ grow: 1 }}>\n              <SearchInput\n                onSearchChange={val => {\n                  searchInputProps.onSearchChange?.(val);\n                  setSearchValue(val);\n                }}\n                value={searchInputProps.value || searchValue}\n              />\n            </Flex>\n          )}\n          {actions && <Actions iconOnly={false} items={actions} />}\n        </Flex>\n      )}\n\n      {loading && <Progress placement='local' />}\n      {!loading && (items.length ? <SummaryList items={items} /> : <EmptyState />)}\n    </StyledViewAll>\n  );\n});\n\nexport default SearchableList;\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../src/components/Switch/Switch.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAc,iBAAiB,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAIzF,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAE3E,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAUlD,MAAM,WAAW,WAAY,SAAQ,SAAS,EAAE,cAAc;IAC5D;;;OAGG;IACH,EAAE,CAAC,EAAE,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAC5B,2DAA2D;IAC3D,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC;;;OAGG;IACH,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC;;;OAGG;IACH,EAAE,CAAC,EAAE,OAAO,CAAC;IACb,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACtD,iCAAiC;IACjC,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B;AAED,eAAO,MAAM,WAAW,2GAwEvB,CAAC;AAIF,eAAO,MAAM,WAAW,2GAkEvB,CAAC;AAIF,eAAO,MAAM,YAAY,yGAAe,CAAC;AAEzC,QAAA,MAAM,MAAM,EAAE,iBAAiB,CAAC,WAAW,GAAG,YAAY,CAyBzD,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../src/components/Switch/Switch.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAc,iBAAiB,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAIzF,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAE3E,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAUlD,MAAM,WAAW,WAAY,SAAQ,SAAS,EAAE,cAAc;IAC5D;;;OAGG;IACH,EAAE,CAAC,EAAE,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAC5B,2DAA2D;IAC3D,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC;;;OAGG;IACH,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC;;;OAGG;IACH,EAAE,CAAC,EAAE,OAAO,CAAC;IACb,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACtD,iCAAiC;IACjC,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B;AAED,eAAO,MAAM,WAAW,2GAwEvB,CAAC;AAIF,eAAO,MAAM,WAAW,2GAkEvB,CAAC;AAIF,eAAO,MAAM,YAAY,yGAAe,CAAC;AAEzC,QAAA,MAAM,MAAM,EAAE,iBAAiB,CAAC,WAAW,GAAG,YAAY,CA0BxD,CAAC;AAEH,eAAe,MAAM,CAAC"}

package/lib/components/Switch/Switch.js

@@ -129,7 +129,7 @@ export const SwitchInput = styled.input(({ theme: { base, components: { 'form-co
 });
 SwitchInput.defaultProps = defaultThemeProp;
 export const StyledSwitch = styled.div ``;
-const Switch = forwardRef((props, ref) => {
+const Switch = forwardRef(function Switch(props, ref) {
     const uid = useUID();
     const { id = uid, label, disabled = false, on = false, onChange, ...restProps } = props;
     return (_jsxs(StyledSwitch, { children: [_jsx(SwitchInput, { ...restProps, id: id, type: 'checkbox', role: 'switch', checked: on, "aria-checked": on, disabled: disabled, onChange: onChange, ref: ref }), _jsxs(Flex, { container: { alignItems: 'center' }, as: SwitchLabel, htmlFor: id, children: [label, on && _jsx(Icon, { name: 'check' })] })] }));

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

@@ -1 +1 @@
-{"version":3,"file":"Switch.js","sourceRoot":"","sources":["../../../src/components/Switch/Switch.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAe,UAAU,EAA2C,MAAM,OAAO,CAAC;AACzF,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAGvD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,OAAO,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,IAAI,EAAE,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AACzD,OAAO,KAAK,SAAS,MAAM,0BAA0B,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAEvC,YAAY,CAAC,SAAS,CAAC,CAAC;AA0BxB,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,KAAK,CACrC,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EACJ,UAAU,EAAE,EACV,MAAM,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,aAAa,EAAE,UAAU,EAAE,cAAc,EAAE,WAAW,EAAE,GAAG,EAAE,EACvF,EACF,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;;;iCAGmB,KAAK;gBACtB,MAAM;;;;mCAIa,UAAU;kBAC3B,WAAW;;;;YAIjB,UAAU;;uCAEiB,KAAK;6BACf,MAAM;4BACP,MAAM;;;yCAGO,UAAU;+BACpB,WAAW;8BACZ,WAAW;;;;;;;;;iBASxB,KAAK;kBACJ,MAAM;4BACI,GAAG,CAAC,KAAK;kDACa,IAAI,CAAC,SAAS,CAAC,KAAK;YAC1D,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI;qCACD,IAAI,CAAC,eAAe,CAAC;;;mBAGvC,UAAU;oBACT,WAAW;;;;;;;;iCAQE,KAAK,MAAM,MAAM;uBAC3B,MAAM;sBACP,MAAM;4BACA,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC;2CACnB,IAAI,CAAC,SAAS,CAAC,KAAK,KAAK,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI;qCACzD,IAAI,CAAC,eAAe,CAAC;;;mCAGvB,UAAU,MAAM,WAAW;yBACrC,WAAW;wBACZ,WAAW;;;KAG9B,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,WAAW,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE5C,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,KAAK,CACrC,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EACJ,UAAU,EAAE,EACV,cAAc,EAAE,EACd,QAAQ,EAAE,EAAE,YAAY,EAAE,MAAM,EAAE,EACnC,EACD,MAAM,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,cAAc,EAAE,WAAW,EAAE,aAAa,EAAE,UAAU,EAAE,EAAE,EAAE,GAAG,EAAE,EAC3F,EACF,EACF,EAAE,EAAE;IACH,MAAM,EAAE,GAAG,EAAE,GAAG,YAAY,EAAE,CAAC;IAE/B,MAAM,cAAc,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,aAAa,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAE/D,MAAM,aAAa,GAAG,cAAc,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC;IAC/C,MAAM,cAAc,GAAG,cAAc,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;IAEjD,OAAO,GAAG,CAAA;QACN,YAAY;;YAER,WAAW;sBACD,IAAI,CAAC,UAAU,CAAC,CAAC,WAAW,CAAC;;wBAE3B,IAAI,CAAC,UAAU,CAAC,CAAC,YAAY,CAAC;;;;YAI1C,WAAW,MAAM,UAAU;iBACtB,cAAc;;;oBAGX,WAAW;4BACH,EAAE,CAAC,KAAK;;;oBAGhB,WAAW;sCACO,KAAK,MAAM,MAAM,OAAO,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI;;;wCAGtC,UAAU,MAAM,WAAW,OAAO,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI;;;;kBAIxE,WAAW,MAAM,UAAU;iBAC5B,aAAa,CAAC,UAAU;;;0BAGf,WAAW;4BACT,aAAa,CAAC,UAAU;;;kBAGlC,WAAW;4BACD,cAAc,CAAC,UAAU;;;kBAGnC,WAAW;sBACP,MAAM;;;qBAGP,WAAW;mBACb,IAAI,CAAC,kBAAkB,CAAC;;KAEtC,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,WAAW,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE5C,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AAEzC,MAAM,MAAM,GAAkD,UAAU,CACtE,CAAC,KAAmC,EAAE,GAAuB,EAAE,EAAE;IAC/D,MAAM,GAAG,GAAG,MAAM,EAAE,CAAC;IACrB,MAAM,EAAE,EAAE,GAAG,GAAG,EAAE,KAAK,EAAE,QAAQ,GAAG,KAAK,EAAE,EAAE,GAAG,KAAK,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAExF,OAAO,CACL,MAAC,YAAY,eACX,KAAC,WAAW,OACN,SAAS,EACb,EAAE,EAAE,EAAE,EACN,IAAI,EAAC,UAAU,EACf,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,EAAE,kBACG,EAAE,EAChB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,GAAG,GACR,EACF,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAE,EAAE,EAAE,WAAW,EAAE,OAAO,EAAE,EAAE,aACpE,KAAK,EACL,EAAE,IAAI,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,GAAG,IACvB,IACM,CAChB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,MAAM,CAAC","sourcesContent":["import { ChangeEvent, forwardRef, FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\nimport { hideVisually, readableColor } from 'polished';\n\nimport type { BaseProps, ForwardProps, NoChildrenProp } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport { FormControlProps } from '../FormControl';\nimport { useDirection, useUID } from '../../hooks';\nimport Flex from '../Flex';\nimport { getHoverColors } from '../../styles';\nimport Icon, { StyledIcon, registerIcon } from '../Icon';\nimport * as checkIcon from '../Icon/icons/check.icon';\nimport { tryCatch } from '../../utils';\n\nregisterIcon(checkIcon);\n\nexport interface SwitchProps extends BaseProps, NoChildrenProp {\n  /**\n   * Sets DOM id for the control and associates label element via 'for' attribute.\n   * If an id is not pass, a random id will be generated for any render.\n   */\n  id?: FormControlProps['id'];\n  /** Pass a string or a fragment with an Icon and string. */\n  label?: FormControlProps['label'];\n  /**\n   * Disables the control.\n   * @default false\n   */\n  disabled?: FormControlProps['disabled'];\n  /**\n   * Sets checked prop via onChange.\n   * @default false\n   */\n  on?: boolean;\n  /** Callback that is triggered when the Switch is toggled. */\n  onChange?: (e: ChangeEvent<HTMLInputElement>) => void;\n  /** Ref for the input element. */\n  ref?: Ref<HTMLInputElement>;\n}\n\nexport const SwitchLabel = styled.label(\n  ({\n    theme: {\n      base,\n      components: {\n        switch: { width, height, 'touch-width': touchWidth, 'touch-height': touchHeight, off }\n      }\n    }\n  }) => {\n    return css`\n      position: relative;\n      cursor: pointer;\n      padding-inline-end: calc(${width} + 0.5rem);\n      height: ${height};\n      width: 100%;\n\n      @media (pointer: coarse) {\n        padding-inline-end: calc(${touchWidth} + 0.5rem);\n        height: ${touchHeight};\n      }\n\n      /** Checkmark */\n      & > ${StyledIcon} {\n        position: absolute;\n        inset-inline-end: calc(0.5 * ${width} + 0.25rem);\n        height: calc(0.5 * ${height});\n        width: calc(0.5 * ${height});\n\n        @media (pointer: coarse) {\n          inset-inline-end: calc(0.5 * ${touchWidth} + 0.25rem);\n          height: calc(0.5 * ${touchHeight});\n          width: calc(0.5 * ${touchHeight});\n        }\n      }\n\n      /** Track */\n      &::before {\n        position: absolute;\n        content: '';\n        inset-inline-end: 0;\n        width: ${width};\n        height: ${height};\n        background-color: ${off.color};\n        transition: background-color calc(0.5 * ${base.animation.speed})\n          ${base.animation.timing.ease};\n        border-radius: calc(9999 * ${base['border-radius']});\n\n        @media (pointer: coarse) {\n          width: ${touchWidth};\n          height: ${touchHeight};\n        }\n      }\n\n      /** Switch */\n      &::after {\n        position: absolute;\n        content: '';\n        inset-inline-end: calc(${width} - ${height} + 0.0625rem);\n        height: calc(${height} - 0.125rem);\n        width: calc(${height} - 0.125rem);\n        background-color: ${base.palette['primary-background']};\n        transition: transform calc(0.5 * ${base.animation.speed}) ${base.animation.timing.ease};\n        border-radius: calc(9999 * ${base['border-radius']});\n\n        @media (pointer: coarse) {\n          inset-inline-end: calc(${touchWidth} - ${touchHeight} + 0.0625rem);\n          height: calc(${touchHeight} - 0.125rem);\n          width: calc(${touchHeight} - 0.125rem);\n        }\n      }\n    `;\n  }\n);\n\nSwitchLabel.defaultProps = defaultThemeProp;\n\nexport const SwitchInput = styled.input(\n  ({\n    theme: {\n      base,\n      components: {\n        'form-control': {\n          ':focus': { 'box-shadow': shadow }\n        },\n        switch: { height, width, 'touch-height': touchHeight, 'touch-width': touchWidth, on, off }\n      }\n    }\n  }) => {\n    const { ltr } = useDirection();\n\n    const checkmarkColor = tryCatch(() => readableColor(on.color));\n\n    const onHoverColors = getHoverColors(on.color);\n    const offHoverColors = getHoverColors(off.color);\n\n    return css`\n      ${hideVisually}\n\n      & + ${SwitchLabel} {\n        min-height: ${base['hit-area']['mouse-min']};\n        @media (pointer: coarse) {\n          min-height: ${base['hit-area']['finger-min']};\n        }\n      }\n\n      & + ${SwitchLabel} > ${StyledIcon} {\n        color: ${checkmarkColor};\n      }\n\n      &:checked + ${SwitchLabel}::before {\n        background-color: ${on.color};\n      }\n\n      &:checked + ${SwitchLabel}::after {\n        transform: translateX(calc((${width} - ${height}) * ${ltr ? '1' : '-1'}));\n\n        @media (pointer: coarse) {\n          transform: translateX(calc((${touchWidth} - ${touchHeight}) * ${ltr ? '1' : '-1'}));\n        }\n      }\n\n      &:hover + ${SwitchLabel} > ${StyledIcon} {\n        color: ${onHoverColors.foreground};\n      }\n\n      &:hover:checked + ${SwitchLabel}::before {\n        background-color: ${onHoverColors.background};\n      }\n\n      &:hover + ${SwitchLabel}::before {\n        background-color: ${offHoverColors.background};\n      }\n\n      &:focus + ${SwitchLabel}::before {\n        box-shadow: ${shadow};\n      }\n\n      &:disabled + ${SwitchLabel} {\n        opacity: ${base['disabled-opacity']};\n      }\n    `;\n  }\n);\n\nSwitchInput.defaultProps = defaultThemeProp;\n\nexport const StyledSwitch = styled.div``;\n\nconst Switch: FunctionComponent<SwitchProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<SwitchProps>, ref: SwitchProps['ref']) => {\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);\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 { ChangeEvent, forwardRef, FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\nimport { hideVisually, readableColor } from 'polished';\n\nimport type { BaseProps, ForwardProps, NoChildrenProp } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport { FormControlProps } from '../FormControl';\nimport { useDirection, useUID } from '../../hooks';\nimport Flex from '../Flex';\nimport { getHoverColors } from '../../styles';\nimport Icon, { StyledIcon, registerIcon } from '../Icon';\nimport * as checkIcon from '../Icon/icons/check.icon';\nimport { tryCatch } from '../../utils';\n\nregisterIcon(checkIcon);\n\nexport interface SwitchProps extends BaseProps, NoChildrenProp {\n  /**\n   * Sets DOM id for the control and associates label element via 'for' attribute.\n   * If an id is not pass, a random id will be generated for any render.\n   */\n  id?: FormControlProps['id'];\n  /** Pass a string or a fragment with an Icon and string. */\n  label?: FormControlProps['label'];\n  /**\n   * Disables the control.\n   * @default false\n   */\n  disabled?: FormControlProps['disabled'];\n  /**\n   * Sets checked prop via onChange.\n   * @default false\n   */\n  on?: boolean;\n  /** Callback that is triggered when the Switch is toggled. */\n  onChange?: (e: ChangeEvent<HTMLInputElement>) => void;\n  /** Ref for the input element. */\n  ref?: Ref<HTMLInputElement>;\n}\n\nexport const SwitchLabel = styled.label(\n  ({\n    theme: {\n      base,\n      components: {\n        switch: { width, height, 'touch-width': touchWidth, 'touch-height': touchHeight, off }\n      }\n    }\n  }) => {\n    return css`\n      position: relative;\n      cursor: pointer;\n      padding-inline-end: calc(${width} + 0.5rem);\n      height: ${height};\n      width: 100%;\n\n      @media (pointer: coarse) {\n        padding-inline-end: calc(${touchWidth} + 0.5rem);\n        height: ${touchHeight};\n      }\n\n      /** Checkmark */\n      & > ${StyledIcon} {\n        position: absolute;\n        inset-inline-end: calc(0.5 * ${width} + 0.25rem);\n        height: calc(0.5 * ${height});\n        width: calc(0.5 * ${height});\n\n        @media (pointer: coarse) {\n          inset-inline-end: calc(0.5 * ${touchWidth} + 0.25rem);\n          height: calc(0.5 * ${touchHeight});\n          width: calc(0.5 * ${touchHeight});\n        }\n      }\n\n      /** Track */\n      &::before {\n        position: absolute;\n        content: '';\n        inset-inline-end: 0;\n        width: ${width};\n        height: ${height};\n        background-color: ${off.color};\n        transition: background-color calc(0.5 * ${base.animation.speed})\n          ${base.animation.timing.ease};\n        border-radius: calc(9999 * ${base['border-radius']});\n\n        @media (pointer: coarse) {\n          width: ${touchWidth};\n          height: ${touchHeight};\n        }\n      }\n\n      /** Switch */\n      &::after {\n        position: absolute;\n        content: '';\n        inset-inline-end: calc(${width} - ${height} + 0.0625rem);\n        height: calc(${height} - 0.125rem);\n        width: calc(${height} - 0.125rem);\n        background-color: ${base.palette['primary-background']};\n        transition: transform calc(0.5 * ${base.animation.speed}) ${base.animation.timing.ease};\n        border-radius: calc(9999 * ${base['border-radius']});\n\n        @media (pointer: coarse) {\n          inset-inline-end: calc(${touchWidth} - ${touchHeight} + 0.0625rem);\n          height: calc(${touchHeight} - 0.125rem);\n          width: calc(${touchHeight} - 0.125rem);\n        }\n      }\n    `;\n  }\n);\n\nSwitchLabel.defaultProps = defaultThemeProp;\n\nexport const SwitchInput = styled.input(\n  ({\n    theme: {\n      base,\n      components: {\n        'form-control': {\n          ':focus': { 'box-shadow': shadow }\n        },\n        switch: { height, width, 'touch-height': touchHeight, 'touch-width': touchWidth, on, off }\n      }\n    }\n  }) => {\n    const { ltr } = useDirection();\n\n    const checkmarkColor = tryCatch(() => readableColor(on.color));\n\n    const onHoverColors = getHoverColors(on.color);\n    const offHoverColors = getHoverColors(off.color);\n\n    return css`\n      ${hideVisually}\n\n      & + ${SwitchLabel} {\n        min-height: ${base['hit-area']['mouse-min']};\n        @media (pointer: coarse) {\n          min-height: ${base['hit-area']['finger-min']};\n        }\n      }\n\n      & + ${SwitchLabel} > ${StyledIcon} {\n        color: ${checkmarkColor};\n      }\n\n      &:checked + ${SwitchLabel}::before {\n        background-color: ${on.color};\n      }\n\n      &:checked + ${SwitchLabel}::after {\n        transform: translateX(calc((${width} - ${height}) * ${ltr ? '1' : '-1'}));\n\n        @media (pointer: coarse) {\n          transform: translateX(calc((${touchWidth} - ${touchHeight}) * ${ltr ? '1' : '-1'}));\n        }\n      }\n\n      &:hover + ${SwitchLabel} > ${StyledIcon} {\n        color: ${onHoverColors.foreground};\n      }\n\n      &:hover:checked + ${SwitchLabel}::before {\n        background-color: ${onHoverColors.background};\n      }\n\n      &:hover + ${SwitchLabel}::before {\n        background-color: ${offHoverColors.background};\n      }\n\n      &:focus + ${SwitchLabel}::before {\n        box-shadow: ${shadow};\n      }\n\n      &:disabled + ${SwitchLabel} {\n        opacity: ${base['disabled-opacity']};\n      }\n    `;\n  }\n);\n\nSwitchInput.defaultProps = defaultThemeProp;\n\nexport const StyledSwitch = styled.div``;\n\nconst Switch: FunctionComponent<SwitchProps & ForwardProps> = forwardRef(function Switch(\n  props: PropsWithoutRef<SwitchProps>,\n  ref: SwitchProps['ref']\n) {\n  const uid = useUID();\n  const { id = uid, label, disabled = false, on = false, onChange, ...restProps } = props;\n\n  return (\n    <StyledSwitch>\n      <SwitchInput\n        {...restProps}\n        id={id}\n        type='checkbox'\n        role='switch'\n        checked={on}\n        aria-checked={on}\n        disabled={disabled}\n        onChange={onChange}\n        ref={ref}\n      />\n      <Flex container={{ alignItems: 'center' }} as={SwitchLabel} htmlFor={id}>\n        {label}\n        {on && <Icon name='check' />}\n      </Flex>\n    </StyledSwitch>\n  );\n});\n\nexport default Switch;\n"]}

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":"AAAA,OAAO,EAA+B,GAAG,EAAE,SAAS,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAIjG,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAqB,MAAM,aAAa,CAAC;AAQ9F,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,kGAiEN,YAAY,GAAG,IAAI,CAAC;AAEzB,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../src/components/Table/Table.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+B,GAAG,EAAE,SAAS,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAIjG,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAqB,MAAM,aAAa,CAAC;AAQ9F,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"}

package/lib/components/Table/Table.js

@@ -114,7 +114,7 @@ const StyledTableCaption = styled.caption `
   ${hideVisually}
 `;
 StyledTableCaption.defaultProps = defaultThemeProp;
-const Table = forwardRef((props, ref) => {
+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 &&
                                         !loading &&

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

@@ -1 +1 @@
-{"version":3,"file":"Table.js","sourceRoot":"","sources":["../../../src/components/Table/Table.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, 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, 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((props: PropsWithoutRef<TableProps>, ref: Ref<HTMLTableElement>) => {\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, 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, 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"]}

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

@@ -12,6 +12,8 @@ interface TabProps {
     type: TabsProps['type'];
     /** Disables the tab if true */
     disabled?: boolean;
+    /** An error to associate with the Tab. */
+    errors?: number | boolean;
 }
 export interface StyledTabProps {
     selected: TabProps['selected'];

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":"AAAA,OAAO,EAAE,EAAE,EAAE,SAAS,EAAoC,MAAM,OAAO,CAAC;AAOxE,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAG3C,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzC,UAAU,QAAQ;IAChB,uCAAuC;IACvC,QAAQ,EAAE,OAAO,CAAC;IAClB,kDAAkD;IAClD,OAAO,EAAE,MAAM,CAAC;IAChB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,6DAA6D;IAC7D,IAAI,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IACxB,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,cAAc;IAC7B,QAAQ,EAAE,QAAQ,CAAC,UAAU,CAAC,CAAC;IAC/B,OAAO,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC;CAC3B;AA4HD,eAAO,MAAM,SAAS,gNA6BrB,CAAC;AAIF,QAAA,MAAM,GAAG,EAAE,EAAE,CAAC,QAAQ,GAAG,YAAY,CAYpC,CAAC;AAEF,eAAe,GAAG,CAAC"}
+{"version":3,"file":"Tab.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/Tab.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,SAAS,EAAoC,MAAM,OAAO,CAAC;AAWxE,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAG3C,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAIzC,UAAU,QAAQ;IAChB,uCAAuC;IACvC,QAAQ,EAAE,OAAO,CAAC;IAClB,kDAAkD;IAClD,OAAO,EAAE,MAAM,CAAC;IAChB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,6DAA6D;IAC7D,IAAI,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IACxB,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0CAA0C;IAC1C,MAAM,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CAC3B;AAED,MAAM,WAAW,cAAc;IAC7B,QAAQ,EAAE,QAAQ,CAAC,UAAU,CAAC,CAAC;IAC/B,OAAO,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC;CAC3B;AAoID,eAAO,MAAM,SAAS,gNAiCrB,CAAC;AAIF,QAAA,MAAM,GAAG,EAAE,EAAE,CAAC,QAAQ,GAAG,YAAY,CAwBnC,CAAC;AAEH,eAAe,GAAG,CAAC"}

package/lib/components/Tabs/Tab.js

@@ -1,17 +1,26 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 import { transparentize } from 'polished';
+import * as warnSolidIcon from '../Icon/icons/warn-solid.icon';
+import Icon, { registerIcon } from '../Icon';
+import { useConsolidatedRef, useElement, useI18n } from '../../hooks';
+import Tooltip from '../Tooltip';
 import { defaultThemeProp } from '../../theme';
 import { tryCatch } from '../../utils';
 import { StyledCount } from '../Badges/Count';
 import BareButton from '../Button/BareButton';
+registerIcon(warnSolidIcon);
 const activeStyle = (color) => css `
   ::after {
     display: block;
     background-color: ${color};
   }
 `;
+const StyledErrorIcon = styled(Icon)(({ theme }) => css `
+    color: ${theme.base.palette.urgent};
+  `);
+StyledErrorIcon.defaultProps = defaultThemeProp;
 const getHorizontalStyles = ({ selected, theme }) => {
     const primaryColor = theme.base.palette.interactive;
     const lightenedColor = tryCatch(() => transparentize(0.3, primaryColor)) ?? '';
@@ -144,10 +153,17 @@ export const StyledTab = styled(BareButton)(({ theme, tabType, selected }) => cs
     ${tabType === 'horizontal'
     ? getHorizontalStyles({ theme, selected })
     : getVerticalStyles({ theme, selected })}
+
+    ${StyledErrorIcon} {
+      margin-inline-end: calc(0.5 * ${theme.base.spacing});
+    }
   `);
 StyledTab.defaultProps = defaultThemeProp;
-const Tab = forwardRef(({ selected, content, count, type, disabled, ...restProps }, ref) => {
-    return (_jsxs(StyledTab, { ref: ref, selected: selected, tabType: type, disabled: disabled, ...restProps, children: [_jsx("span", { "data-content": content, children: content }), count] }));
+const Tab = forwardRef(function Tab({ selected, content, count, type, disabled, errors, ...restProps }, ref) {
+    const t = useI18n();
+    const [tabEl, setTabEl] = useElement();
+    const tabRef = useConsolidatedRef(ref, setTabEl);
+    return (_jsxs(StyledTab, { ref: tabRef, selected: selected, tabType: type, disabled: disabled, ...restProps, children: [_jsxs("span", { children: [!!errors && (_jsxs(_Fragment, { children: [_jsx(StyledErrorIcon, { name: 'warn-solid' }), _jsx(Tooltip, { target: tabEl, hideDelay: 'none', showDelay: 'none', children: t('tab_error_tooltip', [content]) })] })), _jsx("span", { "data-content": content, children: content })] }), count] }));
 });
 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 { FC, ReactNode, forwardRef, PropsWithoutRef, Ref } from 'react';\nimport styled, { StyledProps, css } from 'styled-components';\nimport { transparentize } from 'polished';\n\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch } from '../../utils';\nimport { StyledCount } from '../Badges/Count';\nimport { ForwardProps } from '../../types';\nimport BareButton from '../Button/BareButton';\n\nimport { TabsProps } from './Tabs.types';\n\ninterface TabProps {\n  /** Indicates if this Tab is active. */\n  selected: boolean;\n  /** The text to display as the name of the Tab. */\n  content: string;\n  /** A number to associate with the Tab. */\n  count?: ReactNode;\n  /** Determines the direction in which the Tab will render. */\n  type: TabsProps['type'];\n  /** Disables the tab if true */\n  disabled?: boolean;\n}\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 getHorizontalStyles = ({\n  selected,\n  theme\n}: Pick<StyledProps<StyledTabProps>, 'theme' | 'selected'>) => {\n  const primaryColor = theme.base.palette.interactive;\n  const lightenedColor = tryCatch(() => transparentize(0.3, primaryColor)) ?? '';\n  const { spacing } = theme.base;\n\n  return css`\n    align-items: center;\n    display: flex;\n    flex-direction: row;\n    height: calc(4 * ${spacing});\n    padding: 0 calc(2 * ${spacing});\n    border: none;\n    text-decoration: none;\n\n    span:first-of-type {\n      color: ${selected ? primaryColor : theme.base.palette['foreground-color']};\n      display: inline-block;\n\n      ::before {\n        content: attr(data-content);\n        display: block;\n        font-weight: bold;\n        height: 0;\n        overflow: hidden;\n        visibility: hidden;\n      }\n    }\n\n    &:first-child {\n      margin-left: 0;\n    }\n\n    ::after {\n      background: ${selected ? primaryColor : lightenedColor};\n      display: ${selected ? 'block' : 'none'};\n      content: '';\n      position: absolute;\n      height: 0.125rem;\n      bottom: 0;\n      left: 0;\n      right: 0;\n    }\n\n    &:hover&:not(:disabled) {\n      ${activeStyle(lightenedColor)}\n      text-decoration: none;\n    }\n\n    &:focus,\n    &:not([disabled]):focus {\n      ${activeStyle(lightenedColor)}\n      box-shadow: ${theme.base.shadow['focus-inset']};\n      text-decoration: none;\n    }\n\n    ${StyledCount} {\n      margin-inline-start: calc(0.5 * ${spacing});\n    }\n  `;\n};\n\nconst getVerticalStyles = ({\n  selected,\n  theme\n}: Pick<StyledProps<StyledTabProps>, 'theme' | 'selected'>) => {\n  const borderColor = theme.base.palette['border-line'];\n  const primaryColor = theme.base.palette.interactive;\n  const lightenedColor = tryCatch(() => transparentize(0.5, primaryColor)) ?? '';\n  const { spacing } = theme.base;\n\n  return css`\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    border-style: solid;\n    color: ${theme.base.palette['foreground-color']};\n    border-width: 0.0625rem 0;\n    border-color: ${borderColor};\n    height: calc(5.5 * ${spacing});\n    margin-top: -0.0625rem;\n    padding: 0 calc(2 * ${spacing});\n    text-decoration: none;\n\n    &:first-child {\n      border-top: 0.0625rem solid ${borderColor};\n    }\n\n    ::after {\n      content: '';\n      position: absolute;\n      display: ${selected ? 'block' : 'none'};\n      top: 0;\n      bottom: 0;\n      right: 0;\n      width: 0.25rem;\n      background: ${primaryColor};\n    }\n\n    &:hover&:not(:disabled) {\n      ${activeStyle(lightenedColor)}\n      text-decoration: none;\n    }\n\n    &:focus,\n    &:not([disabled]):focus {\n      ${activeStyle(primaryColor)}\n      box-shadow: inset 0 0 0 0.0625rem ${primaryColor};\n      text-decoration: none;\n    }\n  `;\n};\n\nexport const StyledTab = styled(BareButton)<StyledTabProps>(\n  ({ theme, tabType, selected }) => css`\n    position: relative;\n    background: none;\n    cursor: pointer;\n    white-space: nowrap;\n\n    ${selected &&\n    css`\n      font-weight: bold;\n    `}\n\n    & + & {\n      margin-inline-start: 0;\n    }\n\n    &:focus {\n      outline: none;\n    }\n\n    &:disabled {\n      cursor: not-allowed;\n      opacity: ${theme.base['disabled-opacity']};\n    }\n\n    ${tabType === 'horizontal'\n      ? getHorizontalStyles({ theme, selected })\n      : getVerticalStyles({ theme, selected })}\n  `\n);\n\nStyledTab.defaultProps = defaultThemeProp;\n\nconst Tab: FC<TabProps & ForwardProps> = forwardRef(\n  (\n    { selected, content, count, type, disabled, ...restProps }: PropsWithoutRef<TabProps>,\n    ref: Ref<HTMLButtonElement>\n  ) => {\n    return (\n      <StyledTab ref={ref} selected={selected} tabType={type} disabled={disabled} {...restProps}>\n        <span data-content={content}>{content}</span>\n        {count}\n      </StyledTab>\n    );\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 { FC, ReactNode, forwardRef, PropsWithoutRef, Ref } from 'react';\nimport styled, { StyledProps, css } from 'styled-components';\nimport { transparentize } from 'polished';\n\nimport * as warnSolidIcon from '../Icon/icons/warn-solid.icon';\nimport Icon, { registerIcon } from '../Icon';\nimport { useConsolidatedRef, useElement, useI18n } from '../../hooks';\nimport Tooltip from '../Tooltip';\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch } from '../../utils';\nimport { StyledCount } from '../Badges/Count';\nimport { ForwardProps } from '../../types';\nimport BareButton from '../Button/BareButton';\n\nimport { TabsProps } from './Tabs.types';\n\nregisterIcon(warnSolidIcon);\n\ninterface TabProps {\n  /** Indicates if this Tab is active. */\n  selected: boolean;\n  /** The text to display as the name of the Tab. */\n  content: string;\n  /** A number to associate with the Tab. */\n  count?: ReactNode;\n  /** Determines the direction in which the Tab will render. */\n  type: TabsProps['type'];\n  /** Disables the tab if true */\n  disabled?: boolean;\n  /** An error to associate with the Tab. */\n  errors?: number | boolean;\n}\n\nexport interface StyledTabProps {\n  selected: TabProps['selected'];\n  tabType: TabProps['type'];\n}\n\nconst activeStyle = (color: string) => css`\n  ::after {\n    display: block;\n    background-color: ${color};\n  }\n`;\n\nconst StyledErrorIcon = styled(Icon)(\n  ({ theme }) => css`\n    color: ${theme.base.palette.urgent};\n  `\n);\n\nStyledErrorIcon.defaultProps = defaultThemeProp;\n\nconst getHorizontalStyles = ({\n  selected,\n  theme\n}: Pick<StyledProps<StyledTabProps>, 'theme' | 'selected'>) => {\n  const primaryColor = theme.base.palette.interactive;\n  const lightenedColor = tryCatch(() => transparentize(0.3, primaryColor)) ?? '';\n  const { spacing } = theme.base;\n\n  return css`\n    align-items: center;\n    display: flex;\n    flex-direction: row;\n    height: calc(4 * ${spacing});\n    padding: 0 calc(2 * ${spacing});\n    border: none;\n    text-decoration: none;\n\n    span:first-of-type {\n      color: ${selected ? primaryColor : theme.base.palette['foreground-color']};\n      display: inline-block;\n\n      ::before {\n        content: attr(data-content);\n        display: block;\n        font-weight: bold;\n        height: 0;\n        overflow: hidden;\n        visibility: hidden;\n      }\n    }\n\n    &:first-child {\n      margin-left: 0;\n    }\n\n    ::after {\n      background: ${selected ? primaryColor : lightenedColor};\n      display: ${selected ? 'block' : 'none'};\n      content: '';\n      position: absolute;\n      height: 0.125rem;\n      bottom: 0;\n      left: 0;\n      right: 0;\n    }\n\n    &:hover&:not(:disabled) {\n      ${activeStyle(lightenedColor)}\n      text-decoration: none;\n    }\n\n    &:focus,\n    &:not([disabled]):focus {\n      ${activeStyle(lightenedColor)}\n      box-shadow: ${theme.base.shadow['focus-inset']};\n      text-decoration: none;\n    }\n\n    ${StyledCount} {\n      margin-inline-start: calc(0.5 * ${spacing});\n    }\n  `;\n};\n\nconst getVerticalStyles = ({\n  selected,\n  theme\n}: Pick<StyledProps<StyledTabProps>, 'theme' | 'selected'>) => {\n  const borderColor = theme.base.palette['border-line'];\n  const primaryColor = theme.base.palette.interactive;\n  const lightenedColor = tryCatch(() => transparentize(0.5, primaryColor)) ?? '';\n  const { spacing } = theme.base;\n\n  return css`\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    border-style: solid;\n    color: ${theme.base.palette['foreground-color']};\n    border-width: 0.0625rem 0;\n    border-color: ${borderColor};\n    height: calc(5.5 * ${spacing});\n    margin-top: -0.0625rem;\n    padding: 0 calc(2 * ${spacing});\n    text-decoration: none;\n\n    &:first-child {\n      border-top: 0.0625rem solid ${borderColor};\n    }\n\n    ::after {\n      content: '';\n      position: absolute;\n      display: ${selected ? 'block' : 'none'};\n      top: 0;\n      bottom: 0;\n      right: 0;\n      width: 0.25rem;\n      background: ${primaryColor};\n    }\n\n    &:hover&:not(:disabled) {\n      ${activeStyle(lightenedColor)}\n      text-decoration: none;\n    }\n\n    &:focus,\n    &:not([disabled]):focus {\n      ${activeStyle(primaryColor)}\n      box-shadow: inset 0 0 0 0.0625rem ${primaryColor};\n      text-decoration: none;\n    }\n  `;\n};\n\nexport const StyledTab = styled(BareButton)<StyledTabProps>(\n  ({ theme, tabType, selected }) => css`\n    position: relative;\n    background: none;\n    cursor: pointer;\n    white-space: nowrap;\n\n    ${selected &&\n    css`\n      font-weight: bold;\n    `}\n\n    & + & {\n      margin-inline-start: 0;\n    }\n\n    &:focus {\n      outline: none;\n    }\n\n    &:disabled {\n      cursor: not-allowed;\n      opacity: ${theme.base['disabled-opacity']};\n    }\n\n    ${tabType === 'horizontal'\n      ? getHorizontalStyles({ theme, selected })\n      : getVerticalStyles({ theme, selected })}\n\n    ${StyledErrorIcon} {\n      margin-inline-end: calc(0.5 * ${theme.base.spacing});\n    }\n  `\n);\n\nStyledTab.defaultProps = defaultThemeProp;\n\nconst Tab: FC<TabProps & ForwardProps> = forwardRef(function Tab(\n  { selected, content, count, type, disabled, errors, ...restProps }: PropsWithoutRef<TabProps>,\n  ref: Ref<HTMLButtonElement>\n) {\n  const t = useI18n();\n  const [tabEl, setTabEl] = useElement();\n  const tabRef = useConsolidatedRef<HTMLButtonElement>(ref, setTabEl);\n\n  return (\n    <StyledTab ref={tabRef} selected={selected} tabType={type} disabled={disabled} {...restProps}>\n      <span>\n        {!!errors && (\n          <>\n            <StyledErrorIcon name='warn-solid' />\n            <Tooltip target={tabEl} hideDelay='none' showDelay='none'>\n              {t('tab_error_tooltip', [content])}\n            </Tooltip>\n          </>\n        )}\n        <span data-content={content}>{content}</span>\n      </span>\n      {count}\n    </StyledTab>\n  );\n});\n\nexport default Tab;\n"]}

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":"AAAA,OAAO,EAAc,iBAAiB,EAAE,SAAS,EAAE,GAAG,EAAmB,MAAM,OAAO,CAAC;AAGvF,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAE3C,UAAU,aAAa;IACrB,0DAA0D;IAC1D,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gCAAgC;IAChC,QAAQ,EAAE,SAAS,CAAC;IACpB,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAMD,eAAO,MAAM,cAAc;aAChB,OAAO;SAehB,CAAC;AAEH,QAAA,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,GAAG,YAAY,CAkB7D,CAAC;AAIF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"TabPanel.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/TabPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAE,SAAS,EAAE,GAAG,EAAmB,MAAM,OAAO,CAAC;AAGvF,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAE3C,UAAU,aAAa;IACrB,0DAA0D;IAC1D,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gCAAgC;IAChC,QAAQ,EAAE,SAAS,CAAC;IACpB,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAMD,eAAO,MAAM,cAAc;aAChB,OAAO;SAehB,CAAC;AAEH,QAAA,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,GAAG,YAAY,CAgB5D,CAAC;AAIH,eAAe,QAAQ,CAAC"}

package/lib/components/Tabs/TabPanel.js

@@ -19,7 +19,7 @@ export const StyledTabPanel = styled.div(({ current }) => {
     `}
   `;
 });
-const TabPanel = forwardRef(({ tabId, currentTabId, children, ...restProps }, ref) => {
+const TabPanel = forwardRef(function TabPanel({ tabId, currentTabId, children, ...restProps }, ref) {
     return (_jsx(StyledTabPanel, { ...restProps, current: currentTabId && tabId ? currentTabId === tabId : true, role: 'tabpanel', "aria-labelledby": `${tabId}`, id: `${tabId}-panel`, ref: ref, children: children }));
 });
 TabPanel.defaultProps = defaultProps;

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

@@ -1 +1 @@
-{"version":3,"file":"TabPanel.js","sourceRoot":"","sources":["../../../src/components/Tabs/TabPanel.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAsD,MAAM,OAAO,CAAC;AACvF,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAkBhD,MAAM,YAAY,GAA2B;IAC3C,KAAK,EAAE,EAAE;CACV,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAErC,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE;IACjB,OAAO,GAAG,CAAA;;;;;;;;MAQN,CAAC,OAAO;QACV,GAAG,CAAA;;KAEF;GACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,QAAQ,GAAoD,UAAU,CAC1E,CACE,EAAE,KAAK,EAAE,YAAY,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAkC,EAC/E,GAAyB,EACzB,EAAE;IACF,OAAO,CACL,KAAC,cAAc,OACT,SAAS,EACb,OAAO,EAAE,YAAY,IAAI,KAAK,CAAC,CAAC,CAAC,YAAY,KAAK,KAAK,CAAC,CAAC,CAAC,IAAI,EAC9D,IAAI,EAAC,UAAU,qBACE,GAAG,KAAK,EAAE,EAC3B,EAAE,EAAE,GAAG,KAAK,QAAQ,EACpB,GAAG,EAAE,GAAG,YAEP,QAAQ,GACM,CAClB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,QAAQ,CAAC,YAAY,GAAG,YAAY,CAAC;AAErC,eAAe,QAAQ,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, ReactNode, Ref, PropsWithoutRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { ForwardProps } from '../../types';\n\ninterface TabPanelProps {\n  /** The id of the Tab that the tab panel is related to. */\n  tabId: string;\n  /**\n   * The current selected value of the tabs. Controls the visibility of the tab panel.\n   * The tabsValue must match the tabId in order for the TabPanel to show itself.\n   */\n  currentTabId?: string;\n  /** Content of the tab panel. */\n  children: ReactNode;\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst defaultProps: Partial<TabPanelProps> = {\n  tabId: ''\n};\n\nexport const StyledTabPanel = styled.div<{\n  current: boolean;\n}>(({ current }) => {\n  return css`\n    min-width: 0;\n    max-width: 100%;\n\n    :focus {\n      outline: none;\n    }\n\n    ${!current &&\n    css`\n      display: none;\n    `}\n  `;\n});\n\nconst TabPanel: FunctionComponent<TabPanelProps & ForwardProps> = forwardRef(\n  (\n    { tabId, currentTabId, children, ...restProps }: PropsWithoutRef<TabPanelProps>,\n    ref: TabPanelProps['ref']\n  ) => {\n    return (\n      <StyledTabPanel\n        {...restProps}\n        current={currentTabId && tabId ? currentTabId === tabId : true}\n        role='tabpanel'\n        aria-labelledby={`${tabId}`}\n        id={`${tabId}-panel`}\n        ref={ref}\n      >\n        {children}\n      </StyledTabPanel>\n    );\n  }\n);\n\nTabPanel.defaultProps = defaultProps;\n\nexport default TabPanel;\n"]}
+{"version":3,"file":"TabPanel.js","sourceRoot":"","sources":["../../../src/components/Tabs/TabPanel.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAsD,MAAM,OAAO,CAAC;AACvF,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAkBhD,MAAM,YAAY,GAA2B;IAC3C,KAAK,EAAE,EAAE;CACV,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAErC,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE;IACjB,OAAO,GAAG,CAAA;;;;;;;;MAQN,CAAC,OAAO;QACV,GAAG,CAAA;;KAEF;GACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,QAAQ,GAAoD,UAAU,CAAC,SAAS,QAAQ,CAC5F,EAAE,KAAK,EAAE,YAAY,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAkC,EAC/E,GAAyB;IAEzB,OAAO,CACL,KAAC,cAAc,OACT,SAAS,EACb,OAAO,EAAE,YAAY,IAAI,KAAK,CAAC,CAAC,CAAC,YAAY,KAAK,KAAK,CAAC,CAAC,CAAC,IAAI,EAC9D,IAAI,EAAC,UAAU,qBACE,GAAG,KAAK,EAAE,EAC3B,EAAE,EAAE,GAAG,KAAK,QAAQ,EACpB,GAAG,EAAE,GAAG,YAEP,QAAQ,GACM,CAClB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,QAAQ,CAAC,YAAY,GAAG,YAAY,CAAC;AAErC,eAAe,QAAQ,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, ReactNode, Ref, PropsWithoutRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { ForwardProps } from '../../types';\n\ninterface TabPanelProps {\n  /** The id of the Tab that the tab panel is related to. */\n  tabId: string;\n  /**\n   * The current selected value of the tabs. Controls the visibility of the tab panel.\n   * The tabsValue must match the tabId in order for the TabPanel to show itself.\n   */\n  currentTabId?: string;\n  /** Content of the tab panel. */\n  children: ReactNode;\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst defaultProps: Partial<TabPanelProps> = {\n  tabId: ''\n};\n\nexport const StyledTabPanel = styled.div<{\n  current: boolean;\n}>(({ current }) => {\n  return css`\n    min-width: 0;\n    max-width: 100%;\n\n    :focus {\n      outline: none;\n    }\n\n    ${!current &&\n    css`\n      display: none;\n    `}\n  `;\n});\n\nconst TabPanel: FunctionComponent<TabPanelProps & ForwardProps> = forwardRef(function TabPanel(\n  { tabId, currentTabId, children, ...restProps }: PropsWithoutRef<TabPanelProps>,\n  ref: TabPanelProps['ref']\n) {\n  return (\n    <StyledTabPanel\n      {...restProps}\n      current={currentTabId && tabId ? currentTabId === tabId : true}\n      role='tabpanel'\n      aria-labelledby={`${tabId}`}\n      id={`${tabId}-panel`}\n      ref={ref}\n    >\n      {children}\n    </StyledTabPanel>\n  );\n});\n\nTabPanel.defaultProps = defaultProps;\n\nexport default TabPanel;\n"]}

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,EACL,iBAAiB,EAOlB,MAAM,OAAO,CAAC;AAOf,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAI3C,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAIzC,eAAO,MAAM,UAAU,yHAgBtB,CAAC;AAIF;;;GAGG;AACH,QAAA,MAAM,IAAI,EAAE,iBAAiB,CAAC,SAAS,GAAG,YAAY,CAiGrD,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EAOlB,MAAM,OAAO,CAAC;AAOf,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAI3C,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAIzC,eAAO,MAAM,UAAU,yHAgBtB,CAAC;AAIF;;;GAGG;AACH,QAAA,MAAM,IAAI,EAAE,iBAAiB,CAAC,SAAS,GAAG,YAAY,CAgGpD,CAAC;AAEH,eAAe,IAAI,CAAC"}

package/lib/components/Tabs/Tabs.js

@@ -27,7 +27,7 @@ StyledTabs.defaultProps = defaultThemeProp;
  * The tabs component will take a list of tab data objects and render out a list of tabs in either vertical or horizontal direction.
  * The tabs component handles which tab is active but will give you a callback function that allows you to make changes when a new tab is activated
  */
-const Tabs = forwardRef(({ tabs = [], type = 'horizontal', currentTabId, onTabClick, ...restProps }, ref) => {
+const Tabs = forwardRef(function Tabs({ tabs = [], type = 'horizontal', currentTabId, onTabClick, ...restProps }, ref) {
     const wrapperRef = useConsolidatedRef(ref);
     // Used to keep a reference for every tab in order to focus them with key presses
     const tabRefs = useRef([]);
@@ -64,7 +64,7 @@ const Tabs = forwardRef(({ tabs = [], type = 'horizontal', currentTabId, onTabCl
     return (_jsx(Flex, { ...restProps, container: {
             direction: type !== 'horizontal' ? 'column' : undefined
         }, item: { shrink: 0 }, as: StyledTabs, ref: wrapperRef, type: type, role: 'tablist', "aria-orientation": type, children: tabs.map((tab, i) => {
-            const { href, name, count, id, disabled } = tab;
+            const { href, name, count, id, disabled, errors } = tab;
             const selected = id === currentTabId;
             return (_jsx(Tab, { id: id, "aria-selected": selected, "aria-controls": `${id}-panel`, content: name, count: typeof count === 'number' && _jsx(Count, { children: count }), href: href, selected: selected, onClick: (event) => {
                     onTabClick?.(id, event);
@@ -75,7 +75,7 @@ const Tabs = forwardRef(({ tabs = [], type = 'horizontal', currentTabId, onTabCl
                         e.preventDefault();
                         changeTabFocus(e, i);
                     }
-                }, as: href ? Link : undefined, tabIndex: selected ? undefined : -1, "aria-label": name, type: type, disabled: disabled }, id));
+                }, as: href ? Link : undefined, tabIndex: selected ? undefined : -1, "aria-label": name, type: type, disabled: disabled, errors: errors }, id));
         }) }));
 });
 export default Tabs;

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

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.tsx"],"names":[],"mappings":";AAAA,OAAO,EAIL,UAAU,EAGV,MAAM,EACP,MAAM,OAAO,CAAC;AACf,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,KAAK,MAAM,iBAAiB,CAAC;AAEpC,OAAO,EAAE,qBAAqB,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAExE,OAAO,GAAG,MAAM,OAAO,CAAC;AAKxB,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAClC,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;;gBAEV,IAAI,KAAK,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS;MACpD,IAAI,KAAK,YAAY;IACvB,GAAG,CAAA;uCACgC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;;KAEnE;;;oBAGe,IAAI,KAAK,UAAU;IAC/B,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,mBAAmB,CAAC;IACxC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC;;GAEvC,CACF,CAAC;AAEF,UAAU,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE3C;;;GAGG;AACH,MAAM,IAAI,GAAgD,UAAU,CAClE,CACE,EACE,IAAI,GAAG,EAAE,EACT,IAAI,GAAG,YAAY,EACnB,YAAY,EACZ,UAAU,EACV,GAAG,SAAS,EACe,EAC7B,GAAqB,EACrB,EAAE;IACF,MAAM,UAAU,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;IAE3C,iFAAiF;IACjF,MAAM,OAAO,GAAG,MAAM,CAA4C,EAAE,CAAC,CAAC;IAEtE,kDAAkD;IAClD,MAAM,cAAc,GAAG,CAAC,KAAoB,EAAE,KAAa,EAAQ,EAAE;QACnE,IAAI,OAAO,CAAC,OAAO,EAAE,MAAM,EAAE;YAC3B,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,CAAC;YACtB,IAAI,GAAG,KAAK,YAAY,IAAI,GAAG,KAAK,WAAW,EAAE;gBAC/C,MAAM,SAAS,GAAG,KAAK,GAAG,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;gBAC1D,MAAM,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC,SAAS,CAAsB,CAAC;gBAEhE,IAAI,CAAC,OAAO,EAAE,QAAQ,EAAE;oBACtB,OAAO,EAAE,KAAK,EAAE,CAAC;iBAClB;qBAAM;oBACL,cAAc,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC;iBAClC;aACF;iBAAM,IAAI,GAAG,KAAK,WAAW,IAAI,GAAG,KAAK,SAAS,EAAE;gBACnD,MAAM,SAAS,GAAG,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC;gBAC5D,MAAM,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC,SAAS,CAAsB,CAAC;gBAChE,IAAI,CAAC,OAAO,EAAE,QAAQ,EAAE;oBACtB,OAAO,EAAE,KAAK,EAAE,CAAC;iBAClB;qBAAM;oBACL,cAAc,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC;iBAClC;aACF;SACF;IACH,CAAC,CAAC;IAEF,qBAAqB,CAAC,GAAG,EAAE;QACzB,MAAM,KAAK,GAAG,IAAI,KAAK,CAAC,oBAAoB,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC;QACjF,UAAU,CAAC,OAAO,EAAE,aAAa,CAAC,KAAK,CAAC,CAAC;IAC3C,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAEnB,OAAO,CACL,KAAC,IAAI,OACC,SAAS,EACb,SAAS,EAAE;YACT,SAAS,EAAE,IAAI,KAAK,YAAY,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS;SACxD,EACD,IAAI,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,EACnB,EAAE,EAAE,UAAU,EACd,GAAG,EAAE,UAAU,EACf,IAAI,EAAE,IAAI,EACV,IAAI,EAAC,SAAS,sBACI,IAAI,YAErB,IAAI,CAAC,GAAG,CAAC,CAAC,GAAY,EAAE,CAAC,EAAE,EAAE;YAC5B,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,EAAE,QAAQ,EAAE,GAAG,GAAG,CAAC;YAChD,MAAM,QAAQ,GAAG,EAAE,KAAK,YAAY,CAAC;YAErC,OAAO,CACL,KAAC,GAAG,IACF,EAAE,EAAE,EAAE,mBACS,QAAQ,mBACR,GAAG,EAAE,QAAQ,EAC5B,OAAO,EAAE,IAAI,EACb,KAAK,EAAE,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAC,KAAK,cAAE,KAAK,GAAS,EAC1D,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,CAAC,KAAwD,EAAE,EAAE;oBACpE,UAAU,EAAE,CAAC,EAAE,EAAE,KAAK,CAAC,CAAC;gBAC1B,CAAC,EACD,IAAI,EAAC,KAAK,EACV,GAAG,EAAE,CAAC,EAAyC,EAAE,EAAE;oBACjD,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC;gBAC1B,CAAC,EACD,SAAS,EAAE,CAAC,CAAgB,EAAE,EAAE;oBAC9B,IAAI,CAAC,YAAY,EAAE,WAAW,EAAE,WAAW,EAAE,SAAS,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE;wBACvE,CAAC,CAAC,cAAc,EAAE,CAAC;wBACnB,cAAc,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;qBACtB;gBACH,CAAC,EAED,EAAE,EAAE,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,EAC3B,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,gBACvB,IAAI,EAChB,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,IALb,EAAE,CAMP,CACH,CAAC;QACJ,CAAC,CAAC,GACG,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,IAAI,CAAC","sourcesContent":["import {\n  FunctionComponent,\n  MouseEvent,\n  KeyboardEvent,\n  forwardRef,\n  PropsWithoutRef,\n  Ref,\n  useRef\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport Flex from '../Flex';\nimport Link from '../Link';\nimport Count from '../Badges/Count';\nimport { ForwardProps } from '../../types';\nimport { useAfterInitialEffect, useConsolidatedRef } from '../../hooks';\n\nimport Tab from './Tab';\nimport { TabsProps } from './Tabs.types';\n\ntype TabItem = TabsProps['tabs'][number];\n\nexport const StyledTabs = styled.div<Partial<TabsProps>>(\n  ({ type, theme }) => css`\n    position: relative;\n    overflow: ${type === 'horizontal' ? 'auto' : 'visible'};\n    ${type === 'horizontal' &&\n    css`\n      border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n      height: max-content;\n    `}\n\n    &:has(:focus-visible) {\n      box-shadow: ${type === 'vertical'\n        ? theme.base.shadow['focus-group-inset']\n        : theme.base.shadow['focus-group']};\n    }\n  `\n);\n\nStyledTabs.defaultProps = defaultThemeProp;\n\n/**\n * The tabs component will take a list of tab data objects and render out a list of tabs in either vertical or horizontal direction.\n * The tabs component handles which tab is active but will give you a callback function that allows you to make changes when a new tab is activated\n */\nconst Tabs: FunctionComponent<TabsProps & ForwardProps> = forwardRef(\n  (\n    {\n      tabs = [],\n      type = 'horizontal',\n      currentTabId,\n      onTabClick,\n      ...restProps\n    }: PropsWithoutRef<TabsProps>,\n    ref: Ref<HTMLElement>\n  ) => {\n    const wrapperRef = useConsolidatedRef(ref);\n\n    // Used to keep a reference for every tab in order to focus them with key presses\n    const tabRefs = useRef<(HTMLButtonElement | HTMLAnchorElement)[]>([]);\n\n    // Handles arrow keypresses for changing the focus\n    const changeTabFocus = (event: KeyboardEvent, index: number): void => {\n      if (tabRefs.current?.length) {\n        const { key } = event;\n        if (key === 'ArrowRight' || key === 'ArrowDown') {\n          const nextIndex = index + 1 < tabs.length ? index + 1 : 0;\n          const nextTab = tabRefs.current[nextIndex] as HTMLButtonElement;\n\n          if (!nextTab?.disabled) {\n            nextTab?.focus();\n          } else {\n            changeTabFocus(event, nextIndex);\n          }\n        } else if (key === 'ArrowLeft' || key === 'ArrowUp') {\n          const prevIndex = index === 0 ? tabs.length - 1 : index - 1;\n          const prevTab = tabRefs.current[prevIndex] as HTMLButtonElement;\n          if (!prevTab?.disabled) {\n            prevTab?.focus();\n          } else {\n            changeTabFocus(event, prevIndex);\n          }\n        }\n      }\n    };\n\n    useAfterInitialEffect(() => {\n      const event = new Event('cosmos-tab-changed', { bubbles: true, composed: true });\n      wrapperRef.current?.dispatchEvent(event);\n    }, [currentTabId]);\n\n    return (\n      <Flex\n        {...restProps}\n        container={{\n          direction: type !== 'horizontal' ? 'column' : undefined\n        }}\n        item={{ shrink: 0 }}\n        as={StyledTabs}\n        ref={wrapperRef}\n        type={type}\n        role='tablist'\n        aria-orientation={type}\n      >\n        {tabs.map((tab: TabItem, i) => {\n          const { href, name, count, id, disabled } = tab;\n          const selected = id === currentTabId;\n\n          return (\n            <Tab\n              id={id}\n              aria-selected={selected}\n              aria-controls={`${id}-panel`}\n              content={name}\n              count={typeof count === 'number' && <Count>{count}</Count>}\n              href={href}\n              selected={selected}\n              onClick={(event: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n                onTabClick?.(id, event);\n              }}\n              role='tab'\n              ref={(el: HTMLButtonElement | HTMLAnchorElement) => {\n                tabRefs.current[i] = el;\n              }}\n              onKeyDown={(e: KeyboardEvent) => {\n                if (['ArrowRight', 'ArrowDown', 'ArrowLeft', 'ArrowUp'].includes(e.key)) {\n                  e.preventDefault();\n                  changeTabFocus(e, i);\n                }\n              }}\n              key={id}\n              as={href ? Link : undefined}\n              tabIndex={selected ? undefined : -1}\n              aria-label={name}\n              type={type}\n              disabled={disabled}\n            />\n          );\n        })}\n      </Flex>\n    );\n  }\n);\n\nexport default Tabs;\n"]}
+{"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FunctionComponent,\n  MouseEvent,\n  KeyboardEvent,\n  forwardRef,\n  PropsWithoutRef,\n  Ref,\n  useRef\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport Flex from '../Flex';\nimport Link from '../Link';\nimport Count from '../Badges/Count';\nimport { ForwardProps } from '../../types';\nimport { useAfterInitialEffect, useConsolidatedRef } from '../../hooks';\n\nimport Tab from './Tab';\nimport { TabsProps } from './Tabs.types';\n\ntype TabItem = TabsProps['tabs'][number];\n\nexport const StyledTabs = styled.div<Partial<TabsProps>>(\n  ({ type, theme }) => css`\n    position: relative;\n    overflow: ${type === 'horizontal' ? 'auto' : 'visible'};\n    ${type === 'horizontal' &&\n    css`\n      border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n      height: max-content;\n    `}\n\n    &:has(:focus-visible) {\n      box-shadow: ${type === 'vertical'\n        ? theme.base.shadow['focus-group-inset']\n        : theme.base.shadow['focus-group']};\n    }\n  `\n);\n\nStyledTabs.defaultProps = defaultThemeProp;\n\n/**\n * The tabs component will take a list of tab data objects and render out a list of tabs in either vertical or horizontal direction.\n * The tabs component handles which tab is active but will give you a callback function that allows you to make changes when a new tab is activated\n */\nconst Tabs: FunctionComponent<TabsProps & ForwardProps> = forwardRef(function Tabs(\n  {\n    tabs = [],\n    type = 'horizontal',\n    currentTabId,\n    onTabClick,\n    ...restProps\n  }: PropsWithoutRef<TabsProps>,\n  ref: Ref<HTMLElement>\n) {\n  const wrapperRef = useConsolidatedRef(ref);\n\n  // Used to keep a reference for every tab in order to focus them with key presses\n  const tabRefs = useRef<(HTMLButtonElement | HTMLAnchorElement)[]>([]);\n\n  // Handles arrow keypresses for changing the focus\n  const changeTabFocus = (event: KeyboardEvent, index: number): void => {\n    if (tabRefs.current?.length) {\n      const { key } = event;\n      if (key === 'ArrowRight' || key === 'ArrowDown') {\n        const nextIndex = index + 1 < tabs.length ? index + 1 : 0;\n        const nextTab = tabRefs.current[nextIndex] as HTMLButtonElement;\n\n        if (!nextTab?.disabled) {\n          nextTab?.focus();\n        } else {\n          changeTabFocus(event, nextIndex);\n        }\n      } else if (key === 'ArrowLeft' || key === 'ArrowUp') {\n        const prevIndex = index === 0 ? tabs.length - 1 : index - 1;\n        const prevTab = tabRefs.current[prevIndex] as HTMLButtonElement;\n        if (!prevTab?.disabled) {\n          prevTab?.focus();\n        } else {\n          changeTabFocus(event, prevIndex);\n        }\n      }\n    }\n  };\n\n  useAfterInitialEffect(() => {\n    const event = new Event('cosmos-tab-changed', { bubbles: true, composed: true });\n    wrapperRef.current?.dispatchEvent(event);\n  }, [currentTabId]);\n\n  return (\n    <Flex\n      {...restProps}\n      container={{\n        direction: type !== 'horizontal' ? 'column' : undefined\n      }}\n      item={{ shrink: 0 }}\n      as={StyledTabs}\n      ref={wrapperRef}\n      type={type}\n      role='tablist'\n      aria-orientation={type}\n    >\n      {tabs.map((tab: TabItem, i) => {\n        const { href, name, count, id, disabled, errors } = tab;\n        const selected = id === currentTabId;\n\n        return (\n          <Tab\n            id={id}\n            aria-selected={selected}\n            aria-controls={`${id}-panel`}\n            content={name}\n            count={typeof count === 'number' && <Count>{count}</Count>}\n            href={href}\n            selected={selected}\n            onClick={(event: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n              onTabClick?.(id, event);\n            }}\n            role='tab'\n            ref={(el: HTMLButtonElement | HTMLAnchorElement) => {\n              tabRefs.current[i] = el;\n            }}\n            onKeyDown={(e: KeyboardEvent) => {\n              if (['ArrowRight', 'ArrowDown', 'ArrowLeft', 'ArrowUp'].includes(e.key)) {\n                e.preventDefault();\n                changeTabFocus(e, i);\n              }\n            }}\n            key={id}\n            as={href ? Link : undefined}\n            tabIndex={selected ? undefined : -1}\n            aria-label={name}\n            type={type}\n            disabled={disabled}\n            errors={errors}\n          />\n        );\n      })}\n    </Flex>\n  );\n});\n\nexport default Tabs;\n"]}

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

@@ -11,6 +11,8 @@ export interface Tab {
     count?: number;
     /** Disables the tab if true */
     disabled?: boolean;
+    /** If an error count is provided, the Error Badge will be rendered alongside the Tab name. */
+    errors?: number;
 }
 export interface TabsProps extends BaseProps, NoChildrenProp {
     /** An array of Tab data used to render the individual tabs.

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

@@ -1 +1 @@
-{"version":3,"file":"Tabs.types.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAE7D,MAAM,WAAW,GAAG;IAClB,kDAAkD;IAClD,IAAI,EAAE,MAAM,CAAC;IACb,yDAAyD;IACzD,EAAE,EAAE,MAAM,CAAC;IACX,qDAAqD;IACrD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,uFAAuF;IACvF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,SAAU,SAAQ,SAAS,EAAE,cAAc;IAC1D;;OAEG;IACH,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ;;OAEG;IACH,IAAI,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACjC,sEAAsE;IACtE,YAAY,EAAE,MAAM,CAAC;IACrB,gJAAgJ;IAChJ,UAAU,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,UAAU,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,KAAK,IAAI,CAAC;CAC9F"}
+{"version":3,"file":"Tabs.types.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAE7D,MAAM,WAAW,GAAG;IAClB,kDAAkD;IAClD,IAAI,EAAE,MAAM,CAAC;IACb,yDAAyD;IACzD,EAAE,EAAE,MAAM,CAAC;IACX,qDAAqD;IACrD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,uFAAuF;IACvF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8FAA8F;IAC9F,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,SAAU,SAAQ,SAAS,EAAE,cAAc;IAC1D;;OAEG;IACH,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ;;OAEG;IACH,IAAI,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACjC,sEAAsE;IACtE,YAAY,EAAE,MAAM,CAAC;IACrB,gJAAgJ;IAChJ,UAAU,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,UAAU,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,KAAK,IAAI,CAAC;CAC9F"}

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

@@ -1 +1 @@
-{"version":3,"file":"Tabs.types.js","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.types.ts"],"names":[],"mappings":"","sourcesContent":["import { MouseEvent } from 'react';\n\nimport type { BaseProps, NoChildrenProp } from '../../types';\n\nexport interface Tab {\n  /** The name that will be displayed on the Tab. */\n  name: string;\n  /** The id that is referenced when a Tab is activated. */\n  id: string;\n  /** A link to navigate to when the Tab is clicked. */\n  href?: string;\n  /** If a count is provided, the Count Badge will be rendered alongside the Tab name. */\n  count?: number;\n  /** Disables the tab if true */\n  disabled?: boolean;\n}\n\nexport interface TabsProps extends BaseProps, NoChildrenProp {\n  /** An array of Tab data used to render the individual tabs.\n   * @default []\n   */\n  tabs: Tab[];\n  /** The type handles what direction the tabs will be rendered in.\n   * @default 'horizontal'\n   */\n  type?: 'horizontal' | 'vertical';\n  /** The currentTabId tells the tab list which Tab should be active. */\n  currentTabId: string;\n  /** The onTabClick will take a callback function that is called every time a new tab is clicked and returns an id as well as the click event. */\n  onTabClick?: (id: string, event?: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;\n}\n"]}
+{"version":3,"file":"Tabs.types.js","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.types.ts"],"names":[],"mappings":"","sourcesContent":["import { MouseEvent } from 'react';\n\nimport type { BaseProps, NoChildrenProp } from '../../types';\n\nexport interface Tab {\n  /** The name that will be displayed on the Tab. */\n  name: string;\n  /** The id that is referenced when a Tab is activated. */\n  id: string;\n  /** A link to navigate to when the Tab is clicked. */\n  href?: string;\n  /** If a count is provided, the Count Badge will be rendered alongside the Tab name. */\n  count?: number;\n  /** Disables the tab if true */\n  disabled?: boolean;\n  /** If an error count is provided, the Error Badge will be rendered alongside the Tab name. */\n  errors?: number;\n}\n\nexport interface TabsProps extends BaseProps, NoChildrenProp {\n  /** An array of Tab data used to render the individual tabs.\n   * @default []\n   */\n  tabs: Tab[];\n  /** The type handles what direction the tabs will be rendered in.\n   * @default 'horizontal'\n   */\n  type?: 'horizontal' | 'vertical';\n  /** The currentTabId tells the tab list which Tab should be active. */\n  currentTabId: string;\n  /** The onTabClick will take a callback function that is called every time a new tab is clicked and returns an id as well as the click event. */\n  onTabClick?: (id: string, event?: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;\n}\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../../src/components/Text/Text.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAc,GAAG,EAAmB,MAAM,OAAO,CAAC;AAIvF,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,EAAqB,MAAM,aAAa,CAAC;AAK7F,MAAM,WAAW,SAAU,SAAQ,SAAS,EAAE,MAAM;IAClD,oBAAoB;IACpB,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,CAAC;IAC/C,yDAAyD;IACzD,MAAM,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,SAAS,CAAC;IACzC,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,eAAe,GAAG,kBAAkB,CAAC,CAAC;CACjD;AAID,eAAO,MAAM,UAAU,kOAoCrB,CAAC;AAIH,QAAA,MAAM,IAAI,EAAE,iBAAiB,CAAC,SAAS,GAAG,YAAY,CASrD,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../../src/components/Text/Text.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAc,GAAG,EAAmB,MAAM,OAAO,CAAC;AAIvF,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,EAAqB,MAAM,aAAa,CAAC;AAK7F,MAAM,WAAW,SAAU,SAAQ,SAAS,EAAE,MAAM;IAClD,oBAAoB;IACpB,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,CAAC;IAC/C,yDAAyD;IACzD,MAAM,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,SAAS,CAAC;IACzC,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,eAAe,GAAG,kBAAkB,CAAC,CAAC;CACjD;AAID,eAAO,MAAM,UAAU,kOAoCrB,CAAC;AAIH,QAAA,MAAM,IAAI,EAAE,iBAAiB,CAAC,SAAS,GAAG,YAAY,CAOpD,CAAC;AAEH,eAAe,IAAI,CAAC"}

package/lib/components/Text/Text.js

@@ -26,7 +26,7 @@ export const StyledText = styled.span(props => {
   `;
 });
 StyledText.defaultProps = defaultThemeProp;
-const Text = forwardRef(({ variant = 'primary', as, ...restProps }, ref) => {
+const Text = forwardRef(function Text({ variant = 'primary', as, ...restProps }, ref) {
     // If variant is for a heading, and no as is passed, set as to heading tag.
     if (!as && /h\d/i.test(variant))
         as = variant;

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../../src/components/TextArea/TextArea.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,EAAE,EAOF,kBAAkB,EAEnB,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAElF,OAAO,EAAE,gBAAgB,EAAqB,MAAM,gBAAgB,CAAC;AAQrE,MAAM,WAAW,aAAc,SAAQ,gBAAgB,EAAE,SAAS,EAAE,cAAc,EAAE,UAAU;IAC5F,sDAAsD;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sDAAsD;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,kBAAkB,CAAC,mBAAmB,CAAC,CAAC;CACpD;;;;AAyHD,wBAAyD"}
+{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../../src/components/TextArea/TextArea.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,EAAE,EAOF,kBAAkB,EAEnB,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAElF,OAAO,EAAE,gBAAgB,EAAqB,MAAM,gBAAgB,CAAC;AAQrE,MAAM,WAAW,aAAc,SAAQ,gBAAgB,EAAE,SAAS,EAAE,cAAc,EAAE,UAAU;IAC5F,sDAAsD;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sDAAsD;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,kBAAkB,CAAC,mBAAmB,CAAC,CAAC;CACpD;;;;AA0HD,wBAAyD"}

package/lib/components/TextArea/TextArea.js

@@ -7,7 +7,7 @@ import { useAutoResize, useConsolidatedRef, useI18n, useTestIds, useUID } from '
 import Text from '../Text';
 import StyledTextArea from './TextArea.styles';
 import { getTextAreaTestIds } from './TextArea.test-ids';
-const TextArea = forwardRef((props, ref) => {
+const TextArea = forwardRef(function TextArea(props, ref) {
     const uid = useUID();
     const { testId, additionalInfo, id = uid, value, defaultValue, required = false, disabled = false, readOnly = false, label, labelHidden, info, status, resizable = false, autoResize = true, maxLength, displayCharCount = false, hardStop = true, onChange: onChangeProp, onResolveSuggestion, ...restProps } = props;
     const t = useI18n();

package/lib/components/TextArea/TextArea.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextArea.js","sourceRoot":"","sources":["../../../src/components/TextArea/TextArea.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FC,\n  Ref,\n  forwardRef,\n  PropsWithoutRef,\n  ChangeEvent,\n  useCallback,\n  useState,\n  ChangeEventHandler,\n  useEffect\n} from 'react';\n\nimport { BaseProps, ForwardProps, NoChildrenProp, TestIdProp } from '../../types';\nimport FormField from '../FormField';\nimport { FormControlProps, StyledFormControl } from '../FormControl';\nimport { hasProp, withTestIds } from '../../utils';\nimport { useAutoResize, useConsolidatedRef, useI18n, useTestIds, useUID } from '../../hooks';\nimport Text from '../Text';\n\nimport StyledTextArea from './TextArea.styles';\nimport { getTextAreaTestIds } from './TextArea.test-ids';\n\nexport interface TextAreaProps extends FormControlProps, BaseProps, NoChildrenProp, TestIdProp {\n  /** Minimum length of characters that can be input. */\n  minLength?: number;\n  /** Maximum length of characters that can be input. */\n  maxLength?: number;\n  /**\n   * Allows the user to resize the Text Area.\n   * @default false\n   */\n  resizable?: boolean;\n  /**\n   * Enables the Text Area to resize itself automatically.\n   * @default true\n   */\n  autoResize?: boolean;\n  /**\n   * Display a live character count in relation to the maxLength.\n   * @default false\n   */\n  displayCharCount?: boolean;\n  /**\n   * Allow or disallow a value beyond the maxLength.\n   * @default true\n   */\n  hardStop?: boolean;\n  onChange?: ChangeEventHandler<HTMLTextAreaElement>;\n}\n\nconst TextArea: FC<TextAreaProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<TextAreaProps>, ref: Ref<HTMLTextAreaElement>) => {\n    const uid = useUID();\n    const {\n      testId,\n      additionalInfo,\n      id = uid,\n      value,\n      defaultValue,\n      required = false,\n      disabled = false,\n      readOnly = false,\n      label,\n      labelHidden,\n      info,\n      status,\n      resizable = false,\n      autoResize = true,\n      maxLength,\n      displayCharCount = false,\n      hardStop = true,\n      onChange: onChangeProp,\n      onResolveSuggestion,\n      ...restProps\n    } = props;\n    const t = useI18n();\n\n    const testIds = useTestIds(testId, getTextAreaTestIds);\n\n    const [textAreaRef, resizeTextArea] = useAutoResize<HTMLTextAreaElement>();\n    const consolidatedRef = useConsolidatedRef(textAreaRef, ref);\n    const [charCount, setCharCount] = useState(0);\n\n    const controlProp: {\n      value?: string;\n      defaultValue?: string;\n    } = {};\n\n    useEffect(() => {\n      if ('value' in props) {\n        setCharCount(props.value ? props.value.length : 0);\n      } else if ('defaultValue' in props) {\n        setCharCount(props.defaultValue ? props.defaultValue.length : 0);\n      }\n    }, [props]);\n\n    // Conditionally render component as controlled/uncontrolled\n    if (hasProp(props, 'value')) {\n      controlProp.value = value ?? '';\n    } else if (hasProp(props, 'defaultValue')) {\n      controlProp.defaultValue = defaultValue ?? '';\n    }\n\n    const onChange = useCallback(\n      (e: ChangeEvent<HTMLTextAreaElement>) => {\n        if (!hardStop || maxLength === undefined || e.target.value.length <= maxLength) {\n          onChangeProp?.(e);\n          setCharCount(e.target.value.length);\n          resizeTextArea();\n        }\n      },\n      [onChangeProp, resizeTextArea, hardStop, maxLength]\n    );\n\n    const Comp = (\n      <StyledFormControl\n        {...{\n          'data-testid': testIds.control,\n          ref: autoResize ? consolidatedRef : ref,\n          id,\n          required,\n          disabled,\n          status,\n          readOnly,\n          resizable,\n          maxLength: hardStop ? maxLength : undefined,\n          hasSuggestion: status === 'pending' && !!onResolveSuggestion,\n          ...controlProp,\n          ...restProps,\n          onChange,\n          as: StyledTextArea\n        }}\n      />\n    );\n\n    return label || displayCharCount ? (\n      <FormField\n        {...{\n          testId: testIds,\n          additionalInfo,\n          label,\n          labelHidden,\n          id,\n          readOnly,\n          info,\n          status,\n          charLimitDisplay:\n            displayCharCount && typeof maxLength === 'number' ? (\n              <Text\n                readOnly={readOnly}\n                variant='secondary'\n                aria-live={maxLength >= 0 && maxLength - charCount <= 20 ? 'polite' : 'off'}\n              >\n                {maxLength >= 0 ? t('x_of_y', [charCount || '0', maxLength]) : charCount}\n              </Text>\n            ) : undefined,\n          required,\n          disabled,\n          onResolveSuggestion\n        }}\n      >\n        {Comp}\n      </FormField>\n    ) : (\n      Comp\n    );\n  }\n);\n\nexport default withTestIds(TextArea, getTextAreaTestIds);\n"]}
+{"version":3,"file":"TextArea.js","sourceRoot":"","sources":["../../../src/components/TextArea/TextArea.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FC,\n  Ref,\n  forwardRef,\n  PropsWithoutRef,\n  ChangeEvent,\n  useCallback,\n  useState,\n  ChangeEventHandler,\n  useEffect\n} from 'react';\n\nimport { BaseProps, ForwardProps, NoChildrenProp, TestIdProp } from '../../types';\nimport FormField from '../FormField';\nimport { FormControlProps, StyledFormControl } from '../FormControl';\nimport { hasProp, withTestIds } from '../../utils';\nimport { useAutoResize, useConsolidatedRef, useI18n, useTestIds, useUID } from '../../hooks';\nimport Text from '../Text';\n\nimport StyledTextArea from './TextArea.styles';\nimport { getTextAreaTestIds } from './TextArea.test-ids';\n\nexport interface TextAreaProps extends FormControlProps, BaseProps, NoChildrenProp, TestIdProp {\n  /** Minimum length of characters that can be input. */\n  minLength?: number;\n  /** Maximum length of characters that can be input. */\n  maxLength?: number;\n  /**\n   * Allows the user to resize the Text Area.\n   * @default false\n   */\n  resizable?: boolean;\n  /**\n   * Enables the Text Area to resize itself automatically.\n   * @default true\n   */\n  autoResize?: boolean;\n  /**\n   * Display a live character count in relation to the maxLength.\n   * @default false\n   */\n  displayCharCount?: boolean;\n  /**\n   * Allow or disallow a value beyond the maxLength.\n   * @default true\n   */\n  hardStop?: boolean;\n  onChange?: ChangeEventHandler<HTMLTextAreaElement>;\n}\n\nconst TextArea: FC<TextAreaProps & ForwardProps> = forwardRef(function TextArea(\n  props: PropsWithoutRef<TextAreaProps>,\n  ref: Ref<HTMLTextAreaElement>\n) {\n  const uid = useUID();\n  const {\n    testId,\n    additionalInfo,\n    id = uid,\n    value,\n    defaultValue,\n    required = false,\n    disabled = false,\n    readOnly = false,\n    label,\n    labelHidden,\n    info,\n    status,\n    resizable = false,\n    autoResize = true,\n    maxLength,\n    displayCharCount = false,\n    hardStop = true,\n    onChange: onChangeProp,\n    onResolveSuggestion,\n    ...restProps\n  } = props;\n  const t = useI18n();\n\n  const testIds = useTestIds(testId, getTextAreaTestIds);\n\n  const [textAreaRef, resizeTextArea] = useAutoResize<HTMLTextAreaElement>();\n  const consolidatedRef = useConsolidatedRef(textAreaRef, ref);\n  const [charCount, setCharCount] = useState(0);\n\n  const controlProp: {\n    value?: string;\n    defaultValue?: string;\n  } = {};\n\n  useEffect(() => {\n    if ('value' in props) {\n      setCharCount(props.value ? props.value.length : 0);\n    } else if ('defaultValue' in props) {\n      setCharCount(props.defaultValue ? props.defaultValue.length : 0);\n    }\n  }, [props]);\n\n  // Conditionally render component as controlled/uncontrolled\n  if (hasProp(props, 'value')) {\n    controlProp.value = value ?? '';\n  } else if (hasProp(props, 'defaultValue')) {\n    controlProp.defaultValue = defaultValue ?? '';\n  }\n\n  const onChange = useCallback(\n    (e: ChangeEvent<HTMLTextAreaElement>) => {\n      if (!hardStop || maxLength === undefined || e.target.value.length <= maxLength) {\n        onChangeProp?.(e);\n        setCharCount(e.target.value.length);\n        resizeTextArea();\n      }\n    },\n    [onChangeProp, resizeTextArea, hardStop, maxLength]\n  );\n\n  const Comp = (\n    <StyledFormControl\n      {...{\n        'data-testid': testIds.control,\n        ref: autoResize ? consolidatedRef : ref,\n        id,\n        required,\n        disabled,\n        status,\n        readOnly,\n        resizable,\n        maxLength: hardStop ? maxLength : undefined,\n        hasSuggestion: status === 'pending' && !!onResolveSuggestion,\n        ...controlProp,\n        ...restProps,\n        onChange,\n        as: StyledTextArea\n      }}\n    />\n  );\n\n  return label || displayCharCount ? (\n    <FormField\n      {...{\n        testId: testIds,\n        additionalInfo,\n        label,\n        labelHidden,\n        id,\n        readOnly,\n        info,\n        status,\n        charLimitDisplay:\n          displayCharCount && typeof maxLength === 'number' ? (\n            <Text\n              readOnly={readOnly}\n              variant='secondary'\n              aria-live={maxLength >= 0 && maxLength - charCount <= 20 ? 'polite' : 'off'}\n            >\n              {maxLength >= 0 ? t('x_of_y', [charCount || '0', maxLength]) : charCount}\n            </Text>\n          ) : undefined,\n        required,\n        disabled,\n        onResolveSuggestion\n      }}\n    >\n      {Comp}\n    </FormField>\n  ) : (\n    Comp\n  );\n});\n\nexport default withTestIds(TextArea, getTextAreaTestIds);\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"Toaster.d.ts","sourceRoot":"","sources":["../../../src/components/Toaster/Toaster.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,iBAAiB,EAGjB,OAAO,EAQR,MAAM,OAAO,CAAC;AAWf,OAAO,YAAY,CAAC;AAEpB,OAAO,EAAgB,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC7D,OAAO,EAAkB,mBAAmB,EAAE,MAAM,WAAW,CAAC;AAmBhE,OAAO,QAAQ,YAAY,CAAC;IAC1B,UAAiB,aAAa;QAC5B,cAAc,CAAC,EAAE,OAAO,CAAC,mBAAmB,CAAC,CAAC;KAC/C;CACF;AAyJD,QAAA,MAAM,OAAO,EAAE,iBAAiB,CAAC,YAAY,CAiF5C,CAAC;AAEF,eAAe,OAAO,CAAC"}
+{"version":3,"file":"Toaster.d.ts","sourceRoot":"","sources":["../../../src/components/Toaster/Toaster.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,iBAAiB,EAGjB,OAAO,EAQR,MAAM,OAAO,CAAC;AAWf,OAAO,YAAY,CAAC;AAEpB,OAAO,EAAgB,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC7D,OAAO,EAAkB,mBAAmB,EAAE,MAAM,WAAW,CAAC;AAmBhE,OAAO,QAAQ,YAAY,CAAC;IAC1B,UAAiB,aAAa;QAC5B,cAAc,CAAC,EAAE,OAAO,CAAC,mBAAmB,CAAC,CAAC;KAC/C;CACF;AAuJD,QAAA,MAAM,OAAO,EAAE,iBAAiB,CAAC,YAAY,CAiF5C,CAAC;AAEF,eAAe,OAAO,CAAC"}