datastake-daf 0.6.597 → 0.6.598

package/dist/layouts/index.js

@@ -5678,7 +5678,7 @@ const MOBILE_W$1 = 850;
 const MOBILE_WIDTH$1 = `max-width: ${MOBILE_W$1}px`;
 
 /* eslint-disable react/prop-types */
-const Style$4 = dt.div`
+const Style$5 = dt.div`
   display: flex;
   cursor: pointer;
 
@@ -5741,7 +5741,7 @@ function UserIcon({
   companyLogo
 }) {
   if (companyLogo) {
-    return /*#__PURE__*/jsxRuntime.jsx(Style$4, {
+    return /*#__PURE__*/jsxRuntime.jsx(Style$5, {
       children: /*#__PURE__*/jsxRuntime.jsxs("div", {
         className: "flex",
         children: [/*#__PURE__*/jsxRuntime.jsx("div", {
@@ -5759,7 +5759,7 @@ function UserIcon({
       })
     });
   }
-  return /*#__PURE__*/jsxRuntime.jsx(Style$4, {
+  return /*#__PURE__*/jsxRuntime.jsx(Style$5, {
     children: /*#__PURE__*/jsxRuntime.jsxs("div", {
       className: "flex",
       children: [/*#__PURE__*/jsxRuntime.jsx("div", {
@@ -5776,7 +5776,7 @@ function UserIcon({
   });
 }
 
-const Style$3 = dt.div`
+const Style$4 = dt.div`
   position: fixed;
   background: rgba(0, 0, 0, 0.4);
   width: 100dvw;
@@ -5976,7 +5976,7 @@ function MobileDrawer({
       }
     });
   };
-  return /*#__PURE__*/jsxRuntime.jsx(Style$3, {
+  return /*#__PURE__*/jsxRuntime.jsx(Style$4, {
     className: formatClassname([!drawerOpened && 'closed', isUserDropdown && 'user-dropdown']),
     children: /*#__PURE__*/jsxRuntime.jsx("div", {
       className: "drawer",
@@ -6531,7 +6531,7 @@ function Notifications({
   });
 }
 
-var Style$2 = dt.div`
+var Style$3 = dt.div`
   &.popup {
     h2 {
       margin-bottom: 8px;
@@ -6556,7 +6556,7 @@ var Style$2 = dt.div`
   }
 `;
 
-const Style$1 = dt.div`
+const Style$2 = dt.div`
   .ant-btn {
     border-radius: 100px 100px 100px 0;
     padding: 10px;
@@ -6615,7 +6615,7 @@ const BorderedButton = ({
   children,
   ...props
 }) => {
-  return /*#__PURE__*/jsxRuntime.jsx(Style$1, {
+  return /*#__PURE__*/jsxRuntime.jsx(Style$2, {
     className: "d-btn-cont",
     children: /*#__PURE__*/jsxRuntime.jsx(antd.Button, {
       ...props,
@@ -6665,7 +6665,7 @@ function LoginPopup({
     open: true,
     footer: null,
     closable: false,
-    children: /*#__PURE__*/jsxRuntime.jsxs(Style$2, {
+    children: /*#__PURE__*/jsxRuntime.jsxs(Style$3, {
       className: "popup",
       children: [/*#__PURE__*/jsxRuntime.jsx("h2", {
         children: t('Log back in')
@@ -7296,7 +7296,7 @@ const MOBILE_WIDTH = `max-width: ${MOBILE_W}px`;
 const TABLET_WIDTH = `max-width: ${TABLET_W}px`;
 
 // Global styles for portaled elements (dropdowns, modals, etc.)
-const GlobalNavbarStyles = ft`
+ft`
   .language-select-popup {
     .ant-select-dropdown {
       padding: 4px;
@@ -7429,7 +7429,7 @@ const style = dt.div`
 
         .navbar-logo {
           cursor: pointer;
-          height: 40px;
+          height: 30px;
           width: auto;
           object-fit: contain;
 
@@ -7500,28 +7500,6 @@ const style = dt.div`
           }
         }
 
-        .back-btn {
-          background: transparent;
-          border: 1px solid #D0D5DD;
-          border-radius: 8px;
-          padding: 8px 16px;
-          font-size: 14px;
-          font-weight: 500;
-          color: #344054;
-          cursor: pointer;
-          transition: all 0.2s ease;
-          box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
-
-          &:hover {
-            background: #F9FAFB;
-            border-color: #98A2B3;
-          }
-
-          &:active {
-            transform: scale(0.98);
-          }
-        }
-
         .ant-btn {
           font-size: 14px;
           padding: 6px 0;
@@ -7563,21 +7541,6 @@ const style = dt.div`
       }
     }
 
-    .ant-btn {
-      width: 90px !important;
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-
-      &.w-100 {
-        width: 100% !important;
-      }
-
-      span {
-        margin: 0 auto;
-      }
-    }
-
     .nav-extra {
       position: fixed;
       top: 0;
@@ -7595,6 +7558,278 @@ const style = dt.div`
   }
 `;
 
+const languages = [{
+  value: 'en',
+  label: '🇬🇧 EN'
+}, {
+  value: 'fr',
+  label: '🇫🇷 FR'
+}, {
+  value: 'sp',
+  label: '🇪🇸 ES'
+}];
+
+const Style$1 = dt.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  position: relative;
+
+  .flex-r {
+    display: flex;
+  }
+
+  .flex-c {
+    display: flex;
+    flex-direction: column;
+
+    img {
+        border-radius: 50%;
+        margin-top: -2px;
+    }
+  }
+
+  .justify-center {
+    justify-content: center;
+  }
+
+  .select-navbar {
+    padding: 0 .75rem;
+
+    div {
+      width: 4.625rem;
+      user-select: none;
+      font-size: .875rem;
+      font-weight: 500;
+      text-align: center;
+      color: #193E61; 
+      cursor: pointer;
+    }
+
+    .country-cont {
+      justify-content: center;
+      gap: 0.6rem;
+
+      .flex-c {
+        width: fit-content;
+      }
+
+      img {
+        width: 18px;
+        height: 18px;
+      }
+
+      span {
+        color: $gray-100;
+        font-size: 14px;
+      }
+    }
+
+    &.bordered {
+      .country-cont {
+        img {
+          width: 14px;
+          height: 14px;
+          border-radius: 100%;
+        }
+      }
+    }
+  }
+
+  .select-options {
+    position: absolute;
+    width: 100%;
+    top: 55px;
+    left: 0;
+    background-color: white;
+    border-radius: 8px;
+    box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
+    padding: .75rem 0;
+    z-index: 100;
+    animation: .3s fade forwards;
+
+    &.not-toggled {
+      animation: .3s fadeOut forwards;
+    }
+
+    @media (${TABLET_WIDTH}) {
+      top: 50px;
+    }
+
+    @media (${MOBILE_WIDTH}) {
+      top: 3.5rem;
+    }
+
+    .value {
+      padding: .75rem 0rem;
+      margin: 0 .75rem;
+      text-align: center;
+      font-size: 1rem;
+      font-weight: 500;
+      cursor: pointer;
+      user-select: none;
+
+      &.active-value {
+        background-color: #265A80;
+        color: white;
+      }
+    }
+  }
+
+  @keyframes fade {
+    0% { opacity: 0; }
+    100% { opacity: 1; }
+  }
+
+  @keyframes fadeOut {
+    0% { opacity: 1; }
+    100% { opacity: 0; }
+  }
+`;
+
+/* eslint-disable react/prop-types */
+function useOutsideAlerter({
+  ref,
+  secondRef,
+  onOutside = () => {}
+}) {
+  o.useEffect(() => {
+    function handleClickOutside(event) {
+      if (ref.current && !ref.current.contains(event.target) && secondRef.current && !secondRef.current.contains(event.target)) {
+        onOutside();
+      }
+    }
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [ref]);
+}
+const Options = ({
+  values = [],
+  onChange = () => {},
+  value = '',
+  setToggled = () => {},
+  toggled = false,
+  secondRef = {}
+}) => {
+  const ref = o.useRef();
+  useOutsideAlerter({
+    ref,
+    secondRef,
+    onOutside: () => setToggled(false)
+  });
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    className: formatClassname(['select-options', !toggled && 'not-toggled']),
+    ref: ref,
+    children: values.map(val => /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: formatClassname(['value', val.value === value && 'active-value']),
+      onClick: () => onChange(val.value),
+      children: val.label
+    }, val.value))
+  });
+};
+let timeout = null;
+const Select = ({
+  bordered,
+  values = [],
+  defaultValue = '',
+  onChange = () => {}
+}) => {
+  const ref = o.useRef();
+  const [value, setValue] = o.useState(defaultValue);
+  const [toggled, setToggled] = o.useState(false);
+  const [visible, setVisible] = o.useState(false);
+  o.useEffect(() => {
+    setValue(defaultValue);
+  }, [defaultValue]);
+  const valueLabel = o.useMemo(() => {
+    if (value === 'en') {
+      return /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "country-cont flex-r",
+        children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "flex-c jus-c",
+          children: /*#__PURE__*/jsxRuntime.jsx("img", {
+            src: "/assets/images/countries/gb.png",
+            alt: ""
+          })
+        }), /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "flex-c jus-c",
+          children: /*#__PURE__*/jsxRuntime.jsx("span", {
+            children: "EN"
+          })
+        })]
+      });
+    }
+    if (value === 'sp') {
+      return /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "country-cont flex-r",
+        children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "flex-c jus-c",
+          children: /*#__PURE__*/jsxRuntime.jsx("img", {
+            src: "/assets/images/countries/sp.png",
+            alt: ""
+          })
+        }), /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "flex-c jus-c",
+          children: /*#__PURE__*/jsxRuntime.jsx("span", {
+            children: "ES"
+          })
+        })]
+      });
+    }
+    return /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "country-cont flex-r",
+      children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "flex-c jus-c",
+        children: /*#__PURE__*/jsxRuntime.jsx("img", {
+          src: "/assets/images/countries/fr.png",
+          alt: ""
+        })
+      }), /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "flex-c jus-c",
+        children: /*#__PURE__*/jsxRuntime.jsx("span", {
+          children: "FR"
+        })
+      })]
+    });
+  }, [values, value]);
+  o.useEffect(() => {
+    if (toggled) {
+      setVisible(true);
+    } else {
+      timeout = setTimeout(() => setVisible(false), 300);
+    }
+    return () => {
+      if (timeout) {
+        clearTimeout(timeout);
+        timeout = null;
+      }
+    };
+  }, [toggled]);
+  return /*#__PURE__*/jsxRuntime.jsxs(Style$1, {
+    children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+      className: formatClassname(['select-navbar', bordered && 'bordered']),
+      onClick: () => setToggled(p => !p),
+      ref: ref,
+      children: /*#__PURE__*/jsxRuntime.jsx("div", {
+        children: valueLabel
+      })
+    }), visible && /*#__PURE__*/jsxRuntime.jsx(Options, {
+      value: value,
+      secondRef: ref,
+      values: values,
+      toggled: toggled,
+      onChange: val => {
+        setValue(val);
+        setToggled(false);
+        onChange(val);
+      },
+      setToggled: setToggled
+    })]
+  });
+};
+
 const AuthNavbar = ({
   logo,
   appName = "default",
@@ -7615,65 +7850,48 @@ const AuthNavbar = ({
   }],
   showBack = false,
   backLabel = "Back",
-  onBack
+  onBack,
+  defaultValue = "en",
+  onClose
 }) => {
-  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/jsxRuntime.jsx(GlobalNavbarStyles, {}), /*#__PURE__*/jsxRuntime.jsx(style, {
-      className: formatClassname([showBack && 'bordered']),
-      children: /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "d-navbar",
-        children: /*#__PURE__*/jsxRuntime.jsxs("div", {
-          className: "main-cont d-container",
-          children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-            className: "left",
-            children: logo && /*#__PURE__*/jsxRuntime.jsx("img", {
-              className: "navbar-logo",
-              src: logo,
-              alt: `${appName} logo`
+  return /*#__PURE__*/jsxRuntime.jsx(style, {
+    className: formatClassname([typeof onClose === 'function' && 'bordered']),
+    children: /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "d-navbar flex-c jus-c",
+      children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "main-cont d-container",
+        children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "left flex-c jus-c",
+          children: /*#__PURE__*/jsxRuntime.jsx("img", {
+            src: logo,
+            alt: appName
+          })
+        }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: "right",
+          children: [typeof onClose === 'function' ? /*#__PURE__*/jsxRuntime.jsx("div", {
+            className: "cursor-pointer",
+            onClick: onClose,
+            children: /*#__PURE__*/jsxRuntime.jsx(CustomIcon, {
+              name: "Close",
+              width: 10,
+              height: 10
             })
-          }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-            className: "right",
-            children: [showLanguageSelector && updateLanguage && /*#__PURE__*/jsxRuntime.jsx(antd.Select, {
-              className: "language-select",
-              defaultValue: localStorage.getItem("datastakeLng") || "en",
-              onChange: lng => updateLanguage(lng),
-              popupClassName: formatClassname(["language-select-popup", appName]),
-              suffixIcon: /*#__PURE__*/jsxRuntime.jsx("svg", {
-                width: "20",
-                height: "20",
-                viewBox: "0 0 20 20",
-                fill: "none",
-                xmlns: "http://www.w3.org/2000/svg",
-                children: /*#__PURE__*/jsxRuntime.jsx("path", {
-                  d: "M5 7.5L10 12.5L15 7.5",
-                  stroke: "#667085",
-                  strokeWidth: "1.66667",
-                  strokeLinecap: "round",
-                  strokeLinejoin: "round"
-                })
-              }),
-              children: languageConfig.map(lang => /*#__PURE__*/jsxRuntime.jsx(antd.Select.Option, {
-                value: lang.value,
-                children: /*#__PURE__*/jsxRuntime.jsxs("div", {
-                  className: "language-option",
-                  children: [/*#__PURE__*/jsxRuntime.jsx("img", {
-                    src: lang.flagUrl,
-                    alt: lang.label,
-                    className: "flag-icon"
-                  }), /*#__PURE__*/jsxRuntime.jsx("span", {
-                    children: lang.label
-                  })]
-                })
-              }, lang.value))
-            }), showBack && /*#__PURE__*/jsxRuntime.jsx("button", {
-              className: "back-btn",
-              onClick: onBack,
-              children: backLabel
-            })]
-          })]
-        })
+          }) : /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
+            children: /*#__PURE__*/jsxRuntime.jsx(Select, {
+              values: languages,
+              defaultValue: defaultValue,
+              onChange: val => {
+                updateLanguage(val);
+              }
+            })
+          }), showBack ? /*#__PURE__*/jsxRuntime.jsx(antd.Button, {
+            className: "cursor-pointer",
+            onClick: onBack,
+            children: backLabel
+          }) : null]
+        })]
       })
-    })]
+    })
   });
 };
 
