quickblox-react-ui-kit 0.1.0

package/src/Presentation/components/UI/Elements/SwitchButton/SwitchButton.scss

@@ -0,0 +1,61 @@
+$background-color-off: var(--disabled-elements);
+$background-color-on: var(--main-elements);
+/* The switch - the box around the slider */
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 40px;
+  height: 20px;
+}
+
+/* Hide default HTML checkbox */
+.switch input {display:none;}
+
+/* The slider */
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 12px;
+  width: 12px;
+  left: 4px;
+  bottom: 4px;
+  right: 4px;
+  background-color: white;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+input:checked + .slider {
+  background-color: #2196F3;
+}
+
+input:focus + .slider {
+  box-shadow: 0 0 1px #2196F3;
+}
+
+input:checked + .slider:before {
+  -webkit-transform: translateX(12px);
+  -ms-transform: translateX(12px);
+  transform: translateX(12px);
+}
+
+/* Rounded sliders */
+.slider.round {
+  border-radius: 12px;
+}
+
+.slider.round:before {
+  border-radius: 50%;
+}

package/src/Presentation/components/UI/Elements/SwitchButton/SwitchButton.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import './SwitchButton.scss';
+import { FunctionTypeVoidToVoid } from '../../../../Views/Base/BaseViewModel';
+
+type SwitchButtonProps = {
+  disabled?: boolean;
+  styleBox?: React.CSSProperties;
+  clickHandler?: FunctionTypeVoidToVoid;
+  touchHandler?: FunctionTypeVoidToVoid;
+};
+
+// eslint-disable-next-line react/function-component-definition
+const SwitchButton: React.FC<SwitchButtonProps> = ({
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  disabled = false,
+  styleBox,
+  clickHandler,
+  touchHandler,
+}) => {
+  return (
+    <div
+      style={styleBox}
+      onClick={() => {
+        console.log('click on SwitchButton');
+        if (typeof clickHandler === 'function') {
+          clickHandler();
+        }
+      }}
+      onTouchStart={() => {
+        if (touchHandler) touchHandler();
+      }}
+    >
+      <label className="switch">
+        <input type="checkbox" />
+        <span className="slider round" />
+      </label>
+    </div>
+  );
+};
+
+/*
+() => {
+              console.log('clicked theme');
+              document.documentElement.setAttribute('data-theme', 'dark');
+              changeThemeActions();
+            }
+ */
+export default SwitchButton;

package/src/Presentation/components/UI/Placeholders/ErrorComponent/ErrorComponent.scss

@@ -0,0 +1,74 @@
+$error-container-background-color: var(--main-background);
+$error-container-error-message-text-color: var(--caption);
+$error-container-error-action-color: var(--main-elements);
+$error-container-divider: var(--divider);
+
+.error-container-wrapper {
+  // padding-top: 9px;
+  // padding-bottom: 12px;
+  border: 1px solid $error-container-divider;
+}
+
+.error-container {
+  display: flex;
+  flex-flow: column nowrap;
+  min-width: 360px;
+  min-height: 156px;
+  margin: 0 auto;
+  justify-content: center;
+  align-items: center;
+  // border: 1px solid green;
+  gap: 16px;
+  background-color: $error-container-background-color;
+  &__error-icon {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 0 auto;
+
+    min-width: 60px;
+    min-height: 60px;
+
+
+    color: $error-container-error-message-text-color;
+    svg path {fill: $error-container-error-message-text-color}
+  }
+  &__error-message {
+    min-height: 24px;
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 24px;
+    text-align: center;
+    letter-spacing: 0.15px;
+    color: $error-container-error-message-text-color;
+  }
+  &--error-action {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: center;
+    align-items: center;
+    margin: 0 auto;
+    gap: 8px;
+    min-height: 40px;
+    min-width: 92px;
+    cursor: pointer;
+
+    &__refresh-icon {
+      min-width: 24px;
+      min-height: 24px;
+      svg path {fill: $error-container-error-action-color}
+    }
+    &__refresh-text {
+      color: $error-container-error-action-color;
+      font-family: 'Roboto';
+      font-style: normal;
+      font-weight: 700;
+      font-size: 14px;
+      line-height: 16px;
+      letter-spacing: 0.4px;
+     }
+  }
+}

