@razorpay/blade 11.38.1 → 12.0.0

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

@@ -1 +1 @@
-{"version":3,"file":"CardRoot.native.js","sources":["../../../../../src/components/Card/CardRoot.native.tsx"],"sourcesContent":["import React from 'react';\nimport { Linking, Pressable } from 'react-native';\nimport Animated, { useAnimatedStyle, withTiming } from 'react-native-reanimated';\nimport styled from 'styled-components';\nimport type { CardRootProps } from './types';\nimport { CARD_SCALE_DOWN_VALUE } from './constants';\nimport BaseBox from '~components/Box/BaseBox';\nimport { castNativeType, makeMotionTime } from '~utils';\nimport { useTheme } from '~components/BladeProvider';\nimport { logger } from '~utils/logger';\nimport { makeAccessible } from '~utils/makeAccessible/makeAccessible.native';\n\nconst StyledCardRoot = styled(BaseBox)<CardRootProps>(({ isSelected, ...props }) => {\n  const selectedColor = isSelected\n    ? props.theme.colors.surface.border.primary.normal\n    : 'transparent';\n  return {\n    border: `${props.theme.border.width.thicker}px solid ${selectedColor}`,\n  };\n});\n\nconst AnimatedPressable = Animated.createAnimatedComponent(Pressable);\n\nconst openURL = async (href: string): Promise<void> => {\n  try {\n    const canOpen = await Linking.canOpenURL(href);\n    if (canOpen) {\n      await Linking.openURL(href);\n    }\n  } catch {\n    if (__DEV__) {\n      logger({\n        type: 'warn',\n        message: `Could not open the link \"href=${href}\"`,\n        moduleName: 'BaseButton',\n      });\n    }\n  }\n};\n\nconst CardRoot = ({\n  children,\n  onClick,\n  isSelected,\n  shouldScaleOnHover,\n  href,\n  as,\n  accessibilityLabel,\n  ...props\n}: CardRootProps): React.ReactElement => {\n  const { theme } = useTheme();\n  const [isPressed, setIsPressed] = React.useState(false);\n  const duration = castNativeType(makeMotionTime(theme.motion.duration.xquick));\n  const easing = castNativeType(theme.motion.easing.standard.effective);\n\n  const styles = useAnimatedStyle(() => {\n    return {\n      transform: [\n        {\n          // TODO: check with design once what to do on mobile\n          scale: withTiming(isPressed ? CARD_SCALE_DOWN_VALUE : 1, { duration, easing }),\n        },\n      ],\n    };\n  }, [isPressed]);\n\n  if (onClick || shouldScaleOnHover || href) {\n    return (\n      <AnimatedPressable\n        {...makeAccessible({\n          role: href ? 'link' : undefined,\n          label: accessibilityLabel,\n          selected: isSelected,\n        })}\n        style={styles}\n        onPressIn={(event) => {\n          if (onClick) {\n            onClick(event);\n          }\n          setIsPressed(true);\n        }}\n        onPressOut={() => {\n          if (href) {\n            void openURL(href);\n          }\n          setIsPressed(false);\n        }}\n      >\n        <StyledCardRoot as={undefined} isSelected={isSelected} {...props}>\n          {children}\n        </StyledCardRoot>\n      </AnimatedPressable>\n    );\n  }\n\n  return (\n    <StyledCardRoot as={undefined} isSelected={isSelected} {...props}>\n      {children}\n    </StyledCardRoot>\n  );\n};\n\nexport { CardRoot };\n"],"names":["StyledCardRoot","styled","BaseBox","_ref","isSelected","props","_objectWithoutProperties","_excluded","selectedColor","theme","colors","surface","border","primary","normal","width","thicker","AnimatedPressable","Animated","createAnimatedComponent","Pressable","openURL","_ref2","_asyncToGenerator","href","canOpen","Linking","canOpenURL","_unused","__DEV__","logger","type","message","moduleName","_x","apply","arguments","CardRoot","_ref3","children","onClick","shouldScaleOnHover","as","accessibilityLabel","_excluded2","_useTheme","useTheme","_React$useState","React","useState","_React$useState2","_slicedToArray","isPressed","setIsPressed","duration","castNativeType","makeMotionTime","motion","xquick","easing","standard","effective","styles","useAnimatedStyle","transform","scale","withTiming","CARD_SCALE_DOWN_VALUE","_jsx","Object","assign","makeAccessible","role","undefined","label","selected","style","onPressIn","event","onPressOut"],"mappings":"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"}
+{"version":3,"file":"CardRoot.native.js","sources":["../../../../../src/components/Card/CardRoot.native.tsx"],"sourcesContent":["import React from 'react';\nimport { Linking, Pressable } from 'react-native';\nimport Animated, { useAnimatedStyle, withTiming } from 'react-native-reanimated';\nimport styled from 'styled-components';\nimport type { CardRootProps } from './types';\nimport { CARD_SCALE_DOWN_VALUE } from './constants';\nimport BaseBox from '~components/Box/BaseBox';\nimport { castNativeType, makeMotionTime } from '~utils';\nimport { useTheme } from '~components/BladeProvider';\nimport { logger } from '~utils/logger';\nimport { makeAccessible } from '~utils/makeAccessible/makeAccessible.native';\nimport type { BladeElementRef } from '~utils/types';\n\nconst StyledCardRoot = styled(BaseBox)<CardRootProps>(({ isSelected, ...props }) => {\n  const selectedColor = isSelected\n    ? props.theme.colors.surface.border.primary.normal\n    : 'transparent';\n  return {\n    border: `${props.theme.border.width.thicker}px solid ${selectedColor}`,\n  };\n});\n\nconst AnimatedPressable = Animated.createAnimatedComponent(Pressable);\n\nconst openURL = async (href: string): Promise<void> => {\n  try {\n    const canOpen = await Linking.canOpenURL(href);\n    if (canOpen) {\n      await Linking.openURL(href);\n    }\n  } catch {\n    if (__DEV__) {\n      logger({\n        type: 'warn',\n        message: `Could not open the link \"href=${href}\"`,\n        moduleName: 'BaseButton',\n      });\n    }\n  }\n};\n\nconst _CardRoot: React.ForwardRefRenderFunction<BladeElementRef, CardRootProps> = (\n  { children, onClick, isSelected, shouldScaleOnHover, href, as, accessibilityLabel, ...props },\n  ref,\n): React.ReactElement => {\n  const { theme } = useTheme();\n  const [isPressed, setIsPressed] = React.useState(false);\n  const duration = castNativeType(makeMotionTime(theme.motion.duration.xquick));\n  const easing = castNativeType(theme.motion.easing.standard);\n\n  const styles = useAnimatedStyle(() => {\n    return {\n      transform: [\n        {\n          // TODO: check with design once what to do on mobile\n          scale: withTiming(isPressed ? CARD_SCALE_DOWN_VALUE : 1, { duration, easing }),\n        },\n      ],\n    };\n  }, [isPressed]);\n\n  if (onClick || shouldScaleOnHover || href) {\n    return (\n      <AnimatedPressable\n        ref={ref as never}\n        {...makeAccessible({\n          role: href ? 'link' : undefined,\n          label: accessibilityLabel,\n          selected: isSelected,\n        })}\n        style={styles}\n        onPressIn={(event) => {\n          if (onClick) {\n            onClick(event);\n          }\n          setIsPressed(true);\n        }}\n        onPressOut={() => {\n          if (href) {\n            void openURL(href);\n          }\n          setIsPressed(false);\n        }}\n      >\n        <StyledCardRoot as={undefined} isSelected={isSelected} {...props}>\n          {children}\n        </StyledCardRoot>\n      </AnimatedPressable>\n    );\n  }\n\n  return (\n    <StyledCardRoot as={undefined} isSelected={isSelected} {...props}>\n      {children}\n    </StyledCardRoot>\n  );\n};\n\nconst CardRoot = React.forwardRef(_CardRoot);\n\nexport { CardRoot };\n"],"names":["StyledCardRoot","styled","BaseBox","_ref","isSelected","props","_objectWithoutProperties","_excluded","selectedColor","theme","colors","surface","border","primary","normal","width","thicker","AnimatedPressable","Animated","createAnimatedComponent","Pressable","openURL","_ref2","_asyncToGenerator","href","canOpen","Linking","canOpenURL","_unused","__DEV__","logger","type","message","moduleName","_x","apply","arguments","_CardRoot","_ref3","ref","children","onClick","shouldScaleOnHover","as","accessibilityLabel","_excluded2","_useTheme","useTheme","_React$useState","React","useState","_React$useState2","_slicedToArray","isPressed","setIsPressed","duration","castNativeType","makeMotionTime","motion","xquick","easing","standard","styles","useAnimatedStyle","transform","scale","withTiming","CARD_SCALE_DOWN_VALUE","_jsx","Object","assign","makeAccessible","role","undefined","label","selected","style","onPressIn","event","onPressOut","CardRoot","forwardRef"],"mappings":"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"}

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

@@ -20,7 +20,7 @@ import { useDidUpdate } from '../../utils/useDidUpdate.js';
 import { getResponsiveValue } from '../Box/BaseBox/getResponsiveValue.native.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
