@pega/cosmos-react-core 2.0.0-dev.2.0 → 2.0.0-dev.21.1

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

@@ -1,7 +1,6 @@
-import { PropsWithoutRef, FC, Ref, ReactElement } from 'react';
+import { FC, Ref, ReactElement } from 'react';
 import { ForwardProps, BaseProps } from '../../types';
-import { FileUploadVisualProps } from './FileUploadVisual';
-export interface FileUploadItemProps extends PropsWithoutRef<FileUploadVisualProps>, BaseProps {
+export interface FileUploadItemProps extends BaseProps {
     /** Name of the file. */
     name: string;
     /** A FileUploadVisual element to represent the file. */
@@ -9,18 +8,25 @@ export interface FileUploadItemProps extends PropsWithoutRef<FileUploadVisualPro
     /** Additional information about the file. If progress prop is passed and its value is less than 100, this region is instead used for the upload progress indicator. */
     meta?: string | string[];
     /** When passed, will render a single icon button for yet to be or in progress uploads. Use this action to trigger xhr request termination. */
-    onCancel?(name: FileUploadItemProps['name']): void;
+    onCancel?: (name: FileUploadItemProps['name']) => void;
     /** When passed, will render a single icon button or within a MenuButton if other actions are defined. */
-    onPreview?(name: FileUploadItemProps['name']): void;
+    onEdit?: (name: FileUploadItemProps['name']) => void;
     /** When passed, will render a single icon button or within a MenuButton if other actions are defined. */
-    onDownload?(name: FileUploadItemProps['name']): void;
+    onPreview?: (name: FileUploadItemProps['name']) => void;
     /** When passed, will render a single icon button or within a MenuButton if other actions are defined. */
-    onDelete?(name: FileUploadItemProps['name']): void;
+    onDownload?: (name: FileUploadItemProps['name']) => void;
+    /** When passed, will render a single icon button or within a MenuButton if other actions are defined. */
+    onDelete?: (name: FileUploadItemProps['name']) => void;
     /**
      * Set if there is an error uploading or processing the file. Applies error styling to the meta string passed.
      * @default false
      */
     error?: boolean;
+    /** 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?: string;
+    /** If the attachment is in an upload state, pass progress as a number between 0-100 representing the percentage of progress. */
+    progress?: number;
+    /** A ref to the file item's HTMLLIElement. */
     ref?: Ref<HTMLLIElement>;
 }
 declare const FileUploadItem: FC<FileUploadItemProps & ForwardProps>;

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,OAAc,EAEZ,eAAe,EACf,EAAE,EACF,GAAG,EACH,YAAY,EAGb,MAAM,OAAO,CAAC;AASf,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAItD,OAAyB,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAE7E,MAAM,WAAW,mBAAoB,SAAQ,eAAe,CAAC,qBAAqB,CAAC,EAAE,SAAS;IAC5F,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,CAAC,IAAI,EAAE,mBAAmB,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC;IACnD,yGAAyG;IACzG,SAAS,CAAC,CAAC,IAAI,EAAE,mBAAmB,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC;IACpD,yGAAyG;IACzG,UAAU,CAAC,CAAC,IAAI,EAAE,mBAAmB,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC;IACrD,yGAAyG;IACzG,QAAQ,CAAC,CAAC,IAAI,EAAE,mBAAmB,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC;IACnD;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,GAAG,CAAC,EAAE,GAAG,CAAC,aAAa,CAAC,CAAC;CAC1B;AAoBD,QAAA,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,GAAG,YAAY,CAoG1D,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"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"}

package/lib/components/File/FileUploadItem.js

@@ -1,14 +1,17 @@
-import React, { forwardRef, useMemo } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useMemo } from 'react';
 import styled, { css } from 'styled-components';
 import Button from '../Button';
 import Icon from '../Icon';
 import MenuButton from '../MenuButton';
 import MetaList from '../MetaList';
 import SummaryItem from '../SummaryItem';
+import Progress from '../Progress';
 import Text from '../Text';
 import { defaultThemeProp } from '../../theme';
 import { useI18n } from '../../hooks';