package/src/Presentation/components/UI/Placeholders/ErrorComponent/ErrorComponent.tsx

@@ -0,0 +1,72 @@
+import './ErrorComponent.scss';
+import React from 'react';
+import { IconTheme } from '../../svgs/Icons/IconsCommonTypes';
+import Error from '../../svgs/Icons/Status/Error';
+import { FunctionTypeVoidToVoid } from '../../../../Views/Base/BaseViewModel';
+import ColumnContainer from '../../../containers/ColumnContainer/ColumnContainer';
+
+type ErrorComponentProps = {
+  title?: string;
+  ClickActionHandler?: FunctionTypeVoidToVoid;
+  TouchActionHandler?: FunctionTypeVoidToVoid;
+  theme?: IconTheme;
+};
+// eslint-disable-next-line react/function-component-definition
+const ErrorComponent: React.FC<ErrorComponentProps> = ({
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  title,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  ClickActionHandler,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  TouchActionHandler,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  theme = undefined,
+}: ErrorComponentProps) => {
+  return (
+    <div className="error-container-wrapper">
+      <ColumnContainer>
+        <div
+          style={{ width: '52px', height: '52px' }}
+          className="error-container__error-icon"
+        >
+          {theme ? <Error color={theme?.color} /> : <Error />}
+        </div>
+        <div className="error-container__error-message">{title}</div>
+        <div
+          className="error-container--error-action"
+          onClick={ClickActionHandler}
+          onTouchStart={TouchActionHandler}
+        >
+          {/* <div className="error-container--error-action__refresh-icon"> */}
+          {/*  <Refresh height="24" width="24" color={theme?.color} applyZoom /> */}
+          {/* </div> */}
+          {/* <div className="error-container--error-action__refresh-text"> */}
+          {/*  Retry */}
+          {/* </div> */}
+        </div>
+      </ColumnContainer>
+    </div>
+    // <div className="error-container-wrapper">
+    //   <div className="error-container">
+    //     <div className="error-container__error-icon">
+    //       {theme ? <Error color={theme?.color} /> : <Error />}
+    //     </div>
+    //     <div className="error-container__error-message">{title}</div>
+    //     <div className="error-container--error-action">
+    //       <div
+    //         className="error-container--error-action__refresh-icon"
+    //         onClick={ClickActionHandler}
+    //         onTouchStart={TouchActionHandler}
+    //       >
+    //         <Refresh />
+    //       </div>
+    //       <div className="error-container--error-action__refresh-text">
+    //         Retry
+    //       </div>
+    //     </div>
+    //   </div>
+    // </div>
+  );
+};
+
+export default ErrorComponent;

package/src/Presentation/components/UI/Placeholders/LoaderComponent/LoaderComponent.scss

@@ -0,0 +1,21 @@
+$default-background-color: var(--main-elements);
+$default-width-icon: 44;
+$default-height-icon: 44;
+
+// #Loader{fill: $default-background-color};
+
+.loader {
+  animation: spin 1s linear infinite;
+  svg path {fill: $default-background-color};
+  min-width: $default-width-icon;
+  min-height: $default-height-icon;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}

package/src/Presentation/components/UI/Placeholders/LoaderComponent/LoaderComponent.tsx

