npm - @razorpay/blade - Versions diffs - 12.0.3 → 12.1.0 - Mend

@razorpay/blade 12.0.3 → 12.1.0

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 (61) hide show

package/build/types/components/index.d.ts CHANGED Viewed

@@ -7736,7 +7736,7 @@ type IconButtonProps = {
      * Sets tabindex property on button element
      */
     _tabIndex?: number;
-} & DataAnalyticsAttribute & BladeCommonEvents & Platform.Select<{
+} & DataAnalyticsAttribute & BladeCommonEvents & StyledPropsBlade & Platform.Select<{
     web: {
         onClick: (event: React__default.MouseEvent<HTMLButtonElement>) => void;
         /**
@@ -7780,7 +7780,563 @@ declare const IconButton: React__default.ForwardRefExoticComponent<{
      * Sets tabindex property on button element
      */
     _tabIndex?: number | undefined;
-} & DataAnalyticsAttribute & BladeCommonEvents & {
+} & DataAnalyticsAttribute & BladeCommonEvents & Partial<Omit<MarginProps & Pick<FlexboxProps, "alignSelf" | "justifySelf" | "order" | "placeSelf"> & {
+    bottom: SpacingValueType | {
+        readonly base?: SpacingValueType | undefined;
+        readonly xs?: SpacingValueType | undefined;
+        readonly s?: SpacingValueType | undefined;
+        readonly m?: SpacingValueType | undefined;
+        readonly l?: SpacingValueType | undefined;
+        readonly xl?: SpacingValueType | undefined;
+    };
+    left: SpacingValueType | {
+        readonly base?: SpacingValueType | undefined;
+        readonly xs?: SpacingValueType | undefined;
+        readonly s?: SpacingValueType | undefined;
+        readonly m?: SpacingValueType | undefined;
+        readonly l?: SpacingValueType | undefined;
+        readonly xl?: SpacingValueType | undefined;
+    };
+    position?: csstype.Property.Position | {
+        readonly base?: csstype.Property.Position | undefined;
+        readonly xs?: csstype.Property.Position | undefined;
+        readonly s?: csstype.Property.Position | undefined;
+        readonly m?: csstype.Property.Position | undefined;
+        readonly l?: csstype.Property.Position | undefined;
+        readonly xl?: csstype.Property.Position | undefined;
+    } | undefined;
+    right: SpacingValueType | {
+        readonly base?: SpacingValueType | undefined;
+        readonly xs?: SpacingValueType | undefined;
+        readonly s?: SpacingValueType | undefined;
+        readonly m?: SpacingValueType | undefined;
+        readonly l?: SpacingValueType | undefined;
+        readonly xl?: SpacingValueType | undefined;
+    };
+    top: SpacingValueType | {
+        readonly base?: SpacingValueType | undefined;
+        readonly xs?: SpacingValueType | undefined;
+        readonly s?: SpacingValueType | undefined;
+        readonly m?: SpacingValueType | undefined;
+        readonly l?: SpacingValueType | undefined;
+        readonly xl?: SpacingValueType | undefined;
+    };
+    zIndex?: csstype.Property.ZIndex | {
+        readonly base?: csstype.Property.ZIndex | undefined;
+        readonly xs?: csstype.Property.ZIndex | undefined;
+        readonly s?: csstype.Property.ZIndex | undefined;
+        readonly m?: csstype.Property.ZIndex | undefined;
+        readonly l?: csstype.Property.ZIndex | undefined;
+        readonly xl?: csstype.Property.ZIndex | undefined;
+    } | undefined;
+    __brand__?: "platform-web" | {
+        readonly base?: "platform-web" | undefined;
+        readonly xs?: "platform-web" | undefined;
+        readonly s?: "platform-web" | undefined;
+        readonly m?: "platform-web" | undefined;
+        readonly l?: "platform-web" | undefined;
+        readonly xl?: "platform-web" | undefined;
+    } | undefined;
+} & Pick<{
+    gridAutoColumns?: csstype.Property.GridAutoColumns<string | number> | {
+        readonly base?: csstype.Property.GridAutoColumns<string | number> | undefined;
+        readonly xs?: csstype.Property.GridAutoColumns<string | number> | undefined;
+        readonly s?: csstype.Property.GridAutoColumns<string | number> | undefined;
+        readonly m?: csstype.Property.GridAutoColumns<string | number> | undefined;
+        readonly l?: csstype.Property.GridAutoColumns<string | number> | undefined;
+        readonly xl?: csstype.Property.GridAutoColumns<string | number> | undefined;
+    } | undefined;
+    gridAutoFlow?: csstype.Property.GridAutoFlow | {
+        readonly base?: csstype.Property.GridAutoFlow | undefined;
+        readonly xs?: csstype.Property.GridAutoFlow | undefined;
+        readonly s?: csstype.Property.GridAutoFlow | undefined;
+        readonly m?: csstype.Property.GridAutoFlow | undefined;
+        readonly l?: csstype.Property.GridAutoFlow | undefined;
+        readonly xl?: csstype.Property.GridAutoFlow | undefined;
+    } | undefined;
+    gridAutoRows?: csstype.Property.GridAutoRows<string | number> | {
+        readonly base?: csstype.Property.GridAutoRows<string | number> | undefined;
+        readonly xs?: csstype.Property.GridAutoRows<string | number> | undefined;
+        readonly s?: csstype.Property.GridAutoRows<string | number> | undefined;
+        readonly m?: csstype.Property.GridAutoRows<string | number> | undefined;
+        readonly l?: csstype.Property.GridAutoRows<string | number> | undefined;
+        readonly xl?: csstype.Property.GridAutoRows<string | number> | undefined;
+    } | undefined;
+    gridColumnEnd?: csstype.Property.GridColumnEnd | {
+        readonly base?: csstype.Property.GridColumnEnd | undefined;
+        readonly xs?: csstype.Property.GridColumnEnd | undefined;
+        readonly s?: csstype.Property.GridColumnEnd | undefined;
+        readonly m?: csstype.Property.GridColumnEnd | undefined;
+        readonly l?: csstype.Property.GridColumnEnd | undefined;
+        readonly xl?: csstype.Property.GridColumnEnd | undefined;
+    } | undefined;
+    gridColumnStart?: csstype.Property.GridColumnStart | {
+        readonly base?: csstype.Property.GridColumnStart | undefined;
+        readonly xs?: csstype.Property.GridColumnStart | undefined;
+        readonly s?: csstype.Property.GridColumnStart | undefined;
+        readonly m?: csstype.Property.GridColumnStart | undefined;
+        readonly l?: csstype.Property.GridColumnStart | undefined;
+        readonly xl?: csstype.Property.GridColumnStart | undefined;
+    } | undefined;
+    gridRowEnd?: csstype.Property.GridRowEnd | {
+        readonly base?: csstype.Property.GridRowEnd | undefined;
+        readonly xs?: csstype.Property.GridRowEnd | undefined;
+        readonly s?: csstype.Property.GridRowEnd | undefined;
+        readonly m?: csstype.Property.GridRowEnd | undefined;
+        readonly l?: csstype.Property.GridRowEnd | undefined;
+        readonly xl?: csstype.Property.GridRowEnd | undefined;
+    } | undefined;
+    gridRowStart?: csstype.Property.GridRowStart | {
+        readonly base?: csstype.Property.GridRowStart | undefined;
+        readonly xs?: csstype.Property.GridRowStart | undefined;
+        readonly s?: csstype.Property.GridRowStart | undefined;
+        readonly m?: csstype.Property.GridRowStart | undefined;
+        readonly l?: csstype.Property.GridRowStart | undefined;
+        readonly xl?: csstype.Property.GridRowStart | undefined;
+    } | undefined;
+    gridTemplateAreas?: csstype.Property.GridTemplateAreas | {
+        readonly base?: csstype.Property.GridTemplateAreas | undefined;
+        readonly xs?: csstype.Property.GridTemplateAreas | undefined;
+        readonly s?: csstype.Property.GridTemplateAreas | undefined;
+        readonly m?: csstype.Property.GridTemplateAreas | undefined;
+        readonly l?: csstype.Property.GridTemplateAreas | undefined;
+        readonly xl?: csstype.Property.GridTemplateAreas | undefined;
+    } | undefined;
+    gridTemplateColumns?: csstype.Property.GridTemplateColumns<string | number> | {
+        readonly base?: csstype.Property.GridTemplateColumns<string | number> | undefined;
+        readonly xs?: csstype.Property.GridTemplateColumns<string | number> | undefined;
+        readonly s?: csstype.Property.GridTemplateColumns<string | number> | undefined;
+        readonly m?: csstype.Property.GridTemplateColumns<string | number> | undefined;
+        readonly l?: csstype.Property.GridTemplateColumns<string | number> | undefined;
+        readonly xl?: csstype.Property.GridTemplateColumns<string | number> | undefined;
+    } | undefined;
+    gridTemplateRows?: csstype.Property.GridTemplateRows<string | number> | {
+        readonly base?: csstype.Property.GridTemplateRows<string | number> | undefined;
+        readonly xs?: csstype.Property.GridTemplateRows<string | number> | undefined;
+        readonly s?: csstype.Property.GridTemplateRows<string | number> | undefined;
+        readonly m?: csstype.Property.GridTemplateRows<string | number> | undefined;
+        readonly l?: csstype.Property.GridTemplateRows<string | number> | undefined;
+        readonly xl?: csstype.Property.GridTemplateRows<string | number> | undefined;
+    } | undefined;
+    grid?: csstype.Property.Grid | {
+        readonly base?: csstype.Property.Grid | undefined;
+        readonly xs?: csstype.Property.Grid | undefined;
+        readonly s?: csstype.Property.Grid | undefined;
+        readonly m?: csstype.Property.Grid | undefined;
+        readonly l?: csstype.Property.Grid | undefined;
+        readonly xl?: csstype.Property.Grid | undefined;
+    } | undefined;
+    gridArea?: csstype.Property.GridArea | {
+        readonly base?: csstype.Property.GridArea | undefined;
+        readonly xs?: csstype.Property.GridArea | undefined;
+        readonly s?: csstype.Property.GridArea | undefined;
+        readonly m?: csstype.Property.GridArea | undefined;
+        readonly l?: csstype.Property.GridArea | undefined;
+        readonly xl?: csstype.Property.GridArea | undefined;
+    } | undefined;
+    gridColumn?: csstype.Property.GridColumn | {
+        readonly base?: csstype.Property.GridColumn | undefined;
+        readonly xs?: csstype.Property.GridColumn | undefined;
+        readonly s?: csstype.Property.GridColumn | undefined;
+        readonly m?: csstype.Property.GridColumn | undefined;
+        readonly l?: csstype.Property.GridColumn | undefined;
+        readonly xl?: csstype.Property.GridColumn | undefined;
+    } | undefined;
+    gridRow?: csstype.Property.GridRow | {
+        readonly base?: csstype.Property.GridRow | undefined;
+        readonly xs?: csstype.Property.GridRow | undefined;
+        readonly s?: csstype.Property.GridRow | undefined;
+        readonly m?: csstype.Property.GridRow | undefined;
+        readonly l?: csstype.Property.GridRow | undefined;
+        readonly xl?: csstype.Property.GridRow | undefined;
+    } | undefined;
+    gridTemplate?: csstype.Property.GridTemplate | {
+        readonly base?: csstype.Property.GridTemplate | undefined;
+        readonly xs?: csstype.Property.GridTemplate | undefined;
+        readonly s?: csstype.Property.GridTemplate | undefined;
+        readonly m?: csstype.Property.GridTemplate | undefined;
+        readonly l?: csstype.Property.GridTemplate | undefined;
+        readonly xl?: csstype.Property.GridTemplate | undefined;
+    } | undefined;
+    __brand__?: "platform-web" | {
+        readonly base?: "platform-web" | undefined;
+        readonly xs?: "platform-web" | undefined;
+        readonly s?: "platform-web" | undefined;
+        readonly m?: "platform-web" | undefined;
+        readonly l?: "platform-web" | undefined;
+        readonly xl?: "platform-web" | undefined;
+    } | undefined;
+}, "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridArea" | "gridColumn" | "gridRow"> & Pick<{
+    width: SpacingValueType | {
+        readonly base?: SpacingValueType | undefined;
+        readonly xs?: SpacingValueType | undefined;
+        readonly s?: SpacingValueType | undefined;
+        readonly m?: SpacingValueType | undefined;
+        readonly l?: SpacingValueType | undefined;
+        readonly xl?: SpacingValueType | undefined;
+    };
+    display?: csstype.Property.Display | {
+        readonly base?: csstype.Property.Display | undefined;
+        readonly xs?: csstype.Property.Display | undefined;
+        readonly s?: csstype.Property.Display | undefined;
+        readonly m?: csstype.Property.Display | undefined;
+        readonly l?: csstype.Property.Display | undefined;
+        readonly xl?: csstype.Property.Display | undefined;
+    } | undefined;
+    height: SpacingValueType | {
+        readonly base?: SpacingValueType | undefined;
+        readonly xs?: SpacingValueType | undefined;
+        readonly s?: SpacingValueType | undefined;
+        readonly m?: SpacingValueType | undefined;
+        readonly l?: SpacingValueType | undefined;
+        readonly xl?: SpacingValueType | undefined;
+    };
+    maxHeight: SpacingValueType | {
+        readonly base?: SpacingValueType | undefined;
+        readonly xs?: SpacingValueType | undefined;
+        readonly s?: SpacingValueType | undefined;
+        readonly m?: SpacingValueType | undefined;
+        readonly l?: SpacingValueType | undefined;
+        readonly xl?: SpacingValueType | undefined;
+    };
+    maxWidth: SpacingValueType | {
+        readonly base?: SpacingValueType | undefined;
+        readonly xs?: SpacingValueType | undefined;
+        readonly s?: SpacingValueType | undefined;
+        readonly m?: SpacingValueType | undefined;
+        readonly l?: SpacingValueType | undefined;
+        readonly xl?: SpacingValueType | undefined;
+    };
+    minHeight: SpacingValueType | {
+        readonly base?: SpacingValueType | undefined;
+        readonly xs?: SpacingValueType | undefined;
+        readonly s?: SpacingValueType | undefined;
+        readonly m?: SpacingValueType | undefined;
+        readonly l?: SpacingValueType | undefined;
+        readonly xl?: SpacingValueType | undefined;
+    };
+    minWidth: SpacingValueType | {
+        readonly base?: SpacingValueType | undefined;
+        readonly xs?: SpacingValueType | undefined;
+        readonly s?: SpacingValueType | undefined;
+        readonly m?: SpacingValueType | undefined;
+        readonly l?: SpacingValueType | undefined;
+        readonly xl?: SpacingValueType | undefined;
+    };
+    overflowX?: csstype.Property.OverflowX | {
+        readonly base?: csstype.Property.OverflowX | undefined;
+        readonly xs?: csstype.Property.OverflowX | undefined;
+        readonly s?: csstype.Property.OverflowX | undefined;
+        readonly m?: csstype.Property.OverflowX | undefined;
+        readonly l?: csstype.Property.OverflowX | undefined;
+        readonly xl?: csstype.Property.OverflowX | undefined;
+    } | undefined;
+    overflowY?: csstype.Property.OverflowY | {
+        readonly base?: csstype.Property.OverflowY | undefined;
+        readonly xs?: csstype.Property.OverflowY | undefined;
+        readonly s?: csstype.Property.OverflowY | undefined;
+        readonly m?: csstype.Property.OverflowY | undefined;
+        readonly l?: csstype.Property.OverflowY | undefined;
+        readonly xl?: csstype.Property.OverflowY | undefined;
+    } | undefined;
+    textAlign?: csstype.Property.TextAlign | {
+        readonly base?: csstype.Property.TextAlign | undefined;
+        readonly xs?: csstype.Property.TextAlign | undefined;
+        readonly s?: csstype.Property.TextAlign | undefined;
+        readonly m?: csstype.Property.TextAlign | undefined;
+        readonly l?: csstype.Property.TextAlign | undefined;
+        readonly xl?: csstype.Property.TextAlign | undefined;
+    } | undefined;
+    whiteSpace?: csstype.Property.WhiteSpace | {
+        readonly base?: csstype.Property.WhiteSpace | undefined;
+        readonly xs?: csstype.Property.WhiteSpace | undefined;
+        readonly s?: csstype.Property.WhiteSpace | undefined;
+        readonly m?: csstype.Property.WhiteSpace | undefined;
+        readonly l?: csstype.Property.WhiteSpace | undefined;
+        readonly xl?: csstype.Property.WhiteSpace | undefined;
+    } | undefined;
+    overflow?: csstype.Property.Overflow | {
+        readonly base?: csstype.Property.Overflow | undefined;
+        readonly xs?: csstype.Property.Overflow | undefined;
+        readonly s?: csstype.Property.Overflow | undefined;
+        readonly m?: csstype.Property.Overflow | undefined;
+        readonly l?: csstype.Property.Overflow | undefined;
+        readonly xl?: csstype.Property.Overflow | undefined;
+    } | undefined;
+    __brand__?: "platform-web" | {
+        readonly base?: "platform-web" | undefined;
+        readonly xs?: "platform-web" | undefined;
+        readonly s?: "platform-web" | undefined;
+        readonly m?: "platform-web" | undefined;
+        readonly l?: "platform-web" | undefined;
+        readonly xl?: "platform-web" | undefined;
+    } | undefined;
+}, "display"> & Pick<{
+    elevation?: ElevationLevels | {
+        readonly base?: ElevationLevels | undefined;
+        readonly xs?: ElevationLevels | undefined;
+        readonly s?: ElevationLevels | undefined;
+        readonly m?: ElevationLevels | undefined;
+        readonly l?: ElevationLevels | undefined;
+        readonly xl?: ElevationLevels | undefined;
+    } | undefined;
+    backgroundImage?: csstype.Property.BackgroundImage | {
+        readonly base?: csstype.Property.BackgroundImage | undefined;
+        readonly xs?: csstype.Property.BackgroundImage | undefined;
+        readonly s?: csstype.Property.BackgroundImage | undefined;
+        readonly m?: csstype.Property.BackgroundImage | undefined;
+        readonly l?: csstype.Property.BackgroundImage | undefined;
+        readonly xl?: csstype.Property.BackgroundImage | undefined;
+    } | undefined;
+    backgroundOrigin?: csstype.Property.BackgroundOrigin | {
+        readonly base?: csstype.Property.BackgroundOrigin | undefined;
+        readonly xs?: csstype.Property.BackgroundOrigin | undefined;
+        readonly s?: csstype.Property.BackgroundOrigin | undefined;
+        readonly m?: csstype.Property.BackgroundOrigin | undefined;
+        readonly l?: csstype.Property.BackgroundOrigin | undefined;
+        readonly xl?: csstype.Property.BackgroundOrigin | undefined;
+    } | undefined;
+    backgroundRepeat?: csstype.Property.BackgroundRepeat | {
+        readonly base?: csstype.Property.BackgroundRepeat | undefined;
+        readonly xs?: csstype.Property.BackgroundRepeat | undefined;
+        readonly s?: csstype.Property.BackgroundRepeat | undefined;
+        readonly m?: csstype.Property.BackgroundRepeat | undefined;
+        readonly l?: csstype.Property.BackgroundRepeat | undefined;
+        readonly xl?: csstype.Property.BackgroundRepeat | undefined;
+    } | undefined;
+    backgroundSize?: csstype.Property.BackgroundSize<string | number> | {
+        readonly base?: csstype.Property.BackgroundSize<string | number> | undefined;
+        readonly xs?: csstype.Property.BackgroundSize<string | number> | undefined;
+        readonly s?: csstype.Property.BackgroundSize<string | number> | undefined;
+        readonly m?: csstype.Property.BackgroundSize<string | number> | undefined;
+        readonly l?: csstype.Property.BackgroundSize<string | number> | undefined;
+        readonly xl?: csstype.Property.BackgroundSize<string | number> | undefined;
+    } | undefined;
+    borderBottomColor: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | {
+        readonly base?: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | undefined;
+        readonly xs?: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | undefined;
+        readonly s?: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | undefined;
+        readonly m?: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | undefined;
+        readonly l?: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | undefined;
+        readonly xl?: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | undefined;
+    };
+    borderBottomLeftRadius: "none" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "max" | "round" | {
+        readonly base?: "none" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "max" | "round" | undefined;
+        readonly xs?: "none" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "max" | "round" | undefined;
+        readonly s?: "none" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "max" | "round" | undefined;
+        readonly m?: "none" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "max" | "round" | undefined;
+        readonly l?: "none" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "max" | "round" | undefined;
+        readonly xl?: "none" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "max" | "round" | undefined;
+    };
+    borderBottomRightRadius: "none" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "max" | "round" | {
+        readonly base?: "none" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "max" | "round" | undefined;
+        readonly xs?: "none" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "max" | "round" | undefined;
+        readonly s?: "none" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "max" | "round" | undefined;
+        readonly m?: "none" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "max" | "round" | undefined;
+        readonly l?: "none" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "max" | "round" | undefined;
+        readonly xl?: "none" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "max" | "round" | undefined;
+    };
+    borderBottomStyle?: csstype.Property.BorderBottomStyle | {
+        readonly base?: csstype.Property.BorderBottomStyle | undefined;
+        readonly xs?: csstype.Property.BorderBottomStyle | undefined;
+        readonly s?: csstype.Property.BorderBottomStyle | undefined;
+        readonly m?: csstype.Property.BorderBottomStyle | undefined;
+        readonly l?: csstype.Property.BorderBottomStyle | undefined;
+        readonly xl?: csstype.Property.BorderBottomStyle | undefined;
+    } | undefined;
+    borderBottomWidth: "none" | "thinner" | "thin" | "thick" | "thicker" | {
+        readonly base?: "none" | "thinner" | "thin" | "thick" | "thicker" | undefined;
+        readonly xs?: "none" | "thinner" | "thin" | "thick" | "thicker" | undefined;
+        readonly s?: "none" | "thinner" | "thin" | "thick" | "thicker" | undefined;
+        readonly m?: "none" | "thinner" | "thin" | "thick" | "thicker" | undefined;
+        readonly l?: "none" | "thinner" | "thin" | "thick" | "thicker" | undefined;
+        readonly xl?: "none" | "thinner" | "thin" | "thick" | "thicker" | undefined;
+    };
+    borderLeftColor: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | {
+        readonly base?: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | undefined;
+        readonly xs?: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | undefined;
+        readonly s?: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | undefined;
+        readonly m?: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | undefined;
+        readonly l?: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | undefined;
+        readonly xl?: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | undefined;
+    };
+    borderLeftStyle?: csstype.Property.BorderLeftStyle | {
+        readonly base?: csstype.Property.BorderLeftStyle | undefined;
+        readonly xs?: csstype.Property.BorderLeftStyle | undefined;
+        readonly s?: csstype.Property.BorderLeftStyle | undefined;
+        readonly m?: csstype.Property.BorderLeftStyle | undefined;
+        readonly l?: csstype.Property.BorderLeftStyle | undefined;
+        readonly xl?: csstype.Property.BorderLeftStyle | undefined;
+    } | undefined;
+    borderLeftWidth: "none" | "thinner" | "thin" | "thick" | "thicker" | {
+        readonly base?: "none" | "thinner" | "thin" | "thick" | "thicker" | undefined;
+        readonly xs?: "none" | "thinner" | "thin" | "thick" | "thicker" | undefined;
+        readonly s?: "none" | "thinner" | "thin" | "thick" | "thicker" | undefined;
+        readonly m?: "none" | "thinner" | "thin" | "thick" | "thicker" | undefined;
+        readonly l?: "none" | "thinner" | "thin" | "thick" | "thicker" | undefined;
+        readonly xl?: "none" | "thinner" | "thin" | "thick" | "thicker" | undefined;
+    };
+    borderRightColor: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | {
+        readonly base?: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | undefined;
+        readonly xs?: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | undefined;
+        readonly s?: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | undefined;
+        readonly m?: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | undefined;
+        readonly l?: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | undefined;
+        readonly xl?: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | undefined;
+    };
+    borderRightStyle?: csstype.Property.BorderRightStyle | {
+        readonly base?: csstype.Property.BorderRightStyle | undefined;
+        readonly xs?: csstype.Property.BorderRightStyle | undefined;
+        readonly s?: csstype.Property.BorderRightStyle | undefined;
+        readonly m?: csstype.Property.BorderRightStyle | undefined;
+        readonly l?: csstype.Property.BorderRightStyle | undefined;
+        readonly xl?: csstype.Property.BorderRightStyle | undefined;
+    } | undefined;
+    borderRightWidth: "none" | "thinner" | "thin" | "thick" | "thicker" | {
+        readonly base?: "none" | "thinner" | "thin" | "thick" | "thicker" | undefined;
+        readonly xs?: "none" | "thinner" | "thin" | "thick" | "thicker" | undefined;
+        readonly s?: "none" | "thinner" | "thin" | "thick" | "thicker" | undefined;
+        readonly m?: "none" | "thinner" | "thin" | "thick" | "thicker" | undefined;
+        readonly l?: "none" | "thinner" | "thin" | "thick" | "thicker" | undefined;
+        readonly xl?: "none" | "thinner" | "thin" | "thick" | "thicker" | undefined;
+    };
+    borderTopColor: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | {
+        readonly base?: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | undefined;
+        readonly xs?: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | undefined;
+        readonly s?: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | undefined;
+        readonly m?: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | undefined;
+        readonly l?: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | undefined;
+        readonly xl?: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | undefined;
+    };
+    borderTopLeftRadius: "none" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "max" | "round" | {
+        readonly base?: "none" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "max" | "round" | undefined;
+        readonly xs?: "none" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "max" | "round" | undefined;
+        readonly s?: "none" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "max" | "round" | undefined;
+        readonly m?: "none" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "max" | "round" | undefined;
+        readonly l?: "none" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "max" | "round" | undefined;
+        readonly xl?: "none" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "max" | "round" | undefined;
+    };
+    borderTopRightRadius: "none" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "max" | "round" | {
+        readonly base?: "none" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "max" | "round" | undefined;
+        readonly xs?: "none" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "max" | "round" | undefined;
+        readonly s?: "none" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "max" | "round" | undefined;
+        readonly m?: "none" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "max" | "round" | undefined;
+        readonly l?: "none" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "max" | "round" | undefined;
+        readonly xl?: "none" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "max" | "round" | undefined;
+    };
+    borderTopStyle?: csstype.Property.BorderTopStyle | {
+        readonly base?: csstype.Property.BorderTopStyle | undefined;
+        readonly xs?: csstype.Property.BorderTopStyle | undefined;
+        readonly s?: csstype.Property.BorderTopStyle | undefined;
+        readonly m?: csstype.Property.BorderTopStyle | undefined;
+        readonly l?: csstype.Property.BorderTopStyle | undefined;
+        readonly xl?: csstype.Property.BorderTopStyle | undefined;
+    } | undefined;
+    borderTopWidth: "none" | "thinner" | "thin" | "thick" | "thicker" | {
+        readonly base?: "none" | "thinner" | "thin" | "thick" | "thicker" | undefined;
+        readonly xs?: "none" | "thinner" | "thin" | "thick" | "thicker" | undefined;
+        readonly s?: "none" | "thinner" | "thin" | "thick" | "thicker" | undefined;
+        readonly m?: "none" | "thinner" | "thin" | "thick" | "thicker" | undefined;
+        readonly l?: "none" | "thinner" | "thin" | "thick" | "thicker" | undefined;
+        readonly xl?: "none" | "thinner" | "thin" | "thick" | "thicker" | undefined;
+    };
+    clipPath?: csstype.Property.ClipPath | {
+        readonly base?: csstype.Property.ClipPath | undefined;
+        readonly xs?: csstype.Property.ClipPath | undefined;
+        readonly s?: csstype.Property.ClipPath | undefined;
+        readonly m?: csstype.Property.ClipPath | undefined;
+        readonly l?: csstype.Property.ClipPath | undefined;
+        readonly xl?: csstype.Property.ClipPath | undefined;
+    } | undefined;
+    opacity?: csstype.Property.Opacity | {
+        readonly base?: csstype.Property.Opacity | undefined;
+        readonly xs?: csstype.Property.Opacity | undefined;
+        readonly s?: csstype.Property.Opacity | undefined;
+        readonly m?: csstype.Property.Opacity | undefined;
+        readonly l?: csstype.Property.Opacity | undefined;
+        readonly xl?: csstype.Property.Opacity | undefined;
+    } | undefined;
+    pointerEvents?: csstype.Property.PointerEvents | {
+        readonly base?: csstype.Property.PointerEvents | undefined;
+        readonly xs?: csstype.Property.PointerEvents | undefined;
+        readonly s?: csstype.Property.PointerEvents | undefined;
+        readonly m?: csstype.Property.PointerEvents | undefined;
+        readonly l?: csstype.Property.PointerEvents | undefined;
+        readonly xl?: csstype.Property.PointerEvents | undefined;
+    } | undefined;
+    transform?: csstype.Property.Transform | {
+        readonly base?: csstype.Property.Transform | undefined;
+        readonly xs?: csstype.Property.Transform | undefined;
+        readonly s?: csstype.Property.Transform | undefined;
+        readonly m?: csstype.Property.Transform | undefined;
+        readonly l?: csstype.Property.Transform | undefined;
+        readonly xl?: csstype.Property.Transform | undefined;
+    } | undefined;
+    transformOrigin?: csstype.Property.TransformOrigin<string | number> | {
+        readonly base?: csstype.Property.TransformOrigin<string | number> | undefined;
+        readonly xs?: csstype.Property.TransformOrigin<string | number> | undefined;
+        readonly s?: csstype.Property.TransformOrigin<string | number> | undefined;
+        readonly m?: csstype.Property.TransformOrigin<string | number> | undefined;
+        readonly l?: csstype.Property.TransformOrigin<string | number> | undefined;
+        readonly xl?: csstype.Property.TransformOrigin<string | number> | undefined;
+    } | undefined;
+    visibility?: csstype.Property.Visibility | {
+        readonly base?: csstype.Property.Visibility | undefined;
+        readonly xs?: csstype.Property.Visibility | undefined;
+        readonly s?: csstype.Property.Visibility | undefined;
+        readonly m?: csstype.Property.Visibility | undefined;
+        readonly l?: csstype.Property.Visibility | undefined;
+        readonly xl?: csstype.Property.Visibility | undefined;
+    } | undefined;
+    backgroundPosition?: csstype.Property.BackgroundPosition<string | number> | {
+        readonly base?: csstype.Property.BackgroundPosition<string | number> | undefined;
+        readonly xs?: csstype.Property.BackgroundPosition<string | number> | undefined;
+        readonly s?: csstype.Property.BackgroundPosition<string | number> | undefined;
+        readonly m?: csstype.Property.BackgroundPosition<string | number> | undefined;
+        readonly l?: csstype.Property.BackgroundPosition<string | number> | undefined;
+        readonly xl?: csstype.Property.BackgroundPosition<string | number> | undefined;
+    } | undefined;
+    borderColor: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | {
+        readonly base?: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | undefined;
+        readonly xs?: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | undefined;
+        readonly s?: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | undefined;
+        readonly m?: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | undefined;
+        readonly l?: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | undefined;
+        readonly xl?: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | undefined;
+    };
+    borderRadius: "none" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "max" | "round" | {
+        readonly base?: "none" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "max" | "round" | undefined;
+        readonly xs?: "none" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "max" | "round" | undefined;
+        readonly s?: "none" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "max" | "round" | undefined;
+        readonly m?: "none" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "max" | "round" | undefined;
+        readonly l?: "none" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "max" | "round" | undefined;
+        readonly xl?: "none" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "max" | "round" | undefined;
+    };
+    borderStyle?: csstype.Property.BorderStyle | {
+        readonly base?: csstype.Property.BorderStyle | undefined;
+        readonly xs?: csstype.Property.BorderStyle | undefined;
+        readonly s?: csstype.Property.BorderStyle | undefined;
+        readonly m?: csstype.Property.BorderStyle | undefined;
+        readonly l?: csstype.Property.BorderStyle | undefined;
+        readonly xl?: csstype.Property.BorderStyle | undefined;
+    } | undefined;
+    borderWidth: "none" | "thinner" | "thin" | "thick" | "thicker" | {
+        readonly base?: "none" | "thinner" | "thin" | "thick" | "thicker" | undefined;
+        readonly xs?: "none" | "thinner" | "thin" | "thick" | "thicker" | undefined;
+        readonly s?: "none" | "thinner" | "thin" | "thick" | "thicker" | undefined;
+        readonly m?: "none" | "thinner" | "thin" | "thick" | "thicker" | undefined;
+        readonly l?: "none" | "thinner" | "thin" | "thick" | "thicker" | undefined;
+        readonly xl?: "none" | "thinner" | "thin" | "thick" | "thicker" | undefined;
+    };
+    __brand__?: "platform-web" | {
+        readonly base?: "platform-web" | undefined;
+        readonly xs?: "platform-web" | undefined;
+        readonly s?: "platform-web" | undefined;
+        readonly m?: "platform-web" | undefined;
+        readonly l?: "platform-web" | undefined;
+        readonly xl?: "platform-web" | undefined;
+    } | undefined;
+}, "visibility">, "__brand__">> & {
     onClick: (event: React__default.MouseEvent<HTMLButtonElement>) => void;
     /**
      * This changes the hover interaction to highlight icon more
@@ -7829,7 +8385,7 @@ type ButtonGroupProps = {
      * Test ID for automation
      */
     testID?: string;
-} & DataAnalyticsAttribute;
+} & DataAnalyticsAttribute & StyledPropsBlade;
 /**
  * ### ButtonGroup Component
@@ -7865,7 +8421,563 @@ declare const ButtonGroup: React__default.ForwardRefExoticComponent<{
     isFullWidth?: boolean | undefined;
     isDisabled?: boolean | undefined;
     testID?: string | undefined;
-} & DataAnalyticsAttribute & React__default.RefAttributes<BladeElementRef>>;
+} & DataAnalyticsAttribute & Partial<Omit<MarginProps & Pick<FlexboxProps, "alignSelf" | "justifySelf" | "order" | "placeSelf"> & {
+    bottom: SpacingValueType | {
+        readonly base?: SpacingValueType | undefined;
+        readonly xs?: SpacingValueType | undefined;
+        readonly s?: SpacingValueType | undefined;
+        readonly m?: SpacingValueType | undefined;
+        readonly l?: SpacingValueType | undefined;
+        readonly xl?: SpacingValueType | undefined;
+    };
+    left: SpacingValueType | {
+        readonly base?: SpacingValueType | undefined;
+        readonly xs?: SpacingValueType | undefined;
+        readonly s?: SpacingValueType | undefined;
+        readonly m?: SpacingValueType | undefined;
+        readonly l?: SpacingValueType | undefined;
+        readonly xl?: SpacingValueType | undefined;
+    };
+    position?: csstype.Property.Position | {
+        readonly base?: csstype.Property.Position | undefined;
+        readonly xs?: csstype.Property.Position | undefined;
+        readonly s?: csstype.Property.Position | undefined;
+        readonly m?: csstype.Property.Position | undefined;
+        readonly l?: csstype.Property.Position | undefined;
+        readonly xl?: csstype.Property.Position | undefined;
+    } | undefined;
+    right: SpacingValueType | {
+        readonly base?: SpacingValueType | undefined;
+        readonly xs?: SpacingValueType | undefined;
+        readonly s?: SpacingValueType | undefined;
+        readonly m?: SpacingValueType | undefined;
+        readonly l?: SpacingValueType | undefined;
+        readonly xl?: SpacingValueType | undefined;
+    };
+    top: SpacingValueType | {
+        readonly base?: SpacingValueType | undefined;
+        readonly xs?: SpacingValueType | undefined;
+        readonly s?: SpacingValueType | undefined;
+        readonly m?: SpacingValueType | undefined;
+        readonly l?: SpacingValueType | undefined;
+        readonly xl?: SpacingValueType | undefined;
+    };
+    zIndex?: csstype.Property.ZIndex | {
+        readonly base?: csstype.Property.ZIndex | undefined;
+        readonly xs?: csstype.Property.ZIndex | undefined;
+        readonly s?: csstype.Property.ZIndex | undefined;
+        readonly m?: csstype.Property.ZIndex | undefined;
+        readonly l?: csstype.Property.ZIndex | undefined;
+        readonly xl?: csstype.Property.ZIndex | undefined;
+    } | undefined;
+    __brand__?: "platform-web" | {
+        readonly base?: "platform-web" | undefined;
+        readonly xs?: "platform-web" | undefined;
+        readonly s?: "platform-web" | undefined;
+        readonly m?: "platform-web" | undefined;
+        readonly l?: "platform-web" | undefined;
+        readonly xl?: "platform-web" | undefined;
+    } | undefined;
+} & Pick<{
+    gridAutoColumns?: csstype.Property.GridAutoColumns<string | number> | {
+        readonly base?: csstype.Property.GridAutoColumns<string | number> | undefined;
+        readonly xs?: csstype.Property.GridAutoColumns<string | number> | undefined;
+        readonly s?: csstype.Property.GridAutoColumns<string | number> | undefined;
+        readonly m?: csstype.Property.GridAutoColumns<string | number> | undefined;
+        readonly l?: csstype.Property.GridAutoColumns<string | number> | undefined;
+        readonly xl?: csstype.Property.GridAutoColumns<string | number> | undefined;
+    } | undefined;
+    gridAutoFlow?: csstype.Property.GridAutoFlow | {
+        readonly base?: csstype.Property.GridAutoFlow | undefined;
+        readonly xs?: csstype.Property.GridAutoFlow | undefined;
+        readonly s?: csstype.Property.GridAutoFlow | undefined;
+        readonly m?: csstype.Property.GridAutoFlow | undefined;
+        readonly l?: csstype.Property.GridAutoFlow | undefined;
+        readonly xl?: csstype.Property.GridAutoFlow | undefined;
+    } | undefined;
+    gridAutoRows?: csstype.Property.GridAutoRows<string | number> | {
+        readonly base?: csstype.Property.GridAutoRows<string | number> | undefined;
+        readonly xs?: csstype.Property.GridAutoRows<string | number> | undefined;
+        readonly s?: csstype.Property.GridAutoRows<string | number> | undefined;
+        readonly m?: csstype.Property.GridAutoRows<string | number> | undefined;
+        readonly l?: csstype.Property.GridAutoRows<string | number> | undefined;
+        readonly xl?: csstype.Property.GridAutoRows<string | number> | undefined;
+    } | undefined;
+    gridColumnEnd?: csstype.Property.GridColumnEnd | {
+        readonly base?: csstype.Property.GridColumnEnd | undefined;
+        readonly xs?: csstype.Property.GridColumnEnd | undefined;
+        readonly s?: csstype.Property.GridColumnEnd | undefined;
+        readonly m?: csstype.Property.GridColumnEnd | undefined;
+        readonly l?: csstype.Property.GridColumnEnd | undefined;
+        readonly xl?: csstype.Property.GridColumnEnd | undefined;
+    } | undefined;
+    gridColumnStart?: csstype.Property.GridColumnStart | {
+        readonly base?: csstype.Property.GridColumnStart | undefined;
+        readonly xs?: csstype.Property.GridColumnStart | undefined;
+        readonly s?: csstype.Property.GridColumnStart | undefined;
+        readonly m?: csstype.Property.GridColumnStart | undefined;
+        readonly l?: csstype.Property.GridColumnStart | undefined;
+        readonly xl?: csstype.Property.GridColumnStart | undefined;
+    } | undefined;
+    gridRowEnd?: csstype.Property.GridRowEnd | {
+        readonly base?: csstype.Property.GridRowEnd | undefined;
+        readonly xs?: csstype.Property.GridRowEnd | undefined;
+        readonly s?: csstype.Property.GridRowEnd | undefined;
+        readonly m?: csstype.Property.GridRowEnd | undefined;
+        readonly l?: csstype.Property.GridRowEnd | undefined;
+        readonly xl?: csstype.Property.GridRowEnd | undefined;
+    } | undefined;
+    gridRowStart?: csstype.Property.GridRowStart | {
+        readonly base?: csstype.Property.GridRowStart | undefined;
+        readonly xs?: csstype.Property.GridRowStart | undefined;
+        readonly s?: csstype.Property.GridRowStart | undefined;
+        readonly m?: csstype.Property.GridRowStart | undefined;
+        readonly l?: csstype.Property.GridRowStart | undefined;
+        readonly xl?: csstype.Property.GridRowStart | undefined;
+    } | undefined;
+    gridTemplateAreas?: csstype.Property.GridTemplateAreas | {
+        readonly base?: csstype.Property.GridTemplateAreas | undefined;
+        readonly xs?: csstype.Property.GridTemplateAreas | undefined;
+        readonly s?: csstype.Property.GridTemplateAreas | undefined;
+        readonly m?: csstype.Property.GridTemplateAreas | undefined;
+        readonly l?: csstype.Property.GridTemplateAreas | undefined;
+        readonly xl?: csstype.Property.GridTemplateAreas | undefined;
+    } | undefined;
+    gridTemplateColumns?: csstype.Property.GridTemplateColumns<string | number> | {
+        readonly base?: csstype.Property.GridTemplateColumns<string | number> | undefined;
+        readonly xs?: csstype.Property.GridTemplateColumns<string | number> | undefined;
+        readonly s?: csstype.Property.GridTemplateColumns<string | number> | undefined;
+        readonly m?: csstype.Property.GridTemplateColumns<string | number> | undefined;
+        readonly l?: csstype.Property.GridTemplateColumns<string | number> | undefined;
+        readonly xl?: csstype.Property.GridTemplateColumns<string | number> | undefined;
+    } | undefined;
+    gridTemplateRows?: csstype.Property.GridTemplateRows<string | number> | {
+        readonly base?: csstype.Property.GridTemplateRows<string | number> | undefined;
+        readonly xs?: csstype.Property.GridTemplateRows<string | number> | undefined;
+        readonly s?: csstype.Property.GridTemplateRows<string | number> | undefined;
+        readonly m?: csstype.Property.GridTemplateRows<string | number> | undefined;
+        readonly l?: csstype.Property.GridTemplateRows<string | number> | undefined;
+        readonly xl?: csstype.Property.GridTemplateRows<string | number> | undefined;
+    } | undefined;
+    grid?: csstype.Property.Grid | {
+        readonly base?: csstype.Property.Grid | undefined;
+        readonly xs?: csstype.Property.Grid | undefined;
+        readonly s?: csstype.Property.Grid | undefined;
+        readonly m?: csstype.Property.Grid | undefined;
+        readonly l?: csstype.Property.Grid | undefined;
+        readonly xl?: csstype.Property.Grid | undefined;
+    } | undefined;
+    gridArea?: csstype.Property.GridArea | {
+        readonly base?: csstype.Property.GridArea | undefined;
+        readonly xs?: csstype.Property.GridArea | undefined;
+        readonly s?: csstype.Property.GridArea | undefined;
+        readonly m?: csstype.Property.GridArea | undefined;
+        readonly l?: csstype.Property.GridArea | undefined;
+        readonly xl?: csstype.Property.GridArea | undefined;
+    } | undefined;
+    gridColumn?: csstype.Property.GridColumn | {
+        readonly base?: csstype.Property.GridColumn | undefined;
+        readonly xs?: csstype.Property.GridColumn | undefined;
+        readonly s?: csstype.Property.GridColumn | undefined;
+        readonly m?: csstype.Property.GridColumn | undefined;
+        readonly l?: csstype.Property.GridColumn | undefined;
+        readonly xl?: csstype.Property.GridColumn | undefined;
+    } | undefined;
+    gridRow?: csstype.Property.GridRow | {
+        readonly base?: csstype.Property.GridRow | undefined;
+        readonly xs?: csstype.Property.GridRow | undefined;
+        readonly s?: csstype.Property.GridRow | undefined;
+        readonly m?: csstype.Property.GridRow | undefined;
+        readonly l?: csstype.Property.GridRow | undefined;
+        readonly xl?: csstype.Property.GridRow | undefined;
+    } | undefined;
+    gridTemplate?: csstype.Property.GridTemplate | {
+        readonly base?: csstype.Property.GridTemplate | undefined;
+        readonly xs?: csstype.Property.GridTemplate | undefined;
+        readonly s?: csstype.Property.GridTemplate | undefined;
+        readonly m?: csstype.Property.GridTemplate | undefined;
+        readonly l?: csstype.Property.GridTemplate | undefined;
+        readonly xl?: csstype.Property.GridTemplate | undefined;
+    } | undefined;
+    __brand__?: "platform-web" | {
+        readonly base?: "platform-web" | undefined;
+        readonly xs?: "platform-web" | undefined;
+        readonly s?: "platform-web" | undefined;
+        readonly m?: "platform-web" | undefined;
+        readonly l?: "platform-web" | undefined;
+        readonly xl?: "platform-web" | undefined;
+    } | undefined;
+}, "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridArea" | "gridColumn" | "gridRow"> & Pick<{
+    width: SpacingValueType | {
+        readonly base?: SpacingValueType | undefined;
+        readonly xs?: SpacingValueType | undefined;
+        readonly s?: SpacingValueType | undefined;
+        readonly m?: SpacingValueType | undefined;
+        readonly l?: SpacingValueType | undefined;
+        readonly xl?: SpacingValueType | undefined;
+    };
+    display?: csstype.Property.Display | {
+        readonly base?: csstype.Property.Display | undefined;
+        readonly xs?: csstype.Property.Display | undefined;
+        readonly s?: csstype.Property.Display | undefined;
+        readonly m?: csstype.Property.Display | undefined;
+        readonly l?: csstype.Property.Display | undefined;
+        readonly xl?: csstype.Property.Display | undefined;
+    } | undefined;
+    height: SpacingValueType | {
+        readonly base?: SpacingValueType | undefined;
+        readonly xs?: SpacingValueType | undefined;
+        readonly s?: SpacingValueType | undefined;
+        readonly m?: SpacingValueType | undefined;
+        readonly l?: SpacingValueType | undefined;
+        readonly xl?: SpacingValueType | undefined;
+    };
+    maxHeight: SpacingValueType | {
+        readonly base?: SpacingValueType | undefined;
+        readonly xs?: SpacingValueType | undefined;
+        readonly s?: SpacingValueType | undefined;
+        readonly m?: SpacingValueType | undefined;
+        readonly l?: SpacingValueType | undefined;
+        readonly xl?: SpacingValueType | undefined;
+    };
+    maxWidth: SpacingValueType | {
+        readonly base?: SpacingValueType | undefined;
+        readonly xs?: SpacingValueType | undefined;
+        readonly s?: SpacingValueType | undefined;
+        readonly m?: SpacingValueType | undefined;
+        readonly l?: SpacingValueType | undefined;
+        readonly xl?: SpacingValueType | undefined;
+    };
+    minHeight: SpacingValueType | {
+        readonly base?: SpacingValueType | undefined;
+        readonly xs?: SpacingValueType | undefined;
+        readonly s?: SpacingValueType | undefined;
+        readonly m?: SpacingValueType | undefined;
+        readonly l?: SpacingValueType | undefined;
+        readonly xl?: SpacingValueType | undefined;
+    };
+    minWidth: SpacingValueType | {
+        readonly base?: SpacingValueType | undefined;
+        readonly xs?: SpacingValueType | undefined;
+        readonly s?: SpacingValueType | undefined;
+        readonly m?: SpacingValueType | undefined;
+        readonly l?: SpacingValueType | undefined;
+        readonly xl?: SpacingValueType | undefined;
+    };
+    overflowX?: csstype.Property.OverflowX | {
+        readonly base?: csstype.Property.OverflowX | undefined;
+        readonly xs?: csstype.Property.OverflowX | undefined;
+        readonly s?: csstype.Property.OverflowX | undefined;
+        readonly m?: csstype.Property.OverflowX | undefined;
+        readonly l?: csstype.Property.OverflowX | undefined;
+        readonly xl?: csstype.Property.OverflowX | undefined;
+    } | undefined;
+    overflowY?: csstype.Property.OverflowY | {
+        readonly base?: csstype.Property.OverflowY | undefined;
+        readonly xs?: csstype.Property.OverflowY | undefined;
+        readonly s?: csstype.Property.OverflowY | undefined;
+        readonly m?: csstype.Property.OverflowY | undefined;
+        readonly l?: csstype.Property.OverflowY | undefined;
+        readonly xl?: csstype.Property.OverflowY | undefined;
+    } | undefined;
+    textAlign?: csstype.Property.TextAlign | {
+        readonly base?: csstype.Property.TextAlign | undefined;
+        readonly xs?: csstype.Property.TextAlign | undefined;
+        readonly s?: csstype.Property.TextAlign | undefined;
+        readonly m?: csstype.Property.TextAlign | undefined;
+        readonly l?: csstype.Property.TextAlign | undefined;
+        readonly xl?: csstype.Property.TextAlign | undefined;
+    } | undefined;
+    whiteSpace?: csstype.Property.WhiteSpace | {
+        readonly base?: csstype.Property.WhiteSpace | undefined;
+        readonly xs?: csstype.Property.WhiteSpace | undefined;
+        readonly s?: csstype.Property.WhiteSpace | undefined;
+        readonly m?: csstype.Property.WhiteSpace | undefined;
+        readonly l?: csstype.Property.WhiteSpace | undefined;
+        readonly xl?: csstype.Property.WhiteSpace | undefined;
+    } | undefined;
+    overflow?: csstype.Property.Overflow | {
+        readonly base?: csstype.Property.Overflow | undefined;
+        readonly xs?: csstype.Property.Overflow | undefined;
+        readonly s?: csstype.Property.Overflow | undefined;
+        readonly m?: csstype.Property.Overflow | undefined;
+        readonly l?: csstype.Property.Overflow | undefined;
+        readonly xl?: csstype.Property.Overflow | undefined;
+    } | undefined;
+    __brand__?: "platform-web" | {
+        readonly base?: "platform-web" | undefined;
+        readonly xs?: "platform-web" | undefined;
+        readonly s?: "platform-web" | undefined;
+        readonly m?: "platform-web" | undefined;
+        readonly l?: "platform-web" | undefined;
+        readonly xl?: "platform-web" | undefined;
+    } | undefined;
+}, "display"> & Pick<{
+    elevation?: ElevationLevels | {
+        readonly base?: ElevationLevels | undefined;
+        readonly xs?: ElevationLevels | undefined;
+        readonly s?: ElevationLevels | undefined;
+        readonly m?: ElevationLevels | undefined;
+        readonly l?: ElevationLevels | undefined;
+        readonly xl?: ElevationLevels | undefined;
+    } | undefined;
+    backgroundImage?: csstype.Property.BackgroundImage | {
+        readonly base?: csstype.Property.BackgroundImage | undefined;
+        readonly xs?: csstype.Property.BackgroundImage | undefined;
+        readonly s?: csstype.Property.BackgroundImage | undefined;
+        readonly m?: csstype.Property.BackgroundImage | undefined;
+        readonly l?: csstype.Property.BackgroundImage | undefined;
+        readonly xl?: csstype.Property.BackgroundImage | undefined;
+    } | undefined;
+    backgroundOrigin?: csstype.Property.BackgroundOrigin | {
+        readonly base?: csstype.Property.BackgroundOrigin | undefined;
+        readonly xs?: csstype.Property.BackgroundOrigin | undefined;
+        readonly s?: csstype.Property.BackgroundOrigin | undefined;
+        readonly m?: csstype.Property.BackgroundOrigin | undefined;
+        readonly l?: csstype.Property.BackgroundOrigin | undefined;
+        readonly xl?: csstype.Property.BackgroundOrigin | undefined;
+    } | undefined;
+    backgroundRepeat?: csstype.Property.BackgroundRepeat | {
+        readonly base?: csstype.Property.BackgroundRepeat | undefined;
+        readonly xs?: csstype.Property.BackgroundRepeat | undefined;
+        readonly s?: csstype.Property.BackgroundRepeat | undefined;
+        readonly m?: csstype.Property.BackgroundRepeat | undefined;
+        readonly l?: csstype.Property.BackgroundRepeat | undefined;
+        readonly xl?: csstype.Property.BackgroundRepeat | undefined;
+    } | undefined;
+    backgroundSize?: csstype.Property.BackgroundSize<string | number> | {
+        readonly base?: csstype.Property.BackgroundSize<string | number> | undefined;
+        readonly xs?: csstype.Property.BackgroundSize<string | number> | undefined;
+        readonly s?: csstype.Property.BackgroundSize<string | number> | undefined;
+        readonly m?: csstype.Property.BackgroundSize<string | number> | undefined;
+        readonly l?: csstype.Property.BackgroundSize<string | number> | undefined;
+        readonly xl?: csstype.Property.BackgroundSize<string | number> | undefined;
+    } | undefined;
+    borderBottomColor: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | {
+        readonly base?: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | undefined;
+        readonly xs?: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | undefined;
+        readonly s?: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | undefined;
+        readonly m?: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | undefined;
+        readonly l?: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | undefined;
+        readonly xl?: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | undefined;
+    };
+    borderBottomLeftRadius: "none" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "max" | "round" | {
+        readonly base?: "none" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "max" | "round" | undefined;
+        readonly xs?: "none" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "max" | "round" | undefined;
+        readonly s?: "none" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "max" | "round" | undefined;
+        readonly m?: "none" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "max" | "round" | undefined;
+        readonly l?: "none" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "max" | "round" | undefined;
+        readonly xl?: "none" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "max" | "round" | undefined;
+    };
+    borderBottomRightRadius: "none" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "max" | "round" | {
+        readonly base?: "none" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "max" | "round" | undefined;
+        readonly xs?: "none" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "max" | "round" | undefined;
+        readonly s?: "none" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "max" | "round" | undefined;
+        readonly m?: "none" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "max" | "round" | undefined;
+        readonly l?: "none" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "max" | "round" | undefined;
+        readonly xl?: "none" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "max" | "round" | undefined;
+    };
+    borderBottomStyle?: csstype.Property.BorderBottomStyle | {
+        readonly base?: csstype.Property.BorderBottomStyle | undefined;
+        readonly xs?: csstype.Property.BorderBottomStyle | undefined;
+        readonly s?: csstype.Property.BorderBottomStyle | undefined;
+        readonly m?: csstype.Property.BorderBottomStyle | undefined;
+        readonly l?: csstype.Property.BorderBottomStyle | undefined;
+        readonly xl?: csstype.Property.BorderBottomStyle | undefined;
+    } | undefined;
+    borderBottomWidth: "none" | "thinner" | "thin" | "thick" | "thicker" | {
+        readonly base?: "none" | "thinner" | "thin" | "thick" | "thicker" | undefined;
+        readonly xs?: "none" | "thinner" | "thin" | "thick" | "thicker" | undefined;
+        readonly s?: "none" | "thinner" | "thin" | "thick" | "thicker" | undefined;
+        readonly m?: "none" | "thinner" | "thin" | "thick" | "thicker" | undefined;
+        readonly l?: "none" | "thinner" | "thin" | "thick" | "thicker" | undefined;
+        readonly xl?: "none" | "thinner" | "thin" | "thick" | "thicker" | undefined;
+    };
+    borderLeftColor: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | {
+        readonly base?: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | undefined;
+        readonly xs?: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | undefined;
+        readonly s?: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | undefined;
+        readonly m?: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | undefined;
+        readonly l?: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | undefined;
+        readonly xl?: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | undefined;
+    };
+    borderLeftStyle?: csstype.Property.BorderLeftStyle | {
+        readonly base?: csstype.Property.BorderLeftStyle | undefined;
+        readonly xs?: csstype.Property.BorderLeftStyle | undefined;
+        readonly s?: csstype.Property.BorderLeftStyle | undefined;
+        readonly m?: csstype.Property.BorderLeftStyle | undefined;
+        readonly l?: csstype.Property.BorderLeftStyle | undefined;
+        readonly xl?: csstype.Property.BorderLeftStyle | undefined;
+    } | undefined;
+    borderLeftWidth: "none" | "thinner" | "thin" | "thick" | "thicker" | {
+        readonly base?: "none" | "thinner" | "thin" | "thick" | "thicker" | undefined;
+        readonly xs?: "none" | "thinner" | "thin" | "thick" | "thicker" | undefined;
+        readonly s?: "none" | "thinner" | "thin" | "thick" | "thicker" | undefined;
+        readonly m?: "none" | "thinner" | "thin" | "thick" | "thicker" | undefined;
+        readonly l?: "none" | "thinner" | "thin" | "thick" | "thicker" | undefined;
+        readonly xl?: "none" | "thinner" | "thin" | "thick" | "thicker" | undefined;
+    };
+    borderRightColor: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | {
+        readonly base?: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | undefined;
+        readonly xs?: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | undefined;
+        readonly s?: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | undefined;
+        readonly m?: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | undefined;
+        readonly l?: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | undefined;
+        readonly xl?: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | undefined;
+    };
+    borderRightStyle?: csstype.Property.BorderRightStyle | {
+        readonly base?: csstype.Property.BorderRightStyle | undefined;
+        readonly xs?: csstype.Property.BorderRightStyle | undefined;
+        readonly s?: csstype.Property.BorderRightStyle | undefined;
+        readonly m?: csstype.Property.BorderRightStyle | undefined;
+        readonly l?: csstype.Property.BorderRightStyle | undefined;
+        readonly xl?: csstype.Property.BorderRightStyle | undefined;
+    } | undefined;
+    borderRightWidth: "none" | "thinner" | "thin" | "thick" | "thicker" | {
+        readonly base?: "none" | "thinner" | "thin" | "thick" | "thicker" | undefined;
+        readonly xs?: "none" | "thinner" | "thin" | "thick" | "thicker" | undefined;
+        readonly s?: "none" | "thinner" | "thin" | "thick" | "thicker" | undefined;
+        readonly m?: "none" | "thinner" | "thin" | "thick" | "thicker" | undefined;
+        readonly l?: "none" | "thinner" | "thin" | "thick" | "thicker" | undefined;
+        readonly xl?: "none" | "thinner" | "thin" | "thick" | "thicker" | undefined;
+    };
+    borderTopColor: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | {
+        readonly base?: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | undefined;
+        readonly xs?: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | undefined;
+        readonly s?: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | undefined;
+        readonly m?: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | undefined;
+        readonly l?: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | undefined;
+        readonly xl?: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | undefined;
+    };
+    borderTopLeftRadius: "none" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "max" | "round" | {
+        readonly base?: "none" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "max" | "round" | undefined;
+        readonly xs?: "none" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "max" | "round" | undefined;
+        readonly s?: "none" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "max" | "round" | undefined;
+        readonly m?: "none" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "max" | "round" | undefined;
+        readonly l?: "none" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "max" | "round" | undefined;
+        readonly xl?: "none" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "max" | "round" | undefined;
+    };
+    borderTopRightRadius: "none" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "max" | "round" | {
+        readonly base?: "none" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "max" | "round" | undefined;
+        readonly xs?: "none" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "max" | "round" | undefined;
+        readonly s?: "none" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "max" | "round" | undefined;
+        readonly m?: "none" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "max" | "round" | undefined;
+        readonly l?: "none" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "max" | "round" | undefined;
+        readonly xl?: "none" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "max" | "round" | undefined;
+    };
+    borderTopStyle?: csstype.Property.BorderTopStyle | {
+        readonly base?: csstype.Property.BorderTopStyle | undefined;
+        readonly xs?: csstype.Property.BorderTopStyle | undefined;
+        readonly s?: csstype.Property.BorderTopStyle | undefined;
+        readonly m?: csstype.Property.BorderTopStyle | undefined;
+        readonly l?: csstype.Property.BorderTopStyle | undefined;
+        readonly xl?: csstype.Property.BorderTopStyle | undefined;
+    } | undefined;
+    borderTopWidth: "none" | "thinner" | "thin" | "thick" | "thicker" | {
+        readonly base?: "none" | "thinner" | "thin" | "thick" | "thicker" | undefined;
+        readonly xs?: "none" | "thinner" | "thin" | "thick" | "thicker" | undefined;
+        readonly s?: "none" | "thinner" | "thin" | "thick" | "thicker" | undefined;
+        readonly m?: "none" | "thinner" | "thin" | "thick" | "thicker" | undefined;
+        readonly l?: "none" | "thinner" | "thin" | "thick" | "thicker" | undefined;
+        readonly xl?: "none" | "thinner" | "thin" | "thick" | "thicker" | undefined;
+    };
+    clipPath?: csstype.Property.ClipPath | {
+        readonly base?: csstype.Property.ClipPath | undefined;
+        readonly xs?: csstype.Property.ClipPath | undefined;
+        readonly s?: csstype.Property.ClipPath | undefined;
+        readonly m?: csstype.Property.ClipPath | undefined;
+        readonly l?: csstype.Property.ClipPath | undefined;
+        readonly xl?: csstype.Property.ClipPath | undefined;
+    } | undefined;
+    opacity?: csstype.Property.Opacity | {
+        readonly base?: csstype.Property.Opacity | undefined;
+        readonly xs?: csstype.Property.Opacity | undefined;
+        readonly s?: csstype.Property.Opacity | undefined;
+        readonly m?: csstype.Property.Opacity | undefined;
+        readonly l?: csstype.Property.Opacity | undefined;
+        readonly xl?: csstype.Property.Opacity | undefined;
+    } | undefined;
+    pointerEvents?: csstype.Property.PointerEvents | {
+        readonly base?: csstype.Property.PointerEvents | undefined;
+        readonly xs?: csstype.Property.PointerEvents | undefined;
+        readonly s?: csstype.Property.PointerEvents | undefined;
+        readonly m?: csstype.Property.PointerEvents | undefined;
+        readonly l?: csstype.Property.PointerEvents | undefined;
+        readonly xl?: csstype.Property.PointerEvents | undefined;
+    } | undefined;
+    transform?: csstype.Property.Transform | {
+        readonly base?: csstype.Property.Transform | undefined;
+        readonly xs?: csstype.Property.Transform | undefined;
+        readonly s?: csstype.Property.Transform | undefined;
+        readonly m?: csstype.Property.Transform | undefined;
+        readonly l?: csstype.Property.Transform | undefined;
+        readonly xl?: csstype.Property.Transform | undefined;
+    } | undefined;
+    transformOrigin?: csstype.Property.TransformOrigin<string | number> | {
+        readonly base?: csstype.Property.TransformOrigin<string | number> | undefined;
+        readonly xs?: csstype.Property.TransformOrigin<string | number> | undefined;
+        readonly s?: csstype.Property.TransformOrigin<string | number> | undefined;
+        readonly m?: csstype.Property.TransformOrigin<string | number> | undefined;
+        readonly l?: csstype.Property.TransformOrigin<string | number> | undefined;
+        readonly xl?: csstype.Property.TransformOrigin<string | number> | undefined;
+    } | undefined;
+    visibility?: csstype.Property.Visibility | {
+        readonly base?: csstype.Property.Visibility | undefined;
+        readonly xs?: csstype.Property.Visibility | undefined;
+        readonly s?: csstype.Property.Visibility | undefined;
+        readonly m?: csstype.Property.Visibility | undefined;
+        readonly l?: csstype.Property.Visibility | undefined;
+        readonly xl?: csstype.Property.Visibility | undefined;
+    } | undefined;
+    backgroundPosition?: csstype.Property.BackgroundPosition<string | number> | {
+        readonly base?: csstype.Property.BackgroundPosition<string | number> | undefined;
+        readonly xs?: csstype.Property.BackgroundPosition<string | number> | undefined;
+        readonly s?: csstype.Property.BackgroundPosition<string | number> | undefined;
+        readonly m?: csstype.Property.BackgroundPosition<string | number> | undefined;
+        readonly l?: csstype.Property.BackgroundPosition<string | number> | undefined;
+        readonly xl?: csstype.Property.BackgroundPosition<string | number> | undefined;
+    } | undefined;
+    borderColor: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | {
+        readonly base?: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | undefined;
+        readonly xs?: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | undefined;
+        readonly s?: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | undefined;
+        readonly m?: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | undefined;
+        readonly l?: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | undefined;
+        readonly xl?: "surface.border.gray.subtle" | "surface.border.gray.normal" | "surface.border.gray.muted" | "surface.border.primary.normal" | "surface.border.primary.muted" | undefined;
+    };
+    borderRadius: "none" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "max" | "round" | {
+        readonly base?: "none" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "max" | "round" | undefined;
+        readonly xs?: "none" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "max" | "round" | undefined;
+        readonly s?: "none" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "max" | "round" | undefined;
+        readonly m?: "none" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "max" | "round" | undefined;
+        readonly l?: "none" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "max" | "round" | undefined;
+        readonly xl?: "none" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "max" | "round" | undefined;
+    };
+    borderStyle?: csstype.Property.BorderStyle | {
+        readonly base?: csstype.Property.BorderStyle | undefined;
+        readonly xs?: csstype.Property.BorderStyle | undefined;
+        readonly s?: csstype.Property.BorderStyle | undefined;
+        readonly m?: csstype.Property.BorderStyle | undefined;
+        readonly l?: csstype.Property.BorderStyle | undefined;
+        readonly xl?: csstype.Property.BorderStyle | undefined;
+    } | undefined;
+    borderWidth: "none" | "thinner" | "thin" | "thick" | "thicker" | {
+        readonly base?: "none" | "thinner" | "thin" | "thick" | "thicker" | undefined;
+        readonly xs?: "none" | "thinner" | "thin" | "thick" | "thicker" | undefined;
+        readonly s?: "none" | "thinner" | "thin" | "thick" | "thicker" | undefined;
+        readonly m?: "none" | "thinner" | "thin" | "thick" | "thicker" | undefined;
+        readonly l?: "none" | "thinner" | "thin" | "thick" | "thicker" | undefined;
+        readonly xl?: "none" | "thinner" | "thin" | "thick" | "thicker" | undefined;
+    };
+    __brand__?: "platform-web" | {
+        readonly base?: "platform-web" | undefined;
+        readonly xs?: "platform-web" | undefined;
+        readonly s?: "platform-web" | undefined;
+        readonly m?: "platform-web" | undefined;
+        readonly l?: "platform-web" | undefined;
+        readonly xl?: "platform-web" | undefined;
+    } | undefined;
+}, "visibility">, "__brand__">> & React__default.RefAttributes<BladeElementRef>>;
 type CardSpacingValueType = Extract<SpacingValueType, 'spacing.0' | 'spacing.3' | 'spacing.4' | 'spacing.5' | 'spacing.7'>;
@@ -14183,6 +15295,54 @@ declare const Divider: React__default.ForwardRefExoticComponent<{
     } | undefined;
 }, "visibility">, "__brand__">> & React__default.RefAttributes<BladeElementRef>>;
+/**
+ * ### Drawer Component
+ *
+ * A drawer is a panel that slides in mostly from right side of the screen over the existing content in the viewport.
+ * It helps in providing additional details or context and can also be used to promote product features or new products.
+ *
+ * ---
+ *
+ * #### Usage
+ *
+ * ```jsx
+  const MyDrawer = () => {
+    const [showDrawer, setShowDrawer] = React.useState(false);
+    return (
+      <Box>
+        <Button onClick={() => setShowDrawer(true)}>Open Drawer</Button>
+        <Drawer
+          isOpen={showDrawer}
+          onDismiss={() => setShowDrawer(false)}
+        >
+          <DrawerHeader title="Announcements" />
+          <DrawerBody>
+            <FTXAnnouncement />
+            <CatPictures />
+          </DrawerBody>
+        <Drawer>
+      </Box>
+    )
+  }
+ * ```
+ *
+ *  ---
+ *
+ * Checkout {@link https://blade.razorpay.com/?path=/docs/components-drawer Drawer Documentation}
+ *
+ *
+ */
+declare const Drawer: React__default.ForwardRefExoticComponent<{
+    isOpen: boolean;
+    onDismiss: () => void;
+    showOverlay?: boolean | undefined;
+    children: React__default.ReactNode;
+    zIndex?: number | undefined;
+    accessibilityLabel?: string | undefined;
+    initialFocusRef?: React__default.MutableRefObject<any> | undefined;
+    isLazy?: boolean | undefined;
+} & DataAnalyticsAttribute & TestID & React__default.RefAttributes<BladeElementRef>>;
 type DrawerProps = {
     /**
      * Controls the state of the drawer, indicating whether it is open or closed
@@ -14255,45 +15415,6 @@ type DrawerHeaderProps = {
     trailing?: React.ReactNode;
 } & DataAnalyticsAttribute;
-/**
- * ### Drawer Component
- *
- * A drawer is a panel that slides in mostly from right side of the screen over the existing content in the viewport.
- * It helps in providing additional details or context and can also be used to promote product features or new products.
- *
- * ---
- *
- * #### Usage
- *
- * ```jsx
-  const MyDrawer = () => {
-    const [showDrawer, setShowDrawer] = React.useState(false);
-    return (
-      <Box>
-        <Button onClick={() => setShowDrawer(true)}>Open Drawer</Button>
-        <Drawer
-          isOpen={showDrawer}
-          onDismiss={() => setShowDrawer(false)}
-        >
-          <DrawerHeader title="Announcements" />
-          <DrawerBody>
-            <FTXAnnouncement />
-            <CatPictures />
-          </DrawerBody>
-        <Drawer>
-      </Box>
-    )
-  }
- * ```
- *
- *  ---
- *
- * Checkout {@link https://blade.razorpay.com/?path=/docs/components-drawer Drawer Documentation}
- *
- *
- */
-declare const Drawer: ({ isOpen, onDismiss, zIndex, children, accessibilityLabel, showOverlay, initialFocusRef, isLazy, testID, ...rest }: DrawerProps) => React__default.ReactElement;
 /**
  * #### Usage
  *
@@ -19303,9 +20424,10 @@ type RadioGroupProps = {
     /**
      * The callback invoked when any of the radio's state changes
      */
-    onChange?: ({ name, value }: {
+    onChange?: ({ name, value, event, }: {
         name: string | undefined;
         value: string;
+        event: React__default.ChangeEvent<HTMLInputElement>;
     }) => void;
     /**
      * The name of the input field in a radio
@@ -20060,6 +21182,7 @@ type SideNavLinkProps = {
      * ```
      */
     tooltip?: Pick<TooltipProps, 'title' | 'content' | 'onOpenChange'>;
+    onClick?: (event: React__default.MouseEvent) => void;
 } & DataAnalyticsAttribute;
 type SideNavSectionProps = {
     title?: string;
@@ -20140,7 +21263,7 @@ type SideNavLevelProps = {
     children: React__default.ReactElement | React__default.ReactElement[];
 };
-declare const SideNavLink: ({ title, href, children, titleSuffix, trailing, isActive, icon, tooltip, as, target, ...rest }: SideNavLinkProps) => React__default.ReactElement;
+declare const SideNavLink: ({ title, href, children, titleSuffix, trailing, isActive, icon, tooltip, as, target, onClick, ...rest }: SideNavLinkProps) => React__default.ReactElement;
 declare const SideNavLevel: ({ children }: SideNavLevelProps) => React__default.ReactElement;