@npm_leadtech/legal-lib-components 7.81.0 → 7.82.52

package/dist/src/components/atoms/{MenuItemsDeprecated/MenuItemsDeprecated.tsx → MenuItems/MenuItems.tsx}

@@ -4,19 +4,12 @@
 import React, { type FC, useState } from 'react'
 import classNames from 'classnames'
 
-import { type MenuItemsDeprecatedProps, type MenuListItem } from './MenuItemsDeprecatedProps.types'
-import { MenuItemsDeprecatedStyled } from './MenuItemsDeprecated.styled'
+import { type MenuItemProps, type MenuListItem } from './MenuItemProps.types'
+import { MenuItemsStyled } from './MenuItems.styled'
 import { stringSlugify } from '../../../utils/stringSlugify'
 // import './MenuItems.scss'
 
-const MenuItemsDeprecated: FC<MenuItemsDeprecatedProps> = ({
-  spacing,
-  list,
-  hasBullets = false,
-  initialActiveContent = '',
-  isTestAB21644 = false,
-  ...rest
-}) => {
+const MenuItems: FC<MenuItemProps> = ({ spacing, list, hasBullets = false, initialActiveContent = '', ...rest }) => {
   const [contentListElement, setContentListElement] = useState(initialActiveContent)
   const filteredList = list?.filter((item) => item.content)
   if (filteredList.length === 0 || !filteredList[0].content) {
@@ -46,8 +39,7 @@ const MenuItemsDeprecated: FC<MenuItemsDeprecatedProps> = ({
         title={content}
         className={`menu-items__item ${className ?? ''}
           ${!href && onClick == null ? 'disabled' : ''}
-          ${contentListElement === content ? 'active' : 'inactive'}
-          ${isTestAB21644 ? 'menu-items__testab21644' : ''}`}
+          ${contentListElement === content ? 'active' : 'inactive'}`}
         onClick={() => {
           if (onClick !== undefined) {
             onClick()
@@ -72,10 +64,10 @@ const MenuItemsDeprecated: FC<MenuItemsDeprecatedProps> = ({
   }
 
   return (
-    <MenuItemsDeprecatedStyled className={classes} {...rest}>
+    <MenuItemsStyled className={classes} {...rest}>
       {filteredList.map((item, index) => renderItem(item, index))}
-    </MenuItemsDeprecatedStyled>
+    </MenuItemsStyled>
   )
 }
 
-export default MenuItemsDeprecated
+export default MenuItems

package/dist/src/components/atoms/MenuItems/index.d.ts

@@ -0,0 +1,2 @@
+export { default as MenuItems } from './MenuItems';
+export { type MenuItemProps } from './MenuItemProps.types';

package/dist/src/components/atoms/MenuItems/index.js

@@ -0,0 +1 @@
+export { default as MenuItems } from './MenuItems';

package/dist/src/components/atoms/MenuItems/index.ts

@@ -0,0 +1,2 @@
+export { default as MenuItems } from './MenuItems'
+export { type MenuItemProps } from './MenuItemProps.types'

package/dist/src/components/atoms/PopularDocsItem/PopularDocsItem.styled.js

@@ -25,10 +25,6 @@ export const PopularDocsItemStyled = styled.a `
     margin-left: 0.5rem;
   }
 
-  @media ${device.mobile} {
-    gap: 1rem;
-  }
-
   .category-icon svg {
     fill: var(--primary-main-dark-1);
   }
@@ -49,11 +45,6 @@ export const PopularDocsItemStyled = styled.a `
       line-height: 1.33;
       margin-top: 0.3rem;
     }
-    media ${device.mobile} {
-      strong {
-        font-size: 0.9rem;
-      }
-    }
   }
 
   .icon-left svg {

package/dist/src/components/atoms/PopularDocsItem/PopularDocsItem.styled.ts

@@ -26,10 +26,6 @@ export const PopularDocsItemStyled = styled.a`
     margin-left: 0.5rem;
   }
 
-  @media ${device.mobile} {
-    gap: 1rem;
-  }
-
   .category-icon svg {
     fill: var(--primary-main-dark-1);
   }
@@ -50,11 +46,6 @@ export const PopularDocsItemStyled = styled.a`
       line-height: 1.33;
       margin-top: 0.3rem;
     }
-    media ${device.mobile} {
-      strong {
-        font-size: 0.9rem;
-      }
-    }
   }
 
   .icon-left svg {

package/dist/src/components/atoms/Radio/Radio.scss

@@ -41,7 +41,7 @@
       display: flex;
       height: 42px;
       justify-content: center;
-      min-width: 80px;
+      width: 80px;
 
       &:hover {
         background: var(--neutral-neutral-4);
@@ -243,7 +243,7 @@
   .label {
     color: var(--neutral-neutral-1);
     display: block;
-    margin: 1rem 0;
+    margin-bottom: 1rem;
   }
 
   &.default {
@@ -255,7 +255,6 @@
   }
 
   &.tabs {
-    margin-top: 1rem;
     @include tabsStyles;
   }
 

package/dist/src/components/atoms/RatafiaLandingIcon/RatafiaLandingIcon.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import { type RatafiaLandingIconProps } from './RatafiaLandingIconProps.types';
 import './RatafiaLandingIcon.scss';
-declare const RatafiaLandingIcon: React.FC<RatafiaLandingIconProps>;
+declare const RatafiaLandingIcon: React.FC;
 export default RatafiaLandingIcon;

package/dist/src/components/atoms/RatafiaLandingIcon/RatafiaLandingIcon.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import './RatafiaLandingIcon.scss';
-const RatafiaLandingIcon = ({ aiLabel }) => {
-    return _jsx("span", { className: 'ratafia-landing-icon sans-serif --bold-weight', children: aiLabel });
+const RatafiaLandingIcon = () => {
+    return _jsx("span", { className: 'ratafia-landing-icon sans-serif --bold-weight', children: "AI" });
 };
 export default RatafiaLandingIcon;

package/dist/src/components/atoms/RatafiaLandingIcon/RatafiaLandingIcon.scss

@@ -1,7 +1,6 @@
 .ratafia-landing-icon {
-  padding: 1px 4px;
+  padding: 0.25rem 0.5rem;
   border-radius: var(--s-border-radius);
   color: var(--neutral-neutral-1);
   background: var(--secondary-main-light-3);
-  font-size: 12px;
 }

package/dist/src/components/atoms/RatafiaLandingIcon/RatafiaLandingIcon.tsx

@@ -1,10 +1,9 @@
 import React from 'react'
 
-import { type RatafiaLandingIconProps } from './RatafiaLandingIconProps.types'
 import './RatafiaLandingIcon.scss'
 
-const RatafiaLandingIcon: React.FC<RatafiaLandingIconProps> = ({ aiLabel }) => {
-  return <span className={'ratafia-landing-icon sans-serif --bold-weight'}>{aiLabel}</span>
+const RatafiaLandingIcon: React.FC = () => {
+  return <span className={'ratafia-landing-icon sans-serif --bold-weight'}>AI</span>
 }
 
 export default RatafiaLandingIcon

package/dist/src/components/atoms/SearchSelect/SearchSelect.js

@@ -1,6 +1,4 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { useEffect, useState } from 'react';
 import Select from 'react-select';
 import { SearchSelectStyled } from './SearchSelect.styled';
 import classNames from 'classnames';
@@ -25,7 +23,6 @@ const getSortedItems = (items, isSortAlphabetically = false) => {
 };
 const SearchSelect = (props) => {
     const { customClass = '', menuPlacement = MenuPlacement.bottom } = props;
-    const [menuPortalTarget, setMenuPortalTarget] = useState();
     const sortedItems = getSortedItems(props.items, props.isSortAlphabetically);
     const defaultValue = props.defaultValue;
     const classnames = classNames({
@@ -34,9 +31,6 @@ const SearchSelect = (props) => {
         [customClass]: props.customClass,
         '--group-invalid': !props.isValidGroup
     });
-    useEffect(() => {
-        setMenuPortalTarget(document.body);
-    }, []);
     const handleChange = (selectedOption) => {
         const selectObject = {
             target: {
@@ -55,8 +49,7 @@ const SearchSelect = (props) => {
                                     boxShadow: state.isFocused ? '0 0 0 1px var(--primary-main) !important' : '',
                                     borderStyle: state.isFocused ? 'solid' : 'initial'
                                 };
-                            },
-                            menuPortal: (base) => ({ ...base, zIndex: 9999 })
-                        }, id: props.name, name: props.name, className: 'legal-selector', defaultValue: defaultValue, onChange: handleChange, isDisabled: props.disabled, isSearchable: props.isSearchable !== false, options: sortedItems, escapeClearsValue: true, isClearable: true, menuPortalTarget: menuPortalTarget, placeholder: props.placeholder, defaultMenuIsOpen: props.defaultMenuIsOpen, menuPlacement: menuPlacement })] })] }));
+                            }
+                        }, id: props.name, name: props.name, className: 'legal-selector', defaultValue: defaultValue, onChange: handleChange, isDisabled: props.disabled, isSearchable: props.isSearchable !== false, options: sortedItems, escapeClearsValue: true, isClearable: true, placeholder: props.placeholder, defaultMenuIsOpen: props.defaultMenuIsOpen, menuPlacement: menuPlacement })] })] }));
 };
 export default SearchSelect;

package/dist/src/components/atoms/SearchSelect/SearchSelect.styled.js

@@ -152,7 +152,7 @@ export const SearchSelectStyled = styled.div `
         display: flex;
         align-content: center;
         position: absolute;
-        bottom: -12px;
+        bottom: 0;
         margin-top: 0.5rem;
         color: var(--error-main);
 

package/dist/src/components/atoms/SearchSelect/SearchSelect.styled.ts

@@ -153,7 +153,7 @@ export const SearchSelectStyled = styled.div`
         display: flex;
         align-content: center;
         position: absolute;
-        bottom: -12px;
+        bottom: 0;
         margin-top: 0.5rem;
         color: var(--error-main);
 

package/dist/src/components/atoms/SearchSelect/SearchSelect.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
-import React, { type FC, useEffect, useState } from 'react'
+import React, { type FC } from 'react'
 import Select from 'react-select'
 
 import { type SearchSelectProps } from './SearchSelectProps.types'
@@ -28,7 +28,6 @@ const getSortedItems = (items: any, isSortAlphabetically: boolean | undefined =
 
 const SearchSelect: FC<SearchSelectProps> = (props) => {
   const { customClass = '', menuPlacement = MenuPlacement.bottom } = props
-  const [menuPortalTarget, setMenuPortalTarget] = useState<HTMLElement | undefined>()
   const sortedItems = getSortedItems(props.items, props.isSortAlphabetically)
   const defaultValue = props.defaultValue as unknown as string
 
@@ -39,10 +38,6 @@ const SearchSelect: FC<SearchSelectProps> = (props) => {
     '--group-invalid': !props.isValidGroup
   })
 
-  useEffect(() => {
-    setMenuPortalTarget(document.body)
-  }, [])
-
   const handleChange = (selectedOption): void => {
     const selectObject = {
       target: {
@@ -82,8 +77,7 @@ const SearchSelect: FC<SearchSelectProps> = (props) => {
                 boxShadow: state.isFocused ? '0 0 0 1px var(--primary-main) !important' : '',
                 borderStyle: state.isFocused ? 'solid' : 'initial'
               }
-            },
-            menuPortal: (base) => ({ ...base, zIndex: 9999 })
+            }
           }}
           id={props.name}
           name={props.name}
@@ -95,7 +89,6 @@ const SearchSelect: FC<SearchSelectProps> = (props) => {
           options={sortedItems}
           escapeClearsValue={true}
           isClearable={true}
-          menuPortalTarget={menuPortalTarget}
           placeholder={props.placeholder}
           defaultMenuIsOpen={props.defaultMenuIsOpen}
           menuPlacement={menuPlacement}

package/dist/src/components/atoms/SidemenuTab/SidemenuTab.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from 'classnames';
-import { MenuItemsDeprecated } from '../MenuItemsDeprecated';
+import { MenuItems } from '../MenuItems';
 import { SidemenuTabStyled } from './SidemenuTab.styled';
 import { Tooltip } from '../Tooltip';
 const SidemenuTab = ({ active, mobile, menu, text, image, onClick, children }) => {
@@ -12,6 +12,6 @@ const SidemenuTab = ({ active, mobile, menu, text, image, onClick, children }) =
     if (menu === undefined || menu?.lenght === 0) {
         return renderTab();
     }
-    return (_jsx(Tooltip, { content: _jsx(MenuItemsDeprecated, { list: menu }), interactive: true, trigger: 'click', children: renderTab() }));
+    return (_jsx(Tooltip, { content: _jsx(MenuItems, { list: menu }), interactive: true, trigger: 'click', children: renderTab() }));
 };
 export default SidemenuTab;

package/dist/src/components/atoms/SidemenuTab/SidemenuTab.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import classNames from 'classnames'
 
-import { MenuItemsDeprecated } from '../MenuItemsDeprecated'
+import { MenuItems } from '../MenuItems'
 import { type SideMenuTabProps } from './SideMenuTabProps.types'
 import { SidemenuTabStyled } from './SidemenuTab.styled'
 import { Tooltip } from '../Tooltip'
@@ -26,7 +26,7 @@ const SidemenuTab: React.FC<SideMenuTabProps> = ({ active, mobile, menu, text, i
   }
 
   return (
-    <Tooltip content={<MenuItemsDeprecated list={menu} />} interactive trigger='click'>
+    <Tooltip content={<MenuItems list={menu} />} interactive trigger='click'>
       {renderTab()}
     </Tooltip>
   )

package/dist/src/components/atoms/StepRatafiaCard/StepRatafiaCard.js

@@ -1,7 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { IconSvgURLWithThemeColor } from '../IconSvgURLWithThemeColor';
 import { StepRatafiaCardStyled } from './StepRatafiaCard.styled';
 export const StepRatafiaCard = ({ title, icon, description }) => {
-    return (_jsxs(StepRatafiaCardStyled, { className: 'step-ratafia-card', children: [_jsxs("div", { className: 'step-ratafia-card__title', children: [icon && _jsx(IconSvgURLWithThemeColor, { url: icon, height: '20', width: '20' }), _jsx("h3", { className: 'sans-serif --medium --bold-weight step-ratafia-card__title__text', children: title })] }), _jsx("p", { className: 'sans-serif --small step-ratafia-card__description', children: description })] }));
+    return (_jsxs(StepRatafiaCardStyled, { className: 'step-ratafia-card', children: [_jsxs("div", { className: 'step-ratafia-card__title', children: [icon !== null && _jsx("div", { className: 'step-ratafia-card__title__icon', children: icon }), _jsx("h3", { className: 'sans-serif --medium --bold-weight step-ratafia-card__title__text', children: title })] }), _jsx("p", { className: 'sans-serif --small step-ratafia-card__description', children: description })] }));
 };
 export default StepRatafiaCard;

package/dist/src/components/atoms/StepRatafiaCard/StepRatafiaCard.styled.js

@@ -18,6 +18,11 @@ export const StepRatafiaCardStyled = styled.div `
       align-self: stretch;
 
       color: var(--neutral-neutral-1);
+
+      &__icon {
+        width: 20px;
+        height: 20px;
+      }
     }
   }
 `;

package/dist/src/components/atoms/StepRatafiaCard/StepRatafiaCard.styled.ts

@@ -19,6 +19,11 @@ export const StepRatafiaCardStyled = styled.div`
       align-self: stretch;
 
       color: var(--neutral-neutral-1);
+
+      &__icon {
+        width: 20px;
+        height: 20px;
+      }
     }
   }
 `

package/dist/src/components/atoms/StepRatafiaCard/StepRatafiaCard.tsx

@@ -1,6 +1,5 @@
 import React from 'react'
 
-import { IconSvgURLWithThemeColor } from '../IconSvgURLWithThemeColor'
 import { type StepRatafiaCardProps } from './StepRatafiaCardProps.types'
 import { StepRatafiaCardStyled } from './StepRatafiaCard.styled'
 
@@ -8,7 +7,7 @@ export const StepRatafiaCard: React.FC<StepRatafiaCardProps> = ({ title, icon, d
   return (
     <StepRatafiaCardStyled className='step-ratafia-card'>
       <div className='step-ratafia-card__title'>
-        {icon && <IconSvgURLWithThemeColor url={icon} height='20' width='20' />}
+        {icon !== null && <div className='step-ratafia-card__title__icon'>{icon}</div>}
         <h3 className='sans-serif --medium --bold-weight step-ratafia-card__title__text'>{title}</h3>
       </div>
       <p className='sans-serif --small step-ratafia-card__description'>{description}</p>

package/dist/src/components/atoms/StepRatafiaCard/StepRatafiaCardProps.types.d.ts

@@ -1,6 +1,6 @@
 export interface StepRatafiaCardProps {
     id: string;
     title: string;
-    icon?: string;
+    icon?: React.ReactNode;
     description: string;
 }

package/dist/src/components/atoms/StepRatafiaCard/StepRatafiaCardProps.types.ts

@@ -1,6 +1,6 @@
 export interface StepRatafiaCardProps {
   id: string
   title: string
-  icon?: string
+  icon?: React.ReactNode
   description: string
 }

package/dist/src/components/atoms/TextArea/TextArea.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { TextAreaStyled } from './TextArea.styled';
 import error from '../../../../images/svg/info-error_24px_outlined.svg';
-const TextArea = ({ customClass = '', disabled, errorMessage, label, name, onChange, placeholder, tooltip, validate = false, value, dataQa, maxLength }) => {
+const TextArea = ({ customClass = '', disabled, errorMessage, label, name, onChange, placeholder, tooltip, validate = false, value, dataQa }) => {
     const classNames = `${validate ? 'e-textarea' : 'e-textarea --is-invalid'} 
     ${customClass}`;
-    return (_jsxs(TextAreaStyled, { className: classNames, children: [Boolean(tooltip) && _jsx("p", { className: 'tooltip-form sans-serif --small', children: tooltip }), Boolean(errorMessage) && !validate && (_jsxs("span", { className: 'e-text--error sans-serif --small', children: [_jsx("img", { src: error, alt: errorMessage }), errorMessage] })), _jsx("textarea", { id: name, name: name, placeholder: placeholder, onChange: onChange, value: value, disabled: disabled, "data-qa": dataQa, maxLength: maxLength }), Boolean(label) && (_jsx("div", { className: 'e-textarea__inner', children: _jsx("div", { className: 'inputLabel', children: label }) }))] }));
+    return (_jsxs(TextAreaStyled, { className: classNames, children: [Boolean(tooltip) && _jsx("p", { className: 'tooltip-form sans-serif --small', children: tooltip }), Boolean(errorMessage) && !validate && (_jsxs("span", { className: 'e-text--error sans-serif --small', children: [_jsx("img", { src: error, alt: errorMessage }), errorMessage] })), _jsx("textarea", { id: name, name: name, placeholder: placeholder, onChange: onChange, value: value, disabled: disabled, "data-qa": dataQa }), Boolean(label) && (_jsx("div", { className: 'e-textarea__inner', children: _jsx("div", { className: 'inputLabel', children: label }) }))] }));
 };
 export default TextArea;

package/dist/src/components/atoms/TextArea/TextArea.tsx

@@ -15,8 +15,7 @@ const TextArea: FC<TextAreaProps> = ({
   tooltip,
   validate = false,
   value,
-  dataQa,
-  maxLength
+  dataQa
 }) => {
   const classNames = `${validate ? 'e-textarea' : 'e-textarea --is-invalid'} 
     ${customClass}`
@@ -38,7 +37,6 @@ const TextArea: FC<TextAreaProps> = ({
         value={value}
         disabled={disabled}
         data-qa={dataQa}
-        maxLength={maxLength}
       />
       {Boolean(label) && (
         <div className={'e-textarea__inner'}>

package/dist/src/components/atoms/TextArea/TextAreaProps.types.d.ts

@@ -10,5 +10,4 @@ export interface TextAreaProps {
     validate?: boolean;
     disabled?: boolean;
     onChange?: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
-    maxLength?: number;
 }

package/dist/src/components/atoms/TextArea/TextAreaProps.types.ts

@@ -10,5 +10,4 @@ export interface TextAreaProps {
   validate?: boolean
   disabled?: boolean
   onChange?: (e: React.ChangeEvent<HTMLTextAreaElement>) => void
-  maxLength?: number
 }

package/dist/src/components/atoms/TopBar/TopBar.styled.js

@@ -11,7 +11,7 @@ export const TopBarStyled = styled.div `
       height: 0;
     }
 
