@razorpay/blade 10.23.4 → 11.0.0

package/build/lib/native/components/Form/FormHint.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormHint.js","sources":["../../../../../src/components/Form/FormHint.tsx"],"sourcesContent":["/* eslint-disable react/display-name */\nimport type { ReactElement } from 'react';\nimport React from 'react';\nimport { FormHintWrapper } from './FormHintWrapper';\nimport { BaseText } from '~components/Typography/BaseText';\nimport BaseBox from '~components/Box/BaseBox';\nimport { CheckIcon, InfoIcon } from '~components/Icons';\nimport type { BaseTextProps } from '~components/Typography/BaseText/types';\nimport { getPlatformType } from '~utils/getPlatformType';\n\ntype HintTextProps = {\n  icon?: React.ElementType;\n  children: string;\n  id?: string;\n  color: BaseTextProps['color'];\n};\n\nconst HintText = ({ icon: Icon, children, id, color }: HintTextProps): ReactElement => {\n  const isReactNative = getPlatformType() === 'react-native';\n\n  return (\n    <BaseBox marginTop=\"spacing.2\">\n      <FormHintWrapper>\n        {Icon ? <Icon /> : null}\n        <BaseText\n          id={id}\n          as={isReactNative ? undefined : 'span'}\n          color={color}\n          fontSize={50}\n          lineHeight={50}\n          fontStyle=\"italic\"\n          fontFamily=\"text\"\n        >\n          {children}\n        </BaseText>\n      </FormHintWrapper>\n    </BaseBox>\n  );\n};\n\nexport type FormHintProps = {\n  type: 'help' | 'error' | 'success';\n  /**\n   * Help text for the group\n   */\n  helpText?: string;\n  /**\n   * Error text for the group\n   *\n   * Renders when `state` is set to 'error'\n   */\n  errorText?: string;\n  /**\n   * Success text for the group\n   *\n   * Renders when `state` is set to 'success'\n   */\n  successText?: string;\n  /**\n   * Sets the id on errorText.\n   * Needed for accessibility reasons.\n   */\n  errorTextId?: string;\n  /**\n   * Sets the id on helpText.\n   * Needed for accessibility reasons.\n   */\n  helpTextId?: string;\n  /**\n   * Sets the id on successText.\n   * Needed for accessibility reasons.\n   */\n  successTextId?: string;\n};\n\nconst Icons = {\n  error: (): ReactElement => (\n    <>\n      <InfoIcon color=\"feedback.icon.negative.lowContrast\" size=\"small\" />\n      <BaseBox marginRight=\"spacing.2\" />\n    </>\n  ),\n  success: (): ReactElement => (\n    <>\n      <CheckIcon color=\"feedback.icon.positive.lowContrast\" size=\"small\" />\n      <BaseBox marginRight=\"spacing.2\" />\n    </>\n  ),\n};\n\nconst FormHint = ({\n  type,\n  helpText,\n  errorText,\n  successText,\n  helpTextId,\n  errorTextId,\n  successTextId,\n}: FormHintProps): React.ReactElement => {\n  const colors = {\n    help: 'surface.text.muted.lowContrast',\n    error: 'feedback.text.negative.lowContrast',\n    success: 'feedback.text.positive.lowContrast',\n  } as const;\n\n  const showError = type === 'error' && errorText;\n  const showSuccess = type === 'success' && successText;\n  const showHelp = !showError && !showSuccess && helpText;\n\n  return (\n    <>\n      {showHelp && (\n        <HintText id={helpTextId} color={colors.help}>\n          {helpText}\n        </HintText>\n      )}\n\n      {showError && (\n        <HintText id={errorTextId} icon={Icons.error} color={colors.error}>\n          {errorText}\n        </HintText>\n      )}\n\n      {showSuccess && (\n        <HintText id={successTextId} icon={Icons.success} color={colors.success}>\n          {successText}\n        </HintText>\n      )}\n    </>\n  );\n};\n\nexport { FormHint };\n"],"names":["HintText","_ref","Icon","icon","children","id","color","isReactNative","getPlatformType","_jsx","BaseBox","marginTop","_jsxs","FormHintWrapper","BaseText","as","undefined","fontSize","lineHeight","fontStyle","fontFamily","Icons","error","_Fragment","InfoIcon","size","marginRight","success","CheckIcon","FormHint","_ref2","type","helpText","errorText","successText","helpTextId","errorTextId","successTextId","colors","help","showError","showSuccess","showHelp"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAiBA,IAAMA,QAAQ,CAAG,SAAXA,QAAQA,CAAAC,IAAA,CAAyE,KAA7DC,IAAI,CAAAD,IAAA,CAAVE,IAAI,CAAQC,QAAQ,CAAAH,IAAA,CAARG,QAAQ,CAAEC,EAAE,CAAAJ,IAAA,CAAFI,EAAE,CAAEC,KAAK,CAAAL,IAAA,CAALK,KAAK,CACjD,IAAMC,aAAa,CAAGC,eAAe,EAAE,GAAK,cAAc,CAE1D,OACEC,GAAA,CAACC,OAAO,EAACC,SAAS,CAAC,WAAW,CAAAP,QAAA,CAC5BQ,IAAA,CAACC,eAAe,CAAAT,CAAAA,QAAA,CACbF,CAAAA,IAAI,CAAGO,GAAA,CAACP,IAAI,CAAA,EAAE,CAAC,CAAG,IAAI,CACvBO,GAAA,CAACK,QAAQ,CAAA,CACPT,EAAE,CAAEA,EAAG,CACPU,EAAE,CAAER,aAAa,CAAGS,SAAS,CAAG,MAAO,CACvCV,KAAK,CAAEA,KAAM,CACbW,QAAQ,CAAE,EAAG,CACbC,UAAU,CAAE,EAAG,CACfC,SAAS,CAAC,QAAQ,CAClBC,UAAU,CAAC,MAAM,CAAAhB,QAAA,CAEhBA,QAAQ,CACD,CAAC,CAAA,CACI,CAAC,CACX,CAAC,CAEd,CAAC,CAqCD,IAAMiB,KAAK,CAAG,CACZC,KAAK,CAAE,SAAAA,OACL,CAAA,OAAAV,IAAA,CAAAW,QAAA,CAAAnB,CAAAA,QAAA,CACEK,CAAAA,GAAA,CAACe,QAAQ,CAAA,CAAClB,KAAK,CAAC,oCAAoC,CAACmB,IAAI,CAAC,OAAO,CAAE,CAAC,CACpEhB,GAAA,CAACC,OAAO,CAAA,CAACgB,WAAW,CAAC,WAAW,CAAE,CAAC,CACnC,CAAA,CAAC,CACJ,CAAA,CACDC,OAAO,CAAE,SAAAA,OAAA,EAAA,CAAA,OACPf,IAAA,CAAAW,QAAA,EAAAnB,QAAA,CAAA,CACEK,GAAA,CAACmB,SAAS,CAAA,CAACtB,KAAK,CAAC,oCAAoC,CAACmB,IAAI,CAAC,OAAO,CAAE,CAAC,CACrEhB,GAAA,CAACC,OAAO,EAACgB,WAAW,CAAC,WAAW,CAAE,CAAC,CAAA,CACnC,CAAC,CAEP,CAAA,CAAC,CAEK,IAAAG,QAAQ,CAAG,SAAXA,QAAQA,CAAAC,KAAA,CAQ2B,KAPvCC,IAAI,CAAAD,KAAA,CAAJC,IAAI,CACJC,QAAQ,CAAAF,KAAA,CAARE,QAAQ,CACRC,SAAS,CAAAH,KAAA,CAATG,SAAS,CACTC,WAAW,CAAAJ,KAAA,CAAXI,WAAW,CACXC,UAAU,CAAAL,KAAA,CAAVK,UAAU,CACVC,WAAW,CAAAN,KAAA,CAAXM,WAAW,CACXC,aAAa,CAAAP,KAAA,CAAbO,aAAa,CAEb,IAAMC,MAAM,CAAG,CACbC,IAAI,CAAE,gCAAgC,CACtCjB,KAAK,CAAE,oCAAoC,CAC3CK,OAAO,CAAE,oCACX,CAAU,CAEV,IAAMa,SAAS,CAAGT,IAAI,GAAK,OAAO,EAAIE,SAAS,CAC/C,IAAMQ,WAAW,CAAGV,IAAI,GAAK,SAAS,EAAIG,WAAW,CACrD,IAAMQ,QAAQ,CAAG,CAACF,SAAS,EAAI,CAACC,WAAW,EAAIT,QAAQ,CAEvD,OACEpB,IAAA,CAAAW,QAAA,CAAAnB,CAAAA,QAAA,CACGsC,CAAAA,QAAQ,EACPjC,GAAA,CAACT,QAAQ,CAAA,CAACK,EAAE,CAAE8B,UAAW,CAAC7B,KAAK,CAAEgC,MAAM,CAACC,IAAK,CAAAnC,QAAA,CAC1C4B,QAAQ,CACD,CACX,CAEAQ,SAAS,EACR/B,GAAA,CAACT,QAAQ,CAACK,CAAAA,EAAE,CAAE+B,WAAY,CAACjC,IAAI,CAAEkB,KAAK,CAACC,KAAM,CAAChB,KAAK,CAAEgC,MAAM,CAAChB,KAAM,CAAAlB,QAAA,CAC/D6B,SAAS,CACF,CACX,CAEAQ,WAAW,EACVhC,GAAA,CAACT,QAAQ,CAACK,CAAAA,EAAE,CAAEgC,aAAc,CAAClC,IAAI,CAAEkB,KAAK,CAACM,OAAQ,CAACrB,KAAK,CAAEgC,MAAM,CAACX,OAAQ,CAAAvB,QAAA,CACrE8B,WAAW,CACJ,CACX,CAAA,CACD,CAAC,CAEP;;;;"}
+{"version":3,"file":"FormHint.js","sources":["../../../../../src/components/Form/FormHint.tsx"],"sourcesContent":["/* eslint-disable react/display-name */\nimport type { ReactElement } from 'react';\nimport React from 'react';\nimport { FormHintWrapper } from './FormHintWrapper';\nimport type { TextProps } from '~components/Typography/Text';\nimport { Text } from '~components/Typography/Text';\nimport BaseBox from '~components/Box/BaseBox';\nimport { CheckIcon, InfoIcon } from '~components/Icons';\nimport { getPlatformType } from '~utils/getPlatformType';\n\ntype HintTextProps = {\n  icon?: React.ElementType;\n  children: string;\n  id?: string;\n  color: TextProps<{ variant: 'caption' }>['color'];\n};\n\nconst HintText = ({ icon: Icon, children, id, color }: HintTextProps): ReactElement => {\n  const isReactNative = getPlatformType() === 'react-native';\n\n  return (\n    <BaseBox marginTop=\"spacing.2\" id={id}>\n      <FormHintWrapper>\n        {Icon ? <Icon /> : null}\n        <Text as={isReactNative ? undefined : 'span'} color={color} size=\"small\" variant=\"caption\">\n          {children}\n        </Text>\n      </FormHintWrapper>\n    </BaseBox>\n  );\n};\n\nexport type FormHintProps = {\n  type: 'help' | 'error' | 'success';\n  /**\n   * Help text for the group\n   */\n  helpText?: string;\n  /**\n   * Error text for the group\n   *\n   * Renders when `state` is set to 'error'\n   */\n  errorText?: string;\n  /**\n   * Success text for the group\n   *\n   * Renders when `state` is set to 'success'\n   */\n  successText?: string;\n  /**\n   * Sets the id on errorText.\n   * Needed for accessibility reasons.\n   */\n  errorTextId?: string;\n  /**\n   * Sets the id on helpText.\n   * Needed for accessibility reasons.\n   */\n  helpTextId?: string;\n  /**\n   * Sets the id on successText.\n   * Needed for accessibility reasons.\n   */\n  successTextId?: string;\n};\n\nconst Icons = {\n  error: (): ReactElement => (\n    <>\n      <InfoIcon color=\"feedback.icon.negative.intense\" size=\"small\" />\n      <BaseBox marginRight=\"spacing.2\" />\n    </>\n  ),\n  success: (): ReactElement => (\n    <>\n      <CheckIcon color=\"feedback.icon.positive.intense\" size=\"small\" />\n      <BaseBox marginRight=\"spacing.2\" />\n    </>\n  ),\n};\n\nconst FormHint = ({\n  type,\n  helpText,\n  errorText,\n  successText,\n  helpTextId,\n  errorTextId,\n  successTextId,\n}: FormHintProps): React.ReactElement => {\n  const colors: Record<string, TextProps<{ variant: 'caption' }>['color']> = {\n    help: 'surface.text.gray.muted',\n    error: 'feedback.text.negative.intense',\n    success: 'feedback.text.positive.intense',\n  };\n\n  const showError = type === 'error' && errorText;\n  const showSuccess = type === 'success' && successText;\n  const showHelp = !showError && !showSuccess && helpText;\n\n  return (\n    <>\n      {showHelp && (\n        <HintText id={helpTextId} color={colors.help}>\n          {helpText}\n        </HintText>\n      )}\n\n      {showError && (\n        <HintText id={errorTextId} icon={Icons.error} color={colors.error}>\n          {errorText}\n        </HintText>\n      )}\n\n      {showSuccess && (\n        <HintText id={successTextId} icon={Icons.success} color={colors.success}>\n          {successText}\n        </HintText>\n      )}\n    </>\n  );\n};\n\nexport { FormHint };\n"],"names":["HintText","_ref","Icon","icon","children","id","color","isReactNative","getPlatformType","_jsx","BaseBox","marginTop","_jsxs","FormHintWrapper","Text","as","undefined","size","variant","Icons","error","_Fragment","InfoIcon","marginRight","success","CheckIcon","FormHint","_ref2","type","helpText","errorText","successText","helpTextId","errorTextId","successTextId","colors","help","showError","showSuccess","showHelp"],"mappings":"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"}

package/build/lib/native/components/Form/FormLabel.js

@@ -1,7 +1,7 @@
 import 'react';
 import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.native.js';
 import '@babel/runtime/helpers/objectWithoutProperties';
-import { BaseText } from '../Typography/BaseText/BaseText.native.js';
+import '../Typography/BaseText/BaseText.native.js';
 import '@babel/runtime/helpers/slicedToArray';
 import 'react-native';
 import '../../tokens/global/typography.js';
@@ -23,7 +23,7 @@ import '@gorhom/portal';
 import 'react-native-gesture-handler';
 import '../BottomSheet/BottomSheetStack.js';
 
-var FormLabel=function FormLabel(_ref){var _ref$as=_ref.as,as=_ref$as===void 0?'span':_ref$as,_ref$position=_ref.position,position=_ref$position===void 0?'top':_ref$position,_ref$necessityIndicat=_ref.necessityIndicator,necessityIndicator=_ref$necessityIndicat===void 0?'none':_ref$necessityIndicat,accessibilityText=_ref.accessibilityText,children=_ref.children,id=_ref.id,htmlFor=_ref.htmlFor,_ref$contrast=_ref.contrast,contrast=_ref$contrast===void 0?'low':_ref$contrast;var _useTheme=useTheme(),theme=_useTheme.theme;var _useBreakpoint=useBreakpoint({breakpoints:theme.breakpoints}),matchedDeviceType=_useBreakpoint.matchedDeviceType;var isDesktop=matchedDeviceType==='desktop';var isReactNative=getPlatformType()==='react-native';var necessityLabel=null;var isLabelLeftPositioned=position==='left'&&isDesktop;if(necessityIndicator==='optional'){necessityLabel=jsx(Text,{variant:"caption",weight:"regular",type:"placeholder",children:"(optional)"});}if(necessityIndicator==='required'){necessityLabel=jsx(BaseText,{lineHeight:100,fontFamily:"text",fontStyle:"normal",fontSize:75,fontWeight:"bold",color:"feedback.text.negative.lowContrast",children:"*"});}var computedAccessibilityNode=jsxs(VisuallyHidden,{children:[necessityIndicator!=='none'&&jsx(Text,{children:necessityIndicator}),jsx(Text,{children:accessibilityText})]});var textNode=jsxs(BaseBox,{gap:necessityIndicator==='optional'?'spacing.2':'spacing.0',display:"flex",flexDirection:"row",alignItems:"center",flexWrap:"wrap",maxHeight:makeSpace(size[36]),children:[jsx(Text,{type:"subdued",variant:"body",contrast:contrast,size:isLabelLeftPositioned?'medium':'small',truncateAfterLines:2,weight:"bold",wordBreak:isLabelLeftPositioned?'break-word':undefined,children:children}),computedAccessibilityNode,necessityLabel]});if(isReactNative){return jsx(BaseBox,{marginRight:"spacing.5",marginBottom:"spacing.2",children:textNode});}var Component=as;var width=isLabelLeftPositioned&&isDesktop?makeSize(size[120]):'auto';return jsx(Component,Object.assign({htmlFor:htmlFor,style:{width:width,flexShrink:0,marginRight:makeSpace(theme.spacing[5])},id:id},metaAttribute({name:MetaConstants.FormLabel}),{children:jsx(BaseBox,{marginBottom:isLabelLeftPositioned?'spacing.0':'spacing.2',children:textNode})}));};
+var FormLabel=function FormLabel(_ref){var _ref$as=_ref.as,as=_ref$as===void 0?'span':_ref$as,_ref$position=_ref.position,position=_ref$position===void 0?'top':_ref$position,_ref$necessityIndicat=_ref.necessityIndicator,necessityIndicator=_ref$necessityIndicat===void 0?'none':_ref$necessityIndicat,accessibilityText=_ref.accessibilityText,children=_ref.children,id=_ref.id,htmlFor=_ref.htmlFor;var _useTheme=useTheme(),theme=_useTheme.theme;var _useBreakpoint=useBreakpoint({breakpoints:theme.breakpoints}),matchedDeviceType=_useBreakpoint.matchedDeviceType;var isDesktop=matchedDeviceType==='desktop';var isReactNative=getPlatformType()==='react-native';var necessityLabel=null;var isLabelLeftPositioned=position==='left'&&isDesktop;if(necessityIndicator==='optional'){necessityLabel=jsx(Text,{variant:"caption",size:"small",color:"surface.text.gray.muted",children:"(optional)"});}if(necessityIndicator==='required'){necessityLabel=jsx(Text,{variant:"body",size:isLabelLeftPositioned?'medium':'small',color:"feedback.text.negative.intense",children:"*"});}var computedAccessibilityNode=jsxs(VisuallyHidden,{children:[necessityIndicator!=='none'&&jsx(Text,{children:necessityIndicator}),jsx(Text,{children:accessibilityText})]});var textNode=jsxs(BaseBox,{gap:necessityIndicator==='optional'?'spacing.2':'spacing.0',display:"flex",flexDirection:"row",alignItems:"center",flexWrap:"wrap",maxHeight:makeSpace(size[36]),children:[jsx(Text,{variant:"body",size:isLabelLeftPositioned?'medium':'small',color:"surface.text.gray.subtle",truncateAfterLines:2,weight:"semibold",wordBreak:isLabelLeftPositioned?'break-word':undefined,children:children}),computedAccessibilityNode,necessityLabel]});if(isReactNative){return jsx(BaseBox,{marginRight:"spacing.5",marginBottom:"spacing.2",children:textNode});}var Component=as;var width=isLabelLeftPositioned&&isDesktop?makeSize(size[120]):'auto';return jsx(Component,Object.assign({htmlFor:htmlFor,style:{width:width,flexShrink:0,marginRight:makeSpace(theme.spacing[5])},id:id},metaAttribute({name:MetaConstants.FormLabel}),{children:jsx(BaseBox,{marginBottom:isLabelLeftPositioned?'spacing.0':'spacing.2',children:textNode})}));};
 
 export { FormLabel };
 //# sourceMappingURL=FormLabel.js.map

package/build/lib/native/components/Form/FormLabel.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormLabel.js","sources":["../../../../../src/components/Form/FormLabel.tsx"],"sourcesContent":["import React from 'react';\nimport { VisuallyHidden } from '~components/VisuallyHidden';\nimport { Text } from '~components/Typography';\nimport { BaseText } from '~components/Typography/BaseText';\nimport { getPlatformType, useBreakpoint } from '~utils';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport BaseBox from '~components/Box/BaseBox';\nimport { useTheme } from '~components/BladeProvider';\nimport type { ColorContrastTypes } from '~tokens/theme/theme';\nimport { makeSpace } from '~utils/makeSpace';\nimport { makeSize } from '~utils/makeSize';\nimport { size } from '~tokens/global';\n\ntype CommonProps = {\n  as: 'span' | 'label';\n  position?: 'top' | 'left';\n  necessityIndicator?: 'required' | 'optional' | 'none';\n  accessibilityText?: string;\n  children: string | undefined;\n  id?: string;\n  contrast?: ColorContrastTypes;\n};\n\ntype LabelProps = CommonProps & {\n  htmlFor: string;\n  as: 'label';\n};\n\ntype SpanProps = CommonProps & {\n  as: 'span';\n  htmlFor?: undefined;\n};\n\ntype FormLabelProps = LabelProps | SpanProps;\n\nexport type FormInputLabelProps = {\n  /**\n   * Label to be shown for the input field\n   */\n  label?: string;\n  /**\n   * Desktop only prop. Default value on mobile will be `top`\n   */\n  labelPosition?: 'left' | 'top';\n  /**\n   * Displays `(optional)` when `optional` is passed or `*` when `required` is passed\n   */\n  necessityIndicator?: 'required' | 'optional' | 'none';\n};\n\nconst FormLabel = ({\n  as = 'span',\n  position = 'top',\n  necessityIndicator = 'none',\n  accessibilityText,\n  children,\n  id,\n  htmlFor,\n  contrast = 'low',\n}: FormLabelProps): React.ReactElement => {\n  const { theme } = useTheme();\n  const { matchedDeviceType } = useBreakpoint({ breakpoints: theme.breakpoints });\n  const isDesktop = matchedDeviceType === 'desktop';\n  const isReactNative = getPlatformType() === 'react-native';\n\n  let necessityLabel: React.ReactNode = null;\n\n  const isLabelLeftPositioned = position === 'left' && isDesktop;\n\n  if (necessityIndicator === 'optional') {\n    necessityLabel = (\n      <Text variant=\"caption\" weight=\"regular\" type=\"placeholder\">\n        (optional)\n      </Text>\n    );\n  }\n  if (necessityIndicator === 'required') {\n    necessityLabel = (\n      <BaseText\n        lineHeight={100}\n        fontFamily=\"text\"\n        fontStyle=\"normal\"\n        fontSize={75}\n        fontWeight=\"bold\"\n        color=\"feedback.text.negative.lowContrast\"\n      >\n        *\n      </BaseText>\n    );\n  }\n\n  const computedAccessibilityNode = (\n    <VisuallyHidden>\n      {necessityIndicator !== 'none' && <Text>{necessityIndicator}</Text>}\n      <Text>{accessibilityText}</Text>\n    </VisuallyHidden>\n  );\n\n  const textNode = (\n    <BaseBox\n      gap={necessityIndicator === 'optional' ? 'spacing.2' : 'spacing.0'}\n      display=\"flex\"\n      flexDirection=\"row\"\n      alignItems=\"center\"\n      flexWrap=\"wrap\"\n      maxHeight={makeSpace(size[36])}\n    >\n      <Text\n        type=\"subdued\"\n        variant=\"body\"\n        contrast={contrast}\n        size={isLabelLeftPositioned ? 'medium' : 'small'}\n        truncateAfterLines={2}\n        weight=\"bold\"\n        wordBreak={isLabelLeftPositioned ? 'break-word' : undefined}\n      >\n        {children}\n      </Text>\n      {computedAccessibilityNode}\n      {/* TODO: Hide from screen readers to prevent double announcement */}\n      {necessityLabel}\n    </BaseBox>\n  );\n\n  // What harm can it do?\n  if (isReactNative) {\n    return (\n      <BaseBox marginRight=\"spacing.5\" marginBottom=\"spacing.2\">\n        {textNode}\n      </BaseBox>\n    );\n  }\n\n  const Component = as;\n  // only set 120px label when device is desktop\n  const width = isLabelLeftPositioned && isDesktop ? makeSize(size[120]) : 'auto';\n\n  return (\n    <Component\n      htmlFor={htmlFor}\n      style={{\n        width,\n        flexShrink: 0,\n        marginRight: makeSpace(theme.spacing[5]),\n      }}\n      id={id}\n      {...metaAttribute({ name: MetaConstants.FormLabel })}\n    >\n      <BaseBox marginBottom={isLabelLeftPositioned ? 'spacing.0' : 'spacing.2'}>{textNode}</BaseBox>\n    </Component>\n  );\n};\n\nexport { FormLabel };\n"],"names":["FormLabel","_ref","_ref$as","as","_ref$position","position","_ref$necessityIndicat","necessityIndicator","accessibilityText","children","id","htmlFor","_ref$contrast","contrast","_useTheme","useTheme","theme","_useBreakpoint","useBreakpoint","breakpoints","matchedDeviceType","isDesktop","isReactNative","getPlatformType","necessityLabel","isLabelLeftPositioned","_jsx","Text","variant","weight","type","BaseText","lineHeight","fontFamily","fontStyle","fontSize","fontWeight","color","computedAccessibilityNode","_jsxs","VisuallyHidden","textNode","BaseBox","gap","display","flexDirection","alignItems","flexWrap","maxHeight","makeSpace","size","truncateAfterLines","wordBreak","undefined","marginRight","marginBottom","Component","width","makeSize","Object","assign","style","flexShrink","spacing","metaAttribute","name","MetaConstants"],"mappings":"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"}
+{"version":3,"file":"FormLabel.js","sources":["../../../../../src/components/Form/FormLabel.tsx"],"sourcesContent":["import React from 'react';\nimport { VisuallyHidden } from '~components/VisuallyHidden';\nimport { Text } from '~components/Typography';\nimport { getPlatformType, useBreakpoint } from '~utils';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport BaseBox from '~components/Box/BaseBox';\nimport { useTheme } from '~components/BladeProvider';\nimport { makeSpace } from '~utils/makeSpace';\nimport { makeSize } from '~utils/makeSize';\nimport { size } from '~tokens/global';\n\ntype CommonProps = {\n  as: 'span' | 'label';\n  position?: 'top' | 'left';\n  necessityIndicator?: 'required' | 'optional' | 'none';\n  accessibilityText?: string;\n  children: string | undefined;\n  id?: string;\n};\n\ntype LabelProps = CommonProps & {\n  htmlFor: string;\n  as: 'label';\n};\n\ntype SpanProps = CommonProps & {\n  as: 'span';\n  htmlFor?: undefined;\n};\n\ntype FormLabelProps = LabelProps | SpanProps;\n\nexport type FormInputLabelProps = {\n  /**\n   * Label to be shown for the input field\n   */\n  label?: string;\n  /**\n   * Desktop only prop. Default value on mobile will be `top`\n   */\n  labelPosition?: 'left' | 'top';\n  /**\n   * Displays `(optional)` when `optional` is passed or `*` when `required` is passed\n   */\n  necessityIndicator?: 'required' | 'optional' | 'none';\n};\n\nconst FormLabel = ({\n  as = 'span',\n  position = 'top',\n  necessityIndicator = 'none',\n  accessibilityText,\n  children,\n  id,\n  htmlFor,\n}: FormLabelProps): React.ReactElement => {\n  const { theme } = useTheme();\n  const { matchedDeviceType } = useBreakpoint({ breakpoints: theme.breakpoints });\n  const isDesktop = matchedDeviceType === 'desktop';\n  const isReactNative = getPlatformType() === 'react-native';\n\n  let necessityLabel: React.ReactNode = null;\n\n  const isLabelLeftPositioned = position === 'left' && isDesktop;\n\n  if (necessityIndicator === 'optional') {\n    necessityLabel = (\n      <Text variant=\"caption\" size=\"small\" color=\"surface.text.gray.muted\">\n        (optional)\n      </Text>\n    );\n  }\n  if (necessityIndicator === 'required') {\n    necessityLabel = (\n      <Text\n        variant=\"body\"\n        size={isLabelLeftPositioned ? 'medium' : 'small'}\n        color=\"feedback.text.negative.intense\"\n      >\n        *\n      </Text>\n    );\n  }\n\n  const computedAccessibilityNode = (\n    <VisuallyHidden>\n      {necessityIndicator !== 'none' && <Text>{necessityIndicator}</Text>}\n      <Text>{accessibilityText}</Text>\n    </VisuallyHidden>\n  );\n\n  const textNode = (\n    <BaseBox\n      gap={necessityIndicator === 'optional' ? 'spacing.2' : 'spacing.0'}\n      display=\"flex\"\n      flexDirection=\"row\"\n      alignItems=\"center\"\n      flexWrap=\"wrap\"\n      maxHeight={makeSpace(size[36])}\n    >\n      <Text\n        variant=\"body\"\n        size={isLabelLeftPositioned ? 'medium' : 'small'}\n        color=\"surface.text.gray.subtle\"\n        truncateAfterLines={2}\n        weight=\"semibold\"\n        wordBreak={isLabelLeftPositioned ? 'break-word' : undefined}\n      >\n        {children}\n      </Text>\n      {computedAccessibilityNode}\n      {/* TODO: Hide from screen readers to prevent double announcement */}\n      {necessityLabel}\n    </BaseBox>\n  );\n\n  // What harm can it do?\n  if (isReactNative) {\n    return (\n      <BaseBox marginRight=\"spacing.5\" marginBottom=\"spacing.2\">\n        {textNode}\n      </BaseBox>\n    );\n  }\n\n  const Component = as;\n  // only set 120px label when device is desktop\n  const width = isLabelLeftPositioned && isDesktop ? makeSize(size[120]) : 'auto';\n\n  return (\n    <Component\n      htmlFor={htmlFor}\n      style={{\n        width,\n        flexShrink: 0,\n        marginRight: makeSpace(theme.spacing[5]),\n      }}\n      id={id}\n      {...metaAttribute({ name: MetaConstants.FormLabel })}\n    >\n      <BaseBox marginBottom={isLabelLeftPositioned ? 'spacing.0' : 'spacing.2'}>{textNode}</BaseBox>\n    </Component>\n  );\n};\n\nexport { FormLabel };\n"],"names":["FormLabel","_ref","_ref$as","as","_ref$position","position","_ref$necessityIndicat","necessityIndicator","accessibilityText","children","id","htmlFor","_useTheme","useTheme","theme","_useBreakpoint","useBreakpoint","breakpoints","matchedDeviceType","isDesktop","isReactNative","getPlatformType","necessityLabel","isLabelLeftPositioned","_jsx","Text","variant","size","color","computedAccessibilityNode","_jsxs","VisuallyHidden","textNode","BaseBox","gap","display","flexDirection","alignItems","flexWrap","maxHeight","makeSpace","truncateAfterLines","weight","wordBreak","undefined","marginRight","marginBottom","Component","width","makeSize","Object","assign","style","flexShrink","spacing","metaAttribute","name","MetaConstants"],"mappings":"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"}

package/build/lib/native/components/Form/Selector/SelectorSupportText.js

@@ -1,12 +1,14 @@
-import { BaseText } from '../../Typography/BaseText/BaseText.native.js';
+import { Box } from '../../Box/Box.js';
+import { Text } from '../../Typography/Text/Text.js';
 import 'react-native';
 import { getPlatformType } from '../../../utils/getPlatformType/getPlatformType.js';
 import '@babel/runtime/helpers/slicedToArray';
 import 'react';
+import { castWebType } from '../../../utils/platform/castUtils.js';
 import '../../BladeProvider/useTheme.js';
 import { jsx } from 'react/jsx-runtime';
 
-var SelectorSupportText=function SelectorSupportText(_ref){var children=_ref.children,id=_ref.id;var isReactNative=getPlatformType()==='react-native';return jsx(BaseText,{id:id,as:isReactNative?undefined:'span',color:"surface.text.muted.lowContrast",fontSize:50,lineHeight:50,fontStyle:"italic",fontFamily:"text",children:children});};
+var SelectorSupportText=function SelectorSupportText(_ref){var children=_ref.children,id=_ref.id,isNegative=_ref.isNegative;var isReactNative=getPlatformType()==='react-native';return jsx(Box,{id:id,display:isReactNative?undefined:castWebType('contents'),children:jsx(Text,{variant:"caption",size:"small",as:isReactNative?undefined:'span',color:isNegative?'feedback.text.negative.intense':'surface.text.gray.muted',children:children})});};
 
 export { SelectorSupportText };
 //# sourceMappingURL=SelectorSupportText.js.map

package/build/lib/native/components/Form/Selector/SelectorSupportText.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectorSupportText.js","sources":["../../../../../../src/components/Form/Selector/SelectorSupportText.tsx"],"sourcesContent":["import { BaseText } from '~components/Typography/BaseText';\nimport { getPlatformType } from '~utils';\n\nconst SelectorSupportText = ({\n  children,\n  id,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}): React.ReactElement => {\n  const isReactNative = getPlatformType() === 'react-native';\n\n  return (\n    <BaseText\n      id={id}\n      as={isReactNative ? undefined : 'span'}\n      color=\"surface.text.muted.lowContrast\"\n      fontSize={50}\n      lineHeight={50}\n      fontStyle=\"italic\"\n      fontFamily=\"text\"\n    >\n      {children}\n    </BaseText>\n  );\n};\n\nexport { SelectorSupportText };\n"],"names":["SelectorSupportText","_ref","children","id","isReactNative","getPlatformType","_jsx","BaseText","as","undefined","color","fontSize","lineHeight","fontStyle","fontFamily"],"mappings":";;;;;;;;AAGM,IAAAA,mBAAmB,CAAG,SAAtBA,mBAAmBA,CAAAC,IAAA,CAMC,CAAA,IALxBC,QAAQ,CAAAD,IAAA,CAARC,QAAQ,CACRC,EAAE,CAAAF,IAAA,CAAFE,EAAE,CAKF,IAAMC,aAAa,CAAGC,eAAe,EAAE,GAAK,cAAc,CAE1D,OACEC,GAAA,CAACC,QAAQ,CACPJ,CAAAA,EAAE,CAAEA,EAAG,CACPK,EAAE,CAAEJ,aAAa,CAAGK,SAAS,CAAG,MAAO,CACvCC,KAAK,CAAC,gCAAgC,CACtCC,QAAQ,CAAE,EAAG,CACbC,UAAU,CAAE,EAAG,CACfC,SAAS,CAAC,QAAQ,CAClBC,UAAU,CAAC,MAAM,CAAAZ,QAAA,CAEhBA,QAAQ,CACD,CAAC,CAEf;;;;"}
+{"version":3,"file":"SelectorSupportText.js","sources":["../../../../../../src/components/Form/Selector/SelectorSupportText.tsx"],"sourcesContent":["import { Box } from '~components/Box';\nimport { Text } from '~components/Typography/Text';\nimport { castWebType, getPlatformType } from '~utils';\n\nconst SelectorSupportText = ({\n  children,\n  id,\n  isNegative,\n}: {\n  children: React.ReactNode;\n  id?: string;\n  isNegative?: boolean;\n}): React.ReactElement => {\n  const isReactNative = getPlatformType() === 'react-native';\n\n  return (\n    <Box id={id} display={isReactNative ? undefined : castWebType('contents')}>\n      <Text\n        variant=\"caption\"\n        size=\"small\"\n        as={isReactNative ? undefined : 'span'}\n        color={isNegative ? 'feedback.text.negative.intense' : 'surface.text.gray.muted'}\n      >\n        {children}\n      </Text>\n    </Box>\n  );\n};\n\nexport { SelectorSupportText };\n"],"names":["SelectorSupportText","_ref","children","id","isNegative","isReactNative","getPlatformType","_jsx","Box","display","undefined","castWebType","Text","variant","size","as","color"],"mappings":";;;;;;;;;;AAIM,IAAAA,mBAAmB,CAAG,SAAtBA,mBAAmBA,CAAAC,IAAA,CAQC,CAAA,IAPxBC,QAAQ,CAAAD,IAAA,CAARC,QAAQ,CACRC,EAAE,CAAAF,IAAA,CAAFE,EAAE,CACFC,UAAU,CAAAH,IAAA,CAAVG,UAAU,CAMV,IAAMC,aAAa,CAAGC,eAAe,EAAE,GAAK,cAAc,CAE1D,OACEC,GAAA,CAACC,GAAG,CAAA,CAACL,EAAE,CAAEA,EAAG,CAACM,OAAO,CAAEJ,aAAa,CAAGK,SAAS,CAAGC,WAAW,CAAC,UAAU,CAAE,CAAAT,QAAA,CACxEK,GAAA,CAACK,IAAI,CAAA,CACHC,OAAO,CAAC,SAAS,CACjBC,IAAI,CAAC,OAAO,CACZC,EAAE,CAAEV,aAAa,CAAGK,SAAS,CAAG,MAAO,CACvCM,KAAK,CAAEZ,UAAU,CAAG,gCAAgC,CAAG,yBAA0B,CAAAF,QAAA,CAEhFA,QAAQ,CACL,CAAC,CACJ,CAAC,CAEV;;;;"}

package/build/lib/native/components/Form/Selector/SelectorTitle.js

@@ -1,8 +1,8 @@
 import { BaseBox } from '../../Box/BaseBox/BaseBox.native.js';
-import { BaseText } from '../../Typography/BaseText/BaseText.native.js';
+import { Text } from '../../Typography/Text/Text.js';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 
-var SelectorTitle=function SelectorTitle(_ref){var children=_ref.children,isDisabled=_ref.isDisabled,_ref$size=_ref.size,size=_ref$size===void 0?'medium':_ref$size;var lineHeight={small:50,medium:100};var fontSize={small:75,medium:100};return jsxs(Fragment,{children:[jsx(BaseBox,{marginLeft:"spacing.2"}),jsx(BaseText,{lineHeight:lineHeight[size],fontFamily:"text",fontWeight:"regular",fontSize:fontSize[size],color:isDisabled?'surface.text.placeholder.lowContrast':'surface.text.subtle.lowContrast',children:children})]});};
+var SelectorTitle=function SelectorTitle(_ref){var children=_ref.children,isDisabled=_ref.isDisabled,_ref$size=_ref.size,size=_ref$size===void 0?'medium':_ref$size;return jsxs(Fragment,{children:[jsx(BaseBox,{marginLeft:"spacing.2"}),jsx(Text,{size:size,color:isDisabled?'surface.text.gray.disabled':'surface.text.gray.subtle',children:children})]});};
 
 export { SelectorTitle };
 //# sourceMappingURL=SelectorTitle.js.map

package/build/lib/native/components/Form/Selector/SelectorTitle.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectorTitle.js","sources":["../../../../../../src/components/Form/Selector/SelectorTitle.tsx"],"sourcesContent":["import BaseBox from '~components/Box/BaseBox';\nimport { BaseText } from '~components/Typography/BaseText';\n\nconst SelectorTitle = ({\n  children,\n  isDisabled,\n  size = 'medium',\n}: {\n  children: React.ReactNode;\n  isDisabled?: boolean;\n  size: 'small' | 'medium';\n}): React.ReactElement => {\n  const lineHeight = {\n    small: 50,\n    medium: 100,\n  } as const;\n  const fontSize = {\n    small: 75,\n    medium: 100,\n  } as const;\n\n  return (\n    <>\n      <BaseBox marginLeft=\"spacing.2\" />\n      <BaseText\n        lineHeight={lineHeight[size]}\n        fontFamily=\"text\"\n        fontWeight=\"regular\"\n        fontSize={fontSize[size]}\n        color={\n          isDisabled ? 'surface.text.placeholder.lowContrast' : 'surface.text.subtle.lowContrast'\n        }\n      >\n        {children}\n      </BaseText>\n    </>\n  );\n};\n\nexport { SelectorTitle };\n"],"names":["SelectorTitle","_ref","children","isDisabled","_ref$size","size","lineHeight","small","medium","fontSize","_jsxs","_Fragment","_jsx","BaseBox","marginLeft","BaseText","fontFamily","fontWeight","color"],"mappings":";;;;AAGM,IAAAA,aAAa,CAAG,SAAhBA,aAAaA,CAAAC,IAAA,CAQO,CAPxB,IAAAC,QAAQ,CAAAD,IAAA,CAARC,QAAQ,CACRC,UAAU,CAAAF,IAAA,CAAVE,UAAU,CAAAC,SAAA,CAAAH,IAAA,CACVI,IAAI,CAAJA,IAAI,CAAAD,SAAA,UAAG,QAAQ,CAAAA,SAAA,CAMf,IAAME,UAAU,CAAG,CACjBC,KAAK,CAAE,EAAE,CACTC,MAAM,CAAE,GACV,CAAU,CACV,IAAMC,QAAQ,CAAG,CACfF,KAAK,CAAE,EAAE,CACTC,MAAM,CAAE,GACV,CAAU,CAEV,OACEE,IAAA,CAAAC,QAAA,EAAAT,QAAA,CAAA,CACEU,GAAA,CAACC,OAAO,CAAA,CAACC,UAAU,CAAC,WAAW,CAAE,CAAC,CAClCF,GAAA,CAACG,QAAQ,CAAA,CACPT,UAAU,CAAEA,UAAU,CAACD,IAAI,CAAE,CAC7BW,UAAU,CAAC,MAAM,CACjBC,UAAU,CAAC,SAAS,CACpBR,QAAQ,CAAEA,QAAQ,CAACJ,IAAI,CAAE,CACzBa,KAAK,CACHf,UAAU,CAAG,sCAAsC,CAAG,iCACvD,CAAAD,QAAA,CAEAA,QAAQ,CACD,CAAC,EACX,CAAC,CAEP;;;;"}
+{"version":3,"file":"SelectorTitle.js","sources":["../../../../../../src/components/Form/Selector/SelectorTitle.tsx"],"sourcesContent":["import BaseBox from '~components/Box/BaseBox';\nimport { Text } from '~components/Typography/Text';\n\nconst SelectorTitle = ({\n  children,\n  isDisabled,\n  size = 'medium',\n}: {\n  children: React.ReactNode;\n  isDisabled?: boolean;\n  size: 'small' | 'medium';\n}): React.ReactElement => {\n  return (\n    <>\n      <BaseBox marginLeft=\"spacing.2\" />\n      <Text\n        size={size}\n        color={isDisabled ? 'surface.text.gray.disabled' : 'surface.text.gray.subtle'}\n      >\n        {children}\n      </Text>\n    </>\n  );\n};\n\nexport { SelectorTitle };\n"],"names":["SelectorTitle","_ref","children","isDisabled","_ref$size","size","_jsxs","_Fragment","_jsx","BaseBox","marginLeft","Text","color"],"mappings":";;;;AAGM,IAAAA,aAAa,CAAG,SAAhBA,aAAaA,CAAAC,IAAA,CAQO,CAAA,IAPxBC,QAAQ,CAAAD,IAAA,CAARC,QAAQ,CACRC,UAAU,CAAAF,IAAA,CAAVE,UAAU,CAAAC,SAAA,CAAAH,IAAA,CACVI,IAAI,CAAJA,IAAI,CAAAD,SAAA,GAAG,KAAA,CAAA,CAAA,QAAQ,CAAAA,SAAA,CAMf,OACEE,IAAA,CAAAC,QAAA,CAAAL,CAAAA,QAAA,EACEM,GAAA,CAACC,OAAO,CAACC,CAAAA,UAAU,CAAC,WAAW,CAAE,CAAC,CAClCF,GAAA,CAACG,IAAI,CACHN,CAAAA,IAAI,CAAEA,IAAK,CACXO,KAAK,CAAET,UAAU,CAAG,4BAA4B,CAAG,0BAA2B,CAAAD,QAAA,CAE7EA,QAAQ,CACL,CAAC,CAAA,CACP,CAAC,CAEP;;;;"}

package/build/lib/native/components/Icons/useIconProps/useIconProps.js

@@ -13,7 +13,7 @@ import '../../../tokens/global/typography.js';
 import '../../../tokens/global/motion.js';
 import { size } from '../../../tokens/global/size.js';
 
-var iconSize={xsmall:size[8],small:size[12],medium:size[16],large:size[20],xlarge:size[24],'2xlarge':size[32]};function useIconProps(_ref){var _ref$size=_ref.size,size=_ref$size===void 0?'medium':_ref$size,_ref$color=_ref.color,color=_ref$color===void 0?'surface.text.normal.lowContrast':_ref$color;var _useTheme=useTheme(),theme=_useTheme.theme;var height=makeSize(iconSize[size]);var width=makeSize(iconSize[size]);var iconColor=color==='currentColor'?'currentColor':getIn(theme.colors,color,'');return {height:height,width:width,iconColor:iconColor};}
+var iconSize={xsmall:size[8],small:size[12],medium:size[16],large:size[20],xlarge:size[24],'2xlarge':size[32]};function useIconProps(_ref){var _ref$size=_ref.size,size=_ref$size===void 0?'medium':_ref$size,_ref$color=_ref.color,color=_ref$color===void 0?'surface.icon.gray.normal':_ref$color;var _useTheme=useTheme(),theme=_useTheme.theme;var height=makeSize(iconSize[size]);var width=makeSize(iconSize[size]);var iconColor=color==='currentColor'?'currentColor':getIn(theme.colors,color,'');return {height:height,width:width,iconColor:iconColor};}
 
 export { useIconProps as default };
 //# sourceMappingURL=useIconProps.js.map

package/build/lib/native/components/Icons/useIconProps/useIconProps.js.map

@@ -1 +1 @@
-{"version":3,"file":"useIconProps.js","sources":["../../../../../../src/components/Icons/useIconProps/useIconProps.tsx"],"sourcesContent":["import type { IconProps } from '..';\nimport get from '~utils/lodashButBetter/get';\nimport { useTheme } from '~components/BladeProvider';\nimport { size } from '~tokens/global';\nimport { makeSize } from '~utils/makeSize';\n\nconst iconSize = {\n  xsmall: size[8],\n  small: size[12],\n  medium: size[16],\n  large: size[20],\n  xlarge: size[24],\n  '2xlarge': size[32],\n} as const;\n\nfunction useIconProps({\n  size = 'medium',\n  color = 'surface.text.normal.lowContrast',\n}: IconProps): {\n  height: `${typeof iconSize[keyof typeof iconSize]}px`;\n  width: `${typeof iconSize[keyof typeof iconSize]}px`;\n  iconColor: string;\n} {\n  const { theme } = useTheme();\n  const height = makeSize(iconSize[size]);\n  const width = makeSize(iconSize[size]);\n  const iconColor = color === 'currentColor' ? 'currentColor' : get(theme.colors, color, '');\n\n  return { height, width, iconColor };\n}\n\nexport default useIconProps;\n"],"names":["iconSize","xsmall","size","small","medium","large","xlarge","useIconProps","_ref","_ref$size","_ref$color","color","_useTheme","useTheme","theme","height","makeSize","width","iconColor","get","colors"],"mappings":";;;;;;;;;;;;;;;AAMA,IAAMA,QAAQ,CAAG,CACfC,MAAM,CAAEC,IAAI,CAAC,CAAC,CAAC,CACfC,KAAK,CAAED,IAAI,CAAC,EAAE,CAAC,CACfE,MAAM,CAAEF,IAAI,CAAC,EAAE,CAAC,CAChBG,KAAK,CAAEH,IAAI,CAAC,EAAE,CAAC,CACfI,MAAM,CAAEJ,IAAI,CAAC,EAAE,CAAC,CAChB,SAAS,CAAEA,IAAI,CAAC,EAAE,CACpB,CAAU,CAEV,SAASK,YAAYA,CAAAC,IAAA,CAOnB,CAAAC,IAAAA,SAAA,CAAAD,IAAA,CANAN,IAAI,CAAJA,IAAI,CAAAO,SAAA,UAAG,QAAQ,CAAAA,SAAA,CAAAC,UAAA,CAAAF,IAAA,CACfG,KAAK,CAALA,KAAK,CAAAD,UAAA,UAAG,iCAAiC,CAAAA,UAAA,CAMzC,IAAAE,SAAA,CAAkBC,QAAQ,EAAE,CAApBC,KAAK,CAAAF,SAAA,CAALE,KAAK,CACb,IAAMC,MAAM,CAAGC,QAAQ,CAAChB,QAAQ,CAACE,IAAI,CAAC,CAAC,CACvC,IAAMe,KAAK,CAAGD,QAAQ,CAAChB,QAAQ,CAACE,IAAI,CAAC,CAAC,CACtC,IAAMgB,SAAS,CAAGP,KAAK,GAAK,cAAc,CAAG,cAAc,CAAGQ,KAAG,CAACL,KAAK,CAACM,MAAM,CAAET,KAAK,CAAE,EAAE,CAAC,CAE1F,OAAO,CAAEI,MAAM,CAANA,MAAM,CAAEE,KAAK,CAALA,KAAK,CAAEC,SAAS,CAATA,SAAU,CAAC,CACrC;;;;"}
+{"version":3,"file":"useIconProps.js","sources":["../../../../../../src/components/Icons/useIconProps/useIconProps.tsx"],"sourcesContent":["import type { IconProps } from '..';\nimport get from '~utils/lodashButBetter/get';\nimport { useTheme } from '~components/BladeProvider';\nimport { size } from '~tokens/global';\nimport { makeSize } from '~utils/makeSize';\n\nconst iconSize = {\n  xsmall: size[8],\n  small: size[12],\n  medium: size[16],\n  large: size[20],\n  xlarge: size[24],\n  '2xlarge': size[32],\n} as const;\n\nfunction useIconProps({\n  size = 'medium',\n  color = 'surface.icon.gray.normal',\n}: IconProps): {\n  height: `${typeof iconSize[keyof typeof iconSize]}px`;\n  width: `${typeof iconSize[keyof typeof iconSize]}px`;\n  iconColor: string;\n} {\n  const { theme } = useTheme();\n  const height = makeSize(iconSize[size]);\n  const width = makeSize(iconSize[size]);\n  const iconColor = color === 'currentColor' ? 'currentColor' : get(theme.colors, color, '');\n\n  return { height, width, iconColor };\n}\n\nexport default useIconProps;\n"],"names":["iconSize","xsmall","size","small","medium","large","xlarge","useIconProps","_ref","_ref$size","_ref$color","color","_useTheme","useTheme","theme","height","makeSize","width","iconColor","get","colors"],"mappings":";;;;;;;;;;;;;;;AAMA,IAAMA,QAAQ,CAAG,CACfC,MAAM,CAAEC,IAAI,CAAC,CAAC,CAAC,CACfC,KAAK,CAAED,IAAI,CAAC,EAAE,CAAC,CACfE,MAAM,CAAEF,IAAI,CAAC,EAAE,CAAC,CAChBG,KAAK,CAAEH,IAAI,CAAC,EAAE,CAAC,CACfI,MAAM,CAAEJ,IAAI,CAAC,EAAE,CAAC,CAChB,SAAS,CAAEA,IAAI,CAAC,EAAE,CACpB,CAAU,CAEV,SAASK,YAAYA,CAAAC,IAAA,CAOnB,CAAAC,IAAAA,SAAA,CAAAD,IAAA,CANAN,IAAI,CAAJA,IAAI,CAAAO,SAAA,UAAG,QAAQ,CAAAA,SAAA,CAAAC,UAAA,CAAAF,IAAA,CACfG,KAAK,CAALA,KAAK,CAAAD,UAAA,UAAG,0BAA0B,CAAAA,UAAA,CAMlC,IAAAE,SAAA,CAAkBC,QAAQ,EAAE,CAApBC,KAAK,CAAAF,SAAA,CAALE,KAAK,CACb,IAAMC,MAAM,CAAGC,QAAQ,CAAChB,QAAQ,CAACE,IAAI,CAAC,CAAC,CACvC,IAAMe,KAAK,CAAGD,QAAQ,CAAChB,QAAQ,CAACE,IAAI,CAAC,CAAC,CACtC,IAAMgB,SAAS,CAAGP,KAAK,GAAK,cAAc,CAAG,cAAc,CAAGQ,KAAG,CAACL,KAAK,CAACM,MAAM,CAAET,KAAK,CAAE,EAAE,CAAC,CAE1F,OAAO,CAAEI,MAAM,CAANA,MAAM,CAAEE,KAAK,CAALA,KAAK,CAAEC,SAAS,CAATA,SAAU,CAAC,CACrC;;;;"}

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

@@ -25,7 +25,7 @@ import '../Typography/Code/Code.js';
 import { getStringFromReactText } from '../../utils/getStringChildren/getStringChildren.js';
 import { makeAccessible } from '../../utils/makeAccessible/makeAccessible.native.js';
 
-var _excluded=["accessibilityLabel","children","size","intent","testID"];var Indicator=function Indicator(_ref){var accessibilityLabel=_ref.accessibilityLabel,children=_ref.children,_ref$size=_ref.size,size$1=_ref$size===void 0?'medium':_ref$size,_ref$intent=_ref.intent,intent=_ref$intent===void 0?'neutral':_ref$intent,testID=_ref.testID,styledProps=_objectWithoutProperties(_ref,_excluded);var _useTheme=useTheme(),theme=_useTheme.theme;var childrenString=getStringFromReactText(children);var fillColor=theme.colors.feedback.background[intent].highContrast;var strokeColor=theme.colors.brand.gray.a100.highContrast;var getDimension=useCallback(function(){switch(size$1){case'small':return {svgSize:size[6],textSize:'small'};case'large':return {svgSize:size[10],textSize:'medium'};default:return {svgSize:size[8],textSize:'medium'};}},[size$1]);var dimensions=getDimension();var isWeb=!isReactNative();var a11yProps=makeAccessible(Object.assign({label:accessibilityLabel!=null?accessibilityLabel:childrenString},isWeb&&{role:'status'}));return jsx(BaseBox,Object.assign({display:isWeb?'inline-flex':'flex'},a11yProps,metaAttribute({name:MetaConstants.Indicator,testID:testID}),getStyledProps(styledProps),{children:jsxs(BaseBox,{display:"flex",flexDirection:"row",alignItems:"center",children:[jsxs(Svg,{width:String(dimensions.svgSize),height:String(dimensions.svgSize),viewBox:"0 0 10 10",fill:"none",children:[jsx(Circle,{cx:"5",cy:"5",r:"5",fill:fillColor}),jsx(Circle,{cx:"5",cy:"5",r:"4.75",stroke:strokeColor,strokeWidth:"0.5"})]}),jsx(BaseBox,{marginLeft:"spacing.2",children:jsx(Text,{textAlign:"left",contrast:"low",type:"subtle",size:dimensions.textSize,children:children})})]})}));};
+var _excluded=["accessibilityLabel","children","size","color","testID"];var Indicator=function Indicator(_ref){var accessibilityLabel=_ref.accessibilityLabel,children=_ref.children,_ref$size=_ref.size,size$1=_ref$size===void 0?'medium':_ref$size,_ref$color=_ref.color,color=_ref$color===void 0?'neutral':_ref$color,testID=_ref.testID,styledProps=_objectWithoutProperties(_ref,_excluded);var _useTheme=useTheme(),theme=_useTheme.theme;var childrenString=getStringFromReactText(children);var fillColor=theme.colors.feedback.background[color].intense;var getDimension=useCallback(function(){switch(size$1){case'small':return {svgSize:size[6],textSize:'small'};case'large':return {svgSize:size[10],textSize:'medium'};default:return {svgSize:size[8],textSize:'medium'};}},[size$1]);var dimensions=getDimension();var isWeb=!isReactNative();var a11yProps=makeAccessible(Object.assign({label:accessibilityLabel!=null?accessibilityLabel:childrenString},isWeb&&{role:'status'}));return jsx(BaseBox,Object.assign({display:isWeb?'inline-flex':'flex'},a11yProps,metaAttribute({name:MetaConstants.Indicator,testID:testID}),getStyledProps(styledProps),{children:jsxs(BaseBox,{display:"flex",flexDirection:"row",alignItems:"center",children:[jsx(Svg,{width:String(dimensions.svgSize),height:String(dimensions.svgSize),viewBox:"0 0 10 10",fill:"none",children:jsx(Circle,{cx:"5",cy:"5",r:"5",fill:fillColor})}),jsx(BaseBox,{marginLeft:"spacing.2",children:jsx(Text,{weight:"medium",color:"surface.text.gray.subtle",textAlign:"left",size:dimensions.textSize,children:children})})]})}));};
 
 export { Indicator };
 //# sourceMappingURL=Indicator.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Indicator.js","sources":["../../../../../src/components/Indicator/Indicator.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport { useCallback } from 'react';\nimport { useTheme } from '~components/BladeProvider';\nimport BaseBox from '~components/Box/BaseBox';\nimport Svg from '~components/Icons/_Svg';\nimport Circle from '~components/Icons/_Svg/Circle';\nimport { Text } from '~components/Typography';\nimport { size as sizeToken } from '~tokens/global';\nimport { getStringFromReactText } from '~src/utils/getStringChildren';\nimport type { StringChildrenType, TestID } from '~utils/types';\nimport type { Feedback } from '~tokens/theme/theme';\nimport { isReactNative } from '~utils';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport { makeAccessible } from '~utils/makeAccessible';\n\ntype IndicatorCommonProps = {\n  /**\n   * Sets the color tone\n   *\n   * @default neutral\n   */\n  intent?: Feedback;\n\n  /**\n   * Size of the indicator\n   *\n   * @default medium\n   */\n  size?: 'small' | 'medium' | 'large';\n} & TestID &\n  StyledPropsBlade;\n\ntype IndicatorWithoutA11yLabel = {\n  /**\n   * A text label to show alongside the indicator dot\n   */\n  children: StringChildrenType;\n\n  /**\n   * a11y label for screen readers\n   */\n  accessibilityLabel?: string;\n};\n\ntype IndicatorWithA11yLabel = {\n  /**\n   * a11y label for screen readers\n   */\n  accessibilityLabel: string;\n\n  /**\n   * A text label to show alongside the indicator dot\n   */\n  children?: StringChildrenType;\n};\n\ntype IndicatorProps = IndicatorCommonProps & (IndicatorWithA11yLabel | IndicatorWithoutA11yLabel);\n\ntype Dimensions = {\n  svgSize: number;\n  textSize: 'small' | 'medium';\n};\n\nconst Indicator = ({\n  accessibilityLabel,\n  children,\n  size = 'medium',\n  intent = 'neutral',\n  testID,\n  ...styledProps\n}: IndicatorProps): ReactElement => {\n  const { theme } = useTheme();\n  const childrenString = getStringFromReactText(children);\n\n  const fillColor = theme.colors.feedback.background[intent].highContrast;\n  const strokeColor = theme.colors.brand.gray.a100.highContrast;\n  const getDimension = useCallback((): Dimensions => {\n    switch (size) {\n      case 'small':\n        return { svgSize: sizeToken[6], textSize: 'small' };\n      case 'large':\n        return { svgSize: sizeToken[10], textSize: 'medium' };\n      default:\n        return { svgSize: sizeToken[8], textSize: 'medium' };\n    }\n  }, [size]);\n  const dimensions = getDimension();\n\n  const isWeb = !isReactNative();\n  const a11yProps = makeAccessible({\n    label: accessibilityLabel ?? childrenString,\n    ...(isWeb && { role: 'status' }),\n  });\n\n  return (\n    <BaseBox\n      display={(isWeb ? 'inline-flex' : 'flex') as never}\n      {...a11yProps}\n      {...metaAttribute({ name: MetaConstants.Indicator, testID })}\n      {...getStyledProps(styledProps)}\n    >\n      <BaseBox display=\"flex\" flexDirection=\"row\" alignItems=\"center\">\n        <Svg\n          width={String(dimensions.svgSize)}\n          height={String(dimensions.svgSize)}\n          viewBox=\"0 0 10 10\"\n          fill=\"none\"\n        >\n          <Circle cx=\"5\" cy=\"5\" r=\"5\" fill={fillColor} />\n          <Circle cx=\"5\" cy=\"5\" r=\"4.75\" stroke={strokeColor} strokeWidth=\"0.5\" />\n        </Svg>\n        <BaseBox marginLeft=\"spacing.2\">\n          <Text textAlign=\"left\" contrast=\"low\" type=\"subtle\" size={dimensions.textSize}>\n            {children}\n          </Text>\n        </BaseBox>\n      </BaseBox>\n    </BaseBox>\n  );\n};\n\nexport type { IndicatorProps };\nexport { Indicator };\n"],"names":["Indicator","_ref","accessibilityLabel","children","_ref$size","size","_ref$intent","intent","testID","styledProps","_objectWithoutProperties","_excluded","_useTheme","useTheme","theme","childrenString","getStringFromReactText","fillColor","colors","feedback","background","highContrast","strokeColor","brand","gray","a100","getDimension","useCallback","svgSize","sizeToken","textSize","dimensions","isWeb","isReactNative","a11yProps","makeAccessible","Object","assign","label","role","_jsx","BaseBox","display","metaAttribute","name","MetaConstants","getStyledProps","_jsxs","flexDirection","alignItems","Svg","width","String","height","viewBox","fill","Circle","cx","cy","r","stroke","strokeWidth","marginLeft","Text","textAlign","contrast","type"],"mappings":"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"}
+{"version":3,"file":"Indicator.js","sources":["../../../../../src/components/Indicator/Indicator.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport { useCallback } from 'react';\nimport { useTheme } from '~components/BladeProvider';\nimport BaseBox from '~components/Box/BaseBox';\nimport Svg from '~components/Icons/_Svg';\nimport Circle from '~components/Icons/_Svg/Circle';\nimport { Text } from '~components/Typography';\nimport { size as sizeToken } from '~tokens/global';\nimport { getStringFromReactText } from '~src/utils/getStringChildren';\nimport type { StringChildrenType, TestID } from '~utils/types';\nimport type { FeedbackColors } from '~tokens/theme/theme';\nimport { isReactNative } from '~utils';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport { makeAccessible } from '~utils/makeAccessible';\n\ntype IndicatorCommonProps = {\n  /**\n   * Sets the color tone\n   *\n   * @default neutral\n   */\n  color?: FeedbackColors;\n\n  /**\n   * Size of the indicator\n   *\n   * @default medium\n   */\n  size?: 'small' | 'medium' | 'large';\n} & TestID &\n  StyledPropsBlade;\n\ntype IndicatorWithoutA11yLabel = {\n  /**\n   * A text label to show alongside the indicator dot\n   */\n  children: StringChildrenType;\n\n  /**\n   * a11y label for screen readers\n   */\n  accessibilityLabel?: string;\n};\n\ntype IndicatorWithA11yLabel = {\n  /**\n   * a11y label for screen readers\n   */\n  accessibilityLabel: string;\n\n  /**\n   * A text label to show alongside the indicator dot\n   */\n  children?: StringChildrenType;\n};\n\ntype IndicatorProps = IndicatorCommonProps & (IndicatorWithA11yLabel | IndicatorWithoutA11yLabel);\n\ntype Dimensions = {\n  svgSize: number;\n  textSize: 'small' | 'medium';\n};\n\nconst Indicator = ({\n  accessibilityLabel,\n  children,\n  size = 'medium',\n  color = 'neutral',\n  testID,\n  ...styledProps\n}: IndicatorProps): ReactElement => {\n  const { theme } = useTheme();\n  const childrenString = getStringFromReactText(children);\n\n  const fillColor = theme.colors.feedback.background[color].intense;\n  const getDimension = useCallback((): Dimensions => {\n    switch (size) {\n      case 'small':\n        return { svgSize: sizeToken[6], textSize: 'small' };\n      case 'large':\n        return { svgSize: sizeToken[10], textSize: 'medium' };\n      default:\n        return { svgSize: sizeToken[8], textSize: 'medium' };\n    }\n  }, [size]);\n  const dimensions = getDimension();\n\n  const isWeb = !isReactNative();\n  const a11yProps = makeAccessible({\n    label: accessibilityLabel ?? childrenString,\n    ...(isWeb && { role: 'status' }),\n  });\n\n  return (\n    <BaseBox\n      display={(isWeb ? 'inline-flex' : 'flex') as never}\n      {...a11yProps}\n      {...metaAttribute({ name: MetaConstants.Indicator, testID })}\n      {...getStyledProps(styledProps)}\n    >\n      <BaseBox display=\"flex\" flexDirection=\"row\" alignItems=\"center\">\n        <Svg\n          width={String(dimensions.svgSize)}\n          height={String(dimensions.svgSize)}\n          viewBox=\"0 0 10 10\"\n          fill=\"none\"\n        >\n          <Circle cx=\"5\" cy=\"5\" r=\"5\" fill={fillColor} />\n        </Svg>\n        <BaseBox marginLeft=\"spacing.2\">\n          <Text\n            weight=\"medium\"\n            color=\"surface.text.gray.subtle\"\n            textAlign=\"left\"\n            size={dimensions.textSize}\n          >\n            {children}\n          </Text>\n        </BaseBox>\n      </BaseBox>\n    </BaseBox>\n  );\n};\n\nexport type { IndicatorProps };\nexport { Indicator };\n"],"names":["Indicator","_ref","accessibilityLabel","children","_ref$size","size","_ref$color","color","testID","styledProps","_objectWithoutProperties","_excluded","_useTheme","useTheme","theme","childrenString","getStringFromReactText","fillColor","colors","feedback","background","intense","getDimension","useCallback","svgSize","sizeToken","textSize","dimensions","isWeb","isReactNative","a11yProps","makeAccessible","Object","assign","label","role","_jsx","BaseBox","display","metaAttribute","name","MetaConstants","getStyledProps","_jsxs","flexDirection","alignItems","Svg","width","String","height","viewBox","fill","Circle","cx","cy","r","marginLeft","Text","weight","textAlign"],"mappings":"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"}

package/build/lib/native/components/Input/BaseInput/AnimatedBaseInputWrapper.native.js

@@ -13,7 +13,7 @@ import 'react-native-gesture-handler';
 import '../../BottomSheet/BottomSheetStack.js';
 import { jsx } from 'react/jsx-runtime';
 
-var _excluded=["showAllTags","setShowAllTagsWithAnimation","children","maxTagRows","isDropdownTrigger"];var StyledBaseInputWrapper=styled(Animated.View)(function(props){return Object.assign({},getInputBackgroundAndBorderStyles({theme:props.theme,isFocused:props.currentInteraction==='active',isDisabled:props.isDisabled,validationState:props.validationState,isTextArea:props.isTextArea,isDropdownTrigger:props.isDropdownTrigger}));});var getMaxHeight=function getMaxHeight(_ref){var maxTagRows=_ref.maxTagRows,showAllTags=_ref.showAllTags;if(maxTagRows==='single'){return BASEINPUT_WRAPPER_MIN_HEIGHT;}if(maxTagRows==='multiple'){return BASEINPUT_WRAPPER_MAX_HEIGHT;}return showAllTags?BASEINPUT_WRAPPER_MAX_HEIGHT:BASEINPUT_WRAPPER_MIN_HEIGHT;};var _AnimatedBaseInputWrapper=function _AnimatedBaseInputWrapper(_ref2,ref){var showAllTags=_ref2.showAllTags,setShowAllTagsWithAnimation=_ref2.setShowAllTagsWithAnimation,children=_ref2.children,maxTagRows=_ref2.maxTagRows,isDropdownTrigger=_ref2.isDropdownTrigger,rest=_objectWithoutProperties(_ref2,_excluded);var _useTheme=useTheme(),theme=_useTheme.theme;var sharedHeight=useSharedValue(BASEINPUT_WRAPPER_MIN_HEIGHT);React__default.useEffect(function(){if(!isDropdownTrigger){return;}sharedHeight.value=withTiming(showAllTags?BASEINPUT_WRAPPER_MAX_HEIGHT:BASEINPUT_WRAPPER_MIN_HEIGHT,{duration:theme.motion.duration.xquick,easing:castNativeType(theme.motion.easing.exit.effective)},function(isComplete){if(isComplete&&!showAllTags){runOnJS(setShowAllTagsWithAnimation)(false);}});},[showAllTags]);var animatedStyle=useAnimatedStyle(function(){return {maxHeight:sharedHeight.value};});var animatedStyleObject=maxTagRows==='expandable'?animatedStyle:{};var maxHeightStyleObject={maxHeight:getMaxHeight({showAllTags:showAllTags,maxTagRows:maxTagRows})};return jsx(StyledBaseInputWrapper,Object.assign({ref:ref,style:isDropdownTrigger?Object.assign({},maxHeightStyleObject,animatedStyleObject):{},isDropdownTrigger:isDropdownTrigger},rest,{children:children}));};var AnimatedBaseInputWrapper=React__default.forwardRef(_AnimatedBaseInputWrapper);
+var _excluded=["showAllTags","setShowAllTagsWithAnimation","children","maxTagRows","isDropdownTrigger"];var StyledBaseInputWrapper=styled(Animated.View)(function(props){return Object.assign({},getInputBackgroundAndBorderStyles({theme:props.theme,isFocused:props.currentInteraction==='focus',isDisabled:props.isDisabled,validationState:props.validationState,isTextArea:props.isTextArea,isDropdownTrigger:props.isDropdownTrigger}));});var getMaxHeight=function getMaxHeight(_ref){var maxTagRows=_ref.maxTagRows,showAllTags=_ref.showAllTags;if(maxTagRows==='single'){return BASEINPUT_WRAPPER_MIN_HEIGHT;}if(maxTagRows==='multiple'){return BASEINPUT_WRAPPER_MAX_HEIGHT;}return showAllTags?BASEINPUT_WRAPPER_MAX_HEIGHT:BASEINPUT_WRAPPER_MIN_HEIGHT;};var _AnimatedBaseInputWrapper=function _AnimatedBaseInputWrapper(_ref2,ref){var showAllTags=_ref2.showAllTags,setShowAllTagsWithAnimation=_ref2.setShowAllTagsWithAnimation,children=_ref2.children,maxTagRows=_ref2.maxTagRows,isDropdownTrigger=_ref2.isDropdownTrigger,rest=_objectWithoutProperties(_ref2,_excluded);var _useTheme=useTheme(),theme=_useTheme.theme;var sharedHeight=useSharedValue(BASEINPUT_WRAPPER_MIN_HEIGHT);React__default.useEffect(function(){if(!isDropdownTrigger){return;}sharedHeight.value=withTiming(showAllTags?BASEINPUT_WRAPPER_MAX_HEIGHT:BASEINPUT_WRAPPER_MIN_HEIGHT,{duration:theme.motion.duration.xquick,easing:castNativeType(theme.motion.easing.exit.effective)},function(isComplete){if(isComplete&&!showAllTags){runOnJS(setShowAllTagsWithAnimation)(false);}});},[showAllTags]);var animatedStyle=useAnimatedStyle(function(){return {maxHeight:sharedHeight.value};});var animatedStyleObject=maxTagRows==='expandable'?animatedStyle:{};var maxHeightStyleObject={maxHeight:getMaxHeight({showAllTags:showAllTags,maxTagRows:maxTagRows})};return jsx(StyledBaseInputWrapper,Object.assign({ref:ref,style:isDropdownTrigger?Object.assign({},maxHeightStyleObject,animatedStyleObject):{},isDropdownTrigger:isDropdownTrigger},rest,{children:children}));};var AnimatedBaseInputWrapper=React__default.forwardRef(_AnimatedBaseInputWrapper);
 
 export { AnimatedBaseInputWrapper };
 //# sourceMappingURL=AnimatedBaseInputWrapper.native.js.map

package/build/lib/native/components/Input/BaseInput/AnimatedBaseInputWrapper.native.js.map

@@ -1 +1 @@
-{"version":3,"file":"AnimatedBaseInputWrapper.native.js","sources":["../../../../../../src/components/Input/BaseInput/AnimatedBaseInputWrapper.native.tsx"],"sourcesContent":["import React from 'react';\nimport Animated, {\n  runOnJS,\n  useAnimatedStyle,\n  useSharedValue,\n  withTiming,\n} from 'react-native-reanimated';\nimport styled from 'styled-components';\nimport type { BaseInputWrapperProps } from './types';\nimport { getInputBackgroundAndBorderStyles } from './baseInputStyles';\nimport { BASEINPUT_WRAPPER_MAX_HEIGHT, BASEINPUT_WRAPPER_MIN_HEIGHT } from './baseInputConfig';\nimport { castNativeType } from '~utils';\nimport { useTheme } from '~components/BladeProvider';\n\nconst StyledBaseInputWrapper = styled(Animated.View)<BaseInputWrapperProps>((props) => ({\n  ...getInputBackgroundAndBorderStyles({\n    theme: props.theme,\n    isFocused: props.currentInteraction === 'active',\n    isDisabled: props.isDisabled,\n    validationState: props.validationState,\n    isTextArea: props.isTextArea,\n    isDropdownTrigger: props.isDropdownTrigger,\n  }),\n}));\n\nconst getMaxHeight = ({\n  maxTagRows,\n  showAllTags,\n}: Pick<BaseInputWrapperProps, 'maxTagRows' | 'showAllTags'>): number => {\n  if (maxTagRows === 'single') {\n    return BASEINPUT_WRAPPER_MIN_HEIGHT;\n  }\n\n  if (maxTagRows === 'multiple') {\n    return BASEINPUT_WRAPPER_MAX_HEIGHT;\n  }\n\n  // In expandable, max-height depends on the state\n  return showAllTags ? BASEINPUT_WRAPPER_MAX_HEIGHT : BASEINPUT_WRAPPER_MIN_HEIGHT;\n};\n\nconst _AnimatedBaseInputWrapper: React.ForwardRefRenderFunction<\n  HTMLDivElement,\n  BaseInputWrapperProps & {\n    showAllTags?: boolean;\n    setShowAllTagsWithAnimation: (showAllTagsWithAnimation: boolean) => void;\n  }\n> = (\n  { showAllTags, setShowAllTagsWithAnimation, children, maxTagRows, isDropdownTrigger, ...rest },\n  ref,\n): React.ReactElement => {\n  const { theme } = useTheme();\n  const sharedHeight = useSharedValue(BASEINPUT_WRAPPER_MIN_HEIGHT); // Initial max-width value\n\n  React.useEffect(() => {\n    if (!isDropdownTrigger) {\n      return;\n    }\n\n    sharedHeight.value = withTiming(\n      showAllTags ? BASEINPUT_WRAPPER_MAX_HEIGHT : BASEINPUT_WRAPPER_MIN_HEIGHT,\n      {\n        duration: theme.motion.duration.xquick,\n        easing: castNativeType(theme.motion.easing.exit.effective),\n      },\n      (isComplete) => {\n        if (isComplete && !showAllTags) {\n          runOnJS(setShowAllTagsWithAnimation)(false);\n        }\n      },\n    );\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [showAllTags]);\n\n  const animatedStyle = useAnimatedStyle(() => {\n    return {\n      maxHeight: sharedHeight.value,\n    };\n  });\n\n  const animatedStyleObject = maxTagRows === 'expandable' ? animatedStyle : {};\n  const maxHeightStyleObject = {\n    maxHeight: getMaxHeight({\n      showAllTags,\n      maxTagRows,\n    }),\n  };\n\n  return (\n    <StyledBaseInputWrapper\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      ref={ref as any}\n      style={\n        isDropdownTrigger\n          ? {\n              ...maxHeightStyleObject,\n              ...animatedStyleObject,\n            }\n          : {}\n      }\n      isDropdownTrigger={isDropdownTrigger}\n      {...rest}\n    >\n      {children}\n    </StyledBaseInputWrapper>\n  );\n};\n\nconst AnimatedBaseInputWrapper = React.forwardRef(_AnimatedBaseInputWrapper);\n\nexport { AnimatedBaseInputWrapper };\n"],"names":["StyledBaseInputWrapper","styled","Animated","View","props","Object","assign","getInputBackgroundAndBorderStyles","theme","isFocused","currentInteraction","isDisabled","validationState","isTextArea","isDropdownTrigger","getMaxHeight","_ref","maxTagRows","showAllTags","BASEINPUT_WRAPPER_MIN_HEIGHT","BASEINPUT_WRAPPER_MAX_HEIGHT","_AnimatedBaseInputWrapper","_ref2","ref","setShowAllTagsWithAnimation","children","rest","_objectWithoutProperties","_excluded","_useTheme","useTheme","sharedHeight","useSharedValue","React","useEffect","value","withTiming","duration","motion","xquick","easing","castNativeType","exit","effective","isComplete","runOnJS","animatedStyle","useAnimatedStyle","maxHeight","animatedStyleObject","maxHeightStyleObject","_jsx","style","AnimatedBaseInputWrapper","forwardRef"],"mappings":"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"}
+{"version":3,"file":"AnimatedBaseInputWrapper.native.js","sources":["../../../../../../src/components/Input/BaseInput/AnimatedBaseInputWrapper.native.tsx"],"sourcesContent":["import React from 'react';\nimport Animated, {\n  runOnJS,\n  useAnimatedStyle,\n  useSharedValue,\n  withTiming,\n} from 'react-native-reanimated';\nimport styled from 'styled-components';\nimport type { BaseInputWrapperProps } from './types';\nimport { getInputBackgroundAndBorderStyles } from './baseInputStyles';\nimport { BASEINPUT_WRAPPER_MAX_HEIGHT, BASEINPUT_WRAPPER_MIN_HEIGHT } from './baseInputConfig';\nimport { castNativeType } from '~utils';\nimport { useTheme } from '~components/BladeProvider';\n\nconst StyledBaseInputWrapper = styled(Animated.View)<BaseInputWrapperProps>((props) => ({\n  ...getInputBackgroundAndBorderStyles({\n    theme: props.theme,\n    isFocused: props.currentInteraction === 'focus',\n    isDisabled: props.isDisabled,\n    validationState: props.validationState,\n    isTextArea: props.isTextArea,\n    isDropdownTrigger: props.isDropdownTrigger,\n  }),\n}));\n\nconst getMaxHeight = ({\n  maxTagRows,\n  showAllTags,\n}: Pick<BaseInputWrapperProps, 'maxTagRows' | 'showAllTags'>): number => {\n  if (maxTagRows === 'single') {\n    return BASEINPUT_WRAPPER_MIN_HEIGHT;\n  }\n\n  if (maxTagRows === 'multiple') {\n    return BASEINPUT_WRAPPER_MAX_HEIGHT;\n  }\n\n  // In expandable, max-height depends on the state\n  return showAllTags ? BASEINPUT_WRAPPER_MAX_HEIGHT : BASEINPUT_WRAPPER_MIN_HEIGHT;\n};\n\nconst _AnimatedBaseInputWrapper: React.ForwardRefRenderFunction<\n  HTMLDivElement,\n  BaseInputWrapperProps & {\n    showAllTags?: boolean;\n    setShowAllTagsWithAnimation: (showAllTagsWithAnimation: boolean) => void;\n  }\n> = (\n  { showAllTags, setShowAllTagsWithAnimation, children, maxTagRows, isDropdownTrigger, ...rest },\n  ref,\n): React.ReactElement => {\n  const { theme } = useTheme();\n  const sharedHeight = useSharedValue(BASEINPUT_WRAPPER_MIN_HEIGHT); // Initial max-width value\n\n  React.useEffect(() => {\n    if (!isDropdownTrigger) {\n      return;\n    }\n\n    sharedHeight.value = withTiming(\n      showAllTags ? BASEINPUT_WRAPPER_MAX_HEIGHT : BASEINPUT_WRAPPER_MIN_HEIGHT,\n      {\n        duration: theme.motion.duration.xquick,\n        easing: castNativeType(theme.motion.easing.exit.effective),\n      },\n      (isComplete) => {\n        if (isComplete && !showAllTags) {\n          runOnJS(setShowAllTagsWithAnimation)(false);\n        }\n      },\n    );\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [showAllTags]);\n\n  const animatedStyle = useAnimatedStyle(() => {\n    return {\n      maxHeight: sharedHeight.value,\n    };\n  });\n\n  const animatedStyleObject = maxTagRows === 'expandable' ? animatedStyle : {};\n  const maxHeightStyleObject = {\n    maxHeight: getMaxHeight({\n      showAllTags,\n      maxTagRows,\n    }),\n  };\n\n  return (\n    <StyledBaseInputWrapper\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      ref={ref as any}\n      style={\n        isDropdownTrigger\n          ? {\n              ...maxHeightStyleObject,\n              ...animatedStyleObject,\n            }\n          : {}\n      }\n      isDropdownTrigger={isDropdownTrigger}\n      {...rest}\n    >\n      {children}\n    </StyledBaseInputWrapper>\n  );\n};\n\nconst AnimatedBaseInputWrapper = React.forwardRef(_AnimatedBaseInputWrapper);\n\nexport { AnimatedBaseInputWrapper };\n"],"names":["StyledBaseInputWrapper","styled","Animated","View","props","Object","assign","getInputBackgroundAndBorderStyles","theme","isFocused","currentInteraction","isDisabled","validationState","isTextArea","isDropdownTrigger","getMaxHeight","_ref","maxTagRows","showAllTags","BASEINPUT_WRAPPER_MIN_HEIGHT","BASEINPUT_WRAPPER_MAX_HEIGHT","_AnimatedBaseInputWrapper","_ref2","ref","setShowAllTagsWithAnimation","children","rest","_objectWithoutProperties","_excluded","_useTheme","useTheme","sharedHeight","useSharedValue","React","useEffect","value","withTiming","duration","motion","xquick","easing","castNativeType","exit","effective","isComplete","runOnJS","animatedStyle","useAnimatedStyle","maxHeight","animatedStyleObject","maxHeightStyleObject","_jsx","style","AnimatedBaseInputWrapper","forwardRef"],"mappings":"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"}

package/build/lib/native/components/Input/BaseInput/BaseInputAnimatedBorder.native.js

@@ -10,7 +10,7 @@ import { makeBorderSize } from '../../../utils/makeBorderSize/makeBorderSize.js'
 import '../../BottomSheet/BottomSheetStack.js';
 import { jsx } from 'react/jsx-runtime';
 
-var BaseInputStyledAnimatedBorder=styled(Animated.View)(function(_ref){var theme=_ref.theme;return {position:'absolute',bottom:0,left:0,right:0,opacity:1,backgroundColor:theme.colors.brand.primary[500],height:makeBorderSize(theme.border.width.thin)};});var BaseInputAnimatedBorder=function BaseInputAnimatedBorder(_ref2){var currentInteraction=_ref2.currentInteraction,validationState=_ref2.validationState;var _useTheme=useTheme(),theme=_useTheme.theme;var borderAnimationEasing=theme.motion.easing.standard.effective;var widthTrigger=useSharedValue(0);var opacityTrigger=useSharedValue(1);var animatedStyle=useAnimatedStyle(function(){return {width:`${interpolate(widthTrigger.value,[0,1],[0,100])}%`,opacity:interpolate(opacityTrigger.value,[0,1],[0,1])};});useEffect(function(){if(currentInteraction=='active'&&validationState!=='error'&&validationState!=='success'){widthTrigger.value=0;opacityTrigger.value=1;widthTrigger.value=withTiming(1,{duration:theme.motion.duration.moderate,easing:borderAnimationEasing});}else if(currentInteraction==='default'){opacityTrigger.value=withTiming(0,{duration:theme.motion.duration.xquick,easing:borderAnimationEasing});}},[currentInteraction,opacityTrigger,widthTrigger,theme.motion.duration,borderAnimationEasing,validationState]);return jsx(BaseInputStyledAnimatedBorder,{style:animatedStyle});};
+var BaseInputStyledAnimatedBorder=styled(Animated.View)(function(_ref){var theme=_ref.theme;return {position:'absolute',bottom:0,left:0,right:0,opacity:1,backgroundColor:theme.colors.interactive.background.primary.default,height:makeBorderSize(theme.border.width.thin)};});var BaseInputAnimatedBorder=function BaseInputAnimatedBorder(_ref2){var currentInteraction=_ref2.currentInteraction,validationState=_ref2.validationState;var _useTheme=useTheme(),theme=_useTheme.theme;var borderAnimationEasing=theme.motion.easing.standard.effective;var widthTrigger=useSharedValue(0);var opacityTrigger=useSharedValue(1);var animatedStyle=useAnimatedStyle(function(){return {width:`${interpolate(widthTrigger.value,[0,1],[0,100])}%`,opacity:interpolate(opacityTrigger.value,[0,1],[0,1])};});useEffect(function(){if(currentInteraction=='focus'&&validationState!=='error'&&validationState!=='success'){widthTrigger.value=0;opacityTrigger.value=1;widthTrigger.value=withTiming(1,{duration:theme.motion.duration.moderate,easing:borderAnimationEasing});}else if(currentInteraction==='default'){opacityTrigger.value=withTiming(0,{duration:theme.motion.duration.xquick,easing:borderAnimationEasing});}},[currentInteraction,opacityTrigger,widthTrigger,theme.motion.duration,borderAnimationEasing,validationState]);return jsx(BaseInputStyledAnimatedBorder,{style:animatedStyle});};
 
 export { BaseInputAnimatedBorder };
 //# sourceMappingURL=BaseInputAnimatedBorder.native.js.map

package/build/lib/native/components/Input/BaseInput/BaseInputAnimatedBorder.native.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseInputAnimatedBorder.native.js","sources":["../../../../../../src/components/Input/BaseInput/BaseInputAnimatedBorder.native.tsx"],"sourcesContent":["import styled from 'styled-components/native';\nimport type { EasingFn } from 'react-native-reanimated';\nimport Animated, {\n  useAnimatedStyle,\n  useSharedValue,\n  interpolate,\n  withTiming,\n} from 'react-native-reanimated';\nimport type { ReactElement } from 'react';\nimport { useEffect } from 'react';\nimport type { BaseInputProps } from './BaseInput';\nimport { useTheme } from '~components/BladeProvider';\nimport type { ActionStates } from '~tokens/theme/theme';\nimport { makeBorderSize } from '~utils/makeBorderSize';\n\nconst BaseInputStyledAnimatedBorder = styled(Animated.View)(({ theme }) => ({\n  position: 'absolute',\n  bottom: 0,\n  left: 0,\n  right: 0,\n  opacity: 1,\n  backgroundColor: theme.colors.brand.primary[500],\n  height: makeBorderSize(theme.border.width.thin),\n}));\n\nexport const BaseInputAnimatedBorder = ({\n  currentInteraction,\n  validationState,\n}: {\n  currentInteraction: keyof ActionStates;\n  validationState: BaseInputProps['validationState'];\n}): ReactElement => {\n  const { theme } = useTheme();\n  const borderAnimationEasing = (theme.motion.easing.standard.effective as unknown) as EasingFn;\n\n  const widthTrigger = useSharedValue(0);\n  const opacityTrigger = useSharedValue(1);\n\n  const animatedStyle = useAnimatedStyle(() => {\n    return {\n      width: `${interpolate(widthTrigger.value, [0, 1], [0, 100])}%`,\n      opacity: interpolate(opacityTrigger.value, [0, 1], [0, 1]),\n    };\n  });\n\n  useEffect(() => {\n    if (\n      currentInteraction == 'active' &&\n      validationState !== 'error' &&\n      validationState !== 'success'\n    ) {\n      widthTrigger.value = 0;\n      opacityTrigger.value = 1;\n      widthTrigger.value = withTiming(1, {\n        duration: theme.motion.duration.moderate,\n        easing: borderAnimationEasing,\n      });\n    } else if (currentInteraction === 'default') {\n      opacityTrigger.value = withTiming(0, {\n        duration: theme.motion.duration.xquick,\n        easing: borderAnimationEasing,\n      });\n    }\n  }, [\n    currentInteraction,\n    opacityTrigger,\n    widthTrigger,\n    theme.motion.duration,\n    borderAnimationEasing,\n    validationState,\n  ]);\n\n  return <BaseInputStyledAnimatedBorder style={animatedStyle} />;\n};\n"],"names":["BaseInputStyledAnimatedBorder","styled","Animated","View","_ref","theme","position","bottom","left","right","opacity","backgroundColor","colors","brand","primary","height","makeBorderSize","border","width","thin","BaseInputAnimatedBorder","_ref2","currentInteraction","validationState","_useTheme","useTheme","borderAnimationEasing","motion","easing","standard","effective","widthTrigger","useSharedValue","opacityTrigger","animatedStyle","useAnimatedStyle","interpolate","value","useEffect","withTiming","duration","moderate","xquick","_jsx","style"],"mappings":";;;;;;;;;;;;AAeA,IAAMA,6BAA6B,CAAGC,MAAM,CAACC,QAAQ,CAACC,IAAI,CAAC,CAAC,SAAAC,IAAA,MAAGC,KAAK,CAAAD,IAAA,CAALC,KAAK,CAAA,OAAQ,CAC1EC,QAAQ,CAAE,UAAU,CACpBC,MAAM,CAAE,CAAC,CACTC,IAAI,CAAE,CAAC,CACPC,KAAK,CAAE,CAAC,CACRC,OAAO,CAAE,CAAC,CACVC,eAAe,CAAEN,KAAK,CAACO,MAAM,CAACC,KAAK,CAACC,OAAO,CAAC,GAAG,CAAC,CAChDC,MAAM,CAAEC,cAAc,CAACX,KAAK,CAACY,MAAM,CAACC,KAAK,CAACC,IAAI,CAChD,CAAC,CAAA,CAAC,CAAC,CAEU,IAAAC,uBAAuB,CAAG,SAA1BA,uBAAuBA,CAAAC,KAAA,CAMhB,CAAA,IALlBC,kBAAkB,CAAAD,KAAA,CAAlBC,kBAAkB,CAClBC,eAAe,CAAAF,KAAA,CAAfE,eAAe,CAKf,IAAAC,SAAA,CAAkBC,QAAQ,EAAE,CAApBpB,KAAK,CAAAmB,SAAA,CAALnB,KAAK,CACb,IAAMqB,qBAAqB,CAAIrB,KAAK,CAACsB,MAAM,CAACC,MAAM,CAACC,QAAQ,CAACC,SAAiC,CAE7F,IAAMC,YAAY,CAAGC,cAAc,CAAC,CAAC,CAAC,CACtC,IAAMC,cAAc,CAAGD,cAAc,CAAC,CAAC,CAAC,CAExC,IAAME,aAAa,CAAGC,gBAAgB,CAAC,UAAM,CAC3C,OAAO,CACLjB,KAAK,CAAG,CAAA,EAAEkB,WAAW,CAACL,YAAY,CAACM,KAAK,CAAE,CAAC,CAAC,CAAE,CAAC,CAAC,CAAE,CAAC,CAAC,CAAE,GAAG,CAAC,CAAE,CAAA,CAAA,CAAE,CAC9D3B,OAAO,CAAE0B,WAAW,CAACH,cAAc,CAACI,KAAK,CAAE,CAAC,CAAC,CAAE,CAAC,CAAC,CAAE,CAAC,CAAC,CAAE,CAAC,CAAC,CAC3D,CAAC,CACH,CAAC,CAAC,CAEFC,SAAS,CAAC,UAAM,CACd,GACEhB,kBAAkB,EAAI,QAAQ,EAC9BC,eAAe,GAAK,OAAO,EAC3BA,eAAe,GAAK,SAAS,CAC7B,CACAQ,YAAY,CAACM,KAAK,CAAG,CAAC,CACtBJ,cAAc,CAACI,KAAK,CAAG,CAAC,CACxBN,YAAY,CAACM,KAAK,CAAGE,UAAU,CAAC,CAAC,CAAE,CACjCC,QAAQ,CAAEnC,KAAK,CAACsB,MAAM,CAACa,QAAQ,CAACC,QAAQ,CACxCb,MAAM,CAAEF,qBACV,CAAC,CAAC,CACJ,CAAC,KAAM,GAAIJ,kBAAkB,GAAK,SAAS,CAAE,CAC3CW,cAAc,CAACI,KAAK,CAAGE,UAAU,CAAC,CAAC,CAAE,CACnCC,QAAQ,CAAEnC,KAAK,CAACsB,MAAM,CAACa,QAAQ,CAACE,MAAM,CACtCd,MAAM,CAAEF,qBACV,CAAC,CAAC,CACJ,CACF,CAAC,CAAE,CACDJ,kBAAkB,CAClBW,cAAc,CACdF,YAAY,CACZ1B,KAAK,CAACsB,MAAM,CAACa,QAAQ,CACrBd,qBAAqB,CACrBH,eAAe,CAChB,CAAC,CAEF,OAAOoB,GAAA,CAAC3C,6BAA6B,EAAC4C,KAAK,CAAEV,aAAc,CAAE,CAAC,CAChE;;;;"}
+{"version":3,"file":"BaseInputAnimatedBorder.native.js","sources":["../../../../../../src/components/Input/BaseInput/BaseInputAnimatedBorder.native.tsx"],"sourcesContent":["import styled from 'styled-components/native';\nimport type { EasingFn } from 'react-native-reanimated';\nimport Animated, {\n  useAnimatedStyle,\n  useSharedValue,\n  interpolate,\n  withTiming,\n} from 'react-native-reanimated';\nimport type { ReactElement } from 'react';\nimport { useEffect } from 'react';\nimport type { ActionStates } from '../../../utils/useInteraction';\nimport type { BaseInputProps } from './BaseInput';\nimport { useTheme } from '~components/BladeProvider';\nimport { makeBorderSize } from '~utils/makeBorderSize';\n\nconst BaseInputStyledAnimatedBorder = styled(Animated.View)(({ theme }) => ({\n  position: 'absolute',\n  bottom: 0,\n  left: 0,\n  right: 0,\n  opacity: 1,\n  backgroundColor: theme.colors.interactive.background.primary.default,\n  height: makeBorderSize(theme.border.width.thin),\n}));\n\nexport const BaseInputAnimatedBorder = ({\n  currentInteraction,\n  validationState,\n}: {\n  currentInteraction: ActionStates;\n  validationState: BaseInputProps['validationState'];\n}): ReactElement => {\n  const { theme } = useTheme();\n  const borderAnimationEasing = (theme.motion.easing.standard.effective as unknown) as EasingFn;\n\n  const widthTrigger = useSharedValue(0);\n  const opacityTrigger = useSharedValue(1);\n\n  const animatedStyle = useAnimatedStyle(() => {\n    return {\n      width: `${interpolate(widthTrigger.value, [0, 1], [0, 100])}%`,\n      opacity: interpolate(opacityTrigger.value, [0, 1], [0, 1]),\n    };\n  });\n\n  useEffect(() => {\n    if (\n      currentInteraction == 'focus' &&\n      validationState !== 'error' &&\n      validationState !== 'success'\n    ) {\n      widthTrigger.value = 0;\n      opacityTrigger.value = 1;\n      widthTrigger.value = withTiming(1, {\n        duration: theme.motion.duration.moderate,\n        easing: borderAnimationEasing,\n      });\n    } else if (currentInteraction === 'default') {\n      opacityTrigger.value = withTiming(0, {\n        duration: theme.motion.duration.xquick,\n        easing: borderAnimationEasing,\n      });\n    }\n  }, [\n    currentInteraction,\n    opacityTrigger,\n    widthTrigger,\n    theme.motion.duration,\n    borderAnimationEasing,\n    validationState,\n  ]);\n\n  return <BaseInputStyledAnimatedBorder style={animatedStyle} />;\n};\n"],"names":["BaseInputStyledAnimatedBorder","styled","Animated","View","_ref","theme","position","bottom","left","right","opacity","backgroundColor","colors","interactive","background","primary","default","height","makeBorderSize","border","width","thin","BaseInputAnimatedBorder","_ref2","currentInteraction","validationState","_useTheme","useTheme","borderAnimationEasing","motion","easing","standard","effective","widthTrigger","useSharedValue","opacityTrigger","animatedStyle","useAnimatedStyle","interpolate","value","useEffect","withTiming","duration","moderate","xquick","_jsx","style"],"mappings":";;;;;;;;;;;;AAeA,IAAMA,6BAA6B,CAAGC,MAAM,CAACC,QAAQ,CAACC,IAAI,CAAC,CAAC,SAAAC,IAAA,MAAGC,KAAK,CAAAD,IAAA,CAALC,KAAK,CAAA,OAAQ,CAC1EC,QAAQ,CAAE,UAAU,CACpBC,MAAM,CAAE,CAAC,CACTC,IAAI,CAAE,CAAC,CACPC,KAAK,CAAE,CAAC,CACRC,OAAO,CAAE,CAAC,CACVC,eAAe,CAAEN,KAAK,CAACO,MAAM,CAACC,WAAW,CAACC,UAAU,CAACC,OAAO,CAACC,OAAO,CACpEC,MAAM,CAAEC,cAAc,CAACb,KAAK,CAACc,MAAM,CAACC,KAAK,CAACC,IAAI,CAChD,CAAC,EAAC,CAAC,CAEU,IAAAC,uBAAuB,CAAG,SAA1BA,uBAAuBA,CAAAC,KAAA,CAMhB,KALlBC,kBAAkB,CAAAD,KAAA,CAAlBC,kBAAkB,CAClBC,eAAe,CAAAF,KAAA,CAAfE,eAAe,CAKf,IAAAC,SAAA,CAAkBC,QAAQ,EAAE,CAApBtB,KAAK,CAAAqB,SAAA,CAALrB,KAAK,CACb,IAAMuB,qBAAqB,CAAIvB,KAAK,CAACwB,MAAM,CAACC,MAAM,CAACC,QAAQ,CAACC,SAAiC,CAE7F,IAAMC,YAAY,CAAGC,cAAc,CAAC,CAAC,CAAC,CACtC,IAAMC,cAAc,CAAGD,cAAc,CAAC,CAAC,CAAC,CAExC,IAAME,aAAa,CAAGC,gBAAgB,CAAC,UAAM,CAC3C,OAAO,CACLjB,KAAK,CAAG,CAAEkB,EAAAA,WAAW,CAACL,YAAY,CAACM,KAAK,CAAE,CAAC,CAAC,CAAE,CAAC,CAAC,CAAE,CAAC,CAAC,CAAE,GAAG,CAAC,CAAE,GAAE,CAC9D7B,OAAO,CAAE4B,WAAW,CAACH,cAAc,CAACI,KAAK,CAAE,CAAC,CAAC,CAAE,CAAC,CAAC,CAAE,CAAC,CAAC,CAAE,CAAC,CAAC,CAC3D,CAAC,CACH,CAAC,CAAC,CAEFC,SAAS,CAAC,UAAM,CACd,GACEhB,kBAAkB,EAAI,OAAO,EAC7BC,eAAe,GAAK,OAAO,EAC3BA,eAAe,GAAK,SAAS,CAC7B,CACAQ,YAAY,CAACM,KAAK,CAAG,CAAC,CACtBJ,cAAc,CAACI,KAAK,CAAG,CAAC,CACxBN,YAAY,CAACM,KAAK,CAAGE,UAAU,CAAC,CAAC,CAAE,CACjCC,QAAQ,CAAErC,KAAK,CAACwB,MAAM,CAACa,QAAQ,CAACC,QAAQ,CACxCb,MAAM,CAAEF,qBACV,CAAC,CAAC,CACJ,CAAC,QAAUJ,kBAAkB,GAAK,SAAS,CAAE,CAC3CW,cAAc,CAACI,KAAK,CAAGE,UAAU,CAAC,CAAC,CAAE,CACnCC,QAAQ,CAAErC,KAAK,CAACwB,MAAM,CAACa,QAAQ,CAACE,MAAM,CACtCd,MAAM,CAAEF,qBACV,CAAC,CAAC,CACJ,CACF,CAAC,CAAE,CACDJ,kBAAkB,CAClBW,cAAc,CACdF,YAAY,CACZ5B,KAAK,CAACwB,MAAM,CAACa,QAAQ,CACrBd,qBAAqB,CACrBH,eAAe,CAChB,CAAC,CAEF,OAAOoB,GAAA,CAAC7C,6BAA6B,EAAC8C,KAAK,CAAEV,aAAc,CAAE,CAAC,CAChE;;;;"}

package/build/lib/native/components/Input/BaseInput/BaseInputTagSlot.native.js

@@ -14,7 +14,7 @@ import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { Text } from '../../Typography/Text/Text.js';
 import '../../Typography/Code/Code.js';
 
-var ScrollableTagSlotContainer=function ScrollableTagSlotContainer(_ref){var maxTagRows=_ref.maxTagRows,children=_ref.children,handleOnInputClick=_ref.handleOnInputClick;var scrollViewRef=React__default.useRef(null);var _React$useState=React__default.useState(false),_React$useState2=_slicedToArray(_React$useState,2),isScrolling=_React$useState2[0],setIsScrolling=_React$useState2[1];return jsxs(ScrollView,{ref:scrollViewRef,contentContainerStyle:{flexWrap:maxTagRows==='single'?'nowrap':'wrap',position:'relative',flexDirection:'row',flexGrow:1},onScrollBeginDrag:function onScrollBeginDrag(){setIsScrolling(true);},onScrollEndDrag:function onScrollEndDrag(){setIsScrolling(false);},horizontal:maxTagRows==='single',showsHorizontalScrollIndicator:maxTagRows==='single',onContentSizeChange:function onContentSizeChange(){var _scrollViewRef$curren;(_scrollViewRef$curren=scrollViewRef.current)==null?void 0:_scrollViewRef$curren.scrollToEnd({animated:true});},children:[jsx(TouchableWithoutFeedback,{onPress:function onPress(){if(!isScrolling){handleOnInputClick();}},children:jsx(BaseBox,{position:"absolute",height:"100%",width:"100%"})}),children]});};var ClickableText=function ClickableText(_ref2){var children=_ref2.children,handleOnInputClick=_ref2.handleOnInputClick,isDisabled=_ref2.isDisabled;return jsx(TouchableWithoutFeedback,{onPress:function onPress(){handleOnInputClick();},children:jsx(BaseBox,{alignSelf:"center",marginRight:"spacing.4",children:jsx(Text,{type:isDisabled?'placeholder':'normal',children:children})})});};var PLUS_X_MORE_TEXT_WIDTH=60;var BaseInputTagSlot=function BaseInputTagSlot(_ref3){var tags=_ref3.tags,maxTagRows=_ref3.maxTagRows,showAllTags=_ref3.showAllTags,handleOnInputClick=_ref3.handleOnInputClick,renderAs=_ref3.renderAs,children=_ref3.children,isDropdownTrigger=_ref3.isDropdownTrigger,labelPrefix=_ref3.labelPrefix,isDisabled=_ref3.isDisabled;var hasTags=tags&&tags.length>0;var initialVisibleTags=maxTagRows==='multiple'?6:1;var _React$useState3=React__default.useState(labelPrefix?0:initialVisibleTags),_React$useState4=_slicedToArray(_React$useState3,2),visibleTags=_React$useState4[0],setVisibleTags=_React$useState4[1];var invisibleTagsCount=tags||tags&&labelPrefix?tags.length-visibleTags:0;if(!isDropdownTrigger){return children;}return jsxs(BaseBox,{justifyContent:"flex-start",paddingY:"spacing.1",paddingX:"spacing.4",minHeight:makeSize(BASEINPUT_DEFAULT_HEIGHT),display:"flex",flexDirection:"row",position:"relative",flex:"1",onLayout:function onLayout(e){var _e$nativeEvent,_e$nativeEvent$layout;if(!hasTags)return;if(labelPrefix){setVisibleTags(0);return;}if(maxTagRows==='multiple'){return;}var containerWidth=(_e$nativeEvent=e.nativeEvent)==null?void 0:(_e$nativeEvent$layout=_e$nativeEvent.layout)==null?void 0:_e$nativeEvent$layout.width;if(!containerWidth){return;}var availableTagsSpace=containerWidth-PLUS_X_MORE_TEXT_WIDTH;var visibleTagsCount=Math.floor(availableTagsSpace/140);setVisibleTags(visibleTagsCount);},children:[jsxs(ScrollableTagSlotContainer,{maxTagRows:maxTagRows,showAllTags:showAllTags,handleOnInputClick:handleOnInputClick,children:[hasTags?jsxs(Fragment,{children:[showAllTags||maxTagRows==='multiple'?tags:tags.slice(0,visibleTags),invisibleTagsCount>0&&!showAllTags&&!labelPrefix&&maxTagRows!=='multiple'?jsxs(ClickableText,{isDisabled:isDisabled,handleOnInputClick:handleOnInputClick,children:["+ ",invisibleTagsCount," More"]}):null,!showAllTags&&invisibleTagsCount>0&&labelPrefix?jsxs(ClickableText,{isDisabled:isDisabled,handleOnInputClick:handleOnInputClick,children:[labelPrefix," (",invisibleTagsCount," Selected)"]}):null]}):null,jsx(BaseBox,{width:hasTags&&renderAs==='button'?makeSize(size['1']):'100%',children:children})]}),jsx(TouchableWithoutFeedback,{onPress:function onPress(){handleOnInputClick();},children:jsx(BaseBox,{flex:"1"})})]});};
+var ScrollableTagSlotContainer=function ScrollableTagSlotContainer(_ref){var maxTagRows=_ref.maxTagRows,children=_ref.children,handleOnInputClick=_ref.handleOnInputClick;var scrollViewRef=React__default.useRef(null);var _React$useState=React__default.useState(false),_React$useState2=_slicedToArray(_React$useState,2),isScrolling=_React$useState2[0],setIsScrolling=_React$useState2[1];return jsxs(ScrollView,{ref:scrollViewRef,contentContainerStyle:{flexWrap:maxTagRows==='single'?'nowrap':'wrap',position:'relative',flexDirection:'row',flexGrow:1},onScrollBeginDrag:function onScrollBeginDrag(){setIsScrolling(true);},onScrollEndDrag:function onScrollEndDrag(){setIsScrolling(false);},horizontal:maxTagRows==='single',showsHorizontalScrollIndicator:maxTagRows==='single',onContentSizeChange:function onContentSizeChange(){var _scrollViewRef$curren;(_scrollViewRef$curren=scrollViewRef.current)==null?void 0:_scrollViewRef$curren.scrollToEnd({animated:true});},children:[jsx(TouchableWithoutFeedback,{onPress:function onPress(){if(!isScrolling){handleOnInputClick();}},children:jsx(BaseBox,{position:"absolute",height:"100%",width:"100%"})}),children]});};var ClickableText=function ClickableText(_ref2){var children=_ref2.children,handleOnInputClick=_ref2.handleOnInputClick,isDisabled=_ref2.isDisabled;return jsx(TouchableWithoutFeedback,{onPress:function onPress(){handleOnInputClick();},children:jsx(BaseBox,{alignSelf:"center",marginRight:"spacing.4",children:jsx(Text,{size:"small",variant:"body",weight:"regular",color:isDisabled?'surface.text.gray.disabled':'surface.text.gray.subtle',children:children})})});};var PLUS_X_MORE_TEXT_WIDTH=60;var BaseInputTagSlot=function BaseInputTagSlot(_ref3){var tags=_ref3.tags,maxTagRows=_ref3.maxTagRows,showAllTags=_ref3.showAllTags,handleOnInputClick=_ref3.handleOnInputClick,renderAs=_ref3.renderAs,children=_ref3.children,isDropdownTrigger=_ref3.isDropdownTrigger,labelPrefix=_ref3.labelPrefix,isDisabled=_ref3.isDisabled;var hasTags=tags&&tags.length>0;var initialVisibleTags=maxTagRows==='multiple'?6:1;var _React$useState3=React__default.useState(labelPrefix?0:initialVisibleTags),_React$useState4=_slicedToArray(_React$useState3,2),visibleTags=_React$useState4[0],setVisibleTags=_React$useState4[1];var invisibleTagsCount=tags||tags&&labelPrefix?tags.length-visibleTags:0;if(!isDropdownTrigger){return children;}return jsxs(BaseBox,{justifyContent:"flex-start",paddingY:"spacing.1",paddingX:"spacing.4",minHeight:makeSize(BASEINPUT_DEFAULT_HEIGHT),display:"flex",flexDirection:"row",position:"relative",flex:"1",onLayout:function onLayout(e){var _e$nativeEvent,_e$nativeEvent$layout;if(!hasTags)return;if(labelPrefix){setVisibleTags(0);return;}if(maxTagRows==='multiple'){return;}var containerWidth=(_e$nativeEvent=e.nativeEvent)==null?void 0:(_e$nativeEvent$layout=_e$nativeEvent.layout)==null?void 0:_e$nativeEvent$layout.width;if(!containerWidth){return;}var availableTagsSpace=containerWidth-PLUS_X_MORE_TEXT_WIDTH;var visibleTagsCount=Math.floor(availableTagsSpace/140);setVisibleTags(visibleTagsCount);},children:[jsxs(ScrollableTagSlotContainer,{maxTagRows:maxTagRows,showAllTags:showAllTags,handleOnInputClick:handleOnInputClick,children:[hasTags?jsxs(Fragment,{children:[showAllTags||maxTagRows==='multiple'?tags:tags.slice(0,visibleTags),invisibleTagsCount>0&&!showAllTags&&!labelPrefix&&maxTagRows!=='multiple'?jsxs(ClickableText,{isDisabled:isDisabled,handleOnInputClick:handleOnInputClick,children:["+ ",invisibleTagsCount," More"]}):null,!showAllTags&&invisibleTagsCount>0&&labelPrefix?jsxs(ClickableText,{isDisabled:isDisabled,handleOnInputClick:handleOnInputClick,children:[labelPrefix," (",invisibleTagsCount," Selected)"]}):null]}):null,jsx(BaseBox,{width:hasTags&&renderAs==='button'?makeSize(size['1']):'100%',children:children})]}),jsx(TouchableWithoutFeedback,{onPress:function onPress(){handleOnInputClick();},children:jsx(BaseBox,{flex:"1"})})]});};
 
 export { BaseInputTagSlot };
 //# sourceMappingURL=BaseInputTagSlot.native.js.map

package/build/lib/native/components/Input/BaseInput/BaseInputTagSlot.native.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseInputTagSlot.native.js","sources":["../../../../../../src/components/Input/BaseInput/BaseInputTagSlot.native.tsx"],"sourcesContent":["import React from 'react';\nimport { ScrollView, TouchableWithoutFeedback } from 'react-native';\nimport type { BaseInputTagSlotProps } from './types';\nimport { BASEINPUT_DEFAULT_HEIGHT } from './baseInputConfig';\nimport BaseBox from '~components/Box/BaseBox';\nimport { makeSize } from '~utils';\nimport { size } from '~tokens/global';\nimport { Text } from '~components/Typography';\nimport type { StringChildrenType } from '~utils/types';\n\nconst ScrollableTagSlotContainer = ({\n  maxTagRows,\n  children,\n  handleOnInputClick,\n}: Pick<BaseInputTagSlotProps, 'maxTagRows' | 'showAllTags' | 'handleOnInputClick'> & {\n  children: (React.ReactNode | null)[];\n}): React.ReactElement => {\n  const scrollViewRef = React.useRef<ScrollView>(null);\n  const [isScrolling, setIsScrolling] = React.useState(false);\n  return (\n    <ScrollView\n      ref={scrollViewRef}\n      contentContainerStyle={{\n        flexWrap: maxTagRows === 'single' ? 'nowrap' : 'wrap',\n        position: 'relative',\n        flexDirection: 'row',\n        flexGrow: 1,\n      }}\n      onScrollBeginDrag={() => {\n        setIsScrolling(true);\n      }}\n      onScrollEndDrag={() => {\n        setIsScrolling(false);\n      }}\n      horizontal={maxTagRows === 'single'}\n      showsHorizontalScrollIndicator={maxTagRows === 'single'}\n      onContentSizeChange={() => {\n        scrollViewRef.current?.scrollToEnd({ animated: true });\n      }}\n    >\n      {/* This creates a clickable layer behind tags so if user clicks empty area between of tags, it handles opening of Dropdown */}\n      <TouchableWithoutFeedback\n        onPress={() => {\n          if (!isScrolling) {\n            handleOnInputClick();\n          }\n        }}\n      >\n        <BaseBox position=\"absolute\" height=\"100%\" width=\"100%\" />\n      </TouchableWithoutFeedback>\n      {children}\n    </ScrollView>\n  );\n};\n\nconst ClickableText = ({\n  children,\n  handleOnInputClick,\n  isDisabled,\n}: {\n  children: StringChildrenType;\n  handleOnInputClick: BaseInputTagSlotProps['handleOnInputClick'];\n  isDisabled: BaseInputTagSlotProps['isDisabled'];\n}): React.ReactElement => {\n  return (\n    <TouchableWithoutFeedback\n      onPress={() => {\n        handleOnInputClick();\n      }}\n    >\n      <BaseBox alignSelf=\"center\" marginRight=\"spacing.4\">\n        <Text type={isDisabled ? 'placeholder' : 'normal'}>{children}</Text>\n      </BaseBox>\n    </TouchableWithoutFeedback>\n  );\n};\n\nconst PLUS_X_MORE_TEXT_WIDTH = 60;\n\nconst BaseInputTagSlot = ({\n  tags,\n  maxTagRows,\n  showAllTags,\n  handleOnInputClick,\n  renderAs,\n  children,\n  isDropdownTrigger,\n  labelPrefix,\n  isDisabled,\n}: BaseInputTagSlotProps): React.ReactElement | null => {\n  const hasTags = tags && tags.length > 0;\n  const initialVisibleTags = maxTagRows === 'multiple' ? 6 : 1;\n  const [visibleTags, setVisibleTags] = React.useState(labelPrefix ? 0 : initialVisibleTags);\n  const invisibleTagsCount = tags || (tags && labelPrefix) ? tags.length - visibleTags : 0;\n\n  if (!isDropdownTrigger) {\n    return children;\n  }\n\n  return (\n    <BaseBox\n      justifyContent=\"flex-start\"\n      paddingY=\"spacing.1\"\n      paddingX=\"spacing.4\"\n      minHeight={makeSize(BASEINPUT_DEFAULT_HEIGHT)}\n      display=\"flex\"\n      flexDirection=\"row\"\n      position=\"relative\"\n      flex=\"1\"\n      onLayout={(e) => {\n        if (!hasTags) return;\n\n        if (labelPrefix) {\n          setVisibleTags(0);\n          return;\n        }\n\n        if (maxTagRows === 'multiple') {\n          // The calculation is for single-line versions.\n          // In multiline, we have default 6 tags in RN\n          return;\n        }\n\n        const containerWidth = e.nativeEvent?.layout?.width;\n        if (!containerWidth) {\n          return;\n        }\n\n        const availableTagsSpace = containerWidth - PLUS_X_MORE_TEXT_WIDTH;\n        const visibleTagsCount = Math.floor(availableTagsSpace / 140);\n        setVisibleTags(visibleTagsCount);\n      }}\n    >\n      <ScrollableTagSlotContainer\n        maxTagRows={maxTagRows}\n        showAllTags={showAllTags}\n        handleOnInputClick={handleOnInputClick}\n      >\n        {hasTags ? (\n          <>\n            {showAllTags || maxTagRows === 'multiple' ? tags : tags.slice(0, visibleTags)}\n            {invisibleTagsCount > 0 && !showAllTags && !labelPrefix && maxTagRows !== 'multiple' ? (\n              <ClickableText isDisabled={isDisabled} handleOnInputClick={handleOnInputClick}>\n                + {invisibleTagsCount} More\n              </ClickableText>\n            ) : null}\n            {!showAllTags && invisibleTagsCount > 0 && labelPrefix ? (\n              <ClickableText isDisabled={isDisabled} handleOnInputClick={handleOnInputClick}>\n                {labelPrefix} ({invisibleTagsCount} Selected)\n              </ClickableText>\n            ) : null}\n          </>\n        ) : null}\n        <BaseBox width={hasTags && renderAs === 'button' ? makeSize(size['1']) : '100%'}>\n          {children}\n        </BaseBox>\n      </ScrollableTagSlotContainer>\n      <TouchableWithoutFeedback\n        onPress={() => {\n          handleOnInputClick();\n        }}\n      >\n        <BaseBox flex=\"1\" />\n      </TouchableWithoutFeedback>\n    </BaseBox>\n  );\n};\n\nexport { BaseInputTagSlot };\n"],"names":["ScrollableTagSlotContainer","_ref","maxTagRows","children","handleOnInputClick","scrollViewRef","React","useRef","_React$useState","useState","_React$useState2","_slicedToArray","isScrolling","setIsScrolling","_jsxs","ScrollView","ref","contentContainerStyle","flexWrap","position","flexDirection","flexGrow","onScrollBeginDrag","onScrollEndDrag","horizontal","showsHorizontalScrollIndicator","onContentSizeChange","_scrollViewRef$curren","current","scrollToEnd","animated","_jsx","TouchableWithoutFeedback","onPress","BaseBox","height","width","ClickableText","_ref2","isDisabled","alignSelf","marginRight","Text","type","PLUS_X_MORE_TEXT_WIDTH","BaseInputTagSlot","_ref3","tags","showAllTags","renderAs","isDropdownTrigger","labelPrefix","hasTags","length","initialVisibleTags","_React$useState3","_React$useState4","visibleTags","setVisibleTags","invisibleTagsCount","justifyContent","paddingY","paddingX","minHeight","makeSize","BASEINPUT_DEFAULT_HEIGHT","display","flex","onLayout","e","_e$nativeEvent","_e$nativeEvent$layout","containerWidth","nativeEvent","layout","availableTagsSpace","visibleTagsCount","Math","floor","_Fragment","slice","size"],"mappings":"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"}
+{"version":3,"file":"BaseInputTagSlot.native.js","sources":["../../../../../../src/components/Input/BaseInput/BaseInputTagSlot.native.tsx"],"sourcesContent":["import React from 'react';\nimport { ScrollView, TouchableWithoutFeedback } from 'react-native';\nimport type { BaseInputTagSlotProps } from './types';\nimport { BASEINPUT_DEFAULT_HEIGHT } from './baseInputConfig';\nimport BaseBox from '~components/Box/BaseBox';\nimport { makeSize } from '~utils';\nimport { size } from '~tokens/global';\nimport { Text } from '~components/Typography';\nimport type { StringChildrenType } from '~utils/types';\n\nconst ScrollableTagSlotContainer = ({\n  maxTagRows,\n  children,\n  handleOnInputClick,\n}: Pick<BaseInputTagSlotProps, 'maxTagRows' | 'showAllTags' | 'handleOnInputClick'> & {\n  children: (React.ReactNode | null)[];\n}): React.ReactElement => {\n  const scrollViewRef = React.useRef<ScrollView>(null);\n  const [isScrolling, setIsScrolling] = React.useState(false);\n  return (\n    <ScrollView\n      ref={scrollViewRef}\n      contentContainerStyle={{\n        flexWrap: maxTagRows === 'single' ? 'nowrap' : 'wrap',\n        position: 'relative',\n        flexDirection: 'row',\n        flexGrow: 1,\n      }}\n      onScrollBeginDrag={() => {\n        setIsScrolling(true);\n      }}\n      onScrollEndDrag={() => {\n        setIsScrolling(false);\n      }}\n      horizontal={maxTagRows === 'single'}\n      showsHorizontalScrollIndicator={maxTagRows === 'single'}\n      onContentSizeChange={() => {\n        scrollViewRef.current?.scrollToEnd({ animated: true });\n      }}\n    >\n      {/* This creates a clickable layer behind tags so if user clicks empty area between of tags, it handles opening of Dropdown */}\n      <TouchableWithoutFeedback\n        onPress={() => {\n          if (!isScrolling) {\n            handleOnInputClick();\n          }\n        }}\n      >\n        <BaseBox position=\"absolute\" height=\"100%\" width=\"100%\" />\n      </TouchableWithoutFeedback>\n      {children}\n    </ScrollView>\n  );\n};\n\nconst ClickableText = ({\n  children,\n  handleOnInputClick,\n  isDisabled,\n}: {\n  children: StringChildrenType;\n  handleOnInputClick: BaseInputTagSlotProps['handleOnInputClick'];\n  isDisabled: BaseInputTagSlotProps['isDisabled'];\n}): React.ReactElement => {\n  return (\n    <TouchableWithoutFeedback\n      onPress={() => {\n        handleOnInputClick();\n      }}\n    >\n      <BaseBox alignSelf=\"center\" marginRight=\"spacing.4\">\n        <Text\n          size=\"small\"\n          variant=\"body\"\n          weight=\"regular\"\n          color={isDisabled ? 'surface.text.gray.disabled' : 'surface.text.gray.subtle'}\n        >\n          {children}\n        </Text>\n      </BaseBox>\n    </TouchableWithoutFeedback>\n  );\n};\n\nconst PLUS_X_MORE_TEXT_WIDTH = 60;\n\nconst BaseInputTagSlot = ({\n  tags,\n  maxTagRows,\n  showAllTags,\n  handleOnInputClick,\n  renderAs,\n  children,\n  isDropdownTrigger,\n  labelPrefix,\n  isDisabled,\n}: BaseInputTagSlotProps): React.ReactElement | null => {\n  const hasTags = tags && tags.length > 0;\n  const initialVisibleTags = maxTagRows === 'multiple' ? 6 : 1;\n  const [visibleTags, setVisibleTags] = React.useState(labelPrefix ? 0 : initialVisibleTags);\n  const invisibleTagsCount = tags || (tags && labelPrefix) ? tags.length - visibleTags : 0;\n\n  if (!isDropdownTrigger) {\n    return children;\n  }\n\n  return (\n    <BaseBox\n      justifyContent=\"flex-start\"\n      paddingY=\"spacing.1\"\n      paddingX=\"spacing.4\"\n      minHeight={makeSize(BASEINPUT_DEFAULT_HEIGHT)}\n      display=\"flex\"\n      flexDirection=\"row\"\n      position=\"relative\"\n      flex=\"1\"\n      onLayout={(e) => {\n        if (!hasTags) return;\n\n        if (labelPrefix) {\n          setVisibleTags(0);\n          return;\n        }\n\n        if (maxTagRows === 'multiple') {\n          // The calculation is for single-line versions.\n          // In multiline, we have default 6 tags in RN\n          return;\n        }\n\n        const containerWidth = e.nativeEvent?.layout?.width;\n        if (!containerWidth) {\n          return;\n        }\n\n        const availableTagsSpace = containerWidth - PLUS_X_MORE_TEXT_WIDTH;\n        const visibleTagsCount = Math.floor(availableTagsSpace / 140);\n        setVisibleTags(visibleTagsCount);\n      }}\n    >\n      <ScrollableTagSlotContainer\n        maxTagRows={maxTagRows}\n        showAllTags={showAllTags}\n        handleOnInputClick={handleOnInputClick}\n      >\n        {hasTags ? (\n          <>\n            {showAllTags || maxTagRows === 'multiple' ? tags : tags.slice(0, visibleTags)}\n            {invisibleTagsCount > 0 && !showAllTags && !labelPrefix && maxTagRows !== 'multiple' ? (\n              <ClickableText isDisabled={isDisabled} handleOnInputClick={handleOnInputClick}>\n                + {invisibleTagsCount} More\n              </ClickableText>\n            ) : null}\n            {!showAllTags && invisibleTagsCount > 0 && labelPrefix ? (\n              <ClickableText isDisabled={isDisabled} handleOnInputClick={handleOnInputClick}>\n                {labelPrefix} ({invisibleTagsCount} Selected)\n              </ClickableText>\n            ) : null}\n          </>\n        ) : null}\n        <BaseBox width={hasTags && renderAs === 'button' ? makeSize(size['1']) : '100%'}>\n          {children}\n        </BaseBox>\n      </ScrollableTagSlotContainer>\n      <TouchableWithoutFeedback\n        onPress={() => {\n          handleOnInputClick();\n        }}\n      >\n        <BaseBox flex=\"1\" />\n      </TouchableWithoutFeedback>\n    </BaseBox>\n  );\n};\n\nexport { BaseInputTagSlot };\n"],"names":["ScrollableTagSlotContainer","_ref","maxTagRows","children","handleOnInputClick","scrollViewRef","React","useRef","_React$useState","useState","_React$useState2","_slicedToArray","isScrolling","setIsScrolling","_jsxs","ScrollView","ref","contentContainerStyle","flexWrap","position","flexDirection","flexGrow","onScrollBeginDrag","onScrollEndDrag","horizontal","showsHorizontalScrollIndicator","onContentSizeChange","_scrollViewRef$curren","current","scrollToEnd","animated","_jsx","TouchableWithoutFeedback","onPress","BaseBox","height","width","ClickableText","_ref2","isDisabled","alignSelf","marginRight","Text","size","variant","weight","color","PLUS_X_MORE_TEXT_WIDTH","BaseInputTagSlot","_ref3","tags","showAllTags","renderAs","isDropdownTrigger","labelPrefix","hasTags","length","initialVisibleTags","_React$useState3","_React$useState4","visibleTags","setVisibleTags","invisibleTagsCount","justifyContent","paddingY","paddingX","minHeight","makeSize","BASEINPUT_DEFAULT_HEIGHT","display","flex","onLayout","e","_e$nativeEvent","_e$nativeEvent$layout","containerWidth","nativeEvent","layout","availableTagsSpace","visibleTagsCount","Math","floor","_Fragment","slice"],"mappings":"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"}

package/build/lib/native/components/Input/BaseInput/BaseInputVisuals.js

@@ -11,7 +11,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { Text } from '../../Typography/Text/Text.js';
 import '../../Typography/Code/Code.js';
 
-var getVisualContainerStyles=function getVisualContainerStyles(){return {display:'flex',flexDirection:'row',alignItems:'center',alignSelf:'center'};};var getPrefixStyles=function getPrefixStyles(_ref){var hasLeadingIcon=_ref.hasLeadingIcon,hasPrefix=_ref.hasPrefix;if(hasPrefix&&hasLeadingIcon){return {paddingLeft:'spacing.2'};}if(hasPrefix&&!hasLeadingIcon){return {paddingLeft:'spacing.4'};}return {paddingLeft:'spacing.0'};};var getInteractionElementStyles=function getInteractionElementStyles(_ref2){var hasTrailingIcon=_ref2.hasTrailingIcon,hasInteractionElement=_ref2.hasInteractionElement,hasSuffix=_ref2.hasSuffix;if(hasInteractionElement&&(hasSuffix||hasTrailingIcon)){return {paddingRight:'spacing.2'};}if(hasInteractionElement&&!hasSuffix&&!hasTrailingIcon){return {paddingRight:'spacing.4'};}return {paddingRight:'spacing.0'};};var getSuffixStyles=function getSuffixStyles(_ref3){var hasTrailingIcon=_ref3.hasTrailingIcon,hasSuffix=_ref3.hasSuffix;if(hasSuffix&&hasTrailingIcon){return {paddingRight:'spacing.2'};}if(hasSuffix&&!hasTrailingIcon){return {paddingRight:'spacing.4'};}return {paddingRight:'spacing.0'};};var getInputVisualsToBeRendered=function getInputVisualsToBeRendered(_ref4){var leadingIcon=_ref4.leadingIcon,prefix=_ref4.prefix,interactionElement=_ref4.interactionElement,suffix=_ref4.suffix,trailingIcon=_ref4.trailingIcon;return {hasLeadingIcon:Boolean(leadingIcon),hasPrefix:Boolean(prefix),hasInteractionElement:Boolean(interactionElement),hasSuffix:Boolean(suffix),hasTrailingIcon:Boolean(trailingIcon)};};var BaseInputVisuals=function BaseInputVisuals(_ref5){var LeadingIcon=_ref5.leadingIcon,prefix=_ref5.prefix,interactionElement=_ref5.interactionElement,suffix=_ref5.suffix,TrailingIcon=_ref5.trailingIcon,isDisabled=_ref5.isDisabled;var _getInputVisualsToBeR=getInputVisualsToBeRendered({leadingIcon:LeadingIcon,prefix:prefix,interactionElement:interactionElement,suffix:suffix,trailingIcon:TrailingIcon}),hasLeadingIcon=_getInputVisualsToBeR.hasLeadingIcon,hasPrefix=_getInputVisualsToBeR.hasPrefix,hasInteractionElement=_getInputVisualsToBeR.hasInteractionElement,hasSuffix=_getInputVisualsToBeR.hasSuffix,hasTrailingIcon=_getInputVisualsToBeR.hasTrailingIcon;var hasLeadingVisuals=hasLeadingIcon||hasPrefix;var hasTrailingVisuals=hasInteractionElement||hasSuffix||hasTrailingIcon;if(hasLeadingVisuals){return jsxs(BaseBox,Object.assign({},getVisualContainerStyles(),{children:[LeadingIcon?jsx(BaseBox,{paddingLeft:"spacing.4",display:"flex",children:jsx(LeadingIcon,{size:"medium",color:isDisabled?'surface.text.placeholder.lowContrast':'surface.text.subtle.lowContrast'})}):null,hasPrefix?jsx(BaseBox,Object.assign({},getPrefixStyles({hasLeadingIcon:hasLeadingIcon,hasPrefix:hasPrefix}),{children:jsx(Text,{size:"medium",variant:"body",weight:"regular",contrast:"low",type:isDisabled?'placeholder':'subtle',children:prefix})})):null]}));}if(hasTrailingVisuals){return jsxs(BaseBox,Object.assign({alignSelf:"stretch",alignItems:"stretch"},getVisualContainerStyles(),{children:[hasInteractionElement?jsx(BaseBox,Object.assign({},getInteractionElementStyles({hasTrailingIcon:hasTrailingIcon,hasInteractionElement:hasInteractionElement,hasSuffix:hasSuffix}),{display:"flex",alignItems:"stretch",alignSelf:"stretch",children:interactionElement})):null,hasSuffix?jsx(BaseBox,Object.assign({},getSuffixStyles({hasTrailingIcon:hasTrailingIcon,hasSuffix:hasSuffix}),{children:jsx(Text,{size:"medium",variant:"body",weight:"regular",contrast:"low",type:isDisabled?'placeholder':'subtle',children:suffix})})):null,TrailingIcon?jsx(BaseBox,{paddingRight:"spacing.4",display:"flex",children:jsx(TrailingIcon,{size:"medium",color:isDisabled?'surface.text.placeholder.lowContrast':'surface.text.subtle.lowContrast'})}):null]}));}return null;};
+var getVisualContainerStyles=function getVisualContainerStyles(){return {display:'flex',flexDirection:'row',alignItems:'center',alignSelf:'center'};};var getPrefixStyles=function getPrefixStyles(_ref){var hasLeadingIcon=_ref.hasLeadingIcon,hasPrefix=_ref.hasPrefix;if(hasPrefix&&hasLeadingIcon){return {paddingLeft:'spacing.2'};}if(hasPrefix&&!hasLeadingIcon){return {paddingLeft:'spacing.4'};}return {paddingLeft:'spacing.0'};};var getInteractionElementStyles=function getInteractionElementStyles(_ref2){var hasTrailingIcon=_ref2.hasTrailingIcon,hasInteractionElement=_ref2.hasInteractionElement,hasSuffix=_ref2.hasSuffix;if(hasInteractionElement&&(hasSuffix||hasTrailingIcon)){return {paddingRight:'spacing.2'};}if(hasInteractionElement&&!hasSuffix&&!hasTrailingIcon){return {paddingRight:'spacing.4'};}return {paddingRight:'spacing.0'};};var getSuffixStyles=function getSuffixStyles(_ref3){var hasTrailingIcon=_ref3.hasTrailingIcon,hasSuffix=_ref3.hasSuffix;if(hasSuffix&&hasTrailingIcon){return {paddingRight:'spacing.2'};}if(hasSuffix&&!hasTrailingIcon){return {paddingRight:'spacing.4'};}return {paddingRight:'spacing.0'};};var getInputVisualsToBeRendered=function getInputVisualsToBeRendered(_ref4){var leadingIcon=_ref4.leadingIcon,prefix=_ref4.prefix,interactionElement=_ref4.interactionElement,suffix=_ref4.suffix,trailingIcon=_ref4.trailingIcon;return {hasLeadingIcon:Boolean(leadingIcon),hasPrefix:Boolean(prefix),hasInteractionElement:Boolean(interactionElement),hasSuffix:Boolean(suffix),hasTrailingIcon:Boolean(trailingIcon)};};var BaseInputVisuals=function BaseInputVisuals(_ref5){var LeadingIcon=_ref5.leadingIcon,prefix=_ref5.prefix,interactionElement=_ref5.interactionElement,suffix=_ref5.suffix,TrailingIcon=_ref5.trailingIcon,isDisabled=_ref5.isDisabled;var _getInputVisualsToBeR=getInputVisualsToBeRendered({leadingIcon:LeadingIcon,prefix:prefix,interactionElement:interactionElement,suffix:suffix,trailingIcon:TrailingIcon}),hasLeadingIcon=_getInputVisualsToBeR.hasLeadingIcon,hasPrefix=_getInputVisualsToBeR.hasPrefix,hasInteractionElement=_getInputVisualsToBeR.hasInteractionElement,hasSuffix=_getInputVisualsToBeR.hasSuffix,hasTrailingIcon=_getInputVisualsToBeR.hasTrailingIcon;var hasLeadingVisuals=hasLeadingIcon||hasPrefix;var hasTrailingVisuals=hasInteractionElement||hasSuffix||hasTrailingIcon;if(hasLeadingVisuals){return jsxs(BaseBox,Object.assign({},getVisualContainerStyles(),{children:[LeadingIcon?jsx(BaseBox,{paddingLeft:"spacing.4",display:"flex",children:jsx(LeadingIcon,{size:"medium",color:isDisabled?'surface.icon.gray.disabled':'surface.icon.gray.subtle'})}):null,hasPrefix?jsx(BaseBox,Object.assign({},getPrefixStyles({hasLeadingIcon:hasLeadingIcon,hasPrefix:hasPrefix}),{children:jsx(Text,{size:"medium",variant:"body",weight:"regular",color:isDisabled?'surface.text.gray.disabled':'surface.text.gray.subtle',children:prefix})})):null]}));}if(hasTrailingVisuals){return jsxs(BaseBox,Object.assign({alignSelf:"stretch",alignItems:"stretch"},getVisualContainerStyles(),{children:[hasInteractionElement?jsx(BaseBox,Object.assign({},getInteractionElementStyles({hasTrailingIcon:hasTrailingIcon,hasInteractionElement:hasInteractionElement,hasSuffix:hasSuffix}),{display:"flex",alignItems:"stretch",alignSelf:"stretch",children:interactionElement})):null,hasSuffix?jsx(BaseBox,Object.assign({},getSuffixStyles({hasTrailingIcon:hasTrailingIcon,hasSuffix:hasSuffix}),{children:jsx(Text,{size:"medium",variant:"body",weight:"regular",color:isDisabled?'surface.text.gray.disabled':'surface.text.gray.subtle',children:suffix})})):null,TrailingIcon?jsx(BaseBox,{paddingRight:"spacing.4",display:"flex",children:jsx(TrailingIcon,{size:"medium",color:isDisabled?'interactive.icon.gray.disabled':'interactive.icon.gray.muted'})}):null]}));}return null;};
 
 export { BaseInputVisuals, getInputVisualsToBeRendered };
 //# sourceMappingURL=BaseInputVisuals.js.map

package/build/lib/native/components/Input/BaseInput/BaseInputVisuals.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseInputVisuals.js","sources":["../../../../../../src/components/Input/BaseInput/BaseInputVisuals.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/explicit-function-return-type */\nimport type { ReactElement } from 'react';\nimport type { BaseInputProps } from './BaseInput';\nimport BaseBox from '~components/Box/BaseBox';\nimport { Text } from '~components/Typography';\nimport type { BaseBoxProps } from '~components/Box/BaseBox';\n\ntype InputVisuals = Pick<\n  BaseInputProps,\n  'leadingIcon' | 'prefix' | 'interactionElement' | 'suffix' | 'trailingIcon' | 'isDisabled'\n>;\n\nconst getVisualContainerStyles = (): Pick<\n  BaseBoxProps,\n  'display' | 'flexDirection' | 'alignItems' | 'alignSelf'\n> => ({\n  display: 'flex',\n  flexDirection: 'row',\n  alignItems: 'center',\n  alignSelf: 'center',\n});\n\nconst getPrefixStyles = ({\n  hasLeadingIcon,\n  hasPrefix,\n}: {\n  hasLeadingIcon: boolean;\n  hasPrefix: boolean;\n}): Pick<BaseBoxProps, 'paddingLeft'> => {\n  if (hasPrefix && hasLeadingIcon) {\n    return {\n      paddingLeft: 'spacing.2',\n    };\n  }\n\n  if (hasPrefix && !hasLeadingIcon) {\n    return {\n      paddingLeft: 'spacing.4',\n    };\n  }\n\n  return {\n    paddingLeft: 'spacing.0',\n  };\n};\n\nconst getInteractionElementStyles = ({\n  hasTrailingIcon,\n  hasInteractionElement,\n  hasSuffix,\n}: {\n  hasTrailingIcon: boolean;\n  hasInteractionElement: boolean;\n  hasSuffix: boolean;\n}): Pick<BaseBoxProps, 'paddingRight'> => {\n  if (hasInteractionElement && (hasSuffix || hasTrailingIcon)) {\n    return {\n      paddingRight: 'spacing.2',\n    };\n  }\n\n  if (hasInteractionElement && !hasSuffix && !hasTrailingIcon) {\n    return {\n      paddingRight: 'spacing.4',\n    };\n  }\n\n  return {\n    paddingRight: 'spacing.0',\n  };\n};\n\nconst getSuffixStyles = ({\n  hasTrailingIcon,\n  hasSuffix,\n}: {\n  hasTrailingIcon: boolean;\n  hasSuffix: boolean;\n}): Pick<BaseBoxProps, 'paddingRight'> => {\n  if (hasSuffix && hasTrailingIcon) {\n    return {\n      paddingRight: 'spacing.2',\n    };\n  }\n\n  if (hasSuffix && !hasTrailingIcon) {\n    return {\n      paddingRight: 'spacing.4',\n    };\n  }\n\n  return {\n    paddingRight: 'spacing.0',\n  };\n};\n\nexport const getInputVisualsToBeRendered = ({\n  leadingIcon,\n  prefix,\n  interactionElement,\n  suffix,\n  trailingIcon,\n}: InputVisuals) => ({\n  hasLeadingIcon: Boolean(leadingIcon),\n  hasPrefix: Boolean(prefix),\n  hasInteractionElement: Boolean(interactionElement),\n  hasSuffix: Boolean(suffix),\n  hasTrailingIcon: Boolean(trailingIcon),\n});\n\nexport const BaseInputVisuals = ({\n  leadingIcon: LeadingIcon,\n  prefix,\n  interactionElement,\n  suffix,\n  trailingIcon: TrailingIcon,\n  isDisabled,\n}: InputVisuals): ReactElement | null => {\n  const {\n    hasLeadingIcon,\n    hasPrefix,\n    hasInteractionElement,\n    hasSuffix,\n    hasTrailingIcon,\n  } = getInputVisualsToBeRendered({\n    leadingIcon: LeadingIcon,\n    prefix,\n    interactionElement,\n    suffix,\n    trailingIcon: TrailingIcon,\n  });\n\n  const hasLeadingVisuals = hasLeadingIcon || hasPrefix;\n  const hasTrailingVisuals = hasInteractionElement || hasSuffix || hasTrailingIcon;\n\n  if (hasLeadingVisuals) {\n    return (\n      <BaseBox {...getVisualContainerStyles()}>\n        {LeadingIcon ? (\n          <BaseBox paddingLeft=\"spacing.4\" display=\"flex\">\n            <LeadingIcon\n              size=\"medium\"\n              color={\n                isDisabled\n                  ? 'surface.text.placeholder.lowContrast'\n                  : 'surface.text.subtle.lowContrast'\n              }\n            />\n          </BaseBox>\n        ) : null}\n        {hasPrefix ? (\n          <BaseBox {...getPrefixStyles({ hasLeadingIcon, hasPrefix })}>\n            <Text\n              size=\"medium\"\n              variant=\"body\"\n              weight=\"regular\"\n              contrast=\"low\"\n              type={isDisabled ? 'placeholder' : 'subtle'}\n            >\n              {prefix}\n            </Text>\n          </BaseBox>\n        ) : null}\n      </BaseBox>\n    );\n  }\n\n  if (hasTrailingVisuals) {\n    return (\n      <BaseBox alignSelf=\"stretch\" alignItems=\"stretch\" {...getVisualContainerStyles()}>\n        {hasInteractionElement ? (\n          <BaseBox\n            {...getInteractionElementStyles({ hasTrailingIcon, hasInteractionElement, hasSuffix })}\n            display=\"flex\"\n            alignItems=\"stretch\"\n            alignSelf=\"stretch\"\n          >\n            {interactionElement}\n          </BaseBox>\n        ) : null}\n        {hasSuffix ? (\n          <BaseBox {...getSuffixStyles({ hasTrailingIcon, hasSuffix })}>\n            <Text\n              size=\"medium\"\n              variant=\"body\"\n              weight=\"regular\"\n              contrast=\"low\"\n              type={isDisabled ? 'placeholder' : 'subtle'}\n            >\n              {suffix}\n            </Text>\n          </BaseBox>\n        ) : null}\n        {TrailingIcon ? (\n          <BaseBox paddingRight=\"spacing.4\" display=\"flex\">\n            {\n              <TrailingIcon\n                size=\"medium\"\n                color={\n                  isDisabled\n                    ? 'surface.text.placeholder.lowContrast'\n                    : 'surface.text.subtle.lowContrast'\n                }\n              />\n            }\n          </BaseBox>\n        ) : null}\n      </BaseBox>\n    );\n  }\n\n  return null;\n};\n"],"names":["getVisualContainerStyles","display","flexDirection","alignItems","alignSelf","getPrefixStyles","_ref","hasLeadingIcon","hasPrefix","paddingLeft","getInteractionElementStyles","_ref2","hasTrailingIcon","hasInteractionElement","hasSuffix","paddingRight","getSuffixStyles","_ref3","getInputVisualsToBeRendered","_ref4","leadingIcon","prefix","interactionElement","suffix","trailingIcon","Boolean","BaseInputVisuals","_ref5","LeadingIcon","TrailingIcon","isDisabled","_getInputVisualsToBeR","hasLeadingVisuals","hasTrailingVisuals","_jsxs","BaseBox","Object","assign","children","_jsx","size","color","Text","variant","weight","contrast","type"],"mappings":"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"}
+{"version":3,"file":"BaseInputVisuals.js","sources":["../../../../../../src/components/Input/BaseInput/BaseInputVisuals.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/explicit-function-return-type */\nimport type { ReactElement } from 'react';\nimport type { BaseInputProps } from './BaseInput';\nimport BaseBox from '~components/Box/BaseBox';\nimport { Text } from '~components/Typography';\nimport type { BaseBoxProps } from '~components/Box/BaseBox';\n\ntype InputVisuals = Pick<\n  BaseInputProps,\n  'leadingIcon' | 'prefix' | 'interactionElement' | 'suffix' | 'trailingIcon' | 'isDisabled'\n>;\n\nconst getVisualContainerStyles = (): Pick<\n  BaseBoxProps,\n  'display' | 'flexDirection' | 'alignItems' | 'alignSelf'\n> => ({\n  display: 'flex',\n  flexDirection: 'row',\n  alignItems: 'center',\n  alignSelf: 'center',\n});\n\nconst getPrefixStyles = ({\n  hasLeadingIcon,\n  hasPrefix,\n}: {\n  hasLeadingIcon: boolean;\n  hasPrefix: boolean;\n}): Pick<BaseBoxProps, 'paddingLeft'> => {\n  if (hasPrefix && hasLeadingIcon) {\n    return {\n      paddingLeft: 'spacing.2',\n    };\n  }\n\n  if (hasPrefix && !hasLeadingIcon) {\n    return {\n      paddingLeft: 'spacing.4',\n    };\n  }\n\n  return {\n    paddingLeft: 'spacing.0',\n  };\n};\n\nconst getInteractionElementStyles = ({\n  hasTrailingIcon,\n  hasInteractionElement,\n  hasSuffix,\n}: {\n  hasTrailingIcon: boolean;\n  hasInteractionElement: boolean;\n  hasSuffix: boolean;\n}): Pick<BaseBoxProps, 'paddingRight'> => {\n  if (hasInteractionElement && (hasSuffix || hasTrailingIcon)) {\n    return {\n      paddingRight: 'spacing.2',\n    };\n  }\n\n  if (hasInteractionElement && !hasSuffix && !hasTrailingIcon) {\n    return {\n      paddingRight: 'spacing.4',\n    };\n  }\n\n  return {\n    paddingRight: 'spacing.0',\n  };\n};\n\nconst getSuffixStyles = ({\n  hasTrailingIcon,\n  hasSuffix,\n}: {\n  hasTrailingIcon: boolean;\n  hasSuffix: boolean;\n}): Pick<BaseBoxProps, 'paddingRight'> => {\n  if (hasSuffix && hasTrailingIcon) {\n    return {\n      paddingRight: 'spacing.2',\n    };\n  }\n\n  if (hasSuffix && !hasTrailingIcon) {\n    return {\n      paddingRight: 'spacing.4',\n    };\n  }\n\n  return {\n    paddingRight: 'spacing.0',\n  };\n};\n\nexport const getInputVisualsToBeRendered = ({\n  leadingIcon,\n  prefix,\n  interactionElement,\n  suffix,\n  trailingIcon,\n}: InputVisuals) => ({\n  hasLeadingIcon: Boolean(leadingIcon),\n  hasPrefix: Boolean(prefix),\n  hasInteractionElement: Boolean(interactionElement),\n  hasSuffix: Boolean(suffix),\n  hasTrailingIcon: Boolean(trailingIcon),\n});\n\nexport const BaseInputVisuals = ({\n  leadingIcon: LeadingIcon,\n  prefix,\n  interactionElement,\n  suffix,\n  trailingIcon: TrailingIcon,\n  isDisabled,\n}: InputVisuals): ReactElement | null => {\n  const {\n    hasLeadingIcon,\n    hasPrefix,\n    hasInteractionElement,\n    hasSuffix,\n    hasTrailingIcon,\n  } = getInputVisualsToBeRendered({\n    leadingIcon: LeadingIcon,\n    prefix,\n    interactionElement,\n    suffix,\n    trailingIcon: TrailingIcon,\n  });\n\n  const hasLeadingVisuals = hasLeadingIcon || hasPrefix;\n  const hasTrailingVisuals = hasInteractionElement || hasSuffix || hasTrailingIcon;\n\n  if (hasLeadingVisuals) {\n    return (\n      <BaseBox {...getVisualContainerStyles()}>\n        {LeadingIcon ? (\n          <BaseBox paddingLeft=\"spacing.4\" display=\"flex\">\n            <LeadingIcon\n              size=\"medium\"\n              color={isDisabled ? 'surface.icon.gray.disabled' : 'surface.icon.gray.subtle'}\n            />\n          </BaseBox>\n        ) : null}\n        {hasPrefix ? (\n          <BaseBox {...getPrefixStyles({ hasLeadingIcon, hasPrefix })}>\n            <Text\n              size=\"medium\"\n              variant=\"body\"\n              weight=\"regular\"\n              color={isDisabled ? 'surface.text.gray.disabled' : 'surface.text.gray.subtle'}\n            >\n              {prefix}\n            </Text>\n          </BaseBox>\n        ) : null}\n      </BaseBox>\n    );\n  }\n\n  if (hasTrailingVisuals) {\n    return (\n      <BaseBox alignSelf=\"stretch\" alignItems=\"stretch\" {...getVisualContainerStyles()}>\n        {hasInteractionElement ? (\n          <BaseBox\n            {...getInteractionElementStyles({ hasTrailingIcon, hasInteractionElement, hasSuffix })}\n            display=\"flex\"\n            alignItems=\"stretch\"\n            alignSelf=\"stretch\"\n          >\n            {interactionElement}\n          </BaseBox>\n        ) : null}\n        {hasSuffix ? (\n          <BaseBox {...getSuffixStyles({ hasTrailingIcon, hasSuffix })}>\n            <Text\n              size=\"medium\"\n              variant=\"body\"\n              weight=\"regular\"\n              color={isDisabled ? 'surface.text.gray.disabled' : 'surface.text.gray.subtle'}\n            >\n              {suffix}\n            </Text>\n          </BaseBox>\n        ) : null}\n        {TrailingIcon ? (\n          <BaseBox paddingRight=\"spacing.4\" display=\"flex\">\n            {\n              <TrailingIcon\n                size=\"medium\"\n                color={\n                  isDisabled ? 'interactive.icon.gray.disabled' : 'interactive.icon.gray.muted'\n                }\n              />\n            }\n          </BaseBox>\n        ) : null}\n      </BaseBox>\n    );\n  }\n\n  return null;\n};\n"],"names":["getVisualContainerStyles","display","flexDirection","alignItems","alignSelf","getPrefixStyles","_ref","hasLeadingIcon","hasPrefix","paddingLeft","getInteractionElementStyles","_ref2","hasTrailingIcon","hasInteractionElement","hasSuffix","paddingRight","getSuffixStyles","_ref3","getInputVisualsToBeRendered","_ref4","leadingIcon","prefix","interactionElement","suffix","trailingIcon","Boolean","BaseInputVisuals","_ref5","LeadingIcon","TrailingIcon","isDisabled","_getInputVisualsToBeR","hasLeadingVisuals","hasTrailingVisuals","_jsxs","BaseBox","Object","assign","children","_jsx","size","color","Text","variant","weight"],"mappings":"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"}