@razorpay/blade 12.67.0 → 12.89.0

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

@@ -1 +1 @@
-{"version":3,"file":"RadioIcon.js","sources":["../../../../../../src/components/Radio/RadioIcon/RadioIcon.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/explicit-function-return-type */\n/* eslint-disable @typescript-eslint/explicit-module-boundary-types */\nimport React from 'react';\nimport { radioIconColors, radioSizes } from '../radioTokens';\nimport type { RadioProps } from '../Radio';\nimport { RadioIconWrapper } from './RadioIconWrapper';\nimport { Fade } from './Fade';\nimport getIn from '~utils/lodashButBetter/get';\nimport { useTheme } from '~components/BladeProvider';\nimport Svg from '~components/Icons/_Svg';\nimport Circle from '~components/Icons/_Svg/Circle';\nimport { makeSpace } from '~utils/makeSpace';\nimport { metaAttribute } from '~utils/metaAttribute';\n\nexport type RadioIconProps = {\n  isDisabled?: boolean;\n  isNegative?: boolean;\n  isChecked?: boolean;\n} & Required<Pick<RadioProps, 'size'>>;\n\nconst CheckedIcon = ({ color, size }: { color: string; size: RadioIconProps['size'] }) => {\n  const width = radioSizes.icon[size].width;\n  const height = radioSizes.icon[size].height;\n  const radius = radioSizes.icon[size].dotRadius;\n  const viewBox = `0 0 ${width} ${height}`;\n  const cx = `${width / 2}`;\n  const cy = `${height / 2}`;\n\n  return (\n    <Svg width={makeSpace(width)} height={makeSpace(height)} viewBox={viewBox} fill=\"none\">\n      <Circle cx={cx} cy={cy} r={`${radius}`} fill={color} />\n    </Svg>\n  );\n};\n\nconst RadioIcon = ({ isChecked, isDisabled, isNegative, size }: RadioIconProps) => {\n  const { theme } = useTheme();\n\n  const checked = Boolean(isChecked);\n  const state = checked ? 'checked' : 'unchecked';\n  let variant: 'default' | 'disabled' | 'negative' = 'default';\n  if (isDisabled) variant = 'disabled';\n  if (isNegative) variant = 'negative';\n  const dotColorToken = radioIconColors.variants[variant].dot[state];\n  const dotColor = getIn(theme, dotColorToken);\n\n  return (\n    <RadioIconWrapper\n      size={size}\n      isDisabled={isDisabled}\n      isNegative={isNegative}\n      isChecked={checked}\n      {...metaAttribute({ name: 'radio-icon-wrapper' })}\n    >\n      <Fade show={checked} styles={{ position: 'absolute', display: 'flex' }}>\n        <CheckedIcon size={size} color={dotColor} />\n      </Fade>\n    </RadioIconWrapper>\n  );\n};\n\nexport { RadioIcon };\n"],"names":["CheckedIcon","_ref","color","size","width","radioSizes","icon","height","radius","dotRadius","viewBox","cx","cy","_jsx","Svg","makeSpace","fill","children","Circle","r","RadioIcon","_ref2","isChecked","isDisabled","isNegative","_useTheme","useTheme","theme","checked","Boolean","state","variant","dotColorToken","radioIconColors","variants","dot","dotColor","getIn","RadioIconWrapper","Object","assign","metaAttribute","name","Fade","show","styles","position","display"],"mappings":";;;;;;;;;;;;;;;;;;;AAoBA,IAAMA,WAAW,CAAG,SAAdA,WAAWA,CAAAC,IAAA,CAAyE,CAAA,IAAnEC,KAAK,CAAAD,IAAA,CAALC,KAAK,CAAEC,IAAI,CAAAF,IAAA,CAAJE,IAAI,CAChC,IAAMC,KAAK,CAAGC,UAAU,CAACC,IAAI,CAACH,IAAI,CAAC,CAACC,KAAK,CACzC,IAAMG,MAAM,CAAGF,UAAU,CAACC,IAAI,CAACH,IAAI,CAAC,CAACI,MAAM,CAC3C,IAAMC,MAAM,CAAGH,UAAU,CAACC,IAAI,CAACH,IAAI,CAAC,CAACM,SAAS,CAC9C,IAAMC,OAAO,CAAG,CAAON,IAAAA,EAAAA,KAAK,IAAIG,MAAM,CAAA,CAAE,CACxC,IAAMI,EAAE,CAAG,CAAA,EAAGP,KAAK,CAAG,CAAC,EAAE,CACzB,IAAMQ,EAAE,CAAG,GAAGL,MAAM,CAAG,CAAC,CAAE,CAAA,CAE1B,OACEM,GAAA,CAACC,GAAG,CAAA,CAACV,KAAK,CAAEW,SAAS,CAACX,KAAK,CAAE,CAACG,MAAM,CAAEQ,SAAS,CAACR,MAAM,CAAE,CAACG,OAAO,CAAEA,OAAQ,CAACM,IAAI,CAAC,MAAM,CAAAC,QAAA,CACpFJ,GAAA,CAACK,MAAM,CAAA,CAACP,EAAE,CAAEA,EAAG,CAACC,EAAE,CAAEA,EAAG,CAACO,CAAC,CAAE,CAAGX,EAAAA,MAAM,EAAG,CAACQ,IAAI,CAAEd,KAAM,CAAE,CAAC,CACpD,CAAC,CAEV,CAAC,CAEK,IAAAkB,SAAS,CAAG,SAAZA,SAASA,CAAAC,KAAA,CAAoE,KAA9DC,SAAS,CAAAD,KAAA,CAATC,SAAS,CAAEC,UAAU,CAAAF,KAAA,CAAVE,UAAU,CAAEC,UAAU,CAAAH,KAAA,CAAVG,UAAU,CAAErB,IAAI,CAAAkB,KAAA,CAAJlB,IAAI,CAC1D,IAAAsB,SAAA,CAAkBC,QAAQ,EAAE,CAApBC,KAAK,CAAAF,SAAA,CAALE,KAAK,CAEb,IAAMC,OAAO,CAAGC,OAAO,CAACP,SAAS,CAAC,CAClC,IAAMQ,KAAK,CAAGF,OAAO,CAAG,SAAS,CAAG,WAAW,CAC/C,IAAIG,OAA4C,CAAG,SAAS,CAC5D,GAAIR,UAAU,CAAEQ,OAAO,CAAG,UAAU,CACpC,GAAIP,UAAU,CAAEO,OAAO,CAAG,UAAU,CACpC,IAAMC,aAAa,CAAGC,eAAe,CAACC,QAAQ,CAACH,OAAO,CAAC,CAACI,GAAG,CAACL,KAAK,CAAC,CAClE,IAAMM,QAAQ,CAAGC,KAAK,CAACV,KAAK,CAAEK,aAAa,CAAC,CAE5C,OACEnB,GAAA,CAACyB,gBAAgB,CAAAC,MAAA,CAAAC,MAAA,CACfrC,CAAAA,IAAI,CAAEA,IAAK,CACXoB,UAAU,CAAEA,UAAW,CACvBC,UAAU,CAAEA,UAAW,CACvBF,SAAS,CAAEM,OAAQ,CAAA,CACfa,aAAa,CAAC,CAAEC,IAAI,CAAE,oBAAqB,CAAC,CAAC,CAAAzB,CAAAA,QAAA,CAEjDJ,GAAA,CAAC8B,IAAI,CAACC,CAAAA,IAAI,CAAEhB,OAAQ,CAACiB,MAAM,CAAE,CAAEC,QAAQ,CAAE,UAAU,CAAEC,OAAO,CAAE,MAAO,CAAE,CAAA9B,QAAA,CACrEJ,GAAA,CAACb,WAAW,CAAA,CAACG,IAAI,CAAEA,IAAK,CAACD,KAAK,CAAEkC,QAAS,CAAE,CAAC,CACxC,CAAC,CAAA,CACS,CAAC,CAEvB;;;;"}
+{"version":3,"file":"RadioIcon.js","sources":["../../../../../../src/components/Radio/RadioIcon/RadioIcon.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/explicit-function-return-type */\n/* eslint-disable @typescript-eslint/explicit-module-boundary-types */\nimport React from 'react';\nimport { radioIconColors, radioSizes } from '../radioTokens';\nimport type { RadioProps } from '../Radio';\nimport { RadioIconWrapper } from './RadioIconWrapper';\nimport { Fade } from './Fade';\nimport getIn from '~utils/lodashButBetter/get';\nimport { useTheme } from '~components/BladeProvider';\nimport Svg from '~components/Icons/_Svg';\nimport Circle from '~components/Icons/_Svg/Circle';\nimport { makeSpace } from '~utils/makeSpace';\nimport { metaAttribute } from '~utils/metaAttribute';\n\nexport type RadioIconProps = {\n  isDisabled?: boolean;\n  isNegative?: boolean;\n  isChecked?: boolean;\n} & Required<Pick<RadioProps, 'size'>>;\n\nconst CheckedIcon = ({ color, size }: { color: string; size: RadioIconProps['size'] }) => {\n  const width = radioSizes.icon[size].width;\n  const height = radioSizes.icon[size].height;\n  const radius = radioSizes.icon[size].dotRadius;\n  const viewBox = `0 0 ${width} ${height}`;\n  const cx = `${width / 2}`;\n  const cy = `${height / 2}`;\n\n  return (\n    <Svg width={makeSpace(width)} height={makeSpace(height)} viewBox={viewBox} fill=\"none\">\n      <Circle cx={cx} cy={cy} r={`${radius}`} fill={color} />\n    </Svg>\n  );\n};\n\nconst RadioIcon = ({ isChecked, isDisabled, isNegative, size }: RadioIconProps) => {\n  const { theme } = useTheme();\n\n  const checked = Boolean(isChecked);\n  const state = checked ? 'checked' : 'unchecked';\n  let variant: 'default' | 'disabled' | 'negative' = 'default';\n  if (isDisabled) variant = 'disabled';\n  if (isNegative) variant = 'negative';\n  const dotColorToken = radioIconColors.variants[variant].dot[state];\n  const dotColor = getIn(theme, dotColorToken);\n\n  return (\n    <RadioIconWrapper\n      size={size}\n      isDisabled={isDisabled}\n      isNegative={isNegative}\n      isChecked={checked}\n      {...metaAttribute({ name: 'radio-icon-wrapper' })}\n    >\n      <Fade show={checked} styles={{ position: 'absolute', display: 'flex' }}>\n        <CheckedIcon size={size} color={dotColor} />\n      </Fade>\n    </RadioIconWrapper>\n  );\n};\n\nexport { RadioIcon };\n"],"names":["CheckedIcon","_ref","color","size","width","radioSizes","icon","height","radius","dotRadius","viewBox","cx","cy","_jsx","Svg","makeSpace","fill","children","Circle","r","RadioIcon","_ref2","isChecked","isDisabled","isNegative","_useTheme","useTheme","theme","checked","Boolean","state","variant","dotColorToken","radioIconColors","variants","dot","dotColor","getIn","RadioIconWrapper","Object","assign","metaAttribute","name","Fade","show","styles","position","display"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAoBA,IAAMA,WAAW,CAAG,SAAdA,WAAWA,CAAAC,IAAA,CAAyE,CAAA,IAAnEC,KAAK,CAAAD,IAAA,CAALC,KAAK,CAAEC,IAAI,CAAAF,IAAA,CAAJE,IAAI,CAChC,IAAMC,KAAK,CAAGC,UAAU,CAACC,IAAI,CAACH,IAAI,CAAC,CAACC,KAAK,CACzC,IAAMG,MAAM,CAAGF,UAAU,CAACC,IAAI,CAACH,IAAI,CAAC,CAACI,MAAM,CAC3C,IAAMC,MAAM,CAAGH,UAAU,CAACC,IAAI,CAACH,IAAI,CAAC,CAACM,SAAS,CAC9C,IAAMC,OAAO,CAAG,CAAON,IAAAA,EAAAA,KAAK,IAAIG,MAAM,CAAA,CAAE,CACxC,IAAMI,EAAE,CAAG,CAAA,EAAGP,KAAK,CAAG,CAAC,EAAE,CACzB,IAAMQ,EAAE,CAAG,GAAGL,MAAM,CAAG,CAAC,CAAE,CAAA,CAE1B,OACEM,GAAA,CAACC,GAAG,CAAA,CAACV,KAAK,CAAEW,SAAS,CAACX,KAAK,CAAE,CAACG,MAAM,CAAEQ,SAAS,CAACR,MAAM,CAAE,CAACG,OAAO,CAAEA,OAAQ,CAACM,IAAI,CAAC,MAAM,CAAAC,QAAA,CACpFJ,GAAA,CAACK,MAAM,CAAA,CAACP,EAAE,CAAEA,EAAG,CAACC,EAAE,CAAEA,EAAG,CAACO,CAAC,CAAE,CAAGX,EAAAA,MAAM,EAAG,CAACQ,IAAI,CAAEd,KAAM,CAAE,CAAC,CACpD,CAAC,CAEV,CAAC,CAEK,IAAAkB,SAAS,CAAG,SAAZA,SAASA,CAAAC,KAAA,CAAoE,KAA9DC,SAAS,CAAAD,KAAA,CAATC,SAAS,CAAEC,UAAU,CAAAF,KAAA,CAAVE,UAAU,CAAEC,UAAU,CAAAH,KAAA,CAAVG,UAAU,CAAErB,IAAI,CAAAkB,KAAA,CAAJlB,IAAI,CAC1D,IAAAsB,SAAA,CAAkBC,QAAQ,EAAE,CAApBC,KAAK,CAAAF,SAAA,CAALE,KAAK,CAEb,IAAMC,OAAO,CAAGC,OAAO,CAACP,SAAS,CAAC,CAClC,IAAMQ,KAAK,CAAGF,OAAO,CAAG,SAAS,CAAG,WAAW,CAC/C,IAAIG,OAA4C,CAAG,SAAS,CAC5D,GAAIR,UAAU,CAAEQ,OAAO,CAAG,UAAU,CACpC,GAAIP,UAAU,CAAEO,OAAO,CAAG,UAAU,CACpC,IAAMC,aAAa,CAAGC,eAAe,CAACC,QAAQ,CAACH,OAAO,CAAC,CAACI,GAAG,CAACL,KAAK,CAAC,CAClE,IAAMM,QAAQ,CAAGC,KAAK,CAACV,KAAK,CAAEK,aAAa,CAAC,CAE5C,OACEnB,GAAA,CAACyB,gBAAgB,CAAAC,MAAA,CAAAC,MAAA,CACfrC,CAAAA,IAAI,CAAEA,IAAK,CACXoB,UAAU,CAAEA,UAAW,CACvBC,UAAU,CAAEA,UAAW,CACvBF,SAAS,CAAEM,OAAQ,CAAA,CACfa,aAAa,CAAC,CAAEC,IAAI,CAAE,oBAAqB,CAAC,CAAC,CAAAzB,CAAAA,QAAA,CAEjDJ,GAAA,CAAC8B,IAAI,CAACC,CAAAA,IAAI,CAAEhB,OAAQ,CAACiB,MAAM,CAAE,CAAEC,QAAQ,CAAE,UAAU,CAAEC,OAAO,CAAE,MAAO,CAAE,CAAA9B,QAAA,CACrEJ,GAAA,CAACb,WAAW,CAAA,CAACG,IAAI,CAAEA,IAAK,CAACD,KAAK,CAAEkC,QAAS,CAAE,CAAC,CACxC,CAAC,CAAA,CACS,CAAC,CAEvB;;;;"}

package/build/lib/native/components/Radio/RadioIcon/RadioIconWrapperStyles.js

@@ -9,9 +9,12 @@ import { makeBorderSize } from '../../../utils/makeBorderSize/makeBorderSize.js'
 import { makeMotionTime } from '../../../utils/makeMotionTime/makeMotionTime.native.js';
 import { makeSpace } from '../../../utils/makeSpace/makeSpace.js';
 import { makeSize } from '../../../utils/makeSize/makeSize.js';
+import '../../../tokens/global/typography.js';
+import '../../../tokens/global/motion.js';
+import { size } from '../../../tokens/global/size.js';
 import '../../BladeProvider/useTheme.js';
 
-var getRadioIconWrapperStyles=function getRadioIconWrapperStyles(_ref){var theme=_ref.theme,isChecked=_ref.isChecked,isDisabled=_ref.isDisabled,isNegative=_ref.isNegative,size=_ref.size;var isReactNative=getPlatformType()==='react-native';var variant='default';if(isDisabled)variant='disabled';if(isNegative)variant='negative';var checked=isChecked?'checked':'unchecked';var background=radioIconColors.variants[variant].background[checked];var border=radioIconColors.variants[variant].border[checked];var backgroundColor=getIn(theme,background);var borderColor=getIn(theme,border);return Object.assign({position:'relative',display:'flex',alignItems:'center',justifyContent:'center',minWidth:makeSpace(radioSizes.icon[size].width),width:makeSpace(radioSizes.icon[size].width),height:makeSpace(radioSizes.icon[size].height),borderWidth:makeBorderSize(theme.border.width.thick),borderStyle:'solid',margin:makeSpace(theme.spacing[1]),borderRadius:makeSize(theme.border.radius.max),backgroundColor:backgroundColor,borderColor:borderColor},!isReactNative&&{transitionDuration:castWebType(makeMotionTime(theme.motion.duration.xquick)),transitionTimingFunction:castWebType(theme.motion.easing.exit)});};
+var getRadioIconWrapperStyles=function getRadioIconWrapperStyles(_ref){var theme=_ref.theme,isChecked=_ref.isChecked,isDisabled=_ref.isDisabled,isNegative=_ref.isNegative,size$1=_ref.size;var isReactNative=getPlatformType()==='react-native';var variant='default';if(isDisabled)variant='disabled';if(isNegative)variant='negative';var checked=isChecked?'checked':'unchecked';var background=radioIconColors.variants[variant].background[checked];var border=radioIconColors.variants[variant].border[checked];var backgroundColor=getIn(theme,background);var borderColor=getIn(theme,border);return Object.assign({position:'relative',display:'flex',alignItems:'center',justifyContent:'center',minWidth:makeSpace(radioSizes.icon[size$1].width),width:makeSpace(radioSizes.icon[size$1].width),height:makeSpace(radioSizes.icon[size$1].height),borderWidth:makeBorderSize(theme.border.width.thick),borderStyle:'solid',margin:makeSpace(theme.spacing[1]),marginTop:size$1==='small'?makeSize(size['3']):undefined,borderRadius:makeSize(theme.border.radius.max),backgroundColor:backgroundColor,borderColor:borderColor},!isReactNative&&{transitionDuration:castWebType(makeMotionTime(theme.motion.duration.xquick)),transitionTimingFunction:castWebType(theme.motion.easing.exit)});};
 
 export { getRadioIconWrapperStyles };
 //# sourceMappingURL=RadioIconWrapperStyles.js.map

package/build/lib/native/components/Radio/RadioIcon/RadioIconWrapperStyles.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioIconWrapperStyles.js","sources":["../../../../../../src/components/Radio/RadioIcon/RadioIconWrapperStyles.ts"],"sourcesContent":["import type { CSSObject } from 'styled-components';\nimport { radioIconColors, radioSizes } from '../radioTokens';\nimport type { RadioIconProps } from './RadioIcon';\nimport getIn from '~utils/lodashButBetter/get';\nimport type { Theme } from '~components/BladeProvider';\nimport { castWebType, getPlatformType } from '~utils';\nimport { makeSpace } from '~utils/makeSpace';\nimport { makeSize } from '~utils/makeSize';\nimport { makeBorderSize } from '~utils/makeBorderSize';\nimport { makeMotionTime } from '~utils/makeMotionTime';\n\nexport type RadioRectProps = RadioIconProps;\n\nconst getRadioIconWrapperStyles = ({\n  theme,\n  isChecked,\n  isDisabled,\n  isNegative,\n  size,\n}: RadioRectProps & { theme: Theme }): CSSObject => {\n  const isReactNative = getPlatformType() === 'react-native';\n  let variant: 'default' | 'disabled' | 'negative' = 'default';\n  if (isDisabled) variant = 'disabled';\n  if (isNegative) variant = 'negative';\n  const checked = isChecked ? 'checked' : 'unchecked';\n  const background = radioIconColors.variants[variant].background[checked];\n  const border = radioIconColors.variants[variant].border[checked];\n  const backgroundColor = getIn(theme, background);\n  const borderColor = getIn(theme, border);\n\n  return {\n    position: 'relative',\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    minWidth: makeSpace(radioSizes.icon[size].width),\n    width: makeSpace(radioSizes.icon[size].width),\n    height: makeSpace(radioSizes.icon[size].height),\n    borderWidth: makeBorderSize(theme.border.width.thick),\n    borderStyle: 'solid',\n    margin: makeSpace(theme.spacing[1]),\n    borderRadius: makeSize(theme.border.radius.max),\n    backgroundColor,\n    borderColor,\n    ...(!isReactNative && {\n      transitionDuration: castWebType(makeMotionTime(theme.motion.duration.xquick)),\n      transitionTimingFunction: castWebType(theme.motion.easing.exit),\n    }),\n  };\n};\n\nexport { getRadioIconWrapperStyles };\n"],"names":["getRadioIconWrapperStyles","_ref","theme","isChecked","isDisabled","isNegative","size","isReactNative","getPlatformType","variant","checked","background","radioIconColors","variants","border","backgroundColor","getIn","borderColor","Object","assign","position","display","alignItems","justifyContent","minWidth","makeSpace","radioSizes","icon","width","height","borderWidth","makeBorderSize","thick","borderStyle","margin","spacing","borderRadius","makeSize","radius","max","transitionDuration","castWebType","makeMotionTime","motion","duration","xquick","transitionTimingFunction","easing","exit"],"mappings":";;;;;;;;;;;;;AAaM,IAAAA,yBAAyB,CAAG,SAA5BA,yBAAyBA,CAAAC,IAAA,CAMqB,CALlD,IAAAC,KAAK,CAAAD,IAAA,CAALC,KAAK,CACLC,SAAS,CAAAF,IAAA,CAATE,SAAS,CACTC,UAAU,CAAAH,IAAA,CAAVG,UAAU,CACVC,UAAU,CAAAJ,IAAA,CAAVI,UAAU,CACVC,IAAI,CAAAL,IAAA,CAAJK,IAAI,CAEJ,IAAMC,aAAa,CAAGC,eAAe,EAAE,GAAK,cAAc,CAC1D,IAAIC,OAA4C,CAAG,SAAS,CAC5D,GAAIL,UAAU,CAAEK,OAAO,CAAG,UAAU,CACpC,GAAIJ,UAAU,CAAEI,OAAO,CAAG,UAAU,CACpC,IAAMC,OAAO,CAAGP,SAAS,CAAG,SAAS,CAAG,WAAW,CACnD,IAAMQ,UAAU,CAAGC,eAAe,CAACC,QAAQ,CAACJ,OAAO,CAAC,CAACE,UAAU,CAACD,OAAO,CAAC,CACxE,IAAMI,MAAM,CAAGF,eAAe,CAACC,QAAQ,CAACJ,OAAO,CAAC,CAACK,MAAM,CAACJ,OAAO,CAAC,CAChE,IAAMK,eAAe,CAAGC,KAAK,CAACd,KAAK,CAAES,UAAU,CAAC,CAChD,IAAMM,WAAW,CAAGD,KAAK,CAACd,KAAK,CAAEY,MAAM,CAAC,CAExC,OAAAI,MAAA,CAAAC,MAAA,CAAA,CACEC,QAAQ,CAAE,UAAU,CACpBC,OAAO,CAAE,MAAM,CACfC,UAAU,CAAE,QAAQ,CACpBC,cAAc,CAAE,QAAQ,CACxBC,QAAQ,CAAEC,SAAS,CAACC,UAAU,CAACC,IAAI,CAACrB,IAAI,CAAC,CAACsB,KAAK,CAAC,CAChDA,KAAK,CAAEH,SAAS,CAACC,UAAU,CAACC,IAAI,CAACrB,IAAI,CAAC,CAACsB,KAAK,CAAC,CAC7CC,MAAM,CAAEJ,SAAS,CAACC,UAAU,CAACC,IAAI,CAACrB,IAAI,CAAC,CAACuB,MAAM,CAAC,CAC/CC,WAAW,CAAEC,cAAc,CAAC7B,KAAK,CAACY,MAAM,CAACc,KAAK,CAACI,KAAK,CAAC,CACrDC,WAAW,CAAE,OAAO,CACpBC,MAAM,CAAET,SAAS,CAACvB,KAAK,CAACiC,OAAO,CAAC,CAAC,CAAC,CAAC,CACnCC,YAAY,CAAEC,QAAQ,CAACnC,KAAK,CAACY,MAAM,CAACwB,MAAM,CAACC,GAAG,CAAC,CAC/CxB,eAAe,CAAfA,eAAe,CACfE,WAAW,CAAXA,WAAW,CACP,CAAA,CAACV,aAAa,EAAI,CACpBiC,kBAAkB,CAAEC,WAAW,CAACC,cAAc,CAACxC,KAAK,CAACyC,MAAM,CAACC,QAAQ,CAACC,MAAM,CAAC,CAAC,CAC7EC,wBAAwB,CAAEL,WAAW,CAACvC,KAAK,CAACyC,MAAM,CAACI,MAAM,CAACC,IAAI,CAChE,CAAC,CAAA,CAEL;;;;"}
+{"version":3,"file":"RadioIconWrapperStyles.js","sources":["../../../../../../src/components/Radio/RadioIcon/RadioIconWrapperStyles.ts"],"sourcesContent":["import type { CSSObject } from 'styled-components';\nimport { radioIconColors, radioSizes } from '../radioTokens';\nimport type { RadioIconProps } from './RadioIcon';\nimport getIn from '~utils/lodashButBetter/get';\nimport type { Theme } from '~components/BladeProvider';\nimport { castWebType, getPlatformType } from '~utils';\nimport { makeSpace } from '~utils/makeSpace';\nimport { makeSize } from '~utils/makeSize';\nimport { makeBorderSize } from '~utils/makeBorderSize';\nimport { makeMotionTime } from '~utils/makeMotionTime';\nimport { size as sizeToken } from '~tokens/global';\n\nexport type RadioRectProps = RadioIconProps;\n\nconst getRadioIconWrapperStyles = ({\n  theme,\n  isChecked,\n  isDisabled,\n  isNegative,\n  size,\n}: RadioRectProps & { theme: Theme }): CSSObject => {\n  const isReactNative = getPlatformType() === 'react-native';\n  let variant: 'default' | 'disabled' | 'negative' = 'default';\n  if (isDisabled) variant = 'disabled';\n  if (isNegative) variant = 'negative';\n  const checked = isChecked ? 'checked' : 'unchecked';\n  const background = radioIconColors.variants[variant].background[checked];\n  const border = radioIconColors.variants[variant].border[checked];\n  const backgroundColor = getIn(theme, background);\n  const borderColor = getIn(theme, border);\n\n  return {\n    position: 'relative',\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    minWidth: makeSpace(radioSizes.icon[size].width),\n    width: makeSpace(radioSizes.icon[size].width),\n    height: makeSpace(radioSizes.icon[size].height),\n    borderWidth: makeBorderSize(theme.border.width.thick),\n    borderStyle: 'solid',\n    margin: makeSpace(theme.spacing[1]),\n    marginTop: size === 'small' ? makeSize(sizeToken['3']) : undefined,\n    borderRadius: makeSize(theme.border.radius.max),\n    backgroundColor,\n    borderColor,\n    ...(!isReactNative && {\n      transitionDuration: castWebType(makeMotionTime(theme.motion.duration.xquick)),\n      transitionTimingFunction: castWebType(theme.motion.easing.exit),\n    }),\n  };\n};\n\nexport { getRadioIconWrapperStyles };\n"],"names":["getRadioIconWrapperStyles","_ref","theme","isChecked","isDisabled","isNegative","size","isReactNative","getPlatformType","variant","checked","background","radioIconColors","variants","border","backgroundColor","getIn","borderColor","Object","assign","position","display","alignItems","justifyContent","minWidth","makeSpace","radioSizes","icon","width","height","borderWidth","makeBorderSize","thick","borderStyle","margin","spacing","marginTop","makeSize","sizeToken","undefined","borderRadius","radius","max","transitionDuration","castWebType","makeMotionTime","motion","duration","xquick","transitionTimingFunction","easing","exit"],"mappings":";;;;;;;;;;;;;;;;AAcM,IAAAA,yBAAyB,CAAG,SAA5BA,yBAAyBA,CAAAC,IAAA,CAMqB,CAAA,IALlDC,KAAK,CAAAD,IAAA,CAALC,KAAK,CACLC,SAAS,CAAAF,IAAA,CAATE,SAAS,CACTC,UAAU,CAAAH,IAAA,CAAVG,UAAU,CACVC,UAAU,CAAAJ,IAAA,CAAVI,UAAU,CACVC,MAAI,CAAAL,IAAA,CAAJK,IAAI,CAEJ,IAAMC,aAAa,CAAGC,eAAe,EAAE,GAAK,cAAc,CAC1D,IAAIC,OAA4C,CAAG,SAAS,CAC5D,GAAIL,UAAU,CAAEK,OAAO,CAAG,UAAU,CACpC,GAAIJ,UAAU,CAAEI,OAAO,CAAG,UAAU,CACpC,IAAMC,OAAO,CAAGP,SAAS,CAAG,SAAS,CAAG,WAAW,CACnD,IAAMQ,UAAU,CAAGC,eAAe,CAACC,QAAQ,CAACJ,OAAO,CAAC,CAACE,UAAU,CAACD,OAAO,CAAC,CACxE,IAAMI,MAAM,CAAGF,eAAe,CAACC,QAAQ,CAACJ,OAAO,CAAC,CAACK,MAAM,CAACJ,OAAO,CAAC,CAChE,IAAMK,eAAe,CAAGC,KAAK,CAACd,KAAK,CAAES,UAAU,CAAC,CAChD,IAAMM,WAAW,CAAGD,KAAK,CAACd,KAAK,CAAEY,MAAM,CAAC,CAExC,OAAAI,MAAA,CAAAC,MAAA,CACEC,CAAAA,QAAQ,CAAE,UAAU,CACpBC,OAAO,CAAE,MAAM,CACfC,UAAU,CAAE,QAAQ,CACpBC,cAAc,CAAE,QAAQ,CACxBC,QAAQ,CAAEC,SAAS,CAACC,UAAU,CAACC,IAAI,CAACrB,MAAI,CAAC,CAACsB,KAAK,CAAC,CAChDA,KAAK,CAAEH,SAAS,CAACC,UAAU,CAACC,IAAI,CAACrB,MAAI,CAAC,CAACsB,KAAK,CAAC,CAC7CC,MAAM,CAAEJ,SAAS,CAACC,UAAU,CAACC,IAAI,CAACrB,MAAI,CAAC,CAACuB,MAAM,CAAC,CAC/CC,WAAW,CAAEC,cAAc,CAAC7B,KAAK,CAACY,MAAM,CAACc,KAAK,CAACI,KAAK,CAAC,CACrDC,WAAW,CAAE,OAAO,CACpBC,MAAM,CAAET,SAAS,CAACvB,KAAK,CAACiC,OAAO,CAAC,CAAC,CAAC,CAAC,CACnCC,SAAS,CAAE9B,MAAI,GAAK,OAAO,CAAG+B,QAAQ,CAACC,IAAS,CAAC,GAAG,CAAC,CAAC,CAAGC,SAAS,CAClEC,YAAY,CAAEH,QAAQ,CAACnC,KAAK,CAACY,MAAM,CAAC2B,MAAM,CAACC,GAAG,CAAC,CAC/C3B,eAAe,CAAfA,eAAe,CACfE,WAAW,CAAXA,WAAW,CACP,CAAA,CAACV,aAAa,EAAI,CACpBoC,kBAAkB,CAAEC,WAAW,CAACC,cAAc,CAAC3C,KAAK,CAAC4C,MAAM,CAACC,QAAQ,CAACC,MAAM,CAAC,CAAC,CAC7EC,wBAAwB,CAAEL,WAAW,CAAC1C,KAAK,CAAC4C,MAAM,CAACI,MAAM,CAACC,IAAI,CAChE,CAAC,EAEL;;;;"}

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

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

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

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

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

@@ -5,6 +5,8 @@ import { useId } from '../../utils/useId.js';
 import 'react-native';
 import { getPlatformType } from '../../utils/getPlatformType/getPlatformType.js';
 import { throwBladeError } from '../../utils/logger/logger.js';
+import '../../tokens/global/typography.js';
+import '../../tokens/global/motion.js';
 import '../BladeProvider/useTheme.js';
 import { makeAccessible } from '../../utils/makeAccessible/makeAccessible.native.js';
 

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

@@ -1 +1 @@
-{"version":3,"file":"useRadio.js","sources":["../../../../../src/components/Radio/useRadio.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/explicit-function-return-type */\n/* eslint-disable @typescript-eslint/explicit-module-boundary-types */\nimport React from 'react';\nimport type { GestureResponderEvent } from 'react-native';\nimport { useControllableState } from '~utils/useControllable';\nimport { useId } from '~utils/useId';\nimport { getPlatformType } from '~src/utils';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport { throwBladeError } from '~utils/logger';\n\nexport type OnChange = ({\n  isChecked,\n  event,\n  value,\n}: {\n  isChecked: boolean;\n  event: React.ChangeEvent;\n  value?: string;\n}) => void;\n\ntype UseRadioProps = {\n  hasError?: boolean;\n  /**\n   * If `true`, The Radio will be checked. This also makes the Radio controlled\n   * Use `onChange` to update its value\n   *\n   * @default false\n   */\n  isChecked?: boolean;\n  /**\n   * If `true`, the Radio will be initially checked. This also makes the Radio uncontrolled\n   *\n   * @default false\n   */\n  defaultChecked?: boolean;\n  /**\n   * The callback invoked when the checked state of the `Radio` changes.\n   */\n  onChange?: OnChange;\n  /**\n   * The name of the input field in a Radio\n   * (Useful for form submission).\n   */\n  name?: string;\n  /**\n   * The value to be used in the Radio input.\n   * This is the value that will be returned on form submission.\n   */\n  value?: string;\n  /**\n   * If `true`, the Radio will be disabled\n   *\n   * @default false\n   */\n  isDisabled?: boolean;\n  /**\n   * If `true`, the Radio input is marked as required,\n   * and `required` attribute will be added\n   *\n   * @default false\n   */\n  isRequired?: boolean;\n};\n\nconst useRadio = ({\n  isChecked,\n  defaultChecked,\n  isDisabled,\n  isRequired,\n  hasError,\n  onChange,\n  name,\n  value,\n}: UseRadioProps) => {\n  const inputRef = React.useRef<HTMLInputElement>(null);\n\n  const isReactNative = getPlatformType() === 'react-native';\n  if (__DEV__) {\n    if (isChecked && defaultChecked) {\n      throwBladeError({\n        message: `Do not provide both 'isChecked' and 'defaultChecked' to useRadio. Consider if you want this component to be controlled or uncontrolled.`,\n        moduleName: 'Radio',\n      });\n    }\n  }\n\n  const [radioState, setRadioState] = useControllableState({\n    value: isChecked,\n    defaultValue: defaultChecked ?? false,\n  });\n\n  const handleOnChange = (event: React.ChangeEvent<HTMLInputElement> | GestureResponderEvent) => {\n    if (isDisabled) {\n      event.stopPropagation();\n      event.preventDefault();\n      return;\n    }\n\n    setRadioState((checked) => {\n      // Prevent radio to be unchecked when clicked again\n      // Once checked radios don't act as toggle buttons\n      if (checked === false) {\n        onChange?.({\n          isChecked: true,\n          event: event as React.ChangeEvent,\n          value,\n        });\n        return true;\n      }\n      return checked;\n    });\n  };\n\n  const state = {\n    isChecked: radioState,\n    setChecked: setRadioState,\n  };\n\n  const idBase = useId('radio');\n  const helpTextId = useId(`${idBase}-helptext`);\n\n  const accessibilityProps = makeAccessible({\n    role: 'radio',\n    required: Boolean(isRequired),\n    invalid: Boolean(hasError),\n    disabled: Boolean(isDisabled),\n    checked: radioState,\n    describedBy: helpTextId,\n  });\n\n  if (isReactNative) {\n    return {\n      state,\n      inputProps: {\n        onPress: handleOnChange,\n        name,\n        value,\n        ...accessibilityProps,\n      },\n    };\n  }\n\n  return {\n    state,\n    ids: { helpTextId },\n    inputProps: {\n      ref: inputRef,\n      onChange: handleOnChange,\n      type: 'radio',\n      name,\n      value,\n      checked: radioState,\n      disabled: isDisabled,\n      required: isRequired,\n      ...accessibilityProps,\n    },\n  };\n};\n\nexport type InputProps = ReturnType<typeof useRadio>['inputProps'];\n\nexport { useRadio };\n"],"names":["useRadio","_ref","isChecked","defaultChecked","isDisabled","isRequired","hasError","onChange","name","value","inputRef","React","useRef","isReactNative","getPlatformType","__DEV__","throwBladeError","message","moduleName","_useControllableState","useControllableState","defaultValue","_useControllableState2","_slicedToArray","radioState","setRadioState","handleOnChange","event","stopPropagation","preventDefault","checked","state","setChecked","idBase","useId","helpTextId","accessibilityProps","makeAccessible","role","required","Boolean","invalid","disabled","describedBy","inputProps","Object","assign","onPress","ids","ref","type"],"mappings":"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"}
+{"version":3,"file":"useRadio.js","sources":["../../../../../src/components/Radio/useRadio.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/explicit-function-return-type */\n/* eslint-disable @typescript-eslint/explicit-module-boundary-types */\nimport React from 'react';\nimport type { GestureResponderEvent } from 'react-native';\nimport { useControllableState } from '~utils/useControllable';\nimport { useId } from '~utils/useId';\nimport { getPlatformType } from '~src/utils';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport { throwBladeError } from '~utils/logger';\n\nexport type OnChange = ({\n  isChecked,\n  event,\n  value,\n}: {\n  isChecked: boolean;\n  event: React.ChangeEvent;\n  value?: string;\n}) => void;\n\ntype UseRadioProps = {\n  hasError?: boolean;\n  /**\n   * If `true`, The Radio will be checked. This also makes the Radio controlled\n   * Use `onChange` to update its value\n   *\n   * @default false\n   */\n  isChecked?: boolean;\n  /**\n   * If `true`, the Radio will be initially checked. This also makes the Radio uncontrolled\n   *\n   * @default false\n   */\n  defaultChecked?: boolean;\n  /**\n   * The callback invoked when the checked state of the `Radio` changes.\n   */\n  onChange?: OnChange;\n  /**\n   * The name of the input field in a Radio\n   * (Useful for form submission).\n   */\n  name?: string;\n  /**\n   * The value to be used in the Radio input.\n   * This is the value that will be returned on form submission.\n   */\n  value?: string;\n  /**\n   * If `true`, the Radio will be disabled\n   *\n   * @default false\n   */\n  isDisabled?: boolean;\n  /**\n   * If `true`, the Radio input is marked as required,\n   * and `required` attribute will be added\n   *\n   * @default false\n   */\n  isRequired?: boolean;\n};\n\nconst useRadio = ({\n  isChecked,\n  defaultChecked,\n  isDisabled,\n  isRequired,\n  hasError,\n  onChange,\n  name,\n  value,\n}: UseRadioProps) => {\n  const inputRef = React.useRef<HTMLInputElement>(null);\n\n  const isReactNative = getPlatformType() === 'react-native';\n  if (__DEV__) {\n    if (isChecked && defaultChecked) {\n      throwBladeError({\n        message: `Do not provide both 'isChecked' and 'defaultChecked' to useRadio. Consider if you want this component to be controlled or uncontrolled.`,\n        moduleName: 'Radio',\n      });\n    }\n  }\n\n  const [radioState, setRadioState] = useControllableState({\n    value: isChecked,\n    defaultValue: defaultChecked ?? false,\n  });\n\n  const handleOnChange = (event: React.ChangeEvent<HTMLInputElement> | GestureResponderEvent) => {\n    if (isDisabled) {\n      event.stopPropagation();\n      event.preventDefault();\n      return;\n    }\n\n    setRadioState((checked) => {\n      // Prevent radio to be unchecked when clicked again\n      // Once checked radios don't act as toggle buttons\n      if (checked === false) {\n        onChange?.({\n          isChecked: true,\n          event: event as React.ChangeEvent,\n          value,\n        });\n        return true;\n      }\n      return checked;\n    });\n  };\n\n  const state = {\n    isChecked: radioState,\n    setChecked: setRadioState,\n  };\n\n  const idBase = useId('radio');\n  const helpTextId = useId(`${idBase}-helptext`);\n\n  const accessibilityProps = makeAccessible({\n    role: 'radio',\n    required: Boolean(isRequired),\n    invalid: Boolean(hasError),\n    disabled: Boolean(isDisabled),\n    checked: radioState,\n    describedBy: helpTextId,\n  });\n\n  if (isReactNative) {\n    return {\n      state,\n      inputProps: {\n        onPress: handleOnChange,\n        name,\n        value,\n        ...accessibilityProps,\n      },\n    };\n  }\n\n  return {\n    state,\n    ids: { helpTextId },\n    inputProps: {\n      ref: inputRef,\n      onChange: handleOnChange,\n      type: 'radio',\n      name,\n      value,\n      checked: radioState,\n      disabled: isDisabled,\n      required: isRequired,\n      ...accessibilityProps,\n    },\n  };\n};\n\nexport type InputProps = ReturnType<typeof useRadio>['inputProps'];\n\nexport { useRadio };\n"],"names":["useRadio","_ref","isChecked","defaultChecked","isDisabled","isRequired","hasError","onChange","name","value","inputRef","React","useRef","isReactNative","getPlatformType","__DEV__","throwBladeError","message","moduleName","_useControllableState","useControllableState","defaultValue","_useControllableState2","_slicedToArray","radioState","setRadioState","handleOnChange","event","stopPropagation","preventDefault","checked","state","setChecked","idBase","useId","helpTextId","accessibilityProps","makeAccessible","role","required","Boolean","invalid","disabled","describedBy","inputProps","Object","assign","onPress","ids","ref","type"],"mappings":"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"}

package/build/lib/native/components/Skeleton/PulseAnimation.native.js

@@ -5,6 +5,8 @@ import 'react-native';
 import '@babel/runtime/helpers/slicedToArray';
 import { castNativeType } from '../../utils/platform/castUtils.js';
 import { makeMotionTime } from '../../utils/makeMotionTime/makeMotionTime.native.js';
+import '../../tokens/global/typography.js';
+import '../../tokens/global/motion.js';
 import useTheme from '../BladeProvider/useTheme.js';
 import 'styled-components/native';
 import '@gorhom/portal';

package/build/lib/native/components/Skeleton/PulseAnimation.native.js.map

@@ -1 +1 @@
-{"version":3,"file":"PulseAnimation.native.js","sources":["../../../../../src/components/Skeleton/PulseAnimation.native.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/explicit-function-return-type */\n/* eslint-disable @typescript-eslint/restrict-plus-operands */\nimport Animated, {\n  cancelAnimation,\n  interpolateColor,\n  useAnimatedStyle,\n  useSharedValue,\n  withRepeat,\n  withSequence,\n  withTiming,\n} from 'react-native-reanimated';\nimport React from 'react';\nimport type { SkeletonProps } from './types';\nimport BaseBox from '~components/Box/BaseBox';\nimport { castNativeType, makeMotionTime } from '~utils';\nimport { useTheme } from '~components/BladeProvider';\nimport type { BladeElementRef } from '~utils/types';\n\nconst AnimatedBox = Animated.createAnimatedComponent(BaseBox);\n\nconst _PulseAnimation = (\n  props: SkeletonProps,\n  ref: React.Ref<BladeElementRef>,\n): React.ReactElement => {\n  const { theme } = useTheme();\n  const durationPluseOff = theme.motion.duration.xmoderate;\n  const durationPluseOn = theme.motion.duration['2xgentle'];\n  const totalDuration = castNativeType(makeMotionTime(durationPluseOn + durationPluseOff));\n  const easing = castNativeType(theme.motion.easing.emphasized);\n  const progress = useSharedValue(0);\n\n  const fadeIn = () => {\n    'worklet';\n    const animations = {\n      opacity: withTiming(1, { duration: totalDuration, easing }),\n    };\n    const initialValues = {\n      opacity: 0,\n    };\n    return {\n      initialValues,\n      animations,\n    };\n  };\n\n  // Trigger pulsating animation\n  React.useEffect(() => {\n    const pulsatingAnimationTimingConfig = {\n      duration: totalDuration,\n      easing,\n    };\n    progress.value = withRepeat(\n      withSequence(\n        withTiming(0, pulsatingAnimationTimingConfig),\n        withTiming(1, pulsatingAnimationTimingConfig),\n      ),\n      -1,\n      true,\n    );\n\n    return () => {\n      cancelAnimation(progress);\n    };\n  }, [easing, progress, totalDuration]);\n\n  const pulseAnimatedStyle = useAnimatedStyle(() => {\n    return {\n      backgroundColor: interpolateColor(\n        progress.value,\n        [1, 0],\n        [\n          theme.colors.interactive.background.gray.highlighted,\n          theme.colors.interactive.background.gray.default,\n        ],\n      ),\n    };\n  });\n\n  return <AnimatedBox ref={ref as never} entering={fadeIn} style={pulseAnimatedStyle} {...props} />;\n};\n\nconst PulseAnimation = React.forwardRef(_PulseAnimation);\n\nexport { PulseAnimation };\n"],"names":["AnimatedBox","Animated","createAnimatedComponent","BaseBox","_PulseAnimation","props","ref","_useTheme","useTheme","theme","durationPluseOff","motion","duration","xmoderate","durationPluseOn","totalDuration","castNativeType","makeMotionTime","easing","emphasized","progress","useSharedValue","fadeIn","animations","opacity","withTiming","initialValues","React","useEffect","pulsatingAnimationTimingConfig","value","withRepeat","withSequence","cancelAnimation","pulseAnimatedStyle","useAnimatedStyle","backgroundColor","interpolateColor","colors","interactive","background","gray","highlighted","default","_jsx","Object","assign","entering","style","PulseAnimation","forwardRef"],"mappings":";;;;;;;;;;;;;;AAkBA,IAAMA,WAAW,CAAGC,QAAQ,CAACC,uBAAuB,CAACC,OAAO,CAAC,CAE7D,IAAMC,eAAe,CAAG,SAAlBA,eAAeA,CACnBC,KAAoB,CACpBC,GAA+B,CACR,CACvB,IAAAC,SAAA,CAAkBC,QAAQ,EAAE,CAApBC,KAAK,CAAAF,SAAA,CAALE,KAAK,CACb,IAAMC,gBAAgB,CAAGD,KAAK,CAACE,MAAM,CAACC,QAAQ,CAACC,SAAS,CACxD,IAAMC,eAAe,CAAGL,KAAK,CAACE,MAAM,CAACC,QAAQ,CAAC,UAAU,CAAC,CACzD,IAAMG,aAAa,CAAGC,cAAc,CAACC,cAAc,CAACH,eAAe,CAAGJ,gBAAgB,CAAC,CAAC,CACxF,IAAMQ,MAAM,CAAGF,cAAc,CAACP,KAAK,CAACE,MAAM,CAACO,MAAM,CAACC,UAAU,CAAC,CAC7D,IAAMC,QAAQ,CAAGC,cAAc,CAAC,CAAC,CAAC,CAElC,IAAMC,MAAM,CAAG,SAATA,MAAMA,EAAS,CACnB,SAAS,CACT,IAAMC,UAAU,CAAG,CACjBC,OAAO,CAAEC,UAAU,CAAC,CAAC,CAAE,CAAEb,QAAQ,CAAEG,aAAa,CAAEG,MAAM,CAANA,MAAO,CAAC,CAC5D,CAAC,CACD,IAAMQ,aAAa,CAAG,CACpBF,OAAO,CAAE,CACX,CAAC,CACD,OAAO,CACLE,aAAa,CAAbA,aAAa,CACbH,UAAU,CAAVA,UACF,CAAC,CACH,CAAC,CAGDI,cAAK,CAACC,SAAS,CAAC,UAAM,CACpB,IAAMC,8BAA8B,CAAG,CACrCjB,QAAQ,CAAEG,aAAa,CACvBG,MAAM,CAANA,MACF,CAAC,CACDE,QAAQ,CAACU,KAAK,CAAGC,UAAU,CACzBC,YAAY,CACVP,UAAU,CAAC,CAAC,CAAEI,8BAA8B,CAAC,CAC7CJ,UAAU,CAAC,CAAC,CAAEI,8BAA8B,CAC9C,CAAC,CACD,CAAC,CAAC,CACF,IACF,CAAC,CAED,OAAO,UAAM,CACXI,eAAe,CAACb,QAAQ,CAAC,CAC3B,CAAC,CACH,CAAC,CAAE,CAACF,MAAM,CAAEE,QAAQ,CAAEL,aAAa,CAAC,CAAC,CAErC,IAAMmB,kBAAkB,CAAGC,gBAAgB,CAAC,UAAM,CAChD,OAAO,CACLC,eAAe,CAAEC,gBAAgB,CAC/BjB,QAAQ,CAACU,KAAK,CACd,CAAC,CAAC,CAAE,CAAC,CAAC,CACN,CACErB,KAAK,CAAC6B,MAAM,CAACC,WAAW,CAACC,UAAU,CAACC,IAAI,CAACC,WAAW,CACpDjC,KAAK,CAAC6B,MAAM,CAACC,WAAW,CAACC,UAAU,CAACC,IAAI,CAACE,OAAO,CAEpD,CACF,CAAC,CACH,CAAC,CAAC,CAEF,OAAOC,GAAA,CAAC5C,WAAW,CAAA6C,MAAA,CAAAC,MAAA,EAACxC,GAAG,CAAEA,GAAa,CAACyC,QAAQ,CAAEzB,MAAO,CAAC0B,KAAK,CAAEd,kBAAmB,EAAK7B,KAAK,CAAG,CAAC,CACnG,CAAC,CAEK,IAAA4C,cAAc,CAAGtB,cAAK,CAACuB,UAAU,CAAC9C,eAAe;;;;"}
+{"version":3,"file":"PulseAnimation.native.js","sources":["../../../../../src/components/Skeleton/PulseAnimation.native.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/explicit-function-return-type */\n/* eslint-disable @typescript-eslint/restrict-plus-operands */\nimport Animated, {\n  cancelAnimation,\n  interpolateColor,\n  useAnimatedStyle,\n  useSharedValue,\n  withRepeat,\n  withSequence,\n  withTiming,\n} from 'react-native-reanimated';\nimport React from 'react';\nimport type { SkeletonProps } from './types';\nimport BaseBox from '~components/Box/BaseBox';\nimport { castNativeType, makeMotionTime } from '~utils';\nimport { useTheme } from '~components/BladeProvider';\nimport type { BladeElementRef } from '~utils/types';\n\nconst AnimatedBox = Animated.createAnimatedComponent(BaseBox);\n\nconst _PulseAnimation = (\n  props: SkeletonProps,\n  ref: React.Ref<BladeElementRef>,\n): React.ReactElement => {\n  const { theme } = useTheme();\n  const durationPluseOff = theme.motion.duration.xmoderate;\n  const durationPluseOn = theme.motion.duration['2xgentle'];\n  const totalDuration = castNativeType(makeMotionTime(durationPluseOn + durationPluseOff));\n  const easing = castNativeType(theme.motion.easing.emphasized);\n  const progress = useSharedValue(0);\n\n  const fadeIn = () => {\n    'worklet';\n    const animations = {\n      opacity: withTiming(1, { duration: totalDuration, easing }),\n    };\n    const initialValues = {\n      opacity: 0,\n    };\n    return {\n      initialValues,\n      animations,\n    };\n  };\n\n  // Trigger pulsating animation\n  React.useEffect(() => {\n    const pulsatingAnimationTimingConfig = {\n      duration: totalDuration,\n      easing,\n    };\n    progress.value = withRepeat(\n      withSequence(\n        withTiming(0, pulsatingAnimationTimingConfig),\n        withTiming(1, pulsatingAnimationTimingConfig),\n      ),\n      -1,\n      true,\n    );\n\n    return () => {\n      cancelAnimation(progress);\n    };\n  }, [easing, progress, totalDuration]);\n\n  const pulseAnimatedStyle = useAnimatedStyle(() => {\n    return {\n      backgroundColor: interpolateColor(\n        progress.value,\n        [1, 0],\n        [\n          theme.colors.interactive.background.gray.highlighted,\n          theme.colors.interactive.background.gray.default,\n        ],\n      ),\n    };\n  });\n\n  return <AnimatedBox ref={ref as never} entering={fadeIn} style={pulseAnimatedStyle} {...props} />;\n};\n\nconst PulseAnimation = React.forwardRef(_PulseAnimation);\n\nexport { PulseAnimation };\n"],"names":["AnimatedBox","Animated","createAnimatedComponent","BaseBox","_PulseAnimation","props","ref","_useTheme","useTheme","theme","durationPluseOff","motion","duration","xmoderate","durationPluseOn","totalDuration","castNativeType","makeMotionTime","easing","emphasized","progress","useSharedValue","fadeIn","animations","opacity","withTiming","initialValues","React","useEffect","pulsatingAnimationTimingConfig","value","withRepeat","withSequence","cancelAnimation","pulseAnimatedStyle","useAnimatedStyle","backgroundColor","interpolateColor","colors","interactive","background","gray","highlighted","default","_jsx","Object","assign","entering","style","PulseAnimation","forwardRef"],"mappings":";;;;;;;;;;;;;;;;AAkBA,IAAMA,WAAW,CAAGC,QAAQ,CAACC,uBAAuB,CAACC,OAAO,CAAC,CAE7D,IAAMC,eAAe,CAAG,SAAlBA,eAAeA,CACnBC,KAAoB,CACpBC,GAA+B,CACR,CACvB,IAAAC,SAAA,CAAkBC,QAAQ,EAAE,CAApBC,KAAK,CAAAF,SAAA,CAALE,KAAK,CACb,IAAMC,gBAAgB,CAAGD,KAAK,CAACE,MAAM,CAACC,QAAQ,CAACC,SAAS,CACxD,IAAMC,eAAe,CAAGL,KAAK,CAACE,MAAM,CAACC,QAAQ,CAAC,UAAU,CAAC,CACzD,IAAMG,aAAa,CAAGC,cAAc,CAACC,cAAc,CAACH,eAAe,CAAGJ,gBAAgB,CAAC,CAAC,CACxF,IAAMQ,MAAM,CAAGF,cAAc,CAACP,KAAK,CAACE,MAAM,CAACO,MAAM,CAACC,UAAU,CAAC,CAC7D,IAAMC,QAAQ,CAAGC,cAAc,CAAC,CAAC,CAAC,CAElC,IAAMC,MAAM,CAAG,SAATA,MAAMA,EAAS,CACnB,SAAS,CACT,IAAMC,UAAU,CAAG,CACjBC,OAAO,CAAEC,UAAU,CAAC,CAAC,CAAE,CAAEb,QAAQ,CAAEG,aAAa,CAAEG,MAAM,CAANA,MAAO,CAAC,CAC5D,CAAC,CACD,IAAMQ,aAAa,CAAG,CACpBF,OAAO,CAAE,CACX,CAAC,CACD,OAAO,CACLE,aAAa,CAAbA,aAAa,CACbH,UAAU,CAAVA,UACF,CAAC,CACH,CAAC,CAGDI,cAAK,CAACC,SAAS,CAAC,UAAM,CACpB,IAAMC,8BAA8B,CAAG,CACrCjB,QAAQ,CAAEG,aAAa,CACvBG,MAAM,CAANA,MACF,CAAC,CACDE,QAAQ,CAACU,KAAK,CAAGC,UAAU,CACzBC,YAAY,CACVP,UAAU,CAAC,CAAC,CAAEI,8BAA8B,CAAC,CAC7CJ,UAAU,CAAC,CAAC,CAAEI,8BAA8B,CAC9C,CAAC,CACD,CAAC,CAAC,CACF,IACF,CAAC,CAED,OAAO,UAAM,CACXI,eAAe,CAACb,QAAQ,CAAC,CAC3B,CAAC,CACH,CAAC,CAAE,CAACF,MAAM,CAAEE,QAAQ,CAAEL,aAAa,CAAC,CAAC,CAErC,IAAMmB,kBAAkB,CAAGC,gBAAgB,CAAC,UAAM,CAChD,OAAO,CACLC,eAAe,CAAEC,gBAAgB,CAC/BjB,QAAQ,CAACU,KAAK,CACd,CAAC,CAAC,CAAE,CAAC,CAAC,CACN,CACErB,KAAK,CAAC6B,MAAM,CAACC,WAAW,CAACC,UAAU,CAACC,IAAI,CAACC,WAAW,CACpDjC,KAAK,CAAC6B,MAAM,CAACC,WAAW,CAACC,UAAU,CAACC,IAAI,CAACE,OAAO,CAEpD,CACF,CAAC,CACH,CAAC,CAAC,CAEF,OAAOC,GAAA,CAAC5C,WAAW,CAAA6C,MAAA,CAAAC,MAAA,EAACxC,GAAG,CAAEA,GAAa,CAACyC,QAAQ,CAAEzB,MAAO,CAAC0B,KAAK,CAAEd,kBAAmB,EAAK7B,KAAK,CAAG,CAAC,CACnG,CAAC,CAEK,IAAA4C,cAAc,CAAGtB,cAAK,CAACuB,UAAU,CAAC9C,eAAe;;;;"}

package/build/lib/native/components/Spinner/BaseSpinner/BaseSpinner.js

@@ -11,11 +11,11 @@ import useTheme from '../../BladeProvider/useTheme.js';
 import 'react-native';
 import '@babel/runtime/helpers/slicedToArray';
 import { makeSize } from '../../../utils/makeSize/makeSize.js';
+import '../../../tokens/global/typography.js';
+import '../../../tokens/global/motion.js';
 import '../../BottomSheet/BottomSheetStack.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { getStyledProps } from '../../Box/styledProps/getStyledProps.js';
-import '../../../tokens/global/typography.js';
-import '../../../tokens/global/motion.js';
 import { metaAttribute } from '../../../utils/metaAttribute/metaAttribute.native.js';
 import { MetaConstants } from '../../../utils/metaAttribute/metaConstants.js';
 import { BaseBox } from '../../Box/BaseBox/BaseBox.native.js';
@@ -25,7 +25,7 @@ import '../../Typography/Code/Code.js';
 import '../../Typography/Display/Display.js';
 import { makeAccessible } from '../../../utils/makeAccessible/makeAccessible.native.js';
 
-var _excluded=["label","labelPosition","accessibilityLabel","color","size","testID"];var getColor=function getColor(_ref){var color=_ref.color,theme=_ref.theme;if(color&&color==='white'){return getIn(theme.colors,'interactive.icon.staticWhite.subtle');}if(color&&color!=='neutral'){return getIn(theme.colors,`interactive.icon.${color}.subtle`);}return getIn(theme.colors,'interactive.icon.gray.subtle');};var _BaseSpinner=function _BaseSpinner(_ref2,ref){var label=_ref2.label,_ref2$labelPosition=_ref2.labelPosition,labelPosition=_ref2$labelPosition===void 0?'right':_ref2$labelPosition,accessibilityLabel=_ref2.accessibilityLabel,_ref2$color=_ref2.color,color=_ref2$color===void 0?'neutral':_ref2$color,_ref2$size=_ref2.size,size=_ref2$size===void 0?'medium':_ref2$size,testID=_ref2.testID,styledProps=_objectWithoutProperties(_ref2,_excluded);var _useTheme=useTheme(),theme=_useTheme.theme;return jsx(BaseBox,Object.assign({ref:ref},metaAttribute({name:MetaConstants.Spinner,testID:testID}),getStyledProps(styledProps),{children:jsxs(BaseBox,Object.assign({display:"flex",alignItems:"center",flexDirection:labelPosition==='right'?'row':'column'},makeAccessible({label:accessibilityLabel,role:'progressbar'}),{children:[jsx(SpinningBox,{children:jsx(SpinnerIcon,{dimensions:makeSize(dimensions[size]),color:getColor({color:color,theme:theme})})}),label&&label.trim().length>0?jsx(BaseBox,{marginLeft:labelPosition==='right'?'spacing.3':'spacing.0',marginTop:labelPosition==='bottom'?'spacing.3':'spacing.0',children:jsx(Text,{variant:"body",weight:"regular",size:"small",color:"surface.text.gray.muted",children:label})}):null]}))}));};var BaseSpinner=React__default.forwardRef(_BaseSpinner);
+var _excluded=["label","labelPosition","accessibilityLabel","color","size","testID"];var getColor=function getColor(_ref){var color=_ref.color,theme=_ref.theme;if(color&&color==='white'){return getIn(theme.colors,'interactive.icon.staticWhite.subtle');}if(color&&color!=='neutral'){return getIn(theme.colors,`interactive.icon.${color}.subtle`);}return getIn(theme.colors,'interactive.icon.gray.muted');};var _BaseSpinner=function _BaseSpinner(_ref2,ref){var label=_ref2.label,_ref2$labelPosition=_ref2.labelPosition,labelPosition=_ref2$labelPosition===void 0?'right':_ref2$labelPosition,accessibilityLabel=_ref2.accessibilityLabel,_ref2$color=_ref2.color,color=_ref2$color===void 0?'neutral':_ref2$color,_ref2$size=_ref2.size,size=_ref2$size===void 0?'medium':_ref2$size,testID=_ref2.testID,styledProps=_objectWithoutProperties(_ref2,_excluded);var _useTheme=useTheme(),theme=_useTheme.theme;return jsx(BaseBox,Object.assign({ref:ref},metaAttribute({name:MetaConstants.Spinner,testID:testID}),getStyledProps(styledProps),{children:jsxs(BaseBox,Object.assign({display:"flex",alignItems:"center",flexDirection:labelPosition==='right'?'row':'column'},makeAccessible({label:accessibilityLabel,role:'progressbar'}),{children:[jsx(SpinningBox,{children:jsx(SpinnerIcon,{dimensions:makeSize(dimensions[size]),color:getColor({color:color,theme:theme})})}),label&&label.trim().length>0?jsx(BaseBox,{marginLeft:labelPosition==='right'?'spacing.3':'spacing.0',marginTop:labelPosition==='bottom'?'spacing.3':'spacing.0',children:jsx(Text,{variant:"body",weight:"regular",size:"small",color:"surface.text.gray.muted",children:label})}):null]}))}));};var BaseSpinner=React__default.forwardRef(_BaseSpinner);
 
 export { BaseSpinner };
 //# sourceMappingURL=BaseSpinner.js.map

package/build/lib/native/components/Spinner/BaseSpinner/BaseSpinner.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseSpinner.js","sources":["../../../../../../src/components/Spinner/BaseSpinner/BaseSpinner.tsx"],"sourcesContent":["import React from 'react';\nimport { dimensions } from './spinnerTokens';\nimport SpinnerIcon from './SpinnerIcon';\nimport { SpinningBox } from './SpinningBox';\nimport getIn from '~utils/lodashButBetter/get';\nimport type { Theme } from '~components/BladeProvider';\nimport { useTheme } from '~components/BladeProvider';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport type { FeedbackColors } from '~tokens/theme/theme';\nimport BaseBox from '~components/Box/BaseBox';\nimport { Text } from '~components/Typography';\nimport type { BladeElementRef, TestID } from '~utils/types';\nimport { makeSize } from '~utils/makeSize';\nimport { makeAccessible } from '~utils/makeAccessible';\n\ntype BaseSpinnerProps = {\n  /**\n   * Sets the color of the spinner.\n   *\n   * @default 'default'\n   */\n  color?: 'primary' | 'white' | FeedbackColors;\n  /**\n   * Sets the label of the spinner.\n   *\n   * @default 'right'\n   */\n  label?: string;\n  /**\n   * Sets the label of the spinner.\n   *\n   */\n  labelPosition?: 'right' | 'bottom';\n  /**\n   * Sets the size of the spinner.\n   *\n   * @default 'medium'\n   */\n  size?: 'medium' | 'large' | 'xlarge';\n  /**\n   * Sets the aria-label for web & accessibilityLabel react-native.\n   *\n   */\n  accessibilityLabel: string;\n} & TestID &\n  StyledPropsBlade;\n\nconst getColor = ({ color, theme }: { color: BaseSpinnerProps['color']; theme: Theme }): string => {\n  if (color && color === 'white') {\n    return getIn(theme.colors, 'interactive.icon.staticWhite.subtle');\n  }\n  if (color && color !== 'neutral') {\n    return getIn(theme.colors, `interactive.icon.${color}.subtle`);\n  }\n  return getIn(theme.colors, 'interactive.icon.gray.subtle');\n};\n\nconst _BaseSpinner = (\n  {\n    label,\n    labelPosition = 'right',\n    accessibilityLabel,\n    color = 'neutral',\n    size = 'medium',\n    testID,\n    ...styledProps\n  }: BaseSpinnerProps,\n  ref: React.Ref<BladeElementRef>,\n): React.ReactElement => {\n  const { theme } = useTheme();\n  return (\n    <BaseBox\n      ref={ref as never}\n      {...metaAttribute({ name: MetaConstants.Spinner, testID })}\n      {...getStyledProps(styledProps)}\n    >\n      <BaseBox\n        display=\"flex\"\n        alignItems=\"center\"\n        flexDirection={labelPosition === 'right' ? 'row' : 'column'}\n        {...makeAccessible({\n          label: accessibilityLabel,\n          role: 'progressbar',\n        })}\n      >\n        <SpinningBox>\n          <SpinnerIcon dimensions={makeSize(dimensions[size])} color={getColor({ color, theme })} />\n        </SpinningBox>\n        {label && label.trim().length > 0 ? (\n          <BaseBox\n            marginLeft={labelPosition === 'right' ? 'spacing.3' : 'spacing.0'}\n            marginTop={labelPosition === 'bottom' ? 'spacing.3' : 'spacing.0'}\n          >\n            <Text variant=\"body\" weight=\"regular\" size=\"small\" color=\"surface.text.gray.muted\">\n              {label}\n            </Text>\n          </BaseBox>\n        ) : null}\n      </BaseBox>\n    </BaseBox>\n  );\n};\n\nconst BaseSpinner = React.forwardRef(_BaseSpinner);\n\nexport type { BaseSpinnerProps };\nexport { BaseSpinner };\n"],"names":["getColor","_ref","color","theme","getIn","colors","_BaseSpinner","_ref2","ref","label","_ref2$labelPosition","labelPosition","accessibilityLabel","_ref2$color","_ref2$size","size","testID","styledProps","_objectWithoutProperties","_excluded","_useTheme","useTheme","_jsx","BaseBox","Object","assign","metaAttribute","name","MetaConstants","Spinner","getStyledProps","children","_jsxs","display","alignItems","flexDirection","makeAccessible","role","SpinningBox","SpinnerIcon","dimensions","makeSize","trim","length","marginLeft","marginTop","Text","variant","weight","BaseSpinner","React","forwardRef"],"mappings":"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"}
+{"version":3,"file":"BaseSpinner.js","sources":["../../../../../../src/components/Spinner/BaseSpinner/BaseSpinner.tsx"],"sourcesContent":["import React from 'react';\nimport { dimensions } from './spinnerTokens';\nimport SpinnerIcon from './SpinnerIcon';\nimport { SpinningBox } from './SpinningBox';\nimport getIn from '~utils/lodashButBetter/get';\nimport type { Theme } from '~components/BladeProvider';\nimport { useTheme } from '~components/BladeProvider';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport type { FeedbackColors } from '~tokens/theme/theme';\nimport BaseBox from '~components/Box/BaseBox';\nimport { Text } from '~components/Typography';\nimport type { BladeElementRef, TestID } from '~utils/types';\nimport { makeSize } from '~utils/makeSize';\nimport { makeAccessible } from '~utils/makeAccessible';\n\ntype BaseSpinnerProps = {\n  /**\n   * Sets the color of the spinner.\n   *\n   * @default 'default'\n   */\n  color?: 'primary' | 'white' | FeedbackColors;\n  /**\n   * Sets the label of the spinner.\n   *\n   * @default 'right'\n   */\n  label?: string;\n  /**\n   * Sets the label of the spinner.\n   *\n   */\n  labelPosition?: 'right' | 'bottom';\n  /**\n   * Sets the size of the spinner.\n   *\n   * @default 'medium'\n   */\n  size?: 'medium' | 'large' | 'xlarge';\n  /**\n   * Sets the aria-label for web & accessibilityLabel react-native.\n   *\n   */\n  accessibilityLabel: string;\n} & TestID &\n  StyledPropsBlade;\n\nconst getColor = ({ color, theme }: { color: BaseSpinnerProps['color']; theme: Theme }): string => {\n  if (color && color === 'white') {\n    return getIn(theme.colors, 'interactive.icon.staticWhite.subtle');\n  }\n  if (color && color !== 'neutral') {\n    return getIn(theme.colors, `interactive.icon.${color}.subtle`);\n  }\n  return getIn(theme.colors, 'interactive.icon.gray.muted');\n};\n\nconst _BaseSpinner = (\n  {\n    label,\n    labelPosition = 'right',\n    accessibilityLabel,\n    color = 'neutral',\n    size = 'medium',\n    testID,\n    ...styledProps\n  }: BaseSpinnerProps,\n  ref: React.Ref<BladeElementRef>,\n): React.ReactElement => {\n  const { theme } = useTheme();\n  return (\n    <BaseBox\n      ref={ref as never}\n      {...metaAttribute({ name: MetaConstants.Spinner, testID })}\n      {...getStyledProps(styledProps)}\n    >\n      <BaseBox\n        display=\"flex\"\n        alignItems=\"center\"\n        flexDirection={labelPosition === 'right' ? 'row' : 'column'}\n        {...makeAccessible({\n          label: accessibilityLabel,\n          role: 'progressbar',\n        })}\n      >\n        <SpinningBox>\n          <SpinnerIcon dimensions={makeSize(dimensions[size])} color={getColor({ color, theme })} />\n        </SpinningBox>\n        {label && label.trim().length > 0 ? (\n          <BaseBox\n            marginLeft={labelPosition === 'right' ? 'spacing.3' : 'spacing.0'}\n            marginTop={labelPosition === 'bottom' ? 'spacing.3' : 'spacing.0'}\n          >\n            <Text variant=\"body\" weight=\"regular\" size=\"small\" color=\"surface.text.gray.muted\">\n              {label}\n            </Text>\n          </BaseBox>\n        ) : null}\n      </BaseBox>\n    </BaseBox>\n  );\n};\n\nconst BaseSpinner = React.forwardRef(_BaseSpinner);\n\nexport type { BaseSpinnerProps };\nexport { BaseSpinner };\n"],"names":["getColor","_ref","color","theme","getIn","colors","_BaseSpinner","_ref2","ref","label","_ref2$labelPosition","labelPosition","accessibilityLabel","_ref2$color","_ref2$size","size","testID","styledProps","_objectWithoutProperties","_excluded","_useTheme","useTheme","_jsx","BaseBox","Object","assign","metaAttribute","name","MetaConstants","Spinner","getStyledProps","children","_jsxs","display","alignItems","flexDirection","makeAccessible","role","SpinningBox","SpinnerIcon","dimensions","makeSize","trim","length","marginLeft","marginTop","Text","variant","weight","BaseSpinner","React","forwardRef"],"mappings":"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"}

package/build/lib/native/components/Spinner/BaseSpinner/SpinningBox.native.js

@@ -10,6 +10,8 @@ import 'react-native';
 import '@babel/runtime/helpers/slicedToArray';
 import { castNativeType } from '../../../utils/platform/castUtils.js';
 import { makeMotionTime } from '../../../utils/makeMotionTime/makeMotionTime.native.js';
+import '../../../tokens/global/typography.js';
+import '../../../tokens/global/motion.js';
 import '../../BottomSheet/BottomSheetStack.js';
 import { jsx } from 'react/jsx-runtime';
 import { BaseBox } from '../../Box/BaseBox/BaseBox.native.js';

package/build/lib/native/components/Spinner/BaseSpinner/SpinningBox.native.js.map

@@ -1 +1 @@
-{"version":3,"file":"SpinningBox.native.js","sources":["../../../../../../src/components/Spinner/BaseSpinner/SpinningBox.native.tsx"],"sourcesContent":["import React from 'react';\nimport type { EasingFactoryFn } from 'react-native-reanimated';\nimport Animated, {\n  withTiming,\n  cancelAnimation,\n  useAnimatedStyle,\n  useSharedValue,\n  withRepeat,\n} from 'react-native-reanimated';\nimport { motion as spinnerMotion } from './spinnerTokens';\nimport getIn from '~utils/lodashButBetter/get';\nimport { useTheme } from '~components/BladeProvider';\nimport { castNativeType } from '~utils';\nimport BaseBox from '~components/Box/BaseBox';\nimport { makeMotionTime } from '~utils/makeMotionTime';\n\nconst SpinningBox = ({ children }: { children: React.ReactNode }): React.ReactElement => {\n  const { theme } = useTheme();\n  const duration = castNativeType(makeMotionTime(getIn(theme.motion, spinnerMotion.duration)));\n  const easing = getIn(theme.motion, spinnerMotion.easing) as EasingFactoryFn;\n\n  const rotation = useSharedValue(0);\n  const animatedStyles = useAnimatedStyle(() => {\n    return {\n      transform: [\n        {\n          rotateZ: `${rotation.value}deg`,\n        },\n      ],\n    };\n  }, [rotation.value]);\n\n  React.useEffect(() => {\n    rotation.value = withRepeat(\n      withTiming(360, {\n        duration,\n        easing,\n      }),\n      -1,\n    );\n    return (): void => {\n      cancelAnimation(rotation);\n    };\n  }, [duration, easing, rotation]);\n\n  return (\n    <BaseBox alignSelf=\"center\">\n      <Animated.View style={animatedStyles}>{children}</Animated.View>\n    </BaseBox>\n  );\n};\n\nexport { SpinningBox };\n"],"names":["SpinningBox","_ref","children","_useTheme","useTheme","theme","duration","castNativeType","makeMotionTime","getIn","motion","spinnerMotion","easing","rotation","useSharedValue","animatedStyles","useAnimatedStyle","transform","rotateZ","value","React","useEffect","withRepeat","withTiming","cancelAnimation","_jsx","BaseBox","alignSelf","Animated","View","style"],"mappings":";;;;;;;;;;;;;;;;AAgBM,IAAAA,WAAW,CAAG,SAAdA,WAAWA,CAAAC,IAAA,CAAwE,CAAA,IAAlEC,QAAQ,CAAAD,IAAA,CAARC,QAAQ,CAC7B,IAAAC,SAAA,CAAkBC,QAAQ,EAAE,CAApBC,KAAK,CAAAF,SAAA,CAALE,KAAK,CACb,IAAMC,QAAQ,CAAGC,cAAc,CAACC,cAAc,CAACC,KAAK,CAACJ,KAAK,CAACK,MAAM,CAAEC,MAAa,CAACL,QAAQ,CAAC,CAAC,CAAC,CAC5F,IAAMM,MAAM,CAAGH,KAAK,CAACJ,KAAK,CAACK,MAAM,CAAEC,MAAa,CAACC,MAAM,CAAoB,CAE3E,IAAMC,QAAQ,CAAGC,cAAc,CAAC,CAAC,CAAC,CAClC,IAAMC,cAAc,CAAGC,gBAAgB,CAAC,UAAM,CAC5C,OAAO,CACLC,SAAS,CAAE,CACT,CACEC,OAAO,CAAE,CAAGL,EAAAA,QAAQ,CAACM,KAAK,CAC5B,GAAA,CAAA,CAAC,CAEL,CAAC,CACH,CAAC,CAAE,CAACN,QAAQ,CAACM,KAAK,CAAC,CAAC,CAEpBC,cAAK,CAACC,SAAS,CAAC,UAAM,CACpBR,QAAQ,CAACM,KAAK,CAAGG,UAAU,CACzBC,UAAU,CAAC,GAAG,CAAE,CACdjB,QAAQ,CAARA,QAAQ,CACRM,MAAM,CAANA,MACF,CAAC,CAAC,CACF,CAAC,CACH,CAAC,CACD,OAAmB,UAAA,CACjBY,eAAe,CAACX,QAAQ,CAAC,CAC3B,CAAC,CACH,CAAC,CAAE,CAACP,QAAQ,CAAEM,MAAM,CAAEC,QAAQ,CAAC,CAAC,CAEhC,OACEY,GAAA,CAACC,OAAO,CAACC,CAAAA,SAAS,CAAC,QAAQ,CAAAzB,QAAA,CACzBuB,GAAA,CAACG,QAAQ,CAACC,IAAI,CAACC,CAAAA,KAAK,CAAEf,cAAe,CAAAb,QAAA,CAAEA,QAAQ,CAAgB,CAAC,CACzD,CAAC,CAEd;;;;"}
+{"version":3,"file":"SpinningBox.native.js","sources":["../../../../../../src/components/Spinner/BaseSpinner/SpinningBox.native.tsx"],"sourcesContent":["import React from 'react';\nimport type { EasingFactoryFn } from 'react-native-reanimated';\nimport Animated, {\n  withTiming,\n  cancelAnimation,\n  useAnimatedStyle,\n  useSharedValue,\n  withRepeat,\n} from 'react-native-reanimated';\nimport { motion as spinnerMotion } from './spinnerTokens';\nimport getIn from '~utils/lodashButBetter/get';\nimport { useTheme } from '~components/BladeProvider';\nimport { castNativeType } from '~utils';\nimport BaseBox from '~components/Box/BaseBox';\nimport { makeMotionTime } from '~utils/makeMotionTime';\n\nconst SpinningBox = ({ children }: { children: React.ReactNode }): React.ReactElement => {\n  const { theme } = useTheme();\n  const duration = castNativeType(makeMotionTime(getIn(theme.motion, spinnerMotion.duration)));\n  const easing = getIn(theme.motion, spinnerMotion.easing) as EasingFactoryFn;\n\n  const rotation = useSharedValue(0);\n  const animatedStyles = useAnimatedStyle(() => {\n    return {\n      transform: [\n        {\n          rotateZ: `${rotation.value}deg`,\n        },\n      ],\n    };\n  }, [rotation.value]);\n\n  React.useEffect(() => {\n    rotation.value = withRepeat(\n      withTiming(360, {\n        duration,\n        easing,\n      }),\n      -1,\n    );\n    return (): void => {\n      cancelAnimation(rotation);\n    };\n  }, [duration, easing, rotation]);\n\n  return (\n    <BaseBox alignSelf=\"center\">\n      <Animated.View style={animatedStyles}>{children}</Animated.View>\n    </BaseBox>\n  );\n};\n\nexport { SpinningBox };\n"],"names":["SpinningBox","_ref","children","_useTheme","useTheme","theme","duration","castNativeType","makeMotionTime","getIn","motion","spinnerMotion","easing","rotation","useSharedValue","animatedStyles","useAnimatedStyle","transform","rotateZ","value","React","useEffect","withRepeat","withTiming","cancelAnimation","_jsx","BaseBox","alignSelf","Animated","View","style"],"mappings":";;;;;;;;;;;;;;;;;;AAgBM,IAAAA,WAAW,CAAG,SAAdA,WAAWA,CAAAC,IAAA,CAAwE,CAAA,IAAlEC,QAAQ,CAAAD,IAAA,CAARC,QAAQ,CAC7B,IAAAC,SAAA,CAAkBC,QAAQ,EAAE,CAApBC,KAAK,CAAAF,SAAA,CAALE,KAAK,CACb,IAAMC,QAAQ,CAAGC,cAAc,CAACC,cAAc,CAACC,KAAK,CAACJ,KAAK,CAACK,MAAM,CAAEC,MAAa,CAACL,QAAQ,CAAC,CAAC,CAAC,CAC5F,IAAMM,MAAM,CAAGH,KAAK,CAACJ,KAAK,CAACK,MAAM,CAAEC,MAAa,CAACC,MAAM,CAAoB,CAE3E,IAAMC,QAAQ,CAAGC,cAAc,CAAC,CAAC,CAAC,CAClC,IAAMC,cAAc,CAAGC,gBAAgB,CAAC,UAAM,CAC5C,OAAO,CACLC,SAAS,CAAE,CACT,CACEC,OAAO,CAAE,CAAGL,EAAAA,QAAQ,CAACM,KAAK,CAC5B,GAAA,CAAA,CAAC,CAEL,CAAC,CACH,CAAC,CAAE,CAACN,QAAQ,CAACM,KAAK,CAAC,CAAC,CAEpBC,cAAK,CAACC,SAAS,CAAC,UAAM,CACpBR,QAAQ,CAACM,KAAK,CAAGG,UAAU,CACzBC,UAAU,CAAC,GAAG,CAAE,CACdjB,QAAQ,CAARA,QAAQ,CACRM,MAAM,CAANA,MACF,CAAC,CAAC,CACF,CAAC,CACH,CAAC,CACD,OAAmB,UAAA,CACjBY,eAAe,CAACX,QAAQ,CAAC,CAC3B,CAAC,CACH,CAAC,CAAE,CAACP,QAAQ,CAAEM,MAAM,CAAEC,QAAQ,CAAC,CAAC,CAEhC,OACEY,GAAA,CAACC,OAAO,CAACC,CAAAA,SAAS,CAAC,QAAQ,CAAAzB,QAAA,CACzBuB,GAAA,CAACG,QAAQ,CAACC,IAAI,CAACC,CAAAA,KAAK,CAAEf,cAAe,CAAAb,QAAA,CAAEA,QAAQ,CAAgB,CAAC,CACzD,CAAC,CAEd;;;;"}

package/build/lib/native/components/StepGroup/StepItemMarker.js

@@ -6,6 +6,8 @@ import 'react-native';
 import '@babel/runtime/helpers/slicedToArray';
 import 'react';
 import { makeSize } from '../../utils/makeSize/makeSize.js';
+import '../../tokens/global/typography.js';
+import '../../tokens/global/motion.js';
 import '../BladeProvider/useTheme.js';
 import { jsx } from 'react/jsx-runtime';
 

package/build/lib/native/components/StepGroup/StepItemMarker.js.map

@@ -1 +1 @@
-{"version":3,"file":"StepItemMarker.js","sources":["../../../../../src/components/StepGroup/StepItemMarker.tsx"],"sourcesContent":["import { useStepGroup } from './StepGroupContext';\nimport { getMarkerLineSpacings, iconSizeTokens } from './tokens';\nimport type { BaseBoxProps } from '~components/Box/BaseBox';\nimport BaseBox from '~components/Box/BaseBox';\nimport type { IconComponent } from '~components/Icons';\nimport type { IndicatorProps } from '~components/Indicator';\nimport { Indicator } from '~components/Indicator';\nimport { makeSize } from '~utils';\n\ntype MarkerBackgroundCircleProps = {\n  color: IndicatorProps['color'];\n  size: BaseBoxProps['width'];\n  margin: BaseBoxProps['margin'];\n  children: BaseBoxProps['children'];\n};\n\nconst MarkerBackgroundCircle = ({\n  color,\n  size,\n  margin,\n  children,\n}: MarkerBackgroundCircleProps): React.ReactElement => {\n  return (\n    <BaseBox\n      backgroundColor={\n        color === 'primary'\n          ? 'surface.background.primary.subtle'\n          : `feedback.background.${color}.subtle`\n      }\n      display=\"flex\"\n      alignItems=\"center\"\n      justifyContent=\"center\"\n      height={size}\n      width={size}\n      borderRadius=\"round\"\n      margin={margin}\n    >\n      {children}\n    </BaseBox>\n  );\n};\n\nconst StepItemIndicator = ({ color }: { color: IndicatorProps['color'] }): React.ReactElement => {\n  const { size } = useStepGroup();\n  const spacingTokens = getMarkerLineSpacings(size);\n\n  return (\n    <MarkerBackgroundCircle\n      color={color}\n      size={makeSize(spacingTokens.markerBackgroundSize)}\n      margin={makeSize(spacingTokens.markerMargin)}\n    >\n      <Indicator\n        position=\"relative\"\n        color={color}\n        size={size}\n        accessibilityLabel={`${color} indicator`}\n      />\n    </MarkerBackgroundCircle>\n  );\n};\n\ntype StepItemIconProps = {\n  icon: IconComponent;\n  color: IndicatorProps['color'];\n  isDisabled?: boolean;\n};\n\nconst StepItemIcon = ({\n  icon: Icon,\n  color = 'neutral',\n  isDisabled = false,\n}: StepItemIconProps): React.ReactElement => {\n  const { size } = useStepGroup();\n  const spacingTokens = getMarkerLineSpacings(size);\n\n  return (\n    <MarkerBackgroundCircle\n      color={color}\n      size={makeSize(spacingTokens.markerBackgroundSize)}\n      margin={makeSize(spacingTokens.markerMargin)}\n    >\n      <Icon\n        size={iconSizeTokens[size]}\n        color={\n          isDisabled\n            ? 'surface.icon.gray.disabled'\n            : color === 'primary'\n            ? 'surface.icon.primary.normal'\n            : `feedback.icon.${color}.intense`\n        }\n      />\n    </MarkerBackgroundCircle>\n  );\n};\n\nexport { StepItemIndicator, StepItemIcon };\n"],"names":["MarkerBackgroundCircle","_ref","color","size","margin","children","_jsx","BaseBox","backgroundColor","display","alignItems","justifyContent","height","width","borderRadius","StepItemIndicator","_ref2","_useStepGroup","useStepGroup","spacingTokens","getMarkerLineSpacings","makeSize","markerBackgroundSize","markerMargin","Indicator","position","accessibilityLabel","StepItemIcon","_ref3","Icon","icon","_ref3$color","_ref3$isDisabled","isDisabled","_useStepGroup2","iconSizeTokens"],"mappings":";;;;;;;;;;;AAgBA,IAAMA,sBAAsB,CAAG,SAAzBA,sBAAsBA,CAAAC,IAAA,CAK2B,KAJrDC,KAAK,CAAAD,IAAA,CAALC,KAAK,CACLC,IAAI,CAAAF,IAAA,CAAJE,IAAI,CACJC,MAAM,CAAAH,IAAA,CAANG,MAAM,CACNC,QAAQ,CAAAJ,IAAA,CAARI,QAAQ,CAER,OACEC,GAAA,CAACC,OAAO,CACNC,CAAAA,eAAe,CACbN,KAAK,GAAK,SAAS,CACf,mCAAmC,CACnC,CAAuBA,oBAAAA,EAAAA,KAAK,CACjC,OAAA,CAAA,CACDO,OAAO,CAAC,MAAM,CACdC,UAAU,CAAC,QAAQ,CACnBC,cAAc,CAAC,QAAQ,CACvBC,MAAM,CAAET,IAAK,CACbU,KAAK,CAAEV,IAAK,CACZW,YAAY,CAAC,OAAO,CACpBV,MAAM,CAAEA,MAAO,CAAAC,QAAA,CAEdA,QAAQ,CACF,CAAC,CAEd,CAAC,CAEK,IAAAU,iBAAiB,CAAG,SAApBA,iBAAiBA,CAAAC,KAAA,CAA0E,KAApEd,KAAK,CAAAc,KAAA,CAALd,KAAK,CAChC,IAAAe,aAAA,CAAiBC,YAAY,EAAE,CAAvBf,IAAI,CAAAc,aAAA,CAAJd,IAAI,CACZ,IAAMgB,aAAa,CAAGC,qBAAqB,CAACjB,IAAI,CAAC,CAEjD,OACEG,GAAA,CAACN,sBAAsB,CAAA,CACrBE,KAAK,CAAEA,KAAM,CACbC,IAAI,CAAEkB,QAAQ,CAACF,aAAa,CAACG,oBAAoB,CAAE,CACnDlB,MAAM,CAAEiB,QAAQ,CAACF,aAAa,CAACI,YAAY,CAAE,CAAAlB,QAAA,CAE7CC,GAAA,CAACkB,SAAS,CACRC,CAAAA,QAAQ,CAAC,UAAU,CACnBvB,KAAK,CAAEA,KAAM,CACbC,IAAI,CAAEA,IAAK,CACXuB,kBAAkB,CAAE,CAAA,EAAGxB,KAAK,CAAa,UAAA,CAAA,CAC1C,CAAC,CACoB,CAAC,CAE7B,EAQM,IAAAyB,YAAY,CAAG,SAAfA,YAAYA,CAAAC,KAAA,CAI2B,KAHrCC,IAAI,CAAAD,KAAA,CAAVE,IAAI,CAAAC,WAAA,CAAAH,KAAA,CACJ1B,KAAK,CAALA,KAAK,CAAA6B,WAAA,GAAG,KAAA,CAAA,CAAA,SAAS,CAAAA,WAAA,CAAAC,gBAAA,CAAAJ,KAAA,CACjBK,UAAU,CAAVA,UAAU,CAAAD,gBAAA,GAAG,KAAA,CAAA,CAAA,KAAK,CAAAA,gBAAA,CAElB,IAAAE,cAAA,CAAiBhB,YAAY,EAAE,CAAvBf,IAAI,CAAA+B,cAAA,CAAJ/B,IAAI,CACZ,IAAMgB,aAAa,CAAGC,qBAAqB,CAACjB,IAAI,CAAC,CAEjD,OACEG,GAAA,CAACN,sBAAsB,CACrBE,CAAAA,KAAK,CAAEA,KAAM,CACbC,IAAI,CAAEkB,QAAQ,CAACF,aAAa,CAACG,oBAAoB,CAAE,CACnDlB,MAAM,CAAEiB,QAAQ,CAACF,aAAa,CAACI,YAAY,CAAE,CAAAlB,QAAA,CAE7CC,GAAA,CAACuB,IAAI,CACH1B,CAAAA,IAAI,CAAEgC,cAAc,CAAChC,IAAI,CAAE,CAC3BD,KAAK,CACH+B,UAAU,CACN,4BAA4B,CAC5B/B,KAAK,GAAK,SAAS,CACnB,6BAA6B,CAC7B,CAAA,cAAA,EAAiBA,KAAK,CAC3B,QAAA,CAAA,CACF,CAAC,CACoB,CAAC,CAE7B;;;;"}
+{"version":3,"file":"StepItemMarker.js","sources":["../../../../../src/components/StepGroup/StepItemMarker.tsx"],"sourcesContent":["import { useStepGroup } from './StepGroupContext';\nimport { getMarkerLineSpacings, iconSizeTokens } from './tokens';\nimport type { BaseBoxProps } from '~components/Box/BaseBox';\nimport BaseBox from '~components/Box/BaseBox';\nimport type { IconComponent } from '~components/Icons';\nimport type { IndicatorProps } from '~components/Indicator';\nimport { Indicator } from '~components/Indicator';\nimport { makeSize } from '~utils';\n\ntype MarkerBackgroundCircleProps = {\n  color: IndicatorProps['color'];\n  size: BaseBoxProps['width'];\n  margin: BaseBoxProps['margin'];\n  children: BaseBoxProps['children'];\n};\n\nconst MarkerBackgroundCircle = ({\n  color,\n  size,\n  margin,\n  children,\n}: MarkerBackgroundCircleProps): React.ReactElement => {\n  return (\n    <BaseBox\n      backgroundColor={\n        color === 'primary'\n          ? 'surface.background.primary.subtle'\n          : `feedback.background.${color}.subtle`\n      }\n      display=\"flex\"\n      alignItems=\"center\"\n      justifyContent=\"center\"\n      height={size}\n      width={size}\n      borderRadius=\"round\"\n      margin={margin}\n    >\n      {children}\n    </BaseBox>\n  );\n};\n\nconst StepItemIndicator = ({ color }: { color: IndicatorProps['color'] }): React.ReactElement => {\n  const { size } = useStepGroup();\n  const spacingTokens = getMarkerLineSpacings(size);\n\n  return (\n    <MarkerBackgroundCircle\n      color={color}\n      size={makeSize(spacingTokens.markerBackgroundSize)}\n      margin={makeSize(spacingTokens.markerMargin)}\n    >\n      <Indicator\n        position=\"relative\"\n        color={color}\n        size={size}\n        accessibilityLabel={`${color} indicator`}\n      />\n    </MarkerBackgroundCircle>\n  );\n};\n\ntype StepItemIconProps = {\n  icon: IconComponent;\n  color: IndicatorProps['color'];\n  isDisabled?: boolean;\n};\n\nconst StepItemIcon = ({\n  icon: Icon,\n  color = 'neutral',\n  isDisabled = false,\n}: StepItemIconProps): React.ReactElement => {\n  const { size } = useStepGroup();\n  const spacingTokens = getMarkerLineSpacings(size);\n\n  return (\n    <MarkerBackgroundCircle\n      color={color}\n      size={makeSize(spacingTokens.markerBackgroundSize)}\n      margin={makeSize(spacingTokens.markerMargin)}\n    >\n      <Icon\n        size={iconSizeTokens[size]}\n        color={\n          isDisabled\n            ? 'surface.icon.gray.disabled'\n            : color === 'primary'\n            ? 'surface.icon.primary.normal'\n            : `feedback.icon.${color}.intense`\n        }\n      />\n    </MarkerBackgroundCircle>\n  );\n};\n\nexport { StepItemIndicator, StepItemIcon };\n"],"names":["MarkerBackgroundCircle","_ref","color","size","margin","children","_jsx","BaseBox","backgroundColor","display","alignItems","justifyContent","height","width","borderRadius","StepItemIndicator","_ref2","_useStepGroup","useStepGroup","spacingTokens","getMarkerLineSpacings","makeSize","markerBackgroundSize","markerMargin","Indicator","position","accessibilityLabel","StepItemIcon","_ref3","Icon","icon","_ref3$color","_ref3$isDisabled","isDisabled","_useStepGroup2","iconSizeTokens"],"mappings":";;;;;;;;;;;;;AAgBA,IAAMA,sBAAsB,CAAG,SAAzBA,sBAAsBA,CAAAC,IAAA,CAK2B,KAJrDC,KAAK,CAAAD,IAAA,CAALC,KAAK,CACLC,IAAI,CAAAF,IAAA,CAAJE,IAAI,CACJC,MAAM,CAAAH,IAAA,CAANG,MAAM,CACNC,QAAQ,CAAAJ,IAAA,CAARI,QAAQ,CAER,OACEC,GAAA,CAACC,OAAO,CACNC,CAAAA,eAAe,CACbN,KAAK,GAAK,SAAS,CACf,mCAAmC,CACnC,CAAuBA,oBAAAA,EAAAA,KAAK,CACjC,OAAA,CAAA,CACDO,OAAO,CAAC,MAAM,CACdC,UAAU,CAAC,QAAQ,CACnBC,cAAc,CAAC,QAAQ,CACvBC,MAAM,CAAET,IAAK,CACbU,KAAK,CAAEV,IAAK,CACZW,YAAY,CAAC,OAAO,CACpBV,MAAM,CAAEA,MAAO,CAAAC,QAAA,CAEdA,QAAQ,CACF,CAAC,CAEd,CAAC,CAEK,IAAAU,iBAAiB,CAAG,SAApBA,iBAAiBA,CAAAC,KAAA,CAA0E,KAApEd,KAAK,CAAAc,KAAA,CAALd,KAAK,CAChC,IAAAe,aAAA,CAAiBC,YAAY,EAAE,CAAvBf,IAAI,CAAAc,aAAA,CAAJd,IAAI,CACZ,IAAMgB,aAAa,CAAGC,qBAAqB,CAACjB,IAAI,CAAC,CAEjD,OACEG,GAAA,CAACN,sBAAsB,CAAA,CACrBE,KAAK,CAAEA,KAAM,CACbC,IAAI,CAAEkB,QAAQ,CAACF,aAAa,CAACG,oBAAoB,CAAE,CACnDlB,MAAM,CAAEiB,QAAQ,CAACF,aAAa,CAACI,YAAY,CAAE,CAAAlB,QAAA,CAE7CC,GAAA,CAACkB,SAAS,CACRC,CAAAA,QAAQ,CAAC,UAAU,CACnBvB,KAAK,CAAEA,KAAM,CACbC,IAAI,CAAEA,IAAK,CACXuB,kBAAkB,CAAE,CAAA,EAAGxB,KAAK,CAAa,UAAA,CAAA,CAC1C,CAAC,CACoB,CAAC,CAE7B,EAQM,IAAAyB,YAAY,CAAG,SAAfA,YAAYA,CAAAC,KAAA,CAI2B,KAHrCC,IAAI,CAAAD,KAAA,CAAVE,IAAI,CAAAC,WAAA,CAAAH,KAAA,CACJ1B,KAAK,CAALA,KAAK,CAAA6B,WAAA,GAAG,KAAA,CAAA,CAAA,SAAS,CAAAA,WAAA,CAAAC,gBAAA,CAAAJ,KAAA,CACjBK,UAAU,CAAVA,UAAU,CAAAD,gBAAA,GAAG,KAAA,CAAA,CAAA,KAAK,CAAAA,gBAAA,CAElB,IAAAE,cAAA,CAAiBhB,YAAY,EAAE,CAAvBf,IAAI,CAAA+B,cAAA,CAAJ/B,IAAI,CACZ,IAAMgB,aAAa,CAAGC,qBAAqB,CAACjB,IAAI,CAAC,CAEjD,OACEG,GAAA,CAACN,sBAAsB,CACrBE,CAAAA,KAAK,CAAEA,KAAM,CACbC,IAAI,CAAEkB,QAAQ,CAACF,aAAa,CAACG,oBAAoB,CAAE,CACnDlB,MAAM,CAAEiB,QAAQ,CAACF,aAAa,CAACI,YAAY,CAAE,CAAAlB,QAAA,CAE7CC,GAAA,CAACuB,IAAI,CACH1B,CAAAA,IAAI,CAAEgC,cAAc,CAAChC,IAAI,CAAE,CAC3BD,KAAK,CACH+B,UAAU,CACN,4BAA4B,CAC5B/B,KAAK,GAAK,SAAS,CACnB,6BAA6B,CAC7B,CAAA,cAAA,EAAiBA,KAAK,CAC3B,QAAA,CAAA,CACF,CAAC,CACoB,CAAC,CAE7B;;;;"}

package/build/lib/native/components/Switch/AnimatedThumb.native.js

@@ -8,6 +8,8 @@ import 'react-native';
 import { useBreakpoint } from '../../utils/useBreakpoint/useBreakpoint.js';
 import '@babel/runtime/helpers/slicedToArray';
 import { makeBorderSize } from '../../utils/makeBorderSize/makeBorderSize.js';
+import '../../tokens/global/typography.js';
+import '../../tokens/global/motion.js';
 import useTheme from '../BladeProvider/useTheme.js';
 import '@gorhom/portal';
 import 'react-native-gesture-handler';

package/build/lib/native/components/Switch/AnimatedThumb.native.js.map

@@ -1 +1 @@
-{"version":3,"file":"AnimatedThumb.native.js","sources":["../../../../../src/components/Switch/AnimatedThumb.native.tsx"],"sourcesContent":["/* eslint-disable react-hooks/exhaustive-deps */\nimport styled from 'styled-components/native';\nimport React from 'react';\nimport Animated, {\n  interpolate,\n  useAnimatedStyle,\n  useSharedValue,\n  withTiming,\n} from 'react-native-reanimated';\n\nimport { switchColors, switchMotion, switchSizes } from './switchTokens';\nimport type { AnimatedThumbProps } from './types';\nimport isNumber from '~utils/lodashButBetter/isNumber';\nimport getIn from '~utils/lodashButBetter/get';\nimport { useBreakpoint } from '~utils';\nimport { useTheme } from '~components/BladeProvider';\nimport { makeBorderSize } from '~utils/makeBorderSize';\n\nconst StyledAnimatedThumb = styled(Animated.View)<{ isDisabled?: boolean }>(\n  ({ theme, isDisabled }) => {\n    const variant = isDisabled ? 'disabled' : 'default';\n    const backgroundColor = getIn(theme, switchColors.thumb[variant].background);\n\n    return {\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      flexShrink: 0,\n      width: '100%',\n      height: '100%',\n      borderRadius: makeBorderSize(theme.border.radius.max),\n      backgroundColor,\n      position: 'absolute',\n    };\n  },\n);\n\nconst AnimatedThumb = ({\n  isChecked,\n  isDisabled,\n  size = 'medium',\n  children,\n  isPressed,\n}: AnimatedThumbProps): React.ReactElement => {\n  const { theme } = useTheme();\n  const { matchedDeviceType } = useBreakpoint({ breakpoints: theme.breakpoints });\n  const sharedLeft = useSharedValue(isChecked ? 1 : 0);\n  const sharedWidth = useSharedValue(isPressed ? 1 : 0);\n  const sharedShouldShiftOffset = useSharedValue(Boolean(isChecked && isPressed));\n\n  const easing = getIn(theme, switchMotion.easing.thumb);\n  const duration = getIn(theme, switchMotion.duration.thumb);\n  const thumbWidth = switchSizes.thumb[matchedDeviceType][size].width;\n  const finalWidth = isNumber(thumbWidth) ? thumbWidth : getIn(theme, thumbWidth);\n\n  React.useEffect(() => {\n    sharedLeft.value = withTiming(isChecked ? 1 : 0, {\n      duration,\n      easing,\n    });\n  }, [isChecked]);\n\n  React.useEffect(() => {\n    sharedWidth.value = withTiming(isPressed ? 1 : 0, {\n      duration,\n      easing,\n    });\n  }, [isPressed]);\n\n  React.useEffect(() => {\n    sharedShouldShiftOffset.value = Boolean(isChecked && isPressed);\n  }, [isChecked, isPressed]);\n\n  const thumbAnimation = useAnimatedStyle(() => {\n    return {\n      width: interpolate(\n        sharedWidth.value,\n        [0, 1],\n        // scale thumb by 25%, 1.25 comes from motion guidelines\n        [finalWidth, finalWidth * 1.25],\n      ),\n      left: withTiming(\n        // While on checked state, shift the thumb 25% to left because\n        // We elongate the width 25% to right.\n        sharedShouldShiftOffset.value ? finalWidth * -0.25 : 0,\n        { easing, duration },\n      ),\n      transform: [\n        {\n          translateX: interpolate(sharedLeft.value, [0, 1], [0, finalWidth]),\n        },\n      ],\n    };\n  }, []);\n\n  return (\n    <StyledAnimatedThumb style={thumbAnimation} isDisabled={isDisabled}>\n      {children}\n    </StyledAnimatedThumb>\n  );\n};\n\nexport { AnimatedThumb };\n"],"names":["StyledAnimatedThumb","styled","Animated","View","_ref","theme","isDisabled","variant","backgroundColor","getIn","switchColors","thumb","background","display","alignItems","justifyContent","flexShrink","width","height","borderRadius","makeBorderSize","border","radius","max","position","AnimatedThumb","_ref2","isChecked","_ref2$size","size","children","isPressed","_useTheme","useTheme","_useBreakpoint","useBreakpoint","breakpoints","matchedDeviceType","sharedLeft","useSharedValue","sharedWidth","sharedShouldShiftOffset","Boolean","easing","switchMotion","duration","thumbWidth","switchSizes","finalWidth","isNumber","React","useEffect","value","withTiming","thumbAnimation","useAnimatedStyle","interpolate","left","transform","translateX","_jsx","style"],"mappings":"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"}
+{"version":3,"file":"AnimatedThumb.native.js","sources":["../../../../../src/components/Switch/AnimatedThumb.native.tsx"],"sourcesContent":["/* eslint-disable react-hooks/exhaustive-deps */\nimport styled from 'styled-components/native';\nimport React from 'react';\nimport Animated, {\n  interpolate,\n  useAnimatedStyle,\n  useSharedValue,\n  withTiming,\n} from 'react-native-reanimated';\n\nimport { switchColors, switchMotion, switchSizes } from './switchTokens';\nimport type { AnimatedThumbProps } from './types';\nimport isNumber from '~utils/lodashButBetter/isNumber';\nimport getIn from '~utils/lodashButBetter/get';\nimport { useBreakpoint } from '~utils';\nimport { useTheme } from '~components/BladeProvider';\nimport { makeBorderSize } from '~utils/makeBorderSize';\n\nconst StyledAnimatedThumb = styled(Animated.View)<{ isDisabled?: boolean }>(\n  ({ theme, isDisabled }) => {\n    const variant = isDisabled ? 'disabled' : 'default';\n    const backgroundColor = getIn(theme, switchColors.thumb[variant].background);\n\n    return {\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      flexShrink: 0,\n      width: '100%',\n      height: '100%',\n      borderRadius: makeBorderSize(theme.border.radius.max),\n      backgroundColor,\n      position: 'absolute',\n    };\n  },\n);\n\nconst AnimatedThumb = ({\n  isChecked,\n  isDisabled,\n  size = 'medium',\n  children,\n  isPressed,\n}: AnimatedThumbProps): React.ReactElement => {\n  const { theme } = useTheme();\n  const { matchedDeviceType } = useBreakpoint({ breakpoints: theme.breakpoints });\n  const sharedLeft = useSharedValue(isChecked ? 1 : 0);\n  const sharedWidth = useSharedValue(isPressed ? 1 : 0);\n  const sharedShouldShiftOffset = useSharedValue(Boolean(isChecked && isPressed));\n\n  const easing = getIn(theme, switchMotion.easing.thumb);\n  const duration = getIn(theme, switchMotion.duration.thumb);\n  const thumbWidth = switchSizes.thumb[matchedDeviceType][size].width;\n  const finalWidth = isNumber(thumbWidth) ? thumbWidth : getIn(theme, thumbWidth);\n\n  React.useEffect(() => {\n    sharedLeft.value = withTiming(isChecked ? 1 : 0, {\n      duration,\n      easing,\n    });\n  }, [isChecked]);\n\n  React.useEffect(() => {\n    sharedWidth.value = withTiming(isPressed ? 1 : 0, {\n      duration,\n      easing,\n    });\n  }, [isPressed]);\n\n  React.useEffect(() => {\n    sharedShouldShiftOffset.value = Boolean(isChecked && isPressed);\n  }, [isChecked, isPressed]);\n\n  const thumbAnimation = useAnimatedStyle(() => {\n    return {\n      width: interpolate(\n        sharedWidth.value,\n        [0, 1],\n        // scale thumb by 25%, 1.25 comes from motion guidelines\n        [finalWidth, finalWidth * 1.25],\n      ),\n      left: withTiming(\n        // While on checked state, shift the thumb 25% to left because\n        // We elongate the width 25% to right.\n        sharedShouldShiftOffset.value ? finalWidth * -0.25 : 0,\n        { easing, duration },\n      ),\n      transform: [\n        {\n          translateX: interpolate(sharedLeft.value, [0, 1], [0, finalWidth]),\n        },\n      ],\n    };\n  }, []);\n\n  return (\n    <StyledAnimatedThumb style={thumbAnimation} isDisabled={isDisabled}>\n      {children}\n    </StyledAnimatedThumb>\n  );\n};\n\nexport { AnimatedThumb };\n"],"names":["StyledAnimatedThumb","styled","Animated","View","_ref","theme","isDisabled","variant","backgroundColor","getIn","switchColors","thumb","background","display","alignItems","justifyContent","flexShrink","width","height","borderRadius","makeBorderSize","border","radius","max","position","AnimatedThumb","_ref2","isChecked","_ref2$size","size","children","isPressed","_useTheme","useTheme","_useBreakpoint","useBreakpoint","breakpoints","matchedDeviceType","sharedLeft","useSharedValue","sharedWidth","sharedShouldShiftOffset","Boolean","easing","switchMotion","duration","thumbWidth","switchSizes","finalWidth","isNumber","React","useEffect","value","withTiming","thumbAnimation","useAnimatedStyle","interpolate","left","transform","translateX","_jsx","style"],"mappings":"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"}

package/build/lib/native/components/Switch/AnimatedThumbIcon.native.js

@@ -8,6 +8,8 @@ import 'react-native-gesture-handler';
 import useTheme from '../BladeProvider/useTheme.js';
 import 'react-native';
 import '@babel/runtime/helpers/slicedToArray';
+import '../../tokens/global/typography.js';
+import '../../tokens/global/motion.js';
 import '../BottomSheet/BottomSheetStack.js';
 import { jsx } from 'react/jsx-runtime';
 import 'react-native-svg';

package/build/lib/native/components/Switch/AnimatedThumbIcon.native.js.map

@@ -1 +1 @@
-{"version":3,"file":"AnimatedThumbIcon.native.js","sources":["../../../../../src/components/Switch/AnimatedThumbIcon.native.tsx"],"sourcesContent":["import React from 'react';\nimport Animated, {\n  interpolate,\n  useAnimatedStyle,\n  useSharedValue,\n  withTiming,\n} from 'react-native-reanimated';\nimport { switchMotion } from './switchTokens';\nimport getIn from '~utils/lodashButBetter/get';\nimport { useTheme } from '~components/BladeProvider';\nimport type { SvgProps } from '~components/Icons/_Svg/Svg/types';\nimport Svg from '~components/Icons/_Svg';\n\nconst AnimatedThumbIcon = ({\n  children,\n  isChecked,\n  width,\n  height,\n  viewBox,\n  fill,\n}: {\n  children: React.ReactNode;\n  isChecked: boolean;\n} & SvgProps): React.ReactElement => {\n  const { theme } = useTheme();\n  const opacity = useSharedValue(isChecked ? 1 : 0);\n\n  const easing = getIn(theme, switchMotion.easing.thumbIcon);\n  const duration = getIn(theme, switchMotion.duration.thumbIcon);\n\n  React.useEffect(() => {\n    opacity.value = withTiming(isChecked ? 1 : 0, {\n      duration,\n      easing,\n    });\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isChecked]);\n\n  const opacityStyle = useAnimatedStyle(() => {\n    return {\n      opacity: interpolate(opacity.value, [0, 0.2, 1], [0, 0, 1]),\n    };\n  }, []);\n\n  return (\n    <Animated.View style={opacityStyle}>\n      <Svg width={width} height={height} viewBox={viewBox} fill={fill}>\n        {children}\n      </Svg>\n    </Animated.View>\n  );\n};\n\nexport { AnimatedThumbIcon };\n"],"names":["AnimatedThumbIcon","_ref","children","isChecked","width","height","viewBox","fill","_useTheme","useTheme","theme","opacity","useSharedValue","easing","getIn","switchMotion","thumbIcon","duration","React","useEffect","value","withTiming","opacityStyle","useAnimatedStyle","interpolate","_jsx","Animated","View","style","Svg"],"mappings":";;;;;;;;;;;;;;;;AAaM,IAAAA,iBAAiB,CAAG,SAApBA,iBAAiBA,CAAAC,IAAA,CAUc,CATnC,IAAAC,QAAQ,CAAAD,IAAA,CAARC,QAAQ,CACRC,SAAS,CAAAF,IAAA,CAATE,SAAS,CACTC,KAAK,CAAAH,IAAA,CAALG,KAAK,CACLC,MAAM,CAAAJ,IAAA,CAANI,MAAM,CACNC,OAAO,CAAAL,IAAA,CAAPK,OAAO,CACPC,IAAI,CAAAN,IAAA,CAAJM,IAAI,CAKJ,IAAAC,SAAA,CAAkBC,QAAQ,EAAE,CAApBC,KAAK,CAAAF,SAAA,CAALE,KAAK,CACb,IAAMC,OAAO,CAAGC,cAAc,CAACT,SAAS,CAAG,CAAC,CAAG,CAAC,CAAC,CAEjD,IAAMU,MAAM,CAAGC,KAAK,CAACJ,KAAK,CAAEK,YAAY,CAACF,MAAM,CAACG,SAAS,CAAC,CAC1D,IAAMC,QAAQ,CAAGH,KAAK,CAACJ,KAAK,CAAEK,YAAY,CAACE,QAAQ,CAACD,SAAS,CAAC,CAE9DE,cAAK,CAACC,SAAS,CAAC,UAAM,CACpBR,OAAO,CAACS,KAAK,CAAGC,UAAU,CAAClB,SAAS,CAAG,CAAC,CAAG,CAAC,CAAE,CAC5Cc,QAAQ,CAARA,QAAQ,CACRJ,MAAM,CAANA,MACF,CAAC,CAAC,CAEJ,CAAC,CAAE,CAACV,SAAS,CAAC,CAAC,CAEf,IAAMmB,YAAY,CAAGC,gBAAgB,CAAC,UAAM,CAC1C,OAAO,CACLZ,OAAO,CAAEa,WAAW,CAACb,OAAO,CAACS,KAAK,CAAE,CAAC,CAAC,CAAE,GAAG,CAAE,CAAC,CAAC,CAAE,CAAC,CAAC,CAAE,CAAC,CAAE,CAAC,CAAC,CAC5D,CAAC,CACH,CAAC,CAAE,EAAE,CAAC,CAEN,OACEK,GAAA,CAACC,QAAQ,CAACC,IAAI,CAAA,CAACC,KAAK,CAAEN,YAAa,CAAApB,QAAA,CACjCuB,GAAA,CAACI,GAAG,CAACzB,CAAAA,KAAK,CAAEA,KAAM,CAACC,MAAM,CAAEA,MAAO,CAACC,OAAO,CAAEA,OAAQ,CAACC,IAAI,CAAEA,IAAK,CAAAL,QAAA,CAC7DA,QAAQ,CACN,CAAC,CACO,CAAC,CAEpB;;;;"}
+{"version":3,"file":"AnimatedThumbIcon.native.js","sources":["../../../../../src/components/Switch/AnimatedThumbIcon.native.tsx"],"sourcesContent":["import React from 'react';\nimport Animated, {\n  interpolate,\n  useAnimatedStyle,\n  useSharedValue,\n  withTiming,\n} from 'react-native-reanimated';\nimport { switchMotion } from './switchTokens';\nimport getIn from '~utils/lodashButBetter/get';\nimport { useTheme } from '~components/BladeProvider';\nimport type { SvgProps } from '~components/Icons/_Svg/Svg/types';\nimport Svg from '~components/Icons/_Svg';\n\nconst AnimatedThumbIcon = ({\n  children,\n  isChecked,\n  width,\n  height,\n  viewBox,\n  fill,\n}: {\n  children: React.ReactNode;\n  isChecked: boolean;\n} & SvgProps): React.ReactElement => {\n  const { theme } = useTheme();\n  const opacity = useSharedValue(isChecked ? 1 : 0);\n\n  const easing = getIn(theme, switchMotion.easing.thumbIcon);\n  const duration = getIn(theme, switchMotion.duration.thumbIcon);\n\n  React.useEffect(() => {\n    opacity.value = withTiming(isChecked ? 1 : 0, {\n      duration,\n      easing,\n    });\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isChecked]);\n\n  const opacityStyle = useAnimatedStyle(() => {\n    return {\n      opacity: interpolate(opacity.value, [0, 0.2, 1], [0, 0, 1]),\n    };\n  }, []);\n\n  return (\n    <Animated.View style={opacityStyle}>\n      <Svg width={width} height={height} viewBox={viewBox} fill={fill}>\n        {children}\n      </Svg>\n    </Animated.View>\n  );\n};\n\nexport { AnimatedThumbIcon };\n"],"names":["AnimatedThumbIcon","_ref","children","isChecked","width","height","viewBox","fill","_useTheme","useTheme","theme","opacity","useSharedValue","easing","getIn","switchMotion","thumbIcon","duration","React","useEffect","value","withTiming","opacityStyle","useAnimatedStyle","interpolate","_jsx","Animated","View","style","Svg"],"mappings":";;;;;;;;;;;;;;;;;;AAaM,IAAAA,iBAAiB,CAAG,SAApBA,iBAAiBA,CAAAC,IAAA,CAUc,CATnC,IAAAC,QAAQ,CAAAD,IAAA,CAARC,QAAQ,CACRC,SAAS,CAAAF,IAAA,CAATE,SAAS,CACTC,KAAK,CAAAH,IAAA,CAALG,KAAK,CACLC,MAAM,CAAAJ,IAAA,CAANI,MAAM,CACNC,OAAO,CAAAL,IAAA,CAAPK,OAAO,CACPC,IAAI,CAAAN,IAAA,CAAJM,IAAI,CAKJ,IAAAC,SAAA,CAAkBC,QAAQ,EAAE,CAApBC,KAAK,CAAAF,SAAA,CAALE,KAAK,CACb,IAAMC,OAAO,CAAGC,cAAc,CAACT,SAAS,CAAG,CAAC,CAAG,CAAC,CAAC,CAEjD,IAAMU,MAAM,CAAGC,KAAK,CAACJ,KAAK,CAAEK,YAAY,CAACF,MAAM,CAACG,SAAS,CAAC,CAC1D,IAAMC,QAAQ,CAAGH,KAAK,CAACJ,KAAK,CAAEK,YAAY,CAACE,QAAQ,CAACD,SAAS,CAAC,CAE9DE,cAAK,CAACC,SAAS,CAAC,UAAM,CACpBR,OAAO,CAACS,KAAK,CAAGC,UAAU,CAAClB,SAAS,CAAG,CAAC,CAAG,CAAC,CAAE,CAC5Cc,QAAQ,CAARA,QAAQ,CACRJ,MAAM,CAANA,MACF,CAAC,CAAC,CAEJ,CAAC,CAAE,CAACV,SAAS,CAAC,CAAC,CAEf,IAAMmB,YAAY,CAAGC,gBAAgB,CAAC,UAAM,CAC1C,OAAO,CACLZ,OAAO,CAAEa,WAAW,CAACb,OAAO,CAACS,KAAK,CAAE,CAAC,CAAC,CAAE,GAAG,CAAE,CAAC,CAAC,CAAE,CAAC,CAAC,CAAE,CAAC,CAAE,CAAC,CAAC,CAC5D,CAAC,CACH,CAAC,CAAE,EAAE,CAAC,CAEN,OACEK,GAAA,CAACC,QAAQ,CAACC,IAAI,CAAA,CAACC,KAAK,CAAEN,YAAa,CAAApB,QAAA,CACjCuB,GAAA,CAACI,GAAG,CAACzB,CAAAA,KAAK,CAAEA,KAAM,CAACC,MAAM,CAAEA,MAAO,CAACC,OAAO,CAAEA,OAAQ,CAACC,IAAI,CAAEA,IAAK,CAAAL,QAAA,CAC7DA,QAAQ,CACN,CAAC,CACO,CAAC,CAEpB;;;;"}

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

@@ -12,6 +12,8 @@ import 'react-native-gesture-handler';
 import useTheme from '../BladeProvider/useTheme.js';
 import 'react-native';
 import { useBreakpoint } from '../../utils/useBreakpoint/useBreakpoint.js';
+import '../../tokens/global/typography.js';
+import '../../tokens/global/motion.js';
 import '../BottomSheet/BottomSheetStack.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { BaseBox } from '../Box/BaseBox/BaseBox.native.js';
@@ -23,8 +25,6 @@ import { SelectorLabel } from '../Form/Selector/SelectorLabel.native.js';
 import { makeAccessible } from '../../utils/makeAccessible/makeAccessible.native.js';
 import { assignWithoutSideEffects } from '../../utils/assignWithoutSideEffects/assignWithoutSideEffects.js';
 import { getStyledProps } from '../Box/styledProps/getStyledProps.js';
-import '../../tokens/global/typography.js';
-import '../../tokens/global/motion.js';
 import { getOuterMotionRef, getInnerMotionRef } from '../../utils/getMotionRefs.js';
 import { makeAnalyticsAttribute } from '../../utils/makeAnalyticsAttribute/makeAnalyticsAttribute.js';
 

package/build/lib/native/components/Switch/SwitchTrack.native.js

@@ -10,6 +10,8 @@ import 'react-native-gesture-handler';
 import useTheme from '../BladeProvider/useTheme.js';
 import 'react-native';
 import '@babel/runtime/helpers/slicedToArray';
+import '../../tokens/global/typography.js';
+import '../../tokens/global/motion.js';
 import '../BottomSheet/BottomSheetStack.js';
 import { jsx } from 'react/jsx-runtime';
 

package/build/lib/native/components/Switch/SwitchTrack.native.js.map

@@ -1 +1 @@
-{"version":3,"file":"SwitchTrack.native.js","sources":["../../../../../src/components/Switch/SwitchTrack.native.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport Animated, {\n  interpolateColor,\n  useAnimatedStyle,\n  useSharedValue,\n  withTiming,\n} from 'react-native-reanimated';\nimport React from 'react';\nimport type { TrackProps } from './types';\nimport { getTrackStyles } from './getTrackStyles';\nimport { switchColors, switchMotion } from './switchTokens';\nimport getIn from '~utils/lodashButBetter/get';\nimport { useTheme } from '~components/BladeProvider';\n\nconst StyledSwitchTrack = styled(Animated.View)<TrackProps>(\n  ({ theme, size, deviceType, isDisabled, isChecked }) => {\n    return {\n      ...getTrackStyles({ theme, size, deviceType, isDisabled, isChecked }),\n    };\n  },\n);\n\nconst SwitchTrack = ({\n  children,\n  isChecked,\n  ...props\n}: TrackProps & { children: React.ReactNode }): React.ReactElement => {\n  const { theme } = useTheme();\n  const sharedColor = useSharedValue(isChecked ? 1 : 0);\n\n  const easing = getIn(theme, switchMotion.easing.track);\n  const duration = getIn(theme, switchMotion.duration.track);\n  const checkedColor = getIn(theme, switchColors.track.default.background.checked);\n  const uncheckedColor = getIn(theme, switchColors.track.default.background.unchecked);\n\n  React.useEffect(() => {\n    sharedColor.value = withTiming(isChecked ? 1 : 0, {\n      duration,\n      easing,\n    });\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isChecked]);\n\n  const colorStyle = useAnimatedStyle(() => {\n    return {\n      backgroundColor: interpolateColor(sharedColor.value, [0, 1], [uncheckedColor, checkedColor]),\n    };\n  }, []);\n\n  return (\n    <StyledSwitchTrack isChecked={isChecked} {...props} style={colorStyle}>\n      {children}\n    </StyledSwitchTrack>\n  );\n};\n\nexport { SwitchTrack };\n"],"names":["StyledSwitchTrack","styled","Animated","View","_ref","theme","size","deviceType","isDisabled","isChecked","Object","assign","getTrackStyles","SwitchTrack","_ref2","children","props","_objectWithoutProperties","_excluded","_useTheme","useTheme","sharedColor","useSharedValue","easing","getIn","switchMotion","track","duration","checkedColor","switchColors","default","background","checked","uncheckedColor","unchecked","React","useEffect","value","withTiming","colorStyle","useAnimatedStyle","backgroundColor","interpolateColor","_jsx","style"],"mappings":";;;;;;;;;;;;;;;AAAA,IAAA,SAAA,CAAA,CAAA,UAAA,CAAA,WAAA,CAAA,CAcA,IAAMA,iBAAiB,CAAGC,MAAM,CAACC,QAAQ,CAACC,IAAI,CAAC,CAC7C,SAAAC,IAAA,CAAwD,CAAA,IAArDC,KAAK,CAAAD,IAAA,CAALC,KAAK,CAAEC,IAAI,CAAAF,IAAA,CAAJE,IAAI,CAAEC,UAAU,CAAAH,IAAA,CAAVG,UAAU,CAAEC,UAAU,CAAAJ,IAAA,CAAVI,UAAU,CAAEC,SAAS,CAAAL,IAAA,CAATK,SAAS,CAC/C,OAAAC,MAAA,CAAAC,MAAA,CAAA,EAAA,CACKC,cAAc,CAAC,CAAEP,KAAK,CAALA,KAAK,CAAEC,IAAI,CAAJA,IAAI,CAAEC,UAAU,CAAVA,UAAU,CAAEC,UAAU,CAAVA,UAAU,CAAEC,SAAS,CAATA,SAAU,CAAC,CAAC,CAAA,CAEzE,CACF,CAAC,CAEK,IAAAI,WAAW,CAAG,SAAdA,WAAWA,CAAAC,KAAA,CAIqD,KAHpEC,QAAQ,CAAAD,KAAA,CAARC,QAAQ,CACRN,SAAS,CAAAK,KAAA,CAATL,SAAS,CACNO,KAAK,CAAAC,wBAAA,CAAAH,KAAA,CAAAI,SAAA,CAAA,CAER,IAAAC,SAAA,CAAkBC,QAAQ,EAAE,CAApBf,KAAK,CAAAc,SAAA,CAALd,KAAK,CACb,IAAMgB,WAAW,CAAGC,cAAc,CAACb,SAAS,CAAG,CAAC,CAAG,CAAC,CAAC,CAErD,IAAMc,MAAM,CAAGC,KAAK,CAACnB,KAAK,CAAEoB,YAAY,CAACF,MAAM,CAACG,KAAK,CAAC,CACtD,IAAMC,QAAQ,CAAGH,KAAK,CAACnB,KAAK,CAAEoB,YAAY,CAACE,QAAQ,CAACD,KAAK,CAAC,CAC1D,IAAME,YAAY,CAAGJ,KAAK,CAACnB,KAAK,CAAEwB,YAAY,CAACH,KAAK,CAACI,OAAO,CAACC,UAAU,CAACC,OAAO,CAAC,CAChF,IAAMC,cAAc,CAAGT,KAAK,CAACnB,KAAK,CAAEwB,YAAY,CAACH,KAAK,CAACI,OAAO,CAACC,UAAU,CAACG,SAAS,CAAC,CAEpFC,cAAK,CAACC,SAAS,CAAC,UAAM,CACpBf,WAAW,CAACgB,KAAK,CAAGC,UAAU,CAAC7B,SAAS,CAAG,CAAC,CAAG,CAAC,CAAE,CAChDkB,QAAQ,CAARA,QAAQ,CACRJ,MAAM,CAANA,MACF,CAAC,CAAC,CAEJ,CAAC,CAAE,CAACd,SAAS,CAAC,CAAC,CAEf,IAAM8B,UAAU,CAAGC,gBAAgB,CAAC,UAAM,CACxC,OAAO,CACLC,eAAe,CAAEC,gBAAgB,CAACrB,WAAW,CAACgB,KAAK,CAAE,CAAC,CAAC,CAAE,CAAC,CAAC,CAAE,CAACJ,cAAc,CAAEL,YAAY,CAAC,CAC7F,CAAC,CACH,CAAC,CAAE,EAAE,CAAC,CAEN,OACEe,GAAA,CAAC3C,iBAAiB,CAAAU,MAAA,CAAAC,MAAA,CAAA,CAACF,SAAS,CAAEA,SAAU,EAAKO,KAAK,CAAA,CAAE4B,KAAK,CAAEL,UAAW,CAAAxB,QAAA,CACnEA,QAAQ,CACQ,CAAA,CAAC,CAExB;;;;"}
+{"version":3,"file":"SwitchTrack.native.js","sources":["../../../../../src/components/Switch/SwitchTrack.native.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport Animated, {\n  interpolateColor,\n  useAnimatedStyle,\n  useSharedValue,\n  withTiming,\n} from 'react-native-reanimated';\nimport React from 'react';\nimport type { TrackProps } from './types';\nimport { getTrackStyles } from './getTrackStyles';\nimport { switchColors, switchMotion } from './switchTokens';\nimport getIn from '~utils/lodashButBetter/get';\nimport { useTheme } from '~components/BladeProvider';\n\nconst StyledSwitchTrack = styled(Animated.View)<TrackProps>(\n  ({ theme, size, deviceType, isDisabled, isChecked }) => {\n    return {\n      ...getTrackStyles({ theme, size, deviceType, isDisabled, isChecked }),\n    };\n  },\n);\n\nconst SwitchTrack = ({\n  children,\n  isChecked,\n  ...props\n}: TrackProps & { children: React.ReactNode }): React.ReactElement => {\n  const { theme } = useTheme();\n  const sharedColor = useSharedValue(isChecked ? 1 : 0);\n\n  const easing = getIn(theme, switchMotion.easing.track);\n  const duration = getIn(theme, switchMotion.duration.track);\n  const checkedColor = getIn(theme, switchColors.track.default.background.checked);\n  const uncheckedColor = getIn(theme, switchColors.track.default.background.unchecked);\n\n  React.useEffect(() => {\n    sharedColor.value = withTiming(isChecked ? 1 : 0, {\n      duration,\n      easing,\n    });\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isChecked]);\n\n  const colorStyle = useAnimatedStyle(() => {\n    return {\n      backgroundColor: interpolateColor(sharedColor.value, [0, 1], [uncheckedColor, checkedColor]),\n    };\n  }, []);\n\n  return (\n    <StyledSwitchTrack isChecked={isChecked} {...props} style={colorStyle}>\n      {children}\n    </StyledSwitchTrack>\n  );\n};\n\nexport { SwitchTrack };\n"],"names":["StyledSwitchTrack","styled","Animated","View","_ref","theme","size","deviceType","isDisabled","isChecked","Object","assign","getTrackStyles","SwitchTrack","_ref2","children","props","_objectWithoutProperties","_excluded","_useTheme","useTheme","sharedColor","useSharedValue","easing","getIn","switchMotion","track","duration","checkedColor","switchColors","default","background","checked","uncheckedColor","unchecked","React","useEffect","value","withTiming","colorStyle","useAnimatedStyle","backgroundColor","interpolateColor","_jsx","style"],"mappings":";;;;;;;;;;;;;;;;;AAAA,IAAA,SAAA,CAAA,CAAA,UAAA,CAAA,WAAA,CAAA,CAcA,IAAMA,iBAAiB,CAAGC,MAAM,CAACC,QAAQ,CAACC,IAAI,CAAC,CAC7C,SAAAC,IAAA,CAAwD,CAAA,IAArDC,KAAK,CAAAD,IAAA,CAALC,KAAK,CAAEC,IAAI,CAAAF,IAAA,CAAJE,IAAI,CAAEC,UAAU,CAAAH,IAAA,CAAVG,UAAU,CAAEC,UAAU,CAAAJ,IAAA,CAAVI,UAAU,CAAEC,SAAS,CAAAL,IAAA,CAATK,SAAS,CAC/C,OAAAC,MAAA,CAAAC,MAAA,CAAA,EAAA,CACKC,cAAc,CAAC,CAAEP,KAAK,CAALA,KAAK,CAAEC,IAAI,CAAJA,IAAI,CAAEC,UAAU,CAAVA,UAAU,CAAEC,UAAU,CAAVA,UAAU,CAAEC,SAAS,CAATA,SAAU,CAAC,CAAC,CAAA,CAEzE,CACF,CAAC,CAEK,IAAAI,WAAW,CAAG,SAAdA,WAAWA,CAAAC,KAAA,CAIqD,KAHpEC,QAAQ,CAAAD,KAAA,CAARC,QAAQ,CACRN,SAAS,CAAAK,KAAA,CAATL,SAAS,CACNO,KAAK,CAAAC,wBAAA,CAAAH,KAAA,CAAAI,SAAA,CAAA,CAER,IAAAC,SAAA,CAAkBC,QAAQ,EAAE,CAApBf,KAAK,CAAAc,SAAA,CAALd,KAAK,CACb,IAAMgB,WAAW,CAAGC,cAAc,CAACb,SAAS,CAAG,CAAC,CAAG,CAAC,CAAC,CAErD,IAAMc,MAAM,CAAGC,KAAK,CAACnB,KAAK,CAAEoB,YAAY,CAACF,MAAM,CAACG,KAAK,CAAC,CACtD,IAAMC,QAAQ,CAAGH,KAAK,CAACnB,KAAK,CAAEoB,YAAY,CAACE,QAAQ,CAACD,KAAK,CAAC,CAC1D,IAAME,YAAY,CAAGJ,KAAK,CAACnB,KAAK,CAAEwB,YAAY,CAACH,KAAK,CAACI,OAAO,CAACC,UAAU,CAACC,OAAO,CAAC,CAChF,IAAMC,cAAc,CAAGT,KAAK,CAACnB,KAAK,CAAEwB,YAAY,CAACH,KAAK,CAACI,OAAO,CAACC,UAAU,CAACG,SAAS,CAAC,CAEpFC,cAAK,CAACC,SAAS,CAAC,UAAM,CACpBf,WAAW,CAACgB,KAAK,CAAGC,UAAU,CAAC7B,SAAS,CAAG,CAAC,CAAG,CAAC,CAAE,CAChDkB,QAAQ,CAARA,QAAQ,CACRJ,MAAM,CAANA,MACF,CAAC,CAAC,CAEJ,CAAC,CAAE,CAACd,SAAS,CAAC,CAAC,CAEf,IAAM8B,UAAU,CAAGC,gBAAgB,CAAC,UAAM,CACxC,OAAO,CACLC,eAAe,CAAEC,gBAAgB,CAACrB,WAAW,CAACgB,KAAK,CAAE,CAAC,CAAC,CAAE,CAAC,CAAC,CAAE,CAACJ,cAAc,CAAEL,YAAY,CAAC,CAC7F,CAAC,CACH,CAAC,CAAE,EAAE,CAAC,CAEN,OACEe,GAAA,CAAC3C,iBAAiB,CAAAU,MAAA,CAAAC,MAAA,CAAA,CAACF,SAAS,CAAEA,SAAU,EAAKO,KAAK,CAAA,CAAE4B,KAAK,CAAEL,UAAW,CAAAxB,QAAA,CACnEA,QAAQ,CACQ,CAAA,CAAC,CAExB;;;;"}

package/build/lib/native/components/Switch/Thumb.js

@@ -9,6 +9,8 @@ import 'react';
 import { isReactNative } from '../../utils/platform/isReactNative.js';
 import { makeSpace } from '../../utils/makeSpace/makeSpace.js';
 import { makeSize } from '../../utils/makeSize/makeSize.js';
+import '../../tokens/global/typography.js';
+import '../../tokens/global/motion.js';
 import '../BladeProvider/useTheme.js';
 
 var Thumb=styled(BaseBox)(function(_ref){var theme=_ref.theme,_ref$size=_ref.size,size=_ref$size===void 0?'medium':_ref$size,deviceType=_ref.deviceType;var width=switchSizes.thumb[deviceType][size].width;var height=switchSizes.thumb[deviceType][size].height;var finalWidth=isNumber(width)?makeSize(width):makeSpace(getIn(theme,width));var finalHeight=isNumber(height)?makeSize(height):makeSpace(getIn(theme,height));var reactNativeStyles={left:0,margin:makeSpace(theme.spacing[1])};return Object.assign({display:'flex',alignItems:'center',justifyContent:'center',width:finalWidth,height:finalHeight,position:isReactNative()?'absolute':'relative'},isReactNative()&&reactNativeStyles);});

package/build/lib/native/components/Switch/Thumb.js.map

@@ -1 +1 @@
-{"version":3,"file":"Thumb.js","sources":["../../../../../src/components/Switch/Thumb.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/explicit-function-return-type */\nimport styled from 'styled-components';\nimport type { ThumbProps } from './types';\nimport { switchSizes } from './switchTokens';\nimport getIn from '~utils/lodashButBetter/get';\nimport isNumber from '~utils/lodashButBetter/isNumber';\nimport BaseBox from '~components/Box/BaseBox';\nimport { isReactNative } from '~utils';\nimport { makeSpace } from '~utils/makeSpace';\nimport { makeSize } from '~utils/makeSize';\n\nconst Thumb = styled(BaseBox)<ThumbProps>(({ theme, size = 'medium', deviceType }) => {\n  const width = switchSizes.thumb[deviceType][size].width;\n  const height = switchSizes.thumb[deviceType][size].height;\n\n  const finalWidth = isNumber(width) ? makeSize(width) : makeSpace(getIn(theme, width));\n  const finalHeight = isNumber(height) ? makeSize(height) : makeSpace(getIn(theme, height));\n\n  const reactNativeStyles = {\n    left: 0,\n    margin: makeSpace(theme.spacing[1]),\n  };\n\n  return {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    width: finalWidth,\n    height: finalHeight,\n    position: isReactNative() ? 'absolute' : 'relative',\n    ...(isReactNative() && reactNativeStyles),\n  };\n});\n\nexport { Thumb };\n"],"names":["Thumb","styled","BaseBox","_ref","theme","_ref$size","size","deviceType","width","switchSizes","thumb","height","finalWidth","isNumber","makeSize","makeSpace","getIn","finalHeight","reactNativeStyles","left","margin","spacing","Object","assign","display","alignItems","justifyContent","position","isReactNative"],"mappings":";;;;;;;;;;;;;AAWM,IAAAA,KAAK,CAAGC,MAAM,CAACC,OAAO,CAAC,CAAa,SAAAC,IAAA,CAA4C,CAAzC,IAAAC,KAAK,CAAAD,IAAA,CAALC,KAAK,CAAAC,SAAA,CAAAF,IAAA,CAAEG,IAAI,CAAJA,IAAI,CAAAD,SAAA,GAAG,KAAA,CAAA,CAAA,QAAQ,CAAAA,SAAA,CAAEE,UAAU,CAAAJ,IAAA,CAAVI,UAAU,CAC7E,IAAMC,KAAK,CAAGC,WAAW,CAACC,KAAK,CAACH,UAAU,CAAC,CAACD,IAAI,CAAC,CAACE,KAAK,CACvD,IAAMG,MAAM,CAAGF,WAAW,CAACC,KAAK,CAACH,UAAU,CAAC,CAACD,IAAI,CAAC,CAACK,MAAM,CAEzD,IAAMC,UAAU,CAAGC,QAAQ,CAACL,KAAK,CAAC,CAAGM,QAAQ,CAACN,KAAK,CAAC,CAAGO,SAAS,CAACC,KAAK,CAACZ,KAAK,CAAEI,KAAK,CAAC,CAAC,CACrF,IAAMS,WAAW,CAAGJ,QAAQ,CAACF,MAAM,CAAC,CAAGG,QAAQ,CAACH,MAAM,CAAC,CAAGI,SAAS,CAACC,KAAK,CAACZ,KAAK,CAAEO,MAAM,CAAC,CAAC,CAEzF,IAAMO,iBAAiB,CAAG,CACxBC,IAAI,CAAE,CAAC,CACPC,MAAM,CAAEL,SAAS,CAACX,KAAK,CAACiB,OAAO,CAAC,CAAC,CAAC,CACpC,CAAC,CAED,OAAAC,MAAA,CAAAC,MAAA,CAAA,CACEC,OAAO,CAAE,MAAM,CACfC,UAAU,CAAE,QAAQ,CACpBC,cAAc,CAAE,QAAQ,CACxBlB,KAAK,CAAEI,UAAU,CACjBD,MAAM,CAAEM,WAAW,CACnBU,QAAQ,CAAEC,aAAa,EAAE,CAAG,UAAU,CAAG,UAAU,CAC/CA,CAAAA,aAAa,EAAE,EAAIV,iBAAiB,EAE5C,CAAC;;;;"}
+{"version":3,"file":"Thumb.js","sources":["../../../../../src/components/Switch/Thumb.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/explicit-function-return-type */\nimport styled from 'styled-components';\nimport type { ThumbProps } from './types';\nimport { switchSizes } from './switchTokens';\nimport getIn from '~utils/lodashButBetter/get';\nimport isNumber from '~utils/lodashButBetter/isNumber';\nimport BaseBox from '~components/Box/BaseBox';\nimport { isReactNative } from '~utils';\nimport { makeSpace } from '~utils/makeSpace';\nimport { makeSize } from '~utils/makeSize';\n\nconst Thumb = styled(BaseBox)<ThumbProps>(({ theme, size = 'medium', deviceType }) => {\n  const width = switchSizes.thumb[deviceType][size].width;\n  const height = switchSizes.thumb[deviceType][size].height;\n\n  const finalWidth = isNumber(width) ? makeSize(width) : makeSpace(getIn(theme, width));\n  const finalHeight = isNumber(height) ? makeSize(height) : makeSpace(getIn(theme, height));\n\n  const reactNativeStyles = {\n    left: 0,\n    margin: makeSpace(theme.spacing[1]),\n  };\n\n  return {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    width: finalWidth,\n    height: finalHeight,\n    position: isReactNative() ? 'absolute' : 'relative',\n    ...(isReactNative() && reactNativeStyles),\n  };\n});\n\nexport { Thumb };\n"],"names":["Thumb","styled","BaseBox","_ref","theme","_ref$size","size","deviceType","width","switchSizes","thumb","height","finalWidth","isNumber","makeSize","makeSpace","getIn","finalHeight","reactNativeStyles","left","margin","spacing","Object","assign","display","alignItems","justifyContent","position","isReactNative"],"mappings":";;;;;;;;;;;;;;;AAWM,IAAAA,KAAK,CAAGC,MAAM,CAACC,OAAO,CAAC,CAAa,SAAAC,IAAA,CAA4C,CAAzC,IAAAC,KAAK,CAAAD,IAAA,CAALC,KAAK,CAAAC,SAAA,CAAAF,IAAA,CAAEG,IAAI,CAAJA,IAAI,CAAAD,SAAA,GAAG,KAAA,CAAA,CAAA,QAAQ,CAAAA,SAAA,CAAEE,UAAU,CAAAJ,IAAA,CAAVI,UAAU,CAC7E,IAAMC,KAAK,CAAGC,WAAW,CAACC,KAAK,CAACH,UAAU,CAAC,CAACD,IAAI,CAAC,CAACE,KAAK,CACvD,IAAMG,MAAM,CAAGF,WAAW,CAACC,KAAK,CAACH,UAAU,CAAC,CAACD,IAAI,CAAC,CAACK,MAAM,CAEzD,IAAMC,UAAU,CAAGC,QAAQ,CAACL,KAAK,CAAC,CAAGM,QAAQ,CAACN,KAAK,CAAC,CAAGO,SAAS,CAACC,KAAK,CAACZ,KAAK,CAAEI,KAAK,CAAC,CAAC,CACrF,IAAMS,WAAW,CAAGJ,QAAQ,CAACF,MAAM,CAAC,CAAGG,QAAQ,CAACH,MAAM,CAAC,CAAGI,SAAS,CAACC,KAAK,CAACZ,KAAK,CAAEO,MAAM,CAAC,CAAC,CAEzF,IAAMO,iBAAiB,CAAG,CACxBC,IAAI,CAAE,CAAC,CACPC,MAAM,CAAEL,SAAS,CAACX,KAAK,CAACiB,OAAO,CAAC,CAAC,CAAC,CACpC,CAAC,CAED,OAAAC,MAAA,CAAAC,MAAA,CAAA,CACEC,OAAO,CAAE,MAAM,CACfC,UAAU,CAAE,QAAQ,CACpBC,cAAc,CAAE,QAAQ,CACxBlB,KAAK,CAAEI,UAAU,CACjBD,MAAM,CAAEM,WAAW,CACnBU,QAAQ,CAAEC,aAAa,EAAE,CAAG,UAAU,CAAG,UAAU,CAC/CA,CAAAA,aAAa,EAAE,EAAIV,iBAAiB,EAE5C,CAAC;;;;"}

package/build/lib/native/components/Switch/ThumbIcon.js

@@ -12,17 +12,17 @@ import '@babel/runtime/helpers/slicedToArray';
 import 'react';
 import { makeSpace } from '../../utils/makeSpace/makeSpace.js';
 import { makeSize } from '../../utils/makeSize/makeSize.js';
+import '../../tokens/global/typography.js';
+import '../../tokens/global/motion.js';
+import { size } from '../../tokens/global/size.js';
 import '../BottomSheet/BottomSheetStack.js';
 import { jsx } from 'react/jsx-runtime';
 import 'react-native-svg';
 import '@babel/runtime/helpers/defineProperty';
 import Path from '../Icons/_Svg/Path/Path.native.js';
 import '../Icons/_Svg/Svg/Svg.native.js';
-import '../../tokens/global/typography.js';
-import '../../tokens/global/motion.js';
-import { size } from '../../tokens/global/size.js';
 
-var switchIconSize={desktop:{small:size[6],medium:'spacing.3'},mobile:{small:'spacing.3',medium:size[10]}};var ThumbIcon=function ThumbIcon(_ref){var isChecked=_ref.isChecked,isDisabled=_ref.isDisabled,_ref$size=_ref.size,size=_ref$size===void 0?'medium':_ref$size;var _useTheme=useTheme(),theme=_useTheme.theme;var _useBreakpoint=useBreakpoint({breakpoints:theme.breakpoints}),matchedDeviceType=_useBreakpoint.matchedDeviceType;var width=switchIconSize[matchedDeviceType][size];var height=switchIconSize[matchedDeviceType][size];var finalWidth=isNumber(width)?makeSize(width):makeSpace(getIn(theme,width));var finalHeight=isNumber(height)?makeSize(height):makeSpace(getIn(theme,height));var variant=isDisabled?'disabled':'default';var fillColor=getIn(theme,switchColors.thumbIcon[variant].fill);return jsx(AnimatedThumbIcon,{isChecked:Boolean(isChecked),width:finalWidth,height:finalHeight,viewBox:"0 0 11 8",fill:"none",children:jsx(Path,{fillRule:"evenodd",clipRule:"evenodd",d:"M8.81891 0.546661C9.12722 0.238352 9.62709 0.238353 9.9354 0.546661C10.2437 0.85497 10.2437 1.35484 9.9354 1.66315L4.14592 7.45262C3.83761 7.76093 3.33775 7.76093 3.02944 7.45262L0.397858 4.82104C0.0895488 4.51273 0.0895488 4.01286 0.397857 3.70456C0.706166 3.39625 1.20603 3.39625 1.51434 3.70456L3.58768 5.77789L8.81891 0.546661Z",fill:fillColor})});};
+var switchIconSize={desktop:{small:size[6],medium:'spacing.3'},mobile:{small:'spacing.3',medium:size[10]}};var ThumbIcon=function ThumbIcon(_ref){var isChecked=_ref.isChecked,isDisabled=_ref.isDisabled,_ref$size=_ref.size,size=_ref$size===void 0?'medium':_ref$size;var _useTheme=useTheme(),theme=_useTheme.theme;var _useBreakpoint=useBreakpoint({breakpoints:theme.breakpoints}),matchedDeviceType=_useBreakpoint.matchedDeviceType;var width=switchIconSize[matchedDeviceType][size];var height=switchIconSize[matchedDeviceType][size];var finalWidth=isNumber(width)?makeSize(width):makeSpace(getIn(theme,width));var finalHeight=isNumber(height)?makeSize(height):makeSpace(getIn(theme,height));var variant=isDisabled?'disabled':'default';var fillColor=getIn(theme,switchColors.thumbIcon[variant].fill);var isEffectivelyChecked=Boolean(isChecked)&&!isDisabled;return jsx(AnimatedThumbIcon,{isChecked:isEffectivelyChecked,width:finalWidth,height:finalHeight,viewBox:"0 0 11 8",fill:"none",children:jsx(Path,{fillRule:"evenodd",clipRule:"evenodd",d:"M8.81891 0.546661C9.12722 0.238352 9.62709 0.238353 9.9354 0.546661C10.2437 0.85497 10.2437 1.35484 9.9354 1.66315L4.14592 7.45262C3.83761 7.76093 3.33775 7.76093 3.02944 7.45262L0.397858 4.82104C0.0895488 4.51273 0.0895488 4.01286 0.397857 3.70456C0.706166 3.39625 1.20603 3.39625 1.51434 3.70456L3.58768 5.77789L8.81891 0.546661Z",fill:fillColor})});};
 
 export { ThumbIcon };
 //# sourceMappingURL=ThumbIcon.js.map

package/build/lib/native/components/Switch/ThumbIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"ThumbIcon.js","sources":["../../../../../src/components/Switch/ThumbIcon.tsx"],"sourcesContent":["import type { SwitchProps } from './types';\nimport { AnimatedThumbIcon } from './AnimatedThumbIcon';\nimport { switchColors } from './switchTokens';\nimport getIn from '~utils/lodashButBetter/get';\nimport isNumber from '~utils/lodashButBetter/isNumber';\nimport { useTheme } from '~components/BladeProvider';\nimport { useBreakpoint } from '~utils';\nimport { Path } from '~components/Icons/_Svg';\nimport { size } from '~tokens/global';\nimport { makeSize } from '~utils/makeSize';\nimport { makeSpace } from '~utils/makeSpace';\n\nconst switchIconSize = {\n  desktop: {\n    small: size[6],\n    medium: 'spacing.3',\n  },\n  mobile: {\n    small: 'spacing.3',\n    medium: size[10],\n  },\n} as const;\n\nconst ThumbIcon = ({\n  isChecked,\n  isDisabled,\n  size = 'medium',\n}: Pick<SwitchProps, 'isChecked' | 'isDisabled' | 'size'>): React.ReactElement => {\n  const { theme } = useTheme();\n  const { matchedDeviceType } = useBreakpoint({ breakpoints: theme.breakpoints });\n\n  const width = switchIconSize[matchedDeviceType][size];\n  const height = switchIconSize[matchedDeviceType][size];\n  const finalWidth = isNumber(width) ? makeSize(width) : makeSpace(getIn(theme, width));\n  const finalHeight = isNumber(height) ? makeSize(height) : makeSpace(getIn(theme, height));\n  const variant = isDisabled ? 'disabled' : 'default';\n  const fillColor = getIn(theme, switchColors.thumbIcon[variant].fill);\n\n  return (\n    <AnimatedThumbIcon\n      isChecked={Boolean(isChecked)}\n      width={finalWidth}\n      height={finalHeight}\n      // Switch uses a custom svg, this viewbox is copied from design\n      viewBox=\"0 0 11 8\"\n      fill=\"none\"\n    >\n      <Path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M8.81891 0.546661C9.12722 0.238352 9.62709 0.238353 9.9354 0.546661C10.2437 0.85497 10.2437 1.35484 9.9354 1.66315L4.14592 7.45262C3.83761 7.76093 3.33775 7.76093 3.02944 7.45262L0.397858 4.82104C0.0895488 4.51273 0.0895488 4.01286 0.397857 3.70456C0.706166 3.39625 1.20603 3.39625 1.51434 3.70456L3.58768 5.77789L8.81891 0.546661Z\"\n        fill={fillColor}\n      />\n    </AnimatedThumbIcon>\n  );\n};\n\nexport { ThumbIcon };\n"],"names":["switchIconSize","desktop","small","size","medium","mobile","ThumbIcon","_ref","isChecked","isDisabled","_ref$size","_useTheme","useTheme","theme","_useBreakpoint","useBreakpoint","breakpoints","matchedDeviceType","width","height","finalWidth","isNumber","makeSize","makeSpace","getIn","finalHeight","variant","fillColor","switchColors","thumbIcon","fill","_jsx","AnimatedThumbIcon","Boolean","viewBox","children","Path","fillRule","clipRule","d"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAYA,IAAMA,cAAc,CAAG,CACrBC,OAAO,CAAE,CACPC,KAAK,CAAEC,IAAI,CAAC,CAAC,CAAC,CACdC,MAAM,CAAE,WACV,CAAC,CACDC,MAAM,CAAE,CACNH,KAAK,CAAE,WAAW,CAClBE,MAAM,CAAED,IAAI,CAAC,EAAE,CACjB,CACF,CAAU,CAEJ,IAAAG,SAAS,CAAG,SAAZA,SAASA,CAAAC,IAAA,CAImE,CAAA,IAHhFC,SAAS,CAAAD,IAAA,CAATC,SAAS,CACTC,UAAU,CAAAF,IAAA,CAAVE,UAAU,CAAAC,SAAA,CAAAH,IAAA,CACVJ,IAAI,CAAJA,IAAI,CAAAO,SAAA,GAAG,KAAA,CAAA,CAAA,QAAQ,CAAAA,SAAA,CAEf,IAAAC,SAAA,CAAkBC,QAAQ,EAAE,CAApBC,KAAK,CAAAF,SAAA,CAALE,KAAK,CACb,IAAAC,cAAA,CAA8BC,aAAa,CAAC,CAAEC,WAAW,CAAEH,KAAK,CAACG,WAAY,CAAC,CAAC,CAAvEC,iBAAiB,CAAAH,cAAA,CAAjBG,iBAAiB,CAEzB,IAAMC,KAAK,CAAGlB,cAAc,CAACiB,iBAAiB,CAAC,CAACd,IAAI,CAAC,CACrD,IAAMgB,MAAM,CAAGnB,cAAc,CAACiB,iBAAiB,CAAC,CAACd,IAAI,CAAC,CACtD,IAAMiB,UAAU,CAAGC,QAAQ,CAACH,KAAK,CAAC,CAAGI,QAAQ,CAACJ,KAAK,CAAC,CAAGK,SAAS,CAACC,KAAK,CAACX,KAAK,CAAEK,KAAK,CAAC,CAAC,CACrF,IAAMO,WAAW,CAAGJ,QAAQ,CAACF,MAAM,CAAC,CAAGG,QAAQ,CAACH,MAAM,CAAC,CAAGI,SAAS,CAACC,KAAK,CAACX,KAAK,CAAEM,MAAM,CAAC,CAAC,CACzF,IAAMO,OAAO,CAAGjB,UAAU,CAAG,UAAU,CAAG,SAAS,CACnD,IAAMkB,SAAS,CAAGH,KAAK,CAACX,KAAK,CAAEe,YAAY,CAACC,SAAS,CAACH,OAAO,CAAC,CAACI,IAAI,CAAC,CAEpE,OACEC,GAAA,CAACC,iBAAiB,CAAA,CAChBxB,SAAS,CAAEyB,OAAO,CAACzB,SAAS,CAAE,CAC9BU,KAAK,CAAEE,UAAW,CAClBD,MAAM,CAAEM,WAAY,CAEpBS,OAAO,CAAC,UAAU,CAClBJ,IAAI,CAAC,MAAM,CAAAK,QAAA,CAEXJ,GAAA,CAACK,IAAI,CAAA,CACHC,QAAQ,CAAC,SAAS,CAClBC,QAAQ,CAAC,SAAS,CAClBC,CAAC,CAAC,6UAA6U,CAC/UT,IAAI,CAAEH,SAAU,CACjB,CAAC,CACe,CAAC,CAExB;;;;"}
+{"version":3,"file":"ThumbIcon.js","sources":["../../../../../src/components/Switch/ThumbIcon.tsx"],"sourcesContent":["import type { SwitchProps } from './types';\nimport { AnimatedThumbIcon } from './AnimatedThumbIcon';\nimport { switchColors } from './switchTokens';\nimport getIn from '~utils/lodashButBetter/get';\nimport isNumber from '~utils/lodashButBetter/isNumber';\nimport { useTheme } from '~components/BladeProvider';\nimport { useBreakpoint } from '~utils';\nimport { Path } from '~components/Icons/_Svg';\nimport { size } from '~tokens/global';\nimport { makeSize } from '~utils/makeSize';\nimport { makeSpace } from '~utils/makeSpace';\n\nconst switchIconSize = {\n  desktop: {\n    small: size[6],\n    medium: 'spacing.3',\n  },\n  mobile: {\n    small: 'spacing.3',\n    medium: size[10],\n  },\n} as const;\n\nconst ThumbIcon = ({\n  isChecked,\n  isDisabled,\n  size = 'medium',\n}: Pick<SwitchProps, 'isChecked' | 'isDisabled' | 'size'>): React.ReactElement => {\n  const { theme } = useTheme();\n  const { matchedDeviceType } = useBreakpoint({ breakpoints: theme.breakpoints });\n\n  const width = switchIconSize[matchedDeviceType][size];\n  const height = switchIconSize[matchedDeviceType][size];\n  const finalWidth = isNumber(width) ? makeSize(width) : makeSpace(getIn(theme, width));\n  const finalHeight = isNumber(height) ? makeSize(height) : makeSpace(getIn(theme, height));\n  const variant = isDisabled ? 'disabled' : 'default';\n  const fillColor = getIn(theme, switchColors.thumbIcon[variant].fill);\n  // If the switch is checked and not disabled, then only it is effectively checked. and we should the icon then only.\n  const isEffectivelyChecked = Boolean(isChecked) && !isDisabled;\n  return (\n    <AnimatedThumbIcon\n      isChecked={isEffectivelyChecked}\n      width={finalWidth}\n      height={finalHeight}\n      // Switch uses a custom svg, this viewbox is copied from design\n      viewBox=\"0 0 11 8\"\n      fill=\"none\"\n    >\n      <Path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M8.81891 0.546661C9.12722 0.238352 9.62709 0.238353 9.9354 0.546661C10.2437 0.85497 10.2437 1.35484 9.9354 1.66315L4.14592 7.45262C3.83761 7.76093 3.33775 7.76093 3.02944 7.45262L0.397858 4.82104C0.0895488 4.51273 0.0895488 4.01286 0.397857 3.70456C0.706166 3.39625 1.20603 3.39625 1.51434 3.70456L3.58768 5.77789L8.81891 0.546661Z\"\n        fill={fillColor}\n      />\n    </AnimatedThumbIcon>\n  );\n};\n\nexport { ThumbIcon };\n"],"names":["switchIconSize","desktop","small","size","medium","mobile","ThumbIcon","_ref","isChecked","isDisabled","_ref$size","_useTheme","useTheme","theme","_useBreakpoint","useBreakpoint","breakpoints","matchedDeviceType","width","height","finalWidth","isNumber","makeSize","makeSpace","getIn","finalHeight","variant","fillColor","switchColors","thumbIcon","fill","isEffectivelyChecked","Boolean","_jsx","AnimatedThumbIcon","viewBox","children","Path","fillRule","clipRule","d"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAYA,IAAMA,cAAc,CAAG,CACrBC,OAAO,CAAE,CACPC,KAAK,CAAEC,IAAI,CAAC,CAAC,CAAC,CACdC,MAAM,CAAE,WACV,CAAC,CACDC,MAAM,CAAE,CACNH,KAAK,CAAE,WAAW,CAClBE,MAAM,CAAED,IAAI,CAAC,EAAE,CACjB,CACF,CAAU,CAEJ,IAAAG,SAAS,CAAG,SAAZA,SAASA,CAAAC,IAAA,CAImE,KAHhFC,SAAS,CAAAD,IAAA,CAATC,SAAS,CACTC,UAAU,CAAAF,IAAA,CAAVE,UAAU,CAAAC,SAAA,CAAAH,IAAA,CACVJ,IAAI,CAAJA,IAAI,CAAAO,SAAA,GAAG,KAAA,CAAA,CAAA,QAAQ,CAAAA,SAAA,CAEf,IAAAC,SAAA,CAAkBC,QAAQ,EAAE,CAApBC,KAAK,CAAAF,SAAA,CAALE,KAAK,CACb,IAAAC,cAAA,CAA8BC,aAAa,CAAC,CAAEC,WAAW,CAAEH,KAAK,CAACG,WAAY,CAAC,CAAC,CAAvEC,iBAAiB,CAAAH,cAAA,CAAjBG,iBAAiB,CAEzB,IAAMC,KAAK,CAAGlB,cAAc,CAACiB,iBAAiB,CAAC,CAACd,IAAI,CAAC,CACrD,IAAMgB,MAAM,CAAGnB,cAAc,CAACiB,iBAAiB,CAAC,CAACd,IAAI,CAAC,CACtD,IAAMiB,UAAU,CAAGC,QAAQ,CAACH,KAAK,CAAC,CAAGI,QAAQ,CAACJ,KAAK,CAAC,CAAGK,SAAS,CAACC,KAAK,CAACX,KAAK,CAAEK,KAAK,CAAC,CAAC,CACrF,IAAMO,WAAW,CAAGJ,QAAQ,CAACF,MAAM,CAAC,CAAGG,QAAQ,CAACH,MAAM,CAAC,CAAGI,SAAS,CAACC,KAAK,CAACX,KAAK,CAAEM,MAAM,CAAC,CAAC,CACzF,IAAMO,OAAO,CAAGjB,UAAU,CAAG,UAAU,CAAG,SAAS,CACnD,IAAMkB,SAAS,CAAGH,KAAK,CAACX,KAAK,CAAEe,YAAY,CAACC,SAAS,CAACH,OAAO,CAAC,CAACI,IAAI,CAAC,CAEpE,IAAMC,oBAAoB,CAAGC,OAAO,CAACxB,SAAS,CAAC,EAAI,CAACC,UAAU,CAC9D,OACEwB,GAAA,CAACC,iBAAiB,CAChB1B,CAAAA,SAAS,CAAEuB,oBAAqB,CAChCb,KAAK,CAAEE,UAAW,CAClBD,MAAM,CAAEM,WAAY,CAEpBU,OAAO,CAAC,UAAU,CAClBL,IAAI,CAAC,MAAM,CAAAM,QAAA,CAEXH,GAAA,CAACI,IAAI,CAAA,CACHC,QAAQ,CAAC,SAAS,CAClBC,QAAQ,CAAC,SAAS,CAClBC,CAAC,CAAC,6UAA6U,CAC/UV,IAAI,CAAEH,SAAU,CACjB,CAAC,CACe,CAAC,CAExB;;;;"}