@npm_leadtech/legal-lib-components 7.82.52 → 7.83.0

package/dist/src/components/atoms/BenefitCard/BenefitCardProps.types.d.ts

@@ -0,0 +1,8 @@
+export interface BenefitCardProps {
+    id: string;
+    title: string;
+    image?: string;
+    description: string;
+    hasShadow?: boolean;
+    hasBigFontSize?: boolean;
+}

package/dist/src/components/atoms/BenefitCard/BenefitCardProps.types.ts

@@ -0,0 +1,8 @@
+export interface BenefitCardProps {
+  id: string
+  title: string
+  image?: string
+  description: string
+  hasShadow?: boolean
+  hasBigFontSize?: boolean
+}

package/dist/src/components/atoms/BenefitCard/BenefitCardStyled.styled.d.ts

@@ -0,0 +1 @@
+export declare const BenefitCardStyled: 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/{BenefitRatafiaCard/BenefitRatafiaCard.styled.js → BenefitCard/BenefitCardStyled.styled.js}

@@ -1,6 +1,6 @@
 import { device } from '../../../globalStyles/breakpoints';
 import styled from 'styled-components';
-export const BenefitRatafiaCardStyled = styled.div `
+export const BenefitCardStyled = styled.div `
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -12,7 +12,10 @@ export const BenefitRatafiaCardStyled = styled.div `
 
   border-radius: var(--s-border-radius);
   background: rgba(255, 255, 255, 0.8);
-  box-shadow: 0 2px 6px 0 rgba(2, 55, 74, 0.25);
+
+  &.has-shadow {
+    box-shadow: 0 2px 6px 0 rgba(2, 55, 74, 0.25);
+  }
 
   @media ${device['landscape-tablets']} {
     flex-direction: row;
@@ -21,7 +24,7 @@ export const BenefitRatafiaCardStyled = styled.div `
     flex-direction: column;
   }
 
