@zohoim/chat-components 0.0.1-cx

package/es/Theme/utils/combineConfigurations.js

@@ -0,0 +1,17 @@
+import flatVariables from './flatVariables';
+export default function combineConfigurations(configurations) {
+  const configs = configurations.map(configuration => ({
+    library: configuration.library,
+    variables: flatVariables(configuration.variables)
+  }));
+  const mergeObject = configs.reduce((res, next) => {
+    if (!res[next.library]) {
+      res[next.library] = next;
+      return res;
+    }
+
+    Object.assign(res[next.library].variables, next.variables);
+    return res;
+  }, {});
+  return Object.keys(mergeObject).map(key => mergeObject[key]);
+}

package/es/Theme/utils/flatVariables.js

@@ -0,0 +1,12 @@
+export default function flatVariables(obj) {
+  let jointStr = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '_';
+  return Object.keys(obj).reduce((res, component) => Object.assign(res, Object.keys(obj[component]).reduce((res, variable) => {
+    if (component === '') {
+      res[`${variable}`] = obj[component][variable];
+    } else {
+      res[`${component}${jointStr}${variable}`] = obj[component][variable];
+    }
+
+    return res;
+  }, {})), {});
+}

package/es/Theme/utils/getCustomizedCssVariables.js

@@ -0,0 +1,19 @@
+/* eslint-disable no-param-reassign */
+
+/** ** Methods *** */
+import combineConfigurations from './combineConfigurations';
+export default function getCustomizedCssVariables(cssVariableConfigs) {
+  let prefix = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '--lib_';
+  const newConfiguration = combineConfigurations(cssVariableConfigs);
+  return newConfiguration.reduce((result, config) => {
+    Object.keys(config.variables).forEach(variable => {
+      // eslint-disable-next-line no-param-reassign
+      if (config.library === '') {
+        result += `${prefix}${variable}:${config.variables[variable]}; \n`;
+      } else {
+        result += `${prefix}${config.library}_${variable}:${config.variables[variable]}; \n`;
+      }
+    });
+    return result;
+  }, '\n');
+}

package/es/Theme/utils/getThemeConfigurations.js

