npm - @pega/cosmos-react-core - Versions diffs - 3.0.0-dev.4.2 → 3.0.0-dev.7.0 - Mend

@pega/cosmos-react-core 3.0.0-dev.4.2 → 3.0.0-dev.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1974) hide show

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

	@@ -1 +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"]}
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"]}

package/lib/components/File/FileVisual.js CHANGED Viewed

@@ -95,7 +95,7 @@ const FileVisual = forwardRef(({ type, thumbnail, onThumbnailError, ...restProps
     const visualConfig = mapping[type];
     const [color, lightness] = visualConfig.backgroundColor.split('.', 2);
     const { base: { colors: { [color]: { [lightness]: backgroundColor } } } } = useTheme();
-    return thumbnail ? (_jsx(Flex, { ...restProps, as: StyledThumbnailFrame, container: true, children: _jsx(Image, { src: thumbnail, onError: onThumbnailError, alt: '' }, void 0) }, void 0)) : (_jsx(Flex, { ...restProps, as: StyledIconFrame, ref: ref, container: { justify: 'center', alignItems: 'center' }, style: { '--bg': backgroundColor }, children: visualConfig.iconName ? _jsx(Icon, { name: visualConfig.iconName }, void 0) : visualConfig.text }, void 0));
+    return thumbnail ? (_jsx(Flex, { ...restProps, as: StyledThumbnailFrame, container: true, children: _jsx(Image, { src: thumbnail, onError: onThumbnailError, alt: '' }) })) : (_jsx(Flex, { ...restProps, as: StyledIconFrame, ref: ref, container: { justify: 'center', alignItems: 'center' }, style: { '--bg': backgroundColor }, children: visualConfig.iconName ? _jsx(Icon, { name: visualConfig.iconName }) : visualConfig.text }));
 });
 export default FileVisual;
 //# sourceMappingURL=FileVisual.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"FileVisual.js","sourceRoot":"","sources":["../../../src/components/File/FileVisual.tsx"],"names":[],"mappings":"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~~WAAG~~,~~WACtD~~,CACR,CAAC,CAAC,CAAC,CACF,KAAC,IAAI,OACC,SAAS,EACb,EAAE,EAAE,eAAe,EACnB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,EACtD,KAAK,EAAE,EAAE,MAAM,EAAE,eAAe,EAAmB,YAElD,YAAY,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAC,IAAI,IAAC,IAAI,EAAE,YAAY,CAAC,QAAQ,~~WAAI~~,CAAC,CAAC,CAAC,YAAY,CAAC,IAAI,~~WAC7E~~,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,UAAU,CAAC","sourcesContent":["import { forwardRef, PropsWithoutRef, FC, Ref, CSSProperties, SyntheticEvent } from 'react';\nimport styled, { css, DefaultTheme } from 'styled-components';\n\nimport Icon from '../Icon';\nimport { ForwardProps, BaseProps, OmitStrict } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport Flex from '../Flex';\nimport Image, { StyledImage } from '../Image';\nimport { useTheme } from '../../hooks';\n\nimport { AttachmentType } from './utils';\n\nexport interface FileVisualProps extends BaseProps {\n /** Attachment/File type, it has an impact on background color and icon rendered. /\n type: AttachmentType;\n /* A string to be used as an image src for a attachment thumbnail. /\n thumbnail?: string;\n /* Called when a thumbnail encounters an error while loading. /\n onThumbnailError?: (e: SyntheticEvent<HTMLImageElement>) => void;\n /* Reference to a button element. /\n ref?: Ref<HTMLDivElement>;\n}\ntype ThemeColor = keyof OmitStrict<DefaultTheme['base']['colors'], 'white' \| 'black'>;\ntype ThemeColorVariant = 'extra-light' \| 'light' \| 'medium' \| 'dark' \| 'extra-dark';\n\ntype BackgroundColor = `${ThemeColor}.${ThemeColorVariant}`;\n\nconst mapping: Record<\n AttachmentType,\n { backgroundColor: BackgroundColor } & (\n \| { iconName: string; text?: never }\n \| { iconName?: never; text: string }\n )\n> = {\n generic: {\n iconName: 'paper-clip',\n backgroundColor: 'slate.dark'\n },\n video: {\n iconName: 'play-solid',\n backgroundColor: 'slate.dark'\n },\n audio: {\n iconName: 'speaker-on-solid',\n backgroundColor: 'slate.dark'\n },\n document: {\n iconName: 'filetype-text',\n backgroundColor: 'blue.medium'\n },\n message: {\n iconName: 'mail-solid',\n backgroundColor: 'blue.dark'\n },\n pdf: {\n text: 'PDF',\n backgroundColor: 'red.medium'\n },\n spreadsheet: {\n iconName: 'grid-solid',\n backgroundColor: 'green.medium'\n },\n presentation: {\n iconName: 'slideshow-solid',\n backgroundColor: 'orange.medium'\n },\n link: {\n iconName: 'chain',\n backgroundColor: 'purple.dark'\n },\n archive: {\n iconName: 'archive-solid',\n backgroundColor: 'slate.dark'\n },\n database: {\n iconName: 'disc-stack-solid',\n backgroundColor: 'slate.dark'\n },\n image: {\n iconName: 'picture-solid',\n backgroundColor: 'slate.dark'\n },\n text: {\n iconName: 'filetype-text',\n backgroundColor: 'slate.dark'\n }\n} as const;\n\nexport const StyledFileVisual = styled.div``;\n\nexport const StyledIconFrame = styled(StyledFileVisual)(({ theme }) => {\n return css`\n background-color: var(--bg);\n color: ${theme.base.palette.light};\n height: ${theme.components.input.height};\n width: ${theme.components.input.height};\n border-radius: calc(0.25 ${theme.base['border-radius']});\n font-size: calc(0.7 * ${theme.base['font-size']});\n font-weight: ${theme.base['font-weight']['semi-bold']};\n user-select: none;\n -webkit-user-select: none;\n `;\n});\n\nStyledIconFrame.defaultProps = defaultThemeProp;\n\nconst StyledThumbnailFrame = styled(StyledFileVisual)(({ theme }) => {\n return css`\n background-color: ${theme.base.palette['app-background']};\n height: 100%;\n width: 100%;\n\n ${StyledImage} {\n margin: auto;\n height: unset;\n width: unset;\n max-height: 100%;\n max-width: 100%;\n }\n `;\n});\n\nStyledThumbnailFrame.defaultProps = defaultThemeProp;\n\nconst FileVisual: FC<FileVisualProps & ForwardProps> = forwardRef(\n (\n { type, thumbnail, onThumbnailError, ...restProps }: PropsWithoutRef<FileVisualProps>,\n ref: FileVisualProps['ref']\n ) => {\n const visualConfig = mapping[type];\n\n const [color, lightness] = visualConfig.backgroundColor.split('.', 2) as [\n ThemeColor,\n ThemeColorVariant\n ];\n\n const {\n base: {\n colors: {\n [color]: { [lightness]: backgroundColor }\n }\n }\n } = useTheme();\n\n return thumbnail ? (\n <Flex {...restProps} as={StyledThumbnailFrame} container>\n <Image src={thumbnail} onError={onThumbnailError} alt='' />\n </Flex>\n ) : (\n <Flex\n {...restProps}\n as={StyledIconFrame}\n ref={ref}\n container={{ justify: 'center', alignItems: 'center' }}\n style={{ '--bg': backgroundColor } as CSSProperties}\n >\n {visualConfig.iconName ? <Icon name={visualConfig.iconName} /> : visualConfig.text}\n </Flex>\n );\n }\n);\n\nexport default FileVisual;\n"]}
1	+ {"version":3,"file":"FileVisual.js","sourceRoot":"","sources":["../../../src/components/File/FileVisual.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, PropsWithoutRef, FC, Ref, CSSProperties, SyntheticEvent } from 'react';\nimport styled, { css, DefaultTheme } from 'styled-components';\n\nimport Icon from '../Icon';\nimport { ForwardProps, BaseProps, OmitStrict } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport Flex from '../Flex';\nimport Image, { StyledImage } from '../Image';\nimport { useTheme } from '../../hooks';\n\nimport { AttachmentType } from './utils';\n\nexport interface FileVisualProps extends BaseProps {\n /** Attachment/File type, it has an impact on background color and icon rendered. /\n type: AttachmentType;\n /* A string to be used as an image src for a attachment thumbnail. /\n thumbnail?: string;\n /* Called when a thumbnail encounters an error while loading. /\n onThumbnailError?: (e: SyntheticEvent<HTMLImageElement>) => void;\n /* Reference to a button element. /\n ref?: Ref<HTMLDivElement>;\n}\ntype ThemeColor = keyof OmitStrict<DefaultTheme['base']['colors'], 'white' \| 'black'>;\ntype ThemeColorVariant = 'extra-light' \| 'light' \| 'medium' \| 'dark' \| 'extra-dark';\n\ntype BackgroundColor = `${ThemeColor}.${ThemeColorVariant}`;\n\nconst mapping: Record<\n AttachmentType,\n { backgroundColor: BackgroundColor } & (\n \| { iconName: string; text?: never }\n \| { iconName?: never; text: string }\n )\n> = {\n generic: {\n iconName: 'paper-clip',\n backgroundColor: 'slate.dark'\n },\n video: {\n iconName: 'play-solid',\n backgroundColor: 'slate.dark'\n },\n audio: {\n iconName: 'speaker-on-solid',\n backgroundColor: 'slate.dark'\n },\n document: {\n iconName: 'filetype-text',\n backgroundColor: 'blue.medium'\n },\n message: {\n iconName: 'mail-solid',\n backgroundColor: 'blue.dark'\n },\n pdf: {\n text: 'PDF',\n backgroundColor: 'red.medium'\n },\n spreadsheet: {\n iconName: 'grid-solid',\n backgroundColor: 'green.medium'\n },\n presentation: {\n iconName: 'slideshow-solid',\n backgroundColor: 'orange.medium'\n },\n link: {\n iconName: 'chain',\n backgroundColor: 'purple.dark'\n },\n archive: {\n iconName: 'archive-solid',\n backgroundColor: 'slate.dark'\n },\n database: {\n iconName: 'disc-stack-solid',\n backgroundColor: 'slate.dark'\n },\n image: {\n iconName: 'picture-solid',\n backgroundColor: 'slate.dark'\n },\n text: {\n iconName: 'filetype-text',\n backgroundColor: 'slate.dark'\n }\n} as const;\n\nexport const StyledFileVisual = styled.div``;\n\nexport const StyledIconFrame = styled(StyledFileVisual)(({ theme }) => {\n return css`\n background-color: var(--bg);\n color: ${theme.base.palette.light};\n height: ${theme.components.input.height};\n width: ${theme.components.input.height};\n border-radius: calc(0.25 ${theme.base['border-radius']});\n font-size: calc(0.7 * ${theme.base['font-size']});\n font-weight: ${theme.base['font-weight']['semi-bold']};\n user-select: none;\n -webkit-user-select: none;\n `;\n});\n\nStyledIconFrame.defaultProps = defaultThemeProp;\n\nconst StyledThumbnailFrame = styled(StyledFileVisual)(({ theme }) => {\n return css`\n background-color: ${theme.base.palette['app-background']};\n height: 100%;\n width: 100%;\n\n ${StyledImage} {\n margin: auto;\n height: unset;\n width: unset;\n max-height: 100%;\n max-width: 100%;\n }\n `;\n});\n\nStyledThumbnailFrame.defaultProps = defaultThemeProp;\n\nconst FileVisual: FC<FileVisualProps & ForwardProps> = forwardRef(\n (\n { type, thumbnail, onThumbnailError, ...restProps }: PropsWithoutRef<FileVisualProps>,\n ref: FileVisualProps['ref']\n ) => {\n const visualConfig = mapping[type];\n\n const [color, lightness] = visualConfig.backgroundColor.split('.', 2) as [\n ThemeColor,\n ThemeColorVariant\n ];\n\n const {\n base: {\n colors: {\n [color]: { [lightness]: backgroundColor }\n }\n }\n } = useTheme();\n\n return thumbnail ? (\n <Flex {...restProps} as={StyledThumbnailFrame} container>\n <Image src={thumbnail} onError={onThumbnailError} alt='' />\n </Flex>\n ) : (\n <Flex\n {...restProps}\n as={StyledIconFrame}\n ref={ref}\n container={{ justify: 'center', alignItems: 'center' }}\n style={{ '--bg': backgroundColor } as CSSProperties}\n >\n {visualConfig.iconName ? <Icon name={visualConfig.iconName} /> : visualConfig.text}\n </Flex>\n );\n }\n);\n\nexport default FileVisual;\n"]}

package/lib/components/Flex/Flex.js CHANGED Viewed

@@ -138,7 +138,7 @@ export const StyledFlex = styled.div(({ container, item, theme: { base: { breakp
 });
 StyledFlex.defaultProps = defaultThemeProp;
 const Flex = forwardRef((props, ref) => {
-    return _jsx(StyledFlex, { ...props, ref: ref }, void 0);
+    return _jsx(StyledFlex, { ...props, ref: ref });
 });
 export default Flex;
 //# sourceMappingURL=Flex.js.map

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

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

package/lib/components/Form/Form.js CHANGED Viewed

@@ -10,7 +10,7 @@ export const StyledFormContent = styled.div ``;
 const Form = forwardRef((props, ref) => {
     const { children, actions, heading, description, banners, ...restProps } = props;
     const uid = useUID();
-    return (_jsxs(Flex, { container: { direction: 'column', gap: 3 }, as: StyledForm, ref: ref, ...restProps, "aria-labelledby": heading ? `${uid}-heading` : undefined, "aria-describedby": description ? `${uid}-description` : undefined, children: [banners, (heading || description) && (_jsxs(Flex, { container: { direction: 'column', gap: 1 }, children: [heading && (_jsx(Text, { id: `${uid}-heading`, variant: 'h3', children: heading }, void 0)), description && _jsx(HTML, { id: `${uid}-description`, as: 'p', content: description }, void 0)] }, void 0)), _jsx(Flex, { as: StyledFormContent, container: { direction: 'column', gap: 3 }, children: children }, void 0), actions && _jsx(Flex, { container: { justify: 'between', alignItems: 'center' }, children: actions }, void 0)] }, void 0));
+    return (_jsxs(Flex, { container: { direction: 'column', gap: 3 }, as: StyledForm, ref: ref, ...restProps, "aria-labelledby": heading ? `${uid}-heading` : undefined, "aria-describedby": description ? `${uid}-description` : undefined, children: [banners, (heading || description) && (_jsxs(Flex, { container: { direction: 'column', gap: 1 }, children: [heading && (_jsx(Text, { id: `${uid}-heading`, variant: 'h3', children: heading })), description && _jsx(HTML, { id: `${uid}-description`, as: 'p', content: description })] })), _jsx(Flex, { as: StyledFormContent, container: { direction: 'column', gap: 3 }, children: children }), actions && _jsx(Flex, { container: { justify: 'between', alignItems: 'center' }, children: actions })] }));
 });
 export default Form;
 //# sourceMappingURL=Form.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Form.js","sourceRoot":"","sources":["../../../src/components/Form/Form.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAuC,MAAM,OAAO,CAAC;AACxE,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,IAAI,MAAM,SAAS,CAAC;AAiB3B,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAA,EAAE,CAAC;AACxC,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AAE9C,MAAM,IAAI,GAAiC,UAAU,CACnD,CAAC,KAAiC,EAAE,GAAqB,EAAE,EAAE;IAC3D,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAEjF,MAAM,GAAG,GAAG,MAAM,EAAE,CAAC;IAErB,OAAO,CACL,MAAC,IAAI,IACH,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,EAC1C,EAAE,EAAE,UAAU,EACd,GAAG,EAAE,GAAG,KACJ,SAAS,qBACI,OAAO,CAAC,CAAC,CAAC,GAAG,GAAG,UAAU,CAAC,CAAC,CAAC,SAAS,sBACrC,WAAW,CAAC,CAAC,CAAC,GAAG,GAAG,cAAc,CAAC,CAAC,CAAC,SAAS,aAE/D,OAAO,EACP,CAAC,OAAO,IAAI,WAAW,CAAC,IAAI,CAC3B,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aAC7C,OAAO,IAAI,CACV,KAAC,IAAI,IAAC,EAAE,EAAE,GAAG,GAAG,UAAU,EAAE,OAAO,EAAC,IAAI,YACrC,OAAO,~~WACH~~,CACR,EACA,WAAW,IAAI,KAAC,IAAI,IAAC,EAAE,EAAE,GAAG,GAAG,cAAc,EAAE,EAAE,EAAC,GAAG,EAAC,OAAO,EAAE,WAAW,~~WAAI~~,~~YAC1E~~,CACR,EACD,KAAC,IAAI,IAAC,EAAE,EAAE,iBAAiB,EAAE,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,YACpE,QAAQ,~~WACJ~~,EAEN,OAAO,IAAI,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,YAAG,OAAO,~~WAAQ~~,~~YACtF~~,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,IAAI,CAAC","sourcesContent":["import { forwardRef, FC, ReactNode, Ref, PropsWithoutRef } from 'react';\nimport styled from 'styled-components';\n\nimport { useUID } from '../../hooks';\nimport { BaseProps, ForwardProps } from '../../types';\nimport Flex from '../Flex';\nimport Text from '../Text';\nimport HTML from '../HTML';\n\nexport interface FormProps extends BaseProps {\n /** The Form content. Recommended composing form elements within a layout template such as Grid or Flex as the only child. /\n children: ReactNode;\n /* Region for Form Actions. /\n actions?: ReactNode;\n /* The heading of the form. /\n heading?: string;\n /* A description of the form to be displayed above the controls. /\n description?: string;\n /* Region for Banners above the Form. /\n banners?: ReactNode;\n /* Ref forwarded to the wrapping element. */\n ref?: Ref<HTMLFormElement>;\n}\n\nexport const StyledForm = styled.form``;\nexport const StyledFormContent = styled.div``;\n\nconst Form: FC<FormProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<FormProps>, ref: FormProps['ref']) => {\n const { children, actions, heading, description, banners, ...restProps } = props;\n\n const uid = useUID();\n\n return (\n <Flex\n container={{ direction: 'column', gap: 3 }}\n as={StyledForm}\n ref={ref}\n {...restProps}\n aria-labelledby={heading ? `${uid}-heading` : undefined}\n aria-describedby={description ? `${uid}-description` : undefined}\n >\n {banners}\n {(heading \|\| description) && (\n <Flex container={{ direction: 'column', gap: 1 }}>\n {heading && (\n <Text id={`${uid}-heading`} variant='h3'>\n {heading}\n </Text>\n )}\n {description && <HTML id={`${uid}-description`} as='p' content={description} />}\n </Flex>\n )}\n <Flex as={StyledFormContent} container={{ direction: 'column', gap: 3 }}>\n {children}\n </Flex>\n\n {actions && <Flex container={{ justify: 'between', alignItems: 'center' }}>{actions}</Flex>}\n </Flex>\n );\n }\n);\n\nexport default Form;\n"]}
1	+ {"version":3,"file":"Form.js","sourceRoot":"","sources":["../../../src/components/Form/Form.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAuC,MAAM,OAAO,CAAC;AACxE,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,IAAI,MAAM,SAAS,CAAC;AAiB3B,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAA,EAAE,CAAC;AACxC,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AAE9C,MAAM,IAAI,GAAiC,UAAU,CACnD,CAAC,KAAiC,EAAE,GAAqB,EAAE,EAAE;IAC3D,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAEjF,MAAM,GAAG,GAAG,MAAM,EAAE,CAAC;IAErB,OAAO,CACL,MAAC,IAAI,IACH,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,EAC1C,EAAE,EAAE,UAAU,EACd,GAAG,EAAE,GAAG,KACJ,SAAS,qBACI,OAAO,CAAC,CAAC,CAAC,GAAG,GAAG,UAAU,CAAC,CAAC,CAAC,SAAS,sBACrC,WAAW,CAAC,CAAC,CAAC,GAAG,GAAG,cAAc,CAAC,CAAC,CAAC,SAAS,aAE/D,OAAO,EACP,CAAC,OAAO,IAAI,WAAW,CAAC,IAAI,CAC3B,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aAC7C,OAAO,IAAI,CACV,KAAC,IAAI,IAAC,EAAE,EAAE,GAAG,GAAG,UAAU,EAAE,OAAO,EAAC,IAAI,YACrC,OAAO,GACH,CACR,EACA,WAAW,IAAI,KAAC,IAAI,IAAC,EAAE,EAAE,GAAG,GAAG,cAAc,EAAE,EAAE,EAAC,GAAG,EAAC,OAAO,EAAE,WAAW,GAAI,IAC1E,CACR,EACD,KAAC,IAAI,IAAC,EAAE,EAAE,iBAAiB,EAAE,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,YACpE,QAAQ,GACJ,EAEN,OAAO,IAAI,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,YAAG,OAAO,GAAQ,IACtF,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,IAAI,CAAC","sourcesContent":["import { forwardRef, FC, ReactNode, Ref, PropsWithoutRef } from 'react';\nimport styled from 'styled-components';\n\nimport { useUID } from '../../hooks';\nimport { BaseProps, ForwardProps } from '../../types';\nimport Flex from '../Flex';\nimport Text from '../Text';\nimport HTML from '../HTML';\n\nexport interface FormProps extends BaseProps {\n /** The Form content. Recommended composing form elements within a layout template such as Grid or Flex as the only child. /\n children: ReactNode;\n /* Region for Form Actions. /\n actions?: ReactNode;\n /* The heading of the form. /\n heading?: string;\n /* A description of the form to be displayed above the controls. /\n description?: string;\n /* Region for Banners above the Form. /\n banners?: ReactNode;\n /* Ref forwarded to the wrapping element. */\n ref?: Ref<HTMLFormElement>;\n}\n\nexport const StyledForm = styled.form``;\nexport const StyledFormContent = styled.div``;\n\nconst Form: FC<FormProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<FormProps>, ref: FormProps['ref']) => {\n const { children, actions, heading, description, banners, ...restProps } = props;\n\n const uid = useUID();\n\n return (\n <Flex\n container={{ direction: 'column', gap: 3 }}\n as={StyledForm}\n ref={ref}\n {...restProps}\n aria-labelledby={heading ? `${uid}-heading` : undefined}\n aria-describedby={description ? `${uid}-description` : undefined}\n >\n {banners}\n {(heading \|\| description) && (\n <Flex container={{ direction: 'column', gap: 1 }}>\n {heading && (\n <Text id={`${uid}-heading`} variant='h3'>\n {heading}\n </Text>\n )}\n {description && <HTML id={`${uid}-description`} as='p' content={description} />}\n </Flex>\n )}\n <Flex as={StyledFormContent} container={{ direction: 'column', gap: 3 }}>\n {children}\n </Flex>\n\n {actions && <Flex container={{ justify: 'between', alignItems: 'center' }}>{actions}</Flex>}\n </Flex>\n );\n }\n);\n\nexport default Form;\n"]}

package/lib/components/FormControl/FormControl.js CHANGED Viewed

@@ -51,7 +51,7 @@ export const StyledFormControl = styled.div(props => {
 });
 StyledFormControl.defaultProps = defaultThemeProp;
 const FormControl = forwardRef((props, ref) => {
-    return _jsx(StyledFormControl, { ref: ref, ...props }, void 0);
+    return _jsx(StyledFormControl, { ref: ref, ...props });
 });
 export default FormControl;
 //# sourceMappingURL=FormControl.js.map

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

	@@ -1 +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;AAGhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAuCjD,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAA+B,KAAK,CAAC,EAAE;IAChF,MAAM,EACJ,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,eAAe,EAAE,UAAU,EAAE,WAAW,EAAE,YAAY,EAAE,YAAY,EAAE,aAAa,EAAE,EAC7F,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,EACP,GAAG,KAAK,CAAC;IACV,MAAM,QAAQ,GAAG,iBAAiB,CAAC,YAAY,EAAE,aAAa,CAAC,CAAC;IAEhE,MAAM,WAAW,GAAG,MAAM,IAAI,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;IAE1F,OAAO,GAAG,CAAA;aACC,UAAU;wBACC,UAAU;0BACR,UAAU,MAAM,MAAM;oBAC5B,WAAW;oBACX,WAAW;;;;;;;;;0BASL,uBAAuB;sBAC3B,mBAAmB;;;;;sBAKnB,gBAAgB;oBAClB,MAAM;;;MAGpB,CAAC,MAAM;QACT,GAAG,CAAA;;wBAEiB,gBAAgB;;KAEnC;;;0BAGqB,uBAAuB;sBAC3B,mBAAmB;;;;;uBAKlB,QAAQ,CAAC,CAAC;;GAE9B,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,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,~~WAAI~~,CAAC;AACpD,CAAC,CACF,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { BaseProps, ForwardProps, PropsWithDefaults } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport { calculateFontSize } from '../../styles';\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';\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 /\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}\n\ntype FormControlPropsWithDefaults = PropsWithDefaults<FormControlProps>;\n\nexport const StyledFormControl = styled.div<FormControlPropsWithDefaults>(props => {\n const {\n theme: {\n base: { 'border-radius': baseRadius, 'font-size': baseFontSize, 'font-scale': baseFontScale },\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 } = props;\n const fontSize = calculateFontSize(baseFontSize, baseFontScale);\n\n const borderColor = status && formField[status] ? formField[status]['status-color'] : brd;\n\n return css`\n color: ${foreground};\n background-color: ${background};\n border-radius: calc(${baseRadius} ${radius});\n border-color: ${borderColor};\n border-width: ${borderWidth};\n border-style: solid;\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 }\n\n ${!status &&\n css`\n &:hover:not([readonly]):not([disabled]):not(:focus) {\n border-color: ${hoverBorderColor};\n }\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\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"]}
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;AAGhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAuCjD,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAA+B,KAAK,CAAC,EAAE;IAChF,MAAM,EACJ,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,eAAe,EAAE,UAAU,EAAE,WAAW,EAAE,YAAY,EAAE,YAAY,EAAE,aAAa,EAAE,EAC7F,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,EACP,GAAG,KAAK,CAAC;IACV,MAAM,QAAQ,GAAG,iBAAiB,CAAC,YAAY,EAAE,aAAa,CAAC,CAAC;IAEhE,MAAM,WAAW,GAAG,MAAM,IAAI,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;IAE1F,OAAO,GAAG,CAAA;aACC,UAAU;wBACC,UAAU;0BACR,UAAU,MAAM,MAAM;oBAC5B,WAAW;oBACX,WAAW;;;;;;;;;0BASL,uBAAuB;sBAC3B,mBAAmB;;;;;sBAKnB,gBAAgB;oBAClB,MAAM;;;MAGpB,CAAC,MAAM;QACT,GAAG,CAAA;;wBAEiB,gBAAgB;;KAEnC;;;0BAGqB,uBAAuB;sBAC3B,mBAAmB;;;;;uBAKlB,QAAQ,CAAC,CAAC;;GAE9B,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,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';\n\nimport { BaseProps, ForwardProps, PropsWithDefaults } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport { calculateFontSize } from '../../styles';\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';\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 /\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}\n\ntype FormControlPropsWithDefaults = PropsWithDefaults<FormControlProps>;\n\nexport const StyledFormControl = styled.div<FormControlPropsWithDefaults>(props => {\n const {\n theme: {\n base: { 'border-radius': baseRadius, 'font-size': baseFontSize, 'font-scale': baseFontScale },\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 } = props;\n const fontSize = calculateFontSize(baseFontSize, baseFontScale);\n\n const borderColor = status && formField[status] ? formField[status]['status-color'] : brd;\n\n return css`\n color: ${foreground};\n background-color: ${background};\n border-radius: calc(${baseRadius} ${radius});\n border-color: ${borderColor};\n border-width: ${borderWidth};\n border-style: solid;\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 }\n\n ${!status &&\n css`\n &:hover:not([readonly]):not([disabled]):not(:focus) {\n border-color: ${hoverBorderColor};\n }\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\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/FormField/FormField.js CHANGED Viewed

@@ -70,7 +70,7 @@ const FormField = forwardRef((props, ref) => {
     const styledLabel = (_jsxs(Label, { id: labelId, as: labelAs, htmlFor: labelAs === 'label' ? labelFor : undefined, labelHidden: labelHidden, onClick: (e) => {
             if (readOnly)
                 e.preventDefault();
-        }, inline: inline, children: [status && !labelHidden && (_jsx(StyledStatusIcon, { status: status, name: statusIconMap[status] }, void 0)), label] }, void 0));
+        }, inline: inline, children: [status && !labelHidden && (_jsx(StyledStatusIcon, { status: status, name: statusIconMap[status] })), label] }));
     /*
       We have to use an internal state and an effect to set the text value of info after the DOM element is rendered.
       This is to ensure screen readers will announce info on errors when role is set to alert.
@@ -91,7 +91,7 @@ const FormField = forwardRef((props, ref) => {
             'aria-describedby': info && `${id}-info`
         });
     if (actions) {
-        content = (_jsxs(Flex, { container: { alignItems: 'center', gap: 0.5 }, children: [content, _jsx(Actions, { items: actions, menuAt: 3 }, void 0)] }, void 0));
+        content = (_jsxs(Flex, { container: { alignItems: 'center', gap: 0.5 }, children: [content, _jsx(Actions, { items: actions, menuAt: 3 })] }));
     }
     let infoContent = info ? (
     /*
@@ -99,15 +99,15 @@ const FormField = forwardRef((props, ref) => {
       Withholding aria-live="assertive" to avoid iOS issue. See below.
       https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions#Preferring_specialized_live_region_roles
     */
-    _jsx(StyledFormFieldInfo, { status: status, role: status === 'error' || status === 'warning' ? 'alert' : undefined, id: `${id}-info`, children: liveRegionInfo }, void 0)) : undefined;
+    _jsx(StyledFormFieldInfo, { status: status, role: status === 'error' || status === 'warning' ? 'alert' : undefined, id: `${id}-info`, children: liveRegionInfo })) : undefined;
     if (charLimitDisplay) {
-        infoContent = (_jsxs(Flex, { container: { justify: infoContent ? 'between' : 'end', gap: 1 }, children: [infoContent, _jsx(Flex, { item: { shrink: 0 }, children: charLimitDisplay }, void 0)] }, void 0));
+        infoContent = (_jsxs(Flex, { container: { justify: infoContent ? 'between' : 'end', gap: 1 }, children: [infoContent, _jsx(Flex, { item: { shrink: 0 }, children: charLimitDisplay })] }));
     }
     return (_jsxs(Flex, { ...restProps, container: {
             direction: inline ? 'row' : 'column',
             alignItems: inline ? 'center' : undefined,
             ...container
-        }, as: StyledFormField, id: `${id}-field`, forwardedAs: as, required: required, disabled: disabled, readOnly: readOnly, "aria-describedby": labelAsLegend && info ? `${id}-info` : undefined, ref: ref, children: [(labelAsLegend || !labelAfter) && styledLabel, content, !labelAsLegend && labelAfter && styledLabel, infoContent] }, void 0));
+        }, as: StyledFormField, id: `${id}-field`, forwardedAs: as, required: required, disabled: disabled, readOnly: readOnly, "aria-describedby": labelAsLegend && info ? `${id}-info` : undefined, ref: ref, children: [(labelAsLegend || !labelAfter) && styledLabel, content, !labelAsLegend && labelAfter && styledLabel, infoContent] }));
 });
 export default FormField;
 //# sourceMappingURL=FormField.js.map

