@razorpay/blade 12.25.1 → 12.26.0

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

@@ -21,7 +21,7 @@ import { useVerifyAllowedChildren } from '../../utils/useVerifyAllowedChildren/u
 import { makeAnalyticsAttribute } from '../../utils/makeAnalyticsAttribute/makeAnalyticsAttribute.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
-var _excluded=["children","backgroundColor","borderRadius","elevation","testID","padding","width","height","minHeight","minWidth","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,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: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,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","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,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,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});
 
 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   * 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\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    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: 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        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","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","onFocus","onBlur","defaultRel","undefined","_jsx","CardProvider","CardRoot","display","onMouseEnter","isReactNative","MetaConstants","Card","getStyledProps","makeAnalyticsAttribute","_jsxs","CardSurface","textAlign","LinkOverlay","_CardBody","_ref2","_excluded2","useVerifyInsideCard","BaseBox","forwardRef","assignWithoutSideEffects","componentId"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAA,SAAA,CAAA,CAAA,UAAA,CAAA,iBAAA,CAAA,cAAA,CAAA,WAAA,CAAA,QAAA,CAAA,SAAA,CAAA,OAAA,CAAA,QAAA,CAAA,WAAA,CAAA,UAAA,CAAA,SAAA,CAAA,YAAA,CAAA,oBAAA,CAAA,oBAAA,CAAA,SAAA,CAAA,MAAA,CAAA,QAAA,CAAA,KAAA,CAAA,IAAA,CAAA,CAAA,UAAA,CAAA,CAAA,QAAA,CAAA,UAAA,CAAA,QAAA,CAAA,CAwBa,IAAAA,YAAY,CAAG,CAC1BC,UAAU,CAAE,YAAY,CACxBC,kBAAkB,CAAE,oBAAoB,CACxCC,iBAAiB,CAAE,mBAAmB,CACtCC,UAAU,CAAE,YAAY,CACxBC,kBAAkB,CAAE,oBAAoB,CACxCC,iBAAiB,CAAE,mBAAmB,CACtCC,QAAQ,CAAE,UAAU,CACpBC,cAAc,CAAE,gBAAgB,CAChCC,iBAAiB,CAAE,mBAAmB,CACtCC,eAAe,CAAE,iBAAiB,CAClCC,gBAAgB,CAAE,kBAAkB,CACpCC,cAAc,CAAE,gBAAgB,CAChCC,cAAc,CAAE,gBAAgB,CAChCC,oBAAoB,CAAE,sBACxB,EAwIA,IAAMC,KAAiE,CAAG,SAApEA,KAAiEA,CAAAC,IAAA,CAuBrEC,GAAG,CACoB,CAtBrB,IAAAC,QAAQ,CAAAF,IAAA,CAARE,QAAQ,CAAAC,oBAAA,CAAAH,IAAA,CACRI,eAAe,CAAfA,eAAe,CAAAD,oBAAA,UAAG,iCAAiC,CAAAA,oBAAA,CAAAE,iBAAA,CAAAL,IAAA,CACnDM,YAAY,CAAZA,YAAY,CAAAD,iBAAA,GAAA,KAAA,CAAA,CAAG,QAAQ,CAAAA,iBAAA,CAAAE,cAAA,CAAAP,IAAA,CACvBQ,SAAS,CAATA,SAAS,CAAAD,cAAA,GAAG,KAAA,CAAA,CAAA,WAAW,CAAAA,cAAA,CACvBE,MAAM,CAAAT,IAAA,CAANS,MAAM,CAAAC,YAAA,CAAAV,IAAA,CACNW,OAAO,CAAPA,OAAO,CAAAD,YAAA,GAAG,KAAA,CAAA,CAAA,WAAW,CAAAA,YAAA,CACrBE,KAAK,CAAAZ,IAAA,CAALY,KAAK,CACLC,MAAM,CAAAb,IAAA,CAANa,MAAM,CACNC,SAAS,CAAAd,IAAA,CAATc,SAAS,CACTC,QAAQ,CAAAf,IAAA,CAARe,QAAQ,CACRC,OAAO,CAAAhB,IAAA,CAAPgB,OAAO,CAAAC,eAAA,CAAAjB,IAAA,CACPkB,UAAU,CAAVA,UAAU,CAAAD,eAAA,UAAG,KAAK,CAAAA,eAAA,CAClBE,kBAAkB,CAAAnB,IAAA,CAAlBmB,kBAAkB,CAAAC,qBAAA,CAAApB,IAAA,CAClBqB,kBAAkB,CAAlBA,kBAAkB,CAAAD,qBAAA,GAAA,KAAA,CAAA,CAAG,KAAK,CAAAA,qBAAA,CAC1BE,OAAO,CAAAtB,IAAA,CAAPsB,OAAO,CACPC,IAAI,CAAAvB,IAAA,CAAJuB,IAAI,CACJC,MAAM,CAAAxB,IAAA,CAANwB,MAAM,CACNC,GAAG,CAAAzB,IAAA,CAAHyB,GAAG,CACHC,EAAE,CAAA1B,IAAA,CAAF0B,EAAE,CACCC,IAAI,CAAAC,wBAAA,CAAA5B,IAAA,CAAA6B,SAAA,CAAA,CAIT,IAAAC,eAAA,CAAkCC,cAAK,CAACC,QAAQ,CAAC,KAAK,CAAC,CAAAC,gBAAA,CAAAC,cAAA,CAAAJ,eAAA,IAAhDK,SAAS,CAAAF,gBAAA,CAAEG,CAAAA,CAAAA,CAAAA,YAAY,CAAAH,gBAAA,CAAA,CAAA,CAAA,CAE9BI,wBAAwB,CAAC,CACvBnC,QAAQ,CAARA,QAAQ,CACRoC,aAAa,CAAE,MAAM,CACrBC,iBAAiB,CAAE,CAACvD,YAAY,CAACC,UAAU,CAAED,YAAY,CAACO,QAAQ,CAAEP,YAAY,CAACI,UAAU,CAC7F,CAAC,CAAC,CAEF,IAAMoD,gBAAkC,CAAAC,MAAA,CAAAC,MAAA,IACnCC,aAAa,CAAC,CAAEC,IAAI,CAAEC,oBAAqB,CAAC,CAAC,CAC7CC,cAAc,CAAC,CAAEC,KAAK,CAAE5B,kBAAkB,CAAE6B,OAAO,CAAE9B,UAAW,CAAC,CAAC,CAAA,CACrE+B,OAAO,CAAE,SAAAA,SAAM,CACbb,YAAY,CAAC,IAAI,CAAC,CACpB,CAAC,CACDc,MAAM,CAAE,SAAAA,MAAA,EAAM,CACZd,YAAY,CAAC,KAAK,CAAC,CACrB,CAAC,CACF,CAAA,CACD,IAAMe,UAAU,CAAG3B,MAAM,EAAIA,MAAM,GAAK,QAAQ,CAAG,qBAAqB,CAAG4B,SAAS,CAEpF,OACEC,GAAA,CAACC,YAAY,CAAApD,CAAAA,QAAA,CACXmD,GAAA,CAACE,QAAQ,CAAAd,MAAA,CAAAC,MAAA,CAAA,CACPhB,EAAE,CAAEA,EAAG,CACPzB,GAAG,CAAEA,GAAa,CAClBuD,OAAO,CAAE,OAAiB,CAC1BlD,YAAY,CAAEA,YAAa,CAC3BmD,YAAY,CAAEnC,OAAiB,CAC/BD,kBAAkB,CAAEA,kBAAmB,CACvCH,UAAU,CAAEA,UAAW,CACvBiB,SAAS,CAAEA,SAAU,CAErBnB,OAAO,CAAE0C,aAAa,EAAE,CAAG1C,OAAO,CAAGoC,SAAU,CAC/CxC,KAAK,CAAEA,KAAM,CACbC,MAAM,CAAEA,MAAO,CACfC,SAAS,CAAEA,SAAU,CACrBC,QAAQ,CAAEA,QAAS,CACnBQ,IAAI,CAAEA,IAAK,CACXJ,kBAAkB,CAAEA,kBAAmB,CAAA,CACnCwB,aAAa,CAAC,CAAEC,IAAI,CAAEe,aAAa,CAACC,IAAI,CAAEnD,MAAM,CAANA,MAAO,CAAC,CAAC,CACnDoD,cAAc,CAAClC,IAAI,CAAC,CACpBmC,sBAAsB,CAACnC,IAAI,CAAC,EAAAzB,QAAA,CAEhC6D,IAAA,CAACC,WAAW,EACVnD,MAAM,CAAEA,MAAO,CACfC,SAAS,CAAEA,SAAU,CACrBH,OAAO,CAAEA,OAAQ,CACjBL,YAAY,CAAEA,YAAa,CAC3BE,SAAS,CAAEA,SAAU,CACrByD,SAAS,CAAE,MAAgB,CAC3B7D,eAAe,CAAEA,eAAgB,CAAAF,QAAA,EAEhCqB,IAAI,CACH8B,GAAA,CAACa,WAAW,CAAAzB,MAAA,CAAAC,MAAA,CACV1B,CAAAA,OAAO,CAAEA,OAAQ,CACjBO,IAAI,CAAEA,IAAK,CACXC,MAAM,CAAEA,MAAO,CACfC,GAAG,CAAEA,GAAG,EAAA,IAAA,CAAHA,GAAG,CAAI0B,UAAW,EACnBX,gBAAgB,CACrB,CAAC,CACA,IAAI,CACP,CAACjB,IAAI,EAAIP,OAAO,CACfqC,GAAA,CAACa,WAAW,CAAAzB,MAAA,CAAAC,MAAA,CAAChB,CAAAA,EAAE,CAAC,QAAQ,CAACV,OAAO,CAAEA,OAAQ,EAAKwB,gBAAgB,CAAG,CAAC,CACjE,IAAI,CACPtC,QAAQ,CAAA,CACE,CAAC,CACN,CAAA,CAAC,CACC,CAAC,CAEnB,CAAC,CAQD,IAAMiE,SAAS,CAAG,SAAZA,SAASA,CAAAC,KAAA,CAAiF,KAA3EvD,MAAM,CAAAuD,KAAA,CAANvD,MAAM,CAAEX,QAAQ,CAAAkE,KAAA,CAARlE,QAAQ,CAAEO,MAAM,CAAA2D,KAAA,CAAN3D,MAAM,CAAKkB,IAAI,CAAAC,wBAAA,CAAAwC,KAAA,CAAAC,UAAA,EACpDC,mBAAmB,CAAC,UAAU,CAAC,CAE/B,OACEjB,GAAA,CAACkB,OAAO,CAAA9B,MAAA,CAAAC,MAAA,IACFC,aAAa,CAAC,CAAEC,IAAI,CAAEe,aAAa,CAACpE,QAAQ,CAAEkB,MAAM,CAANA,MAAO,CAAC,CAAC,CACvDqD,sBAAsB,CAACnC,IAAI,CAAC,CAAA,CAChCd,MAAM,CAAEA,MAAO,CAAAX,QAAA,CAEdA,QAAQ,CACF,CAAA,CAAC,CAEd,CAAC,CAEK,IAAA0D,IAAI,CAAG7B,cAAK,CAACyC,UAAU,CAACzE,KAAK,EAC7B,IAAAR,QAAQ,CAAGkF,wBAAwB,CAACN,SAAS,CAAE,CAAEO,WAAW,CAAE1F,YAAY,CAACO,QAAS,CAAC;;;;"}
