@griddo/ax 10.1.69 → 10.1.71

package/config/jest/setup.js

@@ -1,5 +1,15 @@
-require('babel-plugin-require-context-hook/register')()
+require("babel-plugin-require-context-hook/register")();
 
-module.exports = () =>{
-    global.IS_REACT_ACT_ENVIRONMENT = true;
-}
+module.exports = () => {
+  global.IS_REACT_ACT_ENVIRONMENT = true;
+};
+
+window.matchMedia =
+  window.matchMedia ||
+  function () {
+    return {
+      matches: false,
+      addListener: function () {},
+      removeListener: function () {},
+    };
+  };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@griddo/ax",
   "description": "Griddo Author Experience",
-  "version": "10.1.69",
+  "version": "10.1.71",
   "authors": [
     "Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
     "Carlos Torres <carlos.torres@secuoyas.com>",
@@ -61,6 +61,7 @@
     "@types/react-redux": "^7.1.23",
     "@types/react-router-dom": "5.3.3",
     "@types/react-select": "^3.0.8",
+    "@types/react-slick": "^0.23.10",
     "@types/react-test-renderer": "17.0.1",
     "@types/react-textarea-autosize": "^4.3.5",
     "@types/styled-components": "^5.1.25",
@@ -131,6 +132,7 @@
     "react-refresh": "^0.10.0",
     "react-router-dom": "5.1.2",
     "react-select": "^3.0.8",
+    "react-slick": "^0.29.0",
     "react-textarea-autosize": "^7.1.2",
     "redux": "4.0.4",
     "redux-devtools-extension": "2.13.8",
@@ -142,6 +144,7 @@
     "sass-alias": "^1.0.5",
     "sass-loader": "^10.0.0",
     "semver": "^7.3.5",
+    "slick-carousel": "^1.8.1",
     "source-map-loader": "^1.1.2",
     "string-replace-loader": "^3.0.1",
     "style-loader": "^1.2.1",
@@ -230,5 +233,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "063e80a3a399854898829fab01c32edcfc33a9fb"
+  "gitHead": "e745de8a8f3748766462e1782eb7960df7100936"
 }

package/public/img/logos/logoSQY.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20 9.99997C20 15.5228 15.5229 20 10 20C4.47712 20 0 15.5228 0 9.99997C0 4.4771 4.47712 0 10 0C15.5229 0 20 4.4771 20 9.99997ZM12.1697 15.1504C12.1548 15.299 12.244 15.3734 12.3926 15.3734H14.3096C14.4582 15.3734 14.5326 15.299 14.5326 15.1504V11.3907C14.5326 11.2421 14.4434 11.1679 14.3096 11.1679H12.0954C11.9616 11.1679 11.8724 11.2421 11.8724 11.3907V11.6434C11.8724 11.6434 11.5753 13.0254 9.86629 13.0254C9.22724 13.0254 8.79624 12.6835 8.79624 12.2378C8.79624 10.93 14.3245 11.4947 14.3245 7.86866C14.3245 5.9665 12.9424 4.61419 10.6984 4.61419C9.46504 4.61419 8.64769 4.98576 8.12758 5.50581L8.18701 4.92626C8.20185 4.77765 8.11267 4.70331 7.96405 4.70331H6.04704C5.89842 4.70331 5.82415 4.77765 5.82415 4.92626V8.68601C5.82415 8.83462 5.91327 8.90896 6.04704 8.90896H8.26128C8.39506 8.90896 8.48417 8.83462 8.48417 8.68601V8.44828C8.48417 7.85382 9.03404 7.12566 10.2972 7.12566C10.966 7.12566 11.3523 7.40798 11.3523 7.86866C11.3523 9.48851 5.46749 8.67117 5.46749 12.3269C5.46749 13.8872 6.52257 15.4773 9.12322 15.4773C11.0997 15.4773 12.1697 14.4223 12.1994 14.4223L12.1697 15.1504Z" fill="white"/>
+</svg>

package/public/img/slider/left-on.svg