@@ -0,0 +1,41 @@
+import './LoaderComponent.scss';
+import Loader from '../../svgs/Icons/Status/Loader';
+import { IconTheme } from '../../svgs/Icons/IconsCommonTypes';
+
+export default function LoaderComponent(
+  theme: IconTheme | undefined = undefined,
+) {
+  const loaderStyles = theme
+    ? {
+        animation: 'spin 1s linear infinite',
+        svg: {
+          path: {
+            fill: theme?.color ? theme?.color : '',
+          },
+        },
+        minWidth: theme?.width,
+        minHeight: theme?.height,
+        Loader: {
+          fill: theme?.color ? theme?.color : '',
+        },
+        fill: theme?.color ? theme?.color : '',
+      }
+    : {};
+  const loaderClasses = [
+    theme && Object.keys(theme).length > 0 ? '' : 'loader',
+  ].join(' ');
+
+  return (
+    <div style={loaderStyles} className={loaderClasses}>
+      {theme ? (
+        <Loader
+          color={theme?.color}
+          width={theme?.width}
+          height={theme?.height}
+        />
+      ) : (
+        <Loader />
+      )}
+    </div>
+  );
+}

package/src/Presentation/components/UI/svgs/ActiveSvg/ActiveSvg.scss

@@ -0,0 +1,3 @@
+.active-svg-container{
+  cursor: pointer;
+}

package/src/Presentation/components/UI/svgs/ActiveSvg/ActiveSvg.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { FunctionTypeVoidToVoid } from '../../../../Views/Base/BaseViewModel';
+import './ActiveSvg.scss';
+
+type ActiveSvgContainerProps = {
+  content: React.ReactNode;
+  touchAction?: FunctionTypeVoidToVoid;
+  clickAction?: FunctionTypeVoidToVoid;
+};
+// eslint-disable-next-line react/function-component-definition
+const ActiveSvg: React.FC<ActiveSvgContainerProps> = ({
+  content,
+  touchAction,
+  clickAction,
+}: ActiveSvgContainerProps) => {
+  return (
+    <div
+      className="active-svg-container"
+      onTouchStart={() => {
+        // eslint-disable-next-line no-unused-expressions
+        touchAction && typeof touchAction === 'function'
+          ? touchAction()
+          : () => {
+              console.log('touched');
+            };
+      }}
+      onClick={() => {
+        // eslint-disable-next-line no-unused-expressions
+        clickAction && typeof clickAction === 'function'
+          ? clickAction()
+          : () => {
+              console.log('clicked');
+            };
+      }}
+    >
+      {content}
+    </div>
+  );
+};
+
+export default ActiveSvg;

package/src/Presentation/components/UI/svgs/Icons/Actions/Add/Add.svg

@@ -0,0 +1,3 @@
+<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M34.8333 5.5H9.16667C7.13167 5.5 5.5 7.15 5.5 9.16667V34.8333C5.5 36.85 7.13167 38.5 9.16667 38.5H34.8333C36.85 38.5 38.5 36.85 38.5 34.8333V9.16667C38.5 7.15 36.85 5.5 34.8333 5.5ZM34.8333 34.8333H9.16667V9.16667H34.8333V34.8333ZM20.1667 31.1667H23.8333V23.8333H31.1667V20.1667H23.8333V12.8333H20.1667V20.1667H12.8333V23.8333H20.1667V31.1667Z" fill="#0B121B"/>
+</svg>

package/src/Presentation/components/UI/svgs/Icons/Actions/Add/index.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { IconTheme } from '../../IconsCommonTypes';
+
+function Add(theme: IconTheme | undefined = undefined) {
+  return (
+    <svg
+      width={theme && theme.width ? theme.width : '44'}
+      height={theme && theme.height ? theme.height : '44'}
+      viewBox="0 0 44 44"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M34.8333 5.5H9.16667C7.13167 5.5 5.5 7.15 5.5 9.16667V34.8333C5.5 36.85 7.13167 38.5 9.16667 38.5H34.8333C36.85 38.5 38.5 36.85 38.5 34.8333V9.16667C38.5 7.15 36.85 5.5 34.8333 5.5ZM34.8333 34.8333H9.16667V9.16667H34.8333V34.8333ZM20.1667 31.1667H23.8333V23.8333H31.1667V20.1667H23.8333V12.8333H20.1667V20.1667H12.8333V23.8333H20.1667V31.1667Z"
+        id="Add"
+        fill={theme && theme.color ? theme.color : 'var(--color-icon)'}
+      />
+    </svg>
+  );
+}
+
+export default Add;

