@griddo/ax 1.62.8 → 1.63.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@griddo/ax",
   "description": "Griddo Author Experience",
-  "version": "1.62.8",
+  "version": "1.63.2",
   "authors": [
     "Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
     "Carlos Torres <carlos.torres@secuoyas.com>",
@@ -31,7 +31,8 @@
     "test": "node scripts/test.js",
     "lint": "eslint .",
     "format": "prettier -w .",
-    "start:test": "env-cmd -f env/.env.development node scripts/dev.js"
+    "start:test": "env-cmd -f env/.env.development node scripts/dev.js",
+    "postinstall": "patch-package"
   },
   "dependencies": {
     "@atlaskit/tree": "^8.2.0",
@@ -48,16 +49,16 @@
     "@types/lodash.isequal": "^4.5.5",
     "@types/markdown-draft-js": "^2.2.2",
     "@types/node": "12.11.1",
-    "@types/react": "^17.0.37",
+    "@types/react": "^18.0.1",
     "@types/react-datepicker": "^3.1.1",
-    "@types/react-dom": "^17.0.11",
+    "@types/react-dom": "^18.0.0",
     "@types/react-draft-wysiwyg": "^1.13.1",
-    "@types/react-redux": "7.1.4",
-    "@types/react-router-dom": "5.1.2",
+    "@types/react-redux": "^7.1.23",
+    "@types/react-router-dom": "5.3.3",
     "@types/react-select": "^3.0.8",
     "@types/react-test-renderer": "16.9.1",
     "@types/react-textarea-autosize": "^4.3.5",
-    "@types/styled-components": "4.1.19",
+    "@types/styled-components": "^5.1.25",
     "@types/uuid": "^8.3.1",
     "@types/webpack-env": "^1.14.1",
     "@typescript-eslint/eslint-plugin": "^4.25.0",
@@ -73,7 +74,7 @@
     "babel-preset-react-app": "^10.0.0",
     "case-sensitive-paths-webpack-plugin": "2.4.0",
     "compress.js": "^1.1.2",
-    "connected-react-router": "6.5.2",
+    "connected-react-router": "6.9.2",
     "css-loader": "^4.3.0",
     "css-minimizer-webpack-plugin": "3.0.2",
     "date-fns": "^2.21.3",
@@ -84,7 +85,7 @@
     "draftjs-to-html": "^0.9.1",
     "enhanced-resolve": "^5.8.2",
     "env-cmd": "^10.1.0",
-    "file-loader": "6.2.0",
+    "file-loader": "^6.2.0",
     "find-up": "^5.0.0",
     "fs-extra": "7.0.1",
     "html-to-draftjs": "^1.5.0",
@@ -100,6 +101,7 @@
     "markdown-draft-js": "^2.2.1",
     "mini-css-extract-plugin": "0.11.3",
     "optimize-css-assets-webpack-plugin": "^6.0.1",
+    "patch-package": "^6.4.7",
     "pkg-dir": "^5.0.0",
     "polished": "3.4.1",
     "postcss": "^8.4.5",
@@ -108,14 +110,16 @@
     "postcss-normalize": "7.0.1",
     "postcss-preset-env": "6.7.0",
     "postcss-safe-parser": "^6.0.0",
-    "react": "^18.0.0-rc.0-next-3b3daf557-20211210",
+    "postinstall-postinstall": "^2.1.0",
+    "react": "^18.0.0",
     "react-app-polyfill": "^1.0.4",
     "react-datepicker": "^3.2.2",
     "react-dev-utils": "^11.0.4",
-    "react-dom": "^18.0.0-rc.0-next-3b3daf557-20211210",
+    "react-dom": "^18.0.0",
     "react-draft-wysiwyg": "^1.14.5",
+    "react-frame-component": "^5.2.1",
     "react-froala-wysiwyg": "3.1.0",
-    "react-redux": "7.1.1",
+    "react-redux": "^7.2.8",
     "react-refresh": "^0.10.0",
     "react-router-dom": "5.1.2",
     "react-select": "^3.0.8",
@@ -132,12 +136,12 @@
     "source-map-loader": "^1.1.2",
     "string-replace-loader": "^3.0.1",
     "style-loader": "^1.2.1",
-    "styled-components": "^5.3.3",
+    "styled-components": "^5.3.5",
     "styled-reset": "4.0.1",
     "styled-system": "^5.1.5",
     "terser-webpack-plugin": "1.4.1",
     "ts-pnp": "1.1.4",
-    "typescript": "~3.8",
+    "typescript": "^4.6.3",
     "url-loader": "^4.1.1",
     "uuid": "^8.3.2",
     "webpack": "4.44.2",
@@ -244,5 +248,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "f2c87c6b1fcba0fd6042c269efb4673299800d0d"
+  "gitHead": "5e5393ff8f6a8bc19c9fa89955354dfbccd75557"
 }