package/lib/components/FormField/FormField.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FormField.js","sourceRoot":"","sources":["../../../src/components/FormField/FormField.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n FC,\n ReactNode,\n ComponentType,\n cloneElement,\n ReactElement,\n useEffect,\n useState,\n PropsWithoutRef,\n forwardRef,\n Ref\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport { Action, ForwardProps, OmitStrict } from '../../types';\nimport Flex, { FlexProps } from '../Flex';\nimport Actions from '../Actions';\nimport { FormControlProps } from '../FormControl';\nimport { useUID } from '../../hooks';\nimport Label, { LabelProps, StyledLabel } from '../Label';\nimport { calculateFontSize } from '../../styles';\nimport Icon from '../Icon';\n\nexport interface FormFieldProps\n extends OmitStrict<FormControlProps, 'placeholder' \| 'value' \| 'defaultValue'> {\n /** Pass a single form control component i.e. Input \| TextArea \| Select \| etc.. /\n children: ReactElement \| ReactElement[];\n /\n An id is required to connect a FormField's wrapping element, control element and info(aria-describedby) live region.\n * A random id will be generated if none is provided.\n * Since MOST FormControls should possess an id(excl. i.e RadioCheckGroup and others) this can be used.\n * The id prop will be used to generate the following:\n * - FormControl <-> Label association via a Label's htmlFor prop.\n * - FormField's wrapping element id {id}-field.\n * - FormField info element id ${id}-info.\n /\n id?: string;\n /\n Determines how the wrapping label should be rendered.\n * @default \"label\"\n /\n labelAs?: LabelProps['as'];\n /\n Overrides the for attribute on the label. If this is not set it will default to the forms id.\n * @default undefined\n /\n labelFor?: LabelProps['htmlFor'];\n /\n Sets the id of the label.\n * @default undefined\n /\n labelId?: LabelProps['id'];\n /\n Visually hides the label region.\n * @default false\n /\n labelHidden?: boolean;\n /\n Visually places the label after the input.\n * @default false\n /\n labelAfter?: boolean;\n /\n Wrapping HTML element tag. Renders as a fieldset for grouped elements i.e. RadioButtons/CheckboxGroup\n * @default \"div\"\n /\n as?: 'div' \| 'fieldset' \| ComponentType<any>;\n /\n Layout field elements inline in a row.\n * @default false\n /\n inline?: boolean;\n /* Optionally utilized by Input or Select. /\n actions?: Action[];\n /* Enables Flex container prop pass through. /\n container?: Exclude<FlexProps['container'], boolean>;\n /* Character remaining count. Typically used on Textareas only /\n charLimitDisplay?: ReactNode;\n}\n\nconst StyledStatusIcon = styled(Icon)<{ status: NonNullable<FormFieldProps['status']> }>(\n ({ theme, status }) => {\n return css`\n height: 1em;\n width: 1em;\n color: ${theme.components['form-field'][status]['status-color']};\n vertical-align: baseline;\n margin-inline-end: 0.5ch;\n `;\n }\n);\n\nStyledStatusIcon.defaultProps = defaultThemeProp;\n\nexport const StyledFormFieldInfo = styled.div<Pick<FormControlProps, 'status'>>(\n ({\n status,\n theme: {\n base: { 'font-size': fontSize, 'font-scale': fontScale, spacing },\n components: { 'form-field': formField }\n }\n }) => {\n const { xxs: infoFontSize } = calculateFontSize(fontSize, fontScale);\n\n return css`\n max-width: max-content;\n margin-top: calc(0.25 ${spacing});\n font-size: ${infoFontSize};\n word-break: break-word;\n ${status &&\n formField[status] &&\n css`\n color: ${formField[status]['status-color']};\n `}\n `;\n }\n);\n\nStyledFormFieldInfo.defaultProps = defaultThemeProp;\n\nexport const StyledFormField = styled.div<FormFieldProps>(props => {\n const {\n disabled,\n required,\n theme: {\n base: {\n palette: { urgent },\n 'disabled-opacity': disabledOpacity,\n spacing\n }\n }\n } = props;\n\n return css`\n ${disabled &&\n css`\n opacity: ${disabledOpacity};\n -webkit-user-select: none;\n user-select: none;\n `}\n position: relative;\n border: 0;\n\n > ${StyledLabel} {\n margin-bottom: calc(0.25 * ${spacing});\n ${disabled &&\n css`\n cursor: not-allowed;\n `}\n\n &::after {\n display: ${required ? 'inline' : 'none'};\n content: '\\\\00a0';\n vertical-align: top;\n color: ${urgent};\n }\n }\n `;\n});\n\nStyledFormField.defaultProps = defaultThemeProp;\n\nconst statusIconMap = { error: 'warn-solid', warning: 'warn', success: 'check' };\n\nconst FormField: FC<FormFieldProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<FormFieldProps>, ref: Ref<HTMLElement>) => {\n const uid = useUID();\n const {\n children: controlElement,\n id = uid,\n as = 'div',\n label,\n labelAs = 'label',\n labelFor = id,\n labelId,\n labelHidden = false,\n labelAfter = false,\n info,\n status,\n charLimitDisplay,\n required = false,\n disabled = false,\n readOnly = false,\n inline = false,\n actions,\n container,\n ...restProps\n } = props;\n\n const labelAsLegend: boolean = labelAs === 'legend';\n\n const styledLabel = (\n <Label\n id={labelId}\n as={labelAs}\n htmlFor={labelAs === 'label' ? labelFor : undefined}\n labelHidden={labelHidden}\n onClick={(e: MouseEvent) => {\n if (readOnly) e.preventDefault();\n }}\n inline={inline}\n >\n {status && !labelHidden && (\n <StyledStatusIcon status={status} name={statusIconMap[status]} />\n )}\n {label}\n </Label>\n );\n\n /\n We have to use an internal state and an effect to set the text value of info after the DOM element is rendered.\n This is to ensure screen readers will announce info on errors when role is set to alert.\n Needs testing to confirm. Currently the expected sequence would be:\n - FormField renders with no error and no info\n - user input triggers an error status\n - props passed set error status and provide info text\n - effect runs and sets live region state which renders and is announced\n /\n const [liveRegionInfo, setLiveRegionInfo] = useState<ReactNode>(null);\n\n useEffect(() => {\n setLiveRegionInfo(info);\n }, [info]);\n\n // fieldset or single form control element\n let content: FormFieldProps['children'] = labelAsLegend\n ? controlElement\n : cloneElement(controlElement as ReactElement, {\n 'aria-describedby': info && `${id}-info`\n });\n\n if (actions) {\n content = (\n <Flex container={{ alignItems: 'center', gap: 0.5 }}>\n {content}\n <Actions items={actions} menuAt={3} />\n </Flex>\n );\n }\n\n let infoContent = info ? (\n /\n Region for additional info, help or error message.\n Withholding aria-live=\"assertive\" to avoid iOS issue. See below.\n https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions#Preferring_specialized_live_region_roles\n */\n <StyledFormFieldInfo\n status={status}\n role={status === 'error' \|\| status === 'warning' ? 'alert' : undefined}\n id={`${id}-info`}\n >\n {liveRegionInfo}\n </StyledFormFieldInfo>\n ) : undefined;\n\n if (charLimitDisplay) {\n infoContent = (\n <Flex container={{ justify: infoContent ? 'between' : 'end', gap: 1 }}>\n {infoContent}\n <Flex item={{ shrink: 0 }}>{charLimitDisplay}</Flex>\n </Flex>\n );\n }\n\n return (\n <Flex\n {...restProps}\n container={{\n direction: inline ? 'row' : 'column',\n alignItems: inline ? 'center' : undefined,\n ...container\n }}\n as={StyledFormField}\n id={`${id}-field`}\n forwardedAs={as}\n required={required}\n disabled={disabled}\n readOnly={readOnly}\n aria-describedby={labelAsLegend && info ? `${id}-info` : undefined}\n ref={ref}\n >\n {(labelAsLegend \|\| !labelAfter) && styledLabel}\n {content}\n {!labelAsLegend && labelAfter && styledLabel}\n {infoContent}\n </Flex>\n );\n }\n);\n\nexport default FormField;\n"]}
1	+ {"version":3,"file":"FormField.js","sourceRoot":"","sources":["../../../src/components/FormField/FormField.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n FC,\n ReactNode,\n ComponentType,\n cloneElement,\n ReactElement,\n useEffect,\n useState,\n PropsWithoutRef,\n forwardRef,\n Ref\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport { Action, ForwardProps, OmitStrict } from '../../types';\nimport Flex, { FlexProps } from '../Flex';\nimport Actions from '../Actions';\nimport { FormControlProps } from '../FormControl';\nimport { useUID } from '../../hooks';\nimport Label, { LabelProps, StyledLabel } from '../Label';\nimport { calculateFontSize } from '../../styles';\nimport Icon from '../Icon';\n\nexport interface FormFieldProps\n extends OmitStrict<FormControlProps, 'placeholder' \| 'value' \| 'defaultValue'> {\n /** Pass a single form control component i.e. Input \| TextArea \| Select \| etc.. /\n children: ReactElement \| ReactElement[];\n /\n An id is required to connect a FormField's wrapping element, control element and info(aria-describedby) live region.\n * A random id will be generated if none is provided.\n * Since MOST FormControls should possess an id(excl. i.e RadioCheckGroup and others) this can be used.\n * The id prop will be used to generate the following:\n * - FormControl <-> Label association via a Label's htmlFor prop.\n * - FormField's wrapping element id {id}-field.\n * - FormField info element id ${id}-info.\n /\n id?: string;\n /\n Determines how the wrapping label should be rendered.\n * @default \"label\"\n /\n labelAs?: LabelProps['as'];\n /\n Overrides the for attribute on the label. If this is not set it will default to the forms id.\n * @default undefined\n /\n labelFor?: LabelProps['htmlFor'];\n /\n Sets the id of the label.\n * @default undefined\n /\n labelId?: LabelProps['id'];\n /\n Visually hides the label region.\n * @default false\n /\n labelHidden?: boolean;\n /\n Visually places the label after the input.\n * @default false\n /\n labelAfter?: boolean;\n /\n Wrapping HTML element tag. Renders as a fieldset for grouped elements i.e. RadioButtons/CheckboxGroup\n * @default \"div\"\n /\n as?: 'div' \| 'fieldset' \| ComponentType<any>;\n /\n Layout field elements inline in a row.\n * @default false\n /\n inline?: boolean;\n /* Optionally utilized by Input or Select. /\n actions?: Action[];\n /* Enables Flex container prop pass through. /\n container?: Exclude<FlexProps['container'], boolean>;\n /* Character remaining count. Typically used on Textareas only /\n charLimitDisplay?: ReactNode;\n}\n\nconst StyledStatusIcon = styled(Icon)<{ status: NonNullable<FormFieldProps['status']> }>(\n ({ theme, status }) => {\n return css`\n height: 1em;\n width: 1em;\n color: ${theme.components['form-field'][status]['status-color']};\n vertical-align: baseline;\n margin-inline-end: 0.5ch;\n `;\n }\n);\n\nStyledStatusIcon.defaultProps = defaultThemeProp;\n\nexport const StyledFormFieldInfo = styled.div<Pick<FormControlProps, 'status'>>(\n ({\n status,\n theme: {\n base: { 'font-size': fontSize, 'font-scale': fontScale, spacing },\n components: { 'form-field': formField }\n }\n }) => {\n const { xxs: infoFontSize } = calculateFontSize(fontSize, fontScale);\n\n return css`\n max-width: max-content;\n margin-top: calc(0.25 ${spacing});\n font-size: ${infoFontSize};\n word-break: break-word;\n ${status &&\n formField[status] &&\n css`\n color: ${formField[status]['status-color']};\n `}\n `;\n }\n);\n\nStyledFormFieldInfo.defaultProps = defaultThemeProp;\n\nexport const StyledFormField = styled.div<FormFieldProps>(props => {\n const {\n disabled,\n required,\n theme: {\n base: {\n palette: { urgent },\n 'disabled-opacity': disabledOpacity,\n spacing\n }\n }\n } = props;\n\n return css`\n ${disabled &&\n css`\n opacity: ${disabledOpacity};\n -webkit-user-select: none;\n user-select: none;\n `}\n position: relative;\n border: 0;\n\n > ${StyledLabel} {\n margin-bottom: calc(0.25 * ${spacing});\n ${disabled &&\n css`\n cursor: not-allowed;\n `}\n\n &::after {\n display: ${required ? 'inline' : 'none'};\n content: '\\\\00a0';\n vertical-align: top;\n color: ${urgent};\n }\n }\n `;\n});\n\nStyledFormField.defaultProps = defaultThemeProp;\n\nconst statusIconMap = { error: 'warn-solid', warning: 'warn', success: 'check' };\n\nconst FormField: FC<FormFieldProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<FormFieldProps>, ref: Ref<HTMLElement>) => {\n const uid = useUID();\n const {\n children: controlElement,\n id = uid,\n as = 'div',\n label,\n labelAs = 'label',\n labelFor = id,\n labelId,\n labelHidden = false,\n labelAfter = false,\n info,\n status,\n charLimitDisplay,\n required = false,\n disabled = false,\n readOnly = false,\n inline = false,\n actions,\n container,\n ...restProps\n } = props;\n\n const labelAsLegend: boolean = labelAs === 'legend';\n\n const styledLabel = (\n <Label\n id={labelId}\n as={labelAs}\n htmlFor={labelAs === 'label' ? labelFor : undefined}\n labelHidden={labelHidden}\n onClick={(e: MouseEvent) => {\n if (readOnly) e.preventDefault();\n }}\n inline={inline}\n >\n {status && !labelHidden && (\n <StyledStatusIcon status={status} name={statusIconMap[status]} />\n )}\n {label}\n </Label>\n );\n\n /\n We have to use an internal state and an effect to set the text value of info after the DOM element is rendered.\n This is to ensure screen readers will announce info on errors when role is set to alert.\n Needs testing to confirm. Currently the expected sequence would be:\n - FormField renders with no error and no info\n - user input triggers an error status\n - props passed set error status and provide info text\n - effect runs and sets live region state which renders and is announced\n /\n const [liveRegionInfo, setLiveRegionInfo] = useState<ReactNode>(null);\n\n useEffect(() => {\n setLiveRegionInfo(info);\n }, [info]);\n\n // fieldset or single form control element\n let content: FormFieldProps['children'] = labelAsLegend\n ? controlElement\n : cloneElement(controlElement as ReactElement, {\n 'aria-describedby': info && `${id}-info`\n });\n\n if (actions) {\n content = (\n <Flex container={{ alignItems: 'center', gap: 0.5 }}>\n {content}\n <Actions items={actions} menuAt={3} />\n </Flex>\n );\n }\n\n let infoContent = info ? (\n /\n Region for additional info, help or error message.\n Withholding aria-live=\"assertive\" to avoid iOS issue. See below.\n https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions#Preferring_specialized_live_region_roles\n */\n <StyledFormFieldInfo\n status={status}\n role={status === 'error' \|\| status === 'warning' ? 'alert' : undefined}\n id={`${id}-info`}\n >\n {liveRegionInfo}\n </StyledFormFieldInfo>\n ) : undefined;\n\n if (charLimitDisplay) {\n infoContent = (\n <Flex container={{ justify: infoContent ? 'between' : 'end', gap: 1 }}>\n {infoContent}\n <Flex item={{ shrink: 0 }}>{charLimitDisplay}</Flex>\n </Flex>\n );\n }\n\n return (\n <Flex\n {...restProps}\n container={{\n direction: inline ? 'row' : 'column',\n alignItems: inline ? 'center' : undefined,\n ...container\n }}\n as={StyledFormField}\n id={`${id}-field`}\n forwardedAs={as}\n required={required}\n disabled={disabled}\n readOnly={readOnly}\n aria-describedby={labelAsLegend && info ? `${id}-info` : undefined}\n ref={ref}\n >\n {(labelAsLegend \|\| !labelAfter) && styledLabel}\n {content}\n {!labelAsLegend && labelAfter && styledLabel}\n {infoContent}\n </Flex>\n );\n }\n);\n\nexport default FormField;\n"]}

