@hero-design/rn 7.26.0 → 7.27.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.
Files changed (41) hide show
  1. package/.turbo/turbo-build.log +9 -9
  2. package/es/index.js +264 -201
  3. package/lib/index.js +264 -201
  4. package/package.json +4 -4
  5. package/src/components/Accordion/index.tsx +1 -1
  6. package/src/components/Avatar/AvatarStack/__tests__/StyledAvatarStack.spec.tsx +6 -3
  7. package/src/components/Avatar/AvatarStack/__tests__/__snapshots__/index.spec.tsx.snap +9 -9
  8. package/src/components/Avatar/AvatarStack/__tests__/index.spec.tsx +6 -3
  9. package/src/components/Avatar/AvatarStack/utils.ts +3 -6
  10. package/src/components/Card/index.tsx +18 -7
  11. package/src/components/Select/MultiSelect/index.tsx +5 -2
  12. package/src/components/Select/SingleSelect/index.tsx +5 -2
  13. package/src/components/Select/types.ts +15 -6
  14. package/src/components/Tabs/ScrollableTabs.tsx +2 -0
  15. package/src/components/Tabs/__tests__/ScrollableTabs.spec.tsx +1 -1
  16. package/src/components/Tabs/__tests__/index.spec.tsx +1 -1
  17. package/src/components/Tabs/index.tsx +7 -0
  18. package/src/components/Tag/StyledTag.tsx +42 -11
  19. package/src/components/Tag/__tests__/Tag.spec.tsx +28 -0
  20. package/src/components/Tag/__tests__/__snapshots__/Tag.spec.tsx.snap +135 -0
  21. package/src/components/Tag/index.tsx +15 -3
  22. package/src/theme/__tests__/__snapshots__/index.spec.ts.snap +2 -23
  23. package/src/theme/components/avatar.ts +0 -23
  24. package/src/theme/components/tag.ts +1 -0
  25. package/src/theme/components/toolbar.ts +1 -1
  26. package/src/theme/global/colors/work.ts +4 -4
  27. package/src/utils/hooks.ts +18 -1
  28. package/types/components/Card/index.d.ts +1 -1
  29. package/types/components/Select/MultiSelect/index.d.ts +1 -1
  30. package/types/components/Select/SingleSelect/index.d.ts +1 -1
  31. package/types/components/Select/index.d.ts +1 -1
  32. package/types/components/Select/types.d.ts +15 -3
  33. package/types/components/Tabs/ScrollableTabs.d.ts +1 -1
  34. package/types/components/Tabs/index.d.ts +7 -2
  35. package/types/components/Tag/StyledTag.d.ts +3 -0
  36. package/types/components/Tag/index.d.ts +7 -2
  37. package/types/theme/components/avatar.d.ts +0 -1
  38. package/types/theme/components/tag.d.ts +1 -0
  39. package/types/utils/hooks.d.ts +2 -0
  40. package/src/components/Accordion/utils.tsx +0 -11
  41. package/types/components/Accordion/utils.d.ts +0 -1
