gatsby-matrix-theme 25.0.0 → 25.1.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.
package/CHANGELOG.md CHANGED
@@ -1,3 +1,19 @@
1
+ ## [25.1.1](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v25.1.0...v25.1.1) (2023-06-02)
2
+
3
+
4
+ ### Bug Fixes
5
+
6
+ * limited reccommended casinos ([aa8b10e](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/aa8b10e35c842c62aa5a4167679aa6b7c4cf97f4))
7
+ * limited reccommended casinos ([d9b7741](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/d9b77414b46bc6517aefa18f1e79485dfea39409))
8
+ * limited reccommended casinos ([fc23123](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/fc231237ac400a603ff169469b92406cf80571ea))
9
+
10
+ # [25.1.0](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v25.0.0...v25.1.0) (2023-06-02)
11
+
12
+
13
+ ### Features
14
+
15
+ * added recommended casinos in wagering calculator ([5cf12f3](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/5cf12f355428a62c15518fc5ea8160cff2f7fef1))
16
+
1
17
  # [25.0.0](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v24.0.0...v25.0.0) (2023-05-31)
2
18
 
3
19
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "gatsby-matrix-theme",
3
- "version": "25.0.0",
3
+ "version": "25.1.1",
4
4
  "main": "index.js",
5
5
  "description": "Matrix Theme NPM Package",
6
6
  "author": "",
@@ -4,20 +4,34 @@ import PropTypes from 'prop-types';
4
4
  import { MdClose } from '@react-icons/all-files/md/MdClose';
5
5
  import { AiOutlineQuestionCircle } from '@react-icons/all-files/ai/AiOutlineQuestionCircle';
6
6
  import { Context } from 'gatsby-core-theme/src/context/MainProvider';
7
- import { translate } from 'gatsby-core-theme/src/helpers/getters';
7
+ import {
8
+ translate,
9
+ prettyTracker,
10
+ getAltText,
11
+ imagePrettyUrl,
12
+ } from 'gatsby-core-theme/src/helpers/getters';
13
+ import Bonus from 'gatsby-core-theme/src/components/atoms/bonus';
14
+ import OperatorCta from 'gatsby-core-theme/src/components/atoms/operator-cta-button';
8
15
  import Button from 'gatsby-core-theme/src/components/atoms/button';
16
+ import LazyImage from 'gatsby-core-theme/src/hooks/lazy-image';
17
+ import { getRecommendedToplist } from '../../../helpers/common';
9
18
  import styles from './wagering-calculator.module.scss';
10
19
 