-var percentageStringToNumber=function percentageStringToNumber(percentage){if(!percentage.endsWith('%')){logger({message:'Only percentage values are allowed',type:'error',moduleName:'Carousel'});}return Number(percentage.substring(0,percentage.length-1))/100;};var Controls=function Controls(_ref){var showIndicators=_ref.showIndicators,activeIndicator=_ref.activeIndicator,totalSlides=_ref.totalSlides,onIndicatorButtonClick=_ref.onIndicatorButtonClick,onNextButtonClick=_ref.onNextButtonClick,onPreviousButtonClick=_ref.onPreviousButtonClick,indicatorVariant=_ref.indicatorVariant,navigationButtonVariant=_ref.navigationButtonVariant;return jsxs(BaseBox,{marginTop:"spacing.7",display:"flex",flexDirection:"row",alignItems:"center",gap:"spacing.4",children:[jsx(BaseBox,{children:jsx(NavigationButton,{type:"previous",variant:navigationButtonVariant,onClick:onPreviousButtonClick})}),showIndicators?jsx(Indicators,{onClick:onIndicatorButtonClick,activeIndex:activeIndicator,totalItems:totalSlides,variant:indicatorVariant}):null,jsx(BaseBox,{children:jsx(NavigationButton,{onClick:onNextButtonClick,type:"next",variant:navigationButtonVariant})})]});};var Carousel=function Carousel(_ref2){var autoPlay=_ref2.autoPlay,_ref2$showIndicators=_ref2.showIndicators,showIndicators=_ref2$showIndicators===void 0?true:_ref2$showIndicators,children=_ref2.children,_ref2$carouselItemWid=_ref2.carouselItemWidth,carouselItemWidth=_ref2$carouselItemWid===void 0?'100%':_ref2$carouselItemWid,accessibilityLabel=_ref2.accessibilityLabel,onChange=_ref2.onChange,_ref2$indicatorVarian=_ref2.indicatorVariant,indicatorVariant=_ref2$indicatorVarian===void 0?'gray':_ref2$indicatorVarian,_ref2$navigationButto=_ref2.navigationButtonVariant,navigationButtonVariant=_ref2$navigationButto===void 0?'filled':_ref2$navigationButto;var containerRef=React__default.useRef(null);var _React$useState=React__default.useState(0),_React$useState2=_slicedToArray(_React$useState,2),activeSlide=_React$useState2[0],setActiveSlide=_React$useState2[1];var _React$useState3=React__default.useState(0),_React$useState4=_slicedToArray(_React$useState3,2),scrollViewWidth=_React$useState4[0],setScrollViewWidth=_React$useState4[1];var _React$useState5=React__default.useState(false),_React$useState6=_slicedToArray(_React$useState5,2),shouldPauseAutoplay=_React$useState6[0],setShouldPauseAutoplay=_React$useState6[1];var id=useId();var _visibleItems=1;var slideWidth=scrollViewWidth*percentageStringToNumber(castNativeType(getResponsiveValue(carouselItemWidth)));var totalNumberOfSlides=React__default.Children.count(children);var goToSlideIndex=function goToSlideIndex(slideIndex){if(!containerRef.current)return;containerRef.current.scrollTo({x:slideIndex*slideWidth,y:0,animated:true});setActiveSlide(slideIndex);};var goToNextSlide=function goToNextSlide(){var slideIndex=activeSlide+1;if(slideIndex>=totalNumberOfSlides){slideIndex=0;}goToSlideIndex(slideIndex);};var goToPreviousSlide=function goToPreviousSlide(){var slideIndex=activeSlide-1;if(activeSlide<=0){slideIndex=totalNumberOfSlides-1;}goToSlideIndex(slideIndex);};var carouselContext=React__default.useMemo(function(){return {isResponsive:false,visibleItems:_visibleItems,carouselItemWidth:carouselItemWidth,carouselId:id,totalNumberOfSlides:totalNumberOfSlides,slideWidth:slideWidth,activeSlide:activeSlide,carouselContainerRef:containerRef,setActiveIndicator:setActiveSlide,carouselItemAlignment:undefined,shouldAddStartEndSpacing:false};},[carouselItemWidth,id,totalNumberOfSlides,slideWidth,activeSlide]);useInterval(function(){goToNextSlide();},{delay:CAROUSEL_AUTOPLAY_INTERVAL,enable:autoPlay&&!shouldPauseAutoplay});useDidUpdate(function(){onChange==null?void 0:onChange(activeSlide);},[activeSlide,onChange]);React__default.useEffect(function(){announce(`Slide ${activeSlide+1} of ${totalNumberOfSlides}`);},[activeSlide,totalNumberOfSlides]);return jsx(CarouselContext.Provider,{value:carouselContext,children:jsxs(BaseBox,{display:"flex",alignItems:"center",flexDirection:"column",children:[jsx(BaseBox,{width:"100%",position:"relative",display:"flex",alignItems:"center",gap:"spacing.4",flexDirection:"row",children:jsx(ScrollView,Object.assign({onScrollBeginDrag:function onScrollBeginDrag(){setShouldPauseAutoplay(true);},onScrollEndDrag:function onScrollEndDrag(){setShouldPauseAutoplay(false);}},makeAccessible({label:accessibilityLabel}),{ref:containerRef,onLayout:function onLayout(e){setScrollViewWidth(e.nativeEvent.layout.width);},onMomentumScrollEnd:function onMomentumScrollEnd(e){var slideIndex=Math.round(e.nativeEvent.contentOffset.x/slideWidth);setActiveSlide(slideIndex);},horizontal:true,snapToAlignment:"start",decelerationRate:"fast",overScrollMode:"never",contentInsetAdjustmentBehavior:"never",automaticallyAdjustContentInsets:false,showsHorizontalScrollIndicator:false,showsVerticalScrollIndicator:false,snapToInterval:slideWidth,contentInset:{left:0,right:0},contentOffset:{x:0,y:0},contentContainerStyle:{paddingVertical:size[10]},children:React__default.Children.map(children,function(child,index){return React__default.cloneElement(child,{index:index,shouldHaveStartSpacing:index===0,shouldHaveEndSpacing:index===totalNumberOfSlides-1});})}))}),jsx(Controls,{totalSlides:totalNumberOfSlides,activeIndicator:activeSlide,showIndicators:showIndicators,onIndicatorButtonClick:goToSlideIndex,onNextButtonClick:goToNextSlide,onPreviousButtonClick:goToPreviousSlide,indicatorVariant:indicatorVariant,navigationButtonVariant:navigationButtonVariant})]})});};
+var percentageStringToNumber=function percentageStringToNumber(percentage){if(!percentage.endsWith('%')){logger({message:'Only percentage values are allowed',type:'error',moduleName:'Carousel'});}return Number(percentage.substring(0,percentage.length-1))/100;};var Controls=function Controls(_ref){var showIndicators=_ref.showIndicators,activeIndicator=_ref.activeIndicator,totalSlides=_ref.totalSlides,onIndicatorButtonClick=_ref.onIndicatorButtonClick,onNextButtonClick=_ref.onNextButtonClick,onPreviousButtonClick=_ref.onPreviousButtonClick,indicatorVariant=_ref.indicatorVariant,navigationButtonVariant=_ref.navigationButtonVariant;return jsxs(BaseBox,{marginTop:"spacing.7",display:"flex",flexDirection:"row",alignItems:"center",gap:"spacing.4",children:[jsx(BaseBox,{children:jsx(NavigationButton,{type:"previous",variant:navigationButtonVariant,onClick:onPreviousButtonClick})}),showIndicators?jsx(Indicators,{onClick:onIndicatorButtonClick,activeIndex:activeIndicator,totalItems:totalSlides,variant:indicatorVariant}):null,jsx(BaseBox,{children:jsx(NavigationButton,{onClick:onNextButtonClick,type:"next",variant:navigationButtonVariant})})]});};var _Carousel=function _Carousel(_ref2,ref){var autoPlay=_ref2.autoPlay,_ref2$showIndicators=_ref2.showIndicators,showIndicators=_ref2$showIndicators===void 0?true:_ref2$showIndicators,children=_ref2.children,_ref2$carouselItemWid=_ref2.carouselItemWidth,carouselItemWidth=_ref2$carouselItemWid===void 0?'100%':_ref2$carouselItemWid,accessibilityLabel=_ref2.accessibilityLabel,onChange=_ref2.onChange,_ref2$indicatorVarian=_ref2.indicatorVariant,indicatorVariant=_ref2$indicatorVarian===void 0?'gray':_ref2$indicatorVarian,_ref2$navigationButto=_ref2.navigationButtonVariant,navigationButtonVariant=_ref2$navigationButto===void 0?'filled':_ref2$navigationButto;var containerRef=React__default.useRef(null);var _React$useState=React__default.useState(0),_React$useState2=_slicedToArray(_React$useState,2),activeSlide=_React$useState2[0],setActiveSlide=_React$useState2[1];var _React$useState3=React__default.useState(0),_React$useState4=_slicedToArray(_React$useState3,2),scrollViewWidth=_React$useState4[0],setScrollViewWidth=_React$useState4[1];var _React$useState5=React__default.useState(false),_React$useState6=_slicedToArray(_React$useState5,2),shouldPauseAutoplay=_React$useState6[0],setShouldPauseAutoplay=_React$useState6[1];var id=useId();var _visibleItems=1;var slideWidth=scrollViewWidth*percentageStringToNumber(castNativeType(getResponsiveValue(carouselItemWidth)));var totalNumberOfSlides=React__default.Children.count(children);var goToSlideIndex=function goToSlideIndex(slideIndex){if(!containerRef.current)return;containerRef.current.scrollTo({x:slideIndex*slideWidth,y:0,animated:true});setActiveSlide(slideIndex);};var goToNextSlide=function goToNextSlide(){var slideIndex=activeSlide+1;if(slideIndex>=totalNumberOfSlides){slideIndex=0;}goToSlideIndex(slideIndex);};var goToPreviousSlide=function goToPreviousSlide(){var slideIndex=activeSlide-1;if(activeSlide<=0){slideIndex=totalNumberOfSlides-1;}goToSlideIndex(slideIndex);};var carouselContext=React__default.useMemo(function(){return {isResponsive:false,visibleItems:_visibleItems,carouselItemWidth:carouselItemWidth,carouselId:id,totalNumberOfSlides:totalNumberOfSlides,slideWidth:slideWidth,activeSlide:activeSlide,carouselContainerRef:containerRef,setActiveIndicator:setActiveSlide,carouselItemAlignment:undefined,shouldAddStartEndSpacing:false};},[carouselItemWidth,id,totalNumberOfSlides,slideWidth,activeSlide]);useInterval(function(){goToNextSlide();},{delay:CAROUSEL_AUTOPLAY_INTERVAL,enable:autoPlay&&!shouldPauseAutoplay});useDidUpdate(function(){onChange==null?void 0:onChange(activeSlide);},[activeSlide,onChange]);React__default.useEffect(function(){announce(`Slide ${activeSlide+1} of ${totalNumberOfSlides}`);},[activeSlide,totalNumberOfSlides]);return jsx(CarouselContext.Provider,{value:carouselContext,children:jsxs(BaseBox,{ref:ref,display:"flex",alignItems:"center",flexDirection:"column",children:[jsx(BaseBox,{width:"100%",position:"relative",display:"flex",alignItems:"center",gap:"spacing.4",flexDirection:"row",children:jsx(ScrollView,Object.assign({onScrollBeginDrag:function onScrollBeginDrag(){setShouldPauseAutoplay(true);},onScrollEndDrag:function onScrollEndDrag(){setShouldPauseAutoplay(false);}},makeAccessible({label:accessibilityLabel}),{ref:containerRef,onLayout:function onLayout(e){setScrollViewWidth(e.nativeEvent.layout.width);},onMomentumScrollEnd:function onMomentumScrollEnd(e){var slideIndex=Math.round(e.nativeEvent.contentOffset.x/slideWidth);setActiveSlide(slideIndex);},horizontal:true,snapToAlignment:"start",decelerationRate:"fast",overScrollMode:"never",contentInsetAdjustmentBehavior:"never",automaticallyAdjustContentInsets:false,showsHorizontalScrollIndicator:false,showsVerticalScrollIndicator:false,snapToInterval:slideWidth,contentInset:{left:0,right:0},contentOffset:{x:0,y:0},contentContainerStyle:{paddingVertical:size[10]},children:React__default.Children.map(children,function(child,index){return React__default.cloneElement(child,{index:index,shouldHaveStartSpacing:index===0,shouldHaveEndSpacing:index===totalNumberOfSlides-1});})}))}),jsx(Controls,{totalSlides:totalNumberOfSlides,activeIndicator:activeSlide,showIndicators:showIndicators,onIndicatorButtonClick:goToSlideIndex,onNextButtonClick:goToNextSlide,onPreviousButtonClick:goToPreviousSlide,indicatorVariant:indicatorVariant,navigationButtonVariant:navigationButtonVariant})]})});};var Carousel=React__default.forwardRef(_Carousel);
 
 export { Carousel };
 //# sourceMappingURL=Carousel.native.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Carousel.native.js","sources":["../../../../../src/components/Carousel/Carousel.native.tsx"],"sourcesContent":["import React from 'react';\nimport { ScrollView } from 'react-native';\nimport { Indicators } from './Indicators/Indicators';\nimport { NavigationButton } from './NavigationButton';\nimport type { CarouselProps } from './types';\nimport type { CarouselContextProps } from './CarouselContext';\nimport { CarouselContext } from './CarouselContext';\nimport { CAROUSEL_AUTOPLAY_INTERVAL } from './constants';\nimport BaseBox from '~components/Box/BaseBox';\nimport { useInterval } from '~utils/useInterval';\nimport { makeAccessible } from '~utils/makeAccessible/makeAccessible.native';\nimport { announce } from '~components/LiveAnnouncer/LiveAnnouncer.native';\nimport { castNativeType } from '~utils';\nimport { useId } from '~utils/useId';\nimport { logger } from '~utils/logger';\nimport { size } from '~tokens/global';\nimport { useDidUpdate } from '~utils/useDidUpdate';\nimport { getResponsiveValue } from '~components/Box/BaseBox/getResponsiveValue';\n\nconst percentageStringToNumber = (percentage: string): number => {\n  if (!percentage.endsWith('%')) {\n    logger({\n      message: 'Only percentage values are allowed',\n      type: 'error',\n      moduleName: 'Carousel',\n    });\n  }\n\n  return Number(percentage.substring(0, percentage.length - 1)) / 100;\n};\n\ntype ControlsProps = Required<\n  Pick<CarouselProps, 'indicatorVariant' | 'showIndicators' | 'navigationButtonVariant'>\n> & {\n  activeIndicator: number;\n  totalSlides: number;\n  onIndicatorButtonClick: (index: number) => void;\n  onNextButtonClick: () => void;\n  onPreviousButtonClick: () => void;\n};\n\nconst Controls = ({\n  showIndicators,\n  activeIndicator,\n  totalSlides,\n  onIndicatorButtonClick,\n  onNextButtonClick,\n  onPreviousButtonClick,\n  indicatorVariant,\n  navigationButtonVariant,\n}: ControlsProps): React.ReactElement => {\n  return (\n    <BaseBox\n      marginTop=\"spacing.7\"\n      display=\"flex\"\n      flexDirection=\"row\"\n      alignItems=\"center\"\n      gap=\"spacing.4\"\n    >\n      <BaseBox>\n        <NavigationButton\n          type=\"previous\"\n          variant={navigationButtonVariant}\n          onClick={onPreviousButtonClick}\n        />\n      </BaseBox>\n      {showIndicators ? (\n        <Indicators\n          onClick={onIndicatorButtonClick}\n          activeIndex={activeIndicator}\n          totalItems={totalSlides}\n          variant={indicatorVariant}\n        />\n      ) : null}\n      <BaseBox>\n        <NavigationButton\n          onClick={onNextButtonClick}\n          type=\"next\"\n          variant={navigationButtonVariant}\n        />\n      </BaseBox>\n    </BaseBox>\n  );\n};\n\nconst Carousel = ({\n  autoPlay,\n  showIndicators = true,\n  children,\n  carouselItemWidth = '100%',\n  accessibilityLabel,\n  onChange,\n  indicatorVariant = 'gray',\n  navigationButtonVariant = 'filled',\n}: CarouselProps): React.ReactElement => {\n  const containerRef = React.useRef<ScrollView>(null);\n  const [activeSlide, setActiveSlide] = React.useState(0);\n  const [scrollViewWidth, setScrollViewWidth] = React.useState(0);\n  const [shouldPauseAutoplay, setShouldPauseAutoplay] = React.useState(false);\n  const id = useId();\n\n  const _visibleItems = 1;\n  const slideWidth =\n    scrollViewWidth *\n    percentageStringToNumber(castNativeType(getResponsiveValue(carouselItemWidth)));\n  const totalNumberOfSlides = React.Children.count(children);\n\n  const goToSlideIndex = (slideIndex: number): void => {\n    if (!containerRef.current) return;\n    containerRef.current.scrollTo({\n      x: slideIndex * slideWidth,\n      y: 0,\n      animated: true,\n    });\n    setActiveSlide(slideIndex);\n  };\n\n  const goToNextSlide = (): void => {\n    let slideIndex = activeSlide + 1;\n    if (slideIndex >= totalNumberOfSlides) {\n      slideIndex = 0;\n    }\n    goToSlideIndex(slideIndex);\n  };\n\n  const goToPreviousSlide = (): void => {\n    let slideIndex = activeSlide - 1;\n    if (activeSlide <= 0) {\n      slideIndex = totalNumberOfSlides - 1;\n    }\n    goToSlideIndex(slideIndex);\n  };\n\n  const carouselContext = React.useMemo<CarouselContextProps>(() => {\n    return {\n      isResponsive: false,\n      visibleItems: _visibleItems,\n      carouselItemWidth,\n      carouselId: id,\n      totalNumberOfSlides,\n      slideWidth,\n      activeSlide,\n      carouselContainerRef: containerRef as never,\n      setActiveIndicator: setActiveSlide,\n      carouselItemAlignment: undefined,\n      shouldAddStartEndSpacing: false,\n    };\n  }, [carouselItemWidth, id, totalNumberOfSlides, slideWidth, activeSlide]);\n\n  // auto play\n  useInterval(\n    () => {\n      goToNextSlide();\n    },\n    {\n      delay: CAROUSEL_AUTOPLAY_INTERVAL,\n      // only enable if autoplay is true & user's intent isn't to interact with carousel\n      enable: autoPlay && !shouldPauseAutoplay,\n    },\n  );\n\n  useDidUpdate(() => {\n    onChange?.(activeSlide);\n  }, [activeSlide, onChange]);\n\n  React.useEffect(() => {\n    announce(`Slide ${activeSlide + 1} of ${totalNumberOfSlides}`);\n  }, [activeSlide, totalNumberOfSlides]);\n\n  return (\n    <CarouselContext.Provider value={carouselContext}>\n      <BaseBox display=\"flex\" alignItems=\"center\" flexDirection=\"column\">\n        <BaseBox\n          width=\"100%\"\n          position=\"relative\"\n          display=\"flex\"\n          alignItems=\"center\"\n          gap=\"spacing.4\"\n          flexDirection=\"row\"\n        >\n          <ScrollView\n            onScrollBeginDrag={() => {\n              setShouldPauseAutoplay(true);\n            }}\n            onScrollEndDrag={() => {\n              setShouldPauseAutoplay(false);\n            }}\n            {...makeAccessible({ label: accessibilityLabel })}\n            ref={containerRef}\n            onLayout={(e) => {\n              setScrollViewWidth(e.nativeEvent.layout.width);\n            }}\n            // Sync active indicator with scroll\n            onMomentumScrollEnd={(e) => {\n              const slideIndex = Math.round(e.nativeEvent.contentOffset.x / slideWidth);\n              setActiveSlide(slideIndex);\n            }}\n            // https://dev.to/reime005/horizontal-card-carousel-in-react-native-303n\n            horizontal\n            snapToAlignment=\"start\"\n            decelerationRate=\"fast\"\n            overScrollMode=\"never\"\n            contentInsetAdjustmentBehavior=\"never\"\n            automaticallyAdjustContentInsets={false}\n            showsHorizontalScrollIndicator={false}\n            showsVerticalScrollIndicator={false}\n            snapToInterval={slideWidth}\n            contentInset={{\n              left: 0,\n              right: 0,\n            }}\n            contentOffset={{ x: 0, y: 0 }}\n            // adding some padding so that if a card is placed the shadows don't cut off\n            contentContainerStyle={{ paddingVertical: size[10] }}\n          >\n            {React.Children.map(children, (child, index) => {\n              return React.cloneElement(child as React.ReactElement, {\n                index,\n                shouldHaveStartSpacing: index === 0,\n                shouldHaveEndSpacing: index === totalNumberOfSlides - 1,\n              });\n            })}\n          </ScrollView>\n        </BaseBox>\n        <Controls\n          totalSlides={totalNumberOfSlides}\n          activeIndicator={activeSlide}\n          showIndicators={showIndicators}\n          onIndicatorButtonClick={goToSlideIndex}\n          onNextButtonClick={goToNextSlide}\n          onPreviousButtonClick={goToPreviousSlide}\n          indicatorVariant={indicatorVariant}\n          navigationButtonVariant={navigationButtonVariant}\n        />\n      </BaseBox>\n    </CarouselContext.Provider>\n  );\n};\n\nexport { Carousel };\n"],"names":["percentageStringToNumber","percentage","endsWith","logger","message","type","moduleName","Number","substring","length","Controls","_ref","showIndicators","activeIndicator","totalSlides","onIndicatorButtonClick","onNextButtonClick","onPreviousButtonClick","indicatorVariant","navigationButtonVariant","_jsxs","BaseBox","marginTop","display","flexDirection","alignItems","gap","children","_jsx","NavigationButton","variant","onClick","Indicators","activeIndex","totalItems","Carousel","_ref2","autoPlay","_ref2$showIndicators","_ref2$carouselItemWid","carouselItemWidth","accessibilityLabel","onChange","_ref2$indicatorVarian","_ref2$navigationButto","containerRef","React","useRef","_React$useState","useState","_React$useState2","_slicedToArray","activeSlide","setActiveSlide","_React$useState3","_React$useState4","scrollViewWidth","setScrollViewWidth","_React$useState5","_React$useState6","shouldPauseAutoplay","setShouldPauseAutoplay","id","useId","_visibleItems","slideWidth","castNativeType","getResponsiveValue","totalNumberOfSlides","Children","count","goToSlideIndex","slideIndex","current","scrollTo","x","y","animated","goToNextSlide","goToPreviousSlide","carouselContext","useMemo","isResponsive","visibleItems","carouselId","carouselContainerRef","setActiveIndicator","carouselItemAlignment","undefined","shouldAddStartEndSpacing","useInterval","delay","CAROUSEL_AUTOPLAY_INTERVAL","enable","useDidUpdate","useEffect","announce","CarouselContext","Provider","value","width","position","ScrollView","Object","assign","onScrollBeginDrag","onScrollEndDrag","makeAccessible","label","ref","onLayout","e","nativeEvent","layout","onMomentumScrollEnd","Math","round","contentOffset","horizontal","snapToAlignment","decelerationRate","overScrollMode","contentInsetAdjustmentBehavior","automaticallyAdjustContentInsets","showsHorizontalScrollIndicator","showsVerticalScrollIndicator","snapToInterval","contentInset","left","right","contentContainerStyle","paddingVertical","size","map","child","index","cloneElement","shouldHaveStartSpacing","shouldHaveEndSpacing"],"mappings":"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"}
