@npm_leadtech/legal-lib-components 7.42.2 → 7.43.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (78) hide show
  1. package/dist/css/styles.css +3 -0
  2. package/dist/src/components/molecules/LawGeniusInfoCard/LawGeniusInfoCard.d.ts +3 -0
  3. package/dist/src/components/molecules/LawGeniusInfoCard/LawGeniusInfoCard.js +5 -0
  4. package/dist/src/components/molecules/LawGeniusInfoCard/LawGeniusInfoCard.styled.d.ts +1 -0
  5. package/dist/src/components/molecules/LawGeniusInfoCard/LawGeniusInfoCard.styled.js +46 -0
  6. package/dist/src/components/molecules/LawGeniusInfoCard/LawGeniusInfoCard.styled.ts +47 -0
  7. package/dist/src/components/molecules/LawGeniusInfoCard/LawGeniusInfoCard.tsx +20 -0
  8. package/dist/src/components/molecules/LawGeniusInfoCard/LawGeniusInfoCardProps.d.ts +5 -0
  9. package/dist/src/components/molecules/LawGeniusInfoCard/LawGeniusInfoCardProps.js +1 -0
  10. package/dist/src/components/molecules/LawGeniusInfoCard/LawGeniusInfoCardProps.ts +5 -0
  11. package/dist/src/components/molecules/LawGeniusInfoCard/index.d.ts +2 -0
  12. package/dist/src/components/molecules/LawGeniusInfoCard/index.js +2 -0
  13. package/dist/src/components/molecules/LawGeniusInfoCard/index.ts +2 -0
  14. package/dist/src/components/molecules/SubtypeDocumentCard/SubtypeDocumentCard.js +2 -2
  15. package/dist/src/components/molecules/SubtypeDocumentCard/SubtypeDocumentCard.styled.d.ts +1 -6
  16. package/dist/src/components/molecules/SubtypeDocumentCard/SubtypeDocumentCard.styled.js +121 -231
  17. package/dist/src/components/molecules/SubtypeDocumentCard/SubtypeDocumentCard.styled.ts +119 -238
  18. package/dist/src/components/molecules/SubtypeDocumentCard/SubtypeDocumentCard.tsx +5 -5
  19. package/dist/src/components/molecules/SubtypeDocumentCard/SubtypeDocumentCardProps.types.d.ts +0 -2
  20. package/dist/src/components/molecules/SubtypeDocumentCard/SubtypeDocumentCardProps.types.ts +0 -3
  21. package/dist/src/components/molecules/SubtypeDocumentCard/index.d.ts +1 -1
  22. package/dist/src/components/molecules/SubtypeDocumentCard/index.ts +1 -1
  23. package/dist/src/components/molecules/TextInput/Input.d.ts +1 -1
  24. package/dist/src/components/molecules/TextInput/Input.js +2 -1
  25. package/dist/src/components/molecules/TextInput/Input.tsx +3 -2
  26. package/dist/src/components/molecules/TextInput/TextInput.scss +4 -0
  27. package/dist/src/components/molecules/TextInput/TextInputProps.types.d.ts +1 -1
  28. package/dist/src/components/molecules/TextInput/TextInputProps.types.ts +1 -1
  29. package/dist/src/components/molecules/TextInput/stories/TextInput.stories.tsx +10 -0
  30. package/dist/src/components/organisms/TryOurFreeLegalBlogsContent/TryOurFreeLegalBlogsContent.js +5 -2
  31. package/dist/src/components/organisms/TryOurFreeLegalBlogsContent/TryOurFreeLegalBlogsContent.styled.js +35 -2
  32. package/dist/src/components/organisms/TryOurFreeLegalBlogsContent/TryOurFreeLegalBlogsContent.styled.ts +35 -2
  33. package/dist/src/components/organisms/TryOurFreeLegalBlogsContent/TryOurFreeLegalBlogsContent.tsx +7 -2
  34. package/dist/src/components/organisms/TryOurFreeLegalBlogsContent/TryOurFreeLegalBlogsContentProps.types.d.ts +4 -1
  35. package/dist/src/components/organisms/TryOurFreeLegalBlogsContent/TryOurFreeLegalBlogsContentProps.types.js +2 -0
  36. package/dist/src/components/organisms/TryOurFreeLegalBlogsContent/TryOurFreeLegalBlogsContentProps.types.ts +4 -1
  37. package/dist/src/components/pages/HowItWorksPage/HowItWorksPage.d.ts +3 -0
  38. package/dist/src/components/pages/HowItWorksPage/HowItWorksPage.js +5 -0
  39. package/dist/src/components/pages/HowItWorksPage/HowItWorksPage.tsx +26 -0
  40. package/dist/src/components/pages/HowItWorksPage/HowItWorksPageProps.d.ts +10 -0
  41. package/dist/src/components/pages/HowItWorksPage/HowItWorksPageProps.js +1 -0
  42. package/dist/src/components/pages/HowItWorksPage/HowItWorksPageProps.ts +16 -0
  43. package/dist/src/components/pages/HowItWorksPage/index.d.ts +2 -0
  44. package/dist/src/components/pages/HowItWorksPage/index.js +2 -0
  45. package/dist/src/components/pages/HowItWorksPage/index.ts +2 -0
  46. package/dist/src/components/sections/LawGeniusCardsSection/LawGeniusCardsSection.d.ts +4 -0
  47. package/dist/src/components/sections/LawGeniusCardsSection/LawGeniusCardsSection.js +12 -0
  48. package/dist/src/components/sections/LawGeniusCardsSection/LawGeniusCardsSection.styled.d.ts +1 -0
  49. package/dist/src/components/sections/LawGeniusCardsSection/LawGeniusCardsSection.styled.js +118 -0
  50. package/dist/src/components/sections/LawGeniusCardsSection/LawGeniusCardsSection.styled.ts +119 -0
  51. package/dist/src/components/sections/LawGeniusCardsSection/LawGeniusCardsSection.tsx +70 -0
  52. package/dist/src/components/sections/LawGeniusCardsSection/LawGeniusCardsSectionProps.types.d.ts +15 -0
  53. package/dist/src/components/sections/LawGeniusCardsSection/LawGeniusCardsSectionProps.types.js +1 -0
  54. package/dist/src/components/sections/LawGeniusCardsSection/LawGeniusCardsSectionProps.types.ts +16 -0
  55. package/dist/src/components/sections/LawGeniusCardsSection/index.d.ts +2 -0
  56. package/dist/src/components/sections/LawGeniusCardsSection/index.js +1 -0
  57. package/dist/src/components/sections/LawGeniusCardsSection/index.ts +2 -0
  58. package/dist/src/components/sections/TryNowSection/TryNowSection.d.ts +3 -0
  59. package/dist/src/components/sections/TryNowSection/TryNowSection.js +6 -0
  60. package/dist/src/components/sections/TryNowSection/TryNowSection.styled.d.ts +1 -0
  61. package/dist/src/components/sections/TryNowSection/TryNowSection.styled.js +190 -0
  62. package/dist/src/components/sections/TryNowSection/TryNowSection.styled.ts +191 -0
  63. package/dist/src/components/sections/TryNowSection/TryNowSection.tsx +27 -0
  64. package/dist/src/components/sections/TryNowSection/TryNowSectionProps.d.ts +8 -0
  65. package/dist/src/components/sections/TryNowSection/TryNowSectionProps.js +1 -0
  66. package/dist/src/components/sections/TryNowSection/TryNowSectionProps.ts +9 -0
  67. package/dist/src/components/sections/TryNowSection/index.d.ts +2 -0
  68. package/dist/src/components/sections/TryNowSection/index.js +1 -0
  69. package/dist/src/components/sections/TryNowSection/index.ts +2 -0
  70. package/dist/src/components/sections/TryOurFreeLegalBlogsSection/TryOurFreeLegalBlogsSection.js +9 -1
  71. package/dist/src/components/sections/TryOurFreeLegalBlogsSection/TryOurFreeLegalBlogsSection.styled.js +30 -0
  72. package/dist/src/components/sections/TryOurFreeLegalBlogsSection/TryOurFreeLegalBlogsSection.styled.ts +30 -0
  73. package/dist/src/components/sections/TryOurFreeLegalBlogsSection/TryOurFreeLegalBlogsSection.tsx +11 -1
  74. package/dist/src/components/sections/index.d.ts +3 -0
  75. package/dist/src/components/sections/index.js +3 -0
  76. package/dist/src/components/sections/index.ts +3 -0
  77. package/dist/tsconfig.build.tsbuildinfo +1 -1
  78. package/package.json +2 -1
