@pega/cosmos-react-core 2.0.0-dev.9.2 → 2.0.0-rc.2

package/lib/components/FieldGroup/FieldGroupList.js

@@ -2,10 +2,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 import Button from '../Button';
-import Icon from '../Icon';
+import Icon, { registerIcon } from '../Icon';
+import * as plusIcon from '../Icon/icons/plus.icon';
 import { useI18n } from '../../hooks';
 import { defaultThemeProp } from '../../theme';
 import FieldGroup from '.';
+registerIcon(plusIcon);
 const StyledFieldGroupList = styled.div(({ theme }) => css `
       margin-top: ${theme.base.spacing};
     `);
@@ -30,8 +32,8 @@ const StyledAddButton = styled(Button)(({ theme }) => css `
 StyledAddButton.defaultProps = defaultThemeProp;
 const FieldGroupList = forwardRef(({ items, onAdd, onDelete, ...restProps }, ref) => {
     const t = useI18n();
-    return (_jsxs(StyledFieldGroupList, Object.assign({ ref: ref }, restProps, { children: [items.map(({ id, children, name, ...restItemProps }) => {
-                return (_jsx(StyledListItem, Object.assign({ name: name }, restItemProps, { actions: [
+    return (_jsxs(StyledFieldGroupList, { ref: ref, ...restProps, children: [items.map(({ id, children, name, ...restItemProps }) => {
+                return (_jsx(StyledListItem, { name: name, ...restItemProps, actions: [
                         {
                             text: 'Delete',
                             icon: 'trash',
@@ -42,9 +44,8 @@ const FieldGroupList = forwardRef(({ items, onAdd, onDelete, ...restProps }, ref
                                 }
                                 : undefined
                         }
-                    ] }, { children: children }), id));
-            }),
-            _jsxs(StyledAddButton, Object.assign({ variant: 'link', onClick: onAdd }, { children: [_jsx(Icon, { name: 'plus' }, void 0), " ", t('add')] }), void 0)] }), void 0));
+                    ], children: children }, id));
+            }), _jsxs(StyledAddButton, { variant: 'link', onClick: onAdd, children: [_jsx(Icon, { name: 'plus' }, void 0), " ", t('add')] }, void 0)] }, void 0));
 });
 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,MAAM,SAAS,CAAC;AAC3B,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACtC,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,OAAO,UAA+B,MAAM,GAAG,CAAC;AAchD,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,kBAAC,GAAG,EAAE,GAAG,IAAM,SAAS,eAC1C,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,aAAa,EAA2B,EAAE,EAAE;gBAC/E,OAAO,CACL,KAAC,cAAc,kBAEb,IAAI,EAAE,IAAI,IACN,aAAa,IACjB,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,gBAEA,QAAQ,KAhBJ,EAAE,CAiBQ,CAClB,CAAC;YACJ,CAAC,CAAC;YACF,MAAC,eAAe,kBAAC,OAAO,EAAC,MAAM,EAAC,OAAO,EAAE,KAAK,iBAC5C,KAAC,IAAI,IAAC,IAAI,EAAC,MAAM,WAAG,OAAE,CAAC,CAAC,KAAK,CAAC,aACd,aACG,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 from '../Icon';\nimport { useI18n } from '../../hooks';\nimport { defaultThemeProp } from '../../theme';\n\nimport FieldGroup, { FieldGroupProps } from '.';\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":";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,GAAG,CAAC;AAEhD,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 '.';\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"]}

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

@@ -1,6 +1,6 @@
 import { ReactNode, FunctionComponent } from 'react';
-import { BaseProps, ForwardProps } from '../../types';
-export interface FieldValueListProps extends BaseProps {
+import { BaseProps, ForwardProps, NoChildrenProp } from '../../types';
+export interface FieldValueListProps extends BaseProps, NoChildrenProp {
     /** The set of field values to render in the list. */
     fields: {
         id?: string;

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,MAAM,aAAa,CAAC;AAQtD,MAAM,WAAW,mBAAoB,SAAQ,SAAS;IACpD,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;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"}

package/lib/components/FieldValueList/FieldValueList.js

@@ -45,20 +45,18 @@ const DynamicHeightValue = ({ children }) => {
             observer.disconnect();
         };
     }, [textRef.current, maxTextHeight]);
-    return (_jsxs(_Fragment, { children: [_jsx(ExpandCollapse, Object.assign({ collapsed: collapsed, min: exceedsMaxHeight ? `${maxTextHeight}px` : 'max-content' }, { children: _jsx(Grid, Object.assign({ ref: textRef }, { children: _jsx("span", { children: children }, void 0) }), void 0) }), void 0),
-            exceedsMaxHeight && (_jsx(Button, Object.assign({ 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(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));
 };
 const FieldValueList = ({ fields, variant = 'inline', ...restProps }) => {
     const Wrapper = variant === 'inline' ? Fragment : 'div';
-    return (_jsx(Grid, Object.assign({}, restProps, { container: {
+    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 }) => {
+        }, 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, Object.assign({ as: StyledFieldName }, { children: name }), void 0),
-                    _jsx(StyledFieldValue, { children: value ? diplayValue : _jsx("span", Object.assign({ "aria-hidden": 'true' }, { children: "\u2013\u2013" }), void 0) }, void 0)] }, id !== null && id !== void 0 ? id : name));
-        }) }), void 0));
+            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));
 };
 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 } 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 {\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 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"]}

package/lib/components/File/FileDisplay.d.ts

@@ -1,12 +1,15 @@
 import { FunctionComponent, Ref } from 'react';
-import { BaseProps, ForwardProps } from '../../types';
+import { BaseProps, ForwardProps, NoChildrenProp } from '../../types';
 import { FileItemProps } from './FileItem';
-export interface FileDisplayProps extends Pick<FileItemProps, 'onPreview' | 'onDownload'>, BaseProps {
+export interface FileDisplayProps extends Pick<FileItemProps, 'onPreview' | 'onDownload'>, BaseProps, NoChildrenProp {
     /** URL address */
     value?: string;
     /** The text to be displayed. */
     displayText?: string;
-    /** Display value either as file, link only or textual representation. */
+    /**
+     * Display value either as file, link only or textual representation.
+     * @default "file"
+     * */
     variant?: 'file' | 'link' | 'text';
     /** Thumbnail image. */
     thumbnail?: string;

package/lib/components/File/FileDisplay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FileDisplay.d.ts","sourceRoot":"","sources":["../../../src/components/File/FileDisplay.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5E,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAGtD,OAAiB,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAErD,MAAM,WAAW,gBACf,SAAQ,IAAI,CAAC,aAAa,EAAE,WAAW,GAAG,YAAY,CAAC,EACrD,SAAS;IACX,kBAAkB;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gCAAgC;IAChC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,yEAAyE;IACzE,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;IACnC,uBAAuB;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,GAAG,iBAAiB,GAAG,eAAe,CAAC,CAAC;CACjE;AAED,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,CA0CnE,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"FileDisplay.d.ts","sourceRoot":"","sources":["../../../src/components/File/FileDisplay.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5E,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAGtE,OAAiB,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAErD,MAAM,WAAW,gBACf,SAAQ,IAAI,CAAC,aAAa,EAAE,WAAW,GAAG,YAAY,CAAC,EACrD,SAAS,EACT,cAAc;IAChB,kBAAkB;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gCAAgC;IAChC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;SAGK;IACL,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;IACnC,uBAAuB;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,GAAG,iBAAiB,GAAG,eAAe,CAAC,CAAC;CACjE;AAED,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,CA0CnE,CAAC;AAEF,eAAe,WAAW,CAAC"}

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", Object.assign({ ref: ref }, restProps, { children: value ? displayText || value : _jsx("span", Object.assign({ "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" }, void 0) }, void 0));
     }
     if (variant === 'link')
-        return (_jsx(Link, Object.assign({ ref: ref }, restProps, { href: value }, { children: displayText || value }), void 0));
-    return (_jsx(FileItem, Object.assign({}, restProps, { ref: ref, name: displayText || value, url: value }, {
-        thumbnail,
-        onDownload,
-        onPreview
-    }), void 0));
+        return (_jsx(Link, { ref: ref, ...restProps, href: value, children: displayText || value }, void 0));
+    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;AAiBrD,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,6BAAM,GAAG,EAAE,GAAG,IAAM,SAAS,cAC1B,KAAK,CAAC,CAAC,CAAC,WAAW,IAAI,KAAK,CAAC,CAAC,CAAC,4CAAkB,MAAM,0CAAsB,YACzE,CACR,CAAC;KACH;IAED,IAAI,OAAO,KAAK,MAAM;QACpB,OAAO,CACL,KAAC,IAAI,kBAAC,GAAG,EAAE,GAA6B,IAAM,SAAS,IAAE,IAAI,EAAE,KAAK,gBACjE,WAAW,IAAI,KAAK,YAChB,CACR,CAAC;IAEJ,OAAO,CACL,KAAC,QAAQ,oBACH,SAAS,IACb,GAAG,EAAE,GAA6B,EAClC,IAAI,EAAE,WAAW,IAAI,KAAK,EAC1B,GAAG,EAAE,KAAK,IACN;QACF,SAAS;QACT,UAAU;QACV,SAAS;KACV,UACD,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref } from 'react';\n\nimport { BaseProps, ForwardProps } 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  /** URL address */\n  value?: string;\n  /** The text to be displayed. */\n  displayText?: string;\n  /** Display value either as file, link only or textual representation. */\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,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"]}

package/lib/components/File/FileInput.d.ts

@@ -1,8 +1,8 @@
 import { FunctionComponent, Ref } from 'react';
-import { BaseProps, ForwardProps } from '../../types';
+import { BaseProps, ForwardProps, NoChildrenProp } from '../../types';
 import { FormControlProps } from '../FormControl';
 import { FileUploadItemProps } from './FileUploadItem';
-export interface FileInputProps extends BaseProps {
+export interface FileInputProps extends BaseProps, NoChildrenProp {
     /**
      * Called when files are added either via the input or drop zone.
      */
@@ -41,7 +41,7 @@ export interface FileInputProps extends BaseProps {
 export declare const StyledDropZone: import("styled-components").StyledComponent<FunctionComponent<FormControlProps & ForwardProps>, import("styled-components").DefaultTheme, {
     dragOver: boolean;
 }, never>;
-export declare const StyledFileInput: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, Omit<FileInputProps, never> & Required<Pick<FileInputProps, never>> & ForwardProps, never>;
+export declare const StyledFileInput: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../../types").OmitStrict<FileInputProps, never> & Required<Pick<FileInputProps, never>> & ForwardProps, never>;
 declare const BaseFileInput: FunctionComponent<FileInputProps & ForwardProps>;
 declare const FileInput: typeof BaseFileInput;
 export default FileInput;

package/lib/components/File/FileInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FileInput.d.ts","sourceRoot":"","sources":["../../../src/components/File/FileInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EACjB,GAAG,EAOJ,MAAM,OAAO,CAAC;AAIf,OAAO,EAAE,SAAS,EAAE,YAAY,EAAqB,MAAM,aAAa,CAAC;AAEzE,OAAoB,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAQ/D,OAAuB,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAIvE,MAAM,WAAW,cAAe,SAAQ,SAAS;IAC/C;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IACvC;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iDAAiD;IACjD,KAAK,CAAC,EAAE,mBAAmB,EAAE,CAAC;IAC9B;;;OAGG;IACH,EAAE,CAAC,EAAE,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAC5B,oDAAoD;IACpD,MAAM,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACpC,2DAA2D;IAC3D,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC,uCAAuC;IACvC,WAAW,CAAC,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAC9C,6GAA6G;IAC7G,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,wEAAwE;IACxE,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,+FAA+F;IAC/F,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,sEAAsE;IACtE,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B;AAED,eAAO,MAAM,cAAc;cAAmC,OAAO;SAYnE,CAAC;AAEH,eAAO,MAAM,eAAe,yLAkB3B,CAAC;AAYF,QAAA,MAAM,aAAa,EAAE,iBAAiB,CAAC,cAAc,GAAG,YAAY,CAoHnE,CAAC;AAEF,QAAA,MAAM,SAAS,EAAE,OAAO,aAKtB,CAAC;AAEH,eAAe,SAAS,CAAC"}
+{"version":3,"file":"FileInput.d.ts","sourceRoot":"","sources":["../../../src/components/File/FileInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EACjB,GAAG,EAOJ,MAAM,OAAO,CAAC;AAIf,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAqB,MAAM,aAAa,CAAC;AAEzF,OAAoB,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAS/D,OAAuB,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAMvE,MAAM,WAAW,cAAe,SAAQ,SAAS,EAAE,cAAc;IAC/D;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IACvC;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iDAAiD;IACjD,KAAK,CAAC,EAAE,mBAAmB,EAAE,CAAC;IAC9B;;;OAGG;IACH,EAAE,CAAC,EAAE,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAC5B,oDAAoD;IACpD,MAAM,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACpC,2DAA2D;IAC3D,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC,uCAAuC;IACvC,WAAW,CAAC,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAC9C,6GAA6G;IAC7G,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,wEAAwE;IACxE,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,+FAA+F;IAC/F,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,sEAAsE;IACtE,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B;AAED,eAAO,MAAM,cAAc;cAAmC,OAAO;SAYnE,CAAC;AAEH,eAAO,MAAM,eAAe,qNAkB3B,CAAC;AAYF,QAAA,MAAM,aAAa,EAAE,iBAAiB,CAAC,cAAc,GAAG,YAAY,CAkHnE,CAAC;AAEF,QAAA,MAAM,SAAS,EAAE,OAAO,aAKtB,CAAC;AAEH,eAAe,SAAS,CAAC"}

package/lib/components/File/FileInput.js

@@ -7,10 +7,12 @@ import FormControl from '../FormControl';
 import { defaultThemeProp } from '../../theme';
 import Flex from '../Flex';
 import Text from '../Text';
-import Icon from '../Icon';
+import Icon, { registerIcon } from '../Icon';
+import * as paperClipIcon from '../Icon/icons/paper-clip.icon';
 import FormField from '../FormField';
 import Grid from '../Grid';
 import FileUploadItem from './FileUploadItem';
+registerIcon(paperClipIcon);
 export const StyledDropZone = styled(FormControl)(({ dragOver, theme }) => {
     return css `
     padding: calc(2 * ${theme.base.spacing});
@@ -55,7 +57,7 @@ const BaseFileInput = forwardRef((props, ref) => {
     const inputRef = useConsolidatedRef(ref);
     const onChange = useCallback((e) => {
         if (e.target.files) {
-            onFilesAdded === null || onFilesAdded === void 0 ? void 0 : onFilesAdded(Array.from(e.target.files));
+            onFilesAdded?.(Array.from(e.target.files));
         }
         /**
          * WHY are we doing this?
@@ -71,34 +73,31 @@ const BaseFileInput = forwardRef((props, ref) => {
     const t = useI18n();
     const [dragOver, setDragOver] = useState(false);
     const { ltr, rtl } = useDirection();
-    const fileInput = (_jsxs(StyledFileInput, { children: [_jsx("input", Object.assign({ ref: inputRef, type: 'file', id: id, disabled: disabled, onChange: onChange, multiple: multiple }, restProps), void 0),
-            _jsxs(Flex, Object.assign({ container: { alignItems: 'center', justify: 'center' }, item: { grow: 1 }, as: StyledDropZone, dragOver: dragOver, onClick: () => {
-                    var _a, _b;
-                    (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-                    (_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.click();
+    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: () => {
+                    inputRef.current?.focus();
+                    inputRef.current?.click();
                 }, onDragOver: (e) => {
                     e.preventDefault();
                 }, onDragEnter: () => setDragOver(true), onDragLeave: () => setDragOver(false), onDrop: (e) => {
                     e.preventDefault();
                     setDragOver(false);
-                    onFilesAdded === null || onFilesAdded === void 0 ? void 0 : onFilesAdded(Array.from(e.dataTransfer.files));
-                } }, { children: [ltr && icon,
-                    _jsxs(Text, Object.assign({ 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, Object.assign({ container: { rowGap: 1 } }, { children: [label ? (_jsx(FormField, Object.assign({}, { label, labelHidden, id, info, required, disabled, status }, { children: fileInput }), void 0)) : (fileInput),
-            !!(files === null || files === void 0 ? void 0 : files.length) && (_jsx(Grid, Object.assign({ container: {
+                    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: {
                     gap: 1,
-                    cols: 'repeat(auto-fill, minmax(20rem, 1fr))'
-                }, as: 'ul' }, restProps, { children: files.map(({ name, ...file }, index) => {
+                    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, Object.assign({ name: name }, file), index);
-                }) }), void 0))] }), void 0));
+                    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, Object.assign({}, props, { ref: ref }), void 0);
-    return _jsx(BaseFileInput, Object.assign({}, props, { ref: ref }), void 0);
+        return _jsx(Override, { ...props, ref: ref }, void 0);
+    return _jsx(BaseFileInput, { ...props, ref: ref }, void 0);
 });
 export default FileInput;
 //# sourceMappingURL=FileInput.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"FileInput.js","sourceRoot":"","sources":["../../../src/components/File/FileInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FunctionComponent,\n  Ref,\n  forwardRef,\n  ChangeEvent,\n  useCallback,\n  PropsWithoutRef,\n  DragEvent,\n  useState\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { hideVisually } from 'polished';\n\nimport { BaseProps, ForwardProps, PropsWithDefaults } from '../../types';\nimport { useOverride, useConsolidatedRef, useI18n, useUID, useDirection } from '../../hooks';\nimport FormControl, { FormControlProps } from '../FormControl';\nimport { defaultThemeProp } from '../../theme';\nimport Flex from '../Flex';\nimport Text from '../Text';\nimport Icon from '../Icon';\nimport FormField from '../FormField';\nimport Grid from '../Grid';\n\nimport FileUploadItem, { FileUploadItemProps } from './FileUploadItem';\n\ntype FileInputPropsWithDefaults = PropsWithDefaults<FileInputProps>;\n\nexport interface FileInputProps extends BaseProps {\n  /**\n   * Called when files are added either via the input or drop zone.\n   */\n  onFilesAdded?: (files: File[]) => void;\n  /**\n   * Allow multiple files to be selected from the OS specific file browser.\n   * NOTE: This does not restrict multiple files from being added via drag and drop.\n   * Restrict multi file drag and drop via onFilesAdded and custom info message.\n   * @default false\n   */\n  multiple?: boolean;\n  /** An array of files that have been uploaded. */\n  files?: FileUploadItemProps[];\n  /**\n   * Sets DOM id for the control and associates label element via 'for' attribute.\n   * If an id is not pass, a random id will be generated for any render.\n   */\n  id?: FormControlProps['id'];\n  /** Set visual state based on a validation state. */\n  status?: FormControlProps['status'];\n  /** Pass a string or a fragment with an Icon and string. */\n  label?: FormControlProps['label'];\n  /** Visually hides the label region. */\n  labelHidden?: FormControlProps['labelHidden'];\n  /** It is recommended to pass a simple string to offer guidance. Text will be styled based on status prop. */\n  info?: FormControlProps['info'];\n  /** Indicate if the field is required. The browser defaults to false. */\n  required?: FormControlProps['required'];\n  /** Disable the control. The browser defaults to false. */\n  disabled?: FormControlProps['disabled'];\n  /** Sets html name attribute for the underlying control. Useful for mapping to a data field. */\n  name?: FormControlProps['name'];\n  /** Ref for the input element within the component's dom structure. */\n  ref?: Ref<HTMLInputElement>;\n}\n\nexport const StyledDropZone = styled(FormControl)<{ dragOver: boolean }>(({ dragOver, theme }) => {\n  return css`\n    padding: calc(2 * ${theme.base.spacing});\n    min-height: 4rem;\n    border-style: dashed;\n    cursor: pointer;\n\n    ${dragOver &&\n    css`\n      border-style: solid;\n    `}\n  `;\n});\n\nexport const StyledFileInput = styled.div<FileInputPropsWithDefaults & ForwardProps>(\n  ({ theme }) => {\n    return css`\n      position: relative;\n\n      input {\n        ${hideVisually}\n      }\n\n      input:enabled:focus + ${StyledDropZone} {\n        box-shadow: ${theme.components['form-control'][':focus']['box-shadow']};\n      }\n\n      input[hidden] + ${StyledDropZone} {\n        display: none;\n      }\n    `;\n  }\n);\n\nStyledFileInput.defaultProps = defaultThemeProp;\n\nconst StyledInteractiveText = styled.span(({ theme }) => {\n  return css`\n    color: ${theme.base.palette.interactive};\n  `;\n});\n\nStyledInteractiveText.defaultProps = defaultThemeProp;\n\nconst BaseFileInput: FunctionComponent<FileInputProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<FileInputProps>, ref: FileInputProps['ref']) => {\n    const uid = useUID();\n    const {\n      id = uid,\n      label,\n      labelHidden,\n      info,\n      required = false,\n      disabled = false,\n      files,\n      onFilesAdded,\n      multiple = false,\n      status,\n      ...restProps\n    } = props;\n\n    const icon = <Icon name='paper-clip' />;\n    const inputRef = useConsolidatedRef(ref);\n\n    const onChange = useCallback(\n      (e: ChangeEvent<HTMLInputElement>) => {\n        if (e.target.files) {\n          onFilesAdded?.(Array.from(e.target.files));\n        }\n        /**\n         * WHY are we doing this?\n         * We are not working with the \"value\" prop of the input but rather the File instances that are created.\n         * The consumer of this component should manage an array or File(s) and allow for a user to remove a selected file.\n         * Since we can not modify the input value of files for browser security reasons,\n         * and since setting the files property is less than ideal, we reset/toggle the input to a fresh state after a render.\n         * This enables onChange to fire even if the user had just previously selected a file, removed it, and selected it again.\n         */\n        if (inputRef.current) inputRef.current.value = '';\n      },\n      [onFilesAdded]\n    );\n\n    const t = useI18n();\n    const [dragOver, setDragOver] = useState(false);\n    const { ltr, rtl } = useDirection();\n\n    const fileInput = (\n      <StyledFileInput>\n        <input\n          ref={inputRef}\n          type='file'\n          id={id}\n          disabled={disabled}\n          onChange={onChange}\n          multiple={multiple}\n          {...restProps}\n        />\n        <Flex\n          container={{ alignItems: 'center', justify: 'center' }}\n          item={{ grow: 1 }}\n          as={StyledDropZone}\n          dragOver={dragOver}\n          onClick={() => {\n            inputRef.current?.focus();\n            inputRef.current?.click();\n          }}\n          onDragOver={(e: DragEvent<HTMLDivElement>) => {\n            e.preventDefault();\n          }}\n          onDragEnter={() => setDragOver(true)}\n          onDragLeave={() => setDragOver(false)}\n          onDrop={(e: DragEvent<HTMLDivElement>) => {\n            e.preventDefault();\n            setDragOver(false);\n            onFilesAdded?.(Array.from(e.dataTransfer.files));\n          }}\n        >\n          {ltr && icon}\n          <Text variant='primary'>\n            &nbsp;\n            {t(\n              'file_upload_text_main',\n              <StyledInteractiveText>\n                {t(multiple ? 'file_upload_text_multiple' : 'file_upload_text_one')}\n              </StyledInteractiveText>\n            )}\n            &nbsp;\n          </Text>\n          {rtl && icon}\n        </Flex>\n      </StyledFileInput>\n    );\n\n    return (\n      <Grid container={{ rowGap: 1 }}>\n        {label ? (\n          <FormField {...{ label, labelHidden, id, info, required, disabled, status }}>\n            {fileInput}\n          </FormField>\n        ) : (\n          fileInput\n        )}\n        {!!files?.length && (\n          <Grid\n            container={{\n              gap: 1,\n              cols: 'repeat(auto-fill, minmax(20rem, 1fr))'\n            }}\n            as='ul'\n            {...restProps}\n          >\n            {files.map(({ name, ...file }, index) => {\n              // eslint-disable-next-line react/no-array-index-key\n              return <FileUploadItem key={index} name={name} {...file} />;\n            })}\n          </Grid>\n        )}\n      </Grid>\n    );\n  }\n);\n\nconst FileInput: typeof BaseFileInput = forwardRef((props, ref) => {\n  const Override = useOverride('FileInput');\n  if (Override) return <Override {...props} ref={ref} />;\n\n  return <BaseFileInput {...props} ref={ref} />;\n});\n\nexport default FileInput;\n"]}
+{"version":3,"file":"FileInput.js","sourceRoot":"","sources":["../../../src/components/File/FileInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FunctionComponent,\n  Ref,\n  forwardRef,\n  ChangeEvent,\n  useCallback,\n  PropsWithoutRef,\n  DragEvent,\n  useState\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { hideVisually } from 'polished';\n\nimport { BaseProps, ForwardProps, NoChildrenProp, PropsWithDefaults } from '../../types';\nimport { useOverride, useConsolidatedRef, useI18n, useUID, useDirection } from '../../hooks';\nimport FormControl, { FormControlProps } from '../FormControl';\nimport { defaultThemeProp } from '../../theme';\nimport Flex from '../Flex';\nimport Text from '../Text';\nimport Icon, { registerIcon } from '../Icon';\nimport * as paperClipIcon from '../Icon/icons/paper-clip.icon';\nimport FormField from '../FormField';\nimport Grid from '../Grid';\n\nimport FileUploadItem, { FileUploadItemProps } from './FileUploadItem';\n\nregisterIcon(paperClipIcon);\n\ntype FileInputPropsWithDefaults = PropsWithDefaults<FileInputProps>;\n\nexport interface FileInputProps extends BaseProps, NoChildrenProp {\n  /**\n   * Called when files are added either via the input or drop zone.\n   */\n  onFilesAdded?: (files: File[]) => void;\n  /**\n   * Allow multiple files to be selected from the OS specific file browser.\n   * NOTE: This does not restrict multiple files from being added via drag and drop.\n   * Restrict multi file drag and drop via onFilesAdded and custom info message.\n   * @default false\n   */\n  multiple?: boolean;\n  /** An array of files that have been uploaded. */\n  files?: FileUploadItemProps[];\n  /**\n   * Sets DOM id for the control and associates label element via 'for' attribute.\n   * If an id is not pass, a random id will be generated for any render.\n   */\n  id?: FormControlProps['id'];\n  /** Set visual state based on a validation state. */\n  status?: FormControlProps['status'];\n  /** Pass a string or a fragment with an Icon and string. */\n  label?: FormControlProps['label'];\n  /** Visually hides the label region. */\n  labelHidden?: FormControlProps['labelHidden'];\n  /** It is recommended to pass a simple string to offer guidance. Text will be styled based on status prop. */\n  info?: FormControlProps['info'];\n  /** Indicate if the field is required. The browser defaults to false. */\n  required?: FormControlProps['required'];\n  /** Disable the control. The browser defaults to false. */\n  disabled?: FormControlProps['disabled'];\n  /** Sets html name attribute for the underlying control. Useful for mapping to a data field. */\n  name?: FormControlProps['name'];\n  /** Ref for the input element within the component's dom structure. */\n  ref?: Ref<HTMLInputElement>;\n}\n\nexport const StyledDropZone = styled(FormControl)<{ dragOver: boolean }>(({ dragOver, theme }) => {\n  return css`\n    padding: calc(2 * ${theme.base.spacing});\n    min-height: 4rem;\n    border-style: dashed;\n    cursor: pointer;\n\n    ${dragOver &&\n    css`\n      border-style: solid;\n    `}\n  `;\n});\n\nexport const StyledFileInput = styled.div<FileInputPropsWithDefaults & ForwardProps>(\n  ({ theme }) => {\n    return css`\n      position: relative;\n\n      input {\n        ${hideVisually}\n      }\n\n      input:enabled:focus + ${StyledDropZone} {\n        box-shadow: ${theme.components['form-control'][':focus']['box-shadow']};\n      }\n\n      input[hidden] + ${StyledDropZone} {\n        display: none;\n      }\n    `;\n  }\n);\n\nStyledFileInput.defaultProps = defaultThemeProp;\n\nconst StyledInteractiveText = styled.span(({ theme }) => {\n  return css`\n    color: ${theme.base.palette.interactive};\n  `;\n});\n\nStyledInteractiveText.defaultProps = defaultThemeProp;\n\nconst BaseFileInput: FunctionComponent<FileInputProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<FileInputProps>, ref: FileInputProps['ref']) => {\n    const uid = useUID();\n    const {\n      id = uid,\n      label,\n      labelHidden,\n      info,\n      required = false,\n      disabled = false,\n      files,\n      onFilesAdded,\n      multiple = false,\n      status,\n      ...restProps\n    } = props;\n\n    const icon = <Icon name='paper-clip' />;\n    const inputRef = useConsolidatedRef(ref);\n\n    const onChange = useCallback(\n      (e: ChangeEvent<HTMLInputElement>) => {\n        if (e.target.files) {\n          onFilesAdded?.(Array.from(e.target.files));\n        }\n        /**\n         * WHY are we doing this?\n         * We are not working with the \"value\" prop of the input but rather the File instances that are created.\n         * The consumer of this component should manage an array or File(s) and allow for a user to remove a selected file.\n         * Since we can not modify the input value of files for browser security reasons,\n         * and since setting the files property is less than ideal, we reset/toggle the input to a fresh state after a render.\n         * This enables onChange to fire even if the user had just previously selected a file, removed it, and selected it again.\n         */\n        if (inputRef.current) inputRef.current.value = '';\n      },\n      [onFilesAdded]\n    );\n\n    const t = useI18n();\n    const [dragOver, setDragOver] = useState(false);\n    const { ltr, rtl } = useDirection();\n\n    const fileInput = (\n      <StyledFileInput>\n        <input\n          {...restProps}\n          ref={inputRef}\n          type='file'\n          id={id}\n          disabled={disabled}\n          onChange={onChange}\n          multiple={multiple}\n        />\n        <Flex\n          container={{ alignItems: 'center', justify: 'center' }}\n          item={{ grow: 1 }}\n          as={StyledDropZone}\n          dragOver={dragOver}\n          onClick={() => {\n            inputRef.current?.focus();\n            inputRef.current?.click();\n          }}\n          onDragOver={(e: DragEvent<HTMLDivElement>) => {\n            e.preventDefault();\n          }}\n          onDragEnter={() => setDragOver(true)}\n          onDragLeave={() => setDragOver(false)}\n          onDrop={(e: DragEvent<HTMLDivElement>) => {\n            e.preventDefault();\n            setDragOver(false);\n            onFilesAdded?.(Array.from(e.dataTransfer.files));\n          }}\n        >\n          {ltr && icon}\n          <Text variant='primary'>\n            &nbsp;\n            {t('file_upload_text_main', [\n              <StyledInteractiveText>\n                {t(multiple ? 'file_upload_text_multiple' : 'file_upload_text_one')}\n              </StyledInteractiveText>\n            ])}\n            &nbsp;\n          </Text>\n          {rtl && icon}\n        </Flex>\n      </StyledFileInput>\n    );\n\n    return (\n      <Grid container={{ rowGap: 1 }}>\n        {label ? (\n          <FormField {...{ label, labelHidden, id, info, required, disabled, status }}>\n            {fileInput}\n          </FormField>\n        ) : (\n          fileInput\n        )}\n        {!!files?.length && (\n          <Grid\n            container={{\n              gap: 1,\n              cols: 'repeat(2, minmax(0, 1fr))'\n            }}\n            as='ul'\n          >\n            {files.map(({ name, ...file }, index) => {\n              // eslint-disable-next-line react/no-array-index-key\n              return <FileUploadItem key={index} name={name} {...file} />;\n            })}\n          </Grid>\n        )}\n      </Grid>\n    );\n  }\n);\n\nconst FileInput: typeof BaseFileInput = forwardRef((props, ref) => {\n  const Override = useOverride('FileInput');\n  if (Override) return <Override {...props} ref={ref} />;\n\n  return <BaseFileInput {...props} ref={ref} />;\n});\n\nexport default FileInput;\n"]}

package/lib/components/File/FileItem.d.ts

@@ -5,8 +5,6 @@ export interface FileItemProps extends BaseProps {
     name: string;
     /** Url of the file. */
     url: string;
-    /** Url pointing to the thumbnail image, rendered in the 'visual' region. */
-    thumbnail?: string;
     /** When passed, it will make the icon/thumbnail region actionable. Passes file url as the parameter. */
     onPreview?: (url: FileItemProps['url']) => void;
     /** When passed, it will make the name region actionable. Passes file url as the parameter. */

package/lib/components/File/FileItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FileItem.d.ts","sourceRoot":"","sources":["../../../src/components/File/FileItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+B,EAAE,EAAE,GAAG,EAAe,MAAM,OAAO,CAAC;AAG1E,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAStD,MAAM,WAAW,aAAc,SAAQ,SAAS;IAC9C,wBAAwB;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,uBAAuB;IACvB,GAAG,EAAE,MAAM,CAAC;IACZ,4EAA4E;IAC5E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wGAAwG;IACxG,SAAS,CAAC,EAAE,CAAC,GAAG,EAAE,aAAa,CAAC,KAAK,CAAC,KAAK,IAAI,CAAC;IAChD,8FAA8F;IAC9F,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,aAAa,CAAC,KAAK,CAAC,KAAK,IAAI,CAAC;IACjD,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAC;CAC9B;AAmCD,QAAA,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,GAAG,YAAY,CAkC9C,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"FileItem.d.ts","sourceRoot":"","sources":["../../../src/components/File/FileItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+B,EAAE,EAAE,GAAG,EAAe,MAAM,OAAO,CAAC;AAG1E,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAStD,MAAM,WAAW,aAAc,SAAQ,SAAS;IAC9C,wBAAwB;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,uBAAuB;IACvB,GAAG,EAAE,MAAM,CAAC;IACZ,wGAAwG;IACxG,SAAS,CAAC,EAAE,CAAC,GAAG,EAAE,aAAa,CAAC,KAAK,CAAC,KAAK,IAAI,CAAC;IAChD,8FAA8F;IAC9F,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,aAAa,CAAC,KAAK,CAAC,KAAK,IAAI,CAAC;IACjD,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAC;CAC9B;AAmCD,QAAA,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,GAAG,YAAY,CAiC9C,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/lib/components/File/FileItem.js

@@ -38,15 +38,14 @@ const StyledFileItem = styled.div(({ theme: { base } }) => {
 });
 StyledFileItem.defaultProps = defaultThemeProp;
 const FileItem = forwardRef((props, ref) => {
-    const { name, url, thumbnail, onPreview, onDownload, ...restProps } = props;
+    const { name, url, onPreview, onDownload, ...restProps } = props;
     const t = useI18n();
     const onDownloadClick = useCallback(() => {
-        onDownload === null || onDownload === void 0 ? void 0 : onDownload(url);
+        onDownload?.(url);
     }, [url, onDownload]);
     const type = getMimeTypeFromFile(url);
     const text = name || url;
-    return (_jsxs(Grid, Object.assign({ as: StyledFileItem, container: { cols: 'auto 1fr' }, ref: ref }, { children: [_jsx(FileVisual, { type: getKindFromMimeType(type !== null && type !== void 0 ? type : ''), disabled: !onPreview, thumbnail: thumbnail, onClick: () => onPreview === null || onPreview === void 0 ? void 0 : onPreview(url), "aria-label": `${t('preview')}: ${text}` }, void 0),
-            _jsx(Button, Object.assign({}, restProps, { variant: 'text', disabled: !onDownload, onClick: onDownloadClick, "aria-label": `${t('download')}: ${text}` }, { children: text }), void 0)] }), void 0));
+    return (_jsxs(Grid, { as: StyledFileItem, container: { cols: 'auto 1fr' }, ref: ref, children: [_jsx(FileVisual, { type: getKindFromMimeType(type ?? ''), disabled: !onPreview, onClick: () => onPreview?.(url), "aria-label": `${t('preview')}: ${text}` }, void 0), _jsx(Button, { ...restProps, variant: 'text', disabled: !onDownload, onClick: onDownloadClick, "aria-label": `${t('download')}: ${text}`, children: text }, void 0)] }, void 0));
 });
 export default FileItem;
 //# sourceMappingURL=FileItem.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"FileItem.js","sourceRoot":"","sources":["../../../src/components/File/FileItem.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA4B,WAAW,EAAE,MAAM,OAAO,CAAC;AAC1E,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAGhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,MAAM,EAAE,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AACjD,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAEpD,OAAO,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AACnE,OAAO,UAAU,EAAE,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAiB5D,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,EAAE;IACxD,MAAM,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,YAAY,EAAE,CAAC;IAEtC,OAAO,GAAG,CAAA;gCACoB,IAAI,CAAC,eAAe,CAAC;;QAE7C,gBAAgB;QAChB,cAAc,KAAK,SAAS;QAC5B,iBAAiB,KAAK,SAAS;QAC/B,cAAc,GAAG,SAAS;QAC1B,iBAAiB,GAAG,SAAS;;;QAG7B,gBAAgB,MAAM,YAAY;;gCAEV,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;0BACjC,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC;;mBAEzC,IAAI,CAAC,OAAO;;QAEvB,cAAc,KAAK,SAAS;QAC5B,iBAAiB,KAAK,SAAS;QAC/B,cAAc,GAAG,SAAS;QAC1B,iBAAiB,GAAG,SAAS;;;;;GAKlC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE/C,MAAM,QAAQ,GAAqC,UAAU,CAC3D,CAAC,KAAqC,EAAE,GAAyB,EAAE,EAAE;IACnE,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,SAAS,EAAE,SAAS,EAAE,UAAU,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAE5E,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,MAAM,eAAe,GAAG,WAAW,CAAC,GAAG,EAAE;QACvC,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAG,GAAG,CAAC,CAAC;IACpB,CAAC,EAAE,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC,CAAC;IAEtB,MAAM,IAAI,GAAG,mBAAmB,CAAC,GAAG,CAAC,CAAC;IACtC,MAAM,IAAI,GAAG,IAAI,IAAI,GAAG,CAAC;IAEzB,OAAO,CACL,MAAC,IAAI,kBAAC,EAAE,EAAE,cAAc,EAAE,SAAS,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE,EAAE,GAAG,EAAE,GAAG,iBACjE,KAAC,UAAU,IACT,IAAI,EAAE,mBAAmB,CAAC,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,EAAE,CAAC,EACrC,QAAQ,EAAE,CAAC,SAAS,EACpB,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAG,GAAG,CAAC,gBACnB,GAAG,CAAC,CAAC,SAAS,CAAC,KAAK,IAAI,EAAE,WACtC;YACF,KAAC,MAAM,oBACD,SAAS,IACb,OAAO,EAAC,MAAM,EACd,QAAQ,EAAE,CAAC,UAAU,EACrB,OAAO,EAAE,eAAe,gBACZ,GAAG,CAAC,CAAC,UAAU,CAAC,KAAK,IAAI,EAAE,gBAEtC,IAAI,YACE,aACJ,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,QAAQ,CAAC","sourcesContent":["import { forwardRef, PropsWithoutRef, FC, Ref, useCallback } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { ForwardProps, BaseProps } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport Button, { StyledButton } from '../Button';\nimport Grid from '../Grid';\nimport { useDirection, useI18n } from '../../hooks';\n\nimport { getKindFromMimeType, getMimeTypeFromFile } from './utils';\nimport FileVisual, { StyledFileVisual } from './FileVisual';\n\nexport interface FileItemProps extends BaseProps {\n  /** Name of the file. */\n  name: string;\n  /** Url of the file. */\n  url: string;\n  /** Url pointing to the thumbnail image, rendered in the 'visual' region. */\n  thumbnail?: string;\n  /** When passed, it will make the icon/thumbnail region actionable. Passes file url as the parameter. */\n  onPreview?: (url: FileItemProps['url']) => void;\n  /** When passed, it will make the name region actionable. Passes file url as the parameter. */\n  onDownload?: (url: FileItemProps['url']) => void;\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLButtonElement>;\n}\n\nconst StyledFileItem = styled.div(({ theme: { base } }) => {\n  const { start, end } = useDirection();\n\n  return css`\n    border-radius: calc(0.5 * ${base['border-radius']});\n\n    > ${StyledFileVisual} {\n      ${`border-top-${start}-radius`}: inherit;\n      ${`border-bottom-${start}-radius`}: inherit;\n      ${`border-top-${end}-radius`}: 0;\n      ${`border-bottom-${end}-radius`}: 0;\n    }\n\n    > ${StyledFileVisual} + ${StyledButton} {\n      margin-inline-start: 0;\n      border: 0.0625rem solid ${base.palette['border-line']};\n      background-color: ${base.palette['primary-background']};\n      opacity: 1;\n      padding: 0 ${base.spacing};\n      border-inline-start: 0;\n      ${`border-top-${start}-radius`}: 0;\n      ${`border-bottom-${start}-radius`}: 0;\n      ${`border-top-${end}-radius`}: inherit;\n      ${`border-bottom-${end}-radius`}: inherit;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n  `;\n});\n\nStyledFileItem.defaultProps = defaultThemeProp;\n\nconst FileItem: FC<FileItemProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<FileItemProps>, ref: FileItemProps['ref']) => {\n    const { name, url, thumbnail, onPreview, onDownload, ...restProps } = props;\n\n    const t = useI18n();\n\n    const onDownloadClick = useCallback(() => {\n      onDownload?.(url);\n    }, [url, onDownload]);\n\n    const type = getMimeTypeFromFile(url);\n    const text = name || url;\n\n    return (\n      <Grid as={StyledFileItem} container={{ cols: 'auto 1fr' }} ref={ref}>\n        <FileVisual\n          type={getKindFromMimeType(type ?? '')}\n          disabled={!onPreview}\n          thumbnail={thumbnail}\n          onClick={() => onPreview?.(url)}\n          aria-label={`${t('preview')}: ${text}`}\n        />\n        <Button\n          {...restProps}\n          variant='text'\n          disabled={!onDownload}\n          onClick={onDownloadClick}\n          aria-label={`${t('download')}: ${text}`}\n        >\n          {text}\n        </Button>\n      </Grid>\n    );\n  }\n);\n\nexport default FileItem;\n"]}
+{"version":3,"file":"FileItem.js","sourceRoot":"","sources":["../../../src/components/File/FileItem.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA4B,WAAW,EAAE,MAAM,OAAO,CAAC;AAC1E,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAGhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,MAAM,EAAE,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AACjD,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAEpD,OAAO,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AACnE,OAAO,UAAU,EAAE,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAe5D,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,EAAE;IACxD,MAAM,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,YAAY,EAAE,CAAC;IAEtC,OAAO,GAAG,CAAA;gCACoB,IAAI,CAAC,eAAe,CAAC;;QAE7C,gBAAgB;QAChB,cAAc,KAAK,SAAS;QAC5B,iBAAiB,KAAK,SAAS;QAC/B,cAAc,GAAG,SAAS;QAC1B,iBAAiB,GAAG,SAAS;;;QAG7B,gBAAgB,MAAM,YAAY;;gCAEV,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;0BACjC,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC;;mBAEzC,IAAI,CAAC,OAAO;;QAEvB,cAAc,KAAK,SAAS;QAC5B,iBAAiB,KAAK,SAAS;QAC/B,cAAc,GAAG,SAAS;QAC1B,iBAAiB,GAAG,SAAS;;;;;GAKlC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE/C,MAAM,QAAQ,GAAqC,UAAU,CAC3D,CAAC,KAAqC,EAAE,GAAyB,EAAE,EAAE;IACnE,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,SAAS,EAAE,UAAU,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAEjE,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,MAAM,eAAe,GAAG,WAAW,CAAC,GAAG,EAAE;QACvC,UAAU,EAAE,CAAC,GAAG,CAAC,CAAC;IACpB,CAAC,EAAE,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC,CAAC;IAEtB,MAAM,IAAI,GAAG,mBAAmB,CAAC,GAAG,CAAC,CAAC;IACtC,MAAM,IAAI,GAAG,IAAI,IAAI,GAAG,CAAC;IAEzB,OAAO,CACL,MAAC,IAAI,IAAC,EAAE,EAAE,cAAc,EAAE,SAAS,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE,EAAE,GAAG,EAAE,GAAG,aACjE,KAAC,UAAU,IACT,IAAI,EAAE,mBAAmB,CAAC,IAAI,IAAI,EAAE,CAAC,EACrC,QAAQ,EAAE,CAAC,SAAS,EACpB,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,EAAE,CAAC,GAAG,CAAC,gBACnB,GAAG,CAAC,CAAC,SAAS,CAAC,KAAK,IAAI,EAAE,WACtC,EACF,KAAC,MAAM,OACD,SAAS,EACb,OAAO,EAAC,MAAM,EACd,QAAQ,EAAE,CAAC,UAAU,EACrB,OAAO,EAAE,eAAe,gBACZ,GAAG,CAAC,CAAC,UAAU,CAAC,KAAK,IAAI,EAAE,YAEtC,IAAI,WACE,YACJ,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,QAAQ,CAAC","sourcesContent":["import { forwardRef, PropsWithoutRef, FC, Ref, useCallback } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { ForwardProps, BaseProps } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport Button, { StyledButton } from '../Button';\nimport Grid from '../Grid';\nimport { useDirection, useI18n } from '../../hooks';\n\nimport { getKindFromMimeType, getMimeTypeFromFile } from './utils';\nimport FileVisual, { StyledFileVisual } from './FileVisual';\n\nexport interface FileItemProps extends BaseProps {\n  /** Name of the file. */\n  name: string;\n  /** Url of the file. */\n  url: string;\n  /** When passed, it will make the icon/thumbnail region actionable. Passes file url as the parameter. */\n  onPreview?: (url: FileItemProps['url']) => void;\n  /** When passed, it will make the name region actionable. Passes file url as the parameter. */\n  onDownload?: (url: FileItemProps['url']) => void;\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLButtonElement>;\n}\n\nconst StyledFileItem = styled.div(({ theme: { base } }) => {\n  const { start, end } = useDirection();\n\n  return css`\n    border-radius: calc(0.5 * ${base['border-radius']});\n\n    > ${StyledFileVisual} {\n      ${`border-top-${start}-radius`}: inherit;\n      ${`border-bottom-${start}-radius`}: inherit;\n      ${`border-top-${end}-radius`}: 0;\n      ${`border-bottom-${end}-radius`}: 0;\n    }\n\n    > ${StyledFileVisual} + ${StyledButton} {\n      margin-inline-start: 0;\n      border: 0.0625rem solid ${base.palette['border-line']};\n      background-color: ${base.palette['primary-background']};\n      opacity: 1;\n      padding: 0 ${base.spacing};\n      border-inline-start: 0;\n      ${`border-top-${start}-radius`}: 0;\n      ${`border-bottom-${start}-radius`}: 0;\n      ${`border-top-${end}-radius`}: inherit;\n      ${`border-bottom-${end}-radius`}: inherit;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n  `;\n});\n\nStyledFileItem.defaultProps = defaultThemeProp;\n\nconst FileItem: FC<FileItemProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<FileItemProps>, ref: FileItemProps['ref']) => {\n    const { name, url, onPreview, onDownload, ...restProps } = props;\n\n    const t = useI18n();\n\n    const onDownloadClick = useCallback(() => {\n      onDownload?.(url);\n    }, [url, onDownload]);\n\n    const type = getMimeTypeFromFile(url);\n    const text = name || url;\n\n    return (\n      <Grid as={StyledFileItem} container={{ cols: 'auto 1fr' }} ref={ref}>\n        <FileVisual\n          type={getKindFromMimeType(type ?? '')}\n          disabled={!onPreview}\n          onClick={() => onPreview?.(url)}\n          aria-label={`${t('preview')}: ${text}`}\n        />\n        <Button\n          {...restProps}\n          variant='text'\n          disabled={!onDownload}\n          onClick={onDownloadClick}\n          aria-label={`${t('download')}: ${text}`}\n        >\n          {text}\n        </Button>\n      </Grid>\n    );\n  }\n);\n\nexport default FileItem;\n"]}

package/lib/components/File/FileUploadItem.d.ts

@@ -1,6 +1,6 @@
 import { FC, Ref, ReactElement } from 'react';
-import { ForwardProps, BaseProps } from '../../types';
-export interface FileUploadItemProps extends BaseProps {
+import { ForwardProps, BaseProps, NoChildrenProp } from '../../types';
+export interface FileUploadItemProps extends BaseProps, NoChildrenProp {
     /** Name of the file. */
     name: string;
     /** A FileUploadVisual element to represent the file. */
@@ -26,6 +26,8 @@ export interface FileUploadItemProps extends BaseProps {
     thumbnail?: string;
     /** If the attachment is in an upload state, pass progress as a number between 0-100 representing the percentage of progress. */
     progress?: number;
+    /** The size of the file. */
+    size?: number;
     /** A ref to the file item's HTMLLIElement. */
     ref?: Ref<HTMLLIElement>;
 }

package/lib/components/File/FileUploadItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FileUploadItem.d.ts","sourceRoot":"","sources":["../../../src/components/File/FileUploadItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+B,EAAE,EAAE,GAAG,EAAE,YAAY,EAAsB,MAAM,OAAO,CAAC;AAU/F,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAOtD,MAAM,WAAW,mBAAoB,SAAQ,SAAS;IACpD,wBAAwB;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,wDAAwD;IACxD,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,uKAAuK;IACvK,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IACzB,8IAA8I;IAC9I,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,mBAAmB,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC;IACvD,yGAAyG;IACzG,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,mBAAmB,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC;IACrD,yGAAyG;IACzG,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,mBAAmB,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC;IACxD,yGAAyG;IACzG,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,mBAAmB,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC;IACzD,yGAAyG;IACzG,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,mBAAmB,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC;IACvD;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,oIAAoI;IACpI,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gIAAgI;IAChI,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,8CAA8C;IAC9C,GAAG,CAAC,EAAE,GAAG,CAAC,aAAa,CAAC,CAAC;CAC1B;AAoBD,QAAA,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,GAAG,YAAY,CA6G1D,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"FileUploadItem.d.ts","sourceRoot":"","sources":["../../../src/components/File/FileUploadItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,EAAE,EACF,GAAG,EACH,YAAY,EAIb,MAAM,OAAO,CAAC;AAef,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAOtE,MAAM,WAAW,mBAAoB,SAAQ,SAAS,EAAE,cAAc;IACpE,wBAAwB;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,wDAAwD;IACxD,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,uKAAuK;IACvK,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IACzB,8IAA8I;IAC9I,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,mBAAmB,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC;IACvD,yGAAyG;IACzG,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,mBAAmB,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC;IACrD,yGAAyG;IACzG,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,mBAAmB,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC;IACxD,yGAAyG;IACzG,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,mBAAmB,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC;IACzD,yGAAyG;IACzG,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,mBAAmB,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC;IACvD;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,oIAAoI;IACpI,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gIAAgI;IAChI,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,4BAA4B;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,8CAA8C;IAC9C,GAAG,CAAC,EAAE,GAAG,CAAC,aAAa,CAAC,CAAC;CAC1B;AAuDD,QAAA,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,GAAG,YAAY,CA8H1D,CAAC;AAEF,eAAe,cAAc,CAAC"}