@razorpay/blade 10.0.0 → 10.2.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.
- package/build/components/index.d.ts +200 -22
- package/build/components/index.development.web.js +2694 -1874
- package/build/components/index.development.web.js.map +1 -1
- package/build/components/index.native.d.ts +180 -22
- package/build/components/index.native.js +325 -301
- package/build/components/index.native.js.map +1 -1
- package/build/components/index.production.web.js +2687 -1863
- package/build/components/index.production.web.js.map +1 -1
- package/build/css/bankingThemeDarkDesktop.css +1 -1
- package/build/css/bankingThemeDarkMobile.css +1 -1
- package/build/css/bankingThemeLightDesktop.css +1 -1
- package/build/css/bankingThemeLightMobile.css +1 -1
- package/build/css/paymentThemeDarkDesktop.css +1 -1
- package/build/css/paymentThemeDarkMobile.css +1 -1
- package/build/css/paymentThemeLightDesktop.css +1 -1
- package/build/css/paymentThemeLightMobile.css +1 -1
- package/build/utils/index.d.ts +6 -1
- package/build/utils/index.development.web.js +44 -2
- package/build/utils/index.development.web.js.map +1 -1
- package/build/utils/index.native.d.ts +6 -1
- package/build/utils/index.native.js +7 -2
- package/build/utils/index.native.js.map +1 -1
- package/build/utils/index.production.web.js +44 -2
- package/build/utils/index.production.web.js.map +1 -1
- package/package.json +18 -16
|
@@ -1313,6 +1313,7 @@ type FlexboxProps$1 = MakeObjectResponsive$1<
|
|
|
1313
1313
|
| 'justifyContent'
|
|
1314
1314
|
| 'justifySelf'
|
|
1315
1315
|
| 'placeSelf'
|
|
1316
|
+
| 'placeItems'
|
|
1316
1317
|
| 'order'
|
|
1317
1318
|
>
|
|
1318
1319
|
>;
|
|
@@ -1346,11 +1347,11 @@ type GridProps$1 = MakeObjectResponsive$1<
|
|
|
1346
1347
|
>
|
|
1347
1348
|
>;
|
|
1348
1349
|
|
|
1349
|
-
type ColorObjects$
|
|
1350
|
-
type BackgroundColorString$
|
|
1350
|
+
type ColorObjects$2 = 'feedback' | 'surface' | 'action';
|
|
1351
|
+
type BackgroundColorString$2<T extends ColorObjects$2> = `${T}.background.${DotNotationColorStringToken<
|
|
1351
1352
|
Theme$1['colors'][T]['background']
|
|
1352
1353
|
>}`;
|
|
1353
|
-
type BorderColorString$1<T extends ColorObjects$
|
|
1354
|
+
type BorderColorString$1<T extends ColorObjects$2> = `${T}.border.${DotNotationColorStringToken<
|
|
1354
1355
|
Theme$1['colors'][T]['border']
|
|
1355
1356
|
>}`;
|
|
1356
1357
|
|
|
@@ -1369,7 +1370,7 @@ declare const validBoxAsValues$1 = [
|
|
|
1369
1370
|
|
|
1370
1371
|
type BoxAsType$1 = typeof validBoxAsValues$1[number];
|
|
1371
1372
|
|
|
1372
|
-
type BrandColorString$
|
|
1373
|
+
type BrandColorString$2 = `brand.${DotNotationColorStringToken<Theme$1['colors']['brand']>}`;
|
|
1373
1374
|
|
|
1374
1375
|
// Visual props that are common for both Box and BaseBox
|
|
1375
1376
|
type CommonBoxVisualProps$1 = MakeObjectResponsive$1<
|
|
@@ -1395,6 +1396,7 @@ type CommonBoxVisualProps$1 = MakeObjectResponsive$1<
|
|
|
1395
1396
|
| 'backgroundPosition'
|
|
1396
1397
|
| 'backgroundOrigin'
|
|
1397
1398
|
| 'backgroundRepeat'
|
|
1399
|
+
| 'pointerEvents'
|
|
1398
1400
|
> & {
|
|
1399
1401
|
/**
|
|
1400
1402
|
* Sets the elevation for Box
|
|
@@ -1415,10 +1417,10 @@ type CommonBoxVisualProps$1 = MakeObjectResponsive$1<
|
|
|
1415
1417
|
type BaseBoxVisualProps$1 = MakeObjectResponsive$1<
|
|
1416
1418
|
{
|
|
1417
1419
|
backgroundColor:
|
|
1418
|
-
| BackgroundColorString$
|
|
1419
|
-
| BackgroundColorString$
|
|
1420
|
-
| BackgroundColorString$
|
|
1421
|
-
| BrandColorString$
|
|
1420
|
+
| BackgroundColorString$2<'feedback'>
|
|
1421
|
+
| BackgroundColorString$2<'surface'>
|
|
1422
|
+
| BackgroundColorString$2<'action'>
|
|
1423
|
+
| BrandColorString$2
|
|
1422
1424
|
| 'transparent'
|
|
1423
1425
|
| (string & Record<never, never>);
|
|
1424
1426
|
lineHeight: SpacingValueType$1;
|
|
@@ -1437,7 +1439,7 @@ type BaseBoxVisualProps$1 = MakeObjectResponsive$1<
|
|
|
1437
1439
|
|
|
1438
1440
|
// Visual props that are specific to Box
|
|
1439
1441
|
type BoxVisualProps$1 = MakeObjectResponsive$1<{
|
|
1440
|
-
backgroundColor: BackgroundColorString$
|
|
1442
|
+
backgroundColor: BackgroundColorString$2<'surface'> | BrandColorString$2 | 'transparent';
|
|
1441
1443
|
}> & {
|
|
1442
1444
|
// Intentionally keeping this outside of MakeObjectResponsive since we only want as to be string and not responsive object
|
|
1443
1445
|
// styled-components do not support passing `as` prop as an object
|
|
@@ -1501,6 +1503,31 @@ type BoxCallbackProps$1 = Omit<
|
|
|
1501
1503
|
'__brand__'
|
|
1502
1504
|
>;
|
|
1503
1505
|
|
|
1506
|
+
type BoxDragAndDropProps$1 = Omit<
|
|
1507
|
+
Platform.Select<{
|
|
1508
|
+
web: {
|
|
1509
|
+
draggable: boolean;
|
|
1510
|
+
onDragStart: React.DragEventHandler<HTMLElement>;
|
|
1511
|
+
onDragEnter: React.DragEventHandler<HTMLElement>;
|
|
1512
|
+
onDragLeave: React.DragEventHandler<HTMLElement>;
|
|
1513
|
+
onDragOver: React.DragEventHandler<HTMLElement>;
|
|
1514
|
+
onDragEnd: React.DragEventHandler<HTMLElement>;
|
|
1515
|
+
onDrop: React.DragEventHandler<HTMLElement>;
|
|
1516
|
+
};
|
|
1517
|
+
native: Record<
|
|
1518
|
+
| 'draggable'
|
|
1519
|
+
| 'onDragStart'
|
|
1520
|
+
| 'onDragEnter'
|
|
1521
|
+
| 'onDragLeave'
|
|
1522
|
+
| 'onDragOver'
|
|
1523
|
+
| 'onDragEnd'
|
|
1524
|
+
| 'onDrop',
|
|
1525
|
+
undefined
|
|
1526
|
+
>;
|
|
1527
|
+
}>,
|
|
1528
|
+
'__brand__'
|
|
1529
|
+
>;
|
|
1530
|
+
|
|
1504
1531
|
type BoxProps$1 = Partial<
|
|
1505
1532
|
PaddingProps$1 &
|
|
1506
1533
|
MarginProps$1 &
|
|
@@ -1509,6 +1536,7 @@ type BoxProps$1 = Partial<
|
|
|
1509
1536
|
PositionProps$1 &
|
|
1510
1537
|
GridProps$1 &
|
|
1511
1538
|
BoxCallbackProps$1 &
|
|
1539
|
+
BoxDragAndDropProps$1 &
|
|
1512
1540
|
CommonBoxVisualProps$1 &
|
|
1513
1541
|
BoxVisualProps$1 & {
|
|
1514
1542
|
children?: React.ReactNode | React.ReactNode[];
|
|
@@ -2619,7 +2647,7 @@ declare type FlexboxProps = MakeObjectResponsive<{
|
|
|
2619
2647
|
* @see https://developer.mozilla.org/docs/Web/CSS/flex
|
|
2620
2648
|
*/
|
|
2621
2649
|
flex: string | number;
|
|
2622
|
-
} & PickCSSByPlatform<'flexWrap' | 'flexDirection' | 'flexGrow' | 'flexShrink' | 'flexBasis' | 'alignItems' | 'alignContent' | 'alignSelf' | 'justifyItems' | 'justifyContent' | 'justifySelf' | 'placeSelf' | 'order'>>;
|
|
2650
|
+
} & PickCSSByPlatform<'flexWrap' | 'flexDirection' | 'flexGrow' | 'flexShrink' | 'flexBasis' | 'alignItems' | 'alignContent' | 'alignSelf' | 'justifyItems' | 'justifyContent' | 'justifySelf' | 'placeSelf' | 'placeItems' | 'order'>>;
|
|
2623
2651
|
declare type PositionProps = MakeObjectResponsive<{
|
|
2624
2652
|
top: SpacingValueType;
|
|
2625
2653
|
right: SpacingValueType;
|
|
@@ -2627,12 +2655,12 @@ declare type PositionProps = MakeObjectResponsive<{
|
|
|
2627
2655
|
left: SpacingValueType;
|
|
2628
2656
|
} & PickCSSByPlatform<'position' | 'zIndex'>>;
|
|
2629
2657
|
declare type GridProps = MakeObjectResponsive<PickCSSByPlatform<'grid' | 'gridColumn' | 'gridRow' | 'gridRowStart' | 'gridRowEnd' | 'gridColumnStart' | 'gridColumnEnd' | 'gridArea' | 'gridAutoFlow' | 'gridAutoRows' | 'gridAutoColumns' | 'gridTemplate' | 'gridTemplateAreas' | 'gridTemplateColumns' | 'gridTemplateRows'>>;
|
|
2630
|
-
declare type ColorObjects = 'feedback' | 'surface' | 'action';
|
|
2631
|
-
declare type BackgroundColorString<T extends ColorObjects> = `${T}.background.${DotNotationColorStringToken<Theme$1['colors'][T]['background']>}`;
|
|
2632
|
-
declare type BorderColorString<T extends ColorObjects> = `${T}.border.${DotNotationColorStringToken<Theme$1['colors'][T]['border']>}`;
|
|
2658
|
+
declare type ColorObjects$1 = 'feedback' | 'surface' | 'action';
|
|
2659
|
+
declare type BackgroundColorString$1<T extends ColorObjects$1> = `${T}.background.${DotNotationColorStringToken<Theme$1['colors'][T]['background']>}`;
|
|
2660
|
+
declare type BorderColorString<T extends ColorObjects$1> = `${T}.border.${DotNotationColorStringToken<Theme$1['colors'][T]['border']>}`;
|
|
2633
2661
|
declare const validBoxAsValues: readonly ["div", "section", "footer", "header", "main", "aside", "nav", "span", "label"];
|
|
2634
2662
|
declare type BoxAsType = typeof validBoxAsValues[number];
|
|
2635
|
-
declare type BrandColorString = `brand.${DotNotationColorStringToken<Theme$1['colors']['brand']>}`;
|
|
2663
|
+
declare type BrandColorString$1 = `brand.${DotNotationColorStringToken<Theme$1['colors']['brand']>}`;
|
|
2636
2664
|
declare type CommonBoxVisualProps = MakeObjectResponsive<{
|
|
2637
2665
|
borderRadius: keyof Border['radius'];
|
|
2638
2666
|
borderWidth: keyof Border['width'];
|
|
@@ -2649,7 +2677,7 @@ declare type CommonBoxVisualProps = MakeObjectResponsive<{
|
|
|
2649
2677
|
borderTopRightRadius: keyof Border['radius'];
|
|
2650
2678
|
borderBottomRightRadius: keyof Border['radius'];
|
|
2651
2679
|
borderBottomLeftRadius: keyof Border['radius'];
|
|
2652
|
-
} & PickCSSByPlatform<'backgroundImage' | 'backgroundSize' | 'backgroundPosition' | 'backgroundOrigin' | 'backgroundRepeat'> & {
|
|
2680
|
+
} & PickCSSByPlatform<'backgroundImage' | 'backgroundSize' | 'backgroundPosition' | 'backgroundOrigin' | 'backgroundRepeat' | 'pointerEvents'> & {
|
|
2653
2681
|
/**
|
|
2654
2682
|
* Sets the elevation for Box
|
|
2655
2683
|
*
|
|
@@ -2663,13 +2691,13 @@ declare type CommonBoxVisualProps = MakeObjectResponsive<{
|
|
|
2663
2691
|
elevation?: keyof Elevation;
|
|
2664
2692
|
}>;
|
|
2665
2693
|
declare type BaseBoxVisualProps = MakeObjectResponsive<{
|
|
2666
|
-
backgroundColor: BackgroundColorString<'feedback'> | BackgroundColorString<'surface'> | BackgroundColorString<'action'> | BrandColorString | 'transparent' | (string & Record<never, never>);
|
|
2694
|
+
backgroundColor: BackgroundColorString$1<'feedback'> | BackgroundColorString$1<'surface'> | BackgroundColorString$1<'action'> | BrandColorString$1 | 'transparent' | (string & Record<never, never>);
|
|
2667
2695
|
lineHeight: SpacingValueType;
|
|
2668
2696
|
touchAction: CSSObject['touchAction'];
|
|
2669
2697
|
userSelect: CSSObject['userSelect'];
|
|
2670
2698
|
} & PickCSSByPlatform<'border' | 'borderLeft' | 'borderRight' | 'borderTop' | 'borderBottom' | 'opacity' | 'pointerEvents'>>;
|
|
2671
2699
|
declare type BoxVisualProps = MakeObjectResponsive<{
|
|
2672
|
-
backgroundColor: BackgroundColorString<'surface'> | BrandColorString | 'transparent';
|
|
2700
|
+
backgroundColor: BackgroundColorString$1<'surface'> | BrandColorString$1 | 'transparent';
|
|
2673
2701
|
}> & {
|
|
2674
2702
|
as: BoxAsType;
|
|
2675
2703
|
};
|
|
@@ -2707,7 +2735,19 @@ declare type BoxCallbackProps = Omit<Platform.Select<{
|
|
|
2707
2735
|
};
|
|
2708
2736
|
native: Record<'onMouseOver' | 'onMouseEnter' | 'onMouseLeave' | 'onScroll', undefined>;
|
|
2709
2737
|
}>, '__brand__'>;
|
|
2710
|
-
declare type
|
|
2738
|
+
declare type BoxDragAndDropProps = Omit<Platform.Select<{
|
|
2739
|
+
web: {
|
|
2740
|
+
draggable: boolean;
|
|
2741
|
+
onDragStart: React.DragEventHandler<HTMLElement>;
|
|
2742
|
+
onDragEnter: React.DragEventHandler<HTMLElement>;
|
|
2743
|
+
onDragLeave: React.DragEventHandler<HTMLElement>;
|
|
2744
|
+
onDragOver: React.DragEventHandler<HTMLElement>;
|
|
2745
|
+
onDragEnd: React.DragEventHandler<HTMLElement>;
|
|
2746
|
+
onDrop: React.DragEventHandler<HTMLElement>;
|
|
2747
|
+
};
|
|
2748
|
+
native: Record<'draggable' | 'onDragStart' | 'onDragEnter' | 'onDragLeave' | 'onDragOver' | 'onDragEnd' | 'onDrop', undefined>;
|
|
2749
|
+
}>, '__brand__'>;
|
|
2750
|
+
declare type BoxProps = Partial<PaddingProps & MarginProps & LayoutProps & FlexboxProps & PositionProps & GridProps & BoxCallbackProps & BoxDragAndDropProps & CommonBoxVisualProps & BoxVisualProps & {
|
|
2711
2751
|
children?: React.ReactNode | React.ReactNode[];
|
|
2712
2752
|
tabIndex?: number;
|
|
2713
2753
|
} & TestID$1>;
|
|
@@ -3009,6 +3049,14 @@ declare const Box: React__default.ForwardRefExoticComponent<Partial<PaddingProps
|
|
|
3009
3049
|
onMouseEnter: React__default.MouseEventHandler<HTMLElement>;
|
|
3010
3050
|
onMouseLeave: React__default.MouseEventHandler<HTMLElement>;
|
|
3011
3051
|
onScroll: React__default.UIEventHandler<HTMLElement>;
|
|
3052
|
+
} & {
|
|
3053
|
+
draggable: boolean;
|
|
3054
|
+
onDragStart: React__default.DragEventHandler<HTMLElement>;
|
|
3055
|
+
onDragEnter: React__default.DragEventHandler<HTMLElement>;
|
|
3056
|
+
onDragLeave: React__default.DragEventHandler<HTMLElement>;
|
|
3057
|
+
onDragOver: React__default.DragEventHandler<HTMLElement>;
|
|
3058
|
+
onDragEnd: React__default.DragEventHandler<HTMLElement>;
|
|
3059
|
+
onDrop: React__default.DragEventHandler<HTMLElement>;
|
|
3012
3060
|
} & {
|
|
3013
3061
|
elevation?: ElevationLevels | {
|
|
3014
3062
|
readonly base?: ElevationLevels | undefined;
|
|
@@ -3146,6 +3194,14 @@ declare const Box: React__default.ForwardRefExoticComponent<Partial<PaddingProps
|
|
|
3146
3194
|
readonly l?: "none" | "thinner" | "thin" | "thick" | undefined;
|
|
3147
3195
|
readonly xl?: "none" | "thinner" | "thin" | "thick" | undefined;
|
|
3148
3196
|
};
|
|
3197
|
+
pointerEvents?: csstype.Property.PointerEvents | {
|
|
3198
|
+
readonly base?: csstype.Property.PointerEvents | undefined;
|
|
3199
|
+
readonly xs?: csstype.Property.PointerEvents | undefined;
|
|
3200
|
+
readonly s?: csstype.Property.PointerEvents | undefined;
|
|
3201
|
+
readonly m?: csstype.Property.PointerEvents | undefined;
|
|
3202
|
+
readonly l?: csstype.Property.PointerEvents | undefined;
|
|
3203
|
+
readonly xl?: csstype.Property.PointerEvents | undefined;
|
|
3204
|
+
} | undefined;
|
|
3149
3205
|
backgroundPosition?: csstype.Property.BackgroundPosition<string | number> | {
|
|
3150
3206
|
readonly base?: csstype.Property.BackgroundPosition<string | number> | undefined;
|
|
3151
3207
|
readonly xs?: csstype.Property.BackgroundPosition<string | number> | undefined;
|
|
@@ -3251,12 +3307,15 @@ declare type CardProps = {
|
|
|
3251
3307
|
* - Docs: https://blade.razorpay.com/?path=/docs/tokens-spacing--page
|
|
3252
3308
|
*/
|
|
3253
3309
|
padding?: Extract<SpacingValueType$1, 'spacing.0' | 'spacing.3' | 'spacing.5' | 'spacing.7'>;
|
|
3310
|
+
width?: BoxProps$1['width'];
|
|
3311
|
+
height?: BoxProps$1['height'];
|
|
3254
3312
|
} & TestID$1 & StyledPropsBlade$1;
|
|
3255
|
-
declare const Card: ({ children, surfaceLevel, elevation, testID, padding, ...styledProps }: CardProps) => React__default.ReactElement;
|
|
3313
|
+
declare const Card: ({ children, surfaceLevel, elevation, testID, padding, width, height, ...styledProps }: CardProps) => React__default.ReactElement;
|
|
3256
3314
|
declare type CardBodyProps = {
|
|
3257
3315
|
children: React__default.ReactNode;
|
|
3316
|
+
height?: BoxProps$1['height'];
|
|
3258
3317
|
} & TestID$1;
|
|
3259
|
-
declare const CardBody: ({ children, testID }: CardBodyProps) => React__default.ReactElement;
|
|
3318
|
+
declare const CardBody: ({ height, children, testID }: CardBodyProps) => React__default.ReactElement;
|
|
3260
3319
|
|
|
3261
3320
|
type FeedbackColors$1 = `feedback.text.${DotNotationColorStringToken<
|
|
3262
3321
|
Theme$1['colors']['feedback']['text']
|
|
@@ -4275,6 +4334,109 @@ declare type CheckboxGroupProps = {
|
|
|
4275
4334
|
} & TestID$1 & StyledPropsBlade$1;
|
|
4276
4335
|
declare const CheckboxGroup: ({ children, label, helpText, isDisabled, isRequired, necessityIndicator, labelPosition, validationState, errorText, name, defaultValue, onChange, value, size, testID, ...styledProps }: CheckboxGroupProps) => React__default.ReactElement;
|
|
4277
4336
|
|
|
4337
|
+
declare type ColorObjects = 'feedback' | 'surface' | 'action';
|
|
4338
|
+
declare type BackgroundColorString<T extends ColorObjects> = `${T}.background.${DotNotationColorStringToken<Theme$1['colors'][T]['background']>}`;
|
|
4339
|
+
declare type BrandColorString = `brand.${DotNotationColorStringToken<Theme$1['colors']['brand']>}`;
|
|
4340
|
+
declare type OverlayColor = BackgroundColorString<'surface'> | BrandColorString;
|
|
4341
|
+
declare type CarouselProps = {
|
|
4342
|
+
/**
|
|
4343
|
+
* Accepts CarouselItem
|
|
4344
|
+
*/
|
|
4345
|
+
children: React.ReactNode;
|
|
4346
|
+
/**
|
|
4347
|
+
* Total number of carousel items to show at once,
|
|
4348
|
+
* if set to 1,2 or 3 all the CarouselItem's width will remain the same,
|
|
4349
|
+
* but if set to `autofit` the carousel items will take up space responsively
|
|
4350
|
+
*
|
|
4351
|
+
* @default 1
|
|
4352
|
+
*/
|
|
4353
|
+
visibleItems?: 1 | 2 | 3 | 'autofit';
|
|
4354
|
+
/**
|
|
4355
|
+
* If true, adds extra margin before and after the first/last slides so that they align in center
|
|
4356
|
+
* This prop is only effective on desktop screen sizes
|
|
4357
|
+
*
|
|
4358
|
+
* @default false
|
|
4359
|
+
*/
|
|
4360
|
+
shouldAddStartEndSpacing?: boolean;
|
|
4361
|
+
/**
|
|
4362
|
+
* If true, the carousel will automatically slide to the next slide, default interval is 6 seconds
|
|
4363
|
+
*
|
|
4364
|
+
* @default false
|
|
4365
|
+
*/
|
|
4366
|
+
autoPlay?: boolean;
|
|
4367
|
+
/**
|
|
4368
|
+
* Toggles the visibility of indicators
|
|
4369
|
+
*
|
|
4370
|
+
* @default true
|
|
4371
|
+
*/
|
|
4372
|
+
showIndicators?: boolean;
|
|
4373
|
+
/**
|
|
4374
|
+
* Changes the color of the overlay, so that carousel can blend with the background color
|
|
4375
|
+
* If set to undefined overlay won't be shown
|
|
4376
|
+
*
|
|
4377
|
+
* This prop is only effective on desktop screen sizes
|
|
4378
|
+
*
|
|
4379
|
+
* @default undefined
|
|
4380
|
+
*/
|
|
4381
|
+
scrollOverlayColor?: OverlayColor;
|
|
4382
|
+
/**
|
|
4383
|
+
* Sets the position of navigation button
|
|
4384
|
+
*
|
|
4385
|
+
* @default 'bottom'
|
|
4386
|
+
*/
|
|
4387
|
+
navigationButtonPosition?: 'bottom' | 'side';
|
|
4388
|
+
/**
|
|
4389
|
+
* Variant to be used depending on the emphasis you want to give to the navigation buttons
|
|
4390
|
+
*
|
|
4391
|
+
* @default 'filled'
|
|
4392
|
+
*/
|
|
4393
|
+
navigationButtonVariant?: 'filled' | 'stroked';
|
|
4394
|
+
/**
|
|
4395
|
+
* Variant to be used depending on the emphasis you want to give to the indicators
|
|
4396
|
+
*
|
|
4397
|
+
* @default 'gray'
|
|
4398
|
+
*/
|
|
4399
|
+
indicatorVariant?: 'gray' | 'white' | 'blue';
|
|
4400
|
+
/**
|
|
4401
|
+
* Sets the width of the carousel items, this can be used with visibleItems: auto to achive automatic bleed
|
|
4402
|
+
*
|
|
4403
|
+
* @default undefined
|
|
4404
|
+
*/
|
|
4405
|
+
carouselItemWidth?: Platform.Select<{
|
|
4406
|
+
web: BoxProps$1['width'];
|
|
4407
|
+
native: `${number}%`;
|
|
4408
|
+
}>;
|
|
4409
|
+
/**
|
|
4410
|
+
* Sets the align-items CSS property on carousel container which specifies how the carousel items will align if their heights are different
|
|
4411
|
+
*
|
|
4412
|
+
* @default 'start'
|
|
4413
|
+
*/
|
|
4414
|
+
carouselItemAlignment?: BoxProps$1['alignItems'];
|
|
4415
|
+
/**
|
|
4416
|
+
* Callback which gets fired everytime a slide changes, useful for analytic events (only runs on user interaction not on autoPlay)
|
|
4417
|
+
*
|
|
4418
|
+
* @default undefined
|
|
4419
|
+
*/
|
|
4420
|
+
onChange?: (slideIndex: number) => void;
|
|
4421
|
+
/**
|
|
4422
|
+
* Accessibility label for the carousel, this will let screen reader users know what content the carousel holds (eg: "Product carousel")
|
|
4423
|
+
*
|
|
4424
|
+
* @default undefined
|
|
4425
|
+
*/
|
|
4426
|
+
accessibilityLabel?: string;
|
|
4427
|
+
};
|
|
4428
|
+
|
|
4429
|
+
declare const Carousel: ({ autoPlay, visibleItems, showIndicators, navigationButtonPosition, children, shouldAddStartEndSpacing, carouselItemWidth, scrollOverlayColor, accessibilityLabel, onChange, indicatorVariant, navigationButtonVariant, carouselItemAlignment, }: CarouselProps) => React__default.ReactElement;
|
|
4430
|
+
|
|
4431
|
+
declare type CarouselItemProps = {
|
|
4432
|
+
id?: string;
|
|
4433
|
+
index?: number;
|
|
4434
|
+
children: React__default.ReactNode;
|
|
4435
|
+
shouldHaveStartSpacing?: boolean;
|
|
4436
|
+
shouldHaveEndSpacing?: boolean;
|
|
4437
|
+
};
|
|
4438
|
+
declare const CarouselItem: ({ children, shouldHaveStartSpacing, shouldHaveEndSpacing, id, index, }: CarouselItemProps) => React__default.ReactElement;
|
|
4439
|
+
|
|
4278
4440
|
declare type DividerProps = {
|
|
4279
4441
|
/**
|
|
4280
4442
|
* Sets the orientation of divider
|
|
@@ -6910,7 +7072,7 @@ declare type SkeletonProps = StyledPropsBlade & Pick<BaseBoxProps, 'width' | 'ma
|
|
|
6910
7072
|
testID?: string;
|
|
6911
7073
|
};
|
|
6912
7074
|
|
|
6913
|
-
declare const Skeleton: ({ contrast, width, maxWidth, minWidth, height, maxHeight, minHeight, borderRadius, flexWrap, flexDirection, flexGrow, flexShrink, flexBasis, alignItems, alignContent, alignSelf, justifyItems, justifyContent, justifySelf, placeSelf, order, testID, ...props }: SkeletonProps) => React.ReactElement;
|
|
7075
|
+
declare const Skeleton: ({ contrast, width, maxWidth, minWidth, height, maxHeight, minHeight, borderRadius, flexWrap, flexDirection, flexGrow, flexShrink, flexBasis, alignItems, alignContent, alignSelf, justifyItems, justifyContent, justifySelf, placeSelf, placeItems, order, testID, ...props }: SkeletonProps) => React.ReactElement;
|
|
6914
7076
|
|
|
6915
7077
|
declare type VisuallyHiddenProps = {
|
|
6916
7078
|
children: React.ReactNode;
|
|
@@ -7844,6 +8006,14 @@ declare const TooltipInteractiveWrapper: styled_components.StyledComponent<"div"
|
|
|
7844
8006
|
onMouseEnter: React$1.MouseEventHandler<HTMLElement>;
|
|
7845
8007
|
onMouseLeave: React$1.MouseEventHandler<HTMLElement>;
|
|
7846
8008
|
onScroll: React$1.UIEventHandler<HTMLElement>;
|
|
8009
|
+
} & {
|
|
8010
|
+
draggable: boolean;
|
|
8011
|
+
onDragStart: React$1.DragEventHandler<HTMLElement>;
|
|
8012
|
+
onDragEnter: React$1.DragEventHandler<HTMLElement>;
|
|
8013
|
+
onDragLeave: React$1.DragEventHandler<HTMLElement>;
|
|
8014
|
+
onDragOver: React$1.DragEventHandler<HTMLElement>;
|
|
8015
|
+
onDragEnd: React$1.DragEventHandler<HTMLElement>;
|
|
8016
|
+
onDrop: React$1.DragEventHandler<HTMLElement>;
|
|
7847
8017
|
} & {
|
|
7848
8018
|
elevation?: ElevationLevels | {
|
|
7849
8019
|
readonly base?: ElevationLevels | undefined;
|
|
@@ -7981,6 +8151,14 @@ declare const TooltipInteractiveWrapper: styled_components.StyledComponent<"div"
|
|
|
7981
8151
|
readonly l?: "none" | "thinner" | "thin" | "thick" | undefined;
|
|
7982
8152
|
readonly xl?: "none" | "thinner" | "thin" | "thick" | undefined;
|
|
7983
8153
|
};
|
|
8154
|
+
pointerEvents?: csstype.Property.PointerEvents | {
|
|
8155
|
+
readonly base?: csstype.Property.PointerEvents | undefined;
|
|
8156
|
+
readonly xs?: csstype.Property.PointerEvents | undefined;
|
|
8157
|
+
readonly s?: csstype.Property.PointerEvents | undefined;
|
|
8158
|
+
readonly m?: csstype.Property.PointerEvents | undefined;
|
|
8159
|
+
readonly l?: csstype.Property.PointerEvents | undefined;
|
|
8160
|
+
readonly xl?: csstype.Property.PointerEvents | undefined;
|
|
8161
|
+
} | undefined;
|
|
7984
8162
|
backgroundPosition?: csstype.Property.BackgroundPosition<string | number> | {
|
|
7985
8163
|
readonly base?: csstype.Property.BackgroundPosition<string | number> | undefined;
|
|
7986
8164
|
readonly xs?: csstype.Property.BackgroundPosition<string | number> | undefined;
|
|
@@ -8135,4 +8313,4 @@ declare const TooltipInteractiveWrapper: styled_components.StyledComponent<"div"
|
|
|
8135
8313
|
tabIndex: -1;
|
|
8136
8314
|
}, "tabIndex" | "data-testid" | "data-blade-component">;
|
|
8137
8315
|
|
|
8138
|
-
export { Accordion, AccordionItem, AccordionItemProps, AccordionProps, ActionList, ActionListItem, ActionListItemAsset, ActionListItemAssetProps, ActionListItemIcon, ActionListItemProps, ActionListItemText, ActionListProps, ActionListSection, ActionListSectionDivider, ActionListSectionProps, ActivityIcon, AirplayIcon, Alert, AlertCircleIcon, AlertTriangleIcon as AlertOctagonIcon, AlertOnlyIcon, AlertProps, AlertTriangleIcon$1 as AlertTriangleIcon, AlignCenterIcon, AlignJustifyIcon, AlignLeftIcon, AlignRightIcon, Amount, AmountProps, AnchorIcon, AnnouncementIcon, ApertureIcon, AppStoreIcon, ArrowDownIcon, ArrowDownLeftIcon, ArrowDownRightIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, ArrowUpLeftIcon, ArrowUpRightIcon, AtSignIcon, Attachment as AttachmentIcon, AwardIcon, Badge, BadgeProps, BankIcon, BarChartAltIcon, BarChartIcon, BatteryChargingIcon, BatteryIcon, BellIcon, BellOffIcon, BillIcon, BladeCommonEvents, BladeProvider, BladeProviderProps, BluetoothIcon, BoldIcon, BookIcon, BookmarkIcon, BottomSheet, BottomSheetBody, BottomSheetBodyProps, BottomSheetFooter, BottomSheetFooterProps, BottomSheetHeader, BottomSheetHeaderProps, BottomSheetProps, Box, BoxIcon, BoxProps, BoxRefType, BriefcaseIcon, BulkPayoutsIcon, Button, ButtonProps, CalendarIcon, CameraIcon, CameraOffIcon, Card, CardBody, CardFooter, CardFooterAction, CardFooterLeading, CardFooterTrailing, CardHeader, CardHeaderBadge, CardHeaderCounter, CardHeaderIcon, CardHeaderIconButton, CardHeaderLeading, CardHeaderLink, CardHeaderText, CardHeaderTrailing, CardProps, CastIcon, CheckCircleIcon, CheckIcon, CheckSquareIcon, Checkbox, CheckboxGroup, CheckboxGroupProps, CheckboxProps, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronsDownIcon, ChevronsLeftIcon, ChevronsRightIcon, ChevronsUpIcon, ChromeIcon, CircleIcon, ClipboardIcon, ClockIcon, CloseIcon, CloudDrizzleIcon, CloudIcon, CloudLightningIcon, CloudOffIcon, CloudRainIcon, CloudSnowIcon, Code, CodeProps, CodepenIcon, CoinsIcon, Collapsible, CollapsibleBody, CollapsibleBodyProps, CollapsibleButton, CollapsibleButtonProps, CollapsibleLink, CollapsibleLinkProps, CollapsibleProps, CommandIcon, CompassIcon, ComponentIds, CopyIcon, CornerDownLeftIcon, CornerDownRightIcon, CornerLeftDownIcon, CornerLeftUpIcon, CornerRightDownIcon, CornerRightUpIcon, CornerUpLeftIcon, CornerUpRightIcon, Counter, CounterProps, CpuIcon, CreditCardIcon, CropIcon, CrosshairIcon, CustomersIcon, CutIcon, DashboardIcon, DeleteIcon, DiscIcon, Divider, DividerProps, DollarIcon, DollarsIcon, DownloadCloudIcon, DownloadIcon, Dropdown, DropdownButton, DropdownFooter, DropdownHeader, DropdownLink, DropdownOverlay, DropdownOverlayProps, DropdownProps, DropletIcon, EditComposeIcon, EditIcon, EditInlineIcon, ExportIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, FacebookIcon, FastForwardIcon, FeatherIcon, FileIcon, FileMinusIcon, FilePlusIcon, FileTextIcon, FilmIcon, FilterIcon, FlagIcon, FolderIcon, FullScreenEnterIcon, FullScreenExitIcon, GithubIcon, GitlabIcon, GlobeIcon, GridIcon, HashIcon, Heading, HeadingProps, HeadphonesIcon, HeartIcon, HelpCircleIcon, HistoryIcon, HomeIcon, IconButton, IconButtonProps, IconComponent, IconProps, IconSize, ImageIcon, InboxIcon, Indicator, IndicatorProps, InfoIcon, InstagramIcon, InvoicesIcon, ItalicIcon, LayersIcon, LayoutIcon, LifeBuoyIcon, Link, LinkButtonVariantProps, LinkIcon, LinkProps, List, ListIcon, ListItem, ListItemCode, ListItemCodeProps, ListItemLink, ListItemLinkProps, ListItemProps, ListItemText, ListItemTextProps, ListProps, LoaderIcon, LockIcon, LogInIcon, LogOutIcon, MailIcon, MailOpenIcon, MapIcon, MapPinIcon, MaximizeIcon, MenuDotsIcon, MenuIcon, MessageCircleIcon, MessageSquareIcon, MicIcon, MicOffIcon, MinimizeIcon, MinusCircleIcon, MinusIcon, MinusSquareIcon, Modal, ModalBody, ModalBodyProps, ModalFooter, ModalFooterProps, ModalHeader, ModalHeaderProps, ModalProps, MonitorIcon, MoonIcon, MoreHorizontalIcon, MoreVerticalIcon, MoveIcon, MusicIcon, MyAccountIcon, NavigationIcon, OTPInput, OTPInputCommonProps, OctagonIcon, OffersIcon, PackageIcon, PaperclipIcon, PasswordInput, PasswordInputProps, PauseCircleIcon, PauseIcon, PaymentButtonsIcon, PaymentLinksIcon, PaymentPagesIcon, PercentIcon, PhoneCallIcon, PhoneForwardedIcon, PhoneIcon, PhoneIncomingIcon, PhoneMissedIcon, PhoneOffIcon, PhoneOutgoingIcon, PieChartIcon, PlayCircleIcon, PlayIcon, PlusCircleIcon, PlusIcon, PlusSquareIcon, PocketIcon, PowerIcon, PrinterIcon, ProgressBar, ProgressBarProps, ProgressBarVariant, QRCodeIcon, Radio, RadioGroup, RadioGroupProps, RadioIcon, RadioProps, RazorpayIcon, RazorpayXIcon, RefreshIcon, RepeatIcon, ReportsIcon, RewindIcon, RotateClockWiseIcon, RotateCounterClockWiseIcon, RoutesIcon, RupeeIcon, RupeesIcon, SaveIcon, ScissorsIcon, SearchIcon, SelectInput, SelectInputProps, SendIcon, ServerIcon, SettingsIcon, SettlementsIcon, ShareIcon, ShieldIcon, ShoppingCartIcon, ShuffleIcon, SidebarIcon, Skeleton, SkeletonProps, SkipBackIcon, SkipForwardIcon, SkipNavContent, SkipNavLink, SlackIcon, SlashIcon, SlidersIcon, SmartCollectIcon, SmartphoneIcon, SpeakerIcon, Spinner, SpinnerProps, SquareIcon, StampIcon, StarIcon, StopCircleIcon, SubscriptionsIcon, SunIcon, SunriseIcon, SunsetIcon, Switch, SwitchProps, TabletIcon, Tag, TagIcon, TagProps, TargetIcon, Text, TextArea, TextAreaProps, TextInput, TextInputProps, TextProps, TextVariant, Theme, ThermometerIcon, ThumbsDownIcon, ThumbsUpIcon, Title, TitleProps, ToggleLeftIcon, ToggleRightIcon, Tooltip, TooltipInteractiveWrapper, TooltipProps, TransactionsIcon, TrashIcon, TrendingDownIcon, TrendingUpIcon, TriangleIcon, TvIcon, TwitterIcon, TypeIcon, UmbrellaIcon, UnderlineIcon, UnlockIcon, UploadCloudIcon, UploadIcon, UserCheckIcon, UserIcon, UserMinusIcon, UserPlusIcon, UserXIcon, UsersIcon, VideoIcon, VideoOffIcon, VisuallyHidden, VisuallyHiddenProps, VoicemailIcon, VolumeHighIcon, VolumeIcon, VolumeLowIcon, VolumeMuteIcon, WatchIcon, WifiIcon, WifiOffIcon, WindIcon, XCircleIcon, XSquareIcon, ZapIcon, ZoomInIcon, ZoomOutIcon, announce, clearAnnouncer, destroyAnnouncer, getTextProps, screenReaderStyles, useActionListContext, useTheme };
|
|
8316
|
+
export { Accordion, AccordionItem, AccordionItemProps, AccordionProps, ActionList, ActionListItem, ActionListItemAsset, ActionListItemAssetProps, ActionListItemIcon, ActionListItemProps, ActionListItemText, ActionListProps, ActionListSection, ActionListSectionDivider, ActionListSectionProps, ActivityIcon, AirplayIcon, Alert, AlertCircleIcon, AlertTriangleIcon as AlertOctagonIcon, AlertOnlyIcon, AlertProps, AlertTriangleIcon$1 as AlertTriangleIcon, AlignCenterIcon, AlignJustifyIcon, AlignLeftIcon, AlignRightIcon, Amount, AmountProps, AnchorIcon, AnnouncementIcon, ApertureIcon, AppStoreIcon, ArrowDownIcon, ArrowDownLeftIcon, ArrowDownRightIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, ArrowUpLeftIcon, ArrowUpRightIcon, AtSignIcon, Attachment as AttachmentIcon, AwardIcon, Badge, BadgeProps, BankIcon, BarChartAltIcon, BarChartIcon, BatteryChargingIcon, BatteryIcon, BellIcon, BellOffIcon, BillIcon, BladeCommonEvents, BladeProvider, BladeProviderProps, BluetoothIcon, BoldIcon, BookIcon, BookmarkIcon, BottomSheet, BottomSheetBody, BottomSheetBodyProps, BottomSheetFooter, BottomSheetFooterProps, BottomSheetHeader, BottomSheetHeaderProps, BottomSheetProps, Box, BoxIcon, BoxProps, BoxRefType, BriefcaseIcon, BulkPayoutsIcon, Button, ButtonProps, CalendarIcon, CameraIcon, CameraOffIcon, Card, CardBody, CardFooter, CardFooterAction, CardFooterLeading, CardFooterTrailing, CardHeader, CardHeaderBadge, CardHeaderCounter, CardHeaderIcon, CardHeaderIconButton, CardHeaderLeading, CardHeaderLink, CardHeaderText, CardHeaderTrailing, CardProps, Carousel, CarouselItem, CarouselProps, CastIcon, CheckCircleIcon, CheckIcon, CheckSquareIcon, Checkbox, CheckboxGroup, CheckboxGroupProps, CheckboxProps, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronsDownIcon, ChevronsLeftIcon, ChevronsRightIcon, ChevronsUpIcon, ChromeIcon, CircleIcon, ClipboardIcon, ClockIcon, CloseIcon, CloudDrizzleIcon, CloudIcon, CloudLightningIcon, CloudOffIcon, CloudRainIcon, CloudSnowIcon, Code, CodeProps, CodepenIcon, CoinsIcon, Collapsible, CollapsibleBody, CollapsibleBodyProps, CollapsibleButton, CollapsibleButtonProps, CollapsibleLink, CollapsibleLinkProps, CollapsibleProps, CommandIcon, CompassIcon, ComponentIds, CopyIcon, CornerDownLeftIcon, CornerDownRightIcon, CornerLeftDownIcon, CornerLeftUpIcon, CornerRightDownIcon, CornerRightUpIcon, CornerUpLeftIcon, CornerUpRightIcon, Counter, CounterProps, CpuIcon, CreditCardIcon, CropIcon, CrosshairIcon, CustomersIcon, CutIcon, DashboardIcon, DeleteIcon, DiscIcon, Divider, DividerProps, DollarIcon, DollarsIcon, DownloadCloudIcon, DownloadIcon, Dropdown, DropdownButton, DropdownFooter, DropdownHeader, DropdownLink, DropdownOverlay, DropdownOverlayProps, DropdownProps, DropletIcon, EditComposeIcon, EditIcon, EditInlineIcon, ExportIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, FacebookIcon, FastForwardIcon, FeatherIcon, FileIcon, FileMinusIcon, FilePlusIcon, FileTextIcon, FilmIcon, FilterIcon, FlagIcon, FolderIcon, FullScreenEnterIcon, FullScreenExitIcon, GithubIcon, GitlabIcon, GlobeIcon, GridIcon, HashIcon, Heading, HeadingProps, HeadphonesIcon, HeartIcon, HelpCircleIcon, HistoryIcon, HomeIcon, IconButton, IconButtonProps, IconComponent, IconProps, IconSize, ImageIcon, InboxIcon, Indicator, IndicatorProps, InfoIcon, InstagramIcon, InvoicesIcon, ItalicIcon, LayersIcon, LayoutIcon, LifeBuoyIcon, Link, LinkButtonVariantProps, LinkIcon, LinkProps, List, ListIcon, ListItem, ListItemCode, ListItemCodeProps, ListItemLink, ListItemLinkProps, ListItemProps, ListItemText, ListItemTextProps, ListProps, LoaderIcon, LockIcon, LogInIcon, LogOutIcon, MailIcon, MailOpenIcon, MapIcon, MapPinIcon, MaximizeIcon, MenuDotsIcon, MenuIcon, MessageCircleIcon, MessageSquareIcon, MicIcon, MicOffIcon, MinimizeIcon, MinusCircleIcon, MinusIcon, MinusSquareIcon, Modal, ModalBody, ModalBodyProps, ModalFooter, ModalFooterProps, ModalHeader, ModalHeaderProps, ModalProps, MonitorIcon, MoonIcon, MoreHorizontalIcon, MoreVerticalIcon, MoveIcon, MusicIcon, MyAccountIcon, NavigationIcon, OTPInput, OTPInputCommonProps, OctagonIcon, OffersIcon, PackageIcon, PaperclipIcon, PasswordInput, PasswordInputProps, PauseCircleIcon, PauseIcon, PaymentButtonsIcon, PaymentLinksIcon, PaymentPagesIcon, PercentIcon, PhoneCallIcon, PhoneForwardedIcon, PhoneIcon, PhoneIncomingIcon, PhoneMissedIcon, PhoneOffIcon, PhoneOutgoingIcon, PieChartIcon, PlayCircleIcon, PlayIcon, PlusCircleIcon, PlusIcon, PlusSquareIcon, PocketIcon, PowerIcon, PrinterIcon, ProgressBar, ProgressBarProps, ProgressBarVariant, QRCodeIcon, Radio, RadioGroup, RadioGroupProps, RadioIcon, RadioProps, RazorpayIcon, RazorpayXIcon, RefreshIcon, RepeatIcon, ReportsIcon, RewindIcon, RotateClockWiseIcon, RotateCounterClockWiseIcon, RoutesIcon, RupeeIcon, RupeesIcon, SaveIcon, ScissorsIcon, SearchIcon, SelectInput, SelectInputProps, SendIcon, ServerIcon, SettingsIcon, SettlementsIcon, ShareIcon, ShieldIcon, ShoppingCartIcon, ShuffleIcon, SidebarIcon, Skeleton, SkeletonProps, SkipBackIcon, SkipForwardIcon, SkipNavContent, SkipNavLink, SlackIcon, SlashIcon, SlidersIcon, SmartCollectIcon, SmartphoneIcon, SpeakerIcon, Spinner, SpinnerProps, SquareIcon, StampIcon, StarIcon, StopCircleIcon, SubscriptionsIcon, SunIcon, SunriseIcon, SunsetIcon, Switch, SwitchProps, TabletIcon, Tag, TagIcon, TagProps, TargetIcon, Text, TextArea, TextAreaProps, TextInput, TextInputProps, TextProps, TextVariant, Theme, ThermometerIcon, ThumbsDownIcon, ThumbsUpIcon, Title, TitleProps, ToggleLeftIcon, ToggleRightIcon, Tooltip, TooltipInteractiveWrapper, TooltipProps, TransactionsIcon, TrashIcon, TrendingDownIcon, TrendingUpIcon, TriangleIcon, TvIcon, TwitterIcon, TypeIcon, UmbrellaIcon, UnderlineIcon, UnlockIcon, UploadCloudIcon, UploadIcon, UserCheckIcon, UserIcon, UserMinusIcon, UserPlusIcon, UserXIcon, UsersIcon, VideoIcon, VideoOffIcon, VisuallyHidden, VisuallyHiddenProps, VoicemailIcon, VolumeHighIcon, VolumeIcon, VolumeLowIcon, VolumeMuteIcon, WatchIcon, WifiIcon, WifiOffIcon, WindIcon, XCircleIcon, XSquareIcon, ZapIcon, ZoomInIcon, ZoomOutIcon, announce, clearAnnouncer, destroyAnnouncer, getTextProps, screenReaderStyles, useActionListContext, useTheme };
|