@transferwise/components 0.0.0-experimental-0192429 → 0.0.0-experimental-385bb2a

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 (47) hide show
  1. package/build/index.js +0 -1
  2. package/build/index.js.map +1 -1
  3. package/build/index.mjs +1 -1
  4. package/build/main.css +4 -190
  5. package/build/styles/main.css +4 -190
  6. package/build/styles/typeahead/Typeahead.css +4 -4
  7. package/build/types/index.d.ts +0 -2
  8. package/build/types/index.d.ts.map +1 -1
  9. package/build/types/test-utils/fake-data.d.ts +0 -1
  10. package/build/types/test-utils/fake-data.d.ts.map +1 -1
  11. package/package.json +3 -3
  12. package/src/index.ts +0 -2
  13. package/src/main.css +4 -190
  14. package/src/main.less +0 -1
  15. package/src/test-utils/fake-data.ts +0 -3
  16. package/src/typeahead/Typeahead.css +4 -4
  17. package/src/typeahead/Typeahead.less +2 -2
  18. package/build/styles/item/Item.css +0 -186
  19. package/build/types/item/Item.d.ts +0 -40
  20. package/build/types/item/Item.d.ts.map +0 -1
  21. package/build/types/item/ItemAdditionalInfo.d.ts +0 -9
  22. package/build/types/item/ItemAdditionalInfo.d.ts.map +0 -1
  23. package/build/types/item/ItemCheckbox.d.ts +0 -4
  24. package/build/types/item/ItemCheckbox.d.ts.map +0 -1
  25. package/build/types/item/ItemIconButton.d.ts +0 -4
  26. package/build/types/item/ItemIconButton.d.ts.map +0 -1
  27. package/build/types/item/ItemImage.d.ts +0 -4
  28. package/build/types/item/ItemImage.d.ts.map +0 -1
  29. package/build/types/item/ItemNavigation.d.ts +0 -4
  30. package/build/types/item/ItemNavigation.d.ts.map +0 -1
  31. package/build/types/item/index.d.ts +0 -5
  32. package/build/types/item/index.d.ts.map +0 -1
  33. package/build/types/item/prompt/Prompt.d.ts +0 -12
  34. package/build/types/item/prompt/Prompt.d.ts.map +0 -1
  35. package/src/item/Item.css +0 -186
  36. package/src/item/Item.less +0 -177
  37. package/src/item/Item.story.tsx +0 -93
  38. package/src/item/Item.tsx +0 -165
  39. package/src/item/ItemAdditionalInfo.tsx +0 -31
  40. package/src/item/ItemCheckbox.tsx +0 -16
  41. package/src/item/ItemIconButton.tsx +0 -15
  42. package/src/item/ItemImage.tsx +0 -11
  43. package/src/item/ItemNavigation.tsx +0 -16
  44. package/src/item/index.ts +0 -4
  45. package/src/item/prompt/Prompt.spec.tsx +0 -77
  46. package/src/item/prompt/Prompt.story.tsx +0 -170
  47. package/src/item/prompt/Prompt.tsx +0 -44
package/src/main.css CHANGED
@@ -2648,192 +2648,6 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2648
2648
  border-radius: 9999px !important;
2649
2649
  border-radius: var(--radius-full) !important;
2650
2650
  }