@@ -8092,7 +8310,8 @@ const AuthLayout = ({
   updateLanguage,
   showBack = false,
   onBack,
-  backLabel = "Back"
+  backLabel = "Back",
+  defaultValue = "en"
 }) => {
   formatClassname(["auth-layout", appName, containerClassName]);
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
@@ -8103,7 +8322,8 @@ const AuthLayout = ({
       updateLanguage: updateLanguage,
       showBack: showBack,
       onBack: onBack,
-      backLabel: backLabel
+      backLabel: backLabel,
+      defaultValue: defaultValue
     }), /*#__PURE__*/jsxRuntime.jsx(Style, {
       children: /*#__PURE__*/jsxRuntime.jsxs("div", {
         className: "main-cont",

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "datastake-daf",
-	"version": "0.6.597",
+	"version": "0.6.598",
 	"dependencies": {
 		"@ant-design/icons": "^5.2.5",
 		"@antv/g2": "^5.1.1",

package/src/@daf/layouts/AuthLayout/AuthLayout.stories.js

@@ -451,6 +451,9 @@ export const CustomRightImage = {
       showTopHeader={true}
       showLanguageSelector={true}
       updateLanguage={(lng) => console.log("Language changed to:", lng)}
+      showBack={true}
+      onBack={() => console.log("Back clicked")}
+      backLabel="Back"
     >
       <LoginForm />
     </AuthLayout>

package/src/@daf/layouts/AuthLayout/components/Navbar/index.jsx

@@ -1,7 +1,10 @@
 import React from "react";
-import { Select } from "antd";
+import { Button } from "antd";
 import { formatClassname } from "../../../../../helpers/ClassesHelper.js";
 import Style, { GlobalNavbarStyles } from './style';
+import { languages } from "./config";
+import { Select } from "../Select/index.jsx";
+import CustomIcon from "../../../../core/components/Icon/CustomIcon.jsx";
 
 const AuthNavbar = ({
   logo,
@@ -16,60 +19,41 @@ const AuthNavbar = ({
   showBack = false,
   backLabel = "Back",
   onBack,
+  defaultValue = "en",
+  onClose
 }) => {
   return (
-    <>
-      <GlobalNavbarStyles />
-      <Style className={formatClassname([showBack && 'bordered'])}>
-        <div className="d-navbar">
-          <div className="main-cont d-container">
-            <div className="left">
-              {logo && (
-                <img className="navbar-logo" src={logo} alt={`${appName} logo`} />
-              )}
-            </div>
-
-            <div className="right">
-              {showLanguageSelector && updateLanguage && (
-                <Select
-                  className="language-select"
-                  defaultValue={localStorage.getItem("datastakeLng") || "en"}
-                  onChange={(lng) => updateLanguage(lng)}
-                  popupClassName={formatClassname([
-                    "language-select-popup",
-                    appName,
-                  ])}
-                  suffixIcon={
-                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-                      <path d="M5 7.5L10 12.5L15 7.5" stroke="#667085" strokeWidth="1.66667" strokeLinecap="round" strokeLinejoin="round"/>
-                    </svg>
-                  }
-                >
-                  {languageConfig.map((lang) => (
-                    <Select.Option key={lang.value} value={lang.value}>
-                      <div className="language-option">
-                        <img
-                          src={lang.flagUrl}
-                          alt={lang.label}
-                          className="flag-icon"
-                        />
-                        <span>{lang.label}</span>
-                      </div>
-                    </Select.Option>
-                  ))}
-                </Select>
-              )}
-
-              {showBack && (
-                <button className="back-btn" onClick={onBack}>
-                  {backLabel}
-                </button>
-              )}
+    <Style className={formatClassname([typeof onClose === 'function' && 'bordered'])}>
+    <div className="d-navbar flex-c jus-c">
+      <div className="main-cont d-container">
+        <div className="left flex-c jus-c">
+          <img src={logo} alt={appName} />
+        </div>
+        <div className="right">
+          {typeof onClose === 'function' ? (
+            <div className="cursor-pointer" onClick={onClose}>
+              <CustomIcon name="Close" width={10} height={10} />
             </div>
-          </div>
+          ) : (
+            <>
+              <Select
+                values={languages}
+                defaultValue={defaultValue}
+                onChange={(val) => {
+                  updateLanguage(val);
+                }}
+              />
+            </>
+          )}
+          {showBack ? (
+            <Button className="cursor-pointer" onClick={onBack}>
+              {backLabel}
+            </Button>
+          ) : null}
         </div>
-      </Style>
-    </>
+      </div>
+    </div>
+  </Style >
   );
 };
 

package/src/@daf/layouts/AuthLayout/components/Navbar/style.js

@@ -136,7 +136,7 @@ const style = styled.div`
 
         .navbar-logo {
           cursor: pointer;
-          height: 40px;
+          height: 30px;
           width: auto;
           object-fit: contain;
 
@@ -207,28 +207,6 @@ const style = styled.div`
           }
         }
 
-        .back-btn {
-          background: transparent;
-          border: 1px solid #D0D5DD;
-          border-radius: 8px;
-          padding: 8px 16px;
-          font-size: 14px;
-          font-weight: 500;
-          color: #344054;
-          cursor: pointer;
-          transition: all 0.2s ease;
-          box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
-
-          &:hover {
-            background: #F9FAFB;
-            border-color: #98A2B3;
-          }
-
-          &:active {
-            transform: scale(0.98);
-          }
-        }
-
         .ant-btn {
           font-size: 14px;
           padding: 6px 0;
@@ -270,21 +248,6 @@ const style = styled.div`
       }
     }
 
-    .ant-btn {
-      width: 90px !important;
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-
-      &.w-100 {
-        width: 100% !important;
-      }
-
-      span {
-        margin: 0 auto;
-      }
-    }
-
     .nav-extra {
       position: fixed;
       top: 0;

package/src/@daf/layouts/AuthLayout/components/Select/index.jsx

@@ -0,0 +1,146 @@
+/* eslint-disable react/prop-types */
+import React, { useEffect, useMemo, useRef, useState } from "react"
+import { formatClassname } from '../../../../../helpers/ClassesHelper.js';
+import Style from "./style";
+
+function useOutsideAlerter({ ref, secondRef, onOutside = () => { } }) {
+  useEffect(() => {
+    function handleClickOutside(event) {
+      if (ref.current && !ref.current.contains(event.target)
+        && secondRef.current && !secondRef.current.contains(event.target)) {
+        onOutside();
+      }
+    }
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [ref]);
+}
+
+const Options = ({
+  values = [],
+  onChange = () => { },
+  value = '',
+  setToggled = () => { },
+  toggled = false,
+  secondRef = {},
+}) => {
+  const ref = useRef();
+  useOutsideAlerter({ ref, secondRef, onOutside: () => setToggled(false) });
+
+  return (
+    <div
+      className={formatClassname(['select-options', !toggled && 'not-toggled'])}
+      ref={ref}
+    >
+      {values.map((val) => (
+        <div
+          className={formatClassname(['value', val.value === value && 'active-value'])}
+          key={val.value}
+          onClick={() => onChange(val.value)}
+        >
+          {val.label}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+let timeout = null;
+
+export const Select = ({
+  bordered,
+  values = [],
+  defaultValue = '',
+  onChange = () => { },
+}) => {
+  const ref = useRef();
+  const [value, setValue] = useState(defaultValue);
+  const [toggled, setToggled] = useState(false);
+  const [visible, setVisible] = useState(false);
+
+  useEffect(() => {
+    setValue(defaultValue);
+  }, [defaultValue]);
+
+  const valueLabel = useMemo(() => {
+    if (value === 'en') {
+      return (
+        <div className="country-cont flex-r">
+          <div className="flex-c jus-c">
+            <img src="/assets/images/countries/gb.png" alt="" />
+          </div>
+          <div className="flex-c jus-c">
+            <span>EN</span>
+          </div>
+        </div>
+      );
+    }
+
+    if (value === 'sp') {
+      return (
+        <div className="country-cont flex-r">
+          <div className="flex-c jus-c">
+            <img src="/assets/images/countries/sp.png" alt="" />
+          </div>
+          <div className="flex-c jus-c">
+            <span>ES</span>
+          </div>
+        </div>
+      );
+    }
+
+    return (
+      <div className="country-cont flex-r">
+        <div className="flex-c jus-c">
+          <img src="/assets/images/countries/fr.png" alt="" />
+        </div>
+        <div className="flex-c jus-c">
+          <span>FR</span>
+        </div>
+      </div>
+    );
+  }, [values, value]);
+
+  useEffect(() => {
+    if (toggled) {
+      setVisible(true);
+    } else {
+      timeout = setTimeout(() => setVisible(false), 300);
+    }
+    return () => {
+      if (timeout) {
+        clearTimeout(timeout);
+        timeout = null;
+      }
+    }
+  }, [toggled]);
+
+  return (
+    <Style>
+      <div
+        className={formatClassname(['select-navbar', bordered && 'bordered'])}
+        onClick={() => setToggled((p) => !p)}
+        ref={ref}
+      >
+        <div>{valueLabel}</div>
+      </div>
+      {visible && (
+        <Options
+          value={value}
+          secondRef={ref}
+          values={values}
+          toggled={toggled}
+          onChange={(val) => {
+            setValue(val);
+            setToggled(false);
+            onChange(val);
+          }}
+          setToggled={setToggled}
+        />
+      )}
+    </Style>
+  );
+}

package/src/@daf/layouts/AuthLayout/components/Select/style.js

@@ -0,0 +1,122 @@
+import styled from "styled-components";
+import { MOBILE_WIDTH, TABLET_WIDTH } from "datastake-daf/src/constants/Style";
+
+const Style = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  position: relative;
+
+  .flex-r {
+    display: flex;
+  }
+
+  .flex-c {
+    display: flex;
+    flex-direction: column;
+
+    img {
+        border-radius: 50%;
+        margin-top: -2px;
+    }
+  }
+
+  .justify-center {
+    justify-content: center;
+  }
+
+  .select-navbar {
+    padding: 0 .75rem;
+
+    div {
+      width: 4.625rem;
+      user-select: none;
+      font-size: .875rem;
+      font-weight: 500;
+      text-align: center;
+      color: #193E61; 
+      cursor: pointer;
+    }
+
+    .country-cont {
+      justify-content: center;
+      gap: 0.6rem;
+
+      .flex-c {
+        width: fit-content;
+      }
+
+      img {
+        width: 18px;
+        height: 18px;
+      }
+
+      span {
+        color: $gray-100;
+        font-size: 14px;
+      }
+    }
+
+    &.bordered {
+      .country-cont {
+        img {
+          width: 14px;
+          height: 14px;
+          border-radius: 100%;
+        }
+      }
+    }
+  }
+
+  .select-options {
+    position: absolute;
+    width: 100%;
+    top: 55px;
+    left: 0;
+    background-color: white;
+    border-radius: 8px;
+    box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
+    padding: .75rem 0;
+    z-index: 100;
+    animation: .3s fade forwards;
+
+    &.not-toggled {
+      animation: .3s fadeOut forwards;
+    }
+
+    @media (${TABLET_WIDTH}) {
+      top: 50px;
+    }
+
+    @media (${MOBILE_WIDTH}) {
+      top: 3.5rem;
+    }
+
+    .value {
+      padding: .75rem 0rem;
+      margin: 0 .75rem;
+      text-align: center;
+      font-size: 1rem;
+      font-weight: 500;
+      cursor: pointer;
+      user-select: none;
+
+      &.active-value {
+        background-color: #265A80;
+        color: white;
+      }
+    }
+  }
+
+  @keyframes fade {
+    0% { opacity: 0; }
+    100% { opacity: 1; }
+  }
+
+  @keyframes fadeOut {
+    0% { opacity: 1; }
+    100% { opacity: 0; }
+  }
+`;
+
+export default Style;

package/src/@daf/layouts/AuthLayout/index.jsx

@@ -23,6 +23,7 @@ const AuthLayout = ({
   showBack = false,
   onBack,
   backLabel = "Back",
+  defaultValue = "en",
 }) => {
   const Wrapper = StyleComponent || "div";
   const wrapperClassName = formatClassname([
@@ -44,9 +45,10 @@ const AuthLayout = ({
           showBack={showBack}
           onBack={onBack}
           backLabel={backLabel}
+          defaultValue={defaultValue}
         />
       )}
-<Style>
+    <Style>
       <div className="main-cont">
         <div className={formatClassname(["d-cont left", leftClassName])}>
           <div className="main">