@@ -0,0 +1,81 @@
+import { modeConstants, themeConstants } from '../constants';
+import lightBlue from '../themeVariables/light/blueTheme';
+import lightGreen from '../themeVariables/light/greenTheme';
+import lightOrange from '../themeVariables/light/orangeTheme';
+import lightRed from '../themeVariables/light/redTheme';
+import lightYellow from '../themeVariables/light/yellowTheme';
+import darkBlue from '../themeVariables/dark/blueTheme';
+import darkGreen from '../themeVariables/dark/greenTheme';
+import darkOrange from '../themeVariables/dark/orangeTheme';
+import darkRed from '../themeVariables/dark/redTheme';
+import darkYellow from '../themeVariables/dark/yellowTheme';
+import pureDarkBlue from '../themeVariables/pureDark/blueTheme';
+import pureDarkGreen from '../themeVariables/pureDark/greenTheme';
+import pureDarkOrange from '../themeVariables/pureDark/orangeTheme';
+import pureDarkRed from '../themeVariables/pureDark/redTheme';
+import pureDarkYellow from '../themeVariables/pureDark/yellowTheme';
+const modeMapping = {
+  [modeConstants.LIGHT]: 'light',
+  [modeConstants.DARK]: 'dark',
+  [modeConstants.PURE_DARK]: 'pureDark'
+};
+const themeMapping = {
+  [themeConstants.BLUE]: 'blue',
+  [themeConstants.GREEN]: 'green',
+  [themeConstants.ORANGE]: 'orange',
+  [themeConstants.RED]: 'red',
+  [themeConstants.YELLOW]: 'yellow'
+};
+const concatString = '_';
+const defaultTheme = themeMapping[themeConstants.BLUE];
+const defaultMode = modeMapping[modeConstants.LIGHT];
+const defaultThemeConfiguration = lightBlue;
+const themeConfigMapping = {
+  [`${modeConstants.LIGHT}${concatString}${themeConstants.BLUE}`]: lightBlue,
+  [`${modeConstants.LIGHT}${concatString}${themeConstants.GREEN}`]: lightGreen,
+  [`${modeConstants.LIGHT}${concatString}${themeConstants.ORANGE}`]: lightOrange,
+  [`${modeConstants.LIGHT}${concatString}${themeConstants.RED}`]: lightRed,
+  [`${modeConstants.LIGHT}${concatString}${themeConstants.YELLOW}`]: lightYellow,
+  [`${modeConstants.DARK}${concatString}${themeConstants.BLUE}`]: darkBlue,
+  [`${modeConstants.DARK}${concatString}${themeConstants.GREEN}`]: darkGreen,
+  [`${modeConstants.DARK}${concatString}${themeConstants.ORANGE}`]: darkOrange,
+  [`${modeConstants.DARK}${concatString}${themeConstants.RED}`]: darkRed,
+  [`${modeConstants.DARK}${concatString}${themeConstants.YELLOW}`]: darkYellow,
+  [`${modeConstants.PURE_DARK}${concatString}${themeConstants.BLUE}`]: pureDarkBlue,
+  [`${modeConstants.PURE_DARK}${concatString}${themeConstants.GREEN}`]: pureDarkGreen,
+  [`${modeConstants.PURE_DARK}${concatString}${themeConstants.ORANGE}`]: pureDarkOrange,
+  [`${modeConstants.PURE_DARK}${concatString}${themeConstants.RED}`]: pureDarkRed,
+  [`${modeConstants.PURE_DARK}${concatString}${themeConstants.YELLOW}`]: pureDarkYellow
+};
+
+function getThemeName() {
+  let {
+    mode = modeConstants.LIGHT,
+    theme = themeConstants.BLUE
+  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  const themeName = `${mode}${concatString}${theme}`;
+  return {
+    themeName
+  };
+}
+
+export default function getThemeConfigurations(_ref) {
+  let {
+    mode: propMode,
+    theme: propTheme
+  } = _ref;
+  const {
+    themeName
+  } = getThemeName({
+    mode: propMode,
+    theme: propTheme
+  });
+  const mode = propMode ? modeMapping[propMode] || propMode : defaultMode;
+  const theme = propTheme ? themeMapping[propTheme] || propTheme : defaultTheme;
+  const themeConfigurations = themeConfigMapping[themeName] || defaultThemeConfiguration;
+  return {
+    mode,
+    theme,
+    themeConfigurations
+  };
+}

package/es/Theme/utils/getWrapperDivProps.js

@@ -0,0 +1,16 @@
+export default function getWrapperDivProps(_ref) {
+  let {
+    modeKey,
+    themeKey,
+    mode,
+    theme
+  } = _ref;
+  let wrapperDivProps = {};
+  wrapperDivProps = modeKey && mode ? { ...wrapperDivProps,
+    [modeKey]: mode
+  } : {};
+  wrapperDivProps = themeKey && theme ? { ...wrapperDivProps,
+    [themeKey]: theme
+  } : {};
+  return wrapperDivProps;
+}

package/es/Video/Video.js

@@ -0,0 +1,38 @@
+/** ** Libraries *** */
+import React from 'react';
+/** ** Hooks *** */
+
+import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
+import useMedia from '@zohoim/chat-components-hooks/es/Media/useMedia';
+/** ** Constants *** */
+
+import videoDefaultProps from './props/defaultProps';
+import videoPropTypes from './props/propTypes';
+/** ** Styles *** */
+
+import style from './css/Video.module.css';
+export default function Video(props) {
+  const {
+    customStyle,
+    fileType,
+    fileURL
+  } = props;
+  const {
+    mediaElementRef
+  } = useMedia(props);
+  /* External CSS Customization */
+
+  const newStyle = useMergeStyle(style, customStyle);
+  return /*#__PURE__*/React.createElement("video", {
+    ref: mediaElementRef,
+    className: newStyle.video,
+    controls: true,
+    preload: "metadata"
+  }, /*#__PURE__*/React.createElement("source", {
+    "data-src": fileURL,
+    type: fileType
+  }));
+}
+Video.propTypes = videoPropTypes;
+Video.defaultProps = videoDefaultProps;
+Video.displayName = 'Video';

package/es/Video/css/Video.module.css

@@ -0,0 +1,5 @@
+.video {
+  height: 100% ;
+  width: 100% ;
+  border-radius: 3px;
+}

package/es/Video/index.js

@@ -0,0 +1 @@
+export { default as Video } from './Video';

package/es/Video/props/defaultProps.js

@@ -0,0 +1,6 @@
+/** ** Constants *** */
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
+const videoDefaultProps = {
+  customStyle: dummyObject
+};
+export default videoDefaultProps;

package/es/Video/props/propTypes.js

@@ -0,0 +1,8 @@
+/** ** Libraries *** */
+import PropTypes from 'prop-types';
+const videoPropTypes = {
+  fileType: PropTypes.string.isRequired,
+  fileURL: PropTypes.string.isRequired,
+  customStyle: PropTypes.object
+};
+export default videoPropTypes;

package/es/VideoBubble/VideoBubble.js

@@ -0,0 +1,66 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+/** ** Libraries *** */
+import React, { useCallback } from 'react';
+/** ** Hooks *** */
+
+import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
+/** ** Constants *** */
+
+import videoBubbleDefaultProps from './props/defaultProps';
+import videoBubblePropTypes from './props/propTypes';
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
+/** ** Styles *** */
+
+import style from './css/VideoBubble.module.css';
+/** ** Components *** */
+
+import { Box } from '@zohodesk/components/es/Layout';
+import MediaBubbleWrapper from '../MediaBubbleWrapper/MediaBubbleWrapper';
+import Video from '../Video/Video';
+/** ** Methods *** */
+
+import cssJSLogic from './css/cssJSLogic';
+export default function VideoBubble(props) {
+  const {
+    customStyle,
+    customProps,
+    videoDetails,
+    isFailed
+  } = props;
+  const {
+    videoProps = dummyObject,
+    mediaBubbleWrapperProps = dummyObject
+  } = customProps;
+  /* External CSS Customization */
+
+  const newStyle = useMergeStyle(style, customStyle);
+  /* css classnames added based on logic */
+
+  const {
+    videoBubbleClass
+  } = cssJSLogic({
+    isFailed
+  }, newStyle);
+  const renderMedia = useCallback(_ref => {
+    let {
+      fileURL,
+      fileType
+    } = _ref;
+    return /*#__PURE__*/React.createElement(Box, {
+      className: videoBubbleClass
+    }, /*#__PURE__*/React.createElement(Video, _extends({
+      fileType: fileType,
+      fileURL: fileURL
+    }, videoProps)));
+  }, [videoProps, videoBubbleClass]);
+  return /*#__PURE__*/React.createElement(MediaBubbleWrapper, _extends({
+    mediaDetails: videoDetails,
+    renderMedia: renderMedia
+  }, mediaBubbleWrapperProps, {
+    isFailed: isFailed
+  }));
+}
+VideoBubble.propTypes = videoBubblePropTypes;
+VideoBubble.defaultProps = videoBubbleDefaultProps;
+VideoBubble.displayName = 'VideoBubble';

package/es/VideoBubble/css/VideoBubble.module.css

@@ -0,0 +1,12 @@
+.videoWrapper {
+  width: var(--zd_size360) ;
+  max-width: 100% ;
+  height: var(--zd_size193) ;
+  background-color: #000;
+  border-radius: 3px;
+  border: 1px solid var(--imlib_chat_components_videoBubble_border_color);
+}
+
+.videoWrapperFailed{
+  border-color: var(--imlib_chat_components_videoBubble_border_color_failed);
+}

package/es/VideoBubble/css/cssJSLogic.js

@@ -0,0 +1,14 @@
+/** ** Methods *** */
+import { compileClassNames } from '@zohodesk/utils';
+export default function cssJSLogic(props, style) {
+  const {
+    isFailed
+  } = props;
+  const videoBubbleClass = compileClassNames({
+    [style.videoWrapper]: true,
+    [style.videoWrapperFailed]: isFailed
+  });
+  return {
+    videoBubbleClass
+  };
+}

package/es/VideoBubble/index.js

@@ -0,0 +1 @@
+export { default as VideoBubble } from './VideoBubble';

package/es/VideoBubble/props/defaultProps.js

@@ -0,0 +1,7 @@
+/** ** Constants *** */
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
+const videoBubbleDefaultProps = {
+  customStyle: dummyObject,
+  customProps: dummyObject
+};
+export default videoBubbleDefaultProps;

package/es/VideoBubble/props/propTypes.js

@@ -0,0 +1,17 @@
+/** ** Libraries *** */
+import PropTypes from 'prop-types';
+const videoBubblePropTypes = {
+  videoDetails: PropTypes.shape({
+    name: PropTypes.string.isRequired,
+    size: PropTypes.string.isRequired,
+    type: PropTypes.string.isRequired,
+    url: PropTypes.string.isRequired
+  }).isRequired,
+  customProps: PropTypes.shape({
+    mediaBubbleWrapperProps: PropTypes.object,
+    videoProps: PropTypes.object
+  }),
+  customStyle: PropTypes.object,
+  isFailed: PropTypes.bool
+};
+export default videoBubblePropTypes;

package/es/constants/index.js

@@ -0,0 +1 @@
+export const MSG_ACTION_POPUP_PORTAL = 'MSG_ACTION_POPUP_PORTAL';

package/es/css/common.module.css

@@ -0,0 +1,6 @@
+.dotted {
+    overflow: hidden;
+    white-space: nowrap;
+    word-wrap: normal;
+    text-overflow: ellipsis;
+}

package/es/icons/create-icon-components.js

@@ -0,0 +1,172 @@
+/* eslint-disable */
+const commandLineArgs = require('command-line-args');
+
+const path = require('path');
+
+const fs = require('fs');
+
+const templateList = require('./icon.template');
+
+const jsdom = require('jsdom');
+
+const {
+  JSDOM
+} = jsdom;
+
+const reactToJsx = require('react-to-jsx');
+
+const HtmlToReactParser = require('html-to-react').Parser;
+
+const htmlToReactParser = new HtmlToReactParser();
+const options = commandLineArgs([{
+  name: 'sourucePath',
+  alias: 's',
+  type: String
+}, {
+  name: 'targetPath',
+  alias: 't',
+  type: String
+}]);
+const sourucePath = `${__dirname}/${options.sourucePath}`;
+const targetPath = `${__dirname}/${options.targetPath}`;
+
+function readAllFolder(sourucePath, targetPath, index, filesList, callback) {
+  const readDirMain = fs.readdirSync(sourucePath, {
+    withFileTypes: true
+  });
+  readDirMain.forEach(dirNext => {
+    const sourceDirPath = path.join(`${sourucePath}/${dirNext.name}`);
+    const targetDirPath = path.join(`${targetPath}/${dirNext.name}`);
+
+    if (fs.existsSync(sourceDirPath) && fs.lstatSync(sourceDirPath).isDirectory()) {
+      filesList[index + 1] = [];
+      readAllFolder(sourceDirPath, targetDirPath, index + 1, filesList, callback);
+      createIndexFiles(filesList[index + 1], targetDirPath);
+      return;
+    }
+
+    const svgFileName = callback(dirNext, sourucePath, targetPath);
+
+    if (svgFileName) {
+      filesList[index] = (filesList[index] || []).concat(svgFileName);
+    }
+  });
+}
+
+function createIndexFiles(filesList, targetDirPath) {
+  let indexContent = '';
+  filesList.forEach(fileName => {
+    indexContent += `${templateList.indexTemplate({
+      path: `./${fileName}`,
+      name: fileName
+    })}\n`;
+  });
+
+  if (indexContent) {
+    const fsPromises = fs.promises;
+    fsPromises.mkdir(targetDirPath, {
+      recursive: true
+    }).then(() => {
+      fs.writeFileSync(`${targetDirPath}/index.js`, indexContent);
+    });
+  }
+}
+
+function getFormattedSvgFileName(fileName) {
+  const replacer = '/'; // OS won't allow this char.so.
+
+  let str = fileName.replace(/[^A-z0-9]/g, replacer);
+  str = str.split('');
+  str.forEach((charCode, index) => {
+    if (str[index] === replacer) {
+      str[index] = '';
+      str[index + 1] = str[index + 1].toUpperCase();
+    }
+  });
+  fileName = str.join('');
+  return fileName.charAt(0).toUpperCase() + fileName.slice(1);
+}
+
+function isValidFileName(fileName) {
+  return /[A-z]/g.test(fileName.charAt(0));
+}
+
+readAllFolder(sourucePath, targetPath, 0, [], (file, sourucePath, targetPath) => {
+  let svgFileName = '';
+
+  if (file && path.extname(file.name) === '.svg') {
+    if (!isValidFileName(file.name)) {
+      console.error(`Invalid File Name Error!!! - This file ${file.name} is should be startswith A-z `);
+      return;
+    }
+
+    try {
+      const readFilePath = path.join(`${sourucePath}/${file.name}`);
+      const svgFileContent = fs.readFileSync(readFilePath).toString();
+      svgFileName = getFormattedSvgFileName(path.basename(readFilePath, path.extname(file.name)));
+      const fsPromises = fs.promises;
+      fsPromises.mkdir(targetPath, {
+        recursive: true
+      }).then(() => {
+        const dom = new JSDOM(`<!DOCTYPE html>${svgFileContent}`);
+        const doc = dom.window.document;
+        const collection = doc.querySelectorAll('title');
+
+        for (const elem of collection) {
+          elem.parentNode.removeChild(elem);
+        }
+
+        const svgElement = doc.querySelector('svg');
+        svgElement.removeAttribute('width');
+        svgElement.removeAttribute('height');
+        svgElement.removeAttribute('version');
+        const styleTags = svgElement.querySelector('style');
+        let styleTagsContent;
+
+        if (styleTags) {
+          styleTagsContent = styleTags.innerHTML;
+          const NewStyleElement = doc.createElement('style');
+          styleTags.parentNode.replaceChild(NewStyleElement, styleTags);
+        }
+
+        const collectionPathEl = svgElement.querySelectorAll('path');
+
+        for (const entry of collectionPathEl.entries()) {
+          const index = entry[0];
+          const elem = entry[1];
+          elem.setAttribute('class', `path-${index}`);
+
+          if (elem.getAttribute('fill') == 'black' || elem.getAttribute('fill') == '#010101') {
+            elem.removeAttribute('fill');
+          }
+        }
+
+        const svgHtmlContent = svgElement.outerHTML.replace(/\s+/g, ' ').trim();
+        const svgAsReactElement = htmlToReactParser.parse(svgHtmlContent);
+        let svgHtmlContentResult = reactToJsx(svgAsReactElement).replace(/\s+/g, ' ').trim();
+
+        if (styleTags) {
+          // console.log(styleTags, 'styleTags');
+          svgHtmlContentResult = svgHtmlContentResult.replace('<style/>', `<style dangerouslySetInnerHTML={{__html: \`${styleTagsContent}\` }} />`);
+        }
+
+        svgHtmlContentResult = svgHtmlContentResult.replace(/color-interpolation-filters/gi, 'colorInterpolationFilters');
+        svgHtmlContentResult = svgHtmlContentResult.replace(/feflood/gi, 'feFlood');
+        svgHtmlContentResult = svgHtmlContentResult.replace(/fecolormatrix/gi, 'feColorMatrix');
+        svgHtmlContentResult = svgHtmlContentResult.replace(/feoffset/gi, 'feOffset');
+        svgHtmlContentResult = svgHtmlContentResult.replace(/fegaussianblur/gi, 'feGaussianBlur');
+        svgHtmlContentResult = svgHtmlContentResult.replace(/feblend/gi, 'feBlend');
+        svgHtmlContentResult = svgHtmlContentResult.replace(/lineargradient/gi, 'linearGradient');
+        fs.writeFileSync(`${targetPath}/${svgFileName}.js`, templateList.iconTemplate({
+          path: '@zohodesk/icon/es/Icon/Icon',
+          name: svgFileName,
+          value: svgHtmlContentResult
+        }));
+      });
+    } catch (err) {
+      console.error(err);
+    }
+  }
+
+  return svgFileName;
+});

package/es/icons/factory/attachments/audio.svg

@@ -0,0 +1,19 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="31.68" height="32.17" viewBox="0 0 31.68 32.17">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #c8cadb;
+        opacity: 0.5;
+      }
+
+      .cls-2 {
+        fill: #010101;
+      }
+    </style>
+  </defs>
+  <rect class="cls-1" x="4.84" y="5.33" width="26.84" height="26.84" rx="5"/>
+  <g>
+    <path class="cls-2" d="M18.67,11.65l-7.55,1.41a.7.7,0,0,0-.6.7v7.32A3.56,3.56,0,0,0,9,20.8c-1.66,0-3,.91-3,2.11S7.35,25,9,25s3-.92,3-2.11V15.73l6-1.13v5.07a3.56,3.56,0,0,0-1.51-.28c-1.66,0-3,.91-3,2.11s1.36,2.11,3,2.11,3-.91,3-2.11V12.35a.63.63,0,0,0-.3-.56A.87.87,0,0,0,18.67,11.65Z"/>
+    <path class="cls-2" d="M29.75,10.13,21.12.34A1,1,0,0,0,20.38,0H4.11A4.11,4.11,0,0,0,0,4.11V25.88A4.12,4.12,0,0,0,4.11,30H25.89A4.12,4.12,0,0,0,30,25.88V10.79A1,1,0,0,0,29.75,10.13ZM25.89,28H4.11A2.12,2.12,0,0,1,2,25.88V4.11A2.12,2.12,0,0,1,4.11,2H19.77V7.94a3.5,3.5,0,0,0,3.5,3.5H28V25.88A2.12,2.12,0,0,1,25.89,28Z"/>
+  </g>
+</svg>

