@pega/cosmos-react-core 4.0.0-dev.2.0 → 4.0.0-dev.21.0

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,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"]}
+{"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,gBAAgB,EAAE,MAAM,WAAW,CAAC;AACrD,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,gBAAgB;;gCAEd,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, { StyledButtonLink } 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} + ${StyledButtonLink} {\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/FileUploadItem.d.ts

@@ -3,6 +3,10 @@ import { ForwardProps, BaseProps, NoChildrenProp } from '../../types';
 export interface FileUploadItemProps extends BaseProps, NoChildrenProp {
     /** Name of the file. */
     name: string;
+    /** Id applied to upload item */
+    id?: string;
+    /** File blob */
+    File?: File;
     /** A FileUploadVisual element to represent the file. */
     visual?: ReactElement;
     /** 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. */

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

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

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 {\n  forwardRef,\n  PropsWithoutRef,\n  FC,\n  Ref,\n  ReactElement,\n  useMemo,\n  useState,\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, {\n  StyledPrimary,\n  StyledSecondary,\n  StyledSummaryItemActions,\n  StyledVisual\n} from '../SummaryItem';\nimport Progress, { StyledProgressRing } from '../Progress';\nimport Text from '../Text';\nimport { ForwardProps, BaseProps, NoChildrenProp } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport { useI18n } from '../../hooks';\n\nimport FileVisual from './FileVisual';\nimport { getKindFromMimeType, getMimeTypeFromFile } from './utils';\n\nexport interface FileUploadItemProps extends BaseProps, NoChildrenProp {\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  /** The size of the file. */\n  size?: 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(SummaryItem)<{ hasThumbnail: boolean }>(\n  ({ hasThumbnail, theme }) => {\n    return css`\n      border: 0.0625rem solid ${theme.base.palette['border-line']};\n      border-radius: calc(0.5 * ${theme.base['border-radius']});\n      background-color: ${theme.base.palette['primary-background']};\n      padding: calc(0.5 * ${theme.base.spacing});\n      min-height: 3rem;\n\n      ${StyledProgressRing} {\n        height: ${theme.components.input.height};\n        width: ${theme.components.input.height};\n      }\n\n      ${hasThumbnail &&\n      css`\n        height: calc(6rem + ${theme.base.spacing});\n        grid-row: span 2;\n        grid-template-columns: auto minmax(0, 1fr) auto;\n\n        ${StyledVisual} {\n          align-self: auto;\n          width: calc(6rem - 0.125rem);\n          height: calc(6rem - 0.125rem);\n        }\n\n        ${StyledPrimary} {\n          align-self: start;\n          margin-block-start: calc(0.5 * ${theme.base.spacing});\n        }\n\n        ${StyledSecondary} {\n          grid-area: primary;\n          align-self: center;\n          margin-block-start: calc(3 * ${theme.base.spacing});\n        }\n\n        ${StyledSummaryItemActions} {\n          align-self: start;\n        }\n      `}\n    `;\n  }\n);\n\nStyledFileUploadItem.defaultProps = defaultThemeProp;\n\nconst FileUploadItem: FC<FileUploadItemProps & ForwardProps> = forwardRef(\n  (\n    {\n      name,\n      meta,\n      error = false,\n      progress,\n      thumbnail,\n      onCancel,\n      onEdit,\n      onPreview,\n      onDownload,\n      onDelete,\n      size,\n      ...restProps\n    }: PropsWithoutRef<FileUploadItemProps>,\n    ref: FileUploadItemProps['ref']\n  ) => {\n    const t = useI18n();\n    const [thumbnailError, setThumbnailError] = useState(false);\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    const type = getKindFromMimeType(getMimeTypeFromFile(name) ?? '');\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, i) => (\n            // eslint-disable-next-line react/no-array-index-key\n            <Text key={i} 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\n      return (\n        <FileVisual\n          type={type}\n          thumbnail={thumbnailError ? undefined : thumbnail}\n          onThumbnailError={() => {\n            setThumbnailError(true);\n          }}\n        />\n      );\n    }, [progress, thumbnail, thumbnailError]);\n\n    return (\n      <StyledFileUploadItem\n        {...restProps}\n        forwardedAs='li'\n        hasThumbnail={\n          thumbnail && !thumbnailError && (progress === 100 || progress === undefined) && !error\n        }\n        ref={ref}\n        visual={visual}\n        primary={name}\n        secondary={metaContent}\n        actions={actions}\n        overflowStrategy='ellipsis'\n      />\n    );\n  }\n);\n\nexport default FileUploadItem;\n"]}
+{"version":3,"file":"FileUploadItem.js","sourceRoot":"","sources":["../../../src/components/File/FileUploadItem.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,UAAU,EAKV,OAAO,EACP,QAAQ,EAET,MAAM,OAAO,CAAC;AACf,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,UAAU,MAAM,eAAe,CAAC;AACvC,OAAO,QAAQ,MAAM,aAAa,CAAC;AACnC,OAAO,WAAW,EAAE,EAClB,aAAa,EACb,eAAe,EACf,wBAAwB,EACxB,YAAY,EACb,MAAM,gBAAgB,CAAC;AACxB,OAAO,QAAQ,EAAE,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAC3D,OAAO,IAAI,MAAM,SAAS,CAAC;AAE3B,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAEtC,OAAO,UAAU,MAAM,cAAc,CAAC;AACtC,OAAO,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AA4CnE,MAAM,oBAAoB,GAAG,MAAM,CAAC,WAAW,CAAC,CAC9C,CAAC,EAAE,YAAY,EAAE,KAAK,EAAE,EAAE,EAAE;IAC1B,OAAO,GAAG,CAAA;gCACkB,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;kCAC/B,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;0BACnC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC;4BACtC,KAAK,CAAC,IAAI,CAAC,OAAO;;;QAGtC,kBAAkB;kBACR,KAAK,CAAC,UAAU,CAAC,KAAK,CAAC,MAAM;iBAC9B,KAAK,CAAC,UAAU,CAAC,KAAK,CAAC,MAAM;;;QAGtC,YAAY;QACd,GAAG,CAAA;8BACqB,KAAK,CAAC,IAAI,CAAC,OAAO;;;;UAItC,YAAY;;;;;;UAMZ,aAAa;;2CAEoB,KAAK,CAAC,IAAI,CAAC,OAAO;;;UAGnD,eAAe;;;yCAGgB,KAAK,CAAC,IAAI,CAAC,OAAO;;;UAGjD,wBAAwB;;;OAG3B;KACF,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAErD,MAAM,cAAc,GAA2C,UAAU,CACvE,CACE,EACE,IAAI,EACJ,IAAI,EACJ,KAAK,GAAG,KAAK,EACb,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,MAAM,EACN,SAAS,EACT,UAAU,EACV,QAAQ,EACR,IAAI,EACJ,GAAG,SAAS,EACyB,EACvC,GAA+B,EAC/B,EAAE;IACF,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE5D,MAAM,cAAc,GAAiB,OAAO,CAC1C,GAAG,EAAE,CACH;QACE,EAAE,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE;QAClD,EAAE,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC,MAAM,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE;QAC/C,EAAE,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC,SAAS,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE;QAClD,EAAE,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,CAAC,UAAU,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE;QACzD,EAAE,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE;KACnD,CAAC,MAAM,CAAa,CAAC,MAAM,EAAwB,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,EAAE,CAAC,EACrE,CAAC,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,UAAU,EAAE,QAAQ,CAAC,CACpD,CAAC;IAEF,IAAI,WAAW,GAAc,IAAI,CAAC;IAClC,IAAI,OAAiC,CAAC;IAEtC,MAAM,IAAI,GAAG,mBAAmB,CAAC,mBAAmB,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;IAElE,IAAI,OAAO,QAAQ,KAAK,QAAQ,IAAI,QAAQ,GAAG,GAAG,EAAE;QAClD,WAAW,GAAG,GAAG,CAAC,CAAC,WAAW,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC;KAC5D;IAED,IAAI,KAAK,CAAC,OAAO,CAAC,WAAW,CAAC,EAAE;QAC9B,WAAW,GAAG,CACZ,KAAC,QAAQ,IACP,KAAK,EAAE,WAAW,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,CAAC;YAClC,oDAAoD;YACpD,KAAC,IAAI,IAAS,OAAO,EAAC,WAAW,EAAC,MAAM,EAAE,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,YAClE,IAAI,IADI,CAAC,CAEL,CACR,CAAC,GACF,CACH,CAAC;KACH;SAAM,IAAI,OAAO,WAAW,KAAK,QAAQ,EAAE;QAC1C,WAAW,GAAG,CACZ,KAAC,IAAI,IAAC,OAAO,EAAC,WAAW,EAAC,MAAM,EAAE,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,YAC1D,WAAW,GACP,CACR,CAAC;KACH;IAED,IAAI,cAAc,CAAC,MAAM,KAAK,CAAC,EAAE;QAC/B,MAAM,MAAM,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC;QAEjC,OAAO,GAAG,CACR,KAAC,MAAM,IACL,IAAI,QACJ,OAAO,EAAC,QAAQ,EAChB,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,gBACpB,GAAG,MAAM,CAAC,IAAI,IAAI,IAAI,EAAE,YAEpC,KAAC,IAAI,IAAC,IAAI,EAAE,MAAM,CAAC,IAAI,GAAI,GACpB,CACV,CAAC;KACH;SAAM,IAAI,cAAc,CAAC,MAAM,GAAG,CAAC,EAAE;QACpC,OAAO,GAAG,CACR,KAAC,UAAU,IACT,IAAI,EAAE,CAAC,CAAC,SAAS,CAAC,EAClB,QAAQ,QACR,IAAI,EAAC,MAAM,EACX,OAAO,EAAC,QAAQ,EAChB,IAAI,EAAE;gBACJ,KAAK,EAAE,cAAc,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;oBACnC,EAAE,EAAE,MAAM,CAAC,IAAI;oBACf,OAAO,EAAE,MAAM,CAAC,IAAI;oBACpB,OAAO,EAAE,GAAG,EAAE;wBACZ,MAAM,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC;oBAClB,CAAC;iBACF,CAAC,CAAC;aACJ,GACD,CACH,CAAC;KACH;IAED,MAAM,MAAM,GAAG,OAAO,CAAC,GAAG,EAAE;QAC1B,IAAI,OAAO,QAAQ,KAAK,QAAQ,IAAI,QAAQ,KAAK,GAAG,EAAE;YACpD,OAAO,KAAC,QAAQ,IAAC,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAC,QAAQ,EAAC,OAAO,EAAC,MAAM,GAAG,CAAC;SACxE;QAED,OAAO,CACL,KAAC,UAAU,IACT,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EACjD,gBAAgB,EAAE,GAAG,EAAE;gBACrB,iBAAiB,CAAC,IAAI,CAAC,CAAC;YAC1B,CAAC,GACD,CACH,CAAC;IACJ,CAAC,EAAE,CAAC,QAAQ,EAAE,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC;IAE1C,OAAO,CACL,KAAC,oBAAoB,OACf,SAAS,EACb,WAAW,EAAC,IAAI,EAChB,YAAY,EACV,SAAS,IAAI,CAAC,cAAc,IAAI,CAAC,QAAQ,KAAK,GAAG,IAAI,QAAQ,KAAK,SAAS,CAAC,IAAI,CAAC,KAAK,EAExF,GAAG,EAAE,GAAG,EACR,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,IAAI,EACb,SAAS,EAAE,WAAW,EACtB,OAAO,EAAE,OAAO,EAChB,gBAAgB,EAAC,UAAU,GAC3B,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["import {\n  forwardRef,\n  PropsWithoutRef,\n  FC,\n  Ref,\n  ReactElement,\n  useMemo,\n  useState,\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, {\n  StyledPrimary,\n  StyledSecondary,\n  StyledSummaryItemActions,\n  StyledVisual\n} from '../SummaryItem';\nimport Progress, { StyledProgressRing } from '../Progress';\nimport Text from '../Text';\nimport { ForwardProps, BaseProps, NoChildrenProp } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport { useI18n } from '../../hooks';\n\nimport FileVisual from './FileVisual';\nimport { getKindFromMimeType, getMimeTypeFromFile } from './utils';\n\nexport interface FileUploadItemProps extends BaseProps, NoChildrenProp {\n  /** Name of the file. */\n  name: string;\n  /** Id applied to upload item */\n  id?: string;\n  /** File blob */\n  File?: File;\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  /** The size of the file. */\n  size?: 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(SummaryItem)<{ hasThumbnail: boolean }>(\n  ({ hasThumbnail, theme }) => {\n    return css`\n      border: 0.0625rem solid ${theme.base.palette['border-line']};\n      border-radius: calc(0.5 * ${theme.base['border-radius']});\n      background-color: ${theme.base.palette['primary-background']};\n      padding: calc(0.5 * ${theme.base.spacing});\n      min-height: 3rem;\n\n      ${StyledProgressRing} {\n        height: ${theme.components.input.height};\n        width: ${theme.components.input.height};\n      }\n\n      ${hasThumbnail &&\n      css`\n        height: calc(6rem + ${theme.base.spacing});\n        grid-row: span 2;\n        grid-template-columns: auto minmax(0, 1fr) auto;\n\n        ${StyledVisual} {\n          align-self: auto;\n          width: calc(6rem - 0.125rem);\n          height: calc(6rem - 0.125rem);\n        }\n\n        ${StyledPrimary} {\n          align-self: start;\n          margin-block-start: calc(0.5 * ${theme.base.spacing});\n        }\n\n        ${StyledSecondary} {\n          grid-area: primary;\n          align-self: center;\n          margin-block-start: calc(3 * ${theme.base.spacing});\n        }\n\n        ${StyledSummaryItemActions} {\n          align-self: start;\n        }\n      `}\n    `;\n  }\n);\n\nStyledFileUploadItem.defaultProps = defaultThemeProp;\n\nconst FileUploadItem: FC<FileUploadItemProps & ForwardProps> = forwardRef(\n  (\n    {\n      name,\n      meta,\n      error = false,\n      progress,\n      thumbnail,\n      onCancel,\n      onEdit,\n      onPreview,\n      onDownload,\n      onDelete,\n      size,\n      ...restProps\n    }: PropsWithoutRef<FileUploadItemProps>,\n    ref: FileUploadItemProps['ref']\n  ) => {\n    const t = useI18n();\n    const [thumbnailError, setThumbnailError] = useState(false);\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    const type = getKindFromMimeType(getMimeTypeFromFile(name) ?? '');\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, i) => (\n            // eslint-disable-next-line react/no-array-index-key\n            <Text key={i} 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\n      return (\n        <FileVisual\n          type={type}\n          thumbnail={thumbnailError ? undefined : thumbnail}\n          onThumbnailError={() => {\n            setThumbnailError(true);\n          }}\n        />\n      );\n    }, [progress, thumbnail, thumbnailError]);\n\n    return (\n      <StyledFileUploadItem\n        {...restProps}\n        forwardedAs='li'\n        hasThumbnail={\n          thumbnail && !thumbnailError && (progress === 100 || progress === undefined) && !error\n        }\n        ref={ref}\n        visual={visual}\n        primary={name}\n        secondary={metaContent}\n        actions={actions}\n        overflowStrategy='ellipsis'\n      />\n    );\n  }\n);\n\nexport default FileUploadItem;\n"]}

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

@@ -1,11 +1,12 @@
 export { default as FileInput } from './FileInput';
-export { FileInputProps } from './FileInput';
-export { default as FileItem, FileItemProps } from './FileItem';
+export type { FileInputProps } from './FileInput';
+export { default as FileItem } from './FileItem';
+export type { FileItemProps } from './FileItem';
 export { default as FileUploadItem } from './FileUploadItem';
-export { FileUploadItemProps } from './FileUploadItem';
+export type { FileUploadItemProps } from './FileUploadItem';
 export { default as FileDisplay } from './FileDisplay';
-export { FileDisplayProps } from './FileDisplay';
+export type { FileDisplayProps } from './FileDisplay';
 export { default as FileVisual } from './FileVisual';
-export { FileVisualProps } from './FileVisual';
+export type { 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,QAAQ,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAChE,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"}
+{"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,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,YAAY,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC"}

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,QAAQ,EAAiB,MAAM,YAAY,CAAC;AAChE,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 FileItem, FileItemProps } from './FileItem';\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"]}
+{"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,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEjD,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 type { FileInputProps } from './FileInput';\nexport { default as FileItem } from './FileItem';\nexport type { FileItemProps } from './FileItem';\nexport { default as FileUploadItem } from './FileUploadItem';\nexport type { FileUploadItemProps } from './FileUploadItem';\nexport { default as FileDisplay } from './FileDisplay';\nexport type { FileDisplayProps } from './FileDisplay';\nexport { default as FileVisual } from './FileVisual';\nexport type { FileVisualProps } from './FileVisual';\nexport { getKindFromMimeType, getMimeTypeFromFile } from './utils';\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' | 'database' | 'document' | 'spreadsheet' | 'presentation';
+export 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,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,MAAM,MAAM,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/Flex/Flex.d.ts

@@ -1,10 +1,16 @@
 import { FunctionComponent, Ref, ReactNode } from 'react';
 import { ForwardProps, BaseProps, AsProp, RequireAtLeastOne } from '../../types';
+type PaddingValue = number | undefined;
 export interface FlexContainerProps {
     /** Display as inline-flex. */
     inline?: boolean;
     /** Padding on the container represented as a multiplier or set of multipliers to the base spacing value in the theme. */
-    pad?: number | [topRightBottomLeft: number] | [topBottom: number, rightLeft: number] | [top: number, rightLeft: number, bottom: number] | [top: number, right: number, bottom: number, left: number];
+    pad?: number | [blockInline: PaddingValue] | [block: PaddingValue, inline: PaddingValue] | [blockStart: PaddingValue, inline: PaddingValue, blockEnd: PaddingValue] | [
+        blockStart: PaddingValue,
+        inlineEnd: PaddingValue,
+        inlineStart: PaddingValue,
+        blockEnd: PaddingValue
+    ];
     /** [flex-direction](https://css-tricks.com/almanac/properties/f/flex-direction/) */
     direction?: 'row' | 'row-reverse' | 'column' | 'column-reverse';
     /** [justify-content](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content) */
@@ -50,8 +56,8 @@ export interface BaseFlexProps {
     container?: FlexContainerProps | true;
     item?: FlexItemProps;
 }
-declare type BreakpointFlexProps = RequireAtLeastOne<BaseFlexProps, 'container' | 'item'>;
-export declare type FlexProps = RequireAtLeastOne<BaseFlexProps & BaseProps & AsProp & {
+type BreakpointFlexProps = RequireAtLeastOne<BaseFlexProps, 'container' | 'item'>;
+export type FlexProps = RequireAtLeastOne<BaseFlexProps & BaseProps & AsProp & {
     /** Content for either a container or item. */
     children?: ReactNode;
     /** Ref for the flex element. */

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":"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"}
+{"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

@@ -9,7 +9,24 @@ const prefix = (value) => {
         return `flex-${value}`;
     return value;
 };
-const getContainerStyles = (container) => {
+const getLogicalPadding = (pad) => {
+    if (!Array.isArray(pad)) {
+        return [pad, pad, pad, pad];
+    }
+    switch (pad.length) {
+        case 1:
+            return [pad[0], pad[0], pad[0], pad[0]];
+        case 2:
+            return [pad[0], pad[1], pad[0], pad[1]];
+        case 3:
+            return [pad[0], pad[1], pad[2], pad[1]];
+        case 4:
+            return pad;
+        default:
+            return [undefined, undefined, undefined, undefined];
+    }
+};
+const getContainerStyles = (container, spacing) => {
     if (!container)
         return '';
     if (container === true) {
@@ -17,20 +34,30 @@ const getContainerStyles = (container) => {
       display: flex;
     `;
     }
+    const paddingConfig = getLogicalPadding(container.pad);
     if (container && typeof container === 'object') {
         const isRow = !container.direction || container.direction.includes('row');
         const isReverse = container.direction && container.direction.includes('reverse');
         return css `
       display: ${container.inline ? 'inline-flex' : 'flex'};
 
-      ${container.pad !== undefined &&
+      ${paddingConfig[0] !== undefined &&
+            css `
+        padding-block-start: calc(${paddingConfig[0]} * ${spacing});
+      `}
+      ${paddingConfig[1] !== undefined &&
+            css `
+        padding-inline-end: calc(${paddingConfig[1]} * ${spacing});
+      `}
+
+        ${paddingConfig[2] !== undefined &&
             css `
-        /* stylelint-disable function-name-case, function-whitespace-after */
-        padding: ${({ theme: { base: { spacing } } }) => (Array.isArray(container.pad) ? container.pad : [container.pad])
-                .map(p => `calc(${p} * ${spacing})`)
-                .join(' ')};
+        padding-block-end: calc(${paddingConfig[2]} * ${spacing});
+      `}
 
-        /* stylelint-enable function-name-case, function-whitespace-after */
+        ${paddingConfig[3] !== undefined &&
+            css `
+        padding-inline-start: calc(${paddingConfig[3]} * ${spacing});
       `}
 
       ${container.direction &&
@@ -115,7 +142,7 @@ const getItemStyles = (item) => {
   `;
 };
 const breakpointOrder = ['xs', 'sm', 'md', 'lg', 'xl'];
-export const StyledFlex = styled.div(({ container, item, theme: { base: { breakpoints: themeBreakpoints } }, xs, sm, md, lg, xl }) => {
+export const StyledFlex = styled.div(({ container, item, theme: { base: { breakpoints: themeBreakpoints, spacing } }, xs, sm, md, lg, xl }) => {
     const breakpoints = {
         xs,
         sm,
@@ -124,13 +151,13 @@ export const StyledFlex = styled.div(({ container, item, theme: { base: { breakp
         xl
     };
     return css `
-      ${getContainerStyles(container)}
+      ${getContainerStyles(container, spacing)}
       ${getItemStyles(item)}
 
     ${breakpointOrder.map(breakpoint => breakpoints[breakpoint] &&
         css `
             @media screen and (min-width: ${themeBreakpoints[breakpoint]}) {
-              ${getContainerStyles(breakpoints[breakpoint]?.container)}
+              ${getContainerStyles(breakpoints[breakpoint]?.container, spacing)}
               ${getItemStyles(breakpoints[breakpoint]?.item)}
             }
           `)}

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, 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"]}
+{"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\ntype PaddingValue = number | undefined;\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    | [blockInline: PaddingValue]\n    | [block: PaddingValue, inline: PaddingValue]\n    | [blockStart: PaddingValue, inline: PaddingValue, blockEnd: PaddingValue]\n    | [\n        blockStart: PaddingValue,\n        inlineEnd: PaddingValue,\n        inlineStart: PaddingValue,\n        blockEnd: PaddingValue\n      ];\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 getLogicalPadding = (pad: FlexContainerProps['pad']) => {\n  if (!Array.isArray(pad)) {\n    return [pad, pad, pad, pad];\n  }\n\n  switch (pad.length) {\n    case 1:\n      return [pad[0], pad[0], pad[0], pad[0]];\n    case 2:\n      return [pad[0], pad[1], pad[0], pad[1]];\n    case 3:\n      return [pad[0], pad[1], pad[2], pad[1]];\n    case 4:\n      return pad;\n    default:\n      return [undefined, undefined, undefined, undefined];\n  }\n};\n\nconst getContainerStyles = (container: FlexProps['container'], spacing: string) => {\n  if (!container) return '';\n\n  if (container === true) {\n    return css`\n      display: flex;\n    `;\n  }\n\n  const paddingConfig = getLogicalPadding(container.pad);\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      ${paddingConfig[0] !== undefined &&\n      css`\n        padding-block-start: calc(${paddingConfig[0]} * ${spacing});\n      `}\n      ${paddingConfig[1] !== undefined &&\n      css`\n        padding-inline-end: calc(${paddingConfig[1]} * ${spacing});\n      `}\n\n        ${paddingConfig[2] !== undefined &&\n      css`\n        padding-block-end: calc(${paddingConfig[2]} * ${spacing});\n      `}\n\n        ${paddingConfig[3] !== undefined &&\n      css`\n        padding-inline-start: calc(${paddingConfig[3]} * ${spacing});\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, spacing }\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, spacing)}\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, spacing)}\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/Flex/index.d.ts

@@ -1,6 +1,3 @@
-export { default } from './Flex';
-export { StyledFlex } from './Flex';
-export { FlexProps } from './Flex';
-export { FlexContainerProps } from './Flex';
-export { FlexItemProps } from './Flex';
+export { default, StyledFlex } from './Flex';
+export type { FlexProps, FlexContainerProps, FlexItemProps } from './Flex';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Flex/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACjC,OAAO,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AACpC,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACnC,OAAO,EAAE,kBAAkB,EAAE,MAAM,QAAQ,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Flex/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AAC7C,YAAY,EAAE,SAAS,EAAE,kBAAkB,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAC"}

package/lib/components/Flex/index.js

@@ -1,3 +1,2 @@
-export { default } from './Flex';
-export { StyledFlex } from './Flex';
+export { default, StyledFlex } from './Flex';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Flex/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACjC,OAAO,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC","sourcesContent":["export { default } from './Flex';\nexport { StyledFlex } from './Flex';\nexport { FlexProps } from './Flex';\nexport { FlexContainerProps } from './Flex';\nexport { FlexItemProps } from './Flex';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Flex/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC","sourcesContent":["export { default, StyledFlex } from './Flex';\nexport type { FlexProps, FlexContainerProps, FlexItemProps } from './Flex';\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"Form.d.ts","sourceRoot":"","sources":["../../../src/components/Form/Form.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,EAAE,EAAmB,MAAM,OAAO,CAAC;AAExD,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAGvD,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,sCAAsC,CAAC;AAE1E,MAAM,WAAW,SAAU,SAAQ,UAAU,CAAC,aAAa,EAAE,SAAS,CAAC;IACrE,6HAA6H;IAC7H,QAAQ,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;CACpC;AAED,QAAA,MAAM,IAAI,EAAE,EAAE,CAAC,SAAS,GAAG,YAAY,CA2BtC,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Form.d.ts","sourceRoot":"","sources":["../../../src/components/Form/Form.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,EAAE,EAAmB,MAAM,OAAO,CAAC;AAExD,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAGvD,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,sCAAsC,CAAC;AAE1E,MAAM,WAAW,SAAU,SAAQ,UAAU,CAAC,aAAa,EAAE,SAAS,CAAC;IACrE,6HAA6H;IAC7H,QAAQ,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;CACpC;AAED,QAAA,MAAM,IAAI,EAAE,EAAE,CAAC,SAAS,GAAG,YAAY,CAoCtC,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/lib/components/Form/Form.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { useUID } from '../../hooks';
 import MultiStepForm from '../MultiStepForm';
-const Form = forwardRef(({ children, actions, heading, description, banners, ...restProps }, ref) => {
+const Form = forwardRef(({ children, actions, progress, heading, description, banners, ...restProps }, ref) => {
     const stepId = useUID();
     return (_jsx(MultiStepForm, { ...restProps, heading: heading, steps: [
             {
@@ -13,7 +13,7 @@ const Form = forwardRef(({ children, actions, heading, description, banners, ...
                 description,
                 banners
             }
-        ], currentStepId: stepId, ref: ref, autoComplete: 'off' }));
+        ], currentStepId: stepId, progress: progress, ref: ref, autoComplete: 'off' }));
 });
 export default Form;
 //# sourceMappingURL=Form.js.map

package/lib/components/Form/Form.js.map

@@ -1 +1 @@
-{"version":3,"file":"Form.js","sourceRoot":"","sources":["../../../src/components/Form/Form.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAuB,MAAM,OAAO,CAAC;AAGxD,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,aAAa,MAAM,kBAAkB,CAAC;AAQ7C,MAAM,IAAI,GAAiC,UAAU,CACnD,CACE,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,GAAG,SAAS,EAA8B,EAC9F,GAAqB,EACrB,EAAE;IACF,MAAM,MAAM,GAAG,MAAM,EAAE,CAAC;IAExB,OAAO,CACL,KAAC,aAAa,OACR,SAAS,EACb,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE;YACL;gBACE,EAAE,EAAE,MAAM;gBACV,IAAI,EAAE,EAAE;gBACR,OAAO;gBACP,OAAO,EAAE,QAAQ;gBACjB,WAAW;gBACX,OAAO;aACR;SACF,EACD,aAAa,EAAE,MAAM,EACrB,GAAG,EAAE,GAAG,EACR,YAAY,EAAC,KAAK,GAClB,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,IAAI,CAAC","sourcesContent":["import { forwardRef, FC, PropsWithoutRef } from 'react';\n\nimport { ForwardProps, OmitStrict } from '../../types';\nimport { useUID } from '../../hooks';\nimport MultiStepForm from '../MultiStepForm';\nimport { type BaseFormProps } from '../MultiStepForm/MultiStepForm.types';\n\nexport interface FormProps extends OmitStrict<BaseFormProps, 'content'> {\n  /** The Form content. Recommended composing form elements within a layout template such as Grid or Flex as the only child. */\n  children: BaseFormProps['content'];\n}\n\nconst Form: FC<FormProps & ForwardProps> = forwardRef(\n  (\n    { children, actions, heading, description, banners, ...restProps }: PropsWithoutRef<FormProps>,\n    ref: FormProps['ref']\n  ) => {\n    const stepId = useUID();\n\n    return (\n      <MultiStepForm\n        {...restProps}\n        heading={heading}\n        steps={[\n          {\n            id: stepId,\n            name: '',\n            actions,\n            content: children,\n            description,\n            banners\n          }\n        ]}\n        currentStepId={stepId}\n        ref={ref}\n        autoComplete='off'\n      />\n    );\n  }\n);\n\nexport default Form;\n"]}
+{"version":3,"file":"Form.js","sourceRoot":"","sources":["../../../src/components/Form/Form.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAuB,MAAM,OAAO,CAAC;AAGxD,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,aAAa,MAAM,kBAAkB,CAAC;AAQ7C,MAAM,IAAI,GAAiC,UAAU,CACnD,CACE,EACE,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,OAAO,EACP,WAAW,EACX,OAAO,EACP,GAAG,SAAS,EACe,EAC7B,GAAqB,EACrB,EAAE;IACF,MAAM,MAAM,GAAG,MAAM,EAAE,CAAC;IAExB,OAAO,CACL,KAAC,aAAa,OACR,SAAS,EACb,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE;YACL;gBACE,EAAE,EAAE,MAAM;gBACV,IAAI,EAAE,EAAE;gBACR,OAAO;gBACP,OAAO,EAAE,QAAQ;gBACjB,WAAW;gBACX,OAAO;aACR;SACF,EACD,aAAa,EAAE,MAAM,EACrB,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,GAAG,EACR,YAAY,EAAC,KAAK,GAClB,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,IAAI,CAAC","sourcesContent":["import { forwardRef, FC, PropsWithoutRef } from 'react';\n\nimport { ForwardProps, OmitStrict } from '../../types';\nimport { useUID } from '../../hooks';\nimport MultiStepForm from '../MultiStepForm';\nimport { type BaseFormProps } from '../MultiStepForm/MultiStepForm.types';\n\nexport interface FormProps extends OmitStrict<BaseFormProps, 'content'> {\n  /** The Form content. Recommended composing form elements within a layout template such as Grid or Flex as the only child. */\n  children: BaseFormProps['content'];\n}\n\nconst Form: FC<FormProps & ForwardProps> = forwardRef(\n  (\n    {\n      children,\n      actions,\n      progress,\n      heading,\n      description,\n      banners,\n      ...restProps\n    }: PropsWithoutRef<FormProps>,\n    ref: FormProps['ref']\n  ) => {\n    const stepId = useUID();\n\n    return (\n      <MultiStepForm\n        {...restProps}\n        heading={heading}\n        steps={[\n          {\n            id: stepId,\n            name: '',\n            actions,\n            content: children,\n            description,\n            banners\n          }\n        ]}\n        currentStepId={stepId}\n        progress={progress}\n        ref={ref}\n        autoComplete='off'\n      />\n    );\n  }\n);\n\nexport default Form;\n"]}

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

@@ -1,3 +1,3 @@
 export { default } from './Form';
-export { FormProps } from './Form';
+export type { FormProps } from './Form';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Form/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACjC,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Form/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACjC,YAAY,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Form/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC","sourcesContent":["export { default } from './Form';\nexport { FormProps } from './Form';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Form/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC","sourcesContent":["export { default } from './Form';\nexport type { FormProps } from './Form';\n"]}

package/lib/components/FormControl/FormControl.d.ts

@@ -19,7 +19,7 @@ export interface FormControlProps extends BaseProps {
     required?: boolean;
     /** Placeholder text. The browser defaults to an empty string. */
     placeholder?: string;
-    /**  Button when clicked will show additional information on a field */
+    /** Button when clicked will show additional information on a field */
     additionalInfo?: {
         heading: AdditionalInfoProps['heading'];
         content: AdditionalInfoProps['children'];
@@ -30,7 +30,8 @@ export interface FormControlProps extends BaseProps {
      */
     value?: string;
     /**
-     * If you wish to use an [uncontrolled input](https://reactjs.org/docs/uncontrolled-components.html), pass a defaultValue prop and a ref to access the input's native value prop or by other DOM ref means.
+     * If you wish to use an [uncontrolled input](https://reactjs.org/docs/uncontrolled-components.html),
+     * pass a defaultValue prop and a ref to access the input's native value prop or by other DOM ref means.
      */
     defaultValue?: string;
     /** Disable the control. The browser defaults to false. */
@@ -42,7 +43,11 @@ export interface FormControlProps extends BaseProps {
     /** Callback fired when AI suggestion is accepted/rejected */
     onResolveSuggestion?: (accepted: boolean) => void;
 }
-export declare const StyledFormControl: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../../types").OmitStrict<FormControlProps, never> & Required<Pick<FormControlProps, never>> & {
+export interface HandleValue {
+    /** Used to clear component inputs with imperative handle */
+    clear: () => void;
+}
+export declare const StyledFormControl: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, Pick<FormControlProps, keyof FormControlProps> & Required<Pick<FormControlProps, never>> & {
     hasSuggestion?: boolean | undefined;
 }, never>;
 declare const FormControl: FunctionComponent<FormControlProps & ForwardProps>;

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

@@ -1 +1 @@
-{"version":3,"file":"FormControl.d.ts","sourceRoot":"","sources":["../../../src/components/FormControl/FormControl.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAwB,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvF,OAAO,EAAE,SAAS,EAAE,YAAY,EAAqB,MAAM,aAAa,CAAC;AAGzE,OAAO,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAExD,MAAM,WAAW,gBAAiB,SAAQ,SAAS;IACjD;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,oDAAoD;IACpD,MAAM,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;IACrD,2DAA2D;IAC3D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,uCAAuC;IACvC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,6GAA6G;IAC7G,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,wEAAwE;IACxE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iEAAiE;IACjE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,uEAAuE;IACvE,cAAc,CAAC,EAAE;QACf,OAAO,EAAE,mBAAmB,CAAC,SAAS,CAAC,CAAC;QACxC,OAAO,EAAE,mBAAmB,CAAC,UAAU,CAAC,CAAC;KAC1C,CAAC;IACF;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qFAAqF;IACrF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+FAA+F;IAC/F,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,6DAA6D;IAC7D,mBAAmB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;CACnD;AAID,eAAO,MAAM,iBAAiB;;SA2G7B,CAAC;AAIF,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,CAInE,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"FormControl.d.ts","sourceRoot":"","sources":["../../../src/components/FormControl/FormControl.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAwB,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvF,OAAO,EAAE,SAAS,EAAE,YAAY,EAAqB,MAAM,aAAa,CAAC;AAGzE,OAAO,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAExD,MAAM,WAAW,gBAAiB,SAAQ,SAAS;IACjD;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,oDAAoD;IACpD,MAAM,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;IACrD,2DAA2D;IAC3D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,uCAAuC;IACvC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,6GAA6G;IAC7G,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,wEAAwE;IACxE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iEAAiE;IACjE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sEAAsE;IACtE,cAAc,CAAC,EAAE;QACf,OAAO,EAAE,mBAAmB,CAAC,SAAS,CAAC,CAAC;QACxC,OAAO,EAAE,mBAAmB,CAAC,UAAU,CAAC,CAAC;KAC1C,CAAC;IACF;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qFAAqF;IACrF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+FAA+F;IAC/F,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,6DAA6D;IAC7D,mBAAmB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;CACnD;AAID,MAAM,WAAW,WAAW;IAC1B,4DAA4D;IAC5D,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAED,eAAO,MAAM,iBAAiB;;SA6G7B,CAAC;AAIF,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,CAInE,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/lib/components/FormControl/FormControl.js

@@ -17,7 +17,9 @@ export const StyledFormControl = styled.div(({ theme: { base: { 'border-radius':
       border-color: ${borderColor};
       border-width: ${borderWidth};
       border-style: solid;
-      transition: all ${timing.ease} ${speed};
+      transition-property: color, background-color, border-color;
+      transition-duration: ${speed};
+      transition-timing-function: ${timing.ease};
       &,
       & > select {
         outline: none;

package/lib/components/FormControl/FormControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormControl.js","sourceRoot":"","sources":["../../../src/components/FormControl/FormControl.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAsD,MAAM,OAAO,CAAC;AACvF,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAGrC,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AA+CjD,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAGzC,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EACJ,eAAe,EAAE,UAAU,EAC3B,WAAW,EAAE,YAAY,EACzB,YAAY,EAAE,aAAa,EAC3B,SAAS,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,EAC5B,OAAO,EACR,EACD,UAAU,EAAE,EACV,YAAY,EAAE,SAAS,EACvB,cAAc,EAAE,EACd,kBAAkB,EAAE,UAAU,EAC9B,kBAAkB,EAAE,UAAU,EAC9B,cAAc,EAAE,GAAG,EACnB,eAAe,EAAE,MAAM,EACvB,cAAc,EAAE,WAAW,EAC3B,QAAQ,EAAE,EAAE,cAAc,EAAE,gBAAgB,EAAE,EAC9C,QAAQ,EAAE,EAAE,cAAc,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,EAAE,EACpE,WAAW,EAAE,EACX,cAAc,EAAE,mBAAmB,EACnC,kBAAkB,EAAE,uBAAuB,EAC5C,EACD,YAAY,EAAE,EACZ,cAAc,EAAE,mBAAmB,EACnC,kBAAkB,EAAE,uBAAuB,EAC5C,EACF,EACF,EACF,EACD,MAAM,EACN,aAAa,EACd,EAAE,EAAE;IACH,MAAM,QAAQ,GAAG,iBAAiB,CAAC,YAAY,EAAE,aAAa,CAAC,CAAC;IAChE,MAAM,WAAW,GAAG,MAAM,IAAI,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;IAC1F,MAAM,eAAe,GACnB,aAAa,IAAI,MAAM;QACrB,CAAC,CAAC,GAAG,CAAC,GAAG,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,oBAAoB,CAAC,CAAC;QAC5E,CAAC,CAAC,UAAU,CAAC;IAEjB,OAAO,GAAG,CAAA;eACC,UAAU;0BACC,eAAe;4BACb,UAAU,MAAM,MAAM;sBAC5B,WAAW;sBACX,WAAW;;wBAET,MAAM,CAAC,IAAI,IAAI,KAAK;;;;;;;;4BAQhB,uBAAuB;wBAC3B,mBAAmB;;;;;wBAKnB,gBAAgB;sBAClB,MAAM;UAClB,aAAa;QACf,GAAG,CAAA;8BACmB,UAAU;SAC/B;;;;UAIC,aAAa;QACf,GAAG,CAAA;8BACmB,UAAU;SAC/B;;;;UAIC,CAAC,MAAM;QACT,GAAG,CAAA;0BACe,gBAAgB;SACjC;UACC,aAAa;QACf,GAAG,CAAA;8BACmB,UAAU;uCACD,IAAI,CAAC,WAAW,EAAE,GAAG,CAAC;SACpD;;;QAGD,aAAa;QACf,GAAG,CAAA;;OAEF;;;4BAGqB,uBAAuB;wBAC3B,mBAAmB;;;;;yBAKlB,QAAQ,CAAC,CAAC;;KAE9B,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,MAAM,WAAW,GAAuD,UAAU,CAChF,CAAC,KAAwC,EAAE,GAAwB,EAAE,EAAE;IACrE,OAAO,KAAC,iBAAiB,IAAC,GAAG,EAAE,GAAG,KAAM,KAAK,GAAI,CAAC;AACpD,CAAC,CACF,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\nimport { mix, rgba } from 'polished';\n\nimport { BaseProps, ForwardProps, PropsWithDefaults } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport { calculateFontSize } from '../../styles';\nimport { AdditionalInfoProps } from '../AdditionalInfo';\n\nexport interface FormControlProps extends BaseProps {\n  /**\n   * Sets DOM id for the control and associates label element via 'for' attribute.\n   * If an id is not pass, a random id will be generated for any render.\n   */\n  id?: string;\n  /** Set visual state based on a validation state. */\n  status?: 'success' | 'warning' | 'error' | 'pending';\n  /** Pass a string or a fragment with an Icon and string. */\n  label?: ReactNode;\n  /** Visually hides the label region. */\n  labelHidden?: boolean;\n  /** It is recommended to pass a simple string to offer guidance. Text will be styled based on status prop. */\n  info?: ReactNode;\n  /** Indicate if the field is required. The browser defaults to false. */\n  required?: boolean;\n  /** Placeholder text. The browser defaults to an empty string. */\n  placeholder?: string;\n  /**  Button when clicked will show additional information on a field */\n  additionalInfo?: {\n    heading: AdditionalInfoProps['heading'];\n    content: AdditionalInfoProps['children'];\n  };\n  /**\n   * Creates a controlled input and sets the value. Requires an onChange handler to update value.\n   * value + onChange is the recommended method per React team.\n   */\n  value?: string;\n  /**\n   * If you wish to use an [uncontrolled input](https://reactjs.org/docs/uncontrolled-components.html), pass a defaultValue prop and a ref to access the input's native value prop or by other DOM ref means.\n   */\n  defaultValue?: string;\n  /** Disable the control. The browser defaults to false. */\n  disabled?: boolean;\n  /** Makes the input non editable and non clickable. The browser defaults to false. */\n  readOnly?: boolean;\n  /** Sets html name attribute for the underlying control. Useful for mapping to a data field. */\n  name?: string;\n  /** Callback fired when AI suggestion is accepted/rejected */\n  onResolveSuggestion?: (accepted: boolean) => void;\n}\n\ntype FormControlPropsWithDefaults = PropsWithDefaults<FormControlProps>;\n\nexport const StyledFormControl = styled.div<\n  FormControlPropsWithDefaults & { hasSuggestion?: boolean }\n>(\n  ({\n    theme: {\n      base: {\n        'border-radius': baseRadius,\n        'font-size': baseFontSize,\n        'font-scale': baseFontScale,\n        animation: { speed, timing },\n        palette\n      },\n      components: {\n        'form-field': formField,\n        'form-control': {\n          'foreground-color': foreground,\n          'background-color': background,\n          'border-color': brd,\n          'border-radius': radius,\n          'border-width': borderWidth,\n          ':hover': { 'border-color': hoverBorderColor },\n          ':focus': { 'border-color': focusBorderColor, 'box-shadow': shadow },\n          ':disabled': {\n            'border-color': disabledBorderColor,\n            'background-color': disabledBackgroundColor\n          },\n          ':read-only': {\n            'border-color': readOnlyBorderColor,\n            'background-color': readOnlyBackgroundColor\n          }\n        }\n      }\n    },\n    status,\n    hasSuggestion\n  }) => {\n    const fontSize = calculateFontSize(baseFontSize, baseFontScale);\n    const borderColor = status && formField[status] ? formField[status]['status-color'] : brd;\n    const backgroundColor =\n      hasSuggestion && status\n        ? mix(0.1, formField[status]['status-color'], palette['primary-background'])\n        : background;\n\n    return css`\n      color: ${foreground};\n      background-color: ${backgroundColor};\n      border-radius: calc(${baseRadius} * ${radius});\n      border-color: ${borderColor};\n      border-width: ${borderWidth};\n      border-style: solid;\n      transition: all ${timing.ease} ${speed};\n      &,\n      & > select {\n        outline: none;\n      }\n\n      &:disabled,\n      &[disabled] {\n        background-color: ${disabledBackgroundColor};\n        border-color: ${disabledBorderColor};\n        cursor: not-allowed;\n      }\n\n      &:focus:not([disabled]) {\n        border-color: ${focusBorderColor};\n        box-shadow: ${shadow};\n        ${hasSuggestion &&\n        css`\n          background-color: ${background};\n        `}\n      }\n\n      &:focus-within:not([disabled]) {\n        ${hasSuggestion &&\n        css`\n          background-color: ${background};\n        `}\n      }\n\n      &:hover:not([readonly]):not([disabled]):not(:focus, :focus-within) {\n        ${!status &&\n        css`\n          border-color: ${hoverBorderColor};\n        `}\n        ${hasSuggestion &&\n        css`\n          background-color: ${background};\n          box-shadow: 0 0 0 0.125rem ${rgba(borderColor, 0.2)};\n        `}\n      }\n\n      ${hasSuggestion &&\n      css`\n        border-end-end-radius: 0;\n      `}\n\n      &[readonly] {\n        background-color: ${readOnlyBackgroundColor};\n        border-color: ${readOnlyBorderColor};\n      }\n\n      @media (pointer: coarse) {\n        /* stylelint-disable-next-line unit-allowed-list */\n        font-size: max(${fontSize.s}, 16px);\n      }\n    `;\n  }\n);\n\nStyledFormControl.defaultProps = defaultThemeProp;\n\nconst FormControl: FunctionComponent<FormControlProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<FormControlProps>, ref: Ref<HTMLDivElement>) => {\n    return <StyledFormControl ref={ref} {...props} />;\n  }\n);\n\nexport default FormControl;\n"]}
+{"version":3,"file":"FormControl.js","sourceRoot":"","sources":["../../../src/components/FormControl/FormControl.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAsD,MAAM,OAAO,CAAC;AACvF,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAGrC,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAqDjD,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAGzC,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EACJ,eAAe,EAAE,UAAU,EAC3B,WAAW,EAAE,YAAY,EACzB,YAAY,EAAE,aAAa,EAC3B,SAAS,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,EAC5B,OAAO,EACR,EACD,UAAU,EAAE,EACV,YAAY,EAAE,SAAS,EACvB,cAAc,EAAE,EACd,kBAAkB,EAAE,UAAU,EAC9B,kBAAkB,EAAE,UAAU,EAC9B,cAAc,EAAE,GAAG,EACnB,eAAe,EAAE,MAAM,EACvB,cAAc,EAAE,WAAW,EAC3B,QAAQ,EAAE,EAAE,cAAc,EAAE,gBAAgB,EAAE,EAC9C,QAAQ,EAAE,EAAE,cAAc,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,EAAE,EACpE,WAAW,EAAE,EACX,cAAc,EAAE,mBAAmB,EACnC,kBAAkB,EAAE,uBAAuB,EAC5C,EACD,YAAY,EAAE,EACZ,cAAc,EAAE,mBAAmB,EACnC,kBAAkB,EAAE,uBAAuB,EAC5C,EACF,EACF,EACF,EACD,MAAM,EACN,aAAa,EACd,EAAE,EAAE;IACH,MAAM,QAAQ,GAAG,iBAAiB,CAAC,YAAY,EAAE,aAAa,CAAC,CAAC;IAChE,MAAM,WAAW,GAAG,MAAM,IAAI,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;IAC1F,MAAM,eAAe,GACnB,aAAa,IAAI,MAAM;QACrB,CAAC,CAAC,GAAG,CAAC,GAAG,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,oBAAoB,CAAC,CAAC;QAC5E,CAAC,CAAC,UAAU,CAAC;IAEjB,OAAO,GAAG,CAAA;eACC,UAAU;0BACC,eAAe;4BACb,UAAU,MAAM,MAAM;sBAC5B,WAAW;sBACX,WAAW;;;6BAGJ,KAAK;oCACE,MAAM,CAAC,IAAI;;;;;;;;4BAQnB,uBAAuB;wBAC3B,mBAAmB;;;;;wBAKnB,gBAAgB;sBAClB,MAAM;UAClB,aAAa;QACf,GAAG,CAAA;8BACmB,UAAU;SAC/B;;;;UAIC,aAAa;QACf,GAAG,CAAA;8BACmB,UAAU;SAC/B;;;;UAIC,CAAC,MAAM;QACT,GAAG,CAAA;0BACe,gBAAgB;SACjC;UACC,aAAa;QACf,GAAG,CAAA;8BACmB,UAAU;uCACD,IAAI,CAAC,WAAW,EAAE,GAAG,CAAC;SACpD;;;QAGD,aAAa;QACf,GAAG,CAAA;;OAEF;;;4BAGqB,uBAAuB;wBAC3B,mBAAmB;;;;;yBAKlB,QAAQ,CAAC,CAAC;;KAE9B,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,MAAM,WAAW,GAAuD,UAAU,CAChF,CAAC,KAAwC,EAAE,GAAwB,EAAE,EAAE;IACrE,OAAO,KAAC,iBAAiB,IAAC,GAAG,EAAE,GAAG,KAAM,KAAK,GAAI,CAAC;AACpD,CAAC,CACF,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\nimport { mix, rgba } from 'polished';\n\nimport { BaseProps, ForwardProps, PropsWithDefaults } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport { calculateFontSize } from '../../styles';\nimport { AdditionalInfoProps } from '../AdditionalInfo';\n\nexport interface FormControlProps extends BaseProps {\n  /**\n   * Sets DOM id for the control and associates label element via 'for' attribute.\n   * If an id is not pass, a random id will be generated for any render.\n   */\n  id?: string;\n  /** Set visual state based on a validation state. */\n  status?: 'success' | 'warning' | 'error' | 'pending';\n  /** Pass a string or a fragment with an Icon and string. */\n  label?: ReactNode;\n  /** Visually hides the label region. */\n  labelHidden?: boolean;\n  /** It is recommended to pass a simple string to offer guidance. Text will be styled based on status prop. */\n  info?: ReactNode;\n  /** Indicate if the field is required. The browser defaults to false. */\n  required?: boolean;\n  /** Placeholder text. The browser defaults to an empty string. */\n  placeholder?: string;\n  /** Button when clicked will show additional information on a field */\n  additionalInfo?: {\n    heading: AdditionalInfoProps['heading'];\n    content: AdditionalInfoProps['children'];\n  };\n  /**\n   * Creates a controlled input and sets the value. Requires an onChange handler to update value.\n   * value + onChange is the recommended method per React team.\n   */\n  value?: string;\n  /**\n   * If you wish to use an [uncontrolled input](https://reactjs.org/docs/uncontrolled-components.html),\n   * pass a defaultValue prop and a ref to access the input's native value prop or by other DOM ref means.\n   */\n  defaultValue?: string;\n  /** Disable the control. The browser defaults to false. */\n  disabled?: boolean;\n  /** Makes the input non editable and non clickable. The browser defaults to false. */\n  readOnly?: boolean;\n  /** Sets html name attribute for the underlying control. Useful for mapping to a data field. */\n  name?: string;\n  /** Callback fired when AI suggestion is accepted/rejected */\n  onResolveSuggestion?: (accepted: boolean) => void;\n}\n\ntype FormControlPropsWithDefaults = PropsWithDefaults<FormControlProps>;\n\nexport interface HandleValue {\n  /** Used to clear component inputs with imperative handle */\n  clear: () => void;\n}\n\nexport const StyledFormControl = styled.div<\n  FormControlPropsWithDefaults & { hasSuggestion?: boolean }\n>(\n  ({\n    theme: {\n      base: {\n        'border-radius': baseRadius,\n        'font-size': baseFontSize,\n        'font-scale': baseFontScale,\n        animation: { speed, timing },\n        palette\n      },\n      components: {\n        'form-field': formField,\n        'form-control': {\n          'foreground-color': foreground,\n          'background-color': background,\n          'border-color': brd,\n          'border-radius': radius,\n          'border-width': borderWidth,\n          ':hover': { 'border-color': hoverBorderColor },\n          ':focus': { 'border-color': focusBorderColor, 'box-shadow': shadow },\n          ':disabled': {\n            'border-color': disabledBorderColor,\n            'background-color': disabledBackgroundColor\n          },\n          ':read-only': {\n            'border-color': readOnlyBorderColor,\n            'background-color': readOnlyBackgroundColor\n          }\n        }\n      }\n    },\n    status,\n    hasSuggestion\n  }) => {\n    const fontSize = calculateFontSize(baseFontSize, baseFontScale);\n    const borderColor = status && formField[status] ? formField[status]['status-color'] : brd;\n    const backgroundColor =\n      hasSuggestion && status\n        ? mix(0.1, formField[status]['status-color'], palette['primary-background'])\n        : background;\n\n    return css`\n      color: ${foreground};\n      background-color: ${backgroundColor};\n      border-radius: calc(${baseRadius} * ${radius});\n      border-color: ${borderColor};\n      border-width: ${borderWidth};\n      border-style: solid;\n      transition-property: color, background-color, border-color;\n      transition-duration: ${speed};\n      transition-timing-function: ${timing.ease};\n      &,\n      & > select {\n        outline: none;\n      }\n\n      &:disabled,\n      &[disabled] {\n        background-color: ${disabledBackgroundColor};\n        border-color: ${disabledBorderColor};\n        cursor: not-allowed;\n      }\n\n      &:focus:not([disabled]) {\n        border-color: ${focusBorderColor};\n        box-shadow: ${shadow};\n        ${hasSuggestion &&\n        css`\n          background-color: ${background};\n        `}\n      }\n\n      &:focus-within:not([disabled]) {\n        ${hasSuggestion &&\n        css`\n          background-color: ${background};\n        `}\n      }\n\n      &:hover:not([readonly]):not([disabled]):not(:focus, :focus-within) {\n        ${!status &&\n        css`\n          border-color: ${hoverBorderColor};\n        `}\n        ${hasSuggestion &&\n        css`\n          background-color: ${background};\n          box-shadow: 0 0 0 0.125rem ${rgba(borderColor, 0.2)};\n        `}\n      }\n\n      ${hasSuggestion &&\n      css`\n        border-end-end-radius: 0;\n      `}\n\n      &[readonly] {\n        background-color: ${readOnlyBackgroundColor};\n        border-color: ${readOnlyBorderColor};\n      }\n\n      @media (pointer: coarse) {\n        /* stylelint-disable-next-line unit-allowed-list */\n        font-size: max(${fontSize.s}, 16px);\n      }\n    `;\n  }\n);\n\nStyledFormControl.defaultProps = defaultThemeProp;\n\nconst FormControl: FunctionComponent<FormControlProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<FormControlProps>, ref: Ref<HTMLDivElement>) => {\n    return <StyledFormControl ref={ref} {...props} />;\n  }\n);\n\nexport default FormControl;\n"]}

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

@@ -1,4 +1,3 @@
-export { default } from './FormControl';
-export { FormControlProps } from './FormControl';
-export { StyledFormControl } from './FormControl';
+export { default, StyledFormControl } from './FormControl';
+export type { FormControlProps, HandleValue } from './FormControl';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/FormControl/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACjD,OAAO,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/FormControl/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAC3D,YAAY,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC"}

package/lib/components/FormControl/index.js

@@ -1,3 +1,2 @@
-export { default } from './FormControl';
-export { StyledFormControl } from './FormControl';
+export { default, StyledFormControl } from './FormControl';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/FormControl/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAExC,OAAO,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC","sourcesContent":["export { default } from './FormControl';\nexport { FormControlProps } from './FormControl';\nexport { StyledFormControl } from './FormControl';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/FormControl/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC","sourcesContent":["export { default, StyledFormControl } from './FormControl';\nexport type { FormControlProps, HandleValue } from './FormControl';\n"]}