-    @media ${device.tablets} {
+    @media ${device['landscape-tablets']} {
       display: block;
     }
     @media ${device.mobile} {
@@ -26,7 +26,7 @@ export const TopBarStyled = styled.div `
       width: 100%;
       height: 100%;
       justify-content: center;
-      align-items: center;
+      align-items: flex-end;
       border: 1px solid var(--neutral-neutral-4);
 
       @media ${device.mobile} {
@@ -50,53 +50,6 @@ export const TopBarStyled = styled.div `
           display: inherit;
         }
       }
-
-      &-mobile {
-        background-color: var(--neutral-neutral-5);
-        display: flex;
-        padding: 0.5rem 1rem;
-        justify-content: space-between;
-        align-items: center;
-        border-radius: var(--s-border-radius);
-        box-shadow: var(--box-shadow-container);
-        font-size: 14px;
-        line-height: 18px;
-        letter-spacing: -0.3px;
-        position: fixed;
-        top: 0.5rem;
-        left: 0.5rem;
-        right: 0.5rem;
-
-        &.fade-In {
-          visibility: visible;
-          opacity: 1;
-          transition:
-            visibility 0s linear 0s,
-            opacity 300ms;
-        }
-
-        &.fade-Out {
-          visibility: hidden;
-          opacity: 0;
-          transition:
-            visibility 0s linear 300ms,
-            opacity 300ms;
-        }
-
-        > b {
-          display: flex;
-          justify-content: center;
-          align-items: center;
-
-          a {
-            display: contents;
-          }
-
-          img {
-            margin-right: 0.5rem;
-          }
-        }
-      }
     }
   }
 `;

package/dist/src/components/atoms/TopBar/TopBar.styled.ts

@@ -12,7 +12,7 @@ export const TopBarStyled = styled.div`
       height: 0;
     }
 