@@ -0,0 +1,4 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="20" cy="20" r="19.6226" fill="white" fill-opacity="0.2" stroke="white" stroke-width="0.754717"/>
+<path d="M16.784 24.5785C17.0303 24.8142 17.4186 24.8142 17.6649 24.5785C17.9268 24.3279 17.927 23.9094 17.6653 23.6586L14.5012 20.625L27.375 20.625C27.7202 20.625 28 20.3452 28 20C28 19.6548 27.7202 19.375 27.375 19.375L14.5012 19.375L17.6653 16.3414C17.927 16.0905 17.9268 15.6721 17.6649 15.4215C17.4186 15.1858 17.0303 15.1858 16.784 15.4215L12 20L16.784 24.5785Z" fill="white"/>
+</svg>

package/public/img/slider/left.svg

@@ -0,0 +1,4 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="20" cy="20" r="19.6226" stroke="white" stroke-width="0.754717"/>
+<path d="M16.784 24.5785C17.0303 24.8142 17.4186 24.8142 17.6649 24.5785C17.9268 24.3279 17.927 23.9094 17.6653 23.6586L14.5012 20.625L27.375 20.625C27.7202 20.625 28 20.3452 28 20C28 19.6548 27.7202 19.375 27.375 19.375L14.5012 19.375L17.6653 16.3414C17.927 16.0905 17.9268 15.6721 17.6649 15.4215C17.4186 15.1858 17.0303 15.1858 16.784 15.4215L12 20L16.784 24.5785Z" fill="white"/>
+</svg>

package/public/img/slider/right-on.svg

@@ -0,0 +1,4 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="20" cy="20" r="19.6226" fill="white" fill-opacity="0.2" stroke="white" stroke-width="0.754717"/>
+<path d="M23.216 15.4215C22.9697 15.1858 22.5814 15.1858 22.3351 15.4215C22.0732 15.6721 22.073 16.0906 22.3347 16.3414L25.4988 19.375H12.625C12.2798 19.375 12 19.6548 12 20C12 20.3452 12.2798 20.625 12.625 20.625H25.4988L22.3347 23.6586C22.073 23.9094 22.0732 24.3279 22.3351 24.5785C22.5814 24.8142 22.9697 24.8142 23.216 24.5785L28 20L23.216 15.4215Z" fill="white"/>
+</svg>

package/public/img/slider/right.svg

@@ -0,0 +1,4 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="20" cy="20" r="19.6226" stroke="white" stroke-width="0.754717"/>
+<path d="M23.216 15.4215C22.9697 15.1858 22.5814 15.1858 22.3351 15.4215C22.0732 15.6721 22.073 16.0906 22.3347 16.3414L25.4988 19.375H12.625C12.2798 19.375 12 19.6548 12 20C12 20.3452 12.2798 20.625 12.625 20.625H25.4988L22.3347 23.6586C22.073 23.9094 22.0732 24.3279 22.3351 24.5785C22.5814 24.8142 22.9697 24.8142 23.216 24.5785L28 20L23.216 15.4215Z" fill="white"/>
+</svg>

package/src/__tests__/components/Login/Login.test.tsx

