@razorpay/blade 8.7.0 → 8.8.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 (27) hide show
  1. package/build/components/index.d.ts +2235 -260
  2. package/build/components/index.native.d.ts +1386 -259
  3. package/build/components/index.native.js +19 -13
  4. package/build/components/index.native.js.map +1 -1
  5. package/build/components/index.web.js +4399 -1603
  6. package/build/components/index.web.js.map +1 -1
  7. package/build/css/bankingThemeDarkDesktop.css +2 -2
  8. package/build/css/bankingThemeDarkMobile.css +2 -2
  9. package/build/css/bankingThemeLightDesktop.css +33 -33
  10. package/build/css/bankingThemeLightMobile.css +33 -33
  11. package/build/css/paymentThemeDarkDesktop.css +2 -2
  12. package/build/css/paymentThemeDarkMobile.css +2 -2
  13. package/build/css/paymentThemeLightDesktop.css +33 -33
  14. package/build/css/paymentThemeLightMobile.css +33 -33
  15. package/build/tokens/index.d.ts +11 -4
  16. package/build/tokens/index.native.d.ts +11 -4
  17. package/build/tokens/index.native.js +5 -5
  18. package/build/tokens/index.native.js.map +1 -1
  19. package/build/tokens/index.web.js +92 -77
  20. package/build/tokens/index.web.js.map +1 -1
  21. package/build/utils/index.d.ts +10 -0
  22. package/build/utils/index.native.d.ts +10 -0
  23. package/build/utils/index.native.js +1 -1
  24. package/build/utils/index.native.js.map +1 -1
  25. package/build/utils/index.web.js +10 -0
  26. package/build/utils/index.web.js.map +1 -1
  27. package/package.json +2 -1
package/build/tokens/index.web.js CHANGED
@@ -34,10 +34,10 @@ var opacity = {
34
34
  1: 0.09,
35
35
  2: 0.18,
36
36
  3: 0.32,
37
- 4: 1.0,
38
- 5: 1.0,
39
- 6: 1.0,
40
- 7: 1.0,
37
+ 4: 0.48,
38
+ 5: 0.56,
39
+ 6: 0.64,
40
+ 7: 0.72,
41
41
  8: 1.0,
42
42
  9: 1.0
43
43
  };
@@ -187,7 +187,8 @@ var colors$2 = {
187
187
  a200: "hsla(216, 15%, 54%, ".concat(opacity[3], ")"),
188
188
  a300: "hsla(214, 21%, 94%, ".concat(opacity[1], ")"),
189
189
  a400: "hsla(214, 21%, 94%, ".concat(opacity[2], ")"),
190
- a500: "hsla(214, 21%, 94%, ".concat(opacity[3], ")")
190
+ a500: "hsla(214, 21%, 94%, ".concat(opacity[3], ")"),
191
+ a1100: "hsla(0, 0, 0, ".concat(opacity[0], ")")
191
192
  },