+{"version":3,"file":"Carousel.native.js","sources":["../../../../../src/components/Carousel/Carousel.native.tsx"],"sourcesContent":["import React from 'react';\nimport { ScrollView } from 'react-native';\nimport { Indicators } from './Indicators/Indicators';\nimport { NavigationButton } from './NavigationButton';\nimport type { CarouselProps } from './types';\nimport type { CarouselContextProps } from './CarouselContext';\nimport { CarouselContext } from './CarouselContext';\nimport { CAROUSEL_AUTOPLAY_INTERVAL } from './constants';\nimport BaseBox from '~components/Box/BaseBox';\nimport { useInterval } from '~utils/useInterval';\nimport { makeAccessible } from '~utils/makeAccessible/makeAccessible.native';\nimport { announce } from '~components/LiveAnnouncer/LiveAnnouncer.native';\nimport { castNativeType } from '~utils';\nimport { useId } from '~utils/useId';\nimport { logger } from '~utils/logger';\nimport { size } from '~tokens/global';\nimport { useDidUpdate } from '~utils/useDidUpdate';\nimport { getResponsiveValue } from '~components/Box/BaseBox/getResponsiveValue';\nimport type { BladeElementRef } from '~utils/types';\n\nconst percentageStringToNumber = (percentage: string): number => {\n  if (!percentage.endsWith('%')) {\n    logger({\n      message: 'Only percentage values are allowed',\n      type: 'error',\n      moduleName: 'Carousel',\n    });\n  }\n\n  return Number(percentage.substring(0, percentage.length - 1)) / 100;\n};\n\ntype ControlsProps = Required<\n  Pick<CarouselProps, 'indicatorVariant' | 'showIndicators' | 'navigationButtonVariant'>\n> & {\n  activeIndicator: number;\n  totalSlides: number;\n  onIndicatorButtonClick: (index: number) => void;\n  onNextButtonClick: () => void;\n  onPreviousButtonClick: () => void;\n};\n\nconst Controls = ({\n  showIndicators,\n  activeIndicator,\n  totalSlides,\n  onIndicatorButtonClick,\n  onNextButtonClick,\n  onPreviousButtonClick,\n  indicatorVariant,\n  navigationButtonVariant,\n}: ControlsProps): React.ReactElement => {\n  return (\n    <BaseBox\n      marginTop=\"spacing.7\"\n      display=\"flex\"\n      flexDirection=\"row\"\n      alignItems=\"center\"\n      gap=\"spacing.4\"\n    >\n      <BaseBox>\n        <NavigationButton\n          type=\"previous\"\n          variant={navigationButtonVariant}\n          onClick={onPreviousButtonClick}\n        />\n      </BaseBox>\n      {showIndicators ? (\n        <Indicators\n          onClick={onIndicatorButtonClick}\n          activeIndex={activeIndicator}\n          totalItems={totalSlides}\n          variant={indicatorVariant}\n        />\n      ) : null}\n      <BaseBox>\n        <NavigationButton\n          onClick={onNextButtonClick}\n          type=\"next\"\n          variant={navigationButtonVariant}\n        />\n      </BaseBox>\n    </BaseBox>\n  );\n};\n\nconst _Carousel = (\n  {\n    autoPlay,\n    showIndicators = true,\n    children,\n    carouselItemWidth = '100%',\n    accessibilityLabel,\n    onChange,\n    indicatorVariant = 'gray',\n    navigationButtonVariant = 'filled',\n  }: CarouselProps,\n  ref: React.Ref<BladeElementRef>,\n): React.ReactElement => {\n  const containerRef = React.useRef<ScrollView>(null);\n  const [activeSlide, setActiveSlide] = React.useState(0);\n  const [scrollViewWidth, setScrollViewWidth] = React.useState(0);\n  const [shouldPauseAutoplay, setShouldPauseAutoplay] = React.useState(false);\n  const id = useId();\n\n  const _visibleItems = 1;\n  const slideWidth =\n    scrollViewWidth *\n    percentageStringToNumber(castNativeType(getResponsiveValue(carouselItemWidth)));\n  const totalNumberOfSlides = React.Children.count(children);\n\n  const goToSlideIndex = (slideIndex: number): void => {\n    if (!containerRef.current) return;\n    containerRef.current.scrollTo({\n      x: slideIndex * slideWidth,\n      y: 0,\n      animated: true,\n    });\n    setActiveSlide(slideIndex);\n  };\n\n  const goToNextSlide = (): void => {\n    let slideIndex = activeSlide + 1;\n    if (slideIndex >= totalNumberOfSlides) {\n      slideIndex = 0;\n    }\n    goToSlideIndex(slideIndex);\n  };\n\n  const goToPreviousSlide = (): void => {\n    let slideIndex = activeSlide - 1;\n    if (activeSlide <= 0) {\n      slideIndex = totalNumberOfSlides - 1;\n    }\n    goToSlideIndex(slideIndex);\n  };\n\n  const carouselContext = React.useMemo<CarouselContextProps>(() => {\n    return {\n      isResponsive: false,\n      visibleItems: _visibleItems,\n      carouselItemWidth,\n      carouselId: id,\n      totalNumberOfSlides,\n      slideWidth,\n      activeSlide,\n      carouselContainerRef: containerRef as never,\n      setActiveIndicator: setActiveSlide,\n      carouselItemAlignment: undefined,\n      shouldAddStartEndSpacing: false,\n    };\n  }, [carouselItemWidth, id, totalNumberOfSlides, slideWidth, activeSlide]);\n\n  // auto play\n  useInterval(\n    () => {\n      goToNextSlide();\n    },\n    {\n      delay: CAROUSEL_AUTOPLAY_INTERVAL,\n      // only enable if autoplay is true & user's intent isn't to interact with carousel\n      enable: autoPlay && !shouldPauseAutoplay,\n    },\n  );\n\n  useDidUpdate(() => {\n    onChange?.(activeSlide);\n  }, [activeSlide, onChange]);\n\n  React.useEffect(() => {\n    announce(`Slide ${activeSlide + 1} of ${totalNumberOfSlides}`);\n  }, [activeSlide, totalNumberOfSlides]);\n\n  return (\n    <CarouselContext.Provider value={carouselContext}>\n      <BaseBox ref={ref as never} display=\"flex\" alignItems=\"center\" flexDirection=\"column\">\n        <BaseBox\n          width=\"100%\"\n          position=\"relative\"\n          display=\"flex\"\n          alignItems=\"center\"\n          gap=\"spacing.4\"\n          flexDirection=\"row\"\n        >\n          <ScrollView\n            onScrollBeginDrag={() => {\n              setShouldPauseAutoplay(true);\n            }}\n            onScrollEndDrag={() => {\n              setShouldPauseAutoplay(false);\n            }}\n            {...makeAccessible({ label: accessibilityLabel })}\n            ref={containerRef}\n            onLayout={(e) => {\n              setScrollViewWidth(e.nativeEvent.layout.width);\n            }}\n            // Sync active indicator with scroll\n            onMomentumScrollEnd={(e) => {\n              const slideIndex = Math.round(e.nativeEvent.contentOffset.x / slideWidth);\n              setActiveSlide(slideIndex);\n            }}\n            // https://dev.to/reime005/horizontal-card-carousel-in-react-native-303n\n            horizontal\n            snapToAlignment=\"start\"\n            decelerationRate=\"fast\"\n            overScrollMode=\"never\"\n            contentInsetAdjustmentBehavior=\"never\"\n            automaticallyAdjustContentInsets={false}\n            showsHorizontalScrollIndicator={false}\n            showsVerticalScrollIndicator={false}\n            snapToInterval={slideWidth}\n            contentInset={{\n              left: 0,\n              right: 0,\n            }}\n            contentOffset={{ x: 0, y: 0 }}\n            // adding some padding so that if a card is placed the shadows don't cut off\n            contentContainerStyle={{ paddingVertical: size[10] }}\n          >\n            {React.Children.map(children, (child, index) => {\n              return React.cloneElement(child as React.ReactElement, {\n                index,\n                shouldHaveStartSpacing: index === 0,\n                shouldHaveEndSpacing: index === totalNumberOfSlides - 1,\n              });\n            })}\n          </ScrollView>\n        </BaseBox>\n        <Controls\n          totalSlides={totalNumberOfSlides}\n          activeIndicator={activeSlide}\n          showIndicators={showIndicators}\n          onIndicatorButtonClick={goToSlideIndex}\n          onNextButtonClick={goToNextSlide}\n          onPreviousButtonClick={goToPreviousSlide}\n          indicatorVariant={indicatorVariant}\n          navigationButtonVariant={navigationButtonVariant}\n        />\n      </BaseBox>\n    </CarouselContext.Provider>\n  );\n};\n\nconst Carousel = React.forwardRef(_Carousel);\n\nexport { Carousel };\n"],"names":["percentageStringToNumber","percentage","endsWith","logger","message","type","moduleName","Number","substring","length","Controls","_ref","showIndicators","activeIndicator","totalSlides","onIndicatorButtonClick","onNextButtonClick","onPreviousButtonClick","indicatorVariant","navigationButtonVariant","_jsxs","BaseBox","marginTop","display","flexDirection","alignItems","gap","children","_jsx","NavigationButton","variant","onClick","Indicators","activeIndex","totalItems","_Carousel","_ref2","ref","autoPlay","_ref2$showIndicators","_ref2$carouselItemWid","carouselItemWidth","accessibilityLabel","onChange","_ref2$indicatorVarian","_ref2$navigationButto","containerRef","React","useRef","_React$useState","useState","_React$useState2","_slicedToArray","activeSlide","setActiveSlide","_React$useState3","_React$useState4","scrollViewWidth","setScrollViewWidth","_React$useState5","_React$useState6","shouldPauseAutoplay","setShouldPauseAutoplay","id","useId","_visibleItems","slideWidth","castNativeType","getResponsiveValue","totalNumberOfSlides","Children","count","goToSlideIndex","slideIndex","current","scrollTo","x","y","animated","goToNextSlide","goToPreviousSlide","carouselContext","useMemo","isResponsive","visibleItems","carouselId","carouselContainerRef","setActiveIndicator","carouselItemAlignment","undefined","shouldAddStartEndSpacing","useInterval","delay","CAROUSEL_AUTOPLAY_INTERVAL","enable","useDidUpdate","useEffect","announce","CarouselContext","Provider","value","width","position","ScrollView","Object","assign","onScrollBeginDrag","onScrollEndDrag","makeAccessible","label","onLayout","e","nativeEvent","layout","onMomentumScrollEnd","Math","round","contentOffset","horizontal","snapToAlignment","decelerationRate","overScrollMode","contentInsetAdjustmentBehavior","automaticallyAdjustContentInsets","showsHorizontalScrollIndicator","showsVerticalScrollIndicator","snapToInterval","contentInset","left","right","contentContainerStyle","paddingVertical","size","map","child","index","cloneElement","shouldHaveStartSpacing","shouldHaveEndSpacing","Carousel","forwardRef"],"mappings":"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"}

package/build/lib/native/components/Carousel/Indicators/StyledIndicatorButton.native.js

@@ -17,7 +17,7 @@ import '../../../tokens/global/typography.js';
 import '../../../tokens/global/motion.js';
 import { size } from '../../../tokens/global/size.js';
 
-var _excluded=["onClick","accessibilityLabel"];var PressableIndicatorButton=styled(BaseBox)(function(_ref){var theme=_ref.theme,isActive=_ref.isActive,variant=_ref.variant;return getIndicatorButtonStyles({theme:theme,isActive:isActive,variant:variant});});var StyledIndicatorButton=function StyledIndicatorButton(_ref2){var onClick=_ref2.onClick,accessibilityLabel=_ref2.accessibilityLabel,props=_objectWithoutProperties(_ref2,_excluded);var _useTheme=useTheme(),theme=_useTheme.theme;var easing=castNativeType(theme.motion.easing.standard.effective);var duration=castNativeType(makeMotionTime(theme.motion.duration.gentle));var style=useAnimatedStyle(function(){return {width:withTiming(props.isActive?size[18]:size[6],{duration:duration,easing:easing})};},[props.isActive]);return jsx(Pressable,{onPress:onClick,accessibilityLabel:accessibilityLabel,children:jsx(PressableIndicatorButton,Object.assign({},props,{children:jsx(Animated.View,{style:style})}))});};
+var _excluded=["onClick","accessibilityLabel"];var PressableIndicatorButton=styled(BaseBox)(function(_ref){var theme=_ref.theme,isActive=_ref.isActive,variant=_ref.variant;return getIndicatorButtonStyles({theme:theme,isActive:isActive,variant:variant});});var StyledIndicatorButton=function StyledIndicatorButton(_ref2){var onClick=_ref2.onClick,accessibilityLabel=_ref2.accessibilityLabel,props=_objectWithoutProperties(_ref2,_excluded);var _useTheme=useTheme(),theme=_useTheme.theme;var easing=castNativeType(theme.motion.easing.standard);var duration=castNativeType(makeMotionTime(theme.motion.duration.gentle));var style=useAnimatedStyle(function(){return {width:withTiming(props.isActive?size[18]:size[6],{duration:duration,easing:easing})};},[props.isActive]);return jsx(Pressable,{onPress:onClick,accessibilityLabel:accessibilityLabel,children:jsx(PressableIndicatorButton,Object.assign({},props,{children:jsx(Animated.View,{style:style})}))});};
 
 export { StyledIndicatorButton };
 //# sourceMappingURL=StyledIndicatorButton.native.js.map

package/build/lib/native/components/Carousel/Indicators/StyledIndicatorButton.native.js.map

