@revenuecat/purchases-ui-js 2.0.1 → 2.0.2

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 (53) hide show
  1. package/dist/components/button/ButtonNode.stories.svelte +0 -6
  2. package/dist/components/button/ButtonNode.svelte +3 -6
  3. package/dist/components/footer/Footer.stories.svelte +0 -4
  4. package/dist/components/footer/Footer.svelte +3 -3
  5. package/dist/components/image/Image.stories.svelte +2 -13
  6. package/dist/components/image/Image.svelte +1 -2
  7. package/dist/components/package/Package.stories.svelte +2 -6
  8. package/dist/components/package/Package.svelte +4 -11
  9. package/dist/components/paywall/Node.svelte +23 -20
  10. package/dist/components/paywall/Node.svelte.d.ts +9 -8
  11. package/dist/components/paywall/Paywall.svelte +16 -14
  12. package/dist/components/purchase-button/PurchaseButton.stories.svelte +0 -8
  13. package/dist/components/purchase-button/PurchaseButton.svelte +3 -10
  14. package/dist/components/stack/Stack.stories.svelte +11 -43
  15. package/dist/components/stack/Stack.svelte +3 -23
  16. package/dist/components/stack/stack-utils.js +0 -2
  17. package/dist/components/text/TextNode.stories.svelte +0 -12
  18. package/dist/components/text/TextNode.svelte +2 -11
  19. package/dist/components/text/text-utils.d.ts +1 -1
  20. package/dist/components/timeline/Timeline.stories.svelte +0 -5
  21. package/dist/components/timeline/Timeline.svelte +0 -2
  22. package/dist/components/timeline/timeline-utils.js +0 -1
  23. package/dist/data/entities.d.ts +18 -48
  24. package/dist/index.d.ts +10 -10
  25. package/dist/index.js +10 -10
  26. package/dist/stores/localization.d.ts +1 -1
  27. package/dist/stores/localization.js +3 -2
  28. package/dist/stores/paywall.d.ts +5 -4
  29. package/dist/stores/variables.d.ts +1 -2
  30. package/dist/stories/fixtures.d.ts +1 -1
  31. package/dist/stories/fixtures.js +23 -59
  32. package/dist/stories/localization-decorator.js +1 -1
  33. package/dist/stories/paywall-decorator.js +2 -1
  34. package/dist/stories/with-layout.svelte +3 -3
  35. package/dist/types/component.d.ts +6 -0
  36. package/dist/types/components/button.d.ts +2 -2
  37. package/dist/types/components/footer.d.ts +2 -2
  38. package/dist/types/components/package.d.ts +2 -2
  39. package/dist/types/components/purchase-button.d.ts +2 -2
  40. package/dist/ui/atoms/typography.stories.svelte +2 -2
  41. package/dist/ui/atoms/typography.stories.svelte.d.ts +1 -1
  42. package/dist/ui/layout/main-block.svelte +2 -2
  43. package/dist/ui/molecules/button.stories.svelte +2 -2
  44. package/dist/ui/molecules/button.svelte +1 -1
  45. package/dist/ui/theme/theme.d.ts +2 -2
  46. package/dist/ui/theme/theme.js +2 -2
  47. package/dist/ui/theme/utils.d.ts +2 -2
  48. package/dist/utils/style-utils.js +13 -12
  49. package/dist/web-components/index.css +1 -1
  50. package/dist/web-components/index.js +144 -144
  51. package/package.json +1 -1
  52. package/dist/data/state.d.ts +0 -4
  53. /package/dist/{data/state.js → types/component.js} +0 -0
package/dist/index.js CHANGED
@@ -1,15 +1,15 @@
1
1
  // Reexport your entry components here
2
- export * from "./types";
3
- export * from "./ui/globals";
4
- export {} from "./data/entities";
5
- export {} from "./utils/variable-utils";
6
- export { default as Paywall } from "./components/paywall/Paywall.svelte";
7
- export { default as Stack } from "./components/stack/Stack.svelte";
8
2
  export { default as ButtonDeprecated } from "./components/button/Button.svelte";