@@ -17,6 +17,8 @@ const settings = {
   siteLogoMini: "https://images.dev.griddo.io/logobs-mini_1",
   welcomeText1: "Welcome back to",
   welcomeText2: "Griddo",
+  autoSummary: false,
+  autoTranslation: false,
 };
 
 describe("Login component rendering", () => {
@@ -41,11 +43,7 @@ describe("Login component rendering", () => {
 
     const wrapper = screen.getByTestId("login-wrapper");
     expect(wrapper).toBeTruthy();
-    const welcomeText1 = screen.getByText("Welcome back to");
-    expect(welcomeText1).toBeTruthy();
-    const welcomeText2 = screen.getByText("Griddo");
-    expect(welcomeText2).toBeTruthy();
-    const loginButton = screen.getByText("Log in");
+    const loginButton = screen.getByText("Login");
     expect(loginButton).toBeTruthy();
   });
 
@@ -69,7 +67,7 @@ describe("Login component rendering", () => {
       </ThemeProvider>
     );
 
-    const loginButton = screen.queryByText("Log in");
+    const loginButton = screen.queryByText("Login");
     expect(loginButton).toBeFalsy();
     const loginButtonSending = screen.getByText("Sending");
     expect(loginButtonSending).toBeTruthy();
@@ -99,7 +97,7 @@ describe("Login component events", () => {
       </ThemeProvider>
     );
 
-    const loginButton = screen.getByText("Log in");
+    const loginButton = screen.getByText("Login");
     expect(loginButton).toBeTruthy();
     fireEvent.click(loginButton);
     expect(handleSubmitMock).toBeCalledTimes(1);

package/src/api/integrations.tsx

@@ -49,6 +49,11 @@ const SERVICES: { [key: string]: IServiceConfig } = {
     endpoint: ["/integration/", "/duplicate/"],
     method: "POST",
   },
+  ORDER_INTEGRATION: {
+    ...template,
+    endpoint: ["/integration/", "/order/"],
+    method: "PUT",
+  },
 };
 
 const getIntegrations = async (site: number, params: any = {}): Promise<AxiosResponse> => {
@@ -59,7 +64,7 @@ const getIntegrations = async (site: number, params: any = {}): Promise<AxiosRes
   } = SERVICES.GET_INTEGRATIONS;
 
   const stateQuery = filterState ? `&filterState=${filterState}` : "";
-  SERVICES.GET_INTEGRATIONS.dynamicUrl = `${host}${prefix}${site}${suffix}?pagination=${pagination}${filter}${stateQuery}`;
+  SERVICES.GET_INTEGRATIONS.dynamicUrl = `${host}${prefix}${site}${suffix}?pagination=${pagination}&order=scriptOrder-asc${filter}${stateQuery}`;
   if (pagination) SERVICES.GET_INTEGRATIONS.dynamicUrl += `&page=${page}&itemsPerPage=${itemsPerPage}`;
 
   return sendRequest(SERVICES.GET_INTEGRATIONS);
@@ -140,6 +145,17 @@ const duplicateIntegration = async (id: number, site: number): Promise<AxiosResp
   return sendRequest(SERVICES.DUPLICATE_INTEGRATION);
 };
 
+const orderIntegration = async (id: number, newOrder: number): Promise<AxiosResponse> => {
+  const {
+    host,
+    endpoint: [prefix, suffix],
+  } = SERVICES.ORDER_INTEGRATION;
+
+  SERVICES.ORDER_INTEGRATION.dynamicUrl = `${host}${prefix}${id}${suffix}${newOrder}`;
+
+  return sendRequest(SERVICES.ORDER_INTEGRATION);
+};
+
 export default {
   getIntegrations,
   createIntegration,
@@ -150,4 +166,5 @@ export default {
   changeState,
   changeStateBulk,
   duplicateIntegration,
+  orderIntegration,
 };

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

@@ -4,17 +4,9 @@ import Icon from "@ax/components/Icon";
 
 import * as S from "./style";
 
-const CheckField = ({
-  name,
-  title,
-  value,
-  checked,
-  error,
-  disabled,
-  indeterminate,
-  onChange,
-  icon,
-}: ICheckFieldProps): JSX.Element => {
+const CheckField = (props: ICheckFieldProps): JSX.Element => {
+  const { name, title, value, checked, error, disabled, indeterminate, onChange, icon, inversed = false } = props;
+
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const isChecked = e.target.checked;
     if (onChange) {
@@ -24,7 +16,7 @@ const CheckField = ({
 
   return (
     <S.Wrapper>
-      <S.Label data-testid="check-field-label" disabled={disabled}>
+      <S.Label data-testid="check-field-label" disabled={disabled} inversed={inversed}>
         {icon ? (
           <S.IconLabelWrapper data-testid="check-field-icon-label">
             <S.IconWrapper>
@@ -50,6 +42,7 @@ const CheckField = ({
           checked={checked}
           error={error}
           indeterminate={indeterminate}
+          inversed={inversed}
         />
       </S.Label>
     </S.Wrapper>
@@ -66,6 +59,7 @@ export interface ICheckFieldProps {
   indeterminate?: boolean;
   onChange?: (value: ICheck) => void;
   icon?: string;
+  inversed?: boolean;
 }
 
 export default CheckField;

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

@@ -2,7 +2,7 @@ import styled from "styled-components";
 
 const Wrapper = styled.div``;
 
-const Label = styled.label<{ disabled: boolean | undefined }>`
+const Label = styled.label<{ disabled: boolean | undefined; inversed: boolean }>`
   ${(p) => p.theme.textStyle.fieldContent};
   display: block;
   position: relative;
@@ -10,13 +10,19 @@ const Label = styled.label<{ disabled: boolean | undefined }>`
   margin-bottom: ${(p) => p.theme.spacing.xs};
   cursor: pointer;
   user-select: none;
-  color: ${(p) => p.disabled && p.theme.color.interactiveDisabled};
+  color: ${(p) =>
+    p.disabled
+      ? p.theme.color.interactiveDisabled
+      : p.inversed
+      ? p.theme.color.textHighEmphasisInverse
+      : p.theme.color.textMediumEmphasis};
 `;
 
 const CheckMark = styled.span<{
   checked: boolean | undefined;
   error: boolean | undefined;
   indeterminate: boolean | undefined;
+  inversed: boolean;
 }>`
   position: absolute;
   top: 2px;
@@ -24,10 +30,12 @@ const CheckMark = styled.span<{
   height: ${(p) => p.theme.spacing.s};
   width: ${(p) => p.theme.spacing.s};
   background-color: ${(p) =>
-    p.checked || p.indeterminate
-      ? p.error
-        ? p.theme.color.error
-        : p.theme.color.interactive01
+    p.error
+      ? p.theme.color.error
+      : p.checked || p.indeterminate
+      ? p.theme.color.interactive01
+      : p.inversed
+      ? "transparent"
       : p.theme.color.interactiveBackground};
   border: 2px solid
     ${(p) =>
@@ -35,6 +43,8 @@ const CheckMark = styled.span<{
         ? p.theme.color.error
         : p.checked || p.indeterminate
         ? p.theme.color.interactive01
+        : p.inversed
+        ? p.theme.color.interactiveInverse
         : p.theme.color.interactiveInactive};
   border-radius: 1.5px;
   :after {

package/src/components/Fields/NoteField/style.tsx

@@ -1,20 +1,20 @@
 import styled from "styled-components";
 
 const Wrapper = styled.div`
-  background-color: ${(p) => p.theme.color?.uiBackground03};
-  padding: ${(p) => p.theme.spacing?.s};
-  border-radius: ${(p) => p.theme.radii?.s};
+  background-color: ${(p) => p.theme.color.uiBackground03};
+  padding: ${(p) => p.theme.spacing.s};
+  border-radius: ${(p) => p.theme.radii.s};
 `;
 
 const Title = styled.div`
-  ${(p) => p.theme.textStyle?.headingXS};
-  color: ${(p) => p.theme.color?.textMediumEmphasis};
-  margin-bottom: ${(p) => p.theme.spacing?.xs};
+  ${(p) => p.theme.textStyle.headingXS};
+  color: ${(p) => p.theme.color.textMediumEmphasis};
+  margin-bottom: ${(p) => p.theme.spacing.xs};
 `;
 
 const Text = styled.div`
-  ${(p) => p.theme.textStyle?.uiXS};
-  color: ${(p) => p.theme.color?.textMediumEmphasis};
+  ${(p) => p.theme.textStyle.uiXS};
+  color: ${(p) => p.theme.color.textMediumEmphasis};
 `;
 
 export { Wrapper, Title, Text };

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

@@ -23,6 +23,7 @@ const TextField = (props: ITextFieldProps): JSX.Element => {
     handleValidation,
     validators,
     editorID,
+    inversed = false,
   } = props;
 
   const [width, setWidth] = useState(0);
@@ -99,7 +100,7 @@ const TextField = (props: ITextFieldProps): JSX.Element => {
         aria-label={name}
       />
       {hasBackgroundIcon && (
-        <S.BackgroundIcon data-testid="background-icon-component" onClick={onClickIcon}>
+        <S.BackgroundIcon data-testid="background-icon-component" onClick={onClickIcon} inversed={inversed}>
           <Icon name={icon || ""} size="24" />
         </S.BackgroundIcon>
       )}
@@ -131,6 +132,7 @@ interface ITextFieldProps {
   handleValidation?: (value: string, validators?: Record<string, unknown>) => void;
   validators?: Record<string, unknown>;
   editorID?: number;
+  inversed?: boolean;
 }
 
 export default TextField;

package/src/components/Fields/TextField/style.tsx

@@ -82,7 +82,7 @@ const FieldWrapper = styled.div<{ error: boolean | undefined }>`
   }
 `;
 
-const BackgroundIcon = styled.div<{ onClick?: any }>`
+const BackgroundIcon = styled.div<{ onClick?: any; inversed: boolean }>`
   position: absolute;
   right: ${(p) => p.theme.spacing.xs};
   top: 50%;
@@ -90,6 +90,11 @@ const BackgroundIcon = styled.div<{ onClick?: any }>`
   height: 24px;
   width: 24px;
   cursor: ${(p) => (p.onClick ? "pointer" : "default")};
+  svg {
+    path {
+      fill: ${(p) => p.inversed ? p.theme.color.iconNonActive : p.theme.color.interactive01};
+    }
+  }
 `;
 
 const Prefix = styled.div`

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

@@ -2,7 +2,7 @@ import React from "react";
 import { CheckField } from "@ax/components";
 
 const UniqueCheck = (props: IProps) => {
-  const { name, value, options, onChange, disabled } = props;
+  const { name, value, options, onChange, disabled, inversed = false } = props;
   const uniqueOption = options[0];
 
   const handleChange = (changeEvt: ICheckEvent) => {
@@ -18,6 +18,7 @@ const UniqueCheck = (props: IProps) => {
       value={value}
       onChange={handleChange}
       disabled={disabled}
+      inversed={inversed}
     />
   );
 };
@@ -33,6 +34,7 @@ interface IProps {
   options: ICheck[];
   onChange: any;
   disabled?: boolean;
+  inversed?: boolean;
 }
 
 interface ICheck {

package/src/components/FieldsBehavior/index.tsx

@@ -26,6 +26,7 @@ const FieldsBehavior = (props: any): JSX.Element => {
     deleteError,
     editorID,
     objKey,
+    inversed = false,
   } = props;
   const [showAdvanced, setShowAdvanced] = useState(false);
   const [errorField, setErrorField] = useState(false);
@@ -40,7 +41,7 @@ const FieldsBehavior = (props: any): JSX.Element => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [editorID, error]);
 
-  const helpTextWrapper = message ? <S.HelpText error={errorField}>{message}</S.HelpText> : "";
+  const helpTextWrapper = message ? <S.HelpText error={errorField}  inversed={inversed}>{message}</S.HelpText> : "";
   const isComponentArray = fieldType === "ComponentArray";
   const isComponentContainer = fieldType === "ComponentContainer";
   const hasMultipleOptions: boolean = whiteList && whiteList.length > 1;
@@ -80,7 +81,7 @@ const FieldsBehavior = (props: any): JSX.Element => {
 
   return (
     <S.Wrapper className={wrapperClass} showTitle={showTitle} id={`gdd_${objKey}`}>
-      <S.Content error={errorField} data-testid="fields-behavior-wrapper">
+      <S.Content error={errorField} inversed={inversed} data-testid="fields-behavior-wrapper">
         <Field
           {...props}
           showAdvanced={showAdvanced}
@@ -91,7 +92,7 @@ const FieldsBehavior = (props: any): JSX.Element => {
       </S.Content>
       <S.Header className="fieldHeader">
         {showTitle && (
-          <S.Label htmlFor={name} error={errorField}>
+          <S.Label htmlFor={name} error={errorField} inversed={inversed}>
             {title} <Asterisk />
           </S.Label>
         )}

package/src/components/FieldsBehavior/style.tsx

@@ -1,21 +1,29 @@
 import styled from "styled-components";
 
-export const Label = styled.label<{
-  error: boolean | undefined;
-}>`
-  ${(p) => p.theme.textStyle?.fieldLabel};
-  color: ${(p) => (p.error === true ? p.theme.color?.error : p.theme.color?.textMediumEmphasis)};
+export const Label = styled.label<{ error: boolean | undefined; inversed: boolean }>`
+  ${(p) => p.theme.textStyle.fieldLabel};
+  color: ${(p) =>
+    p.error === true
+      ? p.theme.color.error
+      : p.inversed
+      ? p.theme.color.textHighEmphasisInverse
+      : p.theme.color.textMediumEmphasis};
   display: block;
-  margin-bottom: ${(p) => p.theme.spacing?.xs};
+  margin-bottom: ${(p) => p.theme.spacing.xs};
 `;
 
 export const Asterisk = styled.span`
-  color: ${(p) => p.theme.color?.error};
+  color: ${(p) => p.theme.color.error};
 `;
 
-export const HelpText = styled.div<{ error: boolean | undefined }>`
+export const HelpText = styled.div<{ error: boolean | undefined; inversed: boolean }>`
   ${(p) => p.theme.textStyle.uiXS};
-  color: ${(p) => (p.error === true ? p.theme.color?.error : p.theme.color?.textMediumEmphasis)};
+  color: ${(p) =>
+    p.error === true
+      ? p.theme.color.error
+      : p.inversed
+      ? p.theme.color.textMediumEmphasisInverse
+      : p.theme.color.textMediumEmphasis};
 `;
 
 export const Header = styled.div`
@@ -34,8 +42,8 @@ export const Icons = styled.div`
 
 export const Wrapper = styled.div<{ showTitle: boolean | undefined }>`
   position: relative;
-  margin-bottom: ${(p) => p.theme.spacing?.m};
-  padding-top: ${(p) => (p.showTitle ? p.theme.spacing?.m : 0)};
+  margin-bottom: ${(p) => p.theme.spacing.m};
+  padding-top: ${(p) => (p.showTitle ? p.theme.spacing.m : 0)};
   width: 100%;
 
   &:hover > .fieldHeader ${Icons} {
@@ -43,25 +51,30 @@ export const Wrapper = styled.div<{ showTitle: boolean | undefined }>`
   }
 
   &.filled {
-    padding-top: ${(p) => (p.showTitle ? `calc(${p.theme.spacing?.m} + ${p.theme.spacing?.s})` : p.theme.spacing?.s)};
-    padding-left: ${(p) => p.theme.spacing?.s};
-    padding-right: ${(p) => p.theme.spacing?.s};
-    padding-bottom: ${(p) => p.theme.spacing?.xs};
-    background-color: ${(p) => p.theme.color?.uiBarBackground};
-    border-radius: ${(p) => p.theme.radii?.s};
-    box-shadow: ${(p) => p.theme.shadow?.shadowS};
+    padding-top: ${(p) => (p.showTitle ? `calc(${p.theme.spacing.m} + ${p.theme.spacing.s})` : p.theme.spacing.s)};
+    padding-left: ${(p) => p.theme.spacing.s};
+    padding-right: ${(p) => p.theme.spacing.s};
+    padding-bottom: ${(p) => p.theme.spacing.xs};
+    background-color: ${(p) => p.theme.color.uiBarBackground};
+    border-radius: ${(p) => p.theme.radii.s};
+    box-shadow: ${(p) => p.theme.shadow.shadowS};
 
     ${Header} {
-      top: ${(p) => p.theme.spacing?.s};
-      left: ${(p) => p.theme.spacing?.s};
+      top: ${(p) => p.theme.spacing.s};
+      left: ${(p) => p.theme.spacing.s};
     }
   }
 `;
 
-export const Content = styled.div<{ error: boolean | undefined }>`
+export const Content = styled.div<{ error: boolean | undefined; inversed: boolean }>`
   &:focus-within {
     & + div label {
-      color: ${(p) => (p.error === true ? p.theme.color?.error : p.theme.color?.interactive01)};
+      color: ${(p) =>
+        p.error === true
+          ? p.theme.color.error
+          : p.inversed
+          ? p.theme.color.textHighEmphasisInverse
+          : p.theme.color.interactive01};
     }
   }
 `;

package/src/components/Login/Circle/index.tsx

@@ -0,0 +1,16 @@
+import * as React from "react";
+
+import * as S from "./style";
+
+const Circle = (props: ICircleProps) => {
+  const { animation, size = 400 } = props;
+
+  return <S.Circle animation={animation} size={size} />;
+};
+
+interface ICircleProps {
+  animation: number;
+  size?: number;
+}
+
+export default Circle;

package/src/components/Login/Circle/style.tsx

@@ -0,0 +1,30 @@
+import styled, { keyframes } from "styled-components";
+
+const animation1 = keyframes`
+  from { left: 5%; bottom: 10%; }
+  to { left: 15%; bottom: 15%; }
+`;
+
+const animation2 = keyframes`
+  from { right: 5%; top: 10%; }
+  to { right: 15%; top: 15%; }
+`;
+
+const animations = [animation1, animation2];
+const colors = ["#A950CF", "#FBE15C"];
+
+
+const Circle = styled.div<{ size: number; animation: number }>`
+  position: absolute;
+  width: ${(p) => `${p.size}px`};
+  height: ${(p) => `${p.size}px`};
+  border-radius: 50%;
+  filter: blur(50px);
+  background-color: ${(p) => colors[p.animation - 1]};
+  animation: ${(p) => animations[p.animation - 1]} 5s linear infinite alternate;
+  backface-visibility: hidden;
+  transform: translate3d(0, 0, 0);
+  opacity: 0.6;
+`;
+
+export { Circle };

package/src/components/Login/LoginSlider/index.tsx

@@ -0,0 +1,63 @@
+import React, { useRef } from "react";
+import Slider from "react-slick";
+import "slick-carousel/slick/slick.css";
+
+import * as S from "./style";
+
+const LoginSlider = (props: ILoginSliderProps): JSX.Element => {
+  const { className } = props;
+
+  const customSlider = useRef<any>(null);
+
+  const beforeChange = (prev: number, next: number) => {
+    const prevSlideElement = customSlider.current.innerSlider.list.querySelector(`[data-index="${prev}"]`);
+    const nextSlideElement = customSlider.current.innerSlider.list.querySelector(`[data-index="${next}"]`);
+
+    setTimeout(() => {
+      prevSlideElement.classList.add('prev-slide-anim');
+      nextSlideElement.classList.remove('prev-slide-anim');
+    },100);
+  }
+
+  const settings = {
+    dots: false,
+    arrows: false,
+    infinite: true,
+    draggable: false,
+    speed: 800,
+    slidesToShow: 1,
+    slidesToScroll: 1,
+    beforeChange,
+  };
+
+  const handleNext = () => customSlider.current?.slickNext();
+  const handlePrev = () => customSlider.current?.slickPrev();
+
+  const Banner = ({ text, image }: any) => (
+    <S.BannerWrapper>
+      <S.Title>{text}</S.Title>
+      <S.Image image={image} />
+    </S.BannerWrapper>
+  );
+
+  return (
+    <S.Wrapper className={className}>
+      <S.Buttons>
+        <S.Arrow onClick={handlePrev} direction="left" />
+        <S.Arrow onClick={handleNext} direction="right" />
+      </S.Buttons>
+      <Slider {...settings} ref={(slider) => (customSlider.current = slider)}>
+        <Banner text="Full independence to publish content at any time" image="/img/slider/content.png" />
+        <Banner text="Thousands of possibilities, literally" image="/img/slider/editor.png" />
+        {/*<Banner text="Optimized images without any effort" image="/img/slider/gallery.png" />*/}
+        <Banner text="Comprehensive integration with Analytics" image="/img/slider/analytics.png" />
+      </Slider>
+    </S.Wrapper>
+  );
+};
+
+export interface ILoginSliderProps {
+  className: string;
+}
+
+export default LoginSlider;