@pega/cosmos-react-core 3.0.0-dev.3.0 → 3.0.0-dev.30.0

package/lib/components/FieldGroup/FieldGroup.js

@@ -1,77 +1,92 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useState } from 'react';
 import styled, { css } from 'styled-components';
-import Button, { StyledButton } from '../Button';
+import Button from '../Button';
 import ExpandCollapse from '../ExpandCollapse';
 import Flex from '../Flex';
+import HTML from '../HTML';
 import Icon, { StyledIcon, registerIcon } from '../Icon';
 import * as caretRightIcon from '../Icon/icons/caret-right.icon';
 import Actions from '../Actions';
 import { defaultThemeProp } from '../../theme';
-import { useI18n } from '../../hooks';
+import { useDirection, useI18n, useUID } from '../../hooks';
 import { calculateFontSize } from '../../styles';
+import AdditionalInfo from '../AdditionalInfo';
 registerIcon(caretRightIcon);
-export const StyledFieldGroupLegend = styled.legend(({ open, theme: { base: { spacing, animation } } }) => css `
-    width: 100%;
-    margin-bottom: 0;
-    ${open &&
-    css `
-      margin-block-end: ${spacing};
-    `}
-    transition: margin-block-end ${animation.speed} ${animation.timing.ease};
+const StyledExpandButton = styled(Button)(({ theme: { base: { animation } } }) => {
+    const { rtl } = useDirection();
+    return css `
+      ${StyledIcon} {
+        transition: transform ${animation.speed} ${animation.timing.ease};
+      }
+      &[aria-expanded='true'] ${StyledIcon} {
+        transform: rotate(90deg);
+      }
+      &[aria-expanded='false'] ${StyledIcon} {
+        transform: rotate(${rtl ? 180 : 0}deg);
+      }
+    `;
+});
+StyledExpandButton.defaultProps = defaultThemeProp;
+export const StyledFieldGroupName = styled.span ``;
+export const StyledFieldGroupLegend = styled.legend(({ open, theme: { base: { spacing, animation, 'hit-area': { 'mouse-min': hitAreaMouse, 'finger-min': hitAreaFinger } } } }) => {
+    return css `
+      width: 100%;
+      margin-bottom: 0;
+      ${open &&
+        css `
+        margin-block-end: calc(1.5 * ${spacing});
+      `}
+      transition: margin-block-end ${animation.speed} ${animation.timing.ease};
 
-    button ${StyledIcon} {
-      transition: transform ${animation.speed} ${animation.timing.ease};
-    }
+      > ${StyledExpandButton} {
+        min-height: ${hitAreaMouse};
 
-    button[aria-expanded='true'] ${StyledIcon} {
-      transform: rotate(90deg);
-    }
-    button[aria-expanded='false'] ${StyledIcon} {
-      transform: rotate(0);
-    }
-  `);
+        @media (pointer: 'coarse') {
+          min-height: ${hitAreaFinger};
+        }
+      }
+    `;
+});
 StyledFieldGroupLegend.defaultProps = defaultThemeProp;
 export const StyledFieldGroup = styled.fieldset(({ theme: { base: { 'font-size': fontSize, 'font-scale': fontScale }, components: { text } } }) => {
     const fontSizes = calculateFontSize(fontSize, fontScale);
     return css `
       border: none;
 
-      ${StyledFieldGroupLegend} ${StyledButton} {
-        font-weight: inherit;
-      }
-
-      & ${StyledFieldGroupLegend} {
+      & ${StyledFieldGroupName} {
         font-size: ${fontSizes[text.h3['font-size']]};
         font-weight: ${text.h3['font-weight']};
       }
 
-      & & ${StyledFieldGroupLegend} {
+      & & ${StyledFieldGroupName} {
         font-size: ${fontSizes[text.h4['font-size']]};
         font-weight: ${text.h4['font-weight']};
       }
 
-      & & & ${StyledFieldGroupLegend} {
+      & & & ${StyledFieldGroupName} {
         font-size: ${fontSizes[text.h5['font-size']]};
         font-weight: ${text.h5['font-weight']};
       }
 
-      & & & & ${StyledFieldGroupLegend} {
+      & & & & ${StyledFieldGroupName} {
         font-size: ${fontSizes[text.h6['font-size']]};
         font-weight: ${text.h6['font-weight']};
       }
     `;
 });
 StyledFieldGroup.defaultProps = defaultThemeProp;
-const FieldGroupLegend = ({ children, open, actions, ...restProps }) => {
-    return (_jsx(StyledFieldGroupLegend, { open: open, ...restProps, children: _jsxs(Flex, { container: { alignItems: 'center', justify: 'between' }, children: [children, actions && _jsx(Actions, { items: actions }, void 0)] }, void 0) }, void 0));
+const FieldGroupLegend = ({ children, open, actions, additionalInfo, ...restProps }) => {
+    return (_jsx(StyledFieldGroupLegend, { open: open, ...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, children: additionalInfo.content }))] }), actions && _jsx(Actions, { items: actions })] }) }));
 };
