@pega/cosmos-react-core 3.0.0-dev.9.1 → 3.0.0-rc.10

package/lib/components/FieldGroup/FieldGroupList.js

@@ -6,23 +6,23 @@ 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 `
       padding: ${theme.base.spacing} 0 calc(2 * ${theme.base.spacing});
       border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};
-      margin-bottom: calc(2 * ${theme.base.spacing});
+      margin-block-end: calc(2 * ${theme.base.spacing});
 
       legend {
-        margin-bottom: -${theme.base.spacing};
-      }
-
-      & > * {
-        margin: ${theme.base.spacing} 0;
+        margin-block-end: 0;
       }
     `);
 StyledListItem.defaultProps = defaultThemeProp;

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,EACL,QAAQ;wBACN,CAAC,CAAC;4BACE;gCACE,EAAE,EAAE,QAAQ;gCACZ,IAAI,EAAE,CAAC,CAAC,QAAQ,CAAC;gCACjB,IAAI,EAAE,OAAO;gCACb,QAAQ,EAAE,IAAI;gCACd,OAAO,EAAE,QAAQ;oCACf,CAAC,CAAC,GAAG,EAAE;wCACH,QAAQ,CAAC,EAAE,CAAC,CAAC;oCACf,CAAC;oCACH,CAAC,CAAC,SAAS;6BACd;yBACF;wBACH,CAAC,CAAC,SAAS,YAGd,QAAQ,IArBJ,EAAE,CAsBQ,CAClB,CAAC;YACJ,CAAC,CAAC,EACD,KAAK,IAAI,CACR,MAAC,eAAe,IAAC,OAAO,EAAC,MAAM,EAAC,OAAO,EAAE,KAAK,aAC5C,KAAC,IAAI,IAAC,IAAI,EAAC,MAAM,GAAG,OAAE,CAAC,CAAC,KAAK,CAAC,IACd,CACnB,IACoB,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                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"]}
+{"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,UAAU,EAAE,EAAmB,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAE7E,YAAY,CAAC,QAAQ,CAAC,CAAC;AAcvB,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CACrC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CACZ,GAAG,CAAA;4BACqB,KAAK,CAAC,IAAI,CAAC,OAAO;;QAEtC,gBAAgB;;;KAGnB,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;mCACrC,KAAK,CAAC,IAAI,CAAC,OAAO;;;;;KAKhD,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,EACL,QAAQ;wBACN,CAAC,CAAC;4BACE;gCACE,EAAE,EAAE,QAAQ;gCACZ,IAAI,EAAE,CAAC,CAAC,QAAQ,CAAC;gCACjB,IAAI,EAAE,OAAO;gCACb,QAAQ,EAAE,IAAI;gCACd,OAAO,EAAE,QAAQ;oCACf,CAAC,CAAC,GAAG,EAAE;wCACH,QAAQ,CAAC,EAAE,CAAC,CAAC;oCACf,CAAC;oCACH,CAAC,CAAC,SAAS;6BACd;yBACF;wBACH,CAAC,CAAC,SAAS,YAGd,QAAQ,IArBJ,EAAE,CAsBQ,CAClB,CAAC;YACJ,CAAC,CAAC,EACD,KAAK,IAAI,CACR,MAAC,eAAe,IAAC,OAAO,EAAC,MAAM,EAAC,OAAO,EAAE,KAAK,aAC5C,KAAC,IAAI,IAAC,IAAI,EAAC,MAAM,GAAG,OAAE,CAAC,CAAC,KAAK,CAAC,IACd,CACnB,IACoB,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, 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-block-end: calc(2 * ${theme.base.spacing});\n\n      legend {\n        margin-block-end: 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,wGAG5B,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,EAOlB,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,wGAE5B,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,CAyCzE,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/lib/components/FieldValueList/FieldValueList.js

@@ -1,24 +1,45 @@
 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 { Fragment, useState, useLayoutEffect, useRef, useMemo, forwardRef } from 'react';
+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 { useBreakpoint, useConsolidatedRef, 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);
@@ -46,18 +67,31 @@ 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 }) }) }), exceedsMaxHeight && (_jsx(Button, { variant: 'link', onClick: () => setCollapsed(current => !current), children: collapsed ? t('show_more') : t('show_less') }))] }));
+    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') }))] }));
 };