+{"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   * 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\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    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        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","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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"}

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

@@ -13,7 +13,6 @@ import 'react-native';
 import '../../../tokens/global/typography.js';
 import '../../../tokens/global/motion.js';
 import { useBreakpoint } from '../../../utils/useBreakpoint/useBreakpoint.js';
-import { makeSize } from '../../../utils/makeSize/makeSize.js';
 import useTheme from '../../BladeProvider/useTheme.js';
 import 'styled-components/native';
 import '@gorhom/portal';
@@ -22,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"];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,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];var childCount=React__default.Children.count(children);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:"column",children:React__default.Children.map(children,function(child,index){return jsx(BaseBox,{marginBottom:index===childCount-1?makeSize(0):gap,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"];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'})]})]}))}))});};
 
 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 { makeSize } from '~utils/makeSize';\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} & 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  ...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  const childCount = React.Children.count(children);\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 display=\"flex\" flexDirection=\"column\">\n              {React.Children.map(children, (child, index) => {\n                return (\n                  <BaseBox\n                    key={index}\n                    {...{ marginBottom: index === childCount - 1 ? makeSize(0) : gap }}\n                  >\n                    {child}\n                  </BaseBox>\n                );\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","rest","_objectWithoutProperties","_excluded","_useCheckboxGroup","useCheckboxGroup","contextValue","ids","_useTheme","useTheme","theme","showError","showHelpText","accessibilityText","_useBreakpoint","useBreakpoint","breakpoints","matchedDeviceType","gap","checkboxSizes","group","childCount","React","Children","count","_jsx","CheckboxGroupProvider","BaseBox","Object","assign","getStyledProps","_jsxs","SelectorGroupField","position","labelledBy","labelId","componentName","makeAnalyticsAttribute","FormLabel","as","id","display","flexDirection","map","child","index","marginBottom","makeSize","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  ...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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"}

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

@@ -2,7 +2,7 @@ import '../../tokens/global/typography.js';
 import '../../tokens/global/motion.js';
 import { size } from '../../tokens/global/size.js';
 
-var checkboxSizes={group:{gap:{small:{mobile:'spacing.3',desktop:'spacing.2'},medium:{mobile:'spacing.4',desktop:'spacing.3'},large:{mobile:'spacing.5',desktop:'spacing.4'}}},icon:{small:{width:size[12],height:size[12]},medium:{width:size[16],height:size[16]},large:{width:size[20],height:size[20]}}};var checkboxIconColors={variants:{default:{border:{checked:'colors.interactive.border.primary.default',unchecked:'colors.interactive.border.gray.default'},background:{checked:'colors.interactive.background.primary.default',unchecked:'colors.transparent'}},disabled:{border:{checked:'colors.interactive.border.primary.disabled',unchecked:'colors.interactive.border.gray.disabled'},background:{checked:'colors.interactive.background.primary.disabled',unchecked:'colors.transparent'}},negative:{border:{checked:'colors.interactive.border.negative.default',unchecked:'colors.interactive.border.negative.default'},background:{checked:'colors.interactive.background.negative.default',unchecked:'colors.transparent'}}}};var checkboxHoverTokens={default:{background:{checked:'colors.interactive.background.primary.highlighted',unchecked:'colors.interactive.background.gray.faded'},border:{checked:'colors.interactive.background.primary.highlighted',unchecked:'colors.interactive.border.gray.default'}}};
+var checkboxSizes={group:{gap:{small:{mobile:'spacing.2',desktop:'spacing.2'},medium:{mobile:'spacing.3',desktop:'spacing.3'},large:{mobile:'spacing.3',desktop:'spacing.3'}}},icon:{small:{width:size[12],height:size[12]},medium:{width:size[16],height:size[16]},large:{width:size[20],height:size[20]}}};var checkboxIconColors={variants:{default:{border:{checked:'colors.interactive.border.primary.default',unchecked:'colors.interactive.border.gray.default'},background:{checked:'colors.interactive.background.primary.default',unchecked:'colors.transparent'}},disabled:{border:{checked:'colors.interactive.border.primary.disabled',unchecked:'colors.interactive.border.gray.disabled'},background:{checked:'colors.interactive.background.primary.disabled',unchecked:'colors.transparent'}},negative:{border:{checked:'colors.interactive.border.negative.default',unchecked:'colors.interactive.border.negative.default'},background:{checked:'colors.interactive.background.negative.default',unchecked:'colors.transparent'}}}};var checkboxHoverTokens={default:{background:{checked:'colors.interactive.background.primary.highlighted',unchecked:'colors.interactive.background.gray.faded'},border:{checked:'colors.interactive.background.primary.highlighted',unchecked:'colors.interactive.border.gray.default'}}};
 
 export { checkboxHoverTokens, checkboxIconColors, checkboxSizes };
 //# sourceMappingURL=checkboxTokens.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"checkboxTokens.js","sources":["../../../../../src/components/Checkbox/checkboxTokens.ts"],"sourcesContent":["import type { DotNotationToken } from '../../utils/lodashButBetter/get';\nimport type { Theme } from '~components/BladeProvider';\nimport type { SelectorInputHoverTokens } from '~components/Form/Selector/types';\nimport { size } from '~tokens/global';\n\nconst checkboxSizes = {\n  group: {\n    gap: {\n      small: {\n        mobile: 'spacing.3',\n        desktop: 'spacing.2',\n      },\n      medium: {\n        mobile: 'spacing.4',\n        desktop: 'spacing.3',\n      },\n      large: {\n        mobile: 'spacing.5',\n        desktop: 'spacing.4',\n      },\n    },\n  },\n  icon: {\n    small: {\n      width: size[12],\n      height: size[12],\n    },\n    medium: {\n      width: size[16],\n      height: size[16],\n    },\n    large: {\n      width: size[20],\n      height: size[20],\n    },\n  },\n} as const;\n\ntype ColorTokens = `colors.${DotNotationToken<Theme['colors']>}`;\ntype Variant = {\n  border: {\n    checked: ColorTokens;\n    unchecked: ColorTokens;\n  };\n  background: {\n    checked: ColorTokens;\n    unchecked: ColorTokens;\n  };\n};\n\ntype CheckboxIconColors = {\n  variants: {\n    default: Variant;\n    disabled: Variant;\n    negative: Variant;\n  };\n};\n\nconst checkboxIconColors: CheckboxIconColors = {\n  variants: {\n    default: {\n      border: {\n        checked: 'colors.interactive.border.primary.default',\n        unchecked: 'colors.interactive.border.gray.default',\n      },\n      background: {\n        checked: 'colors.interactive.background.primary.default',\n        unchecked: 'colors.transparent',\n      },\n    },\n    disabled: {\n      border: {\n        checked: 'colors.interactive.border.primary.disabled',\n        unchecked: 'colors.interactive.border.gray.disabled',\n      },\n      background: {\n        checked: 'colors.interactive.background.primary.disabled',\n        unchecked: 'colors.transparent',\n      },\n    },\n    negative: {\n      border: {\n        checked: 'colors.interactive.border.negative.default',\n        unchecked: 'colors.interactive.border.negative.default',\n      },\n      background: {\n        checked: 'colors.interactive.background.negative.default',\n        unchecked: 'colors.transparent',\n      },\n    },\n  },\n} as const;\n\nconst checkboxHoverTokens: SelectorInputHoverTokens = {\n  default: {\n    background: {\n      checked: 'colors.interactive.background.primary.highlighted',\n      unchecked: 'colors.interactive.background.gray.faded',\n    },\n    border: {\n      checked: 'colors.interactive.background.primary.highlighted', // Intentionally not using border tokens here since we want to match the background color\n      unchecked: 'colors.interactive.border.gray.default',\n    },\n  },\n};\n\nexport { checkboxSizes, checkboxIconColors, checkboxHoverTokens };\n"],"names":["checkboxSizes","group","gap","small","mobile","desktop","medium","large","icon","width","size","height","checkboxIconColors","variants","default","border","checked","unchecked","background","disabled","negative","checkboxHoverTokens"],"mappings":";;;;AAKM,IAAAA,aAAa,CAAG,CACpBC,KAAK,CAAE,CACLC,GAAG,CAAE,CACHC,KAAK,CAAE,CACLC,MAAM,CAAE,WAAW,CACnBC,OAAO,CAAE,WACX,CAAC,CACDC,MAAM,CAAE,CACNF,MAAM,CAAE,WAAW,CACnBC,OAAO,CAAE,WACX,CAAC,CACDE,KAAK,CAAE,CACLH,MAAM,CAAE,WAAW,CACnBC,OAAO,CAAE,WACX,CACF,CACF,CAAC,CACDG,IAAI,CAAE,CACJL,KAAK,CAAE,CACLM,KAAK,CAAEC,IAAI,CAAC,EAAE,CAAC,CACfC,MAAM,CAAED,IAAI,CAAC,EAAE,CACjB,CAAC,CACDJ,MAAM,CAAE,CACNG,KAAK,CAAEC,IAAI,CAAC,EAAE,CAAC,CACfC,MAAM,CAAED,IAAI,CAAC,EAAE,CACjB,CAAC,CACDH,KAAK,CAAE,CACLE,KAAK,CAAEC,IAAI,CAAC,EAAE,CAAC,CACfC,MAAM,CAAED,IAAI,CAAC,EAAE,CACjB,CACF,CACF,EAsBM,IAAAE,kBAAsC,CAAG,CAC7CC,QAAQ,CAAE,CACRC,OAAO,CAAE,CACPC,MAAM,CAAE,CACNC,OAAO,CAAE,2CAA2C,CACpDC,SAAS,CAAE,wCACb,CAAC,CACDC,UAAU,CAAE,CACVF,OAAO,CAAE,+CAA+C,CACxDC,SAAS,CAAE,oBACb,CACF,CAAC,CACDE,QAAQ,CAAE,CACRJ,MAAM,CAAE,CACNC,OAAO,CAAE,4CAA4C,CACrDC,SAAS,CAAE,yCACb,CAAC,CACDC,UAAU,CAAE,CACVF,OAAO,CAAE,gDAAgD,CACzDC,SAAS,CAAE,oBACb,CACF,CAAC,CACDG,QAAQ,CAAE,CACRL,MAAM,CAAE,CACNC,OAAO,CAAE,4CAA4C,CACrDC,SAAS,CAAE,4CACb,CAAC,CACDC,UAAU,CAAE,CACVF,OAAO,CAAE,gDAAgD,CACzDC,SAAS,CAAE,oBACb,CACF,CACF,CACF,EAEM,IAAAI,mBAA6C,CAAG,CACpDP,OAAO,CAAE,CACPI,UAAU,CAAE,CACVF,OAAO,CAAE,mDAAmD,CAC5DC,SAAS,CAAE,0CACb,CAAC,CACDF,MAAM,CAAE,CACNC,OAAO,CAAE,mDAAmD,CAC5DC,SAAS,CAAE,wCACb,CACF,CACF;;;;"}
