@razorpay/blade 6.4.0 → 6.5.1

package/build/css/bankingThemeDarkDesktop.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 15 Mar 2023 07:34:35 GMT
+ * Generated on Fri, 17 Mar 2023 09:19:34 GMT
  */
 
 :root {
@@ -13,12 +13,12 @@
   --border-width-none: 0px;
   --border-width-thin: 1px;
   --border-width-thick: 1.5px;
+  --breakpoints-base: 0px;
   --breakpoints-xs: 320px;
   --breakpoints-s: 480px;
   --breakpoints-m: 768px;
   --breakpoints-l: 1024px;
   --breakpoints-xl: 1200px;
-  --breakpoints-max: 1201px;
   --colors-surface-background-level1-low-contrast: hsla(231, 67%, 10%, 1);
   --colors-surface-background-level1-high-contrast: hsla(231, 41%, 19%, 1);
   --colors-surface-background-level2-low-contrast: hsla(231, 54%, 15%, 1);

package/build/css/bankingThemeDarkMobile.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 15 Mar 2023 07:34:35 GMT
+ * Generated on Fri, 17 Mar 2023 09:19:34 GMT
  */
 
 :root {
@@ -13,12 +13,12 @@
   --border-width-none: 0px;
   --border-width-thin: 1px;
   --border-width-thick: 1.5px;
+  --breakpoints-base: 0px;
   --breakpoints-xs: 320px;
   --breakpoints-s: 480px;
   --breakpoints-m: 768px;
   --breakpoints-l: 1024px;
   --breakpoints-xl: 1200px;
-  --breakpoints-max: 1201px;
   --colors-surface-background-level1-low-contrast: hsla(231, 67%, 10%, 1);
   --colors-surface-background-level1-high-contrast: hsla(231, 41%, 19%, 1);
   --colors-surface-background-level2-low-contrast: hsla(231, 54%, 15%, 1);

package/build/css/bankingThemeLightDesktop.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 15 Mar 2023 07:34:35 GMT
+ * Generated on Fri, 17 Mar 2023 09:19:34 GMT
  */
 
 :root {
@@ -13,12 +13,12 @@
   --border-width-none: 0px;
   --border-width-thin: 1px;
   --border-width-thick: 1.5px;
+  --breakpoints-base: 0px;
   --breakpoints-xs: 320px;
   --breakpoints-s: 480px;
   --breakpoints-m: 768px;
   --breakpoints-l: 1024px;
   --breakpoints-xl: 1200px;
-  --breakpoints-max: 1201px;
   --colors-surface-background-level1-low-contrast: hsla(230, 30%, 96%, 1);
   --colors-surface-background-level1-high-contrast: hsla(228, 56%, 17%, 1);
   --colors-surface-background-level2-low-contrast: hsla(0, 0%, 100%, 1);

package/build/css/bankingThemeLightMobile.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 15 Mar 2023 07:34:35 GMT
+ * Generated on Fri, 17 Mar 2023 09:19:34 GMT
  */
 
 :root {
@@ -13,12 +13,12 @@
   --border-width-none: 0px;
   --border-width-thin: 1px;
   --border-width-thick: 1.5px;
+  --breakpoints-base: 0px;
   --breakpoints-xs: 320px;
   --breakpoints-s: 480px;
   --breakpoints-m: 768px;
   --breakpoints-l: 1024px;
   --breakpoints-xl: 1200px;
-  --breakpoints-max: 1201px;
   --colors-surface-background-level1-low-contrast: hsla(230, 30%, 96%, 1);
   --colors-surface-background-level1-high-contrast: hsla(228, 56%, 17%, 1);
   --colors-surface-background-level2-low-contrast: hsla(0, 0%, 100%, 1);

package/build/css/paymentThemeDarkDesktop.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 15 Mar 2023 07:34:35 GMT
+ * Generated on Fri, 17 Mar 2023 09:19:33 GMT
  */
 
 :root {
@@ -13,12 +13,12 @@
   --border-width-none: 0px;
   --border-width-thin: 1px;
   --border-width-thick: 1.5px;
+  --breakpoints-base: 0px;
   --breakpoints-xs: 320px;
   --breakpoints-s: 480px;
   --breakpoints-m: 768px;
   --breakpoints-l: 1024px;
   --breakpoints-xl: 1200px;
-  --breakpoints-max: 1201px;
   --colors-surface-background-level1-low-contrast: hsla(218, 67%, 10%, 1);
   --colors-surface-background-level1-high-contrast: hsla(219, 41%, 19%, 1);
   --colors-surface-background-level2-low-contrast: hsla(218, 54%, 15%, 1);

package/build/css/paymentThemeDarkMobile.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 15 Mar 2023 07:34:35 GMT
+ * Generated on Fri, 17 Mar 2023 09:19:34 GMT
  */
 
 :root {
@@ -13,12 +13,12 @@
   --border-width-none: 0px;
   --border-width-thin: 1px;
   --border-width-thick: 1.5px;
+  --breakpoints-base: 0px;
   --breakpoints-xs: 320px;
   --breakpoints-s: 480px;
   --breakpoints-m: 768px;
   --breakpoints-l: 1024px;
   --breakpoints-xl: 1200px;
-  --breakpoints-max: 1201px;
   --colors-surface-background-level1-low-contrast: hsla(218, 67%, 10%, 1);
   --colors-surface-background-level1-high-contrast: hsla(219, 41%, 19%, 1);
   --colors-surface-background-level2-low-contrast: hsla(218, 54%, 15%, 1);

package/build/css/paymentThemeLightDesktop.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 15 Mar 2023 07:34:35 GMT
+ * Generated on Fri, 17 Mar 2023 09:19:33 GMT
  */
 
 :root {
@@ -13,12 +13,12 @@
   --border-width-none: 0px;
   --border-width-thin: 1px;
   --border-width-thick: 1.5px;
+  --breakpoints-base: 0px;
   --breakpoints-xs: 320px;
   --breakpoints-s: 480px;
   --breakpoints-m: 768px;
   --breakpoints-l: 1024px;
   --breakpoints-xl: 1200px;
-  --breakpoints-max: 1201px;
   --colors-surface-background-level1-low-contrast: hsla(220, 30%, 96%, 1);
   --colors-surface-background-level1-high-contrast: hsla(217, 56%, 17%, 1);
   --colors-surface-background-level2-low-contrast: hsla(0, 0%, 100%, 1);

package/build/css/paymentThemeLightMobile.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 15 Mar 2023 07:34:35 GMT
+ * Generated on Fri, 17 Mar 2023 09:19:33 GMT
  */
 
 :root {
@@ -13,12 +13,12 @@
   --border-width-none: 0px;
   --border-width-thin: 1px;
   --border-width-thick: 1.5px;
+  --breakpoints-base: 0px;
   --breakpoints-xs: 320px;
   --breakpoints-s: 480px;
   --breakpoints-m: 768px;
   --breakpoints-l: 1024px;
   --breakpoints-xl: 1200px;
-  --breakpoints-max: 1201px;
   --colors-surface-background-level1-low-contrast: hsla(220, 30%, 96%, 1);
   --colors-surface-background-level1-high-contrast: hsla(217, 56%, 17%, 1);
   --colors-surface-background-level2-low-contrast: hsla(0, 0%, 100%, 1);

package/build/tokens/index.d.ts

@@ -26,18 +26,73 @@ declare type Border$1 = Readonly<{
 }>;
 
 declare type Breakpoints$1 = Readonly<{
-    /** max width: 320px  */
+    /**
+     * `base` is used for responsive styling following a **mobile first** approach. It starts from 0px till the next existing token
+     *
+     * Think of this as styles without any media query.
+     *
+     * ### Example
+     *
+     * This code will set margin as `spacing.2` on "m" size screens and above. And as `spacing.1` on less than "m" size screens
+     * ```jsx
+     * <Box margin={{ base: 'spacing.1', m: 'spacing.2' }} />
+     * ```
+     *
+     * This roughly translates into -
+     *
+     * ```
+     * .Box {
+     *  margin: 'spacing.1';
+     * }
+     *
+     * ＠media screen and (min-width: 768px) {
+     *  .Box {
+     *    margin: 'spacing.2';
+     *  }
+     * }
+     * ```
+     */
+    base: number;
+    /**
+     * `@media screen and (min-width: 320px)`
+     *
+     * Small Mobiles
+     */
     xs: number;
-    /** min width: 321px and max width: 480px */
+    /**
+     * `@media screen and (min-width: 480px)`
+     *
+     * Mobiles and Small Tablets
+     */
     s: number;
-    /** min width: 481px and max width: 768px */
+    /**
+     * `@media screen and (min-width: 768px)`
+     *
+     * Medium and Large Tablets.
+     *
+     * Dimensions with `m` and above can be treated as desktop in mobile-first approach (with min-width).
+     * Hence this breakpoint can be used for desktop styling.
+     *
+     * E.g. next example will keep flexDirection `row` on mobiles and `column` on large tablets, desktop, and larger screens
+     *
+     * ```jsx
+     * <Box display="flex" flexDirection={{ base: 'row', m: 'column' }} />
+     * ```
+     *
+     */
     m: number;
-    /** min width: 769 and max width: 1024px */
+    /**
+     * `@media screen and (min-width: 1024px)`
+     *
+     * Desktop
+     */
     l: number;
-    /** min width: 1025 and max width: 1200px */
+    /**
+     * `@media screen and (min-width: 1200px)`
+     *
+     * HD Desktop
+     */
     xl: number;
-    /** min width: 1201px  */
-    max: number;
 }>;
 
 declare type ColorChromaticScale = Readonly<{
@@ -269,6 +324,11 @@ declare type Typography$1 = {
     };
 };
 
+/**
+ * When any of the values are changed here, do change the jsdoc comments in BaseBox/types/spacingTypes.ts as well
+ *
+ * {@link ../../components/Box/BaseBox/types/spacingTypes.ts}
+ */
 declare type Spacing$1 = Readonly<{
     /** 0: 0(px/rem/pt) */
     0: 0;
@@ -326,18 +386,73 @@ type Border = Readonly<{
 }>;
 
 type Breakpoints = Readonly<{
-  /** max width: 320px  */
+  /**
+   * `base` is used for responsive styling following a **mobile first** approach. It starts from 0px till the next existing token
+   *
+   * Think of this as styles without any media query.
+   *
+   * ### Example
+   *
+   * This code will set margin as `spacing.2` on "m" size screens and above. And as `spacing.1` on less than "m" size screens
+   * ```jsx
+   * <Box margin={{ base: 'spacing.1', m: 'spacing.2' }} />
+   * ```
+   *
+   * This roughly translates into -
+   *
+   * ```
+   * .Box {
+   *  margin: 'spacing.1';
+   * }
+   *
+   * ＠media screen and (min-width: 768px) {
+   *  .Box {
+   *    margin: 'spacing.2';
+   *  }
+   * }
+   * ```
+   */
+  base: number;
+  /**
+   * `@media screen and (min-width: 320px)`
+   *
+   * Small Mobiles
+   */
   xs: number;
-  /** min width: 321px and max width: 480px */
+  /**
+   * `@media screen and (min-width: 480px)`
+   *
+   * Mobiles and Small Tablets
+   */
   s: number;
-  /** min width: 481px and max width: 768px */
+  /**
+   * `@media screen and (min-width: 768px)`
+   *
+   * Medium and Large Tablets.
+   *
+   * Dimensions with `m` and above can be treated as desktop in mobile-first approach (with min-width).
+   * Hence this breakpoint can be used for desktop styling.
+   *
+   * E.g. next example will keep flexDirection `row` on mobiles and `column` on large tablets, desktop, and larger screens
+   *
+   * ```jsx
+   * <Box display="flex" flexDirection={{ base: 'row', m: 'column' }} />
+   * ```
+   *
+   */
   m: number;
-  /** min width: 769 and max width: 1024px */
+  /**
+   * `@media screen and (min-width: 1024px)`
+   *
+   * Desktop
+   */
   l: number;
-  /** min width: 1025 and max width: 1200px */
+  /**
+   * `@media screen and (min-width: 1200px)`
+   *
+   * HD Desktop
+   */
   xl: number;
-  /** min width: 1201px  */
-  max: number;
 }>;
 
 type FontFamily = {
@@ -492,6 +607,12 @@ type TypographyPlatforms = 'onDesktop' | 'onMobile';
 
 type TypographyWithPlatforms = Record<TypographyPlatforms, Typography>;
 
+/**
+ * When any of the values are changed here, do change the jsdoc comments in BaseBox/types/spacingTypes.ts as well
+ *
+ * {@link ../../components/Box/BaseBox/types/spacingTypes.ts}
+ */
+
 type Spacing = Readonly<{
   /** 0: 0(px/rem/pt) */
   0: 0;

package/build/tokens/index.native.d.ts

@@ -26,18 +26,73 @@ declare type Border$1 = Readonly<{
 }>;
 
 declare type Breakpoints$1 = Readonly<{
-    /** max width: 320px  */
+    /**
+     * `base` is used for responsive styling following a **mobile first** approach. It starts from 0px till the next existing token
+     *
+     * Think of this as styles without any media query.
+     *
+     * ### Example
+     *
+     * This code will set margin as `spacing.2` on "m" size screens and above. And as `spacing.1` on less than "m" size screens
+     * ```jsx
+     * <Box margin={{ base: 'spacing.1', m: 'spacing.2' }} />
+     * ```
+     *
+     * This roughly translates into -
+     *
+     * ```
+     * .Box {
+     *  margin: 'spacing.1';
+     * }
+     *
+     * ＠media screen and (min-width: 768px) {
+     *  .Box {
+     *    margin: 'spacing.2';
+     *  }
+     * }
+     * ```
+     */
+    base: number;
+    /**
+     * `@media screen and (min-width: 320px)`
+     *
+     * Small Mobiles
+     */
     xs: number;
-    /** min width: 321px and max width: 480px */
+    /**
+     * `@media screen and (min-width: 480px)`
+     *
+     * Mobiles and Small Tablets
+     */
     s: number;
-    /** min width: 481px and max width: 768px */
+    /**
+     * `@media screen and (min-width: 768px)`
+     *
+     * Medium and Large Tablets.
+     *
+     * Dimensions with `m` and above can be treated as desktop in mobile-first approach (with min-width).
+     * Hence this breakpoint can be used for desktop styling.
+     *
+     * E.g. next example will keep flexDirection `row` on mobiles and `column` on large tablets, desktop, and larger screens
+     *
+     * ```jsx
+     * <Box display="flex" flexDirection={{ base: 'row', m: 'column' }} />
+     * ```
+     *
+     */
     m: number;
-    /** min width: 769 and max width: 1024px */
+    /**
+     * `@media screen and (min-width: 1024px)`
+     *
+     * Desktop
+     */
     l: number;
-    /** min width: 1025 and max width: 1200px */
+    /**
+     * `@media screen and (min-width: 1200px)`
+     *
+     * HD Desktop
+     */
     xl: number;
-    /** min width: 1201px  */
-    max: number;
 }>;
 
 declare type ColorChromaticScale = Readonly<{
@@ -269,6 +324,11 @@ declare type Typography$1 = {
     };
 };
 
+/**
+ * When any of the values are changed here, do change the jsdoc comments in BaseBox/types/spacingTypes.ts as well
+ *
+ * {@link ../../components/Box/BaseBox/types/spacingTypes.ts}
+ */
 declare type Spacing$1 = Readonly<{
     /** 0: 0(px/rem/pt) */
     0: 0;
@@ -326,18 +386,73 @@ type Border = Readonly<{
 }>;
 
 type Breakpoints = Readonly<{
-  /** max width: 320px  */
+  /**
+   * `base` is used for responsive styling following a **mobile first** approach. It starts from 0px till the next existing token
+   *
+   * Think of this as styles without any media query.
+   *
+   * ### Example
+   *
+   * This code will set margin as `spacing.2` on "m" size screens and above. And as `spacing.1` on less than "m" size screens
+   * ```jsx
+   * <Box margin={{ base: 'spacing.1', m: 'spacing.2' }} />
+   * ```
+   *
+   * This roughly translates into -
+   *
+   * ```
+   * .Box {
+   *  margin: 'spacing.1';
+   * }
+   *
+   * ＠media screen and (min-width: 768px) {
+   *  .Box {
+   *    margin: 'spacing.2';
+   *  }
+   * }
+   * ```
+   */
+  base: number;
+  /**
+   * `@media screen and (min-width: 320px)`
+   *
+   * Small Mobiles
+   */
   xs: number;
-  /** min width: 321px and max width: 480px */
+  /**
+   * `@media screen and (min-width: 480px)`
+   *
+   * Mobiles and Small Tablets
+   */
   s: number;
-  /** min width: 481px and max width: 768px */
+  /**
+   * `@media screen and (min-width: 768px)`
+   *
+   * Medium and Large Tablets.
+   *
+   * Dimensions with `m` and above can be treated as desktop in mobile-first approach (with min-width).
+   * Hence this breakpoint can be used for desktop styling.
+   *
+   * E.g. next example will keep flexDirection `row` on mobiles and `column` on large tablets, desktop, and larger screens
+   *
+   * ```jsx
+   * <Box display="flex" flexDirection={{ base: 'row', m: 'column' }} />
+   * ```
+   *
+   */
   m: number;
-  /** min width: 769 and max width: 1024px */
+  /**
+   * `@media screen and (min-width: 1024px)`
+   *
+   * Desktop
+   */
   l: number;
-  /** min width: 1025 and max width: 1200px */
+  /**
+   * `@media screen and (min-width: 1200px)`
+   *
+   * HD Desktop
+   */
   xl: number;
-  /** min width: 1201px  */
-  max: number;
 }>;
 
 type FontFamily = {
@@ -492,6 +607,12 @@ type TypographyPlatforms = 'onDesktop' | 'onMobile';
 
 type TypographyWithPlatforms = Record<TypographyPlatforms, Typography>;
 
+/**
+ * When any of the values are changed here, do change the jsdoc comments in BaseBox/types/spacingTypes.ts as well
+ *
+ * {@link ../../components/Box/BaseBox/types/spacingTypes.ts}
+ */
+
 type Spacing = Readonly<{
   /** 0: 0(px/rem/pt) */
   0: 0;

package/build/tokens/index.native.js

@@ -11,7 +11,7 @@ var colors$2={chromatic:{azure:{50:"hsla(222, 100%, 96%, "+opacities[9]+")",100:
 
 var border={radius:{none:0,small:2,medium:4,large:8,max:9999,round:'50%'},width:{none:0,thin:1,thick:1.5}};
 
-var breakpoints={xs:320,s:480,m:768,l:1024,xl:1200,max:1201};
+var breakpoints={base:0,xs:320,s:480,m:768,l:1024,xl:1200};
 
 var spacing={0:0,1:2,2:4,3:8,4:12,5:16,6:20,7:24,8:32,9:40,10:48,11:56};