@integry/sdk 4.7.39 → 4.7.40

package/src/components/MediaUpload/styles.module.scss

@@ -1,118 +0,0 @@
-.mediaUploadWrap {
-    .mediaUploader {
-        .dropMedia {
-                background: rgba(242, 242, 242, 0.5);
-                border: 1px dashed #E0E0E0;
-                border-radius: 6px;
-                width: 288px;
-                height: 162px;
-            .dropIcon {
-
-            }
-            .dropText {
-                font-family: inherit;
-                font-style: normal;
-                font-weight: 400;
-                font-size: 12px;
-                line-height: 15px;
-                text-align: center;
-                color: #999999;
-                .link {
-                    font-family: inherit;
-                    font-style: normal;
-                    font-weight: 400;
-                    font-size: 12px;
-                    line-height: 15px;
-                    text-align: center;
-                    color: #4250F0;
-                    cursor: pointer;
-                }
-                .allowedMediaLabel {
-                    font-family: inherit;
-                    font-style: normal;
-                    font-weight: 400;
-                    font-size: 12px;
-                    line-height: 15px;
-                    text-align: center;
-                    color: #999999;
-                    margin-top: 8px;
-                }
-            }
-            .hiddenFileInput {
-                display: none;
-            }
-        }
-        .urlField {
-           
-        }
-    }
-    .mediaListing {
-        margin-top: 24px;
-        display: flex;
-        flex-wrap: wrap;
-        gap: 7px;
-        max-width: 288px;
-        .mediaPreview {
-            width: 140px;
-            height: 77px;
-            position: relative;
-            .delMediaSpan {
-                position: absolute;
-                z-index: 999;
-                display: flex;
-                align-items: center;
-                font-style: normal;
-                font-weight: 400;
-                font-size: 12px;
-                line-height: 15px;
-                text-align: center;
-                color: #EB5757;
-                font-family: inherit;
-                top: 32px;
-                gap: 8px;
-                left: 40px;
-                cursor: pointer;
-                display: none;
-                .delIcon {
-
-                }
-            }
-            .mediaImg {
-                border: 1px solid #E0E0E0;
-                filter: drop-shadow(0px 0px 8px rgba(0, 0, 0, 0.08));
-                border-radius: 6px;
-                width: 140px;
-                height: 77px;
-            }
-            .backgroundOverlay {
-                background: #FFFFFF;
-                opacity: 0.8;
-                display: none;
-                width: 140px;
-                height: 77px;
-                position: absolute;
-                top: 0px;
-                left: 0px;
-                &.uploading {
-                    display: block;
-                    z-index: 9;
-                }
-            }
-            .uploadingImg {
-                position: absolute;
-                top: 32px;
-                left: 64px;
-                z-index: 99;
-            }
-            &:hover {
-                .backgroundOverlay {
-                    display: block;
-                    z-index: 9;
-                }
-                .delMediaSpan {
-                    display: flex;
-                }
-            }
-        }
-    }
-}

package/src/components/Modal/index.ts

@@ -1,87 +0,0 @@
-import { html, Component } from 'htm/preact';
-
-import styles from './styles.module.scss';
-
-interface ModalProps {
-  isOpen: boolean;
-  CustomCloseElement?: any;
-  onClose: () => void;
-  className?: string;
-  isCompact?: boolean;
-}
-
-class Modal extends Component<ModalProps> {
-  render() {
-    const { isOpen, CustomCloseElement, className, isCompact = false } = this.props;
-    return html`
-      <div
-        id="sdk-modal"
-        class=${`${styles.modal} ${isOpen ? `${styles.open}` : ''} ${
-          styles[className || '']
-        }`}
-        aria-labelledby="modal-title"
-        role="dialog"
-        aria-modal="true"
-      >
-        <div id="sdk-modal-container" class=${styles.modalContainer}>
-          <div
-            id="sdk-modal-container__inset"
-            class=${styles.inset}
-            aria-hidden="true"
-          ></div>
-
-          <span class=${styles.span} aria-hidden="true"></span>
-
-          <div
-            id="integry-sdk-modal-container__content"
-            style="${isCompact ? 'min-width: 395px; width: 395px; overflow-x: hidden;' : ''}"
-            class=${`${isCompact ? styles.contentWrapCompact : styles.contentWrap} ${isOpen ? `${styles.open}` : ''}`}
-          >
-            <div class=${isCompact ? styles.contentCompact : styles.content}>
-              ${CustomCloseElement
-                ? html` <div
-                    onclick=${this.props.onClose}
-                    class="integry-sdk-modal-close-btn"
-                  >
-                    <${CustomCloseElement} />
-                  </div>`
-                : this.props.onClose &&
-                  html`
-                    <div
-                      onclick=${this.props.onClose}
-                      class=${`integry-sdk-modal-close-btn ${isCompact ? styles.closeCompact : styles.close}`}
-                    >
-                      <svg
-                        width="14"
-                        height="14"
-                        viewBox="0 0 14 14"
-                        fill="none"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M13 1L1 13"
-                          stroke="#4F4F4F"
-                          stroke-width="2"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                        />
-                        <path
-                          d="M1 1L13 13"
-                          stroke="#4F4F4F"
-                          stroke-width="2"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                        />
-                      </svg>
-                    </div>
-                  `}
-              ${this.props.isOpen && html` ${this.props.children} `}
-            </div>
-          </div>
-        </div>
-      </div>
-    `;
-  }
-}
-
-export { Modal };