+{"version":3,"file":"checkboxTokens.js","sources":["../../../../../src/components/Checkbox/checkboxTokens.ts"],"sourcesContent":["import type { DotNotationToken } from '../../utils/lodashButBetter/get';\nimport type { Theme } from '~components/BladeProvider';\nimport type { SelectorInputHoverTokens } from '~components/Form/Selector/types';\nimport { size } from '~tokens/global';\n\nconst checkboxSizes = {\n  group: {\n    gap: {\n      small: {\n        mobile: 'spacing.2',\n        desktop: 'spacing.2',\n      },\n      medium: {\n        mobile: 'spacing.3',\n        desktop: 'spacing.3',\n      },\n      large: {\n        mobile: 'spacing.3',\n        desktop: 'spacing.3',\n      },\n    },\n  },\n  icon: {\n    small: {\n      width: size[12],\n      height: size[12],\n    },\n    medium: {\n      width: size[16],\n      height: size[16],\n    },\n    large: {\n      width: size[20],\n      height: size[20],\n    },\n  },\n} as const;\n\ntype ColorTokens = `colors.${DotNotationToken<Theme['colors']>}`;\ntype Variant = {\n  border: {\n    checked: ColorTokens;\n    unchecked: ColorTokens;\n  };\n  background: {\n    checked: ColorTokens;\n    unchecked: ColorTokens;\n  };\n};\n\ntype CheckboxIconColors = {\n  variants: {\n    default: Variant;\n    disabled: Variant;\n    negative: Variant;\n  };\n};\n\nconst checkboxIconColors: CheckboxIconColors = {\n  variants: {\n    default: {\n      border: {\n        checked: 'colors.interactive.border.primary.default',\n        unchecked: 'colors.interactive.border.gray.default',\n      },\n      background: {\n        checked: 'colors.interactive.background.primary.default',\n        unchecked: 'colors.transparent',\n      },\n    },\n    disabled: {\n      border: {\n        checked: 'colors.interactive.border.primary.disabled',\n        unchecked: 'colors.interactive.border.gray.disabled',\n      },\n      background: {\n        checked: 'colors.interactive.background.primary.disabled',\n        unchecked: 'colors.transparent',\n      },\n    },\n    negative: {\n      border: {\n        checked: 'colors.interactive.border.negative.default',\n        unchecked: 'colors.interactive.border.negative.default',\n      },\n      background: {\n        checked: 'colors.interactive.background.negative.default',\n        unchecked: 'colors.transparent',\n      },\n    },\n  },\n} as const;\n\nconst checkboxHoverTokens: SelectorInputHoverTokens = {\n  default: {\n    background: {\n      checked: 'colors.interactive.background.primary.highlighted',\n      unchecked: 'colors.interactive.background.gray.faded',\n    },\n    border: {\n      checked: 'colors.interactive.background.primary.highlighted', // Intentionally not using border tokens here since we want to match the background color\n      unchecked: 'colors.interactive.border.gray.default',\n    },\n  },\n};\n\nexport { checkboxSizes, checkboxIconColors, checkboxHoverTokens };\n"],"names":["checkboxSizes","group","gap","small","mobile","desktop","medium","large","icon","width","size","height","checkboxIconColors","variants","default","border","checked","unchecked","background","disabled","negative","checkboxHoverTokens"],"mappings":";;;;AAKM,IAAAA,aAAa,CAAG,CACpBC,KAAK,CAAE,CACLC,GAAG,CAAE,CACHC,KAAK,CAAE,CACLC,MAAM,CAAE,WAAW,CACnBC,OAAO,CAAE,WACX,CAAC,CACDC,MAAM,CAAE,CACNF,MAAM,CAAE,WAAW,CACnBC,OAAO,CAAE,WACX,CAAC,CACDE,KAAK,CAAE,CACLH,MAAM,CAAE,WAAW,CACnBC,OAAO,CAAE,WACX,CACF,CACF,CAAC,CACDG,IAAI,CAAE,CACJL,KAAK,CAAE,CACLM,KAAK,CAAEC,IAAI,CAAC,EAAE,CAAC,CACfC,MAAM,CAAED,IAAI,CAAC,EAAE,CACjB,CAAC,CACDJ,MAAM,CAAE,CACNG,KAAK,CAAEC,IAAI,CAAC,EAAE,CAAC,CACfC,MAAM,CAAED,IAAI,CAAC,EAAE,CACjB,CAAC,CACDH,KAAK,CAAE,CACLE,KAAK,CAAEC,IAAI,CAAC,EAAE,CAAC,CACfC,MAAM,CAAED,IAAI,CAAC,EAAE,CACjB,CACF,CACF,EAsBM,IAAAE,kBAAsC,CAAG,CAC7CC,QAAQ,CAAE,CACRC,OAAO,CAAE,CACPC,MAAM,CAAE,CACNC,OAAO,CAAE,2CAA2C,CACpDC,SAAS,CAAE,wCACb,CAAC,CACDC,UAAU,CAAE,CACVF,OAAO,CAAE,+CAA+C,CACxDC,SAAS,CAAE,oBACb,CACF,CAAC,CACDE,QAAQ,CAAE,CACRJ,MAAM,CAAE,CACNC,OAAO,CAAE,4CAA4C,CACrDC,SAAS,CAAE,yCACb,CAAC,CACDC,UAAU,CAAE,CACVF,OAAO,CAAE,gDAAgD,CACzDC,SAAS,CAAE,oBACb,CACF,CAAC,CACDG,QAAQ,CAAE,CACRL,MAAM,CAAE,CACNC,OAAO,CAAE,4CAA4C,CACrDC,SAAS,CAAE,4CACb,CAAC,CACDC,UAAU,CAAE,CACVF,OAAO,CAAE,gDAAgD,CACzDC,SAAS,CAAE,oBACb,CACF,CACF,CACF,EAEM,IAAAI,mBAA6C,CAAG,CACpDP,OAAO,CAAE,CACPI,UAAU,CAAE,CACVF,OAAO,CAAE,mDAAmD,CAC5DC,SAAS,CAAE,0CACb,CAAC,CACDF,MAAM,CAAE,CACNC,OAAO,CAAE,mDAAmD,CAC5DC,SAAS,CAAE,wCACb,CACF,CACF;;;;"}

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

