fix: conflict

.changeset/many-hotels-march.md

@@ -0,0 +1,5 @@
+---
+"@razorpay/blade": minor
+---
+
+feat(StepGroup): spacing enhancements, support for titleColor prop

CODEOWNERS

@@ -1,2 +1,2 @@
-/packages/blade/ @chaitanyadeorukhkar @kamleshchandnani @anuraghazra @snitin315 @saurabhdaware
+/packages/blade/ @chaitanyadeorukhkar @kamleshchandnani @anuraghazra @snitin315 @saurabhdaware @tewarig
 

packages/blade/CHANGELOG.md

@@ -1,5 +1,34 @@
 # @razorpay/blade
 
+## 11.37.0
+
+### Minor Changes
+
+- 778e388b: feat(blade): add new icons - IndiaFlag, MagicKonnect, WorldWide
+
+## 11.36.2
+
+### Patch Changes
+
+- f294a414: fix(blade): maxCharacters alignment in Input field
+- fa487f1e: fix(blade): Trigger native select events in dropdown/ file upload / Date picker
+
+## 11.36.1
+
+### Patch Changes
+
+- 8846293f: fix: dropdown not opening if user clicks on dropdown backdrop
+
+## 11.36.0
+
+### Minor Changes
+
+- e97ec75b: feat: add new icons
+
+### Patch Changes
+
+- 9294580c: feat: expose textAlign prop types in text input
+
 ## 11.35.0
 
 ### Minor Changes

packages/blade/docs/guides/Intro.stories.mdx