package/lib/index.js CHANGED
@@ -967,6 +967,7 @@ var BASE_COLORS = {
967
967
  peach: '#f8ac7d',
968
968
  pineGreen: '#017d6d',
969
969
  pink: '#fe56aa',
970
+ policeBlue: '#2e456d',
970
971
  purple: '#be83cf',
971
972
  royalBlue: '#5a68e2',
972
973
  scarletGum: '#401960',
@@ -988,16 +989,16 @@ var colorScales = Object.entries(BASE_COLORS).reduce(function (acc, _ref16) {
988
989
  return Object.assign(Object.assign({}, acc), _defineProperty({}, key, createColorScales(value)));
989
990
  }, {});
990
991
  var blue$1 = colorScales.blue,
991
- ultramarineBlue$1 = colorScales.ultramarineBlue,
992
+ ultramarineBlue$2 = colorScales.ultramarineBlue,
992
993
  green$1 = colorScales.green,
993
994
  grey$1 = colorScales.grey,
994
995
  grotesqueGreen = colorScales.grotesqueGreen,
995
- deepSaffron$1 = colorScales.deepSaffron,
996
+ deepSaffron$2 = colorScales.deepSaffron,
996
997
  pink$1 = colorScales.pink,
997
998
  purple$1 = colorScales.purple,
998
- vermilion$1 = colorScales.vermilion,
999
+ vermilion$2 = colorScales.vermilion,
999
1000
  smalt = colorScales.smalt,
1000
- violet$3 = colorScales.violet,
1001
+ violet$2 = colorScales.violet,
1001
1002
  yellow$1 = colorScales.yellow;
1002
1003
  ({
1003
1004
  black: '#000000',
@@ -1008,11 +1009,11 @@ var blue$1 = colorScales.blue,
1008
1009
  blueLight30: blue$1.lighten30,
1009
1010
  blueLight75: blue$1.lighten75,
1010
1011
  blueLight90: blue$1.lighten90,
1011
- dodgerBlue: ultramarineBlue$1.base,
1012
- dodgerBlueDark30: ultramarineBlue$1.darken30,
1013
- dodgerBlueLight30: ultramarineBlue$1.lighten30,
1014
- dodgerBlueLight75: ultramarineBlue$1.lighten75,
1015
- dodgerBlueLight90: ultramarineBlue$1.lighten90,
1012
+ dodgerBlue: ultramarineBlue$2.base,
1013
+ dodgerBlueDark30: ultramarineBlue$2.darken30,
1014
+ dodgerBlueLight30: ultramarineBlue$2.lighten30,
1015
+ dodgerBlueLight75: ultramarineBlue$2.lighten75,
1016
+ dodgerBlueLight90: ultramarineBlue$2.lighten90,
1016
1017
  green: green$1.base,
1017
1018
  greenDark15: green$1.darken15,
1018
1019
  greenDark30: green$1.darken30,
@@ -1037,13 +1038,13 @@ var blue$1 = colorScales.blue,
1037
1038
  grotesqueGreenLight60: grotesqueGreen.lighten60,
1038
1039
  grotesqueGreenLight75: grotesqueGreen.lighten75,
1039
1040
  grotesqueGreenLight90: grotesqueGreen.lighten90,
1040
- orange: deepSaffron$1.base,
1041
- orangeDark15: deepSaffron$1.darken15,
1042
- orangeDark30: deepSaffron$1.darken30,
1043
- orangeDark75: deepSaffron$1.darken75,
1044
- orangeLight30: deepSaffron$1.lighten30,
1045
- orangeLight75: deepSaffron$1.lighten75,
1046
- orangeLight90: deepSaffron$1.lighten90,
1041
+ orange: deepSaffron$2.base,
1042
+ orangeDark15: deepSaffron$2.darken15,
1043
+ orangeDark30: deepSaffron$2.darken30,
1044
+ orangeDark75: deepSaffron$2.darken75,
1045
+ orangeLight30: deepSaffron$2.lighten30,
1046
+ orangeLight75: deepSaffron$2.lighten75,
1047
+ orangeLight90: deepSaffron$2.lighten90,
1047
1048
  pink: pink$1.base,
1048
1049
  pinkDark15: pink$1.darken15,
1049
1050
  pinkDark30: pink$1.darken30,
@@ -1055,30 +1056,30 @@ var blue$1 = colorScales.blue,
1055
1056
  pinkLight90: pink$1.lighten90,
1056
1057
  purple: purple$1.base,
1057
1058
  purpleDark15: purple$1.darken15,
1058
- red: vermilion$1.base,
1059
- redDark15: vermilion$1.darken15,
1060
- redDark30: vermilion$1.darken30,
1061
- redDark75: vermilion$1.darken75,
1062
- redLight15: vermilion$1.lighten15,
1063
- redLight30: vermilion$1.lighten30,
1064
- redLight60: vermilion$1.lighten60,
1065
- redLight75: vermilion$1.lighten75,
1066
- redLight90: vermilion$1.lighten90,
1059
+ red: vermilion$2.base,
1060
+ redDark15: vermilion$2.darken15,
1061
+ redDark30: vermilion$2.darken30,
1062
+ redDark75: vermilion$2.darken75,
1063
+ redLight15: vermilion$2.lighten15,
1064
+ redLight30: vermilion$2.lighten30,
1065
+ redLight60: vermilion$2.lighten60,
1066
+ redLight75: vermilion$2.lighten75,
1067
+ redLight90: vermilion$2.lighten90,
1067
1068
  smalt: smalt.base,
1068
1069
  smaltDark75: smalt.darken75,
1069
1070
  smaltLight30: smalt.lighten30,
1070
1071
  smaltLight45: smalt.lighten45,
1071
1072
  smaltLight75: smalt.lighten75,
1072
1073
  smaltLight90: smalt.lighten90,
1073
- violet: violet$3.base,
1074
- violetDark15: violet$3.darken15,
1075
- violetDark30: violet$3.darken30,
1076
- violetDark45: violet$3.darken45,
1077
- violetDark75: violet$3.darken75,
1078
- violetLight30: violet$3.lighten30,
1079
- violetLight60: violet$3.lighten60,
1080
- violetLight75: violet$3.lighten75,
1081
- violetLight90: violet$3.lighten90,
1074
+ violet: violet$2.base,
1075
+ violetDark15: violet$2.darken15,
1076
+ violetDark30: violet$2.darken30,
1077
+ violetDark45: violet$2.darken45,
1078
+ violetDark75: violet$2.darken75,
1079
+ violetLight30: violet$2.lighten30,
1080
+ violetLight60: violet$2.lighten60,
1081
+ violetLight75: violet$2.lighten75,
1082
+ violetLight90: violet$2.lighten90,
1082
1083
  yellow: yellow$1.base,
1083
1084
  yellowDark15: yellow$1.darken15,
1084
1085
  yellowDark75: yellow$1.darken75,
@@ -1087,32 +1088,23 @@ var blue$1 = colorScales.blue,
1087
1088
  });
1088
1089
  var aliceBlue = colorScales.aliceBlue,
1089
1090
  antiFlashWhite = colorScales.antiFlashWhite,
1090
- apple$1 = colorScales.apple,
1091
- currant$1 = colorScales.currant,
1092
- darkBlue = colorScales.darkBlue,
1093
- deepSaffron = colorScales.deepSaffron,
1094
- emerald = colorScales.emerald,
1095
- gold$1 = colorScales.gold,
1091
+ apple$2 = colorScales.apple,
1092
+ deepSaffron$1 = colorScales.deepSaffron,
1093
+ emerald$1 = colorScales.emerald,
1096
1094
  grey$2 = colorScales.grey,
1097
1095
  honeydew$1 = colorScales.honeydew,
1098
1096
  linen$1 = colorScales.linen,
1099
- maasstrichtBlue = colorScales.maasstrichtBlue,
1100
- mauve$2 = colorScales.mauve,
1097
+ maasstrichtBlue$1 = colorScales.maasstrichtBlue,
1101
1098
  mellowApricot = colorScales.mellowApricot,
1102
- nightBlue = colorScales.nightBlue,
1103
- pastelRed = colorScales.pastelRed,
1104
- pineGreen = colorScales.pineGreen,
1105
- royalBlue$1 = colorScales.royalBlue,
1106
- scarletGum$1 = colorScales.scarletGum,
1099
+ pastelRed$1 = colorScales.pastelRed,
1100
+ pineGreen$1 = colorScales.pineGreen,
1107
1101
  seashell$1 = colorScales.seashell,
1108
1102
  silverChalice = colorScales.silverChalice,
1109
- sonicSilver = colorScales.sonicSilver,
1110
- ultramarineBlue = colorScales.ultramarineBlue,
1111
- vermilion = colorScales.vermilion,
1112
- violet$2 = colorScales.violet,
1113
- violet1$1 = colorScales.violet1,
1103
+ sonicSilver$1 = colorScales.sonicSilver,
1104
+ ultramarineBlue$1 = colorScales.ultramarineBlue,
1105
+ vermilion$1 = colorScales.vermilion,
1114
1106
  vodka = colorScales.vodka;
1115
- var palette$5 = {
1107
+ var palette$6 = {
1116
1108
  black: '#000000',
1117
1109
  white: '#ffffff',
1118
1110
  greyLight95: grey$2.lighten95,
@@ -1121,60 +1113,89 @@ var palette$5 = {
1121
1113
  greyLight45: grey$2.lighten45,
1122
1114
  greyLight30: grey$2.lighten30,
1123
1115
  grey: grey$2.base,
1124
- maasstrichtBlueLight90: maasstrichtBlue.lighten90,
1125
- maasstrichtBlueLight80: maasstrichtBlue.lighten80,
1126
- maasstrichtBlueLight50: maasstrichtBlue.lighten50,
1127
- maasstrichtBlueLight30: maasstrichtBlue.lighten30,
1128
- maasstrichtBlue: maasstrichtBlue.base,
1129
- pastelRed: pastelRed.base,
1130
- pastelRedLight20: pastelRed.lighten20,
1116
+ maasstrichtBlueLight90: maasstrichtBlue$1.lighten90,
1117
+ maasstrichtBlueLight80: maasstrichtBlue$1.lighten80,
1118
+ maasstrichtBlueLight50: maasstrichtBlue$1.lighten50,
1119
+ maasstrichtBlueLight30: maasstrichtBlue$1.lighten30,
1120
+ maasstrichtBlue: maasstrichtBlue$1.base,
1121
+ pastelRed: pastelRed$1.base,
1122
+ pastelRedLight20: pastelRed$1.lighten20,
1131
1123
  mellowApricot: mellowApricot.base,
1132
1124
  mellowApricotLight20: mellowApricot.lighten20,
1133
- emerald: emerald.base,
1134
- emeraldLight20: emerald.lighten20,
1135
- emeraldDark20: emerald.darken20,
1125
+ emerald: emerald$1.base,
1126
+ emeraldLight20: emerald$1.lighten20,
1127
+ emeraldDark20: emerald$1.darken20,
1136
1128
  vodka: vodka.base,
1137
1129
  vodkaLight20: vodka.lighten20,
1138
- vermilion: vermilion.base,
1139
- deepSaffron: deepSaffron.base,
1140
- deepSaffronDark20: deepSaffron.darken20,
1141
- pineGreen: pineGreen.base,
1142
- ultramarineBlue: ultramarineBlue.base,
1143
- sonicSilver: sonicSilver.base,
1130
+ vermilion: vermilion$1.base,
1131
+ deepSaffron: deepSaffron$1.base,
1132
+ deepSaffronDark20: deepSaffron$1.darken20,
1133
+ pineGreen: pineGreen$1.base,
1134
+ ultramarineBlue: ultramarineBlue$1.base,
1135
+ sonicSilver: sonicSilver$1.base,
1144
1136
  linen: linen$1.base,
1145
1137
  seashell: seashell$1.base,
1146
1138
  honeydew: honeydew$1.base,
1147
1139
  aliceBlue: aliceBlue.base,
1148
1140
  antiFlashWhite: antiFlashWhite.base,
1149
- apple: apple$1.base,
1141
+ apple: apple$2.base,
1142
+ silverChalice: silverChalice.base,
1143
+ silverChaliceLight20: silverChalice.lighten20
1144
+ };
1145
+ var currant$1 = colorScales.currant,
1146
+ sonicSilver = colorScales.sonicSilver,
1147
+ maasstrichtBlue = colorScales.maasstrichtBlue,
1148
+ nightBlue = colorScales.nightBlue,
1149
+ darkBlue = colorScales.darkBlue,
1150
+ ultramarineBlue = colorScales.ultramarineBlue,
1151
+ royalBlue$1 = colorScales.royalBlue,
1152
+ emerald = colorScales.emerald,
1153
+ pineGreen = colorScales.pineGreen,
1154
+ deepSaffron = colorScales.deepSaffron,
1155
+ gold$1 = colorScales.gold,
1156
+ apple$1 = colorScales.apple,
1157
+ pastelRed = colorScales.pastelRed,
1158
+ vermilion = colorScales.vermilion,
1159
+ mauve$2 = colorScales.mauve,
1160
+ violet1$1 = colorScales.violet1,
1161
+ violet$1 = colorScales.violet,
1162
+ scarletGum$1 = colorScales.scarletGum;
1163
+ var palette$5 = {
1150
1164
  currant: currant$1.base,
1165
+ sonicSilver: sonicSilver.base,
1166
+ maasstrichtBlue: maasstrichtBlue.base,
1151
1167
  nightBlue: nightBlue.base,
1152
1168
  darkBlue: darkBlue.base,
1169
+ ultramarineBlue: ultramarineBlue.base,
1153
1170
  royalBlue: royalBlue$1.base,
1154
1171
  royalBlueDark20: royalBlue$1.darken20,
1172
+ emeraldDark20: emerald.darken20,
1173
+ pineGreen: pineGreen.base,
1174
+ deepSaffronDark20: deepSaffron.darken20,
1155
1175
  goldDark40: gold$1.darken40,
1176
+ apple: apple$1.base,
1177
+ pastelRed: pastelRed.base,
1178
+ vermilion: vermilion.base,
1156
1179
  mauve: mauve$2.base,
1157
- violet: violet$2.base,
1158
- violetLight30: violet$2.lighten30,
1180
+ violetLight30: violet$1.lighten30,
1159
1181
  violet1: violet1$1.base,
1160
- scarletGum: scarletGum$1.base,
1161
- silverChalice: silverChalice.base,
1162
- silverChaliceLight20: silverChalice.lighten20
1182
+ violet: violet$1.base,
1183
+ scarletGum: scarletGum$1.base
1163
1184
  };
1164
- var violet$1 = colorScales.violet,
1185
+ var violet$3 = colorScales.violet,
1165
1186
  mauve$1 = colorScales.mauve;
1166
- var palette$4 = Object.assign(Object.assign({}, palette$5), {
1167
- violet: violet$1.base,
1168
- violetLight20: violet$1.lighten20,
1169
- violetLight30: violet$1.lighten30,
1170
- violetLight90: violet$1.lighten90,
1187
+ var palette$4 = Object.assign(Object.assign({}, palette$6), {
1188
+ violet: violet$3.base,
1189
+ violetLight20: violet$3.lighten20,
1190
+ violetLight30: violet$3.lighten30,
1191
+ violetLight90: violet$3.lighten90,
1171
1192
  mauve: mauve$1.base,
1172
1193
  mauveLight80: mauve$1.lighten80
1173
1194
  });
1174
1195
  var apple = colorScales.apple,
1175
1196
  currant = colorScales.currant,
1176
1197
  hitPink = colorScales.hitPink;
1177
- var palette$3 = Object.assign(Object.assign({}, palette$5), {
1198
+ var palette$3 = Object.assign(Object.assign({}, palette$6), {
1178
1199
  apple: apple.base,
1179
1200
  appleLight10: apple.lighten10,
1180
1201
  hitPink: hitPink.base,
@@ -1187,7 +1208,7 @@ var palette$3 = Object.assign(Object.assign({}, palette$5), {
1187
1208
  var scarletGum = colorScales.scarletGum,
1188
1209
  violet1 = colorScales.violet1,
1189
1210
  mauve = colorScales.mauve;
1190
- var palette$2 = Object.assign(Object.assign({}, palette$5), {
1211
+ var palette$2 = Object.assign(Object.assign({}, palette$6), {
1191
1212
  scarletGumLight20: scarletGum.lighten20,
1192
1213
  scarletGumLight30: scarletGum.lighten30,
1193
1214
  scarletGumLight50: scarletGum.lighten50,
@@ -1203,7 +1224,7 @@ var palette$2 = Object.assign(Object.assign({}, palette$5), {
1203
1224
  });
1204
1225
  var royalBlue = colorScales.royalBlue,
1205
1226
  frenchSky = colorScales.frenchSky;
1206
- var palette$1 = Object.assign(Object.assign({}, palette$5), {
1227
+ var palette$1 = Object.assign(Object.assign({}, palette$6), {
1207
1228
  royalBlue: royalBlue.base,
1208
1229
  royalBlueLight10: royalBlue.lighten10,
1209
1230
  royalBlueLight80: royalBlue.lighten80,
@@ -1214,106 +1235,104 @@ var palette$1 = Object.assign(Object.assign({}, palette$5), {
1214
1235
  frenchSkyLight80: frenchSky.lighten80
1215
1236
  });
1216
1237
  var gold$2 = colorScales.gold,
1217
- violet$4 = colorScales.violet;
1218
- var palette = Object.assign(Object.assign({}, palette$5), {
1238
+ policeBlue = colorScales.policeBlue;
1239
+ var palette = Object.assign(Object.assign({}, palette$6), {
1219
1240
  goldLight20: gold$2.lighten20,
1220
1241
  goldLight50: gold$2.lighten50,
1221
1242
  goldLight70: gold$2.lighten70,
1222
1243
  goldLight80: gold$2.lighten80,
1223
1244
  goldLight90: gold$2.lighten90,
1224
1245
  gold: gold$2.base,
1225
- violet: violet$4.base,
1226
- violetLight20: violet$4.lighten20,
1227
- violetLight30: violet$4.lighten30,
1228
- violetLight50: violet$4.lighten50,
1229
- violetLight80: violet$4.lighten80,
1230
- violetLight90: violet$4.lighten90
1246
+ policeBlue: policeBlue.base,
1247
+ policeBlueLight20: policeBlue.lighten20,
1248
+ policeBlueLight25: policeBlue.lighten25,
1249
+ policeBlueLight90: policeBlue.lighten90
1231
1250
  });
1232
1251
 
1233
1252
  var globalPalette = {
1234
1253
  // Updated 21 / Nov / 22
1235
1254
  // Surfaces
1236
- defaultGlobalSurface: palette$5.white,
1237
- onDefaultGlobalSurface: palette$5.maasstrichtBlue,
1238
- neutralGlobalSurface: palette$5.greyLight90,
1239
- mutedOnDefaultGlobalSurface: palette$5.maasstrichtBlueLight30,
1240
- inactiveOnDefaultGlobalSurface: palette$5.maasstrichtBlueLight50,
1241
- disabledOnDefaultGlobalSurface: palette$5.greyLight30,
1242
- darkGlobalSurface: palette$5.maasstrichtBlue,
1243
- onDarkGlobalSurface: palette$5.white,
1255
+ defaultGlobalSurface: palette$6.white,
1256
+ onDefaultGlobalSurface: palette$6.maasstrichtBlue,
1257
+ neutralGlobalSurface: palette$6.greyLight90,
1258
+ mutedOnDefaultGlobalSurface: palette$6.maasstrichtBlueLight30,
1259
+ inactiveOnDefaultGlobalSurface: palette$6.maasstrichtBlueLight50,
1260
+ disabledOnDefaultGlobalSurface: palette$6.greyLight30,
1261
+ darkGlobalSurface: palette$6.maasstrichtBlue,
1262
+ onDarkGlobalSurface: palette$6.white,
1244
1263
  // Outlines
1245
- primaryOutline: palette$5.maasstrichtBlue,
1246
- secondaryOutline: palette$5.greyLight75,
1247
- inactiveOutline: palette$5.maasstrichtBlueLight50,
1248
- disabledOutline: palette$5.greyLight30,
1264
+ primaryOutline: palette$6.maasstrichtBlue,
1265
+ secondaryOutline: palette$6.greyLight75,
1266
+ inactiveOutline: palette$6.maasstrichtBlueLight50,
1267
+ disabledOutline: palette$6.greyLight30,
1249
1268
  // Accents
1250
- error: palette$5.pastelRed,
1251
- mutedError: palette$5.pastelRedLight20,
1252
- errorSurface: palette$5.linen,
1253
- onErrorSurface: palette$5.vermilion,
1254
- warning: palette$5.mellowApricot,
1255
- mutedWarning: palette$5.mellowApricotLight20,
1256
- warningSurface: palette$5.seashell,
1257
- onWarningSurface: palette$5.deepSaffron,
1258
- success: palette$5.emerald,
1259
- mutedSuccess: palette$5.emeraldLight20,
1260
- successSurface: palette$5.honeydew,
1261
- onSuccessSurface: palette$5.pineGreen,
1262
- info: palette$5.vodka,
1263
- mutedInfo: palette$5.vodkaLight20,
1264
- infoSurface: palette$5.aliceBlue,
1265
- onInfoSurface: palette$5.ultramarineBlue,
1266
- archived: palette$5.silverChalice,
1267
- mutedArchived: palette$5.silverChaliceLight20,
1268
- archivedSurface: palette$5.antiFlashWhite,
1269
- onArchivedSurface: palette$5.sonicSilver
1269
+ error: palette$6.pastelRed,
1270
+ mutedError: palette$6.pastelRedLight20,
1271
+ errorSurface: palette$6.linen,
1272
+ onErrorSurface: palette$6.vermilion,
1273
+ warning: palette$6.mellowApricot,
1274
+ mutedWarning: palette$6.mellowApricotLight20,
1275
+ warningSurface: palette$6.seashell,
1276
+ onWarningSurface: palette$6.deepSaffron,
1277
+ success: palette$6.emerald,
1278
+ mutedSuccess: palette$6.emeraldLight20,
1279
+ successSurface: palette$6.honeydew,
1280
+ onSuccessSurface: palette$6.pineGreen,
1281
+ info: palette$6.vodka,
1282
+ mutedInfo: palette$6.vodkaLight20,
1283
+ infoSurface: palette$6.aliceBlue,
1284
+ onInfoSurface: palette$6.ultramarineBlue,
1285
+ archived: palette$6.silverChalice,
1286
+ mutedArchived: palette$6.silverChaliceLight20,
1287
+ archivedSurface: palette$6.antiFlashWhite,
1288
+ onArchivedSurface: palette$6.sonicSilver
1270
1289
  // End of Updated 21 / Nov / 22
1271
1290
  };
1272
1291
 
1273
1292
  var legacySystemPalette = {
1274
- globalPrimary: palette$5.maasstrichtBlue,
1275
- globalPrimaryLight: palette$5.maasstrichtBlueLight50,
1276
- globalPrimaryBackground: palette$5.maasstrichtBlueLight90,
1293
+ globalPrimary: palette$6.maasstrichtBlue,
1294
+ globalPrimaryLight: palette$6.maasstrichtBlueLight50,
1295
+ globalPrimaryBackground: palette$6.maasstrichtBlueLight90,
1277
1296
  primaryLight: palette$2.violetLight50,
1278
1297
  primaryDark: palette$2.scarletGumLight30,
1279
1298
  primaryBackground: palette$2.violetLight90,
1280
- primaryBackgroundDark: palette$5.maasstrichtBlueLight30,
1299
+ primaryBackgroundDark: palette$6.maasstrichtBlueLight30,
1281
1300
  secondaryLight: palette$2.vodka,
1282
1301
  secondaryBackground: palette$2.aliceBlue,
1283
- infoMediumLight: palette$5.vodka,
1284
- infoLight: palette$5.vodka,
1285
- infoBackground: palette$5.aliceBlue,
1286
- successLight: palette$5.emerald,
1287
- successDark: palette$5.pineGreen,
1288
- successBackground: palette$5.honeydew,
1289
- danger: palette$5.vermilion,
1290
- dangerMediumLight: palette$5.apple,
1291
- dangerLight: palette$5.pastelRed,
1292
- dangerBackground: palette$5.linen,
1293
- warningLight: palette$5.mellowApricot,
1294
- warningDark: palette$5.deepSaffron,
1295
- warningBackground: palette$5.seashell,
1296
- platformBackground: palette$5.white,
1297
- backgroundLight: palette$5.greyLight90,
1298
- backgroundDark: palette$5.maasstrichtBlue,
1299
- text: palette$5.maasstrichtBlue,
1300
- subduedText: palette$5.maasstrichtBlueLight30,
1301
- disabledText: palette$5.maasstrichtBlueLight50,
1302
- disabledLightText: palette$5.greyLight30,
1303
- invertedText: palette$5.white,
1304
- outline: palette$5.greyLight75,
1305
- archivedLight: palette$5.greyLight30,
1306
- archivedDark: palette$5.sonicSilver,
1307
- archivedBackground: palette$5.greyLight90,
1308
- black: palette$5.black,
1309
- inactiveBackground: palette$5.maasstrichtBlueLight50,
1310
- shadow: palette$5.greyLight45,
1302
+ infoMediumLight: palette$6.vodka,
1303
+ infoLight: palette$6.vodka,
1304
+ infoBackground: palette$6.aliceBlue,
1305
+ successLight: palette$6.emerald,
1306
+ successDark: palette$6.pineGreen,
1307
+ successBackground: palette$6.honeydew,
1308
+ danger: palette$6.vermilion,
1309
+ dangerMediumLight: palette$6.apple,
1310
+ dangerLight: palette$6.pastelRed,
1311
+ dangerBackground: palette$6.linen,
1312
+ warningLight: palette$6.mellowApricot,
1313
+ warningDark: palette$6.deepSaffron,
1314
+ warningBackground: palette$6.seashell,
1315
+ platformBackground: palette$6.white,
1316
+ backgroundLight: palette$6.greyLight90,
1317
+ backgroundDark: palette$6.maasstrichtBlue,
1318
+ text: palette$6.maasstrichtBlue,
1319
+ subduedText: palette$6.maasstrichtBlueLight30,
1320
+ disabledText: palette$6.maasstrichtBlueLight50,
1321
+ disabledLightText: palette$6.greyLight30,
1322
+ invertedText: palette$6.white,
1323
+ outline: palette$6.greyLight75,
1324
+ archivedLight: palette$6.greyLight30,
1325
+ archivedDark: palette$6.sonicSilver,
1326
+ archivedBackground: palette$6.greyLight90,
1327
+ black: palette$6.black,
1328
+ inactiveBackground: palette$6.maasstrichtBlueLight50,
1329
+ shadow: palette$6.greyLight45,
1311
1330
  // Updated 14 / Nov / 22
1312
- mutedGlobalPrimary: palette$5.maasstrichtBlueLight30,
1313
- onGlobalPrimary: palette$5.white,
1314
- globalSecondary: palette$5.maasstrichtBlueLight30,
1315
- globalPrimaryOutline: palette$5.maasstrichtBlue,
1316
- globalSecondaryOutline: palette$5.greyLight75
1331
+ mutedGlobalPrimary: palette$6.maasstrichtBlueLight30,
1332
+ onGlobalPrimary: palette$6.white,
1333
+ globalSecondary: palette$6.maasstrichtBlueLight30,
1334
+ globalPrimaryOutline: palette$6.maasstrichtBlue,
1335
+ globalSecondaryOutline: palette$6.greyLight75
1317
1336
  };
1318
1337
 
1319
1338
  var swagBrandSystemPallete = {
@@ -1337,13 +1356,13 @@ var swagLegacyBrandSystemPalette = {
1337
1356
  var swagSystemPalette = _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({}, legacySystemPalette), swagLegacyBrandSystemPalette), globalPalette), swagBrandSystemPallete);
1338
1357
 
1339
1358
  var workBrandSystemPallete = {
1340
- primary: palette.violet,
1359
+ primary: palette.policeBlue,
1341
1360
  onPrimary: palette.white,
1342
- secondary: palette.violetLight30,
1361
+ secondary: palette.policeBlueLight25,
1343
1362
  onSecondary: palette.white,
1344
1363
  defaultSurface: palette.white,
1345
- highlightedSurface: palette.violetLight90,
1346
- pressedSurface: palette.violetLight20,
1364
+ highlightedSurface: palette.policeBlueLight90,
1365
+ pressedSurface: palette.policeBlueLight20,
1347
1366
  decorativePrimary: palette.gold,
1348
1367
  decorativePrimarySurface: palette.goldLight80
1349
1368
  };
@@ -1611,8 +1630,7 @@ var getAvatarTheme = function getAvatarTheme(theme) {
1611
1630
  danger: theme.colors.error,
1612
1631
  success: theme.colors.success,
1613
1632
  warning: theme.colors.warning,
1614
- text: theme.colors.invertedText,
1615
- visualisation: [palette$5.currant, palette$5.sonicSilver, palette$5.maasstrichtBlue, palette$5.nightBlue, palette$5.darkBlue, palette$5.ultramarineBlue, palette$5.royalBlue, palette$5.royalBlueDark20, palette$5.emeraldDark20, palette$5.pineGreen, palette$5.deepSaffronDark20, palette$5.goldDark40, palette$5.apple, palette$5.pastelRed, palette$5.vermilion, palette$5.mauve, palette$5.violetLight30, palette$5.violet1, palette$5.violet, palette$5.scarletGum]
1633
+ text: theme.colors.invertedText
1616
1634
  };
1617
1635
  var sizes = {
1618
1636
  small: theme.sizes.xlarge,
@@ -2495,7 +2513,8 @@ var getTagTheme = function getTagTheme(theme) {
2495
2513
  danger: theme.colors.onErrorSurface,
2496
2514
  dangerBackground: theme.colors.errorSurface,
2497
2515
  archived: theme.colors.onArchivedSurface,
2498
- archivedBackground: theme.colors.archivedSurface
2516
+ archivedBackground: theme.colors.archivedSurface,
2517
+ text: theme.colors.onDefaultGlobalSurface
2499
2518
  };
2500
2519
  var fonts = {
2501
2520
  "default": theme.fonts.neutral.semiBold
@@ -2658,7 +2677,7 @@ var getToastTheme = function getToastTheme(theme) {
2658
2677
  var getToolbarTheme = function getToolbarTheme(theme) {
2659
2678
  var colors = {
2660
2679
  background: theme.colors.defaultGlobalSurface,
2661
- border: theme.colors.primaryOutline,
2680
+ border: theme.colors.secondaryOutline,
2662
2681
  primary: theme.colors.primary,
2663
2682
  secondary: theme.colors.secondary,
2664
2683
  info: theme.colors.info,
@@ -5659,6 +5678,20 @@ var usePrevious = function usePrevious(value) {
5659
5678
  }, [value]);
5660
5679
  return ref.current;
5661
5680
  };
5681
+ function usePropsOrInternalState(initialState, state, setState) {
5682
+ var _React$useState = React__default["default"].useState(initialState),
5683
+ _React$useState2 = _slicedToArray(_React$useState, 2),
5684
+ internalState = _React$useState2[0],
5685
+ setInternalState = _React$useState2[1];
5686
+ return [state || internalState, setState || setInternalState];
5687
+ }
5688
+ var useDeprecation = function useDeprecation(message) {
5689
+ var cond = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
5690
+ React.useEffect(function () {
5691
+ // eslint-disable-next-line no-console
5692
+ console.warn(message);
5693
+ }, [message, cond]);
5694
+ };
5662
5695
 
5663
5696
  var Collapse = function Collapse(_ref) {
5664
5697
  var _ref$open = _ref.open,
@@ -6330,14 +6363,6 @@ var AccordionItem = function AccordionItem(_ref) {
6330
6363
  }, content));
6331
6364
  };
6332
6365
 
6333
- function usePropsOrInternalState(initialState, state, setState) {
6334
- var _React$useState = React__default["default"].useState(initialState),
6335
- _React$useState2 = _slicedToArray(_React$useState, 2),
6336
- internalState = _React$useState2[0],
6337
- setInternalState = _React$useState2[1];
6338
- return [state || internalState, setState || setInternalState];
6339
- }
6340
-
6341
6366
  var _excluded$h = ["key"];
6342
6367
  var Accordion = function Accordion(_ref) {
6343
6368
  var items = _ref.items,
@@ -6660,11 +6685,9 @@ var shuffleArray = function shuffleArray(array) {
6660
6685
  * Hook that returns a memoized and shuffled array of visualisation colors for Avatar.
6661
6686
  */
6662
6687
  var useAvatarColors = function useAvatarColors() {
6663
- var theme = useTheme();
6664
- var visualisationColors = theme.__hd__.avatar.colors.visualisation;
6665
6688
  var shuffledColors = React.useMemo(function () {
6666
- return shuffleArray(visualisationColors);
6667
- }, [visualisationColors]);
6689
+ return shuffleArray(Object.values(palette$5));
6690
+ }, []);
6668
6691
  return shuffledColors;
6669
6692
  };
6670
6693
 
@@ -10534,11 +10557,12 @@ var LeftDataCard = index$a(reactNative.View)(function (_ref2) {
10534
10557
 
10535
10558
  var _excluded$8 = ["variant", "intent", "children"];
10536
10559
  var Card = function Card(_ref) {
10537
- var _ref$variant = _ref.variant,
10538
- variant = _ref$variant === void 0 ? 'basic' : _ref$variant,
10560
+ var _variant = _ref.variant,
10539
10561
  intent = _ref.intent,
10540
10562
  children = _ref.children,
10541
10563
  nativeProps = _objectWithoutProperties(_ref, _excluded$8);
10564
+ var variant = _variant === undefined ? 'basic' : _variant;
10565
+ useDeprecation("Card's variant prop is deprecated and will be removed in the next major release.\nPlease remove it or use Card.Data instead.", _variant !== undefined);
10542
10566
  return /*#__PURE__*/React__default["default"].createElement(StyledCard, _extends$1({}, nativeProps, {
10543
10567
  themeVariant: variant,
10544
10568
  themeIntent: intent
@@ -13037,6 +13061,7 @@ function MultiSelect(_ref) {
13037
13061
  inputProps = _ref.inputProps,
13038
13062
  onConfirm = _ref.onConfirm,
13039
13063
  onDimiss = _ref.onDimiss,
13064
+ onDismiss = _ref.onDismiss,
13040
13065
  onEndReached = _ref.onEndReached,
13041
13066
  onQueryChange = _ref.onQueryChange,
13042
13067
  options = _ref.options,
@@ -13048,6 +13073,7 @@ function MultiSelect(_ref) {
13048
13073
  editable = _ref$editable === void 0 ? true : _ref$editable,
13049
13074
  _ref$disabled = _ref.disabled,
13050
13075
  disabled = _ref$disabled === void 0 ? false : _ref$disabled,
13076
+ required = _ref.required,
13051
13077
  numberOfLines = _ref.numberOfLines,
13052
13078
  style = _ref.style,
13053
13079
  testID = _ref.testID,
@@ -13082,7 +13108,9 @@ function MultiSelect(_ref) {
13082
13108
  }
13083
13109
  }, /*#__PURE__*/React__default["default"].createElement(reactNative.View, {
13084
13110
  pointerEvents: "none"
13085
- }, /*#__PURE__*/React__default["default"].createElement(TextInput, _extends$1({}, inputProps, {
13111
+ }, /*#__PURE__*/React__default["default"].createElement(TextInput, _extends$1({
13112
+ numberOfLines: numberOfLines
13113
+ }, inputProps, {
13086
13114
  label: label,
13087
13115
  value: displayedValue,
13088
13116
  suffix: "arrow-down",
@@ -13090,7 +13118,7 @@ function MultiSelect(_ref) {
13090
13118
  error: error,
13091
13119
  editable: editable,
13092
13120
  disabled: disabled,
13093
- numberOfLines: numberOfLines,
13121
+ required: required,
13094
13122
  pointerEvents: "none",
13095
13123
  style: style,
13096
13124
  testID: testID,
@@ -13102,7 +13130,7 @@ function MultiSelect(_ref) {
13102
13130
  onRequestClose: function onRequestClose() {
13103
13131
  return setOpen(false);
13104
13132
  },
13105
- onDismiss: onDimiss,
13133
+ onDismiss: onDismiss || onDimiss,
13106
13134
  header: label,
13107
13135
  style: {
13108
13136
  paddingBottom: isKeyboardVisible ? keyboardHeight : 0
@@ -13215,6 +13243,7 @@ var SingleSelect = function SingleSelect(_ref) {
13215
13243
  inputProps = _ref.inputProps,
13216
13244
  onConfirm = _ref.onConfirm,
13217
13245
  onDimiss = _ref.onDimiss,
13246
+ onDismiss = _ref.onDismiss,
13218
13247
  onEndReached = _ref.onEndReached,
13219
13248
  onQueryChange = _ref.onQueryChange,
13220
13249
  options = _ref.options,
@@ -13226,6 +13255,7 @@ var SingleSelect = function SingleSelect(_ref) {
13226
13255
  editable = _ref$editable === void 0 ? true : _ref$editable,
13227
13256
  _ref$disabled = _ref.disabled,
13228
13257
  disabled = _ref$disabled === void 0 ? false : _ref$disabled,
13258
+ required = _ref.required,
13229
13259
  numberOfLines = _ref.numberOfLines,
13230
13260
  style = _ref.style,
13231
13261
  testID = _ref.testID,
@@ -13251,7 +13281,9 @@ var SingleSelect = function SingleSelect(_ref) {
13251
13281
  }
13252
13282
  }, /*#__PURE__*/React__default["default"].createElement(reactNative.View, {
13253
13283
  pointerEvents: "none"
13254
- }, /*#__PURE__*/React__default["default"].createElement(TextInput, _extends$1({}, inputProps, {
13284
+ }, /*#__PURE__*/React__default["default"].createElement(TextInput, _extends$1({
13285
+ numberOfLines: numberOfLines
13286
+ }, inputProps, {
13255
13287
  label: label,
13256
13288
  value: displayedValue,
13257
13289
  suffix: "arrow-down",
@@ -13259,7 +13291,7 @@ var SingleSelect = function SingleSelect(_ref) {
13259
13291
  error: error,
13260
13292
  editable: editable,
13261
13293
  disabled: disabled,
13262
- numberOfLines: numberOfLines,
13294
+ required: required,
13263
13295
  pointerEvents: "none",
13264
13296
  style: style,
13265
13297
  testID: testID,
@@ -13271,7 +13303,7 @@ var SingleSelect = function SingleSelect(_ref) {
13271
13303
  onRequestClose: function onRequestClose() {
13272
13304
  return setOpen(false);
13273
13305
  },
13274
- onDismiss: onDimiss,
13306
+ onDismiss: onDismiss || onDimiss,
13275
13307
  header: label,
13276
13308
  style: {
13277
13309
  paddingBottom: isKeyboardVisible ? keyboardHeight : 0
@@ -13681,6 +13713,8 @@ var ScrollableTab = function ScrollableTab(_ref2) {
13681
13713
  lazy = _ref2$lazy === void 0 ? false : _ref2$lazy,
13682
13714
  _ref2$lazyPreloadDist = _ref2.lazyPreloadDistance,
13683
13715
  lazyPreloadDistance = _ref2$lazyPreloadDist === void 0 ? 1 : _ref2$lazyPreloadDist,
13716
+ _ref2$swipeEnabled = _ref2.swipeEnabled,
13717
+ swipeEnabled = _ref2$swipeEnabled === void 0 ? true : _ref2$swipeEnabled,
13684
13718
  componentTestID = _ref2.testID;
13685
13719
  var flatListRef = React__default["default"].useRef(null);
13686
13720
  var pagerViewRef = React__default["default"].useRef(null);
@@ -13793,7 +13827,8 @@ var ScrollableTab = function ScrollableTab(_ref2) {
13793
13827
  if (selectedItem) {
13794
13828
  onTabPress(selectedItem.key);
13795
13829
  }
13796
- }
13830
+ },
13831
+ scrollEnabled: swipeEnabled
13797
13832
  }, tabs.map(function (tab, index) {
13798
13833
  var key = tab.key,
13799
13834
  component = tab.component,
@@ -13838,6 +13873,8 @@ var Tabs = function Tabs(_ref2) {
13838
13873
  lazy = _ref2$lazy === void 0 ? false : _ref2$lazy,
13839
13874
  _ref2$lazyPreloadDist = _ref2.lazyPreloadDistance,
13840
13875
  lazyPreloadDistance = _ref2$lazyPreloadDist === void 0 ? 1 : _ref2$lazyPreloadDist,
13876
+ _ref2$swipeEnabled = _ref2.swipeEnabled,
13877
+ swipeEnabled = _ref2$swipeEnabled === void 0 ? true : _ref2$swipeEnabled,
13841
13878
  componentTestID = _ref2.testID;
13842
13879
  var theme = useTheme$1();
13843
13880
  var insets = reactNativeSafeAreaContext.useSafeAreaInsets();
@@ -13918,7 +13955,8 @@ var Tabs = function Tabs(_ref2) {
13918
13955
  }
13919
13956
  }], {
13920
13957
  useNativeDriver: true
13921
- })
13958
+ }),
13959
+ scrollEnabled: swipeEnabled
13922
13960
  }, tabs.map(function (tab, index) {
13923
13961
  var key = tab.key,
13924
13962
  component = tab.component,
@@ -13939,34 +13977,57 @@ var index$2 = Object.assign(Tabs, {
13939
13977
  Scroll: ScrollableTab
13940
13978
  });
13941
13979
 
13980
+ var getFilledStyles = function getFilledStyles(themeIntent, theme) {
13981
+ return {
13982
+ textColor: theme.__hd__.tag.colors.text,
13983
+ borderColor: theme.__hd__.tag.colors["".concat(themeIntent, "Background")],
13984
+ backgroundColor: theme.__hd__.tag.colors["".concat(themeIntent, "Background")]
13985
+ };
13986
+ };
13987
+ var getOutlinedStyles = function getOutlinedStyles(themeIntent, theme) {
13988
+ return {
13989
+ textColor: theme.__hd__.tag.colors[themeIntent],
13990
+ borderColor: theme.__hd__.tag.colors[themeIntent],
13991
+ backgroundColor: theme.__hd__.tag.colors["".concat(themeIntent, "Background")]
13992
+ };
13993
+ };
13942
13994
  var StyledView = index$a(reactNative.View)(function (_ref) {
13943
13995
  var themeIntent = _ref.themeIntent,
13996
+ themeVariant = _ref.themeVariant,
13944
13997
  theme = _ref.theme;
13998
+ var _ref2 = themeVariant === 'filled' ? getFilledStyles(themeIntent, theme) : getOutlinedStyles(themeIntent, theme),
13999
+ borderColor = _ref2.borderColor,
14000
+ backgroundColor = _ref2.backgroundColor;
13945
14001
  return {
13946
14002
  borderWidth: theme.__hd__.tag.borderWidths["default"],
13947
14003
  borderRadius: theme.__hd__.tag.radii["default"],
13948
14004
  paddingVertical: theme.__hd__.tag.space.verticalPadding,
13949
14005
  paddingHorizontal: theme.__hd__.tag.space.horizontalPadding,
13950
- borderColor: theme.__hd__.tag.colors[themeIntent],
13951
- backgroundColor: theme.__hd__.tag.colors["".concat(themeIntent, "Background")]
14006
+ borderColor: borderColor,
14007
+ backgroundColor: backgroundColor
13952
14008
  };
13953
14009
  });
13954
- var StyledText = index$a(reactNative.Text)(function (_ref2) {
13955
- var themeIntent = _ref2.themeIntent,
13956
- theme = _ref2.theme;
14010
+ var StyledText = index$a(reactNative.Text)(function (_ref3) {
14011
+ var themeIntent = _ref3.themeIntent,
14012
+ themeVariant = _ref3.themeVariant,
14013
+ theme = _ref3.theme;
14014
+ var _ref4 = themeVariant === 'filled' ? getFilledStyles(themeIntent, theme) : getOutlinedStyles(themeIntent, theme),
14015
+ textColor = _ref4.textColor;
13957
14016
  return {
13958
14017
  fontFamily: theme.__hd__.tag.fonts["default"],
13959
14018
  fontSize: theme.__hd__.tag.fontSizes["default"],
13960
- color: theme.__hd__.tag.colors[themeIntent],
14019
+ color: textColor,
13961
14020
  includeFontPadding: false,
13962
14021
  textAlignVertical: 'center',
13963
14022
  textAlign: 'center'
13964
14023
  };
13965
14024
  });
13966
14025
 
13967
- var _excluded = ["content", "intent", "style", "testID"];
14026
+ var _excluded = ["content", "variant", "intent", "style", "testID"];
13968
14027
  var Tag = function Tag(_ref) {
13969
14028
  var content = _ref.content,
14029
+ _ref$variant = _ref.variant,
14030
+ variant = _ref$variant === void 0 ? 'outlined' : _ref$variant,
13970
14031
  _ref$intent = _ref.intent,
13971
14032
  intent = _ref$intent === void 0 ? 'primary' : _ref$intent,
13972
14033
  style = _ref.style,
@@ -13974,11 +14035,13 @@ var Tag = function Tag(_ref) {
13974
14035
  nativeProps = _objectWithoutProperties(_ref, _excluded);
13975
14036
  return /*#__PURE__*/React__default["default"].createElement(StyledView, _extends$1({}, nativeProps, {
13976
14037
  themeIntent: intent,
14038
+ themeVariant: variant,
13977
14039
  style: style,
13978
14040
  testID: testID
13979
- }), /*#__PURE__*/React__default["default"].createElement(StyledText, {
13980
- themeIntent: intent
13981
- }, content));
14041
+ }), typeof content === 'string' ? /*#__PURE__*/React__default["default"].createElement(StyledText, {
14042
+ themeIntent: intent,
14043
+ themeVariant: variant
14044
+ }, content) : content);
13982
14045
  };
13983
14046
 
13984
14047
  var TimePickerAndroid = function TimePickerAndroid(_ref) {