@telefonica/mistica 15.8.0 → 15.10.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.
Files changed (21) hide show
  1. package/css/mistica.css +1 -1
  2. package/dist/accordion.js +1 -2
  3. package/dist/icon-button.d.ts +17 -16
  4. package/dist/icon-button.js +51 -49
  5. package/dist/list.css-mistica.js +11 -11
  6. package/dist/list.css.d.ts +1 -3
  7. package/dist/list.d.ts +8 -16
  8. package/dist/list.js +275 -383
  9. package/dist/package-version.js +1 -1
  10. package/dist/skins/movistar.d.ts +13 -0
  11. package/dist/skins/movistar.js +112 -99
  12. package/dist/tooltip.js +13 -13
  13. package/dist-es/accordion.js +3 -4
  14. package/dist-es/icon-button.js +64 -62
  15. package/dist-es/list.css-mistica.js +2 -2
  16. package/dist-es/list.js +321 -429
  17. package/dist-es/package-version.js +1 -1
  18. package/dist-es/skins/movistar.js +112 -99
  19. package/dist-es/style.css +1 -1
  20. package/dist-es/tooltip.js +16 -16
  21. package/package.json +1 -1
package/dist/package-version.js CHANGED
@@ -8,4 +8,4 @@ Object.defineProperty(exports, "PACKAGE_VERSION", {
8
8
  return o;
9
9
  }
10
10
  });