package/src/Presentation/components/UI/svgs/Icons/Actions/AddContact/Add contact.svg

@@ -0,0 +1,3 @@
+<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M27.4999 22C31.5516 22 34.8333 18.7183 34.8333 14.6666C34.8333 10.615 31.5516 7.33331 27.4999 7.33331C23.4483 7.33331 20.1666 10.615 20.1666 14.6666C20.1666 18.7183 23.4483 22 27.4999 22ZM27.4999 11C29.5166 11 31.1666 12.65 31.1666 14.6666C31.1666 16.6833 29.5166 18.3333 27.4999 18.3333C25.4833 18.3333 23.8333 16.6833 23.8333 14.6666C23.8333 12.65 25.4833 11 27.4999 11ZM27.4999 25.6666C22.6049 25.6666 12.8333 28.1233 12.8333 33V36.6666H42.1666V33C42.1666 28.1233 32.3949 25.6666 27.4999 25.6666ZM16.4999 33C16.9033 31.68 22.5683 29.3333 27.4999 29.3333C32.4499 29.3333 38.1333 31.6983 38.4999 33H16.4999ZM10.9999 27.5V22H16.4999V18.3333H10.9999V12.8333H7.33325V18.3333H1.83325V22H7.33325V27.5H10.9999Z" fill="#0B121B"/>
+</svg>

package/src/Presentation/components/UI/svgs/Icons/Actions/AddContact/index.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { IconTheme } from '../../IconsCommonTypes';
+
+function AddContact(theme: IconTheme | undefined = undefined) {
+  return (
+    <svg
+      width={theme && theme.width ? theme.width : '44'}
+      height={theme && theme.height ? theme.height : '44'}
+      viewBox="0 0 44 44"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M27.4999 22C31.5516 22 34.8333 18.7183 34.8333 14.6666C34.8333 10.615 31.5516 7.33331 27.4999 7.33331C23.4483 7.33331 20.1666 10.615 20.1666 14.6666C20.1666 18.7183 23.4483 22 27.4999 22ZM27.4999 11C29.5166 11 31.1666 12.65 31.1666 14.6666C31.1666 16.6833 29.5166 18.3333 27.4999 18.3333C25.4833 18.3333 23.8333 16.6833 23.8333 14.6666C23.8333 12.65 25.4833 11 27.4999 11ZM27.4999 25.6666C22.6049 25.6666 12.8333 28.1233 12.8333 33V36.6666H42.1666V33C42.1666 28.1233 32.3949 25.6666 27.4999 25.6666ZM16.4999 33C16.9033 31.68 22.5683 29.3333 27.4999 29.3333C32.4499 29.3333 38.1333 31.6983 38.4999 33H16.4999ZM10.9999 27.5V22H16.4999V18.3333H10.9999V12.8333H7.33325V18.3333H1.83325V22H7.33325V27.5H10.9999Z"
+        id="AddContact"
+        fill={theme && theme.color ? theme.color : 'var(--color-icon)'}
+      />
+    </svg>
+  );
+}
+
+export default AddContact;

package/src/Presentation/components/UI/svgs/Icons/Actions/Archive/Archive.svg

@@ -0,0 +1,3 @@
+<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M37.6567 9.58833L35.1083 6.50833C34.6133 5.885 33.8617 5.5 33 5.5H11C10.1383 5.5 9.38667 5.885 8.87333 6.50833L6.34333 9.58833C5.81167 10.2117 5.5 11.0367 5.5 11.9167V34.8333C5.5 36.85 7.15 38.5 9.16667 38.5H34.8333C36.85 38.5 38.5 36.85 38.5 34.8333V11.9167C38.5 11.0367 38.1883 10.2117 37.6567 9.58833ZM11.44 9.16667H32.56L34.045 10.945H9.97333L11.44 9.16667ZM9.16667 34.8333V14.6667H34.8333V34.8333H9.16667ZM24.6583 18.3333H19.3417V23.8333H14.6667L22 31.1667L29.3333 23.8333H24.6583V18.3333Z" fill="#0B121B"/>
+</svg>

