@razorpay/blade 12.35.0 → 12.36.0

package/build/lib/native/components/Box/BaseBox/types/propsTypes.js.map

@@ -1 +1 @@
-{"version":3,"file":"propsTypes.js","sources":["../../../../../../../src/components/Box/BaseBox/types/propsTypes.ts"],"sourcesContent":["import type { View } from 'react-native';\nimport type { CSSObject } from 'styled-components';\nimport type { MarginProps, PaddingProps, SpacingValueType } from './spacingTypes';\nimport type { MakeObjectResponsive } from './responsiveTypes';\nimport type { Theme } from '~components/BladeProvider';\nimport type { Border, Elevation } from '~tokens/global';\nimport type { DataAnalyticsAttribute, PickCSSByPlatform, TestID } from '~utils/types';\nimport type { Platform } from '~utils';\nimport type { BladeCommonEvents } from '~components/types';\nimport type { DotNotationToken } from '~utils/lodashButBetter/get';\n\ntype LayoutProps = MakeObjectResponsive<\n  {\n    height: SpacingValueType;\n    minHeight: SpacingValueType;\n    maxHeight: SpacingValueType;\n    width: SpacingValueType;\n    minWidth: SpacingValueType;\n    maxWidth: SpacingValueType;\n  } & PickCSSByPlatform<\n    'display' | 'overflow' | 'overflowX' | 'overflowY' | 'textAlign' | 'whiteSpace'\n  >\n>;\n\ntype FlexboxProps = MakeObjectResponsive<\n  {\n    /**\n     * This uses the native gap property which might not work on older browsers.\n     * If you want to support older browsers, you might want to use `margin` instead.\n     *\n     * @see https://caniuse.com/?search=gap\n     */\n    gap: SpacingValueType;\n    /**\n     * This uses the native row-gap property which might not work on older browsers.\n     * If you want to support older browsers, you might want to use `margin` instead.\n     *\n     * @see https://caniuse.com/?search=row-gap\n     */\n    rowGap: SpacingValueType;\n    /**\n     * This uses the native column-gap property which might not work on older browsers.\n     * If you want to support older browsers, you might want to use `margin` instead.\n     *\n     * @see https://caniuse.com/?search=column-gap\n     */\n    columnGap: SpacingValueType;\n    /**\n     * The **`flex`** CSS shorthand property sets how a flex _item_ will grow or shrink to fit the space available in its flex container.\n     *\n     * @see https://developer.mozilla.org/docs/Web/CSS/flex\n     */\n    flex: string | number;\n  } & PickCSSByPlatform<\n    | 'flexWrap'\n    | 'flexDirection'\n    | 'flexGrow'\n    | 'flexShrink'\n    | 'flexBasis'\n    | 'alignItems'\n    | 'alignContent'\n    | 'alignSelf'\n    | 'justifyItems'\n    | 'justifyContent'\n    | 'justifySelf'\n    | 'placeSelf'\n    | 'placeItems'\n    | 'order'\n  >\n>;\n\ntype PositionProps = MakeObjectResponsive<\n  {\n    top: SpacingValueType;\n    right: SpacingValueType;\n    bottom: SpacingValueType;\n    left: SpacingValueType;\n  } & PickCSSByPlatform<'position' | 'zIndex'>\n>;\n\ntype GridProps = MakeObjectResponsive<\n  PickCSSByPlatform<\n    | 'grid'\n    | 'gridColumn'\n    | 'gridRow'\n    | 'gridRowStart'\n    | 'gridRowEnd'\n    | 'gridColumnStart'\n    | 'gridColumnEnd'\n    | 'gridArea'\n    | 'gridAutoFlow'\n    | 'gridAutoRows'\n    | 'gridAutoColumns'\n    | 'gridTemplate'\n    | 'gridTemplateAreas'\n    | 'gridTemplateColumns'\n    | 'gridTemplateRows'\n  >\n>;\n\ntype ColorObjects = 'feedback' | 'surface' | 'interactive';\ntype BackgroundOnlyColorObjects = 'popup' | 'overlay';\ntype BackgroundColorString<\n  T extends ColorObjects | BackgroundOnlyColorObjects\n> = `${T}.background.${DotNotationToken<Theme['colors'][T]['background']>}`;\ntype BorderColorString<T extends ColorObjects> = `${T}.border.${DotNotationToken<\n  Theme['colors'][T]['border']\n>}`;\n\n// Created this as an array so I can reuse it for runtime validation\nconst validBoxAsValues = [\n  'div',\n  'section',\n  'footer',\n  'header',\n  'main',\n  'aside',\n  'nav',\n  'span',\n  'label',\n] as const;\n\ntype BoxAsType = typeof validBoxAsValues[number];\n\n// Visual props that are common for both Box and BaseBox\ntype CommonBoxVisualProps = MakeObjectResponsive<\n  {\n    borderRadius: keyof Border['radius'];\n    borderWidth: keyof Border['width'];\n    borderColor: BorderColorString<'surface'>;\n    borderTopWidth: keyof Border['width'];\n    borderTopColor: BorderColorString<'surface'>;\n    borderRightWidth: keyof Border['width'];\n    borderRightColor: BorderColorString<'surface'>;\n    borderBottomWidth: keyof Border['width'];\n    borderBottomColor: BorderColorString<'surface'>;\n    borderLeftWidth: keyof Border['width'];\n    borderLeftColor: BorderColorString<'surface'>;\n    borderTopLeftRadius: keyof Border['radius'];\n    borderTopRightRadius: keyof Border['radius'];\n    borderBottomRightRadius: keyof Border['radius'];\n    borderBottomLeftRadius: keyof Border['radius'];\n  } & PickCSSByPlatform<\n    | 'backgroundImage'\n    | 'backgroundSize'\n    | 'backgroundPosition'\n    | 'backgroundOrigin'\n    | 'backgroundRepeat'\n    | 'pointerEvents'\n    | 'opacity'\n    | 'visibility'\n    | 'transform'\n    | 'transformOrigin'\n    | 'clipPath'\n    | 'borderStyle'\n    | 'borderTopStyle'\n    | 'borderBottomStyle'\n    | 'borderLeftStyle'\n    | 'borderRightStyle'\n  > & {\n      /**\n       * Sets the elevation for Box\n       *\n       * eg: `theme.elevation.midRaised`\n       *\n       * @default `theme.elevation.lowRaised`\n       *\n       * **Links:**\n       * - Docs: https://blade.razorpay.com/?path=/docs/tokens-elevation--docs\n       */\n      elevation?: keyof Elevation;\n    }\n>;\n\n// Visual props that are specific BaseBox\n// This is used to ensure some of the more flexible BaseBox props are not passed to Box\ntype BaseBoxVisualProps = MakeObjectResponsive<\n  {\n    backgroundColor:\n      | BackgroundColorString<'feedback'>\n      | BackgroundColorString<'surface'>\n      | BackgroundColorString<'interactive'>\n      | BackgroundColorString<'overlay'>\n      | BackgroundColorString<'popup'>\n      | 'transparent'\n      | (string & Record<never, never>);\n    lineHeight: SpacingValueType;\n    touchAction: CSSObject['touchAction'];\n    userSelect: CSSObject['userSelect'];\n  } & PickCSSByPlatform<\n    | 'border'\n    | 'borderLeft'\n    | 'borderRight'\n    | 'borderTop'\n    | 'borderBottom'\n    | 'opacity'\n    | 'pointerEvents'\n    | 'cursor'\n  >\n>;\n\n// Visual props that are specific to Box\ntype BoxVisualProps = MakeObjectResponsive<{\n  backgroundColor:\n    | BackgroundColorString<'surface'>\n    | BackgroundColorString<'overlay'>\n    | 'transparent';\n}> & {\n  // Intentionally keeping this outside of MakeObjectResponsive since we only want as to be string and not responsive object\n  // styled-components do not support passing `as` prop as an object\n  as: BoxAsType;\n};\n\ntype StyledPropsBlade = Partial<\n  Omit<\n    MarginProps &\n      Pick<FlexboxProps, 'alignSelf' | 'justifySelf' | 'placeSelf' | 'order'> &\n      PositionProps &\n      Pick<\n        GridProps,\n        | 'gridColumn'\n        | 'gridRow'\n        | 'gridRowStart'\n        | 'gridRowEnd'\n        | 'gridColumnStart'\n        | 'gridColumnEnd'\n        | 'gridArea'\n      > &\n      Pick<LayoutProps, 'display'> &\n      Pick<CommonBoxVisualProps, 'visibility'>,\n    '__brand__'\n  >\n>;\n\ntype BoxCallbackProps = Omit<\n  Platform.Select<{\n    web: {\n      /**\n       * **Warning**\n       *\n       * Make sure to not use Box when you want to create a trigger that performs action on hover.\n       * You would probably want to render it as `button` using `styled.button` instead.\n       *\n       * Use this for hoverable containers in cases like custom menus.\n       */\n      onMouseOver: React.MouseEventHandler<HTMLElement>;\n      /**\n       * **Warning**\n       *\n       * Make sure to not use Box when you want to create a trigger that performs action on hover.\n       * You would probably want to render it as `button` using `styled.button` instead.\n       *\n       * Use this for hoverable containers in cases like custom menus.\n       */\n      onMouseEnter: React.MouseEventHandler<HTMLElement>;\n      /**\n       * **Warning**\n       *\n       * Make sure to not use Box when you want to create a trigger that performs action on hover.\n       * You would probably want to render it as `button` using `styled.button` instead.\n       *\n       * Use this for hoverable containers in cases like custom menus.\n       */\n      onMouseLeave: React.MouseEventHandler<HTMLElement>;\n      onScroll: React.UIEventHandler<HTMLElement>;\n    };\n    native: Record<'onMouseOver' | 'onMouseEnter' | 'onMouseLeave' | 'onScroll', undefined>;\n  }>,\n  '__brand__'\n>;\n\ntype BoxDragAndDropProps = Omit<\n  Platform.Select<{\n    web: {\n      draggable: boolean;\n      onDragStart: React.DragEventHandler<HTMLElement>;\n      onDragEnter: React.DragEventHandler<HTMLElement>;\n      onDragLeave: React.DragEventHandler<HTMLElement>;\n      onDragOver: React.DragEventHandler<HTMLElement>;\n      onDragEnd: React.DragEventHandler<HTMLElement>;\n      onDrop: React.DragEventHandler<HTMLElement>;\n    };\n    native: Record<\n      | 'draggable'\n      | 'onDragStart'\n      | 'onDragEnter'\n      | 'onDragLeave'\n      | 'onDragOver'\n      | 'onDragEnd'\n      | 'onDrop',\n      undefined\n    >;\n  }>,\n  '__brand__'\n>;\n\ntype BoxProps = Partial<\n  PaddingProps &\n    MarginProps &\n    LayoutProps &\n    FlexboxProps &\n    PositionProps &\n    GridProps &\n    BoxCallbackProps &\n    BoxDragAndDropProps &\n    CommonBoxVisualProps &\n    BoxVisualProps & {\n      children?: React.ReactNode | React.ReactNode[];\n      tabIndex?: number;\n      id?: string;\n    } & TestID &\n    DataAnalyticsAttribute\n>;\n\n// Visual props have different types for BaseBox and Box. BaseBox has more flexible types and more props exposed.\n// So first we Omit Visual props of Box\n// Then we append BaseBoxVisualProps and some other props for styled-components like class and id\ntype BaseBoxProps = Omit<BoxProps, keyof BoxVisualProps> &\n  Partial<\n    DataAnalyticsAttribute &\n      BaseBoxVisualProps & {\n        className?: string;\n        id?: string;\n        tabIndex?: number;\n      }\n  > &\n  BladeCommonEvents;\n\n// ref prop type\ntype BoxRefType = Platform.Select<{\n  web: Omit<HTMLElement, 'style'>;\n  native: View;\n}>;\n\nexport type { BaseBoxProps, BoxProps, BoxRefType, StyledPropsBlade, FlexboxProps };\nexport { validBoxAsValues };\n"],"names":["validBoxAsValues"],"mappings":"AA8GM,IAAAA,gBAAgB,CAAG,CACvB,KAAK,CACL,SAAS,CACT,QAAQ,CACR,QAAQ,CACR,MAAM,CACN,OAAO,CACP,KAAK,CACL,MAAM,CACN,OAAO;;;;"}
+{"version":3,"file":"propsTypes.js","sources":["../../../../../../../src/components/Box/BaseBox/types/propsTypes.ts"],"sourcesContent":["import type { View } from 'react-native';\nimport type { CSSObject } from 'styled-components';\nimport type { MarginProps, PaddingProps, SpacingValueType } from './spacingTypes';\nimport type { MakeObjectResponsive } from './responsiveTypes';\nimport type { Theme } from '~components/BladeProvider';\nimport type { Border, Elevation } from '~tokens/global';\nimport type { DataAnalyticsAttribute, PickCSSByPlatform, TestID } from '~utils/types';\nimport type { Platform } from '~utils';\nimport type { BladeCommonEvents } from '~components/types';\nimport type { DotNotationToken } from '~utils/lodashButBetter/get';\n\ntype LayoutProps = MakeObjectResponsive<\n  {\n    height: SpacingValueType;\n    minHeight: SpacingValueType;\n    maxHeight: SpacingValueType;\n    width: SpacingValueType;\n    minWidth: SpacingValueType;\n    maxWidth: SpacingValueType;\n  } & PickCSSByPlatform<\n    'display' | 'overflow' | 'overflowX' | 'overflowY' | 'textAlign' | 'whiteSpace'\n  >\n>;\n\ntype FlexboxProps = MakeObjectResponsive<\n  {\n    /**\n     * This uses the native gap property which might not work on older browsers.\n     * If you want to support older browsers, you might want to use `margin` instead.\n     *\n     * @see https://caniuse.com/?search=gap\n     */\n    gap: SpacingValueType;\n    /**\n     * This uses the native row-gap property which might not work on older browsers.\n     * If you want to support older browsers, you might want to use `margin` instead.\n     *\n     * @see https://caniuse.com/?search=row-gap\n     */\n    rowGap: SpacingValueType;\n    /**\n     * This uses the native column-gap property which might not work on older browsers.\n     * If you want to support older browsers, you might want to use `margin` instead.\n     *\n     * @see https://caniuse.com/?search=column-gap\n     */\n    columnGap: SpacingValueType;\n    /**\n     * The **`flex`** CSS shorthand property sets how a flex _item_ will grow or shrink to fit the space available in its flex container.\n     *\n     * @see https://developer.mozilla.org/docs/Web/CSS/flex\n     */\n    flex: string | number;\n  } & PickCSSByPlatform<\n    | 'flexWrap'\n    | 'flexDirection'\n    | 'flexGrow'\n    | 'flexShrink'\n    | 'flexBasis'\n    | 'alignItems'\n    | 'alignContent'\n    | 'alignSelf'\n    | 'justifyItems'\n    | 'justifyContent'\n    | 'justifySelf'\n    | 'placeSelf'\n    | 'placeItems'\n    | 'order'\n  >\n>;\n\ntype PositionProps = MakeObjectResponsive<\n  {\n    top: SpacingValueType;\n    right: SpacingValueType;\n    bottom: SpacingValueType;\n    left: SpacingValueType;\n  } & PickCSSByPlatform<'position' | 'zIndex'>\n>;\n\ntype GridProps = MakeObjectResponsive<\n  PickCSSByPlatform<\n    | 'grid'\n    | 'gridColumn'\n    | 'gridRow'\n    | 'gridRowStart'\n    | 'gridRowEnd'\n    | 'gridColumnStart'\n    | 'gridColumnEnd'\n    | 'gridArea'\n    | 'gridAutoFlow'\n    | 'gridAutoRows'\n    | 'gridAutoColumns'\n    | 'gridTemplate'\n    | 'gridTemplateAreas'\n    | 'gridTemplateColumns'\n    | 'gridTemplateRows'\n  >\n>;\n\ntype ColorObjects = 'feedback' | 'surface' | 'interactive';\ntype BackgroundOnlyColorObjects = 'popup' | 'overlay';\ntype BackgroundColorString<\n  T extends ColorObjects | BackgroundOnlyColorObjects\n> = `${T}.background.${DotNotationToken<Theme['colors'][T]['background']>}`;\ntype BorderColorString<T extends ColorObjects> = `${T}.border.${DotNotationToken<\n  Theme['colors'][T]['border']\n>}`;\n\n// Created this as an array so I can reuse it for runtime validation\nconst validBoxAsValues = [\n  'div',\n  'section',\n  'footer',\n  'header',\n  'main',\n  'aside',\n  'nav',\n  'span',\n  'label',\n] as const;\n\ntype BoxAsType = typeof validBoxAsValues[number];\n\n// Visual props that are common for both Box and BaseBox\ntype CommonBoxVisualProps = MakeObjectResponsive<\n  {\n    borderRadius: keyof Border['radius'];\n    borderWidth: keyof Border['width'];\n    borderColor: BorderColorString<'surface'>;\n    borderTopWidth: keyof Border['width'];\n    borderTopColor: BorderColorString<'surface'>;\n    borderRightWidth: keyof Border['width'];\n    borderRightColor: BorderColorString<'surface'>;\n    borderBottomWidth: keyof Border['width'];\n    borderBottomColor: BorderColorString<'surface'>;\n    borderLeftWidth: keyof Border['width'];\n    borderLeftColor: BorderColorString<'surface'>;\n    borderTopLeftRadius: keyof Border['radius'];\n    borderTopRightRadius: keyof Border['radius'];\n    borderBottomRightRadius: keyof Border['radius'];\n    borderBottomLeftRadius: keyof Border['radius'];\n  } & PickCSSByPlatform<\n    | 'backgroundImage'\n    | 'backgroundSize'\n    | 'backgroundPosition'\n    | 'backgroundOrigin'\n    | 'backgroundRepeat'\n    | 'pointerEvents'\n    | 'opacity'\n    | 'visibility'\n    | 'transform'\n    | 'transformOrigin'\n    | 'clipPath'\n    | 'borderStyle'\n    | 'borderTopStyle'\n    | 'borderBottomStyle'\n    | 'borderLeftStyle'\n    | 'borderRightStyle'\n  > & {\n      /**\n       * Sets the elevation for Box\n       *\n       * eg: `theme.elevation.midRaised`\n       *\n       * @default `theme.elevation.lowRaised`\n       *\n       * **Links:**\n       * - Docs: https://blade.razorpay.com/?path=/docs/tokens-elevation--docs\n       */\n      elevation?: keyof Elevation;\n    }\n>;\n\n// Visual props that are specific BaseBox\n// This is used to ensure some of the more flexible BaseBox props are not passed to Box\ntype BaseBoxVisualProps = MakeObjectResponsive<\n  {\n    backgroundColor:\n      | BackgroundColorString<'feedback'>\n      | BackgroundColorString<'surface'>\n      | BackgroundColorString<'interactive'>\n      | BackgroundColorString<'overlay'>\n      | BackgroundColorString<'popup'>\n      | 'transparent'\n      | (string & Record<never, never>);\n    lineHeight: SpacingValueType;\n    touchAction: CSSObject['touchAction'];\n    userSelect: CSSObject['userSelect'];\n  } & PickCSSByPlatform<\n    | 'border'\n    | 'borderLeft'\n    | 'borderRight'\n    | 'borderTop'\n    | 'borderBottom'\n    | 'opacity'\n    | 'pointerEvents'\n    | 'cursor'\n  >\n>;\n\n// Visual props that are specific to Box\ntype BoxVisualProps = MakeObjectResponsive<{\n  backgroundColor:\n    | BackgroundColorString<'surface'>\n    | BackgroundColorString<'overlay'>\n    | 'transparent';\n}> & {\n  // Intentionally keeping this outside of MakeObjectResponsive since we only want as to be string and not responsive object\n  // styled-components do not support passing `as` prop as an object\n  as: BoxAsType;\n};\n\ntype StyledPropsBlade = Partial<\n  Omit<\n    MarginProps &\n      Pick<FlexboxProps, 'alignSelf' | 'justifySelf' | 'placeSelf' | 'order' | 'flexWrap'> &\n      PositionProps &\n      Pick<\n        GridProps,\n        | 'gridColumn'\n        | 'gridRow'\n        | 'gridRowStart'\n        | 'gridRowEnd'\n        | 'gridColumnStart'\n        | 'gridColumnEnd'\n        | 'gridArea'\n      > &\n      Pick<LayoutProps, 'display'> &\n      Pick<CommonBoxVisualProps, 'visibility'>,\n    '__brand__'\n  >\n>;\n\ntype BoxCallbackProps = Omit<\n  Platform.Select<{\n    web: {\n      /**\n       * **Warning**\n       *\n       * Make sure to not use Box when you want to create a trigger that performs action on hover.\n       * You would probably want to render it as `button` using `styled.button` instead.\n       *\n       * Use this for hoverable containers in cases like custom menus.\n       */\n      onMouseOver: React.MouseEventHandler<HTMLElement>;\n      /**\n       * **Warning**\n       *\n       * Make sure to not use Box when you want to create a trigger that performs action on hover.\n       * You would probably want to render it as `button` using `styled.button` instead.\n       *\n       * Use this for hoverable containers in cases like custom menus.\n       */\n      onMouseEnter: React.MouseEventHandler<HTMLElement>;\n      /**\n       * **Warning**\n       *\n       * Make sure to not use Box when you want to create a trigger that performs action on hover.\n       * You would probably want to render it as `button` using `styled.button` instead.\n       *\n       * Use this for hoverable containers in cases like custom menus.\n       */\n      onMouseLeave: React.MouseEventHandler<HTMLElement>;\n      onScroll: React.UIEventHandler<HTMLElement>;\n    };\n    native: Record<'onMouseOver' | 'onMouseEnter' | 'onMouseLeave' | 'onScroll', undefined>;\n  }>,\n  '__brand__'\n>;\n\ntype BoxDragAndDropProps = Omit<\n  Platform.Select<{\n    web: {\n      draggable: boolean;\n      onDragStart: React.DragEventHandler<HTMLElement>;\n      onDragEnter: React.DragEventHandler<HTMLElement>;\n      onDragLeave: React.DragEventHandler<HTMLElement>;\n      onDragOver: React.DragEventHandler<HTMLElement>;\n      onDragEnd: React.DragEventHandler<HTMLElement>;\n      onDrop: React.DragEventHandler<HTMLElement>;\n    };\n    native: Record<\n      | 'draggable'\n      | 'onDragStart'\n      | 'onDragEnter'\n      | 'onDragLeave'\n      | 'onDragOver'\n      | 'onDragEnd'\n      | 'onDrop',\n      undefined\n    >;\n  }>,\n  '__brand__'\n>;\n\ntype BoxProps = Partial<\n  PaddingProps &\n    MarginProps &\n    LayoutProps &\n    FlexboxProps &\n    PositionProps &\n    GridProps &\n    BoxCallbackProps &\n    BoxDragAndDropProps &\n    CommonBoxVisualProps &\n    BoxVisualProps & {\n      children?: React.ReactNode | React.ReactNode[];\n      tabIndex?: number;\n      id?: string;\n    } & TestID &\n    DataAnalyticsAttribute\n>;\n\n// Visual props have different types for BaseBox and Box. BaseBox has more flexible types and more props exposed.\n// So first we Omit Visual props of Box\n// Then we append BaseBoxVisualProps and some other props for styled-components like class and id\ntype BaseBoxProps = Omit<BoxProps, keyof BoxVisualProps> &\n  Partial<\n    DataAnalyticsAttribute &\n      BaseBoxVisualProps & {\n        className?: string;\n        id?: string;\n        tabIndex?: number;\n      }\n  > &\n  BladeCommonEvents;\n\n// ref prop type\ntype BoxRefType = Platform.Select<{\n  web: Omit<HTMLElement, 'style'>;\n  native: View;\n}>;\n\nexport type { BaseBoxProps, BoxProps, BoxRefType, StyledPropsBlade, FlexboxProps };\nexport { validBoxAsValues };\n"],"names":["validBoxAsValues"],"mappings":"AA8GM,IAAAA,gBAAgB,CAAG,CACvB,KAAK,CACL,SAAS,CACT,QAAQ,CACR,QAAQ,CACR,MAAM,CACN,OAAO,CACP,KAAK,CACL,MAAM,CACN,OAAO;;;;"}

