@wise/dynamic-flow-client 4.2.2 → 4.3.0

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/build/main.css CHANGED
@@ -152,47 +152,47 @@ button.df-back-btn {
152
152
  display: flex;
153
153
  }
154
154
  }
155
- .df-image {
155
+ .df-legacy-image {
156
156
  display: flex;
157
157
  justify-content: center;
158
158
  align-items: center;
159
159
  }
160
- .df-image img {
160
+ .df-legacy-image img {
161
161
  height: auto;
162
162
  width: 100%;
163
163
  }
164
164
  /* narrow screens */
165
- .df-image.xs img {
165
+ .df-legacy-image.xs img {
166
166
  width: 50px;
167
167
  }
168
- .df-image.sm img {
168
+ .df-legacy-image.sm img {
169
169
  width: 100px;
170
170
  }
171
- .df-image.md img {
171
+ .df-legacy-image.md img {
172
172
  width: 200px;
173
173
  }
174
- .df-image.lg img {
174
+ .df-legacy-image.lg img {
175
175
  width: 300px;
176
176
  }
177
177
  /* wide screens */
178
- @media (width >= 576px) {
179
- .df-image.xs img {
178
+ @media (width >=576px) {
179
+ .df-legacy-image.xs img {
180
180
  width: 100px;
181
181
  }
182
182
 
183
- .df-image.sm img {
183
+ .df-legacy-image.sm img {
184
184
  width: 200px;
185
185
  }
186
186
 
187
- .df-image.md img {
187
+ .df-legacy-image.md img {
188
188
  width: 300px;
189
189
  }
190
190
 
191
- .df-image.lg img {
191
+ .df-legacy-image.lg img {
192
192
  width: 500px;
193
193
  }
194
194
 
195
- .df-image.xl img {
195
+ .df-legacy-image.xl img {
196
196
  max-width: 600px;
197
197
  }
198
198
  }
@@ -268,6 +268,60 @@ button.df-back-btn {
268
268
  .df-image .df-illustration {
269
269
  padding: 0;
270
270
  }
271
+ .df-image {
272
+ display: flex;
273
+ }
274
+ .df-image.start {
275
+ justify-content: start;
276
+ align-items: start;
277
+ }
278
+ .df-image.center {
279
+ justify-content: center;
280
+ align-items: center;
281
+ }
282
+ .df-image.end {
283
+ justify-content: end;
284
+ align-items: end;
285
+ }
286
+ .df-image img {
287
+ height: auto;
288
+ width: 100%;
289
+ }
290
+ /* narrow screens */
291
+ .df-image.xs img {
292
+ width: 50px;
293
+ }
294
+ .df-image.sm img {
295
+ width: 100px;
296
+ }
297
+ .df-image.md img {
298
+ width: 200px;
299
+ }
300
+ .df-image.lg img {
301
+ width: 300px;
302
+ }
303
+ /* wide screens */
304
+ @media (width >=576px) {
305
+ .df-image.xs img {
306
+ width: 100px;
307
+ }
308
+
309
+ .df-image.sm img {
310
+ width: 200px;
311
+ }
312
+
313
+ .df-image.md img {
314
+ width: 300px;
315
+ }
316
+
317
+ .df-image.lg img {
318
+ width: 500px;
319
+ }
320
+
321
+ .df-image.xl img {
322
+ max-width: 600px;
323
+ }
324
+ }
271
325
  .df-back-btn .tw-avatar__content {
272
326
  cursor: pointer;
273
327
  background-color: var(--color-background-neutral);