package/src/Presentation/components/UI/svgs/Icons/Actions/Archive/index.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { IconTheme } from '../../IconsCommonTypes';
+
+function Archive(theme: IconTheme | undefined = undefined) {
+  return (
+    <svg
+      width={theme && theme.width ? theme.width : '44'}
+      height={theme && theme.height ? theme.height : '44'}
+      viewBox="0 0 44 44"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M37.6567 9.58833L35.1083 6.50833C34.6133 5.885 33.8617 5.5 33 5.5H11C10.1383 5.5 9.38667 5.885 8.87333 6.50833L6.34333 9.58833C5.81167 10.2117 5.5 11.0367 5.5 11.9167V34.8333C5.5 36.85 7.15 38.5 9.16667 38.5H34.8333C36.85 38.5 38.5 36.85 38.5 34.8333V11.9167C38.5 11.0367 38.1883 10.2117 37.6567 9.58833ZM11.44 9.16667H32.56L34.045 10.945H9.97333L11.44 9.16667ZM9.16667 34.8333V14.6667H34.8333V34.8333H9.16667ZM24.6583 18.3333H19.3417V23.8333H14.6667L22 31.1667L29.3333 23.8333H24.6583V18.3333Z"
+        id="Archive"
+        fill={theme && theme.color ? theme.color : 'var(--color-icon)'}
+      />
+    </svg>
+  );
+}
+
+export default Archive;

package/src/Presentation/components/UI/svgs/Icons/Actions/Copy/Copy.svg

@@ -0,0 +1,3 @@
+<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M30.2502 1.83337H8.25016C6.2335 1.83337 4.5835 3.48337 4.5835 5.50004V31.1667H8.25016V5.50004H30.2502V1.83337ZM35.7502 9.16671H15.5835C13.5668 9.16671 11.9168 10.8167 11.9168 12.8334V38.5C11.9168 40.5167 13.5668 42.1667 15.5835 42.1667H35.7502C37.7668 42.1667 39.4168 40.5167 39.4168 38.5V12.8334C39.4168 10.8167 37.7668 9.16671 35.7502 9.16671ZM35.7502 38.5H15.5835V12.8334H35.7502V38.5Z" fill="#0B121B"/>
+</svg>

package/src/Presentation/components/UI/svgs/Icons/Actions/Copy/index.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { IconTheme } from '../../IconsCommonTypes';
+
+function Copy(theme: IconTheme | undefined = undefined) {
+  return (
+    <svg
+      width={theme && theme.width ? theme.width : '44'}
+      height={theme && theme.height ? theme.height : '44'}
+      viewBox="0 0 44 44"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M30.2502 1.83337H8.25016C6.2335 1.83337 4.5835 3.48337 4.5835 5.50004V31.1667H8.25016V5.50004H30.2502V1.83337ZM35.7502 9.16671H15.5835C13.5668 9.16671 11.9168 10.8167 11.9168 12.8334V38.5C11.9168 40.5167 13.5668 42.1667 15.5835 42.1667H35.7502C37.7668 42.1667 39.4168 40.5167 39.4168 38.5V12.8334C39.4168 10.8167 37.7668 9.16671 35.7502 9.16671ZM35.7502 38.5H15.5835V12.8334H35.7502V38.5Z"
+        id="Copy"
+        fill={theme && theme.color ? theme.color : 'var(--color-icon)'}
+      />
+    </svg>
+  );
+}
+
+export default Copy;

package/src/Presentation/components/UI/svgs/Icons/Actions/Delete/Delete.svg

