@npm_leadtech/legal-lib-components 5.65.2 → 5.67.0

package/dist/src/components/organisms/TryOurFreeLegalBlogsContent/TryOurFreeLegalBlogsContent.styled.ts

@@ -7,6 +7,56 @@ export const TryOurFreeLegalBlogsContentStyled = styled.div`
   @media ${device['landscape-tablets']} {
     flex-direction: row;
   }
+
+  &.try-our-free-legal-blogs-section-content--our-mission {
+    margin-top: 1.5rem;
+    margin-bottom: 1.5rem;
+    align-items: center;
+    @media ${device['landscape-tablets']} {
+      margin-top: 3rem;
+    }
+
+    .try-our-free-legal-blogs-section__texts {
+      margin-bottom: 2rem;
+      @media ${device['landscape-tablets']} {
+        margin-bottom: 1rem;
+      }
+
+      &__title {
+        font-family: var(--font-sans);
+        font-size: 28px;
+        font-weight: 700;
+        text-align: left;
+      }
+    }
+  }
+
+  &.try-our-free-legal-blogs-section-content--our-mission-first-image {
+    margin-top: 1.5rem;
+    margin-bottom: 1.5rem;
+    align-items: center;
+    @media ${device['landscape-tablets']} {
+      margin-bottom: 3rem;
+      flex-direction: row-reverse;
+    }
+
+    .try-our-free-legal-blogs-section__texts {
+      margin-bottom: 2rem;
+      @media ${device['landscape-tablets']} {
+        margin-bottom: 1rem;
+        margin-right: 0rem;
+        margin-left: 3rem;
+      }
+
+      &__title {
+        font-family: var(--font-sans);
+        font-size: 28px;
+        font-weight: 700;
+        text-align: left;
+      }
+    }
+  }
+
   .try-our-free-legal-blogs-section__texts {
     flex-basis: 50%;
     display: flex;

package/dist/src/components/organisms/TryOurFreeLegalBlogsContent/TryOurFreeLegalBlogsContent.tsx

@@ -1,12 +1,27 @@
 import React, { type FC } from 'react'
 
+import {
+  type TryOurFreeLegalBlogsContentProps,
+  TryOurFreeLegalBlogsContentType
+} from './TryOurFreeLegalBlogsContentProps.types'
 import { RichTextInner } from '../../atoms'
-import { type TryOurFreeLegalBlogsContentProps } from './TryOurFreeLegalBlogsContentProps.types'
 import { TryOurFreeLegalBlogsContentStyled } from './TryOurFreeLegalBlogsContent.styled'
+import classNames from 'classnames'
 
-const TryOurFreeLegalBlogsContent: FC<TryOurFreeLegalBlogsContentProps> = ({ title, image, children }) => {
+const TryOurFreeLegalBlogsContent: FC<TryOurFreeLegalBlogsContentProps> = ({
+  title,
+  image,
+  children,
+  type = TryOurFreeLegalBlogsContentType.default
+}) => {
+  const classTry = classNames({
+    'try-our-free-legal-blogs-section-content': true,
+    'try-our-free-legal-blogs-section-content--our-mission': TryOurFreeLegalBlogsContentType.ourMission === type,
+    'try-our-free-legal-blogs-section-content--our-mission-first-image':
+      TryOurFreeLegalBlogsContentType.ourMissionFirstImage === type
+  })
   return (
-    <TryOurFreeLegalBlogsContentStyled>
+    <TryOurFreeLegalBlogsContentStyled className={classTry}>
       <div className='try-our-free-legal-blogs-section__texts'>
         <h2 className='try-our-free-legal-blogs-section__texts__title'>{title}</h2>
         <RichTextInner customClass='try-our-free-legal-blogs-section__texts__body'>{children}</RichTextInner>

package/dist/src/components/organisms/TryOurFreeLegalBlogsContent/TryOurFreeLegalBlogsContentProps.types.d.ts

@@ -1,5 +1,11 @@
+export declare enum TryOurFreeLegalBlogsContentType {
+    default = "Default",
+    ourMission = "Our Mission",
+    ourMissionFirstImage = "Our Mission First Image"
+}
 export interface TryOurFreeLegalBlogsContentProps {
     title: string;
     image: React.ReactNode;
     children: React.ReactNode;
+    type?: TryOurFreeLegalBlogsContentType;
 }

package/dist/src/components/organisms/TryOurFreeLegalBlogsContent/TryOurFreeLegalBlogsContentProps.types.js

@@ -1 +1,6 @@
-export {};
+export var TryOurFreeLegalBlogsContentType;
+(function (TryOurFreeLegalBlogsContentType) {
+    TryOurFreeLegalBlogsContentType["default"] = "Default";
+    TryOurFreeLegalBlogsContentType["ourMission"] = "Our Mission";
+    TryOurFreeLegalBlogsContentType["ourMissionFirstImage"] = "Our Mission First Image";
+})(TryOurFreeLegalBlogsContentType || (TryOurFreeLegalBlogsContentType = {}));

package/dist/src/components/organisms/TryOurFreeLegalBlogsContent/TryOurFreeLegalBlogsContentProps.types.ts

@@ -1,5 +1,12 @@
+export enum TryOurFreeLegalBlogsContentType {
+  default = 'Default',
+  ourMission = 'Our Mission',
+  ourMissionFirstImage = 'Our Mission First Image'
+}
+
 export interface TryOurFreeLegalBlogsContentProps {
   title: string
   image: React.ReactNode
   children: React.ReactNode
+  type?: TryOurFreeLegalBlogsContentType
 }

package/dist/src/components/organisms/TryOurFreeLegalBlogsContent/index.d.ts

@@ -1,2 +1,2 @@
 export { default as TryOurFreeLegalBlogsContent } from './TryOurFreeLegalBlogsContent';
-export { type TryOurFreeLegalBlogsContentProps } from './TryOurFreeLegalBlogsContentProps.types';
+export { TryOurFreeLegalBlogsContentType, type TryOurFreeLegalBlogsContentProps } from './TryOurFreeLegalBlogsContentProps.types';

package/dist/src/components/organisms/TryOurFreeLegalBlogsContent/index.js

@@ -1 +1,2 @@
 export { default as TryOurFreeLegalBlogsContent } from './TryOurFreeLegalBlogsContent';
+export { TryOurFreeLegalBlogsContentType } from './TryOurFreeLegalBlogsContentProps.types';

package/dist/src/components/organisms/TryOurFreeLegalBlogsContent/index.ts

@@ -1,2 +1,5 @@
 export { default as TryOurFreeLegalBlogsContent } from './TryOurFreeLegalBlogsContent'
-export { type TryOurFreeLegalBlogsContentProps } from './TryOurFreeLegalBlogsContentProps.types'
+export {
+  TryOurFreeLegalBlogsContentType,
+  type TryOurFreeLegalBlogsContentProps
+} from './TryOurFreeLegalBlogsContentProps.types'

package/dist/src/components/organisms/Wizard/Wizard.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { type WizardProps } from './WizardProps.types';
+export declare const Wizard: React.FC<WizardProps>;

package/dist/src/components/organisms/Wizard/Wizard.js

@@ -0,0 +1,41 @@
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { FOOTER, HEADER } from './constants';
+import React, { useMemo, useState } from 'react';
+import { WizardContext } from './context';
+import { useHash } from './hooks';
+import { wizardNavigationControls } from './controls/navigation';
+export const Wizard = ({ children, isHashEnabled = false, classNames }) => {
+    const [step, setStep] = useState(0);
+    const childrenToArray = React.Children.toArray(children);
+    const filteredChilds = childrenToArray
+        .filter((child) => {
+        if (!React.isValidElement(child))
+            return false;
+        const type = child.type;
+        return Boolean(type.displayName !== FOOTER && type.displayName !== HEADER);
+    })
+        .map((child, index) => React.isValidElement(child)
+        ? React.cloneElement(child, { index })
+        : child);
+    const { updateHash, setStepByHash } = useHash({ children: filteredChilds, isHashEnabled, setStep });
+    const { goToStepByIndex, nextStep, previousStep } = wizardNavigationControls({
+        lastStep: filteredChilds.length - 1,
+        updateHash,
+        isHashEnabled,
+        setStep,
+        step
+    });
+    const currentStep = filteredChilds[step];
+    const getSpecificComponentByDisplayName = (displayName) => {
+        return childrenToArray.find((child) => {
+            if (!React.isValidElement(child))
+                return false;
+            const type = child.type;
+            return type.displayName === displayName;
+        });
+    };
+    const footer = getSpecificComponentByDisplayName(FOOTER);
+    const header = getSpecificComponentByDisplayName(HEADER);
+    const memoizedNavigationControls = useMemo(() => ({ goToStepByIndex, nextStep, previousStep, setStepByHash, currentStep: step }), [goToStepByIndex, nextStep, previousStep, setStepByHash, step]);
+    return (_jsxs(WizardContext.Provider, { value: memoizedNavigationControls, children: [header, _jsxs("div", { className: classNames, children: [currentStep, footer] })] }));
+};

package/dist/src/components/organisms/Wizard/Wizard.tsx

@@ -0,0 +1,64 @@
+import { FOOTER, HEADER } from './constants'
+import React, { useMemo, useState } from 'react'
+import { WizardContext } from './context'
+import { type WizardProps } from './WizardProps.types'
+import { useHash } from './hooks'
+import { wizardNavigationControls } from './controls/navigation'
+
+interface IndexedChildProps {
+  index: number
+}
+
+export const Wizard: React.FC<WizardProps> = ({ children, isHashEnabled = false, classNames }): React.ReactElement => {
+  const [step, setStep] = useState(0)
+  const childrenToArray = React.Children.toArray(children)
+  const filteredChilds = childrenToArray
+    .filter((child) => {
+      if (!React.isValidElement(child)) return false
+      const type = child.type as React.FunctionComponent
+      return Boolean(type.displayName !== FOOTER && type.displayName !== HEADER)
+    })
+    .map((child, index) =>
+      React.isValidElement(child)
+        ? React.cloneElement(child as React.ReactElement<IndexedChildProps>, { index })
+        : child
+    )
+
+  const { updateHash, setStepByHash } = useHash({ children: filteredChilds, isHashEnabled, setStep })
+
+  const { goToStepByIndex, nextStep, previousStep } = wizardNavigationControls({
+    lastStep: filteredChilds.length - 1,
+    updateHash,
+    isHashEnabled,
+    setStep,
+    step
+  })
+
+  const currentStep = filteredChilds[step]
+  const getSpecificComponentByDisplayName = (displayName: string): React.ReactNode => {
+    return childrenToArray.find((child) => {
+      if (!React.isValidElement(child)) return false
+
+      const type = child.type as React.FunctionComponent
+      return type.displayName === displayName
+    })
+  }
+
+  const footer = getSpecificComponentByDisplayName(FOOTER)
+  const header = getSpecificComponentByDisplayName(HEADER)
+
+  const memoizedNavigationControls = useMemo(
+    () => ({ goToStepByIndex, nextStep, previousStep, setStepByHash, currentStep: step }),
+    [goToStepByIndex, nextStep, previousStep, setStepByHash, step]
+  )
+
+  return (
+    <WizardContext.Provider value={memoizedNavigationControls}>
+      {header}
+      <div className={classNames}>
+        {currentStep}
+        {footer}
+      </div>
+    </WizardContext.Provider>
+  )
+}

package/dist/src/components/organisms/Wizard/WizardProps.types.d.ts

@@ -0,0 +1,5 @@
+export interface WizardProps {
+    children: React.ReactNode | React.ReactNode[];
+    isHashEnabled?: boolean;
+    classNames?: string;
+}

package/dist/src/components/organisms/Wizard/WizardProps.types.js

@@ -0,0 +1 @@
+export {};

package/dist/src/components/organisms/Wizard/WizardProps.types.ts

@@ -0,0 +1,5 @@
+export interface WizardProps {
+  children: React.ReactNode | React.ReactNode[]
+  isHashEnabled?: boolean
+  classNames?: string
+}

package/dist/src/components/organisms/Wizard/components/Footer.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+interface FooterProps {
+    children: React.ReactNode | React.ReactNode[];
+}
+export declare const Footer: React.FC<FooterProps>;
+export {};

package/dist/src/components/organisms/Wizard/components/Footer.js

@@ -0,0 +1,4 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { FOOTER } from '../constants';
+export const Footer = ({ children }) => _jsx(_Fragment, { children: children });
+Footer.displayName = FOOTER;

package/dist/src/components/organisms/Wizard/components/Footer.tsx

@@ -0,0 +1,10 @@
+import { FOOTER } from '../constants'
+import React from 'react'
+
+interface FooterProps {
+  children: React.ReactNode | React.ReactNode[]
+}
+
+export const Footer: React.FC<FooterProps> = ({ children }) => <>{children}</>
+
+Footer.displayName = FOOTER

package/dist/src/components/organisms/Wizard/components/Header.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+interface HeaderProps {
+    children: React.ReactNode | React.ReactNode[];
+}
+export declare const Header: React.FC<HeaderProps>;
+export {};

package/dist/src/components/organisms/Wizard/components/Header.js

@@ -0,0 +1,4 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { HEADER } from '../constants';
+export const Header = ({ children }) => _jsx(_Fragment, { children: children });
+Header.displayName = HEADER;

package/dist/src/components/organisms/Wizard/components/Header.tsx

@@ -0,0 +1,10 @@
+import { HEADER } from '../constants'
+import React from 'react'
+
+interface HeaderProps {
+  children: React.ReactNode | React.ReactNode[]
+}
+
+export const Header: React.FC<HeaderProps> = ({ children }) => <>{children}</>
+
+Header.displayName = HEADER

package/dist/src/components/organisms/Wizard/components/index.d.ts

@@ -0,0 +1,2 @@
+export { Footer } from './Footer';
+export { Header } from './Header';

package/dist/src/components/organisms/Wizard/components/index.js

@@ -0,0 +1,2 @@
+export { Footer } from './Footer';
+export { Header } from './Header';

package/dist/src/components/organisms/Wizard/components/index.ts

@@ -0,0 +1,2 @@
+export { Footer } from './Footer'
+export { Header } from './Header'

package/dist/src/components/organisms/Wizard/constants/index.d.ts

@@ -0,0 +1,2 @@
+export declare const FOOTER = "Footer";
+export declare const HEADER = "Header";

package/dist/src/components/organisms/Wizard/constants/index.js

@@ -0,0 +1,2 @@
+export const FOOTER = 'Footer';
+export const HEADER = 'Header';

package/dist/src/components/organisms/Wizard/constants/index.ts

@@ -0,0 +1,2 @@
+export const FOOTER = 'Footer'
+export const HEADER = 'Header'

package/dist/src/components/organisms/Wizard/context/WizardContext.d.ts

@@ -0,0 +1,9 @@
+interface WizardContextInterFace {
+    previousStep: () => void;
+    nextStep: () => void;
+    goToStepByIndex: (step: number) => void;
+    setStepByHash: (hash: string) => void;
+    currentStep: number;
+}
+export declare const WizardContext: import("react").Context<WizardContextInterFace>;
+export {};

package/dist/src/components/organisms/Wizard/context/WizardContext.js

@@ -0,0 +1,8 @@
+import { createContext } from 'react';
+export const WizardContext = createContext({
+    previousStep: () => { },
+    nextStep: () => { },
+    goToStepByIndex: () => { },
+    setStepByHash: () => { },
+    currentStep: 0
+});

package/dist/src/components/organisms/Wizard/context/WizardContext.tsx

@@ -0,0 +1,17 @@
+import { createContext } from 'react'
+
+interface WizardContextInterFace {
+  previousStep: () => void
+  nextStep: () => void
+  goToStepByIndex: (step: number) => void
+  setStepByHash: (hash: string) => void
+  currentStep: number
+}
+
+export const WizardContext = createContext<WizardContextInterFace>({
+  previousStep: () => {},
+  nextStep: () => {},
+  goToStepByIndex: () => {},
+  setStepByHash: () => {},
+  currentStep: 0
+})

package/dist/src/components/organisms/Wizard/context/index.d.ts

@@ -0,0 +1 @@
+export { WizardContext } from './WizardContext';

package/dist/src/components/organisms/Wizard/context/index.js

@@ -0,0 +1 @@
+export { WizardContext } from './WizardContext';

package/dist/src/components/organisms/Wizard/context/index.ts

@@ -0,0 +1 @@
+export { WizardContext } from './WizardContext'

package/dist/src/components/organisms/Wizard/controls/navigation.d.ts

@@ -0,0 +1,14 @@
+interface WizardNavigation {
+    lastStep: number;
+    updateHash: (step: number) => void;
+    isHashEnabled: boolean;
+    setStep: (step: number) => void;
+    step: number;
+}
+interface WizardControls {
+    nextStep: () => void;
+    previousStep: () => void;
+    goToStepByIndex: (step: number) => void;
+}
+export declare const wizardNavigationControls: ({ lastStep, updateHash, isHashEnabled, setStep, step }: WizardNavigation) => WizardControls;
+export {};

package/dist/src/components/organisms/Wizard/controls/navigation.js

@@ -0,0 +1,27 @@
+export const wizardNavigationControls = ({ lastStep, updateHash, isHashEnabled, setStep, step }) => {
+    const nextStep = () => {
+        const _step = step === lastStep ? lastStep : step + 1;
+        setStep(_step);
+        if (isHashEnabled) {
+            updateHash(_step);
+        }
+    };
+    const previousStep = () => {
+        const _step = step <= 0 ? 0 : step - 1;
+        setStep(_step);
+        if (isHashEnabled) {
+            updateHash(_step);
+        }
+    };
+    const goToStepByIndex = (step) => {
+        setStep(step);
+        if (isHashEnabled) {
+            updateHash(step);
+        }
+    };
+    return {
+        nextStep,
+        previousStep,
+        goToStepByIndex
+    };
+};

package/dist/src/components/organisms/Wizard/controls/navigation.ts

@@ -0,0 +1,50 @@
+interface WizardNavigation {
+  lastStep: number
+  updateHash: (step: number) => void
+  isHashEnabled: boolean
+  setStep: (step: number) => void
+  step: number
+}
+
+interface WizardControls {
+  nextStep: () => void
+  previousStep: () => void
+  goToStepByIndex: (step: number) => void
+}
+
+export const wizardNavigationControls = ({
+  lastStep,
+  updateHash,
+  isHashEnabled,
+  setStep,
+  step
+}: WizardNavigation): WizardControls => {
+  const nextStep = (): void => {
+    const _step = step === lastStep ? lastStep : step + 1
+    setStep(_step)
+    if (isHashEnabled) {
+      updateHash(_step)
+    }
+  }
+
+  const previousStep = (): void => {
+    const _step = step <= 0 ? 0 : step - 1
+    setStep(_step)
+    if (isHashEnabled) {
+      updateHash(_step)
+    }
+  }
+
+  const goToStepByIndex = (step: number): void => {
+    setStep(step)
+    if (isHashEnabled) {
+      updateHash(step)
+    }
+  }
+
+  return {
+    nextStep,
+    previousStep,
+    goToStepByIndex
+  }
+}

package/dist/src/components/organisms/Wizard/hooks/index.d.ts

@@ -0,0 +1 @@
+export { useHash } from './useHash';

package/dist/src/components/organisms/Wizard/hooks/index.js

@@ -0,0 +1 @@
+export { useHash } from './useHash';

package/dist/src/components/organisms/Wizard/hooks/index.ts

@@ -0,0 +1 @@
+export { useHash } from './useHash'

package/dist/src/components/organisms/Wizard/hooks/useHash.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+interface UseHashProps {
+    children: React.ReactNode[];
+    isHashEnabled: boolean;
+    setStep: (step: number) => void;
+}
+interface UseHashReturn {
+    updateHash: (step: number) => void;
+    setStepByHash: (hash: string) => void;
+}
+export declare const useHash: ({ children, isHashEnabled, setStep }: UseHashProps) => UseHashReturn;
+export {};

package/dist/src/components/organisms/Wizard/hooks/useHash.js

@@ -0,0 +1,59 @@
+import React, { useEffect, useMemo, useRef } from 'react';
+export const useHash = ({ children, isHashEnabled, setStep }) => {
+    const hasInitialized = useRef(false);
+    const getHash = () => typeof window === 'object' ? decodeURIComponent(window.location.hash.replace(/^#/, '')) : '';
+    const { hashKeys, hashKeysURL } = useMemo(() => {
+        const localHashKeys = {};
+        const localHashKeysURL = {};
+        children.forEach((child, index) => {
+            if (React.isValidElement(child)) {
+                const element = child;
+                const hashKey = element.props.hashKey ?? `step${index + 1}`;
+                localHashKeysURL[index] = hashKey;
+                localHashKeys[hashKey] = index;
+            }
+        });
+        return {
+            hashKeys: localHashKeys,
+            hashKeysURL: localHashKeysURL
+        };
+    }, [children]);
+    const updateHash = (step) => {
+        const newHash = hashKeysURL[step];
+        if (newHash && window.location.hash !== `#${newHash}`) {
+            window.location.hash = newHash;
+        }
+    };
+    const setStepByHash = (hash) => {
+        if (hash in hashKeys) {
+            setStep(hashKeys[hash]);
+        }
+    };
+    useEffect(() => {
+        if (!isHashEnabled)
+            return;
+        const onHashChange = () => {
+            const hash = getHash();
+            if (hash in hashKeys) {
+                setStep(hashKeys[hash]);
+            }
+        };
+        window.addEventListener('hashchange', onHashChange);
+        return () => {
+            window.removeEventListener('hashchange', onHashChange);
+        };
+    }, [isHashEnabled, hashKeys, setStep]);
+    useEffect(() => {
+        if (!isHashEnabled || hasInitialized.current)
+            return;
+        const initialHash = getHash();
+        if (initialHash && hashKeys[initialHash] !== undefined) {
+            setStep(hashKeys[initialHash]);
+            hasInitialized.current = true;
+        }
+    }, [hashKeys, isHashEnabled, setStep]);
+    return {
+        updateHash,
+        setStepByHash
+    };
+};

