@npm_leadtech/legal-lib-components 5.11.11 → 5.11.13

package/dist/src/components/organisms/KeyFactsResultContentRatafia/KeyFactsResultContentRatafia.styled.js

@@ -0,0 +1,21 @@
+import { device } from '../../../globalStyles/breakpoints';
+import styled from 'styled-components';
+export const KeyFactsResultContentRatafiaStyled = styled.div `
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  flex: 1 0 0;
+  align-self: stretch;
+  gap: 1rem;
+
+  .key-facts-result-content__document-name {
+    color: var(--neutral-neutral-2);
+    font-size: 1rem;
+    @media ${device['portrait-tablets']} {
+      font-size: 1.125rem;
+    }
+  }
+  .key-facts-result-content__content {
+    overflow: hidden;
+  }
+`;

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

@@ -0,0 +1,22 @@
+import { device } from '../../../globalStyles/breakpoints'
+import styled from 'styled-components'
+
+export const KeyFactsResultContentRatafiaStyled = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  flex: 1 0 0;
+  align-self: stretch;
+  gap: 1rem;
+
+  .key-facts-result-content__document-name {
+    color: var(--neutral-neutral-2);
+    font-size: 1rem;
+    @media ${device['portrait-tablets']} {
+      font-size: 1.125rem;
+    }
+  }
+  .key-facts-result-content__content {
+    overflow: hidden;
+  }
+`

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

@@ -2,18 +2,18 @@ import React from 'react'
 
 import { KeyFactCardListRatafia } from '../../molecules'
 import { type KeyFactsResultContentRatafiaProps } from './KeyFactsResultContentRatafiaProps.types'
+import { KeyFactsResultContentRatafiaStyled } from './KeyFactsResultContentRatafia.styled'
 import { ReviewKeyFactsResultRatafia } from '../../atoms'
-// import './KeyFactsResultContentRatafia.scss'
 
 export const KeyFactsResultContentRatafia: React.FC<KeyFactsResultContentRatafiaProps> = ({ result, review }) => {
   return (
-    <div className='key-facts-result-content'>
+    <KeyFactsResultContentRatafiaStyled>
       <h2 className='sans-serif --bold-weight key-facts-result-content__document-name'>{result?.documentName}</h2>
       <div className='key-facts-result-content__content'>
         {result !== null && <KeyFactCardListRatafia keyFacts={result.keyFacts} />}
         <ReviewKeyFactsResultRatafia {...review} />
       </div>
-    </div>
+    </KeyFactsResultContentRatafiaStyled>
   )
 }
 

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

@@ -3,7 +3,7 @@ import React from 'react';
 import { useLanguageOptions, useLanguageSelected, useLanguagesSelector } from '../LanguageSelector';
 import { Button } from '../../atoms';
 import { ChevronExpandMore } from '../../../../images/componentsSvg/ChevronExpandMore';
-// import './LanguageSelectorMobile.scss'
+import { LanguageSelectorMobileStyled } from './LanguageSelectorMobile.styled';
 export const LanguageSelectorMobile = ({ languages = [
     {
         code: 'US',
@@ -16,7 +16,7 @@ export const LanguageSelectorMobile = ({ languages = [
     const [isOpen, setIsOpen] = React.useState(false);
     if (languages.length <= 1)
         return null;
-    return (_jsxs("div", { className: `language-selector-mobile ${isOpen ? 'open' : ''}`, children: [_jsxs(Button, { color: 'transparent', noLink: true, givenClass: 'selected-option', label: '', dataQa: 'language-selector-mobile', fluid: true, onClick: () => {
+    return (_jsxs(LanguageSelectorMobileStyled, { isOpen: isOpen, children: [_jsxs(Button, { color: 'transparent', noLink: true, givenClass: 'selected-option', label: '', dataQa: 'language-selector-mobile', fluid: true, onClick: () => {
                     setIsOpen(!isOpen);
                 }, children: [_jsxs("div", { className: 'language', children: [languageSelected.flag, " ", languageSelected.name] }), _jsx(ChevronExpandMore, { fill: '#DBE1E5' })] }), _jsx("div", { className: 'options', children: languageOptions.map((language) => (_jsx(Button, { color: 'transparent', isExternal: true, givenClass: 'option', label: '', dataQa: `language-selector-mobile-option-${language.code}`, link: language.url, fluid: true, children: _jsxs("div", { className: 'language', children: [language.flag, " ", language.name] }) }, language.code))) })] }));
 };

package/dist/src/components/organisms/LanguageSelectorMobile/LanguageSelectorMobile.styled.d.ts

@@ -0,0 +1,5 @@
+interface Props {
+    isOpen: boolean;
+}
+export declare const LanguageSelectorMobileStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Props>> & string;
+export {};

package/dist/src/components/organisms/LanguageSelectorMobile/{LanguageSelectorMobile.scss → LanguageSelectorMobile.styled.js}

@@ -1,6 +1,5 @@
-@import '../../../globalStyles/variables.scss';
-
-.language-selector-mobile {
+import styled from 'styled-components';
+export const LanguageSelectorMobileStyled = styled.div `
   position: relative;
 
   .selected-option {
@@ -48,7 +47,8 @@
     }
   }
 