package/build/lib/native/components/Box/styledProps/getStyledProps.js

@@ -1,4 +1,4 @@
-var removeUndefinedStyledProps=function removeUndefinedStyledProps(obj){var onlyDefinedStyledProps={};for(var key in obj){if(obj[key]!==undefined){onlyDefinedStyledProps[key]=obj[key];}}return onlyDefinedStyledProps;};var makeStyledProps=function makeStyledProps(props){return {alignSelf:props.alignSelf,display:props.display,justifySelf:props.justifySelf,placeSelf:props.placeSelf,order:props.order,position:props.position,zIndex:props.zIndex,gridColumn:props.gridColumn,gridColumnStart:props.gridColumnStart,gridColumnEnd:props.gridColumnEnd,gridRow:props.gridRow,gridRowStart:props.gridRowStart,gridRowEnd:props.gridRowEnd,gridArea:props.gridArea,margin:props.margin,marginX:props.marginX,marginY:props.marginY,marginBottom:props.marginBottom,marginTop:props.marginTop,marginRight:props.marginRight,marginLeft:props.marginLeft,top:props.top,right:props.right,bottom:props.bottom,left:props.left,visibility:props.visibility};};var getStyledProps=function getStyledProps(props){return removeUndefinedStyledProps(makeStyledProps(props));};
+var removeUndefinedStyledProps=function removeUndefinedStyledProps(obj){var onlyDefinedStyledProps={};for(var key in obj){if(obj[key]!==undefined){onlyDefinedStyledProps[key]=obj[key];}}return onlyDefinedStyledProps;};var makeStyledProps=function makeStyledProps(props){return {alignSelf:props.alignSelf,display:props.display,justifySelf:props.justifySelf,placeSelf:props.placeSelf,order:props.order,position:props.position,zIndex:props.zIndex,gridColumn:props.gridColumn,gridColumnStart:props.gridColumnStart,gridColumnEnd:props.gridColumnEnd,gridRow:props.gridRow,gridRowStart:props.gridRowStart,gridRowEnd:props.gridRowEnd,gridArea:props.gridArea,margin:props.margin,marginX:props.marginX,marginY:props.marginY,marginBottom:props.marginBottom,marginTop:props.marginTop,marginRight:props.marginRight,marginLeft:props.marginLeft,top:props.top,right:props.right,bottom:props.bottom,left:props.left,visibility:props.visibility,flexWrap:props.flexWrap};};var getStyledProps=function getStyledProps(props){return removeUndefinedStyledProps(makeStyledProps(props));};
 
 export { getStyledProps, makeStyledProps, removeUndefinedStyledProps };
 //# sourceMappingURL=getStyledProps.js.map

package/build/lib/native/components/Box/styledProps/getStyledProps.js.map

