@digi-frontend/dgate-api-documentation 1.0.39 → 1.0.50

package/src/assets/icons/UpArrow.svg

@@ -1,3 +1,3 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M15.6713 14.9814C15.4733 14.9771 15.2841 14.8986 15.1412 14.7614L12.2013 11.7614L9.26135 14.7614C9.11917 14.8939 8.93111 14.966 8.73681 14.9626C8.54251 14.9592 8.35713 14.8805 8.21972 14.743C8.08231 14.6056 8.00355 14.4203 8.00012 14.226C7.99669 14.0317 8.06881 13.8436 8.20129 13.7014L11.6713 10.2114C11.8143 10.0757 12.0041 10 12.2013 10C12.3985 10 12.5882 10.0757 12.7313 10.2114L16.2013 13.7014C16.3417 13.842 16.4206 14.0326 16.4206 14.2314C16.4206 14.4301 16.3417 14.6208 16.2013 14.7614C16.0584 14.8986 15.8693 14.9771 15.6713 14.9814V14.9814Z" fill="#12131A"/>
-</svg>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.6713 14.9814C15.4733 14.9771 15.2841 14.8986 15.1412 14.7614L12.2013 11.7614L9.26135 14.7614C9.11917 14.8939 8.93111 14.966 8.73681 14.9626C8.54251 14.9592 8.35713 14.8805 8.21972 14.743C8.08231 14.6056 8.00355 14.4203 8.00012 14.226C7.99669 14.0317 8.06881 13.8436 8.20129 13.7014L11.6713 10.2114C11.8143 10.0757 12.0041 10 12.2013 10C12.3985 10 12.5882 10.0757 12.7313 10.2114L16.2013 13.7014C16.3417 13.842 16.4206 14.0326 16.4206 14.2314C16.4206 14.4301 16.3417 14.6208 16.2013 14.7614C16.0584 14.8986 15.8693 14.9771 15.6713 14.9814V14.9814Z" fill="#12131A"/>
+</svg>

package/src/assets/icons/arrowDownGray.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.2787 5.96484L8.93208 10.3115C8.41875 10.8248 7.57875 10.8248 7.06542 10.3115L2.71875 5.96484" stroke="#BBBEC5" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/icons/arrowRightGray.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.94141 13.2787L10.2881 8.93208C10.8014 8.41875 10.8014 7.57875 10.2881 7.06542L5.94141 2.71875" stroke="#BBBEC5" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/icons/close-circle.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 22C17.5 22 22 17.5 22 12C22 6.5 17.5 2 12 2C6.5 2 2 6.5 2 12C2 17.5 6.5 22 12 22Z" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9.17188 14.8319L14.8319 9.17188" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14.8319 14.8319L9.17188 9.17188" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/icons/copy.svg

@@ -0,0 +1,4 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 6.45V8.55C8 10.3 7.3 11 5.55 11H3.45C1.7 11 1 10.3 1 8.55V6.45C1 4.7 1.7 4 3.45 4H5.55C7.3 4 8 4.7 8 6.45Z" stroke="#6B7280" stroke-width="0.6" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M11 3.45V5.55C11 7.3 10.3 8 8.55 8H8V6.45C8 4.7 7.3 4 5.55 4H4V3.45C4 1.7 4.7 1 6.45 1H8.55C10.3 1 11 1.7 11 3.45Z" stroke="#6B7280" stroke-width="0.6" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/icons/deleteOutlinedIcon.svg