11
- const o = "15.8.0";
11
+ const o = "15.10.0";
package/dist/skins/movistar.d.ts CHANGED
@@ -2,28 +2,40 @@ import type { GetKnownSkin } from './types';
2
2
  export declare const palette: {
3
3
  movistarBlue: string;
4
4
  movistarBlue10: string;
5
+ movistarBlue15: string;
5
6
  movistarBlue20: string;
6
7
  movistarBlue30: string;
7
8
  movistarBlue40: string;
8
9
  movistarBlue55: string;
10
+ movistarBlueHC: string;
11
+ movistarBlueHC55: string;
12
+ movistarBlueHC65: string;
9
13
  movistarGreen: string;
10
14
  movistarGreen10: string;
11
15
  movistarGreen30: string;
12
16
  movistarGreen40: string;
17
+ movistarGreen55: string;
13
18
  movistarGreen60: string;
14
19
  movistarGreen70: string;
15
20
  pepper: string;
16
21
  pepper10: string;
17
22
  pepper40: string;
23
+ pepper45: string;
18
24
  pepper55: string;
25
+ pepper60: string;
26
+ pepper65: string;
19
27
  pepper70: string;
20
28
  egg: string;
21
29
  egg10: string;
22
30
  egg40: string;
31
+ egg55: string;
23
32
  egg80: string;
24
33
  pink: string;
34
+ pink45: string;
35
+ pink55: string;
25
36
  purple: string;
26
37
  purple10: string;
38
+ purple35: string;
27
39
  purple40: string;
28
40
  purple70: string;
29
41
  grey1: string;
@@ -42,5 +54,6 @@ export declare const palette: {
42
54
  darkModeGrey4: string;
43
55
  darkModeGrey5: string;
44
56
  darkModeGrey6: string;
57
+ darkModeGrey7: string;
45
58
  };
46
59
  export declare const getMovistarSkin: GetKnownSkin;
package/dist/skins/movistar.js CHANGED
@@ -19,37 +19,49 @@ _export(exports, {
19
19
  const _constants = require("./constants.js");
20
20
  const _color = require("../utils/color.js");
21
21
  const e = {
22
- movistarBlue: "#019DF4",
22
+ movistarBlue: "#0B9CEA",
23
23
  movistarBlue10: "#E6F5FD",
24
+ movistarBlue15: "#CEEBFB",
24
25
  movistarBlue20: "#B3E1FB",
25
26
  movistarBlue30: "#80CEF9",
26
27
  movistarBlue40: "#4DBAF7",
27
28
  movistarBlue55: "#008EDD",
29
+ movistarBlueHC: "#066FCB",
30
+ movistarBlueHC55: "#055EAC",
31
+ movistarBlueHC65: "#055398",
28
32
  movistarGreen: "#5CB615",
29
33
  movistarGreen10: "#EFF8E8",
30
34
  movistarGreen30: "#ADDA8A",
31
35
  movistarGreen40: "#8DCC5B",
36
+ movistarGreen55: "#52A413",
32
37
  movistarGreen60: "#499110",
33
38
  movistarGreen70: "#407F0F",
34
39
  pepper: "#FF374A",
35
40
  pepper10: "#FFEBED",
36
41
  pepper40: "#FF7380",
42
+ pepper45: "#FF5F6E",
37
43
  pepper55: "#D73241",
44
+ pepper60: "#CC2C3B",
45
+ pepper65: "#BF2937",
38
46
  pepper70: "#B22634",
39
47
  egg: "#F28D15",
40
48
  egg10: "#FEF4E8",
41
49
  egg40: "#F6AF5B",
50
+ egg55: "#D97D0D",
42
51
  egg80: "#6D3F09",
43
52
  pink: "#E63780",
53
+ pink45: "#EB5F99",
54
+ pink55: "#C42F6D",
44
55
  purple: "#A13EA1",
45
56
  purple10: "#F6ECF6",
57
+ purple35: "#C78BC7",
46
58
  purple40: "#BD78BD",
47
59
  purple70: "#712B71",
48
60
  grey1: "#F6F6F6",
49
61
  grey2: "#EEEEEE",
50
62
  grey3: "#DDDDDD",
51
- grey4: "#999999",
52
- grey5: "#86888C",
63
+ grey4: "#949494",
64
+ grey5: "#6B6C6F",
53
65
  grey6: "#313235",
54
66
  white: "#FFFFFF",
55
67
  black: "#000000",
@@ -60,7 +72,8 @@ const e = {
60
72
  darkModeGrey3: "#CED4D7",
61
73
  darkModeGrey4: "#85939C",
62
74
  darkModeGrey5: "#6D7D88",
63
- darkModeGrey6: "#3C5261"
75
+ darkModeGrey6: "#3C5261",
76
+ darkModeGrey7: "#032F46"
64
77
  }, d = ()=>({
65
78
  name: _constants.MOVISTAR_SKIN,
66
79
  colors: {
@@ -70,11 +83,11 @@ const e = {
70
83
  backgroundBrandSecondary: e.movistarBlueDark,
71
84
  backgroundContainer: e.white,
72
85
  backgroundContainerError: e.pepper10,
73
- backgroundContainerHover: (0, _color.applyAlpha)(e.darkModeBlack, 0.03),
74
- backgroundContainerPressed: (0, _color.applyAlpha)(e.darkModeBlack, 0.05),
86
+ backgroundContainerHover: (0, _color.applyAlpha)(e.black, 0.03),
87
+ backgroundContainerPressed: (0, _color.applyAlpha)(e.black, 0.05),
75
88
  backgroundContainerBrand: e.movistarBlue,
76
- backgroundContainerBrandHover: (0, _color.applyAlpha)(e.darkModeBlack, 0.1),
77
- backgroundContainerBrandPressed: (0, _color.applyAlpha)(e.darkModeBlack, 0.2),
89
+ backgroundContainerBrandHover: (0, _color.applyAlpha)(e.black, 0.1),
90
+ backgroundContainerBrandPressed: (0, _color.applyAlpha)(e.black, 0.2),
78
91
  backgroundContainerBrandOverInverse: e.movistarBlue55,
79
92
  backgroundContainerAlternative: e.grey1,
80
93
  backgroundOverlay: (0, _color.applyAlpha)(e.movistarBlueDark, 0.6),
@@ -89,58 +102,58 @@ const e = {
89
102
  border: e.grey3,
90
103
  borderHigh: e.grey5,
91
104
  borderSelected: e.movistarBlue,
92
- coverBackgroundHover: (0, _color.applyAlpha)(e.darkModeBlack, 0.25),
93
- coverBackgroundPressed: (0, _color.applyAlpha)(e.darkModeBlack, 0.35),
94
- buttonDangerBackground: e.pepper,
95
- buttonDangerBackgroundSelected: e.pepper55,
96
- buttonDangerBackgroundHover: e.pepper55,
105
+ coverBackgroundHover: (0, _color.applyAlpha)(e.black, 0.25),
106
+ coverBackgroundPressed: (0, _color.applyAlpha)(e.black, 0.35),
107
+ buttonDangerBackground: e.pepper55,
108
+ buttonDangerBackgroundSelected: e.pepper70,
109
+ buttonDangerBackgroundHover: e.pepper65,
97
110
  buttonLinkDangerBackgroundSelected: e.pepper10,
98
111
  buttonLinkDangerBackgroundInverse: e.white,
99
112
  buttonLinkDangerBackgroundInverseSelected: e.pepper10,
100
113
  buttonLinkBackgroundSelected: e.movistarBlue10,
101
114
  buttonLinkBackgroundInverseSelected: (0, _color.applyAlpha)(e.white, 0.2),
102
- buttonPrimaryBackground: e.movistarBlue,
115
+ buttonPrimaryBackground: e.movistarBlueHC,
103
116
  buttonPrimaryBackgroundInverse: e.white,
104
- buttonPrimaryBackgroundSelected: e.movistarBlue55,
105
- buttonPrimaryBackgroundHover: e.movistarBlue55,
106
- buttonPrimaryBackgroundInverseSelected: e.movistarBlue30,
107
- buttonSecondaryBorder: e.movistarBlue,
108
- buttonSecondaryBorderSelected: e.movistarBlue55,
117
+ buttonPrimaryBackgroundSelected: e.movistarBlueHC65,
118
+ buttonPrimaryBackgroundHover: e.movistarBlueHC55,
119
+ buttonPrimaryBackgroundInverseSelected: e.movistarBlue10,
120
+ buttonSecondaryBorder: e.movistarBlueHC,
121
+ buttonSecondaryBorderSelected: e.movistarBlueHC65,
109
122
  buttonSecondaryBackgroundHover: e.movistarBlue10,
110
- buttonSecondaryBackgroundSelected: e.movistarBlue10,
123
+ buttonSecondaryBackgroundSelected: e.movistarBlue15,
111
124
  buttonSecondaryBorderInverse: e.white,
112
125
  buttonSecondaryBorderInverseSelected: e.white,
113
126
  buttonSecondaryBackgroundInverseHover: (0, _color.applyAlpha)(e.white, 0.2),
114
- buttonSecondaryBackgroundInverseSelected: (0, _color.applyAlpha)(e.white, 0.2),
127
+ buttonSecondaryBackgroundInverseSelected: (0, _color.applyAlpha)(e.white, 0.3),
115
128
  textButtonPrimary: e.white,
116
- textButtonPrimaryInverse: e.movistarBlue,
117
- textButtonPrimaryInverseSelected: e.movistarBlue,
118
- textButtonSecondary: e.movistarBlue,
119
- textButtonSecondarySelected: e.movistarBlue55,
129
+ textButtonPrimaryInverse: e.movistarBlueHC,
130
+ textButtonPrimaryInverseSelected: e.movistarBlueHC,
131
+ textButtonSecondary: e.movistarBlueHC,
132
+ textButtonSecondarySelected: e.movistarBlueHC55,
120
133
  textButtonSecondaryInverse: e.white,
121
134
  textButtonSecondaryInverseSelected: e.white,
122
- textLink: e.movistarBlue,
135
+ textLink: e.movistarBlueHC,
123
136
  textLinkInverse: e.white,
124
- textLinkDanger: e.pepper,
137
+ textLinkDanger: e.pepper60,
125
138
  textLinkSnackbar: e.movistarBlue30,
126
- textActivated: e.movistarBlue,
127
- textBrand: e.movistarBlue,
128
- control: e.grey3,
139
+ textActivated: e.movistarBlueHC,
140
+ textBrand: e.movistarBlueHC,
141
+ control: e.grey4,
129
142
  controlActivated: e.movistarBlue,
130
143
  controlInverse: e.movistarBlue20,
131
144
  controlActivatedInverse: e.white,
132
- controlError: e.pepper,
145
+ controlError: e.pepper55,
133
146
  barTrack: e.grey3,
134
- loadingBar: e.movistarBlue30,
135
- loadingBarBackground: e.movistarBlue55,
147
+ loadingBar: e.movistarBlue,
148
+ loadingBarBackground: e.grey2,
136
149
  toggleAndroidInactive: e.grey2,
137
150
  toggleAndroidBackgroundActive: e.movistarBlue20,
138
151
  iosControlKnob: e.white,
139
- divider: e.grey2,
152
+ divider: e.grey3,
140
153
  dividerInverse: (0, _color.applyAlpha)(e.white, 0.2),
141
154
  navigationBarDivider: e.movistarBlue,
142
155
  badge: e.pepper55,
143
- feedbackErrorBackground: e.pepper,
156
+ feedbackErrorBackground: e.pepper55,
144
157
  feedbackInfoBackground: e.movistarBlueDark,
145
158
  brand: e.movistarBlue,
146
159
  brandHigh: e.movistarBlue55,
@@ -154,13 +167,13 @@ const e = {
154
167
  textPrimaryInverse: e.white,
155
168
  textSecondary: e.grey5,
156
169
  textSecondaryInverse: e.movistarBlue10,
157
- success: e.movistarGreen,
158
- warning: e.egg,
159
- error: e.pepper,
160
- textError: e.pepper,
170
+ success: e.movistarGreen55,
171
+ warning: e.egg55,
172
+ error: e.pepper55,
173
+ textError: e.pepper55,
161
174
  textErrorInverse: e.white,
162
175
  promo: e.purple,
163
- highlight: e.pink,
176
+ highlight: e.pink55,
164
177
  successLow: e.movistarGreen10,
165
178
  warningLow: e.egg10,
166
179
  errorLow: e.pepper10,
@@ -178,11 +191,11 @@ const e = {
178
191
  textNavigationBarSecondary: e.movistarBlue20,
179
192
  textNavigationSearchBarHint: e.movistarBlue20,
180
193
  textNavigationSearchBarText: e.white,
181
- textAppBar: e.grey4,
182
- textAppBarSelected: e.movistarBlue,
183
- customTabsBackground: e.movistarBlue,
194
+ textAppBar: e.grey5,
195
+ textAppBarSelected: e.movistarBlueHC,
196
+ customTabsBackground: e.white,
184
197
  tagTextPromo: e.purple70,
185
- tagTextActive: e.movistarBlue,
198
+ tagTextActive: e.movistarBlueHC,
186
199
  tagTextInactive: e.grey5,
187
200
  tagTextSuccess: e.movistarGreen70,
188
201
  tagTextWarning: e.egg80,
@@ -210,8 +223,8 @@ const e = {
210
223
  backgroundContainerBrandOverInverse: e.darkModeGrey,
211
224
  backgroundContainerAlternative: e.darkModeGrey,
212
225
  backgroundOverlay: (0, _color.applyAlpha)(e.darkModeGrey, 0.8),
213
- backgroundSkeleton: e.movistarBlueDark,
214
- backgroundSkeletonInverse: e.movistarBlueDark,
226
+ backgroundSkeleton: e.darkModeGrey6,
227
+ backgroundSkeletonInverse: e.darkModeGrey6,
215
228
  backgroundBrandTop: e.darkModeBlack,
216
229
  backgroundBrandBottom: e.darkModeBlack,
217
230
  appBarBackground: e.darkModeGrey,
@@ -219,89 +232,89 @@ const e = {
219
232
  skeletonWave: e.darkModeGrey6,
220
233
  borderLow: e.darkModeBlack,
221
234
  border: e.darkModeGrey,
222
- borderHigh: e.darkModeGrey4,
235
+ borderHigh: e.darkModeGrey5,
223
236
  borderSelected: e.movistarBlue,
224
237
  coverBackgroundHover: (0, _color.applyAlpha)(e.darkModeBlack, 0.25),
225
238
  coverBackgroundPressed: (0, _color.applyAlpha)(e.darkModeBlack, 0.35),
226
- buttonDangerBackground: e.pepper,
227
- buttonDangerBackgroundSelected: e.pepper55,
228
- buttonDangerBackgroundHover: e.pepper55,
239
+ buttonDangerBackground: e.pepper55,
240
+ buttonDangerBackgroundSelected: e.pepper70,
241
+ buttonDangerBackgroundHover: e.pepper65,
229
242
  buttonLinkDangerBackgroundSelected: (0, _color.applyAlpha)(e.white, 0.08),
230
243
  buttonLinkDangerBackgroundInverse: (0, _color.applyAlpha)(e.white, 0),
231
244
  buttonLinkDangerBackgroundInverseSelected: (0, _color.applyAlpha)(e.white, 0.08),
232
245
  buttonLinkBackgroundSelected: (0, _color.applyAlpha)(e.white, 0.08),
233
246
  buttonLinkBackgroundInverseSelected: (0, _color.applyAlpha)(e.white, 0.08),
234
- buttonPrimaryBackground: e.movistarBlue,
235
- buttonPrimaryBackgroundInverse: e.movistarBlue,
236
- buttonPrimaryBackgroundSelected: e.movistarBlue55,
237
- buttonPrimaryBackgroundHover: e.movistarBlue55,
238
- buttonPrimaryBackgroundInverseSelected: e.movistarBlue55,
247
+ buttonPrimaryBackground: e.movistarBlueHC,
248
+ buttonPrimaryBackgroundInverse: e.movistarBlueHC,
249
+ buttonPrimaryBackgroundSelected: e.movistarBlueHC65,
250
+ buttonPrimaryBackgroundHover: e.movistarBlueHC55,
251
+ buttonPrimaryBackgroundInverseSelected: e.movistarBlueHC65,
239
252
  buttonSecondaryBackgroundHover: (0, _color.applyAlpha)(e.white, 0.15),
240
- buttonSecondaryBackgroundSelected: (0, _color.applyAlpha)(e.white, 0.15),
253
+ buttonSecondaryBackgroundSelected: (0, _color.applyAlpha)(e.white, 0.25),
241
254
  buttonSecondaryBorder: e.white,
242
255
  buttonSecondaryBorderSelected: e.white,
243
- buttonSecondaryBorderInverse: e.white,
244
- buttonSecondaryBorderInverseSelected: e.white,
256
+ buttonSecondaryBorderInverse: e.darkModeGrey2,
257
+ buttonSecondaryBorderInverseSelected: e.darkModeGrey2,
245
258
  buttonSecondaryBackgroundInverseHover: (0, _color.applyAlpha)(e.white, 0.15),
246
- buttonSecondaryBackgroundInverseSelected: (0, _color.applyAlpha)(e.white, 0.15),
247
- textButtonPrimary: e.darkModeGrey2,
248
- textButtonPrimaryInverse: e.darkModeGrey2,
249
- textButtonPrimaryInverseSelected: e.darkModeGrey2,
259
+ buttonSecondaryBackgroundInverseSelected: (0, _color.applyAlpha)(e.white, 0.25),
260
+ textButtonPrimary: e.white,
261
+ textButtonPrimaryInverse: e.white,
262
+ textButtonPrimaryInverseSelected: e.white,
250
263
  textButtonSecondary: e.darkModeGrey2,
251
- textButtonSecondarySelected: e.darkModeGrey4,
264
+ textButtonSecondarySelected: e.darkModeGrey2,
252
265
  textButtonSecondaryInverse: e.darkModeGrey2,
253
- textButtonSecondaryInverseSelected: e.darkModeGrey4,
266
+ textButtonSecondaryInverseSelected: e.darkModeGrey2,
254
267
  textLink: e.movistarBlue,
255
268
  textLinkInverse: e.movistarBlue,
256
- textLinkDanger: e.pepper,
257
- textLinkSnackbar: e.movistarBlue30,
269
+ textLinkDanger: e.pepper45,
270
+ textLinkSnackbar: e.movistarBlue,
258
271
  textActivated: e.movistarBlue,
259
272
  textBrand: e.movistarBlue,
260
- control: e.darkModeGrey6,
273
+ control: e.darkModeGrey4,
261
274
  controlActivated: e.movistarBlue,
262
- controlInverse: e.darkModeGrey6,
275
+ controlInverse: e.darkModeGrey4,
263
276
  controlActivatedInverse: e.movistarBlue,
264
- controlError: e.pepper,
277
+ controlError: e.pepper45,
265
278
  barTrack: e.darkModeGrey6,
266
279
  loadingBar: e.movistarBlue,
267
280
  loadingBarBackground: e.darkModeGrey6,
268
- toggleAndroidInactive: e.darkModeGrey4,
281
+ toggleAndroidInactive: e.darkModeGrey2,
269
282
  toggleAndroidBackgroundActive: e.movistarBlue20,
270
283
  iosControlKnob: e.darkModeGrey2,
271
- divider: (0, _color.applyAlpha)(e.white, 0.05),
272
- dividerInverse: (0, _color.applyAlpha)(e.white, 0.05),
284
+ divider: (0, _color.applyAlpha)(e.white, 0.1),
285
+ dividerInverse: (0, _color.applyAlpha)(e.white, 0.1),
273
286
  navigationBarDivider: e.darkModeBlack,
274
287
  badge: e.pepper55,
275
- feedbackErrorBackground: e.pepper,
288
+ feedbackErrorBackground: e.pepper55,
276
289
  feedbackInfoBackground: e.movistarBlueDark,
277
290
  brand: e.movistarBlue,
278
- brandHigh: e.darkModeGrey,
291
+ brandHigh: e.movistarBlue40,
279
292
  inverse: e.darkModeGrey2,
280
293
  neutralHigh: e.darkModeGrey2,
281
294
  neutralMedium: e.darkModeGrey5,
282
295
  neutralMediumInverse: e.grey5,
283
- neutralLow: e.movistarBlueDark,
284
- neutralLowAlternative: e.movistarBlueDark,
296
+ neutralLow: e.darkModeGrey6,
297
+ neutralLowAlternative: e.darkModeGrey6,
285
298
  textPrimary: e.darkModeGrey2,
286
299
  textPrimaryInverse: e.darkModeGrey2,
287
300
  textSecondary: e.darkModeGrey4,
288
301
  textSecondaryInverse: e.darkModeGrey4,
289
302
  success: e.movistarGreen,
290
303
  warning: e.egg,
291
- error: e.pepper,
292
- textError: e.pepper,
293
- textErrorInverse: e.pepper,
294
- promo: e.purple,
295
- highlight: e.pink,
296
- successLow: e.movistarBlueDark,
297
- warningLow: e.movistarBlueDark,
298
- errorLow: e.movistarBlueDark,
299
- promoLow: e.movistarBlueDark,
300
- brandLow: e.movistarBlueDark,
304
+ error: e.pepper45,
305
+ textError: e.pepper45,
306
+ textErrorInverse: e.pepper45,
307
+ promo: e.purple40,
308
+ highlight: e.pink45,
309
+ successLow: e.darkModeGrey7,
310
+ warningLow: e.darkModeGrey7,
311
+ errorLow: e.darkModeGrey7,
312
+ promoLow: e.darkModeGrey7,
313
+ brandLow: e.darkModeGrey7,
301
314
  successHigh: e.movistarGreen40,
302
315
  warningHigh: e.egg40,
303
- errorHigh: e.pepper40,
304
- promoHigh: e.purple40,
316
+ errorHigh: e.pepper45,
317
+ promoHigh: e.purple35,
305
318
  successHighInverse: e.movistarGreen70,
306
319
  warningHighInverse: e.egg80,
307
320
  errorHighInverse: e.pepper70,
@@ -310,21 +323,21 @@ const e = {
310
323
  textNavigationBarSecondary: e.darkModeGrey4,
311
324
  textNavigationSearchBarHint: e.darkModeGrey4,
312
325
  textNavigationSearchBarText: e.darkModeGrey2,
313
- textAppBar: e.darkModeGrey5,
314
- textAppBarSelected: e.darkModeGrey2,
326
+ textAppBar: e.darkModeGrey4,
327
+ textAppBarSelected: e.movistarBlue,
315
328
  customTabsBackground: e.darkModeBlack,
316
- tagTextPromo: e.purple40,
329
+ tagTextPromo: e.purple35,
317
330
  tagTextActive: e.movistarBlue,
318
- tagTextInactive: e.darkModeGrey5,
331
+ tagTextInactive: e.darkModeGrey3,
319
332
  tagTextSuccess: e.movistarGreen40,
320
333
  tagTextWarning: e.egg40,
321
- tagTextError: e.pepper40,
322
- tagBackgroundPromo: e.movistarBlueDark,
323
- tagBackgroundActive: e.movistarBlueDark,
324
- tagBackgroundInactive: e.movistarBlueDark,
325
- tagBackgroundSuccess: e.movistarBlueDark,
326
- tagBackgroundWarning: e.movistarBlueDark,
327
- tagBackgroundError: e.movistarBlueDark,
334
+ tagTextError: e.pepper45,
335
+ tagBackgroundPromo: e.darkModeGrey7,
336
+ tagBackgroundActive: e.darkModeGrey7,
337
+ tagBackgroundInactive: e.darkModeGrey7,
338
+ tagBackgroundSuccess: e.darkModeGrey7,
339
+ tagBackgroundWarning: e.darkModeGrey7,
340
+ tagBackgroundError: e.darkModeGrey7,
328
341
  cardContentOverlay: `linear-gradient(180deg, ${(0, _color.applyAlpha)(e.black, 0)} 0%, ${(0, _color.applyAlpha)(e.black, 0.4)} 30%, ${(0, _color.applyAlpha)(e.black, 0.7)} 100%)`
329
342
  },
330
343
  borderRadii: {
package/dist/tooltip.js CHANGED
@@ -165,16 +165,16 @@ function _object_without_properties_loose(source, excluded) {
165
165
  }
166
166
  const lt = (t)=>({
167
167
  border: `1px solid ${t ? _skincontractcssmistica.vars.colors.backgroundContainer : _skincontractcssmistica.vars.colors.border}`
168
- }), ct = 496, Yt = 300, Gt = 500, Kt = 100, p = 20, I = 6, N = I + p / 2 + 1, Ut = (t)=>{
168
+ }), ct = 496, Yt = 300, Gt = 500, Kt = 100, p = 20, w = 6, N = w + p / 2 + 1, Ut = (t)=>{
169
169
  switch(t){
170
170
  case "left":
171
- return `translateX(-${I}px)`;
171
+ return `translateX(-${w}px)`;
172
172
  case "right":
173
- return `translateX(${I}px)`;
173
+ return `translateX(${w}px)`;
174
174
  case "top":
175
- return `translateY(-${I}px)`;
175
+ return `translateY(-${w}px)`;
176
176
  case "bottom":
177
- return `translateY(${I}px)`;
177
+ return `translateY(${w}px)`;
178
178
  default:
179
179
  return "";
180
180
  }
@@ -186,7 +186,7 @@ const lt = (t)=>({
186
186
  };
187
187
  }, ft = (t, h, v, d, m)=>{
188
188
  if (!t || !h) return;
189
- const { top: x, bottom: w, left: B, right: W } = t, o = d - w, O = m - W, R = x, a = B, { width: X, height: V } = pt(h), _ = X + N, T = V + N, b = _ <= Math.max(a, O), M = T <= Math.max(o, R);
189
+ const { top: x, bottom: I, left: B, right: W } = t, o = d - I, O = m - W, R = x, a = B, { width: X, height: V } = pt(h), _ = X + N, T = V + N, b = _ <= Math.max(a, O), M = T <= Math.max(o, R);
190
190
  if (!(!M && !b)) switch(v){
191
191
  case "left":
192
192
  return b ? _ <= a ? "left" : "right" : o > R ? "bottom" : "top";
@@ -200,7 +200,7 @@ const lt = (t)=>({
200
200
  return;
201
201
  }
202
202
  }, jt = (param)=>{
203
- let { content: t, target: h, width: v, position: d = "top", dataAttributes: m, delay: x = !0, centerContent: w, open: B, onClose: W, hasPointerInteractionOnly: o = !1, trackingEvent: O } = param;
203
+ let { content: t, target: h, width: v, position: d = "top", dataAttributes: m, delay: x = !0, centerContent: I, open: B, onClose: W, hasPointerInteractionOnly: o = !1, trackingEvent: O } = param;
204
204
  const { texts: R } = (0, _hooks.useTheme)(), a = (0, _hooks.useAriaId)(), { openTooltipId: X } = (0, _tooltipcontextprovider.useTooltipState)(), { openTooltip: V, closeTooltip: _ } = (0, _tooltipcontextprovider.useSetTooltipState)(), [T, b] = _react.useState(), [M, z] = _react.useState(), P = _react.useRef(null), Y = _react.useRef(null), [C, dt] = _react.useState(null), u = (0, _environment.isTouchableDevice)(), G = x ? Gt : 0, [et, K] = _react.useState(!1), [U, y] = _react.useState(!1), j = B !== void 0, [ot, q] = _react.useState(!1), E = j ? B : a === X, Z = (0, _themevariantcontext.useIsInverseVariant)(), f = (0, _hooks.useBoundingRect)(P, E), H = (0, _hooks.useBoundingRect)(Y, E, !0), l = (0, _hooks.useWindowSize)(), S = _react.useCallback(()=>{
205
205
  q(!1), K(!1), y(!1);
206
206
  }, []);
@@ -233,7 +233,7 @@ const lt = (t)=>({
233
233
  case "bottom":
234
234
  r = {
235
235
  left: Math.max(0, Math.min(rt, (c + k - $) / 2)),
236
- top: A - I,
236
+ top: A - w,
237
237
  padding: `${N}px 0px 0px 0px`
238
238
  }, e = {
239
239
  left: Math.max(g, Math.min(l.width - g - p, (c + k - p) / 2)),
@@ -256,7 +256,7 @@ const lt = (t)=>({
256
256
  case "right":
257
257
  default:
258
258
  r = {
259
- left: k - I,
259
+ left: k - w,
260
260
  top: Math.max(0, Math.min(st, (L + A - F) / 2)),
261
261
  padding: `0px 0px 0px ${N}px`
262
262
  }, e = {
@@ -315,7 +315,7 @@ const lt = (t)=>({
315
315
  _,
316
316
  j
317
317
  ]);
318
- const mt = ft(f, C, d, l.height, l.width), ut = w !== void 0 ? w : (H == null ? void 0 : H.width) === _tooltipcssmistica.CONTENT_MIN_WIDTH;
318
+ const mt = ft(f, C, d, l.height, l.width), ut = I !== void 0 ? I : (H == null ? void 0 : H.width) === _tooltipcssmistica.CONTENT_MIN_WIDTH;
319
319
  return /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
320
320
  children: [
321
321
  /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
@@ -403,7 +403,7 @@ const lt = (t)=>({
403
403
  t,
404
404
  W && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
405
405
  className: _tooltipcssmistica.closeButtonIcon,
406
- children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconbutton.InternalIconButton, {
406
+ children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconbutton.IconButton, {
407
407
  onPress: ()=>{
408
408
  y(!1), W();
409
409
  },
@@ -433,7 +433,7 @@ const lt = (t)=>({
433
433
  ]
434
434
  });
435
435
  }, qt = (_param)=>{
436
- var { centerContent: t, extra: h, children: v, dataAttributes: d, title: m, description: x } = _param, w = _object_without_properties(_param, [
436
+ var { centerContent: t, extra: h, children: v, dataAttributes: d, title: m, description: x } = _param, I = _object_without_properties(_param, [
437
437
  "centerContent",
438
438
  "extra",
439
439
  "children",
@@ -465,5 +465,5 @@ const lt = (t)=>({
465
465
  dataAttributes: _object_spread({
466
466
  "component-name": "Tooltip"
467
467
  }, d)
468
- }, w));
468
+ }, I));
469
469
  }, ge = qt;
package/dist-es/accordion.js CHANGED
@@ -83,7 +83,7 @@ import * as s from "react";
83
83
  import { Content as S } from "./list.js";
84
84
  import T from "./icons/icon-chevron.js";
85
85
  import A from "./box.js";
86
- import { itemContent as w, touchableBackgroundInverse as y, touchableBackground as O, chevronContainer as D, panelTransitionClasses as P, panelContainer as V, panel as k } from "./accordion.css-mistica.js";
86
+ import { itemContent as w, touchableBackgroundInverse as O, touchableBackground as y, chevronContainer as D, panelTransitionClasses as P, panelContainer as V, panel as k } from "./accordion.css-mistica.js";
87
87
  import E from "./stack.js";
88
88
  import { BaseTouchable as _ } from "./touchable.js";
89
89
  import L from "classnames";
@@ -159,7 +159,7 @@ const C = 400, g = /*#__PURE__*/ s.createContext({
159
159
  children: [
160
160
  /* @__PURE__ */ o(_, {
161
161
  ref: u,
162
- className: L(w, f ? y : O),
162
+ className: L(w, f ? O : y),
163
163
  onPress: ()=>{
164
164
  m !== void 0 && p(m);
165
165
  },
@@ -169,8 +169,7 @@ const C = 400, g = /*#__PURE__*/ s.createContext({
169
169
  children: /* @__PURE__ */ o(A, {
170
170
  paddingX: 16,
171
171
  children: /* @__PURE__ */ o(S, _object_spread_props(_object_spread({
172
- labelId: e,
173
- type: "custom"
172
+ labelId: e
174
173
  }, i), {
175
174
  right: /* @__PURE__ */ o("div", {
176
175
  className: D,