package/lib/components/Grid/Grid.js CHANGED Viewed

@@ -173,7 +173,7 @@ export const StyledGrid = styled.div(({ container, item, theme: { base: { breakp
 });
 StyledGrid.defaultProps = defaultThemeProp;
 const Grid = forwardRef((props, ref) => {
-    return _jsx(StyledGrid, { ...props, ref: ref }, void 0);
+    return _jsx(StyledGrid, { ...props, ref: ref });
 });
 export default Grid;
 //# sourceMappingURL=Grid.js.map

package/lib/components/Grid/Grid.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Grid.js","sourceRoot":"","sources":["../../../src/components/Grid/Grid.tsx"],"names":[],"mappings":"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~~WAAI~~,CAAC;AAC7C,CAAC,CACF,CAAC;AAEF,eAAe,IAAI,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { ForwardProps } from '../../types';\nimport { defaultThemeProp } from '../../theme';\n\nimport GridProps from './Grid.types';\n\nconst prefix = (value: string) => {\n if (['between', 'around', 'evenly'].includes(value)) return `space-${value}`;\n return value;\n};\n\nconst getContainerStyles = (gridProps: GridProps['container']) => {\n if (!gridProps) return;\n\n if (gridProps === true) {\n return css`\n display: grid;\n `;\n }\n\n const {\n inline,\n pad,\n cols,\n autoCols,\n rows,\n autoRows,\n autoFlow,\n areas,\n template,\n colGap,\n rowGap,\n gap,\n justifyItems,\n justifyContent,\n alignItems,\n alignContent\n } = gridProps;\n\n return css`\n display: ${inline ? 'inline-grid' : 'grid'};\n\n ${pad !== undefined &&\n css`\n /* stylelint-disable function-name-case, function-whitespace-after /\n padding: ${({\n theme: {\n base: { spacing }\n }\n }) => (Array.isArray(pad) ? pad : [pad]).map(p => `calc(${p} ${spacing})`).join(' ')};\n\n /* stylelint-enable function-name-case, function-whitespace-after /\n `}\n\n ${cols &&\n css`\n grid-template-columns: ${cols};\n `}\n\n ${autoCols &&\n css`\n grid-auto-columns: ${autoCols};\n `}\n\n ${rows &&\n css`\n grid-template-rows: ${rows};\n `}\n\n ${autoRows &&\n css`\n grid-auto-rows: ${autoRows};\n `}\n\n ${autoFlow &&\n css`\n grid-auto-flow: ${autoFlow};\n `}\n\n ${areas &&\n css`\n grid-template-areas: ${areas};\n `}\n\n ${template &&\n css`\n grid-template: ${template};\n `}\n\n ${gap !== undefined &&\n css`\n gap: calc(${gap} ${props => props.theme.base.spacing});\n `}\n\n ${colGap !== undefined &&\n css`\n column-gap: calc(${colGap} * ${props => props.theme.base.spacing});\n `}\n\n ${rowGap !== undefined &&\n css`\n row-gap: calc(${rowGap} * ${props => props.theme.base.spacing});\n `}\n\n ${justifyItems &&\n css`\n justify-items: ${justifyItems};\n `}\n\n ${justifyContent &&\n css`\n justify-content: ${prefix(justifyContent)};\n `}\n\n ${alignItems &&\n css`\n align-items: ${alignItems};\n `}\n\n ${alignContent &&\n css`\n align-content: ${prefix(alignContent)};\n `}\n `;\n};\n\nconst getItemStyles = (props: GridProps['item']) => {\n if (!props) return;\n\n const {\n colStart,\n colEnd,\n colStartEnd,\n rowStart,\n rowEnd,\n rowStartEnd,\n area,\n justifySelf,\n alignSelf\n } = props;\n\n return css`\n ${colStart &&\n css`\n grid-column-start: ${colStart};\n `}\n\n ${colEnd &&\n css`\n grid-column-end: ${colEnd};\n `}\n\n ${colStartEnd &&\n css`\n grid-column: ${colStartEnd};\n `}\n\n ${rowStart &&\n css`\n grid-row-start: ${rowStart};\n `}\n\n ${rowEnd &&\n css`\n grid-row-end: ${rowEnd};\n `}\n\n ${rowStartEnd &&\n css`\n grid-row: ${rowStartEnd};\n `}\n\n ${area &&\n css`\n grid-area: ${area};\n `}\n\n ${justifySelf &&\n css`\n justify-self: ${justifySelf};\n `}\n\n ${alignSelf &&\n css`\n align-self: ${alignSelf};\n `}\n `;\n};\n\nconst breakpointOrder = ['xs', 'sm', 'md', 'lg', 'xl'] as const;\n\nexport const StyledGrid = styled.div<GridProps>(\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\nStyledGrid.defaultProps = defaultThemeProp;\n\nconst Grid: FunctionComponent<GridProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<GridProps>, ref: GridProps['ref']) => {\n return <StyledGrid {...props} ref={ref} />;\n }\n);\n\nexport default Grid;\n"]}
1	+ {"version":3,"file":"Grid.js","sourceRoot":"","sources":["../../../src/components/Grid/Grid.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { ForwardProps } from '../../types';\nimport { defaultThemeProp } from '../../theme';\n\nimport GridProps from './Grid.types';\n\nconst prefix = (value: string) => {\n if (['between', 'around', 'evenly'].includes(value)) return `space-${value}`;\n return value;\n};\n\nconst getContainerStyles = (gridProps: GridProps['container']) => {\n if (!gridProps) return;\n\n if (gridProps === true) {\n return css`\n display: grid;\n `;\n }\n\n const {\n inline,\n pad,\n cols,\n autoCols,\n rows,\n autoRows,\n autoFlow,\n areas,\n template,\n colGap,\n rowGap,\n gap,\n justifyItems,\n justifyContent,\n alignItems,\n alignContent\n } = gridProps;\n\n return css`\n display: ${inline ? 'inline-grid' : 'grid'};\n\n ${pad !== undefined &&\n css`\n /* stylelint-disable function-name-case, function-whitespace-after /\n padding: ${({\n theme: {\n base: { spacing }\n }\n }) => (Array.isArray(pad) ? pad : [pad]).map(p => `calc(${p} ${spacing})`).join(' ')};\n\n /* stylelint-enable function-name-case, function-whitespace-after /\n `}\n\n ${cols &&\n css`\n grid-template-columns: ${cols};\n `}\n\n ${autoCols &&\n css`\n grid-auto-columns: ${autoCols};\n `}\n\n ${rows &&\n css`\n grid-template-rows: ${rows};\n `}\n\n ${autoRows &&\n css`\n grid-auto-rows: ${autoRows};\n `}\n\n ${autoFlow &&\n css`\n grid-auto-flow: ${autoFlow};\n `}\n\n ${areas &&\n css`\n grid-template-areas: ${areas};\n `}\n\n ${template &&\n css`\n grid-template: ${template};\n `}\n\n ${gap !== undefined &&\n css`\n gap: calc(${gap} ${props => props.theme.base.spacing});\n `}\n\n ${colGap !== undefined &&\n css`\n column-gap: calc(${colGap} * ${props => props.theme.base.spacing});\n `}\n\n ${rowGap !== undefined &&\n css`\n row-gap: calc(${rowGap} * ${props => props.theme.base.spacing});\n `}\n\n ${justifyItems &&\n css`\n justify-items: ${justifyItems};\n `}\n\n ${justifyContent &&\n css`\n justify-content: ${prefix(justifyContent)};\n `}\n\n ${alignItems &&\n css`\n align-items: ${alignItems};\n `}\n\n ${alignContent &&\n css`\n align-content: ${prefix(alignContent)};\n `}\n `;\n};\n\nconst getItemStyles = (props: GridProps['item']) => {\n if (!props) return;\n\n const {\n colStart,\n colEnd,\n colStartEnd,\n rowStart,\n rowEnd,\n rowStartEnd,\n area,\n justifySelf,\n alignSelf\n } = props;\n\n return css`\n ${colStart &&\n css`\n grid-column-start: ${colStart};\n `}\n\n ${colEnd &&\n css`\n grid-column-end: ${colEnd};\n `}\n\n ${colStartEnd &&\n css`\n grid-column: ${colStartEnd};\n `}\n\n ${rowStart &&\n css`\n grid-row-start: ${rowStart};\n `}\n\n ${rowEnd &&\n css`\n grid-row-end: ${rowEnd};\n `}\n\n ${rowStartEnd &&\n css`\n grid-row: ${rowStartEnd};\n `}\n\n ${area &&\n css`\n grid-area: ${area};\n `}\n\n ${justifySelf &&\n css`\n justify-self: ${justifySelf};\n `}\n\n ${alignSelf &&\n css`\n align-self: ${alignSelf};\n `}\n `;\n};\n\nconst breakpointOrder = ['xs', 'sm', 'md', 'lg', 'xl'] as const;\n\nexport const StyledGrid = styled.div<GridProps>(\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\nStyledGrid.defaultProps = defaultThemeProp;\n\nconst Grid: FunctionComponent<GridProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<GridProps>, ref: GridProps['ref']) => {\n return <StyledGrid {...props} ref={ref} />;\n }\n);\n\nexport default Grid;\n"]}

package/lib/components/HTML/HTML.js CHANGED Viewed

@@ -142,7 +142,7 @@ export const StyledHTML = styled.div(({ theme }) => {
 StyledHTML.defaultProps = defaultThemeProp;
 const HTML = forwardRef(({ content, ...restProps }, ref) => {
     const sanitizedHtml = useMemo(() => dompurify.sanitize(content), [content]);
-    return (_jsx(StyledHTML, { dangerouslySetInnerHTML: { __html: sanitizedHtml }, ref: ref, ...restProps }, void 0));
+    return (_jsx(StyledHTML, { dangerouslySetInnerHTML: { __html: sanitizedHtml }, ref: ref, ...restProps }));
 });
 export default HTML;
 //# sourceMappingURL=HTML.js.map

package/lib/components/HTML/HTML.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"HTML.js","sourceRoot":"","sources":["../../../src/components/HTML/HTML.tsx"],"names":[],"mappings":"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~~WAAI~~,CAC5F,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,IAAI,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref, useMemo } from 'react';\nimport styled, { css, DefaultTheme } from 'styled-components';\nimport dompurify from 'dompurify';\n\nimport { StyledPopover } from '../Popover';\nimport { defaultThemeProp } from '../../theme';\nimport { calculateFontSize, FontSize } from '../../styles';\nimport { BaseProps, ForwardProps, NoChildrenProp } from '../../types';\n\nexport interface HTMLProps extends BaseProps, NoChildrenProp {\n content: string;\n ref?: Ref<HTMLDivElement>;\n}\n\nexport const listStyles = css`\n ul,\n ol {\n padding-inline-start: 2.5rem;\n }\n\n li {\n margin: 0.5rem 0;\n }\n\n ul li {\n ul {\n margin-inline-start: 1rem;\n list-style-type: circle;\n }\n\n ul ul {\n margin-inline-start: 2rem;\n list-style-type: square;\n }\n\n ul ul ul {\n margin-inline-start: 3rem;\n list-style-type: disc;\n }\n }\n\n ol li {\n ol {\n margin-inline-start: 1rem;\n list-style-type: lower-alpha;\n }\n\n ol ol {\n margin-inline-start: 2rem;\n list-style-type: lower-roman;\n }\n\n ol ol ol {\n margin-inline-start: 3rem;\n list-style-type: decimal;\n }\n }\n\n ${StyledPopover} ul, ${StyledPopover} ol {\n padding-inline-start: 0;\n }\n\n ${StyledPopover} li {\n margin: 0;\n }\n`;\n\nexport const getTableStyles = (theme: DefaultTheme) => css`\n border-collapse: collapse;\n\n td {\n border: 0.0625rem solid ${theme.base.palette['border-line']};\n min-width: 6.25rem;\n }\n\n tr:first-child {\n td:first-child {\n border-top-left-radius: 0.125rem;\n }\n\n td:last-child {\n border-top-right-radius: 0.125rem;\n }\n }\n\n tr:last-child {\n td:first-child {\n border-bottom-left-radius: 0.125rem;\n }\n\n td:last-child {\n border-bottom-right-radius: 0.125rem;\n }\n }\n`;\n\nexport const StyledHTML = styled.div(({ theme }) => {\n const {\n base: { 'font-size': baseFontSize, 'font-scale': baseFontScale, palette },\n components: { text }\n } = theme;\n const fontSize = calculateFontSize(baseFontSize, baseFontScale);\n return css`\n ${listStyles}\n table {\n ${getTableStyles(theme)}\n }\n img {\n max-width: 100%;\n height: auto;\n border-radius: 0.25rem;\n }\n a {\n color: ${palette.interactive};\n }\n pre {\n white-space: break-spaces;\n }\n p {\n min-height: ${fontSize[text.primary['font-size'] as FontSize]};\n }\n h1 {\n font-size: ${fontSize[text.h1['font-size'] as FontSize]};\n font-weight: ${text.h1['font-weight']};\n min-height: ${fontSize[text.h1['font-size'] as FontSize]};\n }\n h2 {\n font-size: ${fontSize[text.h2['font-size'] as FontSize]};\n font-weight: ${text.h2['font-weight']};\n min-height: ${fontSize[text.h2['font-size'] as FontSize]};\n }\n h3 {\n font-size: ${fontSize[text.h3['font-size'] as FontSize]};\n font-weight: ${text.h3['font-weight']};\n min-height: ${fontSize[text.h3['font-size'] as FontSize]};\n }\n h4 {\n font-size: ${fontSize[text.h4['font-size'] as FontSize]};\n font-weight: ${text.h4['font-weight']};\n min-height: ${fontSize[text.h4['font-size'] as FontSize]};\n }\n h5 {\n font-size: ${fontSize[text.h5['font-size'] as FontSize]};\n font-weight: ${text.h5['font-weight']};\n min-height: ${fontSize[text.h5['font-size'] as FontSize]};\n }\n h6 {\n font-size: ${fontSize[text.h6['font-size'] as FontSize]};\n font-weight: ${text.h6['font-weight']};\n min-height: ${fontSize[text.h6['font-size'] as FontSize]};\n }\n `;\n});\n\nStyledHTML.defaultProps = defaultThemeProp;\n\nconst HTML: FunctionComponent<HTMLProps & ForwardProps> = forwardRef(\n ({ content, ...restProps }: PropsWithoutRef<HTMLProps>, ref: HTMLProps['ref']) => {\n const sanitizedHtml = useMemo(() => dompurify.sanitize(content), [content]);\n\n return (\n <StyledHTML dangerouslySetInnerHTML={{ __html: sanitizedHtml }} ref={ref} {...restProps} />\n );\n }\n);\n\nexport default HTML;\n"]}
1	+ {"version":3,"file":"HTML.js","sourceRoot":"","sources":["../../../src/components/HTML/HTML.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref, useMemo } from 'react';\nimport styled, { css, DefaultTheme } from 'styled-components';\nimport dompurify from 'dompurify';\n\nimport { StyledPopover } from '../Popover';\nimport { defaultThemeProp } from '../../theme';\nimport { calculateFontSize, FontSize } from '../../styles';\nimport { BaseProps, ForwardProps, NoChildrenProp } from '../../types';\n\nexport interface HTMLProps extends BaseProps, NoChildrenProp {\n content: string;\n ref?: Ref<HTMLDivElement>;\n}\n\nexport const listStyles = css`\n ul,\n ol {\n padding-inline-start: 2.5rem;\n }\n\n li {\n margin: 0.5rem 0;\n }\n\n ul li {\n ul {\n margin-inline-start: 1rem;\n list-style-type: circle;\n }\n\n ul ul {\n margin-inline-start: 2rem;\n list-style-type: square;\n }\n\n ul ul ul {\n margin-inline-start: 3rem;\n list-style-type: disc;\n }\n }\n\n ol li {\n ol {\n margin-inline-start: 1rem;\n list-style-type: lower-alpha;\n }\n\n ol ol {\n margin-inline-start: 2rem;\n list-style-type: lower-roman;\n }\n\n ol ol ol {\n margin-inline-start: 3rem;\n list-style-type: decimal;\n }\n }\n\n ${StyledPopover} ul, ${StyledPopover} ol {\n padding-inline-start: 0;\n }\n\n ${StyledPopover} li {\n margin: 0;\n }\n`;\n\nexport const getTableStyles = (theme: DefaultTheme) => css`\n border-collapse: collapse;\n\n td {\n border: 0.0625rem solid ${theme.base.palette['border-line']};\n min-width: 6.25rem;\n }\n\n tr:first-child {\n td:first-child {\n border-top-left-radius: 0.125rem;\n }\n\n td:last-child {\n border-top-right-radius: 0.125rem;\n }\n }\n\n tr:last-child {\n td:first-child {\n border-bottom-left-radius: 0.125rem;\n }\n\n td:last-child {\n border-bottom-right-radius: 0.125rem;\n }\n }\n`;\n\nexport const StyledHTML = styled.div(({ theme }) => {\n const {\n base: { 'font-size': baseFontSize, 'font-scale': baseFontScale, palette },\n components: { text }\n } = theme;\n const fontSize = calculateFontSize(baseFontSize, baseFontScale);\n return css`\n ${listStyles}\n table {\n ${getTableStyles(theme)}\n }\n img {\n max-width: 100%;\n height: auto;\n border-radius: 0.25rem;\n }\n a {\n color: ${palette.interactive};\n }\n pre {\n white-space: break-spaces;\n }\n p {\n min-height: ${fontSize[text.primary['font-size'] as FontSize]};\n }\n h1 {\n font-size: ${fontSize[text.h1['font-size'] as FontSize]};\n font-weight: ${text.h1['font-weight']};\n min-height: ${fontSize[text.h1['font-size'] as FontSize]};\n }\n h2 {\n font-size: ${fontSize[text.h2['font-size'] as FontSize]};\n font-weight: ${text.h2['font-weight']};\n min-height: ${fontSize[text.h2['font-size'] as FontSize]};\n }\n h3 {\n font-size: ${fontSize[text.h3['font-size'] as FontSize]};\n font-weight: ${text.h3['font-weight']};\n min-height: ${fontSize[text.h3['font-size'] as FontSize]};\n }\n h4 {\n font-size: ${fontSize[text.h4['font-size'] as FontSize]};\n font-weight: ${text.h4['font-weight']};\n min-height: ${fontSize[text.h4['font-size'] as FontSize]};\n }\n h5 {\n font-size: ${fontSize[text.h5['font-size'] as FontSize]};\n font-weight: ${text.h5['font-weight']};\n min-height: ${fontSize[text.h5['font-size'] as FontSize]};\n }\n h6 {\n font-size: ${fontSize[text.h6['font-size'] as FontSize]};\n font-weight: ${text.h6['font-weight']};\n min-height: ${fontSize[text.h6['font-size'] as FontSize]};\n }\n `;\n});\n\nStyledHTML.defaultProps = defaultThemeProp;\n\nconst HTML: FunctionComponent<HTMLProps & ForwardProps> = forwardRef(\n ({ content, ...restProps }: PropsWithoutRef<HTMLProps>, ref: HTMLProps['ref']) => {\n const sanitizedHtml = useMemo(() => dompurify.sanitize(content), [content]);\n\n return (\n <StyledHTML dangerouslySetInnerHTML={{ __html: sanitizedHtml }} ref={ref} {...restProps} />\n );\n }\n);\n\nexport default HTML;\n"]}

package/lib/components/Icon/Icon.js CHANGED Viewed

@@ -45,7 +45,7 @@ const Icon = forwardRef(({ name, ...restProps }, ref) => {
             controller.abort();
         };
     }, [name]);
-    return (_jsx(StyledIcon, { ...restProps, role: 'img', ref: ref, xmlns: 'http://www.w3.org/2000/svg', viewBox: iconDef.viewBox, children: _jsx(iconDef.Component, {}, void 0) }, void 0));
+    return (_jsx(StyledIcon, { ...restProps, role: 'img', ref: ref, xmlns: 'http://www.w3.org/2000/svg', viewBox: iconDef.viewBox, children: _jsx(iconDef.Component, {}) }));
 });
 export default Icon;
 //# sourceMappingURL=Icon.js.map

package/lib/components/Icon/Icon.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Icon.js","sourceRoot":"","sources":["../../../src/components/Icon/Icon.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,UAAU,EACV,QAAQ,EACR,SAAS,EAKV,MAAM,OAAO,CAAC;AACf,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAoBvC,MAAM,YAAY,GAAG,IAAI,GAAG,EAA0B,CAAC;AAEvD,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,GAAG,KAAmB,EAAE,EAAE;IACrD,KAAK,CAAC,OAAO,CAAC,CAAC,EAAE,IAAI,EAAE,GAAG,OAAO,EAAE,EAAE,EAAE;QACrC,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,IAAI,CAAC;YAAE,YAAY,CAAC,GAAG,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;IAC/D,CAAC,CAAC,CAAC;AACL,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,GAAG,KAAmB,EAAE,EAAE;IAC1D,KAAK,CAAC,OAAO,CAAC,CAAC,EAAE,IAAI,EAAE,GAAG,OAAO,EAAE,EAAE,EAAE;QACrC,YAAY,CAAC,GAAG,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;IAClC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;CAMnC,CAAC;AAEF,MAAM,mBAAmB,GAA6B,MAAM,CAAC,MAAM,CAAC,EAAE,SAAS,EAAE,GAAG,EAAE,CAAC,IAAI,EAAE,CAAC,CAAC;AAE/F,MAAM,IAAI,GAAgD,UAAU,CAClE,CAAC,EAAE,IAAI,EAAE,GAAG,SAAS,EAA8B,EAAE,GAAqB,EAAE,EAAE;IAC5E,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,YAAY,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,mBAAmB,CAAC,CAAC;IAEtF,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,YAAY,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;YAC1B,UAAU,CAAC,YAAY,CAAC,GAAG,CAAC,IAAI,CAAE,CAAC,CAAC;YACpC,OAAO;SACR;QAED,MAAM,UAAU,GAAG,IAAI,eAAe,EAAE,CAAC;QACzC,MAAM,CAAC,WAAW,kBAAkB,CAAC,IAAI,CAAC,OAAO,CAAC;aAC/C,IAAI,CAAC,CAAC,MAAkB,EAAE,EAAE;YAC3B,IAAI,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,MAAM,CAAC,SAAS;gBAAE,MAAM,IAAI,KAAK,CAAC,2BAA2B,CAAC,CAAC;YAEpF,YAAY,CAAC,MAAM,CAAC,CAAC;YACrB,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,OAAO;gBAC5B,UAAU,CAAC,YAAY,CAAC,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,mBAAmB,CAAC,CAAC;QACrE,CAAC,CAAC;aACD,KAAK,CAAC,GAAG,EAAE;YACV,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,OAAO;gBAAE,UAAU,CAAC,mBAAmB,CAAC,CAAC;QAClE,CAAC,CAAC,CAAC;QAEL,OAAO,GAAG,EAAE;YACV,UAAU,CAAC,KAAK,EAAE,CAAC;QACrB,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,OAAO,CACL,KAAC,UAAU,OACL,SAAS,EACb,IAAI,EAAC,KAAK,EACV,GAAG,EAAE,GAAG,EACR,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAE,OAAO,CAAC,OAAO,YAExB,KAAC,OAAO,CAAC,SAAS,~~aAAG~~,~~WACV~~,CACd,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,IAAI,CAAC","sourcesContent":["import {\n forwardRef,\n useState,\n useEffect,\n FunctionComponent,\n Ref,\n PropsWithoutRef,\n ComponentType\n} from 'react';\nimport styled from 'styled-components';\n\nimport { BaseProps, ForwardProps, NoChildrenProp } from '../../types';\n\nexport interface IconDefinition {\n Component: ComponentType;\n viewBox?: string;\n}\n\nexport interface IconModule extends IconDefinition {\n name: string;\n}\n\nexport interface IconProps extends BaseProps, NoChildrenProp {\n /** The name indicating the Cosmos Icon. Reference the catalog above for the available names. /\n name: string;\n /* Ref for the wrapping element. */\n ref?: Ref<SVGSVGElement>;\n}\n\nconst iconRegistry = new Map<string, IconDefinition>();\n\nexport const registerIcon = (...icons: IconModule[]) => {\n icons.forEach(({ name, ...iconDef }) => {\n if (!iconRegistry.has(name)) iconRegistry.set(name, iconDef);\n });\n};\n\nexport const forceRegisterIcon = (...icons: IconModule[]) => {\n icons.forEach(({ name, ...iconDef }) => {\n iconRegistry.set(name, iconDef);\n });\n};\n\nexport const StyledIcon = styled.svg`\n display: inline-block;\n fill: currentColor;\n height: 1.125rem;\n width: 1.125rem;\n vertical-align: middle;\n`;\n\nconst emptyIconDefinition: Readonly<IconDefinition> = Object.freeze({ Component: () => null });\n\nconst Icon: FunctionComponent<IconProps & ForwardProps> = forwardRef(\n ({ name, ...restProps }: PropsWithoutRef<IconProps>, ref: IconProps['ref']) => {\n const [iconDef, setIconDef] = useState(iconRegistry.get(name) ?? emptyIconDefinition);\n\n useEffect(() => {\n if (iconRegistry.has(name)) {\n setIconDef(iconRegistry.get(name)!);\n return;\n }\n\n const controller = new AbortController();\n import(`./icons/${encodeURIComponent(name)}.icon`)\n .then((module: IconModule) => {\n if (!module.name \|\| !module.Component) throw new Error('Malformed icon definition');\n\n registerIcon(module);\n if (!controller.signal.aborted)\n setIconDef(iconRegistry.get(module.name) ?? emptyIconDefinition);\n })\n .catch(() => {\n if (!controller.signal.aborted) setIconDef(emptyIconDefinition);\n });\n\n return () => {\n controller.abort();\n };\n }, [name]);\n\n return (\n <StyledIcon\n {...restProps}\n role='img'\n ref={ref}\n xmlns='http://www.w3.org/2000/svg'\n viewBox={iconDef.viewBox}\n >\n <iconDef.Component />\n </StyledIcon>\n );\n }\n);\n\nexport default Icon;\n"]}
1	+ {"version":3,"file":"Icon.js","sourceRoot":"","sources":["../../../src/components/Icon/Icon.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,UAAU,EACV,QAAQ,EACR,SAAS,EAKV,MAAM,OAAO,CAAC;AACf,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAoBvC,MAAM,YAAY,GAAG,IAAI,GAAG,EAA0B,CAAC;AAEvD,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,GAAG,KAAmB,EAAE,EAAE;IACrD,KAAK,CAAC,OAAO,CAAC,CAAC,EAAE,IAAI,EAAE,GAAG,OAAO,EAAE,EAAE,EAAE;QACrC,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,IAAI,CAAC;YAAE,YAAY,CAAC,GAAG,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;IAC/D,CAAC,CAAC,CAAC;AACL,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,GAAG,KAAmB,EAAE,EAAE;IAC1D,KAAK,CAAC,OAAO,CAAC,CAAC,EAAE,IAAI,EAAE,GAAG,OAAO,EAAE,EAAE,EAAE;QACrC,YAAY,CAAC,GAAG,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;IAClC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;CAMnC,CAAC;AAEF,MAAM,mBAAmB,GAA6B,MAAM,CAAC,MAAM,CAAC,EAAE,SAAS,EAAE,GAAG,EAAE,CAAC,IAAI,EAAE,CAAC,CAAC;AAE/F,MAAM,IAAI,GAAgD,UAAU,CAClE,CAAC,EAAE,IAAI,EAAE,GAAG,SAAS,EAA8B,EAAE,GAAqB,EAAE,EAAE;IAC5E,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,YAAY,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,mBAAmB,CAAC,CAAC;IAEtF,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,YAAY,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;YAC1B,UAAU,CAAC,YAAY,CAAC,GAAG,CAAC,IAAI,CAAE,CAAC,CAAC;YACpC,OAAO;SACR;QAED,MAAM,UAAU,GAAG,IAAI,eAAe,EAAE,CAAC;QACzC,MAAM,CAAC,WAAW,kBAAkB,CAAC,IAAI,CAAC,OAAO,CAAC;aAC/C,IAAI,CAAC,CAAC,MAAkB,EAAE,EAAE;YAC3B,IAAI,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,MAAM,CAAC,SAAS;gBAAE,MAAM,IAAI,KAAK,CAAC,2BAA2B,CAAC,CAAC;YAEpF,YAAY,CAAC,MAAM,CAAC,CAAC;YACrB,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,OAAO;gBAC5B,UAAU,CAAC,YAAY,CAAC,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,mBAAmB,CAAC,CAAC;QACrE,CAAC,CAAC;aACD,KAAK,CAAC,GAAG,EAAE;YACV,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,OAAO;gBAAE,UAAU,CAAC,mBAAmB,CAAC,CAAC;QAClE,CAAC,CAAC,CAAC;QAEL,OAAO,GAAG,EAAE;YACV,UAAU,CAAC,KAAK,EAAE,CAAC;QACrB,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,OAAO,CACL,KAAC,UAAU,OACL,SAAS,EACb,IAAI,EAAC,KAAK,EACV,GAAG,EAAE,GAAG,EACR,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAE,OAAO,CAAC,OAAO,YAExB,KAAC,OAAO,CAAC,SAAS,KAAG,GACV,CACd,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,IAAI,CAAC","sourcesContent":["import {\n forwardRef,\n useState,\n useEffect,\n FunctionComponent,\n Ref,\n PropsWithoutRef,\n ComponentType\n} from 'react';\nimport styled from 'styled-components';\n\nimport { BaseProps, ForwardProps, NoChildrenProp } from '../../types';\n\nexport interface IconDefinition {\n Component: ComponentType;\n viewBox?: string;\n}\n\nexport interface IconModule extends IconDefinition {\n name: string;\n}\n\nexport interface IconProps extends BaseProps, NoChildrenProp {\n /** The name indicating the Cosmos Icon. Reference the catalog above for the available names. /\n name: string;\n /* Ref for the wrapping element. */\n ref?: Ref<SVGSVGElement>;\n}\n\nconst iconRegistry = new Map<string, IconDefinition>();\n\nexport const registerIcon = (...icons: IconModule[]) => {\n icons.forEach(({ name, ...iconDef }) => {\n if (!iconRegistry.has(name)) iconRegistry.set(name, iconDef);\n });\n};\n\nexport const forceRegisterIcon = (...icons: IconModule[]) => {\n icons.forEach(({ name, ...iconDef }) => {\n iconRegistry.set(name, iconDef);\n });\n};\n\nexport const StyledIcon = styled.svg`\n display: inline-block;\n fill: currentColor;\n height: 1.125rem;\n width: 1.125rem;\n vertical-align: middle;\n`;\n\nconst emptyIconDefinition: Readonly<IconDefinition> = Object.freeze({ Component: () => null });\n\nconst Icon: FunctionComponent<IconProps & ForwardProps> = forwardRef(\n ({ name, ...restProps }: PropsWithoutRef<IconProps>, ref: IconProps['ref']) => {\n const [iconDef, setIconDef] = useState(iconRegistry.get(name) ?? emptyIconDefinition);\n\n useEffect(() => {\n if (iconRegistry.has(name)) {\n setIconDef(iconRegistry.get(name)!);\n return;\n }\n\n const controller = new AbortController();\n import(`./icons/${encodeURIComponent(name)}.icon`)\n .then((module: IconModule) => {\n if (!module.name \|\| !module.Component) throw new Error('Malformed icon definition');\n\n registerIcon(module);\n if (!controller.signal.aborted)\n setIconDef(iconRegistry.get(module.name) ?? emptyIconDefinition);\n })\n .catch(() => {\n if (!controller.signal.aborted) setIconDef(emptyIconDefinition);\n });\n\n return () => {\n controller.abort();\n };\n }, [name]);\n\n return (\n <StyledIcon\n {...restProps}\n role='img'\n ref={ref}\n xmlns='http://www.w3.org/2000/svg'\n viewBox={iconDef.viewBox}\n >\n <iconDef.Component />\n </StyledIcon>\n );\n }\n);\n\nexport default Icon;\n"]}

package/lib/components/Icon/icons/1-1-solid.icon.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 // This file is autogenerated. Any changes will be overwritten.
 export const name = '1-1-solid';
-export const Component = () => (_jsx("path", { d: 'M16.859375,9.24375 C16.859375,9.24375 16.859375,15.3257812 16.859375,15.3257812 C16.859375,15.6609375 16.6679688,15.8523437 16.3328125,15.8523437 C16.3328125,15.8523437 16.3328125,15.8523437 16.3328125,15.8523437 C15.9976563,15.8523437 15.8539063,15.6609375 15.8539063,15.3257812 C15.8539063,15.3257812 15.8539063,15.3257812 15.8539063,15.3257812 C15.8539063,15.3257812 15.8539063,9.9140625 15.8539063,9.9140625 C15.8539063,9.9140625 14.7046875,10.296875 14.7046875,10.296875 C14.4171875,10.440625 14.2257813,10.296875 14.0820312,9.96171875 C13.9382812,9.6265625 14.0820312,9.38671875 14.4171875,9.3390625 C14.4171875,9.3390625 14.4171875,9.3390625 14.4171875,9.3390625 C14.4171875,9.3390625 16.1890625,8.71640625 16.1890625,8.71640625 C16.3328125,8.66875 16.5242187,8.66875 16.6679688,8.8125 C16.6679688,8.8125 16.6679688,8.8125 16.6679688,8.8125 C16.8117188,8.95625 16.859375,9.1 16.859375,9.24375 C16.859375,9.24375 16.859375,9.24375 16.859375,9.24375 Z M12.7882812,11.2546875 C12.7882812,11.5898438 12.596875,11.7335938 12.2617188,11.7335938 C11.9265625,11.7335938 11.7351562,11.5898438 11.7351562,11.2546875 C11.7351562,11.2546875 11.7351562,11.2546875 11.7351562,11.2546875 C11.7351562,10.9195313 11.9265625,10.728125 12.2617188,10.728125 C12.596875,10.728125 12.7882812,10.9195313 12.7882812,11.2546875 C12.7882812,11.2546875 12.7882812,11.2546875 12.7882812,11.2546875 Z M12.7882812,14.3203125 C12.7882812,14.6554687 12.596875,14.7992187 12.2617188,14.7992187 C11.9265625,14.7992187 11.7351562,14.6554687 11.7351562,14.3203125 C11.7351562,14.3203125 11.7351562,14.3203125 11.7351562,14.3203125 C11.7351562,13.9851562 11.9265625,13.79375 12.2617188,13.79375 C12.596875,13.79375 12.7882812,13.9851562 12.7882812,14.3203125 C12.7882812,14.3203125 12.7882812,14.3203125 12.7882812,14.3203125 Z M8.66953125,9.24375 C8.66953125,9.24375 8.66953125,15.3257812 8.66953125,15.3257812 C8.66953125,15.6609375 8.52578125,15.8523437 8.190625,15.8523437 C8.190625,15.8523437 8.190625,15.8523437 8.190625,15.8523437 C7.85546875,15.8523437 7.6640625,15.6609375 7.6640625,15.3257812 C7.6640625,15.3257812 7.6640625,15.3257812 7.6640625,15.3257812 C7.6640625,15.3257812 7.6640625,9.9140625 7.6640625,9.9140625 C7.6640625,9.9140625 6.5625,10.296875 6.5625,10.296875 C6.22734375,10.3929687 6.0359375,10.296875 5.8921875,9.96171875 C5.8921875,9.96171875 5.8921875,9.96171875 5.8921875,9.96171875 C5.84453125,9.6265625 5.93984375,9.38671875 6.22734375,9.3390625 C6.22734375,9.3390625 6.22734375,9.3390625 6.22734375,9.3390625 C6.22734375,9.3390625 7.99921875,8.71640625 7.99921875,8.71640625 C8.14296875,8.66875 8.334375,8.71640625 8.478125,8.8125 C8.478125,8.8125 8.478125,8.8125 8.478125,8.8125 C8.621875,8.90859375 8.66953125,9.0515625 8.66953125,9.24375 C8.66953125,9.24375 8.66953125,9.24375 8.66953125,9.24375 Z M20.9296875,3.5921875 C18.5351562,1.19765625 15.6617188,0 12.2609375,0 C8.86015625,0 5.98671875,1.19765625 3.5921875,3.5921875 C1.19765625,5.98671875 0,8.86015625 0,12.2609375 C0,15.6617188 1.19765625,18.5351563 3.5921875,20.9296875 C5.98671875,23.3242188 8.86015625,24.521875 12.2609375,24.521875 C15.6617188,24.521875 18.5351563,23.3242188 20.9296875,20.9296875 C23.3242188,18.5351562 24.521875,15.6617188 24.521875,12.2609375 C24.521875,8.86015625 23.3242188,5.98671875 20.9296875,3.5921875 Z' }, void 0));
+export const Component = () => (_jsx("path", { d: 'M16.859375,9.24375 C16.859375,9.24375 16.859375,15.3257812 16.859375,15.3257812 C16.859375,15.6609375 16.6679688,15.8523437 16.3328125,15.8523437 C16.3328125,15.8523437 16.3328125,15.8523437 16.3328125,15.8523437 C15.9976563,15.8523437 15.8539063,15.6609375 15.8539063,15.3257812 C15.8539063,15.3257812 15.8539063,15.3257812 15.8539063,15.3257812 C15.8539063,15.3257812 15.8539063,9.9140625 15.8539063,9.9140625 C15.8539063,9.9140625 14.7046875,10.296875 14.7046875,10.296875 C14.4171875,10.440625 14.2257813,10.296875 14.0820312,9.96171875 C13.9382812,9.6265625 14.0820312,9.38671875 14.4171875,9.3390625 C14.4171875,9.3390625 14.4171875,9.3390625 14.4171875,9.3390625 C14.4171875,9.3390625 16.1890625,8.71640625 16.1890625,8.71640625 C16.3328125,8.66875 16.5242187,8.66875 16.6679688,8.8125 C16.6679688,8.8125 16.6679688,8.8125 16.6679688,8.8125 C16.8117188,8.95625 16.859375,9.1 16.859375,9.24375 C16.859375,9.24375 16.859375,9.24375 16.859375,9.24375 Z M12.7882812,11.2546875 C12.7882812,11.5898438 12.596875,11.7335938 12.2617188,11.7335938 C11.9265625,11.7335938 11.7351562,11.5898438 11.7351562,11.2546875 C11.7351562,11.2546875 11.7351562,11.2546875 11.7351562,11.2546875 C11.7351562,10.9195313 11.9265625,10.728125 12.2617188,10.728125 C12.596875,10.728125 12.7882812,10.9195313 12.7882812,11.2546875 C12.7882812,11.2546875 12.7882812,11.2546875 12.7882812,11.2546875 Z M12.7882812,14.3203125 C12.7882812,14.6554687 12.596875,14.7992187 12.2617188,14.7992187 C11.9265625,14.7992187 11.7351562,14.6554687 11.7351562,14.3203125 C11.7351562,14.3203125 11.7351562,14.3203125 11.7351562,14.3203125 C11.7351562,13.9851562 11.9265625,13.79375 12.2617188,13.79375 C12.596875,13.79375 12.7882812,13.9851562 12.7882812,14.3203125 C12.7882812,14.3203125 12.7882812,14.3203125 12.7882812,14.3203125 Z M8.66953125,9.24375 C8.66953125,9.24375 8.66953125,15.3257812 8.66953125,15.3257812 C8.66953125,15.6609375 8.52578125,15.8523437 8.190625,15.8523437 C8.190625,15.8523437 8.190625,15.8523437 8.190625,15.8523437 C7.85546875,15.8523437 7.6640625,15.6609375 7.6640625,15.3257812 C7.6640625,15.3257812 7.6640625,15.3257812 7.6640625,15.3257812 C7.6640625,15.3257812 7.6640625,9.9140625 7.6640625,9.9140625 C7.6640625,9.9140625 6.5625,10.296875 6.5625,10.296875 C6.22734375,10.3929687 6.0359375,10.296875 5.8921875,9.96171875 C5.8921875,9.96171875 5.8921875,9.96171875 5.8921875,9.96171875 C5.84453125,9.6265625 5.93984375,9.38671875 6.22734375,9.3390625 C6.22734375,9.3390625 6.22734375,9.3390625 6.22734375,9.3390625 C6.22734375,9.3390625 7.99921875,8.71640625 7.99921875,8.71640625 C8.14296875,8.66875 8.334375,8.71640625 8.478125,8.8125 C8.478125,8.8125 8.478125,8.8125 8.478125,8.8125 C8.621875,8.90859375 8.66953125,9.0515625 8.66953125,9.24375 C8.66953125,9.24375 8.66953125,9.24375 8.66953125,9.24375 Z M20.9296875,3.5921875 C18.5351562,1.19765625 15.6617188,0 12.2609375,0 C8.86015625,0 5.98671875,1.19765625 3.5921875,3.5921875 C1.19765625,5.98671875 0,8.86015625 0,12.2609375 C0,15.6617188 1.19765625,18.5351563 3.5921875,20.9296875 C5.98671875,23.3242188 8.86015625,24.521875 12.2609375,24.521875 C15.6617188,24.521875 18.5351563,23.3242188 20.9296875,20.9296875 C23.3242188,18.5351562 24.521875,15.6617188 24.521875,12.2609375 C24.521875,8.86015625 23.3242188,5.98671875 20.9296875,3.5921875 Z' }));
 export const viewBox = '0 0 25 25';
 //# sourceMappingURL=1-1-solid.icon.js.map

package/lib/components/Icon/icons/1-1-solid.icon.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"1-1-solid.icon.js","sourceRoot":"","sources":["../../../../src/components/Icon/icons/1-1-solid.icon.tsx"],"names":[],"mappings":";AAAA,+DAA+D;AAC/D,MAAM,CAAC,MAAM,IAAI,GAAG,WAAW,CAAC;AAEhC,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,CAC7B,eAAM,CAAC,EAAC,ouGAAouG,~~WAAG~~,CAChvG,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,WAAW,CAAC","sourcesContent":["// This file is autogenerated. Any changes will be overwritten.\nexport const name = '1-1-solid';\n\nexport const Component = () => (\n <path d='M16.859375,9.24375 C16.859375,9.24375 16.859375,15.3257812 16.859375,15.3257812 C16.859375,15.6609375 16.6679688,15.8523437 16.3328125,15.8523437 C16.3328125,15.8523437 16.3328125,15.8523437 16.3328125,15.8523437 C15.9976563,15.8523437 15.8539063,15.6609375 15.8539063,15.3257812 C15.8539063,15.3257812 15.8539063,15.3257812 15.8539063,15.3257812 C15.8539063,15.3257812 15.8539063,9.9140625 15.8539063,9.9140625 C15.8539063,9.9140625 14.7046875,10.296875 14.7046875,10.296875 C14.4171875,10.440625 14.2257813,10.296875 14.0820312,9.96171875 C13.9382812,9.6265625 14.0820312,9.38671875 14.4171875,9.3390625 C14.4171875,9.3390625 14.4171875,9.3390625 14.4171875,9.3390625 C14.4171875,9.3390625 16.1890625,8.71640625 16.1890625,8.71640625 C16.3328125,8.66875 16.5242187,8.66875 16.6679688,8.8125 C16.6679688,8.8125 16.6679688,8.8125 16.6679688,8.8125 C16.8117188,8.95625 16.859375,9.1 16.859375,9.24375 C16.859375,9.24375 16.859375,9.24375 16.859375,9.24375 Z M12.7882812,11.2546875 C12.7882812,11.5898438 12.596875,11.7335938 12.2617188,11.7335938 C11.9265625,11.7335938 11.7351562,11.5898438 11.7351562,11.2546875 C11.7351562,11.2546875 11.7351562,11.2546875 11.7351562,11.2546875 C11.7351562,10.9195313 11.9265625,10.728125 12.2617188,10.728125 C12.596875,10.728125 12.7882812,10.9195313 12.7882812,11.2546875 C12.7882812,11.2546875 12.7882812,11.2546875 12.7882812,11.2546875 Z M12.7882812,14.3203125 C12.7882812,14.6554687 12.596875,14.7992187 12.2617188,14.7992187 C11.9265625,14.7992187 11.7351562,14.6554687 11.7351562,14.3203125 C11.7351562,14.3203125 11.7351562,14.3203125 11.7351562,14.3203125 C11.7351562,13.9851562 11.9265625,13.79375 12.2617188,13.79375 C12.596875,13.79375 12.7882812,13.9851562 12.7882812,14.3203125 C12.7882812,14.3203125 12.7882812,14.3203125 12.7882812,14.3203125 Z M8.66953125,9.24375 C8.66953125,9.24375 8.66953125,15.3257812 8.66953125,15.3257812 C8.66953125,15.6609375 8.52578125,15.8523437 8.190625,15.8523437 C8.190625,15.8523437 8.190625,15.8523437 8.190625,15.8523437 C7.85546875,15.8523437 7.6640625,15.6609375 7.6640625,15.3257812 C7.6640625,15.3257812 7.6640625,15.3257812 7.6640625,15.3257812 C7.6640625,15.3257812 7.6640625,9.9140625 7.6640625,9.9140625 C7.6640625,9.9140625 6.5625,10.296875 6.5625,10.296875 C6.22734375,10.3929687 6.0359375,10.296875 5.8921875,9.96171875 C5.8921875,9.96171875 5.8921875,9.96171875 5.8921875,9.96171875 C5.84453125,9.6265625 5.93984375,9.38671875 6.22734375,9.3390625 C6.22734375,9.3390625 6.22734375,9.3390625 6.22734375,9.3390625 C6.22734375,9.3390625 7.99921875,8.71640625 7.99921875,8.71640625 C8.14296875,8.66875 8.334375,8.71640625 8.478125,8.8125 C8.478125,8.8125 8.478125,8.8125 8.478125,8.8125 C8.621875,8.90859375 8.66953125,9.0515625 8.66953125,9.24375 C8.66953125,9.24375 8.66953125,9.24375 8.66953125,9.24375 Z M20.9296875,3.5921875 C18.5351562,1.19765625 15.6617188,0 12.2609375,0 C8.86015625,0 5.98671875,1.19765625 3.5921875,3.5921875 C1.19765625,5.98671875 0,8.86015625 0,12.2609375 C0,15.6617188 1.19765625,18.5351563 3.5921875,20.9296875 C5.98671875,23.3242188 8.86015625,24.521875 12.2609375,24.521875 C15.6617188,24.521875 18.5351563,23.3242188 20.9296875,20.9296875 C23.3242188,18.5351562 24.521875,15.6617188 24.521875,12.2609375 C24.521875,8.86015625 23.3242188,5.98671875 20.9296875,3.5921875 Z' />\n);\n\nexport const viewBox = '0 0 25 25';\n"]}
1	+ {"version":3,"file":"1-1-solid.icon.js","sourceRoot":"","sources":["../../../../src/components/Icon/icons/1-1-solid.icon.tsx"],"names":[],"mappings":";AAAA,+DAA+D;AAC/D,MAAM,CAAC,MAAM,IAAI,GAAG,WAAW,CAAC;AAEhC,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,CAC7B,eAAM,CAAC,EAAC,ouGAAouG,GAAG,CAChvG,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,WAAW,CAAC","sourcesContent":["// This file is autogenerated. Any changes will be overwritten.\nexport const name = '1-1-solid';\n\nexport const Component = () => (\n <path d='M16.859375,9.24375 C16.859375,9.24375 16.859375,15.3257812 16.859375,15.3257812 C16.859375,15.6609375 16.6679688,15.8523437 16.3328125,15.8523437 C16.3328125,15.8523437 16.3328125,15.8523437 16.3328125,15.8523437 C15.9976563,15.8523437 15.8539063,15.6609375 15.8539063,15.3257812 C15.8539063,15.3257812 15.8539063,15.3257812 15.8539063,15.3257812 C15.8539063,15.3257812 15.8539063,9.9140625 15.8539063,9.9140625 C15.8539063,9.9140625 14.7046875,10.296875 14.7046875,10.296875 C14.4171875,10.440625 14.2257813,10.296875 14.0820312,9.96171875 C13.9382812,9.6265625 14.0820312,9.38671875 14.4171875,9.3390625 C14.4171875,9.3390625 14.4171875,9.3390625 14.4171875,9.3390625 C14.4171875,9.3390625 16.1890625,8.71640625 16.1890625,8.71640625 C16.3328125,8.66875 16.5242187,8.66875 16.6679688,8.8125 C16.6679688,8.8125 16.6679688,8.8125 16.6679688,8.8125 C16.8117188,8.95625 16.859375,9.1 16.859375,9.24375 C16.859375,9.24375 16.859375,9.24375 16.859375,9.24375 Z M12.7882812,11.2546875 C12.7882812,11.5898438 12.596875,11.7335938 12.2617188,11.7335938 C11.9265625,11.7335938 11.7351562,11.5898438 11.7351562,11.2546875 C11.7351562,11.2546875 11.7351562,11.2546875 11.7351562,11.2546875 C11.7351562,10.9195313 11.9265625,10.728125 12.2617188,10.728125 C12.596875,10.728125 12.7882812,10.9195313 12.7882812,11.2546875 C12.7882812,11.2546875 12.7882812,11.2546875 12.7882812,11.2546875 Z M12.7882812,14.3203125 C12.7882812,14.6554687 12.596875,14.7992187 12.2617188,14.7992187 C11.9265625,14.7992187 11.7351562,14.6554687 11.7351562,14.3203125 C11.7351562,14.3203125 11.7351562,14.3203125 11.7351562,14.3203125 C11.7351562,13.9851562 11.9265625,13.79375 12.2617188,13.79375 C12.596875,13.79375 12.7882812,13.9851562 12.7882812,14.3203125 C12.7882812,14.3203125 12.7882812,14.3203125 12.7882812,14.3203125 Z M8.66953125,9.24375 C8.66953125,9.24375 8.66953125,15.3257812 8.66953125,15.3257812 C8.66953125,15.6609375 8.52578125,15.8523437 8.190625,15.8523437 C8.190625,15.8523437 8.190625,15.8523437 8.190625,15.8523437 C7.85546875,15.8523437 7.6640625,15.6609375 7.6640625,15.3257812 C7.6640625,15.3257812 7.6640625,15.3257812 7.6640625,15.3257812 C7.6640625,15.3257812 7.6640625,9.9140625 7.6640625,9.9140625 C7.6640625,9.9140625 6.5625,10.296875 6.5625,10.296875 C6.22734375,10.3929687 6.0359375,10.296875 5.8921875,9.96171875 C5.8921875,9.96171875 5.8921875,9.96171875 5.8921875,9.96171875 C5.84453125,9.6265625 5.93984375,9.38671875 6.22734375,9.3390625 C6.22734375,9.3390625 6.22734375,9.3390625 6.22734375,9.3390625 C6.22734375,9.3390625 7.99921875,8.71640625 7.99921875,8.71640625 C8.14296875,8.66875 8.334375,8.71640625 8.478125,8.8125 C8.478125,8.8125 8.478125,8.8125 8.478125,8.8125 C8.621875,8.90859375 8.66953125,9.0515625 8.66953125,9.24375 C8.66953125,9.24375 8.66953125,9.24375 8.66953125,9.24375 Z M20.9296875,3.5921875 C18.5351562,1.19765625 15.6617188,0 12.2609375,0 C8.86015625,0 5.98671875,1.19765625 3.5921875,3.5921875 C1.19765625,5.98671875 0,8.86015625 0,12.2609375 C0,15.6617188 1.19765625,18.5351563 3.5921875,20.9296875 C5.98671875,23.3242188 8.86015625,24.521875 12.2609375,24.521875 C15.6617188,24.521875 18.5351563,23.3242188 20.9296875,20.9296875 C23.3242188,18.5351562 24.521875,15.6617188 24.521875,12.2609375 C24.521875,8.86015625 23.3242188,5.98671875 20.9296875,3.5921875 Z' />\n);\n\nexport const viewBox = '0 0 25 25';\n"]}