@@ -1,8 +1,8 @@
-<svg width="67" height="67" viewBox="0 0 67 67" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M33.5 66C51.4493 66 66 51.4493 66 33.5C66 15.5507 51.4493 1 33.5 1C15.5507 1 1 15.5507 1 33.5C1 51.4493 15.5507 66 33.5 66Z" stroke="#DA3F3F" stroke-width="1.5"/>
-<path d="M43 27.98C39.67 27.65 36.32 27.48 32.98 27.48C31 27.48 29.02 27.58 27.04 27.78L25 27.98" stroke="#DA3F3F" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M30.5 26.97L30.72 25.66C30.88 24.71 31 24 32.69 24H35.31C37 24 37.13 24.75 37.28 25.67L37.5 26.97" stroke="#DA3F3F" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M40.85 31.1401L40.2 41.2101C40.09 42.7801 40 44.0001 37.21 44.0001H30.79C28 44.0001 27.91 42.7801 27.8 41.2101L27.15 31.1401" stroke="#DA3F3F" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M32.33 38.5H35.66" stroke="#DA3F3F" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M31.5 34.5H36.5" stroke="#DA3F3F" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
+<svg width="67" height="67" viewBox="0 0 67 67" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M33.5 66C51.4493 66 66 51.4493 66 33.5C66 15.5507 51.4493 1 33.5 1C15.5507 1 1 15.5507 1 33.5C1 51.4493 15.5507 66 33.5 66Z" stroke="#DA3F3F" stroke-width="1.5"/>
+<path d="M43 27.98C39.67 27.65 36.32 27.48 32.98 27.48C31 27.48 29.02 27.58 27.04 27.78L25 27.98" stroke="#DA3F3F" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M30.5 26.97L30.72 25.66C30.88 24.71 31 24 32.69 24H35.31C37 24 37.13 24.75 37.28 25.67L37.5 26.97" stroke="#DA3F3F" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M40.85 31.1401L40.2 41.2101C40.09 42.7801 40 44.0001 37.21 44.0001H30.79C28 44.0001 27.91 42.7801 27.8 41.2101L27.15 31.1401" stroke="#DA3F3F" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M32.33 38.5H35.66" stroke="#DA3F3F" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M31.5 34.5H36.5" stroke="#DA3F3F" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/icons/document.svg

@@ -0,0 +1,6 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14 4.66536V11.332C14 13.332 13 14.6654 10.6667 14.6654H5.33333C3 14.6654 2 13.332 2 11.332V4.66536C2 2.66536 3 1.33203 5.33333 1.33203H10.6667C13 1.33203 14 2.66536 14 4.66536Z" stroke="#898E99" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9.66797 3V4.33333C9.66797 5.06667 10.268 5.66667 11.0013 5.66667H12.3346" stroke="#898E99" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5.33203 8.66797H7.9987" stroke="#898E99" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5.33203 11.332H10.6654" stroke="#898E99" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/icons/eye.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.3866 7.99995C10.3866 9.31995 9.31995 10.3866 7.99995 10.3866C6.67995 10.3866 5.61328 9.31995 5.61328 7.99995C5.61328 6.67995 6.67995 5.61328 7.99995 5.61328C9.31995 5.61328 10.3866 6.67995 10.3866 7.99995Z" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7.9999 13.5138C10.3532 13.5138 12.5466 12.1271 14.0732 9.72714C14.6732 8.78714 14.6732 7.20714 14.0732 6.26714C12.5466 3.86714 10.3532 2.48047 7.9999 2.48047C5.64656 2.48047 3.45323 3.86714 1.92656 6.26714C1.32656 7.20714 1.32656 8.78714 1.92656 9.72714C3.45323 12.1271 5.64656 13.5138 7.9999 13.5138Z" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/icons/index.ts