@@ -2032,6 +2032,9 @@ h2.react-datepicker__current-month {
2032
2032
  margin-bottom: 1rem;
2033
2033
  position: relative;
2034
2034
  }
2035
+ .e-text .e-text-input__short {
2036
+ width: 50%;
2037
+ }
2035
2038
  .e-text input {
2036
2039
  -webkit-appearance: none;
2037
2040
  -moz-appearance: none;
@@ -0,0 +1,3 @@
1
+ import React from 'react';
2
+ import { LawGeniusInfoCardProps } from './LawGeniusInfoCardProps';
3
+ export declare const LawGeniusInfoCard: React.FC<LawGeniusInfoCardProps>;
@@ -0,0 +1,5 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { LawGeniusInfoCardStyled } from './LawGeniusInfoCard.styled';
3
+ export const LawGeniusInfoCard = ({ icon, title = '', text = '' }) => {
4
+ return (_jsx(LawGeniusInfoCardStyled, { className: 'info-card', children: _jsx("div", { className: 'info-card-wrapper', children: _jsxs("div", { className: 'content', children: [_jsxs("h3", { className: 'title', children: [_jsx("div", { className: 'info-icon', children: icon }), title] }), _jsx("p", { className: 'text', children: text })] }) }) }));
5
+ };
@@ -0,0 +1 @@
1
+ export declare const LawGeniusInfoCardStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
@@ -0,0 +1,46 @@
1
+ import styled from 'styled-components';
2
+ export const LawGeniusInfoCardStyled = styled.div `
3
+ width: 100%;
4
+ background-color: var(--others-white);
5
+ border-radius: var(--s-border-radius);
6
+ margin-top: 1rem;
7
+ margin-bottom: 1rem;
8
+ display: flex;
9
+ align-items: center;
10
+ padding: 1rem 1.5rem;
11
+
12
+ .info-card-wrapper {
13
+ display: flex;
14
+ }
15
+
16
+ @media not all and (min-resolution: 0.001dpcm) {
17
+ @supports (-webkit-appearance: none) {
18
+ letter-spacing: -1px;
19
+ }
20
+ }
21
+
22
+ .info-icon {
23
+ margin-right: 0.5rem;
24
+ max-width: 20px;
25
+ }
26
+
27
+ .title {
28
+ display: flex;
29
+ color: --neutral-neutral-1;
30
+ font-size: 1rem;
31
+ font-weight: bold;
32
+
33
+ &.email {
34
+ text-decoration: underline;
35
+ }
36
+
37
+ a {
38
+ color: var(--primary-main-dark-1);
39
+ }
40
+ }
41
+
42
+ .text {
43
+ font-size: 0.875rem;
44
+ color: --neutral-neutral-1;
45
+ }
46
+ `;
@@ -0,0 +1,47 @@
1
+ import styled from 'styled-components'
2
+
3
+ export const LawGeniusInfoCardStyled = styled.div`
4
+ width: 100%;
5
+ background-color: var(--others-white);
6
+ border-radius: var(--s-border-radius);
7
+ margin-top: 1rem;
8
+ margin-bottom: 1rem;
9
+ display: flex;
10
+ align-items: center;
11
+ padding: 1rem 1.5rem;
12
+
13
+ .info-card-wrapper {
14
+ display: flex;
15
+ }
16
+
17
+ @media not all and (min-resolution: 0.001dpcm) {
18
+ @supports (-webkit-appearance: none) {
19
+ letter-spacing: -1px;
20
+ }
21
+ }
22
+
23
+ .info-icon {
24
+ margin-right: 0.5rem;
25
+ max-width: 20px;
26
+ }
27
+
28
+ .title {
29
+ display: flex;
30
+ color: --neutral-neutral-1;
31
+ font-size: 1rem;
32
+ font-weight: bold;
33
+
34
+ &.email {
35
+ text-decoration: underline;
36
+ }
37
+
38
+ a {
39
+ color: var(--primary-main-dark-1);
40
+ }
41
+ }
42
+
43
+ .text {
44
+ font-size: 0.875rem;
45
+ color: --neutral-neutral-1;
46
+ }
47
+ `
@@ -0,0 +1,20 @@
1
+ import React from 'react'
2
+
3
+ import { LawGeniusInfoCardProps } from './LawGeniusInfoCardProps'
4
+ import { LawGeniusInfoCardStyled } from './LawGeniusInfoCard.styled'
5
+
6
+ export const LawGeniusInfoCard: React.FC<LawGeniusInfoCardProps> = ({ icon, title = '', text = '' }) => {
7
+ return (
8
+ <LawGeniusInfoCardStyled className='info-card'>
9
+ <div className='info-card-wrapper'>
10
+ <div className='content'>
11
+ <h3 className='title'>
12
+ <div className='info-icon'>{icon}</div>
13
+ {title}
14
+ </h3>
15
+ <p className='text'>{text}</p>
16
+ </div>
17
+ </div>
18
+ </LawGeniusInfoCardStyled>
19
+ )
20
+ }
@@ -0,0 +1,5 @@
1
+ export interface LawGeniusInfoCardProps {
2
+ title: string;
3
+ text: string;
4
+ icon: React.ReactNode;
5
+ }
@@ -0,0 +1,5 @@
1
+ export interface LawGeniusInfoCardProps {
2
+ title: string
3
+ text: string
4
+ icon: React.ReactNode
5
+ }
@@ -0,0 +1,2 @@
1
+ export * from './LawGeniusInfoCard';
2
+ export * from './LawGeniusInfoCardProps';
@@ -0,0 +1,2 @@
1
+ export * from './LawGeniusInfoCard';
2
+ export * from './LawGeniusInfoCardProps';
@@ -0,0 +1,2 @@
1
+ export * from './LawGeniusInfoCard'
2
+ export * from './LawGeniusInfoCardProps'
@@ -1,7 +1,7 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { Button } from '../../atoms';
3
3
  import { SubtypeDocumentCardStyled } from './SubtypeDocumentCard.styled';
4
- const SubtypeDocumentCard = ({ title, productUrl, description, children, pdfButton, wordButton, createDocButton, format = 'Default' }) => {
5
- return (_jsxs(SubtypeDocumentCardStyled, { className: 'subtype-document-card', "$format": format, children: [_jsx("div", { className: 'image-container', children: children }), _jsxs("div", { className: 'content', children: [_jsx("a", { href: productUrl, children: _jsx("h3", { className: 'title', children: title }) }), format === 'Default' && _jsx("p", { className: 'description', children: description }), _jsxs("div", { className: 'buttons-container', children: [format === 'Default' && _jsx(Button, { ...createDocButton }), _jsxs("div", { className: 'downloadable-buttons', children: [_jsx(Button, { ...pdfButton }), _jsx(Button, { ...wordButton })] })] })] })] }));
4
+ const SubtypeDocumentCard = ({ title, productUrl, description, children, pdfButton, wordButton, createDocButton }) => {
5
+ return (_jsxs(SubtypeDocumentCardStyled, { className: 'subtype-document-card', children: [_jsx("div", { className: 'image-container', children: children }), _jsxs("div", { className: 'content', children: [_jsx("a", { href: productUrl, children: _jsx("h3", { className: 'title', children: title }) }), _jsx("p", { className: 'description', children: description }), _jsxs("div", { className: 'buttons-container', children: [_jsx(Button, { ...createDocButton }), _jsxs("div", { className: 'downloadable-buttons', children: [_jsx(Button, { ...pdfButton }), _jsx(Button, { ...wordButton })] })] })] })] }));
6
6
  };
7
7
  export default SubtypeDocumentCard;
@@ -1,6 +1 @@
1
- import { SubtypeDocumentCardFormat } from './SubtypeDocumentCardProps.types';
2
- interface SubtypeDocumentCardStyledProps {
3
- $format: SubtypeDocumentCardFormat;
4
- }
5
- export declare const SubtypeDocumentCardStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, SubtypeDocumentCardStyledProps>> & string;
6
- export {};
1
+ export declare const SubtypeDocumentCardStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
@@ -1,271 +1,161 @@
1
- import styled from 'styled-components';
2
1
  import { device, size } from '../../../globalStyles/breakpoints';
2
+ import styled from 'styled-components';
3
3
  export const SubtypeDocumentCardStyled = styled.div `
4
- /* Default format styles (original styles) */
5
- ${({ $format }) => $format === 'Default' &&
6
- `
7
- display: flex;
8
- flex-direction: column;
9
- width: 100%;
10
- align-items: center;
11
- justify-content: center;
12
- width: 100%;
13
- max-width: 376px;
14
- min-height: 600px;
15
- padding: 2rem 1.5rem 2rem 1.5rem;
16
- gap: 24px;
17
- border-radius: var(--s-border-radius) 0 0 0;
18
- opacity: 0px;
19
- box-shadow: 0px 2px 6px 0px var(--neutral-neutral-3);
20
- background-color: var(--secondary-main-light-5);
21
- margin-bottom: 1.5rem;
4
+ display: flex;
5
+ flex-direction: column;
6
+ width: 100%;
7
+ align-items: center;
8
+ justify-content: center;
9
+ width: 100%;
10
+ max-width: 376px;
11
+ min-height: 600px;
12
+ padding: 2rem 1.5rem 2rem 1.5rem;
13
+ gap: 24px;
14
+ border-radius: var(--s-border-radius) 0 0 0;
15
+ opacity: 0px;
16
+ box-shadow: 0px 2px 6px 0px var(--neutral-neutral-3);
17
+ background-color: var(--secondary-main-light-5);
18
+ margin-bottom: 1.5rem;
19
+
20
+ .image-container {
21
+ width: 70%;
22
+ }
23
+
24
+ @media (min-width: ${size.xs}) {
25
+ width: 400px;
26
+ max-width: inherit;
27
+ }
28
+
29
+ @media (min-width: ${size.md}) {
30
+ width: 543px;
31
+ height: 364px;
32
+ min-height: 380px;
33
+ align-items: flex-start;
34
+ flex-direction: row;
22
35
 
23
36
  .image-container {
24
- width: 70%;
25
- }
26
-
27
- @media (min-width: ${size.xs}) {
28
- width: 400px;
29
- max-width: inherit;
30
- }
37
+ width: 40%;
31
38
 
32
- @media (min-width: ${size.md}) {
33
- width: 543px;
34
- height: 364px;
35
- min-height: 380px;
36
- align-items: flex-start;
37
- flex-direction: row;
38
-
39
- .image-container {
40
- width: 40%;
41
-
42
- @media (min-width: ${size.lg}) {
43
- width: 30%;
44
- }
39
+ @media (min-width: ${size.lg}) {
40
+ width: 30%;
45
41
  }
46
42
  }
43
+ }
47
44
 
48
- @media (min-width: ${size.lg}) {
49
- width: 715px;
50
- height: 307px;
51
- min-height: 335px;
52
- }
53
-
54
- .content {
55
- display: flex;
56
- flex-direction: column;
57
- height: 100%;
58
- width: 100%;
59
- justify-content: flex-start;
45
+ @media (min-width: ${size.lg}) {
46
+ width: 715px;
47
+ height: 307px;
48
+ min-height: 335px;
49
+ }
60
50
 
61
- @media ${device['landscape-tablets']} {
62
- margin-left: 1rem;
63
- }
51
+ .content {
52
+ display: flex;
53
+ flex-direction: column;
54
+ height: 100%;
55
+ width: 100%;
56
+ justify-content: flex-start;
64
57
 
65
- @media (min-width: ${size.md}) {
66
- width: 65%;
67
- }
58
+ @media ${device['landscape-tablets']} {
59
+ margin-left: 1rem;
68
60
  }
69
61
 
70
- .title {
71
- font-family: Inter;
72
- font-size: 18px;
73
- font-weight: 700;
74
- line-height: 24px;
75
- letter-spacing: -0.3px;
76
- text-align: left;
77
- text-decoration-line: underline;
78
- text-decoration-style: solid;
79
- text-underline-position: from-font;
80
- text-decoration-skip-ink: none;
62
+ @media (min-width: ${size.md}) {
63
+ width: 65%;
81
64
  }
65
+ }
66
+
67
+ .title {
68
+ font-family: Inter;
69
+ font-size: 18px;
70
+ font-weight: 700;
71
+ line-height: 24px;
72
+ letter-spacing: -0.3px;
73
+ text-align: left;
74
+ text-decoration-line: underline;
75
+ text-decoration-style: solid;
76
+ text-underline-position: from-font;
77
+ text-decoration-skip-ink: none;
78
+ }
79
+
80
+ .description {
81
+ margin: 1rem 0;
82
+ }
83
+
84
+ .buttons-container {
85
+ display: flex;
86
+ justify-content: space-between;
87
+ align-items: center;
88
+ flex-direction: column;
82
89
 
83
- .description {
84
- margin: 1rem 0;
90
+ @media ${device.desktop} {
91
+ flex-direction: row;
92
+ align-self: flex-start;
93
+ gap: var(--global-gap);
94
+ align-items: center;
85
95
  }
86
96
 
87
- .buttons-container {
88
- display: flex;
89
- justify-content: space-between;
90
- align-items: center;
91
- flex-direction: column;
97
+ .create-doc-button {
98
+ width: 100%;
92
99
 
93
- @media ${device.desktop} {
94
- flex-direction: row;
100
+ @media ${device.laptop} {
95
101
  align-self: flex-start;
96
- gap: var(--global-gap);
97
- align-items: center;
102
+ width: auto;
103
+ margin-top: 0.5rem;
98
104
  }
99
105
 
100
- .create-doc-button {
106
+ @media ${device.desktop} {
101
107
  width: 100%;
108
+ height: auto;
109
+ }
110
+ }
102
111
 
103
- @media ${device.laptop} {
104
- align-self: flex-start;
105
- width: auto;
106
- margin-top: 0.5rem;
107
- }
112
+ .downloadable-buttons {
113
+ display: flex;
114
+ flex-wrap: wrap;
115
+ gap: var(--global-gap);
116
+ width: 100%;
117
+ justify-content: space-between;
108
118
 
109
- @media ${device.desktop} {
110
- width: 100%;
111
- height: auto;
112
- }
119
+ a {
120
+ min-width: 46.5%;
121
+ max-width: 46.5%;
122
+ margin-top: 0.75rem;
113
123
  }
114
124
 
115
- .downloadable-buttons {
116
- display: flex;
117
- flex-wrap: wrap;
118
- gap: var(--global-gap);
125
+ @media ${device.laptop} {
126
+ justify-content: flex-start;
119
127
  width: 100%;
120
- justify-content: space-between;
121
128
 
122
129
  a {
123
130
  min-width: 46.5%;
124
- max-width: 46.5%;
125
- margin-top: 0.75rem;
126
- }
127
-
128
- @media ${device.laptop} {
129
- justify-content: flex-start;
130
- width: 100%;
131
-
132
- a {
133
- min-width: 46.5%;
134
- max-width: fit-content;
135
- margin-top: 0.5rem;
136
- }
137
- }
138
-
139
- @media (min-width: ${size.lg}) {
140
- a {
141
- min-width: auto;
142
- max-width: fit-content;
143
- }
144
- }
145
-
146
- @media ${device.desktop} {
147
- display: flex;
148
- gap: var(--global-gap);
149
- flex-wrap: nowrap;
150
- margin-top: 0;
131
+ max-width: fit-content;
132
+ margin-top: 0.5rem;
151
133
  }
152
134
  }
153
- }
154
-
155
- &.download-icon {
156
- &::before {
157
- content: '';
158
- width: 1rem;
159
- height: 1rem;
160
- background-image: url('../../../assets/images/svg/icon-save-24-px.svg');
161
- margin-right: 0.5rem;
162
- }
163
- }
164
- `}
165
-
166
- /* Alternative format styles */
167
- ${({ $format }) => $format === 'Alternative' &&
168
- `
169
- display: flex;
170
- flex-direction: row;
171
- width: 100%;
172
- align-items: center;
173
- justify-content: center;
174
- padding: 2rem 1.5rem 2rem 1.5rem;
175
- gap: 1rem;
176
- border-radius: 1rem;
177
- background-color: var(--neutral-neutral-6);
178
- margin-bottom: 1.5rem;
179
-
180
- .image-container {
181
- width: 70%;
182
- }
183
-
184
- @media (min-width: ${size.xs}) {
185
- width: 400px;
186
- max-width: inherit;
187
- }
188
-
189
- @media (min-width: ${size.md}) {
190
- align-items: center;
191
- flex-direction: column;
192
- width: 100%;
193
- max-width: 300px;
194
- .image-container {
195
- width: 40%;
196
135
 
197
- @media (min-width: ${size.lg}) {
198
- width: 30%;
136
+ @media (min-width: ${size.lg}) {
137
+ a {
138
+ min-width: auto;
139
+ max-width: fit-content;
199
140
  }
200
141
  }
201
- }
202
-
203
- @media (min-width: ${size.lg}) {
204
- height: 310px;
205
- }
206
-
207
- .title {
208
- font-family: Inter;
209
- font-size: 18px;
210
- font-weight: 700;
211
- line-height: 24px;
212
- margin-bottom: 24px;
213
- letter-spacing: -0.3px;
214
- text-align: left;
215
- text-decoration-line: underline;
216
- text-decoration-style: solid;
217
- text-underline-position: from-font;
218
- text-decoration-skip-ink: none;
219
- }
220
-
221
- .buttons-container {
222
- display: flex;
223
- justify-content: space-between;
224
- align-items: center;
225
- flex-direction: column;
226
142
 
227
143
  @media ${device.desktop} {
228
- flex-direction: row;
229
- align-self: flex-start;
230
- gap: var(--global-gap);
231
- align-items: center;
232
- }
233
-
234
- .downloadable-buttons {
235
144
  display: flex;
236
- flex-wrap: wrap;
237
- width: 100%;
238
- justify-content: space-between;
239
-
240
- a {
241
- margin-top: 0.75rem;
242
- width: 100%;
243
- }
244
-
245
- @media ${device.laptop} {
246
- justify-content: space-between;
247
- width: 95%;
248
- a {
249
- min-width: 46.5%;
250
- max-width: fit-content;
251
- margin-top: 0.5rem;
252
- }
253
- }
254
-
255
- @media (min-width: ${size.lg}) {
256
- a {
257
- min-width: auto;
258
- max-width: fit-content;
259
- }
260
- }
261
-
262
- @media ${device.desktop} {
263
- display: flex;
264
- gap: var(--global-gap);
265
- flex-wrap: nowrap;
266
- margin-top: 0;
267
- }
145
+ gap: var(--global-gap);
146
+ flex-wrap: nowrap;
147
+ margin-top: 0;
268
148
  }
269
149
  }
270
- `}
150
+ }
151
+
152
+ &.download-icon {
153
+ &::before {
154
+ content: '';
155
+ width: 1rem;
156
+ height: 1rem;
157
+ background-image: url('../../../assets/images/svg/icon-save-24-px.svg');
158
+ margin-right: 0.5rem;
159
+ }
160
+ }
271
161
  `;