-const FieldGroup = forwardRef(({ children, name, actions, collapsible = false, defaultCollapsed = false, ...restProps }, ref) => {
+const FieldGroup = forwardRef(({ children, description, name, additionalInfo, actions, collapsible = false, defaultCollapsed = false, ...restProps }, ref) => {
     const [open, setOpen] = useState(!defaultCollapsed);
     const t = useI18n();
-    return (_jsxs(StyledFieldGroup, { "aria-label": name, ...restProps, ref: ref, children: [name && (_jsx(FieldGroupLegend, { open: open, actions: actions, children: collapsible ? (_jsx(Button, { type: 'button', variant: 'text', onClick: () => {
+    const uid = useUID();
+    const descAndChildren = (_jsxs(Flex, { container: { direction: 'column', gap: 3 }, children: [description && _jsx(HTML, { id: `${uid}-description`, as: 'p', content: description }), _jsx("div", { children: children })] }));
+    return (_jsxs(StyledFieldGroup, { "aria-label": name, "aria-describedby": description ? `${uid}-description` : undefined, ...restProps, ref: ref, children: [name && (_jsx(FieldGroupLegend, { open: open, actions: actions, additionalInfo: additionalInfo, children: collapsible ? (_jsx(StyledExpandButton, { type: 'button', variant: 'text', onClick: () => {
                         setOpen(cur => !cur);
-                    }, "aria-expanded": open ? 'true' : 'false', "aria-label": t(open ? 'collapse_noun' : 'expand_noun', [name]), children: _jsxs(Flex, { container: { direction: 'row', alignItems: 'center', gap: 0.5 }, forwardedAs: 'span', children: [_jsx(Icon, { name: 'caret-right' }, void 0), _jsx("span", { children: name }, void 0)] }, void 0) }, void 0)) : (_jsx("span", { children: name }, void 0)) }, void 0)), collapsible ? _jsx(ExpandCollapse, { collapsed: !open, children: children }, void 0) : children] }, void 0));
+                    }, "aria-expanded": open ? 'true' : 'false', "aria-label": t(open ? 'collapse_noun' : 'expand_noun', [name]), children: _jsxs(Flex, { container: { direction: 'row', alignItems: 'center', gap: 0.5 }, forwardedAs: 'span', children: [_jsx(Icon, { name: 'caret-right' }), _jsx(StyledFieldGroupName, { children: name })] }) })) : (_jsx(StyledFieldGroupName, { children: name })) })), collapsible ? (_jsx(ExpandCollapse, { collapsed: !open, 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, useState, FunctionComponent, PropsWithoutRef, Ref, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Button, { StyledButton } from '../Button';\nimport ExpandCollapse from '../ExpandCollapse';\nimport Flex from '../Flex';\nimport Icon, { StyledIcon, registerIcon } from '../Icon';\nimport * as caretRightIcon from '../Icon/icons/caret-right.icon';\nimport Actions, { ActionsProps } from '../Actions';\nimport { defaultThemeProp } from '../../theme';\nimport { BaseProps, ForwardProps } from '../../types';\nimport { useI18n } from '../../hooks';\nimport { calculateFontSize, FontSize } from '../../styles';\n\nregisterIcon(caretRightIcon);\n\nexport interface FieldGroupProps extends BaseProps {\n  /** The content of the Field Group. */\n  children: ReactNode;\n  /**\n   * If true, the Field Group will be able to collapse the content of its children by clicking on the name.\n   * @default false\n   */\n  collapsible?: boolean;\n  /**\n   * If true, the Field Group will be collapsed on the first render.\n   * @default false\n   */\n  defaultCollapsed?: boolean;\n  /** The name associated with the Field Group. */\n  name?: string;\n  /** An array of actions to add to the header. */\n  actions?: ActionsProps['items'];\n  /** A reference to the wrapping element. */\n  ref?: Ref<HTMLFieldSetElement>;\n}\n\ninterface FieldGroupLegendProps {\n  open: boolean;\n  actions?: ActionsProps['items'];\n  children?: ReactNode;\n}\n\nexport const StyledFieldGroupLegend = styled.legend<{ open: boolean }>(\n  ({\n    open,\n    theme: {\n      base: { spacing, animation }\n    }\n  }) => css`\n    width: 100%;\n    margin-bottom: 0;\n    ${open &&\n    css`\n      margin-block-end: ${spacing};\n    `}\n    transition: margin-block-end ${animation.speed} ${animation.timing.ease};\n\n    button ${StyledIcon} {\n      transition: transform ${animation.speed} ${animation.timing.ease};\n    }\n\n    button[aria-expanded='true'] ${StyledIcon} {\n      transform: rotate(90deg);\n    }\n    button[aria-expanded='false'] ${StyledIcon} {\n      transform: rotate(0);\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      ${StyledFieldGroupLegend} ${StyledButton} {\n        font-weight: inherit;\n      }\n\n      & ${StyledFieldGroupLegend} {\n        font-size: ${fontSizes[text.h3['font-size'] as FontSize]};\n        font-weight: ${text.h3['font-weight']};\n      }\n\n      & & ${StyledFieldGroupLegend} {\n        font-size: ${fontSizes[text.h4['font-size'] as FontSize]};\n        font-weight: ${text.h4['font-weight']};\n      }\n\n      & & & ${StyledFieldGroupLegend} {\n        font-size: ${fontSizes[text.h5['font-size'] as FontSize]};\n        font-weight: ${text.h5['font-weight']};\n      }\n\n      & & & & ${StyledFieldGroupLegend} {\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\nconst FieldGroupLegend: FunctionComponent<FieldGroupLegendProps> = ({\n  children,\n  open,\n  actions,\n  ...restProps\n}) => {\n  return (\n    <StyledFieldGroupLegend open={open} {...restProps}>\n      <Flex container={{ alignItems: 'center', justify: 'between' }}>\n        {children}\n        {actions && <Actions items={actions} />}\n      </Flex>\n    </StyledFieldGroupLegend>\n  );\n};\n\nconst FieldGroup: FunctionComponent<FieldGroupProps & ForwardProps> = forwardRef(\n  (\n    {\n      children,\n      name,\n      actions,\n      collapsible = false,\n      defaultCollapsed = false,\n      ...restProps\n    }: PropsWithoutRef<FieldGroupProps>,\n    ref: FieldGroupProps['ref']\n  ) => {\n    const [open, setOpen] = useState(!defaultCollapsed);\n    const t = useI18n();\n\n    return (\n      <StyledFieldGroup aria-label={name} {...restProps} ref={ref}>\n        {name && (\n          <FieldGroupLegend open={open} actions={actions}>\n            {collapsible ? (\n              <Button\n                type='button'\n                variant='text'\n                onClick={() => {\n                  setOpen(cur => !cur);\n                }}\n                aria-expanded={open ? 'true' : 'false'}\n                aria-label={t(open ? 'collapse_noun' : 'expand_noun', [name])}\n              >\n                <Flex\n                  container={{ direction: 'row', alignItems: 'center', gap: 0.5 }}\n                  forwardedAs='span'\n                >\n                  <Icon name='caret-right' />\n                  <span>{name}</span>\n                </Flex>\n              </Button>\n            ) : (\n              <span>{name}</span>\n            )}\n          </FieldGroupLegend>\n        )}\n        {collapsible ? <ExpandCollapse collapsed={!open}>{children}</ExpandCollapse> : children}\n      </StyledFieldGroup>\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, useState, FunctionComponent, PropsWithoutRef, Ref, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Button from '../Button';\nimport ExpandCollapse from '../ExpandCollapse';\nimport Flex from '../Flex';\nimport HTML from '../HTML';\nimport Icon, { StyledIcon, registerIcon } from '../Icon';\nimport * as caretRightIcon from '../Icon/icons/caret-right.icon';\nimport Actions, { ActionsProps } from '../Actions';\nimport { defaultThemeProp } from '../../theme';\nimport { BaseProps, ForwardProps } from '../../types';\nimport { useDirection, useI18n, useUID } from '../../hooks';\nimport { calculateFontSize, FontSize } from '../../styles';\nimport AdditionalInfo, { AdditionalInfoProps } from '../AdditionalInfo';\n\nregisterIcon(caretRightIcon);\n\nexport interface FieldGroupProps extends 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  /**\n   * If true, the Field Group will be able to collapse the content of its children by clicking on the name.\n   * @default false\n   */\n  collapsible?: boolean;\n  /**\n   * If true, the Field Group will be collapsed on the first render.\n   * @default false\n   */\n  defaultCollapsed?: boolean;\n  /** The name associated with the Field Group. */\n  name?: string;\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  /** A reference to the wrapping element. */\n  ref?: Ref<HTMLFieldSetElement>;\n}\n\ninterface FieldGroupLegendProps {\n  open: boolean;\n  actions?: ActionsProps['items'];\n  children?: ReactNode;\n  additionalInfo?: FieldGroupProps['additionalInfo'];\n}\n\nconst StyledExpandButton = styled(Button)(\n  ({\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);\n\nStyledExpandButton.defaultProps = defaultThemeProp;\n\nexport const StyledFieldGroupName = styled.span``;\n\nexport const StyledFieldGroupLegend = styled.legend<{ open: boolean }>(\n  ({\n    open,\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      ${open &&\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\nconst FieldGroupLegend: FunctionComponent<FieldGroupLegendProps> = ({\n  children,\n  open,\n  actions,\n  additionalInfo,\n  ...restProps\n}) => {\n  return (\n    <StyledFieldGroupLegend open={open} {...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}>\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  (\n    {\n      children,\n      description,\n      name,\n      additionalInfo,\n      actions,\n      collapsible = false,\n      defaultCollapsed = false,\n      ...restProps\n    }: PropsWithoutRef<FieldGroupProps>,\n    ref: FieldGroupProps['ref']\n  ) => {\n    const [open, setOpen] = useState(!defaultCollapsed);\n    const t = useI18n();\n    const uid = useUID();\n\n    const descAndChildren = (\n      <Flex container={{ direction: 'column', gap: 3 }}>\n        {description && <HTML id={`${uid}-description`} as='p' content={description} />}\n        <div>{children}</div>\n      </Flex>\n    );\n\n    return (\n      <StyledFieldGroup\n        aria-label={name}\n        aria-describedby={description ? `${uid}-description` : undefined}\n        {...restProps}\n        ref={ref}\n      >\n        {name && (\n          <FieldGroupLegend open={open} actions={actions} additionalInfo={additionalInfo}>\n            {collapsible ? (\n              <StyledExpandButton\n                type='button'\n                variant='text'\n                onClick={() => {\n                  setOpen(cur => !cur);\n                }}\n                aria-expanded={open ? 'true' : 'false'}\n                aria-label={t(open ? 'collapse_noun' : 'expand_noun', [name])}\n              >\n                <Flex\n                  container={{ direction: 'row', alignItems: 'center', gap: 0.5 }}\n                  forwardedAs='span'\n                >\n                  <Icon name='caret-right' />\n                  <StyledFieldGroupName>{name}</StyledFieldGroupName>\n                </Flex>\n              </StyledExpandButton>\n            ) : (\n              <StyledFieldGroupName>{name}</StyledFieldGroupName>\n            )}\n          </FieldGroupLegend>\n        )}\n        {collapsible ? (\n          <ExpandCollapse collapsed={!open}>{descAndChildren}</ExpandCollapse>\n        ) : (\n          descAndChildren\n        )}\n      </StyledFieldGroup>\n    );\n  }\n);\n\nexport default FieldGroup;\n"]}

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":"AAAA,OAAO,EAAE,iBAAiB,EAA+B,GAAG,EAAE,MAAM,OAAO,CAAC;AAG5E,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAO3C,OAAmB,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAI3D,MAAM,WAAW,uBAAwB,SAAQ,eAAe;IAC9D,0CAA0C;IAC1C,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,uBAAuB,EAAE,CAAC;IACjC,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;AAWD,eAAO,MAAM,cAAc,qJAe1B,CAAC;AAaF,QAAA,MAAM,cAAc,EAAE,iBAAiB,CAAC,mBAAmB,GAAG,YAAY,CAsCzE,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"FieldGroupList.d.ts","sourceRoot":"","sources":["../../../src/components/FieldGroup/FieldGroupList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAA+B,GAAG,EAAE,MAAM,OAAO,CAAC;AAG5E,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAO3C,OAAmB,EAAE,eAAe,EAAoB,MAAM,cAAc,CAAC;AAI7E,MAAM,WAAW,uBAAwB,SAAQ,eAAe;IAC9D,0CAA0C;IAC1C,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,uBAAuB,EAAE,CAAC;IACjC,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;AAeD,eAAO,MAAM,cAAc,qJAe1B,CAAC;AAaF,QAAA,MAAM,cAAc,EAAE,iBAAiB,CAAC,mBAAmB,GAAG,YAAY,CA6CzE,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/lib/components/FieldGroup/FieldGroupList.js

@@ -6,10 +6,14 @@ import Icon, { registerIcon } from '../Icon';
 import * as plusIcon from '../Icon/icons/plus.icon';
 import { useI18n } from '../../hooks';
 import { defaultThemeProp } from '../../theme';
-import FieldGroup from './FieldGroup';
+import FieldGroup, { StyledFieldGroup } from './FieldGroup';
 registerIcon(plusIcon);
 const StyledFieldGroupList = styled.div(({ theme }) => css `
-      margin-top: ${theme.base.spacing};
+      margin-block-start: ${theme.base.spacing};
+
+      ${StyledFieldGroup} {
+        margin-block-start: 0;
+      }
     `);
 StyledFieldGroupList.defaultProps = defaultThemeProp;
 export const StyledListItem = styled(FieldGroup)(({ theme }) => css `
@@ -33,19 +37,22 @@ StyledAddButton.defaultProps = defaultThemeProp;
 const FieldGroupList = forwardRef(({ items, onAdd, onDelete, ...restProps }, ref) => {
     const t = useI18n();
     return (_jsxs(StyledFieldGroupList, { ref: ref, ...restProps, children: [items.map(({ id, children, name, ...restItemProps }) => {
-                return (_jsx(StyledListItem, { name: name, ...restItemProps, actions: [
-                        {
-                            text: 'Delete',
-                            icon: 'trash',
-                            iconOnly: true,
-                            onClick: onDelete
-                                ? () => {
-                                    onDelete(id);
-                                }
-                                : undefined
-                        }
-                    ], children: children }, id));
-            }), _jsxs(StyledAddButton, { variant: 'link', onClick: onAdd, children: [_jsx(Icon, { name: 'plus' }, void 0), " ", t('add')] }, void 0)] }, void 0));
+                return (_jsx(StyledListItem, { name: name, ...restItemProps, actions: onDelete
+                        ? [
+                            {
+                                id: 'delete',
+                                text: t('delete'),
+                                icon: 'trash',
+                                iconOnly: true,
+                                onClick: onDelete
+                                    ? () => {
+                                        onDelete(id);
+                                    }
+                                    : undefined
+                            }
+                        ]
+                        : undefined, children: children }, id));
+            }), onAdd && (_jsxs(StyledAddButton, { variant: 'link', onClick: onAdd, children: [_jsx(Icon, { name: 'plus' }), " ", t('add')] }))] }));
 });
 export default FieldGroupList;
 //# sourceMappingURL=FieldGroupList.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"FieldGroupList.js","sourceRoot":"","sources":["../../../src/components/FieldGroup/FieldGroupList.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAqB,UAAU,EAAwB,MAAM,OAAO,CAAC;AAC5E,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAGhD,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,IAAI,EAAE,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,KAAK,QAAQ,MAAM,yBAAyB,CAAC;AACpD,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACtC,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,OAAO,UAA+B,MAAM,cAAc,CAAC;AAE3D,YAAY,CAAC,QAAQ,CAAC,CAAC;AAcvB,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CACrC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CACZ,GAAG,CAAA;oBACa,KAAK,CAAC,IAAI,CAAC,OAAO;KACjC,CACJ,CAAC;AAEF,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAErD,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,UAAU,CAAC,CAC9C,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CACZ,GAAG,CAAA;iBACU,KAAK,CAAC,IAAI,CAAC,OAAO,eAAe,KAAK,CAAC,IAAI,CAAC,OAAO;uCAC7B,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;gCACxC,KAAK,CAAC,IAAI,CAAC,OAAO;;;0BAGxB,KAAK,CAAC,IAAI,CAAC,OAAO;;;;kBAI1B,KAAK,CAAC,IAAI,CAAC,OAAO;;KAE/B,CACJ,CAAC;AAEF,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE/C,MAAM,eAAe,GAAG,MAAM,CAAC,MAAM,CAAC,CACpC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CACZ,GAAG,CAAA;oBACa,KAAK,CAAC,IAAI,CAAC,OAAO;KACjC,CACJ,CAAC;AAEF,eAAe,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEhD,MAAM,cAAc,GAA0D,UAAU,CACtF,CACE,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAwC,EAC9E,GAA+B,EAC/B,EAAE;IACF,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,OAAO,CACL,MAAC,oBAAoB,IAAC,GAAG,EAAE,GAAG,KAAM,SAAS,aAC1C,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,aAAa,EAA2B,EAAE,EAAE;gBAC/E,OAAO,CACL,KAAC,cAAc,IAEb,IAAI,EAAE,IAAI,KACN,aAAa,EACjB,OAAO,EAAE;wBACP;4BACE,IAAI,EAAE,QAAQ;4BACd,IAAI,EAAE,OAAO;4BACb,QAAQ,EAAE,IAAI;4BACd,OAAO,EAAE,QAAQ;gCACf,CAAC,CAAC,GAAG,EAAE;oCACH,QAAQ,CAAC,EAAE,CAAC,CAAC;gCACf,CAAC;gCACH,CAAC,CAAC,SAAS;yBACd;qBACF,YAEA,QAAQ,IAhBJ,EAAE,CAiBQ,CAClB,CAAC;YACJ,CAAC,CAAC,EACF,MAAC,eAAe,IAAC,OAAO,EAAC,MAAM,EAAC,OAAO,EAAE,KAAK,aAC5C,KAAC,IAAI,IAAC,IAAI,EAAC,MAAM,WAAG,OAAE,CAAC,CAAC,KAAK,CAAC,YACd,YACG,CACxB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["import { FunctionComponent, forwardRef, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { 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';\n\nimport FieldGroup, { FieldGroupProps } from './FieldGroup';\n\nregisterIcon(plusIcon);\n\nexport interface FieldGroupListItemProps extends FieldGroupProps {\n  /** The ID of the field group list item */\n  id: string;\n}\n\nexport interface FieldGroupListProps {\n  items: FieldGroupListItemProps[];\n  onAdd?: () => void;\n  onDelete?: (id: string) => void;\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst StyledFieldGroupList = styled.div(\n  ({ theme }) =>\n    css`\n      margin-top: ${theme.base.spacing};\n    `\n);\n\nStyledFieldGroupList.defaultProps = defaultThemeProp;\n\nexport const StyledListItem = styled(FieldGroup)(\n  ({ theme }) =>\n    css`\n      padding: ${theme.base.spacing} 0 calc(2 * ${theme.base.spacing});\n      border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n      margin-bottom: calc(2 * ${theme.base.spacing});\n\n      legend {\n        margin-bottom: -${theme.base.spacing};\n      }\n\n      & > * {\n        margin: ${theme.base.spacing} 0;\n      }\n    `\n);\n\nStyledListItem.defaultProps = defaultThemeProp;\n\nconst StyledAddButton = styled(Button)(\n  ({ theme }) =>\n    css`\n      margin-top: ${theme.base.spacing};\n    `\n);\n\nStyledAddButton.defaultProps = defaultThemeProp;\n\nconst FieldGroupList: FunctionComponent<FieldGroupListProps & ForwardProps> = forwardRef(\n  (\n    { items, onAdd, onDelete, ...restProps }: PropsWithoutRef<FieldGroupListProps>,\n    ref: FieldGroupListProps['ref']\n  ) => {\n    const t = useI18n();\n\n    return (\n      <StyledFieldGroupList ref={ref} {...restProps}>\n        {items.map(({ id, children, name, ...restItemProps }: FieldGroupListItemProps) => {\n          return (\n            <StyledListItem\n              key={id}\n              name={name}\n              {...restItemProps}\n              actions={[\n                {\n                  text: 'Delete',\n                  icon: 'trash',\n                  iconOnly: true,\n                  onClick: onDelete\n                    ? () => {\n                        onDelete(id);\n                      }\n                    : undefined\n                }\n              ]}\n            >\n              {children}\n            </StyledListItem>\n          );\n        })}\n        <StyledAddButton variant='link' onClick={onAdd}>\n          <Icon name='plus' /> {t('add')}\n        </StyledAddButton>\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 { FunctionComponent, forwardRef, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { 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';\n\nimport FieldGroup, { FieldGroupProps, StyledFieldGroup } from './FieldGroup';\n\nregisterIcon(plusIcon);\n\nexport interface FieldGroupListItemProps extends FieldGroupProps {\n  /** The ID of the field group list item */\n  id: string;\n}\n\nexport interface FieldGroupListProps {\n  items: FieldGroupListItemProps[];\n  onAdd?: () => void;\n  onDelete?: (id: string) => void;\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst StyledFieldGroupList = styled.div(\n  ({ theme }) =>\n    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 }) =>\n    css`\n      padding: ${theme.base.spacing} 0 calc(2 * ${theme.base.spacing});\n      border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n      margin-bottom: calc(2 * ${theme.base.spacing});\n\n      legend {\n        margin-bottom: -${theme.base.spacing};\n      }\n\n      & > * {\n        margin: ${theme.base.spacing} 0;\n      }\n    `\n);\n\nStyledListItem.defaultProps = defaultThemeProp;\n\nconst StyledAddButton = styled(Button)(\n  ({ theme }) =>\n    css`\n      margin-top: ${theme.base.spacing};\n    `\n);\n\nStyledAddButton.defaultProps = defaultThemeProp;\n\nconst FieldGroupList: FunctionComponent<FieldGroupListProps & ForwardProps> = forwardRef(\n  (\n    { items, onAdd, onDelete, ...restProps }: PropsWithoutRef<FieldGroupListProps>,\n    ref: FieldGroupListProps['ref']\n  ) => {\n    const t = useI18n();\n\n    return (\n      <StyledFieldGroupList ref={ref} {...restProps}>\n        {items.map(({ id, children, name, ...restItemProps }: FieldGroupListItemProps) => {\n          return (\n            <StyledListItem\n              key={id}\n              name={name}\n              {...restItemProps}\n              actions={\n                onDelete\n                  ? [\n                      {\n                        id: 'delete',\n                        text: t('delete'),\n                        icon: 'trash',\n                        iconOnly: true,\n                        onClick: onDelete\n                          ? () => {\n                              onDelete(id);\n                            }\n                          : undefined\n                      }\n                    ]\n                  : undefined\n              }\n            >\n              {children}\n            </StyledListItem>\n          );\n        })}\n        {onAdd && (\n          <StyledAddButton variant='link' onClick={onAdd}>\n            <Icon name='plus' /> {t('add')}\n          </StyledAddButton>\n        )}\n      </StyledFieldGroupList>\n    );\n  }\n);\n\nexport default FieldGroupList;\n"]}

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

@@ -1,21 +1,27 @@
 import { ReactNode, FunctionComponent } from 'react';
 import { BaseProps, ForwardProps, NoChildrenProp } from '../../types';
+export declare type FieldValueVariant = 'inline' | 'stacked';
+export interface FieldValueListItemProps {
+    id?: string;
+    name: string;
+    value?: ReactNode;
+    variant?: FieldValueVariant;
+}
 export interface FieldValueListProps extends BaseProps, NoChildrenProp {
     /** The set of field values to render in the list. */
-    fields: {
-        id?: string;
-        name: string;
-        value?: ReactNode;
-    }[];
+    fields: FieldValueListItemProps[];
     /**
      * Determines if the field and values should be displayed on the same line, or stacked with the field above the value.
      * @default "inline"
      */
-    variant?: 'inline' | 'stacked';
+    variant?: FieldValueVariant | 'value-comparison';
 }
 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 StyledFieldValueList: import("styled-components").StyledComponent<"dl", import("styled-components").DefaultTheme, {}, never>;
+export declare 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: ({ name, value, variant }: FieldValueListItemProps) => JSX.Element;
 declare const FieldValueList: FunctionComponent<FieldValueListProps & ForwardProps>;
 export default FieldValueList;
 //# 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":"AAAA,OAAO,EACL,SAAS,EAET,iBAAiB,EAKlB,MAAM,OAAO,CAAC;AAIf,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAQtE,MAAM,WAAW,mBAAoB,SAAQ,SAAS,EAAE,cAAc;IACpE,qDAAqD;IACrD,MAAM,EAAE;QACN,EAAE,CAAC,EAAE,MAAM,CAAC;QACZ,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,CAAC,EAAE,SAAS,CAAC;KACnB,EAAE,CAAC;IACJ;;;OAGG;IACH,OAAO,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;CAChC;AAED,eAAO,MAAM,eAAe,wGAE3B,CAAC;AAEF,eAAO,MAAM,gBAAgB,wGAE5B,CAAC;AAEF,eAAO,MAAM,oBAAoB,wGAEhC,CAAC;AA6DF,QAAA,MAAM,cAAc,EAAE,iBAAiB,CAAC,mBAAmB,GAAG,YAAY,CA+BzE,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"FieldValueList.d.ts","sourceRoot":"","sources":["../../../src/components/FieldValueList/FieldValueList.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EAET,iBAAiB,EAKlB,MAAM,OAAO,CAAC;AAGf,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAStE,oBAAY,iBAAiB,GAAG,QAAQ,GAAG,SAAS,CAAC;AAErD,MAAM,WAAW,uBAAuB;IACtC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,OAAO,CAAC,EAAE,iBAAiB,CAAC;CAC7B;AAED,MAAM,WAAW,mBAAoB,SAAQ,SAAS,EAAE,cAAc;IACpE,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,wGAG5B,CAAC;AAEF,oBAAY,yBAAyB,GAAG,IAAI,CAAC,mBAAmB,EAAE,SAAS,CAAC,CAAC;AAE7E,eAAO,MAAM,oBAAoB,+HAuB/B,CAAC;AAIH,eAAO,MAAM,uBAAuB,yGAAe,CAAC;AA2DpD,eAAO,MAAM,cAAc,6BAAyC,uBAAuB,gBAa1F,CAAC;AAEF,QAAA,MAAM,cAAc,EAAE,iBAAiB,CAAC,mBAAmB,GAAG,YAAY,CA+BzE,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/lib/components/FieldValueList/FieldValueList.js

@@ -1,23 +1,46 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment, useState, useLayoutEffect, useRef, useMemo } from 'react';
-import styled from 'styled-components';
-import { defaultThemeProp } from '../../theme';
+import styled, { css } from 'styled-components';
 import Button from '../Button';
 import ExpandCollapse from '../ExpandCollapse';
 import Grid from '../Grid';
 import { StyledLabel } from '../Label';
 import { useI18n } from '../../hooks';
 import { windowIsAvailable } from '../../utils';
+import { defaultThemeProp } from '../../theme';
 export const StyledFieldName = styled.dt `
   word-break: break-word;
 `;
 export const StyledFieldValue = styled.dd `
   word-break: break-word;
+  overflow: auto;
 `;
-export const StyledFieldValueList = styled.dl `
-  width: 100%;
-`;
+export const StyledFieldValueList = styled.dl(({ variant, theme }) => {
+    return css `
+    width: 100%;
+
+    ${variant === 'value-comparison' &&
+        css `
+      dt {
+        width: 100%;
+      }
+      dd {
+        text-align: end;
+        padding-inline-start: calc(2 * ${theme.base.spacing});
+      }
+      ${StyledLabel} {
+        max-width: unset;
+      }
+      dd:not(:last-of-type),
+      dt:not(:last-of-type) {
+        border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};
+        padding-bottom: calc(0.5 * ${theme.base.spacing});
+      }
+    `}
+  `;
+});
 StyledFieldValueList.defaultProps = defaultThemeProp;
+export const StyledStackedFieldValue = styled.div ``;
 const DynamicHeightValue = ({ children }) => {
     const [collapsed, setCollapsed] = useState(true);
     const [exceedsMaxHeight, setExceedsMaxHeight] = useState(false);
@@ -45,18 +68,24 @@ const DynamicHeightValue = ({ children }) => {
             observer.disconnect();
         };
     }, [textRef.current, maxTextHeight]);
-    return (_jsxs(_Fragment, { children: [_jsx(ExpandCollapse, { collapsed: collapsed, min: exceedsMaxHeight ? `${maxTextHeight}px` : 'max-content', children: _jsx(Grid, { ref: textRef, children: _jsx("span", { children: children }, void 0) }, void 0) }, void 0), exceedsMaxHeight && (_jsx(Button, { variant: 'link', onClick: () => setCollapsed(current => !current), children: collapsed ? t('show_more') : t('show_less') }, void 0))] }, void 0));
+    return (_jsxs(_Fragment, { children: [_jsx(ExpandCollapse, { collapsed: collapsed, min: exceedsMaxHeight ? `${maxTextHeight}px` : 'max-content', children: _jsx("div", { ref: textRef, children: _jsx("span", { children: children }) }) }), exceedsMaxHeight && (_jsx(Button, { variant: 'link', onClick: () => setCollapsed(current => !current), children: collapsed ? t('show_more') : t('show_less') }))] }));
+};
+export const FieldValueItem = ({ name, value, variant = 'inline' }) => {
+    const Wrapper = variant === 'stacked' ? StyledStackedFieldValue : Fragment;
+    const displayValue = typeof value === 'string' ? _jsx(DynamicHeightValue, { children: value }) : value;
+    return (_jsxs(Wrapper, { children: [_jsx(StyledLabel, { as: StyledFieldName, children: name }), _jsx(StyledFieldValue, { children: value ? displayValue : _jsx("span", { "aria-hidden": 'true', children: "\u2013\u2013" }) })] }));
 };
 const FieldValueList = ({ fields, variant = 'inline', ...restProps }) => {
-    const Wrapper = variant === 'inline' ? Fragment : 'div';
     return (_jsx(Grid, { ...restProps, container: {
-            cols: variant === 'inline' ? '16ch auto' : 'minmax(0, 1fr)',
-            colGap: 2,
-            rowGap: 1
-        }, as: StyledFieldValueList, children: fields.map(({ id, name, value }) => {
-            const diplayValue = typeof value === 'string' ? _jsx(DynamicHeightValue, { children: value }, void 0) : value;
-            return (_jsxs(Wrapper, { children: [_jsx(StyledLabel, { as: StyledFieldName, children: name }, void 0), _jsx(StyledFieldValue, { children: value ? diplayValue : _jsx("span", { "aria-hidden": 'true', children: "\u2013\u2013" }, void 0) }, void 0)] }, id ?? name));
-        }) }, void 0));
+            cols: ['inline', 'value-comparison'].includes(variant)
+                ? '16ch minmax(0, 1fr)'
+                : 'minmax(0, 1fr)',
+            colGap: variant !== 'value-comparison' ? 2 : 0,
+            rowGap: variant !== 'value-comparison' ? 1 : 0.5
+        }, as: StyledFieldValueList, variant: variant, children: fields.map(({ id, name, value, variant: fieldVariant }) => {
+            const useVariant = fieldVariant ?? variant;
+            return (_jsx(FieldValueItem, { name: name, value: value, variant: useVariant === 'stacked' ? 'stacked' : 'inline' }, id ?? name));
+        }) }));
 };
 export default FieldValueList;
 //# sourceMappingURL=FieldValueList.js.map

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 {\n  ReactNode,\n  Fragment,\n  FunctionComponent,\n  useState,\n  useLayoutEffect,\n  useRef,\n  useMemo\n} from 'react';\nimport styled from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport { BaseProps, ForwardProps, NoChildrenProp } from '../../types';\nimport Button from '../Button';\nimport ExpandCollapse from '../ExpandCollapse';\nimport Grid from '../Grid';\nimport { StyledLabel } from '../Label';\nimport { useI18n } from '../../hooks';\nimport { windowIsAvailable } from '../../utils';\n\nexport interface FieldValueListProps extends BaseProps, NoChildrenProp {\n  /** The set of field values to render in the list. */\n  fields: {\n    id?: string;\n    name: string;\n    value?: ReactNode;\n  }[];\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?: 'inline' | 'stacked';\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 StyledFieldValueList = styled.dl`\n  width: 100%;\n`;\n\nStyledFieldValueList.defaultProps = defaultThemeProp;\n\nconst DynamicHeightValue = ({ children }: { children: ReactNode }): JSX.Element => {\n  const [collapsed, setCollapsed] = useState(true);\n  const [exceedsMaxHeight, setExceedsMaxHeight] = useState(false);\n  const textRef = useRef<HTMLSpanElement>(null);\n  const t = useI18n();\n\n  const maxTextHeight = useMemo(() => {\n    if (!windowIsAvailable) return Infinity;\n\n    const computedLineHeight =\n      Number.parseInt(\n        window.getComputedStyle(document.documentElement).getPropertyValue('font-size'),\n        10\n      ) * 1.25;\n\n    return 3 * computedLineHeight;\n  }, []);\n\n  useLayoutEffect(() => {\n    if (!textRef.current) return;\n\n    const observer = new ResizeObserver(entries => {\n      const exceedsHeight = entries.some(({ target, contentRect }) => {\n        if (target !== textRef.current) return;\n\n        return contentRect.height > maxTextHeight;\n      });\n\n      setExceedsMaxHeight(exceedsHeight);\n    });\n\n    observer.observe(textRef.current);\n\n    return () => {\n      observer.disconnect();\n    };\n  }, [textRef.current, maxTextHeight]);\n\n  return (\n    <>\n      <ExpandCollapse\n        collapsed={collapsed}\n        min={exceedsMaxHeight ? `${maxTextHeight}px` : 'max-content'}\n      >\n        <Grid ref={textRef}>\n          <span>{children}</span>\n        </Grid>\n      </ExpandCollapse>\n      {exceedsMaxHeight && (\n        <Button variant='link' onClick={() => setCollapsed(current => !current)}>\n          {collapsed ? t('show_more') : t('show_less')}\n        </Button>\n      )}\n    </>\n  );\n};\n\nconst FieldValueList: FunctionComponent<FieldValueListProps & ForwardProps> = ({\n  fields,\n  variant = 'inline',\n  ...restProps\n}: FieldValueListProps) => {\n  const Wrapper = variant === 'inline' ? Fragment : 'div';\n\n  return (\n    <Grid\n      {...restProps}\n      container={{\n        cols: variant === 'inline' ? '16ch auto' : 'minmax(0, 1fr)',\n        colGap: 2,\n        rowGap: 1\n      }}\n      as={StyledFieldValueList}\n    >\n      {fields.map(({ id, name, value }) => {\n        const diplayValue =\n          typeof value === 'string' ? <DynamicHeightValue>{value}</DynamicHeightValue> : value;\n        return (\n          <Wrapper key={id ?? name}>\n            <StyledLabel as={StyledFieldName}>{name}</StyledLabel>\n            <StyledFieldValue>\n              {value ? diplayValue : <span aria-hidden='true'>&ndash;&ndash;</span>}\n            </StyledFieldValue>\n          </Wrapper>\n        );\n      })}\n    </Grid>\n  );\n};\n\nexport default FieldValueList;\n"]}
+{"version":3,"file":"FieldValueList.js","sourceRoot":"","sources":["../../../src/components/FieldValueList/FieldValueList.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  ReactNode,\n  Fragment,\n  FunctionComponent,\n  useState,\n  useLayoutEffect,\n  useRef,\n  useMemo\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { BaseProps, ForwardProps, NoChildrenProp } from '../../types';\nimport Button from '../Button';\nimport ExpandCollapse from '../ExpandCollapse';\nimport Grid from '../Grid';\nimport { StyledLabel } from '../Label';\nimport { useI18n } from '../../hooks';\nimport { windowIsAvailable } from '../../utils';\nimport { defaultThemeProp } from '../../theme';\n\nexport type FieldValueVariant = 'inline' | 'stacked';\n\nexport interface FieldValueListItemProps {\n  id?: string;\n  name: string;\n  value?: ReactNode;\n  variant?: FieldValueVariant;\n}\n\nexport interface FieldValueListProps extends BaseProps, NoChildrenProp {\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  overflow: auto;\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\nconst DynamicHeightValue = ({ children }: { children: ReactNode }): JSX.Element => {\n  const [collapsed, setCollapsed] = useState(true);\n  const [exceedsMaxHeight, setExceedsMaxHeight] = useState(false);\n  const textRef = useRef<HTMLDivElement>(null);\n  const t = useI18n();\n\n  const maxTextHeight = useMemo(() => {\n    if (!windowIsAvailable) return Infinity;\n\n    const computedLineHeight =\n      Number.parseInt(\n        window.getComputedStyle(document.documentElement).getPropertyValue('font-size'),\n        10\n      ) * 1.25;\n\n    return 3 * computedLineHeight;\n  }, []);\n\n  useLayoutEffect(() => {\n    if (!textRef.current) return;\n\n    const observer = new ResizeObserver(entries => {\n      const exceedsHeight = entries.some(({ target, contentRect }) => {\n        if (target !== textRef.current) return;\n\n        return contentRect.height > maxTextHeight;\n      });\n\n      setExceedsMaxHeight(exceedsHeight);\n    });\n\n    observer.observe(textRef.current);\n\n    return () => {\n      observer.disconnect();\n    };\n  }, [textRef.current, maxTextHeight]);\n\n  return (\n    <>\n      <ExpandCollapse\n        collapsed={collapsed}\n        min={exceedsMaxHeight ? `${maxTextHeight}px` : 'max-content'}\n      >\n        <div ref={textRef}>\n          <span>{children}</span>\n        </div>\n      </ExpandCollapse>\n      {exceedsMaxHeight && (\n        <Button variant='link' onClick={() => setCollapsed(current => !current)}>\n          {collapsed ? t('show_more') : t('show_less')}\n        </Button>\n      )}\n    </>\n  );\n};\n\nexport const FieldValueItem = ({ name, value, variant = 'inline' }: FieldValueListItemProps) => {\n  const Wrapper = variant === 'stacked' ? StyledStackedFieldValue : Fragment;\n  const displayValue =\n    typeof value === 'string' ? <DynamicHeightValue>{value}</DynamicHeightValue> : value;\n\n  return (\n    <Wrapper>\n      <StyledLabel as={StyledFieldName}>{name}</StyledLabel>\n      <StyledFieldValue>\n        {value ? displayValue : <span aria-hidden='true'>&ndash;&ndash;</span>}\n      </StyledFieldValue>\n    </Wrapper>\n  );\n};\n\nconst FieldValueList: FunctionComponent<FieldValueListProps & ForwardProps> = ({\n  fields,\n  variant = 'inline',\n  ...restProps\n}: FieldValueListProps) => {\n  return (\n    <Grid\n      {...restProps}\n      container={{\n        cols: ['inline', 'value-comparison'].includes(variant)\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={variant}\n    >\n      {fields.map(({ id, name, value, variant: fieldVariant }) => {\n        const useVariant = fieldVariant ?? variant;\n        return (\n          <FieldValueItem\n            name={name}\n            value={value}\n            variant={useVariant === 'stacked' ? 'stacked' : 'inline'}\n            key={id ?? name}\n          />\n        );\n      })}\n    </Grid>\n  );\n};\n\nexport default FieldValueList;\n"]}

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

@@ -1,6 +1,4 @@
-export { default } from './FieldValueList';
-export { FieldValueListProps } from './FieldValueList';
-export { StyledFieldValueList } from './FieldValueList';
-export { StyledFieldName } from './FieldValueList';
-export { StyledFieldValue } from './FieldValueList';
+export { default, FieldValueItem } from './FieldValueList';
+export { FieldValueListProps, StyledFieldValueListProps } from './FieldValueList';
+export { StyledFieldValueList, StyledFieldName, StyledFieldValue, StyledStackedFieldValue } from './FieldValueList';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/FieldValueList/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAC3C,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AACxD,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/FieldValueList/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC3D,OAAO,EAAE,mBAAmB,EAAE,yBAAyB,EAAE,MAAM,kBAAkB,CAAC;AAClF,OAAO,EACL,oBAAoB,EACpB,eAAe,EACf,gBAAgB,EAChB,uBAAuB,EACxB,MAAM,kBAAkB,CAAC"}

package/lib/components/FieldValueList/index.js

@@ -1,5 +1,3 @@
-export { default } from './FieldValueList';
-export { StyledFieldValueList } from './FieldValueList';
-export { StyledFieldName } from './FieldValueList';
-export { StyledFieldValue } from './FieldValueList';
+export { default, FieldValueItem } from './FieldValueList';
+export { StyledFieldValueList, StyledFieldName, StyledFieldValue, StyledStackedFieldValue } from './FieldValueList';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/FieldValueList/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAE3C,OAAO,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AACxD,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC","sourcesContent":["export { default } from './FieldValueList';\nexport { FieldValueListProps } from './FieldValueList';\nexport { StyledFieldValueList } from './FieldValueList';\nexport { StyledFieldName } from './FieldValueList';\nexport { StyledFieldValue } from './FieldValueList';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/FieldValueList/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAE3D,OAAO,EACL,oBAAoB,EACpB,eAAe,EACf,gBAAgB,EAChB,uBAAuB,EACxB,MAAM,kBAAkB,CAAC","sourcesContent":["export { default, FieldValueItem } from './FieldValueList';\nexport { FieldValueListProps, StyledFieldValueListProps } from './FieldValueList';\nexport {\n  StyledFieldValueList,\n  StyledFieldName,\n  StyledFieldValue,\n  StyledStackedFieldValue\n} from './FieldValueList';\n"]}

package/lib/components/File/FileDisplay.js

@@ -4,15 +4,15 @@ import Link from '../Link';
 import FileItem from './FileItem';
 const FileDisplay = forwardRef(({ displayText, value, variant, thumbnail, onPreview, onDownload, ...restProps }, ref) => {
     if (variant === 'text' || !value) {
-        return (_jsx("span", { ref: ref, ...restProps, children: value ? displayText || value : _jsx("span", { "aria-hidden": 'true', children: "\u2013\u2013" }, void 0) }, void 0));
+        return (_jsx("span", { ref: ref, ...restProps, children: value ? displayText || value : _jsx("span", { "aria-hidden": 'true', children: "\u2013\u2013" }) }));
     }
     if (variant === 'link')
-        return (_jsx(Link, { ref: ref, ...restProps, href: value, children: displayText || value }, void 0));
+        return (_jsx(Link, { ref: ref, ...restProps, href: value, children: displayText || value }));
     return (_jsx(FileItem, { ...restProps, ref: ref, name: displayText || value, url: value, ...{
             thumbnail,
             onDownload,
             onPreview
-        } }, void 0));
+        } }));
 });
 export default FileDisplay;
 //# sourceMappingURL=FileDisplay.js.map