package/es/icons/factory/attachments/code.svg

@@ -0,0 +1,21 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="31.7" height="32.17" viewBox="0 0 31.7 32.17">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #c8cadb;
+        opacity: 0.5;
+      }
+
+      .cls-2 {
+        fill: #010101;
+      }
+    </style>
+  </defs>
+  <rect class="cls-1" x="4.85" y="5.33" width="26.84" height="26.84" rx="5"/>
+  <g>
+    <path class="cls-2" d="M17.13,14.09a.82.82,0,0,0-1.08.43l-3.81,8.73a.84.84,0,0,0,.42,1.09,1,1,0,0,0,.33.07.84.84,0,0,0,.76-.5l3.81-8.74A.82.82,0,0,0,17.13,14.09Z"/>
+    <path class="cls-2" d="M11.33,16a.81.81,0,0,0-1.15-.14l-2.9,2.31a.78.78,0,0,0-.3.58.81.81,0,0,0,.21.62l2.63,2.82a.83.83,0,0,0,.6.26.89.89,0,0,0,.57-.22.84.84,0,0,0,0-1.17L9,18.92l2.19-1.75A.81.81,0,0,0,11.33,16Z"/>
+    <path class="cls-2" d="M20,16a.81.81,0,0,0-1.16,0,.82.82,0,0,0,0,1.16l2,2.16L18.58,21a.83.83,0,0,0-.13,1.16.82.82,0,0,0,.64.31.84.84,0,0,0,.52-.18L22.5,20a.82.82,0,0,0,.31-.58.8.8,0,0,0-.22-.62Z"/>
+    <path class="cls-2" d="M29.75,10.13,21.12.34A1,1,0,0,0,20.38,0H4.11A4.11,4.11,0,0,0,0,4.11V25.88A4.12,4.12,0,0,0,4.11,30H25.89A4.12,4.12,0,0,0,30,25.88V10.79A1,1,0,0,0,29.75,10.13ZM25.89,28H4.11A2.12,2.12,0,0,1,2,25.88V4.11A2.12,2.12,0,0,1,4.11,2H19.77V7.94a3.5,3.5,0,0,0,3.5,3.5H28V25.88A2.12,2.12,0,0,1,25.89,28Z"/>
+  </g>
+</svg>