package/dist/src/components/organisms/Wizard/hooks/useHash.tsx

@@ -0,0 +1,87 @@
+import React, { useEffect, useMemo, useRef } from 'react'
+
+interface UseHashProps {
+  children: React.ReactNode[]
+  isHashEnabled: boolean
+  setStep: (step: number) => void
+}
+
+interface UseHashReturn {
+  updateHash: (step: number) => void
+  setStepByHash: (hash: string) => void
+}
+
+type HashKeys = Record<string, number>
+type HashKeysURL = Record<number, string>
+
+export const useHash = ({ children, isHashEnabled, setStep }: UseHashProps): UseHashReturn => {
+  const hasInitialized = useRef(false)
+
+  const getHash = (): string =>
+    typeof window === 'object' ? decodeURIComponent(window.location.hash.replace(/^#/, '')) : ''
+
+  const { hashKeys, hashKeysURL } = useMemo(() => {
+    const localHashKeys: HashKeys = {}
+    const localHashKeysURL: HashKeysURL = {}
+
+    children.forEach((child, index) => {
+      if (React.isValidElement(child)) {
+        const element = child as React.ReactElement<{ hashKey?: string }>
+        const hashKey = element.props.hashKey ?? `step${index + 1}`
+        localHashKeysURL[index] = hashKey
+        localHashKeys[hashKey] = index
+      }
+    })
+
+    return {
+      hashKeys: localHashKeys,
+      hashKeysURL: localHashKeysURL
+    }
+  }, [children])
+
+  const updateHash = (step: number): void => {
+    const newHash = hashKeysURL[step]
+    if (newHash && window.location.hash !== `#${newHash}`) {
+      window.location.hash = newHash
+    }
+  }
+
+  const setStepByHash = (hash: string): void => {
+    if (hash in hashKeys) {
+      setStep(hashKeys[hash])
+    }
+  }
+
+  useEffect(() => {
+    if (!isHashEnabled) return
+
+    const onHashChange = (): void => {
+      const hash = getHash()
+      if (hash in hashKeys) {
+        setStep(hashKeys[hash])
+      }
+    }
+
+    window.addEventListener('hashchange', onHashChange)
+
+    return () => {
+      window.removeEventListener('hashchange', onHashChange)
+    }
+  }, [isHashEnabled, hashKeys, setStep])
+
+  useEffect(() => {
+    if (!isHashEnabled || hasInitialized.current) return
+
+    const initialHash = getHash()
+
+    if (initialHash && hashKeys[initialHash] !== undefined) {
+      setStep(hashKeys[initialHash])
+      hasInitialized.current = true
+    }
+  }, [hashKeys, isHashEnabled, setStep])
+
+  return {
+    updateHash,
+    setStepByHash
+  }
+}