@@ -1 +1 @@
-{"version":3,"file":"getStyledProps.js","sources":["../../../../../../src/components/Box/styledProps/getStyledProps.ts"],"sourcesContent":["import type { StyledPropsBlade } from '../BaseBox/types';\nimport type { KeysRequired } from '~utils/types';\n\n/**\n * The input type to these styledProps utilities can be anything as we can just pass all the props and then get the filtered styledProps out of it\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype StyledPropsInputType = Record<string, any>;\n\n/**\n * Removing undefined styledProps because when used with spread operator, undefined can override the earlier defined values.\n\n  * Example: the following code will print display: undefined since it is given priority in spread.\n  * \n  * ```ts\n  * const styledProps = {\n  *  display: undefined,\n  * }\n  *\n  * const buttonProps = {\n  *  display: 'block',\n  * }\n  *\n  * const styles = {\n  *  ...buttonProps,\n  *  ...styledProps,\n  * } // -> Prints { display: undefined }\n  * ```\n  */\nconst removeUndefinedStyledProps = (obj: StyledPropsInputType): StyledPropsInputType => {\n  const onlyDefinedStyledProps: StyledPropsBlade = {};\n  for (const key in obj) {\n    if (obj[key] !== undefined) {\n      // eslint-disable-next-line @typescript-eslint/ban-ts-comment, @typescript-eslint/prefer-ts-expect-error\n      // @ts-ignore: complex type error\n      onlyDefinedStyledProps[key] = obj[key];\n    }\n  }\n  return onlyDefinedStyledProps;\n};\n\n/**\n * - Removes the props that are not styledProps\n * - Returns all the styled props along with undefined values.\n *\n * Can be used in generating storybook docs and testing the possible props.\n *\n *\n * **Use `getStyledProps` instead if you're using this for adding styledProps!**\n */\nconst makeStyledProps = (props: StyledPropsInputType): KeysRequired<StyledPropsBlade> => {\n  return {\n    alignSelf: props.alignSelf,\n    display: props.display,\n    justifySelf: props.justifySelf,\n    placeSelf: props.placeSelf,\n    order: props.order,\n    position: props.position,\n    zIndex: props.zIndex,\n    gridColumn: props.gridColumn,\n    gridColumnStart: props.gridColumnStart,\n    gridColumnEnd: props.gridColumnEnd,\n    gridRow: props.gridRow,\n    gridRowStart: props.gridRowStart,\n    gridRowEnd: props.gridRowEnd,\n    gridArea: props.gridArea,\n    margin: props.margin,\n    marginX: props.marginX,\n    marginY: props.marginY,\n    marginBottom: props.marginBottom,\n    marginTop: props.marginTop,\n    marginRight: props.marginRight,\n    marginLeft: props.marginLeft,\n    top: props.top,\n    right: props.right,\n    bottom: props.bottom,\n    left: props.left,\n    visibility: props.visibility,\n  };\n};\n\n/**\n *\n * ## How to add Styled Props to components?\n *\n * There are 2 ways\n * - Using `getStyledProps` + BaseBox wrapper\n * - Using `useStyledProps`\n *\n * You can use `getStyledProps` method if you're fine adding or already have BaseBox wrapper around your component\n * And use `useStyledProps` when adding BaseBox wrapper can cause styling issues or is unneccessary and you want to prevent unnecessary renders\n *\n * ### Usage\n *\n * #### `getStyledProps` + BaseBox wrapper\n *\n * ```tsx\n * import type { StyledPropsBlade } from '~src/components/Box/styledProps';\n * import { getStyledProps } from '~src/components/Box/styledProps';\n *\n * type MyComponentProps = {\n *   // ... Your Props\n * } & StyledPropsBlade;\n *\n * const MyComponent = (props: MyComponentProps): React.ReactElement => {\n *  return (\n *    // Make sure styledProps come last so they take priority in stylings in-case of overrides\n *    <BaseBox someOtherProp={someValue} {...getStyledProps(props)}>\n *      // Your component code\n *    </BaseBox>\n *  )\n * }\n * ```\n *\n * #### `useStyledProps`\n *\n *\n * ```tsx\n * import type { StyledPropsBlade } from '~src/components/Box/styledProps';\n * import { useStyledProps } from '~src/components/Box/styledProps';\n *\n * type MyTextComponentProps = {\n *   // ... Your Props\n * } & StyledPropsBlade;\n *\n *\n * const TextComponentWithStyledProps = styled.p<MyTextComponentProps>((props) => {\n *  const styledPropsCSSObject = useStyledProps(props);\n *\n *  return {\n *    // ...your other CSS,\n *    ...styledPropsCSSObject, // Make sure styledProps come last so they take priority in styles\n *  }\n * })\n * ```\n *\n * Checkout implementation in `BaseText` components for example of `useStyledProps`\n *\n * - Web: [`BaseText.web.tsx`](../../components/Typography/BaseText/BaseText.web.tsx)\n * - Native: [`BaseText.native.tsx`](../../components/Typography/BaseText/BaseText.native.tsx)\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst getStyledProps = (props: Record<string, any>): StyledPropsBlade => {\n  return removeUndefinedStyledProps(makeStyledProps(props));\n};\n\nexport type { StyledPropsBlade };\nexport { getStyledProps, makeStyledProps, removeUndefinedStyledProps };\n"],"names":["removeUndefinedStyledProps","obj","onlyDefinedStyledProps","key","undefined","makeStyledProps","props","alignSelf","display","justifySelf","placeSelf","order","position","zIndex","gridColumn","gridColumnStart","gridColumnEnd","gridRow","gridRowStart","gridRowEnd","gridArea","margin","marginX","marginY","marginBottom","marginTop","marginRight","marginLeft","top","right","bottom","left","visibility","getStyledProps"],"mappings":"AA6BM,IAAAA,0BAA0B,CAAG,SAA7BA,0BAA0BA,CAAIC,GAAyB,CAA2B,CACtF,IAAMC,sBAAwC,CAAG,EAAE,CACnD,IAAK,IAAMC,GAAG,IAAIF,GAAG,CAAE,CACrB,GAAIA,GAAG,CAACE,GAAG,CAAC,GAAKC,SAAS,CAAE,CAG1BF,sBAAsB,CAACC,GAAG,CAAC,CAAGF,GAAG,CAACE,GAAG,CAAC,CACxC,CACF,CACA,OAAOD,sBAAsB,CAC/B,EAWM,IAAAG,eAAe,CAAG,SAAlBA,eAAeA,CAAIC,KAA2B,CAAqC,CACvF,OAAO,CACLC,SAAS,CAAED,KAAK,CAACC,SAAS,CAC1BC,OAAO,CAAEF,KAAK,CAACE,OAAO,CACtBC,WAAW,CAAEH,KAAK,CAACG,WAAW,CAC9BC,SAAS,CAAEJ,KAAK,CAACI,SAAS,CAC1BC,KAAK,CAAEL,KAAK,CAACK,KAAK,CAClBC,QAAQ,CAAEN,KAAK,CAACM,QAAQ,CACxBC,MAAM,CAAEP,KAAK,CAACO,MAAM,CACpBC,UAAU,CAAER,KAAK,CAACQ,UAAU,CAC5BC,eAAe,CAAET,KAAK,CAACS,eAAe,CACtCC,aAAa,CAAEV,KAAK,CAACU,aAAa,CAClCC,OAAO,CAAEX,KAAK,CAACW,OAAO,CACtBC,YAAY,CAAEZ,KAAK,CAACY,YAAY,CAChCC,UAAU,CAAEb,KAAK,CAACa,UAAU,CAC5BC,QAAQ,CAAEd,KAAK,CAACc,QAAQ,CACxBC,MAAM,CAAEf,KAAK,CAACe,MAAM,CACpBC,OAAO,CAAEhB,KAAK,CAACgB,OAAO,CACtBC,OAAO,CAAEjB,KAAK,CAACiB,OAAO,CACtBC,YAAY,CAAElB,KAAK,CAACkB,YAAY,CAChCC,SAAS,CAAEnB,KAAK,CAACmB,SAAS,CAC1BC,WAAW,CAAEpB,KAAK,CAACoB,WAAW,CAC9BC,UAAU,CAAErB,KAAK,CAACqB,UAAU,CAC5BC,GAAG,CAAEtB,KAAK,CAACsB,GAAG,CACdC,KAAK,CAAEvB,KAAK,CAACuB,KAAK,CAClBC,MAAM,CAAExB,KAAK,CAACwB,MAAM,CACpBC,IAAI,CAAEzB,KAAK,CAACyB,IAAI,CAChBC,UAAU,CAAE1B,KAAK,CAAC0B,UACpB,CAAC,CACH,EA+DM,IAAAC,cAAc,CAAG,SAAjBA,cAAcA,CAAI3B,KAA0B,CAAuB,CACvE,OAAON,0BAA0B,CAACK,eAAe,CAACC,KAAK,CAAC,CAAC,CAC3D;;;;"}
+{"version":3,"file":"getStyledProps.js","sources":["../../../../../../src/components/Box/styledProps/getStyledProps.ts"],"sourcesContent":["import type { StyledPropsBlade } from '../BaseBox/types';\nimport type { KeysRequired } from '~utils/types';\n\n/**\n * The input type to these styledProps utilities can be anything as we can just pass all the props and then get the filtered styledProps out of it\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype StyledPropsInputType = Record<string, any>;\n\n/**\n * Removing undefined styledProps because when used with spread operator, undefined can override the earlier defined values.\n\n  * Example: the following code will print display: undefined since it is given priority in spread.\n  * \n  * ```ts\n  * const styledProps = {\n  *  display: undefined,\n  * }\n  *\n  * const buttonProps = {\n  *  display: 'block',\n  * }\n  *\n  * const styles = {\n  *  ...buttonProps,\n  *  ...styledProps,\n  * } // -> Prints { display: undefined }\n  * ```\n  */\nconst removeUndefinedStyledProps = (obj: StyledPropsInputType): StyledPropsInputType => {\n  const onlyDefinedStyledProps: StyledPropsBlade = {};\n  for (const key in obj) {\n    if (obj[key] !== undefined) {\n      // eslint-disable-next-line @typescript-eslint/ban-ts-comment, @typescript-eslint/prefer-ts-expect-error\n      // @ts-ignore: complex type error\n      onlyDefinedStyledProps[key] = obj[key];\n    }\n  }\n  return onlyDefinedStyledProps;\n};\n\n/**\n * - Removes the props that are not styledProps\n * - Returns all the styled props along with undefined values.\n *\n * Can be used in generating storybook docs and testing the possible props.\n *\n *\n * **Use `getStyledProps` instead if you're using this for adding styledProps!**\n */\nconst makeStyledProps = (props: StyledPropsInputType): KeysRequired<StyledPropsBlade> => {\n  return {\n    alignSelf: props.alignSelf,\n    display: props.display,\n    justifySelf: props.justifySelf,\n    placeSelf: props.placeSelf,\n    order: props.order,\n    position: props.position,\n    zIndex: props.zIndex,\n    gridColumn: props.gridColumn,\n    gridColumnStart: props.gridColumnStart,\n    gridColumnEnd: props.gridColumnEnd,\n    gridRow: props.gridRow,\n    gridRowStart: props.gridRowStart,\n    gridRowEnd: props.gridRowEnd,\n    gridArea: props.gridArea,\n    margin: props.margin,\n    marginX: props.marginX,\n    marginY: props.marginY,\n    marginBottom: props.marginBottom,\n    marginTop: props.marginTop,\n    marginRight: props.marginRight,\n    marginLeft: props.marginLeft,\n    top: props.top,\n    right: props.right,\n    bottom: props.bottom,\n    left: props.left,\n    visibility: props.visibility,\n    flexWrap: props.flexWrap,\n  };\n};\n\n/**\n *\n * ## How to add Styled Props to components?\n *\n * There are 2 ways\n * - Using `getStyledProps` + BaseBox wrapper\n * - Using `useStyledProps`\n *\n * You can use `getStyledProps` method if you're fine adding or already have BaseBox wrapper around your component\n * And use `useStyledProps` when adding BaseBox wrapper can cause styling issues or is unneccessary and you want to prevent unnecessary renders\n *\n * ### Usage\n *\n * #### `getStyledProps` + BaseBox wrapper\n *\n * ```tsx\n * import type { StyledPropsBlade } from '~src/components/Box/styledProps';\n * import { getStyledProps } from '~src/components/Box/styledProps';\n *\n * type MyComponentProps = {\n *   // ... Your Props\n * } & StyledPropsBlade;\n *\n * const MyComponent = (props: MyComponentProps): React.ReactElement => {\n *  return (\n *    // Make sure styledProps come last so they take priority in stylings in-case of overrides\n *    <BaseBox someOtherProp={someValue} {...getStyledProps(props)}>\n *      // Your component code\n *    </BaseBox>\n *  )\n * }\n * ```\n *\n * #### `useStyledProps`\n *\n *\n * ```tsx\n * import type { StyledPropsBlade } from '~src/components/Box/styledProps';\n * import { useStyledProps } from '~src/components/Box/styledProps';\n *\n * type MyTextComponentProps = {\n *   // ... Your Props\n * } & StyledPropsBlade;\n *\n *\n * const TextComponentWithStyledProps = styled.p<MyTextComponentProps>((props) => {\n *  const styledPropsCSSObject = useStyledProps(props);\n *\n *  return {\n *    // ...your other CSS,\n *    ...styledPropsCSSObject, // Make sure styledProps come last so they take priority in styles\n *  }\n * })\n * ```\n *\n * Checkout implementation in `BaseText` components for example of `useStyledProps`\n *\n * - Web: [`BaseText.web.tsx`](../../components/Typography/BaseText/BaseText.web.tsx)\n * - Native: [`BaseText.native.tsx`](../../components/Typography/BaseText/BaseText.native.tsx)\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst getStyledProps = (props: Record<string, any>): StyledPropsBlade => {\n  return removeUndefinedStyledProps(makeStyledProps(props));\n};\n\nexport type { StyledPropsBlade };\nexport { getStyledProps, makeStyledProps, removeUndefinedStyledProps };\n"],"names":["removeUndefinedStyledProps","obj","onlyDefinedStyledProps","key","undefined","makeStyledProps","props","alignSelf","display","justifySelf","placeSelf","order","position","zIndex","gridColumn","gridColumnStart","gridColumnEnd","gridRow","gridRowStart","gridRowEnd","gridArea","margin","marginX","marginY","marginBottom","marginTop","marginRight","marginLeft","top","right","bottom","left","visibility","flexWrap","getStyledProps"],"mappings":"AA6BM,IAAAA,0BAA0B,CAAG,SAA7BA,0BAA0BA,CAAIC,GAAyB,CAA2B,CACtF,IAAMC,sBAAwC,CAAG,EAAE,CACnD,IAAK,IAAMC,GAAG,IAAIF,GAAG,CAAE,CACrB,GAAIA,GAAG,CAACE,GAAG,CAAC,GAAKC,SAAS,CAAE,CAG1BF,sBAAsB,CAACC,GAAG,CAAC,CAAGF,GAAG,CAACE,GAAG,CAAC,CACxC,CACF,CACA,OAAOD,sBAAsB,CAC/B,EAWM,IAAAG,eAAe,CAAG,SAAlBA,eAAeA,CAAIC,KAA2B,CAAqC,CACvF,OAAO,CACLC,SAAS,CAAED,KAAK,CAACC,SAAS,CAC1BC,OAAO,CAAEF,KAAK,CAACE,OAAO,CACtBC,WAAW,CAAEH,KAAK,CAACG,WAAW,CAC9BC,SAAS,CAAEJ,KAAK,CAACI,SAAS,CAC1BC,KAAK,CAAEL,KAAK,CAACK,KAAK,CAClBC,QAAQ,CAAEN,KAAK,CAACM,QAAQ,CACxBC,MAAM,CAAEP,KAAK,CAACO,MAAM,CACpBC,UAAU,CAAER,KAAK,CAACQ,UAAU,CAC5BC,eAAe,CAAET,KAAK,CAACS,eAAe,CACtCC,aAAa,CAAEV,KAAK,CAACU,aAAa,CAClCC,OAAO,CAAEX,KAAK,CAACW,OAAO,CACtBC,YAAY,CAAEZ,KAAK,CAACY,YAAY,CAChCC,UAAU,CAAEb,KAAK,CAACa,UAAU,CAC5BC,QAAQ,CAAEd,KAAK,CAACc,QAAQ,CACxBC,MAAM,CAAEf,KAAK,CAACe,MAAM,CACpBC,OAAO,CAAEhB,KAAK,CAACgB,OAAO,CACtBC,OAAO,CAAEjB,KAAK,CAACiB,OAAO,CACtBC,YAAY,CAAElB,KAAK,CAACkB,YAAY,CAChCC,SAAS,CAAEnB,KAAK,CAACmB,SAAS,CAC1BC,WAAW,CAAEpB,KAAK,CAACoB,WAAW,CAC9BC,UAAU,CAAErB,KAAK,CAACqB,UAAU,CAC5BC,GAAG,CAAEtB,KAAK,CAACsB,GAAG,CACdC,KAAK,CAAEvB,KAAK,CAACuB,KAAK,CAClBC,MAAM,CAAExB,KAAK,CAACwB,MAAM,CACpBC,IAAI,CAAEzB,KAAK,CAACyB,IAAI,CAChBC,UAAU,CAAE1B,KAAK,CAAC0B,UAAU,CAC5BC,QAAQ,CAAE3B,KAAK,CAAC2B,QAClB,CAAC,CACH,EA+DM,IAAAC,cAAc,CAAG,SAAjBA,cAAcA,CAAI5B,KAA0B,CAAuB,CACvE,OAAON,0BAA0B,CAACK,eAAe,CAACC,KAAK,CAAC,CAAC,CAC3D;;;;"}

package/build/lib/native/components/Card/Card.js

@@ -19,9 +19,11 @@ import { assignWithoutSideEffects } from '../../utils/assignWithoutSideEffects/a
 import { makeAccessible } from '../../utils/makeAccessible/makeAccessible.native.js';
 import { useVerifyAllowedChildren } from '../../utils/useVerifyAllowedChildren/useVerifyAllowedChildren.js';
 import { makeAnalyticsAttribute } from '../../utils/makeAnalyticsAttribute/makeAnalyticsAttribute.js';