@@ -8,7 +8,7 @@ import { throwBladeError } from '../../utils/logger/logger.js';
 import '../BladeProvider/useTheme.js';
 import { useControllableState } from '../../utils/useControllable.js';
 
-function setMixed(element,mixed){if(mixed){element.indeterminate=true;}else if(element.indeterminate){element.indeterminate=false;}}var useCheckbox=function useCheckbox(_ref){var _ref$role=_ref.role,role=_ref$role===void 0?'checkbox':_ref$role,isChecked=_ref.isChecked,defaultChecked=_ref.defaultChecked,isIndeterminate=_ref.isIndeterminate,isDisabled=_ref.isDisabled,isRequired=_ref.isRequired,hasError=_ref.hasError,hasHelperText=_ref.hasHelperText,onChange=_ref.onChange,name=_ref.name,value=_ref.value;var inputRef=React__default.useRef(null);var isReactNative=getPlatformType()==='react-native';if(__DEV__){if(isChecked&&defaultChecked){throwBladeError({message:`Do not provide both 'isChecked' and 'defaultChecked' to useCheckbox. Consider if you want this component to be controlled or uncontrolled.`,moduleName:'useCheckbox'});}}var _useControllableState=useControllableState({value:isChecked,defaultValue:defaultChecked!=null?defaultChecked:false}),_useControllableState2=_slicedToArray(_useControllableState,2),checkboxState=_useControllableState2[0],setCheckboxStateChange=_useControllableState2[1];var handleOnChange=function handleOnChange(event){if(isDisabled){event.stopPropagation();event.preventDefault();return;}setCheckboxStateChange(function(checked){onChange==null?void 0:onChange({isChecked:!checked,event:event,value:value});return !checked;});};React__default.useEffect(function(){var element=inputRef.current;if(!element)return;setMixed(element,isIndeterminate);},[isIndeterminate]);var state={isReactNative:isReactNative,isChecked:checkboxState,setChecked:setCheckboxStateChange};var _useFormId=useFormId('checkbox'),inputId=_useFormId.inputId,errorTextId=_useFormId.errorTextId,helpTextId=_useFormId.helpTextId;var accessibilityProps=makeAccessible(Object.assign({role:role,required:Boolean(isRequired),invalid:Boolean(hasError),disabled:Boolean(isDisabled),checked:checkboxState},hasError?{errorMessage:errorTextId}:{},hasHelperText?{describedBy:helpTextId}:{}));if(isReactNative){return {state:state,inputProps:Object.assign({onPress:handleOnChange,name:name,value:value},accessibilityProps)};}return {state:state,ids:{inputId:inputId,errorTextId:errorTextId,helpTextId:helpTextId},inputProps:Object.assign({ref:inputRef,onChange:handleOnChange,type:'checkbox',name:name,value:value,checked:checkboxState,disabled:isDisabled,required:isRequired},accessibilityProps)};};
+function setMixed(element,mixed){if(mixed){element.indeterminate=true;}else if(element.indeterminate){element.indeterminate=false;}}var useCheckbox=function useCheckbox(_ref){var _inputRef$current;var _ref$role=_ref.role,role=_ref$role===void 0?'checkbox':_ref$role,isChecked=_ref.isChecked,defaultChecked=_ref.defaultChecked,isIndeterminate=_ref.isIndeterminate,isDisabled=_ref.isDisabled,isRequired=_ref.isRequired,hasError=_ref.hasError,hasHelperText=_ref.hasHelperText,onChange=_ref.onChange,name=_ref.name,value=_ref.value;var inputRef=React__default.useRef(null);var isReactNative=getPlatformType()==='react-native';if(__DEV__){if(isChecked&&defaultChecked){throwBladeError({message:`Do not provide both 'isChecked' and 'defaultChecked' to useCheckbox. Consider if you want this component to be controlled or uncontrolled.`,moduleName:'useCheckbox'});}}var _useControllableState=useControllableState({value:isChecked,defaultValue:defaultChecked!=null?defaultChecked:false}),_useControllableState2=_slicedToArray(_useControllableState,2),checkboxState=_useControllableState2[0],setCheckboxStateChange=_useControllableState2[1];var handleOnChange=function handleOnChange(event){if(isDisabled){event.stopPropagation();event.preventDefault();return;}setCheckboxStateChange(function(checked){onChange==null?void 0:onChange({isChecked:!checked,event:event,value:value});return !checked;});};React__default.useEffect(function(){var element=inputRef.current;if(!element)return;setMixed(element,isIndeterminate);},[isIndeterminate]);var state={isReactNative:isReactNative,isChecked:checkboxState,setChecked:setCheckboxStateChange};var _useFormId=useFormId('checkbox'),inputId=_useFormId.inputId,errorTextId=_useFormId.errorTextId,helpTextId=_useFormId.helpTextId;var accessibilityProps=makeAccessible(Object.assign({role:role,required:Boolean(isRequired),invalid:Boolean(hasError),disabled:Boolean(isDisabled),checked:(_inputRef$current=inputRef.current)!=null&&_inputRef$current.indeterminate?'mixed':checkboxState},hasError?{errorMessage:errorTextId}:{},hasHelperText?{describedBy:helpTextId}:{}));if(isReactNative){return {state:state,inputProps:Object.assign({onPress:handleOnChange,name:name,value:value},accessibilityProps)};}return {state:state,ids:{inputId:inputId,errorTextId:errorTextId,helpTextId:helpTextId},inputProps:Object.assign({ref:inputRef,onChange:handleOnChange,type:'checkbox',name:name,value:value,checked:checkboxState,disabled:isDisabled,required:isRequired},accessibilityProps)};};
 
 export { useCheckbox };
 //# sourceMappingURL=useCheckbox.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"useCheckbox.js","sources":["../../../../../src/components/Checkbox/useCheckbox.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/explicit-function-return-type */\n/* eslint-disable @typescript-eslint/explicit-module-boundary-types */\nimport React from 'react';\nimport type { GestureResponderEvent } from 'react-native';\nimport type { CheckboxProps } from './Checkbox';\nimport { useFormId } from '~components/Form/useFormId';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport { getPlatformType } from '~utils';\nimport { useControllableState } from '~utils/useControllable';\nimport { throwBladeError } from '~utils/logger';\n\ntype UseCheckboxProps = Pick<\n  CheckboxProps,\n  | 'isChecked'\n  | 'defaultChecked'\n  | 'isDisabled'\n  | 'isIndeterminate'\n  | 'isRequired'\n  | 'onChange'\n  | 'name'\n  | 'value'\n> & {\n  role?: 'checkbox' | 'switch';\n  hasError?: boolean;\n  hasHelperText?: boolean;\n};\n\n/**\n * indeterminate is not a HTML input element prop,\n * it's an IDL prop thus we need to set it on the underlying HTMLInputElement\n */\nfunction setMixed(element: HTMLInputElement, mixed?: boolean) {\n  if (mixed) {\n    element.indeterminate = true;\n  } else if (element.indeterminate) {\n    element.indeterminate = false;\n  }\n}\n\nconst useCheckbox = ({\n  role = 'checkbox',\n  isChecked,\n  defaultChecked,\n  isIndeterminate,\n  isDisabled,\n  isRequired,\n  hasError,\n  hasHelperText,\n  onChange,\n  name,\n  value,\n}: UseCheckboxProps) => {\n  const inputRef = React.useRef<HTMLInputElement>(null);\n\n  const isReactNative = getPlatformType() === 'react-native';\n  if (__DEV__) {\n    if (isChecked && defaultChecked) {\n      throwBladeError({\n        message: `Do not provide both 'isChecked' and 'defaultChecked' to useCheckbox. Consider if you want this component to be controlled or uncontrolled.`,\n        moduleName: 'useCheckbox',\n      });\n    }\n  }\n\n  const [checkboxState, setCheckboxStateChange] = useControllableState({\n    value: isChecked,\n    defaultValue: defaultChecked ?? false,\n  });\n\n  const handleOnChange = (event: React.ChangeEvent<HTMLInputElement> | GestureResponderEvent) => {\n    if (isDisabled) {\n      event.stopPropagation();\n      event.preventDefault();\n      return;\n    }\n    setCheckboxStateChange((checked) => {\n      onChange?.({\n        isChecked: !checked,\n        event: event as React.ChangeEvent,\n        value,\n      });\n      return !checked;\n    });\n  };\n\n  // set indeterminate to input\n  React.useEffect(() => {\n    const element = inputRef.current;\n    if (!element) return;\n    setMixed(element, isIndeterminate);\n  }, [isIndeterminate]);\n\n  const state = {\n    isReactNative,\n    isChecked: checkboxState,\n    setChecked: setCheckboxStateChange,\n  };\n\n  const { inputId, errorTextId, helpTextId } = useFormId('checkbox');\n\n  const accessibilityProps = makeAccessible({\n    role,\n    required: Boolean(isRequired),\n    invalid: Boolean(hasError),\n    disabled: Boolean(isDisabled),\n    checked: checkboxState,\n    ...(hasError ? { errorMessage: errorTextId } : {}),\n    ...(hasHelperText ? { describedBy: helpTextId } : {}),\n  });\n\n  if (isReactNative) {\n    return {\n      state,\n      inputProps: {\n        onPress: handleOnChange,\n        name,\n        value,\n        ...accessibilityProps,\n      },\n    };\n  }\n\n  return {\n    state,\n    ids: { inputId, errorTextId, helpTextId },\n    inputProps: {\n      ref: inputRef,\n      onChange: handleOnChange,\n      type: 'checkbox',\n      name,\n      value,\n      checked: checkboxState,\n      disabled: isDisabled,\n      required: isRequired,\n      ...accessibilityProps,\n    },\n  };\n};\n\nexport type InputProps = ReturnType<typeof useCheckbox>['inputProps'];\n\nexport { useCheckbox };\n"],"names":["setMixed","element","mixed","indeterminate","useCheckbox","_ref","_ref$role","role","isChecked","defaultChecked","isIndeterminate","isDisabled","isRequired","hasError","hasHelperText","onChange","name","value","inputRef","React","useRef","isReactNative","getPlatformType","__DEV__","throwBladeError","message","moduleName","_useControllableState","useControllableState","defaultValue","_useControllableState2","_slicedToArray","checkboxState","setCheckboxStateChange","handleOnChange","event","stopPropagation","preventDefault","checked","useEffect","current","state","setChecked","_useFormId","useFormId","inputId","errorTextId","helpTextId","accessibilityProps","makeAccessible","Object","assign","required","Boolean","invalid","disabled","errorMessage","describedBy","inputProps","onPress","ids","ref","type"],"mappings":"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"}