@@ -0,0 +1,3 @@
+<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.0001 34.8333C11.0001 36.85 12.6501 38.5 14.6667 38.5H29.3334C31.3501 38.5 33.0001 36.85 33.0001 34.8333V12.8333H11.0001V34.8333ZM14.6667 16.5H29.3334V34.8333H14.6667V16.5ZM28.4167 7.33333L26.5834 5.5H17.4167L15.5834 7.33333H9.16675V11H34.8334V7.33333H28.4167Z" fill="#0B121B"/>
+</svg>

package/src/Presentation/components/UI/svgs/Icons/Actions/Delete/index.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { IconTheme } from '../../IconsCommonTypes';
+
+function Delete(theme: IconTheme | undefined = undefined) {
+  return (
+    <svg
+      width={theme && theme.width ? theme.width : '44'}
+      height={theme && theme.height ? theme.height : '44'}
+      viewBox="0 0 44 44"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M11.0001 34.8333C11.0001 36.85 12.6501 38.5 14.6667 38.5H29.3334C31.3501 38.5 33.0001 36.85 33.0001 34.8333V12.8333H11.0001V34.8333ZM14.6667 16.5H29.3334V34.8333H14.6667V16.5ZM28.4167 7.33333L26.5834 5.5H17.4167L15.5834 7.33333H9.16675V11H34.8334V7.33333H28.4167Z"
+        id="Delete"
+        fill={theme && theme.color ? theme.color : 'var(--color-icon)'}
+      />
+    </svg>
+  );
+}
+
+export default Delete;

package/src/Presentation/components/UI/svgs/Icons/Actions/Download/Download.svg

@@ -0,0 +1,3 @@
+<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M34.8333 22V34.8333H9.16667V22H5.5V34.8333C5.5 36.85 7.15 38.5 9.16667 38.5H34.8333C36.85 38.5 38.5 36.85 38.5 34.8333V22H34.8333ZM23.8333 23.2283L28.5817 18.4983L31.1667 21.0833L22 30.25L12.8333 21.0833L15.4183 18.4983L20.1667 23.2283V5.5H23.8333V23.2283Z" fill="#0B121B"/>
+</svg>

package/src/Presentation/components/UI/svgs/Icons/Actions/Download/index.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { IconTheme } from '../../IconsCommonTypes';
+
+function Download(theme: IconTheme | undefined = undefined) {
+  return (
+    <svg
+      width={theme && theme.width ? theme.width : '44'}
+      height={theme && theme.height ? theme.height : '44'}
+      viewBox="0 0 44 44"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M34.8333 22V34.8333H9.16667V22H5.5V34.8333C5.5 36.85 7.15 38.5 9.16667 38.5H34.8333C36.85 38.5 38.5 36.85 38.5 34.8333V22H34.8333ZM23.8333 23.2283L28.5817 18.4983L31.1667 21.0833L22 30.25L12.8333 21.0833L15.4183 18.4983L20.1667 23.2283V5.5H23.8333V23.2283Z"
+        id="Download"
+        fill={theme && theme.color ? theme.color : 'var(--color-icon)'}
+      />
+    </svg>
+  );
+}
+
+export default Download;

package/src/Presentation/components/UI/svgs/Icons/Actions/Edit/Edit.svg

@@ -0,0 +1,3 @@
+<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.4978 31.6273V38.5023H12.3728L32.6495 18.2256L25.7745 11.3506L5.4978 31.6273ZM37.9661 12.9089C38.6811 12.1939 38.6811 11.0389 37.9661 10.3239L33.6761 6.03393C32.9611 5.31893 31.8061 5.31893 31.0911 6.03393L27.7361 9.38893L34.6111 16.2639L37.9661 12.9089Z" fill="#0B121B"/>
+</svg>

