@integry/sdk 4.5.2 → 4.5.4

package/src/features/containers/SDKContainer/styles.module.scss

@@ -0,0 +1,266 @@
+.integry-container {
+  width: inherit;
+  height: auto;
+  min-width: 342px;
+  .inlineSetup {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: flex-start;
+    position: relative;
+    justify-content: center;
+    height: 100%;
+    // padding: 50px;
+    padding: 25px;
+    .close {
+      position: absolute;
+      padding: 10px;
+      cursor: pointer;
+      top: 0;
+      right: 0;
+      visibility: hidden;
+    }
+    .flowName {
+      padding-top: 0;
+    }
+  }
+
+  .inlineSetupCompact {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: flex-start;
+    position: relative;
+    height: 100%;
+    .close {
+      position: absolute;
+      padding: 10px;
+      cursor: pointer;
+      top: 0;
+      right: 0;
+      visibility: hidden;
+    }
+    .flowName {
+      padding-top: 0;
+    }
+  }
+}
+
+.modal {
+  position: fixed;
+  z-index: 10;
+  overflow-y: auto;
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
+  left: 0px;
+}
+
+.flowName {
+  text-align: center;
+  padding-top: 20px;
+  padding-bottom: 28px;
+  padding-right: 40px;
+  padding-left: 25px;
+  line-height: 36px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 8px;
+  color: #333;
+  font-size: 14px;
+  font-weight: 400;
+}
+
+.flowNameCompact {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 8px;
+  width: calc(100% - 40px);
+  padding-bottom: 12px;
+  margin: 0 16px;
+
+  .flowNameGroup {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 8px;
+    margin: 0;
+    width: calc(100% - 40px);
+  }
+  .flowNameGroupCompact {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    margin: 0 auto;
+    width: calc(100% - 40px);
+    margin-left: -30px;
+    padding-left: 30px;
+  }
+
+  span {
+    color: var(--black-and-grey-title-and-desc, #333);
+    text-align: left;
+    font-family: Inter;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: normal;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  img {
+    width: 20px;
+    height: 20px;
+    object-fit: contain;
+  }
+}
+
+.compact-view {
+  width: 342px;
+  // height: calc(100% - 24px);
+  padding: 24px;
+  padding-bottom: 0;
+  margin: 0 auto;
+}
+
+div[id='flows-comfortable-view'] {
+  max-width: 730px;
+  margin: 0 auto;
+  border: 1px solid #eeeeee;
+
+  .inlineSetup {
+    padding: 24px 0;
+    padding-bottom: 0px;
+  }
+  .flowAccountWrap {
+    [class^='styles-module_accountField'] {
+      margin: 8px 16px;
+    }
+    [class^='styles-module_accountFieldDropdown'] {
+      height: 24px;
+    }
+    [class^='styles-module_authWrapDropdown'] {
+      width: 363px;
+      top: 58px;
+      left: 16px;
+    }
+  }
+}
+div[id='flows-compact-view'] {
+  .flowAccountWrap {
+    [class^='styles-module_accountFieldDropdown'] {
+      height: 24px;
+    }
+    [class^='styles-module_authWrapDropdown'] {
+      width: 339px;
+    }
+  }
+}
+div[id='appPageContainer-COMFORTABLE--INLINE'] {
+  max-width: 730px;
+  margin: 0 auto;
+  border: 1px solid #eeeeee;
+
+  .inlineSetup {
+    padding: 24px 0;
+  }
+}
+div[id='appPageContainer-COMPACT--INLINE'] {
+  border: 1px solid #eeeeee;
+  .inlineSetup {
+    padding: 24px 0;
+  }
+}
+div[id='stepsBottomComfortable'] {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: space-between;
+  padding-right: 100px;
+  border-top: 1px solid #e0e0e0;
+  padding: 24px;
+  // padding-bottom: 0px;
+  align-items: end;
+  margin-top: 24px;
+}
+div[id='appPageContainer-COMFORTABLE--MODAL'] div[id='stepsBottomComfortable'] {
+  padding-bottom: 5px;
+}
+div[id='appPageContainer-COMFORTABLE--MODAL'] div[id='stepsWrap'] {
+  height: 90%;
+}
+div[id='appPageContainer-COMFORTABLE--INLINE']
+  div[id='stepsBottomComfortable'] {
+  padding-bottom: 5px;
+  margin-top: 0px;
+}
+
+.flows-comfortable-view--MODAL + div[id='sdk-modal'],
+.flows-comfortable-view--MODAL div[id='sdk-modal'] {
+  div[id='sdk-modal-container'] {
+    div[id='integry-sdk-modal-container__content'] {
+      // height: calc(100vh - 150px);
+      height: 100%;
+      min-height: 557px;
+    }
+  }
+  [class^='styles-module_authWrapDropdown_'] {
+    div[id='sdk-modal-container'] {
+      div[id='integry-sdk-modal-container__content'] {
+        height: auto;
+        min-height: auto;
+      }
+    }
+  }
+  div[id='stepsWrap'] {
+    border-top: 1px solid #d7d7d7;
+  }
+  div[id='stepInfo'] {
+    border-top: 0px;
+  }
+}
+div[id='flows-compact-view'] + div[id='sdk-modal'],
+div[id='flows-compact-view'] div[id='sdk-modal'] {
+  div[id='sdk-modal-container'] {
+    div[id='integry-sdk-modal-container__content'] {
+      [class^='styles-module_flowAccountWrap_'] {
+        width: 344px;
+        margin: 0 auto;
+      }
+      [class^='styles-module_accountFieldDropdown_'] {
+        height: 24px;
+      }
+      [class^='styles-module_authWrapDropdown_'] {
+        width: 337px;
+      }
+      [class^='styles-module_actionFormWrap_'] {
+        min-height: 350px;
+      }
+    }
+  }
+}
+div[id='flows-comfortable-view'] + div[id='sdk-modal'],
+div[id='flows-comfortable-view'] div[id='sdk-modal'] {
+  div[id='sdk-modal-container'] {
+    div[id='integry-sdk-modal-container__content'] {
+      [class^='styles-module_flowAccountWrap_'] {
+        margin-left: 20px;
+      }
+      [class^='styles-module_accountFieldDropdown_'] {
+        height: 24px;
+      }
+      [class^='styles-module_authWrapDropdown_'] {
+        width: 337px;
+      }
+    }
+  }
+}

package/src/features/containers/SDKDebugContainer/index.ts

@@ -0,0 +1,137 @@
+/* eslint-disable no-nested-ternary */
+import { UserConfig } from '@/interfaces';
+import { StoreType } from '@/types/store';
+import { html } from 'htm/preact';
+import { useContext, useEffect, useRef, useState } from 'preact/hooks';
+import isBrowser from '@/utils/isBrowser';
+
+import styles from './styles.module.scss';
+
+interface ContainerProps extends StoreType {
+  message: string;
+  config: any;
+  eventEmitter: any;
+  initialEvents?: any;
+}
+
+const SDKDebugContainer = (props: ContainerProps) => {
+  const [events, setEvents] = useState<any>([]);
+  const { appKey, apiKey, userId, hash, extras } = props.config;
+
+  const pushEvent = (type: string, data: any) => {
+    const tempEvents = [...events];
+
+    const isTypeExists = tempEvents.some((event) => event.type === type);
+
+    if (!isTypeExists) {
+      tempEvents.push({
+        type,
+        data,
+      });
+      setEvents(tempEvents);
+    }
+  };
+
+  const loadCustomStyles = () => {
+    const style = document.createElement('style');
+    style.textContent = `
+      div[id='embed--appsContainer'],
+      div[id='appPageContainer-COMFORTABLE--INLINE'],
+      div[id='flows-comfortable-view'],
+      div[id='flows-compact-view'],
+      div[id='appPageContainer-COMPACT--INLINE'],
+      div[class^='styles-module_inlineContentWrap'],
+      div[id='embed--flowCardContainer__INLINE'] {
+        height: 70% !important;
+        min-height: 70% !important;
+        overflow: scroll;
+      }
+      div[id='embed--flowCardContainer__INLINE'] {
+        overflow: visible;
+      }
+      div[class^='styles-module_appFlowSetupForm'] {
+        min-height: 80% !important;
+      }
+    `;
+    document.head.appendChild(style);
+  };
+
+  if (props.eventEmitter) {
+    props.eventEmitter.on('ready', (data: any) => {
+      pushEvent('ready', data);
+    });
+    props.eventEmitter.on('did-save-integration', (data: any) => {
+      pushEvent('did-save-integration', data);
+    });
+    props.eventEmitter.on('did-add-authorization', (data: any) => {
+      pushEvent('did-add-authorization', data);
+    });
+    props.eventEmitter.on('did-remove-authorization', (data: any) => {
+      pushEvent('did-remove-authorization', data);
+    });
+    props.eventEmitter.on('did-delete-integration', (data: any) => {
+      pushEvent('did-delete-integration', data);
+    });
+    props.eventEmitter.on('did-rename-integration', (data: any) => {
+      pushEvent('did-rename-integration', data);
+    });
+    props.eventEmitter.on('did-disable-integration', (data: any) => {
+      pushEvent('did-disable-integration', data);
+    });
+    props.eventEmitter.on('did-enable-integration', (data: any) => {
+      pushEvent('did-enable-integration', data);
+    });
+  }
+
+  useEffect(() => {
+    if (props.config.userConfig.debug) {
+      loadCustomStyles();
+    }
+    (props.initialEvents || []).forEach((event: any) =>
+      pushEvent(event.type, event.data),
+    );
+  }, [events]);
+
+  return html`
+    <div className=${styles.SDKDebugContainer}>
+      <div className=${styles.SDKDebugContainer__content}>
+        <h3 className=${styles.SDKDebugContainer__title}>
+          Debug mode <span>(debug = true)</span>
+        </h3>
+        ${props.message &&
+        html`<p className=${styles.SDKDebugContainer__message}>
+          ${props.message}
+        </p>`}
+        <div className=${styles.contentBlock}>
+          <p>
+            <label>Security</label>
+            <span>appKey (required): ${appKey ? '********' : ''}</span>
+            <span>hash (required): ${hash ? '********' : ''}</span>
+          </p>
+        </div>
+        <div className=${styles.contentBlock}>
+          <p>
+            <label>User variables</label>
+            <span>userId (required): ${userId}</span>
+            <span>apiKey: ${apiKey}</span>
+            ${Object.entries(extras || []).map(
+              ([key, value]) => html`<span>${key}: ${value}</span>`,
+            )}
+          </p>
+        </div>
+        <div className=${styles.contentBlock}>
+          <p>
+            <label>Events</label>
+            ${events.map(
+              (item: any) =>
+                html`<span>Event: ${item.type}</span>
+                  <pre>${JSON.stringify(item.data, null, 2)}</pre>`,
+            )}
+          </p>
+        </div>
+      </div>
+    </div>
+  `;
+};
+
+export default SDKDebugContainer;

package/src/features/containers/SDKDebugContainer/styles.module.scss

@@ -0,0 +1,37 @@
+.SDKDebugContainer {
+  width: 654px;
+  text-align: left;
+  margin: 0 auto;
+  border: 2px solid #ccc;
+  border-radius: 5px;
+  margin-top: 10px;
+  max-width: 730px;
+  padding: 20px 40px;
+  height: 30%;
+  overflow: scroll;
+  .SDKDebugContainer__content {
+    .SDKDebugContainer__title {
+      font-size: 24px;
+      margin-bottom: 16px;
+      display: inline;
+      span {
+        font-weight: normal;
+      }
+    }
+    .contentBlock {
+      margin: 30px 0;
+      label {
+        font-size: 16px;
+        font-weight: bold;
+        margin-bottom: 8px;
+        display: block;
+      }
+      span {
+        font-size: 14px;
+        font-weight: normal;
+        display: block;
+        margin-bottom: 8px;
+      }
+    }
+  }
+}

package/src/features/containers/SDKFailedContainer/index.ts

@@ -0,0 +1,117 @@
+/* eslint-disable no-nested-ternary */
+import { UserConfig } from '@/interfaces';
+import { StoreType } from '@/types/store';
+import { html } from 'htm/preact';
+import { useContext, useEffect, useRef } from 'preact/hooks';
+import SDKDebugContainer from '@/features/containers/SDKDebugContainer';
+
+import styles from './styles.module.scss';
+
+interface ContainerProps extends StoreType {
+  message: string;
+  debug: boolean;
+  config: any;
+}
+
+const SDKFailedContainer = (props: ContainerProps) =>
+  html`
+    <div className=${styles.SDKFailedContainer}>
+      <div className=${styles.SDKFailedContainer__content}>
+        <svg
+          data-hint="Could not authorize"
+          width="24"
+          height="24"
+          viewBox="0 0 12 12"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          style="margin-right: 10px; position: relative; top: 2px;"
+        >
+          <path
+            d="M5.99833 0.891429C6.08866 0.891429 6.31281 0.918857 6.43659 1.16571L11.0702 10.3749C11.1839 10.6011 11.0969 10.7966 11.0535 10.8686C11.01 10.9406 10.8828 11.112 10.6319 11.112H1.36474C1.11382 11.112 0.986692 10.944 0.9432 10.8686C0.899708 10.7966 0.812723 10.6011 0.926472 10.3749L5.56006 1.16571C5.68385 0.918857 5.908 0.891429 5.99833 0.891429ZM5.99833 0C5.51991 0 5.0415 0.250286 4.78724 0.754286L0.15365 9.96343C-0.314727 10.8926 0.344346 12 1.36474 12H10.6353C11.6557 12 12.3147 10.8926 11.8464 9.96343L7.20942 0.754286C6.95515 0.250286 6.47674 0 5.99833 0Z"
+            fill="#F05C42"
+          />
+          <path
+            d="M5.99494 8.71924C5.83435 8.71924 5.70053 8.77752 5.59013 8.89067C5.47973 9.00381 5.42285 9.14095 5.42285 9.3021C5.42285 9.48724 5.47973 9.63124 5.59682 9.7341C5.71391 9.83695 5.84774 9.88838 6.00163 9.88838C6.15553 9.88838 6.286 9.83695 6.4031 9.73067C6.51685 9.62781 6.57372 9.48381 6.57372 9.3021C6.57372 9.14095 6.51685 9.00381 6.4031 8.89067C6.29269 8.7741 6.15553 8.71924 5.99494 8.71924Z"
+            fill="#F05C42"
+          />
+          <path
+            d="M5.99923 3.9668C5.68474 3.9668 5.43048 4.23423 5.44386 4.55651L5.54423 7.57708C5.55092 7.8308 5.755 8.03308 6.00257 8.03308C6.25014 8.03308 6.45422 7.8308 6.46091 7.57708L6.55793 4.55651C6.56797 4.23423 6.31371 3.9668 5.99923 3.9668Z"
+            fill="#F05C42"
+          />
+        </svg>
+        <h1 className=${styles.SDKFailedContainer__title}>Failed to load!</h1>
+      </div>
+      <div id="embed--footer" class=${styles.embedPreviewFooter}>
+        <span class=${styles.embedPreviewFooterDesc}>
+          Powered by
+          <a
+            class=${styles.embedPreviewFooterCTA}
+            target="_blank"
+            href="https://integry.ai/?utm_source=${props.genericData
+              ?.customerAppName}&utm_medium=sdk"
+            rel="noreferrer"
+            ><svg
+              style="margin-left: 4px; margin-right: 2px;"
+              width="12"
+              height="12"
+              viewBox="0 0 12 12"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M5.9833 11.961V11.961C5.39389 11.961 4.91162 11.479 4.91162 10.8899V1.07111C4.91162 0.481989 5.39389 0 5.9833 0C6.5727 0 7.05492 0.481989 7.05492 1.07111V10.8899C7.05492 11.479 6.5727 11.961 5.9833 11.961"
+                fill="#F05C42"
+              />
+              <path
+                d="M11.9668 5.98046V5.98046C11.9668 6.56958 11.4846 7.05162 10.8951 7.05162H1.07167C0.482268 7.05162 0 6.56958 0 5.98046C0 5.39134 0.482268 4.9093 1.07167 4.9093H10.8951C11.4846 4.9093 11.9668 5.39134 11.9668 5.98046"
+                fill="#FCC700"
+              />
+              <path
+                d="M10.2143 1.75164V1.75164C10.6311 2.16822 10.6311 2.84988 10.2143 3.26646L3.26807 10.2094C2.85129 10.626 2.1693 10.626 1.75252 10.2094C1.33575 9.79278 1.33575 9.11116 1.75252 8.69459L8.69876 1.75164C9.11554 1.33506 9.79753 1.33506 10.2143 1.75164"
+                fill="#3BB568"
+              />
+              <path
+                d="M1.75252 1.75164V1.75164C2.1693 1.33506 2.85129 1.33506 3.26807 1.75164L10.2143 8.69459C10.6311 9.11116 10.6311 9.79278 10.2143 10.2094C9.79753 10.626 9.11554 10.626 8.69876 10.2094L1.75252 3.26646C1.33575 2.84988 1.33575 2.16827 1.75252 1.75164"
+                fill="#509CF6"
+              /></svg
+            >Integry</a
+          >.
+        </span>
+        <a
+          class=${styles.embedPreviewFooterCTA}
+          target="_blank"
+          href="https://www.integry.ai/security-policy"
+          rel="noreferrer"
+        >
+          Privacy Policy
+          <!--<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 13 13" fill="none"><path d="M12.0007 4.99975V11.5001C12.0007 12.6006 11.1038 13 10.5008 13H1.49993C0.399356 13 0 12.1032 0 11.5001V2.49924C0 1.39867 0.896835 0.999311 1.49993 0.999311H7.50027C7.77651 0.999311 8.00024 1.22304 8.00024 1.49929C8.00024 1.77553 7.77651 1.99926 7.50027 1.99926H1.49993C1.27494 2.00551 0.99995 2.09676 0.99995 2.49924V11.5001C1.0062 11.7251 1.09745 12 1.49993 12H10.5008C10.7257 11.9938 11.0007 11.9032 11.0007 11.5001V4.99975C11.0007 4.72351 11.2245 4.49978 11.5007 4.49978C11.777 4.49978 12.0007 4.72351 12.0007 4.99975ZM12.5 0H9.50018C9.22394 0 9.00021 0.223733 9.00021 0.499975C9.00021 0.776218 9.22394 0.999951 9.50018 0.999951H11.2263L5.15912 6.63407C4.95726 6.82219 4.94539 7.13842 5.13287 7.34092C5.23162 7.44716 5.36536 7.50029 5.49911 7.50029C5.62098 7.50029 5.74284 7.45654 5.83972 7.36654L12 1.64682V3.49985C12 3.77609 12.2238 3.99983 12.5 3.99983C12.7763 3.99983 13 3.77609 13 3.49985V0.499999C13 0.223757 12.7763 2.40314e-05 12.5 2.40314e-05L12.5 0Z" fill="#4250F0"></path>
+        </svg>-->
+        </a>
+      </div>
+      ${props.debug
+        ? html`<${SDKDebugContainer}
+            message="Failed to initialize the Integry Marketplace widget. Please verify the variables below."
+            config=${props.config}
+            initialEvents=${[
+              {
+                type: 'verify-sdk-credentials',
+                data: {
+                  isVerified: false,
+                  message:
+                    'Please verify if your SDK auth credentials are correct',
+                },
+              },
+              {
+                type: 'ready',
+                data: {
+                  isReady: false,
+                },
+              },
+            ]}
+          >
+          <//>`
+        : ''}
+    </div>
+  `;
+
+export default SDKFailedContainer;

package/src/features/containers/SDKFailedContainer/styles.module.scss

@@ -0,0 +1,57 @@
+.SDKFailedContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  width: 100%;
+  .SDKFailedContainer__content {
+    .SDKFailedContainer__title {
+      font-size: 30px;
+      font-weight: 500;
+      margin-bottom: 16px;
+      display: inline;
+    }
+  }
+  .embedPreviewFooter {
+    padding-bottom: 12px;
+    padding-top: 12px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
+    width: 100%;
+    box-shadow: 0px -6px 10px 0px rgba(255, 255, 255, 0.8);
+    margin-top: 40px;
+
+    .embedPreviewFooterDesc {
+      color: var(--black-and-grey-draft-and-tooltip-desc, #999);
+      font-family: Inter;
+      font-size: 12px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: normal;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: flex-start;
+      // gap: 2px;
+    }
+
+    .embedPreviewFooterCTA {
+      // color: var(--theme-accent-blue-1, #4250f0);
+      color: var(--black-and-grey-draft-and-tooltip-desc, #999);
+      font-family: Inter;
+      font-size: 12px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: normal;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: flex-start;
+      text-decoration: none;
+    }
+  }
+}

package/src/features/integrations/IntegrationRow/Icons.ts

@@ -0,0 +1,77 @@
+import { html } from 'htm/preact';
+
+const Success = () => html`
+  <svg
+    width="22"
+    height="22"
+    viewBox="0 0 25 25"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <circle cx="12.5" cy="12.5" r="12.5" fill="#2ECC71" />
+    <path
+      d="M17.2209 9.16699L11.3907 15.8337L8.33203 12.3361"
+      stroke="white"
+      stroke-width="1.2"
+      stroke-linecap="round"
+    />
+  </svg>
+`;
+
+const Fail = () => html`
+  <svg
+    width="22"
+    height="25"
+    viewBox="0 0 25 27"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <circle cx="12.5" cy="12.5" r="12.5" fill="#E26154" />
+    <g filter="url(#filter0_d)">
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M11.1886 8.05792C11.1209 7.32574 11.7556 6.61621 12.4701 6.61621C13.2413 6.61621 13.8535 7.32568 13.7963 8.05792L13.3542 13.5234C13.3206 14.0117 12.8896 14.3955 12.4019 14.3605C11.9713 14.3255 11.6422 13.9535 11.6196 13.5234L11.1886 8.05792ZM11.1836 16.9743C11.1836 16.3124 11.7654 15.7737 12.4835 15.7737C13.2189 15.7737 13.8007 16.3124 13.8 16.9743V17.2052C13.8 17.8671 13.2015 18.3902 12.4835 18.3902C11.7647 18.3902 11.1836 17.8671 11.1836 17.2052V16.9743Z"
+        fill="white"
+      />
+    </g>
+    <defs>
+      <filter
+        id="filter0_d"
+        x="7.18359"
+        y="6.61621"
+        width="10.6164"
+        height="19.7739"
+        filterUnits="userSpaceOnUse"
+        color-interpolation-filters="sRGB"
+      >
+        <feFlood flood-opacity="0" result="BackgroundImageFix" />
+        <feColorMatrix
+          in="SourceAlpha"
+          type="matrix"
+          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+          result="hardAlpha"
+        />
+        <feOffset dy="4" />
+        <feGaussianBlur stdDeviation="2" />
+        <feColorMatrix
+          type="matrix"
+          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"
+        />
+        <feBlend
+          mode="normal"
+          in2="BackgroundImageFix"
+          result="effect1_dropShadow"
+        />
+        <feBlend
+          mode="normal"
+          in="SourceGraphic"
+          in2="effect1_dropShadow"
+          result="shape"
+        />
+      </filter>
+    </defs>
+  </svg>
+`;
+
+export { Success, Fail };