@contentful/f36-asset 4.19.0 → 4.20.0

package/CHANGELOG.md

@@ -1,5 +1,37 @@
 # Change Log
 
+## 4.20.0
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @contentful/f36-icon@4.20.0
+  - @contentful/f36-icons@4.20.0
+  - @contentful/f36-typography@4.20.0
+  - @contentful/f36-core@4.20.0
+
+## 4.19.2
+
+### Patch Changes
+
+- Updated dependencies [[`9647d295`](https://github.com/contentful/forma-36/commit/9647d295763c6518fe6d381d79a53524ac104d92)]:
+  - @contentful/f36-typography@4.19.2
+  - @contentful/f36-icon@4.19.2
+  - @contentful/f36-icons@4.19.2
+  - @contentful/f36-core@4.19.2
+
+## 4.19.1
+
+### Patch Changes
+
+- [#2209](https://github.com/contentful/forma-36/pull/2209) [`42f0c321`](https://github.com/contentful/forma-36/commit/42f0c3218965137191842f492fe5dbf4bd10784c) Thanks [@denkristoffer](https://github.com/denkristoffer)! - build: build ESM to JS file - legacy output
+  fix(notification): use type imports
+- Updated dependencies [[`42f0c321`](https://github.com/contentful/forma-36/commit/42f0c3218965137191842f492fe5dbf4bd10784c)]:
+  - @contentful/f36-icon@4.19.1
+  - @contentful/f36-icons@4.19.1
+  - @contentful/f36-typography@4.19.1
+  - @contentful/f36-core@4.19.1
+
 ## 4.19.0
 
 ### Patch Changes

package/dist/{index.mjs → esm/index.js}

@@ -8,4 +8,4 @@ import g from '@contentful/f36-tokens';
 var N=Object.defineProperty,w=Object.defineProperties;var B=Object.getOwnPropertyDescriptors;var f=Object.getOwnPropertySymbols;var I=Object.prototype.hasOwnProperty,v=Object.prototype.propertyIsEnumerable;var A=(t,e,s)=>e in t?N(t,e,{enumerable:!0,configurable:!0,writable:!0,value:s}):t[e]=s,o=(t,e)=>{for(var s in e||(e={}))I.call(e,s)&&A(t,s,e[s]);if(f)for(var s of f(e))v.call(e,s)&&A(t,s,e[s]);return t},P=(t,e)=>w(t,B(e));var d=(t,e)=>{var s={};for(var r in t)I.call(t,r)&&e.indexOf(r)<0&&(s[r]=t[r]);if(t!=null&&f)for(var r of f(t))e.indexOf(r)<0&&v.call(t,r)&&(s[r]=t[r]);return s};function T(){return {root:css({display:"inline-block",width:"39px",height:"39px","g, path":{fill:g.gray600}})}}var u=c=>{var m=c,{type:t="archive",className:e,testId:s="cf-ui-asset-icon"}=m,r=d(m,["type","className","testId"]);let y=T(),i=P(o({},r),{testId:s,className:cx(y.root,e)});switch(t){case"audio":return n.createElement(AudioIcon,o({},i));case"code":return n.createElement(CodeIllustrationIcon,o({},i));case"image":return n.createElement(ImageIcon,o({},i));case"markup":return n.createElement(MarkupIcon,o({},i));case"pdf":return n.createElement(PdfIcon,o({},i));case"plaintext":return n.createElement(PlaintextIcon,o({},i));case"presentation":return n.createElement(PresentationIcon,o({},i));case"richtext":return n.createElement(RichtextIcon,o({},i));case"spreadsheet":return n.createElement(SpreadsheetIcon,o({},i));case"video":return n.createElement(VideoIcon,o({},i));case"archive":default:return n.createElement(ArchiveIcon,o({},i))}};u.displayName="AssetIcon";function S(){return {relative:css({position:"relative"}),height100:css({height:"100%"}),image:css({width:"auto",maxWidth:"100%",maxHeight:"100%"}),titleContainer:css({opacity:0,transition:`opacity ${g.transitionDurationDefault} ${g.transitionEasingDefault}`,position:"absolute",bottom:0,right:0,left:0,height:"100%",display:"flex",overflow:"hidden",alignItems:"flex-end",boxSizing:"border-box",background:`linear-gradient(0deg, ${g.gray900} 0%, transparent calc(1rem * (100 / ${g.fontBaseDefault})), transparent 100% )`,":hover":{opacity:1}}),title:css({bottom:0,left:0,right:0,position:"absolute"})}}function b(X,i){var h=X,{className:t,src:e,status:s,testId:r="cf-ui-asset",title:c,type:m="image"}=h,y=d(h,["className","src","status","testId","title","type"]);let p=S(),C=e&&e!==""&&m==="image"&&s!=="archived";return n.createElement(Box,o({className:cx(p.relative,t),testId:r,ref:i},y),C?n.createElement(n.Fragment,null,n.createElement(Flex,{alignItems:"center",justifyContent:"center",className:p.height100},n.createElement("img",{className:p.image,src:e,alt:c})),c&&n.createElement("div",{className:p.titleContainer},n.createElement(Text,{className:p.title,fontColor:"colorWhite",margin:"spacingS",isTruncated:!0},c))):n.createElement(Flex,{flexDirection:"column",alignItems:"center",justifyContent:"center",paddingLeft:"spacingS",paddingRight:"spacingS",className:p.height100},n.createElement(Flex,{marginBottom:"spacingM",marginTop:"spacingM",justifyContent:"center"},n.createElement(u,{type:m})),n.createElement(Text,{isTruncated:!0,marginBottom:"spacingM",fontColor:"gray600"},c)))}b.displayName="Asset";var J=n.forwardRef(b);var K={archive:"archive",audio:"audio",code:"code",image:"image",markup:"markup",pdf:"pdf",plaintext:"plaintext",presentation:"presentation",richtext:"richtext",spreadsheet:"spreadsheet",video:"video"};function Q(t){return Object.keys(K).includes(t)}
 
 export { J as Asset, u as AssetIcon, Q as isAssetType };
-//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Asset.tsx","../../src/AssetIcon/AssetIcon.tsx","../../src/AssetIcon/AssetIcon.styles.ts","../../src/Asset.styles.ts","../../src/types.ts"],"names":["React","cx","Box","Flex","Text","ArchiveIcon","AudioIcon","CodeIllustrationIcon","ImageIcon","MarkupIcon","PdfIcon","PlaintextIcon","RichtextIcon","PresentationIcon","SpreadsheetIcon","VideoIcon","tokens","css","getAssetIconStyles","AssetIcon","_a","_b","type","className","testId","otherProps","__objRest","styles","props","__spreadProps","__spreadValues","getAssetStyles","_Asset","ref","src","status","title","showPreview","Asset","types","isAssetType"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { cx } from 'emotion';\nimport {\n  Box,\n  Flex,\n  type EntityStatus,\n  type PickUnion,\n  type CommonProps,\n} from '@contentful/f36-core';\nimport { Text } from '@contentful/f36-typography';\n\nimport { AssetIcon } from './AssetIcon/AssetIcon';\nimport { getAssetStyles } from './Asset.styles';\nimport type { AssetType } from './types';\n\nexport type AssetStatus = PickUnion<\n  EntityStatus,\n  'archived' | 'changed' | 'deleted' | 'draft' | 'published'\n>;\n\nexport interface AssetProps extends CommonProps {\n  /**\n   * A `src` attribute to use for image assets\n   */\n  src?: string;\n  /**\n   * The publish status of the asset\n   */\n  status?: AssetStatus;\n  /**\n   * The title of the asset\n   */\n  title?: string;\n  /**\n   * The type of asset being represented\n   */\n  type?: AssetType;\n}\n\nfunction _Asset(\n  {\n    className,\n    src,\n    status,\n    testId = 'cf-ui-asset',\n    title,\n    type = 'image',\n    ...otherProps\n  }: AssetProps,\n  ref: React.Ref<any>,\n) {\n  const styles = getAssetStyles();\n  const isImage = src && src !== '' && type === 'image';\n\n  // Do not show image previews when publish status is archived\n  const showPreview = isImage && status !== 'archived';\n\n  return (\n    <Box\n      className={cx(styles.relative, className)}\n      testId={testId}\n      ref={ref}\n      {...otherProps}\n    >\n      {showPreview ? (\n        <>\n          <Flex\n            alignItems=\"center\"\n            justifyContent=\"center\"\n            className={styles.height100}\n          >\n            <img className={styles.image} src={src} alt={title} />\n          </Flex>\n          {title && (\n            <div className={styles.titleContainer}>\n              <Text\n                className={styles.title}\n                fontColor=\"colorWhite\"\n                margin=\"spacingS\"\n                isTruncated\n              >\n                {title}\n              </Text>\n            </div>\n          )}\n        </>\n      ) : (\n        <Flex\n          flexDirection=\"column\"\n          alignItems=\"center\"\n          justifyContent=\"center\"\n          paddingLeft=\"spacingS\"\n          paddingRight=\"spacingS\"\n          className={styles.height100}\n        >\n          <Flex\n            marginBottom=\"spacingM\"\n            marginTop=\"spacingM\"\n            justifyContent=\"center\"\n          >\n            <AssetIcon type={type} />\n          </Flex>\n          <Text isTruncated marginBottom=\"spacingM\" fontColor=\"gray600\">\n            {title}\n          </Text>\n        </Flex>\n      )}\n    </Box>\n  );\n}\n\n_Asset.displayName = 'Asset';\n\nexport const Asset = React.forwardRef(_Asset);\n","import React from 'react';\nimport {\n  ArchiveIcon,\n  AudioIcon,\n  CodeIllustrationIcon,\n  ImageIcon,\n  MarkupIcon,\n  PdfIcon,\n  PlaintextIcon,\n  RichtextIcon,\n  PresentationIcon,\n  SpreadsheetIcon,\n  VideoIcon,\n} from '@contentful/f36-icons';\nimport type { GeneratedIconProps } from '@contentful/f36-icon';\nimport type { AssetType } from '../types';\n\nimport { cx } from 'emotion';\nimport { getAssetIconStyles } from './AssetIcon.styles';\n\nexport interface AssetIconProps\n  extends Omit<GeneratedIconProps, 'illustration' | 'ref'> {\n  type?: AssetType;\n}\n\n/**\n * Renders only the Illustration that would represent this asset's type\n */\nexport const AssetIcon = ({\n  type = 'archive',\n  className,\n  testId = 'cf-ui-asset-icon',\n  ...otherProps\n}: AssetIconProps) => {\n  const styles = getAssetIconStyles();\n  const props = {\n    ...otherProps,\n    testId,\n    className: cx(styles.root, className),\n  };\n\n  switch (type) {\n    case 'audio':\n      return <AudioIcon {...props} />;\n    case 'code':\n      return <CodeIllustrationIcon {...props} />;\n    case 'image':\n      return <ImageIcon {...props} />;\n    case 'markup':\n      return <MarkupIcon {...props} />;\n    case 'pdf':\n      return <PdfIcon {...props} />;\n    case 'plaintext':\n      return <PlaintextIcon {...props} />;\n    case 'presentation':\n      return <PresentationIcon {...props} />;\n    case 'richtext':\n      return <RichtextIcon {...props} />;\n    case 'spreadsheet':\n      return <SpreadsheetIcon {...props} />;\n    case 'video':\n      return <VideoIcon {...props} />;\n    case 'archive':\n    default:\n      return <ArchiveIcon {...props} />;\n  }\n};\n\nAssetIcon.displayName = 'AssetIcon';\n","import tokens from '@contentful/f36-tokens';\nimport { css } from 'emotion';\n\nexport function getAssetIconStyles() {\n  return {\n    root: css({\n      display: 'inline-block',\n      width: '39px',\n      height: '39px',\n      'g, path': {\n        fill: tokens.gray600,\n      },\n    }),\n  };\n}\n","import tokens from '@contentful/f36-tokens';\nimport { css } from 'emotion';\n\nexport function getAssetStyles() {\n  return {\n    relative: css({\n      position: 'relative',\n    }),\n    height100: css({\n      height: '100%',\n    }),\n    image: css({\n      width: 'auto',\n      maxWidth: '100%',\n      maxHeight: '100%',\n    }),\n    titleContainer: css({\n      opacity: 0,\n      transition: `opacity ${tokens.transitionDurationDefault} ${tokens.transitionEasingDefault}`,\n      position: 'absolute',\n      bottom: 0,\n      right: 0,\n      left: 0,\n      height: '100%',\n      display: 'flex',\n      overflow: 'hidden',\n      alignItems: 'flex-end',\n      boxSizing: 'border-box',\n      background: `linear-gradient(0deg, ${tokens.gray900} 0%, transparent calc(1rem * (100 / ${tokens.fontBaseDefault})), transparent 100% )`,\n      ':hover': { opacity: 1 },\n    }),\n    title: css({\n      bottom: 0,\n      left: 0,\n      right: 0,\n      position: 'absolute',\n    }),\n  };\n}\n","export const types = {\n  archive: 'archive',\n  audio: 'audio',\n  code: 'code',\n  image: 'image',\n  markup: 'markup',\n  pdf: 'pdf',\n  plaintext: 'plaintext',\n  presentation: 'presentation',\n  richtext: 'richtext',\n  spreadsheet: 'spreadsheet',\n  video: 'video',\n};\n\nexport function isAssetType(type: string): type is AssetType {\n  return Object.keys(types).includes(type);\n}\n\nexport type AssetType = keyof typeof types;\n"]}

package/package.json

@@ -1,17 +1,17 @@
 {
   "name": "@contentful/f36-asset",
-  "version": "4.19.0",
+  "version": "4.20.0",
   "description": "Forma 36: Asset component",
   "scripts": {
     "build": "tsup"
   },
   "dependencies": {
     "@babel/runtime": "^7.6.2",
-    "@contentful/f36-core": "^4.19.0",
-    "@contentful/f36-icon": "^4.19.0",
-    "@contentful/f36-icons": "^4.19.0",
+    "@contentful/f36-core": "^4.20.0",
+    "@contentful/f36-icon": "^4.20.0",
+    "@contentful/f36-icons": "^4.20.0",
     "@contentful/f36-tokens": "^4.0.1",
-    "@contentful/f36-typography": "^4.19.0",
+    "@contentful/f36-typography": "^4.20.0",
     "emotion": "^10.0.17"
   },
   "peerDependencies": {
@@ -22,7 +22,7 @@
     "dist"
   ],
   "main": "dist/index.js",
-  "module": "dist/index.mjs",
+  "module": "dist/esm/index.js",
   "types": "dist/index.d.ts",
   "source": "src/index.ts",
   "sideEffects": false,

package/dist/index.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/Asset.tsx","../src/AssetIcon/AssetIcon.tsx","../src/AssetIcon/AssetIcon.styles.ts","../src/Asset.styles.ts","../src/types.ts"],"names":["React","cx","Box","Flex","Text","ArchiveIcon","AudioIcon","CodeIllustrationIcon","ImageIcon","MarkupIcon","PdfIcon","PlaintextIcon","RichtextIcon","PresentationIcon","SpreadsheetIcon","VideoIcon","tokens","css","getAssetIconStyles","AssetIcon","_a","_b","type","className","testId","otherProps","__objRest","styles","props","__spreadProps","__spreadValues","getAssetStyles","_Asset","ref","src","status","title","showPreview","Asset","types","isAssetType"],"mappings":"+kBAAA,OAAOA,MAAW,QAClB,OAAS,MAAAC,MAAU,UACnB,OACE,OAAAC,EACA,QAAAC,MAIK,uBACP,OAAS,QAAAC,MAAY,6BCTrB,OAAOJ,MAAW,QAClB,OACE,eAAAK,EACA,aAAAC,EACA,wBAAAC,EACA,aAAAC,EACA,cAAAC,EACA,WAAAC,EACA,iBAAAC,EACA,gBAAAC,EACA,oBAAAC,EACA,mBAAAC,EACA,aAAAC,MACK,wBAIP,OAAS,MAAAd,MAAU,UCjBnB,OAAOe,MAAY,yBACnB,OAAS,OAAAC,MAAW,UAEb,SAASC,GAAqB,CACnC,MAAO,CACL,KAAMD,EAAI,CACR,QAAS,eACT,MAAO,OACP,OAAQ,OACR,UAAW,CACT,KAAMD,EAAO,OACf,CACF,CAAC,CACH,CACF,CDcO,IAAMG,EAAaC,GAKJ,CALI,IAAAC,EAAAD,EACxB,MAAAE,EAAO,UACP,UAAAC,EACA,OAAAC,EAAS,kBA/BX,EA4B0BH,EAIrBI,EAAAC,EAJqBL,EAIrB,CAHH,OACA,YACA,WAGA,IAAMM,EAAST,EAAmB,EAC5BU,EAAQC,EAAAC,EAAA,GACTL,GADS,CAEZ,OAAAD,EACA,UAAWvB,EAAG0B,EAAO,KAAMJ,CAAS,CACtC,GAEA,OAAQD,OACD,QACH,OAAOtB,EAAA,cAACM,EAAAwB,EAAA,GAAcF,EAAO,MAC1B,OACH,OAAO5B,EAAA,cAACO,EAAAuB,EAAA,GAAyBF,EAAO,MACrC,QACH,OAAO5B,EAAA,cAACQ,EAAAsB,EAAA,GAAcF,EAAO,MAC1B,SACH,OAAO5B,EAAA,cAACS,EAAAqB,EAAA,GAAeF,EAAO,MAC3B,MACH,OAAO5B,EAAA,cAACU,EAAAoB,EAAA,GAAYF,EAAO,MACxB,YACH,OAAO5B,EAAA,cAACW,EAAAmB,EAAA,GAAkBF,EAAO,MAC9B,eACH,OAAO5B,EAAA,cAACa,EAAAiB,EAAA,GAAqBF,EAAO,MACjC,WACH,OAAO5B,EAAA,cAACY,EAAAkB,EAAA,GAAiBF,EAAO,MAC7B,cACH,OAAO5B,EAAA,cAACc,EAAAgB,EAAA,GAAoBF,EAAO,MAChC,QACH,OAAO5B,EAAA,cAACe,EAAAe,EAAA,GAAcF,EAAO,MAC1B,kBAEH,OAAO5B,EAAA,cAACK,EAAAyB,EAAA,GAAgBF,EAAO,EAErC,EAEAT,EAAU,YAAc,YEpExB,OAAOH,MAAY,yBACnB,OAAS,OAAAC,MAAW,UAEb,SAASc,GAAiB,CAC/B,MAAO,CACL,SAAUd,EAAI,CACZ,SAAU,UACZ,CAAC,EACD,UAAWA,EAAI,CACb,OAAQ,MACV,CAAC,EACD,MAAOA,EAAI,CACT,MAAO,OACP,SAAU,OACV,UAAW,MACb,CAAC,EACD,eAAgBA,EAAI,CAClB,QAAS,EACT,WAAY,WAAWD,EAAO,6BAA6BA,EAAO,0BAClE,SAAU,WACV,OAAQ,EACR,MAAO,EACP,KAAM,EACN,OAAQ,OACR,QAAS,OACT,SAAU,SACV,WAAY,WACZ,UAAW,aACX,WAAY,yBAAyBA,EAAO,8CAA8CA,EAAO,wCACjG,SAAU,CAAE,QAAS,CAAE,CACzB,CAAC,EACD,MAAOC,EAAI,CACT,OAAQ,EACR,KAAM,EACN,MAAO,EACP,SAAU,UACZ,CAAC,CACH,CACF,CHCA,SAASe,EACPZ,EASAa,EACA,CAVA,IAAAZ,EAAAD,EACE,WAAAG,EACA,IAAAW,EACA,OAAAC,EACA,OAAAX,EAAS,cACT,MAAAY,EACA,KAAAd,EAAO,OA9CX,EAwCED,EAOKI,EAAAC,EAPLL,EAOK,CANH,YACA,MACA,SACA,SACA,QACA,SAKF,IAAMM,EAASI,EAAe,EAIxBM,EAHUH,GAAOA,IAAQ,IAAMZ,IAAS,SAGfa,IAAW,WAE1C,OACEnC,EAAA,cAACE,EAAA4B,EAAA,CACC,UAAW7B,EAAG0B,EAAO,SAAUJ,CAAS,EACxC,OAAQC,EACR,IAAKS,GACDR,GAEHY,EACCrC,EAAA,cAAAA,EAAA,cACEA,EAAA,cAACG,EAAA,CACC,WAAW,SACX,eAAe,SACf,UAAWwB,EAAO,WAElB3B,EAAA,cAAC,OAAI,UAAW2B,EAAO,MAAO,IAAKO,EAAK,IAAKE,EAAO,CACtD,EACCA,GACCpC,EAAA,cAAC,OAAI,UAAW2B,EAAO,gBACrB3B,EAAA,cAACI,EAAA,CACC,UAAWuB,EAAO,MAClB,UAAU,aACV,OAAO,WACP,YAAW,IAEVS,CACH,CACF,CAEJ,EAEApC,EAAA,cAACG,EAAA,CACC,cAAc,SACd,WAAW,SACX,eAAe,SACf,YAAY,WACZ,aAAa,WACb,UAAWwB,EAAO,WAElB3B,EAAA,cAACG,EAAA,CACC,aAAa,WACb,UAAU,WACV,eAAe,UAEfH,EAAA,cAACmB,EAAA,CAAU,KAAMG,EAAM,CACzB,EACAtB,EAAA,cAACI,EAAA,CAAK,YAAW,GAAC,aAAa,WAAW,UAAU,WACjDgC,CACH,CACF,CAEJ,CAEJ,CAEAJ,EAAO,YAAc,QAEd,IAAMM,EAAQtC,EAAM,WAAWgC,CAAM,EIjHrC,IAAMO,EAAQ,CACnB,QAAS,UACT,MAAO,QACP,KAAM,OACN,MAAO,QACP,OAAQ,SACR,IAAK,MACL,UAAW,YACX,aAAc,eACd,SAAU,WACV,YAAa,cACb,MAAO,OACT,EAEO,SAASC,EAAYlB,EAAiC,CAC3D,OAAO,OAAO,KAAKiB,CAAK,EAAE,SAASjB,CAAI,CACzC","sourcesContent":["import React from 'react';\nimport { cx } from 'emotion';\nimport {\n  Box,\n  Flex,\n  type EntityStatus,\n  type PickUnion,\n  type CommonProps,\n} from '@contentful/f36-core';\nimport { Text } from '@contentful/f36-typography';\n\nimport { AssetIcon } from './AssetIcon/AssetIcon';\nimport { getAssetStyles } from './Asset.styles';\nimport type { AssetType } from './types';\n\nexport type AssetStatus = PickUnion<\n  EntityStatus,\n  'archived' | 'changed' | 'deleted' | 'draft' | 'published'\n>;\n\nexport interface AssetProps extends CommonProps {\n  /**\n   * A `src` attribute to use for image assets\n   */\n  src?: string;\n  /**\n   * The publish status of the asset\n   */\n  status?: AssetStatus;\n  /**\n   * The title of the asset\n   */\n  title?: string;\n  /**\n   * The type of asset being represented\n   */\n  type?: AssetType;\n}\n\nfunction _Asset(\n  {\n    className,\n    src,\n    status,\n    testId = 'cf-ui-asset',\n    title,\n    type = 'image',\n    ...otherProps\n  }: AssetProps,\n  ref: React.Ref<any>,\n) {\n  const styles = getAssetStyles();\n  const isImage = src && src !== '' && type === 'image';\n\n  // Do not show image previews when publish status is archived\n  const showPreview = isImage && status !== 'archived';\n\n  return (\n    <Box\n      className={cx(styles.relative, className)}\n      testId={testId}\n      ref={ref}\n      {...otherProps}\n    >\n      {showPreview ? (\n        <>\n          <Flex\n            alignItems=\"center\"\n            justifyContent=\"center\"\n            className={styles.height100}\n          >\n            <img className={styles.image} src={src} alt={title} />\n          </Flex>\n          {title && (\n            <div className={styles.titleContainer}>\n              <Text\n                className={styles.title}\n                fontColor=\"colorWhite\"\n                margin=\"spacingS\"\n                isTruncated\n              >\n                {title}\n              </Text>\n            </div>\n          )}\n        </>\n      ) : (\n        <Flex\n          flexDirection=\"column\"\n          alignItems=\"center\"\n          justifyContent=\"center\"\n          paddingLeft=\"spacingS\"\n          paddingRight=\"spacingS\"\n          className={styles.height100}\n        >\n          <Flex\n            marginBottom=\"spacingM\"\n            marginTop=\"spacingM\"\n            justifyContent=\"center\"\n          >\n            <AssetIcon type={type} />\n          </Flex>\n          <Text isTruncated marginBottom=\"spacingM\" fontColor=\"gray600\">\n            {title}\n          </Text>\n        </Flex>\n      )}\n    </Box>\n  );\n}\n\n_Asset.displayName = 'Asset';\n\nexport const Asset = React.forwardRef(_Asset);\n","import React from 'react';\nimport {\n  ArchiveIcon,\n  AudioIcon,\n  CodeIllustrationIcon,\n  ImageIcon,\n  MarkupIcon,\n  PdfIcon,\n  PlaintextIcon,\n  RichtextIcon,\n  PresentationIcon,\n  SpreadsheetIcon,\n  VideoIcon,\n} from '@contentful/f36-icons';\nimport type { GeneratedIconProps } from '@contentful/f36-icon';\nimport type { AssetType } from '../types';\n\nimport { cx } from 'emotion';\nimport { getAssetIconStyles } from './AssetIcon.styles';\n\nexport interface AssetIconProps\n  extends Omit<GeneratedIconProps, 'illustration' | 'ref'> {\n  type?: AssetType;\n}\n\n/**\n * Renders only the Illustration that would represent this asset's type\n */\nexport const AssetIcon = ({\n  type = 'archive',\n  className,\n  testId = 'cf-ui-asset-icon',\n  ...otherProps\n}: AssetIconProps) => {\n  const styles = getAssetIconStyles();\n  const props = {\n    ...otherProps,\n    testId,\n    className: cx(styles.root, className),\n  };\n\n  switch (type) {\n    case 'audio':\n      return <AudioIcon {...props} />;\n    case 'code':\n      return <CodeIllustrationIcon {...props} />;\n    case 'image':\n      return <ImageIcon {...props} />;\n    case 'markup':\n      return <MarkupIcon {...props} />;\n    case 'pdf':\n      return <PdfIcon {...props} />;\n    case 'plaintext':\n      return <PlaintextIcon {...props} />;\n    case 'presentation':\n      return <PresentationIcon {...props} />;\n    case 'richtext':\n      return <RichtextIcon {...props} />;\n    case 'spreadsheet':\n      return <SpreadsheetIcon {...props} />;\n    case 'video':\n      return <VideoIcon {...props} />;\n    case 'archive':\n    default:\n      return <ArchiveIcon {...props} />;\n  }\n};\n\nAssetIcon.displayName = 'AssetIcon';\n","import tokens from '@contentful/f36-tokens';\nimport { css } from 'emotion';\n\nexport function getAssetIconStyles() {\n  return {\n    root: css({\n      display: 'inline-block',\n      width: '39px',\n      height: '39px',\n      'g, path': {\n        fill: tokens.gray600,\n      },\n    }),\n  };\n}\n","import tokens from '@contentful/f36-tokens';\nimport { css } from 'emotion';\n\nexport function getAssetStyles() {\n  return {\n    relative: css({\n      position: 'relative',\n    }),\n    height100: css({\n      height: '100%',\n    }),\n    image: css({\n      width: 'auto',\n      maxWidth: '100%',\n      maxHeight: '100%',\n    }),\n    titleContainer: css({\n      opacity: 0,\n      transition: `opacity ${tokens.transitionDurationDefault} ${tokens.transitionEasingDefault}`,\n      position: 'absolute',\n      bottom: 0,\n      right: 0,\n      left: 0,\n      height: '100%',\n      display: 'flex',\n      overflow: 'hidden',\n      alignItems: 'flex-end',\n      boxSizing: 'border-box',\n      background: `linear-gradient(0deg, ${tokens.gray900} 0%, transparent calc(1rem * (100 / ${tokens.fontBaseDefault})), transparent 100% )`,\n      ':hover': { opacity: 1 },\n    }),\n    title: css({\n      bottom: 0,\n      left: 0,\n      right: 0,\n      position: 'absolute',\n    }),\n  };\n}\n","export const types = {\n  archive: 'archive',\n  audio: 'audio',\n  code: 'code',\n  image: 'image',\n  markup: 'markup',\n  pdf: 'pdf',\n  plaintext: 'plaintext',\n  presentation: 'presentation',\n  richtext: 'richtext',\n  spreadsheet: 'spreadsheet',\n  video: 'video',\n};\n\nexport function isAssetType(type: string): type is AssetType {\n  return Object.keys(types).includes(type);\n}\n\nexport type AssetType = keyof typeof types;\n"]}