-  &.open {
+  ${({ isOpen }) => isOpen &&
+    `
     .selected-option {
       .chevron-expand-more {
         transition: all 0.4s ease;
@@ -61,5 +61,5 @@
       visibility: visible;
       transition: all 0.4s ease;
     }
-  }
-}
+    `}
+`;

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

@@ -0,0 +1,70 @@
+import styled from 'styled-components'
+interface Props {
+  isOpen: boolean
+}
+
+export const LanguageSelectorMobileStyled = styled.div<Props>`
+  position: relative;
+
+  .selected-option {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background-color: var(--primary-main-dark-1);
+    border: 0;
+
+    .language {
+      color: var(--others-white);
+    }
+
+    .chevron-expand-more {
+      transition: all 0.1s ease;
+    }
+  }
+
+  .language {
+    display: flex;
+    align-items: center;
+    padding: 0 0.5rem;
+    gap: 0.1rem;
+  }
+
+  .options {
+    position: absolute;
+    visibility: hidden;
+    opacity: 0;
+    width: 100%;
+    padding-top: 0.5rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    transition: all 0.1s ease;
+
+    .option {
+      display: flex;
+      padding: 0.5rem 1rem;
+      background-color: var(--neutral-neutral-6);
+    }
+
+    .language {
+      color: var(--neutral-neutral-1);
+    }
+  }
+
+  ${({ isOpen }) =>
+    isOpen &&
+    `
+    .selected-option {
+      .chevron-expand-more {
+        transition: all 0.4s ease;
+        transform: rotate(180deg);
+      }
+    }
+
+    .options {
+      opacity: 1;
+      visibility: visible;
+      transition: all 0.4s ease;
+    }
+    `}
+`

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

@@ -8,7 +8,7 @@ import {
 } from '../LanguageSelector'
 import { Button } from '../../atoms'
 import { ChevronExpandMore } from '../../../../images/componentsSvg/ChevronExpandMore'
-// import './LanguageSelectorMobile.scss'
+import { LanguageSelectorMobileStyled } from './LanguageSelectorMobile.styled'
 
 export const LanguageSelectorMobile: React.FC<LanguageSelectorProps> = ({
   languages = [
@@ -27,7 +27,7 @@ export const LanguageSelectorMobile: React.FC<LanguageSelectorProps> = ({
   if (languages.length <= 1) return null
 
   return (
-    <div className={`language-selector-mobile ${isOpen ? 'open' : ''}`}>
+    <LanguageSelectorMobileStyled isOpen={isOpen}>
       <Button
         color='transparent'
         noLink
@@ -62,6 +62,6 @@ export const LanguageSelectorMobile: React.FC<LanguageSelectorProps> = ({
           </Button>
         ))}
       </div>
-    </div>
+    </LanguageSelectorMobileStyled>
   )
 }

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { HeaderRatafia } from '../../molecules';
-// import './LayoutRatafia.scss'
+import { LayoutRatafiaStyled } from './LayoutRatafia.styled';
 export const LayoutRatafia = ({ header, content, cta, footerDesktop, footerMobile }) => {
-    return (_jsx("div", { className: 'layout-ratafia', children: _jsxs("div", { className: 'layout-ratafia__wrapper', children: [_jsx("div", { className: 'layout-ratafia__wrapper__header', children: _jsx(HeaderRatafia, { ...header }) }), _jsxs("div", { className: 'layout-ratafia__wrapper__content', children: [content, _jsx("div", { className: 'layout-ratafia__wrapper__cta', children: cta })] }), _jsx("div", { className: 'layout-ratafia__wrapper__footer-desktop', children: footerDesktop }), _jsx("div", { className: 'layout-ratafia__wrapper__footer-mobile', children: footerMobile })] }) }));
+    return (_jsx(LayoutRatafiaStyled, { children: _jsxs("div", { className: 'layout-ratafia__wrapper', children: [_jsx("div", { className: 'layout-ratafia__wrapper__header', children: _jsx(HeaderRatafia, { ...header }) }), _jsxs("div", { className: 'layout-ratafia__wrapper__content', children: [content, _jsx("div", { className: 'layout-ratafia__wrapper__cta', children: cta })] }), _jsx("div", { className: 'layout-ratafia__wrapper__footer-desktop', children: footerDesktop }), _jsx("div", { className: 'layout-ratafia__wrapper__footer-mobile', children: footerMobile })] }) }));
 };
 export default LayoutRatafia;

package/dist/src/components/organisms/LayoutRatafia/LayoutRatafia.styled.d.ts

@@ -0,0 +1 @@
+export declare const LayoutRatafiaStyled: 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/organisms/LayoutRatafia/LayoutRatafia.styled.js

@@ -0,0 +1,91 @@
+import { device } from '../../../globalStyles/breakpoints';
+import styled from 'styled-components';
+export const LayoutRatafiaStyled = styled.div `
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  padding-top: 1rem;
+
+  @media ${device['portrait-tablets']} {
+    padding-top: 3.5rem;
+  }
+
+  .layout-ratafia__wrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+
+    padding: 1.5rem 1.5rem 0 1.5rem;
+
+    width: 100%;
+    height: calc(100vh - 5.125rem);
+
+    border-radius: 16px 16px 0 0;
+    background: var(--others-white);
+    box-shadow: var(--box-shadow-small);
+
+    @media ${device['portrait-tablets']} {
+      padding: 2.5rem 2.5rem 1.5rem 2.5rem;
+    }
+    @media ${device['portrait-tablets']} {
+      width: 800px;
+      height: 890px;
+    }
+
+    &__header {
+      width: 100%;
+      margin-bottom: 1.5rem;
+    }
+
+    &__content {
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      flex: 1 0 0;
+      align-self: stretch;
+
+      gap: 1.5rem;
+      margin-bottom: 1rem;
+      @media ${device['portrait-tablets']} {
+        margin-bottom: 2.5rem;
+      }
+    }
+    &__cta {
+      display: none;
+      @media ${device['portrait-tablets']} {
+        display: block;
+      }
+    }
+    &__footer-desktop {
+      width: 100%;
+      display: none;
+      @media ${device['portrait-tablets']} {
+        display: block;
+      }
+    }
+    &__footer-mobile {
+      display: flex;
+      flex-direction: column;
+      position: sticky;
+      bottom: 0;
+      left: 0;
+      right: 0;
+
+      gap: 1rem;
+      padding: 1.5rem;
+
+      width: 100vw;
+      background: var(--others-white);
+      @media ${device['portrait-tablets']} {
+        display: none;
+      }
+    }
+    .e-button.--primary-1 {
+      height: auto;
+      padding: 0.6875rem 1rem;
+      line-height: 22px;
+    }
+  }
+`;

package/dist/src/components/organisms/LayoutRatafia/{LayoutRatafia.scss → LayoutRatafia.styled.ts}

@@ -1,18 +1,17 @@
-@import '../../../globalStyles/variables.scss';
-@import '../../../globalStyles/mediaqueries.scss';
+import { device } from '../../../globalStyles/breakpoints'
+import styled from 'styled-components'
 
-.layout-ratafia {
+export const LayoutRatafiaStyled = styled.div`
   width: 100%;
   display: flex;
   justify-content: center;
