@stokr/components-library 3.0.76 → 3.1.0-alpha.1

package/README.md

@@ -1,177 +1,177 @@
-# @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,
-        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()`    |
-| `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).
-- **`inactivityWarningBeforeMs`** — How long before that timeout to show the **“session about to expire”** warning modal (default 30 s). See [Inactivity auto-logout](#inactivity-auto-logout).
-- **`accessTokenExpiryMs`** — Cookie TTL when **`Auth.setAccessToken`** runs (default **`DEFAULT_TOKEN_EXPIRY_MS`** = 1 h); not extended by **`getUser`** alone.
-- **`hideInactivityModal`** — Suppress both built-in inactivity modals (warning + session expired).
-- **`onSessionExpiredLoginClick`** — Called when the user clicks **Log in** on the session-expired modal.
-- **`customValidateGetUser(user)`** — Hook after **`user/get`** succeeds (see `src/context/AuthContext.js`).
-
-### Inactivity auto-logout {#inactivity-auto-logout}
-
-When a user is logged in, `AuthProvider` resets an idle timer on mouse, keyboard, click, scroll, and touch events.
-
-1. **Warning modal** — Shown **`inactivityWarningBeforeMs`** before the idle deadline (default: 30 s before the 5 min timeout). The user can click **To continue, press here** to reset the idle timer, or close the modal (logout still happens at the deadline). Any activity also resets the timer and closes the warning.
-2. **Session expired modal** — Shown when the idle deadline is reached (existing behaviour). The warning modal closes automatically at the same moment.
-
-Neither modal is shown when the user is not logged in. Both are skipped when **`hideInactivityModal`** is set.
-
-**Storybook:** `Authentication / Auto-logout (inactivity)` → **With warning modal** (20 s idle, warning at 10 s).
-
-### 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`, `showInactivityWarningModal`).
-- **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`**, **`extendSessionFromInactivityWarning`**, **`dismissInactivityWarningModal`**.
-
-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,
+        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()`    |
+| `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).
+- **`inactivityWarningBeforeMs`** — How long before that timeout to show the **“session about to expire”** warning modal (default 30 s). See [Inactivity auto-logout](#inactivity-auto-logout).
+- **`accessTokenExpiryMs`** — Cookie TTL when **`Auth.setAccessToken`** runs (default **`DEFAULT_TOKEN_EXPIRY_MS`** = 1 h); not extended by **`getUser`** alone.
+- **`hideInactivityModal`** — Suppress both built-in inactivity modals (warning + session expired).
+- **`onSessionExpiredLoginClick`** — Called when the user clicks **Log in** on the session-expired modal.
+- **`customValidateGetUser(user)`** — Hook after **`user/get`** succeeds (see `src/context/AuthContext.js`).
+
+### Inactivity auto-logout {#inactivity-auto-logout}
+
+When a user is logged in, `AuthProvider` resets an idle timer on mouse, keyboard, click, scroll, and touch events.
+
+1. **Warning modal** — Shown **`inactivityWarningBeforeMs`** before the idle deadline (default: 30 s before the 5 min timeout). The user can click **To continue, press here** to reset the idle timer, or close the modal (logout still happens at the deadline). Any activity also resets the timer and closes the warning.
+2. **Session expired modal** — Shown when the idle deadline is reached (existing behaviour). The warning modal closes automatically at the same moment.
+
+Neither modal is shown when the user is not logged in. Both are skipped when **`hideInactivityModal`** is set.
+
+**Storybook:** `Authentication / Auto-logout (inactivity)` → **With warning modal** (20 s idle, warning at 10 s).
+
+### 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`, `showInactivityWarningModal`).
+- **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`**, **`extendSessionFromInactivityWarning`**, **`dismissInactivityWarningModal`**.
+
+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/Input/InputPassword.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { useState, useEffect } from "react";
 import PropTypes from "prop-types";
-import stdin_default$1 from "../SvgIcons/CapsLockSvg.js";
+import stdin_default from "../SvgIcons/CapsLockSvg.js";
 import { InfoIcon } from "../InfoIcon/InfoIcon.js";
 import { Wrapper, Label, InputWrap } from "./Input.styles.js";
 import { getPasswordEntropy, ENTROPY_WEAK, ENTROPY_MEDIUM } from "../../utils/password-validation.js";
@@ -105,7 +105,7 @@ const InputPassword = (props) => {
         // )
         /* @__PURE__ */ jsx(Fragment, {})
       ),
-      /* @__PURE__ */ jsx(CapslockIndicator, { children: isCapslockOn && /* @__PURE__ */ jsx(stdin_default$1, {}) })
+      /* @__PURE__ */ jsx(CapslockIndicator, { children: isCapslockOn && /* @__PURE__ */ jsx(stdin_default, {}) })
     ] })
   ] });
 };
@@ -124,9 +124,7 @@ InputPassword.propTypes = {
   autoComplete: PropTypes.string,
   toggleDataCy: PropTypes.string
 };
-var stdin_default = InputPassword;
 export {
   InputPassword,
-  PasswordStrength,
-  stdin_default as default
+  PasswordStrength
 };

package/dist/components/Input/OtpInput.js

@@ -77,8 +77,6 @@ const OtpInput = (props) => {
     ) })
   ] });
 };
-var stdin_default = OtpInput;
 export {
-  OtpInput,
-  stdin_default as default
+  OtpInput
 };

package/dist/components/MenuNav/MenuNav.styles.js

@@ -61,6 +61,5 @@ const MenuNav = styled.nav.withConfig({
   `}
 `;
 export {
-  MenuNav,
-  MenuNav as default
+  MenuNav
 };

package/dist/components/Modal/Modal.js

@@ -18,7 +18,8 @@ const Modal = ({
   background,
   maxHeight,
   boxStyles,
-  maxWidth
+  maxWidth,
+  hideCloseButton = false
 }) => {
   const [isVisible, setIsVisible] = useState(false);
   const [shouldRender, setShouldRender] = useState(false);
@@ -80,7 +81,7 @@ const Modal = ({
             maxHeight,
             maxWidth,
             children: [
-              /* @__PURE__ */ jsx(ModalClose, { onClick: onClose }),
+              !hideCloseButton && /* @__PURE__ */ jsx(ModalClose, { onClick: onClose }),
               children
             ]
           }
@@ -101,7 +102,9 @@ Modal.propTypes = {
   boxStyle: PropTypes.object,
   maxHeight: PropTypes.string,
   /** Max width limit in pixels (e.g., '1200px'). Uses min(percentage, maxWidth) */
-  maxWidth: PropTypes.string
+  maxWidth: PropTypes.string,
+  /** Hides the (X) close button — for flows where the modal is dismissed only via its own actions. */
+  hideCloseButton: PropTypes.bool
 };
 export {
   Modal,

package/dist/components/Modal/Modal.styles.js

@@ -393,7 +393,7 @@ const ModalLink = styled(Link)`
     }
   }
 `;
-const ModalWrapper = styled.div`
+styled.div`
   display: flex;
   flex-direction: column;
   height: 100%;
@@ -453,6 +453,5 @@ export {
   ModalLink,
   ModalLinkWrap,
   ModalRoot,
-  ModalScroll,
-  ModalWrapper
+  ModalScroll
 };

package/dist/components/Modal/SuccessModal/SuccessModal.js

@@ -18,7 +18,8 @@ const SuccessModalComponent = ({
   segment,
   speed = 1,
   modalProps = {},
-  maxWidth = "800px"
+  maxWidth = "800px",
+  hideAnimation = false
 }) => {
   useEffect(() => {
     if (!isOpen) return;
@@ -40,7 +41,7 @@ const SuccessModalComponent = ({
       maxWidth,
       ...modalProps,
       children: /* @__PURE__ */ jsxs(SuccessModalContent, { children: [
-        /* @__PURE__ */ jsx(AnimationContainer, { children: /* @__PURE__ */ jsx(
+        !hideAnimation && /* @__PURE__ */ jsx(AnimationContainer, { children: /* @__PURE__ */ jsx(
           LottieAnimation,
           {
             variant,
@@ -72,7 +73,9 @@ SuccessModalComponent.propTypes = {
   segment: PropTypes.arrayOf(PropTypes.number),
   speed: PropTypes.number,
   modalProps: PropTypes.object,
-  maxWidth: PropTypes.string
+  maxWidth: PropTypes.string,
+  /** Skips the animation container entirely (e.g. a plain form step with no success/progress state). */
+  hideAnimation: PropTypes.bool
 };
 let successContainer = null;
 let successRoot = null;

package/dist/components/Newsletter/Newsletter.js

@@ -115,8 +115,6 @@ ${e}`);
     ] })
   ] }) }) }) });
 };