@@ -1,8 +1,24 @@
-export { default as UpArrowIcon } from './UpArrow.svg'
-export { default as DownArrowIcon } from './DownArrow.svg'
-export { default as CloseIcon } from './CloseIcon.svg'
-export { default as CheckMarkSquare } from './CheckMarkSquare.svg'
-export { default as DeleteIcon } from './DeleteIcon.svg'
-export { default as EditIcon } from './EditIcon.svg'
-export { default as AddRow } from './AddRow.svg'
-export { default as deleteOutlinedIcon } from './deleteOutlinedIcon.svg'
+export { default as UpArrowIcon } from './UpArrow.svg'
+export { default as DownArrowIcon } from './DownArrow.svg'
+export { default as CloseIcon } from './CloseIcon.svg'
+export { default as CheckMarkSquare } from './CheckMarkSquare.svg'
+export { default as DeleteIcon } from './DeleteIcon.svg'
+export { default as EditIcon } from './EditIcon.svg'
+export { default as AddRow } from './AddRow.svg'
+export { default as CopySticker } from './CopySticker.svg'
+export { default as arrowDownGray } from './arrowDownGray.svg'
+export { default as arrowRightGray } from './arrowRightGray.svg'
+export { default as document } from './document.svg'
+export { default as eye } from './eye.svg'
+export { default as DeleteOutlinedIcon } from './DeleteOutlinedIcon.svg'
+export { default as ApiIcon } from './ApiIcon.svg'
+export { default as FilterIcon } from './FilterIcon.svg'
+export { default as BookIcon } from './BookIcon.svg'
+export { default as Closecircle } from './close-circle.svg'
+export { default as InfoIcon } from './infoIcon.svg'
+export { default as SearchIcon } from './searchIcon.svg'
+export { default as Copy } from './copy.svg'
+export { default as PlusIcon } from './Plus.svg'
+export { default as PlusSquare } from './PlusSquare.svg'
+export { default as RequestOption } from './RequestOption.svg'
+export { default as ArrowBack } from './ArrowBack.svg'

package/src/assets/icons/infoIcon.svg

@@ -0,0 +1,5 @@
+<svg width="67" height="67" viewBox="0 0 67 67" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M33.5 66C51.4493 66 66 51.4493 66 33.5C66 15.5507 51.4493 1 33.5 1C15.5507 1 1 15.5507 1 33.5C1 51.4493 15.5507 66 33.5 66Z" stroke="#FAAD14" stroke-width="1.5"/>
+<line x1="33.5" y1="30" x2="33.5" y2="42" stroke="#FAAD14" stroke-width="2" stroke-linecap="round"/>
+<path d="M35 25.5C35 26.3284 34.3284 27 33.5 27C32.6716 27 32 26.3284 32 25.5C32 24.6716 32.6716 24 33.5 24C34.3284 24 35 24.6716 35 25.5Z" fill="#FAAD14"/>
+</svg>

package/src/assets/icons/searchIcon.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.66536 14.4987C3.8987 14.4987 0.832031 11.432 0.832031 7.66536C0.832031 3.8987 3.8987 0.832031 7.66536 0.832031C11.432 0.832031 14.4987 3.8987 14.4987 7.66536C14.4987 11.432 11.432 14.4987 7.66536 14.4987ZM7.66536 1.83203C4.44536 1.83203 1.83203 4.45203 1.83203 7.66536C1.83203 10.8787 4.44536 13.4987 7.66536 13.4987C10.8854 13.4987 13.4987 10.8787 13.4987 7.66536C13.4987 4.45203 10.8854 1.83203 7.66536 1.83203Z" fill="#8390A2"/>
+<path d="M14.6676 15.1676C14.5409 15.1676 14.4143 15.1209 14.3143 15.0209L12.9809 13.6876C12.7876 13.4943 12.7876 13.1743 12.9809 12.9809C13.1743 12.7876 13.4943 12.7876 13.6876 12.9809L15.0209 14.3143C15.2143 14.5076 15.2143 14.8276 15.0209 15.0209C14.9209 15.1209 14.7943 15.1676 14.6676 15.1676Z" fill="#8390A2"/>
+</svg>

package/src/components/Chips/Chips.tsx