package/es/icons/factory/attachments/image.svg

@@ -0,0 +1,20 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="32.19" height="32.18" viewBox="0 0 32.19 32.18">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #c8cadb;
+        opacity: 0.5;
+      }
+
+      .cls-2 {
+        fill: #010101;
+      }
+    </style>
+  </defs>
+  <rect class="cls-1" x="5.35" y="5.33" width="26.84" height="26.84" rx="5"/>
+  <g>
+    <path class="cls-2" d="M21.66,18.14a.36.36,0,0,0-.2.06l-3.75,2.59-5.75-7a.35.35,0,0,0-.5,0,.22.22,0,0,0-.07.09l-4.19,7v3H22V18.49A.35.35,0,0,0,21.66,18.14Z"/>
+    <circle class="cls-2" cx="19.79" cy="14.13" r="2.22"/>
+    <path class="cls-2" d="M29.75,10.14,21.12.34A1,1,0,0,0,20.37,0H4.11A4.11,4.11,0,0,0,0,4.11V25.89A4.11,4.11,0,0,0,4.11,30H25.89A4.11,4.11,0,0,0,30,25.89V10.8A1,1,0,0,0,29.75,10.14ZM25.89,28H4.11A2.12,2.12,0,0,1,2,25.89V4.11A2.12,2.12,0,0,1,4.11,2H19.77V7.94a3.49,3.49,0,0,0,3.5,3.5H28V25.89A2.12,2.12,0,0,1,25.89,28Z"/>
+  </g>
+</svg>