-var stdin_default = Newsletter;
 export {
-  Newsletter,
-  stdin_default as default
+  Newsletter
 };

package/dist/components/NotificationCounter/NotificationCounter.styles.js

@@ -33,6 +33,5 @@ const NotificationCounter = styled.span.withConfig({
   `}
 `;
 export {
-  NotificationCounter,
-  NotificationCounter as default
+  NotificationCounter
 };

package/dist/components/SmartLink/SmartLink.js

@@ -16,9 +16,7 @@ SmartLink.propTypes = {
   to: PropTypes.string,
   children: PropTypes.node
 };
-var stdin_default = SmartLink;
 export {
   SmartLink,
-  stdin_default as default,
   isExternalUrl
 };

package/dist/components/StepController/StepController.js

@@ -2,7 +2,7 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import PropTypes from "prop-types";
 import { Transition } from "../../utils/transition.js";
 import React__default, { PureComponent, Fragment } from "react";
-import stdin_default$1 from "./StepControllerProgress.js";
+import stdin_default from "./StepControllerProgress.js";
 import { StepsProgressContainer, StepContainer } from "./StepController.styles.js";
 const timeout = 300;
 const getTransitionStyles = {
@@ -30,7 +30,7 @@ class StepController extends PureComponent {
     const { children, stepsProgressList, currentStep, activeStepIndex, doneStepsIndexes, touchedStepsIndexes } = this.props;
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(StepsProgressContainer, { children: /* @__PURE__ */ jsx(
-        stdin_default$1,
+        stdin_default,
         {
           activeStepIndex,
           doneStepsIndexes,
@@ -77,8 +77,6 @@ StepController.propTypes = {
   doneStepsIndexes: PropTypes.arrayOf(PropTypes.number).isRequired,
   changeStep: PropTypes.func.isRequired
 };
-var stdin_default = StepController;
 export {
-  StepController,
-  stdin_default as default
+  StepController
 };

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

@@ -1,6 +1,103 @@
 import styled from "styled-components";
 import rwd from "../../styles/rwd.js";
 import theme from "../../styles/theme.js";
+import { colors } from "../../styles/colors.js";
+const Container = styled.div`
+  display: block;
+  width: 100%;
+  height: 100%;
+`;
+const Wrap = styled.div`
+  display: block;
+  margin: 0 auto;
+`;
+const Items = styled.div`
+  display: flex;
+  height: 100%;
+  font-size: 0;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: center;
+  margin: 0 -6px;
+  text-align: center;
+
+  ${rwd.Medium`
+    display: block;
+  `}
+`;
+const Item = styled.div.withConfig({
+  shouldForwardProp: (props) => !["isDone", "isActive"].includes(props)
+})`
+  position: relative;
+  display: inline-block;
+  vertical-align: middle;
+  padding: 0;
+  flex: 1;
+  margin: 0 4px;
+  height: 32px;
+  max-width: 32px;
+  cursor: pointer;
+
+  &:before {
+    z-index: 0;
+    content: '';
+    display: block;
+    width: 100%;
+    height: 4px;
+    position: absolute;
+    top: 14px;
+    left: 0;
+    border-radius: 3px;
+    box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.05);
+    background-color: ${colors.lightGrey};
+  }
+
+  &:after {
+    z-index: 1;
+    content: '';
+    display: block;
+    width: 100%;
+    height: 4px;
+    position: absolute;
+    top: 14px;
+    left: 0;
+    border-radius: 3px;
+    background-color: transparent;
+    transition: background-color 0.2s;
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  &:hover:after {
+    background-color: ${colors.black};
+  }
+
+  ${(props) => props.isDone && `
+    &:after {
+      background-color: ${colors.progressGreen};
+    }
+
+    &:hover:after {
+      background-color: ${colors.black};
+    }
+  `}
+
+  ${(props) => props.isActive && `
+    &:after {
+      background-color: ${colors.grey2};
+    }
+
+    &:hover:after {
+      background-color: ${colors.black};
+    }
+  `}
+
+  ${rwd.Medium`
+    width: 32px;
+  `}
+`;
 const StepsProgressContainer = styled.div`
   position: relative;
   width: 100%;
@@ -29,6 +126,10 @@ const StepContainer = styled.div.withConfig({
   `}
 `;
 export {
+  Container,
+  Item,
+  Items,
   StepContainer,
-  StepsProgressContainer
+  StepsProgressContainer,
+  Wrap
 };

package/dist/components/StepController/StepControllerProgress.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import "react";
 import PropTypes from "prop-types";
-import { Container, Wrap, Items, Item } from "../StepsProgress/StepsProgress.styles.js";
+import { Container, Wrap, Items, Item } from "./StepController.styles.js";
 const StepControllerProgress = ({
   touchedStepsIndexes,
   doneStepsIndexes,