11
20
  const WageringCalculator = ({
12
21
  mainTitle = 'Wagering Requirement Calculator',
13
22
  infoIcon,
14
- infoTitle,
15
- infoText,
23
+ infoTitle = 'Example: 20x Wagering Requirement',
24
+ infoText = 'Lorem ipsum dolor sit amet consectetur. Pharetra sed etiam placerat interdum ut. Pretium ipsum ultrices interdum condimentum nullam. Suscipit augue placerat laoreet hendrerit dui euismod quam rutrum. Magna in luctus egestas massa erat. Lorem ipsum dolor sit amet consectetur. Pharetra sed etiam placerat interdum ut. Pretium ipsum ultrices interdum condimentum nullam. Suscipit augue placerat laoreet hendrerit dui euismod quam rutrum. Magna in luctus egestas massa erat. Lorem ipsum dolor sit amet consectetur. Pharetra sed etiam placerat interdum ut. Pretium ipsum ultrices interdum condimentum nullam. Suscipit augue placerat laoreet hendrerit dui euismod quam rutrum. Magna in luctus egestas massa erat. Lorem ipsum dolor sit amet consectetur. Pharetra sed etiam placerat interdum ut. Pretium ipsum ultrices interdum condimentum nullam. Suscipit augue placerat laoreet hendrerit dui euismod quam rutrum. Magna in luctus egestas massa erat.',
25
+ pageContext = {},
16
26
  }) => {
17
27
  const [isInfoOpen, setIsInfoOpen] = useState(false);
28
+ const [isRecommendedOperators, setIsRecommendedOperators] = useState(false);
18
29
  const [result, setResult] = useState(null);
19
30
  const { translations } = useContext(Context);
20
31
  const InfoIcon = infoIcon || AiOutlineQuestionCircle;
32
+ const operators = pageContext.marketSections
33
+ ? getRecommendedToplist(pageContext.marketSections)
34
+ : [];
21
35
 
22
36
  const Calculate = ({ target: { elements } }) => {
23
37
  // eslint-disable-next-line
@@ -30,69 +44,111 @@ const WageringCalculator = ({
30
44
  (100 / Number(elements.wgc_contribution.value))
31
45
  )
32
46
  );
47
+ setIsRecommendedOperators(true);
33
48
  };
34
49
 
35
50
  return (
36
- <form
37
- className={styles.container}
38
- onSubmit={Calculate}
39
- // eslint-disable-next-line
40
- action="javascript:void(0);"
41
- target="_self"
42
- >
43
- <h2 className={styles.mainTitle}>
44
- {mainTitle}
45
- {infoTitle && infoText && <InfoIcon onClick={() => setIsInfoOpen(true)} />}
46
- </h2>
47
- <label className={styles.label} htmlFor="deposit">
48
- {translate(translations, 'wagecalc_deposit_amount', 'Deposit amount')}
49
- </label>
50
- <input className={styles.input} id="wgc_deposit" type="number" min={0} />
51
- <label className={styles.label} htmlFor="bonus">
52
- {translate(translations, 'wagecalc_bonus_amount', 'Bonus amount')}
53
- </label>
54
- <input className={styles.input} id="wgc_bonus" type="number" min={0} required />
55
- <label className={styles.label} htmlFor="wagering">
56
- {translate(translations, 'wagecalc_wagering', 'Wagering')}
57
- </label>
58
- <input className={styles.input} id="wgc_wagering" type="number" min={0} required />
59
- <select
60
- className={styles.select}
61
- id="wgc_calc_select"
62
- onChange={({ target }) => {
63
- const deposit = document.getElementById('wgc_deposit');
64
- deposit.required = target.value !== 'bonus';
65
- deposit.checkValidity();
66
- }}
67
- >
68
- <option value="bonus">{translate(translations, 'wagecalc_bonus', 'Bonus')}</option>
69
- <option value="bonus_deposit">
70
- {translate(translations, 'wagecalc_deposit_bonus', 'Deposit + Bonus')}
71
- </option>
72
- </select>
73
- <label className={styles.label} htmlFor="contribution">
74
- {translate(translations, 'wagecalc_contribution', 'Contribution %')}
75
- </label>
76
- <input className={styles.input} id="wgc_contribution" type="number" min={0} max={100} />
77
- <Button
78
- isButton
79
- primaryColor
80
- btnText={translate(translations, 'wagecalc_calculate', 'Calculate')}
81
- />
82
- {isInfoOpen && (
83
- <div className={styles.container}>
84
- <h2 className={styles.infoTitle}>{infoTitle}</h2>
85
- <MdClose onClick={() => setIsInfoOpen(false)} />
86
- <p className={styles.infoText}>{infoText}</p>
87
- </div>
88
- )}
89
- {!!result && (
90
- <div className={styles.resultContainer}>
91
- <span>{translate(translations, 'wagecalc_result', 'Result')}</span>
92
- <span>{result}</span>
93
- </div>
94
- )}
95
- </form>
51
+ <div>
52
+ <div className={styles.container}>
53
+ <form
54
+ onSubmit={Calculate}
55
+ // eslint-disable-next-line
56
+ action="javascript:void(0);"
57
+ target="_self"
58
+ >
59
+ <h2 className={styles.mainTitle}>
60
+ {mainTitle}
61
+ {infoTitle && infoText && <InfoIcon onClick={() => setIsInfoOpen(true)} />}
62
+ </h2>
63
+ <div className={styles.inputContainer}>
64
+ <label className={styles.label} htmlFor="deposit">
65
+ {translate(translations, 'wagecalc_deposit_amount', 'Deposit amount')}
66
+ </label>
67
+ <input className={styles.input} id="wgc_deposit" type="number" min={0} />
68
+ </div>
69
+ <div className={styles.inputContainer}>
70
+ <label className={styles.label} htmlFor="bonus">
71
+ {translate(translations, 'wagecalc_bonus_amount', 'Bonus amount')}
72
+ </label>
73
+ <input className={styles.input} id="wgc_bonus" type="number" min={0} required />
74
+ </div>
75
+ <div className={styles.inputContainer}>
76
+ <label className={styles.label} htmlFor="wagering">
77
+ {translate(translations, 'wagecalc_wagering', 'Wagering')}
78
+ </label>
79
+ <input className={styles.input} id="wgc_wagering" type="number" min={0} required />
80
+ </div>
81
+ <div className={styles.inputContainer}>
82
+ <select
83
+ className={styles.select}
84
+ id="wgc_calc_select"
85
+ onChange={({ target }) => {
86
+ const deposit = document.getElementById('wgc_deposit');
87
+ deposit.required = target.value !== 'bonus';
88
+ deposit.checkValidity();
89
+ }}
90
+ >
91
+ <option value="bonus">{translate(translations, 'wagecalc_bonus', 'Bonus')}</option>
92
+ <option value="bonus_deposit">
93
+ {translate(translations, 'wagecalc_deposit_bonus', 'Deposit + Bonus')}
94
+ </option>
95
+ </select>
96
+ </div>
97
+ <div className={styles.inputContainer}>
98
+ <label className={styles.label} htmlFor="contribution">
99
+ {translate(translations, 'wagecalc_contribution', 'Contribution %')}
100
+ </label>
101
+ <input className={styles.input} id="wgc_contribution" type="number" min={0} max={100} />
102
+ </div>
103
+ <Button
104
+ isButton
105
+ primaryColor
106
+ btnText={translate(translations, 'wagecalc_calculate', 'Calculate')}
107
+ />
108
+
109
+ {!!result && (
110
+ <div className={styles.resultContainer}>
111
+ <span>{translate(translations, 'wagecalc_result', 'Result')}</span>
112
+ <span>{result}</span>
113
+ </div>
114
+ )}
115
+ </form>
116
+ {isInfoOpen && (
117
+ <div className={styles.info}>
118
+ <h2 className={styles.infoTitle}>{infoTitle}</h2>
119
+ <MdClose onClick={() => setIsInfoOpen(false)} />
120
+ <p className={styles.infoText}>{infoText}</p>
121
+ </div>
122
+ )}
123
+ {operators.length > 0 && isRecommendedOperators && (
124
+ <div className={styles.reccommendedCasinos}>
125
+ <h3>{translate(translations, 'recommended_casinos', 'Recommended Casinos')}</h3>
126
+ {operators.slice(0, 3).map((operator) => {
127
+ const prettyLink = prettyTracker(operator, 'main', false);
128
+ const imageObject =
129
+ operator?.standardised_logo_url_object || operator?.logo_url_object;
130
+
131
+ return (
132
+ <div>
133
+ <a href={prettyLink} aria-label={operator.name} target="_blank" rel="noreferrer">
134
+ <LazyImage
135
+ alt={getAltText(imageObject, operator.name)}
136
+ src={imagePrettyUrl(imageObject?.filename || operator?.logo_url, 64, 64)}
137
+ width={64}
138
+ height={64}
139
+ />
140
+ </a>
141
+ <div>
142
+ <Bonus item={operator} tracker="main" />
143
+ </div>
144
+ <OperatorCta operator={operator} tracker="main" />
145
+ </div>
146
+ );
147
+ })}
148
+ </div>
149
+ )}
150
+ </div>
151
+ </div>
96
152
  );
97
153
  };
