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

package/lib/components/EmptyState/EmptyState.js

@@ -7,9 +7,10 @@ import Icon, { StyledIcon, registerIcon } from '../Icon';
 import * as galaxyIcon from '../Icon/icons/galaxy.icon';
 import * as folderEmptyIcon from '../Icon/streamline-icons/folder-empty.icon';
 import Text from '../Text';
-import { tryCatch } from '../../utils';
-import { useI18n, useTheme } from '../../hooks';
+import { tryCatch, withTestIds } from '../../utils';
+import { useI18n, useTestIds, useTheme } from '../../hooks';
 import { defaultThemeProp } from '../../theme';
+import { getEmptyStateTestIds } from './EmptyState.test-ids';
 registerIcon(galaxyIcon);
 registerIcon(folderEmptyIcon);
 export const StyledEmptyState = styled.div(({ theme }) => {
@@ -29,8 +30,9 @@ StyledEmptyState.defaultProps = defaultThemeProp;
 const EmptyState = forwardRef(function EmptyState(props, ref) {
     const { base: { 'icon-set': iconSet } } = useTheme();
     const t = useI18n();
-    const { message = t('no_items'), ...restProps } = props;
-    return (_jsxs(Flex, { ...restProps, as: StyledEmptyState, ref: ref, container: { direction: 'column', alignItems: 'center', justify: 'center', gap: 1 }, children: [_jsx(Icon, { name: iconSet === 'streamline' ? 'folder-empty' : 'galaxy' }), _jsx(Text, { variant: 'secondary', children: message })] }));
+    const { testId, message = t('no_items'), ...restProps } = props;
+    const testIds = useTestIds(testId, getEmptyStateTestIds);
+    return (_jsxs(Flex, { "data-testid": testIds.root, ...restProps, as: StyledEmptyState, ref: ref, container: { direction: 'column', alignItems: 'center', justify: 'center', gap: 1 }, children: [_jsx(Icon, { "data-testid": testIds.icon, name: iconSet === 'streamline' ? 'folder-empty' : 'galaxy' }), _jsx(Text, { "data-testid": testIds.message, variant: 'secondary', children: message })] }));
 });
-export default EmptyState;
+export default withTestIds(EmptyState, getEmptyStateTestIds);
 //# sourceMappingURL=EmptyState.js.map

package/lib/components/EmptyState/EmptyState.js.map

@@ -1 +1 @@
-{"version":3,"file":"EmptyState.js","sourceRoot":"","sources":["../../../src/components/EmptyState/EmptyState.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhC,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,IAAI,EAAE,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AACzD,OAAO,KAAK,UAAU,MAAM,2BAA2B,CAAC;AACxD,OAAO,KAAK,eAAe,MAAM,4CAA4C,CAAC;AAC9E,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,YAAY,CAAC,UAAU,CAAC,CAAC;AACzB,YAAY,CAAC,eAAe,CAAC,CAAC;AAW9B,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACvD,MAAM,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CAC1B,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,kBAAkB,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,eAAe,CAAC,CAAC,CACvF,CAAC;IACF,OAAO,GAAG,CAAA;;;MAGN,UAAU;;;;eAID,KAAK;;GAEjB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,UAAU,GAAsD,UAAU,CAC9E,SAAS,UAAU,CAAC,KAAuC,EAAE,GAA2B;IACtF,MAAM,EACJ,IAAI,EAAE,EAAE,UAAU,EAAE,OAAO,EAAE,EAC9B,GAAG,QAAQ,EAAE,CAAC;IACf,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,EAAE,OAAO,GAAG,CAAC,CAAC,UAAU,CAAC,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAExD,OAAO,CACL,MAAC,IAAI,OACC,SAAS,EACb,EAAE,EAAE,gBAAgB,EACpB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aAEnF,KAAC,IAAI,IAAC,IAAI,EAAE,OAAO,KAAK,YAAY,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,QAAQ,GAAI,EACpE,KAAC,IAAI,IAAC,OAAO,EAAC,WAAW,YAAE,OAAO,GAAQ,IACrC,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,UAAU,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\nimport { rgba } from 'polished';\n\nimport Flex from '../Flex';\nimport Icon, { StyledIcon, registerIcon } from '../Icon';\nimport * as galaxyIcon from '../Icon/icons/galaxy.icon';\nimport * as folderEmptyIcon from '../Icon/streamline-icons/folder-empty.icon';\nimport Text from '../Text';\nimport { tryCatch } from '../../utils';\nimport { useI18n, useTheme } from '../../hooks';\nimport type { BaseProps, NoChildrenProp, ForwardProps } from '../../types';\nimport { defaultThemeProp } from '../../theme';\n\nregisterIcon(galaxyIcon);\nregisterIcon(folderEmptyIcon);\n\nexport interface EmptyStateProps extends BaseProps, NoChildrenProp {\n  /**\n   * Message to display below the icon.\n   * @default 'No items'\n   */\n  message?: string;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport const StyledEmptyState = styled.div(({ theme }) => {\n  const color = tryCatch(() =>\n    rgba(theme.base.palette['foreground-color'], theme.base.transparency['transparent-2'])\n  );\n  return css`\n    height: 100%;\n\n    ${StyledIcon} {\n      font-size: 1.5rem;\n      height: 1.5rem;\n      width: 1.5rem;\n      color: ${color};\n    }\n  `;\n});\n\nStyledEmptyState.defaultProps = defaultThemeProp;\n\nconst EmptyState: FunctionComponent<EmptyStateProps & ForwardProps> = forwardRef(\n  function EmptyState(props: PropsWithoutRef<EmptyStateProps>, ref: EmptyStateProps['ref']) {\n    const {\n      base: { 'icon-set': iconSet }\n    } = useTheme();\n    const t = useI18n();\n    const { message = t('no_items'), ...restProps } = props;\n\n    return (\n      <Flex\n        {...restProps}\n        as={StyledEmptyState}\n        ref={ref}\n        container={{ direction: 'column', alignItems: 'center', justify: 'center', gap: 1 }}\n      >\n        <Icon name={iconSet === 'streamline' ? 'folder-empty' : 'galaxy'} />\n        <Text variant='secondary'>{message}</Text>\n      </Flex>\n    );\n  }\n);\n\nexport default EmptyState;\n"]}
+{"version":3,"file":"EmptyState.js","sourceRoot":"","sources":["../../../src/components/EmptyState/EmptyState.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhC,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,IAAI,EAAE,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AACzD,OAAO,KAAK,UAAU,MAAM,2BAA2B,CAAC;AACxD,OAAO,KAAK,eAAe,MAAM,4CAA4C,CAAC;AAC9E,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AACpD,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAO5D,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,OAAO,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AAE7D,YAAY,CAAC,UAAU,CAAC,CAAC;AACzB,YAAY,CAAC,eAAe,CAAC,CAAC;AAW9B,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACvD,MAAM,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CAC1B,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,kBAAkB,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,eAAe,CAAC,CAAC,CACvF,CAAC;IACF,OAAO,GAAG,CAAA;;;MAGN,UAAU;;;;eAID,KAAK;;GAEjB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,UAAU,GAAqD,UAAU,CAAC,SAAS,UAAU,CACjG,KAAuC,EACvC,GAA2B;IAE3B,MAAM,EACJ,IAAI,EAAE,EAAE,UAAU,EAAE,OAAO,EAAE,EAC9B,GAAG,QAAQ,EAAE,CAAC;IACf,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,EAAE,MAAM,EAAE,OAAO,GAAG,CAAC,CAAC,UAAU,CAAC,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAChE,MAAM,OAAO,GAAG,UAAU,CAAC,MAAM,EAAE,oBAAoB,CAAC,CAAC;IAEzD,OAAO,CACL,MAAC,IAAI,mBACU,OAAO,CAAC,IAAI,KACrB,SAAS,EACb,EAAE,EAAE,gBAAgB,EACpB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aAEnF,KAAC,IAAI,mBACU,OAAO,CAAC,IAAI,EACzB,IAAI,EAAE,OAAO,KAAK,YAAY,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,QAAQ,GAC1D,EACF,KAAC,IAAI,mBAAc,OAAO,CAAC,OAAO,EAAE,OAAO,EAAC,WAAW,YACpD,OAAO,GACH,IACF,CACR,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,WAAW,CAAC,UAAU,EAAE,oBAAoB,CAAC,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\nimport { rgba } from 'polished';\n\nimport Flex from '../Flex';\nimport Icon, { StyledIcon, registerIcon } from '../Icon';\nimport * as galaxyIcon from '../Icon/icons/galaxy.icon';\nimport * as folderEmptyIcon from '../Icon/streamline-icons/folder-empty.icon';\nimport Text from '../Text';\nimport { tryCatch, withTestIds } from '../../utils';\nimport { useI18n, useTestIds, useTheme } from '../../hooks';\nimport type {\n  BaseProps,\n  NoChildrenProp,\n  ForwardRefForwardPropsComponent,\n  TestIdProp\n} from '../../types';\nimport { defaultThemeProp } from '../../theme';\n\nimport { getEmptyStateTestIds } from './EmptyState.test-ids';\n\nregisterIcon(galaxyIcon);\nregisterIcon(folderEmptyIcon);\n\nexport interface EmptyStateProps extends BaseProps, NoChildrenProp, TestIdProp {\n  /**\n   * Message to display below the icon.\n   * @default 'No items'\n   */\n  message?: string;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport const StyledEmptyState = styled.div(({ theme }) => {\n  const color = tryCatch(() =>\n    rgba(theme.base.palette['foreground-color'], theme.base.transparency['transparent-2'])\n  );\n  return css`\n    height: 100%;\n\n    ${StyledIcon} {\n      font-size: 1.5rem;\n      height: 1.5rem;\n      width: 1.5rem;\n      color: ${color};\n    }\n  `;\n});\n\nStyledEmptyState.defaultProps = defaultThemeProp;\n\nconst EmptyState: ForwardRefForwardPropsComponent<EmptyStateProps> = forwardRef(function EmptyState(\n  props: PropsWithoutRef<EmptyStateProps>,\n  ref: EmptyStateProps['ref']\n) {\n  const {\n    base: { 'icon-set': iconSet }\n  } = useTheme();\n  const t = useI18n();\n  const { testId, message = t('no_items'), ...restProps } = props;\n  const testIds = useTestIds(testId, getEmptyStateTestIds);\n\n  return (\n    <Flex\n      data-testid={testIds.root}\n      {...restProps}\n      as={StyledEmptyState}\n      ref={ref}\n      container={{ direction: 'column', alignItems: 'center', justify: 'center', gap: 1 }}\n    >\n      <Icon\n        data-testid={testIds.icon}\n        name={iconSet === 'streamline' ? 'folder-empty' : 'galaxy'}\n      />\n      <Text data-testid={testIds.message} variant='secondary'>\n        {message}\n      </Text>\n    </Flex>\n  );\n});\n\nexport default withTestIds(EmptyState, getEmptyStateTestIds);\n"]}

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

@@ -0,0 +1,2 @@
+export declare const getEmptyStateTestIds: (testIdProp?: import("../..").TestIdProp["testId"]) => import("../..").TestIdsRecord<readonly ["message", "icon"]>;
+//# sourceMappingURL=EmptyState.test-ids.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyState.test-ids.d.ts","sourceRoot":"","sources":["../../../src/components/EmptyState/EmptyState.test-ids.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,oBAAoB,oHAA6D,CAAC"}

package/lib/components/EmptyState/EmptyState.test-ids.js

@@ -0,0 +1,3 @@
+import { createTestIds } from '../../utils';
+export const getEmptyStateTestIds = createTestIds('empty-state', ['message', 'icon']);
+//# sourceMappingURL=EmptyState.test-ids.js.map

package/lib/components/EmptyState/EmptyState.test-ids.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyState.test-ids.js","sourceRoot":"","sources":["../../../src/components/EmptyState/EmptyState.test-ids.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAE5C,MAAM,CAAC,MAAM,oBAAoB,GAAG,aAAa,CAAC,aAAa,EAAE,CAAC,SAAS,EAAE,MAAM,CAAU,CAAC,CAAC","sourcesContent":["import { createTestIds } from '../../utils';\n\nexport const getEmptyStateTestIds = createTestIds('empty-state', ['message', 'icon'] as const);\n"]}

package/lib/components/ErrorState/ErrorState.d.ts

@@ -1,5 +1,5 @@
-import type { FunctionComponent, Ref } from 'react';
-import type { BaseProps, NoChildrenProp, ForwardProps } from '../../types';
+import type { Ref } from 'react';
+import type { BaseProps, NoChildrenProp, ForwardRefForwardPropsComponent } from '../../types';
 export interface ErrorStateProps extends BaseProps, NoChildrenProp {
     /**
      * Message to display below the icon.
@@ -11,6 +11,6 @@ export interface ErrorStateProps extends BaseProps, NoChildrenProp {
     ref?: Ref<HTMLDivElement>;
 }
 export declare const StyledErrorState: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-declare const ErrorState: FunctionComponent<ErrorStateProps & ForwardProps>;
+declare const ErrorState: ForwardRefForwardPropsComponent<ErrorStateProps>;
 export default ErrorState;
 //# sourceMappingURL=ErrorState.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ErrorState.d.ts","sourceRoot":"","sources":["../../../src/components/ErrorState/ErrorState.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AASrE,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAK3E,MAAM,WAAW,eAAgB,SAAQ,SAAS,EAAE,cAAc;IAChE;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,2EAA2E;IAC3E,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,eAAO,MAAM,gBAAgB,yGAW3B,CAAC;AAIH,QAAA,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,GAAG,YAAY,CAsBjE,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"ErrorState.d.ts","sourceRoot":"","sources":["../../../src/components/ErrorState/ErrorState.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AASlD,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,+BAA+B,EAAE,MAAM,aAAa,CAAC;AAK9F,MAAM,WAAW,eAAgB,SAAQ,SAAS,EAAE,cAAc;IAChE;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,2EAA2E;IAC3E,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,eAAO,MAAM,gBAAgB,yGAW3B,CAAC;AAIH,QAAA,MAAM,UAAU,EAAE,+BAA+B,CAAC,eAAe,CAuB/D,CAAC;AAEH,eAAe,UAAU,CAAC"}

package/lib/components/ErrorState/ErrorState.js.map

@@ -1 +1 @@
-{"version":3,"file":"ErrorState.js","sourceRoot":"","sources":["../../../src/components/ErrorState/ErrorState.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,IAAI,EAAE,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AACzD,OAAO,KAAK,QAAQ,MAAM,yBAAyB,CAAC;AACpD,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAEtC,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,YAAY,CAAC,QAAQ,CAAC,CAAC;AAavB,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACvD,OAAO,GAAG,CAAA;;;MAGN,UAAU;;;;eAID,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM;;GAErC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,UAAU,GAAsD,UAAU,CAC9E,SAAS,UAAU,CAAC,KAAuC,EAAE,GAA2B;IACtF,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,EAAE,OAAO,GAAG,CAAC,CAAC,eAAe,CAAC,EAAE,OAAO,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAEtE,OAAO,CACL,MAAC,IAAI,OACC,SAAS,EACb,EAAE,EAAE,gBAAgB,EACpB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aAEnF,KAAC,IAAI,IAAC,IAAI,EAAC,MAAM,GAAG,EACpB,KAAC,IAAI,IAAC,OAAO,EAAC,WAAW,YAAE,OAAO,GAAQ,EACzC,OAAO,IAAI,CACV,KAAC,MAAM,IAAC,OAAO,EAAC,WAAW,EAAC,OAAO,EAAE,OAAO,YACzC,CAAC,CAAC,WAAW,CAAC,GACR,CACV,IACI,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,UAAU,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Button from '../Button';\nimport Flex from '../Flex';\nimport Icon, { StyledIcon, registerIcon } from '../Icon';\nimport * as warnIcon from '../Icon/icons/warn.icon';\nimport Text from '../Text';\nimport { useI18n } from '../../hooks';\nimport type { BaseProps, NoChildrenProp, ForwardProps } from '../../types';\nimport { defaultThemeProp } from '../../theme';\n\nregisterIcon(warnIcon);\n\nexport interface ErrorStateProps extends BaseProps, NoChildrenProp {\n  /**\n   * Message to display below the icon.\n   * @default 'Unknown error'\n   */\n  message?: string;\n  /** Callback function that if provided renders a localized Retry button. */\n  onRetry?: () => void;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport const StyledErrorState = styled.div(({ theme }) => {\n  return css`\n    height: 100%;\n\n    ${StyledIcon} {\n      font-size: 1.5rem;\n      height: 1.5rem;\n      width: 1.5rem;\n      color: ${theme.base.palette.urgent};\n    }\n  `;\n});\n\nStyledErrorState.defaultProps = defaultThemeProp;\n\nconst ErrorState: FunctionComponent<ErrorStateProps & ForwardProps> = forwardRef(\n  function ErrorState(props: PropsWithoutRef<ErrorStateProps>, ref: ErrorStateProps['ref']) {\n    const t = useI18n();\n    const { message = t('unknown_error'), onRetry, ...restProps } = props;\n\n    return (\n      <Flex\n        {...restProps}\n        as={StyledErrorState}\n        ref={ref}\n        container={{ direction: 'column', alignItems: 'center', justify: 'center', gap: 1 }}\n      >\n        <Icon name='warn' />\n        <Text variant='secondary'>{message}</Text>\n        {onRetry && (\n          <Button variant='secondary' onClick={onRetry}>\n            {t('try_again')}\n          </Button>\n        )}\n      </Flex>\n    );\n  }\n);\n\nexport default ErrorState;\n"]}
+{"version":3,"file":"ErrorState.js","sourceRoot":"","sources":["../../../src/components/ErrorState/ErrorState.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,IAAI,EAAE,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AACzD,OAAO,KAAK,QAAQ,MAAM,yBAAyB,CAAC;AACpD,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAEtC,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,YAAY,CAAC,QAAQ,CAAC,CAAC;AAavB,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACvD,OAAO,GAAG,CAAA;;;MAGN,UAAU;;;;eAID,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM;;GAErC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,UAAU,GAAqD,UAAU,CAAC,SAAS,UAAU,CACjG,KAAuC,EACvC,GAA2B;IAE3B,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,EAAE,OAAO,GAAG,CAAC,CAAC,eAAe,CAAC,EAAE,OAAO,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAEtE,OAAO,CACL,MAAC,IAAI,OACC,SAAS,EACb,EAAE,EAAE,gBAAgB,EACpB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aAEnF,KAAC,IAAI,IAAC,IAAI,EAAC,MAAM,GAAG,EACpB,KAAC,IAAI,IAAC,OAAO,EAAC,WAAW,YAAE,OAAO,GAAQ,EACzC,OAAO,IAAI,CACV,KAAC,MAAM,IAAC,OAAO,EAAC,WAAW,EAAC,OAAO,EAAE,OAAO,YACzC,CAAC,CAAC,WAAW,CAAC,GACR,CACV,IACI,CACR,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,UAAU,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Button from '../Button';\nimport Flex from '../Flex';\nimport Icon, { StyledIcon, registerIcon } from '../Icon';\nimport * as warnIcon from '../Icon/icons/warn.icon';\nimport Text from '../Text';\nimport { useI18n } from '../../hooks';\nimport type { BaseProps, NoChildrenProp, ForwardRefForwardPropsComponent } from '../../types';\nimport { defaultThemeProp } from '../../theme';\n\nregisterIcon(warnIcon);\n\nexport interface ErrorStateProps extends BaseProps, NoChildrenProp {\n  /**\n   * Message to display below the icon.\n   * @default 'Unknown error'\n   */\n  message?: string;\n  /** Callback function that if provided renders a localized Retry button. */\n  onRetry?: () => void;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport const StyledErrorState = styled.div(({ theme }) => {\n  return css`\n    height: 100%;\n\n    ${StyledIcon} {\n      font-size: 1.5rem;\n      height: 1.5rem;\n      width: 1.5rem;\n      color: ${theme.base.palette.urgent};\n    }\n  `;\n});\n\nStyledErrorState.defaultProps = defaultThemeProp;\n\nconst ErrorState: ForwardRefForwardPropsComponent<ErrorStateProps> = forwardRef(function ErrorState(\n  props: PropsWithoutRef<ErrorStateProps>,\n  ref: ErrorStateProps['ref']\n) {\n  const t = useI18n();\n  const { message = t('unknown_error'), onRetry, ...restProps } = props;\n\n  return (\n    <Flex\n      {...restProps}\n      as={StyledErrorState}\n      ref={ref}\n      container={{ direction: 'column', alignItems: 'center', justify: 'center', gap: 1 }}\n    >\n      <Icon name='warn' />\n      <Text variant='secondary'>{message}</Text>\n      {onRetry && (\n        <Button variant='secondary' onClick={onRetry}>\n          {t('try_again')}\n        </Button>\n      )}\n    </Flex>\n  );\n});\n\nexport default ErrorState;\n"]}

package/lib/components/ExpandCollapse/ExpandCollapse.d.ts

@@ -1,5 +1,5 @@
 import type { FunctionComponent, ReactNode } from 'react';
-import type { ForwardProps, BaseProps, AsProp } from '../../types';
+import type { AsProp, BaseProps, ForwardProps } from '../../types';
 export interface ExpandCollapseProps extends AsProp, BaseProps {
     /** Content to expand/collapse. */
     children?: ReactNode;

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

@@ -1 +1 @@
-{"version":3,"file":"ExpandCollapse.d.ts","sourceRoot":"","sources":["../../../src/components/ExpandCollapse/ExpandCollapse.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAO,SAAS,EAAkC,MAAM,OAAO,CAAC;AAE/F,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,EAAqB,MAAM,aAAa,CAAC;AAGtF,MAAM,WAAW,mBAAoB,SAAQ,MAAM,EAAE,SAAS;IAC5D,kCAAkC;IAClC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,SAAS,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC/B,8FAA8F;IAC9F,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,yIAAyI;IACzI,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,8CAA8C;IAC9C,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAC7B,6CAA6C;IAC7C,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,+CAA+C;IAC/C,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,8CAA8C;IAC9C,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAmED,QAAA,MAAM,cAAc,EAAE,iBAAiB,CAAC,mBAAmB,GAAG,YAAY,CA0FzE,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"ExpandCollapse.d.ts","sourceRoot":"","sources":["../../../src/components/ExpandCollapse/ExpandCollapse.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAiB,iBAAiB,EAAmB,SAAS,EAAO,MAAM,OAAO,CAAC;AAI/F,OAAO,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,YAAY,EAAqB,MAAM,aAAa,CAAC;AAEtF,MAAM,WAAW,mBAAoB,SAAQ,MAAM,EAAE,SAAS;IAC5D,kCAAkC;IAClC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,SAAS,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC/B,8FAA8F;IAC9F,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,yIAAyI;IACzI,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,8CAA8C;IAC9C,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAC7B,6CAA6C;IAC7C,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,+CAA+C;IAC/C,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,8CAA8C;IAC9C,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAqED,QAAA,MAAM,cAAc,EAAE,iBAAiB,CAAC,mBAAmB,GAAG,YAAY,CAgGzE,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/lib/components/ExpandCollapse/ExpandCollapse.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef, useState, useLayoutEffect, useCallback } from 'react';
+import { forwardRef, useCallback, useLayoutEffect, useState } from 'react';
 import { useConsolidatedRef, usePrevious, useTheme } from '../../hooks';
 const getScrollSize = (el, dimension) => {
     if (!el)
@@ -19,7 +19,9 @@ const getStyle = (props) => {
             style[`overflow${dimension === 'width' ? 'X' : 'Y'}`] = 'hidden';
         }
         if (status === 'collapsed' && !nullWhenCollapsed && !min) {
-            style.display = 'none';
+            style[dimension] = 0;
+            style.overflow = 'hidden';
+            style.visibility = 'hidden';
         }
     }
     if (status === 'expanding' || status === 'collapsing') {
@@ -87,7 +89,7 @@ const ExpandCollapse = forwardRef(function ExpandCollapse(props, refArg) {
             transitionTimingFunction: themeAnimation.timing.ease
         });
     }
-    return status === 'collapsed' && nullWhenCollapsed && !min ? null : (_jsx(Tag, { ref: ref, onTransitionEnd: onTransitionEnd, ...restProps, style: style, children: children }));
+    return status === 'collapsed' && nullWhenCollapsed && !min ? null : (_jsx(Tag, { ref: ref, onTransitionEnd: onTransitionEnd, ...restProps, inert: status === 'collapsed' && !nullWhenCollapsed && !min ? '' : undefined, style: style, children: children }));
 });
 export default ExpandCollapse;
 //# sourceMappingURL=ExpandCollapse.js.map

package/lib/components/ExpandCollapse/ExpandCollapse.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExpandCollapse.js","sourceRoot":"","sources":["../../../src/components/ExpandCollapse/ExpandCollapse.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useState, useLayoutEffect, useCallback } from 'react';\nimport type { FunctionComponent, Ref, ReactNode, PropsWithoutRef, CSSProperties } from 'react';\n\nimport type { ForwardProps, BaseProps, AsProp, PropsWithDefaults } from '../../types';\nimport { useConsolidatedRef, usePrevious, useTheme } from '../../hooks';\n\nexport interface ExpandCollapseProps extends AsProp, BaseProps {\n  /** Content to expand/collapse. */\n  children?: ReactNode;\n  /**\n   * If true,the content will be hidden.\n   * @default false\n   */\n  collapsed?: boolean;\n  /**\n   * Used to determine the transition property.\n   * @default 'height'\n   */\n  dimension?: 'height' | 'width';\n  /** Minimum height/width to collapse to. This will set the starting collapsed size as well. */\n  min?: string;\n  /** Maximum height/width to expand to. Expanded state will expanded up until, but not beyond, the natural height/width of the element. */\n  max?: string;\n  /** Callback fired after content collapsed. */\n  onAfterCollapse?: () => void;\n  /** Callback fired after content expanded. */\n  onAfterExpand?: () => void;\n  /** Callback fired before content collapsed. */\n  onBeforeCollapse?: () => void;\n  /** Callback fired before content expanded. */\n  onBeforeExpand?: () => void;\n  /**\n   * Determine the speed of animation. This value comes from `theme.base.animation.speed`.\n   * @default '0.25s'\n   */\n  transitionSpeed?: string;\n  /**\n   * If true, removes the component from the real DOM when collapsed. For full virtual DOM unmount(if necessary), perform at a parent level.\n   * @default false\n   */\n  nullWhenCollapsed?: boolean;\n}\n\ntype ExpandCollapsePropsWithDefaults = PropsWithDefaults<\n  ExpandCollapseProps,\n  'collapsed' | 'dimension' | 'transitionSpeed' | 'nullWhenCollapsed'\n>;\n\ntype Statuses = 'collapsed' | 'collapsing' | 'expanded' | 'expanding';\n\ninterface GetStyleProps\n  extends Pick<\n    ExpandCollapsePropsWithDefaults,\n    'dimension' | 'transitionSpeed' | 'min' | 'max' | 'nullWhenCollapsed'\n  > {\n  status: Statuses;\n  el?: HTMLElement | null;\n  transitionTimingFunction?: string;\n}\n\nconst getScrollSize = (\n  el: HTMLElement,\n  dimension: ExpandCollapsePropsWithDefaults['dimension']\n): string => {\n  if (!el) return '';\n  return dimension === 'height' ? `${el.scrollHeight}px` : `${el.scrollWidth}px`;\n};\n\nconst getStyle = (props: GetStyleProps): CSSProperties => {\n  const {\n    status,\n    dimension,\n    transitionSpeed,\n    transitionTimingFunction,\n    min,\n    max,\n    nullWhenCollapsed,\n    el\n  } = props;\n  const style: CSSProperties = {};\n  let maxSize = max;\n\n  if (el && !max) {\n    maxSize = getScrollSize(el, dimension!);\n  }\n\n  if (status === 'expanded' || status === 'collapsed') {\n    if (max || min) {\n      style[dimension as 'height' | 'width'] = status === 'expanded' ? maxSize : min || 0;\n      style[`overflow${dimension === 'width' ? 'X' : 'Y'}`] = 'hidden';\n    }\n\n    if (status === 'collapsed' && !nullWhenCollapsed && !min) {\n      style.display = 'none';\n    }\n  }\n\n  if (status === 'expanding' || status === 'collapsing') {\n    style[dimension as 'height' | 'width'] = status === 'expanding' ? maxSize : min || 0;\n    style.overflow = 'hidden';\n    style.transitionProperty = dimension;\n    style.transitionDuration = `max(${transitionSpeed}, 0.01ms)`;\n    style.transitionTimingFunction = transitionTimingFunction;\n  }\n\n  return style;\n};\n\nconst ExpandCollapse: FunctionComponent<ExpandCollapseProps & ForwardProps> = forwardRef(\n  function ExpandCollapse(props: PropsWithoutRef<ExpandCollapseProps>, refArg: Ref<HTMLElement>) {\n    const {\n      base: { animation: themeAnimation }\n    } = useTheme();\n\n    const {\n      children,\n      dimension = 'height',\n      collapsed = false,\n      onBeforeExpand,\n      onAfterExpand,\n      onBeforeCollapse,\n      onAfterCollapse,\n      transitionSpeed = themeAnimation.speed,\n      min,\n      max,\n      nullWhenCollapsed = false,\n      as: Tag = 'div',\n      ...restProps\n    } = props;\n\n    const [status, setStatus] = useState<Statuses>(collapsed ? 'collapsed' : 'expanded');\n    const styleStateHook = useState<CSSProperties>();\n    const setStyle = styleStateHook[1];\n    let style = styleStateHook[0];\n    const previousStatus = usePrevious(status);\n    const ref = useConsolidatedRef(refArg);\n\n    const onTransitionEnd = useCallback(\n      (e: TransitionEvent) => {\n        if (e.target !== ref.current || e.propertyName !== dimension) return;\n        setStatus(status === 'expanding' ? 'expanded' : 'collapsed');\n      },\n      [ref.current, status]\n    );\n\n    useLayoutEffect(() => {\n      const wantsToCollapse = collapsed;\n      const wantsToExpand = !collapsed;\n      const canCollapse = ['expanded', 'expanding'].includes(status);\n      const canExpand = ['collapsed', 'collapsing'].includes(status);\n\n      if (wantsToExpand && canExpand) {\n        onBeforeExpand?.();\n        setStatus('expanding');\n      } else if (wantsToCollapse && canCollapse) {\n        onBeforeCollapse?.();\n        setStatus('collapsing');\n      }\n\n      if (status === 'expanded' && previousStatus !== 'expanded') {\n        onAfterExpand?.();\n      } else if (status === 'collapsed' && previousStatus !== 'collapsed') {\n        onAfterCollapse?.();\n      }\n\n      setStyle(\n        getStyle({\n          dimension,\n          min,\n          max,\n          transitionSpeed,\n          nullWhenCollapsed,\n          status,\n          el: ref.current,\n          transitionTimingFunction: themeAnimation.timing.ease\n        })\n      );\n    }, [collapsed, status, min, max]);\n\n    if (status !== previousStatus && ['expanded', 'collapsed'].includes(previousStatus!)) {\n      style = getStyle({\n        dimension,\n        min,\n        max,\n        transitionSpeed,\n        nullWhenCollapsed,\n        status: status === 'expanding' ? 'collapsing' : 'expanding',\n        el: ref.current,\n        transitionTimingFunction: themeAnimation.timing.ease\n      });\n    }\n\n    return status === 'collapsed' && nullWhenCollapsed && !min ? null : (\n      <Tag ref={ref} onTransitionEnd={onTransitionEnd} {...restProps} style={style}>\n        {children}\n      </Tag>\n    );\n  }\n);\n\nexport default ExpandCollapse;\n"]}
+{"version":3,"file":"ExpandCollapse.js","sourceRoot":"","sources":["../../../src/components/ExpandCollapse/ExpandCollapse.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { CSSProperties, FunctionComponent, PropsWithoutRef, ReactNode, Ref } from 'react';\nimport { forwardRef, useCallback, useLayoutEffect, useState } from 'react';\n\nimport { useConsolidatedRef, usePrevious, useTheme } from '../../hooks';\nimport type { AsProp, BaseProps, ForwardProps, PropsWithDefaults } from '../../types';\n\nexport interface ExpandCollapseProps extends AsProp, BaseProps {\n  /** Content to expand/collapse. */\n  children?: ReactNode;\n  /**\n   * If true,the content will be hidden.\n   * @default false\n   */\n  collapsed?: boolean;\n  /**\n   * Used to determine the transition property.\n   * @default 'height'\n   */\n  dimension?: 'height' | 'width';\n  /** Minimum height/width to collapse to. This will set the starting collapsed size as well. */\n  min?: string;\n  /** Maximum height/width to expand to. Expanded state will expanded up until, but not beyond, the natural height/width of the element. */\n  max?: string;\n  /** Callback fired after content collapsed. */\n  onAfterCollapse?: () => void;\n  /** Callback fired after content expanded. */\n  onAfterExpand?: () => void;\n  /** Callback fired before content collapsed. */\n  onBeforeCollapse?: () => void;\n  /** Callback fired before content expanded. */\n  onBeforeExpand?: () => void;\n  /**\n   * Determine the speed of animation. This value comes from `theme.base.animation.speed`.\n   * @default '0.25s'\n   */\n  transitionSpeed?: string;\n  /**\n   * If true, removes the component from the real DOM when collapsed. For full virtual DOM unmount(if necessary), perform at a parent level.\n   * @default false\n   */\n  nullWhenCollapsed?: boolean;\n}\n\ntype ExpandCollapsePropsWithDefaults = PropsWithDefaults<\n  ExpandCollapseProps,\n  'collapsed' | 'dimension' | 'transitionSpeed' | 'nullWhenCollapsed'\n>;\n\ntype Statuses = 'collapsed' | 'collapsing' | 'expanded' | 'expanding';\n\ninterface GetStyleProps\n  extends Pick<\n    ExpandCollapsePropsWithDefaults,\n    'dimension' | 'transitionSpeed' | 'min' | 'max' | 'nullWhenCollapsed'\n  > {\n  status: Statuses;\n  el?: HTMLElement | null;\n  transitionTimingFunction?: string;\n}\n\nconst getScrollSize = (\n  el: HTMLElement,\n  dimension: ExpandCollapsePropsWithDefaults['dimension']\n): string => {\n  if (!el) return '';\n  return dimension === 'height' ? `${el.scrollHeight}px` : `${el.scrollWidth}px`;\n};\n\nconst getStyle = (props: GetStyleProps): CSSProperties => {\n  const {\n    status,\n    dimension,\n    transitionSpeed,\n    transitionTimingFunction,\n    min,\n    max,\n    nullWhenCollapsed,\n    el\n  } = props;\n  const style: CSSProperties = {};\n  let maxSize = max;\n\n  if (el && !max) {\n    maxSize = getScrollSize(el, dimension!);\n  }\n\n  if (status === 'expanded' || status === 'collapsed') {\n    if (max || min) {\n      style[dimension as 'height' | 'width'] = status === 'expanded' ? maxSize : min || 0;\n      style[`overflow${dimension === 'width' ? 'X' : 'Y'}`] = 'hidden';\n    }\n\n    if (status === 'collapsed' && !nullWhenCollapsed && !min) {\n      style[dimension as 'height' | 'width'] = 0;\n      style.overflow = 'hidden';\n      style.visibility = 'hidden';\n    }\n  }\n\n  if (status === 'expanding' || status === 'collapsing') {\n    style[dimension as 'height' | 'width'] = status === 'expanding' ? maxSize : min || 0;\n    style.overflow = 'hidden';\n    style.transitionProperty = dimension;\n    style.transitionDuration = `max(${transitionSpeed}, 0.01ms)`;\n    style.transitionTimingFunction = transitionTimingFunction;\n  }\n\n  return style;\n};\n\nconst ExpandCollapse: FunctionComponent<ExpandCollapseProps & ForwardProps> = forwardRef(\n  function ExpandCollapse(props: PropsWithoutRef<ExpandCollapseProps>, refArg: Ref<HTMLElement>) {\n    const {\n      base: { animation: themeAnimation }\n    } = useTheme();\n\n    const {\n      children,\n      dimension = 'height',\n      collapsed = false,\n      onBeforeExpand,\n      onAfterExpand,\n      onBeforeCollapse,\n      onAfterCollapse,\n      transitionSpeed = themeAnimation.speed,\n      min,\n      max,\n      nullWhenCollapsed = false,\n      as: Tag = 'div',\n      ...restProps\n    } = props;\n\n    const [status, setStatus] = useState<Statuses>(collapsed ? 'collapsed' : 'expanded');\n    const styleStateHook = useState<CSSProperties>();\n    const setStyle = styleStateHook[1];\n    let style = styleStateHook[0];\n    const previousStatus = usePrevious(status);\n    const ref = useConsolidatedRef(refArg);\n\n    const onTransitionEnd = useCallback(\n      (e: TransitionEvent) => {\n        if (e.target !== ref.current || e.propertyName !== dimension) return;\n        setStatus(status === 'expanding' ? 'expanded' : 'collapsed');\n      },\n      [ref.current, status]\n    );\n\n    useLayoutEffect(() => {\n      const wantsToCollapse = collapsed;\n      const wantsToExpand = !collapsed;\n      const canCollapse = ['expanded', 'expanding'].includes(status);\n      const canExpand = ['collapsed', 'collapsing'].includes(status);\n\n      if (wantsToExpand && canExpand) {\n        onBeforeExpand?.();\n        setStatus('expanding');\n      } else if (wantsToCollapse && canCollapse) {\n        onBeforeCollapse?.();\n        setStatus('collapsing');\n      }\n\n      if (status === 'expanded' && previousStatus !== 'expanded') {\n        onAfterExpand?.();\n      } else if (status === 'collapsed' && previousStatus !== 'collapsed') {\n        onAfterCollapse?.();\n      }\n\n      setStyle(\n        getStyle({\n          dimension,\n          min,\n          max,\n          transitionSpeed,\n          nullWhenCollapsed,\n          status,\n          el: ref.current,\n          transitionTimingFunction: themeAnimation.timing.ease\n        })\n      );\n    }, [collapsed, status, min, max]);\n\n    if (status !== previousStatus && ['expanded', 'collapsed'].includes(previousStatus!)) {\n      style = getStyle({\n        dimension,\n        min,\n        max,\n        transitionSpeed,\n        nullWhenCollapsed,\n        status: status === 'expanding' ? 'collapsing' : 'expanding',\n        el: ref.current,\n        transitionTimingFunction: themeAnimation.timing.ease\n      });\n    }\n\n    return status === 'collapsed' && nullWhenCollapsed && !min ? null : (\n      <Tag\n        ref={ref}\n        onTransitionEnd={onTransitionEnd}\n        {...restProps}\n        inert={status === 'collapsed' && !nullWhenCollapsed && !min ? '' : undefined}\n        style={style}\n      >\n        {children}\n      </Tag>\n    );\n  }\n);\n\nexport default ExpandCollapse;\n"]}

package/lib/components/FieldGroup/FieldGroup.d.ts

@@ -1,6 +1,6 @@
-import type { FunctionComponent, Ref, ReactNode } from 'react';
+import type { Ref, ReactNode } from 'react';
 import type { ActionsProps } from '../Actions';
-import type { BaseProps, ForwardProps, HeadingTag } from '../../types';
+import type { BaseProps, ForwardRefForwardPropsComponent, HeadingTag } from '../../types';
 import type { AdditionalInfoProps } from '../AdditionalInfo';
 export type FieldGroupProps = BaseProps & {
     /** The content of the Field Group. */
@@ -45,9 +45,9 @@ export declare const StyledFieldGroupName: import("styled-components").StyledCom
 export declare const StyledFieldGroupLegend: import("styled-components").StyledComponent<"legend", import("styled-components").DefaultTheme, Pick<FieldGroupProps, "collapsed">, never>;
 export declare const StyledFieldGroup: import("styled-components").StyledComponent<"fieldset", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledGroupContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
-    collapsed?: boolean | undefined;
-    border?: boolean | undefined;
+    collapsed?: boolean;
+    border?: boolean;
 }, never>;
-declare const FieldGroup: FunctionComponent<FieldGroupProps & ForwardProps>;
+declare const FieldGroup: ForwardRefForwardPropsComponent<FieldGroupProps>;
 export default FieldGroup;
 //# sourceMappingURL=FieldGroup.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"FieldGroup.d.ts","sourceRoot":"","sources":["../../../src/components/FieldGroup/FieldGroup.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAmB,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAYhF,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAE/C,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAKvE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAK7D,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG;IACxC,sCAAsC;IACtC,QAAQ,EAAE,SAAS,CAAC;IACpB,2EAA2E;IAC3E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,4DAA4D;IAC5D,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,2CAA2C;IAC3C,GAAG,CAAC,EAAE,GAAG,CAAC,mBAAmB,CAAC,CAAC;CAChC,GAAG,CACE;IACE,gDAAgD;IAChD,IAAI,EAAE,MAAM,CAAC;IACb,wCAAwC;IACxC,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,4DAA4D;IAC5D,cAAc,CAAC,EAAE;QACf,OAAO,CAAC,EAAE,mBAAmB,CAAC,SAAS,CAAC,CAAC;QACzC,OAAO,EAAE,mBAAmB,CAAC,UAAU,CAAC,CAAC;KAC1C,CAAC;IACF,gDAAgD;IAChD,OAAO,CAAC,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;IAChC;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;CAChC,GACD;IACE,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,UAAU,CAAC,EAAE,KAAK,CAAC;IACnB,cAAc,CAAC,EAAE,KAAK,CAAC;IACvB,OAAO,CAAC,EAAE,KAAK,CAAC;IAChB,SAAS,CAAC,EAAE,KAAK,CAAC;IAClB,iBAAiB,CAAC,EAAE,KAAK,CAAC;CAC3B,CACJ,CAAC;AA+BJ,eAAO,MAAM,oBAAoB,0GAAgB,CAAC;AAElD,eAAO,MAAM,sBAAsB,4IA+BlC,CAAC;AAIF,eAAO,MAAM,gBAAgB,8GAiC5B,CAAC;AAIF,eAAO,MAAM,oBAAoB;;;SA+BhC,CAAC;AA8BF,QAAA,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,GAAG,YAAY,CAoFjE,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"FieldGroup.d.ts","sourceRoot":"","sources":["../../../src/components/FieldGroup/FieldGroup.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAmB,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAY7D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAE/C,OAAO,KAAK,EAAE,SAAS,EAAE,+BAA+B,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAK1F,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAK7D,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG;IACxC,sCAAsC;IACtC,QAAQ,EAAE,SAAS,CAAC;IACpB,2EAA2E;IAC3E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,4DAA4D;IAC5D,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,2CAA2C;IAC3C,GAAG,CAAC,EAAE,GAAG,CAAC,mBAAmB,CAAC,CAAC;CAChC,GAAG,CACE;IACE,gDAAgD;IAChD,IAAI,EAAE,MAAM,CAAC;IACb,wCAAwC;IACxC,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,4DAA4D;IAC5D,cAAc,CAAC,EAAE;QACf,OAAO,CAAC,EAAE,mBAAmB,CAAC,SAAS,CAAC,CAAC;QACzC,OAAO,EAAE,mBAAmB,CAAC,UAAU,CAAC,CAAC;KAC1C,CAAC;IACF,gDAAgD;IAChD,OAAO,CAAC,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;IAChC;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;CAChC,GACD;IACE,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,UAAU,CAAC,EAAE,KAAK,CAAC;IACnB,cAAc,CAAC,EAAE,KAAK,CAAC;IACvB,OAAO,CAAC,EAAE,KAAK,CAAC;IAChB,SAAS,CAAC,EAAE,KAAK,CAAC;IAClB,iBAAiB,CAAC,EAAE,KAAK,CAAC;CAC3B,CACJ,CAAC;AA+BJ,eAAO,MAAM,oBAAoB,0GAAgB,CAAC;AAElD,eAAO,MAAM,sBAAsB,4IA+BlC,CAAC;AAIF,eAAO,MAAM,gBAAgB,8GAiC5B,CAAC;AAIF,eAAO,MAAM,oBAAoB;gBAA4B,OAAO;aAAW,OAAO;SA+BrF,CAAC;AA6BF,QAAA,MAAM,UAAU,EAAE,+BAA+B,CAAC,eAAe,CAkF/D,CAAC;AAEH,eAAe,UAAU,CAAC"}

package/lib/components/FieldGroup/FieldGroup.js

@@ -100,8 +100,8 @@ export const StyledGroupContainer = styled.div(({ theme, collapsed, border }) =>
 });
 StyledGroupContainer.defaultProps = defaultThemeProp;
 // Components
-const FieldGroupLegend = ({ name, children, collapsed, actions, additionalInfo, ...restProps }) => {
-    return (_jsx(StyledFieldGroupLegend, { collapsed: collapsed, ...restProps, children: _jsxs(Flex, { container: { alignItems: 'center', justify: 'between', gap: 0.5 }, children: [_jsxs(Flex, { container: { alignItems: 'center', gap: 0.5 }, children: [children, additionalInfo && (_jsx(AdditionalInfo, { heading: additionalInfo.heading, contextualLabel: name, children: additionalInfo.content }))] }), actions && _jsx(Actions, { items: actions })] }) }));
+const FieldGroupLegend = ({ name, children, collapsed, actions, additionalInfo }) => {
+    return (_jsx(StyledFieldGroupLegend, { collapsed: collapsed, children: _jsxs(Flex, { container: { alignItems: 'center', justify: 'between', gap: 0.5 }, children: [_jsxs(Flex, { container: { alignItems: 'center', gap: 0.5 }, children: [children, additionalInfo && (_jsx(AdditionalInfo, { heading: additionalInfo.heading, contextualLabel: name, children: additionalInfo.content }))] }), actions && _jsx(Actions, { items: actions })] }) }));
 };
 const FieldGroup = forwardRef(function FieldGroup({ children, description, name, additionalInfo, actions, collapsed, headingTag, onToggleCollapsed, variant, ...restProps }, ref) {
     const t = useI18n();
@@ -109,7 +109,7 @@ const FieldGroup = forwardRef(function FieldGroup({ children, description, name,
     const descAndChildren = (_jsxs(Grid, { container: { cols: 'minmax(0, 1fr)', gap: 2 }, children: [description && _jsx(HTML, { id: `${uid}-description`, as: 'p', content: description }), _jsx("div", { children: children })] }));
     return (_jsx(StyledGroupContainer, { border: variant === 'form-group', collapsed: collapsed, children: _jsxs(StyledFieldGroup, { "aria-label": name, "aria-describedby": description ? `${uid}-description` : undefined, ...restProps, ref: ref, children: [name && (_jsx(FieldGroupLegend, { collapsed: collapsed, actions: actions, additionalInfo: additionalInfo, name: name, children: typeof collapsed === 'boolean' ? (_jsx(StyledExpandButton, { type: 'button', variant: 'text', onClick: () => {
                             onToggleCollapsed?.();
-                        }, "aria-expanded": collapsed ? 'false' : 'true', "aria-label": t(collapsed ? 'expand_noun' : 'collapse_noun', [name]), children: _jsxs(Flex, { container: { direction: 'row', alignItems: 'center', gap: 0.5 }, forwardedAs: 'span', children: [_jsx(Icon, { name: 'caret-right' }), headingTag ? (_jsx(Text, { variant: headingTag, children: name })) : (_jsx(StyledFieldGroupName, { children: name }))] }) })) : (_jsx(_Fragment, { children: headingTag ? (_jsx(Text, { variant: headingTag, children: name })) : (_jsx(StyledFieldGroupName, { children: name })) })) })), typeof collapsed === 'boolean' ? (_jsx(ExpandCollapse, { collapsed: collapsed, children: descAndChildren })) : (descAndChildren)] }) }));
+                        }, "aria-expanded": !collapsed, "aria-label": t(collapsed ? 'expand_noun' : 'collapse_noun', [name]), children: _jsxs(Flex, { container: { direction: 'row', alignItems: 'center', gap: 0.5 }, forwardedAs: 'span', children: [_jsx(Icon, { name: 'caret-right' }), headingTag ? (_jsx(Text, { variant: headingTag, children: name })) : (_jsx(StyledFieldGroupName, { children: name }))] }) })) : (_jsx(_Fragment, { children: headingTag ? (_jsx(Text, { variant: headingTag, children: name })) : (_jsx(StyledFieldGroupName, { children: name })) })) })), typeof collapsed === 'boolean' ? (_jsx(ExpandCollapse, { collapsed: collapsed, children: descAndChildren })) : (descAndChildren)] }) }));
 });
 export default FieldGroup;
 //# sourceMappingURL=FieldGroup.js.map