+import { useCheckboxGroupContext } from '../Checkbox/CheckboxGroup/CheckboxGroupContext.js';
+import { useRadioGroupContext } from '../Radio/RadioGroup/RadioContext.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
-var _excluded=["children","backgroundColor","borderRadius","elevation","testID","padding","width","height","minHeight","minWidth","maxWidth","onClick","isSelected","accessibilityLabel","shouldScaleOnHover","onHover","href","target","rel","as"],_excluded2=["height","children","testID"];var ComponentIds={CardHeader:'CardHeader',CardHeaderTrailing:'CardHeaderTrailing',CardHeaderLeading:'CardHeaderLeading',CardFooter:'CardFooter',CardFooterTrailing:'CardFooterTrailing',CardFooterLeading:'CardFooterLeading',CardBody:'CardBody',CardHeaderIcon:'CardHeaderIcon',CardHeaderCounter:'CardHeaderCounter',CardHeaderBadge:'CardHeaderBadge',CardHeaderAmount:'CardHeaderAmount',CardHeaderText:'CardHeaderText',CardHeaderLink:'CardHeaderLink',CardHeaderIconButton:'CardHeaderIconButton'};var _Card=function _Card(_ref,ref){var children=_ref.children,_ref$backgroundColor=_ref.backgroundColor,backgroundColor=_ref$backgroundColor===void 0?'surface.background.gray.intense':_ref$backgroundColor,_ref$borderRadius=_ref.borderRadius,borderRadius=_ref$borderRadius===void 0?'medium':_ref$borderRadius,_ref$elevation=_ref.elevation,elevation=_ref$elevation===void 0?'lowRaised':_ref$elevation,testID=_ref.testID,_ref$padding=_ref.padding,padding=_ref$padding===void 0?'spacing.7':_ref$padding,width=_ref.width,height=_ref.height,minHeight=_ref.minHeight,minWidth=_ref.minWidth,maxWidth=_ref.maxWidth,onClick=_ref.onClick,_ref$isSelected=_ref.isSelected,isSelected=_ref$isSelected===void 0?false:_ref$isSelected,accessibilityLabel=_ref.accessibilityLabel,_ref$shouldScaleOnHov=_ref.shouldScaleOnHover,shouldScaleOnHover=_ref$shouldScaleOnHov===void 0?false:_ref$shouldScaleOnHov,onHover=_ref.onHover,href=_ref.href,target=_ref.target,rel=_ref.rel,as=_ref.as,rest=_objectWithoutProperties(_ref,_excluded);var _React$useState=React__default.useState(false),_React$useState2=_slicedToArray(_React$useState,2),isFocused=_React$useState2[0],setIsFocused=_React$useState2[1];useVerifyAllowedChildren({children:children,componentName:'Card',allowedComponents:[ComponentIds.CardHeader,ComponentIds.CardBody,ComponentIds.CardFooter]});var linkOverlayProps=Object.assign({},metaAttribute({name:CARD_LINK_OVERLAY_ID}),makeAccessible({label:accessibilityLabel,pressed:href?undefined:isSelected}),{onFocus:function onFocus(){setIsFocused(true);},onBlur:function onBlur(){setIsFocused(false);}});var defaultRel=target&&target==='_blank'?'noreferrer noopener':undefined;return jsx(CardProvider,{children:jsx(CardRoot,Object.assign({as:as,ref:ref,display:'block',borderRadius:borderRadius,onMouseEnter:onHover,shouldScaleOnHover:shouldScaleOnHover,isSelected:isSelected,isFocused:isFocused,onClick:isReactNative()?onClick:undefined,width:width,height:height,minHeight:minHeight,minWidth:minWidth,maxWidth:maxWidth,href:href,accessibilityLabel:accessibilityLabel},metaAttribute({name:MetaConstants.Card,testID:testID}),getStyledProps(rest),makeAnalyticsAttribute(rest),{children:jsxs(CardSurface,{height:height,minHeight:minHeight,padding:padding,borderRadius:borderRadius,elevation:elevation,textAlign:'left',backgroundColor:backgroundColor,children:[href?jsx(LinkOverlay,Object.assign({onClick:onClick,href:href,target:target,rel:rel!=null?rel:defaultRel},linkOverlayProps)):null,!href&&onClick?jsx(LinkOverlay,Object.assign({as:"button",onClick:onClick},linkOverlayProps)):null,children]})}))});};var _CardBody=function _CardBody(_ref2){var height=_ref2.height,children=_ref2.children,testID=_ref2.testID,rest=_objectWithoutProperties(_ref2,_excluded2);useVerifyInsideCard('CardBody');return jsx(BaseBox,Object.assign({},metaAttribute({name:MetaConstants.CardBody,testID:testID}),makeAnalyticsAttribute(rest),{height:height,children:children}));};var Card=React__default.forwardRef(_Card);var CardBody=assignWithoutSideEffects(_CardBody,{componentId:ComponentIds.CardBody});
+var _excluded=["children","backgroundColor","borderRadius","elevation","testID","padding","width","height","minHeight","minWidth","maxWidth","onClick","isSelected","accessibilityLabel","shouldScaleOnHover","onHover","href","target","rel","as"],_excluded2=["height","children","testID"];var ComponentIds={CardHeader:'CardHeader',CardHeaderTrailing:'CardHeaderTrailing',CardHeaderLeading:'CardHeaderLeading',CardFooter:'CardFooter',CardFooterTrailing:'CardFooterTrailing',CardFooterLeading:'CardFooterLeading',CardBody:'CardBody',CardHeaderIcon:'CardHeaderIcon',CardHeaderCounter:'CardHeaderCounter',CardHeaderBadge:'CardHeaderBadge',CardHeaderAmount:'CardHeaderAmount',CardHeaderText:'CardHeaderText',CardHeaderLink:'CardHeaderLink',CardHeaderIconButton:'CardHeaderIconButton'};var _Card=function _Card(_ref,ref){var children=_ref.children,_ref$backgroundColor=_ref.backgroundColor,backgroundColor=_ref$backgroundColor===void 0?'surface.background.gray.intense':_ref$backgroundColor,_ref$borderRadius=_ref.borderRadius,borderRadius=_ref$borderRadius===void 0?'medium':_ref$borderRadius,_ref$elevation=_ref.elevation,elevation=_ref$elevation===void 0?'lowRaised':_ref$elevation,testID=_ref.testID,_ref$padding=_ref.padding,padding=_ref$padding===void 0?'spacing.7':_ref$padding,width=_ref.width,height=_ref.height,minHeight=_ref.minHeight,minWidth=_ref.minWidth,maxWidth=_ref.maxWidth,onClick=_ref.onClick,_ref$isSelected=_ref.isSelected,isSelected=_ref$isSelected===void 0?false:_ref$isSelected,accessibilityLabel=_ref.accessibilityLabel,_ref$shouldScaleOnHov=_ref.shouldScaleOnHover,shouldScaleOnHover=_ref$shouldScaleOnHov===void 0?false:_ref$shouldScaleOnHov,onHover=_ref.onHover,href=_ref.href,target=_ref.target,rel=_ref.rel,as=_ref.as,rest=_objectWithoutProperties(_ref,_excluded);var _React$useState=React__default.useState(false),_React$useState2=_slicedToArray(_React$useState,2),isFocused=_React$useState2[0],setIsFocused=_React$useState2[1];useVerifyAllowedChildren({children:children,componentName:'Card',allowedComponents:[ComponentIds.CardHeader,ComponentIds.CardBody,ComponentIds.CardFooter]});var linkOverlayProps=Object.assign({},metaAttribute({name:CARD_LINK_OVERLAY_ID}),makeAccessible({label:accessibilityLabel,pressed:href?undefined:isSelected}),{onFocus:function onFocus(){setIsFocused(true);},onBlur:function onBlur(){setIsFocused(false);}});var defaultRel=target&&target==='_blank'?'noreferrer noopener':undefined;var checkboxGroupProps=useCheckboxGroupContext();var radioGroupProps=useRadioGroupContext();var getGroupProps=function getGroupProps(){if(Object.keys(checkboxGroupProps).length>0)return checkboxGroupProps;if(Object.keys(radioGroupProps).length>0)return radioGroupProps;return undefined;};var groupProps=getGroupProps();var _validationState=groupProps==null?void 0:groupProps.validationState;return jsx(CardProvider,{children:jsx(CardRoot,Object.assign({as:as,ref:ref,display:'block',borderRadius:borderRadius,onMouseEnter:onHover,shouldScaleOnHover:shouldScaleOnHover,isSelected:isSelected,isFocused:isFocused,onClick:isReactNative()?onClick:undefined,width:width,height:height,minHeight:minHeight,minWidth:minWidth,maxWidth:maxWidth,href:href,accessibilityLabel:accessibilityLabel,validationState:_validationState},metaAttribute({name:MetaConstants.Card,testID:testID}),getStyledProps(rest),makeAnalyticsAttribute(rest),{children:jsxs(CardSurface,{height:height,minHeight:minHeight,padding:padding,borderRadius:borderRadius,elevation:elevation,textAlign:'left',backgroundColor:backgroundColor,children:[href?jsx(LinkOverlay,Object.assign({onClick:onClick,href:href,target:target,rel:rel!=null?rel:defaultRel},linkOverlayProps)):null,!href&&onClick?jsx(LinkOverlay,Object.assign({as:"button",onClick:onClick},linkOverlayProps)):null,children]})}))});};var _CardBody=function _CardBody(_ref2){var height=_ref2.height,children=_ref2.children,testID=_ref2.testID,rest=_objectWithoutProperties(_ref2,_excluded2);useVerifyInsideCard('CardBody');return jsx(BaseBox,Object.assign({},metaAttribute({name:MetaConstants.CardBody,testID:testID}),makeAnalyticsAttribute(rest),{height:height,children:children}));};var Card=React__default.forwardRef(_Card);var CardBody=assignWithoutSideEffects(_CardBody,{componentId:ComponentIds.CardBody});
 
 export { Card, CardBody, ComponentIds };
 //# sourceMappingURL=Card.js.map