+{"version":3,"file":"useCheckbox.js","sources":["../../../../../src/components/Checkbox/useCheckbox.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/explicit-function-return-type */\n/* eslint-disable @typescript-eslint/explicit-module-boundary-types */\nimport React from 'react';\nimport type { GestureResponderEvent } from 'react-native';\nimport type { CheckboxProps } from './Checkbox';\nimport { useFormId } from '~components/Form/useFormId';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport { getPlatformType } from '~utils';\nimport { useControllableState } from '~utils/useControllable';\nimport { throwBladeError } from '~utils/logger';\n\ntype UseCheckboxProps = Pick<\n  CheckboxProps,\n  | 'isChecked'\n  | 'defaultChecked'\n  | 'isDisabled'\n  | 'isIndeterminate'\n  | 'isRequired'\n  | 'onChange'\n  | 'name'\n  | 'value'\n> & {\n  role?: 'checkbox' | 'switch';\n  hasError?: boolean;\n  hasHelperText?: boolean;\n};\n\n/**\n * indeterminate is not a HTML input element prop,\n * it's an IDL prop thus we need to set it on the underlying HTMLInputElement\n */\nfunction setMixed(element: HTMLInputElement, mixed?: boolean) {\n  if (mixed) {\n    element.indeterminate = true;\n  } else if (element.indeterminate) {\n    element.indeterminate = false;\n  }\n}\n\nconst useCheckbox = ({\n  role = 'checkbox',\n  isChecked,\n  defaultChecked,\n  isIndeterminate,\n  isDisabled,\n  isRequired,\n  hasError,\n  hasHelperText,\n  onChange,\n  name,\n  value,\n}: UseCheckboxProps) => {\n  const inputRef = React.useRef<HTMLInputElement>(null);\n\n  const isReactNative = getPlatformType() === 'react-native';\n  if (__DEV__) {\n    if (isChecked && defaultChecked) {\n      throwBladeError({\n        message: `Do not provide both 'isChecked' and 'defaultChecked' to useCheckbox. Consider if you want this component to be controlled or uncontrolled.`,\n        moduleName: 'useCheckbox',\n      });\n    }\n  }\n\n  const [checkboxState, setCheckboxStateChange] = useControllableState({\n    value: isChecked,\n    defaultValue: defaultChecked ?? false,\n  });\n\n  const handleOnChange = (event: React.ChangeEvent<HTMLInputElement> | GestureResponderEvent) => {\n    if (isDisabled) {\n      event.stopPropagation();\n      event.preventDefault();\n      return;\n    }\n    setCheckboxStateChange((checked) => {\n      onChange?.({\n        isChecked: !checked,\n        event: event as React.ChangeEvent,\n        value,\n      });\n      return !checked;\n    });\n  };\n\n  // set indeterminate to input\n  React.useEffect(() => {\n    const element = inputRef.current;\n    if (!element) return;\n    setMixed(element, isIndeterminate);\n  }, [isIndeterminate]);\n\n  const state = {\n    isReactNative,\n    isChecked: checkboxState,\n    setChecked: setCheckboxStateChange,\n  };\n\n  const { inputId, errorTextId, helpTextId } = useFormId('checkbox');\n\n  const accessibilityProps = makeAccessible({\n    role,\n    required: Boolean(isRequired),\n    invalid: Boolean(hasError),\n    disabled: Boolean(isDisabled),\n    checked: inputRef.current?.indeterminate ? 'mixed' : checkboxState,\n    ...(hasError ? { errorMessage: errorTextId } : {}),\n    ...(hasHelperText ? { describedBy: helpTextId } : {}),\n  });\n\n  if (isReactNative) {\n    return {\n      state,\n      inputProps: {\n        onPress: handleOnChange,\n        name,\n        value,\n        ...accessibilityProps,\n      },\n    };\n  }\n\n  return {\n    state,\n    ids: { inputId, errorTextId, helpTextId },\n    inputProps: {\n      ref: inputRef,\n      onChange: handleOnChange,\n      type: 'checkbox',\n      name,\n      value,\n      checked: checkboxState,\n      disabled: isDisabled,\n      required: isRequired,\n      ...accessibilityProps,\n    },\n  };\n};\n\nexport type InputProps = ReturnType<typeof useCheckbox>['inputProps'];\n\nexport { useCheckbox };\n"],"names":["setMixed","element","mixed","indeterminate","useCheckbox","_ref","_inputRef$current","_ref$role","role","isChecked","defaultChecked","isIndeterminate","isDisabled","isRequired","hasError","hasHelperText","onChange","name","value","inputRef","React","useRef","isReactNative","getPlatformType","__DEV__","throwBladeError","message","moduleName","_useControllableState","useControllableState","defaultValue","_useControllableState2","_slicedToArray","checkboxState","setCheckboxStateChange","handleOnChange","event","stopPropagation","preventDefault","checked","useEffect","current","state","setChecked","_useFormId","useFormId","inputId","errorTextId","helpTextId","accessibilityProps","makeAccessible","Object","assign","required","Boolean","invalid","disabled","errorMessage","describedBy","inputProps","onPress","ids","ref","type"],"mappings":"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"}

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

@@ -13,7 +13,6 @@ import 'react-native';
 import '../../../tokens/global/typography.js';
 import '../../../tokens/global/motion.js';
 import { useBreakpoint } from '../../../utils/useBreakpoint/useBreakpoint.js';
-import { makeSize } from '../../../utils/makeSize/makeSize.js';
 import useTheme from '../../BladeProvider/useTheme.js';
 import 'styled-components/native';
 import '@gorhom/portal';
@@ -22,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"];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,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];var childCount=React__default.Children.count(children);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:"column",children:React__default.Children.map(children,function(child,index){return jsx(BaseBox,{marginBottom:index===childCount-1?makeSize(0):gap,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"];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})]})]}))}))});};
 
 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 { makeSize } from '~utils/makeSize';\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} & 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  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  const childCount = React.Children.count(children);\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 display=\"flex\" flexDirection=\"column\">\n              {React.Children.map(children, (child, index) => {\n                return (\n                  <BaseBox\n                    key={index}\n                    {...{ marginBottom: index === childCount - 1 ? makeSize(0) : gap }}\n                  >\n                    {child}\n                  </BaseBox>\n                );\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","testID","rest","_objectWithoutProperties","_excluded","_useRadioGroup","useRadioGroup","contextValue","ids","_useTheme","useTheme","theme","_useBreakpoint","useBreakpoint","breakpoints","matchedDeviceType","showError","showHelpText","accessibilityText","trim","gap","radioSizes","group","childCount","React","Children","count","_jsx","RadioGroupProvider","BaseBox","Object","assign","getStyledProps","_jsxs","SelectorGroupField","position","labelledBy","labelId","accessibilityRole","componentName","makeAnalyticsAttribute","FormLabel","as","id","display","flexDirection","map","child","index","marginBottom","makeSize","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  ...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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"}

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

@@ -2,7 +2,7 @@ import '../../tokens/global/typography.js';
 import '../../tokens/global/motion.js';
 import { size } from '../../tokens/global/size.js';
 