package/lib/components/FieldGroup/FieldGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"FieldGroup.js","sourceRoot":"","sources":["../../../src/components/FieldGroup/FieldGroup.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef } from 'react';\nimport type { FunctionComponent, PropsWithoutRef, Ref, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Text from '../Text';\nimport Button from '../Button';\nimport ExpandCollapse from '../ExpandCollapse';\nimport Flex from '../Flex';\nimport Grid from '../Grid';\nimport HTML from '../HTML';\nimport Icon, { StyledIcon, registerIcon } from '../Icon';\nimport * as caretRightIcon from '../Icon/icons/caret-right.icon';\nimport Actions from '../Actions';\nimport type { ActionsProps } from '../Actions';\nimport { defaultThemeProp } from '../../theme';\nimport type { BaseProps, ForwardProps, HeadingTag } from '../../types';\nimport { useDirection, useI18n, useUID } from '../../hooks';\nimport { calculateFontSize, omitProps } from '../../styles';\nimport type { FontSize } from '../../styles';\nimport AdditionalInfo from '../AdditionalInfo';\nimport type { AdditionalInfoProps } from '../AdditionalInfo';\n\nregisterIcon(caretRightIcon);\n\n// Types\nexport type FieldGroupProps = BaseProps & {\n  /** The content of the Field Group. */\n  children: ReactNode;\n  /** A description of the field group to be displayed above the controls. */\n  description?: string;\n  /** The display and markup variant to apply to the group. */\n  variant?: 'form-group';\n  /** A reference to the wrapping element. */\n  ref?: Ref<HTMLFieldSetElement>;\n} & (\n    | {\n        /** The name associated with the Field Group. */\n        name: string;\n        /** Select the heading tag for header */\n        headingTag?: HeadingTag;\n        /** Provides additional info relevant to the field group. */\n        additionalInfo?: {\n          heading?: AdditionalInfoProps['heading'];\n          content: AdditionalInfoProps['children'];\n        };\n        /** An array of actions to add to the header. */\n        actions?: ActionsProps['items'];\n        /**\n         * Controls the collapsed state of the field group.\n         * Passing undefined will render the field group as non-collapsible.\n         * @default false\n         */\n        collapsed?: boolean;\n        /**\n         * Called when user clicks the toggle button.\n         */\n        onToggleCollapsed?: () => void;\n      }\n    | {\n        name?: undefined;\n        headingTag?: never;\n        additionalInfo?: never;\n        actions?: never;\n        collapsed?: never;\n        onToggleCollapsed?: never;\n      }\n  );\n\ninterface FieldGroupLegendProps extends Pick<FieldGroupProps, 'collapsed'> {\n  name: NonNullable<FieldGroupProps['name']>;\n  actions?: ActionsProps['items'];\n  children?: ReactNode;\n  additionalInfo?: FieldGroupProps['additionalInfo'];\n}\n\n// Styles\nconst StyledExpandButton = styled(Button)(({\n  theme: {\n    base: { animation }\n  }\n}) => {\n  const { rtl } = useDirection();\n  return css`\n    ${StyledIcon} {\n      transition: transform ${animation.speed} ${animation.timing.ease};\n    }\n    &[aria-expanded='true'] ${StyledIcon} {\n      transform: rotate(90deg);\n    }\n    &[aria-expanded='false'] ${StyledIcon} {\n      transform: rotate(${rtl ? 180 : 0}deg);\n    }\n  `;\n});\n\nStyledExpandButton.defaultProps = defaultThemeProp;\n\nexport const StyledFieldGroupName = styled.span``;\n\nexport const StyledFieldGroupLegend = styled.legend.withConfig<Pick<FieldGroupProps, 'collapsed'>>(\n  omitProps('collapsed')\n)(\n  ({\n    collapsed,\n    theme: {\n      base: {\n        spacing,\n        animation,\n        'hit-area': { 'mouse-min': hitAreaMouse, 'finger-min': hitAreaFinger }\n      }\n    }\n  }) => {\n    return css`\n      width: 100%;\n      margin-bottom: 0;\n      ${!collapsed &&\n      css`\n        margin-block-end: calc(1.5 * ${spacing});\n      `}\n      transition: margin-block-end ${animation.speed} ${animation.timing.ease};\n\n      > ${StyledExpandButton} {\n        min-height: ${hitAreaMouse};\n\n        @media (pointer: 'coarse') {\n          min-height: ${hitAreaFinger};\n        }\n      }\n    `;\n  }\n);\n\nStyledFieldGroupLegend.defaultProps = defaultThemeProp;\n\nexport const StyledFieldGroup = styled.fieldset(\n  ({\n    theme: {\n      base: { 'font-size': fontSize, 'font-scale': fontScale },\n      components: { text }\n    }\n  }) => {\n    const fontSizes = calculateFontSize(fontSize, fontScale);\n\n    return css`\n      border: none;\n\n      & ${StyledFieldGroupName} {\n        font-size: ${fontSizes[text.h3['font-size'] as FontSize]};\n        font-weight: ${text.h3['font-weight']};\n      }\n\n      & & ${StyledFieldGroupName} {\n        font-size: ${fontSizes[text.h4['font-size'] as FontSize]};\n        font-weight: ${text.h4['font-weight']};\n      }\n\n      & & & ${StyledFieldGroupName} {\n        font-size: ${fontSizes[text.h5['font-size'] as FontSize]};\n        font-weight: ${text.h5['font-weight']};\n      }\n\n      & & & & ${StyledFieldGroupName} {\n        font-size: ${fontSizes[text.h6['font-size'] as FontSize]};\n        font-weight: ${text.h6['font-weight']};\n      }\n    `;\n  }\n);\n\nStyledFieldGroup.defaultProps = defaultThemeProp;\n\nexport const StyledGroupContainer = styled.div<{ collapsed?: boolean; border?: boolean }>(\n  ({ theme, collapsed, border }) => {\n    const {\n      base: {\n        animation: { speed, timing },\n        palette: { 'border-line': borderColor },\n        spacing,\n        'border-radius': baseBorderRadius\n      },\n      components: {\n        'form-control': { 'border-width': borderWidth }\n      }\n    } = theme;\n    if (!border) return null;\n\n    const showBorder = !collapsed;\n\n    return css`\n      padding: ${spacing};\n      border-radius: calc(${baseBorderRadius} / 2);\n      border: ${borderWidth} solid transparent;\n      transition-property: border-color;\n      transition-duration: ${speed};\n      transition-timing-function: ${timing.ease};\n\n      ${showBorder &&\n      css`\n        border-color: ${borderColor};\n      `}\n    `;\n  }\n);\n\nStyledGroupContainer.defaultProps = defaultThemeProp;\n\n// Components\nconst FieldGroupLegend: FunctionComponent<FieldGroupLegendProps> = ({\n  name,\n  children,\n  collapsed,\n  actions,\n  additionalInfo,\n  ...restProps\n}) => {\n  return (\n    <StyledFieldGroupLegend collapsed={collapsed} {...restProps}>\n      <Flex container={{ alignItems: 'center', justify: 'between', gap: 0.5 }}>\n        <Flex container={{ alignItems: 'center', gap: 0.5 }}>\n          {children}\n          {additionalInfo && (\n            <AdditionalInfo heading={additionalInfo.heading} contextualLabel={name}>\n              {additionalInfo.content}\n            </AdditionalInfo>\n          )}\n        </Flex>\n        {actions && <Actions items={actions} />}\n      </Flex>\n    </StyledFieldGroupLegend>\n  );\n};\n\nconst FieldGroup: FunctionComponent<FieldGroupProps & ForwardProps> = forwardRef(\n  function FieldGroup(\n    {\n      children,\n      description,\n      name,\n      additionalInfo,\n      actions,\n      collapsed,\n      headingTag,\n      onToggleCollapsed,\n      variant,\n      ...restProps\n    }: PropsWithoutRef<FieldGroupProps>,\n    ref: FieldGroupProps['ref']\n  ) {\n    const t = useI18n();\n    const uid = useUID();\n\n    const descAndChildren = (\n      <Grid container={{ cols: 'minmax(0, 1fr)', gap: 2 }}>\n        {description && <HTML id={`${uid}-description`} as='p' content={description} />}\n        <div>{children}</div>\n      </Grid>\n    );\n\n    return (\n      <StyledGroupContainer border={variant === 'form-group'} collapsed={collapsed}>\n        <StyledFieldGroup\n          aria-label={name}\n          aria-describedby={description ? `${uid}-description` : undefined}\n          {...restProps}\n          ref={ref}\n        >\n          {name && (\n            <FieldGroupLegend\n              collapsed={collapsed}\n              actions={actions}\n              additionalInfo={additionalInfo}\n              name={name}\n            >\n              {typeof collapsed === 'boolean' ? (\n                <StyledExpandButton\n                  type='button'\n                  variant='text'\n                  onClick={() => {\n                    onToggleCollapsed?.();\n                  }}\n                  aria-expanded={collapsed ? 'false' : 'true'}\n                  aria-label={t(collapsed ? 'expand_noun' : 'collapse_noun', [name])}\n                >\n                  <Flex\n                    container={{ direction: 'row', alignItems: 'center', gap: 0.5 }}\n                    forwardedAs='span'\n                  >\n                    <Icon name='caret-right' />\n                    {headingTag ? (\n                      <Text variant={headingTag}>{name}</Text>\n                    ) : (\n                      <StyledFieldGroupName>{name}</StyledFieldGroupName>\n                    )}\n                  </Flex>\n                </StyledExpandButton>\n              ) : (\n                <>\n                  {headingTag ? (\n                    <Text variant={headingTag}>{name}</Text>\n                  ) : (\n                    <StyledFieldGroupName>{name}</StyledFieldGroupName>\n                  )}\n                </>\n              )}\n            </FieldGroupLegend>\n          )}\n\n          {typeof collapsed === 'boolean' ? (\n            <ExpandCollapse collapsed={collapsed}>{descAndChildren}</ExpandCollapse>\n          ) : (\n            descAndChildren\n          )}\n        </StyledFieldGroup>\n      </StyledGroupContainer>\n    );\n  }\n);\n\nexport default FieldGroup;\n"]}
+{"version":3,"file":"FieldGroup.js","sourceRoot":"","sources":["../../../src/components/FieldGroup/FieldGroup.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef } from 'react';\nimport type { PropsWithoutRef, Ref, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Text from '../Text';\nimport Button from '../Button';\nimport ExpandCollapse from '../ExpandCollapse';\nimport Flex from '../Flex';\nimport Grid from '../Grid';\nimport HTML from '../HTML';\nimport Icon, { StyledIcon, registerIcon } from '../Icon';\nimport * as caretRightIcon from '../Icon/icons/caret-right.icon';\nimport Actions from '../Actions';\nimport type { ActionsProps } from '../Actions';\nimport { defaultThemeProp } from '../../theme';\nimport type { BaseProps, ForwardRefForwardPropsComponent, HeadingTag } from '../../types';\nimport { useDirection, useI18n, useUID } from '../../hooks';\nimport { calculateFontSize, omitProps } from '../../styles';\nimport type { FontSize } from '../../styles';\nimport AdditionalInfo from '../AdditionalInfo';\nimport type { AdditionalInfoProps } from '../AdditionalInfo';\n\nregisterIcon(caretRightIcon);\n\n// Types\nexport type FieldGroupProps = BaseProps & {\n  /** The content of the Field Group. */\n  children: ReactNode;\n  /** A description of the field group to be displayed above the controls. */\n  description?: string;\n  /** The display and markup variant to apply to the group. */\n  variant?: 'form-group';\n  /** A reference to the wrapping element. */\n  ref?: Ref<HTMLFieldSetElement>;\n} & (\n    | {\n        /** The name associated with the Field Group. */\n        name: string;\n        /** Select the heading tag for header */\n        headingTag?: HeadingTag;\n        /** Provides additional info relevant to the field group. */\n        additionalInfo?: {\n          heading?: AdditionalInfoProps['heading'];\n          content: AdditionalInfoProps['children'];\n        };\n        /** An array of actions to add to the header. */\n        actions?: ActionsProps['items'];\n        /**\n         * Controls the collapsed state of the field group.\n         * Passing undefined will render the field group as non-collapsible.\n         * @default false\n         */\n        collapsed?: boolean;\n        /**\n         * Called when user clicks the toggle button.\n         */\n        onToggleCollapsed?: () => void;\n      }\n    | {\n        name?: undefined;\n        headingTag?: never;\n        additionalInfo?: never;\n        actions?: never;\n        collapsed?: never;\n        onToggleCollapsed?: never;\n      }\n  );\n\ninterface FieldGroupLegendProps extends Pick<FieldGroupProps, 'collapsed'> {\n  name: NonNullable<FieldGroupProps['name']>;\n  actions?: ActionsProps['items'];\n  children?: ReactNode;\n  additionalInfo?: FieldGroupProps['additionalInfo'];\n}\n\n// Styles\nconst StyledExpandButton = styled(Button)(({\n  theme: {\n    base: { animation }\n  }\n}) => {\n  const { rtl } = useDirection();\n  return css`\n    ${StyledIcon} {\n      transition: transform ${animation.speed} ${animation.timing.ease};\n    }\n    &[aria-expanded='true'] ${StyledIcon} {\n      transform: rotate(90deg);\n    }\n    &[aria-expanded='false'] ${StyledIcon} {\n      transform: rotate(${rtl ? 180 : 0}deg);\n    }\n  `;\n});\n\nStyledExpandButton.defaultProps = defaultThemeProp;\n\nexport const StyledFieldGroupName = styled.span``;\n\nexport const StyledFieldGroupLegend = styled.legend.withConfig<Pick<FieldGroupProps, 'collapsed'>>(\n  omitProps('collapsed')\n)(\n  ({\n    collapsed,\n    theme: {\n      base: {\n        spacing,\n        animation,\n        'hit-area': { 'mouse-min': hitAreaMouse, 'finger-min': hitAreaFinger }\n      }\n    }\n  }) => {\n    return css`\n      width: 100%;\n      margin-bottom: 0;\n      ${!collapsed &&\n      css`\n        margin-block-end: calc(1.5 * ${spacing});\n      `}\n      transition: margin-block-end ${animation.speed} ${animation.timing.ease};\n\n      > ${StyledExpandButton} {\n        min-height: ${hitAreaMouse};\n\n        @media (pointer: 'coarse') {\n          min-height: ${hitAreaFinger};\n        }\n      }\n    `;\n  }\n);\n\nStyledFieldGroupLegend.defaultProps = defaultThemeProp;\n\nexport const StyledFieldGroup = styled.fieldset(\n  ({\n    theme: {\n      base: { 'font-size': fontSize, 'font-scale': fontScale },\n      components: { text }\n    }\n  }) => {\n    const fontSizes = calculateFontSize(fontSize, fontScale);\n\n    return css`\n      border: none;\n\n      & ${StyledFieldGroupName} {\n        font-size: ${fontSizes[text.h3['font-size'] as FontSize]};\n        font-weight: ${text.h3['font-weight']};\n      }\n\n      & & ${StyledFieldGroupName} {\n        font-size: ${fontSizes[text.h4['font-size'] as FontSize]};\n        font-weight: ${text.h4['font-weight']};\n      }\n\n      & & & ${StyledFieldGroupName} {\n        font-size: ${fontSizes[text.h5['font-size'] as FontSize]};\n        font-weight: ${text.h5['font-weight']};\n      }\n\n      & & & & ${StyledFieldGroupName} {\n        font-size: ${fontSizes[text.h6['font-size'] as FontSize]};\n        font-weight: ${text.h6['font-weight']};\n      }\n    `;\n  }\n);\n\nStyledFieldGroup.defaultProps = defaultThemeProp;\n\nexport const StyledGroupContainer = styled.div<{ collapsed?: boolean; border?: boolean }>(\n  ({ theme, collapsed, border }) => {\n    const {\n      base: {\n        animation: { speed, timing },\n        palette: { 'border-line': borderColor },\n        spacing,\n        'border-radius': baseBorderRadius\n      },\n      components: {\n        'form-control': { 'border-width': borderWidth }\n      }\n    } = theme;\n    if (!border) return null;\n\n    const showBorder = !collapsed;\n\n    return css`\n      padding: ${spacing};\n      border-radius: calc(${baseBorderRadius} / 2);\n      border: ${borderWidth} solid transparent;\n      transition-property: border-color;\n      transition-duration: ${speed};\n      transition-timing-function: ${timing.ease};\n\n      ${showBorder &&\n      css`\n        border-color: ${borderColor};\n      `}\n    `;\n  }\n);\n\nStyledGroupContainer.defaultProps = defaultThemeProp;\n\n// Components\nconst FieldGroupLegend = ({\n  name,\n  children,\n  collapsed,\n  actions,\n  additionalInfo\n}: FieldGroupLegendProps) => {\n  return (\n    <StyledFieldGroupLegend collapsed={collapsed}>\n      <Flex container={{ alignItems: 'center', justify: 'between', gap: 0.5 }}>\n        <Flex container={{ alignItems: 'center', gap: 0.5 }}>\n          {children}\n          {additionalInfo && (\n            <AdditionalInfo heading={additionalInfo.heading} contextualLabel={name}>\n              {additionalInfo.content}\n            </AdditionalInfo>\n          )}\n        </Flex>\n        {actions && <Actions items={actions} />}\n      </Flex>\n    </StyledFieldGroupLegend>\n  );\n};\n\nconst FieldGroup: ForwardRefForwardPropsComponent<FieldGroupProps> = forwardRef(function FieldGroup(\n  {\n    children,\n    description,\n    name,\n    additionalInfo,\n    actions,\n    collapsed,\n    headingTag,\n    onToggleCollapsed,\n    variant,\n    ...restProps\n  }: PropsWithoutRef<FieldGroupProps>,\n  ref: FieldGroupProps['ref']\n) {\n  const t = useI18n();\n  const uid = useUID();\n\n  const descAndChildren = (\n    <Grid container={{ cols: 'minmax(0, 1fr)', gap: 2 }}>\n      {description && <HTML id={`${uid}-description`} as='p' content={description} />}\n      <div>{children}</div>\n    </Grid>\n  );\n\n  return (\n    <StyledGroupContainer border={variant === 'form-group'} collapsed={collapsed}>\n      <StyledFieldGroup\n        aria-label={name}\n        aria-describedby={description ? `${uid}-description` : undefined}\n        {...restProps}\n        ref={ref}\n      >\n        {name && (\n          <FieldGroupLegend\n            collapsed={collapsed}\n            actions={actions}\n            additionalInfo={additionalInfo}\n            name={name}\n          >\n            {typeof collapsed === 'boolean' ? (\n              <StyledExpandButton\n                type='button'\n                variant='text'\n                onClick={() => {\n                  onToggleCollapsed?.();\n                }}\n                aria-expanded={!collapsed}\n                aria-label={t(collapsed ? 'expand_noun' : 'collapse_noun', [name])}\n              >\n                <Flex\n                  container={{ direction: 'row', alignItems: 'center', gap: 0.5 }}\n                  forwardedAs='span'\n                >\n                  <Icon name='caret-right' />\n                  {headingTag ? (\n                    <Text variant={headingTag}>{name}</Text>\n                  ) : (\n                    <StyledFieldGroupName>{name}</StyledFieldGroupName>\n                  )}\n                </Flex>\n              </StyledExpandButton>\n            ) : (\n              <>\n                {headingTag ? (\n                  <Text variant={headingTag}>{name}</Text>\n                ) : (\n                  <StyledFieldGroupName>{name}</StyledFieldGroupName>\n                )}\n              </>\n            )}\n          </FieldGroupLegend>\n        )}\n\n        {typeof collapsed === 'boolean' ? (\n          <ExpandCollapse collapsed={collapsed}>{descAndChildren}</ExpandCollapse>\n        ) : (\n          descAndChildren\n        )}\n      </StyledFieldGroup>\n    </StyledGroupContainer>\n  );\n});\n\nexport default FieldGroup;\n"]}