package/lib/components/File/FileDisplay.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileDisplay.js","sourceRoot":"","sources":["../../../src/components/File/FileDisplay.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA2C,MAAM,OAAO,CAAC;AAG5E,OAAO,IAAI,MAAM,SAAS,CAAC;AAE3B,OAAO,QAA2B,MAAM,YAAY,CAAC;AAqBrD,MAAM,WAAW,GAAuD,UAAU,CAChF,CACE,EACE,WAAW,EACX,KAAK,EACL,OAAO,EACP,SAAS,EACT,SAAS,EACT,UAAU,EACV,GAAG,SAAS,EACsB,EACpC,GAA4B,EAC5B,EAAE;IACF,IAAI,OAAO,KAAK,MAAM,IAAI,CAAC,KAAK,EAAE;QAChC,OAAO,CACL,eAAM,GAAG,EAAE,GAAG,KAAM,SAAS,YAC1B,KAAK,CAAC,CAAC,CAAC,WAAW,IAAI,KAAK,CAAC,CAAC,CAAC,8BAAkB,MAAM,qCAAsB,WACzE,CACR,CAAC;KACH;IAED,IAAI,OAAO,KAAK,MAAM;QACpB,OAAO,CACL,KAAC,IAAI,IAAC,GAAG,EAAE,GAA6B,KAAM,SAAS,EAAE,IAAI,EAAE,KAAK,YACjE,WAAW,IAAI,KAAK,WAChB,CACR,CAAC;IAEJ,OAAO,CACL,KAAC,QAAQ,OACH,SAAS,EACb,GAAG,EAAE,GAA6B,EAClC,IAAI,EAAE,WAAW,IAAI,KAAK,EAC1B,GAAG,EAAE,KAAK,KACN;YACF,SAAS;YACT,UAAU;YACV,SAAS;SACV,WACD,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref } from 'react';\n\nimport { BaseProps, ForwardProps, NoChildrenProp } from '../../types';\nimport Link from '../Link';\n\nimport FileItem, { FileItemProps } from './FileItem';\n\nexport interface FileDisplayProps\n  extends Pick<FileItemProps, 'onPreview' | 'onDownload'>,\n    BaseProps,\n    NoChildrenProp {\n  /** URL address */\n  value?: string;\n  /** The text to be displayed. */\n  displayText?: string;\n  /**\n   * Display value either as file, link only or textual representation.\n   * @default \"file\"\n   * */\n  variant?: 'file' | 'link' | 'text';\n  /** Thumbnail image. */\n  thumbnail?: string;\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLDivElement | HTMLAnchorElement | HTMLSpanElement>;\n}\n\nconst FileDisplay: FunctionComponent<FileDisplayProps & ForwardProps> = forwardRef(\n  (\n    {\n      displayText,\n      value,\n      variant,\n      thumbnail,\n      onPreview,\n      onDownload,\n      ...restProps\n    }: PropsWithoutRef<FileDisplayProps>,\n    ref: FileDisplayProps['ref']\n  ) => {\n    if (variant === 'text' || !value) {\n      return (\n        <span ref={ref} {...restProps}>\n          {value ? displayText || value : <span aria-hidden='true'>&ndash;&ndash;</span>}\n        </span>\n      );\n    }\n\n    if (variant === 'link')\n      return (\n        <Link ref={ref as Ref<HTMLAnchorElement>} {...restProps} href={value}>\n          {displayText || value}\n        </Link>\n      );\n\n    return (\n      <FileItem\n        {...restProps}\n        ref={ref as Ref<HTMLButtonElement>}\n        name={displayText || value}\n        url={value}\n        {...{\n          thumbnail,\n          onDownload,\n          onPreview\n        }}\n      />\n    );\n  }\n);\n\nexport default FileDisplay;\n"]}
+{"version":3,"file":"FileDisplay.js","sourceRoot":"","sources":["../../../src/components/File/FileDisplay.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA2C,MAAM,OAAO,CAAC;AAG5E,OAAO,IAAI,MAAM,SAAS,CAAC;AAE3B,OAAO,QAA2B,MAAM,YAAY,CAAC;AAqBrD,MAAM,WAAW,GAAuD,UAAU,CAChF,CACE,EACE,WAAW,EACX,KAAK,EACL,OAAO,EACP,SAAS,EACT,SAAS,EACT,UAAU,EACV,GAAG,SAAS,EACsB,EACpC,GAA4B,EAC5B,EAAE;IACF,IAAI,OAAO,KAAK,MAAM,IAAI,CAAC,KAAK,EAAE;QAChC,OAAO,CACL,eAAM,GAAG,EAAE,GAAG,KAAM,SAAS,YAC1B,KAAK,CAAC,CAAC,CAAC,WAAW,IAAI,KAAK,CAAC,CAAC,CAAC,8BAAkB,MAAM,6BAAsB,GACzE,CACR,CAAC;KACH;IAED,IAAI,OAAO,KAAK,MAAM;QACpB,OAAO,CACL,KAAC,IAAI,IAAC,GAAG,EAAE,GAA6B,KAAM,SAAS,EAAE,IAAI,EAAE,KAAK,YACjE,WAAW,IAAI,KAAK,GAChB,CACR,CAAC;IAEJ,OAAO,CACL,KAAC,QAAQ,OACH,SAAS,EACb,GAAG,EAAE,GAA6B,EAClC,IAAI,EAAE,WAAW,IAAI,KAAK,EAC1B,GAAG,EAAE,KAAK,KACN;YACF,SAAS;YACT,UAAU;YACV,SAAS;SACV,GACD,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref } from 'react';\n\nimport { BaseProps, ForwardProps, NoChildrenProp } from '../../types';\nimport Link from '../Link';\n\nimport FileItem, { FileItemProps } from './FileItem';\n\nexport interface FileDisplayProps\n  extends Pick<FileItemProps, 'onPreview' | 'onDownload'>,\n    BaseProps,\n    NoChildrenProp {\n  /** URL address */\n  value?: string;\n  /** The text to be displayed. */\n  displayText?: string;\n  /**\n   * Display value either as file, link only or textual representation.\n   * @default \"file\"\n   * */\n  variant?: 'file' | 'link' | 'text';\n  /** Thumbnail image. */\n  thumbnail?: string;\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLDivElement | HTMLAnchorElement | HTMLSpanElement>;\n}\n\nconst FileDisplay: FunctionComponent<FileDisplayProps & ForwardProps> = forwardRef(\n  (\n    {\n      displayText,\n      value,\n      variant,\n      thumbnail,\n      onPreview,\n      onDownload,\n      ...restProps\n    }: PropsWithoutRef<FileDisplayProps>,\n    ref: FileDisplayProps['ref']\n  ) => {\n    if (variant === 'text' || !value) {\n      return (\n        <span ref={ref} {...restProps}>\n          {value ? displayText || value : <span aria-hidden='true'>&ndash;&ndash;</span>}\n        </span>\n      );\n    }\n\n    if (variant === 'link')\n      return (\n        <Link ref={ref as Ref<HTMLAnchorElement>} {...restProps} href={value}>\n          {displayText || value}\n        </Link>\n      );\n\n    return (\n      <FileItem\n        {...restProps}\n        ref={ref as Ref<HTMLButtonElement>}\n        name={displayText || value}\n        url={value}\n        {...{\n          thumbnail,\n          onDownload,\n          onPreview\n        }}\n      />\n    );\n  }\n);\n\nexport default FileDisplay;\n"]}