-var radioSizes={group:{gap:{small:{mobile:'spacing.3',desktop:'spacing.2'},medium:{mobile:'spacing.4',desktop:'spacing.3'},large:{mobile:'spacing.5',desktop:'spacing.4'}}},icon:{small:{width:size[12],height:size[12],dotRadius:size[2]},medium:{width:size[16],height:size[16],dotRadius:size[3]},large:{width:size[20],height:size[20],dotRadius:size[4]}}};var radioIconColors={variants:{default:{dot:{checked:'colors.interactive.icon.onPrimary.normal',unchecked:'colors.transparent'},border:{checked:'colors.interactive.border.primary.default',unchecked:'colors.interactive.border.gray.default'},background:{checked:'colors.interactive.background.primary.default',unchecked:'colors.transparent'}},disabled:{dot:{checked:'colors.interactive.icon.onPrimary.normal',unchecked:'colors.interactive.icon.onPrimary.normal'},border:{checked:'colors.transparent',unchecked:'colors.interactive.border.gray.disabled'},background:{checked:'colors.interactive.background.primary.disabled',unchecked:'colors.transparent'}},negative:{dot:{checked:'colors.interactive.icon.onPrimary.normal',unchecked:'colors.transparent'},border:{checked:'colors.interactive.border.negative.default',unchecked:'colors.interactive.border.negative.default'},background:{checked:'colors.interactive.background.negative.default',unchecked:'colors.transparent'}}}};var radioHoverTokens={default:{background:{checked:'colors.interactive.background.primary.highlighted',unchecked:'colors.interactive.background.gray.faded'},border:{checked:'colors.interactive.background.primary.highlighted',unchecked:'colors.interactive.border.gray.default'}}};
+var radioSizes={group:{gap:{small:{mobile:'spacing.2',desktop:'spacing.2'},medium:{mobile:'spacing.3',desktop:'spacing.3'},large:{mobile:'spacing.4',desktop:'spacing.4'}}},icon:{small:{width:size[12],height:size[12],dotRadius:size[2]},medium:{width:size[16],height:size[16],dotRadius:size[3]},large:{width:size[20],height:size[20],dotRadius:size[4]}}};var radioIconColors={variants:{default:{dot:{checked:'colors.interactive.icon.onPrimary.normal',unchecked:'colors.transparent'},border:{checked:'colors.interactive.border.primary.default',unchecked:'colors.interactive.border.gray.default'},background:{checked:'colors.interactive.background.primary.default',unchecked:'colors.transparent'}},disabled:{dot:{checked:'colors.interactive.icon.onPrimary.normal',unchecked:'colors.interactive.icon.onPrimary.normal'},border:{checked:'colors.transparent',unchecked:'colors.interactive.border.gray.disabled'},background:{checked:'colors.interactive.background.primary.disabled',unchecked:'colors.transparent'}},negative:{dot:{checked:'colors.interactive.icon.onPrimary.normal',unchecked:'colors.transparent'},border:{checked:'colors.interactive.border.negative.default',unchecked:'colors.interactive.border.negative.default'},background:{checked:'colors.interactive.background.negative.default',unchecked:'colors.transparent'}}}};var radioHoverTokens={default:{background:{checked:'colors.interactive.background.primary.highlighted',unchecked:'colors.interactive.background.gray.faded'},border:{checked:'colors.interactive.background.primary.highlighted',unchecked:'colors.interactive.border.gray.default'}}};
 
 export { radioHoverTokens, radioIconColors, radioSizes };
 //# sourceMappingURL=radioTokens.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"radioTokens.js","sources":["../../../../../src/components/Radio/radioTokens.ts"],"sourcesContent":["import type { Theme } from '~components/BladeProvider';\nimport type { SelectorInputHoverTokens } from '~components/Form/Selector/types';\nimport type { DotNotationToken } from '~utils/lodashButBetter/get';\nimport { size } from '~tokens/global';\n\nconst radioSizes = {\n  group: {\n    gap: {\n      small: {\n        mobile: 'spacing.3',\n        desktop: 'spacing.2',\n      },\n      medium: {\n        mobile: 'spacing.4',\n        desktop: 'spacing.3',\n      },\n      large: {\n        mobile: 'spacing.5',\n        desktop: 'spacing.4',\n      },\n    },\n  },\n  icon: {\n    small: {\n      width: size[12],\n      height: size[12],\n      dotRadius: size[2],\n    },\n    medium: {\n      width: size[16],\n      height: size[16],\n      dotRadius: size[3],\n    },\n    large: {\n      width: size[20],\n      height: size[20],\n      dotRadius: size[4],\n    },\n  },\n} as const;\n\ntype ColorTokens = `colors.${DotNotationToken<Theme['colors']>}`;\ntype Variant = {\n  dot: {\n    checked: ColorTokens;\n    unchecked: ColorTokens;\n  };\n  border: {\n    checked: ColorTokens;\n    unchecked: ColorTokens;\n  };\n  background: {\n    checked: ColorTokens;\n    unchecked: ColorTokens;\n  };\n};\n\ntype RadioIconColors = {\n  variants: {\n    default: Variant;\n    disabled: Variant;\n    negative: Variant;\n  };\n};\n\nconst radioIconColors: RadioIconColors = {\n  variants: {\n    default: {\n      dot: {\n        checked: 'colors.interactive.icon.onPrimary.normal',\n        unchecked: 'colors.transparent',\n      },\n      border: {\n        checked: 'colors.interactive.border.primary.default',\n        unchecked: 'colors.interactive.border.gray.default',\n      },\n      background: {\n        checked: 'colors.interactive.background.primary.default',\n        unchecked: 'colors.transparent',\n      },\n    },\n    disabled: {\n      dot: {\n        checked: 'colors.interactive.icon.onPrimary.normal',\n        unchecked: 'colors.interactive.icon.onPrimary.normal',\n      },\n      border: {\n        checked: 'colors.transparent',\n        unchecked: 'colors.interactive.border.gray.disabled',\n      },\n      background: {\n        checked: 'colors.interactive.background.primary.disabled',\n        unchecked: 'colors.transparent',\n      },\n    },\n    negative: {\n      dot: {\n        checked: 'colors.interactive.icon.onPrimary.normal',\n        unchecked: 'colors.transparent',\n      },\n      border: {\n        checked: 'colors.interactive.border.negative.default',\n        unchecked: 'colors.interactive.border.negative.default',\n      },\n      background: {\n        checked: 'colors.interactive.background.negative.default',\n        unchecked: 'colors.transparent',\n      },\n    },\n  },\n} as const;\n\nconst radioHoverTokens: SelectorInputHoverTokens = {\n  default: {\n    background: {\n      checked: 'colors.interactive.background.primary.highlighted',\n      unchecked: 'colors.interactive.background.gray.faded',\n    },\n    border: {\n      checked: 'colors.interactive.background.primary.highlighted', // Intentionally not using border tokens here since we want to match the background color\n      unchecked: 'colors.interactive.border.gray.default',\n    },\n  },\n};\n\nexport { radioSizes, radioIconColors, radioHoverTokens };\n"],"names":["radioSizes","group","gap","small","mobile","desktop","medium","large","icon","width","size","height","dotRadius","radioIconColors","variants","default","dot","checked","unchecked","border","background","disabled","negative","radioHoverTokens"],"mappings":";;;;AAKM,IAAAA,UAAU,CAAG,CACjBC,KAAK,CAAE,CACLC,GAAG,CAAE,CACHC,KAAK,CAAE,CACLC,MAAM,CAAE,WAAW,CACnBC,OAAO,CAAE,WACX,CAAC,CACDC,MAAM,CAAE,CACNF,MAAM,CAAE,WAAW,CACnBC,OAAO,CAAE,WACX,CAAC,CACDE,KAAK,CAAE,CACLH,MAAM,CAAE,WAAW,CACnBC,OAAO,CAAE,WACX,CACF,CACF,CAAC,CACDG,IAAI,CAAE,CACJL,KAAK,CAAE,CACLM,KAAK,CAAEC,IAAI,CAAC,EAAE,CAAC,CACfC,MAAM,CAAED,IAAI,CAAC,EAAE,CAAC,CAChBE,SAAS,CAAEF,IAAI,CAAC,CAAC,CACnB,CAAC,CACDJ,MAAM,CAAE,CACNG,KAAK,CAAEC,IAAI,CAAC,EAAE,CAAC,CACfC,MAAM,CAAED,IAAI,CAAC,EAAE,CAAC,CAChBE,SAAS,CAAEF,IAAI,CAAC,CAAC,CACnB,CAAC,CACDH,KAAK,CAAE,CACLE,KAAK,CAAEC,IAAI,CAAC,EAAE,CAAC,CACfC,MAAM,CAAED,IAAI,CAAC,EAAE,CAAC,CAChBE,SAAS,CAAEF,IAAI,CAAC,CAAC,CACnB,CACF,CACF,EA0BM,IAAAG,eAAgC,CAAG,CACvCC,QAAQ,CAAE,CACRC,OAAO,CAAE,CACPC,GAAG,CAAE,CACHC,OAAO,CAAE,0CAA0C,CACnDC,SAAS,CAAE,oBACb,CAAC,CACDC,MAAM,CAAE,CACNF,OAAO,CAAE,2CAA2C,CACpDC,SAAS,CAAE,wCACb,CAAC,CACDE,UAAU,CAAE,CACVH,OAAO,CAAE,+CAA+C,CACxDC,SAAS,CAAE,oBACb,CACF,CAAC,CACDG,QAAQ,CAAE,CACRL,GAAG,CAAE,CACHC,OAAO,CAAE,0CAA0C,CACnDC,SAAS,CAAE,0CACb,CAAC,CACDC,MAAM,CAAE,CACNF,OAAO,CAAE,oBAAoB,CAC7BC,SAAS,CAAE,yCACb,CAAC,CACDE,UAAU,CAAE,CACVH,OAAO,CAAE,gDAAgD,CACzDC,SAAS,CAAE,oBACb,CACF,CAAC,CACDI,QAAQ,CAAE,CACRN,GAAG,CAAE,CACHC,OAAO,CAAE,0CAA0C,CACnDC,SAAS,CAAE,oBACb,CAAC,CACDC,MAAM,CAAE,CACNF,OAAO,CAAE,4CAA4C,CACrDC,SAAS,CAAE,4CACb,CAAC,CACDE,UAAU,CAAE,CACVH,OAAO,CAAE,gDAAgD,CACzDC,SAAS,CAAE,oBACb,CACF,CACF,CACF,EAEM,IAAAK,gBAA0C,CAAG,CACjDR,OAAO,CAAE,CACPK,UAAU,CAAE,CACVH,OAAO,CAAE,mDAAmD,CAC5DC,SAAS,CAAE,0CACb,CAAC,CACDC,MAAM,CAAE,CACNF,OAAO,CAAE,mDAAmD,CAC5DC,SAAS,CAAE,wCACb,CACF,CACF;;;;"}
