fix(styled-props): forward flex props to components (closes #1543)

[Mrsandeep27]

Context / Motivation

Fixes #1543.

Before this change, passing flex / flexGrow / flexShrink / flexBasis to Blade components like Button or TextInput inside a flex container had no effect:

<Box display="flex" gap="spacing.3">
  <TextInput label="Email" flex="1" />
  <Button flex="1">Submit</Button>
</Box>
// TextInput and Button do NOT split the width equally

Root cause: StyledPropsBlade (packages/blade/src/components/Box/BaseBox/types/propsTypes.ts) picked only 'alignSelf' | 'justifySelf' | 'placeSelf' | 'order' | 'flexWrap' from FlexboxProps, and the makeStyledProps allowlist (packages/blade/src/components/Box/styledProps/getStyledProps.ts) didn't include the flex item properties either. So getStyledProps(rest) silently dropped flex, flexGrow, etc. before they reached the component's outer wrapper.

Changes

• Added flex, flexGrow, flexShrink, flexBasis to the StyledPropsBlade type.
• Added the same four properties to makeStyledProps so they flow through getStyledProps / useStyledProps.

Scope kept minimal on purpose:

• Did not add width / height / minWidth / maxWidth / minHeight / maxHeight to styled props. BaseButton computes its own internal width / height for icon-only buttons (via getProps) and passes them to StyledBaseButton; adding these to styled props now would require carefully ordering the spread on every component and is best done as a follow-up.
• No runtime behaviour change for any existing prop — only net-new props are forwarded.
• The existing defaultStyledPropsObject = makeStyledProps({}) in storybookArgTypes.ts auto-picks up the new props for Storybook docs.

Test plan

• yarn workspace @razorpay/blade build passes (type check includes the new properties)
• Open the "Styled Props" story — the new flex, flexGrow, flexShrink, flexBasis controls appear and applying flex="1" to the example Button makes it stretch inside a flex Box.
• Reproduce the example from the issue:

  <Box display="flex" gap="spacing.3">
    <TextInput label="Email" flex="1" />
    <Button flex="1">Submit</Button>
  </Box>

  Both children should now each occupy ~50% of the container width (minus gap).

Checklist

• Add changeset (.changeset/styled-props-flex-support.md, patch)
• TypeScript StyledPropsBlade updated
• makeStyledProps allowlist updated

🤖 Generated with Claude Code

[changeset-bot]

🦋 Changeset detected

Latest commit: c311c9b

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@razorpay/blade	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit c311c9b:

Sandbox	Source
razorpay/blade: basic	Configuration
hopeful-ride-yhhgmr	Issue #1543