package/es/icons/factory/attachments/pdf.svg

@@ -0,0 +1,19 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="32.5" height="32.17" viewBox="0 0 32.5 32.17">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #c8cadb;
+        opacity: 0.5;
+      }
+
+      .cls-2 {
+        fill: #010101;
+      }
+    </style>
+  </defs>
+  <rect class="cls-1" x="5.66" y="5.33" width="26.84" height="26.84" rx="5"/>
+  <g>
+    <path class="cls-2" d="M18.56,18.52c-2.43-1.1-3.36-4.37-3.36-4.37a13.6,13.6,0,0,0,.61-3.07C16,9.24,15,8.81,14.32,8.76a1.24,1.24,0,0,0-1.08.54c-1.29,1.79,0,5,0,5a31.64,31.64,0,0,1-2.75,6.49c-4.73,2.47-3.81,4.33-3.81,4.33l.92.63c2.19.61,4.59-4.16,4.59-4.16,1.17-.73,5.69-1.1,5.69-1.1,3.72,1.74,6.28,1.12,5.74-.76S18.56,18.52,18.56,18.52ZM7.84,24.74a5.19,5.19,0,0,1,2.23-2.67S8.92,24.47,7.84,24.74ZM14.25,9.6s.9-.07,0,3C14.25,12.57,13.64,10.3,14.25,9.6Zm-1.9,10.88a22.05,22.05,0,0,0,2-4.59A8.43,8.43,0,0,0,17,19.18,21.56,21.56,0,0,0,12.35,20.48Zm10.22,0a4.86,4.86,0,0,1-2.85-.79,5.53,5.53,0,0,1,2.93.35A.23.23,0,0,1,22.57,20.46Z"/>
+    <path class="cls-2" d="M29.75,10.13,21.12.34A1,1,0,0,0,20.38,0H4.11A4.11,4.11,0,0,0,0,4.11V25.88A4.12,4.12,0,0,0,4.11,30H25.89A4.12,4.12,0,0,0,30,25.88V10.79A1,1,0,0,0,29.75,10.13ZM25.89,28H4.11A2.12,2.12,0,0,1,2,25.88V4.11A2.12,2.12,0,0,1,4.11,2H19.77V7.94a3.5,3.5,0,0,0,3.5,3.5H28V25.88A2.12,2.12,0,0,1,25.89,28Z"/>
+  </g>
+</svg>