package/lib/components/FieldGroup/FieldGroupList.d.ts

@@ -1,5 +1,5 @@
-import type { FunctionComponent, Ref } from 'react';
-import type { ForwardProps } from '../../types';
+import type { Ref } from 'react';
+import type { ForwardRefForwardPropsComponent } from '../../types';
 import type { FieldGroupProps } from './FieldGroup';
 export type FieldGroupListItemProps = FieldGroupProps & {
     /** The ID of the field group list item */
@@ -14,7 +14,7 @@ export interface FieldGroupListProps {
     onDelete?: (id: string) => void;
     ref?: Ref<HTMLDivElement>;
 }
-export declare const StyledListItem: import("styled-components").StyledComponent<FunctionComponent<FieldGroupProps & ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
-declare const FieldGroupList: FunctionComponent<FieldGroupListProps & ForwardProps>;
+export declare const StyledListItem: import("styled-components").StyledComponent<ForwardRefForwardPropsComponent<FieldGroupProps>, import("styled-components").DefaultTheme, {}, never>;
+declare const FieldGroupList: ForwardRefForwardPropsComponent<FieldGroupListProps>;
 export default FieldGroupList;
 //# sourceMappingURL=FieldGroupList.d.ts.map

package/lib/components/FieldGroup/FieldGroupList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FieldGroupList.d.ts","sourceRoot":"","sources":["../../../src/components/FieldGroup/FieldGroupList.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAGrE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAShD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAIpD,MAAM,MAAM,uBAAuB,GAAG,eAAe,GAAG;IACtD,0CAA0C;IAC1C,EAAE,EAAE,MAAM,CAAC;IACX,oCAAoC;IACpC,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACjC,CAAC;AAEF,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,uBAAuB,EAAE,CAAC;IACjC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,IAAI,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAcD,eAAO,MAAM,cAAc,qJAa1B,CAAC;AAYF,QAAA,MAAM,cAAc,EAAE,iBAAiB,CAAC,mBAAmB,GAAG,YAAY,CAoFzE,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"FieldGroupList.d.ts","sourceRoot":"","sources":["../../../src/components/FieldGroup/FieldGroupList.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAGlD,OAAO,KAAK,EAAE,+BAA+B,EAAE,MAAM,aAAa,CAAC;AASnE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAIpD,MAAM,MAAM,uBAAuB,GAAG,eAAe,GAAG;IACtD,0CAA0C;IAC1C,EAAE,EAAE,MAAM,CAAC;IACX,oCAAoC;IACpC,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACjC,CAAC;AAEF,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,uBAAuB,EAAE,CAAC;IACjC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,IAAI,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAcD,eAAO,MAAM,cAAc,oJAa1B,CAAC;AAYF,QAAA,MAAM,cAAc,EAAE,+BAA+B,CAAC,mBAAmB,CAoFxE,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/lib/components/FieldGroup/FieldGroupList.js.map

@@ -1 +1 @@
-{"version":3,"file":"FieldGroupList.js","sourceRoot":"","sources":["../../../src/components/FieldGroup/FieldGroupList.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useEffect, useRef } from 'react';\nimport type { FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport type { ForwardProps } from '../../types';\nimport Button from '../Button';\nimport Icon, { registerIcon } from '../Icon';\nimport * as plusIcon from '../Icon/icons/plus.icon';\nimport { useI18n } from '../../hooks';\nimport { defaultThemeProp } from '../../theme';\nimport { getActiveElement, getFocusables } from '../../utils';\n\nimport FieldGroup, { StyledFieldGroup } from './FieldGroup';\nimport type { FieldGroupProps } from './FieldGroup';\n\nregisterIcon(plusIcon);\n\nexport type FieldGroupListItemProps = FieldGroupProps & {\n  /** The ID of the field group list item */\n  id: string;\n  /** Item level onDelete callback. */\n  onDelete?: (id: string) => void;\n};\n\nexport interface FieldGroupListProps {\n  items: FieldGroupListItemProps[];\n  contextualLabel?: string;\n  onAdd?: () => void;\n  onDelete?: (id: string) => void;\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst StyledFieldGroupList = styled.div(\n  ({ theme }) => css`\n    margin-block-start: ${theme.base.spacing};\n\n    ${StyledFieldGroup} {\n      margin-block-start: 0;\n    }\n  `\n);\n\nStyledFieldGroupList.defaultProps = defaultThemeProp;\n\nexport const StyledListItem = styled(FieldGroup)(\n  ({ theme }) => css`\n    padding: ${theme.base.spacing} 0 calc(2 * ${theme.base.spacing});\n\n    &:not(:last-of-type) {\n      border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n      margin-block-end: calc(2 * ${theme.base.spacing});\n    }\n\n    legend {\n      margin-block-end: 0;\n    }\n  `\n);\n\nStyledListItem.defaultProps = defaultThemeProp;\n\nconst StyledAddButton = styled(Button)(\n  ({ theme }) => css`\n    margin-top: ${theme.base.spacing};\n  `\n);\n\nStyledAddButton.defaultProps = defaultThemeProp;\n\nconst FieldGroupList: FunctionComponent<FieldGroupListProps & ForwardProps> = forwardRef(\n  function FieldGroupList(\n    { items, onAdd, onDelete, contextualLabel, ...restProps }: PropsWithoutRef<FieldGroupListProps>,\n    ref: FieldGroupListProps['ref']\n  ) {\n    const t = useI18n();\n    const lastItemRef = useRef<HTMLDivElement>(null);\n    const addBtnRef = useRef<HTMLButtonElement>(null);\n\n    useEffect(() => {\n      const currentActiveEl = getActiveElement();\n      if (currentActiveEl === addBtnRef.current && lastItemRef.current) {\n        const groupItemLegend = lastItemRef.current.querySelector(':scope > legend');\n        const focusables = getFocusables(lastItemRef.current);\n\n        const groupActionButtons = focusables.filter(focusable =>\n          groupItemLegend?.contains(focusable)\n        );\n\n        const groupContentFocusables = focusables.filter(\n          focusable => !groupItemLegend?.contains(focusable)\n        );\n\n        if (groupContentFocusables.length > 0) {\n          groupContentFocusables[0].focus();\n        } else {\n          groupActionButtons[0]?.focus();\n        }\n      }\n    }, [items.length]);\n\n    return (\n      <StyledFieldGroupList ref={ref} {...restProps}>\n        {items.map(\n          (\n            {\n              id,\n              children,\n              name,\n              headingTag,\n              onDelete: itemOnDelete,\n              ...restItemProps\n            }: FieldGroupListItemProps,\n            index\n          ) => {\n            const isLastItem = index === items.length - 1;\n            return (\n              <StyledListItem\n                key={id}\n                name={name}\n                headingTag={headingTag}\n                {...restItemProps}\n                actions={\n                  onDelete || itemOnDelete\n                    ? [\n                        {\n                          id: 'delete',\n                          text: t('delete'),\n                          icon: 'trash',\n                          iconOnly: true,\n                          onClick: () => {\n                            itemOnDelete?.(id);\n                            onDelete?.(id);\n                          }\n                        }\n                      ]\n                    : undefined\n                }\n                ref={isLastItem ? lastItemRef : undefined}\n              >\n                {children}\n              </StyledListItem>\n            );\n          }\n        )}\n        {onAdd && (\n          <StyledAddButton variant='link' onClick={onAdd} ref={addBtnRef}>\n            <Icon name='plus' />\n            {contextualLabel ? t('add_noun', [contextualLabel]) : t('add')}\n          </StyledAddButton>\n        )}\n      </StyledFieldGroupList>\n    );\n  }\n);\n\nexport default FieldGroupList;\n"]}
+{"version":3,"file":"FieldGroupList.js","sourceRoot":"","sources":["../../../src/components/FieldGroup/FieldGroupList.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useEffect, useRef } from 'react';\nimport type { PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport type { ForwardRefForwardPropsComponent } from '../../types';\nimport Button from '../Button';\nimport Icon, { registerIcon } from '../Icon';\nimport * as plusIcon from '../Icon/icons/plus.icon';\nimport { useI18n } from '../../hooks';\nimport { defaultThemeProp } from '../../theme';\nimport { getActiveElement, getFocusables } from '../../utils';\n\nimport FieldGroup, { StyledFieldGroup } from './FieldGroup';\nimport type { FieldGroupProps } from './FieldGroup';\n\nregisterIcon(plusIcon);\n\nexport type FieldGroupListItemProps = FieldGroupProps & {\n  /** The ID of the field group list item */\n  id: string;\n  /** Item level onDelete callback. */\n  onDelete?: (id: string) => void;\n};\n\nexport interface FieldGroupListProps {\n  items: FieldGroupListItemProps[];\n  contextualLabel?: string;\n  onAdd?: () => void;\n  onDelete?: (id: string) => void;\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst StyledFieldGroupList = styled.div(\n  ({ theme }) => css`\n    margin-block-start: ${theme.base.spacing};\n\n    ${StyledFieldGroup} {\n      margin-block-start: 0;\n    }\n  `\n);\n\nStyledFieldGroupList.defaultProps = defaultThemeProp;\n\nexport const StyledListItem = styled(FieldGroup)(\n  ({ theme }) => css`\n    padding: ${theme.base.spacing} 0 calc(2 * ${theme.base.spacing});\n\n    &:not(:last-of-type) {\n      border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n      margin-block-end: calc(2 * ${theme.base.spacing});\n    }\n\n    legend {\n      margin-block-end: 0;\n    }\n  `\n);\n\nStyledListItem.defaultProps = defaultThemeProp;\n\nconst StyledAddButton = styled(Button)(\n  ({ theme }) => css`\n    margin-top: ${theme.base.spacing};\n  `\n);\n\nStyledAddButton.defaultProps = defaultThemeProp;\n\nconst FieldGroupList: ForwardRefForwardPropsComponent<FieldGroupListProps> = forwardRef(\n  function FieldGroupList(\n    { items, onAdd, onDelete, contextualLabel, ...restProps }: PropsWithoutRef<FieldGroupListProps>,\n    ref: FieldGroupListProps['ref']\n  ) {\n    const t = useI18n();\n    const lastItemRef = useRef<HTMLDivElement>(null);\n    const addBtnRef = useRef<HTMLButtonElement>(null);\n\n    useEffect(() => {\n      const currentActiveEl = getActiveElement();\n      if (currentActiveEl === addBtnRef.current && lastItemRef.current) {\n        const groupItemLegend = lastItemRef.current.querySelector(':scope > legend');\n        const focusables = getFocusables(lastItemRef.current);\n\n        const groupActionButtons = focusables.filter(focusable =>\n          groupItemLegend?.contains(focusable)\n        );\n\n        const groupContentFocusables = focusables.filter(\n          focusable => !groupItemLegend?.contains(focusable)\n        );\n\n        if (groupContentFocusables.length > 0) {\n          groupContentFocusables[0].focus();\n        } else {\n          groupActionButtons[0]?.focus();\n        }\n      }\n    }, [items.length]);\n\n    return (\n      <StyledFieldGroupList ref={ref} {...restProps}>\n        {items.map(\n          (\n            {\n              id,\n              children,\n              name,\n              headingTag,\n              onDelete: itemOnDelete,\n              ...restItemProps\n            }: FieldGroupListItemProps,\n            index\n          ) => {\n            const isLastItem = index === items.length - 1;\n            return (\n              <StyledListItem\n                key={id}\n                name={name}\n                headingTag={headingTag}\n                {...restItemProps}\n                actions={\n                  onDelete || itemOnDelete\n                    ? [\n                        {\n                          id: 'delete',\n                          text: t('delete'),\n                          icon: 'trash',\n                          iconOnly: true,\n                          onClick: () => {\n                            itemOnDelete?.(id);\n                            onDelete?.(id);\n                          }\n                        }\n                      ]\n                    : undefined\n                }\n                ref={isLastItem ? lastItemRef : undefined}\n              >\n                {children}\n              </StyledListItem>\n            );\n          }\n        )}\n        {onAdd && (\n          <StyledAddButton variant='link' onClick={onAdd} ref={addBtnRef}>\n            <Icon name='plus' />\n            {contextualLabel ? t('add_noun', [contextualLabel]) : t('add')}\n          </StyledAddButton>\n        )}\n      </StyledFieldGroupList>\n    );\n  }\n);\n\nexport default FieldGroupList;\n"]}

package/lib/components/FieldValueList/FieldValueList.d.ts

@@ -24,14 +24,14 @@ export interface FieldValueListProps extends BaseProps, NoChildrenProp, TestIdPr
 }
 export declare const StyledFieldName: import("styled-components").StyledComponent<"dt", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledFieldValue: import("styled-components").StyledComponent<"dd", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledStackedFieldValue: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export type StyledFieldValueListProps = Pick<FieldValueListProps, 'variant'>;
 export declare const StyledFieldValueList: import("styled-components").StyledComponent<"dl", import("styled-components").DefaultTheme, StyledFieldValueListProps, never>;
-export declare const StyledStackedFieldValue: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const FieldValueItem: (({ testId, name, value, variant, truncate }: FieldValueListItemProps) => JSX.Element) & {
-    getTestIds: (testIdProp?: string | null | undefined) => import("../../types").TestIdsRecord<readonly ["name", "value"]>;
+export declare const FieldValueItem: (({ testId, name, value, variant, truncate }: FieldValueListItemProps) => import("react/jsx-runtime").JSX.Element) & {
+    getTestIds: (testIdProp?: TestIdProp["testId"]) => import("../../types").TestIdsRecord<readonly ["name", "value"]>;
 };
 declare const _default: FunctionComponent<FieldValueListProps & ForwardProps> & {
-    getTestIds: (testIdProp?: string | null | undefined) => import("../../types").TestIdsRecord<readonly []>;
+    getTestIds: (testIdProp?: TestIdProp["testId"]) => import("../../types").TestIdsRecord<readonly []>;
 };
 export default _default;
 //# sourceMappingURL=FieldValueList.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"FieldValueList.d.ts","sourceRoot":"","sources":["../../../src/components/FieldValueList/FieldValueList.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,iBAAiB,EAAO,MAAM,OAAO,CAAC;AAG/D,OAAO,KAAK,EACV,SAAS,EACT,aAAa,EACb,YAAY,EACZ,cAAc,EACd,UAAU,EACX,MAAM,aAAa,CAAC;AAWrB,MAAM,MAAM,iBAAiB,GAAG,QAAQ,GAAG,SAAS,CAAC;AAErD,UAAU,sBAAuB,SAAQ,UAAU;IACjD,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,OAAO,CAAC,EAAE,iBAAiB,CAAC;CAC7B;AAED,MAAM,MAAM,uBAAuB,GAC/B,CAAC,sBAAsB,GAAG;IACxB,KAAK,CAAC,EAAE,aAAa,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC;IAC3C,QAAQ,CAAC,EAAE,KAAK,CAAC;CAClB,CAAC,GACF,CAAC,sBAAsB,GAAG;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC,CAAC;AAEP,MAAM,WAAW,mBAAoB,SAAQ,SAAS,EAAE,cAAc,EAAE,UAAU;IAChF,qDAAqD;IACrD,MAAM,EAAE,uBAAuB,EAAE,CAAC;IAClC;;;OAGG;IACH,OAAO,CAAC,EAAE,iBAAiB,GAAG,kBAAkB,CAAC;CAClD;AAED,eAAO,MAAM,eAAe,wGAE3B,CAAC;AAEF,eAAO,MAAM,gBAAgB,wGAE5B,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG,IAAI,CAAC,mBAAmB,EAAE,SAAS,CAAC,CAAC;AAE7E,eAAO,MAAM,oBAAoB,+HAuB/B,CAAC;AAIH,eAAO,MAAM,uBAAuB,yGAAe,CAAC;AAEpD,eAAO,MAAM,cAAc,gDACsC,uBAAuB;;CA4BvF,CAAC;;;;AAsDF,wBAAqE"}
+{"version":3,"file":"FieldValueList.d.ts","sourceRoot":"","sources":["../../../src/components/FieldValueList/FieldValueList.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,iBAAiB,EAAO,MAAM,OAAO,CAAC;AAG/D,OAAO,KAAK,EACV,SAAS,EACT,aAAa,EACb,YAAY,EACZ,cAAc,EACd,UAAU,EACX,MAAM,aAAa,CAAC;AAWrB,MAAM,MAAM,iBAAiB,GAAG,QAAQ,GAAG,SAAS,CAAC;AAErD,UAAU,sBAAuB,SAAQ,UAAU;IACjD,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,OAAO,CAAC,EAAE,iBAAiB,CAAC;CAC7B;AAED,MAAM,MAAM,uBAAuB,GAC/B,CAAC,sBAAsB,GAAG;IACxB,KAAK,CAAC,EAAE,aAAa,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC;IAC3C,QAAQ,CAAC,EAAE,KAAK,CAAC;CAClB,CAAC,GACF,CAAC,sBAAsB,GAAG;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC,CAAC;AAEP,MAAM,WAAW,mBAAoB,SAAQ,SAAS,EAAE,cAAc,EAAE,UAAU;IAChF,qDAAqD;IACrD,MAAM,EAAE,uBAAuB,EAAE,CAAC;IAClC;;;OAGG;IACH,OAAO,CAAC,EAAE,iBAAiB,GAAG,kBAAkB,CAAC;CAClD;AAED,eAAO,MAAM,eAAe,wGAE3B,CAAC;AAEF,eAAO,MAAM,gBAAgB,wGAE5B,CAAC;AAEF,eAAO,MAAM,uBAAuB,yGAAe,CAAC;AAEpD,MAAM,MAAM,yBAAyB,GAAG,IAAI,CAAC,mBAAmB,EAAE,SAAS,CAAC,CAAC;AAE7E,eAAO,MAAM,oBAAoB,+HA+C/B,CAAC;AAIH,eAAO,MAAM,cAAc,gDACsC,uBAAuB;;CA4BvF,CAAC;;;;AA8DF,wBAAqE"}

package/lib/components/FieldValueList/FieldValueList.js

@@ -3,7 +3,7 @@ import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 import Grid from '../Grid';
 import { StyledLabel } from '../Label';
-import { useBreakpoint, useConsolidatedRef, useTestIds } from '../../hooks';
+import { useBreakpoint, useConsolidatedRef, useTestIds, useTheme } from '../../hooks';
 import { defaultThemeProp } from '../../theme';
 import ShowMoreLess from '../ShowMoreLess';
 import { withTestIds } from '../../utils';
@@ -15,7 +15,9 @@ export const StyledFieldName = styled.dt `
 export const StyledFieldValue = styled.dd `
   word-break: break-word;
 `;
+export const StyledStackedFieldValue = styled.div ``;
 export const StyledFieldValueList = styled.dl(({ variant, theme }) => {
+    const { components: { 'field-value-list': { inline: { detached } } } } = theme;
     return css `
     width: 100%;
 
@@ -37,10 +39,26 @@ export const StyledFieldValueList = styled.dl(({ variant, theme }) => {
         padding-bottom: calc(0.5 * ${theme.base.spacing});
       }
     `}
+
+    ${detached &&
+        variant === 'inline' &&
+        css `
+      dt {
+        width: 100%;
+      }
+      ${StyledLabel} {
+        max-width: unset;
+      }
+      dd:not(:last-of-type),
+      dt:not(:last-of-type),
+      ${StyledStackedFieldValue} {
+        border-bottom: 0.0625rem dashed ${theme.base.palette['border-line']};
+        padding-bottom: calc(0.5 * ${theme.base.spacing});
+      }
+    `}
   `;
 });
 StyledFieldValueList.defaultProps = defaultThemeProp;
-export const StyledStackedFieldValue = styled.div ``;
 export const FieldValueItem = withTestIds(({ testId, name, value, variant = 'inline', truncate = true }) => {
     const testIds = useTestIds(testId, getFieldValueItemTestIds);
     const displayValue = typeof value === 'string' && truncate ? (_jsx(ShowMoreLess, { lines: 3, children: value })) : (value);
@@ -54,24 +72,24 @@ const FieldValueList = forwardRef(function FieldValueList({ testId, fields, vari
         breakpointRef: fieldValueListRef,
         themeProp: 'content-width'
     });
+    const { components: { 'field-value-list': { inline: { detached } } } } = useTheme();
     return (_jsx(Grid, { "data-testid": testIds.root, ...restProps, ref: fieldValueListRef, container: {
             cols: ['inline', 'value-comparison'].includes(variant) && isXSContentWidthOrAbove
                 ? '16ch minmax(0, 1fr)'
                 : 'minmax(0, 1fr)',
-            colGap: variant !== 'value-comparison' ? 2 : 0,
-            rowGap: variant !== 'value-comparison' ? 1 : 0.5
+            colGap: !detached && variant !== 'value-comparison' ? 2 : 0,
+            rowGap: !detached && variant !== 'value-comparison' ? 1 : 0.5
         }, as: StyledFieldValueList, variant: isXSContentWidthOrAbove ? variant : 'stacked', children: fields.map(({ id, name, value, truncate = true, variant: fieldVariant }) => {
             const sharedProps = {
                 name,
                 variant: (fieldVariant ?? variant) === 'stacked' || !isXSContentWidthOrAbove
                     ? 'stacked'
-                    : 'inline',
-                key: id ?? name
+                    : 'inline'
             };
             if (typeof value === 'string') {
-                return _jsx(FieldValueItem, { ...sharedProps, value: value, truncate: truncate });
+                return (_jsx(FieldValueItem, { ...sharedProps, value: value, truncate: truncate }, id ?? name));
             }
-            return _jsx(FieldValueItem, { ...sharedProps, value: value });
+            return _jsx(FieldValueItem, { ...sharedProps, value: value }, id ?? name);
         }) }));
 });
 export default withTestIds(FieldValueList, getFieldValueListTestIds);

package/lib/components/FieldValueList/FieldValueList.js.map

@@ -1 +1 @@
-{"version":3,"file":"FieldValueList.js","sourceRoot":"","sources":["../../../src/components/FieldValueList/FieldValueList.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef } from 'react';\nimport type { ReactNode, FunctionComponent, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport type {\n  BaseProps,\n  ExcludeStrict,\n  ForwardProps,\n  NoChildrenProp,\n  TestIdProp\n} from '../../types';\nimport Grid from '../Grid';\nimport { StyledLabel } from '../Label';\nimport { useBreakpoint, useConsolidatedRef, useTestIds } from '../../hooks';\nimport { defaultThemeProp } from '../../theme';\nimport ShowMoreLess from '../ShowMoreLess';\nimport { withTestIds } from '../../utils';\nimport NoValue from '../NoValue/NoValue';\n\nimport { getFieldValueListTestIds, getFieldValueItemTestIds } from './FieldValueList.test-ids';\n\nexport type FieldValueVariant = 'inline' | 'stacked';\n\ninterface BaseFieldValueListItem extends TestIdProp {\n  name: string;\n  id?: string;\n  variant?: FieldValueVariant;\n}\n\nexport type FieldValueListItemProps =\n  | (BaseFieldValueListItem & {\n      value?: ExcludeStrict<ReactNode, 'string'>;\n      truncate?: never;\n    })\n  | (BaseFieldValueListItem & {\n      value: string;\n      truncate?: boolean;\n    });\n\nexport interface FieldValueListProps extends BaseProps, NoChildrenProp, TestIdProp {\n  /** The set of field values to render in the list. */\n  fields: FieldValueListItemProps[];\n  /**\n   * Determines if the field and values should be displayed on the same line, or stacked with the field above the value.\n   * @default 'inline'\n   */\n  variant?: FieldValueVariant | 'value-comparison';\n}\n\nexport const StyledFieldName = styled.dt`\n  word-break: break-word;\n`;\n\nexport const StyledFieldValue = styled.dd`\n  word-break: break-word;\n`;\n\nexport type StyledFieldValueListProps = Pick<FieldValueListProps, 'variant'>;\n\nexport const StyledFieldValueList = styled.dl<StyledFieldValueListProps>(({ variant, theme }) => {\n  return css`\n    width: 100%;\n\n    ${variant === 'value-comparison' &&\n    css`\n      dt {\n        width: 100%;\n      }\n      dd {\n        text-align: end;\n        padding-inline-start: calc(2 * ${theme.base.spacing});\n      }\n      ${StyledLabel} {\n        max-width: unset;\n      }\n      dd:not(:last-of-type),\n      dt:not(:last-of-type) {\n        border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n        padding-bottom: calc(0.5 * ${theme.base.spacing});\n      }\n    `}\n  `;\n});\n\nStyledFieldValueList.defaultProps = defaultThemeProp;\n\nexport const StyledStackedFieldValue = styled.div``;\n\nexport const FieldValueItem = withTestIds(\n  ({ testId, name, value, variant = 'inline', truncate = true }: FieldValueListItemProps) => {\n    const testIds = useTestIds(testId, getFieldValueItemTestIds);\n\n    const displayValue =\n      typeof value === 'string' && truncate ? (\n        <ShowMoreLess lines={3}>{value}</ShowMoreLess>\n      ) : (\n        value\n      );\n\n    const labelAndValue = (\n      <>\n        <StyledLabel data-testid={testIds.name} as={StyledFieldName}>\n          {name}\n        </StyledLabel>\n        <StyledFieldValue data-testid={testIds.value}>\n          {value ? displayValue : <NoValue />}\n        </StyledFieldValue>\n      </>\n    );\n\n    return variant === 'stacked' ? (\n      <StyledStackedFieldValue data-testid={testIds.root}>{labelAndValue}</StyledStackedFieldValue>\n    ) : (\n      <>{labelAndValue}</>\n    );\n  },\n  getFieldValueItemTestIds\n);\n\nconst FieldValueList: FunctionComponent<FieldValueListProps & ForwardProps> = forwardRef(\n  function FieldValueList(\n    { testId, fields, variant = 'inline', ...restProps }: FieldValueListProps,\n    ref: Ref<HTMLDivElement>\n  ) {\n    const testIds = useTestIds(testId, getFieldValueListTestIds);\n\n    const fieldValueListRef = useConsolidatedRef<HTMLDivElement>(ref);\n\n    const isXSContentWidthOrAbove = useBreakpoint('xs', {\n      breakpointRef: fieldValueListRef,\n      themeProp: 'content-width'\n    });\n\n    return (\n      <Grid\n        data-testid={testIds.root}\n        {...restProps}\n        ref={fieldValueListRef}\n        container={{\n          cols:\n            ['inline', 'value-comparison'].includes(variant) && isXSContentWidthOrAbove\n              ? '16ch minmax(0, 1fr)'\n              : 'minmax(0, 1fr)',\n          colGap: variant !== 'value-comparison' ? 2 : 0,\n          rowGap: variant !== 'value-comparison' ? 1 : 0.5\n        }}\n        as={StyledFieldValueList}\n        variant={isXSContentWidthOrAbove ? variant : 'stacked'}\n      >\n        {fields.map(({ id, name, value, truncate = true, variant: fieldVariant }) => {\n          const sharedProps: BaseFieldValueListItem & { key: string } = {\n            name,\n            variant:\n              (fieldVariant ?? variant) === 'stacked' || !isXSContentWidthOrAbove\n                ? 'stacked'\n                : 'inline',\n\n            key: id ?? name\n          };\n\n          if (typeof value === 'string') {\n            return <FieldValueItem {...sharedProps} value={value} truncate={truncate} />;\n          }\n\n          return <FieldValueItem {...sharedProps} value={value} />;\n        })}\n      </Grid>\n    );\n  }\n);\n\nexport default withTestIds(FieldValueList, getFieldValueListTestIds);\n"]}
+{"version":3,"file":"FieldValueList.js","sourceRoot":"","sources":["../../../src/components/FieldValueList/FieldValueList.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef } from 'react';\nimport type { ReactNode, FunctionComponent, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport type {\n  BaseProps,\n  ExcludeStrict,\n  ForwardProps,\n  NoChildrenProp,\n  TestIdProp\n} from '../../types';\nimport Grid from '../Grid';\nimport { StyledLabel } from '../Label';\nimport { useBreakpoint, useConsolidatedRef, useTestIds, useTheme } from '../../hooks';\nimport { defaultThemeProp } from '../../theme';\nimport ShowMoreLess from '../ShowMoreLess';\nimport { withTestIds } from '../../utils';\nimport NoValue from '../NoValue/NoValue';\n\nimport { getFieldValueListTestIds, getFieldValueItemTestIds } from './FieldValueList.test-ids';\n\nexport type FieldValueVariant = 'inline' | 'stacked';\n\ninterface BaseFieldValueListItem extends TestIdProp {\n  name: string;\n  id?: string;\n  variant?: FieldValueVariant;\n}\n\nexport type FieldValueListItemProps =\n  | (BaseFieldValueListItem & {\n      value?: ExcludeStrict<ReactNode, 'string'>;\n      truncate?: never;\n    })\n  | (BaseFieldValueListItem & {\n      value: string;\n      truncate?: boolean;\n    });\n\nexport interface FieldValueListProps extends BaseProps, NoChildrenProp, TestIdProp {\n  /** The set of field values to render in the list. */\n  fields: FieldValueListItemProps[];\n  /**\n   * Determines if the field and values should be displayed on the same line, or stacked with the field above the value.\n   * @default 'inline'\n   */\n  variant?: FieldValueVariant | 'value-comparison';\n}\n\nexport const StyledFieldName = styled.dt`\n  word-break: break-word;\n`;\n\nexport const StyledFieldValue = styled.dd`\n  word-break: break-word;\n`;\n\nexport const StyledStackedFieldValue = styled.div``;\n\nexport type StyledFieldValueListProps = Pick<FieldValueListProps, 'variant'>;\n\nexport const StyledFieldValueList = styled.dl<StyledFieldValueListProps>(({ variant, theme }) => {\n  const {\n    components: {\n      'field-value-list': {\n        inline: { detached }\n      }\n    }\n  } = theme;\n  return css`\n    width: 100%;\n\n    ${variant === 'value-comparison' &&\n    css`\n      dt {\n        width: 100%;\n      }\n      dd {\n        text-align: end;\n        padding-inline-start: calc(2 * ${theme.base.spacing});\n      }\n      ${StyledLabel} {\n        max-width: unset;\n      }\n      dd:not(:last-of-type),\n      dt:not(:last-of-type) {\n        border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n        padding-bottom: calc(0.5 * ${theme.base.spacing});\n      }\n    `}\n\n    ${detached &&\n    variant === 'inline' &&\n    css`\n      dt {\n        width: 100%;\n      }\n      ${StyledLabel} {\n        max-width: unset;\n      }\n      dd:not(:last-of-type),\n      dt:not(:last-of-type),\n      ${StyledStackedFieldValue} {\n        border-bottom: 0.0625rem dashed ${theme.base.palette['border-line']};\n        padding-bottom: calc(0.5 * ${theme.base.spacing});\n      }\n    `}\n  `;\n});\n\nStyledFieldValueList.defaultProps = defaultThemeProp;\n\nexport const FieldValueItem = withTestIds(\n  ({ testId, name, value, variant = 'inline', truncate = true }: FieldValueListItemProps) => {\n    const testIds = useTestIds(testId, getFieldValueItemTestIds);\n\n    const displayValue =\n      typeof value === 'string' && truncate ? (\n        <ShowMoreLess lines={3}>{value}</ShowMoreLess>\n      ) : (\n        value\n      );\n\n    const labelAndValue = (\n      <>\n        <StyledLabel data-testid={testIds.name} as={StyledFieldName}>\n          {name}\n        </StyledLabel>\n        <StyledFieldValue data-testid={testIds.value}>\n          {value ? displayValue : <NoValue />}\n        </StyledFieldValue>\n      </>\n    );\n\n    return variant === 'stacked' ? (\n      <StyledStackedFieldValue data-testid={testIds.root}>{labelAndValue}</StyledStackedFieldValue>\n    ) : (\n      <>{labelAndValue}</>\n    );\n  },\n  getFieldValueItemTestIds\n);\n\nconst FieldValueList: FunctionComponent<FieldValueListProps & ForwardProps> = forwardRef(\n  function FieldValueList(\n    { testId, fields, variant = 'inline', ...restProps }: FieldValueListProps,\n    ref: Ref<HTMLDivElement>\n  ) {\n    const testIds = useTestIds(testId, getFieldValueListTestIds);\n\n    const fieldValueListRef = useConsolidatedRef<HTMLDivElement>(ref);\n\n    const isXSContentWidthOrAbove = useBreakpoint('xs', {\n      breakpointRef: fieldValueListRef,\n      themeProp: 'content-width'\n    });\n\n    const {\n      components: {\n        'field-value-list': {\n          inline: { detached }\n        }\n      }\n    } = useTheme();\n\n    return (\n      <Grid\n        data-testid={testIds.root}\n        {...restProps}\n        ref={fieldValueListRef}\n        container={{\n          cols:\n            ['inline', 'value-comparison'].includes(variant) && isXSContentWidthOrAbove\n              ? '16ch minmax(0, 1fr)'\n              : 'minmax(0, 1fr)',\n          colGap: !detached && variant !== 'value-comparison' ? 2 : 0,\n          rowGap: !detached && variant !== 'value-comparison' ? 1 : 0.5\n        }}\n        as={StyledFieldValueList}\n        variant={isXSContentWidthOrAbove ? variant : 'stacked'}\n      >\n        {fields.map(({ id, name, value, truncate = true, variant: fieldVariant }) => {\n          const sharedProps: BaseFieldValueListItem = {\n            name,\n            variant:\n              (fieldVariant ?? variant) === 'stacked' || !isXSContentWidthOrAbove\n                ? 'stacked'\n                : 'inline'\n          };\n\n          if (typeof value === 'string') {\n            return (\n              <FieldValueItem key={id ?? name} {...sharedProps} value={value} truncate={truncate} />\n            );\n          }\n\n          return <FieldValueItem key={id ?? name} {...sharedProps} value={value} />;\n        })}\n      </Grid>\n    );\n  }\n);\n\nexport default withTestIds(FieldValueList, getFieldValueListTestIds);\n"]}