98
154
 
@@ -101,6 +157,12 @@ WageringCalculator.propTypes = {
101
157
  infoTitle: PropTypes.string,
102
158
  infoText: PropTypes.string,
103
159
  infoIcon: PropTypes.element,
160
+ pageContext: PropTypes.shape({
161
+ marketSections: PropTypes.shape({
162
+ // eslint-disable-next-line react/forbid-prop-types
163
+ recommended_casinos: PropTypes.array,
164
+ }),
165
+ }),
104
166
  };
105
167
 
106
168
  export default WageringCalculator;
@@ -1,48 +1,58 @@
1
1
  .container {
2
2
  margin: 0 auto;
3
+ position: relative;
3
4
  padding: 1.6rem;
4
- max-width: 34.3rem;
5
5
  display: flex;
6
6
  flex-direction: column;
7
7
  border-radius: 1.2rem;
8
8
  box-shadow: 0px -3px 14px rgba(0, 0, 0, 0.09);
9
9
  background-color: var(--color-4);
10
+ z-index: 1;
11
+
10
12
  @include min(tablet) {
11
13
  padding: 2.4rem;
12
14
  max-width: 96rem;
13
15
  }
14
- }
15
16
 
16
- form.container {
17
- position: relative;
18
- svg {
19
- margin-left: 1.2rem;
20
- height: 2.67rem;
21
- width: 2.67rem;
22
- vertical-align: text-bottom;
23
- cursor: pointer;
24
- }
25
- button[type='submit'] {
26
- margin-top: 1.6rem;
27
- padding: 1.6rem;
17
+ > form {
18
+ position: relative;
19
+ gap: 1rem;
20
+ @include flex-direction(column);
21
+ svg {
22
+ margin-left: 1.2rem;
23
+ height: 2.67rem;
24
+ width: 2.67rem;
25
+ vertical-align: text-bottom;
26
+ cursor: pointer;
27
+ }
28
+
29
+ button {
30
+ align-self: end;
31
+ height: 4.8rem !important;
32
+ width: 100%;
33
+ }
34
+
28
35
  @include min(tablet) {
29
- width: calc(50% - 1.2rem);
36
+ display: grid;
37
+ grid-template-columns: 1fr 1fr;
38
+ gap: 1rem;
30
39
  }
31
40
  }
32
- @include min(tablet) {
33
- display: flex;
34
- flex-direction: row;
35
- flex-wrap: wrap;
36
- justify-content: space-between;
37
- }
38
41
  }
39
42
 
40
- div.container {
41
- height: 100%;
43
+ .inputContainer {
44
+ @include flex-direction(column);
45
+ justify-content: flex-end;
46
+ }
47
+
48
+ .info {
49
+ height: 100vh;
42
50
  position: absolute;
43
51
  top: 0;
44
52
  left: 0;
45
53
  z-index: 3;
54
+ background: white;
55
+ padding: 2.4rem;
46
56
  svg {
47
57
  position: absolute;
48
58
  top: 1.99rem;
@@ -54,6 +64,7 @@ div.container {
54
64
  .mainTitle {
55
65
  line-height: 3.4rem;
56
66
  font-size: 2.4rem;
67
+ grid-column: 1/3;
57
68
  }
58
69
 
59
70
  .infoTitle {
@@ -86,77 +97,22 @@ div.container {
86
97
 
87
98
  .input,
88
99
  .select {
89
- padding: 16px;
90
- height: 5.9rem;
91
- background: var(--color-63);
100
+ padding: 14px;
101
+ height: 4.8rem;
102
+ background: #f8f7f5;
92
103
  border-radius: 4px;
93
104
  }
94
105
 
95
- .input {
96
- margin: 0.8rem 0;
97
- }
98
-
99
106
  .input:invalid:required {
100
107
  border-bottom: 0.4rem solid var(--color-11);
101
108
  }
102
109
 
103
- .select {
104
- margin-top: 3.4rem;
105
- margin-bottom: 2.4rem;
106
- }
107
-
108
110
  .infoText {
109
111
  padding-right: 1.6rem;
110
112
  overflow-y: auto;
111
113
  text-align: justify;
112
114
  }
113
115
 
114
- .label,
115
- .input,
116
- .select {
117
- @include min(tablet) {
118
- width: calc(50% - 1.2rem);
119
- }
120
- }
121
-
122
- @include min(tablet) {
123
- .label:nth-child(2) {
124
- order: 1;
125
- }
126
- .label:nth-child(4) {
127
- order: 2;
128
- }
129
- .label:nth-child(6) {
130
- width: 100%;
131
- order: 5;
132
- }
133
- .label:nth-child(9) {
134
- width: 100%;
135
- order: 8;
136
- }
137
- .input:nth-child(3) {
138
- order: 3;
139
- }
140
- .input:nth-child(5) {
141
- order: 4;
142
- }
143
- .input:nth-child(7) {
144
- order: 6;
145
- }
146
- .input:nth-child(10) {
147
- margin-bottom: 0;
148
- order: 9;
149
- }
150
- .select {
151
- margin: 0.8rem 0;
152
- order: 7;
153
- }
154
- form.container button[type='submit'] {
155
- margin-top: 0.8rem;
156
- order: 10;
157
- }
158
- }
159
-
160
116
  .resultContainer {
161
117
  position: relative;
162
118
  order: 11;
@@ -170,6 +126,7 @@ div.container {
170
126
  line-height: 34px;
171
127
  flex-direction: column;
172
128
  gap: 1rem;
129
+ grid-column: 1/3;
173
130
 
174
131
  @include min(tablet) {
175
132
  flex-direction: row;
@@ -204,3 +161,46 @@ div.container {
204
161
  @include flex-align(center, center);
205
162
  }
206
163
  }
164
+
165
+ .reccommendedCasinos {
166
+ > h2 {
167
+ margin-top: 1rem;
168
+ }
169
+
170
+ > div {
171
+ margin-bottom: 0.8rem;
172
+ background: #f1efec;
173
+ border-radius: 1.6rem;
174
+ @include flex-align(center, space-between);
175
+ padding: 1.6rem;
176
+ gap: 1rem;
177
+
178
+ img {
179
+ border-radius: 0.8rem;
180
+ }
181
+
182
+ > div {
183
+ flex-grow: 1;
184
+ @include flex-align(flex-start, center);
185
+ @include flex-direction(column);
186
+
187
+ @include min(tablet) {
188
+ @include flex-align(center, flex-start);
189
+ @include flex-direction(row);
190
+ }
191
+
192
+ > span {
193
+ font-weight: 700;
194
+ color: #090e13;
195
+ font-size: 14px;
196
+ line-height: 22px;
197
+
198
+ @include min(tablet) {
199
+ @include flex-direction(row);
200
+ font-size: 20px;
201
+ line-height: 30px;
202
+ }
203
+ }
204
+ }
205
+ }
206
+ }
@@ -2,6 +2,7 @@
2
2
  import React from 'react';
3
3
  import { Context } from 'gatsby-core-theme/src/context/MainProvider';
4
4
  import { AiOutlineQuestionCircle } from '@react-icons/all-files/ai/AiOutlineQuestionCircle';
5
+ import getOperatorData from '../../../../tests/factories/pages/operator.factory';
5
6
  import WageringCalculator from '.';
6
7
 
7
8
  export default {
@@ -33,6 +34,23 @@ export default {
33
34
  defaultValue:
34
35
  'Lorem ipsum dolor sit amet consectetur. Pharetra sed etiam placerat interdum ut. Pretium ipsum ultrices interdum condimentum nullam. Suscipit augue placerat laoreet hendrerit dui euismod quam rutrum. Magna in luctus egestas massa erat. Lorem ipsum dolor sit amet consectetur. Pharetra sed etiam placerat interdum ut. Pretium ipsum ultrices interdum condimentum nullam. Suscipit augue placerat laoreet hendrerit dui euismod quam rutrum. Magna in luctus egestas massa erat. Lorem ipsum dolor sit amet consectetur. Pharetra sed etiam placerat interdum ut. Pretium ipsum ultrices interdum condimentum nullam. Suscipit augue placerat laoreet hendrerit dui euismod quam rutrum. Magna in luctus egestas massa erat. Lorem ipsum dolor sit amet consectetur. Pharetra sed etiam placerat interdum ut. Pretium ipsum ultrices interdum condimentum nullam. Suscipit augue placerat laoreet hendrerit dui euismod quam rutrum. Magna in luctus egestas massa erat.',
35
36
  },
37
+ pageContext: {
38
+ defaultValue: {
39
+ marketSections: {
40
+ recommended_casinos: {
41
+ modules: [
42
+ {
43
+ items: [
44
+ {
45
+ items: [getOperatorData(), getOperatorData(), getOperatorData()],
46
+ },
47
+ ],
48
+ },
49
+ ],
50
+ },
51
+ },
52
+ },
53
+ },
36
54
  },
37
55
  };
38
56
 
@@ -4,6 +4,7 @@ import { render, cleanup, fireEvent, waitFor } from '@testing-library/react';
4
4
  import '@testing-library/jest-dom/extend-expect';
5
5
  import { MdInfo } from '@react-icons/all-files/md/MdInfo';
6
6
  import MainProvider from '~context/MainProvider';
7
+ import getOperatorData from '../../../../tests/factories/pages/operator.factory';
7
8
  import WageringCalculator from '.';
8
9
 
9
10
  const props = {
@@ -11,6 +12,21 @@ const props = {
11
12
  infoTitle: 'Test Info Title',
12
13
  infoText: 'Test Info Text',
13
14
  infoIcon: MdInfo,
15
+ pageContext: {
16
+ marketSections: {
17
+ recommended_casinos: {
18
+ modules: [
19
+ {
20
+ items: [
21
+ {
22
+ items: [getOperatorData(), getOperatorData()],
23
+ },
24
+ ],
25
+ },
26
+ ],
27
+ },
28
+ },
29
+ },
14
30
  };
15
31
 
16
32
  describe('Wagering Calculator', () => {
@@ -45,6 +61,8 @@ describe('Wagering Calculator', () => {
45
61
  fireEvent.click(calculate);
46
62
  await waitFor(() => {
47
63
  expect(container.querySelector('.resultContainer')).toBeTruthy();
64
+ expect(container.querySelector('.reccommendedCasinos')).toBeTruthy();
65
+ expect(container.querySelectorAll('.reccommendedCasinos > div')).toHaveLength(2);
48
66
  });
49
67
  });
50
68
  });
@@ -0,0 +1,13 @@
1
+ // eslint-disable-next-line import/prefer-default-export
2
+ export function getRecommendedToplist(marketSections) {
3
+ if (marketSections.recommended_casinos && marketSections.recommended_casinos.modules) {
4
+ if (
5
+ marketSections.recommended_casinos.modules.length > 0 &&
6
+ marketSections.recommended_casinos.modules[0].items.length > 0
7
+ ) {
8
+ return marketSections.recommended_casinos.modules[0].items[0].items;
9
+ }
10
+ }
11
+
12
+ return null;
13
+ }
@@ -345,4 +345,4 @@
345
345
 
346
346
 
347
347
 
348
- window['STORIES'] = [{"titlePrefix":"","directory":"./src","files":"**/**/**/*.stories.js","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.js)$"},{"titlePrefix":"","directory":"./src","files":"**/**/**/**/*.stories.js","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.js)$"},{"titlePrefix":"","directory":"./src","files":"**/**/**/**/**/*.stories.js","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.js)$"}];</script><script src="runtime~main.349b6fb9.iframe.bundle.js"></script><script src="134.19897eea.iframe.bundle.js"></script><script src="main.5d202e0b.iframe.bundle.js"></script></body></html>
348
+ window['STORIES'] = [{"titlePrefix":"","directory":"./src","files":"**/**/**/*.stories.js","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.js)$"},{"titlePrefix":"","directory":"./src","files":"**/**/**/**/*.stories.js","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.js)$"},{"titlePrefix":"","directory":"./src","files":"**/**/**/**/**/*.stories.js","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.js)$"}];</script><script src="runtime~main.349b6fb9.iframe.bundle.js"></script><script src="134.19897eea.iframe.bundle.js"></script><script src="main.acece55b.iframe.bundle.js"></script></body></html>