package/es/icons/factory/attachments/ppt.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30.52 30.27"><defs><style>.cls-1{fill:#010101;}.cls-2{fill:#c8cadb;opacity:.5;}</style></defs><rect class="cls-2" x="4.25" y="4" width="26.27" height="26.27" rx="3.16" ry="3.16"/><path class="cls-1" d="M29.75,10.13L21.12,.34c-.19-.22-.46-.34-.75-.34H4.11C1.84,0,0,1.84,0,4.11V25.88c0,2.27,1.84,4.11,4.11,4.11H25.89c2.27,0,4.11-1.84,4.11-4.11V10.79c0-.24-.09-.48-.25-.66Zm-1.75,15.75c0,1.16-.95,2.11-2.11,2.11H4.11c-1.16,0-2.11-.95-2.11-2.11V4.11c0-1.16,.95-2.11,2.11-2.11h15.66V7.94c0,1.93,1.57,3.5,3.5,3.5h4.73v14.44Zm-5.83-13.7h-6.17v-.84c0-.55-.45-1-1-1s-1,.45-1,1v.84H7.83c-.55,0-1,.45-1,1v8.78c0,.55,.45,1,1,1h2.76l-.59,.97c-.29,.47-.14,1.09,.33,1.37,.16,.1,.34,.15,.52,.15,.34,0,.67-.17,.85-.48l1.23-2.01h3.89l1.23,2.01c.19,.31,.52,.48,.85,.48,.18,0,.36-.05,.52-.15,.47-.29,.62-.9,.33-1.37l-.59-.97h3c.55,0,1-.45,1-1V13.17c0-.55-.45-1-1-1Zm-1,8.78H8.83v-6.78h12.34v6.78Z"/></svg>