+{"version":3,"file":"radioTokens.js","sources":["../../../../../src/components/Radio/radioTokens.ts"],"sourcesContent":["import type { Theme } from '~components/BladeProvider';\nimport type { SelectorInputHoverTokens } from '~components/Form/Selector/types';\nimport type { DotNotationToken } from '~utils/lodashButBetter/get';\nimport { size } from '~tokens/global';\n\nconst radioSizes = {\n  group: {\n    gap: {\n      small: {\n        mobile: 'spacing.2',\n        desktop: 'spacing.2',\n      },\n      medium: {\n        mobile: 'spacing.3',\n        desktop: 'spacing.3',\n      },\n      large: {\n        mobile: 'spacing.4',\n        desktop: 'spacing.4',\n      },\n    },\n  },\n  icon: {\n    small: {\n      width: size[12],\n      height: size[12],\n      dotRadius: size[2],\n    },\n    medium: {\n      width: size[16],\n      height: size[16],\n      dotRadius: size[3],\n    },\n    large: {\n      width: size[20],\n      height: size[20],\n      dotRadius: size[4],\n    },\n  },\n} as const;\n\ntype ColorTokens = `colors.${DotNotationToken<Theme['colors']>}`;\ntype Variant = {\n  dot: {\n    checked: ColorTokens;\n    unchecked: ColorTokens;\n  };\n  border: {\n    checked: ColorTokens;\n    unchecked: ColorTokens;\n  };\n  background: {\n    checked: ColorTokens;\n    unchecked: ColorTokens;\n  };\n};\n\ntype RadioIconColors = {\n  variants: {\n    default: Variant;\n    disabled: Variant;\n    negative: Variant;\n  };\n};\n\nconst radioIconColors: RadioIconColors = {\n  variants: {\n    default: {\n      dot: {\n        checked: 'colors.interactive.icon.onPrimary.normal',\n        unchecked: 'colors.transparent',\n      },\n      border: {\n        checked: 'colors.interactive.border.primary.default',\n        unchecked: 'colors.interactive.border.gray.default',\n      },\n      background: {\n        checked: 'colors.interactive.background.primary.default',\n        unchecked: 'colors.transparent',\n      },\n    },\n    disabled: {\n      dot: {\n        checked: 'colors.interactive.icon.onPrimary.normal',\n        unchecked: 'colors.interactive.icon.onPrimary.normal',\n      },\n      border: {\n        checked: 'colors.transparent',\n        unchecked: 'colors.interactive.border.gray.disabled',\n      },\n      background: {\n        checked: 'colors.interactive.background.primary.disabled',\n        unchecked: 'colors.transparent',\n      },\n    },\n    negative: {\n      dot: {\n        checked: 'colors.interactive.icon.onPrimary.normal',\n        unchecked: 'colors.transparent',\n      },\n      border: {\n        checked: 'colors.interactive.border.negative.default',\n        unchecked: 'colors.interactive.border.negative.default',\n      },\n      background: {\n        checked: 'colors.interactive.background.negative.default',\n        unchecked: 'colors.transparent',\n      },\n    },\n  },\n} as const;\n\nconst radioHoverTokens: SelectorInputHoverTokens = {\n  default: {\n    background: {\n      checked: 'colors.interactive.background.primary.highlighted',\n      unchecked: 'colors.interactive.background.gray.faded',\n    },\n    border: {\n      checked: 'colors.interactive.background.primary.highlighted', // Intentionally not using border tokens here since we want to match the background color\n      unchecked: 'colors.interactive.border.gray.default',\n    },\n  },\n};\n\nexport { radioSizes, radioIconColors, radioHoverTokens };\n"],"names":["radioSizes","group","gap","small","mobile","desktop","medium","large","icon","width","size","height","dotRadius","radioIconColors","variants","default","dot","checked","unchecked","border","background","disabled","negative","radioHoverTokens"],"mappings":";;;;AAKM,IAAAA,UAAU,CAAG,CACjBC,KAAK,CAAE,CACLC,GAAG,CAAE,CACHC,KAAK,CAAE,CACLC,MAAM,CAAE,WAAW,CACnBC,OAAO,CAAE,WACX,CAAC,CACDC,MAAM,CAAE,CACNF,MAAM,CAAE,WAAW,CACnBC,OAAO,CAAE,WACX,CAAC,CACDE,KAAK,CAAE,CACLH,MAAM,CAAE,WAAW,CACnBC,OAAO,CAAE,WACX,CACF,CACF,CAAC,CACDG,IAAI,CAAE,CACJL,KAAK,CAAE,CACLM,KAAK,CAAEC,IAAI,CAAC,EAAE,CAAC,CACfC,MAAM,CAAED,IAAI,CAAC,EAAE,CAAC,CAChBE,SAAS,CAAEF,IAAI,CAAC,CAAC,CACnB,CAAC,CACDJ,MAAM,CAAE,CACNG,KAAK,CAAEC,IAAI,CAAC,EAAE,CAAC,CACfC,MAAM,CAAED,IAAI,CAAC,EAAE,CAAC,CAChBE,SAAS,CAAEF,IAAI,CAAC,CAAC,CACnB,CAAC,CACDH,KAAK,CAAE,CACLE,KAAK,CAAEC,IAAI,CAAC,EAAE,CAAC,CACfC,MAAM,CAAED,IAAI,CAAC,EAAE,CAAC,CAChBE,SAAS,CAAEF,IAAI,CAAC,CAAC,CACnB,CACF,CACF,EA0BM,IAAAG,eAAgC,CAAG,CACvCC,QAAQ,CAAE,CACRC,OAAO,CAAE,CACPC,GAAG,CAAE,CACHC,OAAO,CAAE,0CAA0C,CACnDC,SAAS,CAAE,oBACb,CAAC,CACDC,MAAM,CAAE,CACNF,OAAO,CAAE,2CAA2C,CACpDC,SAAS,CAAE,wCACb,CAAC,CACDE,UAAU,CAAE,CACVH,OAAO,CAAE,+CAA+C,CACxDC,SAAS,CAAE,oBACb,CACF,CAAC,CACDG,QAAQ,CAAE,CACRL,GAAG,CAAE,CACHC,OAAO,CAAE,0CAA0C,CACnDC,SAAS,CAAE,0CACb,CAAC,CACDC,MAAM,CAAE,CACNF,OAAO,CAAE,oBAAoB,CAC7BC,SAAS,CAAE,yCACb,CAAC,CACDE,UAAU,CAAE,CACVH,OAAO,CAAE,gDAAgD,CACzDC,SAAS,CAAE,oBACb,CACF,CAAC,CACDI,QAAQ,CAAE,CACRN,GAAG,CAAE,CACHC,OAAO,CAAE,0CAA0C,CACnDC,SAAS,CAAE,oBACb,CAAC,CACDC,MAAM,CAAE,CACNF,OAAO,CAAE,4CAA4C,CACrDC,SAAS,CAAE,4CACb,CAAC,CACDE,UAAU,CAAE,CACVH,OAAO,CAAE,gDAAgD,CACzDC,SAAS,CAAE,oBACb,CACF,CACF,CACF,EAEM,IAAAK,gBAA0C,CAAG,CACjDR,OAAO,CAAE,CACPK,UAAU,CAAE,CACVH,OAAO,CAAE,mDAAmD,CAC5DC,SAAS,CAAE,0CACb,CAAC,CACDC,MAAM,CAAE,CACNF,OAAO,CAAE,mDAAmD,CAC5DC,SAAS,CAAE,wCACb,CACF,CACF;;;;"}

package/build/lib/web/development/components/Avatar/AvatarButton.js

@@ -93,7 +93,7 @@ var _AvatarButton = function _AvatarButton(_ref, ref) {
           size: avatarIconSizeTokens[size],
           color: iconColor
         })
-      }) : null, imgProps !== null && imgProps !== void 0 && imgProps.src ? /*#__PURE__*/jsx("img", _objectSpread({}, imgProps)) : null, size === 'xlarge' ? /*#__PURE__*/jsx(Heading, {
+      }) : null, imgProps !== null && imgProps !== void 0 && imgProps.src ? /*#__PURE__*/jsx("img", _objectSpread({}, imgProps)) : null, children ? size === 'xlarge' ? /*#__PURE__*/jsx(Heading, {
         size: avatarTextSizeMapping[size],
         weight: "semibold",
         color: textColor,
@@ -103,7 +103,7 @@ var _AvatarButton = function _AvatarButton(_ref, ref) {
         weight: "semibold",
         color: textColor,
         children: children
-      })]
+      }) : null]
     })
   });
 };