2651
- .np-item {
2652
- padding: 16px;
2653
- padding: var(--size-16);
2654
- border-radius: 24px;
2655
- border-radius: var(--radius-large);
2656
- background-color: #ffffff;
2657
- background-color: var(--color-background-screen);
2658
- display: flex;
2659
- gap: 16px;
2660
- gap: var(--size-16);
2661
- align-items: center;
2662
- flex-direction: row;
2663
- cursor: pointer;
2664
- }
2665
- .np-item:hover {
2666
- background-color: var(--color-background-screen-hover);
2667
- }
2668
- .np-item:active {
2669
- background-color: var(--color-background-screen-active);
2670
- }
2671
- .np-item-media {
2672
- flex: 0 0 auto;
2673
- align-items: flex-start;
2674
- }
2675
- .np-item-title {
2676
- color: #37517e;
2677
- color: var(--color-content-primary);
2678
- }
2679
- .np-item-additional-info {
2680
- color: #768e9c;
2681
- color: var(--color-content-tertiary);
2682
- }
2683
- .np-item-value {
2684
- flex: 0 0 auto;
2685
- }
2686
- .np-item-control {
2687
- flex: 0 0 auto;
2688
- }
2689
- .np-item-spotlight-active {
2690
- background-color: rgba(134,167,189,0.10196);
2691
- background-color: var(--color-background-neutral);
2692
- }
2693
- .np-item-spotlight-active:hover {
2694
- background-color: var(--color-background-neutral-hover);
2695
- }
2696
- .np-item-spotlight-active:active {
2697
- background-color: var(--color-background-neutral-active);
2698
- }
2699
- .np-item-spotlight-inactive {
2700
- background-color: rgba(134, 167, 189, 0.025);
2701
- border: 1px dashed rgba(0,0,0,0.10196);
2702
- border: 1px dashed var(--color-border-neutral);
2703
- }
2704
- @supports (color: color-mix(in lch, red, blue)) {
2705
- .np-item-spotlight-inactive {
2706
- background-color: color-mix(in srgb, var(--color-background-neutral) 25%, transparent);
2707
- }
2708
- }
2709
- .np-item-spotlight-inactive:hover {
2710
- background-color: color-mix(in srgb, var(--color-background-neutral-hover) 25%, transparent);
2711
- }
2712
- .np-item-spotlight-inactive:active {
2713
- background-color: color-mix(in srgb, var(--color-background-neutral-active) 25%, transparent);
2714
- }
2715
- .np-item-prompt {
2716
- display: inline-flex;
2717
- padding-top: calc(8px / 2);
2718
- padding-top: calc(var(--padding-x-small) / 2);
2719
- padding-bottom: calc(8px / 2);
2720
- padding-bottom: calc(var(--padding-x-small) / 2);
2721
- padding-left: calc(8px - 1px);
2722
- padding-left: calc(var(--padding-x-small) - 1px);
2723
- padding-right: 8px;
2724
- padding-right: var(--padding-x-small);
2725
- border-radius: 10px;
2726
- border-radius: var(--radius-small);
2727
- word-break: break-word;
2728
- word-wrap: break-word;
2729
- }
2730
- .np-item-prompt .np-prompt-icon {
2731
- padding-right: calc(12px / 2);
2732
- padding-right: calc(var(--size-12) / 2);
2733
- padding-top: calc(4px - 1px);
2734
- padding-top: calc(var(--size-4) - 1px);
2735
- padding-bottom: calc(4px - 1px);
2736
- padding-bottom: calc(var(--size-4) - 1px);
2737
- }
2738
- .np-item-prompt .np-prompt-icon .tw-icon-tags,
2739
- .np-item-prompt .np-prompt-icon .tw-icon-confetti {
2740
- color: var(--color-sentiment-positive-primary);
2741
- }
2742
- .np-item-prompt a {
2743
- text-underline-offset: calc(4px / 2);
2744
- text-underline-offset: calc(var(--size-4) / 2);
2745
- }
2746
- .np-item-prompt.np-prompt-interactive {
2747
- -webkit-text-decoration: none;
2748
- text-decoration: none;
2749
- cursor: pointer;
2750
- border: none;
2751
- }
2752
- .np-item-prompt.negative {
2753
- background-color: var(--color-sentiment-negative-secondary);
2754
- color: var(--color-sentiment-negative-primary);
2755
- }
2756
- .np-item-prompt.negative a {
2757
- color: var(--color-sentiment-negative-primary);
2758
- }
2759
- .np-item-prompt.negative a:hover {
2760
- color: var(--color-sentiment-negative-primary-hover);
2761
- }
2762
- .np-item-prompt.negative a:active {
2763
- color: var(--color-sentiment-negative-primary-active);
2764
- }
2765
- .np-prompt-interactive.np-item-prompt.negative:hover {
2766
- background-color: color-mix(in srgb, var(--color-sentiment-negative-secondary) 95%, var(--color-sentiment-negative-primary));
2767
- }
2768
- .np-prompt-interactive.np-item-prompt.negative:active {
2769
- background-color: color-mix(in srgb, var(--color-sentiment-negative-secondary) 90%, var(--color-sentiment-negative-primary));
2770
- }
2771
- .np-item-prompt.positive,
2772
- .np-item-prompt.discount,
2773
- .np-item-prompt.savings {
2774
- background-color: var(--color-sentiment-positive-secondary);
2775
- color: var(--color-sentiment-positive-primary);
2776
- }
2777
- .np-item-prompt.positive a,
2778
- .np-item-prompt.discount a,
2779
- .np-item-prompt.savings a {
2780
- color: var(--color-sentiment-positive-primary);
2781
- }
2782
- .np-item-prompt.positive a:hover,
2783
- .np-item-prompt.discount a:hover,
2784
- .np-item-prompt.savings a:hover {
2785
- color: var(--color-sentiment-positive-primary-hover);
2786
- }
2787
- .np-item-prompt.positive a:active,
2788
- .np-item-prompt.discount a:active,
2789
- .np-item-prompt.savings a:active {
2790
- color: var(--color-sentiment-positive-primary-active);
2791
- }
2792
- .np-prompt-interactive.np-item-prompt.positive:hover,
2793
- .np-prompt-interactive.np-item-prompt.discount:hover,
2794
- .np-prompt-interactive.np-item-prompt.savings:hover {
2795
- background-color: color-mix(in srgb, var(--color-sentiment-positive-secondary) 95%, var(--color-sentiment-positive-primary));
2796
- }
2797
- .np-prompt-interactive.np-item-prompt.positive:active,
2798
- .np-prompt-interactive.np-item-prompt.discount:active,
2799
- .np-prompt-interactive.np-item-prompt.savings:active {
2800
- background-color: color-mix(in srgb, var(--color-sentiment-positive-secondary) 90%, var(--color-sentiment-positive-primary));
2801
- }
2802
- .np-item-prompt.neutral {
2803
- background-color: rgba(134,167,189,0.10196);
2804
- background-color: var(--color-background-neutral);
2805
- color: #37517e;
2806
- color: var(--color-content-primary);
2807
- }
2808
- .np-item-prompt.neutral a {
2809
- color: #37517e;
2810
- color: var(--color-content-primary);
2811
- }
2812
- .np-prompt-interactive.np-item-prompt.neutral:hover {
2813
- background-color: var(--color-background-neutral-hover);
2814
- }
2815
- .np-prompt-interactive.np-item-prompt.neutral:active {
2816
- background-color: var(--color-background-neutral-active);
2817
- }
2818
- .np-item-prompt.warning {
2819
- background-color: var(--color-sentiment-warning-secondary);
2820
- color: var(--color-sentiment-warning-content);
2821
- }
2822
- .np-item-prompt.warning a {
2823
- color: var(--color-sentiment-warning-content);
2824
- }
2825
- .np-item-prompt.warning a:hover {
2826
- color: var(--color-sentiment-warning-content-hover);
2827
- }
2828
- .np-item-prompt.warning a:active {
2829
- color: var(--color-sentiment-warning-content-active);
2830
- }
2831
- .np-prompt-interactive.np-item-prompt.warning:hover {
2832
- background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 90%, var(--color-sentiment-warning-primary));
2833
- }
2834
- .np-prompt-interactive.np-item-prompt.warning:active {
2835
- background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 80%, var(--color-sentiment-warning-primary));
2836
- }
2837
2651
  .np-field-control {
2838
2652
  margin-top: 4px;
2839
2653
  margin-top: var(--size-4);
@@ -6012,8 +5826,8 @@ html:not([dir="rtl"]) .np-navigation-option {
6012
5826
  }
6013
5827
  .typeahead--multiple.typeahead--has-value .typeahead__input-wrapper::after {
6014
5828
  content: "";
6015
- height: calc(8px - 1);
6016
- height: calc(var(--size-8) - 1);
5829
+ height: calc(8px - 1px);
5830
+ height: calc(var(--size-8) - 1px);
6017
5831
  width: 100%;
6018
5832
  }
6019
5833
  .typeahead__input-wrapper {
@@ -6044,8 +5858,8 @@ html:not([dir="rtl"]) .np-navigation-option {
6044
5858
  min-height: var(--input-height-large);
6045
5859
  }
6046
5860
  .typeahead-lg.typeahead--multiple .typeahead__input {
6047
- padding-top: calc(8px - 1);
6048
- padding-top: calc(var(--size-8) - 1);
5861
+ padding-top: calc(8px - 1px);
5862
+ padding-top: calc(var(--size-8) - 1px);
6049
5863
  }
6050
5864
  .typeahead-lg.typeahead--multiple .typeahead__input-wrapper {
6051
5865
  padding-bottom: 8px;
package/src/main.less CHANGED
@@ -39,7 +39,6 @@
39
39
  @import "./image/Image.less";
40
40
  @import "./info/Info.less";
41
41
  @import "./inputs/Input.less";
42
- @import "./item/Item.less";
43
42
  @import "./field/Field.less";
44
43
  @import "./inputs/InputGroup.less";
45
44
  @import "./inputs/SelectInput.less";
@@ -1,9 +1,6 @@
1
1
  export const lorem10 =
2
2
  'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iste, architecto?';
3
3
 
4
- export const lorem20 =
5
- 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum non explicabo doloribus rerum saepe ut beatae adipisci rem vero optio.';
6
-
7
4
  export const lorem40 =
8
5
  'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Illo esse quod et iure deserunt facilis similique voluptatem reprehenderit mollitia inventore, ab voluptate dignissimos autem repellat accusamus perferendis sed pariatur tempore possimus ipsam praesentium ipsum? Nesciunt cumque repellendus impedit aliquam! Error?';
9
6
 
@@ -84,8 +84,8 @@
84
84
  }
85
85
  .typeahead--multiple.typeahead--has-value .typeahead__input-wrapper::after {
86
86
  content: "";
87
- height: calc(8px - 1);
88
- height: calc(var(--size-8) - 1);
87
+ height: calc(8px - 1px);
88
+ height: calc(var(--size-8) - 1px);
89
89
  width: 100%;
90
90
  }
91
91
  .typeahead__input-wrapper {
@@ -116,8 +116,8 @@
116
116
  min-height: var(--input-height-large);
117
117
  }
118
118
  .typeahead-lg.typeahead--multiple .typeahead__input {
119
- padding-top: calc(8px - 1);
120
- padding-top: calc(var(--size-8) - 1);
119
+ padding-top: calc(8px - 1px);
120
+ padding-top: calc(var(--size-8) - 1px);
121
121
  }
122
122
  .typeahead-lg.typeahead--multiple .typeahead__input-wrapper {
123
123
  padding-bottom: 8px;
@@ -94,7 +94,7 @@
94
94
  .typeahead__input-wrapper {
95
95
  &::after {
96
96
  content: "";
97
- height: calc(var(--size-8) - 1);
97
+ height: calc(var(--size-8) - 1px);
98
98
  width: 100%;
99
99
  }
100
100
  }
@@ -150,7 +150,7 @@
150
150
  }
151
151
 
152
152
  .typeahead__input {
153
- padding-top: calc(var(--size-8) - 1);
153
+ padding-top: calc(var(--size-8) - 1px);
154
154
  }
155
155
 
156
156
  .typeahead__input-wrapper {
@@ -1,186 +0,0 @@
1
- .np-item {
2
- padding: 16px;
3
- padding: var(--size-16);
4
- border-radius: 24px;
5
- border-radius: var(--radius-large);
6
- background-color: #ffffff;
7
- background-color: var(--color-background-screen);
8
- display: flex;
9
- gap: 16px;
10
- gap: var(--size-16);
11
- align-items: center;
12
- flex-direction: row;
13
- cursor: pointer;
14
- }
15
- .np-item:hover {
16
- background-color: var(--color-background-screen-hover);
17
- }
18
- .np-item:active {
19
- background-color: var(--color-background-screen-active);
20
- }
21
- .np-item-media {
22
- flex: 0 0 auto;
23
- align-items: flex-start;
24
- }
25
- .np-item-title {
26
- color: #37517e;
27
- color: var(--color-content-primary);
28
- }
29
- .np-item-additional-info {
30
- color: #768e9c;
31
- color: var(--color-content-tertiary);
32
- }
33
- .np-item-value {
34
- flex: 0 0 auto;
35
- }
36
- .np-item-control {
37
- flex: 0 0 auto;
38
- }
39
- .np-item-spotlight-active {
40
- background-color: rgba(134,167,189,0.10196);
41
- background-color: var(--color-background-neutral);
42
- }
43
- .np-item-spotlight-active:hover {
44
- background-color: var(--color-background-neutral-hover);
45
- }
46
- .np-item-spotlight-active:active {
47
- background-color: var(--color-background-neutral-active);
48
- }
49
- .np-item-spotlight-inactive {
50
- background-color: rgba(134, 167, 189, 0.025);
51
- border: 1px dashed rgba(0,0,0,0.10196);
52
- border: 1px dashed var(--color-border-neutral);
53
- }
54
- @supports (color: color-mix(in lch, red, blue)) {
55
- .np-item-spotlight-inactive {
56
- background-color: color-mix(in srgb, var(--color-background-neutral) 25%, transparent);
57
- }
58
- }
59
- .np-item-spotlight-inactive:hover {
60
- background-color: color-mix(in srgb, var(--color-background-neutral-hover) 25%, transparent);
61
- }
62
- .np-item-spotlight-inactive:active {
63
- background-color: color-mix(in srgb, var(--color-background-neutral-active) 25%, transparent);
64
- }
65
- .np-item-prompt {
66
- display: inline-flex;
67
- padding-top: calc(8px / 2);
68
- padding-top: calc(var(--padding-x-small) / 2);
69
- padding-bottom: calc(8px / 2);
70
- padding-bottom: calc(var(--padding-x-small) / 2);
71
- padding-left: calc(8px - 1px);
72
- padding-left: calc(var(--padding-x-small) - 1px);
73
- padding-right: 8px;
74
- padding-right: var(--padding-x-small);
75
- border-radius: 10px;
76
- border-radius: var(--radius-small);
77
- word-break: break-word;
78
- word-wrap: break-word;
79
- }
80
- .np-item-prompt .np-prompt-icon {
81
- padding-right: calc(12px / 2);
82
- padding-right: calc(var(--size-12) / 2);
83
- padding-top: calc(4px - 1px);
84
- padding-top: calc(var(--size-4) - 1px);
85
- padding-bottom: calc(4px - 1px);
86
- padding-bottom: calc(var(--size-4) - 1px);
87
- }
88
- .np-item-prompt .np-prompt-icon .tw-icon-tags,
89
- .np-item-prompt .np-prompt-icon .tw-icon-confetti {
90
- color: var(--color-sentiment-positive-primary);
91
- }
92
- .np-item-prompt a {
93
- text-underline-offset: calc(4px / 2);
94
- text-underline-offset: calc(var(--size-4) / 2);
95
- }
96
- .np-item-prompt.np-prompt-interactive {
97
- -webkit-text-decoration: none;
98
- text-decoration: none;
99
- cursor: pointer;
100
- border: none;
101
- }
102
- .np-item-prompt.negative {
103
- background-color: var(--color-sentiment-negative-secondary);
104
- color: var(--color-sentiment-negative-primary);
105
- }
106
- .np-item-prompt.negative a {
107
- color: var(--color-sentiment-negative-primary);
108
- }
109
- .np-item-prompt.negative a:hover {
110
- color: var(--color-sentiment-negative-primary-hover);
111
- }
112
- .np-item-prompt.negative a:active {
113
- color: var(--color-sentiment-negative-primary-active);
114
- }
115
- .np-prompt-interactive.np-item-prompt.negative:hover {
116
- background-color: color-mix(in srgb, var(--color-sentiment-negative-secondary) 95%, var(--color-sentiment-negative-primary));
117
- }
118
- .np-prompt-interactive.np-item-prompt.negative:active {
119
- background-color: color-mix(in srgb, var(--color-sentiment-negative-secondary) 90%, var(--color-sentiment-negative-primary));
120
- }
121
- .np-item-prompt.positive,
122
- .np-item-prompt.discount,
123
- .np-item-prompt.savings {
124
- background-color: var(--color-sentiment-positive-secondary);
125
- color: var(--color-sentiment-positive-primary);
126
- }
127
- .np-item-prompt.positive a,
128
- .np-item-prompt.discount a,
129
- .np-item-prompt.savings a {
130
- color: var(--color-sentiment-positive-primary);
131
- }
132
- .np-item-prompt.positive a:hover,
133
- .np-item-prompt.discount a:hover,
134
- .np-item-prompt.savings a:hover {
135
- color: var(--color-sentiment-positive-primary-hover);
136
- }
137
- .np-item-prompt.positive a:active,
138
- .np-item-prompt.discount a:active,
139
- .np-item-prompt.savings a:active {
140
- color: var(--color-sentiment-positive-primary-active);
141
- }
142
- .np-prompt-interactive.np-item-prompt.positive:hover,
143
- .np-prompt-interactive.np-item-prompt.discount:hover,
144
- .np-prompt-interactive.np-item-prompt.savings:hover {
145
- background-color: color-mix(in srgb, var(--color-sentiment-positive-secondary) 95%, var(--color-sentiment-positive-primary));
146
- }
147
- .np-prompt-interactive.np-item-prompt.positive:active,
148
- .np-prompt-interactive.np-item-prompt.discount:active,
149
- .np-prompt-interactive.np-item-prompt.savings:active {
150
- background-color: color-mix(in srgb, var(--color-sentiment-positive-secondary) 90%, var(--color-sentiment-positive-primary));
151
- }
152
- .np-item-prompt.neutral {
153
- background-color: rgba(134,167,189,0.10196);
154
- background-color: var(--color-background-neutral);
155
- color: #37517e;
156
- color: var(--color-content-primary);
157
- }
158
- .np-item-prompt.neutral a {
159
- color: #37517e;
160
- color: var(--color-content-primary);
161
- }
162
- .np-prompt-interactive.np-item-prompt.neutral:hover {
163
- background-color: var(--color-background-neutral-hover);
164
- }
165
- .np-prompt-interactive.np-item-prompt.neutral:active {
166
- background-color: var(--color-background-neutral-active);
167
- }
168
- .np-item-prompt.warning {
169
- background-color: var(--color-sentiment-warning-secondary);
170
- color: var(--color-sentiment-warning-content);
171
- }
172
- .np-item-prompt.warning a {
173
- color: var(--color-sentiment-warning-content);
174
- }
175
- .np-item-prompt.warning a:hover {
176
- color: var(--color-sentiment-warning-content-hover);
177
- }
178
- .np-item-prompt.warning a:active {
179
- color: var(--color-sentiment-warning-content-active);
180
- }
181
- .np-prompt-interactive.np-item-prompt.warning:hover {
182
- background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 90%, var(--color-sentiment-warning-primary));
183
- }
184
- .np-prompt-interactive.np-item-prompt.warning:active {
185
- background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 80%, var(--color-sentiment-warning-primary));
186
- }
@@ -1,40 +0,0 @@
1
- import { ReactNode } from 'react';
2
- export type ItemTypes = 'none' | 'navigation' | 'radio' | 'checkbox' | 'switch' | 'button' | 'icon-button';
3
- export type Props = {
4
- as?: 'li' | 'div' | 'span';
5
- inverted?: boolean;
6
- disabled?: boolean;
7
- partialInteractivity?: boolean;
8
- spotlight?: 'active' | 'inactive';
9
- title: ReactNode;
10
- subtitle?: ReactNode;
11
- additionalInfo?: ReactNode;
12
- valueTitle?: ReactNode;
13
- valueSubtitle?: ReactNode;
14
- media?: ReactNode;
15
- control?: ReactNode;
16
- prompt?: ReactNode;
17
- };
18
- export type ItemContextData = {
19
- setControlType: (type: ItemTypes) => void;
20
- ids: {
21
- label: string;
22
- additionalInfo: string;
23
- value: string;
24
- control: string;
25
- prompt: string;
26
- };
27
- props: Pick<Props, 'as' | 'disabled' | 'inverted'>;
28
- };
29
- export declare const ItemContext: import("react").Context<ItemContextData>;
30
- export declare const Item: {
31
- ({ as: View, title, subtitle, additionalInfo, prompt, inverted, media, spotlight, valueTitle, valueSubtitle, control, disabled, }: Props): import("react").JSX.Element;
32
- Image: (props: import("./ItemImage").ItemImageProps) => import("react").JSX.Element;
33
- AdditionalInfo: ({ children, action }: import("./ItemAdditionalInfo").ItemAdditionalInfoProps) => import("react").JSX.Element;
34
- Checkbox: (props: import("./ItemCheckbox").ItemCheckboxProps) => import("react").JSX.Element;
35
- IconButton: (props: import("./ItemIconButton").ItemIconButtonProps) => import("react").JSX.Element;
36
- Navigation: ({ onClick }: import("./ItemNavigation").ItemNavigationProps) => import("react").JSX.Element;
37
- Prompt: ({ type, children, action }: import("./prompt/Prompt").ItemPromptProps) => import("react").JSX.Element;
38
- };
39
- export default Item;
40
- //# sourceMappingURL=Item.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Item.d.ts","sourceRoot":"","sources":["../../../src/item/Item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,SAAS,EAA4B,MAAM,OAAO,CAAC;AAW3E,MAAM,MAAM,SAAS,GACjB,MAAM,GACN,YAAY,GACZ,OAAO,GACP,UAAU,GACV,QAAQ,GACR,QAAQ,GACR,aAAa,CAAC;AAElB,MAAM,MAAM,KAAK,GAAG;IAClB,EAAE,CAAC,EAAE,IAAI,GAAG,KAAK,GAAG,MAAM,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,SAAS,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;IAClC,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,cAAc,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IAC1C,GAAG,EAAE;QACH,KAAK,EAAE,MAAM,CAAC;QACd,cAAc,EAAE,MAAM,CAAC;QACvB,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,EAAE,MAAM,CAAC;QAChB,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,GAAG,UAAU,GAAG,UAAU,CAAC,CAAC;CACpD,CAAC;AAIF,eAAO,MAAM,WAAW,0CAAuC,CAAC;AAEhE,eAAO,MAAM,IAAI;uIAad,KAAK;;;;;;;CAwFP,CAAC;AAWF,eAAe,IAAI,CAAC"}
@@ -1,9 +0,0 @@
1
- import { PropsWithChildren } from 'react';
2
- import { LinkProps } from '../link';
3
- export type ItemAdditionalInfoProps = PropsWithChildren<{
4
- action?: Pick<LinkProps, 'href' | 'onClick' | 'target'> & {
5
- label?: string;
6
- };
7
- }>;
8
- export declare const AdditionalInfo: ({ children, action }: ItemAdditionalInfoProps) => import("react").JSX.Element;
9
- //# sourceMappingURL=ItemAdditionalInfo.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"ItemAdditionalInfo.d.ts","sourceRoot":"","sources":["../../../src/item/ItemAdditionalInfo.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAc,MAAM,OAAO,CAAC;AAGtD,OAAa,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAG1C,MAAM,MAAM,uBAAuB,GAAG,iBAAiB,CAAC;IACtD,MAAM,CAAC,EAAE,IAAI,CAAC,SAAS,EAAE,MAAM,GAAG,SAAS,GAAG,QAAQ,CAAC,GAAG;QAAE,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CAC9E,CAAC,CAAC;AAEH,eAAO,MAAM,cAAc,yBAAmC,uBAAuB,gCAoBpF,CAAC"}
@@ -1,4 +0,0 @@
1
- import { CheckboxButtonProps } from '../checkboxButton/CheckboxButton';
2
- export type ItemCheckboxProps = Pick<CheckboxButtonProps, 'checked' | 'indeterminate' | 'onChange'>;
3
- export declare const Checkbox: (props: ItemCheckboxProps) => import("react").JSX.Element;
4
- //# sourceMappingURL=ItemCheckbox.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"ItemCheckbox.d.ts","sourceRoot":"","sources":["../../../src/item/ItemCheckbox.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,mBAAmB,EAAE,MAAM,kCAAkC,CAAC;AAGvE,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,mBAAmB,EAAE,SAAS,GAAG,eAAe,GAAG,UAAU,CAAC,CAAC;AAEpG,eAAO,MAAM,QAAQ,UAAoB,iBAAiB,gCAQzD,CAAC"}
@@ -1,4 +0,0 @@
1
- import { IconButtonProps } from '../iconButton';
2
- export type ItemIconButtonProps = Pick<IconButtonProps, 'onClick' | 'href' | 'target'>;
3
- export declare const IconButton: (props: ItemIconButtonProps) => import("react").JSX.Element;
4
- //# sourceMappingURL=ItemIconButton.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"ItemIconButton.d.ts","sourceRoot":"","sources":["../../../src/item/ItemIconButton.tsx"],"names":[],"mappings":"AACA,OAAO,EAA6B,eAAe,EAAE,MAAM,eAAe,CAAC;AAG3E,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAAC,eAAe,EAAE,SAAS,GAAG,MAAM,GAAG,QAAQ,CAAC,CAAC;AAEvF,eAAO,MAAM,UAAU,UAAoB,mBAAmB,gCAQ7D,CAAC"}
@@ -1,4 +0,0 @@
1
- import { ImageProps } from '../image/Image';
2
- export type ItemImageProps = Pick<ImageProps, 'src' | 'alt'>;
3
- export declare const Image: (props: ItemImageProps) => import("react").JSX.Element;
4
- //# sourceMappingURL=ItemImage.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"ItemImage.d.ts","sourceRoot":"","sources":["../../../src/item/ItemImage.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAkB,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAE5D,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,UAAU,EAAE,KAAK,GAAG,KAAK,CAAC,CAAC;AAE7D,eAAO,MAAM,KAAK,UAAoB,cAAc,gCAInD,CAAC"}
@@ -1,4 +0,0 @@
1
- import { ButtonProps } from '../button/Button.types';
2
- export type ItemNavigationProps = Pick<ButtonProps, 'onClick' | 'href'>;
3
- export declare const Navigation: ({ onClick }: ItemNavigationProps) => import("react").JSX.Element;
4
- //# sourceMappingURL=ItemNavigation.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"ItemNavigation.d.ts","sourceRoot":"","sources":["../../../src/item/ItemNavigation.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAIrD,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAAC,WAAW,EAAE,SAAS,GAAG,MAAM,CAAC,CAAC;AAExE,eAAO,MAAM,UAAU,gBAAoC,mBAAmB,gCAQ7E,CAAC"}
@@ -1,5 +0,0 @@
1
- export type { Props as ItemProps } from './Item';
2
- export type { ItemAdditionalInfoProps } from './ItemAdditionalInfo';
3
- export type { ItemCheckboxProps } from './ItemCheckbox';
4
- export { default } from './Item';
5
- //# sourceMappingURL=index.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/item/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,KAAK,IAAI,SAAS,EAAE,MAAM,QAAQ,CAAC;AACjD,YAAY,EAAE,uBAAuB,EAAE,MAAM,sBAAsB,CAAC;AACpE,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACxD,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC"}
@@ -1,12 +0,0 @@
1
- import { Sentiment } from '../../common';
2
- import { LinkProps } from '../../link';
3
- export type ItemPromptProps = {
4
- type: `${Sentiment.POSITIVE | Sentiment.NEGATIVE | Sentiment.NEUTRAL | Sentiment.WARNING}` | 'discount' | 'savings';
5
- children: React.ReactNode;
6
- action?: Pick<LinkProps, 'href' | 'target' | 'onClick'> & {
7
- 'aria-label'?: string;
8
- };
9
- };
10
- export declare const ItemPrompt: ({ type, children, action }: ItemPromptProps) => import("react").JSX.Element;
11
- export default ItemPrompt;
12
- //# sourceMappingURL=Prompt.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Prompt.d.ts","sourceRoot":"","sources":["../../../../src/item/prompt/Prompt.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAGzC,OAAO,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAGvC,MAAM,MAAM,eAAe,GAAG;IAC5B,IAAI,EACA,GAAG,SAAS,CAAC,QAAQ,GAAG,SAAS,CAAC,QAAQ,GAAG,SAAS,CAAC,OAAO,GAAG,SAAS,CAAC,OAAO,EAAE,GACpF,UAAU,GACV,SAAS,CAAC;IACd,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,MAAM,CAAC,EAAE,IAAI,CAAC,SAAS,EAAE,MAAM,GAAG,QAAQ,GAAG,SAAS,CAAC,GAAG;QAAE,YAAY,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CACrF,CAAC;AAEF,eAAO,MAAM,UAAU,+BAAgC,eAAe,gCAyBrE,CAAC;AAEF,eAAe,UAAU,CAAC"}