-    @media ${device.tablets} {
+    @media ${device['landscape-tablets']} {
       display: block;
     }
     @media ${device.mobile} {
@@ -27,7 +27,7 @@ export const TopBarStyled = styled.div`
       width: 100%;
       height: 100%;
       justify-content: center;
-      align-items: center;
+      align-items: flex-end;
       border: 1px solid var(--neutral-neutral-4);
 
       @media ${device.mobile} {
@@ -51,53 +51,6 @@ export const TopBarStyled = styled.div`
           display: inherit;
         }
       }
-
-      &-mobile {
-        background-color: var(--neutral-neutral-5);
-        display: flex;
-        padding: 0.5rem 1rem;
-        justify-content: space-between;
-        align-items: center;
-        border-radius: var(--s-border-radius);
-        box-shadow: var(--box-shadow-container);
-        font-size: 14px;
-        line-height: 18px;
-        letter-spacing: -0.3px;
-        position: fixed;
-        top: 0.5rem;
-        left: 0.5rem;
-        right: 0.5rem;
-
-        &.fade-In {
-          visibility: visible;
-          opacity: 1;
-          transition:
-            visibility 0s linear 0s,
-            opacity 300ms;
-        }
-
-        &.fade-Out {
-          visibility: hidden;
-          opacity: 0;
-          transition:
-            visibility 0s linear 300ms,
-            opacity 300ms;
-        }
-
-        > b {
-          display: flex;
-          justify-content: center;
-          align-items: center;
-
-          a {
-            display: contents;
-          }
-
-          img {
-            margin-right: 0.5rem;
-          }
-        }
-      }
     }
   }
 `

package/dist/src/components/atoms/TopBar/TopBar.tsx

@@ -14,7 +14,7 @@ const TopBar: FC<TopBarProps> = ({ hide, children }) => {
   return (
     <TopBarStyled className={`top-bar-wrapper ${classnames}`}>
       <div className={'top-bar'}>
-        <div className='top-bar-content'>{children}</div>
+        <div className={'top-bar-content'}>{children}</div>
       </div>
     </TopBarStyled>
   )

package/dist/src/components/atoms/TopBarMobile/TopBarMobile.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface TopBarMobileProps {
+    children: React.ReactNode;
+    isVisible: boolean;
+}
+export declare const TopBarMobile: React.FC<TopBarMobileProps>;
+export {};

package/dist/src/components/atoms/TopBarMobile/TopBarMobile.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { TopBarMobileStyled } from './TopBarMobile.styled';
+export const TopBarMobile = ({ children, isVisible = false }) => {
+    const [isSSR, setIsSSR] = useState(false);
+    useEffect(() => {
+        setIsSSR(true);
+    }, []);
+    return isSSR ? (_jsx(TopBarMobileStyled, { className: `top-bar-mobile ${isVisible ? 'fade-In' : 'fade-Out'}`, children: children })) : null;
+};

package/dist/src/components/atoms/TopBarMobile/TopBarMobile.styled.d.ts

@@ -0,0 +1 @@
+export declare const TopBarMobileStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/src/components/atoms/TopBarMobile/TopBarMobile.styled.js

@@ -0,0 +1,49 @@
+import styled from 'styled-components';
+export const TopBarMobileStyled = styled.div `
+  background-color: var(--neutral-neutral-5);
+  display: flex;
+  padding: 0.5rem 1rem;
+  justify-content: space-between;
+  align-items: center;
+  border-radius: var(--s-border-radius);
+  box-shadow: var(--box-shadow-container);
+  font-size: 14px;
+  line-height: 18px;
+  letter-spacing: -0.3px;
+  position: fixed;
+  top: 0.5rem;
+  left: 0.5rem;
+  right: 0.5rem;
+
+  &.top-bar-mobile {
+    &.fade-In {
+      visibility: visible;
+      opacity: 1;
+      transition:
+        visibility 0s linear 0s,
+        opacity 300ms;
+    }
+
+    &.fade-Out {
+      visibility: hidden;
+      opacity: 0;
+      transition:
+        visibility 0s linear 300ms,
+        opacity 300ms;
+    }
+
+    > b {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      a {
+        display: contents;
+      }
+
+      img {
+        margin-right: 0.5rem;
+      }
+    }
+  }
+`;