-const FieldValueList = ({ fields, variant = 'inline', ...restProps }) => {
-    const Wrapper = variant === 'inline' ? Fragment : 'div';
-    return (_jsx(Grid, { ...restProps, container: {
-            cols: variant === 'inline' ? '16ch minmax(0, 1fr)' : 'minmax(0, 1fr)',
-            colGap: 2,
-            rowGap: 1
-        }, as: StyledFieldValueList, children: fields.map(({ id, name, value }) => {
-            const diplayValue = typeof value === 'string' ? _jsx(DynamicHeightValue, { children: value }) : value;
-            return (_jsxs(Wrapper, { children: [_jsx(StyledLabel, { as: StyledFieldName, children: name }), _jsx(StyledFieldValue, { children: value ? diplayValue : _jsx("span", { "aria-hidden": 'true', children: "\u2013\u2013" }) })] }, id ?? name));
-        }) }));
+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 = forwardRef((props, ref) => {
+    const { fields, variant = 'inline', ...restProps } = props;
+    const fieldValueListRef = useConsolidatedRef(ref);
+    const isXSContentWidthOrAbove = useBreakpoint('xs', {
+        breakpointRef: fieldValueListRef,
+        themeProp: 'content-width'
+    });
+    return (_jsx(Grid, { ...restProps, ref: fieldValueListRef, container: {
+            cols: ['inline', 'value-comparison'].includes(variant) && isXSContentWidthOrAbove
+                ? '16ch minmax(0, 1fr)'
+                : 'minmax(0, 1fr)',
+            colGap: variant !== 'value-comparison' ? 2 : 0,
+            rowGap: variant !== 'value-comparison' ? 1 : 0.5
+        }, as: StyledFieldValueList, variant: variant, children: fields.map(({ id, name, value, variant: fieldVariant }) => {
+            return (_jsx(FieldValueItem, { name: name, value: value, variant: (fieldVariant ?? variant) === 'stacked' || !isXSContentWidthOrAbove
+                    ? '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  overflow: auto;\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 minmax(0, 1fr)' : '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  Ref,\n  forwardRef\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 { useBreakpoint, useConsolidatedRef, 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`;\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> = forwardRef(\n  (props: FieldValueListProps, ref: Ref<HTMLDivElement>) => {\n    const { fields, variant = 'inline', ...restProps } = props;\n    const fieldValueListRef = useConsolidatedRef<HTMLDivElement>(ref);\n    const isXSContentWidthOrAbove = useBreakpoint('xs', {\n      breakpointRef: fieldValueListRef,\n      themeProp: 'content-width'\n    });\n\n    return (\n      <Grid\n        {...restProps}\n        ref={fieldValueListRef}\n        container={{\n          cols:\n            ['inline', 'value-comparison'].includes(variant) && isXSContentWidthOrAbove\n              ? '16ch minmax(0, 1fr)'\n              : 'minmax(0, 1fr)',\n          colGap: variant !== 'value-comparison' ? 2 : 0,\n          rowGap: variant !== 'value-comparison' ? 1 : 0.5\n        }}\n        as={StyledFieldValueList}\n        variant={variant}\n      >\n        {fields.map(({ id, name, value, variant: fieldVariant }) => {\n          return (\n            <FieldValueItem\n              name={name}\n              value={value}\n              variant={\n                (fieldVariant ?? variant) === 'stacked' || !isXSContentWidthOrAbove\n                  ? 'stacked'\n                  : 'inline'\n              }\n              key={id ?? name}\n            />\n          );\n        })}\n      </Grid>\n    );\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/FileItem.d.ts

@@ -1,10 +1,13 @@
 import { FC, Ref } from 'react';
 import { ForwardProps, BaseProps } from '../../types';
+import { FileVisualProps } from './FileVisual';
 export interface FileItemProps extends BaseProps {
     /** Name of the file. */
     name: string;
     /** Url of the file. */
     url: string;
+    /** A string to be used as an image src for a attachment thumbnail. Falls back to a provided icon or the default attachment icon. */
+    thumbnail?: FileVisualProps['thumbnail'];
     /** 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,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"}
+{"version":3,"file":"FileItem.d.ts","sourceRoot":"","sources":["../../../src/components/File/FileItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+B,EAAE,EAAE,GAAG,EAAyB,MAAM,OAAO,CAAC;AAGpF,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAOtD,OAAmB,EAAE,eAAe,EAAoB,MAAM,cAAc,CAAC;AAE7E,MAAM,WAAW,aAAc,SAAQ,SAAS;IAC9C,wBAAwB;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,uBAAuB;IACvB,GAAG,EAAE,MAAM,CAAC;IACZ,oIAAoI;IACpI,SAAS,CAAC,EAAE,eAAe,CAAC,WAAW,CAAC,CAAC;IACzC,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,CAsC9C,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/lib/components/File/FileItem.js

@@ -1,22 +1,23 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useCallback } from 'react';
+import { forwardRef, useCallback, useState } from 'react';
 import styled, { css } from 'styled-components';
 import { defaultThemeProp } from '../../theme';
 import Button, { StyledButton } from '../Button';
 import Grid from '../Grid';
-import { useDirection, useI18n } from '../../hooks';
+import { useI18n } from '../../hooks';
 import { getKindFromMimeType, getMimeTypeFromFile } from './utils';
 import FileVisual, { StyledFileVisual } from './FileVisual';
-const StyledFileItem = styled.div(({ theme: { base } }) => {
-    const { start, end } = useDirection();
+const StyledFileItem = styled.div(({ theme: { base, components } }) => {
     return css `
     border-radius: calc(0.5 * ${base['border-radius']});
 
     > ${StyledFileVisual} {
-      ${`border-top-${start}-radius`}: inherit;
-      ${`border-bottom-${start}-radius`}: inherit;
-      ${`border-top-${end}-radius`}: 0;
-      ${`border-bottom-${end}-radius`}: 0;
+      border-start-start-radius: inherit;
+      border-end-start-radius: inherit;
+      border-start-end-radius: 0;
+      border-end-end-radius: 0;
+      height: ${components.input.height};
+      width: ${components.input.height};
     }
 
     > ${StyledFileVisual} + ${StyledButton} {
@@ -26,10 +27,10 @@ const StyledFileItem = styled.div(({ theme: { base } }) => {
       opacity: 1;
       padding: 0 ${base.spacing};
       border-inline-start: 0;
-      ${`border-top-${start}-radius`}: 0;
-      ${`border-bottom-${start}-radius`}: 0;
-      ${`border-top-${end}-radius`}: inherit;
-      ${`border-bottom-${end}-radius`}: inherit;
+      border-start-start-radius: 0;
+      border-end-start-radius: 0;
+      border-start-end-radius: inherit;
+      border-end-end-radius: inherit;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
@@ -38,14 +39,17 @@ const StyledFileItem = styled.div(({ theme: { base } }) => {
 });
 StyledFileItem.defaultProps = defaultThemeProp;
 const FileItem = forwardRef((props, ref) => {
-    const { name, url, onPreview, onDownload, ...restProps } = props;
+    const { name, url, thumbnail, onPreview, onDownload, ...restProps } = props;
+    const [thumbnailError, setThumbnailError] = useState(false);
     const t = useI18n();
     const onDownloadClick = useCallback(() => {
         onDownload?.(url);
     }, [url, onDownload]);
     const type = getMimeTypeFromFile(url);
     const text = name || url;
-    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}` }), _jsx(Button, { ...restProps, variant: 'text', disabled: !onDownload, onClick: onDownloadClick, "aria-label": `${t('download')}: ${text}`, children: text })] }));
+    return (_jsxs(Grid, { as: StyledFileItem, container: { cols: 'auto 1fr' }, ref: ref, children: [_jsx(FileVisual, { type: getKindFromMimeType(type ?? ''), thumbnail: thumbnailError ? undefined : thumbnail, onThumbnailError: () => {
+                    setThumbnailError(true);
+                }, disabled: !onPreview, onClick: () => onPreview?.(url), "aria-label": `${t('preview')}: ${text}` }), _jsx(Button, { ...restProps, variant: 'text', disabled: !onDownload, onClick: onDownloadClick, "aria-label": `${t('download')}: ${text}`, children: text })] }));
 });
 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;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,GACtC,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,GACE,IACJ,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"]}
+{"version":3,"file":"FileItem.js","sourceRoot":"","sources":["../../../src/components/File/FileItem.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA4B,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACpF,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,OAAO,EAAE,MAAM,aAAa,CAAC;AAEtC,OAAO,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AACnE,OAAO,UAAU,EAAE,EAAmB,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAiB7E,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE,EAAE,EAAE,EAAE;IACpE,OAAO,GAAG,CAAA;gCACoB,IAAI,CAAC,eAAe,CAAC;;QAE7C,gBAAgB;;;;;gBAKR,UAAU,CAAC,KAAK,CAAC,MAAM;eACxB,UAAU,CAAC,KAAK,CAAC,MAAM;;;QAG9B,gBAAgB,MAAM,YAAY;;gCAEV,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;0BACjC,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC;;mBAEzC,IAAI,CAAC,OAAO;;;;;;;;;;GAU5B,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,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC5D,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,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EACjD,gBAAgB,EAAE,GAAG,EAAE;oBACrB,iBAAiB,CAAC,IAAI,CAAC,CAAC;gBAC1B,CAAC,EACD,QAAQ,EAAE,CAAC,SAAS,EACpB,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,EAAE,CAAC,GAAG,CAAC,gBACnB,GAAG,CAAC,CAAC,SAAS,CAAC,KAAK,IAAI,EAAE,GACtC,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,GACE,IACJ,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,QAAQ,CAAC","sourcesContent":["import { forwardRef, PropsWithoutRef, FC, Ref, useCallback, useState } 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 { useI18n } from '../../hooks';\n\nimport { getKindFromMimeType, getMimeTypeFromFile } from './utils';\nimport FileVisual, { FileVisualProps, 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  /** A string to be used as an image src for a attachment thumbnail. Falls back to a provided icon or the default attachment icon. */\n  thumbnail?: FileVisualProps['thumbnail'];\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, components } }) => {\n  return css`\n    border-radius: calc(0.5 * ${base['border-radius']});\n\n    > ${StyledFileVisual} {\n      border-start-start-radius: inherit;\n      border-end-start-radius: inherit;\n      border-start-end-radius: 0;\n      border-end-end-radius: 0;\n      height: ${components.input.height};\n      width: ${components.input.height};\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-start-start-radius: 0;\n      border-end-start-radius: 0;\n      border-start-end-radius: inherit;\n      border-end-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 [thumbnailError, setThumbnailError] = useState(false);\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          thumbnail={thumbnailError ? undefined : thumbnail}\n          onThumbnailError={() => {\n            setThumbnailError(true);\n          }}\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/utils.d.ts

@@ -1,4 +1,4 @@
-export declare type AttachmentType = 'generic' | 'image' | 'video' | 'audio' | 'pdf' | 'archive' | 'text' | 'message' | 'link' | 'pdf' | 'database' | 'document' | 'spreadsheet' | 'presentation';
+export declare type AttachmentType = 'generic' | 'image' | 'video' | 'audio' | 'pdf' | 'archive' | 'text' | 'message' | 'link' | 'database' | 'document' | 'spreadsheet' | 'presentation';
 /**
  * Returns approximately correct mime type for given file based upon the extension. Only few extensions are recognized.
  * @param fileName file name or url to discover the mime type from.

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

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/File/utils.ts"],"names":[],"mappings":"AAEA,oBAAY,cAAc,GACtB,SAAS,GACT,OAAO,GACP,OAAO,GACP,OAAO,GACP,KAAK,GACL,SAAS,GACT,MAAM,GACN,SAAS,GACT,MAAM,GACN,KAAK,GACL,UAAU,GACV,UAAU,GACV,aAAa,GACb,cAAc,CAAC;AAEnB;;;;GAIG;AACH,eAAO,MAAM,mBAAmB,aAAc,MAAM,KAAG,MAAM,GAAG,SAG/D,CAAC;AAEF,eAAO,MAAM,mBAAmB,aAAc,MAAM,KAAG,cActD,CAAC"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/File/utils.ts"],"names":[],"mappings":"AAEA,oBAAY,cAAc,GACtB,SAAS,GACT,OAAO,GACP,OAAO,GACP,OAAO,GACP,KAAK,GACL,SAAS,GACT,MAAM,GACN,SAAS,GACT,MAAM,GACN,UAAU,GACV,UAAU,GACV,aAAa,GACb,cAAc,CAAC;AAEnB;;;;GAIG;AACH,eAAO,MAAM,mBAAmB,aAAc,MAAM,KAAG,MAAM,GAAG,SAG/D,CAAC;AAEF,eAAO,MAAM,mBAAmB,aAAc,MAAM,KAAG,cActD,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/components/File/utils.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,kBAAkB,CAAC;AAkBzC;;;;GAIG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,QAAgB,EAAsB,EAAE;IAC1E,MAAM,OAAO,GAAG,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,IAAI,QAAQ,CAAC;IACtD,OAAQ,SAAoC,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC,CAAC;AACtE,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,QAAgB,EAAkB,EAAE;IACtE,IAAI,IAAI,GAAmB,SAAS,CAAC;IACrC,IAAI,QAAQ,CAAC,UAAU,CAAC,QAAQ,CAAC;QAAE,IAAI,GAAG,OAAO,CAAC;IAClD,IAAI,QAAQ,CAAC,UAAU,CAAC,QAAQ,CAAC;QAAE,IAAI,GAAG,OAAO,CAAC;IAClD,IAAI,QAAQ,CAAC,UAAU,CAAC,QAAQ,CAAC;QAAE,IAAI,GAAG,OAAO,CAAC;IAClD,IAAI,QAAQ,CAAC,UAAU,CAAC,OAAO,CAAC;QAAE,IAAI,GAAG,MAAM,CAAC;IAChD,IAAI,QAAQ,CAAC,UAAU,CAAC,UAAU,CAAC;QAAE,IAAI,GAAG,SAAS,CAAC;IACtD,IAAI,QAAQ,CAAC,QAAQ,CAAC,MAAM,CAAC;QAAE,IAAI,GAAG,KAAK,CAAC;IAC5C,IAAI,QAAQ,CAAC,KAAK,CAAC,iCAAiC,CAAC;QAAE,IAAI,GAAG,cAAc,CAAC;IAC7E,IAAI,QAAQ,CAAC,KAAK,CAAC,wBAAwB,CAAC;QAAE,IAAI,GAAG,aAAa,CAAC;IACnE,IAAI,QAAQ,CAAC,KAAK,CAAC,kBAAkB,CAAC;QAAE,IAAI,GAAG,UAAU,CAAC;IAC1D,IAAI,QAAQ,CAAC,KAAK,CAAC,iBAAiB,CAAC;QAAE,IAAI,GAAG,UAAU,CAAC;IACzD,IAAI,QAAQ,CAAC,KAAK,CAAC,YAAY,CAAC;QAAE,IAAI,GAAG,SAAS,CAAC;IACnD,OAAO,IAAI,CAAC;AACd,CAAC,CAAC","sourcesContent":["import mimeTypes from './mimeTypes.json';\n\nexport type AttachmentType =\n  | 'generic'\n  | 'image'\n  | 'video'\n  | 'audio'\n  | 'pdf'\n  | 'archive'\n  | 'text'\n  | 'message'\n  | 'link'\n  | 'pdf'\n  | 'database'\n  | 'document'\n  | 'spreadsheet'\n  | 'presentation';\n\n/**\n * Returns approximately correct mime type for given file based upon the extension. Only few extensions are recognized.\n * @param fileName file name or url to discover the mime type from.\n * @returns mime type associated to the file.\n */\nexport const getMimeTypeFromFile = (fileName: string): string | undefined => {\n  const fileExt = fileName.split('.').pop() ?? fileName;\n  return (mimeTypes as Record<string, string>)[fileExt.toLowerCase()];\n};\n\nexport const getKindFromMimeType = (mimeType: string): AttachmentType => {\n  let type: AttachmentType = 'generic';\n  if (mimeType.startsWith('video/')) type = 'video';\n  if (mimeType.startsWith('audio/')) type = 'audio';\n  if (mimeType.startsWith('image/')) type = 'image';\n  if (mimeType.startsWith('text/')) type = 'text';\n  if (mimeType.startsWith('message/')) type = 'message';\n  if (mimeType.endsWith('/pdf')) type = 'pdf';\n  if (mimeType.match(/powerpoint|presentation|impress/)) type = 'presentation';\n  if (mimeType.match(/excel|spreadsheet|calc/)) type = 'spreadsheet';\n  if (mimeType.match(/word|writer|text/)) type = 'document';\n  if (mimeType.match(/access|database/)) type = 'database';\n  if (mimeType.match(/zip|rar|7z/)) type = 'archive';\n  return type;\n};\n"]}
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/components/File/utils.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,kBAAkB,CAAC;AAiBzC;;;;GAIG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,QAAgB,EAAsB,EAAE;IAC1E,MAAM,OAAO,GAAG,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,IAAI,QAAQ,CAAC;IACtD,OAAQ,SAAoC,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC,CAAC;AACtE,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,QAAgB,EAAkB,EAAE;IACtE,IAAI,IAAI,GAAmB,SAAS,CAAC;IACrC,IAAI,QAAQ,CAAC,UAAU,CAAC,QAAQ,CAAC;QAAE,IAAI,GAAG,OAAO,CAAC;IAClD,IAAI,QAAQ,CAAC,UAAU,CAAC,QAAQ,CAAC;QAAE,IAAI,GAAG,OAAO,CAAC;IAClD,IAAI,QAAQ,CAAC,UAAU,CAAC,QAAQ,CAAC;QAAE,IAAI,GAAG,OAAO,CAAC;IAClD,IAAI,QAAQ,CAAC,UAAU,CAAC,OAAO,CAAC;QAAE,IAAI,GAAG,MAAM,CAAC;IAChD,IAAI,QAAQ,CAAC,UAAU,CAAC,UAAU,CAAC;QAAE,IAAI,GAAG,SAAS,CAAC;IACtD,IAAI,QAAQ,CAAC,QAAQ,CAAC,MAAM,CAAC;QAAE,IAAI,GAAG,KAAK,CAAC;IAC5C,IAAI,QAAQ,CAAC,KAAK,CAAC,iCAAiC,CAAC;QAAE,IAAI,GAAG,cAAc,CAAC;IAC7E,IAAI,QAAQ,CAAC,KAAK,CAAC,wBAAwB,CAAC;QAAE,IAAI,GAAG,aAAa,CAAC;IACnE,IAAI,QAAQ,CAAC,KAAK,CAAC,kBAAkB,CAAC;QAAE,IAAI,GAAG,UAAU,CAAC;IAC1D,IAAI,QAAQ,CAAC,KAAK,CAAC,iBAAiB,CAAC;QAAE,IAAI,GAAG,UAAU,CAAC;IACzD,IAAI,QAAQ,CAAC,KAAK,CAAC,YAAY,CAAC;QAAE,IAAI,GAAG,SAAS,CAAC;IACnD,OAAO,IAAI,CAAC;AACd,CAAC,CAAC","sourcesContent":["import mimeTypes from './mimeTypes.json';\n\nexport type AttachmentType =\n  | 'generic'\n  | 'image'\n  | 'video'\n  | 'audio'\n  | 'pdf'\n  | 'archive'\n  | 'text'\n  | 'message'\n  | 'link'\n  | 'database'\n  | 'document'\n  | 'spreadsheet'\n  | 'presentation';\n\n/**\n * Returns approximately correct mime type for given file based upon the extension. Only few extensions are recognized.\n * @param fileName file name or url to discover the mime type from.\n * @returns mime type associated to the file.\n */\nexport const getMimeTypeFromFile = (fileName: string): string | undefined => {\n  const fileExt = fileName.split('.').pop() ?? fileName;\n  return (mimeTypes as Record<string, string>)[fileExt.toLowerCase()];\n};\n\nexport const getKindFromMimeType = (mimeType: string): AttachmentType => {\n  let type: AttachmentType = 'generic';\n  if (mimeType.startsWith('video/')) type = 'video';\n  if (mimeType.startsWith('audio/')) type = 'audio';\n  if (mimeType.startsWith('image/')) type = 'image';\n  if (mimeType.startsWith('text/')) type = 'text';\n  if (mimeType.startsWith('message/')) type = 'message';\n  if (mimeType.endsWith('/pdf')) type = 'pdf';\n  if (mimeType.match(/powerpoint|presentation|impress/)) type = 'presentation';\n  if (mimeType.match(/excel|spreadsheet|calc/)) type = 'spreadsheet';\n  if (mimeType.match(/word|writer|text/)) type = 'document';\n  if (mimeType.match(/access|database/)) type = 'database';\n  if (mimeType.match(/zip|rar|7z/)) type = 'archive';\n  return type;\n};\n"]}

package/lib/components/Flex/Flex.d.ts

@@ -1,5 +1,5 @@
 import { FunctionComponent, Ref, ReactNode } from 'react';
-import { ForwardProps, BaseProps, AsProp } from '../../types';
+import { ForwardProps, BaseProps, AsProp, RequireAtLeastOne } from '../../types';
 export interface FlexContainerProps {
     /** Display as inline-flex. */
     inline?: boolean;
@@ -46,27 +46,28 @@ export interface FlexItemProps {
     /** [flex-basis](https://css-tricks.com/almanac/properties/f/flex-basis/) */
     basis?: string;
 }
-interface BaseFlexProps {
+export interface BaseFlexProps {
     container?: FlexContainerProps | true;
     item?: FlexItemProps;
 }
-export interface FlexProps extends BaseFlexProps, BaseProps, AsProp {
+declare type BreakpointFlexProps = RequireAtLeastOne<BaseFlexProps, 'container' | 'item'>;
+export declare type FlexProps = RequireAtLeastOne<BaseFlexProps & BaseProps & AsProp & {
     /** Content for either a container or item. */
     children?: ReactNode;
     /** Ref for the flex element. */
     ref?: Ref<Element>;
     /** Override props at extra small screen sizes and above. */
-    xs?: BaseFlexProps;
+    xs?: BreakpointFlexProps;
     /** Override props at small screen sizes and above. */
-    sm?: BaseFlexProps;
+    sm?: BreakpointFlexProps;
     /** Override props at medium screen sizes and above. */
-    md?: BaseFlexProps;
+    md?: BreakpointFlexProps;
     /** Override props at large screen sizes and above. */
-    lg?: BaseFlexProps;
+    lg?: BreakpointFlexProps;
     /** Override props at extra large screen sizes and above. */
-    xl?: BaseFlexProps;
-}
-export declare const StyledFlex: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, FlexProps, never>;
+    xl?: BreakpointFlexProps;
+}, 'container' | 'item' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'>;
+export declare const StyledFlex: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {} & FlexProps, never>;
 declare const Flex: FunctionComponent<FlexProps & ForwardProps>;
 export default Flex;
 //# sourceMappingURL=Flex.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Flex.d.ts","sourceRoot":"","sources":["../../../src/components/Flex/Flex.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAA+B,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvF,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAG9D,MAAM,WAAW,kBAAkB;IACjC,8BAA8B;IAC9B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,yHAAyH;IACzH,GAAG,CAAC,EACA,MAAM,GACN,CAAC,kBAAkB,EAAE,MAAM,CAAC,GAC5B,CAAC,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,CAAC,GACtC,CAAC,GAAG,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,GAChD,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,CAAC,CAAC;IAC/D,oFAAoF;IACpF,SAAS,CAAC,EAAE,KAAK,GAAG,aAAa,GAAG,QAAQ,GAAG,gBAAgB,CAAC;IAChE,0FAA0F;IAC1F,OAAO,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,SAAS,GAAG,QAAQ,GAAG,QAAQ,GAAG,SAAS,CAAC;IACnF,0EAA0E;IAC1E,IAAI,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,cAAc,CAAC;IAC1C,+EAA+E;IAC/E,UAAU,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,UAAU,CAAC;IACjE,kFAAkF;IAClF,YAAY,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAC;IAC7E;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,aAAa;IAC5B,4EAA4E;IAC5E,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,UAAU,GAAG,QAAQ,GAAG,SAAS,CAAC;IACzE,0EAA0E;IAC1E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,8EAA8E;IAC9E,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,4EAA4E;IAC5E,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,UAAU,aAAa;IACrB,SAAS,CAAC,EAAE,kBAAkB,GAAG,IAAI,CAAC;IACtC,IAAI,CAAC,EAAE,aAAa,CAAC;CACtB;AAED,MAAM,WAAW,SAAU,SAAQ,aAAa,EAAE,SAAS,EAAE,MAAM;IACjE,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,gCAAgC;IAChC,GAAG,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC,CAAC;IACnB,4DAA4D;IAC5D,EAAE,CAAC,EAAE,aAAa,CAAC;IACnB,sDAAsD;IACtD,EAAE,CAAC,EAAE,aAAa,CAAC;IACnB,uDAAuD;IACvD,EAAE,CAAC,EAAE,aAAa,CAAC;IACnB,sDAAsD;IACtD,EAAE,CAAC,EAAE,aAAa,CAAC;IACnB,4DAA4D;IAC5D,EAAE,CAAC,EAAE,aAAa,CAAC;CACpB;AA6HD,eAAO,MAAM,UAAU,gHAqCtB,CAAC;AAIF,QAAA,MAAM,IAAI,EAAE,iBAAiB,CAAC,SAAS,GAAG,YAAY,CAIrD,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Flex.d.ts","sourceRoot":"","sources":["../../../src/components/Flex/Flex.tsx"],"names":[],"mappings":"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"}

package/lib/components/Flex/Flex.js.map

@@ -1 +1 @@
-{"version":3,"file":"Flex.js","sourceRoot":"","sources":["../../../src/components/Flex/Flex.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionComponent, forwardRef, PropsWithoutRef, Ref, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { ForwardProps, BaseProps, AsProp } from '../../types';\nimport { defaultThemeProp } from '../../theme';\n\nexport interface FlexContainerProps {\n  /** Display as inline-flex. */\n  inline?: boolean;\n  /** Padding on the container represented as a multiplier or set of multipliers to the base spacing value in the theme. */\n  pad?:\n    | number\n    | [topRightBottomLeft: number]\n    | [topBottom: number, rightLeft: number]\n    | [top: number, rightLeft: number, bottom: number]\n    | [top: number, right: number, bottom: number, left: number];\n  /** [flex-direction](https://css-tricks.com/almanac/properties/f/flex-direction/) */\n  direction?: 'row' | 'row-reverse' | 'column' | 'column-reverse';\n  /** [justify-content](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content) */\n  justify?: 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly' | 'stretch';\n  /** [flex-wrap](https://css-tricks.com/almanac/properties/f/flex-wrap/) */\n  wrap?: 'wrap' | 'nowrap' | 'wrap-reverse';\n  /** [align-items](https://css-tricks.com/almanac/properties/a/align-items/). */\n  alignItems?: 'stretch' | 'start' | 'end' | 'center' | 'baseline';\n  /** [align-content](https://css-tricks.com/almanac/properties/a/align-content/) */\n  alignContent?: 'start' | 'end' | 'center' | 'between' | 'around' | 'stretch';\n  /**\n   * Defines how much equal space to place between items represented as a multiplier to the base spacing value in the theme.\n   * @deprecated\n   */\n  itemGap?: number;\n  /**\n   * Defines how much equal space to place between columns represented as a multiplier to the base spacing value in the theme.\n   * [column-gap](https://css-tricks.com/almanac/properties/c/column-gap/)\n   */\n  colGap?: number;\n  /**\n   * Defines how much equal space to place between rows represented as a multiplier to the base spacing value in the theme.\n   * [row-gap](https://css-tricks.com/almanac/properties/r/row-gap/)\n   */\n  rowGap?: number;\n  /**\n   * Defines how much equal space to place between both rows and columns represented as a multiplier to the base spacing value in the theme.\n   * [gap](https://css-tricks.com/almanac/properties/g/gap/)\n   */\n  gap?: number;\n}\n\nexport interface FlexItemProps {\n  /** [align-self](https://css-tricks.com/almanac/properties/a/align-self/) */\n  alignSelf?: 'auto' | 'start' | 'end' | 'baseline' | 'center' | 'stretch';\n  /** [flex-grow](https://css-tricks.com/almanac/properties/f/flex-grow/) */\n  grow?: number;\n  /** [flex-shrink](https://css-tricks.com/almanac/properties/f/flex-shrink/) */\n  shrink?: number;\n  /** [flex-basis](https://css-tricks.com/almanac/properties/f/flex-basis/) */\n  basis?: string;\n}\n\ninterface BaseFlexProps {\n  container?: FlexContainerProps | true;\n  item?: FlexItemProps;\n}\n\nexport interface FlexProps extends BaseFlexProps, BaseProps, AsProp {\n  /** Content for either a container or item. */\n  children?: ReactNode;\n  /** Ref for the flex element. */\n  ref?: Ref<Element>;\n  /** Override props at extra small screen sizes and above. */\n  xs?: BaseFlexProps;\n  /** Override props at small screen sizes and above. */\n  sm?: BaseFlexProps;\n  /** Override props at medium screen sizes and above. */\n  md?: BaseFlexProps;\n  /** Override props at large screen sizes and above. */\n  lg?: BaseFlexProps;\n  /** Override props at extra large screen sizes and above. */\n  xl?: BaseFlexProps;\n}\n\nconst prefix = (value: string) => {\n  if (['between', 'around', 'evenly'].includes(value)) return `space-${value}`;\n  if (['start', 'end'].includes(value)) return `flex-${value}`;\n  return value;\n};\n\nconst getContainerStyles = (container: FlexProps['container']) => {\n  if (!container) return '';\n\n  if (container === true) {\n    return css`\n      display: flex;\n    `;\n  }\n\n  if (container && typeof container === 'object') {\n    const isRow = !container.direction || container.direction.includes('row');\n    const isReverse = container.direction && container.direction.includes('reverse');\n\n    return css`\n      display: ${container.inline ? 'inline-flex' : 'flex'};\n\n      ${container.pad !== undefined &&\n      css`\n        /* stylelint-disable function-name-case, function-whitespace-after */\n        padding: ${({\n          theme: {\n            base: { spacing }\n          }\n        }) =>\n          (Array.isArray(container.pad) ? container.pad : [container.pad])\n            .map(p => `calc(${p} * ${spacing})`)\n            .join(' ')};\n\n        /* stylelint-enable function-name-case, function-whitespace-after */\n      `}\n\n      ${container.direction &&\n      css`\n        flex-direction: ${container.direction};\n      `}\n\n      ${container.justify &&\n      css`\n        justify-content: ${prefix(container.justify)};\n      `}\n\n      ${container.wrap &&\n      css`\n        flex-wrap: ${container.wrap};\n      `}\n\n      ${container.alignItems &&\n      css`\n        align-items: ${prefix(container.alignItems)};\n      `}\n\n      ${container.alignContent &&\n      css`\n        align-content: ${prefix(container.alignContent)};\n      `}\n\n      ${container.itemGap &&\n      css`\n          > * {\n            margin-${isRow ? 'inline-start' : 'block-start'}: calc(${container.itemGap} * ${props =>\n        props.theme.base.spacing});\n            ${isReverse ? ':last-child' : ':first-child'} {\n              margin-${isRow ? 'inline-start' : 'block-start'}: 0;\n            }\n          }\n        `}\n\n      ${container.gap !== undefined &&\n      css`\n        gap: calc(${container.gap} * ${props => props.theme.base.spacing});\n      `}\n\n      ${container.colGap !== undefined &&\n      css`\n        column-gap: calc(${container.colGap} * ${props => props.theme.base.spacing});\n      `}\n\n      ${container.rowGap !== undefined &&\n      css`\n        row-gap: calc(${container.rowGap} * ${props => props.theme.base.spacing});\n      `}\n    `;\n  }\n};\n\nconst getItemStyles = (item: FlexProps['item']) => {\n  return css`\n    ${item &&\n    css`\n      max-width: 100%;\n      min-width: 0;\n\n      ${item.grow !== undefined &&\n      css`\n        flex-grow: ${item.grow};\n      `}\n\n      ${item.shrink !== undefined &&\n      css`\n        flex-shrink: ${item.shrink};\n      `}\n\n      ${item.alignSelf &&\n      css`\n        align-self: ${prefix(item.alignSelf)};\n      `}\n\n      ${item.basis &&\n      css`\n        flex-basis: ${item.basis};\n      `}\n    `}\n  `;\n};\n\nconst breakpointOrder = ['xs', 'sm', 'md', 'lg', 'xl'] as const;\n\nexport const StyledFlex = styled.div<FlexProps>(\n  ({\n    container,\n    item,\n    theme: {\n      base: { breakpoints: themeBreakpoints }\n    },\n    xs,\n    sm,\n    md,\n    lg,\n    xl\n  }) => {\n    const breakpoints = {\n      xs,\n      sm,\n      md,\n      lg,\n      xl\n    };\n\n    return css`\n      ${getContainerStyles(container)}\n      ${getItemStyles(item)}\n\n    ${breakpointOrder.map(\n        breakpoint =>\n          breakpoints[breakpoint] &&\n          css`\n            @media screen and (min-width: ${themeBreakpoints[breakpoint]}) {\n              ${getContainerStyles(breakpoints[breakpoint]?.container)}\n              ${getItemStyles(breakpoints[breakpoint]?.item)}\n            }\n          `\n      )}\n    `;\n  }\n);\n\nStyledFlex.defaultProps = defaultThemeProp;\n\nconst Flex: FunctionComponent<FlexProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<FlexProps>, ref: FlexProps['ref']) => {\n    return <StyledFlex {...props} ref={ref} />;\n  }\n);\n\nexport default Flex;\n"]}
+{"version":3,"file":"Flex.js","sourceRoot":"","sources":["../../../src/components/Flex/Flex.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionComponent, forwardRef, PropsWithoutRef, Ref, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { ForwardProps, BaseProps, AsProp, RequireAtLeastOne } from '../../types';\nimport { defaultThemeProp } from '../../theme';\n\nexport interface FlexContainerProps {\n  /** Display as inline-flex. */\n  inline?: boolean;\n  /** Padding on the container represented as a multiplier or set of multipliers to the base spacing value in the theme. */\n  pad?:\n    | number\n    | [topRightBottomLeft: number]\n    | [topBottom: number, rightLeft: number]\n    | [top: number, rightLeft: number, bottom: number]\n    | [top: number, right: number, bottom: number, left: number];\n  /** [flex-direction](https://css-tricks.com/almanac/properties/f/flex-direction/) */\n  direction?: 'row' | 'row-reverse' | 'column' | 'column-reverse';\n  /** [justify-content](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content) */\n  justify?: 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly' | 'stretch';\n  /** [flex-wrap](https://css-tricks.com/almanac/properties/f/flex-wrap/) */\n  wrap?: 'wrap' | 'nowrap' | 'wrap-reverse';\n  /** [align-items](https://css-tricks.com/almanac/properties/a/align-items/). */\n  alignItems?: 'stretch' | 'start' | 'end' | 'center' | 'baseline';\n  /** [align-content](https://css-tricks.com/almanac/properties/a/align-content/) */\n  alignContent?: 'start' | 'end' | 'center' | 'between' | 'around' | 'stretch';\n  /**\n   * Defines how much equal space to place between items represented as a multiplier to the base spacing value in the theme.\n   * @deprecated\n   */\n  itemGap?: number;\n  /**\n   * Defines how much equal space to place between columns represented as a multiplier to the base spacing value in the theme.\n   * [column-gap](https://css-tricks.com/almanac/properties/c/column-gap/)\n   */\n  colGap?: number;\n  /**\n   * Defines how much equal space to place between rows represented as a multiplier to the base spacing value in the theme.\n   * [row-gap](https://css-tricks.com/almanac/properties/r/row-gap/)\n   */\n  rowGap?: number;\n  /**\n   * Defines how much equal space to place between both rows and columns represented as a multiplier to the base spacing value in the theme.\n   * [gap](https://css-tricks.com/almanac/properties/g/gap/)\n   */\n  gap?: number;\n}\n\nexport interface FlexItemProps {\n  /** [align-self](https://css-tricks.com/almanac/properties/a/align-self/) */\n  alignSelf?: 'auto' | 'start' | 'end' | 'baseline' | 'center' | 'stretch';\n  /** [flex-grow](https://css-tricks.com/almanac/properties/f/flex-grow/) */\n  grow?: number;\n  /** [flex-shrink](https://css-tricks.com/almanac/properties/f/flex-shrink/) */\n  shrink?: number;\n  /** [flex-basis](https://css-tricks.com/almanac/properties/f/flex-basis/) */\n  basis?: string;\n}\n\nexport interface BaseFlexProps {\n  container?: FlexContainerProps | true;\n  item?: FlexItemProps;\n}\n\ntype BreakpointFlexProps = RequireAtLeastOne<BaseFlexProps, 'container' | 'item'>;\n\nexport type FlexProps = RequireAtLeastOne<\n  BaseFlexProps &\n    BaseProps &\n    AsProp & {\n      /** Content for either a container or item. */\n      children?: ReactNode;\n      /** Ref for the flex element. */\n      ref?: Ref<Element>;\n      /** Override props at extra small screen sizes and above. */\n      xs?: BreakpointFlexProps;\n      /** Override props at small screen sizes and above. */\n      sm?: BreakpointFlexProps;\n      /** Override props at medium screen sizes and above. */\n      md?: BreakpointFlexProps;\n      /** Override props at large screen sizes and above. */\n      lg?: BreakpointFlexProps;\n      /** Override props at extra large screen sizes and above. */\n      xl?: BreakpointFlexProps;\n    },\n  'container' | 'item' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'\n>;\n\nconst prefix = (value: string) => {\n  if (['between', 'around', 'evenly'].includes(value)) return `space-${value}`;\n  if (['start', 'end'].includes(value)) return `flex-${value}`;\n  return value;\n};\n\nconst getContainerStyles = (container: FlexProps['container']) => {\n  if (!container) return '';\n\n  if (container === true) {\n    return css`\n      display: flex;\n    `;\n  }\n\n  if (container && typeof container === 'object') {\n    const isRow = !container.direction || container.direction.includes('row');\n    const isReverse = container.direction && container.direction.includes('reverse');\n\n    return css`\n      display: ${container.inline ? 'inline-flex' : 'flex'};\n\n      ${container.pad !== undefined &&\n      css`\n        /* stylelint-disable function-name-case, function-whitespace-after */\n        padding: ${({\n          theme: {\n            base: { spacing }\n          }\n        }) =>\n          (Array.isArray(container.pad) ? container.pad : [container.pad])\n            .map(p => `calc(${p} * ${spacing})`)\n            .join(' ')};\n\n        /* stylelint-enable function-name-case, function-whitespace-after */\n      `}\n\n      ${container.direction &&\n      css`\n        flex-direction: ${container.direction};\n      `}\n\n      ${container.justify &&\n      css`\n        justify-content: ${prefix(container.justify)};\n      `}\n\n      ${container.wrap &&\n      css`\n        flex-wrap: ${container.wrap};\n      `}\n\n      ${container.alignItems &&\n      css`\n        align-items: ${prefix(container.alignItems)};\n      `}\n\n      ${container.alignContent &&\n      css`\n        align-content: ${prefix(container.alignContent)};\n      `}\n\n      ${container.itemGap &&\n      css`\n          > * {\n            margin-${isRow ? 'inline-start' : 'block-start'}: calc(${container.itemGap} * ${props =>\n        props.theme.base.spacing});\n            ${isReverse ? ':last-child' : ':first-child'} {\n              margin-${isRow ? 'inline-start' : 'block-start'}: 0;\n            }\n          }\n        `}\n\n      ${container.gap !== undefined &&\n      css`\n        gap: calc(${container.gap} * ${props => props.theme.base.spacing});\n      `}\n\n      ${container.colGap !== undefined &&\n      css`\n        column-gap: calc(${container.colGap} * ${props => props.theme.base.spacing});\n      `}\n\n      ${container.rowGap !== undefined &&\n      css`\n        row-gap: calc(${container.rowGap} * ${props => props.theme.base.spacing});\n      `}\n    `;\n  }\n};\n\nconst getItemStyles = (item: FlexProps['item']) => {\n  return css`\n    ${item &&\n    css`\n      max-width: 100%;\n      min-width: 0;\n\n      ${item.grow !== undefined &&\n      css`\n        flex-grow: ${item.grow};\n      `}\n\n      ${item.shrink !== undefined &&\n      css`\n        flex-shrink: ${item.shrink};\n      `}\n\n      ${item.alignSelf &&\n      css`\n        align-self: ${prefix(item.alignSelf)};\n      `}\n\n      ${item.basis &&\n      css`\n        flex-basis: ${item.basis};\n      `}\n    `}\n  `;\n};\n\nconst breakpointOrder = ['xs', 'sm', 'md', 'lg', 'xl'] as const;\n\nexport const StyledFlex = styled.div<FlexProps>(\n  ({\n    container,\n    item,\n    theme: {\n      base: { breakpoints: themeBreakpoints }\n    },\n    xs,\n    sm,\n    md,\n    lg,\n    xl\n  }) => {\n    const breakpoints = {\n      xs,\n      sm,\n      md,\n      lg,\n      xl\n    };\n\n    return css`\n      ${getContainerStyles(container)}\n      ${getItemStyles(item)}\n\n    ${breakpointOrder.map(\n        breakpoint =>\n          breakpoints[breakpoint] &&\n          css`\n            @media screen and (min-width: ${themeBreakpoints[breakpoint]}) {\n              ${getContainerStyles(breakpoints[breakpoint]?.container)}\n              ${getItemStyles(breakpoints[breakpoint]?.item)}\n            }\n          `\n      )}\n    `;\n  }\n);\n\nStyledFlex.defaultProps = defaultThemeProp;\n\nconst Flex: FunctionComponent<FlexProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<FlexProps>, ref: FlexProps['ref']) => {\n    return <StyledFlex {...props} ref={ref} />;\n  }\n);\n\nexport default Flex;\n"]}

package/lib/components/Form/Form.d.ts

@@ -1,21 +1,10 @@
-import { FC, ReactNode, Ref } from 'react';
-import { BaseProps, ForwardProps } from '../../types';
-export interface FormProps extends BaseProps {
+import { FC } from 'react';
+import { ForwardProps, OmitStrict } from '../../types';
+import { type BaseFormProps } from '../MultiStepForm/MultiStepForm.types';
+export interface FormProps extends OmitStrict<BaseFormProps, 'content'> {
     /** The Form content. Recommended composing form elements within a layout template such as Grid or Flex as the only child. */
-    children: ReactNode;
-    /** Region for Form Actions. */
-    actions?: ReactNode;
-    /** The heading of the form. */
-    heading?: string;
-    /** A description of the form to be displayed above the controls. */
-    description?: string;
-    /** Region for Banners above the Form. */
-    banners?: ReactNode;
-    /** Ref forwarded to the wrapping element. */
-    ref?: Ref<HTMLFormElement>;
+    children: BaseFormProps['content'];
 }
-export declare const StyledForm: import("styled-components").StyledComponent<"form", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledFormContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 declare const Form: FC<FormProps & ForwardProps>;
 export default Form;
 //# sourceMappingURL=Form.d.ts.map