@@ -1 +1 @@
-{"version":3,"file":"StyledIndicatorButton.native.js","sources":["../../../../../../src/components/Carousel/Indicators/StyledIndicatorButton.native.tsx"],"sourcesContent":["import React from 'react';\nimport { Pressable } from 'react-native';\nimport styled from 'styled-components/native';\nimport Animated, { useAnimatedStyle, withTiming } from 'react-native-reanimated';\nimport { getIndicatorButtonStyles } from './getIndicatorButtonStyles';\nimport type { IndicatorButtonProps } from './types';\nimport BaseBox from '~components/Box/BaseBox';\nimport { castNativeType, makeMotionTime } from '~utils';\nimport { useTheme } from '~components/BladeProvider';\nimport { size } from '~tokens/global';\n\nconst PressableIndicatorButton = styled(BaseBox)<\n  Pick<IndicatorButtonProps, 'variant' | 'isActive'>\n>(({ theme, isActive, variant }) => {\n  return getIndicatorButtonStyles({ theme, isActive, variant });\n});\n\nconst StyledIndicatorButton = ({\n  onClick,\n  accessibilityLabel,\n  ...props\n}: IndicatorButtonProps & { accessibilityLabel?: string }): React.ReactElement => {\n  const { theme } = useTheme();\n  const easing = castNativeType(theme.motion.easing.standard.effective);\n  const duration = castNativeType(makeMotionTime(theme.motion.duration.gentle));\n\n  const style = useAnimatedStyle(() => {\n    return {\n      width: withTiming(props.isActive ? size[18] : size[6], {\n        duration,\n        easing,\n      }),\n    };\n  }, [props.isActive]);\n\n  return (\n    <Pressable onPress={onClick} accessibilityLabel={accessibilityLabel}>\n      <PressableIndicatorButton {...props}>\n        <Animated.View style={style} />\n      </PressableIndicatorButton>\n    </Pressable>\n  );\n};\n\nexport { StyledIndicatorButton };\n"],"names":["PressableIndicatorButton","styled","BaseBox","_ref","theme","isActive","variant","getIndicatorButtonStyles","StyledIndicatorButton","_ref2","onClick","accessibilityLabel","props","_objectWithoutProperties","_excluded","_useTheme","useTheme","easing","castNativeType","motion","standard","effective","duration","makeMotionTime","gentle","style","useAnimatedStyle","width","withTiming","size","_jsx","Pressable","onPress","children","Object","assign","Animated","View"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA,IAAA,SAAA,CAAA,CAAA,SAAA,CAAA,oBAAA,CAAA,CAWA,IAAMA,wBAAwB,CAAGC,MAAM,CAACC,OAAO,CAAC,CAE9C,SAAAC,IAAA,CAAkC,CAA/B,IAAAC,KAAK,CAAAD,IAAA,CAALC,KAAK,CAAEC,QAAQ,CAAAF,IAAA,CAARE,QAAQ,CAAEC,OAAO,CAAAH,IAAA,CAAPG,OAAO,CAC3B,OAAOC,wBAAwB,CAAC,CAAEH,KAAK,CAALA,KAAK,CAAEC,QAAQ,CAARA,QAAQ,CAAEC,OAAO,CAAPA,OAAQ,CAAC,CAAC,CAC/D,CAAC,CAAC,CAEI,IAAAE,qBAAqB,CAAG,SAAxBA,qBAAqBA,CAAAC,KAAA,CAIuD,CAAA,IAHhFC,OAAO,CAAAD,KAAA,CAAPC,OAAO,CACPC,kBAAkB,CAAAF,KAAA,CAAlBE,kBAAkB,CACfC,KAAK,CAAAC,wBAAA,CAAAJ,KAAA,CAAAK,SAAA,CAER,CAAA,IAAAC,SAAA,CAAkBC,QAAQ,EAAE,CAApBZ,KAAK,CAAAW,SAAA,CAALX,KAAK,CACb,IAAMa,MAAM,CAAGC,cAAc,CAACd,KAAK,CAACe,MAAM,CAACF,MAAM,CAACG,QAAQ,CAACC,SAAS,CAAC,CACrE,IAAMC,QAAQ,CAAGJ,cAAc,CAACK,cAAc,CAACnB,KAAK,CAACe,MAAM,CAACG,QAAQ,CAACE,MAAM,CAAC,CAAC,CAE7E,IAAMC,KAAK,CAAGC,gBAAgB,CAAC,UAAM,CACnC,OAAO,CACLC,KAAK,CAAEC,UAAU,CAAChB,KAAK,CAACP,QAAQ,CAAGwB,IAAI,CAAC,EAAE,CAAC,CAAGA,IAAI,CAAC,CAAC,CAAC,CAAE,CACrDP,QAAQ,CAARA,QAAQ,CACRL,MAAM,CAANA,MACF,CAAC,CACH,CAAC,CACH,CAAC,CAAE,CAACL,KAAK,CAACP,QAAQ,CAAC,CAAC,CAEpB,OACEyB,GAAA,CAACC,SAAS,CAAA,CAACC,OAAO,CAAEtB,OAAQ,CAACC,kBAAkB,CAAEA,kBAAmB,CAAAsB,QAAA,CAClEH,GAAA,CAAC9B,wBAAwB,CAAAkC,MAAA,CAAAC,MAAA,CAAA,EAAA,CAAKvB,KAAK,CAAA,CAAAqB,QAAA,CACjCH,GAAA,CAACM,QAAQ,CAACC,IAAI,CAACZ,CAAAA,KAAK,CAAEA,KAAM,CAAE,CAAC,CAAA,CACP,CAAC,CAClB,CAAC,CAEhB;;;;"}
+{"version":3,"file":"StyledIndicatorButton.native.js","sources":["../../../../../../src/components/Carousel/Indicators/StyledIndicatorButton.native.tsx"],"sourcesContent":["import React from 'react';\nimport { Pressable } from 'react-native';\nimport styled from 'styled-components/native';\nimport Animated, { useAnimatedStyle, withTiming } from 'react-native-reanimated';\nimport { getIndicatorButtonStyles } from './getIndicatorButtonStyles';\nimport type { IndicatorButtonProps } from './types';\nimport BaseBox from '~components/Box/BaseBox';\nimport { castNativeType, makeMotionTime } from '~utils';\nimport { useTheme } from '~components/BladeProvider';\nimport { size } from '~tokens/global';\n\nconst PressableIndicatorButton = styled(BaseBox)<\n  Pick<IndicatorButtonProps, 'variant' | 'isActive'>\n>(({ theme, isActive, variant }) => {\n  return getIndicatorButtonStyles({ theme, isActive, variant });\n});\n\nconst StyledIndicatorButton = ({\n  onClick,\n  accessibilityLabel,\n  ...props\n}: IndicatorButtonProps & { accessibilityLabel?: string }): React.ReactElement => {\n  const { theme } = useTheme();\n  const easing = castNativeType(theme.motion.easing.standard);\n  const duration = castNativeType(makeMotionTime(theme.motion.duration.gentle));\n\n  const style = useAnimatedStyle(() => {\n    return {\n      width: withTiming(props.isActive ? size[18] : size[6], {\n        duration,\n        easing,\n      }),\n    };\n  }, [props.isActive]);\n\n  return (\n    <Pressable onPress={onClick} accessibilityLabel={accessibilityLabel}>\n      <PressableIndicatorButton {...props}>\n        <Animated.View style={style} />\n      </PressableIndicatorButton>\n    </Pressable>\n  );\n};\n\nexport { StyledIndicatorButton };\n"],"names":["PressableIndicatorButton","styled","BaseBox","_ref","theme","isActive","variant","getIndicatorButtonStyles","StyledIndicatorButton","_ref2","onClick","accessibilityLabel","props","_objectWithoutProperties","_excluded","_useTheme","useTheme","easing","castNativeType","motion","standard","duration","makeMotionTime","gentle","style","useAnimatedStyle","width","withTiming","size","_jsx","Pressable","onPress","children","Object","assign","Animated","View"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA,IAAA,SAAA,CAAA,CAAA,SAAA,CAAA,oBAAA,CAAA,CAWA,IAAMA,wBAAwB,CAAGC,MAAM,CAACC,OAAO,CAAC,CAE9C,SAAAC,IAAA,CAAkC,CAA/B,IAAAC,KAAK,CAAAD,IAAA,CAALC,KAAK,CAAEC,QAAQ,CAAAF,IAAA,CAARE,QAAQ,CAAEC,OAAO,CAAAH,IAAA,CAAPG,OAAO,CAC3B,OAAOC,wBAAwB,CAAC,CAAEH,KAAK,CAALA,KAAK,CAAEC,QAAQ,CAARA,QAAQ,CAAEC,OAAO,CAAPA,OAAQ,CAAC,CAAC,CAC/D,CAAC,CAAC,CAEI,IAAAE,qBAAqB,CAAG,SAAxBA,qBAAqBA,CAAAC,KAAA,CAIuD,CAHhF,IAAAC,OAAO,CAAAD,KAAA,CAAPC,OAAO,CACPC,kBAAkB,CAAAF,KAAA,CAAlBE,kBAAkB,CACfC,KAAK,CAAAC,wBAAA,CAAAJ,KAAA,CAAAK,SAAA,CAAA,CAER,IAAAC,SAAA,CAAkBC,QAAQ,EAAE,CAApBZ,KAAK,CAAAW,SAAA,CAALX,KAAK,CACb,IAAMa,MAAM,CAAGC,cAAc,CAACd,KAAK,CAACe,MAAM,CAACF,MAAM,CAACG,QAAQ,CAAC,CAC3D,IAAMC,QAAQ,CAAGH,cAAc,CAACI,cAAc,CAAClB,KAAK,CAACe,MAAM,CAACE,QAAQ,CAACE,MAAM,CAAC,CAAC,CAE7E,IAAMC,KAAK,CAAGC,gBAAgB,CAAC,UAAM,CACnC,OAAO,CACLC,KAAK,CAAEC,UAAU,CAACf,KAAK,CAACP,QAAQ,CAAGuB,IAAI,CAAC,EAAE,CAAC,CAAGA,IAAI,CAAC,CAAC,CAAC,CAAE,CACrDP,QAAQ,CAARA,QAAQ,CACRJ,MAAM,CAANA,MACF,CAAC,CACH,CAAC,CACH,CAAC,CAAE,CAACL,KAAK,CAACP,QAAQ,CAAC,CAAC,CAEpB,OACEwB,GAAA,CAACC,SAAS,CAAA,CAACC,OAAO,CAAErB,OAAQ,CAACC,kBAAkB,CAAEA,kBAAmB,CAAAqB,QAAA,CAClEH,GAAA,CAAC7B,wBAAwB,CAAAiC,MAAA,CAAAC,MAAA,CAAA,EAAA,CAAKtB,KAAK,CAAA,CAAAoB,QAAA,CACjCH,GAAA,CAACM,QAAQ,CAACC,IAAI,CAACZ,CAAAA,KAAK,CAAEA,KAAM,CAAE,CAAC,CAAA,CACP,CAAC,CAClB,CAAC,CAEhB;;;;"}

package/build/lib/native/components/Carousel/Indicators/getIndicatorButtonStyles.js

@@ -12,7 +12,7 @@ import { makeSize } from '../../../utils/makeSize/makeSize.js';
 import '../../BladeProvider/useTheme.js';
 import { getFocusRingStyles } from '../../../utils/getFocusRingStyles/getFocusRingStyles.native.js';
 
-var getIndicatorButtonStyles=function getIndicatorButtonStyles(_ref){var theme=_ref.theme,isActive=_ref.isActive,variant=_ref.variant;var backgroundColor={gray:theme.colors.interactive.icon.gray.muted,white:theme.colors.interactive.icon.staticWhite.normal,blue:theme.colors.interactive.icon.primary.subtle};var easing=castWebType(theme.motion.easing.standard.effective);var duration=castWebType(makeMotionTime(theme.motion.duration.gentle));return Object.assign({border:'none',cursor:'pointer',padding:makeSpace(theme.spacing[0]),borderRadius:theme.border.radius.max,backgroundColor:isActive?backgroundColor[variant]:theme.colors.overlay.background.moderate,width:isActive?makeSize(size[18]):makeSize(size[6]),height:makeSize(size[6])},isReactNative()&&{width:undefined},!isReactNative()&&{transitionProperty:'width',transitionDuration:duration,transitionTimingFunction:easing,'&:before':{content:`""`,padding:makeSize(size[10]),paddingTop:makeSize(size[20])},'&:focus-visible':Object.assign({},getFocusRingStyles())});};
+var getIndicatorButtonStyles=function getIndicatorButtonStyles(_ref){var theme=_ref.theme,isActive=_ref.isActive,variant=_ref.variant;var backgroundColor={gray:theme.colors.interactive.icon.gray.muted,white:theme.colors.interactive.icon.staticWhite.normal,blue:theme.colors.interactive.icon.primary.subtle};var easing=castWebType(theme.motion.easing.standard);var duration=castWebType(makeMotionTime(theme.motion.duration.gentle));return Object.assign({border:'none',cursor:'pointer',padding:makeSpace(theme.spacing[0]),borderRadius:theme.border.radius.max,backgroundColor:isActive?backgroundColor[variant]:theme.colors.overlay.background.moderate,width:isActive?makeSize(size[18]):makeSize(size[6]),height:makeSize(size[6])},isReactNative()&&{width:undefined},!isReactNative()&&{transitionProperty:'width',transitionDuration:duration,transitionTimingFunction:easing,'&:before':{content:`""`,padding:makeSize(size[10]),paddingTop:makeSize(size[20])},'&:focus-visible':Object.assign({},getFocusRingStyles())});};
 
 export { getIndicatorButtonStyles };
 //# sourceMappingURL=getIndicatorButtonStyles.js.map

package/build/lib/native/components/Carousel/Indicators/getIndicatorButtonStyles.js.map

@@ -1 +1 @@
-{"version":3,"file":"getIndicatorButtonStyles.js","sources":["../../../../../../src/components/Carousel/Indicators/getIndicatorButtonStyles.ts"],"sourcesContent":["import type { CSSObject, DefaultTheme } from 'styled-components';\nimport type { IndicatorButtonProps } from './types';\nimport { size } from '~tokens/global';\nimport { castWebType, isReactNative, makeMotionTime, makeSize, makeSpace } from '~utils';\nimport { getFocusRingStyles } from '~utils/getFocusRingStyles';\n\nconst getIndicatorButtonStyles = ({\n  theme,\n  isActive,\n  variant,\n}: {\n  theme: DefaultTheme;\n} & Pick<IndicatorButtonProps, 'isActive' | 'variant'>): CSSObject => {\n  const backgroundColor = {\n    gray: theme.colors.interactive.icon.gray.muted,\n    white: theme.colors.interactive.icon.staticWhite.normal,\n    blue: theme.colors.interactive.icon.primary.subtle,\n  };\n\n  const easing = castWebType(theme.motion.easing.standard.effective);\n  const duration = castWebType(makeMotionTime(theme.motion.duration.gentle));\n\n  return {\n    border: 'none',\n    cursor: 'pointer',\n    padding: makeSpace(theme.spacing[0]),\n    borderRadius: theme.border.radius.max,\n    backgroundColor: isActive ? backgroundColor[variant] : theme.colors.overlay.background.moderate,\n    width: isActive ? makeSize(size[18]) : makeSize(size[6]),\n    height: makeSize(size[6]),\n\n    ...(isReactNative() && {\n      width: undefined,\n    }),\n\n    ...(!isReactNative() && {\n      transitionProperty: 'width',\n      transitionDuration: duration,\n      transitionTimingFunction: easing,\n      '&:before': {\n        content: `\"\"`,\n        // increasing the hit area, just random numbers\n        padding: makeSize(size[10]),\n        paddingTop: makeSize(size[20]),\n      },\n      '&:focus-visible': {\n        ...getFocusRingStyles({ theme }),\n      },\n    }),\n  };\n};\n\nexport { getIndicatorButtonStyles };\n"],"names":["getIndicatorButtonStyles","_ref","theme","isActive","variant","backgroundColor","gray","colors","interactive","icon","muted","white","staticWhite","normal","blue","primary","subtle","easing","castWebType","motion","standard","effective","duration","makeMotionTime","gentle","Object","assign","border","cursor","padding","makeSpace","spacing","borderRadius","radius","max","overlay","background","moderate","width","makeSize","size","height","isReactNative","undefined","transitionProperty","transitionDuration","transitionTimingFunction","content","paddingTop","getFocusRingStyles"],"mappings":";;;;;;;;;;;;;;AAMM,IAAAA,wBAAwB,CAAG,SAA3BA,wBAAwBA,CAAAC,IAAA,CAMwC,CAAA,IALpEC,KAAK,CAAAD,IAAA,CAALC,KAAK,CACLC,QAAQ,CAAAF,IAAA,CAARE,QAAQ,CACRC,OAAO,CAAAH,IAAA,CAAPG,OAAO,CAIP,IAAMC,eAAe,CAAG,CACtBC,IAAI,CAAEJ,KAAK,CAACK,MAAM,CAACC,WAAW,CAACC,IAAI,CAACH,IAAI,CAACI,KAAK,CAC9CC,KAAK,CAAET,KAAK,CAACK,MAAM,CAACC,WAAW,CAACC,IAAI,CAACG,WAAW,CAACC,MAAM,CACvDC,IAAI,CAAEZ,KAAK,CAACK,MAAM,CAACC,WAAW,CAACC,IAAI,CAACM,OAAO,CAACC,MAC9C,CAAC,CAED,IAAMC,MAAM,CAAGC,WAAW,CAAChB,KAAK,CAACiB,MAAM,CAACF,MAAM,CAACG,QAAQ,CAACC,SAAS,CAAC,CAClE,IAAMC,QAAQ,CAAGJ,WAAW,CAACK,cAAc,CAACrB,KAAK,CAACiB,MAAM,CAACG,QAAQ,CAACE,MAAM,CAAC,CAAC,CAE1E,OAAAC,MAAA,CAAAC,MAAA,CAAA,CACEC,MAAM,CAAE,MAAM,CACdC,MAAM,CAAE,SAAS,CACjBC,OAAO,CAAEC,SAAS,CAAC5B,KAAK,CAAC6B,OAAO,CAAC,CAAC,CAAC,CAAC,CACpCC,YAAY,CAAE9B,KAAK,CAACyB,MAAM,CAACM,MAAM,CAACC,GAAG,CACrC7B,eAAe,CAAEF,QAAQ,CAAGE,eAAe,CAACD,OAAO,CAAC,CAAGF,KAAK,CAACK,MAAM,CAAC4B,OAAO,CAACC,UAAU,CAACC,QAAQ,CAC/FC,KAAK,CAAEnC,QAAQ,CAAGoC,QAAQ,CAACC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAGD,QAAQ,CAACC,IAAI,CAAC,CAAC,CAAC,CAAC,CACxDC,MAAM,CAAEF,QAAQ,CAACC,IAAI,CAAC,CAAC,CAAC,CAAC,CAErBE,CAAAA,aAAa,EAAE,EAAI,CACrBJ,KAAK,CAAEK,SACT,CAAC,CAEG,CAACD,aAAa,EAAE,EAAI,CACtBE,kBAAkB,CAAE,OAAO,CAC3BC,kBAAkB,CAAEvB,QAAQ,CAC5BwB,wBAAwB,CAAE7B,MAAM,CAChC,UAAU,CAAE,CACV8B,OAAO,CAAG,IAAG,CAEblB,OAAO,CAAEU,QAAQ,CAACC,IAAI,CAAC,EAAE,CAAC,CAAC,CAC3BQ,UAAU,CAAET,QAAQ,CAACC,IAAI,CAAC,EAAE,CAAC,CAC/B,CAAC,CACD,iBAAiB,CAAAf,MAAA,CAAAC,MAAA,CACZuB,EAAAA,CAAAA,kBAAkB,CAAU,CAAC,CAEpC,CAAC,CAAA,CAEL;;;;"}
+{"version":3,"file":"getIndicatorButtonStyles.js","sources":["../../../../../../src/components/Carousel/Indicators/getIndicatorButtonStyles.ts"],"sourcesContent":["import type { CSSObject, DefaultTheme } from 'styled-components';\nimport type { IndicatorButtonProps } from './types';\nimport { size } from '~tokens/global';\nimport { castWebType, isReactNative, makeMotionTime, makeSize, makeSpace } from '~utils';\nimport { getFocusRingStyles } from '~utils/getFocusRingStyles';\n\nconst getIndicatorButtonStyles = ({\n  theme,\n  isActive,\n  variant,\n}: {\n  theme: DefaultTheme;\n} & Pick<IndicatorButtonProps, 'isActive' | 'variant'>): CSSObject => {\n  const backgroundColor = {\n    gray: theme.colors.interactive.icon.gray.muted,\n    white: theme.colors.interactive.icon.staticWhite.normal,\n    blue: theme.colors.interactive.icon.primary.subtle,\n  };\n\n  const easing = castWebType(theme.motion.easing.standard);\n  const duration = castWebType(makeMotionTime(theme.motion.duration.gentle));\n\n  return {\n    border: 'none',\n    cursor: 'pointer',\n    padding: makeSpace(theme.spacing[0]),\n    borderRadius: theme.border.radius.max,\n    backgroundColor: isActive ? backgroundColor[variant] : theme.colors.overlay.background.moderate,\n    width: isActive ? makeSize(size[18]) : makeSize(size[6]),\n    height: makeSize(size[6]),\n\n    ...(isReactNative() && {\n      width: undefined,\n    }),\n\n    ...(!isReactNative() && {\n      transitionProperty: 'width',\n      transitionDuration: duration,\n      transitionTimingFunction: easing,\n      '&:before': {\n        content: `\"\"`,\n        // increasing the hit area, just random numbers\n        padding: makeSize(size[10]),\n        paddingTop: makeSize(size[20]),\n      },\n      '&:focus-visible': {\n        ...getFocusRingStyles({ theme }),\n      },\n    }),\n  };\n};\n\nexport { getIndicatorButtonStyles };\n"],"names":["getIndicatorButtonStyles","_ref","theme","isActive","variant","backgroundColor","gray","colors","interactive","icon","muted","white","staticWhite","normal","blue","primary","subtle","easing","castWebType","motion","standard","duration","makeMotionTime","gentle","Object","assign","border","cursor","padding","makeSpace","spacing","borderRadius","radius","max","overlay","background","moderate","width","makeSize","size","height","isReactNative","undefined","transitionProperty","transitionDuration","transitionTimingFunction","content","paddingTop","getFocusRingStyles"],"mappings":";;;;;;;;;;;;;;AAMM,IAAAA,wBAAwB,CAAG,SAA3BA,wBAAwBA,CAAAC,IAAA,CAMwC,CAAA,IALpEC,KAAK,CAAAD,IAAA,CAALC,KAAK,CACLC,QAAQ,CAAAF,IAAA,CAARE,QAAQ,CACRC,OAAO,CAAAH,IAAA,CAAPG,OAAO,CAIP,IAAMC,eAAe,CAAG,CACtBC,IAAI,CAAEJ,KAAK,CAACK,MAAM,CAACC,WAAW,CAACC,IAAI,CAACH,IAAI,CAACI,KAAK,CAC9CC,KAAK,CAAET,KAAK,CAACK,MAAM,CAACC,WAAW,CAACC,IAAI,CAACG,WAAW,CAACC,MAAM,CACvDC,IAAI,CAAEZ,KAAK,CAACK,MAAM,CAACC,WAAW,CAACC,IAAI,CAACM,OAAO,CAACC,MAC9C,CAAC,CAED,IAAMC,MAAM,CAAGC,WAAW,CAAChB,KAAK,CAACiB,MAAM,CAACF,MAAM,CAACG,QAAQ,CAAC,CACxD,IAAMC,QAAQ,CAAGH,WAAW,CAACI,cAAc,CAACpB,KAAK,CAACiB,MAAM,CAACE,QAAQ,CAACE,MAAM,CAAC,CAAC,CAE1E,OAAAC,MAAA,CAAAC,MAAA,CACEC,CAAAA,MAAM,CAAE,MAAM,CACdC,MAAM,CAAE,SAAS,CACjBC,OAAO,CAAEC,SAAS,CAAC3B,KAAK,CAAC4B,OAAO,CAAC,CAAC,CAAC,CAAC,CACpCC,YAAY,CAAE7B,KAAK,CAACwB,MAAM,CAACM,MAAM,CAACC,GAAG,CACrC5B,eAAe,CAAEF,QAAQ,CAAGE,eAAe,CAACD,OAAO,CAAC,CAAGF,KAAK,CAACK,MAAM,CAAC2B,OAAO,CAACC,UAAU,CAACC,QAAQ,CAC/FC,KAAK,CAAElC,QAAQ,CAAGmC,QAAQ,CAACC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAGD,QAAQ,CAACC,IAAI,CAAC,CAAC,CAAC,CAAC,CACxDC,MAAM,CAAEF,QAAQ,CAACC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAA,CAErBE,aAAa,EAAE,EAAI,CACrBJ,KAAK,CAAEK,SACT,CAAC,CAEG,CAACD,aAAa,EAAE,EAAI,CACtBE,kBAAkB,CAAE,OAAO,CAC3BC,kBAAkB,CAAEvB,QAAQ,CAC5BwB,wBAAwB,CAAE5B,MAAM,CAChC,UAAU,CAAE,CACV6B,OAAO,CAAG,CAAA,EAAA,CAAG,CAEblB,OAAO,CAAEU,QAAQ,CAACC,IAAI,CAAC,EAAE,CAAC,CAAC,CAC3BQ,UAAU,CAAET,QAAQ,CAACC,IAAI,CAAC,EAAE,CAAC,CAC/B,CAAC,CACD,iBAAiB,CAAAf,MAAA,CAAAC,MAAA,CACZuB,EAAAA,CAAAA,kBAAkB,CAAU,CAAC,CAEpC,CAAC,CAAA,CAEL;;;;"}

package/build/lib/native/components/Carousel/NavigationButton/getNavigationButtonStyles.js

@@ -8,7 +8,7 @@ import { makeSpace } from '../../../utils/makeSpace/makeSpace.js';
 import '../../BladeProvider/useTheme.js';
 import { getFocusRingStyles } from '../../../utils/getFocusRingStyles/getFocusRingStyles.native.js';
 
-var getNavigationButtonStyles=function getNavigationButtonStyles(props){var theme=props.theme,_props$isPressed=props.isPressed,isPressed=_props$isPressed===void 0?false:_props$isPressed,_props$variant=props.variant,variant=_props$variant===void 0?'filled':_props$variant;var motionToken=theme.motion;var iconColor={filled:{default:theme.colors.interactive.icon.staticBlack.muted,highlighted:theme.colors.interactive.icon.staticBlack.muted},stroked:{default:theme.colors.interactive.icon.gray.normal,highlighted:theme.colors.interactive.icon.gray.normal}};var backgroundColor={filled:{default:theme.colors.interactive.background.staticWhite.default,highlighted:theme.colors.interactive.background.staticWhite.highlighted},stroked:{default:theme.colors.interactive.background.staticWhite.faded,highlighted:theme.colors.interactive.background.staticWhite.fadedHighlighted}};var borderColors={filled:theme.colors.transparent,stroked:theme.colors.interactive.border.gray.faded};var borderColor=borderColors[variant];var borderWidth=theme.border.width.thin;var borderRadius=theme.border.radius.max;var state=isPressed?'highlighted':'default';return Object.assign({cursor:'pointer',background:'transparent',border:'none',borderStyle:'solid',borderWidth:borderWidth,borderRadius:borderRadius,borderColor:borderColor,backgroundColor:backgroundColor[variant][state],color:iconColor[variant][state],padding:makeSpace(theme.spacing[3]),display:'flex',alignItems:'center',justifyContent:'center',alignSelf:'center'},isReactNative()?{}:{transitionProperty:'color, box-shadow',transitionDuration:castWebType(makeMotionTime(motionToken.duration.xquick)),transitionTimingFunction:castWebType(motionToken.easing.standard.effective),boxShadow:variant==='filled'?castWebType(theme.elevation.midRaised):undefined,'&:hover':{color:iconColor[variant].highlighted,backgroundColor:backgroundColor[variant].highlighted},'&:focus-visible':Object.assign({},getFocusRingStyles(),{color:iconColor[variant].highlighted,backgroundColor:backgroundColor[variant].highlighted}),'&:active':{color:iconColor[variant].highlighted,backgroundColor:backgroundColor[variant].highlighted}});};
+var getNavigationButtonStyles=function getNavigationButtonStyles(props){var theme=props.theme,_props$isPressed=props.isPressed,isPressed=_props$isPressed===void 0?false:_props$isPressed,_props$variant=props.variant,variant=_props$variant===void 0?'filled':_props$variant;var motionToken=theme.motion;var iconColor={filled:{default:theme.colors.interactive.icon.staticBlack.muted,highlighted:theme.colors.interactive.icon.staticBlack.muted},stroked:{default:theme.colors.interactive.icon.gray.normal,highlighted:theme.colors.interactive.icon.gray.normal}};var backgroundColor={filled:{default:theme.colors.interactive.background.staticWhite.default,highlighted:theme.colors.interactive.background.staticWhite.highlighted},stroked:{default:theme.colors.interactive.background.staticWhite.faded,highlighted:theme.colors.interactive.background.staticWhite.fadedHighlighted}};var borderColors={filled:theme.colors.transparent,stroked:theme.colors.interactive.border.gray.faded};var borderColor=borderColors[variant];var borderWidth=theme.border.width.thin;var borderRadius=theme.border.radius.max;var state=isPressed?'highlighted':'default';return Object.assign({cursor:'pointer',background:'transparent',border:'none',borderStyle:'solid',borderWidth:borderWidth,borderRadius:borderRadius,borderColor:borderColor,backgroundColor:backgroundColor[variant][state],color:iconColor[variant][state],padding:makeSpace(theme.spacing[3]),display:'flex',alignItems:'center',justifyContent:'center',alignSelf:'center'},isReactNative()?{}:{transitionProperty:'color, box-shadow',transitionDuration:castWebType(makeMotionTime(motionToken.duration.xquick)),transitionTimingFunction:castWebType(motionToken.easing.standard),boxShadow:variant==='filled'?castWebType(theme.elevation.midRaised):undefined,'&:hover':{color:iconColor[variant].highlighted,backgroundColor:backgroundColor[variant].highlighted},'&:focus-visible':Object.assign({},getFocusRingStyles(),{color:iconColor[variant].highlighted,backgroundColor:backgroundColor[variant].highlighted}),'&:active':{color:iconColor[variant].highlighted,backgroundColor:backgroundColor[variant].highlighted}});};
 
 export { getNavigationButtonStyles };
 //# sourceMappingURL=getNavigationButtonStyles.js.map

package/build/lib/native/components/Carousel/NavigationButton/getNavigationButtonStyles.js.map

@@ -1 +1 @@
-{"version":3,"file":"getNavigationButtonStyles.js","sources":["../../../../../../src/components/Carousel/NavigationButton/getNavigationButtonStyles.ts"],"sourcesContent":["import type { CSSObject, DefaultTheme } from 'styled-components';\nimport type { NavigationButtonProps } from './types';\nimport { castWebType, isReactNative, makeMotionTime, makeSpace } from '~utils';\nimport { getFocusRingStyles } from '~utils/getFocusRingStyles';\n\nconst getNavigationButtonStyles = (props: {\n  theme: DefaultTheme;\n  isPressed?: boolean;\n  variant: NavigationButtonProps['variant'];\n}): CSSObject => {\n  const { theme, isPressed = false, variant = 'filled' } = props;\n  const motionToken = theme.motion;\n\n  const iconColor = {\n    filled: {\n      default: theme.colors.interactive.icon.staticBlack.muted,\n      highlighted: theme.colors.interactive.icon.staticBlack.muted,\n    },\n    stroked: {\n      default: theme.colors.interactive.icon.gray.normal,\n      highlighted: theme.colors.interactive.icon.gray.normal,\n    },\n  };\n\n  const backgroundColor = {\n    filled: {\n      default: theme.colors.interactive.background.staticWhite.default,\n      highlighted: theme.colors.interactive.background.staticWhite.highlighted,\n    },\n    stroked: {\n      default: theme.colors.interactive.background.staticWhite.faded,\n      highlighted: theme.colors.interactive.background.staticWhite.fadedHighlighted,\n    },\n  };\n\n  const borderColors = {\n    filled: theme.colors.transparent,\n    stroked: theme.colors.interactive.border.gray.faded,\n  } as const;\n\n  const borderColor = borderColors[variant];\n  const borderWidth = theme.border.width.thin;\n  const borderRadius = theme.border.radius.max;\n  // on react-native isPressed will be passed\n  const state = isPressed ? 'highlighted' : 'default';\n\n  return {\n    cursor: 'pointer',\n    background: 'transparent',\n    border: 'none',\n    borderStyle: 'solid',\n    borderWidth,\n    borderRadius,\n    borderColor,\n    backgroundColor: backgroundColor[variant][state],\n    color: iconColor[variant][state],\n\n    padding: makeSpace(theme.spacing[3]),\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    alignSelf: 'center',\n\n    ...(isReactNative()\n      ? {}\n      : {\n          transitionProperty: 'color, box-shadow',\n          transitionDuration: castWebType(makeMotionTime(motionToken.duration.xquick)),\n          transitionTimingFunction: castWebType(motionToken.easing.standard.effective),\n          boxShadow: variant === 'filled' ? castWebType(theme.elevation.midRaised) : undefined,\n\n          '&:hover': {\n            color: iconColor[variant].highlighted,\n            backgroundColor: backgroundColor[variant].highlighted,\n          },\n\n          '&:focus-visible': {\n            ...getFocusRingStyles({ theme }),\n            color: iconColor[variant].highlighted,\n            backgroundColor: backgroundColor[variant].highlighted,\n          },\n\n          '&:active': {\n            color: iconColor[variant].highlighted,\n            backgroundColor: backgroundColor[variant].highlighted,\n          },\n        }),\n  };\n};\n\nexport { getNavigationButtonStyles };\n"],"names":["getNavigationButtonStyles","props","theme","_props$isPressed","isPressed","_props$variant","variant","motionToken","motion","iconColor","filled","default","colors","interactive","icon","staticBlack","muted","highlighted","stroked","gray","normal","backgroundColor","background","staticWhite","faded","fadedHighlighted","borderColors","transparent","border","borderColor","borderWidth","width","thin","borderRadius","radius","max","state","Object","assign","cursor","borderStyle","color","padding","makeSpace","spacing","display","alignItems","justifyContent","alignSelf","isReactNative","transitionProperty","transitionDuration","castWebType","makeMotionTime","duration","xquick","transitionTimingFunction","easing","standard","effective","boxShadow","elevation","midRaised","undefined","getFocusRingStyles"],"mappings":"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"}
+{"version":3,"file":"getNavigationButtonStyles.js","sources":["../../../../../../src/components/Carousel/NavigationButton/getNavigationButtonStyles.ts"],"sourcesContent":["import type { CSSObject, DefaultTheme } from 'styled-components';\nimport type { NavigationButtonProps } from './types';\nimport { castWebType, isReactNative, makeMotionTime, makeSpace } from '~utils';\nimport { getFocusRingStyles } from '~utils/getFocusRingStyles';\n\nconst getNavigationButtonStyles = (props: {\n  theme: DefaultTheme;\n  isPressed?: boolean;\n  variant: NavigationButtonProps['variant'];\n}): CSSObject => {\n  const { theme, isPressed = false, variant = 'filled' } = props;\n  const motionToken = theme.motion;\n\n  const iconColor = {\n    filled: {\n      default: theme.colors.interactive.icon.staticBlack.muted,\n      highlighted: theme.colors.interactive.icon.staticBlack.muted,\n    },\n    stroked: {\n      default: theme.colors.interactive.icon.gray.normal,\n      highlighted: theme.colors.interactive.icon.gray.normal,\n    },\n  };\n\n  const backgroundColor = {\n    filled: {\n      default: theme.colors.interactive.background.staticWhite.default,\n      highlighted: theme.colors.interactive.background.staticWhite.highlighted,\n    },\n    stroked: {\n      default: theme.colors.interactive.background.staticWhite.faded,\n      highlighted: theme.colors.interactive.background.staticWhite.fadedHighlighted,\n    },\n  };\n\n  const borderColors = {\n    filled: theme.colors.transparent,\n    stroked: theme.colors.interactive.border.gray.faded,\n  } as const;\n\n  const borderColor = borderColors[variant];\n  const borderWidth = theme.border.width.thin;\n  const borderRadius = theme.border.radius.max;\n  // on react-native isPressed will be passed\n  const state = isPressed ? 'highlighted' : 'default';\n\n  return {\n    cursor: 'pointer',\n    background: 'transparent',\n    border: 'none',\n    borderStyle: 'solid',\n    borderWidth,\n    borderRadius,\n    borderColor,\n    backgroundColor: backgroundColor[variant][state],\n    color: iconColor[variant][state],\n\n    padding: makeSpace(theme.spacing[3]),\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    alignSelf: 'center',\n\n    ...(isReactNative()\n      ? {}\n      : {\n          transitionProperty: 'color, box-shadow',\n          transitionDuration: castWebType(makeMotionTime(motionToken.duration.xquick)),\n          transitionTimingFunction: castWebType(motionToken.easing.standard),\n          boxShadow: variant === 'filled' ? castWebType(theme.elevation.midRaised) : undefined,\n\n          '&:hover': {\n            color: iconColor[variant].highlighted,\n            backgroundColor: backgroundColor[variant].highlighted,\n          },\n\n          '&:focus-visible': {\n            ...getFocusRingStyles({ theme }),\n            color: iconColor[variant].highlighted,\n            backgroundColor: backgroundColor[variant].highlighted,\n          },\n\n          '&:active': {\n            color: iconColor[variant].highlighted,\n            backgroundColor: backgroundColor[variant].highlighted,\n          },\n        }),\n  };\n};\n\nexport { getNavigationButtonStyles };\n"],"names":["getNavigationButtonStyles","props","theme","_props$isPressed","isPressed","_props$variant","variant","motionToken","motion","iconColor","filled","default","colors","interactive","icon","staticBlack","muted","highlighted","stroked","gray","normal","backgroundColor","background","staticWhite","faded","fadedHighlighted","borderColors","transparent","border","borderColor","borderWidth","width","thin","borderRadius","radius","max","state","Object","assign","cursor","borderStyle","color","padding","makeSpace","spacing","display","alignItems","justifyContent","alignSelf","isReactNative","transitionProperty","transitionDuration","castWebType","makeMotionTime","duration","xquick","transitionTimingFunction","easing","standard","boxShadow","elevation","midRaised","undefined","getFocusRingStyles"],"mappings":"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"}

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

@@ -19,27 +19,29 @@ import useTheme from '../BladeProvider/useTheme.js';
 import { BaseBox } from '../Box/BaseBox/BaseBox.native.js';
 import { FormHint } from '../Form/FormHint.js';
 import '../VisuallyHidden/VisuallyHidden.native.js';
-import '../Typography/BaseText/BaseText.native.js';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import '../Typography/Heading/Heading.js';
 import '../Typography/Text/Text.js';
 import '../Typography/Code/Code.js';
+import '../Typography/Display/Display.js';
 import 'styled-components/native';
 import '@gorhom/portal';
 import 'react-native-gesture-handler';
 import '../BottomSheet/BottomSheetStack.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { SelectorLabel } from '../Form/Selector/SelectorLabel.native.js';
 import { SelectorTitle } from '../Form/Selector/SelectorTitle.js';
 import { SelectorSupportText } from '../Form/Selector/SelectorSupportText.js';
 import { SelectorInput } from '../Form/Selector/SelectorInput.native.js';
 import { assignWithoutSideEffects } from '../../utils/assignWithoutSideEffects/assignWithoutSideEffects.js';
+import { getOuterMotionRef, getInnerMotionRef } from '../../utils/getMotionRefs.js';
 import { makeAnalyticsAttribute } from '../../utils/makeAnalyticsAttribute/makeAnalyticsAttribute.js';
 
-var _excluded=["defaultChecked","validationState","isChecked","isDisabled","isIndeterminate","isRequired","name","onChange","value","children","helpText","errorText","size","tabIndex","testID"];var _Checkbox=function _Checkbox(_ref,ref){var _groupProps$state,_groupProps$size;var defaultChecked=_ref.defaultChecked,validationState=_ref.validationState,isChecked=_ref.isChecked,isDisabled=_ref.isDisabled,isIndeterminate=_ref.isIndeterminate,isRequired=_ref.isRequired,name=_ref.name,onChange=_ref.onChange,value=_ref.value,children=_ref.children,helpText=_ref.helpText,errorText=_ref.errorText,_ref$size=_ref.size,size=_ref$size===void 0?'medium':_ref$size,tabIndex=_ref.tabIndex,testID=_ref.testID,rest=_objectWithoutProperties(_ref,_excluded);var groupProps=useCheckboxGroupContext();var hasValidationState=!isUndefined(validationState);var hasName=!isUndefined(name);var hasDefaultChecked=!isUndefined(defaultChecked);var hasIsChecked=!isUndefined(isChecked);var hasOnChange=!isUndefined(onChange);if(__DEV__){if((hasValidationState||hasName||hasDefaultChecked||hasIsChecked||hasOnChange)&&!isEmpty(groupProps)){var props=[hasValidationState?'validationState':undefined,hasName?'name':undefined,hasDefaultChecked?'defaultChecked':undefined,hasIsChecked?'isChecked':undefined,hasOnChange?'onChange':undefined].filter(Boolean).join(',');throwBladeError({message:`Cannot set \`${props}\` on <Checkbox /> when it's inside <CheckboxGroup />, Please set it on the <CheckboxGroup /> itself`,moduleName:'Checkbox'});}if(!value&&!isEmpty(groupProps)){throw new Error(`[Blade Checkbox]: <CheckboxGroup /> requires that you pass unique "value" prop to each <Checkbox />
+var _excluded=["defaultChecked","validationState","isChecked","isDisabled","isIndeterminate","isRequired","name","onChange","value","children","helpText","errorText","size","tabIndex","testID","_motionMeta"];var _Checkbox=function _Checkbox(_ref,ref){var _groupProps$state,_groupProps$size;var defaultChecked=_ref.defaultChecked,validationState=_ref.validationState,isChecked=_ref.isChecked,isDisabled=_ref.isDisabled,isIndeterminate=_ref.isIndeterminate,isRequired=_ref.isRequired,name=_ref.name,onChange=_ref.onChange,value=_ref.value,children=_ref.children,helpText=_ref.helpText,errorText=_ref.errorText,_ref$size=_ref.size,size=_ref$size===void 0?'medium':_ref$size,tabIndex=_ref.tabIndex,testID=_ref.testID,_motionMeta=_ref._motionMeta,rest=_objectWithoutProperties(_ref,_excluded);var groupProps=useCheckboxGroupContext();var hasValidationState=!isUndefined(validationState);var hasName=!isUndefined(name);var hasDefaultChecked=!isUndefined(defaultChecked);var hasIsChecked=!isUndefined(isChecked);var hasOnChange=!isUndefined(onChange);if(__DEV__){if((hasValidationState||hasName||hasDefaultChecked||hasIsChecked||hasOnChange)&&!isEmpty(groupProps)){var props=[hasValidationState?'validationState':undefined,hasName?'name':undefined,hasDefaultChecked?'defaultChecked':undefined,hasIsChecked?'isChecked':undefined,hasOnChange?'onChange':undefined].filter(Boolean).join(',');throwBladeError({message:`Cannot set \`${props}\` on <Checkbox /> when it's inside <CheckboxGroup />, Please set it on the <CheckboxGroup /> itself`,moduleName:'Checkbox'});}if(!value&&!isEmpty(groupProps)){throw new Error(`[Blade Checkbox]: <CheckboxGroup /> requires that you pass unique "value" prop to each <Checkbox />
       <CheckboxGroup>
         <Checkbox value="apple">Apple</Checkbox>
         <Checkbox value="mango">Mango</Checkbox>
       </CheckboxGroup>
-      `);}}var _validationState=validationState!=null?validationState:groupProps==null?void 0:groupProps.validationState;var _hasError=_validationState==='error';var _isDisabled=isDisabled!=null?isDisabled:groupProps==null?void 0:groupProps.isDisabled;var _isRequired=Boolean(isRequired||(groupProps==null?void 0:groupProps.isRequired)||(groupProps==null?void 0:groupProps.necessityIndicator)==='required');var _name=name!=null?name:groupProps==null?void 0:groupProps.name;var _isChecked=isChecked!=null?isChecked:groupProps==null?void 0:(_groupProps$state=groupProps.state)==null?void 0:_groupProps$state.isChecked(value);var _size=(_groupProps$size=groupProps.size)!=null?_groupProps$size:size;var _useTheme=useTheme(),theme=_useTheme.theme;var formHintSize={small:'medium',medium:'medium',large:'large'};var showSupportingText=helpText;var handleChange=function handleChange(_ref2){var isChecked=_ref2.isChecked,event=_ref2.event,value=_ref2.value;if(isChecked){var _groupProps$state2;groupProps==null?void 0:(_groupProps$state2=groupProps.state)==null?void 0:_groupProps$state2.addValue(value);}else {var _groupProps$state3;groupProps==null?void 0:(_groupProps$state3=groupProps.state)==null?void 0:_groupProps$state3.removeValue(value);}onChange==null?void 0:onChange({isChecked:isChecked,event:event,value:value});};var _useCheckbox=useCheckbox({defaultChecked:defaultChecked,isChecked:_isChecked,isIndeterminate:isIndeterminate,hasError:_hasError,hasHelperText:Boolean(showSupportingText),isDisabled:_isDisabled,isRequired:_isRequired,name:_name,value:value,onChange:handleChange}),state=_useCheckbox.state,ids=_useCheckbox.ids,inputProps=_useCheckbox.inputProps;var helpTextLeftSpacing=makeSize(checkboxSizes.icon[size].width+theme.spacing[3]);return jsxs(BaseBox,Object.assign({},metaAttribute({name:MetaConstants.Checkbox,testID:testID}),getStyledProps(rest),{children:[jsx(SelectorLabel,{componentName:MetaConstants.CheckboxLabel,inputProps:state.isReactNative?inputProps:{},style:{cursor:isDisabled?'not-allowed':'pointer'},children:jsxs(BaseBox,{display:"flex",flexDirection:"column",children:[jsxs(BaseBox,{display:"flex",flexDirection:"row",children:[jsx(SelectorInput,Object.assign({hoverTokens:checkboxHoverTokens,isChecked:state.isChecked||Boolean(isIndeterminate),isDisabled:_isDisabled,hasError:_hasError,inputProps:inputProps,tabIndex:tabIndex,ref:ref},makeAnalyticsAttribute(rest))),jsx(CheckboxIcon,{size:_size,isChecked:state.isChecked,isIndeterminate:isIndeterminate,isDisabled:_isDisabled,isNegative:_hasError}),children?jsx(SelectorTitle,{size:_size,isDisabled:_isDisabled,children:children}):null]}),showSupportingText?jsx(BaseBox,{marginLeft:helpTextLeftSpacing,children:jsx(SelectorSupportText,{size:_size,id:ids==null?void 0:ids.helpTextId,children:helpText})}):null]})}),jsx(FormHint,{size:formHintSize[_size],errorText:errorText,errorTextId:ids==null?void 0:ids.errorTextId,type:validationState==='error'?'error':'help'})]}));};var Checkbox=assignWithoutSideEffects(React__default.forwardRef(_Checkbox),{displayName:'Checkbox'});
+      `);}}var _validationState=validationState!=null?validationState:groupProps==null?void 0:groupProps.validationState;var _hasError=_validationState==='error';var _isDisabled=isDisabled!=null?isDisabled:groupProps==null?void 0:groupProps.isDisabled;var _isRequired=Boolean(isRequired||(groupProps==null?void 0:groupProps.isRequired)||(groupProps==null?void 0:groupProps.necessityIndicator)==='required');var _name=name!=null?name:groupProps==null?void 0:groupProps.name;var _isChecked=isChecked!=null?isChecked:groupProps==null?void 0:(_groupProps$state=groupProps.state)==null?void 0:_groupProps$state.isChecked(value);var _size=(_groupProps$size=groupProps.size)!=null?_groupProps$size:size;var _useTheme=useTheme(),theme=_useTheme.theme;var formHintSize={small:'medium',medium:'medium',large:'large'};var showSupportingText=helpText;var handleChange=function handleChange(_ref2){var isChecked=_ref2.isChecked,event=_ref2.event,value=_ref2.value;if(isChecked){var _groupProps$state2;groupProps==null?void 0:(_groupProps$state2=groupProps.state)==null?void 0:_groupProps$state2.addValue(value);}else {var _groupProps$state3;groupProps==null?void 0:(_groupProps$state3=groupProps.state)==null?void 0:_groupProps$state3.removeValue(value);}onChange==null?void 0:onChange({isChecked:isChecked,event:event,value:value});};var _useCheckbox=useCheckbox({defaultChecked:defaultChecked,isChecked:_isChecked,isIndeterminate:isIndeterminate,hasError:_hasError,hasHelperText:Boolean(showSupportingText),isDisabled:_isDisabled,isRequired:_isRequired,name:_name,value:value,onChange:handleChange}),state=_useCheckbox.state,ids=_useCheckbox.ids,inputProps=_useCheckbox.inputProps;var helpTextLeftSpacing=makeSize(checkboxSizes.icon[size].width+theme.spacing[3]);return jsxs(BaseBox,Object.assign({ref:getOuterMotionRef({_motionMeta:_motionMeta,ref:ref})},metaAttribute({name:MetaConstants.Checkbox,testID:testID}),getStyledProps(rest),{children:[jsx(SelectorLabel,{componentName:MetaConstants.CheckboxLabel,inputProps:state.isReactNative?inputProps:{},style:{cursor:isDisabled?'not-allowed':'pointer'},children:jsxs(BaseBox,{display:"flex",flexDirection:"column",children:[jsxs(BaseBox,{display:"flex",flexDirection:"row",children:[jsx(SelectorInput,Object.assign({hoverTokens:checkboxHoverTokens,isChecked:state.isChecked||Boolean(isIndeterminate),isDisabled:_isDisabled,hasError:_hasError,inputProps:inputProps,tabIndex:tabIndex,ref:getInnerMotionRef({_motionMeta:_motionMeta,ref:ref})},makeAnalyticsAttribute(rest))),jsx(CheckboxIcon,{size:_size,isChecked:state.isChecked,isIndeterminate:isIndeterminate,isDisabled:_isDisabled,isNegative:_hasError}),children?jsx(SelectorTitle,{size:_size,isDisabled:_isDisabled,children:children}):null]}),showSupportingText?jsx(BaseBox,{marginLeft:helpTextLeftSpacing,children:jsx(SelectorSupportText,{size:_size,id:ids==null?void 0:ids.helpTextId,children:helpText})}):null]})}),jsx(FormHint,{size:formHintSize[_size],errorText:errorText,errorTextId:ids==null?void 0:ids.errorTextId,type:validationState==='error'?'error':'help'})]}));};var Checkbox=assignWithoutSideEffects(React__default.forwardRef(_Checkbox),{displayName:'Checkbox'});
 
 export { Checkbox };
 //# sourceMappingURL=Checkbox.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sources":["../../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/restrict-plus-operands */\n/* eslint-disable @typescript-eslint/no-shadow */\nimport React from 'react';\nimport { useCheckboxGroupContext } from './CheckboxGroup/CheckboxGroupContext';\nimport { CheckboxIcon } from './CheckboxIcon';\nimport { useCheckbox } from './useCheckbox';\nimport { checkboxHoverTokens, checkboxSizes } from './checkboxTokens';\nimport isEmpty from '~utils/lodashButBetter/isEmpty';\nimport isUndefined from '~utils/lodashButBetter/isUndefined';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport BaseBox from '~components/Box/BaseBox';\nimport { FormHint } from '~components/Form';\nimport { SelectorLabel } from '~components/Form/Selector/SelectorLabel';\nimport { SelectorTitle } from '~components/Form/Selector/SelectorTitle';\nimport { SelectorSupportText } from '~components/Form/Selector/SelectorSupportText';\nimport { SelectorInput } from '~components/Form/Selector/SelectorInput';\nimport type { BladeElementRef, DataAnalyticsAttribute, TestID } from '~utils/types';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { throwBladeError } from '~utils/logger';\nimport { makeSize, useTheme } from '~utils';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\n\ntype OnChange = ({\n  isChecked,\n  event,\n  value,\n}: {\n  isChecked: boolean;\n  event?: React.ChangeEvent;\n  value?: string;\n}) => void;\n\ntype CheckboxProps = {\n  /**\n   * If `true`, The checkbox will be checked. This also makes the checkbox controlled\n   * Use `onChange` to update its value\n   *\n   * @default false\n   */\n  isChecked?: boolean;\n  /**\n   * If `true`, the checkbox will be initially checked. This also makes the checkbox uncontrolled\n   *\n   * @default false\n   */\n  defaultChecked?: boolean;\n  /**\n   * The callback invoked when the checked state of the `Checkbox` changes.\n   */\n  onChange?: OnChange;\n  /**\n   * Sets the label of the checkbox\n   */\n  children?: React.ReactNode;\n  /**\n   * Help text for the checkbox\n   */\n  helpText?: string;\n  /**\n   * Error text for the checkbox\n   *\n   * Renders when `validationState` is set to 'error'\n   */\n  errorText?: string;\n  /**\n   * If `true`, the checkbox will be indeterminate.\n   * This does not modify the isChecked property.\n   *\n   * @default false\n   */\n  isIndeterminate?: boolean;\n  /**\n   * The name of the input field in a checkbox\n   * (Useful for form submission).\n   */\n  name?: string;\n  /**\n   * The value to be used in the checkbox input.\n   * This is the value that will be returned on form submission.\n   */\n  value?: string;\n  /**\n   * If `true`, the checkbox will be disabled\n   *\n   * @default false\n   */\n  isDisabled?: boolean;\n  /**\n   * If `true`, the checkbox input is marked as required,\n   * and `required` attribute will be added\n   *\n   * @default false\n   */\n  isRequired?: boolean;\n  /**\n   * If `error`, the checkbox input is marked as invalid,\n   * and `invalid` attribute will be added\n   */\n  validationState?: 'error' | 'none';\n  /**\n   * Size of the checkbox\n   *\n   * @default \"medium\"\n   */\n  size?: 'small' | 'medium' | 'large';\n  /**\n   * Sets the tab-index property on checkbox element\n   *\n   */\n  tabIndex?: number;\n} & TestID &\n  DataAnalyticsAttribute &\n  StyledPropsBlade;\n\nconst _Checkbox: React.ForwardRefRenderFunction<BladeElementRef, CheckboxProps> = (\n  {\n    defaultChecked,\n    validationState,\n    isChecked,\n    isDisabled,\n    isIndeterminate,\n    isRequired,\n    name,\n    onChange,\n    value,\n    children,\n    helpText,\n    errorText,\n    size = 'medium',\n    tabIndex,\n    testID,\n    ...rest\n  },\n  ref,\n) => {\n  const groupProps = useCheckboxGroupContext();\n\n  // ban certain props in checkbox while inside group\n  const hasValidationState = !isUndefined(validationState);\n  const hasName = !isUndefined(name);\n  const hasDefaultChecked = !isUndefined(defaultChecked);\n  const hasIsChecked = !isUndefined(isChecked);\n  const hasOnChange = !isUndefined(onChange);\n\n  if (__DEV__) {\n    if (\n      (hasValidationState || hasName || hasDefaultChecked || hasIsChecked || hasOnChange) &&\n      !isEmpty(groupProps)\n    ) {\n      const props = [\n        hasValidationState ? 'validationState' : undefined,\n        hasName ? 'name' : undefined,\n        hasDefaultChecked ? 'defaultChecked' : undefined,\n        hasIsChecked ? 'isChecked' : undefined,\n        hasOnChange ? 'onChange' : undefined,\n      ]\n        .filter(Boolean)\n        .join(',');\n\n      throwBladeError({\n        message: `Cannot set \\`${props}\\` on <Checkbox /> when it's inside <CheckboxGroup />, Please set it on the <CheckboxGroup /> itself`,\n        moduleName: 'Checkbox',\n      });\n    }\n\n    // mandate value prop when using inside group\n    if (!value && !isEmpty(groupProps)) {\n      throw new Error(\n        `[Blade Checkbox]: <CheckboxGroup /> requires that you pass unique \"value\" prop to each <Checkbox />\n      <CheckboxGroup>\n        <Checkbox value=\"apple\">Apple</Checkbox>\n        <Checkbox value=\"mango\">Mango</Checkbox>\n      </CheckboxGroup>\n      `,\n      );\n    }\n  }\n\n  const _validationState = validationState ?? groupProps?.validationState;\n  const _hasError = _validationState === 'error';\n  const _isDisabled = isDisabled ?? groupProps?.isDisabled;\n  const _isRequired = Boolean(\n    isRequired || groupProps?.isRequired || groupProps?.necessityIndicator === 'required',\n  );\n  const _name = name ?? groupProps?.name;\n  // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion\n  const _isChecked = isChecked ?? groupProps?.state?.isChecked(value!);\n  const _size = groupProps.size ?? size;\n  const { theme } = useTheme();\n  const formHintSize = {\n    small: 'medium',\n    medium: 'medium',\n    large: 'large',\n  } as const;\n\n  const showSupportingText = helpText;\n\n  const handleChange: OnChange = ({ isChecked, event, value }) => {\n    if (isChecked) {\n      groupProps?.state?.addValue(value!);\n    } else {\n      groupProps?.state?.removeValue(value!);\n    }\n\n    onChange?.({ isChecked, event, value });\n  };\n\n  const { state, ids, inputProps } = useCheckbox({\n    defaultChecked,\n    isChecked: _isChecked,\n    isIndeterminate,\n    hasError: _hasError,\n    hasHelperText: Boolean(showSupportingText),\n    isDisabled: _isDisabled,\n    isRequired: _isRequired,\n    name: _name,\n    value,\n    onChange: handleChange,\n  });\n\n  // Checkbox icon's size & margin + margin-left of SelectorTitle which is 2\n  const helpTextLeftSpacing = makeSize(checkboxSizes.icon[size].width + theme.spacing[3]);\n\n  return (\n    <BaseBox {...metaAttribute({ name: MetaConstants.Checkbox, testID })} {...getStyledProps(rest)}>\n      <SelectorLabel\n        componentName={MetaConstants.CheckboxLabel}\n        inputProps={state.isReactNative ? inputProps : {}}\n        style={{ cursor: isDisabled ? 'not-allowed' : 'pointer' }}\n      >\n        <BaseBox display=\"flex\" flexDirection=\"column\">\n          <BaseBox display=\"flex\" flexDirection=\"row\">\n            <SelectorInput\n              hoverTokens={checkboxHoverTokens}\n              isChecked={state.isChecked || Boolean(isIndeterminate)}\n              isDisabled={_isDisabled}\n              hasError={_hasError}\n              inputProps={inputProps}\n              tabIndex={tabIndex}\n              ref={ref}\n              {...makeAnalyticsAttribute(rest)}\n            />\n            <CheckboxIcon\n              size={_size}\n              isChecked={state.isChecked}\n              isIndeterminate={isIndeterminate}\n              isDisabled={_isDisabled}\n              isNegative={_hasError}\n            />\n            {children ? (\n              <SelectorTitle size={_size} isDisabled={_isDisabled}>\n                {children}\n              </SelectorTitle>\n            ) : null}\n          </BaseBox>\n          {showSupportingText ? (\n            <BaseBox marginLeft={helpTextLeftSpacing}>\n              <SelectorSupportText size={_size} id={ids?.helpTextId}>\n                {helpText}\n              </SelectorSupportText>\n            </BaseBox>\n          ) : null}\n        </BaseBox>\n      </SelectorLabel>\n      <FormHint\n        size={formHintSize[_size]}\n        errorText={errorText}\n        errorTextId={ids?.errorTextId}\n        type={validationState === 'error' ? 'error' : 'help'}\n      />\n    </BaseBox>\n  );\n};\n\nconst Checkbox = assignWithoutSideEffects(React.forwardRef(_Checkbox), {\n  displayName: 'Checkbox',\n});\n\nexport type { CheckboxProps };\nexport { Checkbox };\n"],"names":["_Checkbox","_ref","ref","_groupProps$state","_groupProps$size","defaultChecked","validationState","isChecked","isDisabled","isIndeterminate","isRequired","name","onChange","value","children","helpText","errorText","_ref$size","size","tabIndex","testID","rest","_objectWithoutProperties","_excluded","groupProps","useCheckboxGroupContext","hasValidationState","isUndefined","hasName","hasDefaultChecked","hasIsChecked","hasOnChange","__DEV__","isEmpty","props","undefined","filter","Boolean","join","throwBladeError","message","moduleName","Error","_validationState","_hasError","_isDisabled","_isRequired","necessityIndicator","_name","_isChecked","state","_size","_useTheme","useTheme","theme","formHintSize","small","medium","large","showSupportingText","handleChange","_ref2","event","_groupProps$state2","addValue","_groupProps$state3","removeValue","_useCheckbox","useCheckbox","hasError","hasHelperText","ids","inputProps","helpTextLeftSpacing","makeSize","checkboxSizes","icon","width","spacing","_jsxs","BaseBox","Object","assign","metaAttribute","MetaConstants","Checkbox","getStyledProps","_jsx","SelectorLabel","componentName","CheckboxLabel","isReactNative","style","cursor","display","flexDirection","SelectorInput","hoverTokens","checkboxHoverTokens","makeAnalyticsAttribute","CheckboxIcon","isNegative","SelectorTitle","marginLeft","SelectorSupportText","id","helpTextId","FormHint","errorTextId","type","assignWithoutSideEffects","React","forwardRef","displayName"],"mappings":"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"}
+{"version":3,"file":"Checkbox.js","sources":["../../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/restrict-plus-operands */\n/* eslint-disable @typescript-eslint/no-shadow */\nimport React from 'react';\nimport { useCheckboxGroupContext } from './CheckboxGroup/CheckboxGroupContext';\nimport { CheckboxIcon } from './CheckboxIcon';\nimport { useCheckbox } from './useCheckbox';\nimport { checkboxHoverTokens, checkboxSizes } from './checkboxTokens';\nimport isEmpty from '~utils/lodashButBetter/isEmpty';\nimport isUndefined from '~utils/lodashButBetter/isUndefined';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport BaseBox from '~components/Box/BaseBox';\nimport { FormHint } from '~components/Form';\nimport { SelectorLabel } from '~components/Form/Selector/SelectorLabel';\nimport { SelectorTitle } from '~components/Form/Selector/SelectorTitle';\nimport { SelectorSupportText } from '~components/Form/Selector/SelectorSupportText';\nimport { SelectorInput } from '~components/Form/Selector/SelectorInput';\nimport type { BladeElementRef, DataAnalyticsAttribute, TestID } from '~utils/types';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { throwBladeError } from '~utils/logger';\nimport { makeSize, useTheme } from '~utils';\nimport { getInnerMotionRef, getOuterMotionRef } from '~utils/getMotionRefs';\nimport type { MotionMetaProp } from '~components/BaseMotion';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\n\ntype OnChange = ({\n  isChecked,\n  event,\n  value,\n}: {\n  isChecked: boolean;\n  event?: React.ChangeEvent;\n  value?: string;\n}) => void;\n\ntype CheckboxProps = {\n  /**\n   * If `true`, The checkbox will be checked. This also makes the checkbox controlled\n   * Use `onChange` to update its value\n   *\n   * @default false\n   */\n  isChecked?: boolean;\n  /**\n   * If `true`, the checkbox will be initially checked. This also makes the checkbox uncontrolled\n   *\n   * @default false\n   */\n  defaultChecked?: boolean;\n  /**\n   * The callback invoked when the checked state of the `Checkbox` changes.\n   */\n  onChange?: OnChange;\n  /**\n   * Sets the label of the checkbox\n   */\n  children?: React.ReactNode;\n  /**\n   * Help text for the checkbox\n   */\n  helpText?: string;\n  /**\n   * Error text for the checkbox\n   *\n   * Renders when `validationState` is set to 'error'\n   */\n  errorText?: string;\n  /**\n   * If `true`, the checkbox will be indeterminate.\n   * This does not modify the isChecked property.\n   *\n   * @default false\n   */\n  isIndeterminate?: boolean;\n  /**\n   * The name of the input field in a checkbox\n   * (Useful for form submission).\n   */\n  name?: string;\n  /**\n   * The value to be used in the checkbox input.\n   * This is the value that will be returned on form submission.\n   */\n  value?: string;\n  /**\n   * If `true`, the checkbox will be disabled\n   *\n   * @default false\n   */\n  isDisabled?: boolean;\n  /**\n   * If `true`, the checkbox input is marked as required,\n   * and `required` attribute will be added\n   *\n   * @default false\n   */\n  isRequired?: boolean;\n  /**\n   * If `error`, the checkbox input is marked as invalid,\n   * and `invalid` attribute will be added\n   */\n  validationState?: 'error' | 'none';\n  /**\n   * Size of the checkbox\n   *\n   * @default \"medium\"\n   */\n  size?: 'small' | 'medium' | 'large';\n  /**\n   * Sets the tab-index property on checkbox element\n   *\n   */\n  tabIndex?: number;\n} & TestID &\n  DataAnalyticsAttribute &\n  StyledPropsBlade &\n  MotionMetaProp;\n\nconst _Checkbox: React.ForwardRefRenderFunction<BladeElementRef, CheckboxProps> = (\n  {\n    defaultChecked,\n    validationState,\n    isChecked,\n    isDisabled,\n    isIndeterminate,\n    isRequired,\n    name,\n    onChange,\n    value,\n    children,\n    helpText,\n    errorText,\n    size = 'medium',\n    tabIndex,\n    testID,\n    _motionMeta,\n    ...rest\n  },\n  ref,\n) => {\n  const groupProps = useCheckboxGroupContext();\n\n  // ban certain props in checkbox while inside group\n  const hasValidationState = !isUndefined(validationState);\n  const hasName = !isUndefined(name);\n  const hasDefaultChecked = !isUndefined(defaultChecked);\n  const hasIsChecked = !isUndefined(isChecked);\n  const hasOnChange = !isUndefined(onChange);\n\n  if (__DEV__) {\n    if (\n      (hasValidationState || hasName || hasDefaultChecked || hasIsChecked || hasOnChange) &&\n      !isEmpty(groupProps)\n    ) {\n      const props = [\n        hasValidationState ? 'validationState' : undefined,\n        hasName ? 'name' : undefined,\n        hasDefaultChecked ? 'defaultChecked' : undefined,\n        hasIsChecked ? 'isChecked' : undefined,\n        hasOnChange ? 'onChange' : undefined,\n      ]\n        .filter(Boolean)\n        .join(',');\n\n      throwBladeError({\n        message: `Cannot set \\`${props}\\` on <Checkbox /> when it's inside <CheckboxGroup />, Please set it on the <CheckboxGroup /> itself`,\n        moduleName: 'Checkbox',\n      });\n    }\n\n    // mandate value prop when using inside group\n    if (!value && !isEmpty(groupProps)) {\n      throw new Error(\n        `[Blade Checkbox]: <CheckboxGroup /> requires that you pass unique \"value\" prop to each <Checkbox />\n      <CheckboxGroup>\n        <Checkbox value=\"apple\">Apple</Checkbox>\n        <Checkbox value=\"mango\">Mango</Checkbox>\n      </CheckboxGroup>\n      `,\n      );\n    }\n  }\n\n  const _validationState = validationState ?? groupProps?.validationState;\n  const _hasError = _validationState === 'error';\n  const _isDisabled = isDisabled ?? groupProps?.isDisabled;\n  const _isRequired = Boolean(\n    isRequired || groupProps?.isRequired || groupProps?.necessityIndicator === 'required',\n  );\n  const _name = name ?? groupProps?.name;\n  // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion\n  const _isChecked = isChecked ?? groupProps?.state?.isChecked(value!);\n  const _size = groupProps.size ?? size;\n  const { theme } = useTheme();\n  const formHintSize = {\n    small: 'medium',\n    medium: 'medium',\n    large: 'large',\n  } as const;\n\n  const showSupportingText = helpText;\n\n  const handleChange: OnChange = ({ isChecked, event, value }) => {\n    if (isChecked) {\n      groupProps?.state?.addValue(value!);\n    } else {\n      groupProps?.state?.removeValue(value!);\n    }\n\n    onChange?.({ isChecked, event, value });\n  };\n\n  const { state, ids, inputProps } = useCheckbox({\n    defaultChecked,\n    isChecked: _isChecked,\n    isIndeterminate,\n    hasError: _hasError,\n    hasHelperText: Boolean(showSupportingText),\n    isDisabled: _isDisabled,\n    isRequired: _isRequired,\n    name: _name,\n    value,\n    onChange: handleChange,\n  });\n\n  // Checkbox icon's size & margin + margin-left of SelectorTitle which is 2\n  const helpTextLeftSpacing = makeSize(checkboxSizes.icon[size].width + theme.spacing[3]);\n\n  return (\n    <BaseBox\n      ref={getOuterMotionRef({ _motionMeta, ref })}\n      {...metaAttribute({ name: MetaConstants.Checkbox, testID })}\n      {...getStyledProps(rest)}\n    >\n      <SelectorLabel\n        componentName={MetaConstants.CheckboxLabel}\n        inputProps={state.isReactNative ? inputProps : {}}\n        style={{ cursor: isDisabled ? 'not-allowed' : 'pointer' }}\n      >\n        <BaseBox display=\"flex\" flexDirection=\"column\">\n          <BaseBox display=\"flex\" flexDirection=\"row\">\n            <SelectorInput\n              hoverTokens={checkboxHoverTokens}\n              isChecked={state.isChecked || Boolean(isIndeterminate)}\n              isDisabled={_isDisabled}\n              hasError={_hasError}\n              inputProps={inputProps}\n              tabIndex={tabIndex}\n              ref={getInnerMotionRef({ _motionMeta, ref })}\n              {...makeAnalyticsAttribute(rest)}\n            />\n            <CheckboxIcon\n              size={_size}\n              isChecked={state.isChecked}\n              isIndeterminate={isIndeterminate}\n              isDisabled={_isDisabled}\n              isNegative={_hasError}\n            />\n            {children ? (\n              <SelectorTitle size={_size} isDisabled={_isDisabled}>\n                {children}\n              </SelectorTitle>\n            ) : null}\n          </BaseBox>\n          {showSupportingText ? (\n            <BaseBox marginLeft={helpTextLeftSpacing}>\n              <SelectorSupportText size={_size} id={ids?.helpTextId}>\n                {helpText}\n              </SelectorSupportText>\n            </BaseBox>\n          ) : null}\n        </BaseBox>\n      </SelectorLabel>\n      <FormHint\n        size={formHintSize[_size]}\n        errorText={errorText}\n        errorTextId={ids?.errorTextId}\n        type={validationState === 'error' ? 'error' : 'help'}\n      />\n    </BaseBox>\n  );\n};\n\nconst Checkbox = assignWithoutSideEffects(React.forwardRef(_Checkbox), {\n  displayName: 'Checkbox',\n});\n\nexport type { CheckboxProps };\nexport { Checkbox };\n"],"names":["_Checkbox","_ref","ref","_groupProps$state","_groupProps$size","defaultChecked","validationState","isChecked","isDisabled","isIndeterminate","isRequired","name","onChange","value","children","helpText","errorText","_ref$size","size","tabIndex","testID","_motionMeta","rest","_objectWithoutProperties","_excluded","groupProps","useCheckboxGroupContext","hasValidationState","isUndefined","hasName","hasDefaultChecked","hasIsChecked","hasOnChange","__DEV__","isEmpty","props","undefined","filter","Boolean","join","throwBladeError","message","moduleName","Error","_validationState","_hasError","_isDisabled","_isRequired","necessityIndicator","_name","_isChecked","state","_size","_useTheme","useTheme","theme","formHintSize","small","medium","large","showSupportingText","handleChange","_ref2","event","_groupProps$state2","addValue","_groupProps$state3","removeValue","_useCheckbox","useCheckbox","hasError","hasHelperText","ids","inputProps","helpTextLeftSpacing","makeSize","checkboxSizes","icon","width","spacing","_jsxs","BaseBox","Object","assign","getOuterMotionRef","metaAttribute","MetaConstants","Checkbox","getStyledProps","_jsx","SelectorLabel","componentName","CheckboxLabel","isReactNative","style","cursor","display","flexDirection","SelectorInput","hoverTokens","checkboxHoverTokens","getInnerMotionRef","makeAnalyticsAttribute","CheckboxIcon","isNegative","SelectorTitle","marginLeft","SelectorSupportText","id","helpTextId","FormHint","errorTextId","type","assignWithoutSideEffects","React","forwardRef","displayName"],"mappings":"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"}

package/build/lib/native/components/Checkbox/CheckboxIcon/Fade.native.js

@@ -9,7 +9,7 @@ import '@babel/runtime/helpers/slicedToArray';
 import '../../BottomSheet/BottomSheetStack.js';
 import { jsx } from 'react/jsx-runtime';
 
-var StyledFade=styled(Animated.View)(function(_ref){var styles=_ref.styles;return Object.assign({},styles);});var Fade=function Fade(_ref2){var children=_ref2.children,show=_ref2.show,styles=_ref2.styles;var _useTheme=useTheme(),theme=_useTheme.theme;var fadeInEasing=theme.motion.easing.entrance.effective;var fadeOutEasing=theme.motion.easing.exit.effective;var fadeIn=new Keyframe({from:{transform:[{scale:0.6}],opacity:0,easing:fadeInEasing},to:{transform:[{scale:1}],opacity:1,easing:fadeInEasing}}).duration(theme.motion.duration.quick);var fadeOut=new Keyframe({from:{transform:[{scale:1}],opacity:1,easing:fadeOutEasing},to:{transform:[{scale:0.6}],opacity:0,easing:fadeOutEasing}}).duration(theme.motion.duration.quick);return show?jsx(StyledFade,{styles:styles,entering:fadeIn,exiting:fadeOut,children:children}):null;};
+var StyledFade=styled(Animated.View)(function(_ref){var styles=_ref.styles;return Object.assign({},styles);});var Fade=function Fade(_ref2){var children=_ref2.children,show=_ref2.show,styles=_ref2.styles;var _useTheme=useTheme(),theme=_useTheme.theme;var fadeInEasing=theme.motion.easing.entrance;var fadeOutEasing=theme.motion.easing.exit;var fadeIn=new Keyframe({from:{transform:[{scale:0.6}],opacity:0,easing:fadeInEasing},to:{transform:[{scale:1}],opacity:1,easing:fadeInEasing}}).duration(theme.motion.duration.quick);var fadeOut=new Keyframe({from:{transform:[{scale:1}],opacity:1,easing:fadeOutEasing},to:{transform:[{scale:0.6}],opacity:0,easing:fadeOutEasing}}).duration(theme.motion.duration.quick);return show?jsx(StyledFade,{styles:styles,entering:fadeIn,exiting:fadeOut,children:children}):null;};
 
 export { Fade };
 //# sourceMappingURL=Fade.native.js.map

package/build/lib/native/components/Checkbox/CheckboxIcon/Fade.native.js.map

@@ -1 +1 @@
-{"version":3,"file":"Fade.native.js","sources":["../../../../../../src/components/Checkbox/CheckboxIcon/Fade.native.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/explicit-function-return-type */\n/* eslint-disable @typescript-eslint/explicit-module-boundary-types */\nimport React from 'react';\nimport type { EasingFn } from 'react-native-reanimated';\nimport Animated, { Keyframe } from 'react-native-reanimated';\nimport type { CSSObject } from 'styled-components';\nimport styled from 'styled-components/native';\nimport type { FadeProps } from './types';\nimport { useTheme } from '~components/BladeProvider';\n\nconst StyledFade = styled(Animated.View)<{ styles: CSSObject }>(({ styles }) => {\n  return {\n    ...styles,\n  };\n});\n\nconst Fade = ({ children, show, styles }: FadeProps) => {\n  const { theme } = useTheme();\n\n  const fadeInEasing = (theme.motion.easing.entrance.effective as unknown) as EasingFn;\n  const fadeOutEasing = (theme.motion.easing.exit.effective as unknown) as EasingFn;\n  const fadeIn = new Keyframe({\n    from: {\n      transform: [{ scale: 0.6 }],\n      opacity: 0,\n      easing: fadeInEasing,\n    },\n    to: {\n      transform: [{ scale: 1 }],\n      opacity: 1,\n      easing: fadeInEasing,\n    },\n  }).duration(theme.motion.duration.quick);\n\n  const fadeOut = new Keyframe({\n    from: {\n      transform: [{ scale: 1 }],\n      opacity: 1,\n      easing: fadeOutEasing,\n    },\n    to: {\n      transform: [{ scale: 0.6 }],\n      opacity: 0,\n      easing: fadeOutEasing,\n    },\n  }).duration(theme.motion.duration.quick);\n\n  return show ? (\n    <StyledFade styles={styles as CSSObject} entering={fadeIn} exiting={fadeOut}>\n      {children}\n    </StyledFade>\n  ) : null;\n};\n\nexport { Fade };\n"],"names":["StyledFade","styled","Animated","View","_ref","styles","Object","assign","Fade","_ref2","children","show","_useTheme","useTheme","theme","fadeInEasing","motion","easing","entrance","effective","fadeOutEasing","exit","fadeIn","Keyframe","from","transform","scale","opacity","to","duration","quick","fadeOut","_jsx","entering","exiting"],"mappings":";;;;;;;;;;;AAUA,IAAMA,UAAU,CAAGC,MAAM,CAACC,QAAQ,CAACC,IAAI,CAAC,CAAwB,SAAAC,IAAA,CAAgB,KAAbC,MAAM,CAAAD,IAAA,CAANC,MAAM,CACvE,OAAAC,MAAA,CAAAC,MAAA,CACKF,EAAAA,CAAAA,MAAM,CAEb,CAAA,CAAC,CAAC,CAEI,IAAAG,IAAI,CAAG,SAAPA,IAAIA,CAAAC,KAAA,CAA8C,KAAxCC,QAAQ,CAAAD,KAAA,CAARC,QAAQ,CAAEC,IAAI,CAAAF,KAAA,CAAJE,IAAI,CAAEN,MAAM,CAAAI,KAAA,CAANJ,MAAM,CACpC,IAAAO,SAAA,CAAkBC,QAAQ,EAAE,CAApBC,KAAK,CAAAF,SAAA,CAALE,KAAK,CAEb,IAAMC,YAAY,CAAID,KAAK,CAACE,MAAM,CAACC,MAAM,CAACC,QAAQ,CAACC,SAAiC,CACpF,IAAMC,aAAa,CAAIN,KAAK,CAACE,MAAM,CAACC,MAAM,CAACI,IAAI,CAACF,SAAiC,CACjF,IAAMG,MAAM,CAAG,IAAIC,QAAQ,CAAC,CAC1BC,IAAI,CAAE,CACJC,SAAS,CAAE,CAAC,CAAEC,KAAK,CAAE,GAAI,CAAC,CAAC,CAC3BC,OAAO,CAAE,CAAC,CACVV,MAAM,CAAEF,YACV,CAAC,CACDa,EAAE,CAAE,CACFH,SAAS,CAAE,CAAC,CAAEC,KAAK,CAAE,CAAE,CAAC,CAAC,CACzBC,OAAO,CAAE,CAAC,CACVV,MAAM,CAAEF,YACV,CACF,CAAC,CAAC,CAACc,QAAQ,CAACf,KAAK,CAACE,MAAM,CAACa,QAAQ,CAACC,KAAK,CAAC,CAExC,IAAMC,OAAO,CAAG,IAAIR,QAAQ,CAAC,CAC3BC,IAAI,CAAE,CACJC,SAAS,CAAE,CAAC,CAAEC,KAAK,CAAE,CAAE,CAAC,CAAC,CACzBC,OAAO,CAAE,CAAC,CACVV,MAAM,CAAEG,aACV,CAAC,CACDQ,EAAE,CAAE,CACFH,SAAS,CAAE,CAAC,CAAEC,KAAK,CAAE,GAAI,CAAC,CAAC,CAC3BC,OAAO,CAAE,CAAC,CACVV,MAAM,CAAEG,aACV,CACF,CAAC,CAAC,CAACS,QAAQ,CAACf,KAAK,CAACE,MAAM,CAACa,QAAQ,CAACC,KAAK,CAAC,CAExC,OAAOnB,IAAI,CACTqB,GAAA,CAAChC,UAAU,CAACK,CAAAA,MAAM,CAAEA,MAAoB,CAAC4B,QAAQ,CAAEX,MAAO,CAACY,OAAO,CAAEH,OAAQ,CAAArB,QAAA,CACzEA,QAAQ,CACC,CAAC,CACX,IAAI,CACV;;;;"}
+{"version":3,"file":"Fade.native.js","sources":["../../../../../../src/components/Checkbox/CheckboxIcon/Fade.native.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/explicit-function-return-type */\n/* eslint-disable @typescript-eslint/explicit-module-boundary-types */\nimport React from 'react';\nimport type { EasingFn } from 'react-native-reanimated';\nimport Animated, { Keyframe } from 'react-native-reanimated';\nimport type { CSSObject } from 'styled-components';\nimport styled from 'styled-components/native';\nimport type { FadeProps } from './types';\nimport { useTheme } from '~components/BladeProvider';\n\nconst StyledFade = styled(Animated.View)<{ styles: CSSObject }>(({ styles }) => {\n  return {\n    ...styles,\n  };\n});\n\nconst Fade = ({ children, show, styles }: FadeProps) => {\n  const { theme } = useTheme();\n\n  const fadeInEasing = (theme.motion.easing.entrance as unknown) as EasingFn;\n  const fadeOutEasing = (theme.motion.easing.exit as unknown) as EasingFn;\n  const fadeIn = new Keyframe({\n    from: {\n      transform: [{ scale: 0.6 }],\n      opacity: 0,\n      easing: fadeInEasing,\n    },\n    to: {\n      transform: [{ scale: 1 }],\n      opacity: 1,\n      easing: fadeInEasing,\n    },\n  }).duration(theme.motion.duration.quick);\n\n  const fadeOut = new Keyframe({\n    from: {\n      transform: [{ scale: 1 }],\n      opacity: 1,\n      easing: fadeOutEasing,\n    },\n    to: {\n      transform: [{ scale: 0.6 }],\n      opacity: 0,\n      easing: fadeOutEasing,\n    },\n  }).duration(theme.motion.duration.quick);\n\n  return show ? (\n    <StyledFade styles={styles as CSSObject} entering={fadeIn} exiting={fadeOut}>\n      {children}\n    </StyledFade>\n  ) : null;\n};\n\nexport { Fade };\n"],"names":["StyledFade","styled","Animated","View","_ref","styles","Object","assign","Fade","_ref2","children","show","_useTheme","useTheme","theme","fadeInEasing","motion","easing","entrance","fadeOutEasing","exit","fadeIn","Keyframe","from","transform","scale","opacity","to","duration","quick","fadeOut","_jsx","entering","exiting"],"mappings":";;;;;;;;;;;AAUA,IAAMA,UAAU,CAAGC,MAAM,CAACC,QAAQ,CAACC,IAAI,CAAC,CAAwB,SAAAC,IAAA,CAAgB,CAAb,IAAAC,MAAM,CAAAD,IAAA,CAANC,MAAM,CACvE,OAAAC,MAAA,CAAAC,MAAA,CAAA,EAAA,CACKF,MAAM,CAAA,CAEb,CAAC,CAAC,CAEI,IAAAG,IAAI,CAAG,SAAPA,IAAIA,CAAAC,KAAA,CAA8C,CAAxC,IAAAC,QAAQ,CAAAD,KAAA,CAARC,QAAQ,CAAEC,IAAI,CAAAF,KAAA,CAAJE,IAAI,CAAEN,MAAM,CAAAI,KAAA,CAANJ,MAAM,CACpC,IAAAO,SAAA,CAAkBC,QAAQ,EAAE,CAApBC,KAAK,CAAAF,SAAA,CAALE,KAAK,CAEb,IAAMC,YAAY,CAAID,KAAK,CAACE,MAAM,CAACC,MAAM,CAACC,QAAgC,CAC1E,IAAMC,aAAa,CAAIL,KAAK,CAACE,MAAM,CAACC,MAAM,CAACG,IAA4B,CACvE,IAAMC,MAAM,CAAG,IAAIC,QAAQ,CAAC,CAC1BC,IAAI,CAAE,CACJC,SAAS,CAAE,CAAC,CAAEC,KAAK,CAAE,GAAI,CAAC,CAAC,CAC3BC,OAAO,CAAE,CAAC,CACVT,MAAM,CAAEF,YACV,CAAC,CACDY,EAAE,CAAE,CACFH,SAAS,CAAE,CAAC,CAAEC,KAAK,CAAE,CAAE,CAAC,CAAC,CACzBC,OAAO,CAAE,CAAC,CACVT,MAAM,CAAEF,YACV,CACF,CAAC,CAAC,CAACa,QAAQ,CAACd,KAAK,CAACE,MAAM,CAACY,QAAQ,CAACC,KAAK,CAAC,CAExC,IAAMC,OAAO,CAAG,IAAIR,QAAQ,CAAC,CAC3BC,IAAI,CAAE,CACJC,SAAS,CAAE,CAAC,CAAEC,KAAK,CAAE,CAAE,CAAC,CAAC,CACzBC,OAAO,CAAE,CAAC,CACVT,MAAM,CAAEE,aACV,CAAC,CACDQ,EAAE,CAAE,CACFH,SAAS,CAAE,CAAC,CAAEC,KAAK,CAAE,GAAI,CAAC,CAAC,CAC3BC,OAAO,CAAE,CAAC,CACVT,MAAM,CAAEE,aACV,CACF,CAAC,CAAC,CAACS,QAAQ,CAACd,KAAK,CAACE,MAAM,CAACY,QAAQ,CAACC,KAAK,CAAC,CAExC,OAAOlB,IAAI,CACToB,GAAA,CAAC/B,UAAU,CAACK,CAAAA,MAAM,CAAEA,MAAoB,CAAC2B,QAAQ,CAAEX,MAAO,CAACY,OAAO,CAAEH,OAAQ,CAAApB,QAAA,CACzEA,QAAQ,CACC,CAAC,CACX,IAAI,CACV;;;;"}

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

@@ -23,17 +23,19 @@ import { SelectorInput } from '../Form/Selector/SelectorInput.native.js';
 import { assignWithoutSideEffects } from '../../utils/assignWithoutSideEffects/assignWithoutSideEffects.js';
 import { useCheckbox } from '../Checkbox/useCheckbox.js';
 import { useRadio } from '../Radio/useRadio.js';
-import '../Typography/BaseText/BaseText.native.js';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import '../Typography/Heading/Heading.js';
 import { Text } from '../Typography/Text/Text.js';
 import '../Typography/Code/Code.js';
+import '../Typography/Display/Display.js';
 import 'styled-components/native';
 import '@gorhom/portal';
 import 'react-native-gesture-handler';
 import '../BottomSheet/BottomSheetStack.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { getOuterMotionRef, getInnerMotionRef } from '../../utils/getMotionRefs.js';
 import { makeAnalyticsAttribute } from '../../utils/makeAnalyticsAttribute/makeAnalyticsAttribute.js';
 
-var _excluded=["isDisabled","value","children","icon","color","testID"];var _Chip=function _Chip(_ref,ref){var _groupProps$state,_groupProps$defaultVa,_ref2;var isDisabled=_ref.isDisabled,value=_ref.value,children=_ref.children,Icon=_ref.icon,color=_ref.color,testID=_ref.testID,rest=_objectWithoutProperties(_ref,_excluded);var _useTheme=useTheme(),theme=_useTheme.theme;var _useBreakpoint=useBreakpoint({breakpoints:theme.breakpoints}),matchedDeviceType=_useBreakpoint.matchedDeviceType;var groupProps=useChipGroupContext();var isInsideGroup=!isEmpty(groupProps);var _React$useState=React__default.useState(false),_React$useState2=_slicedToArray(_React$useState,2),isPressed=_React$useState2[0],setIsPressed=_React$useState2[1];if(__DEV__){if(!isInsideGroup){throwBladeError({moduleName:'Chip',message:'<Chip /> component should only be used within the context of a <ChipGroup /> component'});}}var hasError=(groupProps==null?void 0:groupProps.validationState)==='error';var _isDisabled=isDisabled!=null?isDisabled:groupProps==null?void 0:groupProps.isDisabled;var _isRequired=(groupProps==null?void 0:groupProps.isRequired)||(groupProps==null?void 0:groupProps.necessityIndicator)==='required';var _name=groupProps==null?void 0:groupProps.name;var _isChecked=groupProps==null?void 0:(_groupProps$state=groupProps.state)==null?void 0:_groupProps$state.isChecked(value);var defaultChecked=typeof(groupProps==null?void 0:groupProps.defaultValue)==='undefined'?undefined:groupProps==null?void 0:(_groupProps$defaultVa=groupProps.defaultValue)==null?void 0:_groupProps$defaultVa.includes(value);var useChip=(groupProps==null?void 0:groupProps.selectionType)==='single'?useRadio:useCheckbox;var _size=(groupProps==null?void 0:groupProps.size)||'small';var chipColor=(_ref2=color!=null?color:groupProps==null?void 0:groupProps.color)!=null?_ref2:'primary';var handleChange=function handleChange(_ref3){var isChecked=_ref3.isChecked,value=_ref3.value;if(isChecked){var _groupProps$state2;groupProps==null?void 0:(_groupProps$state2=groupProps.state)==null?void 0:_groupProps$state2.addValue(value);}else {var _groupProps$state3;groupProps==null?void 0:(_groupProps$state3=groupProps.state)==null?void 0:_groupProps$state3.removeValue(value);}};var _useChip=useChip({defaultChecked:defaultChecked,isChecked:_isChecked,isDisabled:_isDisabled,isRequired:_isRequired,hasError:hasError,name:_name,value:value,onChange:handleChange}),state=_useChip.state,inputProps=_useChip.inputProps;var handlePointerPressedIn=React__default.useCallback(function(){if(_isDisabled)return;setIsPressed(true);},[_isDisabled]);var handlePointerPressedOut=React__default.useCallback(function(){if(_isDisabled)return;setIsPressed(false);},[_isDisabled]);var handleKeyboardPressedIn=React__default.useCallback(function(e){if(_isDisabled)return;if(e.key===' '){setIsPressed(true);}},[_isDisabled]);var handleKeyboardPressedOut=React__default.useCallback(function(e){if(_isDisabled)return;if(e.key===' '){setIsPressed(false);}},[_isDisabled]);var textVariant='unchecked';if(_isChecked&&chipColor){textVariant=chipColor;}if(_isDisabled){textVariant='disabled';}var chipTextColor=chipColorTokens.text[textVariant];var chipIconColor=chipColorTokens.icon[textVariant];var colorVariant='unchecked';var stateVariant=_isDisabled?'disabled':'default';if(_isChecked&&chipColor){colorVariant=chipColor;}var chipBackgroundColor=chipColorTokens.background[colorVariant][stateVariant];var chipBorderColor=chipColorTokens.border[colorVariant][stateVariant];return jsx(BaseBox,Object.assign({},metaAttribute({name:MetaConstants.Chip,testID:testID}),getStyledProps(rest),makeAnalyticsAttribute(rest),{display:isReactNative()?'flex':'inline-flex',children:jsx(SelectorLabel,{componentName:MetaConstants.ChipLabel,onTouchStart:handlePointerPressedIn,onTouchEnd:handlePointerPressedOut,onMouseDown:handlePointerPressedIn,onMouseUp:handlePointerPressedOut,onMouseOut:handlePointerPressedOut,onKeyDown:handleKeyboardPressedIn,onKeyUp:handleKeyboardPressedOut,inputProps:isReactNative()?inputProps:{},style:{cursor:_isDisabled?'not-allowed':'pointer'},children:jsx(BaseBox,{display:"flex",flexDirection:"column",children:jsxs(BaseBox,{display:"flex",alignItems:"center",flexDirection:"row",children:[jsx(SelectorInput,{hoverTokens:getChipInputHoverTokens(chipColor),isChecked:state.isChecked,isDisabled:_isDisabled,inputProps:inputProps,hasError:hasError,ref:ref}),jsx(AnimatedChip,{borderColor:chipBorderColor,isDisabled:_isDisabled,isPressed:isPressed,isDesktop:matchedDeviceType==='desktop',children:jsxs(StyledChipWrapper,{borderColor:chipBorderColor,isChecked:_isChecked,isDisabled:_isDisabled,color:chipColor,display:"flex",flexDirection:"row",justifyContent:"center",alignItems:"center",overflow:"hidden",backgroundColor:chipBackgroundColor,borderRadius:"max",borderWidth:['xsmall','small'].includes(_size)?'thinner':'thin',paddingLeft:chipHorizontalPaddingTokens[Boolean(Icon)?'withIcon':'withoutIcon'].left[_size],paddingRight:chipHorizontalPaddingTokens[Boolean(Icon)?'withIcon':'withoutIcon'].right[_size],height:makeSize(chipHeightTokens[_size]),children:[Icon?jsx(BaseBox,{paddingRight:"spacing.3",display:"flex",children:jsx(Icon,{color:chipIconColor,size:chipIconSizes[_size]})}):null,jsx(Text,Object.assign({},chipTextSizes[_size],{truncateAfterLines:1,color:chipTextColor,children:children}))]})})]})})})}));};var Chip=assignWithoutSideEffects(React__default.forwardRef(_Chip),{displayName:'Chip'});
+var _excluded=["isDisabled","value","children","icon","color","testID","_motionMeta"];var _Chip=function _Chip(_ref,ref){var _groupProps$state,_groupProps$defaultVa,_ref2;var isDisabled=_ref.isDisabled,value=_ref.value,children=_ref.children,Icon=_ref.icon,color=_ref.color,testID=_ref.testID,_motionMeta=_ref._motionMeta,rest=_objectWithoutProperties(_ref,_excluded);var _useTheme=useTheme(),theme=_useTheme.theme;var _useBreakpoint=useBreakpoint({breakpoints:theme.breakpoints}),matchedDeviceType=_useBreakpoint.matchedDeviceType;var groupProps=useChipGroupContext();var isInsideGroup=!isEmpty(groupProps);var _React$useState=React__default.useState(false),_React$useState2=_slicedToArray(_React$useState,2),isPressed=_React$useState2[0],setIsPressed=_React$useState2[1];if(__DEV__){if(!isInsideGroup){throwBladeError({moduleName:'Chip',message:'<Chip /> component should only be used within the context of a <ChipGroup /> component'});}}var hasError=(groupProps==null?void 0:groupProps.validationState)==='error';var _isDisabled=isDisabled!=null?isDisabled:groupProps==null?void 0:groupProps.isDisabled;var _isRequired=(groupProps==null?void 0:groupProps.isRequired)||(groupProps==null?void 0:groupProps.necessityIndicator)==='required';var _name=groupProps==null?void 0:groupProps.name;var _isChecked=groupProps==null?void 0:(_groupProps$state=groupProps.state)==null?void 0:_groupProps$state.isChecked(value);var defaultChecked=typeof(groupProps==null?void 0:groupProps.defaultValue)==='undefined'?undefined:groupProps==null?void 0:(_groupProps$defaultVa=groupProps.defaultValue)==null?void 0:_groupProps$defaultVa.includes(value);var useChip=(groupProps==null?void 0:groupProps.selectionType)==='single'?useRadio:useCheckbox;var _size=(groupProps==null?void 0:groupProps.size)||'small';var chipColor=(_ref2=color!=null?color:groupProps==null?void 0:groupProps.color)!=null?_ref2:'primary';var handleChange=function handleChange(_ref3){var isChecked=_ref3.isChecked,value=_ref3.value;if(isChecked){var _groupProps$state2;groupProps==null?void 0:(_groupProps$state2=groupProps.state)==null?void 0:_groupProps$state2.addValue(value);}else {var _groupProps$state3;groupProps==null?void 0:(_groupProps$state3=groupProps.state)==null?void 0:_groupProps$state3.removeValue(value);}};var _useChip=useChip({defaultChecked:defaultChecked,isChecked:_isChecked,isDisabled:_isDisabled,isRequired:_isRequired,hasError:hasError,name:_name,value:value,onChange:handleChange}),state=_useChip.state,inputProps=_useChip.inputProps;var handlePointerPressedIn=React__default.useCallback(function(){if(_isDisabled)return;setIsPressed(true);},[_isDisabled]);var handlePointerPressedOut=React__default.useCallback(function(){if(_isDisabled)return;setIsPressed(false);},[_isDisabled]);var handleKeyboardPressedIn=React__default.useCallback(function(e){if(_isDisabled)return;if(e.key===' '){setIsPressed(true);}},[_isDisabled]);var handleKeyboardPressedOut=React__default.useCallback(function(e){if(_isDisabled)return;if(e.key===' '){setIsPressed(false);}},[_isDisabled]);var textVariant='unchecked';if(_isChecked&&chipColor){textVariant=chipColor;}if(_isDisabled){textVariant='disabled';}var chipTextColor=chipColorTokens.text[textVariant];var chipIconColor=chipColorTokens.icon[textVariant];var colorVariant='unchecked';var stateVariant=_isDisabled?'disabled':'default';if(_isChecked&&chipColor){colorVariant=chipColor;}var chipBackgroundColor=chipColorTokens.background[colorVariant][stateVariant];var chipBorderColor=chipColorTokens.border[colorVariant][stateVariant];return jsx(BaseBox,Object.assign({},metaAttribute({name:MetaConstants.Chip,testID:testID}),getStyledProps(rest),makeAnalyticsAttribute(rest),{display:isReactNative()?'flex':'inline-flex',ref:getOuterMotionRef({_motionMeta:_motionMeta,ref:ref}),children:jsx(SelectorLabel,{componentName:MetaConstants.ChipLabel,onTouchStart:handlePointerPressedIn,onTouchEnd:handlePointerPressedOut,onMouseDown:handlePointerPressedIn,onMouseUp:handlePointerPressedOut,onMouseOut:handlePointerPressedOut,onKeyDown:handleKeyboardPressedIn,onKeyUp:handleKeyboardPressedOut,inputProps:isReactNative()?inputProps:{},style:{cursor:_isDisabled?'not-allowed':'pointer'},children:jsx(BaseBox,{display:"flex",flexDirection:"column",children:jsxs(BaseBox,{display:"flex",alignItems:"center",flexDirection:"row",children:[jsx(SelectorInput,{hoverTokens:getChipInputHoverTokens(chipColor),isChecked:state.isChecked,isDisabled:_isDisabled,inputProps:inputProps,hasError:hasError,ref:getInnerMotionRef({_motionMeta:_motionMeta,ref:ref})}),jsx(AnimatedChip,{borderColor:chipBorderColor,isDisabled:_isDisabled,isPressed:isPressed,isDesktop:matchedDeviceType==='desktop',children:jsxs(StyledChipWrapper,{borderColor:chipBorderColor,isChecked:_isChecked,isDisabled:_isDisabled,color:chipColor,display:"flex",flexDirection:"row",justifyContent:"center",alignItems:"center",overflow:"hidden",backgroundColor:chipBackgroundColor,borderRadius:"max",borderWidth:['xsmall','small'].includes(_size)?'thinner':'thin',paddingLeft:chipHorizontalPaddingTokens[Boolean(Icon)?'withIcon':'withoutIcon'].left[_size],paddingRight:chipHorizontalPaddingTokens[Boolean(Icon)?'withIcon':'withoutIcon'].right[_size],height:makeSize(chipHeightTokens[_size]),children:[Icon?jsx(BaseBox,{paddingRight:"spacing.3",display:"flex",children:jsx(Icon,{color:chipIconColor,size:chipIconSizes[_size]})}):null,jsx(Text,Object.assign({},chipTextSizes[_size],{truncateAfterLines:1,color:chipTextColor,children:children}))]})})]})})})}));};var Chip=assignWithoutSideEffects(React__default.forwardRef(_Chip),{displayName:'Chip'});
 
 export { Chip };
 //# sourceMappingURL=Chip.js.map