package/build/lib/web/development/components/Avatar/AvatarButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarButton.js","sources":["../../../../../../src/components/Avatar/AvatarButton.tsx"],"sourcesContent":["import React from 'react';\nimport { StyledAvatarButton } from './StyledAvatarButton';\nimport type { AvatarButtonProps } from './types';\nimport { avatarTextSizeMapping, avatarIconSizeTokens } from './avatarTokens';\nimport BaseBox from '~components/Box/BaseBox';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport { Heading, Text } from '~components/Typography';\nimport { getTextColorToken } from '~components/Button/BaseButton/BaseButton';\nimport type { IconColor } from '~components/Button/BaseButton/types';\nimport type { BaseTextProps } from '~components/Typography/BaseText/types';\nimport type { BladeElementRef } from '~utils/types';\n\nconst _AvatarButton: React.ForwardRefRenderFunction<BladeElementRef, AvatarButtonProps> = (\n  {\n    href,\n    target,\n    rel,\n    variant = 'circle',\n    color = 'neutral',\n    size = 'medium',\n    icon: Icon,\n    imgProps,\n    children,\n    onBlur,\n    onFocus,\n    onClick,\n    onMouseLeave,\n    onMouseMove,\n    onMouseDown,\n    onPointerDown,\n    onPointerEnter,\n    onTouchStart,\n    onTouchEnd,\n    isSelected,\n  },\n  ref,\n): React.ReactElement => {\n  const isLink = Boolean(href);\n  const isInteractive = Boolean(onClick || isLink);\n  const as = isInteractive ? (href ? 'a' : 'button') : 'div';\n\n  const defaultRel = target === '_blank' ? 'noreferrer noopener' : undefined;\n  const iconColor = getTextColorToken({\n    property: 'icon',\n    variant: 'secondary',\n    color,\n    state: 'default',\n  }) as IconColor;\n  const textColor = getTextColorToken({\n    property: 'text',\n    variant: 'secondary',\n    color,\n    state: 'default',\n  }) as BaseTextProps['color'];\n\n  return (\n    <StyledAvatarButton\n      ref={ref as never}\n      as={as as never}\n      isInteractive={isInteractive}\n      isSelected={isSelected}\n      size={size}\n      color={color}\n      href={href}\n      variant={variant}\n      target={target}\n      rel={rel ?? defaultRel}\n      accessibilityProps={{\n        ...makeAccessible({\n          role: isInteractive ? (isLink ? 'link' : 'button') : 'presentation',\n        }),\n      }}\n      onBlur={onBlur}\n      onFocus={onFocus}\n      onClick={onClick}\n      onMouseLeave={onMouseLeave}\n      onMouseMove={onMouseMove}\n      onMouseDown={onMouseDown}\n      onPointerDown={onPointerDown}\n      onPointerEnter={onPointerEnter}\n      onTouchStart={onTouchStart}\n      onTouchEnd={onTouchEnd}\n    >\n      <BaseBox\n        display=\"flex\"\n        flexDirection=\"row\"\n        alignItems=\"center\"\n        justifyContent=\"center\"\n        zIndex={1}\n        height=\"100%\"\n      >\n        {Icon ? (\n          <BaseBox display=\"flex\" justifyContent=\"center\" alignItems=\"center\">\n            <Icon size={avatarIconSizeTokens[size]} color={iconColor} />\n          </BaseBox>\n        ) : null}\n\n        {/* eslint-disable-next-line jsx-a11y/alt-text -- alt text is provided in imgProps */}\n        {imgProps?.src ? <img {...imgProps} /> : null}\n\n        {size === 'xlarge' ? (\n          <Heading size={avatarTextSizeMapping[size]} weight=\"semibold\" color={textColor}>\n            {children}\n          </Heading>\n        ) : (\n          <Text size={avatarTextSizeMapping[size]} weight=\"semibold\" color={textColor}>\n            {children}\n          </Text>\n        )}\n      </BaseBox>\n    </StyledAvatarButton>\n  );\n};\n\nconst AvatarButton = React.forwardRef(_AvatarButton);\n\nexport { AvatarButton };\n"],"names":["_AvatarButton","_ref","ref","href","target","rel","_ref$variant","variant","_ref$color","color","_ref$size","size","Icon","icon","imgProps","children","onBlur","onFocus","onClick","onMouseLeave","onMouseMove","onMouseDown","onPointerDown","onPointerEnter","onTouchStart","onTouchEnd","isSelected","isLink","Boolean","isInteractive","as","defaultRel","undefined","iconColor","getTextColorToken","property","state","textColor","_jsx","StyledAvatarButton","accessibilityProps","_objectSpread","makeAccessible","role","_jsxs","BaseBox","display","flexDirection","alignItems","justifyContent","zIndex","height","avatarIconSizeTokens","src","Heading","avatarTextSizeMapping","weight","Text","AvatarButton","React","forwardRef"],"mappings":"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"}
+{"version":3,"file":"AvatarButton.js","sources":["../../../../../../src/components/Avatar/AvatarButton.tsx"],"sourcesContent":["import React from 'react';\nimport { StyledAvatarButton } from './StyledAvatarButton';\nimport type { AvatarButtonProps } from './types';\nimport { avatarTextSizeMapping, avatarIconSizeTokens } from './avatarTokens';\nimport BaseBox from '~components/Box/BaseBox';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport { Heading, Text } from '~components/Typography';\nimport { getTextColorToken } from '~components/Button/BaseButton/BaseButton';\nimport type { IconColor } from '~components/Button/BaseButton/types';\nimport type { BaseTextProps } from '~components/Typography/BaseText/types';\nimport type { BladeElementRef } from '~utils/types';\n\nconst _AvatarButton: React.ForwardRefRenderFunction<BladeElementRef, AvatarButtonProps> = (\n  {\n    href,\n    target,\n    rel,\n    variant = 'circle',\n    color = 'neutral',\n    size = 'medium',\n    icon: Icon,\n    imgProps,\n    children,\n    onBlur,\n    onFocus,\n    onClick,\n    onMouseLeave,\n    onMouseMove,\n    onMouseDown,\n    onPointerDown,\n    onPointerEnter,\n    onTouchStart,\n    onTouchEnd,\n    isSelected,\n  },\n  ref,\n): React.ReactElement => {\n  const isLink = Boolean(href);\n  const isInteractive = Boolean(onClick || isLink);\n  const as = isInteractive ? (href ? 'a' : 'button') : 'div';\n\n  const defaultRel = target === '_blank' ? 'noreferrer noopener' : undefined;\n  const iconColor = getTextColorToken({\n    property: 'icon',\n    variant: 'secondary',\n    color,\n    state: 'default',\n  }) as IconColor;\n  const textColor = getTextColorToken({\n    property: 'text',\n    variant: 'secondary',\n    color,\n    state: 'default',\n  }) as BaseTextProps['color'];\n\n  return (\n    <StyledAvatarButton\n      ref={ref as never}\n      as={as as never}\n      isInteractive={isInteractive}\n      isSelected={isSelected}\n      size={size}\n      color={color}\n      href={href}\n      variant={variant}\n      target={target}\n      rel={rel ?? defaultRel}\n      accessibilityProps={{\n        ...makeAccessible({\n          role: isInteractive ? (isLink ? 'link' : 'button') : 'presentation',\n        }),\n      }}\n      onBlur={onBlur}\n      onFocus={onFocus}\n      onClick={onClick}\n      onMouseLeave={onMouseLeave}\n      onMouseMove={onMouseMove}\n      onMouseDown={onMouseDown}\n      onPointerDown={onPointerDown}\n      onPointerEnter={onPointerEnter}\n      onTouchStart={onTouchStart}\n      onTouchEnd={onTouchEnd}\n    >\n      <BaseBox\n        display=\"flex\"\n        flexDirection=\"row\"\n        alignItems=\"center\"\n        justifyContent=\"center\"\n        zIndex={1}\n        height=\"100%\"\n      >\n        {Icon ? (\n          <BaseBox display=\"flex\" justifyContent=\"center\" alignItems=\"center\">\n            <Icon size={avatarIconSizeTokens[size]} color={iconColor} />\n          </BaseBox>\n        ) : null}\n\n        {/* eslint-disable-next-line jsx-a11y/alt-text -- alt text is provided in imgProps */}\n        {imgProps?.src ? <img {...imgProps} /> : null}\n\n        {children ? (\n          size === 'xlarge' ? (\n            <Heading size={avatarTextSizeMapping[size]} weight=\"semibold\" color={textColor}>\n              {children}\n            </Heading>\n          ) : (\n            <Text size={avatarTextSizeMapping[size]} weight=\"semibold\" color={textColor}>\n              {children}\n            </Text>\n          )\n        ) : null}\n      </BaseBox>\n    </StyledAvatarButton>\n  );\n};\n\nconst AvatarButton = React.forwardRef(_AvatarButton);\n\nexport { AvatarButton };\n"],"names":["_AvatarButton","_ref","ref","href","target","rel","_ref$variant","variant","_ref$color","color","_ref$size","size","Icon","icon","imgProps","children","onBlur","onFocus","onClick","onMouseLeave","onMouseMove","onMouseDown","onPointerDown","onPointerEnter","onTouchStart","onTouchEnd","isSelected","isLink","Boolean","isInteractive","as","defaultRel","undefined","iconColor","getTextColorToken","property","state","textColor","_jsx","StyledAvatarButton","accessibilityProps","_objectSpread","makeAccessible","role","_jsxs","BaseBox","display","flexDirection","alignItems","justifyContent","zIndex","height","avatarIconSizeTokens","src","Heading","avatarTextSizeMapping","weight","Text","AvatarButton","React","forwardRef"],"mappings":"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"}

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

@@ -85,7 +85,7 @@ var _Card = function _Card(_ref, ref) {
     name: CARD_LINK_OVERLAY_ID
   })), makeAccessible({
     label: accessibilityLabel,
-    pressed: isSelected
+    pressed: href ? undefined : isSelected
   })), {}, {
     onFocus: function onFocus() {
       setIsFocused(true);