package/lib/components/File/FileInput.js

@@ -53,7 +53,7 @@ StyledInteractiveText.defaultProps = defaultThemeProp;
 const BaseFileInput = forwardRef((props, ref) => {
     const uid = useUID();
     const { id = uid, label, labelHidden, info, required = false, disabled = false, files, onFilesAdded, multiple = false, status, ...restProps } = props;
-    const icon = _jsx(Icon, { name: 'paper-clip' }, void 0);
+    const icon = _jsx(Icon, { name: 'paper-clip' });
     const inputRef = useConsolidatedRef(ref);
     const onChange = useCallback((e) => {
         if (e.target.files) {
@@ -73,7 +73,7 @@ const BaseFileInput = forwardRef((props, ref) => {
     const t = useI18n();
     const [dragOver, setDragOver] = useState(false);
     const { ltr, rtl } = useDirection();
-    const fileInput = (_jsxs(StyledFileInput, { children: [_jsx("input", { ...restProps, ref: inputRef, type: 'file', id: id, disabled: disabled, onChange: onChange, multiple: multiple }, void 0), _jsxs(Flex, { container: { alignItems: 'center', justify: 'center' }, item: { grow: 1 }, as: StyledDropZone, dragOver: dragOver, onClick: () => {
+    const fileInput = (_jsxs(StyledFileInput, { children: [_jsx("input", { ...restProps, ref: inputRef, type: 'file', id: id, disabled: disabled, onChange: onChange, multiple: multiple }), _jsxs(Flex, { container: { alignItems: 'center', justify: 'center' }, item: { grow: 1 }, as: StyledDropZone, dragOver: dragOver, onClick: () => {
                     inputRef.current?.focus();
                     inputRef.current?.click();
                 }, onDragOver: (e) => {
@@ -83,21 +83,21 @@ const BaseFileInput = forwardRef((props, ref) => {
                     setDragOver(false);
                     onFilesAdded?.(Array.from(e.dataTransfer.files));
                 }, children: [ltr && icon, _jsxs(Text, { variant: 'primary', children: ["\u00A0", t('file_upload_text_main', [
-                                _jsx(StyledInteractiveText, { children: t(multiple ? 'file_upload_text_multiple' : 'file_upload_text_one') }, void 0)
-                            ]), "\u00A0"] }, void 0), rtl && icon] }, void 0)] }, void 0));
-    return (_jsxs(Grid, { container: { rowGap: 1 }, children: [label ? (_jsx(FormField, { ...{ label, labelHidden, id, info, required, disabled, status }, children: fileInput }, void 0)) : (fileInput), !!files?.length && (_jsx(Grid, { container: {
+                                _jsx(StyledInteractiveText, { children: t(multiple ? 'file_upload_text_multiple' : 'file_upload_text_one') })
+                            ]), "\u00A0"] }), rtl && icon] })] }));
+    return (_jsxs(Grid, { container: { rowGap: 1 }, children: [label ? (_jsx(FormField, { ...{ label, labelHidden, id, info, required, disabled, status }, children: fileInput })) : (fileInput), !!files?.length && (_jsx(Grid, { container: {
                     gap: 1,
                     cols: 'repeat(2, minmax(0, 1fr))'
                 }, as: 'ul', children: files.map(({ name, ...file }, index) => {
                     // eslint-disable-next-line react/no-array-index-key
                     return _jsx(FileUploadItem, { name: name, ...file }, index);
-                }) }, void 0))] }, void 0));
+                }) }))] }));
 });
 const FileInput = forwardRef((props, ref) => {
     const Override = useOverride('FileInput');
     if (Override)
-        return _jsx(Override, { ...props, ref: ref }, void 0);
-    return _jsx(BaseFileInput, { ...props, ref: ref }, void 0);
+        return _jsx(Override, { ...props, ref: ref });
+    return _jsx(BaseFileInput, { ...props, ref: ref });
 });
 export default FileInput;
 //# sourceMappingURL=FileInput.js.map