192
193
  blueGrayDark: {
193
194
  0: "hsla(0, 0%, 99%, ".concat(opacity[9], ")"),
@@ -211,7 +212,8 @@ var colors$2 = {
211
212
  a200: "hsla(220, 11%, 84%, ".concat(opacity[3], ")"),
212
213
  a300: "hsla(217, 11%, 76%, ".concat(opacity[1], ")"),
213
214
  a400: "hsla(217, 11%, 76%, ".concat(opacity[2], ")"),
214
- a500: "hsla(217, 11%, 76%, ".concat(opacity[3], ")")
215
+ a500: "hsla(217, 11%, 76%, ".concat(opacity[3], ")"),
216
+ a1100: "hsla(0, 0, 0, ".concat(opacity[0], ")")
215
217
  },
216
218
  navyGrayLight: {
217
219
  0: "hsla(0, 0%, 100%, ".concat(opacity[9], ")"),
@@ -235,7 +237,8 @@ var colors$2 = {
235
237
  a200: "hsla(226, 15%, 54%, ".concat(opacity[3], ")"),
236
238
  a300: "hsla(223, 21%, 94%, ".concat(opacity[1], ")"),
237
239
  a400: "hsla(223, 21%, 94%, ".concat(opacity[2], ")"),
238
- a500: "hsla(223, 21%, 94%, ".concat(opacity[3], ")")
240
+ a500: "hsla(223, 21%, 94%, ".concat(opacity[3], ")"),
241
+ a1100: "hsla(0, 0, 0, ".concat(opacity[0], ")")
239
242
  },
240
243
  navyGrayDark: {
241
244
  0: "hsla(0, 0%, 99%, ".concat(opacity[9], ")"),
@@ -259,7 +262,8 @@ var colors$2 = {
259
262
  a200: "hsla(233, 11%, 84%, ".concat(opacity[3], ")"),
260
263
  a300: "hsla(231, 11%, 76%, ".concat(opacity[1], ")"),
261
264
  a400: "hsla(231, 11%, 76%, ".concat(opacity[2], ")"),
262
- a500: "hsla(231, 11%, 76%, ".concat(opacity[3], ")")
265
+ a500: "hsla(231, 11%, 76%, ".concat(opacity[3], ")"),
266
+ a1100: "hsla(0, 0, 0, ".concat(opacity[0], ")")
263
267
  },
264
268
  ashGrayLight: {
265
269
  0: "hsla(0, 0%, 100%, ".concat(opacity[9], ")"),
@@ -283,7 +287,8 @@ var colors$2 = {
283
287
  a200: "hsla(214, 15%, 18%, ".concat(opacity[3], ")"),
284
288
  a300: "hsla(210, 6%, 94%, ".concat(opacity[1], ")"),
285
289
  a400: "hsla(210, 6%, 94%, ".concat(opacity[2], ")"),
286
- a500: "hsla(210, 6%, 94%, ".concat(opacity[3], ")")
290
+ a500: "hsla(210, 6%, 94%, ".concat(opacity[3], ")"),
291
+ a1100: "hsla(214, 15%, 18%, ".concat(opacity[6], ")")
287
292
  },
288
293
  ashGrayDark: {
289
294
  0: "hsla(0, 0%, 99%, ".concat(opacity[9], ")"),
@@ -307,7 +312,8 @@ var colors$2 = {
307
312
  a200: "hsla(240, 1%, 84%, ".concat(opacity[3], ")"),
308
313
  a300: "hsla(228, 4%, 76%, ".concat(opacity[1], ")"),
309
314
  a400: "hsla(228, 4%, 76%, ".concat(opacity[2], ")"),
310
- a500: "hsla(228, 4%, 76%, ".concat(opacity[3], ")")
315
+ a500: "hsla(228, 4%, 76%, ".concat(opacity[3], ")"),
316
+ a1100: "hsla(231, 11%, 12%, ".concat(opacity[7], ")")
311
317
  }
312
318
  }
313
319
  };
@@ -4828,8 +4834,17 @@ var size = {
4828
4834
  /** 300 px */
4829
4835
  300: 300,
4830
4836
 
4837
+ /** 400 px */
4838
+ 400: 400,
4839
+
4831
4840
  /** 584 px */
4832
- 584: 584
4841
+ 584: 584,
4842
+
4843
+ /** 760 px */
4844
+ 760: 760,
4845
+
4846
+ /** 1024 px */
4847
+ 1024: 1024
4833
4848
  };
4834
4849
 
4835
4850
  var elevation = {
@@ -4925,15 +4940,15 @@ var colors$1 = {
4925
4940
  }
4926
4941
  },
4927
4942
  overlay: {
4928
- background: colors$2.neutral.blueGrayLight.a200
4943
+ background: colors$2.neutral.ashGrayLight.a1100
4929
4944
  },
4930
4945
  brand: {
4931
4946
  primary: {
4932
4947
  300: colors$2.chromatic.azure.a50,
4933
4948
  400: colors$2.chromatic.azure.a100,
4934
- 500: colors$2.chromatic.azure[500],
4935
- 600: colors$2.chromatic.azure[600],
4936
- 700: colors$2.chromatic.azure[700],
4949
+ 500: colors$2.chromatic.azure[600],
4950
+ 600: colors$2.chromatic.azure[700],
4951
+ 700: colors$2.chromatic.azure[800],
4937
4952
  800: colors$2.chromatic.azure[950]
4938
4953
  },
4939
4954
  gray: {
@@ -5787,10 +5802,10 @@ var colors$1 = {
5787
5802
  action: {
5788
5803
  background: {
5789
5804
  primary: {
5790
- "default": colors$2.chromatic.azure[500],
5791
- hover: colors$2.chromatic.azure[600],
5792
- focus: colors$2.chromatic.azure[700],
5793
- active: colors$2.chromatic.azure[800],
5805
+ "default": colors$2.chromatic.azure[600],
5806
+ hover: colors$2.chromatic.azure[700],
5807
+ focus: colors$2.chromatic.azure[800],
5808
+ active: colors$2.chromatic.azure[900],
5794
5809
  disabled: colors$2.neutral.blueGrayLight[300]
5795
5810
  },
5796
5811
  secondary: {
@@ -5810,17 +5825,17 @@ var colors$1 = {
5810
5825
  },
5811
5826
  border: {
5812
5827
  primary: {
5813
- "default": colors$2.chromatic.azure[500],
5814
- hover: colors$2.chromatic.azure[600],
5815
- focus: colors$2.chromatic.azure[700],
5816
- active: colors$2.chromatic.azure[800],
5828
+ "default": colors$2.chromatic.azure[600],
5829
+ hover: colors$2.chromatic.azure[700],
5830
+ focus: colors$2.chromatic.azure[800],
5831
+ active: colors$2.chromatic.azure[900],
5817
5832
  disabled: colors$2.neutral.blueGrayLight[300]
5818
5833
  },
5819
5834
  secondary: {
5820
- "default": colors$2.chromatic.azure[500],
5821
- hover: colors$2.chromatic.azure[500],
5822
- focus: colors$2.chromatic.azure[500],
5823
- active: colors$2.chromatic.azure[500],
5835
+ "default": colors$2.chromatic.azure[600],
5836
+ hover: colors$2.chromatic.azure[600],
5837
+ focus: colors$2.chromatic.azure[600],
5838
+ active: colors$2.chromatic.azure[600],
5824
5839
  disabled: colors$2.neutral.blueGrayLight[400]
5825
5840
  },
5826
5841
  tertiary: {
@@ -5840,10 +5855,10 @@ var colors$1 = {
5840
5855
  disabled: colors$2.neutral.blueGrayLight[600]
5841
5856
  },
5842
5857
  secondary: {
5843
- "default": colors$2.chromatic.azure[500],
5844
- hover: colors$2.chromatic.azure[500],
5845
- focus: colors$2.chromatic.azure[500],
5846
- active: colors$2.chromatic.azure[500],
5858
+ "default": colors$2.chromatic.azure[600],
5859
+ hover: colors$2.chromatic.azure[600],
5860
+ focus: colors$2.chromatic.azure[600],
5861
+ active: colors$2.chromatic.azure[600],
5847
5862
  disabled: colors$2.neutral.blueGrayLight[400]
5848
5863
  },
5849
5864
  tertiary: {
@@ -5854,10 +5869,10 @@ var colors$1 = {
5854
5869
  disabled: colors$2.neutral.blueGrayLight[400]
5855
5870
  },
5856
5871
  link: {
5857
- "default": colors$2.chromatic.azure[500],
5858
- hover: colors$2.chromatic.azure[600],
5859
- focus: colors$2.chromatic.azure[700],
5860
- active: colors$2.chromatic.azure[700],
5872
+ "default": colors$2.chromatic.azure[600],
5873
+ hover: colors$2.chromatic.azure[700],
5874
+ focus: colors$2.chromatic.azure[800],
5875
+ active: colors$2.chromatic.azure[800],
5861
5876
  disabled: colors$2.neutral.blueGrayLight[400],
5862
5877
  visited: colors$2.chromatic.orchid[400]
5863
5878
  }
@@ -5871,10 +5886,10 @@ var colors$1 = {
5871
5886
  disabled: colors$2.neutral.blueGrayLight[600]
5872
5887
  },
5873
5888
  secondary: {
5874
- "default": colors$2.chromatic.azure[500],
5875
- hover: colors$2.chromatic.azure[500],
5876
- focus: colors$2.chromatic.azure[500],
5877
- active: colors$2.chromatic.azure[500],
5889
+ "default": colors$2.chromatic.azure[600],
5890
+ hover: colors$2.chromatic.azure[600],
5891
+ focus: colors$2.chromatic.azure[600],
5892
+ active: colors$2.chromatic.azure[600],
5878
5893
  disabled: colors$2.neutral.blueGrayLight[400]
5879
5894
  },
5880
5895
  tertiary: {
@@ -5885,10 +5900,10 @@ var colors$1 = {
5885
5900
  disabled: colors$2.neutral.blueGrayLight[400]
5886
5901
  },
5887
5902
  link: {
5888
- "default": colors$2.chromatic.azure[500],
5889
- hover: colors$2.chromatic.azure[600],
5890
- focus: colors$2.chromatic.azure[700],
5891
- active: colors$2.chromatic.azure[700],
5903
+ "default": colors$2.chromatic.azure[600],
5904
+ hover: colors$2.chromatic.azure[700],
5905
+ focus: colors$2.chromatic.azure[800],
5906
+ active: colors$2.chromatic.azure[800],
5892
5907
  disabled: colors$2.neutral.blueGrayLight[400],
5893
5908
  visited: colors$2.chromatic.orchid[400]
5894
5909
  }
@@ -5995,7 +6010,7 @@ var colors$1 = {
5995
6010
  }
5996
6011
  },
5997
6012
  overlay: {
5998
- background: colors$2.neutral.blueGrayDark.a400
6013
+ background: colors$2.neutral.ashGrayDark.a1100
5999
6014
  },
6000
6015
  brand: {
6001
6016
  primary: {
@@ -7078,15 +7093,15 @@ var colors = {
7078
7093
  }
7079
7094
  },
7080
7095
  overlay: {
7081
- background: colors$2.neutral.navyGrayLight.a200
7096
+ background: colors$2.neutral.ashGrayLight.a1100
7082
7097
  },
7083
7098
  brand: {
7084
7099
  primary: {
7085
7100
  300: colors$2.chromatic.azure.a50,
7086
7101
  400: colors$2.chromatic.azure.a100,
7087
- 500: colors$2.chromatic.azure[500],
7088
- 600: colors$2.chromatic.azure[600],
7089
- 700: colors$2.chromatic.azure[700],
7102
+ 500: colors$2.chromatic.azure[600],
7103
+ 600: colors$2.chromatic.azure[700],
7104
+ 700: colors$2.chromatic.azure[800],
7090
7105
  800: colors$2.chromatic.azure[950]
7091
7106
  },
7092
7107
  gray: {
@@ -7940,10 +7955,10 @@ var colors = {
7940
7955
  action: {
7941
7956
  background: {
7942
7957
  primary: {
7943
- "default": colors$2.chromatic.azure[500],
7944
- hover: colors$2.chromatic.azure[600],
7945
- focus: colors$2.chromatic.azure[700],
7946
- active: colors$2.chromatic.azure[800],
7958
+ "default": colors$2.chromatic.azure[600],
7959
+ hover: colors$2.chromatic.azure[700],
7960
+ focus: colors$2.chromatic.azure[800],
7961
+ active: colors$2.chromatic.azure[900],
7947
7962
  disabled: colors$2.neutral.navyGrayLight[300]
7948
7963
  },
7949
7964
  secondary: {
@@ -7963,17 +7978,17 @@ var colors = {
7963
7978
  },
7964
7979
  border: {
7965
7980
  primary: {
7966
- "default": colors$2.chromatic.azure[500],
7967
- hover: colors$2.chromatic.azure[600],
7968
- focus: colors$2.chromatic.azure[700],
7969
- active: colors$2.chromatic.azure[800],
7981
+ "default": colors$2.chromatic.azure[600],
7982
+ hover: colors$2.chromatic.azure[700],
7983
+ focus: colors$2.chromatic.azure[800],
7984
+ active: colors$2.chromatic.azure[900],
7970
7985
  disabled: colors$2.neutral.navyGrayLight[300]
7971
7986
  },
7972
7987
  secondary: {
7973
- "default": colors$2.chromatic.azure[500],
7974
- hover: colors$2.chromatic.azure[500],
7975
- focus: colors$2.chromatic.azure[500],
7976
- active: colors$2.chromatic.azure[500],
7988
+ "default": colors$2.chromatic.azure[600],
7989
+ hover: colors$2.chromatic.azure[600],
7990
+ focus: colors$2.chromatic.azure[600],
7991
+ active: colors$2.chromatic.azure[600],
7977
7992
  disabled: colors$2.neutral.navyGrayLight[400]
7978
7993
  },
7979
7994
  tertiary: {
@@ -7993,10 +8008,10 @@ var colors = {
7993
8008
  disabled: colors$2.neutral.navyGrayLight[600]
7994
8009
  },
7995
8010
  secondary: {
7996
- "default": colors$2.chromatic.azure[500],
7997
- hover: colors$2.chromatic.azure[500],
7998
- focus: colors$2.chromatic.azure[500],
7999
- active: colors$2.chromatic.azure[500],
8011
+ "default": colors$2.chromatic.azure[600],
8012
+ hover: colors$2.chromatic.azure[600],
8013
+ focus: colors$2.chromatic.azure[600],
8014
+ active: colors$2.chromatic.azure[600],
8000
8015
  disabled: colors$2.neutral.navyGrayLight[400]
8001
8016
  },
8002
8017
  tertiary: {
@@ -8007,10 +8022,10 @@ var colors = {
8007
8022
  disabled: colors$2.neutral.navyGrayLight[400]
8008
8023
  },
8009
8024
  link: {
8010
- "default": colors$2.chromatic.azure[500],
8011
- hover: colors$2.chromatic.azure[600],
8012
- focus: colors$2.chromatic.azure[700],
8013
- active: colors$2.chromatic.azure[700],
8025
+ "default": colors$2.chromatic.azure[600],
8026
+ hover: colors$2.chromatic.azure[700],
8027
+ focus: colors$2.chromatic.azure[800],
8028
+ active: colors$2.chromatic.azure[800],
8014
8029
  disabled: colors$2.neutral.navyGrayLight[400],
8015
8030
  visited: colors$2.chromatic.orchid[400]
8016
8031
  }
@@ -8024,10 +8039,10 @@ var colors = {
8024
8039
  disabled: colors$2.neutral.navyGrayLight[600]
8025
8040
  },
8026
8041
  secondary: {
8027
- "default": colors$2.chromatic.azure[500],
8028
- hover: colors$2.chromatic.azure[500],
8029
- focus: colors$2.chromatic.azure[500],
8030
- active: colors$2.chromatic.azure[500],
8042
+ "default": colors$2.chromatic.azure[600],
8043
+ hover: colors$2.chromatic.azure[600],
8044
+ focus: colors$2.chromatic.azure[600],
8045
+ active: colors$2.chromatic.azure[600],
8031
8046
  disabled: colors$2.neutral.navyGrayLight[400]
8032
8047
  },
8033
8048
  tertiary: {
@@ -8038,10 +8053,10 @@ var colors = {
8038
8053
  disabled: colors$2.neutral.navyGrayLight[400]
8039
8054
  },
8040
8055
  link: {
8041
- "default": colors$2.chromatic.azure[500],
8042
- hover: colors$2.chromatic.azure[600],
8043
- focus: colors$2.chromatic.azure[700],
8044
- active: colors$2.chromatic.azure[700],
8056
+ "default": colors$2.chromatic.azure[600],
8057
+ hover: colors$2.chromatic.azure[700],
8058
+ focus: colors$2.chromatic.azure[800],
8059
+ active: colors$2.chromatic.azure[800],
8045
8060
  disabled: colors$2.neutral.navyGrayLight[400],
8046
8061
  visited: colors$2.chromatic.orchid[400]
8047
8062
  }
@@ -8148,7 +8163,7 @@ var colors = {
8148
8163
  }
8149
8164
  },
8150
8165
  overlay: {
8151
- background: colors$2.neutral.navyGrayDark.a400
8166
+ background: colors$2.neutral.ashGrayDark.a1100
8152
8167
  },
8153
8168
  brand: {
8154
8169
  primary: {