9
- export { default as Button } from "./ui/molecules/button.svelte";
10
- export { default as Text } from "./components/text/Text.svelte";
3
+ export { default as Footer } from "./components/footer/Footer.svelte";
11
4
  export { default as Image } from "./components/image/Image.svelte";
12
- export { default as PurchaseButton } from "./components/purchase-button/PurchaseButton.svelte";
13
5
  export { default as Package } from "./components/package/Package.svelte";
14
- export { default as Footer } from "./components/footer/Footer.svelte";
6
+ export { default as Paywall } from "./components/paywall/Paywall.svelte";
7
+ export { default as PurchaseButton } from "./components/purchase-button/PurchaseButton.svelte";
8
+ export { default as Stack } from "./components/stack/Stack.svelte";
9
+ export { default as Text } from "./components/text/Text.svelte";
15
10
  export { default as Timeline } from "./components/timeline/Timeline.svelte";
11
+ export {} from "./data/entities";
12
+ export * from "./types";
13
+ export * from "./ui/globals";
14
+ export { default as Button } from "./ui/molecules/button.svelte";
15
+ export {} from "./utils/variable-utils";
@@ -8,6 +8,6 @@ export interface LocalizationContextProps {
8
8
  selectedLocale?: string;
9
9
  localizations: Localizations;
10
10
  }
11
- export declare function setLocalizationContext({ defaultLocale, selectedLocale, localizations, }: LocalizationContextProps): LocalizationContext;
11
+ export declare function setLocalizationContext(props: () => LocalizationContextProps): LocalizationContext;
12
12
  export declare function getLocalizationContext(): LocalizationContext;
13
13
  export {};
@@ -1,11 +1,12 @@
1
1
  import { getContext, setContext } from "svelte";
2
2
  const key = Symbol("localization");