-
   padding-top: 1rem;
 
-  @include portrait-tablets {
+  @media ${device['portrait-tablets']} {
     padding-top: 3.5rem;
   }
 
-  &__wrapper {
+  .layout-ratafia__wrapper {
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -27,10 +26,10 @@
     background: var(--others-white);
     box-shadow: var(--box-shadow-small);
 
-    @include portrait-tablets {
+    @media ${device['portrait-tablets']} {
       padding: 2.5rem 2.5rem 1.5rem 2.5rem;
     }
-    @include portrait-tablets {
+    @media ${device['portrait-tablets']} {
       width: 800px;
       height: 890px;
     }
@@ -50,20 +49,20 @@
 
       gap: 1.5rem;
       margin-bottom: 1rem;
-      @include portrait-tablets {
+      @media ${device['portrait-tablets']} {
         margin-bottom: 2.5rem;
       }
     }
     &__cta {
       display: none;
-      @include portrait-tablets {
+      @media ${device['portrait-tablets']} {
         display: block;
       }
     }
     &__footer-desktop {
       width: 100%;
       display: none;
-      @include portrait-tablets {
+      @media ${device['portrait-tablets']} {
         display: block;
       }
     }
@@ -80,7 +79,7 @@
 
       width: 100vw;
       background: var(--others-white);
-      @include portrait-tablets {
+      @media ${device['portrait-tablets']} {
         display: none;
       }
     }
@@ -90,4 +89,4 @@
       line-height: 22px;
     }
   }
-}
+`

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

@@ -2,11 +2,11 @@ import React from 'react'
 
 import { HeaderRatafia } from '../../molecules'
 import { type LayoutRatafiaProps } from './LayoutRatafiaProps.types'
-// import './LayoutRatafia.scss'
+import { LayoutRatafiaStyled } from './LayoutRatafia.styled'
 
 export const LayoutRatafia: React.FC<LayoutRatafiaProps> = ({ header, content, cta, footerDesktop, footerMobile }) => {
   return (
-    <div className='layout-ratafia'>
+    <LayoutRatafiaStyled>
       <div className='layout-ratafia__wrapper'>
         <div className='layout-ratafia__wrapper__header'>
           <HeaderRatafia {...header} />
@@ -18,7 +18,7 @@ export const LayoutRatafia: React.FC<LayoutRatafiaProps> = ({ header, content, c
         <div className='layout-ratafia__wrapper__footer-desktop'>{footerDesktop}</div>
         <div className='layout-ratafia__wrapper__footer-mobile'>{footerMobile}</div>
       </div>
-    </div>
+    </LayoutRatafiaStyled>
   )
 }
 

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

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { ListStepsGetFormStyled } from './ListStepsGetForm.styled';
 import { StepGetForm } from '../../molecules';
-// import './ListStepsGetForm.scss'
 const ListStepsGetForm = ({ steps = [] }) => {
     if (steps.length === 0)
         return null;
-    return (_jsx("div", { className: 'homeSteps__container', children: _jsx("div", { className: 'homeSteps wrapper', children: _jsx("div", { className: 'homeStepsItemsContainer', children: steps.map((step) => (_jsx(StepGetForm, { ...step }, step.id))) }) }) }));
+    return (_jsx(ListStepsGetFormStyled, { children: _jsx("div", { className: 'homeSteps wrapper', children: _jsx("div", { className: 'homeStepsItemsContainer', children: steps.map((step) => (_jsx(StepGetForm, { ...step }, step.id))) }) }) }));
 };
 export default ListStepsGetForm;

package/dist/src/components/organisms/ListStepsGetForm/ListStepsGetForm.styled.d.ts

@@ -0,0 +1 @@
+export declare const ListStepsGetFormStyled: 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/organisms/ListStepsGetForm/ListStepsGetForm.styled.js

@@ -0,0 +1,34 @@
+import { device } from '../../../globalStyles/breakpoints';
+import styled from 'styled-components';
+export const ListStepsGetFormStyled = styled.div `
+  transform: translateY(0%);
+  @media ${device['portrait-tablets']} {
+    transform: translateY(0%);
+  }
+  @media ${device['landscape-tablets']} {
+    transform: translateY(0%);
+  }
+
+  .homeSteps {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding-top: 2rem;
+    padding-bottom: 2rem;
+    position: relative;
+
+    .homeStepsItemsContainer {
+      display: flex;
+      justify-content: space-between;
+      width: 100%;
+      max-width: 888px;
+      flex-flow: row wrap;
+      padding: 0 1rem;
+
+      @media ${device.laptop} {
+        flex-flow: row nowrap;
+        padding: 0;
+      }
+    }
+  }
+`;

package/dist/src/components/organisms/ListStepsGetForm/{ListStepsGetForm.scss → ListStepsGetForm.styled.ts}

@@ -1,12 +1,12 @@
-@import '../../../globalStyles/variables.scss';
-@import '../../../globalStyles/mediaqueries.scss';
+import { device } from '../../../globalStyles/breakpoints'
+import styled from 'styled-components'
 
-.homeSteps__container {
+export const ListStepsGetFormStyled = styled.div`
   transform: translateY(0%);
-  @include portrait-tablets {
+  @media ${device['portrait-tablets']} {
     transform: translateY(0%);
   }
-  @include landscape-tablets {
+  @media ${device['landscape-tablets']} {
     transform: translateY(0%);
   }
 
@@ -26,10 +26,10 @@
       flex-flow: row wrap;
       padding: 0 1rem;
 
-      @include laptop {
+      @media ${device.laptop} {
         flex-flow: row nowrap;
         padding: 0;
       }
     }
   }
-}
+`

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

@@ -1,14 +1,14 @@
 import React, { type FC } from 'react'
 
 import { type ListStepsGetFormProps } from './ListStepsGetFormProps.types'
+import { ListStepsGetFormStyled } from './ListStepsGetForm.styled'
 import { StepGetForm } from '../../molecules'
-// import './ListStepsGetForm.scss'
 
 const ListStepsGetForm: FC<ListStepsGetFormProps> = ({ steps = [] }) => {
   if (steps.length === 0) return null
 
   return (
-    <div className='homeSteps__container'>
+    <ListStepsGetFormStyled>
       <div className='homeSteps wrapper'>
         <div className='homeStepsItemsContainer'>
           {steps.map((step) => (
@@ -16,7 +16,7 @@ const ListStepsGetForm: FC<ListStepsGetFormProps> = ({ steps = [] }) => {
           ))}
         </div>
       </div>
-    </div>
+    </ListStepsGetFormStyled>
   )
 }
 

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { LoginRatafiaContentStyled } from './LoginRatafiaContent.styled';
 import { TextInput } from '../../molecules';
-// import './LoginRatafiaContent.scss'
 const LoginRatafiaContent = ({ title, email }) => {
-    return (_jsxs("div", { className: 'login-ratafia-content', children: [_jsx("h2", { className: 'login-ratafia-content__title', children: title }), _jsx("div", { className: 'login-ratafia-content__email', children: _jsx(TextInput, { ...email }) })] }));
+    return (_jsxs(LoginRatafiaContentStyled, { children: [_jsx("h2", { className: 'login-ratafia-content__title', children: title }), _jsx("div", { className: 'login-ratafia-content__email', children: _jsx(TextInput, { ...email }) })] }));
 };
 export default LoginRatafiaContent;

package/dist/src/components/organisms/LoginRatafiaContent/LoginRatafiaContent.styled.d.ts

@@ -0,0 +1 @@
+export declare const LoginRatafiaContentStyled: 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/organisms/LoginRatafiaContent/LoginRatafiaContent.styled.js

@@ -0,0 +1,14 @@
+import styled from 'styled-components';
+export const LoginRatafiaContentStyled = styled.div `
+  width: 100%;
+  .login-ratafia-content__title {
+    font-size: 1rem;
+    color: var(--neutral-neutral-2);
+    padding-bottom: 1rem;
+  }
+  .login-ratafia-content__email {
+    .e-text {
+      margin-bottom: 0.5rem;
+    }
+  }
+`;

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

@@ -0,0 +1,15 @@
+import styled from 'styled-components'
+
+export const LoginRatafiaContentStyled = styled.div`
+  width: 100%;
+  .login-ratafia-content__title {
+    font-size: 1rem;
+    color: var(--neutral-neutral-2);
+    padding-bottom: 1rem;
+  }
+  .login-ratafia-content__email {
+    .e-text {
+      margin-bottom: 0.5rem;
+    }
+  }
+`

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

@@ -1,17 +1,17 @@
 import React, { type FC } from 'react'
 
 import { type LoginRatafiaContentProps } from './LoginRatafiaContentProps.types'
+import { LoginRatafiaContentStyled } from './LoginRatafiaContent.styled'
 import { TextInput } from '../../molecules'
-// import './LoginRatafiaContent.scss'
 
 const LoginRatafiaContent: FC<LoginRatafiaContentProps> = ({ title, email }) => {
   return (
-    <div className='login-ratafia-content'>
+    <LoginRatafiaContentStyled>
       <h2 className='login-ratafia-content__title'>{title}</h2>
       <div className='login-ratafia-content__email'>
         <TextInput {...email} />
       </div>
-    </div>
+    </LoginRatafiaContentStyled>
   )
 }
 

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

@@ -1,18 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import classNames from 'classnames';
 import { Button, SidemenuTab } from '../../atoms';
-// import './MobileBottomBar.scss'
-const MobileBottomBar = ({ children, list, active }) => {
+import { MobileBottomBarStyled } from './MobileBottomBar.styled';
+const MobileBottomBar = ({ children, list }) => {
     if (children === undefined && list?.length === 0)
         return null;
-    const classnames = classNames('mobile-bottom-bar', {
-        'mobile-bottom-bar--active': active
-    });
     if (children !== undefined)
-        return _jsx("div", { className: classnames, children: children });
+        return _jsx(MobileBottomBarStyled, { children: children });
     if (list === undefined)
         return null;
-    return (_jsx("div", { className: classnames, children: list.map((tab, index) => {
+    return (_jsx(MobileBottomBarStyled, { children: list.map((tab, index) => {
             if (tab.type === 'button') {
                 return (_jsx(Button, { noLink: true, color: 'primary', ...tab, children: tab.image }, index));
             }

package/dist/src/components/organisms/MobileBottomBar/MobileBottomBar.styled.d.ts

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