package/src/Presentation/components/UI/svgs/Icons/Actions/Edit/index.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { IconTheme } from '../../IconsCommonTypes';
+
+function Edit(theme: IconTheme | undefined = undefined) {
+  return (
+    <svg
+      width={theme && theme.width ? theme.width : '44'}
+      height={theme && theme.height ? theme.height : '44'}
+      viewBox="0 0 44 44"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M5.4978 31.6273V38.5023H12.3728L32.6495 18.2256L25.7745 11.3506L5.4978 31.6273ZM37.9661 12.9089C38.6811 12.1939 38.6811 11.0389 37.9661 10.3239L33.6761 6.03393C32.9611 5.31893 31.8061 5.31893 31.0911 6.03393L27.7361 9.38893L34.6111 16.2639L37.9661 12.9089Z"
+        id="Edit"
+        fill={theme && theme.color ? theme.color : 'var(--color-icon)'}
+      />
+    </svg>
+  );
+}
+
+export default Edit;

package/src/Presentation/components/UI/svgs/Icons/Actions/EditDots/EditDots.svg

@@ -0,0 +1,3 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M16 12C17.1 12 18 11.1 18 10C18 8.9 17.1 8 16 8C14.9 8 14 8.9 14 10C14 11.1 14.9 12 16 12ZM16 14C14.9 14 14 14.9 14 16C14 17.1 14.9 18 16 18C17.1 18 18 17.1 18 16C18 14.9 17.1 14 16 14ZM16 20C14.9 20 14 20.9 14 22C14 23.1 14.9 24 16 24C17.1 24 18 23.1 18 22C18 20.9 17.1 20 16 20Z" fill="#636D78"/>
+</svg>

package/src/Presentation/components/UI/svgs/Icons/Actions/EditDots/index.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { IconTheme } from '../../IconsCommonTypes';
+
+function EditDots(theme: IconTheme | undefined = undefined) {
+  return (
+    <svg
+      width={theme && theme.width ? theme.width : '32'}
+      height={theme && theme.height ? theme.height : '32'}
+      viewBox="0 0 32 32"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M16 12C17.1 12 18 11.1 18 10C18 8.9 17.1 8 16 8C14.9 8 14 8.9 14 10C14 11.1 14.9 12 16 12ZM16 14C14.9 14 14 14.9 14 16C14 17.1 14.9 18 16 18C17.1 18 18 17.1 18 16C18 14.9 17.1 14 16 14ZM16 20C14.9 20 14 20.9 14 22C14 23.1 14.9 24 16 24C17.1 24 18 23.1 18 22C18 20.9 17.1 20 16 20Z"
+        id="EditDots"
+        fill={theme && theme.color ? theme.color : 'var(--color-icon)'}
+      />
+    </svg>
+  );
+}
+
+export default EditDots;

package/src/Presentation/components/UI/svgs/Icons/Actions/Emoji/Emoji.svg

@@ -0,0 +1,3 @@
+<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21.9817 3.66663C11.8617 3.66663 3.66675 11.88 3.66675 22C3.66675 32.12 11.8617 40.3333 21.9817 40.3333C32.1201 40.3333 40.3334 32.12 40.3334 22C40.3334 11.88 32.1201 3.66663 21.9817 3.66663ZM22.0001 36.6666C13.8967 36.6666 7.33341 30.1033 7.33341 22C7.33341 13.8966 13.8967 7.33329 22.0001 7.33329C30.1034 7.33329 36.6667 13.8966 36.6667 22C36.6667 30.1033 30.1034 36.6666 22.0001 36.6666ZM28.4167 20.1666C29.9384 20.1666 31.1667 18.9383 31.1667 17.4166C31.1667 15.895 29.9384 14.6666 28.4167 14.6666C26.8951 14.6666 25.6667 15.895 25.6667 17.4166C25.6667 18.9383 26.8951 20.1666 28.4167 20.1666ZM15.5834 20.1666C17.1051 20.1666 18.3334 18.9383 18.3334 17.4166C18.3334 15.895 17.1051 14.6666 15.5834 14.6666C14.0617 14.6666 12.8334 15.895 12.8334 17.4166C12.8334 18.9383 14.0617 20.1666 15.5834 20.1666ZM22.0001 32.0833C26.2717 32.0833 29.9017 29.4066 31.3684 25.6666H12.6317C14.0984 29.4066 17.7284 32.0833 22.0001 32.0833Z" fill="#0B121B"/>
+</svg>