package/src/components/Modal/styles.module.scss

@@ -1,441 +0,0 @@
-.modal {
-  font-family: 'Inter';
-  display: none;
-  z-index: 99;
-  top: 0px;
-  right: 0px;
-  bottom: 0px;
-  left: 0px;
-  overflow-y: auto;
-  &.open {
-    position: fixed;
-    display: block;
-  }
-  .modalContainer {
-    display: flex;
-    min-height: 100vh;
-    align-items: flex-start;
-    justify-content: center;
-    text-align: center;
-    // margin-top: 4vh;
-    @media (min-width: 640px) {
-      display: block;
-      padding: 0;
-    }
-    .inset {
-      position: fixed;
-      top: 0px;
-      right: 0px;
-      bottom: 0px;
-      left: 0px;
-      transition-property: opacity;
-      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-      transition-duration: 150ms;
-      opacity: 0.3;
-      background-color: #000000;
-    }
-    .span {
-      display: none;
-      @media (min-width: 640px) {
-        display: inline-block;
-        height: 100vh;
-        vertical-align: middle;
-      }
-    }
-    .contentWrap {
-      display: none;
-      position: relative;
-      vertical-align: bottom;
-      background: white;
-      border-radius: 4px;
-      text-align: left;
-      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
-        0 10px 10px -5px rgba(0, 0, 0, 0.04);
-      overflow-x: hidden;
-      &.open {
-        display: inline-block;
-      }
-      @media (min-width: 640px) {
-        width: 100%;
-        max-width: 730px;
-        margin-top: 2rem;
-        margin-bottom: 0rem;
-        vertical-align: middle;
-        // max-height: calc(100vh - 100px);
-        overflow-y: auto;
-        &::-webkit-scrollbar {
-          width: 7px;
-        }
-
-        /* Track */
-        &::-webkit-scrollbar-track {
-          // background: #f1f1f1;
-          background: transparent;
-          border-radius: 10px;
-        }
-
-        /* Handle */
-        &::-webkit-scrollbar-thumb {
-          background: #ededed;
-          border: 1px solid #e7e7e7;
-          border-radius: 10px;
-        }
-
-        /* Handle on hover */
-        &::-webkit-scrollbar-thumb:hover {
-          background: rgb(116, 116, 116);
-        }
-      }
-      .content {
-        position: relative;
-        background: white;
-        // padding-bottom: 30px;
-        border-radius: 4px;
-        height: calc(100% - 80px);
-      }
-      .close {
-        position: absolute;
-        cursor: pointer;
-        top: 10px;
-        right: 10px;
-      }
-
-      .closeCompact {
-        position: absolute;
-        cursor: pointer;
-        top: 24px;
-        right: 24px;
-      }
-    }
-
-    .contentWrapCompact {
-      display: none;
-      // height: calc(100vh - 120px);
-      min-height: 557px;
-      max-height: 620px;
-      position: relative;
-      vertical-align: bottom;
-      background: white;
-      border-radius: 4px;
-      text-align: left;
-      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
-        0 10px 10px -5px rgba(0, 0, 0, 0.04);
-      overflow-x: hidden;
-      &.open {
-        display: inline-block;
-      }
-      @media (min-width: 640px) {
-        width: 100%;
-        max-width: 730px;
-        margin-top: 2rem;
-        margin-bottom: 0rem;
-        vertical-align: middle;
-        // max-height: calc(100vh - 100px);
-        overflow-y: auto;
-        &::-webkit-scrollbar {
-          width: 7px;
-        }
-
-        /* Track */
-        &::-webkit-scrollbar-track {
-          // background: #f1f1f1;
-          background: transparent;
-          border-radius: 10px;
-        }
-
-        /* Handle */
-        &::-webkit-scrollbar-thumb {
-          background: #ededed;
-          border: 1px solid #e7e7e7;
-          border-radius: 10px;
-        }
-
-        /* Handle on hover */
-        &::-webkit-scrollbar-thumb:hover {
-          background: rgb(116, 116, 116);
-        }
-      }
-      .contentCompact {
-        position: relative;
-        background: white;
-        padding-bottom: 0px;
-        border-radius: 4px;
-        height: inherit;
-      }
-      .close {
-        position: absolute;
-        cursor: pointer;
-        top: 10px;
-        right: 10px;
-      }
-
-      .closeCompact {
-        position: absolute;
-        cursor: pointer;
-        top: 24px;
-        right: 24px;
-      }
-    }
-  }
-  &.marketplace-modal {
-    .modalContainer {
-      .contentWrap {
-        .close {
-          position: absolute;
-          cursor: pointer;
-          top: 28px;
-          right: 32px;
-          z-index: 99;
-        }
-        @media (min-width: 320px) {
-          min-width: 420px;
-          width: min-content;
-          max-width: 480px;
-          margin-top: 3rem;
-          margin-bottom: 0rem;
-          vertical-align: middle;
-          height: calc(100vh - 100px);
-          max-height: calc(100vh - 100px);
-          overflow-y: auto;
-          &::-webkit-scrollbar {
-            width: 7px;
-          }
-
-          /* Track */
-          &::-webkit-scrollbar-track {
-            // background: #f1f1f1;
-            background: transparent;
-            border-radius: 8px;
-          }
-
-          /* Handle */
-          &::-webkit-scrollbar-thumb {
-            background: #bdbdbd;
-            border: 1px solid #bdbdbd;
-            border-radius: 8px;
-          }
-
-          /* Handle on hover */
-          &::-webkit-scrollbar-thumb:hover {
-            background: rgb(116, 116, 116);
-          }
-        }
-        @media (min-width: 640px) {
-          width: 480px;
-          max-width: 480px;
-        }
-        @media (min-width: 857px) {
-          width: 800px;
-          max-width: 800px;
-        }
-        @media (min-width: 1237px) {
-          width: 1180px;
-          max-width: 1180px;
-        }
-        @media (min-height: 1152px) {
-          max-height: 1000px;
-          height: 1000px;
-        }
-      }
-    }
-  }
-  &.request-app-modal {
-    .modalContainer {
-      .contentWrap {
-        border-radius: 8px;
-        .close {
-          position: absolute;
-          cursor: pointer;
-          top: 0px;
-          right: 40px;
-          z-index: 99;
-        }
-        @media (min-width: 320px) {
-          width: 452px;
-          max-width: 480px;
-          margin-top: 3rem;
-          margin-bottom: 0rem;
-          vertical-align: middle;
-          max-height: calc(100vh - 100px);
-          overflow-y: auto;
-          &::-webkit-scrollbar {
-            width: 7px;
-          }
-
-          /* Track */
-          &::-webkit-scrollbar-track {
-            // background: #f1f1f1;
-            background: transparent;
-            border-radius: 8px;
-          }
-
-          /* Handle */
-          &::-webkit-scrollbar-thumb {
-            background: #bdbdbd;
-            border: 1px solid #bdbdbd;
-            border-radius: 8px;
-          }
-
-          /* Handle on hover */
-          &::-webkit-scrollbar-thumb:hover {
-            background: rgb(116, 116, 116);
-          }
-        }
-        @media (min-width: 640px) {
-          width: 587px;
-          max-width: 587px;
-        }
-      }
-    }
-  }
-  &.success-pop-up {
-    .modalContainer {
-      .contentWrap {
-        border-radius: 8px;
-        .close {
-          position: absolute;
-          cursor: pointer;
-          top: 0px;
-          right: 0px;
-          display: none;
-        }
-        @media (min-width: 320px) {
-          width: min-content;
-          max-width: 480px;
-          margin-top: 3rem;
-          margin-bottom: 0rem;
-          vertical-align: middle;
-          max-height: calc(100vh - 100px);
-        }
-        @media (min-width: 600px) {
-          width: 550px;
-          max-width: 550px;
-        }
-      }
-    }
-  }
-  &.confirmation-pop-up {
-    .modalContainer {
-      .contentWrap {
-        border-radius: 8px;
-        .close {
-          position: absolute;
-          cursor: pointer;
-          top: 0px;
-          right: 0px;
-          display: none;
-        }
-        @media (min-width: 320px) {
-          width: min-content;
-          max-width: 462px;
-          margin-top: 3rem;
-          margin-bottom: 0rem;
-          vertical-align: middle;
-          height: auto;
-          max-height: 300px;
-        }
-        @media (min-width: 600px) {
-          width: 462px;
-          max-width: 462px;
-        }
-      }
-    }
-  }
-  &.media-gallery-modal {
-    .modalContainer {
-      .contentWrap {
-        border-radius: 8px;
-        .close {
-          position: absolute;
-          cursor: pointer;
-          top: 6px;
-          right: 6px;
-        }
-        max-height: calc(100vh - 200px);
-        @media (min-width: 640px) {
-          width: 320px;
-          max-width: 320px;
-        }
-        @media (min-width: 857px) {
-          width: 550px;
-          max-width: 550px;
-        }
-        @media (min-width: 1237px) {
-          width: 800px;
-          max-width: 800px;
-        }
-        @media (min-height: 1152px) {
-          max-height: 800px;
-          height: 800px;
-        }
-      }
-    }
-  }
-  &.appModal {
-    .modalContainer {
-      .contentWrap {
-        .close {
-          position: absolute;
-          cursor: pointer;
-          top: 25px;
-          right: 27px;
-          z-index: 99;
-          width: 12px;
-          height: 12px;
-        }
-      }
-      .content {
-        padding-bottom: 10px !important;
-      }
-    }
-  }
-  &.flowAppsModal {
-    .modalContainer {
-      .contentWrap {
-        width: min-content;
-        overflow: hidden;
-        min-width: 605px;
-        .close {
-          position: absolute;
-          cursor: pointer;
-          top: 18px;
-          z-index: 99;
-          width: 12px;
-          height: 12px;
-          right: 27px;
-        }
-
-        @media (max-width: 768px) {
-          min-width: 312px;
-        }
-      }
-      .content {
-        padding-bottom: 10px !important;
-      }
-    }
-  }
-}
-
-.authConfirmation {
-  div {
-    user-select: none;
-  }
-  p {
-    user-select: none;
-  }
-  span {
-    user-select: none;
-  }
-  .content {
-    padding-bottom: 0 !important;
-  }
-  .contentWrap {
-    max-width: 485px !important;
-  }
-}
-.marketplaceAppDisconnectConfirmation {
-  .contentWrap {
-    min-width: 480px !important;
-    max-width: 485px !important;
-  }
-}