package/src/GlobalStore.tsx

@@ -37,7 +37,7 @@ export class GlobalStore {
 
     const globalReducer: Reducer<any> = combineReducers({
       router: connectRouter(history),
-      app: persistReducer(this.authPersistConfig, appReducer),
+      app: persistReducer(this.authPersistConfig, appReducer as Reducer<any, Action<any>>),
       sites: sitesReducer as Reducer<any, Action<any>>,
       pageEditor: pageEditorReducer as Reducer<any, Action<any>>,
       menu: menuReducer as Reducer<any, Action<any>>,

package/src/Style/index.tsx

@@ -21,6 +21,8 @@ const GlobalStyle = createGlobalStyle`
     width: 100%;
     -webkit-font-smoothing: antialiased;
     overscroll-behavior: none;
+  }
+  body {
     min-width: 1280px;
   }
   * { box-sizing: border-box; }

package/src/api/pages.tsx

@@ -1,6 +1,8 @@
 import { template } from "./config";
 import { IServiceConfig, sendRequest } from "./utils";
 
+const PUBLIC_BASE_PATH = process.env.REACT_APP_PUBLIC_API_ENDPOINT;
+
 const SERVICES: { [key: string]: IServiceConfig } = {
   GET_PAGE_INFO: {
     ...template,
@@ -67,6 +69,12 @@ const SERVICES: { [key: string]: IServiceConfig } = {
     endpoint: ["/page/", "/ping"],
     method: "POST",
   },
+  GET_PUPLIC_PAGE: {
+    ...template,
+    host: PUBLIC_BASE_PATH,
+    endpoint: ["/page/", "/preview/"],
+    method: "GET",
+  },
 };
 
 const getPageInfo = async (pageID: number) => {
@@ -180,6 +188,17 @@ const sendPagePing = async (pageID: number) => {
   return sendRequest(SERVICES.PAGE_PING);
 };
 
+const getPublicPage = async (pageID: number, entity: string) => {
+  const {
+    host,
+    endpoint: [prefix, suffix],
+  } = SERVICES.GET_PUPLIC_PAGE;
+
+  SERVICES.GET_PUPLIC_PAGE.dynamicUrl = `${host}${prefix}${pageID}${suffix}${entity}`;
+
+  return sendRequest(SERVICES.GET_PUPLIC_PAGE);
+};
+
 export default {
   getPageInfo,
   updatePage,
@@ -194,4 +213,5 @@ export default {
   restorePage,
   bulkRestore,
   sendPagePing,
+  getPublicPage,
 };

package/src/api/utils.tsx

@@ -10,10 +10,13 @@ export interface IServiceConfig {
   dynamicUrl?: string;
 }
 
-const getToken = (): Record<string, unknown> => {
+const getToken = (): Record<string, unknown> | null => {
   // non-null assertion - we will always have token when here
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-  let { token } = JSON.parse(localStorage.getItem("persist:app")!);
+  const app = localStorage.getItem("persist:app");
+  if (!app) return null;
+
+  let { token } = JSON.parse(app);
   token = JSON.parse(token);
   const authorization = { Authorization: `bearer ${token}` };
 

package/src/components/Browser/index.tsx

@@ -1,79 +1,182 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
+import { FrameContextConsumer } from "react-frame-component";
+import { StyleSheetManager } from "styled-components";
 
 import * as components from "components";
-import { providers, translations, cloudinaryDefaults } from "components";
+import { providers, translations, cloudinaryDefaults, griddoDamDefaults } from "components";
 import { Preview } from "@griddo/core";
-
 import { findByEditorID } from "@ax/forms";
+import { copyTextToClipboard } from "@ax/helpers";
+import { useToast } from "@ax/hooks";
+import Icon from "../Icon";
+import Tooltip from "../Tooltip";
+import Toast from "../Toast";
 
 import * as S from "./style";
 
 const Browser = (props: IBrowserProps): JSX.Element => {
-  const { url, content, header, footer, isPage, theme, socials, cloudinaryName, siteLangs, disabled, siteID } = props;
+  const {
+    url,
+    content,
+    header,
+    footer,
+    isPage,
+    theme,
+    socials,
+    cloudinaryName,
+    siteLangs,
+    disabled,
+    siteID,
+    isPreview,
+    damDomain,
+    setSelectedContent,
+  } = props;
 
   const API_URL = process.env.REACT_APP_API_ENDPOINT;
   const PUBLIC_API_URL = process.env.REACT_APP_PUBLIC_API_ENDPOINT;
   const { SiteProvider, AnimationProvider } = providers;
 
+  const [resolution, setResolution] = useState("desktop");
+  const { isVisible, toggleToast, setIsVisible } = useToast();
+
   useEffect(() => {
     localStorage.setItem("selectedID", "0");
     (window as any).browserRef = null;
   }, []);
 
   const selectEditorID = (
-    selectedComponent: { editorID: number; component: any; type: string, parentEditorID: number },
+    selectedComponent: { editorID: number; component: any; type: string; parentEditorID: number },
     parentComponent: string | undefined | null,
     e: React.SyntheticEvent
   ) => {
     const { element } = findByEditorID(content, selectedComponent.parentEditorID);
     element && e.stopPropagation();
 
-    const { setSelectedContent } = props;
-
     const parent = selectedComponent.component === "Page" ? null : "Page";
 
     const { editorID } = selectedComponent;
 
     const isNavigationModule = ["header", "footer"].includes(selectedComponent.type);
 
-    if (!disabled || isNavigationModule) {
-      setSelectedContent(editorID, parent);
+    if (!isPreview && (!disabled || isNavigationModule)) {
+      setSelectedContent && setSelectedContent(editorID, parent);
+    }
+  };
+
+  const getWidth = (res: string) => {
+    switch (res) {
+      case "tablet":
+        return "768px";
+      case "phone":
+        return "425px";
+      default:
+        return "100%";
     }
   };
 
+  const copyUrl = () => {
+    const { id, entity } = content;
+    const domain = window.location.origin;
+    const url = `${domain}/page-preview/${id}/${entity}`;
+    copyTextToClipboard(url).then(
+      function () {
+        toggleToast();
+      },
+      function (err) {
+        console.error("Could not copy text: ", err);
+      }
+    );
+  };
+
+  const toastProps = {
+    setIsVisible,
+    message: "URL Copied",
+  };
+
+  const Providers = (
+    <SiteProvider
+      cloudinaryCloudName={cloudinaryName}
+      damDomain={damDomain}
+      theme={theme}
+      socials={socials}
+      siteLangs={siteLangs}
+      translations={translations}
+      selectEditorID={selectEditorID}
+      cloudinaryDefaults={cloudinaryDefaults}
+      griddoDamDefaults={griddoDamDefaults}
+      renderer="editor"
+      apiUrl={API_URL}
+      publicApiUrl={PUBLIC_API_URL}
+      siteId={siteID}
+    >
+      <AnimationProvider showOnScroll={{ active: false }}>
+        <S.Wrapper ref={(ref: any) => ((window as any).browserRef = ref)}>
+          <Preview
+            isPage={isPage}
+            apiUrl={API_URL}
+            library={components}
+            content={content}
+            header={header}
+            footer={footer}
+            languageId={content.language}
+            pageLanguages={content.pageLanguages}
+          />
+        </S.Wrapper>
+      </AnimationProvider>
+    </SiteProvider>
+  );
+
+  const getStylesFromHeader = () => {
+    const header = document.head.innerHTML;
+
+    return header.replace(/<style data-styled="active" \b[^<]*(?:(?!<\/style>)<[^<]*)*<\/style>/gi, "");
+  };
+
+  const initialContent = `<!DOCTYPE html><html><head>${getStylesFromHeader()}</head><body><div></div></body></html>`;
+
   return (
     <S.BrowserWrapper>
       <S.NavBar>
         <S.NavUrl>{url}</S.NavUrl>
+        {isPreview && (
+          <S.NavActions>
+            <S.IconWrapper onClick={copyUrl}>
+              <Tooltip content="Copy url to share draft" bottom>
+                <Icon name="share" size="24" />
+              </Tooltip>
+            </S.IconWrapper>
+            <S.IconWrapper active={resolution === "desktop"} onClick={() => setResolution("desktop")}>
+              <Tooltip content="Desktop" bottom>
+                <Icon name="desktop" size="24" />
+              </Tooltip>
+            </S.IconWrapper>
+            <S.IconWrapper active={resolution === "tablet"} onClick={() => setResolution("tablet")}>
+              <Tooltip content="Tablet" bottom>
+                <Icon name="tablet" size="24" />
+              </Tooltip>
+            </S.IconWrapper>
+            <S.IconWrapper active={resolution === "phone"} onClick={() => setResolution("phone")}>
+              <Tooltip content="Mobile" bottom>
+                <Icon name="phone" size="24" />
+              </Tooltip>
+            </S.IconWrapper>
+          </S.NavActions>
+        )}
       </S.NavBar>
-      <SiteProvider
-        cloudinaryCloudName={cloudinaryName}
-        theme={theme}
-        socials={socials}
-        siteLangs={siteLangs}
-        translations={translations}
-        selectEditorID={selectEditorID}
-        cloudinaryDefaults={cloudinaryDefaults}
-        renderer="editor"
-        apiUrl={API_URL}
-        publicApiUrl={PUBLIC_API_URL}
-        siteId={siteID}
-      >
-        <AnimationProvider showOnScroll={{ active: false }}>
-          <S.Wrapper ref={(ref: any) => ((window as any).browserRef = ref)}>
-            <Preview
-              isPage={isPage}
-              apiUrl={API_URL}
-              library={components}
-              content={content}
-              header={header}
-              footer={footer}
-              languageId={content.language}
-              pageLanguages={content.pageLanguages}
-            />
-          </S.Wrapper>
-        </AnimationProvider>
-      </SiteProvider>
+      {isPreview ? (
+        <S.FrameWrapper>
+          <S.StyledFrame width={getWidth(resolution)} height="100%" initialContent={initialContent}>
+            <FrameContextConsumer>
+              {(frameContext: any) => (
+                <StyleSheetManager target={frameContext.document.head}>{Providers}</StyleSheetManager>
+              )}
+            </FrameContextConsumer>
+          </S.StyledFrame>
+        </S.FrameWrapper>
+      ) : (
+        <>{Providers}</>
+      )}
+      {isVisible && <Toast {...toastProps} />}
     </S.BrowserWrapper>
   );
 };
@@ -84,14 +187,16 @@ interface IBrowserProps {
   footer?: any;
   selectedEditorID: number;
   url: string;
-  setSelectedContent: any;
+  setSelectedContent?: any;
   isPage: boolean;
   theme: string;
   socials: any;
-  cloudinaryName: string;
+  cloudinaryName: string | null;
+  damDomain: string | null;
   siteLangs: any[];
   disabled?: boolean;
   siteID?: number;
+  isPreview?: boolean;
 }
 
 export default Browser;

package/src/components/Browser/style.tsx

@@ -1,15 +1,16 @@
 import styled from "styled-components";
+import Frame from "react-frame-component";
 
-export const BrowserWrapper = styled.div`
-  background: #fff;
+const BrowserWrapper = styled.div`
+  background-color: ${(p) => p.theme.color.uiBackground01};
   height: 100%;
   width: 100%;
 `;
 
-export const Wrapper = styled.div`
-  border-left: 1px solid #DBDDE9;
-  border-right: 1px solid #DBDDE9;
-  border-bottom: 1px solid #DBDDE9;
+const Wrapper = styled.div`
+  border-left: 1px solid ${(p) => p.theme.color.uiLine};
+  border-right: 1px solid ${(p) => p.theme.color.uiLine};
+  border-bottom: 1px solid ${(p) => p.theme.color.uiLine};
   overflow: auto;
   scroll-behavior: smooth;
   height: 100%;
@@ -20,19 +21,54 @@ export const Wrapper = styled.div`
   }
 `;
 
-// TODO: cambiar color del fondo por el del tema
-export const NavBar = styled.div`
-  background-color: #e6e7f9;
+const NavBar = styled.div`
+  display: flex;
+  background-color: ${(p) => p.theme.color.uiBackground03};
   border-radius: 4px 4px 0 0;
   height: calc(${(p) => p.theme.spacing.m} + (${(p) => p.theme.spacing.xs} * 2));
   padding: ${(p) => p.theme.spacing.xs} ${(p) => p.theme.spacing.m};
 `;
 
-export const NavUrl = styled.div`
+const NavUrl = styled.div`
   ${(p) => p.theme.textStyle.uiXS};
-  background-color: #ffffff;
+  background-color: ${(p) => p.theme.color.uiBackground02};
   border-radius: 10px;
   color: ${(p) => p.theme.color.textMediumEmphasis};
   height: ${(p) => p.theme.spacing.m};
   padding: ${(p) => p.theme.spacing.xxs} ${(p) => p.theme.spacing.s};
+  width: 100%;
+`;
+
+const NavActions = styled.div`
+  display: flex;
+  padding-left: ${(p) => p.theme.spacing.xs};
+`;
+
+const IconWrapper = styled.div<{ active?: boolean }>`
+  margin-left: ${(p) => p.theme.spacing.m};
+  cursor: pointer;
+  :hover {
+    svg {
+      path {
+        fill: ${(p) => p.theme.color.interactive01};
+      }
+    }
+  }
+  svg {
+    path {
+      fill: ${(p) => (p.active ? p.theme.color.interactive01 : p.theme.color.iconNonActive)};
+    }
+  }
 `;
+
+const FrameWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  height: 100%;
+`;
+
+const StyledFrame = styled(Frame)`
+  box-shadow: ${(p) => p.theme.shadow.shadowL};
+`;
+
+export { BrowserWrapper, Wrapper, NavBar, NavUrl, NavActions, IconWrapper, FrameWrapper, StyledFrame };

package/src/components/ConfigPanel/index.tsx

@@ -28,7 +28,7 @@ const ConfigPanel = (props: IStateProps): JSX.Element => {
     isEditable,
     pageTitle,
     setHistoryPush,
-    isPreviewMode,
+    isReadOnly,
     userEditing,
     theme,
   } = props;
@@ -41,7 +41,7 @@ const ConfigPanel = (props: IStateProps): JSX.Element => {
   const isGlobalPageNotEditable = isGlobal && isPage && !isEditable;
 
   const getForm = () => {
-    if (isPreviewMode) {
+    if (isReadOnly) {
       return <PreviewForm setSelectedTab={setSelectedTab} selectedTab={selectedTab} userEditing={userEditing} />;
     } else if (showNavigationForm) {
       return <NavigationForm schema={schema} theme={theme} />;
@@ -102,7 +102,7 @@ interface IStateProps {
   isGlobal?: boolean;
   pageTitle?: string;
   setHistoryPush?: (path: string, isEditor: boolean) => void;
-  isPreviewMode?: boolean;
+  isReadOnly?: boolean;
   userEditing?: IUserEditing | null;
   theme: string;
 }

package/src/components/Fields/CheckField/index.tsx

@@ -42,8 +42,6 @@ const CheckField = ({
           checked={checked}
           disabled={disabled}
           onChange={handleChange}
-          error={error}
-          indeterminate={indeterminate}
         />
         <S.CheckMark checked={checked} error={error} indeterminate={indeterminate} />
       </S.Label>

package/src/components/Fields/RadioField/index.tsx

@@ -15,7 +15,7 @@ const RadioField = (props: IRadioFieldProps): JSX.Element => {
     <S.Wrapper>
       <S.Label>
         {title}
-        <S.Input type="radio" name={name} value={value} checked={checked} disabled={disabled} onChange={handleChange} error={error} />
+        <S.Input type="radio" name={name} value={value} checked={checked} disabled={disabled} onChange={handleChange} />
         <S.CheckMark checked={checked} error={error} />
       </S.Label>
     </S.Wrapper>

package/src/components/Fields/RichText/index.tsx

@@ -12,7 +12,7 @@ import * as S from "./style";
 const RichText = (props: IRichTextProps): JSX.Element => {
   const { value, error, placeholder, onChange, disabled, editorID, handleValidation, html = false } = props;
 
-  const rawData = html ? htmlToDraft(value) : markdownToDraft(value);
+  const rawData = html ? htmlToDraft(value || "") : markdownToDraft(value);
   const { contentBlocks, entityMap } = rawData;
   const contentState = html ? ContentState.createFromBlockArray(contentBlocks, entityMap) : convertFromRaw(rawData);
 
@@ -20,7 +20,7 @@ const RichText = (props: IRichTextProps): JSX.Element => {
   const timeOutRef = useRef<ReturnType<typeof setTimeout>>();
 
   useEffect(() => {
-    const rawData = html ? htmlToDraft(value) : markdownToDraft(value);
+    const rawData = html ? htmlToDraft(value || "") : markdownToDraft(value);
     const { contentBlocks, entityMap } = rawData;
     const contentState = html ? ContentState.createFromBlockArray(contentBlocks, entityMap) : convertFromRaw(rawData);
     setEditorState(EditorState.createWithContent(contentState));

package/src/components/Fields/UrlField/utils.tsx

@@ -13,9 +13,18 @@ const findAnchorsFromPage = (page: IPage): ISelectOption[] => {
         const option = { value: module.anchorID, label: module.anchorID };
         options.push(option);
       }
+      if (module.elements) {
+        module.elements.forEach((element: any) => {
+          element.componentModules && element.componentModules.forEach((component: any) => {
+            if (component.anchorID && component.anchorID.trim() !== "") {
+              const option = { value: component.anchorID, label: component.anchorID };
+              options.push(option);
+            }
+          });
+        });
+      }
     });
   });
-
   return options;
 };
 

package/src/components/Icon/components/Desktop.js

@@ -1,8 +1,13 @@
-import React from "react";
+import * as React from "react";
 
-const SvgDesktop = props => (
-  <svg width={24} height={24} fill="none" {...props}>
-    <path fillRule="evenodd" clipRule="evenodd" d="M3 2h18c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2h-7v2h2v2H8v-2h2v-2H3c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2zm0 14h18V4H3v12z" fill="#5057FF" />
+const SvgDesktop = (props) => (
+  <svg width={24} height={24} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M3 2h18c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2h-7v2h2v2H8v-2h2v-2H3c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2Zm0 14h18V4H3v12Z"
+      fill="#5057FF"
+    />
   </svg>
 );
 

package/src/components/Icon/components/Phone.js

@@ -1,11 +1,11 @@
-import React from "react";
+import * as React from "react";
 
-const SvgPhone = props => (
-  <svg width={24} height={24} fill="none" {...props}>
+const SvgPhone = (props) => (
+  <svg width={24} height={24} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
     <path
       fillRule="evenodd"
       clipRule="evenodd"
-      d="M15.5 1h-8A2.5 2.5 0 005 3.5v17A2.5 2.5 0 007.5 23h8a2.5 2.5 0 002.5-2.5v-17A2.5 2.5 0 0015.5 1zm-4 21c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM7 18h9V4H7v14z"
+      d="M15.5 1h-8A2.5 2.5 0 0 0 5 3.5v17A2.5 2.5 0 0 0 7.5 23h8a2.5 2.5 0 0 0 2.5-2.5v-17A2.5 2.5 0 0 0 15.5 1Zm-4 21c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5ZM7 18h9V4H7v14Z"
       fill="#5057FF"
     />
   </svg>

package/src/components/Icon/components/Share.js

@@ -0,0 +1,12 @@
+import * as React from "react";
+
+const SvgShare = (props) => (
+  <svg width={24} height={24} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path
+      d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7 0-.24-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92 0-1.61-1.31-2.92-2.92-2.92Z"
+      fill="#5057FF"
+    />
+  </svg>
+);
+
+export default SvgShare;

package/src/components/Icon/components/Tablet.js

@@ -1,11 +1,11 @@
-import React from "react";
+import * as React from "react";
 
-const SvgTablet = props => (
-  <svg width={24} height={24} fill="none" {...props}>
+const SvgTablet = (props) => (
+  <svg width={24} height={24} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
     <path
       fillRule="evenodd"
       clipRule="evenodd"
-      d="M18.5 0h-14A2.5 2.5 0 002 2.5v19A2.5 2.5 0 004.5 24h14a2.5 2.5 0 002.5-2.5v-19A2.5 2.5 0 0018.5 0zm-7 23c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM4 19h15V3H4v16z"
+      d="M18.5 0h-14A2.5 2.5 0 0 0 2 2.5v19A2.5 2.5 0 0 0 4.5 24h14a2.5 2.5 0 0 0 2.5-2.5v-19A2.5 2.5 0 0 0 18.5 0Zm-7 23c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5ZM4 19h15V3H4v16Z"
       fill="#5057FF"
     />
   </svg>

package/src/components/Icon/svgs/Share.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18 16.08C17.24 16.08 16.56 16.38 16.04 16.85L8.91 12.7C8.96 12.47 9 12.24 9 12C9 11.76 8.96 11.53 8.91 11.3L15.96 7.19C16.5 7.69 17.21 8 18 8C19.66 8 21 6.66 21 5C21 3.34 19.66 2 18 2C16.34 2 15 3.34 15 5C15 5.24 15.04 5.47 15.09 5.7L8.04 9.81C7.5 9.31 6.79 9 6 9C4.34 9 3 10.34 3 12C3 13.66 4.34 15 6 15C6.79 15 7.5 14.69 8.04 14.19L15.16 18.35C15.11 18.56 15.08 18.78 15.08 19C15.08 20.61 16.39 21.92 18 21.92C19.61 21.92 20.92 20.61 20.92 19C20.92 17.39 19.61 16.08 18 16.08Z" fill="#5057FF"/>
+</svg>