-import FileUploadVisual from './FileUploadVisual';
+import { getKindFromMimeType, getMimeTypeFromFile } from './utils';
+import FileVisual from './FileVisual';
 const StyledFileUploadItem = styled.li(props => {
     const { theme } = props;
     return css `
@@ -19,32 +22,32 @@ const StyledFileUploadItem = styled.li(props => {
 });
 StyledFileUploadItem.defaultProps = defaultThemeProp;
 const FileUploadItem = forwardRef((props, ref) => {
-    const { name, meta, error = false, progress, icon, thumbnail, onCancel, onPreview, onDownload, onDelete, ...restProps } = props;
+    const { name, meta, error = false, progress, thumbnail, onCancel, onEdit, onPreview, onDownload, onDelete, ...restProps } = props;
     const t = useI18n();
     const definedActions = useMemo(() => [
         { fn: onCancel, text: t('cancel'), icon: 'times' },
+        { fn: onEdit, text: t('edit'), icon: 'pencil' },
         { fn: onPreview, text: t('preview'), icon: 'eye' },
         { fn: onDownload, text: t('download'), icon: 'download' },
         { fn: onDelete, text: t('delete'), icon: 'trash' }
-    ].filter((action) => !!action.fn), [onCancel, onPreview, onDownload, onDelete]);
+    ].filter((action) => !!action.fn), [onCancel, onEdit, onPreview, onDownload, onDelete]);
     let metaContent = meta;
     let actions;
     if (typeof progress === 'number' && progress < 100) {
-        metaContent = `${t('uploading')}...${Math.floor(progress)}%`;
+        metaContent = `${t('uploading')}…${Math.floor(progress)}%`;
     }
     if (Array.isArray(metaContent)) {
-        metaContent = (React.createElement(MetaList, { items: metaContent.map(item => (React.createElement(Text, { key: item === null || item === void 0 ? void 0 : item.toString(), variant: 'secondary', status: error ? 'error' : undefined }, item))) }));
+        metaContent = (_jsx(MetaList, { items: metaContent.map(item => (_jsx(Text, { variant: 'secondary', status: error ? 'error' : undefined, children: item }, item?.toString()))) }, void 0));
     }
     else if (typeof metaContent === 'string') {
-        metaContent = (React.createElement(Text, { variant: 'secondary', status: error ? 'error' : undefined }, metaContent));
+        metaContent = (_jsx(Text, { variant: 'secondary', status: error ? 'error' : undefined, children: metaContent }, void 0));
     }
     if (definedActions.length === 1) {
         const action = definedActions[0];
-        actions = (React.createElement(Button, { icon: true, variant: 'simple', onClick: () => { var _a; return (_a = action.fn) === null || _a === void 0 ? void 0 : _a.call(action, name); }, "aria-label": `${action.text} ${name}` },
-            React.createElement(Icon, { name: action.icon })));
+        actions = (_jsx(Button, { icon: true, variant: 'simple', onClick: () => action.fn?.(name), "aria-label": `${action.text} ${name}`, children: _jsx(Icon, { name: action.icon }, void 0) }, void 0));
     }
     else if (definedActions.length > 1) {
-        actions = (React.createElement(MenuButton, { text: t('actions'), iconOnly: true, icon: 'more', variant: 'simple', menu: {
+        actions = (_jsx(MenuButton, { text: t('actions'), iconOnly: true, icon: 'more', variant: 'simple', menu: {
                 items: definedActions.map(action => ({
                     id: action.text,
                     primary: action.text,
@@ -52,9 +55,16 @@ const FileUploadItem = forwardRef((props, ref) => {
                         action.fn(name);
                     }
                 }))
-            } }));
+            } }, void 0));
     }
-    return (React.createElement(SummaryItem, { as: StyledFileUploadItem, ref: ref, visual: React.createElement(FileUploadVisual, { progress: progress, icon: icon, thumbnail: thumbnail }), primary: name, secondary: metaContent, actions: actions, error: error, ...restProps }));
+    const visual = useMemo(() => {
+        if (typeof progress === 'number' && progress !== 100) {
+            return _jsx(Progress, { value: progress, placement: 'inline', variant: 'ring' }, void 0);
+        }
+        const type = getMimeTypeFromFile(name);
+        return _jsx(FileVisual, { type: getKindFromMimeType(type ?? ''), thumbnail: thumbnail }, void 0);
+    }, [progress, thumbnail, name]);
+    return (_jsx(SummaryItem, { ...restProps, as: StyledFileUploadItem, ref: ref, visual: visual, primary: name, secondary: metaContent, actions: actions, error: error }, void 0));
 });
 export default FileUploadItem;
 //# sourceMappingURL=FileUploadItem.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"FileUploadItem.js","sourceRoot":"","sources":["../../../src/components/File/FileUploadItem.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, {\n  forwardRef,\n  PropsWithoutRef,\n  FC,\n  Ref,\n  ReactElement,\n  useMemo,\n  ReactNode\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Button from '../Button';\nimport Icon from '../Icon';\nimport MenuButton from '../MenuButton';\nimport MetaList from '../MetaList';\nimport SummaryItem from '../SummaryItem';\nimport Text from '../Text';\nimport { ForwardProps, BaseProps } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport { useI18n } from '../../hooks';\n\nimport FileUploadVisual, { FileUploadVisualProps } from './FileUploadVisual';\n\nexport interface FileUploadItemProps extends PropsWithoutRef<FileUploadVisualProps>, BaseProps {\n  /** Name of the file. */\n  name: string;\n  /** A FileUploadVisual element to represent the file. */\n  visual?: ReactElement;\n  /** Additional information about the file. If progress prop is passed and its value is less than 100, this region is instead used for the upload progress indicator. */\n  meta?: string | string[];\n  /** When passed, will render a single icon button for yet to be or in progress uploads. Use this action to trigger xhr request termination. */\n  onCancel?(name: FileUploadItemProps['name']): void;\n  /** When passed, will render a single icon button or within a MenuButton if other actions are defined. */\n  onPreview?(name: FileUploadItemProps['name']): void;\n  /** When passed, will render a single icon button or within a MenuButton if other actions are defined. */\n  onDownload?(name: FileUploadItemProps['name']): void;\n  /** When passed, will render a single icon button or within a MenuButton if other actions are defined. */\n  onDelete?(name: FileUploadItemProps['name']): void;\n  /**\n   * Set if there is an error uploading or processing the file. Applies error styling to the meta string passed.\n   * @default false\n   */\n  error?: boolean;\n  ref?: Ref<HTMLLIElement>;\n}\n\ninterface FileAction {\n  fn: (name: FileUploadItemProps['name']) => void;\n  text: string;\n  icon: string;\n}\n\nconst StyledFileUploadItem = styled.li(props => {\n  const { theme } = props;\n\n  return css`\n    border: 0.0625rem solid ${theme.base.palette['border-line']};\n    background-color: ${theme.base.palette['primary-background']};\n    padding: calc(0.5 * ${theme.base.spacing});\n  `;\n});\n\nStyledFileUploadItem.defaultProps = defaultThemeProp;\n\nconst FileUploadItem: FC<FileUploadItemProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<FileUploadItemProps>, ref: FileUploadItemProps['ref']) => {\n    const {\n      name,\n      meta,\n      error = false,\n      progress,\n      icon,\n      thumbnail,\n      onCancel,\n      onPreview,\n      onDownload,\n      onDelete,\n      ...restProps\n    } = props;\n\n    const t = useI18n();\n\n    const definedActions: FileAction[] = useMemo(\n      () =>\n        [\n          { fn: onCancel, text: t('cancel'), icon: 'times' },\n          { fn: onPreview, text: t('preview'), icon: 'eye' },\n          { fn: onDownload, text: t('download'), icon: 'download' },\n          { fn: onDelete, text: t('delete'), icon: 'trash' }\n        ].filter<FileAction>((action): action is FileAction => !!action.fn),\n      [onCancel, onPreview, onDownload, onDelete]\n    );\n\n    let metaContent: ReactNode = meta;\n    let actions: ReactElement | undefined;\n\n    if (typeof progress === 'number' && progress < 100) {\n      metaContent = `${t('uploading')}...${Math.floor(progress)}%`;\n    }\n\n    if (Array.isArray(metaContent)) {\n      metaContent = (\n        <MetaList\n          items={metaContent.map(item => (\n            <Text key={item?.toString()} variant='secondary' status={error ? 'error' : undefined}>\n              {item}\n            </Text>\n          ))}\n        />\n      );\n    } else if (typeof metaContent === 'string') {\n      metaContent = (\n        <Text variant='secondary' status={error ? 'error' : undefined}>\n          {metaContent}\n        </Text>\n      );\n    }\n\n    if (definedActions.length === 1) {\n      const action = definedActions[0];\n\n      actions = (\n        <Button\n          icon\n          variant='simple'\n          onClick={() => action.fn?.(name)}\n          aria-label={`${action.text} ${name}`}\n        >\n          <Icon name={action.icon} />\n        </Button>\n      );\n    } else if (definedActions.length > 1) {\n      actions = (\n        <MenuButton\n          text={t('actions')}\n          iconOnly\n          icon='more'\n          variant='simple'\n          menu={{\n            items: definedActions.map(action => ({\n              id: action.text,\n              primary: action.text,\n              onClick: () => {\n                action.fn(name);\n              }\n            }))\n          }}\n        />\n      );\n    }\n\n    return (\n      <SummaryItem\n        as={StyledFileUploadItem}\n        ref={ref}\n        visual={<FileUploadVisual progress={progress} icon={icon} thumbnail={thumbnail} />}\n        primary={name}\n        secondary={metaContent}\n        actions={actions}\n        error={error}\n        {...restProps}\n      />\n    );\n  }\n);\n\nexport default FileUploadItem;\n"]}
+{"version":3,"file":"FileUploadItem.js","sourceRoot":"","sources":["../../../src/components/File/FileUploadItem.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, PropsWithoutRef, FC, Ref, ReactElement, useMemo, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Button from '../Button';\nimport Icon from '../Icon';\nimport MenuButton from '../MenuButton';\nimport MetaList from '../MetaList';\nimport SummaryItem from '../SummaryItem';\nimport Progress from '../Progress';\nimport Text from '../Text';\nimport { ForwardProps, BaseProps } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport { useI18n } from '../../hooks';\n\nimport { getKindFromMimeType, getMimeTypeFromFile } from './utils';\nimport FileVisual from './FileVisual';\n\nexport interface FileUploadItemProps extends BaseProps {\n  /** Name of the file. */\n  name: string;\n  /** A FileUploadVisual element to represent the file. */\n  visual?: ReactElement;\n  /** Additional information about the file. If progress prop is passed and its value is less than 100, this region is instead used for the upload progress indicator. */\n  meta?: string | string[];\n  /** When passed, will render a single icon button for yet to be or in progress uploads. Use this action to trigger xhr request termination. */\n  onCancel?: (name: FileUploadItemProps['name']) => void;\n  /** When passed, will render a single icon button or within a MenuButton if other actions are defined. */\n  onEdit?: (name: FileUploadItemProps['name']) => void;\n  /** When passed, will render a single icon button or within a MenuButton if other actions are defined. */\n  onPreview?: (name: FileUploadItemProps['name']) => void;\n  /** When passed, will render a single icon button or within a MenuButton if other actions are defined. */\n  onDownload?: (name: FileUploadItemProps['name']) => void;\n  /** When passed, will render a single icon button or within a MenuButton if other actions are defined. */\n  onDelete?: (name: FileUploadItemProps['name']) => void;\n  /**\n   * Set if there is an error uploading or processing the file. Applies error styling to the meta string passed.\n   * @default false\n   */\n  error?: boolean;\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?: string;\n  /** If the attachment is in an upload state, pass progress as a number between 0-100 representing the percentage of progress. */\n  progress?: number;\n  /** A ref to the file item's HTMLLIElement. */\n  ref?: Ref<HTMLLIElement>;\n}\n\ninterface FileAction {\n  fn: (name: FileUploadItemProps['name']) => void;\n  text: string;\n  icon: string;\n}\n\nconst StyledFileUploadItem = styled.li(props => {\n  const { theme } = props;\n\n  return css`\n    border: 0.0625rem solid ${theme.base.palette['border-line']};\n    background-color: ${theme.base.palette['primary-background']};\n    padding: calc(0.5 * ${theme.base.spacing});\n  `;\n});\n\nStyledFileUploadItem.defaultProps = defaultThemeProp;\n\nconst FileUploadItem: FC<FileUploadItemProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<FileUploadItemProps>, ref: FileUploadItemProps['ref']) => {\n    const {\n      name,\n      meta,\n      error = false,\n      progress,\n      thumbnail,\n      onCancel,\n      onEdit,\n      onPreview,\n      onDownload,\n      onDelete,\n      ...restProps\n    } = props;\n\n    const t = useI18n();\n\n    const definedActions: FileAction[] = useMemo(\n      () =>\n        [\n          { fn: onCancel, text: t('cancel'), icon: 'times' },\n          { fn: onEdit, text: t('edit'), icon: 'pencil' },\n          { fn: onPreview, text: t('preview'), icon: 'eye' },\n          { fn: onDownload, text: t('download'), icon: 'download' },\n          { fn: onDelete, text: t('delete'), icon: 'trash' }\n        ].filter<FileAction>((action): action is FileAction => !!action.fn),\n      [onCancel, onEdit, onPreview, onDownload, onDelete]\n    );\n\n    let metaContent: ReactNode = meta;\n    let actions: ReactElement | undefined;\n\n    if (typeof progress === 'number' && progress < 100) {\n      metaContent = `${t('uploading')}…${Math.floor(progress)}%`;\n    }\n\n    if (Array.isArray(metaContent)) {\n      metaContent = (\n        <MetaList\n          items={metaContent.map(item => (\n            <Text key={item?.toString()} variant='secondary' status={error ? 'error' : undefined}>\n              {item}\n            </Text>\n          ))}\n        />\n      );\n    } else if (typeof metaContent === 'string') {\n      metaContent = (\n        <Text variant='secondary' status={error ? 'error' : undefined}>\n          {metaContent}\n        </Text>\n      );\n    }\n\n    if (definedActions.length === 1) {\n      const action = definedActions[0];\n\n      actions = (\n        <Button\n          icon\n          variant='simple'\n          onClick={() => action.fn?.(name)}\n          aria-label={`${action.text} ${name}`}\n        >\n          <Icon name={action.icon} />\n        </Button>\n      );\n    } else if (definedActions.length > 1) {\n      actions = (\n        <MenuButton\n          text={t('actions')}\n          iconOnly\n          icon='more'\n          variant='simple'\n          menu={{\n            items: definedActions.map(action => ({\n              id: action.text,\n              primary: action.text,\n              onClick: () => {\n                action.fn(name);\n              }\n            }))\n          }}\n        />\n      );\n    }\n\n    const visual = useMemo(() => {\n      if (typeof progress === 'number' && progress !== 100) {\n        return <Progress value={progress} placement='inline' variant='ring' />;\n      }\n      const type = getMimeTypeFromFile(name);\n      return <FileVisual type={getKindFromMimeType(type ?? '')} thumbnail={thumbnail} />;\n    }, [progress, thumbnail, name]);\n\n    return (\n      <SummaryItem\n        {...restProps}\n        as={StyledFileUploadItem}\n        ref={ref}\n        visual={visual}\n        primary={name}\n        secondary={metaContent}\n        actions={actions}\n        error={error}\n      />\n    );\n  }\n);\n\nexport default FileUploadItem;\n"]}

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

@@ -1,6 +1,6 @@
 import { FC, Ref } from 'react';
 import { DefaultTheme } from 'styled-components';
-import { ForwardProps, BaseProps } from '../../types';
+import { ForwardProps, BaseProps, PropsWithDefaults } from '../../types';
 import { ButtonProps } from '../Button';
 import { AttachmentType } from './utils';
 export interface FileVisualProps extends BaseProps {
@@ -12,8 +12,14 @@ export interface FileVisualProps extends BaseProps {
     disabled?: ButtonProps['disabled'];
     /** Reference to a button element. */
     ref?: Ref<HTMLButtonElement>;
+    /**
+     * FileVisual size.
+     * @default "s"
+     */
+    size?: 's' | 'l';
 }
-export declare const StyledFileVisual: import("styled-components").StyledComponent<"div", DefaultTheme, {
+declare type FileVisualPropsWithDefaults = PropsWithDefaults<FileVisualProps, 'size'>;
+export declare const StyledFileVisual: import("styled-components").StyledComponent<"div", DefaultTheme, Pick<FileVisualPropsWithDefaults, "size"> & {
     thumbnail?: FileVisualProps['thumbnail'];
     aType: AttachmentType;
 }, never>;

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

@@ -1 +1 @@
-{"version":3,"file":"FileVisual.d.ts","sourceRoot":"","sources":["../../../src/components/File/FileVisual.tsx"],"names":[],"mappings":"AAAA,OAAc,EAA+B,EAAE,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AACpE,OAAe,EAAO,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAG9D,OAAO,EAAE,YAAY,EAAE,SAAS,EAAc,MAAM,aAAa,CAAC;AAGlE,OAAO,EAAE,WAAW,EAAgB,MAAM,WAAW,CAAC;AAEtD,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAEzC,MAAM,WAAW,eAAgB,SAAQ,SAAS;IAChD,oFAAoF;IACpF,IAAI,EAAE,cAAc,CAAC;IACrB,sEAAsE;IACtE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qDAAqD;IACrD,QAAQ,CAAC,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC;IACnC,qCAAqC;IACrC,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAC;CAC9B;AAgED,eAAO,MAAM,gBAAgB;gBACf,eAAe,CAAC,WAAW,CAAC;WACjC,cAAc;SA4BrB,CAAC;AAIH,QAAA,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,GAAG,YAAY,CAqBlD,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"FileVisual.d.ts","sourceRoot":"","sources":["../../../src/components/File/FileVisual.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+B,EAAE,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC7D,OAAe,EAAO,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAG9D,OAAO,EAAE,YAAY,EAAE,SAAS,EAAc,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAGrF,OAAO,EAAE,WAAW,EAAgB,MAAM,WAAW,CAAC;AAEtD,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAEzC,MAAM,WAAW,eAAgB,SAAQ,SAAS;IAChD,oFAAoF;IACpF,IAAI,EAAE,cAAc,CAAC;IACrB,sEAAsE;IACtE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qDAAqD;IACrD,QAAQ,CAAC,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC;IACnC,qCAAqC;IACrC,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAC;IAC7B;;;OAGG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;CAClB;AACD,aAAK,2BAA2B,GAAG,iBAAiB,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;AAqE9E,eAAO,MAAM,gBAAgB;gBAEb,eAAe,CAAC,WAAW,CAAC;WACjC,cAAc;SA+BvB,CAAC;AAIH,QAAA,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,GAAG,YAAY,CAoBlD,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/lib/components/File/FileVisual.js

@@ -1,4 +1,5 @@
-import React, { forwardRef } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 import Icon from '../Icon';
 import { defaultThemeProp } from '../../theme';
@@ -17,7 +18,7 @@ const mapping = {
         iconName: 'speaker-on-solid',
         backgroundColor: 'slate-dark'
     },
-    text: {
+    document: {
         iconName: 'filetype-text',
         backgroundColor: 'blue-medium'
     },
@@ -37,10 +38,6 @@ const mapping = {
         iconName: 'slideshow-solid',
         backgroundColor: 'orange-medium'
     },
-    document: {
-        iconName: 'document-doc',
-        backgroundColor: 'blue-medium'
-    },
     link: {
         iconName: 'chain',
         backgroundColor: 'purple-dark'
@@ -54,19 +51,31 @@ const mapping = {
         backgroundColor: 'slate-dark'
     },
     image: {
+        iconName: 'picture-solid',
+        backgroundColor: 'slate-dark'
+    },
+    text: {
+        iconName: 'filetype-text',
         backgroundColor: 'slate-dark'
     }
 };
-export const StyledFileVisual = styled.div(({ theme, thumbnail, aType }) => {
+const sizeConverter = {
+    s: 1,
+    l: 1.375
+};
+export const StyledFileVisual = styled.div(({ theme, thumbnail, size, aType }) => {
     const [color, lightness] = mapping[aType].backgroundColor.split('-', 2);
     const backgroundColor = theme.base.colors[color];
+    const sizeMultiplier = sizeConverter[size] ?? 1;
     return css `
     background-color: ${backgroundColor[lightness]};
     color: ${theme.base.palette.light};
     border-color: transparent;
-    height: ${theme.components.input.height};
-    width: ${theme.components.input.height};
-    border-radius: calc(0.5 * ${theme.base['border-radius']});
+    height: calc(${sizeMultiplier} * ${theme.components.input.height});
+    width: calc(${sizeMultiplier} * ${theme.components.input.height});
+    border-radius: calc(0.25 * ${theme.base['border-radius']});
+    font-size: calc(0.7 * ${theme.base['font-size']});
+    font-weight: ${theme.base['font-weight']['semi-bold']};
     overflow: hidden;
     opacity: 1;
     ${thumbnail &&
@@ -83,13 +92,11 @@ export const StyledFileVisual = styled.div(({ theme, thumbnail, aType }) => {
 });
 StyledFileVisual.defaultProps = defaultThemeProp;
 const FileVisual = forwardRef((props, ref) => {
-    const { type, thumbnail, disabled, ...restProps } = props;
-    return (React.createElement(StyledFileVisual, { ...restProps, as: StyledButton, ref: ref, icon: true, aType: type, ...{
+    const { type, thumbnail, size, disabled, ...restProps } = props;
+    return (_jsxs(StyledFileVisual, { ...restProps, as: StyledButton, ref: ref, icon: true, aType: type, ...{
             thumbnail,
             disabled
-        } },
-        mapping[type].iconName && React.createElement(Icon, { name: mapping[type].iconName }),
-        mapping[type].text));
+        }, children: [mapping[type].iconName && _jsx(Icon, { name: mapping[type].iconName }, void 0), mapping[type].text] }, void 0));
 });
 export default FileVisual;
 //# sourceMappingURL=FileVisual.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"FileVisual.js","sourceRoot":"","sources":["../../../src/components/File/FileVisual.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { forwardRef, PropsWithoutRef, FC, Ref } from 'react';\nimport styled, { css, DefaultTheme } from 'styled-components';\n\nimport Icon from '../Icon';\nimport { ForwardProps, BaseProps, OmitStrict } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport { StyledText } from '../Text';\nimport { ButtonProps, StyledButton } from '../Button';\n\nimport { AttachmentType } from './utils';\n\nexport interface FileVisualProps extends BaseProps {\n  /** Attachment/File type, it has an impact on background color and icon rendered. */\n  type: AttachmentType;\n  /** A string to be used as an image src for a attachment thumbnail. */\n  thumbnail?: string;\n  /** Disabled means, the button is not interactive. */\n  disabled?: ButtonProps['disabled'];\n  /** Reference to a button element. */\n  ref?: Ref<HTMLButtonElement>;\n}\n\ntype ThemeColor = keyof OmitStrict<DefaultTheme['base']['colors'], 'white' | 'black'>;\ntype ThemeColorVariant = 'extra-light' | 'light' | 'medium' | 'dark' | 'extra-dark';\n\ntype BackgroundColor = `${ThemeColor}-${ThemeColorVariant}`;\n\nconst mapping: Record<\n  AttachmentType,\n  { iconName?: string; backgroundColor: BackgroundColor; text?: string }\n> = {\n  generic: {\n    iconName: 'paper-clip',\n    backgroundColor: 'slate-dark'\n  },\n  video: {\n    iconName: 'play-solid',\n    backgroundColor: 'slate-dark'\n  },\n  audio: {\n    iconName: 'speaker-on-solid',\n    backgroundColor: 'slate-dark'\n  },\n  text: {\n    iconName: 'filetype-text',\n    backgroundColor: 'blue-medium'\n  },\n  message: {\n    iconName: 'mail-solid',\n    backgroundColor: 'blue-dark'\n  },\n  pdf: {\n    text: 'PDF',\n    backgroundColor: 'red-medium'\n  },\n  spreadsheet: {\n    iconName: 'grid-solid',\n    backgroundColor: 'green-medium'\n  },\n  presentation: {\n    iconName: 'slideshow-solid',\n    backgroundColor: 'orange-medium'\n  },\n  document: {\n    iconName: 'document-doc',\n    backgroundColor: 'blue-medium'\n  },\n  link: {\n    iconName: 'chain',\n    backgroundColor: 'purple-dark'\n  },\n  archive: {\n    iconName: 'archive-solid',\n    backgroundColor: 'slate-dark'\n  },\n  database: {\n    iconName: 'disc-stack-solid',\n    backgroundColor: 'slate-dark'\n  },\n  image: {\n    backgroundColor: 'slate-dark'\n  }\n} as const;\n\nexport const StyledFileVisual = styled.div<{\n  thumbnail?: FileVisualProps['thumbnail'];\n  aType: AttachmentType;\n}>(({ theme, thumbnail, aType }) => {\n  const [color, lightness] = mapping[aType].backgroundColor.split('-', 2) as [\n    ThemeColor,\n    ThemeColorVariant\n  ];\n  const backgroundColor = theme.base.colors[color];\n\n  return css`\n    background-color: ${backgroundColor[lightness]};\n    color: ${theme.base.palette.light};\n    border-color: transparent;\n    height: ${theme.components.input.height};\n    width: ${theme.components.input.height};\n    border-radius: calc(0.5 * ${theme.base['border-radius']});\n    overflow: hidden;\n    opacity: 1;\n    ${thumbnail &&\n    css`\n      background-image: url(${thumbnail});\n      background-size: contain;\n    `}\n\n    ${StyledText} {\n      color: inherit;\n      white-space: nowrap;\n    }\n  `;\n});\n\nStyledFileVisual.defaultProps = defaultThemeProp;\n\nconst FileVisual: FC<FileVisualProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<FileVisualProps>, ref: FileVisualProps['ref']) => {\n    const { type, thumbnail, disabled, ...restProps } = props;\n\n    return (\n      <StyledFileVisual\n        {...restProps}\n        as={StyledButton}\n        ref={ref}\n        icon\n        aType={type}\n        {...{\n          thumbnail,\n          disabled\n        }}\n      >\n        {mapping[type].iconName && <Icon name={mapping[type].iconName!} />}\n        {mapping[type].text}\n      </StyledFileVisual>\n    );\n  }\n);\n\nexport default FileVisual;\n"]}
+{"version":3,"file":"FileVisual.js","sourceRoot":"","sources":["../../../src/components/File/FileVisual.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, PropsWithoutRef, FC, Ref } from 'react';\nimport styled, { css, DefaultTheme } from 'styled-components';\n\nimport Icon from '../Icon';\nimport { ForwardProps, BaseProps, OmitStrict, PropsWithDefaults } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport { StyledText } from '../Text';\nimport { ButtonProps, StyledButton } from '../Button';\n\nimport { AttachmentType } from './utils';\n\nexport interface FileVisualProps extends BaseProps {\n  /** Attachment/File type, it has an impact on background color and icon rendered. */\n  type: AttachmentType;\n  /** A string to be used as an image src for a attachment thumbnail. */\n  thumbnail?: string;\n  /** Disabled means, the button is not interactive. */\n  disabled?: ButtonProps['disabled'];\n  /** Reference to a button element. */\n  ref?: Ref<HTMLButtonElement>;\n  /**\n   * FileVisual size.\n   * @default \"s\"\n   */\n  size?: 's' | 'l';\n}\ntype FileVisualPropsWithDefaults = PropsWithDefaults<FileVisualProps, 'size'>;\ntype ThemeColor = keyof OmitStrict<DefaultTheme['base']['colors'], 'white' | 'black'>;\ntype ThemeColorVariant = 'extra-light' | 'light' | 'medium' | 'dark' | 'extra-dark';\n\ntype BackgroundColor = `${ThemeColor}-${ThemeColorVariant}`;\n\nconst mapping: Record<\n  AttachmentType,\n  { iconName?: string; backgroundColor: BackgroundColor; text?: string }\n> = {\n  generic: {\n    iconName: 'paper-clip',\n    backgroundColor: 'slate-dark'\n  },\n  video: {\n    iconName: 'play-solid',\n    backgroundColor: 'slate-dark'\n  },\n  audio: {\n    iconName: 'speaker-on-solid',\n    backgroundColor: 'slate-dark'\n  },\n  document: {\n    iconName: 'filetype-text',\n    backgroundColor: 'blue-medium'\n  },\n  message: {\n    iconName: 'mail-solid',\n    backgroundColor: 'blue-dark'\n  },\n  pdf: {\n    text: 'PDF',\n    backgroundColor: 'red-medium'\n  },\n  spreadsheet: {\n    iconName: 'grid-solid',\n    backgroundColor: 'green-medium'\n  },\n  presentation: {\n    iconName: 'slideshow-solid',\n    backgroundColor: 'orange-medium'\n  },\n  link: {\n    iconName: 'chain',\n    backgroundColor: 'purple-dark'\n  },\n  archive: {\n    iconName: 'archive-solid',\n    backgroundColor: 'slate-dark'\n  },\n  database: {\n    iconName: 'disc-stack-solid',\n    backgroundColor: 'slate-dark'\n  },\n  image: {\n    iconName: 'picture-solid',\n    backgroundColor: 'slate-dark'\n  },\n  text: {\n    iconName: 'filetype-text',\n    backgroundColor: 'slate-dark'\n  }\n} as const;\n\nconst sizeConverter = {\n  s: 1,\n  l: 1.375\n};\n\nexport const StyledFileVisual = styled.div<\n  Pick<FileVisualPropsWithDefaults, 'size'> & {\n    thumbnail?: FileVisualProps['thumbnail'];\n    aType: AttachmentType;\n  }\n>(({ theme, thumbnail, size, aType }) => {\n  const [color, lightness] = mapping[aType].backgroundColor.split('-', 2) as [\n    ThemeColor,\n    ThemeColorVariant\n  ];\n  const backgroundColor = theme.base.colors[color];\n  const sizeMultiplier = sizeConverter[size] ?? 1;\n  return css`\n    background-color: ${backgroundColor[lightness]};\n    color: ${theme.base.palette.light};\n    border-color: transparent;\n    height: calc(${sizeMultiplier} * ${theme.components.input.height});\n    width: calc(${sizeMultiplier} * ${theme.components.input.height});\n    border-radius: calc(0.25 * ${theme.base['border-radius']});\n    font-size: calc(0.7 * ${theme.base['font-size']});\n    font-weight: ${theme.base['font-weight']['semi-bold']};\n    overflow: hidden;\n    opacity: 1;\n    ${thumbnail &&\n    css`\n      background-image: url(${thumbnail});\n      background-size: contain;\n    `}\n\n    ${StyledText} {\n      color: inherit;\n      white-space: nowrap;\n    }\n  `;\n});\n\nStyledFileVisual.defaultProps = defaultThemeProp;\n\nconst FileVisual: FC<FileVisualProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<FileVisualProps>, ref: FileVisualProps['ref']) => {\n    const { type, thumbnail, size, disabled, ...restProps } = props;\n    return (\n      <StyledFileVisual\n        {...restProps}\n        as={StyledButton}\n        ref={ref}\n        icon\n        aType={type}\n        {...{\n          thumbnail,\n          disabled\n        }}\n      >\n        {mapping[type].iconName && <Icon name={mapping[type].iconName!} />}\n        {mapping[type].text}\n      </StyledFileVisual>\n    );\n  }\n);\n\nexport default FileVisual;\n"]}

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

@@ -2,8 +2,9 @@ export { default as FileInput } from './FileInput';
 export { FileInputProps } from './FileInput';
 export { default as FileUploadItem } from './FileUploadItem';
 export { FileUploadItemProps } from './FileUploadItem';
-export { default as FileUploadVisual } from './FileUploadVisual';
-export { FileUploadVisualProps } from './FileUploadVisual';
 export { default as FileDisplay } from './FileDisplay';
 export { FileDisplayProps } from './FileDisplay';
+export { default as FileVisual } from './FileVisual';
+export { FileVisualProps } from './FileVisual';
+export { getKindFromMimeType, getMimeTypeFromFile } from './utils';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/File/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/File/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAC/C,OAAO,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC"}

package/lib/components/File/index.js

@@ -1,5 +1,6 @@
 export { default as FileInput } from './FileInput';
 export { default as FileUploadItem } from './FileUploadItem';
-export { default as FileUploadVisual } from './FileUploadVisual';
 export { default as FileDisplay } from './FileDisplay';
+export { default as FileVisual } from './FileVisual';
+export { getKindFromMimeType, getMimeTypeFromFile } from './utils';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/File/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AAEnD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAE7D,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAEjE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC","sourcesContent":["export { default as FileInput } from './FileInput';\nexport { FileInputProps } from './FileInput';\nexport { default as FileUploadItem } from './FileUploadItem';\nexport { FileUploadItemProps } from './FileUploadItem';\nexport { default as FileUploadVisual } from './FileUploadVisual';\nexport { FileUploadVisualProps } from './FileUploadVisual';\nexport { default as FileDisplay } from './FileDisplay';\nexport { FileDisplayProps } from './FileDisplay';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/File/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AAEnD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAE7D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AAEvD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AAErD,OAAO,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC","sourcesContent":["export { default as FileInput } from './FileInput';\nexport { FileInputProps } from './FileInput';\nexport { default as FileUploadItem } from './FileUploadItem';\nexport { FileUploadItemProps } from './FileUploadItem';\nexport { default as FileDisplay } from './FileDisplay';\nexport { FileDisplayProps } from './FileDisplay';\nexport { default as FileVisual } from './FileVisual';\nexport { FileVisualProps } from './FileVisual';\nexport { getKindFromMimeType, getMimeTypeFromFile } from './utils';\n"]}

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

@@ -6,10 +6,4 @@ export declare type AttachmentType = 'generic' | 'image' | 'video' | 'audio' | '
  */
 export declare const getMimeTypeFromFile: (fileName: string) => string | undefined;
 export declare const getKindFromMimeType: (mimeType: string) => AttachmentType;
-/**
- * This factory method returns default implementation for downloading a resource represented by the given url.
- * @param {HTMLElement} appendTarget HTML element to which the temporary anchor element will be passed.
- * @returns a function to download a resource
- */
-export declare const downloadFileFactory: (appendTarget: HTMLElement | undefined) => (downloadUrl: string, fileName?: string | undefined) => void;
 //# sourceMappingURL=utils.d.ts.map

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;AAEF;;;;GAIG;AACH,eAAO,MAAM,mBAAmB,iBAAkB,WAAW,GAAG,SAAS,mBAMlD,MAAM,oCAAsB,IAWlD,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,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"}

package/lib/components/File/utils.js

@@ -5,8 +5,7 @@ import mimeTypes from './mimeTypes.json';
  * @returns mime type associated to the file.
  */
 export const getMimeTypeFromFile = (fileName) => {
-    var _a;
-    const fileExt = (_a = fileName.split('.').pop()) !== null && _a !== void 0 ? _a : fileName;
+    const fileExt = fileName.split('.').pop() ?? fileName;
     return mimeTypes[fileExt];
 };
 export const getKindFromMimeType = (mimeType) => {
@@ -35,28 +34,4 @@ export const getKindFromMimeType = (mimeType) => {
         type = 'archive';
     return type;
 };
-/**
- * This factory method returns default implementation for downloading a resource represented by the given url.
- * @param {HTMLElement} appendTarget HTML element to which the temporary anchor element will be passed.
- * @returns a function to download a resource
- */
-export const downloadFileFactory = (appendTarget) => {
-    /**
-     * Default implementation for downloading a resource represented by the given url.
-     * @param downloadUrl Resource url.
-     * @param fileName Optional file name that the downloaded resource should be named as.
-     */
-    return (downloadUrl, fileName) => {
-        if (!appendTarget)
-            return;
-        const a = document.createElement('a');
-        a.style.display = 'none';
-        a.href = downloadUrl;
-        a.download = fileName !== null && fileName !== void 0 ? fileName : (downloadUrl.split('/').pop() || 'attachment');
-        a.target = '_blank';
-        appendTarget.appendChild(a);
-        a.click();
-        appendTarget.removeChild(a);
-    };
-};
 //# sourceMappingURL=utils.js.map

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,MAAA,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,mCAAI,QAAQ,CAAC;IACtD,OAAQ,SAAoC,CAAC,OAAO,CAAC,CAAC;AACxD,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;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,YAAqC,EAAE,EAAE;IAC3E;;;;OAIG;IACH,OAAO,CAAC,WAAmB,EAAE,QAAiB,EAAQ,EAAE;QACtD,IAAI,CAAC,YAAY;YAAE,OAAO;QAC1B,MAAM,CAAC,GAAG,QAAQ,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;QACtC,CAAC,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;QACzB,CAAC,CAAC,IAAI,GAAG,WAAW,CAAC;QACrB,CAAC,CAAC,QAAQ,GAAG,QAAQ,aAAR,QAAQ,cAAR,QAAQ,GAAI,CAAC,WAAW,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,IAAI,YAAY,CAAC,CAAC;QACxE,CAAC,CAAC,MAAM,GAAG,QAAQ,CAAC;QACpB,YAAY,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;QAC5B,CAAC,CAAC,KAAK,EAAE,CAAC;QACV,YAAY,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;IAC9B,CAAC,CAAC;AACJ,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];\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\n/**\n * This factory method returns default implementation for downloading a resource represented by the given url.\n * @param {HTMLElement} appendTarget HTML element to which the temporary anchor element will be passed.\n * @returns a function to download a resource\n */\nexport const downloadFileFactory = (appendTarget: HTMLElement | undefined) => {\n  /**\n   * Default implementation for downloading a resource represented by the given url.\n   * @param downloadUrl Resource url.\n   * @param fileName Optional file name that the downloaded resource should be named as.\n   */\n  return (downloadUrl: string, fileName?: string): void => {\n    if (!appendTarget) return;\n    const a = document.createElement('a');\n    a.style.display = 'none';\n    a.href = downloadUrl;\n    a.download = fileName ?? (downloadUrl.split('/').pop() || 'attachment');\n    a.target = '_blank';\n    appendTarget.appendChild(a);\n    a.click();\n    appendTarget.removeChild(a);\n  };\n};\n"]}
+{"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,CAAC;AACxD,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];\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

@@ -7,16 +7,34 @@ export interface FlexContainerProps {
     pad?: number | [topRightBottomLeft: number] | [topBottom: number, rightLeft: number] | [top: number, rightLeft: number, bottom: number] | [top: number, right: number, bottom: number, left: number];
     /** [flex-direction](https://css-tricks.com/almanac/properties/f/flex-direction/) */
     direction?: 'row' | 'row-reverse' | 'column' | 'column-reverse';
-    /** [justify-content](https://css-tricks.com/almanac/properties/j/justify-content/) */
-    justify?: 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly';
+    /** [justify-content](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content) */
+    justify?: 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly' | 'stretch';
     /** [flex-wrap](https://css-tricks.com/almanac/properties/f/flex-wrap/) */
     wrap?: 'wrap' | 'nowrap' | 'wrap-reverse';
     /** [align-items](https://css-tricks.com/almanac/properties/a/align-items/). */
     alignItems?: 'stretch' | 'start' | 'end' | 'center' | 'baseline';
     /** [align-content](https://css-tricks.com/almanac/properties/a/align-content/) */
     alignContent?: 'start' | 'end' | 'center' | 'between' | 'around' | 'stretch';
-    /** Defines how much equal space to place between items represented as a multiplier to the base spacing value in the theme. */
+    /**
+     * Defines how much equal space to place between items represented as a multiplier to the base spacing value in the theme.
+     * @deprecated
+     */
     itemGap?: number;
+    /**
+     * Defines how much equal space to place between columns represented as a multiplier to the base spacing value in the theme.
+     * [column-gap](https://css-tricks.com/almanac/properties/c/column-gap/)
+     */
+    colGap?: number;
+    /**
+     * Defines how much equal space to place between rows represented as a multiplier to the base spacing value in the theme.
+     * [row-gap](https://css-tricks.com/almanac/properties/r/row-gap/)
+     */
+    rowGap?: number;
+    /**
+     * Defines how much equal space to place between both rows and columns represented as a multiplier to the base spacing value in the theme.
+     * [gap](https://css-tricks.com/almanac/properties/g/gap/)
+     */
+    gap?: number;
 }
 export interface FlexItemProps {
     /** [align-self](https://css-tricks.com/almanac/properties/a/align-self/) */

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,OAAc,EAAE,iBAAiB,EAA+B,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAG9F,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,sFAAsF;IACtF,OAAO,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,SAAS,GAAG,QAAQ,GAAG,QAAQ,CAAC;IACvE,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,8HAA8H;IAC9H,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;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,MAAM,WAAW,SAAU,SAAQ,SAAS,EAAE,MAAM;IAClD,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,kJAAkJ;IAClJ,SAAS,CAAC,EAAE,kBAAkB,GAAG,OAAO,CAAC;IACzC,6HAA6H;IAC7H,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,gCAAgC;IAChC,GAAG,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC,CAAC;CACpB;AA8GD,eAAO,MAAM,UAAU,gHAKrB,CAAC;AAIH,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":"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,MAAM,WAAW,SAAU,SAAQ,SAAS,EAAE,MAAM;IAClD,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,kJAAkJ;IAClJ,SAAS,CAAC,EAAE,kBAAkB,GAAG,OAAO,CAAC;IACzC,6HAA6H;IAC7H,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,gCAAgC;IAChC,GAAG,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC,CAAC;CACpB;AA2HD,eAAO,MAAM,UAAU,gHAKrB,CAAC;AAIH,QAAA,MAAM,IAAI,EAAE,iBAAiB,CAAC,SAAS,GAAG,YAAY,CAIrD,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/lib/components/Flex/Flex.js

@@ -1,4 +1,5 @@
-import React, { forwardRef } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 import { defaultThemeProp } from '../../theme';
 const prefix = (value) => {
@@ -66,6 +67,21 @@ const getContainerStyles = (container) => {
             }
           }
         `}
+
+      ${typeof container.gap !== 'undefined' &&
+            css `
+        gap: calc(${container.gap} * ${props => props.theme.base.spacing});
+      `}
+
+      ${typeof container.colGap !== 'undefined' &&
+            css `
+        column-gap: calc(${container.colGap} * ${props => props.theme.base.spacing});
+      `}
+
+      ${typeof container.rowGap !== 'undefined' &&
+            css `
+        row-gap: calc(${container.rowGap} * ${props => props.theme.base.spacing});
+      `}
     `;
     }
 };
@@ -78,14 +94,12 @@ const getItemStyles = (item) => {
 
       ${item.grow !== undefined &&
             css `
-        /* stylelint-disable-next-line function-name-case */
-        flex-grow: ${Number(item.grow)};
+        flex-grow: ${item.grow};
       `}
 
       ${item.shrink !== undefined &&
             css `
-        /* stylelint-disable-next-line function-name-case */
-        flex-shrink: ${Number(item.shrink)};
+        flex-shrink: ${item.shrink};
       `}
 
       ${item.alignSelf &&
@@ -108,7 +122,7 @@ export const StyledFlex = styled.div(({ container, item }) => {
 });
 StyledFlex.defaultProps = defaultThemeProp;
 const Flex = forwardRef((props, ref) => {
-    return React.createElement(StyledFlex, { ...props, ref: ref });
+    return _jsx(StyledFlex, { ...props, ref: ref }, void 0);
 });
 export default Flex;
 //# sourceMappingURL=Flex.js.map

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 React, { 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://css-tricks.com/almanac/properties/j/justify-content/) */\n  justify?: 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly';\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  /** Defines how much equal space to place between items represented as a multiplier to the base spacing value in the theme. */\n  itemGap?: 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 FlexProps extends BaseProps, AsProp {\n  /** Content for either a container or item. */\n  children?: ReactNode;\n  /** Display as flex. Passed as a boolean, only a display flex will be applied. Provide FlexContainer object props to enable flex functionality. */\n  container?: FlexContainerProps | boolean;\n  /** Use to leverage flex item functionality when rendered as a child of a flex container. Items can be containers as well. */\n  item?: FlexItemProps;\n  /** Ref for the flex element. */\n  ref?: Ref<Element>;\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      ${typeof 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  }\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        /* stylelint-disable-next-line function-name-case */\n        flex-grow: ${Number(item.grow)};\n      `}\n\n      ${item.shrink !== undefined &&\n      css`\n        /* stylelint-disable-next-line function-name-case */\n        flex-shrink: ${Number(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\nexport const StyledFlex = styled.div<FlexProps>(({ container, item }) => {\n  return css`\n    ${getContainerStyles(container)}\n    ${getItemStyles(item)}\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 } 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 FlexProps extends BaseProps, AsProp {\n  /** Content for either a container or item. */\n  children?: ReactNode;\n  /** Display as flex. Passed as a boolean, only a display flex will be applied. Provide FlexContainer object props to enable flex functionality. */\n  container?: FlexContainerProps | boolean;\n  /** Use to leverage flex item functionality when rendered as a child of a flex container. Items can be containers as well. */\n  item?: FlexItemProps;\n  /** Ref for the flex element. */\n  ref?: Ref<Element>;\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      ${typeof 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      ${typeof container.gap !== 'undefined' &&\n      css`\n        gap: calc(${container.gap} * ${props => props.theme.base.spacing});\n      `}\n\n      ${typeof container.colGap !== 'undefined' &&\n      css`\n        column-gap: calc(${container.colGap} * ${props => props.theme.base.spacing});\n      `}\n\n      ${typeof 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\nexport const StyledFlex = styled.div<FlexProps>(({ container, item }) => {\n  return css`\n    ${getContainerStyles(container)}\n    ${getItemStyles(item)}\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"]}