package/src/Presentation/components/UI/svgs/Icons/Actions/Emoji/index.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { IconTheme } from '../../IconsCommonTypes';
+
+function Emoji(theme: IconTheme | undefined = undefined) {
+  return (
+    <svg
+      width={theme && theme.width ? theme.width : '44'}
+      height={theme && theme.height ? theme.height : '44'}
+      viewBox="0 0 44 44"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M21.9817 3.66663C11.8617 3.66663 3.66675 11.88 3.66675 22C3.66675 32.12 11.8617 40.3333 21.9817 40.3333C32.1201 40.3333 40.3334 32.12 40.3334 22C40.3334 11.88 32.1201 3.66663 21.9817 3.66663ZM22.0001 36.6666C13.8967 36.6666 7.33341 30.1033 7.33341 22C7.33341 13.8966 13.8967 7.33329 22.0001 7.33329C30.1034 7.33329 36.6667 13.8966 36.6667 22C36.6667 30.1033 30.1034 36.6666 22.0001 36.6666ZM28.4167 20.1666C29.9384 20.1666 31.1667 18.9383 31.1667 17.4166C31.1667 15.895 29.9384 14.6666 28.4167 14.6666C26.8951 14.6666 25.6667 15.895 25.6667 17.4166C25.6667 18.9383 26.8951 20.1666 28.4167 20.1666ZM15.5834 20.1666C17.1051 20.1666 18.3334 18.9383 18.3334 17.4166C18.3334 15.895 17.1051 14.6666 15.5834 14.6666C14.0617 14.6666 12.8334 15.895 12.8334 17.4166C12.8334 18.9383 14.0617 20.1666 15.5834 20.1666ZM22.0001 32.0833C26.2717 32.0833 29.9017 29.4066 31.3684 25.6666H12.6317C14.0984 29.4066 17.7284 32.0833 22.0001 32.0833Z"
+        id="Emoji"
+        fill={theme && theme.color ? theme.color : 'var(--color-icon)'}
+      />
+    </svg>
+  );
+}
+
+export default Emoji;

package/src/Presentation/components/UI/svgs/Icons/Actions/ForwardFilled/Forward filled.svg

@@ -0,0 +1,3 @@
+<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M31.1667 13.75V8.25L44 21.0833L31.1667 33.9167V28.4167L38.5 21.0833L31.1667 13.75ZM20.1667 15.5833V8.25L33 21.0833L20.1667 33.9167V26.4C11 26.4 4.58333 29.3333 0 35.75C1.83333 26.5833 7.33333 17.4167 20.1667 15.5833Z" fill="#0B121B"/>
+</svg>

package/src/Presentation/components/UI/svgs/Icons/Actions/ForwardFilled/index.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { IconTheme } from '../../IconsCommonTypes';
+
+function ForwardFilled(theme: IconTheme | undefined = undefined) {
+  return (
+    <svg
+      width={theme && theme.width ? theme.width : '44'}
+      height={theme && theme.height ? theme.height : '44'}
+      viewBox="0 0 44 44"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M31.1667 13.75V8.25L44 21.0833L31.1667 33.9167V28.4167L38.5 21.0833L31.1667 13.75ZM20.1667 15.5833V8.25L33 21.0833L20.1667 33.9167V26.4C11 26.4 4.58333 29.3333 0 35.75C1.83333 26.5833 7.33333 17.4167 20.1667 15.5833Z"
+        id="ForwardFilled"
+        fill={theme && theme.color ? theme.color : 'var(--color-icon)'}
+      />
+    </svg>
+  );
+}
+
+export default ForwardFilled;