@@ -57,14 +57,14 @@ Blade is the Cross-Platform, Open Source Design System that powers all of the [R
 - [Docs](https://blade.razorpay.com)
 - [Figma Library](https://www.figma.com/community/file/1341658976127676210)
 - [GitHub](https://github.com/razorpay/blade)
-- [Installation](https://blade.razorpay.com/?path=/docs/guides-installation--page)
+- [Installation](https://blade.razorpay.com/?path=/docs/guides-installation--docs)
 - [@razorpay/blade-old](https://github.com/razorpay/blade-old) (Deprecated, Private)
 
 ## ✨ Features
 
-- Cross-Platform (Works Natively on [React Web](https://blade.razorpay.com/?path=/docs/guides-installation--page#%EF%B8%8F-installation) and [React Native](https://blade.razorpay.com/?path=/docs/guides-installation--page#react-native-projects))
-- [White Labelling](https://blade.razorpay.com/?path=/docs/guides-theming-theme-playground--page)
-- [CSS Variables for non-React Projects](https://blade.razorpay.com/?path=/docs/tokens-css-variables--page)
+- Cross-Platform (Works Natively on [React Web](https://blade.razorpay.com/?path=/docs/guides-installation--docs#%EF%B8%8F-installation) and [React Native](https://blade.razorpay.com/?path=/docs/guides-installation--docs#react-native-projects))
+- [White Labelling](https://blade.razorpay.com/?path=/docs/guides-theming-theme-playground--docs)
+- [CSS Variables for non-React Projects](https://blade.razorpay.com/?path=/docs/tokens-css-variables--docs)
 - [Accessible](https://github.com/razorpay/blade/blob/master/rfcs/2022-04-09-accessibility.md#manual-testing)
 - Documented [RFCs](https://github.com/razorpay/blade/tree/docs/make-docs-pretty/rfcs) and [API Decisions](https://github.com/razorpay/blade/blob/master/packages/blade/src/components/Alert/_decisions/decisions.md)
 

packages/blade/docs/guides/Usage.stories.mdx

@@ -9,7 +9,7 @@ import figmaToken from '../images/figma-token.png';
 <br />
 <br />
 
-> Before starting to use Blade make sure you have followed the [installation guide](/story/guides-installation--page&globals=measureEnabled:false#%EF%B8%8F-installation) and installed all the dependencies like `styled-components`, `fonts` etc.
+> Before starting to use Blade make sure you have followed the [installation guide](?path=/docs/guides-how-to-use--docs) and installed all the dependencies like `styled-components`, `fonts` etc.
 
 <br />
 

packages/blade/docs/tokens/Border.stories.mdx

@@ -28,7 +28,7 @@ import { bladeTheme } from '../../src/tokens';
 
 # ─ Border
 
-> These tokens should be used along with the [makeBorderSize util](?path=/story/utils-makebordersize--page).
+> These tokens should be used along with the [makeBorderSize util](?path=/story/utils-makebordersize--docs).
 
 export const Border = () => {
   const { theme } = useTheme();

packages/blade/docs/tokens/Motion.stories.mdx

@@ -25,7 +25,7 @@ import MovingDiv from '../components/MovingDiv';
 
 # 🎬 Motion Tokens
 
-> These tokens should be used along with the [makeMotionTime util](?path=/story/utils-makemotiontime--page).
+> These tokens should be used along with the [makeMotionTime util](?path=/story/utils-makemotiontime--docs).
 
 export const Motion = () => {
   const { theme } = useTheme();
@@ -103,7 +103,7 @@ export const MotionExample = () => {
 
 If we want to create a circle that scales up and down with a **duration** of `xgentle` and an **easing** of `standard.effective`
 
-1. Ensure you've followed all the steps under ["Guides/Usage"](https://master--61c19ee8d3d282003ac1d81c.chromatic.com//?path=/story/guides-usage--page&globals=measureEnabled:false) to setup your theme with `<BladeProvider>`
+1. Ensure you've followed all the steps under ["Guides/Usage"](https://blade.razorpay.com/?path=/docs/guides-how-to-use--docs) to setup your theme with `<BladeProvider>`
 2. Your theme tokens will be automatically available to `styled-components` as a `theme` prop
 3. Create a component using `styled-components` that looks like this:
 

packages/blade/docs/tokens/Spacing.stories.mdx

@@ -27,7 +27,7 @@ import { makeSpace } from '../../src/utils';
 
 # ↔️ Spacing
 
-> These tokens should be used along with the [makeSpace util](?path=/story/utils-makespace--page).
+> These tokens should be used along with the [makeSpace util](?path=/story/utils-makespace--docs).
 
 export const Spacing = () => {
   const { theme } = useTheme();

packages/blade/docs/tokens/Typography.stories.mdx

@@ -23,7 +23,7 @@ import { makeTypographySize } from '../../src/utils';
 
 # 🔡 Typography
 
-> These tokens should be used along with the [makeTypographySize util](?path=/story/utils-maketypographysize--page).
+> These tokens should be used along with the [makeTypographySize util](?path=/story/utils-maketypographysize--docs).
 
 <Box paddingBottom="spacing.6">
   <Button

packages/blade/docs/utils/makeBorderSize.stories.mdx

@@ -9,7 +9,7 @@ Border width & radius sizes in our theme are stored as plain numbers or percenta
 
 For example, `makeBorderSize(8)` returns `'8px'` but `makeBorderSize('50%')` returns `'50%'`.
 
-> Should be used only with Blade's [Border tokens](?path=/story/tokens-border--page)
+> Should be used only with Blade's [Border tokens](?path=/story/tokens-border--docs)
 
 ```tsx
 const makeBorderSize = (size: number) => string;

packages/blade/docs/utils/makeMotionTime.stories.mdx

@@ -9,7 +9,7 @@ Motion duration & delay tokens in our theme are stored as plain numbers but they
 
 For example, `makeMotionTime(1000)` returns `'1000ms'` for web and `1000` for react native.
 
-> Should be used only with Blade's [Motion duration & delay tokens](?path=/story/tokens-motion--page)
+> Should be used only with Blade's [Motion duration & delay tokens](?path=/story/tokens-motion--docs)
 
 > Motion's easing tokens do not require any convertion to platform specific units. They can be used as is.
 

packages/blade/docs/utils/makeSpace.stories.mdx

@@ -9,7 +9,7 @@ Spacing tokens in our theme are stored as plain numbers but they need to be conv
 
 For example, `makeSpace(10)` will return `10px` for web as well as react native.
 
-> Should be used only with Blade's [Spacing tokens](?path=/story/tokens-spacing--page)
+> Should be used only with Blade's [Spacing tokens](?path=/story/tokens-spacing--docs)
 
 ```tsx
 const makeSpace = (size: number) => string;

packages/blade/docs/utils/makeTypographySize.stories.mdx

@@ -9,7 +9,7 @@ Fonts in our theme are stored as plain numbers but they need to be converted int
 
 For example, `makeTypographySize(16)` returns `'1rem'` for web and `'16px'` for react native.
 
-> Should be used only with Blade's [Typography tokens](?path=/story/tokens-typography--page)
+> Should be used only with Blade's [Typography tokens](?path=/story/tokens-typography--docs)
 
 > You can read more about why Blade uses `rem` for web & `px` for react native on our [Units for typography and layout RFC](https://github.com/razorpay/blade/blob/master/rfcs/2021-02-19-units-for-typography-and-layout.md).
 

packages/blade/docs/utils/useTheme.stories.mdx

@@ -84,13 +84,13 @@ type Theme = {
 
 To further explore the tokens in Theme, you can navigate to their respective documentations:
 
-- [Border](?path=/story/tokens-border--page)
-- [Breakpoints](?path=/story/tokens-breakpoints--page)
-- [Colors](?path=/story/tokens-colors--page)
-- [Spacing](?path=/story/tokens-spacing--page)
-- [Motion](?path=/story/tokens-motion--page)
-- [Elevation](?path=/story/tokens-elevation--page)
-- [Typography](?path=/story/tokens-typography--page)
+- [Border](?path=/story/tokens-border--docs)
+- [Breakpoints](?path=/story/tokens-breakpoints--docs)
+- [Colors](?path=/story/tokens-colors--docs)
+- [Spacing](?path=/story/tokens-spacing--docs)
+- [Motion](?path=/story/tokens-motion--docs)
+- [Elevation](?path=/story/tokens-elevation--docs)
+- [Typography](?path=/story/tokens-typography--docs)
 
 #### `ColorSchemeNames`
 
@@ -104,7 +104,7 @@ type ColorSchemeNames = 'dark' | 'light';
 #### `Platform`
 
 The current platform of the application. Can be either `'onDesktop'` or `'onMobile'`.
-Platform will be set to `'onDesktop'` or `'onMobile'` based on the [breakpoints](?path=/story/tokens-breakpoints--page&globals=measureEnabled:false) defined in the theme.
+Platform will be set to `'onDesktop'` or `'onMobile'` based on the [breakpoints](?path=/story/tokens-breakpoints--docs&globals=measureEnabled:false) defined in the theme.
 
 > Note: Platform will always be `'onMobile'` for React Native
 

packages/blade/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@razorpay/blade",
   "description": "The Design System that powers Razorpay",
-  "version": "11.35.0",
+  "version": "11.37.0",
   "license": "MIT",
   "engines": {
     "node": ">=18.12.1"

packages/blade/scripts/icons.json

@@ -1,5 +1,11 @@
 [
   {
-    "equals": "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M5 8C4.44772 8 4 8.44772 4 9C4 9.55228 4.44772 10 5 10H19C19.5523 10 20 9.55228 20 9C20 8.44772 19.5523 8 19 8H5ZM5 14C4.44772 14 4 14.4477 4 15C4 15.5523 4.44772 16 5 16H19C19.5523 16 20 15.5523 20 15C20 14.4477 19.5523 14 19 14H5Z\" fill=\"#192839\"/>\n</svg>\n"
+    "india-flag": "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M1 5.86364C1 4.28209 2.27682 3 3.85185 3H20.1481C21.7232 3 23 4.28209 23 5.86364V18.1364C23 19.7179 21.7232 21 20.1481 21H3.85185C2.27682 21 1 19.7179 1 18.1364V5.86364ZM21.3322 8.11364V5.86332C21.3322 5.2307 20.8214 4.71786 20.1914 4.71786L3.81366 4.71786C3.18364 4.71786 2.67292 5.2307 2.67292 5.86332L2.67292 8.11364H21.3322ZM2.67292 9.75V14.25H10.2357C9.57335 13.7256 9.14815 12.9127 9.14815 12C9.14815 11.0873 9.57335 10.2744 10.2357 9.75H2.67292ZM13.7643 9.75C14.4267 10.2744 14.8519 11.0873 14.8519 12C14.8519 12.9127 14.4267 13.7256 13.7643 14.25H21.3322V9.75H13.7643ZM21.3322 15.8864H2.67292L2.67292 18.136C2.67292 18.7687 3.18364 19.2815 3.81365 19.2815L20.1914 19.2815C20.8214 19.2815 21.3322 18.7687 21.3322 18.136V15.8864ZM12 10.7727C11.325 10.7727 10.7778 11.3222 10.7778 12C10.7778 12.6778 11.325 13.2273 12 13.2273C12.675 13.2273 13.2222 12.6778 13.2222 12C13.2222 11.3222 12.675 10.7727 12 10.7727Z\" fill=\"#101828\"/>\n</svg>\n"
+  },
+  {
+    "Worldwide": "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M1 5.86364C1 4.28209 2.27682 3 3.85185 3H20.1481C21.7232 3 23 4.28209 23 5.86364V18.1364C23 19.7179 21.7232 21 20.1481 21H3.85185C2.27682 21 1 19.7179 1 18.1364V5.86364ZM21.3322 7.90909V5.86332C21.3322 5.2307 20.8214 4.71786 20.1914 4.71786L3.81366 4.71786C3.18364 4.71786 2.67292 5.2307 2.67292 5.86332L2.67292 7.90909L6.2963 7.90909C6.74631 7.90909 7.11111 8.2754 7.11111 8.72727C7.11111 9.17914 6.74631 9.54545 6.2963 9.54545H2.67292V14.4545H6.2963C6.74631 14.4545 7.11111 14.8209 7.11111 15.2727C7.11111 15.7246 6.74631 16.0909 6.2963 16.0909H2.67292L2.67292 18.136C2.67292 18.7687 3.18364 19.2815 3.81365 19.2815L20.1914 19.2815C20.8214 19.2815 21.3322 18.7687 21.3322 18.136V16.0909H17.7037C17.2537 16.0909 16.8889 15.7246 16.8889 15.2727C16.8889 14.8209 17.2537 14.4545 17.7037 14.4545H21.3322V9.54545H17.7037C17.2537 9.54545 16.8889 9.17914 16.8889 8.72727C16.8889 8.2754 17.2537 7.90909 17.7037 7.90909L21.3322 7.90909ZM8.42419 11.1818H9.45118C9.55385 10.3622 9.78681 9.56751 10.1383 8.82738C9.28286 9.33461 8.65041 10.1808 8.42419 11.1818ZM12 8.83215C11.539 9.54279 11.2312 10.3434 11.0972 11.1818H12.903C12.7689 10.3434 12.461 9.54281 12 8.83215ZM12.903 12.8182C12.7689 13.6566 12.461 14.4572 12 15.1679C11.539 14.4572 11.2312 13.6566 11.0972 12.8182H12.903ZM9.45118 12.8182H8.42419C8.65041 13.8192 9.28286 14.6654 10.1383 15.1726C9.78681 14.4325 9.55385 13.6378 9.45118 12.8182ZM13.8618 15.1726C14.2133 14.4325 14.4463 13.6378 14.549 12.8182H15.5758C15.3496 13.8192 14.7172 14.6653 13.8618 15.1726ZM15.5758 11.1818H14.549C14.4463 10.3622 14.2133 9.56754 13.8618 8.82744C14.7172 9.33467 15.3496 10.1808 15.5758 11.1818ZM6.7037 12C6.7037 9.06285 9.07494 6.68182 12 6.68182C14.9251 6.68182 17.2963 9.06285 17.2963 12C17.2963 14.9372 14.9251 17.3182 12 17.3182C9.07494 17.3182 6.7037 14.9372 6.7037 12Z\" fill=\"#192839\"/>\n</svg>\n"
+  },
+  {
+    "magic-konnect": "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M11.0014 9.56575L10.4838 11.439L13.4463 9.55535L11.5089 16.6624L13.4763 16.664L16.3383 6.16663L11.0014 9.56575Z\" fill=\"#192839\"/>\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M7.81432 13.6766L6.99993 16.6644H11.0326L12.6825 10.586L7.81432 13.6766Z\" fill=\"#192839\"/>\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M3.05906 21.9832C3.01983 21.9944 2.9778 22 2.93858 22C2.8181 22 2.69761 21.9468 2.61636 21.8487C2.50989 21.7198 2.49027 21.5377 2.56592 21.3892L4.2947 18.0185C2.81249 16.2645 1.99994 14.0454 1.99994 11.7422C1.99994 6.37097 6.37091 2 11.7422 2C17.1134 2 21.4844 6.36817 21.4844 11.7394C21.4844 17.1107 17.1134 21.4816 11.7422 21.4816C10.33 21.4816 8.97108 21.1874 7.69621 20.6046L3.05906 21.9832ZM6.83214 17.7283L6.27789 18.809L7.85477 18.3402L8.57986 18.6717C9.57477 19.1265 10.6321 19.3563 11.7422 19.3563C15.9396 19.3563 19.359 15.9369 19.359 11.7394C19.359 7.54278 15.9404 4.12538 11.7422 4.12538C7.54473 4.12538 4.12532 7.54479 4.12532 11.7422C4.12532 13.5436 4.76033 15.2766 5.91807 16.6467L6.83214 17.7283Z\" fill=\"#192839\"/>\n</svg>\n"
   }
 ]

packages/blade/src/components/BaseMotion/baseMotionUtils.ts

@@ -50,14 +50,12 @@ const useMotionVariants = (
   motionVariants: BaseMotionBoxProps['motionVariants'],
   type: BaseMotionBoxProps['type'],
 ): BaseMotionBoxProps['motionVariants'] => {
-  const shouldReduceMotion = useReducedMotion();
-
   if (!motionVariants) {
     return undefined;
   }
 
-  const shouldSkipEntryAnimation = shouldReduceMotion || type === 'out';
-  const shouldSkipExitAnimation = shouldReduceMotion || type === 'in';
+  const shouldSkipEntryAnimation = type === 'out';
+  const shouldSkipExitAnimation = type === 'in';
 
   // We override durations to stop animations but still continue with the expected position changes
   const newMotionVariants: BaseMotionBoxProps['motionVariants'] = {

packages/blade/src/components/BottomSheet/types.ts

@@ -66,7 +66,7 @@ type BottomSheetBodyProps = {
    * @default `spacing.5`
    *
    * **Links:**
-   * - Docs: https://blade.razorpay.com/?path=/docs/tokens-spacing--page
+   * - Docs: https://blade.razorpay.com/?path=/docs/tokens-spacing--docs
    */
   padding?: Extract<SpacingValueType, 'spacing.0' | 'spacing.5'>;
   overflow?: BaseBoxProps['overflow'];

packages/blade/src/components/Box/BaseBox/types/propsTypes.ts

@@ -166,7 +166,7 @@ type CommonBoxVisualProps = MakeObjectResponsive<
        * @default `theme.elevation.lowRaised`
        *
        * **Links:**
-       * - Docs: https://blade.razorpay.com/?path=/docs/tokens-elevation--page
+       * - Docs: https://blade.razorpay.com/?path=/docs/tokens-elevation--docs
        */
       elevation?: keyof Elevation;
     }