package/build/lib/native/components/Card/Card.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.js","sources":["../../../../../src/components/Card/Card.tsx"],"sourcesContent":["import React from 'react';\nimport type { GestureResponderEvent } from 'react-native';\nimport { CardSurface } from './CardSurface';\nimport { CardProvider, useVerifyInsideCard } from './CardContext';\nimport { LinkOverlay } from './LinkOverlay';\nimport { CardRoot } from './CardRoot';\nimport type { CardSpacingValueType, LinkOverlayProps } from './types';\nimport { CARD_LINK_OVERLAY_ID } from './constants';\nimport BaseBox from '~components/Box/BaseBox';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport type { DataAnalyticsAttribute, BladeElementRef, TestID } from '~utils/types';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport type { Elevation } from '~tokens/global';\nimport type { BoxProps } from '~components/Box';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport { useVerifyAllowedChildren } from '~utils/useVerifyAllowedChildren/useVerifyAllowedChildren';\nimport type { Platform } from '~utils';\nimport { isReactNative } from '~utils';\nimport type { Theme } from '~components/BladeProvider';\nimport type { DotNotationToken } from '~utils/lodashButBetter/get';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\n\nexport const ComponentIds = {\n  CardHeader: 'CardHeader',\n  CardHeaderTrailing: 'CardHeaderTrailing',\n  CardHeaderLeading: 'CardHeaderLeading',\n  CardFooter: 'CardFooter',\n  CardFooterTrailing: 'CardFooterTrailing',\n  CardFooterLeading: 'CardFooterLeading',\n  CardBody: 'CardBody',\n  CardHeaderIcon: 'CardHeaderIcon',\n  CardHeaderCounter: 'CardHeaderCounter',\n  CardHeaderBadge: 'CardHeaderBadge',\n  CardHeaderAmount: 'CardHeaderAmount',\n  CardHeaderText: 'CardHeaderText',\n  CardHeaderLink: 'CardHeaderLink',\n  CardHeaderIconButton: 'CardHeaderIconButton',\n};\n\ntype CardSurfaceBackgroundColors = `surface.background.gray.${DotNotationToken<\n  Theme['colors']['surface']['background']['gray']\n>}`;\n\nexport type CardProps = {\n  /**\n   * Card contents\n   */\n  children: React.ReactNode;\n  /**\n   * Sets the background color of the Card\n   *\n   * @default `surface.background.gray.intense`\n   */\n  backgroundColor?: CardSurfaceBackgroundColors;\n  /**\n   * Sets the border radius of the Card\n   *\n   * @default `medium`\n   */\n  borderRadius?: Extract<BoxProps['borderRadius'], 'medium' | 'large' | 'xlarge'>;\n  /**\n   * Sets the elevation for Cards\n   *\n   * eg: `theme.elevation.midRaised`\n   *\n   * @default `theme.elevation.lowRaised`\n   *\n   * **Links:**\n   * - Docs: https://blade.razorpay.com/?path=/docs/tokens-elevation--docs\n   */\n  elevation?: keyof Elevation;\n  /**\n   * Sets the padding equally on all sides. Only few `spacing` tokens are allowed deliberately\n   * @default `spacing.7`\n   *\n   * **Links:**\n   * - Docs: https://blade.razorpay.com/?path=/docs/tokens-spacing--docs\n   */\n  padding?: CardSpacingValueType;\n  /**\n   * Sets the width of the card\n   */\n  width?: BoxProps['width'];\n  /**\n   * Sets the height of the card\n   */\n  height?: BoxProps['height'];\n  /**\n   * Sets minimum height of the card\n   */\n  minHeight?: BoxProps['minHeight'];\n  /**\n   * Sets minimum width of the card\n   */\n  minWidth?: BoxProps['minWidth'];\n  /**\n   * Sets maximum width of the card\n   */\n  maxWidth?: BoxProps['maxWidth'];\n  /**\n   * If `true`, the card will be in selected state\n   * Card will have a primary color border around it.\n   *\n   * @default false\n   */\n  isSelected?: boolean;\n  /**\n   * Makes the Card linkable by setting the `href` prop\n   *\n   * @default undefined\n   */\n  href?: string;\n  /**\n   * Sets the `target` attribute for the linkable card\n   */\n  target?: string;\n  /**\n   * Sets the `rel` attribute for the linkable card\n   */\n  rel?: string;\n  /**\n   * Sets the accessibility label for the card\n   * This is useful when the card has an `href` or `onClick` prop\n   * Setting this will announce the label when the card is focused\n   */\n  accessibilityLabel?: string;\n  /**\n   * If `true`, the card will scale up on hover\n   *\n   * On mobile devices it will scale down on press\n   *\n   * **This prop is deprecated in favour of motion presets released in v12**\n   *\n   * ### Migration\n   *\n   * ```diff\n   * - <Card\n   * -  shouldScaleOnHover\n   * - />\n   *\n   * + <Scale motionTriggers={['hover']}>\n   * +   <Card />\n   * + </Scale>\n   * ```\n   *\n   * @default false\n   *\n   * @deprecated This prop is deprecated in favour of motion presets released in v12\n   */\n  shouldScaleOnHover?: boolean;\n  /**\n   * Callback triggered when the card is hovered\n   */\n  onHover?: () => void;\n  /**\n   * Callback triggered when the card is clicked\n   */\n  onClick?: (\n    event: Platform.Select<{\n      web: React.MouseEvent;\n      native: GestureResponderEvent;\n    }>,\n  ) => void;\n  /**\n   * Sets the HTML element for the Card\n   *\n   * When `as` is set to `label`, the card will be rendered as a label element\n   * This can be used to create a custom checkbox or radio button using the card\n   *\n   * @default undefined\n   */\n  as?: 'label';\n} & TestID &\n  DataAnalyticsAttribute &\n  StyledPropsBlade;\n\nconst _Card: React.ForwardRefRenderFunction<BladeElementRef, CardProps> = (\n  {\n    children,\n    backgroundColor = 'surface.background.gray.intense',\n    borderRadius = 'medium',\n    elevation = 'lowRaised',\n    testID,\n    padding = 'spacing.7',\n    width,\n    height,\n    minHeight,\n    minWidth,\n    maxWidth,\n    onClick,\n    isSelected = false,\n    accessibilityLabel,\n    shouldScaleOnHover = false,\n    onHover,\n    href,\n    target,\n    rel,\n    as,\n    ...rest\n  },\n  ref,\n): React.ReactElement => {\n  const [isFocused, setIsFocused] = React.useState(false);\n\n  useVerifyAllowedChildren({\n    children,\n    componentName: 'Card',\n    allowedComponents: [ComponentIds.CardHeader, ComponentIds.CardBody, ComponentIds.CardFooter],\n  });\n\n  const linkOverlayProps: LinkOverlayProps = {\n    ...metaAttribute({ name: CARD_LINK_OVERLAY_ID }),\n    ...makeAccessible({ label: accessibilityLabel, pressed: href ? undefined : isSelected }),\n    onFocus: () => {\n      setIsFocused(true);\n    },\n    onBlur: () => {\n      setIsFocused(false);\n    },\n  };\n  const defaultRel = target && target === '_blank' ? 'noreferrer noopener' : undefined;\n\n  return (\n    <CardProvider>\n      <CardRoot\n        as={as}\n        ref={ref as never}\n        display={'block' as never}\n        borderRadius={borderRadius}\n        onMouseEnter={onHover as never}\n        shouldScaleOnHover={shouldScaleOnHover}\n        isSelected={isSelected}\n        isFocused={isFocused}\n        // on react native we need to pass onClick to root, because we don't need the LinkOverlay in RN\n        onClick={isReactNative() ? onClick : undefined}\n        width={width}\n        height={height}\n        minHeight={minHeight}\n        minWidth={minWidth}\n        maxWidth={maxWidth}\n        href={href}\n        accessibilityLabel={accessibilityLabel}\n        {...metaAttribute({ name: MetaConstants.Card, testID })}\n        {...getStyledProps(rest)}\n        {...makeAnalyticsAttribute(rest)}\n      >\n        <CardSurface\n          height={height}\n          minHeight={minHeight}\n          padding={padding}\n          borderRadius={borderRadius}\n          elevation={elevation}\n          textAlign={'left' as never}\n          backgroundColor={backgroundColor}\n        >\n          {href ? (\n            <LinkOverlay\n              onClick={onClick}\n              href={href}\n              target={target}\n              rel={rel ?? defaultRel}\n              {...linkOverlayProps}\n            />\n          ) : null}\n          {!href && onClick ? (\n            <LinkOverlay as=\"button\" onClick={onClick} {...linkOverlayProps} />\n          ) : null}\n          {children}\n        </CardSurface>\n      </CardRoot>\n    </CardProvider>\n  );\n};\n\ntype CardBodyProps = {\n  children: React.ReactNode;\n  height?: BoxProps['height'];\n} & TestID &\n  DataAnalyticsAttribute;\n\nconst _CardBody = ({ height, children, testID, ...rest }: CardBodyProps): React.ReactElement => {\n  useVerifyInsideCard('CardBody');\n\n  return (\n    <BaseBox\n      {...metaAttribute({ name: MetaConstants.CardBody, testID })}\n      {...makeAnalyticsAttribute(rest)}\n      height={height}\n    >\n      {children}\n    </BaseBox>\n  );\n};\n\nconst Card = React.forwardRef(_Card);\nconst CardBody = assignWithoutSideEffects(_CardBody, { componentId: ComponentIds.CardBody });\n\nexport { Card, CardBody };\n"],"names":["ComponentIds","CardHeader","CardHeaderTrailing","CardHeaderLeading","CardFooter","CardFooterTrailing","CardFooterLeading","CardBody","CardHeaderIcon","CardHeaderCounter","CardHeaderBadge","CardHeaderAmount","CardHeaderText","CardHeaderLink","CardHeaderIconButton","_Card","_ref","ref","children","_ref$backgroundColor","backgroundColor","_ref$borderRadius","borderRadius","_ref$elevation","elevation","testID","_ref$padding","padding","width","height","minHeight","minWidth","maxWidth","onClick","_ref$isSelected","isSelected","accessibilityLabel","_ref$shouldScaleOnHov","shouldScaleOnHover","onHover","href","target","rel","as","rest","_objectWithoutProperties","_excluded","_React$useState","React","useState","_React$useState2","_slicedToArray","isFocused","setIsFocused","useVerifyAllowedChildren","componentName","allowedComponents","linkOverlayProps","Object","assign","metaAttribute","name","CARD_LINK_OVERLAY_ID","makeAccessible","label","pressed","undefined","onFocus","onBlur","defaultRel","_jsx","CardProvider","CardRoot","display","onMouseEnter","isReactNative","MetaConstants","Card","getStyledProps","makeAnalyticsAttribute","_jsxs","CardSurface","textAlign","LinkOverlay","_CardBody","_ref2","_excluded2","useVerifyInsideCard","BaseBox","forwardRef","assignWithoutSideEffects","componentId"],"mappings":"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"}
+{"version":3,"file":"Card.js","sources":["../../../../../src/components/Card/Card.tsx"],"sourcesContent":["import React from 'react';\nimport type { GestureResponderEvent } from 'react-native';\nimport { CardSurface } from './CardSurface';\nimport { CardProvider, useVerifyInsideCard } from './CardContext';\nimport { LinkOverlay } from './LinkOverlay';\nimport { CardRoot } from './CardRoot';\nimport type { CardSpacingValueType, LinkOverlayProps } from './types';\nimport { CARD_LINK_OVERLAY_ID } from './constants';\nimport BaseBox from '~components/Box/BaseBox';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport type { DataAnalyticsAttribute, BladeElementRef, TestID } from '~utils/types';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport type { Elevation } from '~tokens/global';\nimport type { BoxProps } from '~components/Box';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport { useVerifyAllowedChildren } from '~utils/useVerifyAllowedChildren/useVerifyAllowedChildren';\nimport type { Platform } from '~utils';\nimport { isReactNative } from '~utils';\nimport type { Theme } from '~components/BladeProvider';\nimport type { DotNotationToken } from '~utils/lodashButBetter/get';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\nimport { useCheckboxGroupContext } from '~components/Checkbox/CheckboxGroup/CheckboxGroupContext';\nimport { useRadioGroupContext } from '~components/Radio/RadioGroup/RadioContext';\nimport type { CheckboxGroupContextType } from '~components/Checkbox/CheckboxGroup/CheckboxGroupContext';\nimport type { RadioGroupContextType } from '~components/Radio/RadioGroup/RadioContext';\n\nexport const ComponentIds = {\n  CardHeader: 'CardHeader',\n  CardHeaderTrailing: 'CardHeaderTrailing',\n  CardHeaderLeading: 'CardHeaderLeading',\n  CardFooter: 'CardFooter',\n  CardFooterTrailing: 'CardFooterTrailing',\n  CardFooterLeading: 'CardFooterLeading',\n  CardBody: 'CardBody',\n  CardHeaderIcon: 'CardHeaderIcon',\n  CardHeaderCounter: 'CardHeaderCounter',\n  CardHeaderBadge: 'CardHeaderBadge',\n  CardHeaderAmount: 'CardHeaderAmount',\n  CardHeaderText: 'CardHeaderText',\n  CardHeaderLink: 'CardHeaderLink',\n  CardHeaderIconButton: 'CardHeaderIconButton',\n};\n\ntype CardSurfaceBackgroundColors = `surface.background.gray.${DotNotationToken<\n  Theme['colors']['surface']['background']['gray']\n>}`;\n\nexport type CardProps = {\n  /**\n   * Card contents\n   */\n  children: React.ReactNode;\n  /**\n   * Sets the background color of the Card\n   *\n   * @default `surface.background.gray.intense`\n   */\n  backgroundColor?: CardSurfaceBackgroundColors;\n  /**\n   * Sets the border radius of the Card\n   *\n   * @default `medium`\n   */\n  borderRadius?: Extract<BoxProps['borderRadius'], 'medium' | 'large' | 'xlarge'>;\n  /**\n   * Sets the elevation for Cards\n   *\n   * eg: `theme.elevation.midRaised`\n   *\n   * @default `theme.elevation.lowRaised`\n   *\n   * **Links:**\n   * - Docs: https://blade.razorpay.com/?path=/docs/tokens-elevation--docs\n   */\n  elevation?: keyof Elevation;\n  /**\n   * Sets the padding equally on all sides. Only few `spacing` tokens are allowed deliberately\n   * @default `spacing.7`\n   *\n   * **Links:**\n   * - Docs: https://blade.razorpay.com/?path=/docs/tokens-spacing--docs\n   */\n  padding?: CardSpacingValueType;\n  /**\n   * Sets the width of the card\n   */\n  width?: BoxProps['width'];\n  /**\n   * Sets the height of the card\n   */\n  height?: BoxProps['height'];\n  /**\n   * Sets minimum height of the card\n   */\n  minHeight?: BoxProps['minHeight'];\n  /**\n   * Sets minimum width of the card\n   */\n  minWidth?: BoxProps['minWidth'];\n  /**\n   * Sets maximum width of the card\n   */\n  maxWidth?: BoxProps['maxWidth'];\n  /**\n   * If `true`, the card will be in selected state\n   * Card will have a primary color border around it.\n   *\n   * @default false\n   */\n  isSelected?: boolean;\n  /**\n   * Makes the Card linkable by setting the `href` prop\n   *\n   * @default undefined\n   */\n  href?: string;\n  /**\n   * Sets the `target` attribute for the linkable card\n   */\n  target?: string;\n  /**\n   * Sets the `rel` attribute for the linkable card\n   */\n  rel?: string;\n  /**\n   * Sets the accessibility label for the card\n   * This is useful when the card has an `href` or `onClick` prop\n   * Setting this will announce the label when the card is focused\n   */\n  accessibilityLabel?: string;\n  /**\n   * If `true`, the card will scale up on hover\n   *\n   * On mobile devices it will scale down on press\n   *\n   * **This prop is deprecated in favour of motion presets released in v12**\n   *\n   * ### Migration\n   *\n   * ```diff\n   * - <Card\n   * -  shouldScaleOnHover\n   * - />\n   *\n   * + <Scale motionTriggers={['hover']}>\n   * +   <Card />\n   * + </Scale>\n   * ```\n   *\n   * @default false\n   *\n   * @deprecated This prop is deprecated in favour of motion presets released in v12\n   */\n  shouldScaleOnHover?: boolean;\n  /**\n   * Callback triggered when the card is hovered\n   */\n  onHover?: () => void;\n  /**\n   * Callback triggered when the card is clicked\n   */\n  onClick?: (\n    event: Platform.Select<{\n      web: React.MouseEvent;\n      native: GestureResponderEvent;\n    }>,\n  ) => void;\n  /**\n   * Sets the HTML element for the Card\n   *\n   * When `as` is set to `label`, the card will be rendered as a label element\n   * This can be used to create a custom checkbox or radio button using the card\n   *\n   * @default undefined\n   */\n  as?: 'label';\n} & TestID &\n  DataAnalyticsAttribute &\n  StyledPropsBlade;\n\nconst _Card: React.ForwardRefRenderFunction<BladeElementRef, CardProps> = (\n  {\n    children,\n    backgroundColor = 'surface.background.gray.intense',\n    borderRadius = 'medium',\n    elevation = 'lowRaised',\n    testID,\n    padding = 'spacing.7',\n    width,\n    height,\n    minHeight,\n    minWidth,\n    maxWidth,\n    onClick,\n    isSelected = false,\n    accessibilityLabel,\n    shouldScaleOnHover = false,\n    onHover,\n    href,\n    target,\n    rel,\n    as,\n    ...rest\n  },\n  ref,\n): React.ReactElement => {\n  const [isFocused, setIsFocused] = React.useState(false);\n\n  useVerifyAllowedChildren({\n    children,\n    componentName: 'Card',\n    allowedComponents: [ComponentIds.CardHeader, ComponentIds.CardBody, ComponentIds.CardFooter],\n  });\n\n  const linkOverlayProps: LinkOverlayProps = {\n    ...metaAttribute({ name: CARD_LINK_OVERLAY_ID }),\n    ...makeAccessible({ label: accessibilityLabel, pressed: href ? undefined : isSelected }),\n    onFocus: () => {\n      setIsFocused(true);\n    },\n    onBlur: () => {\n      setIsFocused(false);\n    },\n  };\n  const defaultRel = target && target === '_blank' ? 'noreferrer noopener' : undefined;\n\n  const checkboxGroupProps = useCheckboxGroupContext();\n  const radioGroupProps = useRadioGroupContext();\n\n  const getGroupProps = (): CheckboxGroupContextType | RadioGroupContextType | undefined => {\n    if (Object.keys(checkboxGroupProps).length > 0) return checkboxGroupProps;\n    if (Object.keys(radioGroupProps).length > 0) return radioGroupProps;\n    return undefined;\n  };\n\n  const groupProps = getGroupProps();\n\n  const _validationState = groupProps?.validationState;\n\n  return (\n    <CardProvider>\n      <CardRoot\n        as={as}\n        ref={ref as never}\n        display={'block' as never}\n        borderRadius={borderRadius}\n        onMouseEnter={onHover as never}\n        shouldScaleOnHover={shouldScaleOnHover}\n        isSelected={isSelected}\n        isFocused={isFocused}\n        // on react native we need to pass onClick to root, because we don't need the LinkOverlay in RN\n        onClick={isReactNative() ? onClick : undefined}\n        width={width}\n        height={height}\n        minHeight={minHeight}\n        minWidth={minWidth}\n        maxWidth={maxWidth}\n        href={href}\n        accessibilityLabel={accessibilityLabel}\n        validationState={_validationState}\n        {...metaAttribute({ name: MetaConstants.Card, testID })}\n        {...getStyledProps(rest)}\n        {...makeAnalyticsAttribute(rest)}\n      >\n        <CardSurface\n          height={height}\n          minHeight={minHeight}\n          padding={padding}\n          borderRadius={borderRadius}\n          elevation={elevation}\n          textAlign={'left' as never}\n          backgroundColor={backgroundColor}\n        >\n          {href ? (\n            <LinkOverlay\n              onClick={onClick}\n              href={href}\n              target={target}\n              rel={rel ?? defaultRel}\n              {...linkOverlayProps}\n            />\n          ) : null}\n          {!href && onClick ? (\n            <LinkOverlay as=\"button\" onClick={onClick} {...linkOverlayProps} />\n          ) : null}\n          {children}\n        </CardSurface>\n      </CardRoot>\n    </CardProvider>\n  );\n};\n\ntype CardBodyProps = {\n  children: React.ReactNode;\n  height?: BoxProps['height'];\n} & TestID &\n  DataAnalyticsAttribute;\n\nconst _CardBody = ({ height, children, testID, ...rest }: CardBodyProps): React.ReactElement => {\n  useVerifyInsideCard('CardBody');\n\n  return (\n    <BaseBox\n      {...metaAttribute({ name: MetaConstants.CardBody, testID })}\n      {...makeAnalyticsAttribute(rest)}\n      height={height}\n    >\n      {children}\n    </BaseBox>\n  );\n};\n\nconst Card = React.forwardRef(_Card);\nconst CardBody = assignWithoutSideEffects(_CardBody, { componentId: ComponentIds.CardBody });\n\nexport { Card, CardBody };\n"],"names":["ComponentIds","CardHeader","CardHeaderTrailing","CardHeaderLeading","CardFooter","CardFooterTrailing","CardFooterLeading","CardBody","CardHeaderIcon","CardHeaderCounter","CardHeaderBadge","CardHeaderAmount","CardHeaderText","CardHeaderLink","CardHeaderIconButton","_Card","_ref","ref","children","_ref$backgroundColor","backgroundColor","_ref$borderRadius","borderRadius","_ref$elevation","elevation","testID","_ref$padding","padding","width","height","minHeight","minWidth","maxWidth","onClick","_ref$isSelected","isSelected","accessibilityLabel","_ref$shouldScaleOnHov","shouldScaleOnHover","onHover","href","target","rel","as","rest","_objectWithoutProperties","_excluded","_React$useState","React","useState","_React$useState2","_slicedToArray","isFocused","setIsFocused","useVerifyAllowedChildren","componentName","allowedComponents","linkOverlayProps","Object","assign","metaAttribute","name","CARD_LINK_OVERLAY_ID","makeAccessible","label","pressed","undefined","onFocus","onBlur","defaultRel","checkboxGroupProps","useCheckboxGroupContext","radioGroupProps","useRadioGroupContext","getGroupProps","keys","length","groupProps","_validationState","validationState","_jsx","CardProvider","CardRoot","display","onMouseEnter","isReactNative","MetaConstants","Card","getStyledProps","makeAnalyticsAttribute","_jsxs","CardSurface","textAlign","LinkOverlay","_CardBody","_ref2","_excluded2","useVerifyInsideCard","BaseBox","forwardRef","assignWithoutSideEffects","componentId"],"mappings":"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"}

package/build/lib/native/components/Checkbox/CheckboxGroup/CheckboxGroup.js

@@ -21,7 +21,7 @@ import '../../BottomSheet/BottomSheetStack.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { makeAnalyticsAttribute } from '../../../utils/makeAnalyticsAttribute/makeAnalyticsAttribute.js';
 
-var _excluded=["children","label","helpText","isDisabled","isRequired","necessityIndicator","labelPosition","validationState","errorText","name","defaultValue","onChange","value","size","testID","orientation"];var CheckboxGroup=function CheckboxGroup(_ref){var children=_ref.children,label=_ref.label,helpText=_ref.helpText,_ref$isDisabled=_ref.isDisabled,isDisabled=_ref$isDisabled===void 0?false:_ref$isDisabled,_ref$isRequired=_ref.isRequired,isRequired=_ref$isRequired===void 0?false:_ref$isRequired,_ref$necessityIndicat=_ref.necessityIndicator,necessityIndicator=_ref$necessityIndicat===void 0?'none':_ref$necessityIndicat,_ref$labelPosition=_ref.labelPosition,labelPosition=_ref$labelPosition===void 0?'top':_ref$labelPosition,validationState=_ref.validationState,errorText=_ref.errorText,name=_ref.name,defaultValue=_ref.defaultValue,onChange=_ref.onChange,value=_ref.value,_ref$size=_ref.size,size=_ref$size===void 0?'medium':_ref$size,testID=_ref.testID,_ref$orientation=_ref.orientation,orientation=_ref$orientation===void 0?'vertical':_ref$orientation,rest=_objectWithoutProperties(_ref,_excluded);var _useCheckboxGroup=useCheckboxGroup({defaultValue:defaultValue,onChange:onChange,value:value,isDisabled:isDisabled,necessityIndicator:necessityIndicator,isRequired:isRequired,name:name,labelPosition:labelPosition,validationState:validationState,size:size}),contextValue=_useCheckboxGroup.contextValue,ids=_useCheckboxGroup.ids;var _useTheme=useTheme(),theme=_useTheme.theme;var showError=validationState==='error'&&errorText;var showHelpText=!showError&&helpText;var accessibilityText=`,${showError?errorText:''} ${showHelpText?helpText:''}`;var _useBreakpoint=useBreakpoint({breakpoints:theme.breakpoints}),matchedDeviceType=_useBreakpoint.matchedDeviceType;var gap=checkboxSizes.group.gap[size][matchedDeviceType];return jsx(CheckboxGroupProvider,{value:contextValue,children:jsx(BaseBox,Object.assign({},getStyledProps(rest),{children:jsxs(SelectorGroupField,Object.assign({position:labelPosition,labelledBy:ids.labelId,componentName:"checkbox-group",testID:testID},makeAnalyticsAttribute(rest),{children:[label?jsx(FormLabel,{as:"span",necessityIndicator:necessityIndicator,position:labelPosition,id:ids.labelId,accessibilityText:accessibilityText,size:size,children:label}):null,jsxs(BaseBox,{children:[jsx(BaseBox,{display:"flex",flexDirection:orientation==='horizontal'?'row':'column',gap:gap,children:React__default.Children.map(children,function(child,index){return jsx(BaseBox,{children:child},index);})}),jsx(FormHint,{size:size,errorText:errorText,helpText:helpText,type:validationState==='error'?'error':'help'})]})]}))}))});};
+var _excluded=["children","label","helpText","isDisabled","isRequired","necessityIndicator","labelPosition","validationState","errorText","name","defaultValue","onChange","value","size","testID","orientation","flexWrap"];var CheckboxGroup=function CheckboxGroup(_ref){var children=_ref.children,label=_ref.label,helpText=_ref.helpText,_ref$isDisabled=_ref.isDisabled,isDisabled=_ref$isDisabled===void 0?false:_ref$isDisabled,_ref$isRequired=_ref.isRequired,isRequired=_ref$isRequired===void 0?false:_ref$isRequired,_ref$necessityIndicat=_ref.necessityIndicator,necessityIndicator=_ref$necessityIndicat===void 0?'none':_ref$necessityIndicat,_ref$labelPosition=_ref.labelPosition,labelPosition=_ref$labelPosition===void 0?'top':_ref$labelPosition,validationState=_ref.validationState,errorText=_ref.errorText,name=_ref.name,defaultValue=_ref.defaultValue,onChange=_ref.onChange,value=_ref.value,_ref$size=_ref.size,size=_ref$size===void 0?'medium':_ref$size,testID=_ref.testID,_ref$orientation=_ref.orientation,orientation=_ref$orientation===void 0?'vertical':_ref$orientation,_ref$flexWrap=_ref.flexWrap,flexWrap=_ref$flexWrap===void 0?'nowrap':_ref$flexWrap,rest=_objectWithoutProperties(_ref,_excluded);var _useCheckboxGroup=useCheckboxGroup({defaultValue:defaultValue,onChange:onChange,value:value,isDisabled:isDisabled,necessityIndicator:necessityIndicator,isRequired:isRequired,name:name,labelPosition:labelPosition,validationState:validationState,size:size}),contextValue=_useCheckboxGroup.contextValue,ids=_useCheckboxGroup.ids;var _useTheme=useTheme(),theme=_useTheme.theme;var showError=validationState==='error'&&errorText;var showHelpText=!showError&&helpText;var accessibilityText=`,${showError?errorText:''} ${showHelpText?helpText:''}`;var _useBreakpoint=useBreakpoint({breakpoints:theme.breakpoints}),matchedDeviceType=_useBreakpoint.matchedDeviceType;var gap=checkboxSizes.group.gap[size][matchedDeviceType];return jsx(CheckboxGroupProvider,{value:contextValue,children:jsx(BaseBox,Object.assign({},getStyledProps(rest),{children:jsxs(SelectorGroupField,Object.assign({position:labelPosition,labelledBy:ids.labelId,componentName:"checkbox-group",testID:testID},makeAnalyticsAttribute(rest),{children:[label?jsx(FormLabel,{as:"span",necessityIndicator:necessityIndicator,position:labelPosition,id:ids.labelId,accessibilityText:accessibilityText,size:size,children:label}):null,jsxs(BaseBox,{children:[jsx(BaseBox,{display:"flex",flexDirection:orientation==='horizontal'?'row':'column',gap:gap,flexWrap:flexWrap,children:React__default.Children.map(children,function(child,index){return jsx(BaseBox,{children:child},index);})}),jsx(FormHint,{size:size,errorText:errorText,helpText:helpText,type:validationState==='error'?'error':'help'})]})]}))}))});};
 
 export { CheckboxGroup };
 //# sourceMappingURL=CheckboxGroup.js.map

package/build/lib/native/components/Checkbox/CheckboxGroup/CheckboxGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxGroup.js","sources":["../../../../../../src/components/Checkbox/CheckboxGroup/CheckboxGroup.tsx"],"sourcesContent":["import React from 'react';\nimport { checkboxSizes } from '../checkboxTokens';\nimport { CheckboxGroupProvider } from './CheckboxGroupContext';\nimport { useCheckboxGroup } from './useCheckboxGroup';\nimport { FormLabel, FormHint } from '~components/Form';\nimport BaseBox from '~components/Box/BaseBox';\nimport { SelectorGroupField } from '~components/Form/Selector/SelectorGroupField';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport { useBreakpoint } from '~utils';\n\nimport { useTheme } from '~components/BladeProvider';\nimport type { DataAnalyticsAttribute, TestID } from '~utils/types';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\n\ntype CheckboxGroupProps = {\n  /**\n   * Accepts multiple checkboxes as children\n   */\n  children: React.ReactNode;\n  /**\n   * Help text of the checkbox group\n   */\n  helpText?: string;\n  /**\n   * Error text of the checkbox group\n   * Renders when `validationState` is set to 'error'\n   *\n   * Overrides helpText\n   */\n  errorText?: string;\n  /**\n   * Sets the error state of the CheckboxGroup\n   * If set to `error` it will render the `errorText` of the group,\n   * and propagate `invalid` prop to every checkbox\n   */\n  validationState?: 'error' | 'none';\n  /**\n   * Renders a necessity indicator after CheckboxGroup label\n   *\n   * If set to `undefined` it renders nothing.\n   */\n  necessityIndicator?: 'required' | 'optional' | 'none';\n  /**\n   * Sets the disabled state of the CheckboxGroup\n   * If set to `true` it propagate down to all the checkboxes\n   *\n   * @default false\n   */\n  isDisabled?: boolean;\n  /**\n   * Sets the required state of the CheckboxGroup\n   * @default false\n   */\n  isRequired?: boolean;\n  /**\n   * Renders the label of the checkbox group\n   */\n  label?: string;\n  /**\n   * Sets the position of the label\n   *\n   * @default 'top'\n   */\n  labelPosition?: 'top' | 'left';\n  /**\n   * Initial value of the checkbox group\n   */\n  defaultValue?: string[];\n  /**\n   * value of the checkbox group\n   *\n   * Use `onChange` to update its value\n   */\n  value?: string[];\n  /**\n   * The callback invoked when any of the checkbox's state changes\n   */\n  onChange?: ({ name, values }: { name: string; values: string[] }) => void;\n  /**\n   * The name of the input field in a checkbox\n   * (Useful for form submission).\n   */\n  name?: string;\n  /**\n   * Size of the checkbox\n   *\n   * @default \"medium\"\n   */\n  size?: 'small' | 'medium' | 'large';\n  /**\n   * Orientation of the checkbox group\n   *\n   * @default \"vertical\"\n   */\n  orientation?: 'vertical' | 'horizontal';\n} & TestID &\n  DataAnalyticsAttribute &\n  StyledPropsBlade;\n\nconst CheckboxGroup = ({\n  children,\n  label,\n  helpText,\n  isDisabled = false,\n  isRequired = false,\n  necessityIndicator = 'none',\n  labelPosition = 'top',\n  validationState,\n  errorText,\n  name,\n  defaultValue,\n  onChange,\n  value,\n  size = 'medium',\n  testID,\n  orientation = 'vertical',\n  ...rest\n}: CheckboxGroupProps): React.ReactElement => {\n  const { contextValue, ids } = useCheckboxGroup({\n    defaultValue,\n    onChange,\n    value,\n    isDisabled,\n    necessityIndicator,\n    isRequired,\n    name,\n    labelPosition,\n    validationState,\n    size,\n  });\n\n  const { theme } = useTheme();\n  const showError = validationState === 'error' && errorText;\n  const showHelpText = !showError && helpText;\n  const accessibilityText = `,${showError ? errorText : ''} ${showHelpText ? helpText : ''}`;\n  const { matchedDeviceType } = useBreakpoint({ breakpoints: theme.breakpoints });\n  const gap = checkboxSizes.group.gap[size][matchedDeviceType];\n\n  return (\n    <CheckboxGroupProvider value={contextValue}>\n      <BaseBox {...getStyledProps(rest)}>\n        <SelectorGroupField\n          position={labelPosition}\n          labelledBy={ids.labelId}\n          componentName=\"checkbox-group\"\n          testID={testID}\n          {...makeAnalyticsAttribute(rest)}\n        >\n          {label ? (\n            <FormLabel\n              as=\"span\"\n              necessityIndicator={necessityIndicator}\n              position={labelPosition}\n              id={ids.labelId}\n              accessibilityText={accessibilityText}\n              size={size}\n            >\n              {label}\n            </FormLabel>\n          ) : null}\n          <BaseBox>\n            <BaseBox\n              display=\"flex\"\n              flexDirection={orientation === 'horizontal' ? 'row' : 'column'}\n              gap={gap}\n            >\n              {React.Children.map(children, (child, index) => {\n                return <BaseBox key={index}>{child}</BaseBox>;\n              })}\n            </BaseBox>\n            <FormHint\n              size={size}\n              errorText={errorText}\n              helpText={helpText}\n              type={validationState === 'error' ? 'error' : 'help'}\n            />\n          </BaseBox>\n        </SelectorGroupField>\n      </BaseBox>\n    </CheckboxGroupProvider>\n  );\n};\n\nexport type { CheckboxGroupProps };\nexport { CheckboxGroup };\n"],"names":["CheckboxGroup","_ref","children","label","helpText","_ref$isDisabled","isDisabled","_ref$isRequired","isRequired","_ref$necessityIndicat","necessityIndicator","_ref$labelPosition","labelPosition","validationState","errorText","name","defaultValue","onChange","value","_ref$size","size","testID","_ref$orientation","orientation","rest","_objectWithoutProperties","_excluded","_useCheckboxGroup","useCheckboxGroup","contextValue","ids","_useTheme","useTheme","theme","showError","showHelpText","accessibilityText","_useBreakpoint","useBreakpoint","breakpoints","matchedDeviceType","gap","checkboxSizes","group","_jsx","CheckboxGroupProvider","BaseBox","Object","assign","getStyledProps","_jsxs","SelectorGroupField","position","labelledBy","labelId","componentName","makeAnalyticsAttribute","FormLabel","as","id","display","flexDirection","React","Children","map","child","index","FormHint","type"],"mappings":"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"}
+{"version":3,"file":"CheckboxGroup.js","sources":["../../../../../../src/components/Checkbox/CheckboxGroup/CheckboxGroup.tsx"],"sourcesContent":["import React from 'react';\nimport { checkboxSizes } from '../checkboxTokens';\nimport { CheckboxGroupProvider } from './CheckboxGroupContext';\nimport { useCheckboxGroup } from './useCheckboxGroup';\nimport { FormLabel, FormHint } from '~components/Form';\nimport BaseBox from '~components/Box/BaseBox';\nimport { SelectorGroupField } from '~components/Form/Selector/SelectorGroupField';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport { useBreakpoint } from '~utils';\n\nimport { useTheme } from '~components/BladeProvider';\nimport type { DataAnalyticsAttribute, TestID } from '~utils/types';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\n\ntype CheckboxGroupProps = {\n  /**\n   * Accepts multiple checkboxes as children\n   */\n  children: React.ReactNode;\n  /**\n   * Help text of the checkbox group\n   */\n  helpText?: string;\n  /**\n   * Error text of the checkbox group\n   * Renders when `validationState` is set to 'error'\n   *\n   * Overrides helpText\n   */\n  errorText?: string;\n  /**\n   * Sets the error state of the CheckboxGroup\n   * If set to `error` it will render the `errorText` of the group,\n   * and propagate `invalid` prop to every checkbox\n   */\n  validationState?: 'error' | 'none';\n  /**\n   * Renders a necessity indicator after CheckboxGroup label\n   *\n   * If set to `undefined` it renders nothing.\n   */\n  necessityIndicator?: 'required' | 'optional' | 'none';\n  /**\n   * Sets the disabled state of the CheckboxGroup\n   * If set to `true` it propagate down to all the checkboxes\n   *\n   * @default false\n   */\n  isDisabled?: boolean;\n  /**\n   * Sets the required state of the CheckboxGroup\n   * @default false\n   */\n  isRequired?: boolean;\n  /**\n   * Renders the label of the checkbox group\n   */\n  label?: string;\n  /**\n   * Sets the position of the label\n   *\n   * @default 'top'\n   */\n  labelPosition?: 'top' | 'left';\n  /**\n   * Initial value of the checkbox group\n   */\n  defaultValue?: string[];\n  /**\n   * value of the checkbox group\n   *\n   * Use `onChange` to update its value\n   */\n  value?: string[];\n  /**\n   * The callback invoked when any of the checkbox's state changes\n   */\n  onChange?: ({ name, values }: { name: string; values: string[] }) => void;\n  /**\n   * The name of the input field in a checkbox\n   * (Useful for form submission).\n   */\n  name?: string;\n  /**\n   * Size of the checkbox\n   *\n   * @default \"medium\"\n   */\n  size?: 'small' | 'medium' | 'large';\n  /**\n   * Orientation of the checkbox group\n   *\n   * @default \"vertical\"\n   */\n  orientation?: 'vertical' | 'horizontal';\n} & TestID &\n  DataAnalyticsAttribute &\n  StyledPropsBlade;\n\nconst CheckboxGroup = ({\n  children,\n  label,\n  helpText,\n  isDisabled = false,\n  isRequired = false,\n  necessityIndicator = 'none',\n  labelPosition = 'top',\n  validationState,\n  errorText,\n  name,\n  defaultValue,\n  onChange,\n  value,\n  size = 'medium',\n  testID,\n  orientation = 'vertical',\n  flexWrap = 'nowrap',\n  ...rest\n}: CheckboxGroupProps): React.ReactElement => {\n  const { contextValue, ids } = useCheckboxGroup({\n    defaultValue,\n    onChange,\n    value,\n    isDisabled,\n    necessityIndicator,\n    isRequired,\n    name,\n    labelPosition,\n    validationState,\n    size,\n  });\n\n  const { theme } = useTheme();\n  const showError = validationState === 'error' && errorText;\n  const showHelpText = !showError && helpText;\n  const accessibilityText = `,${showError ? errorText : ''} ${showHelpText ? helpText : ''}`;\n  const { matchedDeviceType } = useBreakpoint({ breakpoints: theme.breakpoints });\n  const gap = checkboxSizes.group.gap[size][matchedDeviceType];\n\n  return (\n    <CheckboxGroupProvider value={contextValue}>\n      <BaseBox {...getStyledProps(rest)}>\n        <SelectorGroupField\n          position={labelPosition}\n          labelledBy={ids.labelId}\n          componentName=\"checkbox-group\"\n          testID={testID}\n          {...makeAnalyticsAttribute(rest)}\n        >\n          {label ? (\n            <FormLabel\n              as=\"span\"\n              necessityIndicator={necessityIndicator}\n              position={labelPosition}\n              id={ids.labelId}\n              accessibilityText={accessibilityText}\n              size={size}\n            >\n              {label}\n            </FormLabel>\n          ) : null}\n          <BaseBox>\n            <BaseBox\n              display=\"flex\"\n              flexDirection={orientation === 'horizontal' ? 'row' : 'column'}\n              gap={gap}\n              flexWrap={flexWrap}\n            >\n              {React.Children.map(children, (child, index) => {\n                return <BaseBox key={index}>{child}</BaseBox>;\n              })}\n            </BaseBox>\n            <FormHint\n              size={size}\n              errorText={errorText}\n              helpText={helpText}\n              type={validationState === 'error' ? 'error' : 'help'}\n            />\n          </BaseBox>\n        </SelectorGroupField>\n      </BaseBox>\n    </CheckboxGroupProvider>\n  );\n};\n\nexport type { CheckboxGroupProps };\nexport { CheckboxGroup };\n"],"names":["CheckboxGroup","_ref","children","label","helpText","_ref$isDisabled","isDisabled","_ref$isRequired","isRequired","_ref$necessityIndicat","necessityIndicator","_ref$labelPosition","labelPosition","validationState","errorText","name","defaultValue","onChange","value","_ref$size","size","testID","_ref$orientation","orientation","_ref$flexWrap","flexWrap","rest","_objectWithoutProperties","_excluded","_useCheckboxGroup","useCheckboxGroup","contextValue","ids","_useTheme","useTheme","theme","showError","showHelpText","accessibilityText","_useBreakpoint","useBreakpoint","breakpoints","matchedDeviceType","gap","checkboxSizes","group","_jsx","CheckboxGroupProvider","BaseBox","Object","assign","getStyledProps","_jsxs","SelectorGroupField","position","labelledBy","labelId","componentName","makeAnalyticsAttribute","FormLabel","as","id","display","flexDirection","React","Children","map","child","index","FormHint","type"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAA,SAAA,CAAA,CAAA,UAAA,CAAA,OAAA,CAAA,UAAA,CAAA,YAAA,CAAA,YAAA,CAAA,oBAAA,CAAA,eAAA,CAAA,iBAAA,CAAA,WAAA,CAAA,MAAA,CAAA,cAAA,CAAA,UAAA,CAAA,OAAA,CAAA,MAAA,CAAA,QAAA,CAAA,aAAA,CAAA,UAAA,CAAA,CAoGM,IAAAA,aAAa,CAAG,SAAhBA,aAAaA,CAAAC,IAAA,CAmB2B,CAAA,IAlB5CC,QAAQ,CAAAD,IAAA,CAARC,QAAQ,CACRC,KAAK,CAAAF,IAAA,CAALE,KAAK,CACLC,QAAQ,CAAAH,IAAA,CAARG,QAAQ,CAAAC,eAAA,CAAAJ,IAAA,CACRK,UAAU,CAAVA,UAAU,CAAAD,eAAA,GAAG,KAAA,CAAA,CAAA,KAAK,CAAAA,eAAA,CAAAE,eAAA,CAAAN,IAAA,CAClBO,UAAU,CAAVA,UAAU,CAAAD,eAAA,GAAA,KAAA,CAAA,CAAG,KAAK,CAAAA,eAAA,CAAAE,qBAAA,CAAAR,IAAA,CAClBS,kBAAkB,CAAlBA,kBAAkB,CAAAD,qBAAA,GAAA,KAAA,CAAA,CAAG,MAAM,CAAAA,qBAAA,CAAAE,kBAAA,CAAAV,IAAA,CAC3BW,aAAa,CAAbA,aAAa,CAAAD,kBAAA,GAAG,KAAA,CAAA,CAAA,KAAK,CAAAA,kBAAA,CACrBE,eAAe,CAAAZ,IAAA,CAAfY,eAAe,CACfC,SAAS,CAAAb,IAAA,CAATa,SAAS,CACTC,IAAI,CAAAd,IAAA,CAAJc,IAAI,CACJC,YAAY,CAAAf,IAAA,CAAZe,YAAY,CACZC,QAAQ,CAAAhB,IAAA,CAARgB,QAAQ,CACRC,KAAK,CAAAjB,IAAA,CAALiB,KAAK,CAAAC,SAAA,CAAAlB,IAAA,CACLmB,IAAI,CAAJA,IAAI,CAAAD,SAAA,GAAA,KAAA,CAAA,CAAG,QAAQ,CAAAA,SAAA,CACfE,MAAM,CAAApB,IAAA,CAANoB,MAAM,CAAAC,gBAAA,CAAArB,IAAA,CACNsB,WAAW,CAAXA,WAAW,CAAAD,gBAAA,GAAA,KAAA,CAAA,CAAG,UAAU,CAAAA,gBAAA,CAAAE,aAAA,CAAAvB,IAAA,CACxBwB,QAAQ,CAARA,QAAQ,CAAAD,aAAA,UAAG,QAAQ,CAAAA,aAAA,CAChBE,IAAI,CAAAC,wBAAA,CAAA1B,IAAA,CAAA2B,SAAA,CAEP,CAAA,IAAAC,iBAAA,CAA8BC,gBAAgB,CAAC,CAC7Cd,YAAY,CAAZA,YAAY,CACZC,QAAQ,CAARA,QAAQ,CACRC,KAAK,CAALA,KAAK,CACLZ,UAAU,CAAVA,UAAU,CACVI,kBAAkB,CAAlBA,kBAAkB,CAClBF,UAAU,CAAVA,UAAU,CACVO,IAAI,CAAJA,IAAI,CACJH,aAAa,CAAbA,aAAa,CACbC,eAAe,CAAfA,eAAe,CACfO,IAAI,CAAJA,IACF,CAAC,CAAC,CAXMW,YAAY,CAAAF,iBAAA,CAAZE,YAAY,CAAEC,GAAG,CAAAH,iBAAA,CAAHG,GAAG,CAazB,IAAAC,SAAA,CAAkBC,QAAQ,EAAE,CAApBC,KAAK,CAAAF,SAAA,CAALE,KAAK,CACb,IAAMC,SAAS,CAAGvB,eAAe,GAAK,OAAO,EAAIC,SAAS,CAC1D,IAAMuB,YAAY,CAAG,CAACD,SAAS,EAAIhC,QAAQ,CAC3C,IAAMkC,iBAAiB,CAAI,IAAGF,SAAS,CAAGtB,SAAS,CAAG,EAAG,CAAA,CAAA,EAAGuB,YAAY,CAAGjC,QAAQ,CAAG,EAAG,CAAC,CAAA,CAC1F,IAAAmC,cAAA,CAA8BC,aAAa,CAAC,CAAEC,WAAW,CAAEN,KAAK,CAACM,WAAY,CAAC,CAAC,CAAvEC,iBAAiB,CAAAH,cAAA,CAAjBG,iBAAiB,CACzB,IAAMC,GAAG,CAAGC,aAAa,CAACC,KAAK,CAACF,GAAG,CAACvB,IAAI,CAAC,CAACsB,iBAAiB,CAAC,CAE5D,OACEI,GAAA,CAACC,qBAAqB,CAAC7B,CAAAA,KAAK,CAAEa,YAAa,CAAA7B,QAAA,CACzC4C,GAAA,CAACE,OAAO,CAAAC,MAAA,CAAAC,MAAA,CAAA,EAAA,CAAKC,cAAc,CAACzB,IAAI,CAAC,CAAA,CAAAxB,QAAA,CAC/BkD,IAAA,CAACC,kBAAkB,CAAAJ,MAAA,CAAAC,MAAA,CACjBI,CAAAA,QAAQ,CAAE1C,aAAc,CACxB2C,UAAU,CAAEvB,GAAG,CAACwB,OAAQ,CACxBC,aAAa,CAAC,gBAAgB,CAC9BpC,MAAM,CAAEA,MAAO,CACXqC,CAAAA,sBAAsB,CAAChC,IAAI,CAAC,CAAAxB,CAAAA,QAAA,EAE/BC,KAAK,CACJ2C,GAAA,CAACa,SAAS,CAAA,CACRC,EAAE,CAAC,MAAM,CACTlD,kBAAkB,CAAEA,kBAAmB,CACvC4C,QAAQ,CAAE1C,aAAc,CACxBiD,EAAE,CAAE7B,GAAG,CAACwB,OAAQ,CAChBlB,iBAAiB,CAAEA,iBAAkB,CACrClB,IAAI,CAAEA,IAAK,CAAAlB,QAAA,CAEVC,KAAK,CACG,CAAC,CACV,IAAI,CACRiD,IAAA,CAACJ,OAAO,CAAA,CAAA9C,QAAA,CACN4C,CAAAA,GAAA,CAACE,OAAO,CACNc,CAAAA,OAAO,CAAC,MAAM,CACdC,aAAa,CAAExC,WAAW,GAAK,YAAY,CAAG,KAAK,CAAG,QAAS,CAC/DoB,GAAG,CAAEA,GAAI,CACTlB,QAAQ,CAAEA,QAAS,CAAAvB,QAAA,CAElB8D,cAAK,CAACC,QAAQ,CAACC,GAAG,CAAChE,QAAQ,CAAE,SAACiE,KAAK,CAAEC,KAAK,CAAK,CAC9C,OAAOtB,GAAA,CAACE,OAAO,CAAA,CAAA9C,QAAA,CAAciE,KAAK,CAAA,CAAbC,KAAuB,CAAC,CAC/C,CAAC,CAAC,CACK,CAAC,CACVtB,GAAA,CAACuB,QAAQ,CAAA,CACPjD,IAAI,CAAEA,IAAK,CACXN,SAAS,CAAEA,SAAU,CACrBV,QAAQ,CAAEA,QAAS,CACnBkE,IAAI,CAAEzD,eAAe,GAAK,OAAO,CAAG,OAAO,CAAG,MAAO,CACtD,CAAC,CAAA,CACK,CAAC,CACQ,CAAA,CAAA,CAAC,CACd,CAAA,CAAC,CACW,CAAC,CAE5B;;;;"}

package/build/lib/native/components/Radio/RadioGroup/RadioGroup.js

@@ -21,7 +21,7 @@ import '../../BottomSheet/BottomSheetStack.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { makeAnalyticsAttribute } from '../../../utils/makeAnalyticsAttribute/makeAnalyticsAttribute.js';
 
-var _excluded=["children","label","helpText","isDisabled","isRequired","necessityIndicator","labelPosition","validationState","errorText","name","defaultValue","onChange","value","size","orientation","testID"];var RadioGroup=function RadioGroup(_ref){var children=_ref.children,label=_ref.label,helpText=_ref.helpText,_ref$isDisabled=_ref.isDisabled,isDisabled=_ref$isDisabled===void 0?false:_ref$isDisabled,_ref$isRequired=_ref.isRequired,isRequired=_ref$isRequired===void 0?false:_ref$isRequired,_ref$necessityIndicat=_ref.necessityIndicator,necessityIndicator=_ref$necessityIndicat===void 0?'none':_ref$necessityIndicat,_ref$labelPosition=_ref.labelPosition,labelPosition=_ref$labelPosition===void 0?'top':_ref$labelPosition,_ref$validationState=_ref.validationState,validationState=_ref$validationState===void 0?'none':_ref$validationState,errorText=_ref.errorText,name=_ref.name,defaultValue=_ref.defaultValue,onChange=_ref.onChange,value=_ref.value,_ref$size=_ref.size,size=_ref$size===void 0?'medium':_ref$size,_ref$orientation=_ref.orientation,orientation=_ref$orientation===void 0?'vertical':_ref$orientation,testID=_ref.testID,rest=_objectWithoutProperties(_ref,_excluded);var _useRadioGroup=useRadioGroup({defaultValue:defaultValue,isDisabled:isDisabled,isRequired:isRequired,labelPosition:labelPosition,name:name,necessityIndicator:necessityIndicator,onChange:onChange,validationState:validationState,value:value,size:size}),contextValue=_useRadioGroup.contextValue,ids=_useRadioGroup.ids;var _useTheme=useTheme(),theme=_useTheme.theme;var _useBreakpoint=useBreakpoint({breakpoints:theme.breakpoints}),matchedDeviceType=_useBreakpoint.matchedDeviceType;var showError=validationState==='error'&&errorText;var showHelpText=!showError&&helpText;var accessibilityText=`${showError?errorText:''} ${showHelpText?helpText:''}`.trim();var gap=radioSizes.group.gap[size][matchedDeviceType];return jsx(RadioGroupProvider,{value:contextValue,children:jsx(BaseBox,Object.assign({},getStyledProps(rest),{children:jsxs(SelectorGroupField,Object.assign({position:labelPosition,labelledBy:ids.labelId,accessibilityRole:"radiogroup",componentName:"radio-group",testID:testID},makeAnalyticsAttribute(rest),{children:[label?jsx(FormLabel,{as:"span",necessityIndicator:necessityIndicator,position:labelPosition,id:ids.labelId,accessibilityText:accessibilityText&&`,${accessibilityText}`,size:size,children:label}):null,jsxs(BaseBox,{children:[jsx(BaseBox,{display:"flex",flexDirection:orientation==='vertical'?'column':'row',gap:gap,children:React__default.Children.map(children,function(child,index){return jsx(BaseBox,{children:child},index);})}),jsx(FormHint,{size:size,type:validationState==='error'?'error':'help',errorText:errorText,helpText:helpText})]})]}))}))});};
+var _excluded=["children","label","helpText","isDisabled","isRequired","necessityIndicator","labelPosition","validationState","errorText","name","defaultValue","onChange","value","size","orientation","testID","flexWrap"];var RadioGroup=function RadioGroup(_ref){var children=_ref.children,label=_ref.label,helpText=_ref.helpText,_ref$isDisabled=_ref.isDisabled,isDisabled=_ref$isDisabled===void 0?false:_ref$isDisabled,_ref$isRequired=_ref.isRequired,isRequired=_ref$isRequired===void 0?false:_ref$isRequired,_ref$necessityIndicat=_ref.necessityIndicator,necessityIndicator=_ref$necessityIndicat===void 0?'none':_ref$necessityIndicat,_ref$labelPosition=_ref.labelPosition,labelPosition=_ref$labelPosition===void 0?'top':_ref$labelPosition,_ref$validationState=_ref.validationState,validationState=_ref$validationState===void 0?'none':_ref$validationState,errorText=_ref.errorText,name=_ref.name,defaultValue=_ref.defaultValue,onChange=_ref.onChange,value=_ref.value,_ref$size=_ref.size,size=_ref$size===void 0?'medium':_ref$size,_ref$orientation=_ref.orientation,orientation=_ref$orientation===void 0?'vertical':_ref$orientation,testID=_ref.testID,_ref$flexWrap=_ref.flexWrap,flexWrap=_ref$flexWrap===void 0?'nowrap':_ref$flexWrap,rest=_objectWithoutProperties(_ref,_excluded);var _useRadioGroup=useRadioGroup({defaultValue:defaultValue,isDisabled:isDisabled,isRequired:isRequired,labelPosition:labelPosition,name:name,necessityIndicator:necessityIndicator,onChange:onChange,validationState:validationState,value:value,size:size}),contextValue=_useRadioGroup.contextValue,ids=_useRadioGroup.ids;var _useTheme=useTheme(),theme=_useTheme.theme;var _useBreakpoint=useBreakpoint({breakpoints:theme.breakpoints}),matchedDeviceType=_useBreakpoint.matchedDeviceType;var showError=validationState==='error'&&errorText;var showHelpText=!showError&&helpText;var accessibilityText=`${showError?errorText:''} ${showHelpText?helpText:''}`.trim();var gap=radioSizes.group.gap[size][matchedDeviceType];return jsx(RadioGroupProvider,{value:contextValue,children:jsx(BaseBox,Object.assign({},getStyledProps(rest),{children:jsxs(SelectorGroupField,Object.assign({position:labelPosition,labelledBy:ids.labelId,accessibilityRole:"radiogroup",componentName:"radio-group",testID:testID},makeAnalyticsAttribute(rest),{children:[label?jsx(FormLabel,{as:"span",necessityIndicator:necessityIndicator,position:labelPosition,id:ids.labelId,accessibilityText:accessibilityText&&`,${accessibilityText}`,size:size,children:label}):null,jsxs(BaseBox,{children:[jsx(BaseBox,{display:"flex",flexDirection:orientation==='vertical'?'column':'row',gap:gap,flexWrap:flexWrap,children:React__default.Children.map(children,function(child,index){return jsx(BaseBox,{children:child},index);})}),jsx(FormHint,{size:size,type:validationState==='error'?'error':'help',errorText:errorText,helpText:helpText})]})]}))}))});};
 
 export { RadioGroup };
 //# sourceMappingURL=RadioGroup.js.map

package/build/lib/native/components/Radio/RadioGroup/RadioGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.js","sources":["../../../../../../src/components/Radio/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import React from 'react';\nimport { radioSizes } from '../radioTokens';\nimport { RadioGroupProvider } from './RadioContext';\nimport { useRadioGroup } from './useRadioGroup';\nimport BaseBox from '~components/Box/BaseBox';\nimport { FormHint, FormLabel } from '~components/Form';\nimport { SelectorGroupField } from '~components/Form/Selector/SelectorGroupField';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport { useBreakpoint } from '~utils';\nimport { useTheme } from '~components/BladeProvider';\nimport type { DataAnalyticsAttribute, TestID } from '~utils/types';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\n\ntype RadioGroupProps = {\n  /**\n   * Accepts multiple radios as children\n   */\n  children: React.ReactNode;\n  /**\n   * Help text of the radio group\n   */\n  helpText?: string;\n  /**\n   * Error text of the radio group\n   * Renders when `validationState` is set to 'error'\n   *\n   * Overrides helpText\n   */\n  errorText?: string;\n  /**\n   * Sets the error state of the radioGroup\n   * If set to `error` it will render the `errorText` of the group,\n   * and propagate `invalid` prop to every radio\n   */\n  validationState?: 'error' | 'none';\n  /**\n   * Renders a necessity indicator after radioGroup label\n   *\n   * If set to `undefined` it renders nothing.\n   */\n  necessityIndicator?: 'required' | 'optional' | 'none';\n  /**\n   * Sets the disabled state of the radioGroup\n   * If set to `true` it propagate down to all the radios\n   *\n   * @default false\n   */\n  isDisabled?: boolean;\n  /**\n   * Sets the required state of the radioGroup\n   * @default false\n   */\n  isRequired?: boolean;\n  /**\n   * Renders the label of the radio group\n   */\n  label?: string;\n  /**\n   * Sets the position of the label\n   *\n   * @default 'top'\n   */\n  labelPosition?: 'top' | 'left';\n  /**\n   * Initial value of the radio group\n   */\n  defaultValue?: string;\n  /**\n   * value of the radio group\n   *\n   * Use `onChange` to update its value\n   */\n  value?: string;\n  /**\n   * The callback invoked when any of the radio's state changes\n   */\n  onChange?: ({\n    name,\n    value,\n    event,\n  }: {\n    name: string | undefined;\n    value: string;\n    event: React.ChangeEvent<HTMLInputElement>;\n  }) => void;\n  /**\n   * The name of the input field in a radio\n   * (Useful for form submission).\n   */\n  name?: string;\n  /**\n   * Size of the radios\n   *\n   * @default \"medium\"\n   */\n  size?: 'small' | 'medium' | 'large';\n\n  /**\n   * Orientation of the radio group\n   *\n   * @default 'vertical'\n   */\n  orientation?: 'vertical' | 'horizontal';\n} & TestID &\n  DataAnalyticsAttribute &\n  StyledPropsBlade;\n\nconst RadioGroup = ({\n  children,\n  label,\n  helpText,\n  isDisabled = false,\n  isRequired = false,\n  necessityIndicator = 'none',\n  labelPosition = 'top',\n  validationState = 'none',\n  errorText,\n  name,\n  defaultValue,\n  onChange,\n  value,\n  size = 'medium',\n  orientation = 'vertical',\n  testID,\n  ...rest\n}: RadioGroupProps): React.ReactElement => {\n  const { contextValue, ids } = useRadioGroup({\n    defaultValue,\n    isDisabled,\n    isRequired,\n    labelPosition,\n    name,\n    necessityIndicator,\n    onChange,\n    validationState,\n    value,\n    size,\n  });\n\n  const { theme } = useTheme();\n  const { matchedDeviceType } = useBreakpoint({ breakpoints: theme.breakpoints });\n  const showError = validationState === 'error' && errorText;\n  const showHelpText = !showError && helpText;\n  const accessibilityText = `${showError ? errorText : ''} ${showHelpText ? helpText : ''}`.trim();\n  const gap = radioSizes.group.gap[size][matchedDeviceType];\n\n  return (\n    <RadioGroupProvider value={contextValue}>\n      <BaseBox {...getStyledProps(rest)}>\n        <SelectorGroupField\n          position={labelPosition}\n          labelledBy={ids.labelId}\n          accessibilityRole=\"radiogroup\"\n          componentName=\"radio-group\"\n          testID={testID}\n          {...makeAnalyticsAttribute(rest)}\n        >\n          {label ? (\n            <FormLabel\n              as=\"span\"\n              necessityIndicator={necessityIndicator}\n              position={labelPosition}\n              id={ids.labelId}\n              accessibilityText={accessibilityText && `,${accessibilityText}`}\n              size={size}\n            >\n              {label}\n            </FormLabel>\n          ) : null}\n          <BaseBox>\n            <BaseBox\n              display=\"flex\"\n              flexDirection={orientation === 'vertical' ? 'column' : 'row'}\n              gap={gap}\n            >\n              {React.Children.map(children, (child, index) => {\n                return <BaseBox key={index}>{child}</BaseBox>;\n              })}\n            </BaseBox>\n            <FormHint\n              size={size}\n              type={validationState === 'error' ? 'error' : 'help'}\n              errorText={errorText}\n              helpText={helpText}\n            />\n          </BaseBox>\n        </SelectorGroupField>\n      </BaseBox>\n    </RadioGroupProvider>\n  );\n};\n\nexport type { RadioGroupProps };\nexport { RadioGroup };\n"],"names":["RadioGroup","_ref","children","label","helpText","_ref$isDisabled","isDisabled","_ref$isRequired","isRequired","_ref$necessityIndicat","necessityIndicator","_ref$labelPosition","labelPosition","_ref$validationState","validationState","errorText","name","defaultValue","onChange","value","_ref$size","size","_ref$orientation","orientation","testID","rest","_objectWithoutProperties","_excluded","_useRadioGroup","useRadioGroup","contextValue","ids","_useTheme","useTheme","theme","_useBreakpoint","useBreakpoint","breakpoints","matchedDeviceType","showError","showHelpText","accessibilityText","trim","gap","radioSizes","group","_jsx","RadioGroupProvider","BaseBox","Object","assign","getStyledProps","_jsxs","SelectorGroupField","position","labelledBy","labelId","accessibilityRole","componentName","makeAnalyticsAttribute","FormLabel","as","id","display","flexDirection","React","Children","map","child","index","FormHint","type"],"mappings":"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"}
+{"version":3,"file":"RadioGroup.js","sources":["../../../../../../src/components/Radio/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import React from 'react';\nimport { radioSizes } from '../radioTokens';\nimport { RadioGroupProvider } from './RadioContext';\nimport { useRadioGroup } from './useRadioGroup';\nimport BaseBox from '~components/Box/BaseBox';\nimport { FormHint, FormLabel } from '~components/Form';\nimport { SelectorGroupField } from '~components/Form/Selector/SelectorGroupField';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport { useBreakpoint } from '~utils';\nimport { useTheme } from '~components/BladeProvider';\nimport type { DataAnalyticsAttribute, TestID } from '~utils/types';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\n\ntype RadioGroupProps = {\n  /**\n   * Accepts multiple radios as children\n   */\n  children: React.ReactNode;\n  /**\n   * Help text of the radio group\n   */\n  helpText?: string;\n  /**\n   * Error text of the radio group\n   * Renders when `validationState` is set to 'error'\n   *\n   * Overrides helpText\n   */\n  errorText?: string;\n  /**\n   * Sets the error state of the radioGroup\n   * If set to `error` it will render the `errorText` of the group,\n   * and propagate `invalid` prop to every radio\n   */\n  validationState?: 'error' | 'none';\n  /**\n   * Renders a necessity indicator after radioGroup label\n   *\n   * If set to `undefined` it renders nothing.\n   */\n  necessityIndicator?: 'required' | 'optional' | 'none';\n  /**\n   * Sets the disabled state of the radioGroup\n   * If set to `true` it propagate down to all the radios\n   *\n   * @default false\n   */\n  isDisabled?: boolean;\n  /**\n   * Sets the required state of the radioGroup\n   * @default false\n   */\n  isRequired?: boolean;\n  /**\n   * Renders the label of the radio group\n   */\n  label?: string;\n  /**\n   * Sets the position of the label\n   *\n   * @default 'top'\n   */\n  labelPosition?: 'top' | 'left';\n  /**\n   * Initial value of the radio group\n   */\n  defaultValue?: string;\n  /**\n   * value of the radio group\n   *\n   * Use `onChange` to update its value\n   */\n  value?: string;\n  /**\n   * The callback invoked when any of the radio's state changes\n   */\n  onChange?: ({\n    name,\n    value,\n    event,\n  }: {\n    name: string | undefined;\n    value: string;\n    event: React.ChangeEvent<HTMLInputElement>;\n  }) => void;\n  /**\n   * The name of the input field in a radio\n   * (Useful for form submission).\n   */\n  name?: string;\n  /**\n   * Size of the radios\n   *\n   * @default \"medium\"\n   */\n  size?: 'small' | 'medium' | 'large';\n\n  /**\n   * Orientation of the radio group\n   *\n   * @default 'vertical'\n   */\n  orientation?: 'vertical' | 'horizontal';\n} & TestID &\n  DataAnalyticsAttribute &\n  StyledPropsBlade;\n\nconst RadioGroup = ({\n  children,\n  label,\n  helpText,\n  isDisabled = false,\n  isRequired = false,\n  necessityIndicator = 'none',\n  labelPosition = 'top',\n  validationState = 'none',\n  errorText,\n  name,\n  defaultValue,\n  onChange,\n  value,\n  size = 'medium',\n  orientation = 'vertical',\n  testID,\n  flexWrap = 'nowrap',\n  ...rest\n}: RadioGroupProps): React.ReactElement => {\n  const { contextValue, ids } = useRadioGroup({\n    defaultValue,\n    isDisabled,\n    isRequired,\n    labelPosition,\n    name,\n    necessityIndicator,\n    onChange,\n    validationState,\n    value,\n    size,\n  });\n\n  const { theme } = useTheme();\n  const { matchedDeviceType } = useBreakpoint({ breakpoints: theme.breakpoints });\n  const showError = validationState === 'error' && errorText;\n  const showHelpText = !showError && helpText;\n  const accessibilityText = `${showError ? errorText : ''} ${showHelpText ? helpText : ''}`.trim();\n  const gap = radioSizes.group.gap[size][matchedDeviceType];\n\n  return (\n    <RadioGroupProvider value={contextValue}>\n      <BaseBox {...getStyledProps(rest)}>\n        <SelectorGroupField\n          position={labelPosition}\n          labelledBy={ids.labelId}\n          accessibilityRole=\"radiogroup\"\n          componentName=\"radio-group\"\n          testID={testID}\n          {...makeAnalyticsAttribute(rest)}\n        >\n          {label ? (\n            <FormLabel\n              as=\"span\"\n              necessityIndicator={necessityIndicator}\n              position={labelPosition}\n              id={ids.labelId}\n              accessibilityText={accessibilityText && `,${accessibilityText}`}\n              size={size}\n            >\n              {label}\n            </FormLabel>\n          ) : null}\n          <BaseBox>\n            <BaseBox\n              display=\"flex\"\n              flexDirection={orientation === 'vertical' ? 'column' : 'row'}\n              gap={gap}\n              flexWrap={flexWrap}\n            >\n              {React.Children.map(children, (child, index) => {\n                return <BaseBox key={index}>{child}</BaseBox>;\n              })}\n            </BaseBox>\n            <FormHint\n              size={size}\n              type={validationState === 'error' ? 'error' : 'help'}\n              errorText={errorText}\n              helpText={helpText}\n            />\n          </BaseBox>\n        </SelectorGroupField>\n      </BaseBox>\n    </RadioGroupProvider>\n  );\n};\n\nexport type { RadioGroupProps };\nexport { RadioGroup };\n"],"names":["RadioGroup","_ref","children","label","helpText","_ref$isDisabled","isDisabled","_ref$isRequired","isRequired","_ref$necessityIndicat","necessityIndicator","_ref$labelPosition","labelPosition","_ref$validationState","validationState","errorText","name","defaultValue","onChange","value","_ref$size","size","_ref$orientation","orientation","testID","_ref$flexWrap","flexWrap","rest","_objectWithoutProperties","_excluded","_useRadioGroup","useRadioGroup","contextValue","ids","_useTheme","useTheme","theme","_useBreakpoint","useBreakpoint","breakpoints","matchedDeviceType","showError","showHelpText","accessibilityText","trim","gap","radioSizes","group","_jsx","RadioGroupProvider","BaseBox","Object","assign","getStyledProps","_jsxs","SelectorGroupField","position","labelledBy","labelId","accessibilityRole","componentName","makeAnalyticsAttribute","FormLabel","as","id","display","flexDirection","React","Children","map","child","index","FormHint","type"],"mappings":"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"}

package/build/lib/web/development/components/BottomSheet/BottomSheet.web.js

@@ -441,9 +441,14 @@ var _BottomSheet = function _BottomSheet(_ref2) {
   React__default.useEffect(function () {
     var lockTarget = scrollRef.current;
     return function () {
-      enableBodyScroll(lockTarget);
+      if (lockTarget) {
+        enableBodyScroll(lockTarget);
+      }
     };
-  }, []);
+    // when BottomSheet is mounted with isOpen={false}, then BottomSheetBody does not set scrollRef
+    // so, we added scrollRef to dependencies array to ensure that we update lockTarget when scrollRef is updated
+    // which will avoid passing null to enableBodyScroll
+  }, [scrollRef]);
 
   // We will need to reset these values otherwise the next time the bottomsheet opens
   // this will be populated and the animations won't run