@@ -1,87 +1,87 @@
-import React, { useEffect, useRef, useState } from 'react'
-import SVGLoader from '../../components/SVGLoader/SVGLoader'
-import { CloseIcon, DownArrowIcon, UpArrowIcon } from '../../assets/icons'
-import './style.scss'
-
-type ChipItemType = {
-  id: number | string
-  label: string
-  className?: string
-  disabled?: boolean
-  [key: string]: unknown
-}
-
-export type CustomChipsType = {
-  className?: string
-  items: ChipItemType[]
-  onDelete?: (items: ChipItemType[]) => void
-  onClick?: (item: ChipItemType) => void
-}
-
-const Chips = ({ className, items, onDelete, onClick }: CustomChipsType) => {
-  const showMoreAppearsAfterHeight = 58
-  const [showBtnVisible, setShowBtnVisible] = useState(false)
-  const [showBtnOpen, setShowBtnOpen] = useState(false) // Fixed typo
-  const dropdownList = useRef<HTMLDivElement | null>(null) // Specify the correct type for the ref
-
-  useEffect(() => {
-    if (dropdownList.current) {
-      const showMoreOrLess = setTimeout(() => {
-        const offsetHeight = dropdownList?.current?.offsetHeight as number // Correctly infer offsetHeight
-        setShowBtnVisible(offsetHeight > showMoreAppearsAfterHeight)
-      }, 0) // Pass 0 as a number, not an array
-
-      return () => clearTimeout(showMoreOrLess)
-    }
-  }, [items?.length, showMoreAppearsAfterHeight])
-
-  const showButtonHandler = (e: any) => {
-    e?.stopPropagation()
-    setShowBtnOpen(!showBtnOpen)
-  }
-
-  return (
-    <div className={`chips-container ${className ?? ''}`}>
-      {!!items?.length && (
-        <div className={`overflow-dropdown-div ${showBtnOpen && 'dropdown-max-height dropdown-overflow'}`}>
-          <div ref={dropdownList} className='dropdown-list'>
-            {items?.map((chip, index) => (
-              <div
-                key={chip.id}
-                className={`chip ${chip.disabled ? 'disabled' : ''}${!!onClick ? 'clickable' : ''}${chip?.className ?? ''}`}
-                onClick={() => !!onClick && chip.disabled === false && onClick(chip)}
-              >
-                <span className='chip-text'> {chip.label} </span>
-                {chip.disabled !== true && (
-                  <SVGLoader
-                    onClick={(e: any) => {
-                      e.stopPropagation()
-                      const filteredChips = items.filter((_, iIndex) => iIndex !== index)
-                      onDelete && onDelete(filteredChips)
-                    }}
-                    className='chip-close-icon'
-                    src={CloseIcon}
-                    width={'1.25rem'}
-                    height={'1.25rem'}
-                  />
-                )}
-              </div>
-            ))}
-          </div>
-        </div>
-      )}
-      {showBtnVisible ? (
-        <button className='show-btn' onClick={showButtonHandler} type='button'>
-          <div className='show-btn-text-container'>
-            <span className='show-btn-text'>{showBtnOpen ? 'Show Less' : 'Show More'}</span>
-          </div>
-          <div className='show-btn-icon-container'>
-            <SVGLoader className='show-btn-icon' src={showBtnOpen ? UpArrowIcon : DownArrowIcon} width={'1.25rem'} height={'1.25rem'} />
-          </div>
-        </button>
-      ) : null}
-    </div>
-  )
-}
-
-export default Chips
+import React, { useEffect, useRef, useState } from 'react'
+import SVGLoader from '../../components/SVGLoader/SVGLoader'
+import { CloseIcon, DownArrowIcon, UpArrowIcon } from '../../assets/icons'
+import './style.scss'
+
+type ChipItemType = {
+  id: number | string
+  label: string
+  className?: string
+  disabled?: boolean
+  [key: string]: unknown
+}
+
+export type CustomChipsType = {
+  className?: string
+  items: ChipItemType[]
+  onDelete?: (items: ChipItemType[]) => void
+  onClick?: (item: ChipItemType) => void
+}
+
+const Chips = ({ className, items, onDelete, onClick }: CustomChipsType) => {
+  const showMoreAppearsAfterHeight = 58
+  const [showBtnVisible, setShowBtnVisible] = useState(false)
+  const [showBtnOpen, setShowBtnOpen] = useState(false) // Fixed typo
+  const dropdownList = useRef<HTMLDivElement | null>(null) // Specify the correct type for the ref
+
+  useEffect(() => {
+    if (dropdownList.current) {
+      const showMoreOrLess = setTimeout(() => {
+        const offsetHeight = dropdownList?.current?.offsetHeight as number // Correctly infer offsetHeight
+        setShowBtnVisible(offsetHeight > showMoreAppearsAfterHeight)
+      }, 0) // Pass 0 as a number, not an array
+
+      return () => clearTimeout(showMoreOrLess)
+    }
+  }, [items?.length, showMoreAppearsAfterHeight])
+
+  const showButtonHandler = (e: any) => {
+    e?.stopPropagation()
+    setShowBtnOpen(!showBtnOpen)
+  }
+
+  return (
+    <div className={`chips-container ${className ?? ''}`}>
+      {!!items?.length && (
+        <div className={`overflow-dropdown-div ${showBtnOpen && 'dropdown-max-height dropdown-overflow'}`}>
+          <div ref={dropdownList} className='dropdown-list'>
+            {items?.map((chip, index) => (
+              <div
+                key={chip.id}
+                className={`chip ${chip.disabled ? 'disabled' : ''}${!!onClick ? 'clickable' : ''}${chip?.className ?? ''}`}
+                onClick={() => !!onClick && chip.disabled === false && onClick(chip)}
+              >
+                <span className='chip-text'> {chip.label} </span>
+                {chip.disabled !== true && (
+                  <SVGLoader
+                    onClick={(e: any) => {
+                      e.stopPropagation()
+                      const filteredChips = items.filter((_, iIndex) => iIndex !== index)
+                      onDelete && onDelete(filteredChips)
+                    }}
+                    className='chip-close-icon'
+                    src={CloseIcon}
+                    width={'1.25rem'}
+                    height={'1.25rem'}
+                  />
+                )}
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+      {showBtnVisible ? (
+        <button className='show-btn' onClick={showButtonHandler} type='button'>
+          <div className='show-btn-text-container'>
+            <span className='show-btn-text'>{showBtnOpen ? 'Show Less' : 'Show More'}</span>
+          </div>
+          <div className='show-btn-icon-container'>
+            <SVGLoader className='show-btn-icon' src={showBtnOpen ? UpArrowIcon : DownArrowIcon} width={'1.25rem'} height={'1.25rem'} />
+          </div>
+        </button>
+      ) : null}
+    </div>
+  )
+}
+
+export default Chips

package/src/components/Chips/style.scss

@@ -1,147 +1,147 @@
-.chips-container {
-  width: 100%;
-
-  .overflow-dropdown-div {
-    max-height: 4.25rem;
-    overflow: hidden;
-
-    .dropdown-list {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 0.625rem;
-      margin-top: 0.625rem;
-
-      .chip {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        background: #ebecf2;
-        border-radius: 3.125rem;
-        width: max-content;
-        height: 1.5rem;
-        overflow: hidden;
-        transition: all 0.4s ease-in-out;
-        padding-right: 0.9375rem;
-        cursor: default;
-
-        &:not(.disabled) {
-          &:hover {
-            background: #d8dae5;
-          }
-
-          &:active {
-            background: #696c80;
-            color: #fff;
-
-            .chip-close-icon {
-              path {
-                stroke: #fff;
-              }
-            }
-          }
-
-          .chip-close-icon {
-            cursor: pointer;
-          }
-        }
-
-        &.clickable {
-          cursor: pointer;
-        }
-
-        .chip-text {
-          display: flex;
-          align-items: center;
-          font-size: 0.95rem;
-          height: 100%;
-          padding-left: 0.9375rem;
-          margin-top: -0.125rem;
-        }
-
-        .chip-close-icon {
-          display: block;
-          height: 0.75rem;
-          width: 0.75rem;
-          margin-block: auto;
-          margin-left: 0.625rem;
-
-          path {
-            stroke: #12131a;
-          }
-        }
-      }
-    }
-  }
-
-  .dropdown-max-height {
-    max-height: -moz-fit-content;
-    max-height: fit-content !important;
-  }
-
-  .dropdown-overflow {
-    overflow: visible !important;
-  }
-
-  .show-btn {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
-    justify-content: center;
-    align-items: center;
-    width: auto;
-    height: 1.25rem;
-    cursor: pointer;
-    border: none;
-    margin-top: 0.625rem;
-    color: #9a9eb2;
-    background-color: transparent;
-
-    .show-btn-text-container {
-      flex: 1 1 auto;
-
-      .show-btn-text {
-        font-size: 0.75rem;
-        text-decoration-line: underline;
-      }
-    }
-
-    .show-btn-icon-container {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      height: 1.25rem;
-      width: 1.25rem;
-      margin-top: 0.1875rem;
-      margin-left: 0.125rem;
-
-      .show-btn-icon {
-        height: 1.25rem;
-        width: 1.25rem;
-
-        path {
-          fill: #9a9eb2;
-        }
-      }
-    }
-
-    &:hover {
-      color: #7c9bea;
-
-      .show-btn-icon-container .show-btn-icon {
-        path {
-          fill: #7c9bea;
-        }
-      }
-    }
-
-    &:active {
-      color: #2c4fa4;
-
-      .show-btn-icon-container .show-btn-icon {
-        path {
-          fill: #2c4fa4;
-        }
-      }
-    }
-  }
-}
+.chips-container {
+  width: 100%;
+
+  .overflow-dropdown-div {
+    max-height: 4.25rem;
+    overflow: hidden;
+
+    .dropdown-list {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 0.625rem;
+      margin-top: 0.625rem;
+
+      .chip {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        background: #ebecf2;
+        border-radius: 3.125rem;
+        width: max-content;
+        height: 1.5rem;
+        overflow: hidden;
+        transition: all 0.4s ease-in-out;
+        padding-right: 0.9375rem;
+        cursor: default;
+
+        &:not(.disabled) {
+          &:hover {
+            background: #d8dae5;
+          }
+
+          &:active {
+            background: #696c80;
+            color: #fff;
+
+            .chip-close-icon {
+              path {
+                stroke: #fff;
+              }
+            }
+          }
+
+          .chip-close-icon {
+            cursor: pointer;
+          }
+        }
+
+        &.clickable {
+          cursor: pointer;
+        }
+
+        .chip-text {
+          display: flex;
+          align-items: center;
+          font-size: 0.95rem;
+          height: 100%;
+          padding-left: 0.9375rem;
+          margin-top: -0.125rem;
+        }
+
+        .chip-close-icon {
+          display: block;
+          height: 0.75rem;
+          width: 0.75rem;
+          margin-block: auto;
+          margin-left: 0.625rem;
+
+          path {
+            stroke: #12131a;
+          }
+        }
+      }
+    }
+  }
+
+  .dropdown-max-height {
+    max-height: -moz-fit-content;
+    max-height: fit-content !important;
+  }
+
+  .dropdown-overflow {
+    overflow: visible !important;
+  }
+
+  .show-btn {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: center;
+    align-items: center;
+    width: auto;
+    height: 1.25rem;
+    cursor: pointer;
+    border: none;
+    margin-top: 0.625rem;
+    color: #9a9eb2;
+    background-color: transparent;
+
+    .show-btn-text-container {
+      flex: 1 1 auto;
+
+      .show-btn-text {
+        font-size: 0.75rem;
+        text-decoration-line: underline;
+      }
+    }
+
+    .show-btn-icon-container {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 1.25rem;
+      width: 1.25rem;
+      margin-top: 0.1875rem;
+      margin-left: 0.125rem;
+
+      .show-btn-icon {
+        height: 1.25rem;
+        width: 1.25rem;
+
+        path {
+          fill: #9a9eb2;
+        }
+      }
+    }
+
+    &:hover {
+      color: #7c9bea;
+
+      .show-btn-icon-container .show-btn-icon {
+        path {
+          fill: #7c9bea;
+        }
+      }
+    }
+
+    &:active {
+      color: #2c4fa4;
+
+      .show-btn-icon-container .show-btn-icon {
+        path {
+          fill: #2c4fa4;
+        }
+      }
+    }
+  }
+}