-  .benefit-ratafia-card {
+  .benefit-card {
     &__icon {
       display: flex;
       align-items: flex-start;
@@ -30,11 +33,9 @@ export const BenefitRatafiaCardStyled = styled.div `
 
       border-radius: var(--s-border-radius);
       background: rgba(255, 255, 255, 0.8);
-      box-shadow: 0 2px 6px 0 rgba(2, 55, 74, 0.25);
 
-      img {
-        min-width: 32px;
-        min-height: 32px;
+      &.has-shadow {
+        box-shadow: 0 2px 6px 0 rgba(2, 55, 74, 0.25);
       }
     }
     &__content {

package/dist/src/components/atoms/{BenefitRatafiaCard/BenefitRatafiaCard.styled.ts → BenefitCard/BenefitCardStyled.styled.ts}

@@ -1,7 +1,7 @@
 import { device } from '../../../globalStyles/breakpoints'
 import styled from 'styled-components'
 
-export const BenefitRatafiaCardStyled = styled.div`
+export const BenefitCardStyled = styled.div`
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -13,7 +13,10 @@ export const BenefitRatafiaCardStyled = styled.div`
 
   border-radius: var(--s-border-radius);
   background: rgba(255, 255, 255, 0.8);
-  box-shadow: 0 2px 6px 0 rgba(2, 55, 74, 0.25);
+
+  &.has-shadow {
+    box-shadow: 0 2px 6px 0 rgba(2, 55, 74, 0.25);
+  }
 
   @media ${device['landscape-tablets']} {
     flex-direction: row;
@@ -22,7 +25,7 @@ export const BenefitRatafiaCardStyled = styled.div`
     flex-direction: column;
   }
 
-  .benefit-ratafia-card {
+  .benefit-card {
     &__icon {
       display: flex;
       align-items: flex-start;
@@ -31,11 +34,9 @@ export const BenefitRatafiaCardStyled = styled.div`
 
       border-radius: var(--s-border-radius);
       background: rgba(255, 255, 255, 0.8);
-      box-shadow: 0 2px 6px 0 rgba(2, 55, 74, 0.25);
 
-      img {
-        min-width: 32px;
-        min-height: 32px;
+      &.has-shadow {
+        box-shadow: 0 2px 6px 0 rgba(2, 55, 74, 0.25);
       }
     }
     &__content {

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

@@ -0,0 +1,2 @@
+export { BenefitCard } from './BenefitCard';
+export { type BenefitCardProps } from './BenefitCardProps.types';

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

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

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

@@ -0,0 +1,2 @@
+export { BenefitCard } from './BenefitCard'
+export { type BenefitCardProps } from './BenefitCardProps.types'

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

@@ -1,7 +1,7 @@
 @import '../../../globalStyles/variables.scss';
 @import '../../../globalStyles/mediaqueries.scss';
 
-html[data-theme='lawdistrict'] {
+html[data-theme='primarygreen'] {
   .e-button {
     &.--primary {
       &-3 {
@@ -73,7 +73,7 @@ html[data-theme='lawdistrict'] {
       border: 2px solid var(--button);
       color: get-color(others, white);
       font-weight: bold;
-      height: 100%;
+      max-height: 100%;
 
       &:hover {
         background-color: var(--button-hover);

package/dist/src/components/atoms/Button/ButtonProps.types.d.ts

@@ -1,3 +1,4 @@
+export type Colors = 'primary' | 'primary2' | 'primary3' | 'primary4' | 'secondary' | 'secondary2' | 'secondary3' | 'secondary4' | 'secondaryIcon' | 'secondaryIconBold' | 'secondaryIconDark' | 'tertiary' | 'tertiary2' | 'styleless' | 'transparent';
 export interface ButtonProps {
     label: string;
     dataQa: string;
@@ -8,7 +9,7 @@ export interface ButtonProps {
     noLinkNoFunc?: boolean;
     onClick?: (functionParameters?: any) => void;
     functionParameters?: any;
-    color?: 'primary' | 'primary2' | 'primary3' | 'primary4' | 'secondary' | 'secondary2' | 'secondary3' | 'secondary4' | 'secondaryIcon' | 'secondaryIconBold' | 'secondaryIconDark' | 'tertiary' | 'tertiary2' | 'styleless' | 'transparent';
+    color?: Colors;
     error?: boolean;
     disabled?: boolean;
     fluid?: boolean;

package/dist/src/components/atoms/Button/ButtonProps.types.js

@@ -1 +1,2 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 export {};

package/dist/src/components/atoms/Button/ButtonProps.types.ts

@@ -1,4 +1,21 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
+
+export type Colors =
+  | 'primary'
+  | 'primary2'
+  | 'primary3'
+  | 'primary4'
+  | 'secondary'
+  | 'secondary2'
+  | 'secondary3'
+  | 'secondary4'
+  | 'secondaryIcon'
+  | 'secondaryIconBold'
+  | 'secondaryIconDark'
+  | 'tertiary'
+  | 'tertiary2'
+  | 'styleless'
+  | 'transparent'
 export interface ButtonProps {
   label: string
   dataQa: string
@@ -9,22 +26,7 @@ export interface ButtonProps {
   noLinkNoFunc?: boolean
   onClick?: (functionParameters?: any) => void
   functionParameters?: any
-  color?:
-    | 'primary'
-    | 'primary2'
-    | 'primary3'
-    | 'primary4'
-    | 'secondary'
-    | 'secondary2'
-    | 'secondary3'
-    | 'secondary4'
-    | 'secondaryIcon'
-    | 'secondaryIconBold'
-    | 'secondaryIconDark'
-    | 'tertiary'
-    | 'tertiary2'
-    | 'styleless'
-    | 'transparent'
+  color?: Colors
   error?: boolean
   disabled?: boolean
   fluid?: boolean

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

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

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

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CardBoxStyled } from './CardBox.styled';
+import { IconSvgURLWithThemeColor } from '../IconSvgURLWithThemeColor';
+import { RichTextStrapi } from '../RichTextStrapi';
+export const CardBox = ({ icon, text, borderRadius = '16px', gap = '1rem', padding = '16px 24px', height = '24', width = '24' }) => {
+    return (_jsxs(CardBoxStyled, { style: { gap, padding, borderRadius }, children: [_jsx(IconSvgURLWithThemeColor, { url: icon, height: height, width: width }), _jsx(RichTextStrapi, { html: text })] }));
+};

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

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

@@ -0,0 +1,22 @@
+import styled from 'styled-components';
+export const CardBoxStyled = styled.div `
+  display: flex;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 22px;
+  letter-spacing: -0.3px;
+  background-color: var(--others-white);
+  align-items: center;
+  flex: 1;
+  max-width: 592px;
+  a {
+    color: var(--primary-main);
+  }
+
+  i {
+    display: inline-block;
+    object-fit: contain;
+    flex-shrink: 0;
+  }
+`;

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

@@ -0,0 +1,23 @@
+import styled from 'styled-components'
+
+export const CardBoxStyled = styled.div`
+  display: flex;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 22px;
+  letter-spacing: -0.3px;
+  background-color: var(--others-white);
+  align-items: center;
+  flex: 1;
+  max-width: 592px;
+  a {
+    color: var(--primary-main);
+  }
+
+  i {
+    display: inline-block;
+    object-fit: contain;
+    flex-shrink: 0;
+  }
+`

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

@@ -0,0 +1,23 @@
+import React from 'react'
+
+import { type CardBoxProps } from './CardBoxProps.types'
+import { CardBoxStyled } from './CardBox.styled'
+import { IconSvgURLWithThemeColor } from '../IconSvgURLWithThemeColor'
+import { RichTextStrapi } from '../RichTextStrapi'
+
+export const CardBox: React.FC<CardBoxProps> = ({
+  icon,
+  text,
+  borderRadius = '16px',
+  gap = '1rem',
+  padding = '16px 24px',
+  height = '24',
+  width = '24'
+}) => {
+  return (
+    <CardBoxStyled style={{ gap, padding, borderRadius }}>
+      <IconSvgURLWithThemeColor url={icon} height={height} width={width} />
+      <RichTextStrapi html={text} />
+    </CardBoxStyled>
+  )
+}

package/dist/src/components/atoms/CardBox/CardBoxProps.types.d.ts

@@ -0,0 +1,10 @@
+export interface CardBoxProps {
+    text: string;
+    icon: string;
+    id?: string;
+    borderRadius?: string;
+    padding?: string;
+    gap?: string;
+    height?: string;
+    width?: string;
+}

package/dist/src/components/atoms/CardBox/CardBoxProps.types.ts

@@ -0,0 +1,10 @@
+export interface CardBoxProps {
+  text: string
+  icon: string
+  id?: string
+  borderRadius?: string
+  padding?: string
+  gap?: string
+  height?: string
+  width?: string
+}

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

@@ -0,0 +1,2 @@
+export { CardBox } from './CardBox';
+export { type CardBoxProps } from './CardBoxProps.types';

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

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

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

@@ -0,0 +1,2 @@
+export { CardBox } from './CardBox'
+export { type CardBoxProps } from './CardBoxProps.types'

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

@@ -80,7 +80,7 @@ export const CardPaneStyled = styled.div `
       }
       &.pane--title--button {
         cursor: pointer;
-        color: var(--primary-main);
+        color: --neutral-neutral-2;
       }
     }
     &--description {
@@ -93,10 +93,12 @@ export const CardPaneStyled = styled.div `
 
       &--active {
         color: var(--primary-main);
+        font-weight: 700;
       }
 
       &--inactive {
         color: var(--error-main);
+        font-weight: 700;
       }
     }
 
@@ -106,16 +108,10 @@ export const CardPaneStyled = styled.div `
   }
   .marker {
     display: inline-block;
-    margin-left: -10px;
-    @-moz-document url-prefix() {
-      margin-left: 0px;
-    }
-    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
-      margin-left: 0px;
-    }
+    margin-left: 0px;
   }
   .position {
-    margin-left: 2px;
+    margin-left: 0px;
     @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
       margin-left: 15px;
     }

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

@@ -81,7 +81,7 @@ export const CardPaneStyled = styled.div`
       }
       &.pane--title--button {
         cursor: pointer;
-        color: var(--primary-main);
+        color: --neutral-neutral-2;
       }
     }
     &--description {
@@ -94,10 +94,12 @@ export const CardPaneStyled = styled.div`
 
       &--active {
         color: var(--primary-main);
+        font-weight: 700;
       }
 
       &--inactive {
         color: var(--error-main);
+        font-weight: 700;
       }
     }
 
@@ -107,16 +109,10 @@ export const CardPaneStyled = styled.div`
   }
   .marker {
     display: inline-block;
-    margin-left: -10px;
-    @-moz-document url-prefix() {
-      margin-left: 0px;
-    }
-    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
-      margin-left: 0px;
-    }
+    margin-left: 0px;
   }
   .position {
-    margin-left: 2px;
+    margin-left: 0px;
     @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
       margin-left: 15px;
     }

package/dist/src/components/atoms/CardPane/CardPaneInfo.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-const CardPaneInfo = ({ description, subdescription, id, title, handleClick }) => {
-    const paneTitle = (_jsx(_Fragment, { children: handleClick ? (_jsx("button", { onClick: handleClick, className: 'pane--title pane--title--button', children: title })) : (_jsx("div", { className: 'pane--title', children: title })) }));
+const CardPaneInfo = ({ dataQA, description, subdescription, id, title, handleClick }) => {
+    const paneTitle = (_jsx(_Fragment, { children: handleClick ? (_jsx("button", { onClick: handleClick, "data-qa": dataQA, className: 'pane--title pane--title--button', children: title })) : (_jsx("div", { className: 'pane--title', children: title })) }));
     if (description === 'Active' || description === 'Inactive') {
         let descriptionClass;
         if (description === 'Active') {
@@ -9,7 +9,7 @@ const CardPaneInfo = ({ description, subdescription, id, title, handleClick }) =
         else if (description === 'Inactive') {
             descriptionClass = 'pane--description--inactive';
         }
-        return (_jsxs("div", { className: 'pane-wrapper', children: [paneTitle, _jsx("div", { "data-testid": 'description-div', className: descriptionClass, children: _jsx("li", { className: 'position', children: _jsx("div", { className: 'marker', children: description }) }) })] }, id));
+        return (_jsxs("div", { className: 'pane-wrapper', children: [paneTitle, _jsx("div", { "data-testid": 'description-div', className: descriptionClass, children: _jsx("div", { className: 'position', children: _jsx("div", { className: 'marker', children: description }) }) })] }, id));
     }
     return (_jsxs("div", { className: 'pane-wrapper', children: [paneTitle, _jsxs("div", { className: 'pane--description', children: [description, subdescription !== undefined && _jsx("span", { className: 'pane--description--subdescription', children: subdescription })] })] }, id));
 };

package/dist/src/components/atoms/CardPane/CardPaneInfo.tsx

@@ -2,11 +2,11 @@ import React, { type FC } from 'react'
 
 import { type CardPaneInfoProps } from './CardPaneProps.types'
 
-const CardPaneInfo: FC<CardPaneInfoProps> = ({ description, subdescription, id, title, handleClick }) => {
+const CardPaneInfo: FC<CardPaneInfoProps> = ({ dataQA, description, subdescription, id, title, handleClick }) => {
   const paneTitle = (
     <>
       {handleClick ? (
-        <button onClick={handleClick} className='pane--title pane--title--button'>
+        <button onClick={handleClick} data-qa={dataQA} className='pane--title pane--title--button'>
           {title}
         </button>
       ) : (
@@ -25,9 +25,9 @@ const CardPaneInfo: FC<CardPaneInfoProps> = ({ description, subdescription, id,
       <div key={id} className='pane-wrapper'>
         {paneTitle}
         <div data-testid='description-div' className={descriptionClass}>
-          <li className='position'>
+          <div className='position'>
             <div className='marker'>{description}</div>
-          </li>
+          </div>
         </div>
       </div>
     )

package/dist/src/components/atoms/CardPane/CardPaneProps.types.d.ts

@@ -6,5 +6,6 @@ export interface CardPaneInfoProps {
     id: string;
     title: string;
     subdescription?: string;
+    dataQA?: string;
     handleClick?: () => void;
 }

package/dist/src/components/atoms/CardPane/CardPaneProps.types.ts

@@ -7,5 +7,6 @@ export interface CardPaneInfoProps {
   id: string
   title: string
   subdescription?: string
+  dataQA?: string
   handleClick?: () => void
 }

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

@@ -0,0 +1,3 @@
+import { ContactInformationProps } from './ContactInformationHeaderProps';
+import React from 'react';
+export declare const ContactInformation: React.FC<ContactInformationProps>;

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

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ContactInformationStyled } from './ContactInformationHeader.styled';
+export const ContactInformation = ({ phoneNumber, scheduleText }) => {
+    return (_jsxs(ContactInformationStyled, { children: [_jsx("a", { href: `tel:${phoneNumber}`, title: 'Call us', children: _jsx("strong", { children: phoneNumber }) }), _jsx("p", { children: scheduleText })] }));
+};

package/dist/src/components/atoms/{BenefitRatafiaCard/BenefitRatafiaCard.styled.d.ts → ContactInformationHeader/ContactInformationHeader.styled.d.ts}

@@ -1 +1 @@
-export declare const BenefitRatafiaCardStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const ContactInformationStyled: 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/ContactInformationHeader/ContactInformationHeader.styled.js

@@ -0,0 +1,21 @@
+import styled from 'styled-components';
+export const ContactInformationStyled = styled.div `
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 1.5rem 0;
+  border-top: 1px solid var(--neutral-neutral-4);
+  a {
+    background-color: var(--button);
+    border: 2px solid var(--button);
+    color: var(--others-white);
+    font-weight: bold;
+    height: 100%;
+    border-radius: var(--s-border-radius);
+    padding: 0.5rem 1rem;
+    display: block;
+    text-align: center;
+    width: 80%;
+  }
+`;

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

@@ -0,0 +1,22 @@
+import styled from 'styled-components'
+
+export const ContactInformationStyled = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 1.5rem 0;
+  border-top: 1px solid var(--neutral-neutral-4);
+  a {
+    background-color: var(--button);
+    border: 2px solid var(--button);
+    color: var(--others-white);
+    font-weight: bold;
+    height: 100%;
+    border-radius: var(--s-border-radius);
+    padding: 0.5rem 1rem;
+    display: block;
+    text-align: center;
+    width: 80%;
+  }
+`

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

@@ -0,0 +1,14 @@
+import { ContactInformationProps } from './ContactInformationHeaderProps'
+import { ContactInformationStyled } from './ContactInformationHeader.styled'
+import React from 'react'
+
+export const ContactInformation: React.FC<ContactInformationProps> = ({ phoneNumber, scheduleText }) => {
+  return (
+    <ContactInformationStyled>
+      <a href={`tel:${phoneNumber}`} title='Call us'>
+        <strong>{phoneNumber}</strong>
+      </a>
+      <p>{scheduleText}</p>
+    </ContactInformationStyled>
+  )
+}

package/dist/src/components/atoms/ContactInformationHeader/ContactInformationHeaderProps.d.ts

@@ -0,0 +1,4 @@
+export interface ContactInformationProps {
+    phoneNumber?: string;
+    scheduleText?: string;
+}

package/dist/src/components/atoms/ContactInformationHeader/ContactInformationHeaderProps.ts

@@ -0,0 +1,4 @@
+export interface ContactInformationProps {
+  phoneNumber?: string
+  scheduleText?: string
+}

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

@@ -0,0 +1,2 @@
+export * from './ContactInformationHeader';
+export * from './ContactInformationHeaderProps';

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

@@ -0,0 +1,2 @@
+export * from './ContactInformationHeader';
+export * from './ContactInformationHeaderProps';

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

@@ -0,0 +1,2 @@
+export * from './ContactInformationHeader'
+export * from './ContactInformationHeaderProps'

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

@@ -26,7 +26,7 @@ export const DialogMenuIconStyled = styled.div `
       align-items: flex-start;
       justify-content: space-between;
       position: absolute;
-      z-index: 1;
+      z-index: 2;
       top: 1.5rem;
       right: -5rem;
 

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

@@ -27,7 +27,7 @@ export const DialogMenuIconStyled = styled.div`
       align-items: flex-start;
       justify-content: space-between;
       position: absolute;
-      z-index: 1;
+      z-index: 2;
       top: 1.5rem;
       right: -5rem;
 

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

@@ -1,8 +1,6 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { DividerStyled } from './Divider.styled';
 const Divider = ({ containerClass, lineClass, text, image }) => {
-    if (text?.length === 0 || image?.length === 0)
-        return null;
-    return (_jsxs(DividerStyled, { className: `divider ${containerClass ?? ''}`, children: [_jsx("div", { className: `divider__line ${lineClass ?? ''}` }), text !== undefined && _jsx("p", { className: 'divider__word', children: text }), image !== undefined && _jsx("img", { className: 'divider__image', src: image, alt: '', role: 'img' }), _jsx("div", { className: `divider__line ${lineClass ?? ''}` })] }));
+    return (_jsx(DividerStyled, { className: `divider ${containerClass ?? ''}`, children: text?.length === 0 || image?.length === 0 ? (_jsx("div", { className: `divider__line--complete ${lineClass ?? ''}` })) : (_jsxs(_Fragment, { children: [_jsx("div", { className: `divider__line ${lineClass ?? ''}` }), text !== undefined && _jsx("p", { className: 'divider__word', children: text }), image !== undefined && _jsx("img", { className: 'divider__image', src: image, alt: '', role: 'img' }), _jsx("div", { className: `divider__line ${lineClass ?? ''}` })] })) }));
 };
 export default Divider;

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

@@ -11,6 +11,12 @@ export const DividerStyled = styled.div `
       border-bottom: 1px solid var(--neutral-neutral-4);
     }
 
+    &__line--complete {
+      width: 100%;
+      height: 0px;
+      border-bottom: 1px solid var(--neutral-neutral-4);
+    }
+
     &__word,
     &__image {
       width: fit-content;

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

@@ -12,6 +12,12 @@ export const DividerStyled = styled.div`
       border-bottom: 1px solid var(--neutral-neutral-4);
     }
 
+    &__line--complete {
+      width: 100%;
+      height: 0px;
+      border-bottom: 1px solid var(--neutral-neutral-4);
+    }
+
     &__word,
     &__image {
       width: fit-content;