3
- export function setLocalizationContext({ defaultLocale, selectedLocale, localizations, }) {
4
- const locale = selectedLocale ?? defaultLocale;
3
+ export function setLocalizationContext(props) {
5
4
  const getLocalizedString = (id) => {
6
5
  if (!id) {
7
6
  return "";
8
7
  }
8
+ const { selectedLocale, defaultLocale, localizations } = props();
9
+ const locale = selectedLocale ?? defaultLocale;
9
10
  const selected = localizations[locale]?.[id];
10
11
  const fallback = localizations[defaultLocale]?.[id];
11
12
  return selected ?? fallback;
@@ -1,10 +1,11 @@
1
1
  import type { Action } from "../types/components/button";
2
- import { type Writable } from "svelte/store";
3
- interface PaywallContext {
2
+ import type { VariableDictionary } from "../utils/variable-utils";
3
+ import { type Readable, type Writable } from "svelte/store";
4
+ export type PaywallContext = Readonly<{
4
5
  selectedPackageId: Writable<string | undefined>;
6
+ variablesPerPackage: Readable<Record<string, VariableDictionary> | undefined>;
5
7
  onPurchase: () => void;
6
8
  onButtonAction: (action: Action) => void;
7
- }
9
+ }>;
8
10
  export declare function setPaywallContext(context: PaywallContext): void;
9
11
  export declare function getPaywallContext(): PaywallContext;
10
- export {};
@@ -1,6 +1,5 @@
1
1
  import { type VariableDictionary } from "../utils/variable-utils";
2
2
  import { type Readable } from "svelte/store";
3
- type VariablesStore = Readable<VariableDictionary | undefined>;
3
+ export type VariablesStore = Readable<VariableDictionary | undefined>;
4
4
  export declare function setVariablesContext(variables: VariablesStore): void;
5
5
  export declare function getVariablesContext(): VariablesStore;
6
- export {};
@@ -10,7 +10,7 @@ export declare const calmPaywallData: PaywallData;
10
10
  export declare const stateTemplate: PaywallData;
11
11
  export declare const posterMakerTemplate: PaywallData;
12
12
  export declare const zStackTemplate: PaywallData;
13
- export declare const labelsData: {
13
+ export declare const localizations: {
14
14
  en_US: {
15
15
  id1: string;
16
16
  id2: string;
@@ -424,7 +424,6 @@ export const paywallData = {
424
424
  type: "package",
425
425
  },
426
426
  {
427
- components: [],
428
427
  id: "lPNvA6W9st",
429
428
  is_selected_by_default: false,
430
429
  name: "Package - Annual",
@@ -748,7 +747,6 @@ export const paywallData = {
748
747
  type: "stack",
749
748
  },
750
749
  {
751
- components: [],
752
750
  id: "jNZK5yseV6",
753
751
  is_selected_by_default: false,
754
752
  name: "Package - Lifetime",
@@ -998,6 +996,7 @@ export const paywallData = {
998
996
  stack: {
999
997
  background_color: null,
1000
998
  border: null,
999
+ shadow: null,
1001
1000
  components: [
1002
1001
  {
1003
1002
  background_color: null,
@@ -2480,7 +2479,6 @@ export const alignmentPaywallData = {
2480
2479
  },
2481
2480
  shadow: null,
2482
2481
  shape: {
2483
- corners: null,
2484
2482
  type: "pill",
2485
2483
  },
2486
2484
  size: {
@@ -5338,7 +5336,7 @@ export const pastaPaywallData = {
5338
5336
  },
5339
5337
  ],
5340
5338
  dimension: {
5341
- alignment: "leading",
5339
+ alignment: "top",
5342
5340
  distribution: "space_between",
5343
5341
  type: "horizontal",
5344
5342
  },
@@ -5914,7 +5912,7 @@ export const pastaPaywallData = {
5914
5912
  },
5915
5913
  ],
5916
5914
  dimension: {
5917
- alignment: "leading",
5915
+ alignment: "top",
5918
5916
  distribution: "space_between",
5919
5917
  type: "horizontal",
5920
5918
  },
@@ -6490,7 +6488,7 @@ export const pastaPaywallData = {
6490
6488
  },
6491
6489
  ],
6492
6490
  dimension: {
6493
- alignment: "leading",
6491
+ alignment: "top",
6494
6492
  distribution: "space_between",
6495
6493
  type: "horizontal",
6496
6494
  },
@@ -7380,7 +7378,7 @@ export const variablesPastaPaywallData = {
7380
7378
  },
7381
7379
  ],
7382
7380
  dimension: {
7383
- alignment: "leading",
7381
+ alignment: "top",
7384
7382
  distribution: "space_between",
7385
7383
  type: "horizontal",
7386
7384
  },
@@ -7956,7 +7954,7 @@ export const variablesPastaPaywallData = {
7956
7954
  },
7957
7955
  ],
7958
7956
  dimension: {
7959
- alignment: "leading",
7957
+ alignment: "top",
7960
7958
  distribution: "space_between",
7961
7959
  type: "horizontal",
7962
7960
  },
@@ -8532,7 +8530,7 @@ export const variablesPastaPaywallData = {
8532
8530
  },
8533
8531
  ],
8534
8532
  dimension: {
8535
- alignment: "leading",
8533
+ alignment: "top",
8536
8534
  distribution: "space_between",
8537
8535
  type: "horizontal",
8538
8536
  },
@@ -9492,7 +9490,7 @@ export const gradientPaywallData = {
9492
9490
  },
9493
9491
  ],
9494
9492
  dimension: {
9495
- alignment: "leading",
9493
+ alignment: "top",
9496
9494
  distribution: "space_between",
9497
9495
  type: "horizontal",
9498
9496
  },
@@ -10114,7 +10112,7 @@ export const gradientPaywallData = {
10114
10112
  },
10115
10113
  ],
10116
10114
  dimension: {
10117
- alignment: "leading",
10115
+ alignment: "top",
10118
10116
  distribution: "space_between",
10119
10117
  type: "horizontal",
10120
10118
  },
@@ -10823,7 +10821,7 @@ export const gradientPaywallData = {
10823
10821
  },
10824
10822
  ],
10825
10823
  dimension: {
10826
- alignment: "leading",
10824
+ alignment: "top",
10827
10825
  distribution: "space_between",
10828
10826
  type: "horizontal",
10829
10827
  },
@@ -12156,7 +12154,6 @@ export const calmPaywallData = {
12156
12154
  },
12157
12155
  shadow: null,
12158
12156
  shape: {
12159
- corners: null,
12160
12157
  type: "pill",
12161
12158
  },
12162
12159
  size: {
@@ -14311,7 +14308,6 @@ export const posterMakerTemplate = {
14311
14308
  type: "package",
14312
14309
  },
14313
14310
  {
14314
- components: [],
14315
14311
  id: "pAZxZ1NZie",
14316
14312
  is_selected_by_default: false,
14317
14313
  name: "Package",
@@ -15297,7 +15293,6 @@ export const zStackTemplate = {
15297
15293
  border: null,
15298
15294
  components: [
15299
15295
  {
15300
- border: null,
15301
15296
  color_overlay: null,
15302
15297
  fit_mode: "fill",
15303
15298
  id: "ldMMGT6WBc",
@@ -15323,7 +15318,6 @@ export const zStackTemplate = {
15323
15318
  top: 0,
15324
15319
  trailing: 0,
15325
15320
  },
15326
- shadow: null,
15327
15321
  size: {
15328
15322
  height: {
15329
15323
  type: "fit",
@@ -15441,7 +15435,6 @@ export const zStackTemplate = {
15441
15435
  ],
15442
15436
  dimension: {
15443
15437
  alignment: "top_leading",
15444
- distribution: "space_between",
15445
15438
  type: "zlayer",
15446
15439
  },
15447
15440
  id: "HBJemxppcn",
@@ -15572,7 +15565,6 @@ export const zStackTemplate = {
15572
15565
  border: null,
15573
15566
  components: [
15574
15567
  {
15575
- border: null,
15576
15568
  color_overlay: null,
15577
15569
  fit_mode: "fill",
15578
15570
  id: "R-N_r7mv1F",
@@ -15598,7 +15590,6 @@ export const zStackTemplate = {
15598
15590
  top: 0,
15599
15591
  trailing: 0,
15600
15592
  },
15601
- shadow: null,
15602
15593
  size: {
15603
15594
  height: {
15604
15595
  type: "fit",
@@ -15716,7 +15707,6 @@ export const zStackTemplate = {
15716
15707
  ],
15717
15708
  dimension: {
15718
15709
  alignment: "top",
15719
- distribution: "space_between",
15720
15710
  type: "zlayer",
15721
15711
  },
15722
15712
  id: "a-EeCgJyJ7",
@@ -15847,7 +15837,6 @@ export const zStackTemplate = {
15847
15837
  border: null,
15848
15838
  components: [
15849
15839
  {
15850
- border: null,
15851
15840
  color_overlay: null,
15852
15841
  fit_mode: "fill",
15853
15842
  id: "2eFzI0Oq2i",
@@ -15873,7 +15862,6 @@ export const zStackTemplate = {
15873
15862
  top: 0,
15874
15863
  trailing: 0,
15875
15864
  },
15876
- shadow: null,
15877
15865
  size: {
15878
15866
  height: {
15879
15867
  type: "fit",
@@ -15991,7 +15979,6 @@ export const zStackTemplate = {
15991
15979
  ],
15992
15980
  dimension: {
15993
15981
  alignment: "top_trailing",
15994
- distribution: "space_between",
15995
15982
  type: "zlayer",
15996
15983
  },
15997
15984
  id: "nomeNzWJFI",
@@ -16122,7 +16109,6 @@ export const zStackTemplate = {
16122
16109
  border: null,
16123
16110
  components: [
16124
16111
  {
16125
- border: null,
16126
16112
  color_overlay: null,
16127
16113
  fit_mode: "fill",
16128
16114
  id: "s09LRT9G-i",
@@ -16148,7 +16134,6 @@ export const zStackTemplate = {
16148
16134
  top: 0,
16149
16135
  trailing: 0,
16150
16136
  },
16151
- shadow: null,
16152
16137
  size: {
16153
16138
  height: {
16154
16139
  type: "fit",
@@ -16266,7 +16251,6 @@ export const zStackTemplate = {
16266
16251
  ],
16267
16252
  dimension: {
16268
16253
  alignment: "leading",
16269
- distribution: "space_between",
16270
16254
  type: "zlayer",
16271
16255
  },
16272
16256
  id: "n0VN7PK6BS",
@@ -16397,7 +16381,6 @@ export const zStackTemplate = {
16397
16381
  border: null,
16398
16382
  components: [
16399
16383
  {
16400
- border: null,
16401
16384
  color_overlay: null,
16402
16385
  fit_mode: "fill",
16403
16386
  id: "qHkC63g-3P",
@@ -16423,7 +16406,6 @@ export const zStackTemplate = {
16423
16406
  top: 0,
16424
16407
  trailing: 0,
16425
16408
  },
16426
- shadow: null,
16427
16409
  size: {
16428
16410
  height: {
16429
16411
  type: "fit",
@@ -16541,7 +16523,6 @@ export const zStackTemplate = {
16541
16523
  ],
16542
16524
  dimension: {
16543
16525
  alignment: "center",
16544
- distribution: "space_between",
16545
16526
  type: "zlayer",
16546
16527
  },
16547
16528
  id: "NPR4_35vT4",
@@ -16672,7 +16653,6 @@ export const zStackTemplate = {
16672
16653
  border: null,
16673
16654
  components: [
16674
16655
  {
16675
- border: null,
16676
16656
  color_overlay: null,
16677
16657
  fit_mode: "fill",
16678
16658
  id: "fUjDWt68DD",
@@ -16698,7 +16678,6 @@ export const zStackTemplate = {
16698
16678
  top: 0,
16699
16679
  trailing: 0,
16700
16680
  },
16701
- shadow: null,
16702
16681
  size: {
16703
16682
  height: {
16704
16683
  type: "fit",
@@ -16816,7 +16795,6 @@ export const zStackTemplate = {
16816
16795
  ],
16817
16796
  dimension: {
16818
16797
  alignment: "trailing",
16819
- distribution: "space_between",
16820
16798
  type: "zlayer",
16821
16799
  },
16822
16800
  id: "7iP6_oGu2k",
@@ -16947,7 +16925,6 @@ export const zStackTemplate = {
16947
16925
  border: null,
16948
16926
  components: [
16949
16927
  {
16950
- border: null,
16951
16928
  color_overlay: null,
16952
16929
  fit_mode: "fill",
16953
16930
  id: "1fB4IrDJjf",
@@ -16973,7 +16950,6 @@ export const zStackTemplate = {
16973
16950
  top: 0,
16974
16951
  trailing: 0,
16975
16952
  },
16976
- shadow: null,
16977
16953
  size: {
16978
16954
  height: {
16979
16955
  type: "fit",
@@ -17091,7 +17067,6 @@ export const zStackTemplate = {
17091
17067
  ],
17092
17068
  dimension: {
17093
17069
  alignment: "bottom_leading",
17094
- distribution: "space_between",
17095
17070
  type: "zlayer",
17096
17071
  },
17097
17072
  id: "iWoIgqlLPc",
@@ -17222,7 +17197,6 @@ export const zStackTemplate = {
17222
17197
  border: null,
17223
17198
  components: [
17224
17199
  {
17225
- border: null,
17226
17200
  color_overlay: null,
17227
17201
  fit_mode: "fill",
17228
17202
  id: "IplwaswsEf",
@@ -17248,7 +17222,6 @@ export const zStackTemplate = {
17248
17222
  top: 0,
17249
17223
  trailing: 0,
17250
17224
  },
17251
- shadow: null,
17252
17225
  size: {
17253
17226
  height: {
17254
17227
  type: "fit",
@@ -17366,7 +17339,6 @@ export const zStackTemplate = {
17366
17339
  ],
17367
17340
  dimension: {
17368
17341
  alignment: "bottom",
17369
- distribution: "space_between",
17370
17342
  type: "zlayer",
17371
17343
  },
17372
17344
  id: "RlXufyEV-f",
@@ -17497,7 +17469,6 @@ export const zStackTemplate = {
17497
17469
  border: null,
17498
17470
  components: [
17499
17471
  {
17500
- border: null,
17501
17472
  color_overlay: null,
17502
17473
  fit_mode: "fill",
17503
17474
  id: "CvagVsuuGt",
@@ -17523,7 +17494,6 @@ export const zStackTemplate = {
17523
17494
  top: 0,
17524
17495
  trailing: 0,
17525
17496
  },
17526
- shadow: null,
17527
17497
  size: {
17528
17498
  height: {
17529
17499
  type: "fit",
@@ -17641,7 +17611,6 @@ export const zStackTemplate = {
17641
17611
  ],
17642
17612
  dimension: {
17643
17613
  alignment: "bottom_trailing",
17644
- distribution: "space_between",
17645
17614
  type: "zlayer",
17646
17615
  },
17647
17616
  id: "tYUlzIOV4B",
@@ -17803,7 +17772,7 @@ export const zStackTemplate = {
17803
17772
  template_name: "components",
17804
17773
  updated_at: "2024-12-19T20:52:22Z",
17805
17774
  };
17806
- export const labelsData = {
17775
+ export const localizations = {
17807
17776
  en_US: {
17808
17777
  id1: "Item 1",
17809
17778
  id2: "Item 2",
@@ -20197,7 +20166,6 @@ export const fallbackPaywallData = {
20197
20166
  type: "package",
20198
20167
  },
20199
20168
  {
20200
- components: [],
20201
20169
  id: "lPNvA6W9st",
20202
20170
  is_selected_by_default: false,
20203
20171
  name: "Package - Annual",
@@ -20521,7 +20489,6 @@ export const fallbackPaywallData = {
20521
20489
  type: "stack",
20522
20490
  },
20523
20491
  {
20524
- components: [],
20525
20492
  id: "jNZK5yseV6",
20526
20493
  is_selected_by_default: false,
20527
20494
  name: "Package - Lifetime",
@@ -22160,7 +22127,6 @@ export const e2eTestTemplate = {
22160
22127
  ],
22161
22128
  dimension: {
22162
22129
  alignment: "top_trailing",
22163
- distribution: "space_between",
22164
22130
  type: "zlayer",
22165
22131
  },
22166
22132
  id: "1G0XaOjb8n",
@@ -22190,11 +22156,9 @@ export const e2eTestTemplate = {
22190
22156
  size: {
22191
22157
  height: {
22192
22158
  type: "fit",
22193
- value: 160,
22194
22159
  },
22195
22160
  width: {
22196
22161
  type: "fill",
22197
- value: null,
22198
22162
  },
22199
22163
  },
22200
22164
  spacing: 0,
@@ -22821,7 +22785,12 @@ export const e2eTestTemplate = {
22821
22785
  font_weight: "bold",
22822
22786
  horizontal_alignment: "leading",
22823
22787
  id: "c13Mv5wrJU",
22824
- margin: {},
22788
+ margin: {
22789
+ bottom: 0,
22790
+ leading: 0,
22791
+ top: 0,
22792
+ trailing: 0,
22793
+ },
22825
22794
  name: "",
22826
22795
  overrides: {
22827
22796
  states: {
@@ -22835,7 +22804,12 @@ export const e2eTestTemplate = {
22835
22804
  },
22836
22805
  },
22837
22806
  },
22838
- padding: {},
22807
+ padding: {
22808
+ bottom: 0,
22809
+ leading: 0,
22810
+ top: 0,
22811
+ trailing: 0,
22812
+ },
22839
22813
  size: {
22840
22814
  height: {
22841
22815
  type: "fit",
@@ -22970,7 +22944,6 @@ export const e2eTestTemplate = {
22970
22944
  font_weight: "regular",
22971
22945
  horizontal_alignment: "leading",
22972
22946
  id: "ahQAs554G5",
22973
- margin: {},
22974
22947
  name: "",
22975
22948
  overrides: {
22976
22949
  states: {
@@ -22984,7 +22957,6 @@ export const e2eTestTemplate = {
22984
22957
  },
22985
22958
  },
22986
22959
  },
22987
- padding: {},
22988
22960
  size: {
22989
22961
  height: {
22990
22962
  type: "fit",
@@ -23120,7 +23092,6 @@ export const e2eTestTemplate = {
23120
23092
  font_weight: "bold",
23121
23093
  horizontal_alignment: "leading",
23122
23094
  id: "TN5ev2tbbB",
23123
- margin: {},
23124
23095
  name: "",
23125
23096
  overrides: {
23126
23097
  states: {
@@ -23134,7 +23105,6 @@ export const e2eTestTemplate = {
23134
23105
  },
23135
23106
  },
23136
23107
  },
23137
- padding: {},
23138
23108
  size: {
23139
23109
  height: {
23140
23110
  type: "fit",
@@ -23269,7 +23239,6 @@ export const e2eTestTemplate = {
23269
23239
  font_weight: "regular",
23270
23240
  horizontal_alignment: "leading",
23271
23241
  id: "ts9NTw_QjO",
23272
- margin: {},
23273
23242
  name: "",
23274
23243
  overrides: {
23275
23244
  states: {
@@ -23283,7 +23252,6 @@ export const e2eTestTemplate = {
23283
23252
  },
23284
23253
  },
23285
23254
  },
23286
- padding: {},
23287
23255
  size: {
23288
23256
  height: {
23289
23257
  type: "fit",
@@ -23404,7 +23372,6 @@ export const e2eTestTemplate = {
23404
23372
  font_weight: "bold",
23405
23373
  horizontal_alignment: "leading",
23406
23374
  id: "b1EI5ueRHY",
23407
- margin: {},
23408
23375
  name: "",
23409
23376
  overrides: {
23410
23377
  states: {
@@ -23418,7 +23385,6 @@ export const e2eTestTemplate = {
23418
23385
  },
23419
23386
  },
23420
23387
  },
23421
- padding: {},
23422
23388
  size: {
23423
23389
  height: {
23424
23390
  type: "fit",
@@ -23553,7 +23519,6 @@ export const e2eTestTemplate = {
23553
23519
  font_weight: "regular",
23554
23520
  horizontal_alignment: "leading",
23555
23521
  id: "G9o5ydFUoY",
23556
- margin: {},
23557
23522
  name: "",
23558
23523
  overrides: {
23559
23524
  states: {
@@ -23567,7 +23532,6 @@ export const e2eTestTemplate = {
23567
23532
  },
23568
23533
  },
23569
23534
  },
23570
- padding: {},
23571
23535
  size: {
23572
23536
  height: {
23573
23537
  type: "fit",
@@ -1,7 +1,7 @@
1
1
  import { setLocalizationContext, } from "../stores/localization";
2
2
  export function localizationDecorator(props) {
3
3
  return (Story) => {
4
- setLocalizationContext(props);
4
+ setLocalizationContext(() => props);
5
5
  return Story();
6
6
  };
7
7
  }
@@ -1,5 +1,5 @@
1
1
  import { setPaywallContext } from "../stores/paywall";
2
- import { writable } from "svelte/store";
2
+ import { readable, writable } from "svelte/store";
3
3
  export function paywallDecorator() {
4
4
  return (Story) => {
5
5
  const selectedPackageId = writable(undefined);
@@ -10,6 +10,7 @@ export function paywallDecorator() {
10
10
  });
11
11
  setPaywallContext({
12
12
  selectedPackageId,
13
+ variablesPerPackage: readable(undefined),
13
14
  onPurchase: () => window.alert("Purchase clicked"),
14
15
  onButtonAction: (action) => window.alert(`Button clicked: ${JSON.stringify(action, undefined, 2)}`),
15
16
  });
@@ -1,10 +1,10 @@
1
1
  <script module lang="ts">
2
- import { brandingAppearances } from "./fixtures";
3
- import { toProductInfoStyleVar } from "../ui/theme/utils";
2
+ import type { Snippet } from "svelte";
4
3
  import Container from "../ui/layout/container.svelte";
5
4
  import Layout from "../ui/layout/layout.svelte";
6
5
  import Main from "../ui/layout/main-block.svelte";
7
- import type { Snippet } from "svelte";
6
+ import { toProductInfoStyleVar } from "../ui/theme/utils";
7
+ import { brandingAppearances } from "./fixtures";
8
8
  </script>
9
9
 
10
10
  <script lang="ts">
@@ -0,0 +1,6 @@
1
+ import type { ImageProps, StackProps, TextNodeProps, TimelineProps } from "../data/entities";
2
+ import type { ButtonProps } from "./components/button";
3
+ import type { FooterProps } from "./components/footer";
4
+ import type { PackageProps } from "./components/package";
5
+ import type { PurchaseButtonProps } from "./components/purchase-button";
6
+ export type Component = ButtonProps | FooterProps | ImageProps | PackageProps | PurchaseButtonProps | StackProps | TextNodeProps | TimelineProps;
@@ -1,4 +1,4 @@
1
- import type { SharedComponentProps, StackProps } from "../../data/entities";
1
+ import type { BaseComponent, StackProps } from "../../data/entities";
2
2
  interface RestorePurchasesAction {
3
3
  type: "restore_purchases";
4
4
  }
@@ -28,7 +28,7 @@ interface NavigateToUrlAction {
28
28
  };
29
29
  }
30
30
  export type Action = RestorePurchasesAction | NavigateBackAction | NavigateToAction | NavigateToSheetAction | NavigateToWebPurchase | NavigateToUrlAction;
31
- export interface ButtonProps extends SharedComponentProps {
31
+ export interface ButtonProps extends BaseComponent {
32
32
  type: "button";
33
33
  action: Action;
34
34
  stack: StackProps;
@@ -1,5 +1,5 @@
1
- import type { SharedComponentProps, StackProps } from "../../data/entities";
2
- export interface FooterProps extends SharedComponentProps {
1
+ import type { BaseComponent, StackProps } from "../../data/entities";
2
+ export interface FooterProps extends BaseComponent {
3
3
  type: "footer";
4
4
  stack: StackProps;
5
5
  }
@@ -1,5 +1,5 @@
1
- import type { SharedComponentProps, StackProps } from "../../data/entities";
2
- export interface PackageProps extends SharedComponentProps {
1
+ import type { BaseComponent, StackProps } from "../../data/entities";
2
+ export interface PackageProps extends BaseComponent {
3
3
  type: "package";
4
4
  package_id: string;
5
5
  is_selected_by_default: boolean;