package/es/icons/factory/attachments/text.svg

@@ -0,0 +1,22 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="32.19" height="32.94" viewBox="0 0 32.19 32.94">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #c8cadb;
+        opacity: 0.5;
+      }
+
+      .cls-2 {
+        fill: #010101;
+      }
+    </style>
+  </defs>
+  <rect class="cls-1" x="5.35" y="6.1" width="26.84" height="26.84" rx="5"/>
+  <g>
+    <path class="cls-2" d="M21.67,20.88H14.39a1,1,0,1,0,0,2h7.28a1,1,0,0,0,0-2Z"/>
+    <path class="cls-2" d="M9.15,20.31a1.57,1.57,0,1,0,1.57,1.57A1.57,1.57,0,0,0,9.15,20.31Z"/>
+    <path class="cls-2" d="M21.67,13.54H14.39a1,1,0,0,0,0,2h7.28a1,1,0,0,0,0-2Z"/>
+    <path class="cls-2" d="M9.15,13a1.57,1.57,0,1,0,1.57,1.57A1.57,1.57,0,0,0,9.15,13Z"/>
+    <path class="cls-2" d="M29.75,10.13,21.12.34A1,1,0,0,0,20.37,0H4.11A4.11,4.11,0,0,0,0,4.11V25.88A4.12,4.12,0,0,0,4.11,30H25.89A4.12,4.12,0,0,0,30,25.88V10.79A1,1,0,0,0,29.75,10.13ZM25.89,28H4.11A2.12,2.12,0,0,1,2,25.88V4.11A2.12,2.12,0,0,1,4.11,2H19.77V7.94a3.5,3.5,0,0,0,3.5,3.5H28V25.88A2.12,2.12,0,0,1,25.89,28Z"/>
+  </g>
+</svg>