package/src/components/MultipurposeField/Dropdown/ListBoxItem.tsx

@@ -1,59 +0,0 @@
-import { html } from 'htm/preact';
-import { useRef } from 'preact/hooks';
-
-import styles from './styles.module.scss';
-
-interface ListBoxItemProps {
-  value: string;
-  id: string;
-  isSelected?: boolean;
-  isHighlighted?: boolean;
-  onClick(): void;
-  icon?: string;
-}
-
-const ListBoxItem = (props: ListBoxItemProps) => {
-  const { id, value, isSelected, isHighlighted = false, onClick } = props;
-  const listItemRef = useRef<HTMLSpanElement>();
-
-  const isContentOverflowing = (): boolean => {
-    if (listItemRef.current) {
-      return listItemRef.current.clientWidth < listItemRef.current.scrollWidth;
-    }
-    return false;
-  };
-
-  return html`
-    <span
-      class=${`${styles.listboxItem} ${isSelected ? styles.selected : ''} ${
-        isHighlighted ? styles.highlighted : ''
-      }`}
-      data-value=${id}
-      onclick=${onClick}
-      ref=${listItemRef}
-      data-hint=${`${isContentOverflowing() ? value : ''}`}
-    >
-      ${false &&
-      isSelected &&
-      html`
-        <svg
-          width="7"
-          height="7"
-          viewBox="0 0 7 7"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-          stroke="#333"
-        >
-          <path
-            d="M6.33333 1.5L2.83522 5.5L1 3.40148"
-            stroke-width="1.2"
-            stroke-linecap="round"
-          />
-        </svg>
-      `}
-      ${value}
-    </span>
-  `;
-};
-
-export { ListBoxItem, ListBoxItemProps };