@stokr/components-library 3.0.62 → 3.0.64

package/README.md

@@ -1,166 +1,166 @@
-# @stokr/components-library
-
-React UI library for STOKR apps: modals, forms, navigation, tables, auth context, styles.
-
-## Contents
-
-- [Quick start](#quick-start) — install, router, `AuthProvider`, styles
-- [Configuration reference](#runtime-config) — `config` keys & helpers
-- [AuthProvider & AuthContext](#authprovider-optional-props)
-- [Troubleshooting](#troubleshooting)
-- [Development](#development--publishing)
-
----
-
-## Quick start
-
-**Install**
-
-```bash
-npm install @stokr/components-library
-npm install react react-dom styled-components react-router-dom
-```
-
-Peers: React 18+/19+, styled-components 6.x, react-router-dom 6.x when you use routing-driven components (`HeaderHo`, `MainMenu`, …).
-
-**1. Router** — Navigation helpers need a React Router:
-
-```jsx
-import { BrowserRouter } from 'react-router-dom'
-import { RouterWrapper } from '@stokr/components-library'
-
-// Normal app
-root.render(
-  <BrowserRouter>
-    <App />
-  </BrowserRouter>,
-)
-
-// Outside a Router: RouterWrapper wraps children in BrowserRouter once.
-// Inside an existing Router: it renders children only (no nested BrowserRouter).
-root.render(
-  <RouterWrapper>
-    <App />
-  </RouterWrapper>,
-)
-```
-
-**2. Auth & runtime config (required when consuming via npm)** — Vite freezes `import.meta.env` inside pre-built deps, so push your `.env` at runtime via `config`:
-
-```jsx
-import { AuthProvider } from '@stokr/components-library'
-
-export default function App() {
-  return (
-    <AuthProvider
-      config={{
-        apiUrl: import.meta.env.VITE_API_URL,
-        baseUrlPublic: import.meta.env.VITE_BASE_URL_PUBLIC,
-        cookieDomain: import.meta.env.VITE_COOKIE_DOMAIN,
-        websiteDomain: import.meta.env.VITE_WEBSITE_DOMAIN,
-        photoApiUrl: import.meta.env.VITE_PHOTO_API_URL,
-        onboardingUrl: import.meta.env.VITE_ONBOARDING_URL,
-        dashboardUrl: import.meta.env.VITE_DASHBOARD_URL,
-        adminUrl: import.meta.env.VITE_ADMIN_URL,
-        registerUrl: import.meta.env.VITE_REGISTER_URL,
-        firebase: {
-          apiKey: import.meta.env.VITE_FIREBASE_API_KEY,
-          authDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN,
-          projectId: import.meta.env.VITE_FIREBASE_PROJECT_ID,
-          storageBucket: import.meta.env.VITE_FIREBASE_STORAGE_BUCKET,
-          messagingSenderId: import.meta.env.VITE_FIREBASE_MESSAGING_SENDER_ID,
-          appId: import.meta.env.VITE_FIREBASE_APP_ID,
-          measurementId: import.meta.env.VITE_FIREBASE_MEASUREMENT_ID,
-        },
-      }}>
-      {/* app */}
-    </AuthProvider>
-  )
-}
-```
-
-**3. Earlier config** (e.g. analytics before mount): `import { configure } from '@stokr/components-library'` with the same shape as `config`.
-
-**4. Icons / fonts** — Optional: `<IoniconsStyles />` at root, or rely on lazy injection when a component uses icons; for Layout / Open Sans: `import '@stokr/components-library/styles.css'`.
-
-**5. Imports** — `import { ConfirmModal, Button, … } from '@stokr/components-library'`.
-
-Full URL env example:
-
-```bash
-VITE_WEBSITE_DOMAIN=example.com
-VITE_ONBOARDING_URL=https://signup.example.com
-VITE_DASHBOARD_URL=https://dashboard.example.com
-VITE_ADMIN_URL=https://admin.example.com
-VITE_REGISTER_URL=https://example.com/signup
-```
-
----
-
-## Configuration reference {#runtime-config}
-
-| `config` key      | Typical `VITE_*`           | Role                                      |
-| ----------------- | -------------------------- | ----------------------------------------- |
-| `apiUrl`          | `VITE_API_URL`             | Authenticated REST base                   |
-| `baseUrlPublic`   | `VITE_BASE_URL_PUBLIC`     | Public API base                           |
-| `cookieDomain`    | `VITE_COOKIE_DOMAIN`       | Auth cookie `domain` attribute            |
-| `websiteDomain`   | `VITE_WEBSITE_DOMAIN`      | Bare host → links / `getPlatformURL()`    |
-| `photoApiUrl`     | `VITE_PHOTO_API_URL`       | Avatars / media                           |
-| `onboardingUrl`   | `VITE_ONBOARDING_URL`      | Full signup/sign-in app URL               |
-| `dashboardUrl`    | `VITE_DASHBOARD_URL`       | Investor dashboard URL                    |
-| `adminUrl`        | `VITE_ADMIN_URL`           | Venture / admin dashboard URL             |
-| `registerUrl`     | `VITE_REGISTER_URL`        | Public registration entry                 |
-| `firebase`        | `VITE_FIREBASE_*`          | Firebase client config                    |
-
-**Helpers:** `getConfig('…')` for any key above; `getPlatformURL()` → `https://{websiteDomain}`; `getAnalyticsIngestUrl()`, `getBackofficeAppUrl(path)`; **`getFooterGroups()`** replaces static footer URL lists.
-
-**Auth-only HTTP:** `authenticationApi.post(segment, body)` for `auth/*`; default axios stays the main API client after login.
-
-Missing overrides may trigger a **one-time** warning listing unresolved `VITE_*` expectations.
-
----
-
-## AuthProvider & AuthContext {#authprovider-optional-props}
-
-`AuthProvider` is wrapped with **`withRouter`** — mount it inside a **`Router`** so redirects work.
-
-### Optional provider props
-
-- **`inactivityTimeMs`** — Idle timeout before auto-logout + session modal (default 5 min).
-- **`accessTokenExpiryMs`** — Cookie TTL when **`Auth.setAccessToken`** runs (default **`DEFAULT_TOKEN_EXPIRY_MS`** = 1 h); not extended by **`getUser`** alone.
-- **`hideInactivityModal`** — Suppress built-in session modal.
-- **`customValidateGetUser(user)`** — Hook after **`user/get`** succeeds (see `src/context/AuthContext.js`).
-
-### AuthContext consumer {#authcontext-usecontext}
-
-`import { AuthContext } from '…'` then `useContext(AuthContext)`.
-
-- **Invalid Firebase guard:** value is **`{ user: null, isFetchingUser: false }`** only (no methods).
-- **State (grouped):** `user` / `firebaseUser`, `isFetchingUser`, `avatar`; MFA (`waitingFor2fa`, `userMfaEnrollment`, `firebaseError`); verify-email (`verifyEmailError`, `isVerifyingEmail`); session UX (`loggedOutDueToInactivity`, `loggedOutDueToCookieExpiry`, `sessionExpiryPendingReason`).
-- **Actions (grouped):** `userRef`, `loginUser`, `logoutUser`, `getUser`, `setUser`, `updateUser`, `refreshIdToken`; `checkUserIsValid`, `checkTokenIsValid`; `uploadPhoto`, `deletePhoto`, `checkUserPhoto`; MFA enroll / verify / unenroll + `reset2faFlow`; subscription/onboarding helpers; password & email (`handleResetPassword`, `handleVerifyEmail`, `requestUpdateEmail`, …); wallets / PoA (`uploaProofOfAddress` keeps the source spelling); **`dismissSessionExpiryModal`**.
-
-Use **`AuthConsumer`** for the render-prop pattern.
-
----
-
-## Troubleshooting {#troubleshooting}
-
-**`useNavigate` / Router**
-
-Add `BrowserRouter` (or **`RouterWrapper`** from this package where the shell has no router). Install `react-router-dom`.
-
-**Invalid hook call / duplicated React**
-
-Dedupe peers in Vite: `resolve: { dedupe: ['react', 'react-dom', 'styled-components'] }`.
-
----
-
-## Development {#development--publishing}
-
-| Command              | Meaning                          |
-| -------------------- | -------------------------------- |
-| `npm run storybook`  | Local docs / stories             |
-| `npm run build:dist` | Library build + static copy      |
-| `npm run pub`        | Build then publish (`npm login`) |
-
-Release: changelog entry → `npm version` → `npm run pub`. Details: [CHANGELOG.md](CHANGELOG.md).
+# @stokr/components-library
+
+React UI library for STOKR apps: modals, forms, navigation, tables, auth context, styles.
+
+## Contents
+
+- [Quick start](#quick-start) — install, router, `AuthProvider`, styles
+- [Configuration reference](#runtime-config) — `config` keys & helpers
+- [AuthProvider & AuthContext](#authprovider-optional-props)
+- [Troubleshooting](#troubleshooting)
+- [Development](#development--publishing)
+
+---
+
+## Quick start
+
+**Install**
+
+```bash
+npm install @stokr/components-library
+npm install react react-dom styled-components react-router-dom
+```
+
+Peers: React 18+/19+, styled-components 6.x, react-router-dom 6.x when you use routing-driven components (`HeaderHo`, `MainMenu`, …).
+
+**1. Router** — Navigation helpers need a React Router:
+
+```jsx
+import { BrowserRouter } from 'react-router-dom'
+import { RouterWrapper } from '@stokr/components-library'
+
+// Normal app
+root.render(
+  <BrowserRouter>
+    <App />
+  </BrowserRouter>,
+)
+
+// Outside a Router: RouterWrapper wraps children in BrowserRouter once.
+// Inside an existing Router: it renders children only (no nested BrowserRouter).
+root.render(
+  <RouterWrapper>
+    <App />
+  </RouterWrapper>,
+)
+```
+
+**2. Auth & runtime config (required when consuming via npm)** — Vite freezes `import.meta.env` inside pre-built deps, so push your `.env` at runtime via `config`:
+
+```jsx
+import { AuthProvider } from '@stokr/components-library'
+
+export default function App() {
+  return (
+    <AuthProvider
+      config={{
+        apiUrl: import.meta.env.VITE_API_URL,
+        baseUrlPublic: import.meta.env.VITE_BASE_URL_PUBLIC,
+        cookieDomain: import.meta.env.VITE_COOKIE_DOMAIN,
+        websiteDomain: import.meta.env.VITE_WEBSITE_DOMAIN,
+        photoApiUrl: import.meta.env.VITE_PHOTO_API_URL,
+        onboardingUrl: import.meta.env.VITE_ONBOARDING_URL,
+        dashboardUrl: import.meta.env.VITE_DASHBOARD_URL,
+        adminUrl: import.meta.env.VITE_ADMIN_URL,
+        registerUrl: import.meta.env.VITE_REGISTER_URL,
+        firebase: {
+          apiKey: import.meta.env.VITE_FIREBASE_API_KEY,
+          authDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN,
+          projectId: import.meta.env.VITE_FIREBASE_PROJECT_ID,
+          storageBucket: import.meta.env.VITE_FIREBASE_STORAGE_BUCKET,
+          messagingSenderId: import.meta.env.VITE_FIREBASE_MESSAGING_SENDER_ID,
+          appId: import.meta.env.VITE_FIREBASE_APP_ID,
+          measurementId: import.meta.env.VITE_FIREBASE_MEASUREMENT_ID,
+        },
+      }}>
+      {/* app */}
+    </AuthProvider>
+  )
+}
+```
+
+**3. Earlier config** (e.g. analytics before mount): `import { configure } from '@stokr/components-library'` with the same shape as `config`.
+
+**4. Icons / fonts** — Optional: `<IoniconsStyles />` at root, or rely on lazy injection when a component uses icons; for Layout / Open Sans: `import '@stokr/components-library/styles.css'`.
+
+**5. Imports** — `import { ConfirmModal, Button, … } from '@stokr/components-library'`.
+
+Full URL env example:
+
+```bash
+VITE_WEBSITE_DOMAIN=example.com
+VITE_ONBOARDING_URL=https://signup.example.com
+VITE_DASHBOARD_URL=https://dashboard.example.com
+VITE_ADMIN_URL=https://admin.example.com
+VITE_REGISTER_URL=https://example.com/signup
+```
+
+---
+
+## Configuration reference {#runtime-config}
+
+| `config` key      | Typical `VITE_*`           | Role                                      |
+| ----------------- | -------------------------- | ----------------------------------------- |
+| `apiUrl`          | `VITE_API_URL`             | Authenticated REST base                   |
+| `baseUrlPublic`   | `VITE_BASE_URL_PUBLIC`     | Public API base                           |
+| `cookieDomain`    | `VITE_COOKIE_DOMAIN`       | Auth cookie `domain` attribute            |
+| `websiteDomain`   | `VITE_WEBSITE_DOMAIN`      | Bare host → links / `getPlatformURL()`    |
+| `photoApiUrl`     | `VITE_PHOTO_API_URL`       | Avatars / media                           |
+| `onboardingUrl`   | `VITE_ONBOARDING_URL`      | Full signup/sign-in app URL               |
+| `dashboardUrl`    | `VITE_DASHBOARD_URL`       | Investor dashboard URL                    |
+| `adminUrl`        | `VITE_ADMIN_URL`           | Venture / admin dashboard URL             |
+| `registerUrl`     | `VITE_REGISTER_URL`        | Public registration entry                 |
+| `firebase`        | `VITE_FIREBASE_*`          | Firebase client config                    |
+
+**Helpers:** `getConfig('…')` for any key above; `getPlatformURL()` → `https://{websiteDomain}`; `getAnalyticsIngestUrl()`, `getBackofficeAppUrl(path)`; **`getFooterGroups()`** replaces static footer URL lists.
+
+**Auth-only HTTP:** `authenticationApi.post(segment, body)` for `auth/*`; default axios stays the main API client after login.
+
+Missing overrides may trigger a **one-time** warning listing unresolved `VITE_*` expectations.
+
+---
+
+## AuthProvider & AuthContext {#authprovider-optional-props}
+
+`AuthProvider` is wrapped with **`withRouter`** — mount it inside a **`Router`** so redirects work.
+
+### Optional provider props
+
+- **`inactivityTimeMs`** — Idle timeout before auto-logout + session modal (default 5 min).
+- **`accessTokenExpiryMs`** — Cookie TTL when **`Auth.setAccessToken`** runs (default **`DEFAULT_TOKEN_EXPIRY_MS`** = 1 h); not extended by **`getUser`** alone.
+- **`hideInactivityModal`** — Suppress built-in session modal.
+- **`customValidateGetUser(user)`** — Hook after **`user/get`** succeeds (see `src/context/AuthContext.js`).
+
+### AuthContext consumer {#authcontext-usecontext}
+
+`import { AuthContext } from '…'` then `useContext(AuthContext)`.
+
+- **Invalid Firebase guard:** value is **`{ user: null, isFetchingUser: false }`** only (no methods).
+- **State (grouped):** `user` / `firebaseUser`, `isFetchingUser`, `avatar`; MFA (`waitingFor2fa`, `userMfaEnrollment`, `firebaseError`); verify-email (`verifyEmailError`, `isVerifyingEmail`); session UX (`loggedOutDueToInactivity`, `loggedOutDueToCookieExpiry`, `sessionExpiryPendingReason`).
+- **Actions (grouped):** `userRef`, `loginUser`, `logoutUser`, `getUser`, `setUser`, `updateUser`, `refreshIdToken`; `checkUserIsValid`, `checkTokenIsValid`; `uploadPhoto`, `deletePhoto`, `checkUserPhoto`; MFA enroll / verify / unenroll + `reset2faFlow`; subscription/onboarding helpers; password & email (`handleResetPassword`, `handleVerifyEmail`, `requestUpdateEmail`, …); wallets / PoA (`uploaProofOfAddress` keeps the source spelling); **`dismissSessionExpiryModal`**.
+
+Use **`AuthConsumer`** for the render-prop pattern.
+
+---
+
+## Troubleshooting {#troubleshooting}
+
+**`useNavigate` / Router**
+
+Add `BrowserRouter` (or **`RouterWrapper`** from this package where the shell has no router). Install `react-router-dom`.
+
+**Invalid hook call / duplicated React**
+
+Dedupe peers in Vite: `resolve: { dedupe: ['react', 'react-dom', 'styled-components'] }`.
+
+---
+
+## Development {#development--publishing}
+
+| Command              | Meaning                          |
+| -------------------- | -------------------------------- |
+| `npm run storybook`  | Local docs / stories             |
+| `npm run build:dist` | Library build + static copy      |
+| `npm run pub`        | Build then publish (`npm login`) |
+
+Release: changelog entry → `npm version` → `npm run pub`. Details: [CHANGELOG.md](CHANGELOG.md).

package/dist/components/2FA/Connect2FA.js

@@ -23,13 +23,7 @@ const Connect2FA = (props) => {
     ] }),
     /* @__PURE__ */ jsx(Column, { part: 8, children: /* @__PURE__ */ jsxs(ModalInner, { children: [
       totpData && /* @__PURE__ */ jsxs(ComponentWrapper, { center: true, noPaddingHorizontal: true, children: [
-        !isMobile && /* @__PURE__ */ jsx(
-          QRCodeSVG,
-          {
-            size: 180,
-            value: totpData?.totpUri
-          }
-        ),
+        !isMobile && /* @__PURE__ */ jsx(QRCodeSVG, { size: 180, value: totpData?.totpUri }),
         /* @__PURE__ */ jsx(
           stdin_default$1,
           {
@@ -43,7 +37,7 @@ const Connect2FA = (props) => {
           }
         )
       ] }),
-      /* @__PURE__ */ jsx(ComponentWrapper, { noPaddingTop: true, center: true, noPaddingHorizontal: true, children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx(ComponentWrapper, { noPaddingTop: true, noPaddingBottom: true, center: true, noPaddingHorizontal: true, children: /* @__PURE__ */ jsx(
         Button,
         {
           minWidth: "150px",

package/dist/components/2FA/enable-2fa-flow.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { useContext, useState, useEffect } from "react";
+import { useContext, useState, useRef, useLayoutEffect, useEffect } from "react";
 import { Modal } from "../Modal/Modal.js";
 import stdin_default$2 from "../StepController/StepController.js";
 import { StepControllerProvider, StepControllerConsumer } from "../StepController/StepControllerContext.js";
@@ -15,10 +15,26 @@ const stepsNames = ["app", "connect", "enter-code"];
 const Enable2FAFlow = ({ showFlow, setShowFlow, onSuccess, totpData, onRequiresRecentLoginError }) => {
   const { user, firebaseUser, enrollUserToTotp, refreshIdToken } = useContext(AuthContext);
   const [showSuccess, setshowSuccess] = useState(false);
+  const [flowKey, setFlowKey] = useState(0);
+  const prevShowFlowRef = useRef(showFlow);
+  const isFirstMountRef = useRef(true);
   const [popupError, setpopupError] = useState({
     popup: void 0,
     message: void 0
   });
+  useLayoutEffect(() => {
+    if (isFirstMountRef.current) {
+      isFirstMountRef.current = false;
+      prevShowFlowRef.current = showFlow;
+      return;
+    }
+    if (showFlow && !prevShowFlowRef.current) {
+      setFlowKey((key) => key + 1);
+      setshowSuccess(false);
+      setpopupError({ popup: void 0, message: void 0 });
+    }
+    prevShowFlowRef.current = showFlow;
+  }, [showFlow]);
   const refreshToken = async () => {
     try {
       refreshIdToken();
@@ -83,7 +99,7 @@ const Enable2FAFlow = ({ showFlow, setShowFlow, onSuccess, totpData, onRequiresR
       subTitleLeft: "Your log in 2FA authentication is now set",
       textRight: "You will now be asked for your 2FA code next time you log in."
     }
-  ) : /* @__PURE__ */ jsx(StepControllerProvider, { initialStep: "app", children: /* @__PURE__ */ jsx(StepControllerConsumer, { children: (stepController) => {
+  ) : /* @__PURE__ */ jsx(StepControllerProvider, { initialStep: stepsNames[0], children: /* @__PURE__ */ jsx(StepControllerConsumer, { children: (stepController) => {
     const prevStepIndex = stepController.activeStepIndex - 1;
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(
@@ -143,7 +159,7 @@ const Enable2FAFlow = ({ showFlow, setShowFlow, onSuccess, totpData, onRequiresR
         }
       )
     ] });
-  } }) }) }) });
+  } }) }, flowKey) }) });
 };
 var stdin_default = Enable2FAFlow;
 export {

package/dist/components/Footer/Footer.js

@@ -2,26 +2,40 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import PropTypes from "prop-types";
 import "react";
 import { Wrapper } from "../Grid/Grid.styles.js";
-import { StyledFooter, FooterInner, PartnerWrap, Partner, LogoWrap, PoweredWrap, Copyright } from "./Footer.styles.js";
+import { StyledFooter, FooterInner, PartnerWrap, Partner, PartnerLine, PartnerLineBreak, LogoWrap, PoweredWrap, Copyright } from "./Footer.styles.js";
 import MangoPayLogo from "../../static/images/mangopay.svg.js";
 const Footer = ({ color = "primary", hasSidebar = false, isSidebarExpanded }) => /* @__PURE__ */ jsx(StyledFooter, { color, isSidebarExpanded, hasSidebar, children: /* @__PURE__ */ jsx(Wrapper, { children: /* @__PURE__ */ jsxs(FooterInner, { hasSidebar, children: [
   /* @__PURE__ */ jsx(PartnerWrap, { children: /* @__PURE__ */ jsxs(Partner, { children: [
-    "STOKR is a virtual asset service provider (VASP), ",
-    /* @__PURE__ */ jsx("br", {}),
-    " ",
-    /* @__PURE__ */ jsx(
-      "a",
-      {
-        href: "https://searchentities.apps.cssf.lu/search-entities/search?&st=advanced&entType=VAP&entDate=2020-08-01",
-        title: "registered",
-        target: "_blank",
-        rel: "noopener noreferrer",
-        style: { textDecoration: "underline", color: "white" },
-        children: "registered"
-      }
-    ),
-    " ",
-    "with the Luxembourg regulator CSSF."
+    /* @__PURE__ */ jsxs(PartnerLine, { children: [
+      "STOKR is a crypto asset service provider (",
+      /* @__PURE__ */ jsx(
+        "a",
+        {
+          href: "https://edesk.apps.cssf.lu/search-entities/entite/details/7079114?lng=en&q=&st=advanced&entType=CASP&entDate=2020-08-01",
+          title: "CASP",
+          target: "_blank",
+          rel: "noopener noreferrer",
+          style: { textDecoration: "underline", color: "white" },
+          children: "CASP"
+        }
+      ),
+      ")",
+      /* @__PURE__ */ jsx(PartnerLineBreak, {}),
+      "and payment institution (",
+      /* @__PURE__ */ jsx(
+        "a",
+        {
+          href: "https://edesk.apps.cssf.lu/search-entities/entite/details/7079119?lng=en&q=&st=advanced&entType=PI&entDate=2020-08-01",
+          title: "PI",
+          target: "_blank",
+          rel: "noopener noreferrer",
+          style: { textDecoration: "underline", color: "white" },
+          children: "PI"
+        }
+      ),
+      "),"
+    ] }),
+    /* @__PURE__ */ jsx(PartnerLine, { children: "registered with the Luxembourg regulator CSSF." })
   ] }) }),
   /* @__PURE__ */ jsx(LogoWrap, { children: /* @__PURE__ */ jsx(
     "img",

package/dist/components/Footer/Footer.styles.js

@@ -1,7 +1,8 @@
-import styled, { css } from "styled-components";
-import grid from "../../styles/grid.js";
 import rwd from "../../styles/rwd.js";
+import grid from "../../styles/grid.js";
 import { colors } from "../../styles/colors.js";
+import spacing from "../../styles/spacing.js";
+import styled, { css } from "styled-components";
 const StyledFooter = styled.footer.withConfig({
   shouldForwardProp: (props) => !["color", "hasSidebar", "isSidebarExpanded"].includes(props)
 })`
@@ -20,16 +21,20 @@ const StyledFooter = styled.footer.withConfig({
   ${(props) => props.color === "red" && css`
       color: ${colors.white};
       background-color: ${colors.rustyRed};
+      padding: 0 25px;
 
       ${rwd.Medium`
-      box-shadow: inset 0 1px 0 0 ${colors.rustyRed};
-      padding: 0 65px;
-    `}
+        box-shadow: inset 0 1px 0 0 ${colors.rustyRed};
+      `}
+
+      ${rwd.XLarge`
+        padding: 0 50px;
+      `}
     `}
 
   ${rwd.Medium`
     width: 100%;
-    height: 65px;
+    min-height: ${spacing.footerHeight}px;
   `}
 
   @media screen and (max-width: 991px) {
@@ -56,10 +61,10 @@ const FooterInner = styled.div.withConfig({
   `}
 
   ${rwd.Medium`
-    padding: 20px 0;
+    padding: 14px 0;
     display: flex;
     align-items: center;
-    height: 100%;
+    min-height: ${spacing.footerHeight}px;
 
      ${(props) => props.hasSidebar && `
       padding: 20px ${grid(1)};
@@ -89,8 +94,7 @@ styled.div`
 const PartnerWrap = styled.div`
   text-align: center;
 
-  ${rwd.Medium`
-    // flex: 2;
+  ${rwd.MLarge`
     text-align: left;
   `}
 
@@ -184,21 +188,36 @@ styled.nav`
   }
 `;
 const Partner = styled.span`
+  display: block;
   text-transform: uppercase;
 
   font-size: 10px;
   font-weight: 400;
   line-height: 1.8;
-  letter-spacing: 2.1px;
+  letter-spacing: 1.8px;
 
   img {
     margin-bottom: 4px;
   }
 
   @media screen and (max-width: 560px) {
-    line-height: 20px;
+    line-height: 16px;
   }
 `;
+const PartnerLine = styled.span`
+  display: block;
+
+  ${rwd.MLarge`
+    white-space: nowrap;
+  `}
+`;
+const PartnerLineBreak = styled.span`
+  display: block;
+
+  ${rwd.XLarge`
+    display: none;
+  `}
+`;
 const Copyright = styled.span`
   img {
     margin-bottom: 4px;
@@ -250,6 +269,8 @@ export {
   FooterInner,
   LogoWrap,
   Partner,
+  PartnerLine,
+  PartnerLineBreak,
   PartnerWrap,
   PoweredWrap,
   StyledFooter

package/dist/components/StepController/StepController.js

@@ -1,13 +1,29 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import React__default, { PureComponent, Fragment } from "react";
 import PropTypes from "prop-types";
-import { StepsProgressContainer, StepContainer } from "./StepController.styles.js";
+import { Transition } from "../../utils/transition.js";
+import React__default, { PureComponent, Fragment } from "react";
 import stdin_default$1 from "./StepControllerProgress.js";
+import { StepsProgressContainer, StepContainer } from "./StepController.styles.js";
+const timeout = 300;
+const getTransitionStyles = {
+  entering: {
+    opacity: 0
+  },
+  entered: {
+    transition: `opacity ${timeout}ms ease-in-out`,
+    opacity: 1
+  },
+  exiting: {
+    transition: `opacity ${timeout}ms ease-in-out`,
+    opacity: 0
+  }
+};
 class StepController extends PureComponent {
   componentDidMount() {
     const { changeStep, stepsProgressList, currentStep } = this.props;
-    if (!currentStep && stepsProgressList[0]?.id) {
-      changeStep(stepsProgressList[0].id);
+    const firstStepId = stepsProgressList[0]?.id;
+    if (firstStepId && currentStep !== firstStepId) {
+      changeStep(firstStepId, 0, []);
     }
   }
   render() {
@@ -22,12 +38,33 @@ class StepController extends PureComponent {
           stepsProgressList
         }
       ) }),
-      /* @__PURE__ */ jsx(StepContainer, { children: /* @__PURE__ */ jsx("div", { style: { height: "100%" }, children: React__default.Children.map(children, (child) => {
-        if (child.props.id === currentStep && React__default.isValidElement(child)) {
-          return /* @__PURE__ */ jsx(Fragment, { children: child }, child.props.id);
+      /* @__PURE__ */ jsx(StepContainer, { children: /* @__PURE__ */ jsx(
+        Transition,
+        {
+          timeout: {
+            enter: timeout,
+            exit: timeout
+          },
+          nodeRef: this.stepRef,
+          children: (status) => /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: this.stepRef,
+              style: {
+                width: "100%",
+                height: "100%",
+                ...getTransitionStyles[status]
+              },
+              children: React__default.Children.map(children, (child) => {
+                if (child.props.id === currentStep && React__default.isValidElement(child)) {
+                  return /* @__PURE__ */ jsx(Fragment, { children: child }, child.props.id);
+                }
+                return null;
+              })
+            }
+          )
         }
-        return null;
-      }) }) })
+      ) })
     ] });
   }
 }

package/dist/components/StepController/StepController.styles.js

@@ -18,6 +18,7 @@ const StepContainer = styled.div.withConfig({
 })`
   width: 100%;
   height: 100%;
+  min-height: 270px;
   position: relative;
   overflow: hidden;