@razorpay/blade 11.37.0 → 11.38.0

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

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

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

@@ -2,7 +2,7 @@ import '../../tokens/global/typography.js';
 import '../../tokens/global/motion.js';
 import { size } from '../../tokens/global/size.js';
 
-var markerLineWidth=size['2'];var getMarkerLineSpacings=function getMarkerLineSpacings(size$1){var indentationWidth=size['33'];var LINE_SPACINGS={large:{markerBackgroundSize:size['24'],markerMargin:size['2']},medium:{markerBackgroundSize:size['20'],markerMargin:size['2']}};var markerLeftAlignment=(LINE_SPACINGS[size$1].markerBackgroundSize+LINE_SPACINGS[size$1].markerMargin)/2;var markerTopAlignment=-1*(LINE_SPACINGS[size$1].markerBackgroundSize+LINE_SPACINGS[size$1].markerMargin*2+markerLineWidth)/2;return Object.assign({},LINE_SPACINGS[size$1],{markerLeftAlignment:markerLeftAlignment,markerTopAlignment:markerTopAlignment,indentationWidth:indentationWidth});};var iconSizeTokens={medium:'small',large:'medium'};
+var markerLineWidth=size['2'];var getMarkerLineSpacings=function getMarkerLineSpacings(size$1){var LINE_SPACINGS={large:{markerBackgroundSize:size['24'],markerMargin:size['2'],indentationWidth:size['33']},medium:{markerBackgroundSize:size['20'],markerMargin:size['2'],indentationWidth:size['31']}};var markerLeftAlignment=(LINE_SPACINGS[size$1].markerBackgroundSize+LINE_SPACINGS[size$1].markerMargin)/2;var markerTopAlignment=-1*(LINE_SPACINGS[size$1].markerBackgroundSize+LINE_SPACINGS[size$1].markerMargin*2+markerLineWidth)/2;return Object.assign({},LINE_SPACINGS[size$1],{markerLeftAlignment:markerLeftAlignment,markerTopAlignment:markerTopAlignment});};var iconSizeTokens={medium:'small',large:'medium'};
 
 export { getMarkerLineSpacings, iconSizeTokens, markerLineWidth };
 //# sourceMappingURL=tokens.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"tokens.js","sources":["../../../../../src/components/StepGroup/tokens.ts"],"sourcesContent":["import type { StepGroupProps } from './types';\nimport { size as sizeTokens } from '~tokens/global';\n\nconst markerLineDotWidth = sizeTokens['2'];\nconst markerLineDotSpacing = sizeTokens['4'];\nconst markerLineWidth = sizeTokens['2'];\nconst itemTopMargin = sizeTokens['16'];\n\n/**\n * Returns the tokens that are related to marker line alignment and spacing\n */\nconst getMarkerLineSpacings = (\n  size: NonNullable<StepGroupProps['size']>,\n): {\n  markerLeftAlignment: number;\n  markerTopAlignment: number;\n  markerBackgroundSize: number;\n  markerMargin: number;\n  indentationWidth: number;\n} => {\n  const indentationWidth = sizeTokens['33'];\n\n  const LINE_SPACINGS = {\n    large: {\n      markerBackgroundSize: sizeTokens['24'],\n      markerMargin: sizeTokens['2'],\n      // eslint-disable-next-line @typescript-eslint/restrict-plus-operands\n    },\n    medium: {\n      markerBackgroundSize: sizeTokens['20'],\n      markerMargin: sizeTokens['2'],\n    },\n  } as const;\n\n  const markerLeftAlignment =\n    // eslint-disable-next-line @typescript-eslint/restrict-plus-operands\n    (LINE_SPACINGS[size].markerBackgroundSize + LINE_SPACINGS[size].markerMargin) / 2;\n\n  const markerTopAlignment =\n    (-1 *\n      // eslint-disable-next-line @typescript-eslint/restrict-plus-operands\n      (LINE_SPACINGS[size].markerBackgroundSize +\n        LINE_SPACINGS[size].markerMargin * 2 +\n        markerLineWidth)) /\n    2;\n  return {\n    ...LINE_SPACINGS[size],\n    markerLeftAlignment,\n    markerTopAlignment,\n    indentationWidth,\n  };\n};\n\nconst stepItemHeaderTokens = {\n  medium: {\n    title: 'medium',\n    description: 'small',\n    timestamp: 'small',\n  },\n  large: {\n    title: 'large',\n    description: 'medium',\n    timestamp: 'medium',\n  },\n} as const;\n\nconst iconSizeTokens = {\n  medium: 'small',\n  large: 'medium',\n} as const;\n\nconst itemLineGap = {\n  medium: 'spacing.2',\n  large: 'spacing.3',\n} as const;\n\nexport {\n  getMarkerLineSpacings,\n  stepItemHeaderTokens,\n  iconSizeTokens,\n  itemLineGap,\n  markerLineDotWidth,\n  markerLineDotSpacing,\n  markerLineWidth,\n  itemTopMargin,\n};\n"],"names":["markerLineWidth","sizeTokens","getMarkerLineSpacings","size","indentationWidth","LINE_SPACINGS","large","markerBackgroundSize","markerMargin","medium","markerLeftAlignment","markerTopAlignment","Object","assign","iconSizeTokens"],"mappings":";;;;AAKM,IAAAA,eAAe,CAAGC,IAAU,CAAC,GAAG,EAMhC,IAAAC,qBAAqB,CAAG,SAAxBA,qBAAqBA,CACzBC,MAAyC,CAOtC,CACH,IAAMC,gBAAgB,CAAGH,IAAU,CAAC,IAAI,CAAC,CAEzC,IAAMI,aAAa,CAAG,CACpBC,KAAK,CAAE,CACLC,oBAAoB,CAAEN,IAAU,CAAC,IAAI,CAAC,CACtCO,YAAY,CAAEP,IAAU,CAAC,GAAG,CAE9B,CAAC,CACDQ,MAAM,CAAE,CACNF,oBAAoB,CAAEN,IAAU,CAAC,IAAI,CAAC,CACtCO,YAAY,CAAEP,IAAU,CAAC,GAAG,CAC9B,CACF,CAAU,CAEV,IAAMS,mBAAmB,CAEvB,CAACL,aAAa,CAACF,MAAI,CAAC,CAACI,oBAAoB,CAAGF,aAAa,CAACF,MAAI,CAAC,CAACK,YAAY,EAAI,CAAC,CAEnF,IAAMG,kBAAkB,CACrB,CAAC,CAAC,EAEAN,aAAa,CAACF,MAAI,CAAC,CAACI,oBAAoB,CACvCF,aAAa,CAACF,MAAI,CAAC,CAACK,YAAY,CAAG,CAAC,CACpCR,eAAe,CAAC,CACpB,CAAC,CACH,OAAAY,MAAA,CAAAC,MAAA,CACKR,EAAAA,CAAAA,aAAa,CAACF,MAAI,CAAC,CAAA,CACtBO,mBAAmB,CAAnBA,mBAAmB,CACnBC,kBAAkB,CAAlBA,kBAAkB,CAClBP,gBAAgB,CAAhBA,gBAAgB,CAAA,CAAA,CAEpB,EAeM,IAAAU,cAAc,CAAG,CACrBL,MAAM,CAAE,OAAO,CACfH,KAAK,CAAE,QACT;;;;"}
+{"version":3,"file":"tokens.js","sources":["../../../../../src/components/StepGroup/tokens.ts"],"sourcesContent":["import type { StepGroupProps } from './types';\nimport { size as sizeTokens } from '~tokens/global';\n\nconst markerLineDotWidth = sizeTokens['2'];\nconst markerLineDotSpacing = sizeTokens['4'];\nconst markerLineWidth = sizeTokens['2'];\nconst itemTopMargin = sizeTokens['6'];\n\n/**\n * Returns the tokens that are related to marker line alignment and spacing\n */\nconst getMarkerLineSpacings = (\n  size: NonNullable<StepGroupProps['size']>,\n): {\n  markerLeftAlignment: number;\n  markerTopAlignment: number;\n  markerBackgroundSize: number;\n  markerMargin: number;\n  indentationWidth: number;\n} => {\n  const LINE_SPACINGS = {\n    large: {\n      markerBackgroundSize: sizeTokens['24'],\n      markerMargin: sizeTokens['2'],\n      indentationWidth: sizeTokens['33'],\n      // eslint-disable-next-line @typescript-eslint/restrict-plus-operands\n    },\n    medium: {\n      markerBackgroundSize: sizeTokens['20'],\n      markerMargin: sizeTokens['2'],\n      indentationWidth: sizeTokens['31'],\n    },\n  } as const;\n\n  const markerLeftAlignment =\n    // eslint-disable-next-line @typescript-eslint/restrict-plus-operands\n    (LINE_SPACINGS[size].markerBackgroundSize + LINE_SPACINGS[size].markerMargin) / 2;\n\n  const markerTopAlignment =\n    (-1 *\n      // eslint-disable-next-line @typescript-eslint/restrict-plus-operands\n      (LINE_SPACINGS[size].markerBackgroundSize +\n        LINE_SPACINGS[size].markerMargin * 2 +\n        markerLineWidth)) /\n    2;\n  return {\n    ...LINE_SPACINGS[size],\n    markerLeftAlignment,\n    markerTopAlignment,\n  };\n};\n\nconst stepItemHeaderTokens = {\n  medium: {\n    title: 'medium',\n    description: 'small',\n    timestamp: 'small',\n  },\n  large: {\n    title: 'large',\n    description: 'medium',\n    timestamp: 'medium',\n  },\n} as const;\n\nconst iconSizeTokens = {\n  medium: 'small',\n  large: 'medium',\n} as const;\n\nconst itemLineGap = {\n  medium: 'spacing.2',\n  large: 'spacing.3',\n} as const;\n\nexport {\n  getMarkerLineSpacings,\n  stepItemHeaderTokens,\n  iconSizeTokens,\n  itemLineGap,\n  markerLineDotWidth,\n  markerLineDotSpacing,\n  markerLineWidth,\n  itemTopMargin,\n};\n"],"names":["markerLineWidth","sizeTokens","getMarkerLineSpacings","size","LINE_SPACINGS","large","markerBackgroundSize","markerMargin","indentationWidth","medium","markerLeftAlignment","markerTopAlignment","Object","assign","iconSizeTokens"],"mappings":";;;;AAKM,IAAAA,eAAe,CAAGC,IAAU,CAAC,GAAG,EAMhC,IAAAC,qBAAqB,CAAG,SAAxBA,qBAAqBA,CACzBC,MAAyC,CAOtC,CACH,IAAMC,aAAa,CAAG,CACpBC,KAAK,CAAE,CACLC,oBAAoB,CAAEL,IAAU,CAAC,IAAI,CAAC,CACtCM,YAAY,CAAEN,IAAU,CAAC,GAAG,CAAC,CAC7BO,gBAAgB,CAAEP,IAAU,CAAC,IAAI,CAEnC,CAAC,CACDQ,MAAM,CAAE,CACNH,oBAAoB,CAAEL,IAAU,CAAC,IAAI,CAAC,CACtCM,YAAY,CAAEN,IAAU,CAAC,GAAG,CAAC,CAC7BO,gBAAgB,CAAEP,IAAU,CAAC,IAAI,CACnC,CACF,CAAU,CAEV,IAAMS,mBAAmB,CAEvB,CAACN,aAAa,CAACD,MAAI,CAAC,CAACG,oBAAoB,CAAGF,aAAa,CAACD,MAAI,CAAC,CAACI,YAAY,EAAI,CAAC,CAEnF,IAAMI,kBAAkB,CACrB,CAAC,CAAC,EAEAP,aAAa,CAACD,MAAI,CAAC,CAACG,oBAAoB,CACvCF,aAAa,CAACD,MAAI,CAAC,CAACI,YAAY,CAAG,CAAC,CACpCP,eAAe,CAAC,CACpB,CAAC,CACH,OAAAY,MAAA,CAAAC,MAAA,CACKT,EAAAA,CAAAA,aAAa,CAACD,MAAI,CAAC,CAAA,CACtBO,mBAAmB,CAAnBA,mBAAmB,CACnBC,kBAAkB,CAAlBA,kBAAkB,CAAA,CAAA,CAEtB,EAeM,IAAAG,cAAc,CAAG,CACrBL,MAAM,CAAE,OAAO,CACfJ,KAAK,CAAE,QACT;;;;"}

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

@@ -25,8 +25,9 @@ import { assignWithoutSideEffects } from '../../utils/assignWithoutSideEffects/a
 import { getStyledProps } from '../Box/styledProps/getStyledProps.js';
 import '../../tokens/global/typography.js';
 import '../../tokens/global/motion.js';
+import { makeAnalyticsAttribute } from '../../utils/makeAnalyticsAttribute/makeAnalyticsAttribute.js';
 
-var _excluded=["defaultChecked","isChecked","isDisabled","name","onChange","size","value","accessibilityLabel","testID"];var _Switch=function _Switch(_ref,ref){var defaultChecked=_ref.defaultChecked,isChecked=_ref.isChecked,isDisabled=_ref.isDisabled,name=_ref.name,onChange=_ref.onChange,_ref$size=_ref.size,size=_ref$size===void 0?'medium':_ref$size,value=_ref.value,accessibilityLabel=_ref.accessibilityLabel,testID=_ref.testID,styledProps=_objectWithoutProperties(_ref,_excluded);var _useTheme=useTheme(),theme=_useTheme.theme;var _useBreakpoint=useBreakpoint({breakpoints:theme.breakpoints}),matchedDeviceType=_useBreakpoint.matchedDeviceType;var _React$useState=React__default.useState(false),_React$useState2=_slicedToArray(_React$useState,2),isPressed=_React$useState2[0],setIsPressed=_React$useState2[1];var _useCheckbox=useCheckbox({role:'switch',defaultChecked:defaultChecked,isChecked:isChecked,isIndeterminate:false,hasError:false,hasHelperText:false,isDisabled:isDisabled,isRequired:false,name:name,value:value,onChange:onChange}),state=_useCheckbox.state,inputProps=_useCheckbox.inputProps;var handlePointerPressedIn=React__default.useCallback(function(){if(isDisabled)return;setIsPressed(true);},[isDisabled]);var handlePointerPressedOut=React__default.useCallback(function(){if(isDisabled)return;setIsPressed(false);},[isDisabled]);var handleKeyboardPressedIn=React__default.useCallback(function(e){if(isDisabled)return;if(e.key===' '){setIsPressed(true);}},[isDisabled]);var handleKeyboardPressedOut=React__default.useCallback(function(e){if(isDisabled)return;if(e.key===' '){setIsPressed(false);}},[isDisabled]);return jsx(BaseBox,Object.assign({},metaAttribute({testID:testID,name:MetaConstants.Switch}),{display:state.isReactNative?'flex':'inline-block'},getStyledProps(styledProps),{children:jsxs(SelectorLabel,{componentName:MetaConstants.SwitchLabel,onTouchStart:handlePointerPressedIn,onTouchEnd:handlePointerPressedOut,onMouseDown:handlePointerPressedIn,onMouseUp:handlePointerPressedOut,onMouseOut:handlePointerPressedOut,onKeyDown:handleKeyboardPressedIn,onKeyUp:handleKeyboardPressedOut,style:{cursor:isDisabled?'not-allowed':'pointer'},inputProps:state.isReactNative?Object.assign({},inputProps,makeAccessible({label:accessibilityLabel})):{},children:[jsx(SelectorInput,{hoverTokens:switchHoverTokens,ref:ref,isChecked:state.isChecked,isDisabled:isDisabled,hasError:false,inputProps:inputProps,accessibilityLabel:accessibilityLabel}),jsx(SwitchTrack,Object.assign({size:size,deviceType:matchedDeviceType,isDisabled:Boolean(isDisabled),isChecked:state.isChecked},makeAccessible({hidden:true}),{children:jsx(Thumb,{size:size,deviceType:matchedDeviceType,isChecked:state.isChecked,children:jsx(AnimatedThumb,{isPressed:isPressed,isChecked:state.isChecked,isDisabled:isDisabled,size:size,children:jsx(ThumbIcon,{isChecked:state.isChecked,isDisabled:isDisabled,size:size})})})}))]})}));};var Switch=assignWithoutSideEffects(React__default.forwardRef(_Switch),{displayName:'Switch'});
+var _excluded=["defaultChecked","isChecked","isDisabled","name","onChange","size","value","accessibilityLabel","testID"];var _Switch=function _Switch(_ref,ref){var defaultChecked=_ref.defaultChecked,isChecked=_ref.isChecked,isDisabled=_ref.isDisabled,name=_ref.name,onChange=_ref.onChange,_ref$size=_ref.size,size=_ref$size===void 0?'medium':_ref$size,value=_ref.value,accessibilityLabel=_ref.accessibilityLabel,testID=_ref.testID,rest=_objectWithoutProperties(_ref,_excluded);var _useTheme=useTheme(),theme=_useTheme.theme;var _useBreakpoint=useBreakpoint({breakpoints:theme.breakpoints}),matchedDeviceType=_useBreakpoint.matchedDeviceType;var _React$useState=React__default.useState(false),_React$useState2=_slicedToArray(_React$useState,2),isPressed=_React$useState2[0],setIsPressed=_React$useState2[1];var _useCheckbox=useCheckbox({role:'switch',defaultChecked:defaultChecked,isChecked:isChecked,isIndeterminate:false,hasError:false,hasHelperText:false,isDisabled:isDisabled,isRequired:false,name:name,value:value,onChange:onChange}),state=_useCheckbox.state,inputProps=_useCheckbox.inputProps;var handlePointerPressedIn=React__default.useCallback(function(){if(isDisabled)return;setIsPressed(true);},[isDisabled]);var handlePointerPressedOut=React__default.useCallback(function(){if(isDisabled)return;setIsPressed(false);},[isDisabled]);var handleKeyboardPressedIn=React__default.useCallback(function(e){if(isDisabled)return;if(e.key===' '){setIsPressed(true);}},[isDisabled]);var handleKeyboardPressedOut=React__default.useCallback(function(e){if(isDisabled)return;if(e.key===' '){setIsPressed(false);}},[isDisabled]);return jsx(BaseBox,Object.assign({},metaAttribute({testID:testID,name:MetaConstants.Switch}),{display:state.isReactNative?'flex':'inline-block'},getStyledProps(rest),makeAnalyticsAttribute(rest),{children:jsxs(SelectorLabel,{componentName:MetaConstants.SwitchLabel,onTouchStart:handlePointerPressedIn,onTouchEnd:handlePointerPressedOut,onMouseDown:handlePointerPressedIn,onMouseUp:handlePointerPressedOut,onMouseOut:handlePointerPressedOut,onKeyDown:handleKeyboardPressedIn,onKeyUp:handleKeyboardPressedOut,style:{cursor:isDisabled?'not-allowed':'pointer'},inputProps:state.isReactNative?Object.assign({},inputProps,makeAccessible({label:accessibilityLabel})):{},children:[jsx(SelectorInput,{hoverTokens:switchHoverTokens,ref:ref,isChecked:state.isChecked,isDisabled:isDisabled,hasError:false,inputProps:inputProps,accessibilityLabel:accessibilityLabel}),jsx(SwitchTrack,Object.assign({size:size,deviceType:matchedDeviceType,isDisabled:Boolean(isDisabled),isChecked:state.isChecked},makeAccessible({hidden:true}),{children:jsx(Thumb,{size:size,deviceType:matchedDeviceType,isChecked:state.isChecked,children:jsx(AnimatedThumb,{isPressed:isPressed,isChecked:state.isChecked,isDisabled:isDisabled,size:size,children:jsx(ThumbIcon,{isChecked:state.isChecked,isDisabled:isDisabled,size:size})})})}))]})}));};var Switch=assignWithoutSideEffects(React__default.forwardRef(_Switch),{displayName:'Switch'});
 
 export { Switch };
 //# sourceMappingURL=Switch.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Switch.js","sources":["../../../../../src/components/Switch/Switch.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/ban-ts-comment */\n/* eslint-disable @typescript-eslint/prefer-ts-expect-error */\nimport React from 'react';\nimport { ThumbIcon } from './ThumbIcon';\nimport type { SwitchProps } from './types';\nimport { switchHoverTokens } from './switchTokens';\nimport { Thumb } from './Thumb';\nimport { AnimatedThumb } from './AnimatedThumb';\nimport { SwitchTrack } from './SwitchTrack';\nimport { useTheme } from '~components/BladeProvider';\nimport { BaseBox } from '~components/Box/BaseBox';\nimport { useCheckbox } from '~components/Checkbox/useCheckbox';\nimport { SelectorInput } from '~components/Form/Selector/SelectorInput';\nimport { useBreakpoint } from '~utils';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { SelectorLabel } from '~components/Form/Selector/SelectorLabel';\nimport type { BladeElementRef } from '~utils/types';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { getStyledProps } from '~components/Box/styledProps';\n\nconst _Switch: React.ForwardRefRenderFunction<BladeElementRef, SwitchProps> = (\n  {\n    defaultChecked,\n    isChecked,\n    isDisabled,\n    name,\n    onChange,\n    size = 'medium',\n    value,\n    accessibilityLabel,\n    testID,\n    ...styledProps\n  },\n  ref,\n): React.ReactElement => {\n  const { theme } = useTheme();\n  const { matchedDeviceType } = useBreakpoint({ breakpoints: theme.breakpoints });\n  const [isPressed, setIsPressed] = React.useState(false);\n  const { state, inputProps } = useCheckbox({\n    role: 'switch',\n    defaultChecked,\n    isChecked,\n    isIndeterminate: false,\n    hasError: false,\n    hasHelperText: false,\n    isDisabled,\n    isRequired: false,\n    name,\n    value,\n    onChange,\n  });\n\n  const handlePointerPressedIn = React.useCallback(() => {\n    if (isDisabled) return;\n    setIsPressed(true);\n  }, [isDisabled]);\n\n  const handlePointerPressedOut = React.useCallback(() => {\n    if (isDisabled) return;\n    setIsPressed(false);\n  }, [isDisabled]);\n\n  const handleKeyboardPressedIn = React.useCallback(\n    (e: React.KeyboardEvent) => {\n      if (isDisabled) return;\n      if (e.key === ' ') {\n        setIsPressed(true);\n      }\n    },\n    [isDisabled],\n  );\n\n  const handleKeyboardPressedOut = React.useCallback(\n    (e: React.KeyboardEvent) => {\n      if (isDisabled) return;\n      if (e.key === ' ') {\n        setIsPressed(false);\n      }\n    },\n    [isDisabled],\n  );\n\n  return (\n    <BaseBox\n      {...metaAttribute({ testID, name: MetaConstants.Switch })}\n      // @ts-ignore on rn inline-block is not valid but type here will be `flex | inline-block`\n      display={state.isReactNative ? 'flex' : 'inline-block'}\n      {...getStyledProps(styledProps)}\n    >\n      <SelectorLabel\n        componentName={MetaConstants.SwitchLabel}\n        onTouchStart={handlePointerPressedIn}\n        onTouchEnd={handlePointerPressedOut}\n        onMouseDown={handlePointerPressedIn}\n        onMouseUp={handlePointerPressedOut}\n        onMouseOut={handlePointerPressedOut}\n        onKeyDown={handleKeyboardPressedIn}\n        onKeyUp={handleKeyboardPressedOut}\n        style={{ cursor: isDisabled ? 'not-allowed' : 'pointer' }}\n        inputProps={\n          state.isReactNative\n            ? // accessibility label for react-native needs to be added\n              // since there is no text children inside Switch\n              { ...inputProps, ...makeAccessible({ label: accessibilityLabel }) }\n            : {}\n        }\n      >\n        <SelectorInput\n          hoverTokens={switchHoverTokens}\n          ref={ref}\n          isChecked={state.isChecked}\n          isDisabled={isDisabled}\n          hasError={false}\n          inputProps={inputProps}\n          accessibilityLabel={accessibilityLabel}\n        />\n        <SwitchTrack\n          size={size}\n          deviceType={matchedDeviceType}\n          isDisabled={Boolean(isDisabled)}\n          isChecked={state.isChecked}\n          {...makeAccessible({ hidden: true })}\n        >\n          <Thumb size={size} deviceType={matchedDeviceType} isChecked={state.isChecked}>\n            <AnimatedThumb\n              isPressed={isPressed}\n              isChecked={state.isChecked}\n              isDisabled={isDisabled}\n              size={size}\n            >\n              <ThumbIcon isChecked={state.isChecked} isDisabled={isDisabled} size={size} />\n            </AnimatedThumb>\n          </Thumb>\n        </SwitchTrack>\n      </SelectorLabel>\n    </BaseBox>\n  );\n};\n\nconst Switch = assignWithoutSideEffects(React.forwardRef(_Switch), {\n  displayName: 'Switch',\n});\n\nexport { Switch };\n"],"names":["_Switch","_ref","ref","defaultChecked","isChecked","isDisabled","name","onChange","_ref$size","size","value","accessibilityLabel","testID","styledProps","_objectWithoutProperties","_excluded","_useTheme","useTheme","theme","_useBreakpoint","useBreakpoint","breakpoints","matchedDeviceType","_React$useState","React","useState","_React$useState2","_slicedToArray","isPressed","setIsPressed","_useCheckbox","useCheckbox","role","isIndeterminate","hasError","hasHelperText","isRequired","state","inputProps","handlePointerPressedIn","useCallback","handlePointerPressedOut","handleKeyboardPressedIn","e","key","handleKeyboardPressedOut","_jsx","BaseBox","Object","assign","metaAttribute","MetaConstants","Switch","display","isReactNative","getStyledProps","children","_jsxs","SelectorLabel","componentName","SwitchLabel","onTouchStart","onTouchEnd","onMouseDown","onMouseUp","onMouseOut","onKeyDown","onKeyUp","style","cursor","makeAccessible","label","SelectorInput","hoverTokens","switchHoverTokens","SwitchTrack","deviceType","Boolean","hidden","Thumb","AnimatedThumb","ThumbIcon","assignWithoutSideEffects","forwardRef","displayName"],"mappings":"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"}
+{"version":3,"file":"Switch.js","sources":["../../../../../src/components/Switch/Switch.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/ban-ts-comment */\n/* eslint-disable @typescript-eslint/prefer-ts-expect-error */\nimport React from 'react';\nimport { ThumbIcon } from './ThumbIcon';\nimport type { SwitchProps } from './types';\nimport { switchHoverTokens } from './switchTokens';\nimport { Thumb } from './Thumb';\nimport { AnimatedThumb } from './AnimatedThumb';\nimport { SwitchTrack } from './SwitchTrack';\nimport { useTheme } from '~components/BladeProvider';\nimport { BaseBox } from '~components/Box/BaseBox';\nimport { useCheckbox } from '~components/Checkbox/useCheckbox';\nimport { SelectorInput } from '~components/Form/Selector/SelectorInput';\nimport { useBreakpoint } from '~utils';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { SelectorLabel } from '~components/Form/Selector/SelectorLabel';\nimport type { BladeElementRef } from '~utils/types';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\n\nconst _Switch: React.ForwardRefRenderFunction<BladeElementRef, SwitchProps> = (\n  {\n    defaultChecked,\n    isChecked,\n    isDisabled,\n    name,\n    onChange,\n    size = 'medium',\n    value,\n    accessibilityLabel,\n    testID,\n    ...rest\n  },\n  ref,\n): React.ReactElement => {\n  const { theme } = useTheme();\n  const { matchedDeviceType } = useBreakpoint({ breakpoints: theme.breakpoints });\n  const [isPressed, setIsPressed] = React.useState(false);\n  const { state, inputProps } = useCheckbox({\n    role: 'switch',\n    defaultChecked,\n    isChecked,\n    isIndeterminate: false,\n    hasError: false,\n    hasHelperText: false,\n    isDisabled,\n    isRequired: false,\n    name,\n    value,\n    onChange,\n  });\n\n  const handlePointerPressedIn = React.useCallback(() => {\n    if (isDisabled) return;\n    setIsPressed(true);\n  }, [isDisabled]);\n\n  const handlePointerPressedOut = React.useCallback(() => {\n    if (isDisabled) return;\n    setIsPressed(false);\n  }, [isDisabled]);\n\n  const handleKeyboardPressedIn = React.useCallback(\n    (e: React.KeyboardEvent) => {\n      if (isDisabled) return;\n      if (e.key === ' ') {\n        setIsPressed(true);\n      }\n    },\n    [isDisabled],\n  );\n\n  const handleKeyboardPressedOut = React.useCallback(\n    (e: React.KeyboardEvent) => {\n      if (isDisabled) return;\n      if (e.key === ' ') {\n        setIsPressed(false);\n      }\n    },\n    [isDisabled],\n  );\n\n  return (\n    <BaseBox\n      {...metaAttribute({ testID, name: MetaConstants.Switch })}\n      // @ts-ignore on rn inline-block is not valid but type here will be `flex | inline-block`\n      display={state.isReactNative ? 'flex' : 'inline-block'}\n      {...getStyledProps(rest)}\n      {...makeAnalyticsAttribute(rest)}\n    >\n      <SelectorLabel\n        componentName={MetaConstants.SwitchLabel}\n        onTouchStart={handlePointerPressedIn}\n        onTouchEnd={handlePointerPressedOut}\n        onMouseDown={handlePointerPressedIn}\n        onMouseUp={handlePointerPressedOut}\n        onMouseOut={handlePointerPressedOut}\n        onKeyDown={handleKeyboardPressedIn}\n        onKeyUp={handleKeyboardPressedOut}\n        style={{ cursor: isDisabled ? 'not-allowed' : 'pointer' }}\n        inputProps={\n          state.isReactNative\n            ? // accessibility label for react-native needs to be added\n              // since there is no text children inside Switch\n              { ...inputProps, ...makeAccessible({ label: accessibilityLabel }) }\n            : {}\n        }\n      >\n        <SelectorInput\n          hoverTokens={switchHoverTokens}\n          ref={ref}\n          isChecked={state.isChecked}\n          isDisabled={isDisabled}\n          hasError={false}\n          inputProps={inputProps}\n          accessibilityLabel={accessibilityLabel}\n        />\n        <SwitchTrack\n          size={size}\n          deviceType={matchedDeviceType}\n          isDisabled={Boolean(isDisabled)}\n          isChecked={state.isChecked}\n          {...makeAccessible({ hidden: true })}\n        >\n          <Thumb size={size} deviceType={matchedDeviceType} isChecked={state.isChecked}>\n            <AnimatedThumb\n              isPressed={isPressed}\n              isChecked={state.isChecked}\n              isDisabled={isDisabled}\n              size={size}\n            >\n              <ThumbIcon isChecked={state.isChecked} isDisabled={isDisabled} size={size} />\n            </AnimatedThumb>\n          </Thumb>\n        </SwitchTrack>\n      </SelectorLabel>\n    </BaseBox>\n  );\n};\n\nconst Switch = assignWithoutSideEffects(React.forwardRef(_Switch), {\n  displayName: 'Switch',\n});\n\nexport { Switch };\n"],"names":["_Switch","_ref","ref","defaultChecked","isChecked","isDisabled","name","onChange","_ref$size","size","value","accessibilityLabel","testID","rest","_objectWithoutProperties","_excluded","_useTheme","useTheme","theme","_useBreakpoint","useBreakpoint","breakpoints","matchedDeviceType","_React$useState","React","useState","_React$useState2","_slicedToArray","isPressed","setIsPressed","_useCheckbox","useCheckbox","role","isIndeterminate","hasError","hasHelperText","isRequired","state","inputProps","handlePointerPressedIn","useCallback","handlePointerPressedOut","handleKeyboardPressedIn","e","key","handleKeyboardPressedOut","_jsx","BaseBox","Object","assign","metaAttribute","MetaConstants","Switch","display","isReactNative","getStyledProps","makeAnalyticsAttribute","children","_jsxs","SelectorLabel","componentName","SwitchLabel","onTouchStart","onTouchEnd","onMouseDown","onMouseUp","onMouseOut","onKeyDown","onKeyUp","style","cursor","makeAccessible","label","SelectorInput","hoverTokens","switchHoverTokens","SwitchTrack","deviceType","Boolean","hidden","Thumb","AnimatedThumb","ThumbIcon","assignWithoutSideEffects","forwardRef","displayName"],"mappings":"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"}

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

@@ -26,8 +26,9 @@ import { Text } from '../Typography/Text/Text.js';
 import '../Typography/Code/Code.js';
 import { BaseBox } from '../Box/BaseBox/BaseBox.native.js';
 import { useIsMobile } from '../../utils/useIsMobile.js';
+import { makeAnalyticsAttribute } from '../../utils/makeAnalyticsAttribute/makeAnalyticsAttribute.js';
 
-var _excluded=["size","icon","onDismiss","children","isDisabled","testID","_isVirtuallyFocused","_isTagInsideInput"];var FocussableTag=styled(BaseBox)(function(props){if(props._isVirtuallyFocused&&!isReactNative()){return {outline:`${makeSize(size['1'])} solid ${props.theme.colors.surface.background.gray.subtle}`,boxShadow:`0px 0px 0px 4px ${props.theme.colors.interactive.background.primary.faded}`};}return {};});var Tag=function Tag(_ref){var _ref$size=_ref.size,size=_ref$size===void 0?'medium':_ref$size,Icon=_ref.icon,onDismiss=_ref.onDismiss,children=_ref.children,isDisabled=_ref.isDisabled,testID=_ref.testID,_isVirtuallyFocused=_ref._isVirtuallyFocused,_isTagInsideInput=_ref._isTagInsideInput,styledProps=_objectWithoutProperties(_ref,_excluded);var isMobile=useIsMobile();var textColor=isDisabled?'interactive.text.gray.disabled':'interactive.text.gray.subtle';var iconColor=isDisabled?'interactive.icon.gray.disabled':'interactive.icon.gray.muted';var backgroundColor=isDisabled?'interactive.background.gray.disabled':'interactive.background.gray.default';var mediumPadding={base:['spacing.2','spacing.3','spacing.2','spacing.4'],m:['spacing.1','spacing.2','spacing.1','spacing.3']};var largePadding={base:['spacing.2','spacing.3','spacing.2','spacing.4'],m:['spacing.2','spacing.3','spacing.2','spacing.4']};var assetSize=React__default.useMemo(function(){if(isMobile&&size==='large'){return 'medium';}return 'small';},[isMobile,size]);return jsx(BaseBox,Object.assign({display:isReactNative()?'flex':'inline-flex'},getStyledProps(styledProps),metaAttribute({name:MetaConstants.Tag,testID:testID}),{children:jsxs(FocussableTag,{display:isReactNative()?'flex':'inline-flex',alignSelf:isReactNative()?'center':undefined,flexDirection:"row",flexWrap:"nowrap",flexShrink:0,backgroundColor:backgroundColor,borderRadius:"max",padding:size==='medium'?mediumPadding:largePadding,_isVirtuallyFocused:_isVirtuallyFocused,children:[Icon?jsx(Box,{display:"flex",flexDirection:"row",alignItems:"center",children:jsx(Icon,{color:iconColor,size:assetSize,marginRight:"spacing.2"})}):null,jsx(Box,{display:"flex",flexDirection:"row",children:jsx(Text,{textAlign:"center",truncateAfterLines:1,marginRight:"spacing.2",color:textColor,size:"small",children:children})}),jsx(Box,{display:"flex",flexDirection:"row",alignItems:"center",justifyContent:"center",children:jsx(IconButton,{size:assetSize,icon:CloseIcon,accessibilityLabel:`Close ${children} tag`,isDisabled:isDisabled,_tabIndex:_isTagInsideInput?-1:undefined,onClick:function onClick(e){if(_isTagInsideInput){e.stopPropagation();}onDismiss();}})})]})}));};
+var _excluded=["size","icon","onDismiss","children","isDisabled","testID","_isVirtuallyFocused","_isTagInsideInput"];var FocussableTag=styled(BaseBox)(function(props){if(props._isVirtuallyFocused&&!isReactNative()){return {outline:`${makeSize(size['1'])} solid ${props.theme.colors.surface.background.gray.subtle}`,boxShadow:`0px 0px 0px 4px ${props.theme.colors.interactive.background.primary.faded}`};}return {};});var Tag=function Tag(_ref){var _ref$size=_ref.size,size=_ref$size===void 0?'medium':_ref$size,Icon=_ref.icon,onDismiss=_ref.onDismiss,children=_ref.children,isDisabled=_ref.isDisabled,testID=_ref.testID,_isVirtuallyFocused=_ref._isVirtuallyFocused,_isTagInsideInput=_ref._isTagInsideInput,rest=_objectWithoutProperties(_ref,_excluded);var isMobile=useIsMobile();var textColor=isDisabled?'interactive.text.gray.disabled':'interactive.text.gray.subtle';var iconColor=isDisabled?'interactive.icon.gray.disabled':'interactive.icon.gray.muted';var backgroundColor=isDisabled?'interactive.background.gray.disabled':'interactive.background.gray.default';var mediumPadding={base:['spacing.2','spacing.3','spacing.2','spacing.4'],m:['spacing.1','spacing.2','spacing.1','spacing.3']};var largePadding={base:['spacing.2','spacing.3','spacing.2','spacing.4'],m:['spacing.2','spacing.3','spacing.2','spacing.4']};var assetSize=React__default.useMemo(function(){if(isMobile&&size==='large'){return 'medium';}return 'small';},[isMobile,size]);return jsx(BaseBox,Object.assign({display:isReactNative()?'flex':'inline-flex'},getStyledProps(rest),metaAttribute({name:MetaConstants.Tag,testID:testID}),makeAnalyticsAttribute(rest),{children:jsxs(FocussableTag,{display:isReactNative()?'flex':'inline-flex',alignSelf:isReactNative()?'center':undefined,flexDirection:"row",flexWrap:"nowrap",flexShrink:0,backgroundColor:backgroundColor,borderRadius:"max",padding:size==='medium'?mediumPadding:largePadding,_isVirtuallyFocused:_isVirtuallyFocused,children:[Icon?jsx(Box,{display:"flex",flexDirection:"row",alignItems:"center",children:jsx(Icon,{color:iconColor,size:assetSize,marginRight:"spacing.2"})}):null,jsx(Box,{display:"flex",flexDirection:"row",children:jsx(Text,{textAlign:"center",truncateAfterLines:1,marginRight:"spacing.2",color:textColor,size:"small",children:children})}),jsx(Box,{display:"flex",flexDirection:"row",alignItems:"center",justifyContent:"center",children:jsx(IconButton,{size:assetSize,icon:CloseIcon,accessibilityLabel:`Close ${children} tag`,isDisabled:isDisabled,_tabIndex:_isTagInsideInput?-1:undefined,onClick:function onClick(e){if(_isTagInsideInput){e.stopPropagation();}onDismiss();}})})]})}));};
 
 export { Tag };
 //# sourceMappingURL=Tag.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Tag.js","sources":["../../../../../src/components/Tag/Tag.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport type { TagProps } from './types';\nimport { Box } from '~components/Box';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport { IconButton } from '~components/Button/IconButton';\nimport { CloseIcon } from '~components/Icons';\nimport { Text } from '~components/Typography';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { isReactNative, makeSize } from '~utils';\nimport { size as globalSizeTokens } from '~tokens/global';\nimport BaseBox from '~components/Box/BaseBox';\nimport type { PaddingProps } from '~components/Box/BaseBox/types/spacingTypes';\nimport { useIsMobile } from '~utils/useIsMobile';\n\nconst FocussableTag = styled(BaseBox)<{ _isVirtuallyFocused: TagProps['_isVirtuallyFocused'] }>(\n  (props) => {\n    if (props._isVirtuallyFocused && !isReactNative()) {\n      return {\n        outline: `${makeSize(globalSizeTokens['1'])} solid ${\n          props.theme.colors.surface.background.gray.subtle\n        }`,\n        boxShadow: `0px 0px 0px 4px ${props.theme.colors.interactive.background.primary.faded}`,\n      };\n    }\n\n    return {};\n  },\n);\n\n/**\n * ## Tags\n *\n * Tag component can be used to display selected items on UI.\n *\n * ### Usage\n *\n * ***Note:*** _Make sure to handle state when using Tag_\n *\n * ```jsx\n * const [showTag, setShowTag] = React.useState(true);\n *\n * // ...\n *\n * {showTag && (\n *  <Tag\n *    icon={CheckIcon}\n *    onDismiss={() => setShowTag(false)}\n *  >\n *    Transactions\n *  </Tag>\n * )}\n * ```\n *\n * Checkout [Tags Documentation](https://blade.razorpay.com/?path=/story/components-tag--default) for more info.\n *\n */\nconst Tag = ({\n  size = 'medium',\n  icon: Icon,\n  onDismiss,\n  children,\n  isDisabled,\n  testID,\n  _isVirtuallyFocused,\n  _isTagInsideInput,\n  ...styledProps\n}: TagProps): React.ReactElement | null => {\n  const isMobile = useIsMobile();\n\n  const textColor = isDisabled ? 'interactive.text.gray.disabled' : 'interactive.text.gray.subtle';\n  const iconColor = isDisabled ? 'interactive.icon.gray.disabled' : 'interactive.icon.gray.muted';\n  const backgroundColor = isDisabled\n    ? 'interactive.background.gray.disabled'\n    : 'interactive.background.gray.default';\n\n  const mediumPadding: PaddingProps['padding'] = {\n    base: ['spacing.2', 'spacing.3', 'spacing.2', 'spacing.4'],\n    m: ['spacing.1', 'spacing.2', 'spacing.1', 'spacing.3'],\n  };\n\n  const largePadding: PaddingProps['padding'] = {\n    base: ['spacing.2', 'spacing.3', 'spacing.2', 'spacing.4'],\n    m: ['spacing.2', 'spacing.3', 'spacing.2', 'spacing.4'],\n  };\n\n  const assetSize = React.useMemo((): 'small' | 'medium' => {\n    if (isMobile && size === 'large') {\n      return 'medium';\n    }\n\n    return 'small';\n  }, [isMobile, size]);\n\n  return (\n    <BaseBox\n      display={(isReactNative() ? 'flex' : 'inline-flex') as never}\n      {...getStyledProps(styledProps)}\n      {...metaAttribute({ name: MetaConstants.Tag, testID })}\n    >\n      <FocussableTag\n        display={(isReactNative() ? 'flex' : 'inline-flex') as never}\n        alignSelf={isReactNative() ? 'center' : undefined}\n        flexDirection=\"row\"\n        flexWrap=\"nowrap\"\n        flexShrink={0}\n        backgroundColor={backgroundColor}\n        borderRadius=\"max\"\n        padding={size === 'medium' ? mediumPadding : largePadding}\n        _isVirtuallyFocused={_isVirtuallyFocused}\n      >\n        {/* Leading Icon */}\n        {Icon ? (\n          <Box display=\"flex\" flexDirection=\"row\" alignItems=\"center\">\n            <Icon color={iconColor} size={assetSize} marginRight=\"spacing.2\" />\n          </Box>\n        ) : null}\n\n        {/* Tag Text */}\n        <Box display=\"flex\" flexDirection=\"row\">\n          <Text\n            textAlign=\"center\"\n            truncateAfterLines={1}\n            marginRight=\"spacing.2\"\n            color={textColor}\n            size=\"small\"\n          >\n            {children}\n          </Text>\n        </Box>\n\n        {/* Dismiss Icon */}\n        <Box display=\"flex\" flexDirection=\"row\" alignItems=\"center\" justifyContent=\"center\">\n          <IconButton\n            size={assetSize}\n            icon={CloseIcon}\n            accessibilityLabel={`Close ${children} tag`}\n            isDisabled={isDisabled}\n            _tabIndex={_isTagInsideInput ? -1 : undefined}\n            onClick={(e) => {\n              // Inside tag input, we stop propagation to avoid opening dropdown on click of close on tag\n              if (_isTagInsideInput) {\n                e.stopPropagation();\n              }\n              onDismiss();\n            }}\n          />\n        </Box>\n      </FocussableTag>\n    </BaseBox>\n  );\n};\n\nexport { Tag };\n"],"names":["FocussableTag","styled","BaseBox","props","_isVirtuallyFocused","isReactNative","outline","makeSize","globalSizeTokens","theme","colors","surface","background","gray","subtle","boxShadow","interactive","primary","faded","Tag","_ref","_ref$size","size","Icon","icon","onDismiss","children","isDisabled","testID","_isTagInsideInput","styledProps","_objectWithoutProperties","_excluded","isMobile","useIsMobile","textColor","iconColor","backgroundColor","mediumPadding","base","m","largePadding","assetSize","React","useMemo","_jsx","Object","assign","display","getStyledProps","metaAttribute","name","MetaConstants","_jsxs","alignSelf","undefined","flexDirection","flexWrap","flexShrink","borderRadius","padding","Box","alignItems","color","marginRight","Text","textAlign","truncateAfterLines","justifyContent","IconButton","CloseIcon","accessibilityLabel","_tabIndex","onClick","e","stopPropagation"],"mappings":"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"}
+{"version":3,"file":"Tag.js","sources":["../../../../../src/components/Tag/Tag.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport type { TagProps } from './types';\nimport { Box } from '~components/Box';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport { IconButton } from '~components/Button/IconButton';\nimport { CloseIcon } from '~components/Icons';\nimport { Text } from '~components/Typography';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { isReactNative, makeSize } from '~utils';\nimport { size as globalSizeTokens } from '~tokens/global';\nimport BaseBox from '~components/Box/BaseBox';\nimport type { PaddingProps } from '~components/Box/BaseBox/types/spacingTypes';\nimport { useIsMobile } from '~utils/useIsMobile';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\n\nconst FocussableTag = styled(BaseBox)<{ _isVirtuallyFocused: TagProps['_isVirtuallyFocused'] }>(\n  (props) => {\n    if (props._isVirtuallyFocused && !isReactNative()) {\n      return {\n        outline: `${makeSize(globalSizeTokens['1'])} solid ${\n          props.theme.colors.surface.background.gray.subtle\n        }`,\n        boxShadow: `0px 0px 0px 4px ${props.theme.colors.interactive.background.primary.faded}`,\n      };\n    }\n\n    return {};\n  },\n);\n\n/**\n * ## Tags\n *\n * Tag component can be used to display selected items on UI.\n *\n * ### Usage\n *\n * ***Note:*** _Make sure to handle state when using Tag_\n *\n * ```jsx\n * const [showTag, setShowTag] = React.useState(true);\n *\n * // ...\n *\n * {showTag && (\n *  <Tag\n *    icon={CheckIcon}\n *    onDismiss={() => setShowTag(false)}\n *  >\n *    Transactions\n *  </Tag>\n * )}\n * ```\n *\n * Checkout [Tags Documentation](https://blade.razorpay.com/?path=/story/components-tag--default) for more info.\n *\n */\nconst Tag = ({\n  size = 'medium',\n  icon: Icon,\n  onDismiss,\n  children,\n  isDisabled,\n  testID,\n  _isVirtuallyFocused,\n  _isTagInsideInput,\n  ...rest\n}: TagProps): React.ReactElement | null => {\n  const isMobile = useIsMobile();\n\n  const textColor = isDisabled ? 'interactive.text.gray.disabled' : 'interactive.text.gray.subtle';\n  const iconColor = isDisabled ? 'interactive.icon.gray.disabled' : 'interactive.icon.gray.muted';\n  const backgroundColor = isDisabled\n    ? 'interactive.background.gray.disabled'\n    : 'interactive.background.gray.default';\n\n  const mediumPadding: PaddingProps['padding'] = {\n    base: ['spacing.2', 'spacing.3', 'spacing.2', 'spacing.4'],\n    m: ['spacing.1', 'spacing.2', 'spacing.1', 'spacing.3'],\n  };\n\n  const largePadding: PaddingProps['padding'] = {\n    base: ['spacing.2', 'spacing.3', 'spacing.2', 'spacing.4'],\n    m: ['spacing.2', 'spacing.3', 'spacing.2', 'spacing.4'],\n  };\n\n  const assetSize = React.useMemo((): 'small' | 'medium' => {\n    if (isMobile && size === 'large') {\n      return 'medium';\n    }\n\n    return 'small';\n  }, [isMobile, size]);\n\n  return (\n    <BaseBox\n      display={(isReactNative() ? 'flex' : 'inline-flex') as never}\n      {...getStyledProps(rest)}\n      {...metaAttribute({ name: MetaConstants.Tag, testID })}\n      {...makeAnalyticsAttribute(rest)}\n    >\n      <FocussableTag\n        display={(isReactNative() ? 'flex' : 'inline-flex') as never}\n        alignSelf={isReactNative() ? 'center' : undefined}\n        flexDirection=\"row\"\n        flexWrap=\"nowrap\"\n        flexShrink={0}\n        backgroundColor={backgroundColor}\n        borderRadius=\"max\"\n        padding={size === 'medium' ? mediumPadding : largePadding}\n        _isVirtuallyFocused={_isVirtuallyFocused}\n      >\n        {/* Leading Icon */}\n        {Icon ? (\n          <Box display=\"flex\" flexDirection=\"row\" alignItems=\"center\">\n            <Icon color={iconColor} size={assetSize} marginRight=\"spacing.2\" />\n          </Box>\n        ) : null}\n\n        {/* Tag Text */}\n        <Box display=\"flex\" flexDirection=\"row\">\n          <Text\n            textAlign=\"center\"\n            truncateAfterLines={1}\n            marginRight=\"spacing.2\"\n            color={textColor}\n            size=\"small\"\n          >\n            {children}\n          </Text>\n        </Box>\n\n        {/* Dismiss Icon */}\n        <Box display=\"flex\" flexDirection=\"row\" alignItems=\"center\" justifyContent=\"center\">\n          <IconButton\n            size={assetSize}\n            icon={CloseIcon}\n            accessibilityLabel={`Close ${children} tag`}\n            isDisabled={isDisabled}\n            _tabIndex={_isTagInsideInput ? -1 : undefined}\n            onClick={(e) => {\n              // Inside tag input, we stop propagation to avoid opening dropdown on click of close on tag\n              if (_isTagInsideInput) {\n                e.stopPropagation();\n              }\n              onDismiss();\n            }}\n          />\n        </Box>\n      </FocussableTag>\n    </BaseBox>\n  );\n};\n\nexport { Tag };\n"],"names":["FocussableTag","styled","BaseBox","props","_isVirtuallyFocused","isReactNative","outline","makeSize","globalSizeTokens","theme","colors","surface","background","gray","subtle","boxShadow","interactive","primary","faded","Tag","_ref","_ref$size","size","Icon","icon","onDismiss","children","isDisabled","testID","_isTagInsideInput","rest","_objectWithoutProperties","_excluded","isMobile","useIsMobile","textColor","iconColor","backgroundColor","mediumPadding","base","m","largePadding","assetSize","React","useMemo","_jsx","Object","assign","display","getStyledProps","metaAttribute","name","MetaConstants","makeAnalyticsAttribute","_jsxs","alignSelf","undefined","flexDirection","flexWrap","flexShrink","borderRadius","padding","Box","alignItems","color","marginRight","Text","textAlign","truncateAfterLines","justifyContent","IconButton","CloseIcon","accessibilityLabel","_tabIndex","onClick","e","stopPropagation"],"mappings":"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"}

package/build/lib/native/tokens/global/size.js

@@ -1,4 +1,4 @@
-var size={0:0,1:1,2:2,3:3,4:4,5:5,6:6,7:7,8:8,10:10,12:12,14:14,15:15,16:16,18:18,20:20,24:24,28:28,30:30,32:32,33:33,36:36,40:40,44:44,48:48,52:52,56:56,60:60,64:64,72:72,80:80,100:100,120:120,140:140,160:160,176:176,200:200,208:208,240:240,245:245,256:256,264:264,300:300,314:314,360:360,400:400,584:584,640:640,760:760,800:800,1024:1024,1136:1136};
+var size={0:0,1:1,2:2,3:3,4:4,5:5,6:6,7:7,8:8,10:10,12:12,14:14,15:15,16:16,18:18,20:20,24:24,28:28,30:30,31:31,32:32,33:33,36:36,40:40,44:44,48:48,52:52,56:56,60:60,64:64,72:72,80:80,100:100,120:120,140:140,160:160,176:176,200:200,208:208,240:240,245:245,256:256,264:264,300:300,314:314,360:360,400:400,584:584,640:640,760:760,800:800,1024:1024,1136:1136};
 
 export { size };
 //# sourceMappingURL=size.js.map

package/build/lib/native/tokens/global/size.js.map

@@ -1 +1 @@
-{"version":3,"file":"size.js","sources":["../../../../../src/tokens/global/size.ts"],"sourcesContent":["/**\n * Size tokens are currently not exposed for users (therefore not available in theme)\n */\nexport const size = {\n  /** 0 px */\n  0: 0,\n  /** 1 px */\n  1: 1,\n  /** 2 px */\n  2: 2,\n  /** 3 px */\n  3: 3,\n  /** 4 px */\n  4: 4,\n  /** 5 px */\n  5: 5,\n  /** 6 px */\n  6: 6,\n  /** 7 px */\n  7: 7,\n  /** 8 px */\n  8: 8,\n  /** 10 px */\n  10: 10,\n  /** 12 px */\n  12: 12,\n  /** 14 px */\n  14: 14,\n  /** 15 px */\n  15: 15,\n  /** 16 px */\n  16: 16,\n  /** 18 px */\n  18: 18,\n  /** 20 px */\n  20: 20,\n  /** 24 px */\n  24: 24,\n  /** 28 px */\n  28: 28,\n  /** 32 px */\n  30: 30,\n  /** 32 px */\n  32: 32,\n  /** 33 px */\n  33: 33,\n  /** 36 px */\n  36: 36,\n  /** 40 px */\n  40: 40,\n  /** 44 px */\n  44: 44,\n  /** 48 px */\n  48: 48,\n  /** 52 px */\n  52: 52,\n  /** 56 px */\n  56: 56,\n  /** 60 px */\n  60: 60,\n  /** 64 px */\n  64: 64,\n  /** 72 px */\n  72: 72,\n  /** 80 px */\n  80: 80,\n  /** 100 px */\n  100: 100,\n  /** 120 px */\n  120: 120,\n  /** 140 px */\n  140: 140,\n  /** 160 px */\n  160: 160,\n  /** 176 px */\n  176: 176,\n  /** 200 px */\n  200: 200,\n  /** 208 px */\n  208: 208,\n  /** 240 px */\n  240: 240,\n  /** 245 px */\n  245: 245,\n  /** 256 px */\n  256: 256,\n  /** 264 px */\n  264: 264,\n  /** 300 px */\n  300: 300,\n  /** 314 px */\n  314: 314,\n  /** 360 px */\n  360: 360,\n  /** 400 px */\n  400: 400,\n  /** 584 px */\n  584: 584,\n  /** 640 px */\n  640: 640,\n  /** 760 px */\n  760: 760,\n  /** 800 px */\n  800: 800,\n  /** 1024 px */\n  1024: 1024,\n  /** 1136 px */\n  1136: 1136,\n} as const;\n\nexport type Size = typeof size;\n"],"names":["size"],"mappings":"AAGa,IAAAA,IAAI,CAAG,CAElB,CAAC,CAAE,CAAC,CAEJ,CAAC,CAAE,CAAC,CAEJ,CAAC,CAAE,CAAC,CAEJ,CAAC,CAAE,CAAC,CAEJ,CAAC,CAAE,CAAC,CAEJ,CAAC,CAAE,CAAC,CAEJ,CAAC,CAAE,CAAC,CAEJ,CAAC,CAAE,CAAC,CAEJ,CAAC,CAAE,CAAC,CAEJ,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,IAAI,CAAE,IAAI,CAEV,IAAI,CAAE,IACR;;;;"}
+{"version":3,"file":"size.js","sources":["../../../../../src/tokens/global/size.ts"],"sourcesContent":["/**\n * Size tokens are currently not exposed for users (therefore not available in theme)\n */\nexport const size = {\n  /** 0 px */\n  0: 0,\n  /** 1 px */\n  1: 1,\n  /** 2 px */\n  2: 2,\n  /** 3 px */\n  3: 3,\n  /** 4 px */\n  4: 4,\n  /** 5 px */\n  5: 5,\n  /** 6 px */\n  6: 6,\n  /** 7 px */\n  7: 7,\n  /** 8 px */\n  8: 8,\n  /** 10 px */\n  10: 10,\n  /** 12 px */\n  12: 12,\n  /** 14 px */\n  14: 14,\n  /** 15 px */\n  15: 15,\n  /** 16 px */\n  16: 16,\n  /** 18 px */\n  18: 18,\n  /** 20 px */\n  20: 20,\n  /** 24 px */\n  24: 24,\n  /** 28 px */\n  28: 28,\n  /** 30 px */\n  30: 30,\n  /** 31 px */\n  31: 31,\n  /** 32 px */\n  32: 32,\n  /** 33 px */\n  33: 33,\n  /** 36 px */\n  36: 36,\n  /** 40 px */\n  40: 40,\n  /** 44 px */\n  44: 44,\n  /** 48 px */\n  48: 48,\n  /** 52 px */\n  52: 52,\n  /** 56 px */\n  56: 56,\n  /** 60 px */\n  60: 60,\n  /** 64 px */\n  64: 64,\n  /** 72 px */\n  72: 72,\n  /** 80 px */\n  80: 80,\n  /** 100 px */\n  100: 100,\n  /** 120 px */\n  120: 120,\n  /** 140 px */\n  140: 140,\n  /** 160 px */\n  160: 160,\n  /** 176 px */\n  176: 176,\n  /** 200 px */\n  200: 200,\n  /** 208 px */\n  208: 208,\n  /** 240 px */\n  240: 240,\n  /** 245 px */\n  245: 245,\n  /** 256 px */\n  256: 256,\n  /** 264 px */\n  264: 264,\n  /** 300 px */\n  300: 300,\n  /** 314 px */\n  314: 314,\n  /** 360 px */\n  360: 360,\n  /** 400 px */\n  400: 400,\n  /** 584 px */\n  584: 584,\n  /** 640 px */\n  640: 640,\n  /** 760 px */\n  760: 760,\n  /** 800 px */\n  800: 800,\n  /** 1024 px */\n  1024: 1024,\n  /** 1136 px */\n  1136: 1136,\n} as const;\n\nexport type Size = typeof size;\n"],"names":["size"],"mappings":"AAGa,IAAAA,IAAI,CAAG,CAElB,CAAC,CAAE,CAAC,CAEJ,CAAC,CAAE,CAAC,CAEJ,CAAC,CAAE,CAAC,CAEJ,CAAC,CAAE,CAAC,CAEJ,CAAC,CAAE,CAAC,CAEJ,CAAC,CAAE,CAAC,CAEJ,CAAC,CAAE,CAAC,CAEJ,CAAC,CAAE,CAAC,CAEJ,CAAC,CAAE,CAAC,CAEJ,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,EAAE,CAAE,EAAE,CAEN,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,GAAG,CAAE,GAAG,CAER,IAAI,CAAE,IAAI,CAEV,IAAI,CAAE,IACR;;;;"}

package/build/lib/native/utils/makeAnalyticsAttribute/makeAnalyticsAttribute.js

@@ -0,0 +1,7 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+
+var makeAnalyticsAttribute=function makeAnalyticsAttribute(props){return Object.entries(props).filter(function(_ref){var _ref2=_slicedToArray(_ref,1),key=_ref2[0];return key.startsWith('data-analytics');}).reduce(function(acc,_ref3){var _ref4=_slicedToArray(_ref3,2),key=_ref4[0],value=_ref4[1];return Object.assign({},acc,_defineProperty({},key,value));},{});};
+
+export { makeAnalyticsAttribute };
+//# sourceMappingURL=makeAnalyticsAttribute.js.map

package/build/lib/native/utils/makeAnalyticsAttribute/makeAnalyticsAttribute.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"makeAnalyticsAttribute.js","sources":["../../../../../src/utils/makeAnalyticsAttribute/makeAnalyticsAttribute.tsx"],"sourcesContent":["import type { DataAnalyticsAttribute } from '~utils/types';\n\nconst makeAnalyticsAttribute = (props: Record<string, unknown>): DataAnalyticsAttribute => {\n  return Object.entries(props)\n    .filter(([key]) => key.startsWith('data-analytics'))\n    .reduce<DataAnalyticsAttribute>(\n      (acc, [key, value]) => ({\n        ...acc,\n        [key]: value as string,\n      }),\n      {},\n    );\n};\n\nexport { makeAnalyticsAttribute };\n"],"names":["makeAnalyticsAttribute","props","Object","entries","filter","_ref","_ref2","_slicedToArray","key","startsWith","reduce","acc","_ref3","_ref4","value","assign","_defineProperty"],"mappings":";;;AAEM,IAAAA,sBAAsB,CAAG,SAAzBA,sBAAsBA,CAAIC,KAA8B,CAA6B,CACzF,OAAOC,MAAM,CAACC,OAAO,CAACF,KAAK,CAAC,CACzBG,MAAM,CAAC,SAAAC,IAAA,CAAAC,CAAAA,IAAAA,KAAA,CAAAC,cAAA,CAAAF,IAAA,CAAEG,CAAAA,CAAAA,CAAAA,GAAG,CAAAF,KAAA,WAAME,GAAG,CAACC,UAAU,CAAC,gBAAgB,CAAC,CAAA,CAAA,CAAC,CACnDC,MAAM,CACL,SAACC,GAAG,CAAAC,KAAA,CAAA,CAAA,IAAAC,KAAA,CAAAN,cAAA,CAAAK,KAAA,IAAGJ,GAAG,CAAAK,KAAA,CAAEC,CAAAA,CAAAA,CAAAA,KAAK,CAAAD,KAAA,CAAA,CAAA,CAAA,CAAA,OAAAX,MAAA,CAAAa,MAAA,CACZJ,EAAAA,CAAAA,GAAG,CAAAK,eAAA,CAAA,EAAA,CACLR,GAAG,CAAGM,KAAK,CACZ,CAAA,CAAA,CAAA,CACF,EACF,CAAC,CACL;;;;"}

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

@@ -9,6 +9,7 @@ import '../Box/styledProps/index.js';
 import '../../tokens/global/index.js';
 import '../../utils/index.js';
 import '../../utils/metaAttribute/index.js';
+import '../../utils/makeAnalyticsAttribute/index.js';
 import { jsx } from 'react/jsx-runtime';
 import { makeSize } from '../../utils/makeSize/makeSize.js';
 import { size } from '../../tokens/global/size.js';
@@ -16,6 +17,7 @@ import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
 import { metaAttribute } from '../../utils/metaAttribute/metaAttribute.web.js';
 import { MetaConstants } from '../../utils/metaAttribute/metaConstants.js';
 import { getStyledProps } from '../Box/styledProps/getStyledProps.js';
+import { makeAnalyticsAttribute } from '../../utils/makeAnalyticsAttribute/makeAnalyticsAttribute.js';
 
 var _excluded = ["defaultExpandedIndex", "expandedIndex", "onExpandChange", "showNumberPrefix", "children", "variant", "size", "maxWidth", "testID"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -81,7 +83,7 @@ var Accordion = function Accordion(_ref) {
     size = _ref$size === void 0 ? 'large' : _ref$size,
     maxWidth = _ref.maxWidth,
     testID = _ref.testID,
-    styledProps = _objectWithoutProperties(_ref, _excluded);
+    rest = _objectWithoutProperties(_ref, _excluded);
   var _useState = useState(defaultExpandedIndex),
     _useState2 = _slicedToArray(_useState, 2),
     expandedAccordionItemIndex = _useState2[0],
@@ -114,10 +116,10 @@ var Accordion = function Accordion(_ref) {
   }, [expandedAccordionItemIndex, handleExpandChange, expandedIndex, showNumberPrefix, defaultExpandedIndex, variant, numberOfItems, size]);
   return /*#__PURE__*/jsx(AccordionContext.Provider, {
     value: accordionContext,
-    children: /*#__PURE__*/jsx(BaseBox, _objectSpread(_objectSpread(_objectSpread({}, metaAttribute({
+    children: /*#__PURE__*/jsx(BaseBox, _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, metaAttribute({
       name: MetaConstants.Accordion,
       testID: testID
-    })), getStyledProps(styledProps)), {}, {
+    })), getStyledProps(rest)), makeAnalyticsAttribute(rest)), {}, {
       children: /*#__PURE__*/jsx(BaseBox, _objectSpread(_objectSpread({}, getVariantStyles(variant)), {}, {
         minWidth: MIN_WIDTH,
         maxWidth: maxWidth !== null && maxWidth !== void 0 ? maxWidth : MAX_WIDTH,

package/build/lib/web/development/components/Accordion/Accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.js","sources":["../../../../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport { useCallback, useMemo, useState, cloneElement, Children } from 'react';\nimport type { AccordionContextState } from './AccordionContext';\nimport { AccordionContext } from './AccordionContext';\nimport { MAX_WIDTH } from './styles';\nimport type { AccordionProps } from './types';\nimport { BaseBox } from '~components/Box/BaseBox';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport type { BoxProps } from '~components/Box';\nimport { size as sizeTokens } from '~tokens/global';\nimport { makeSize } from '~utils';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\n\nconst MIN_WIDTH: BoxProps['minWidth'] = {\n  s: makeSize(sizeTokens[200]),\n  m: makeSize(sizeTokens[360]),\n  l: makeSize(sizeTokens[360]),\n};\n\nconst getVariantStyles = (variant: AccordionProps['variant']): BoxProps => {\n  if (variant === 'transparent') {\n    return {};\n  }\n\n  return {\n    backgroundColor: 'surface.background.gray.intense',\n    borderRadius: 'medium',\n    borderWidth: 'thinner',\n    borderColor: 'surface.border.gray.subtle',\n  };\n};\n\n/**\n * # Accordion\n *\n * An accordion is used to allow users to toggle between different content sections in a compact vertical stack.\n *\n * ## Usage\n *\n * ```jsx\n * <Accordion>\n *  <AccordionItem>\n *    <AccordionItemHeader title=\"Title\" />\n *    <AccordionItemBody>\n *      <Text color=\"surface.text.gray.subtle\">\n *        Hello this is accordion body content\n *        </Text>\n *     </AccordionItemBody>\n *  </AccordionItem>\n *  <AccordionItem>\n *    <AccordionItemHeader title=\"Title\" />\n *    <AccordionItemBody>\n *      <Text color=\"surface.text.gray.subtle\">\n *         Hello this is accordion body content\n *      </Text>\n *    </AccordionItemBody>\n *  </AccordionItem>\n * </Accordion>\n * ```\n *\n * Checkout https://blade.razorpay.com/?path=/docs/components-accordion--docs\n *\n */\nconst Accordion = ({\n  defaultExpandedIndex,\n  expandedIndex,\n  onExpandChange,\n  showNumberPrefix = false,\n  children,\n  variant = 'transparent',\n  size = 'large',\n  maxWidth,\n  testID,\n  ...styledProps\n}: AccordionProps): ReactElement => {\n  const [expandedAccordionItemIndex, setExpandedAccordionItemIndex] = useState<number | undefined>(\n    defaultExpandedIndex,\n  );\n\n  const numberOfItems = Children.count(children);\n\n  const handleExpandChange = useCallback(\n    (nextExpandedIndex: number) => {\n      if (typeof expandedIndex !== 'undefined') {\n        // controlled\n        onExpandChange?.({ expandedIndex: nextExpandedIndex });\n      } else {\n        // uncontrolled\n        setExpandedAccordionItemIndex(nextExpandedIndex);\n        onExpandChange?.({ expandedIndex: nextExpandedIndex });\n      }\n    },\n    [onExpandChange, expandedIndex],\n  );\n\n  const accordionContext = useMemo<AccordionContextState>(\n    () => ({\n      expandedIndex: expandedIndex ?? expandedAccordionItemIndex,\n      defaultExpandedIndex,\n      onExpandChange: handleExpandChange,\n      showNumberPrefix,\n      variant,\n      numberOfItems,\n      size,\n    }),\n    [\n      expandedAccordionItemIndex,\n      handleExpandChange,\n      expandedIndex,\n      showNumberPrefix,\n      defaultExpandedIndex,\n      variant,\n      numberOfItems,\n      size,\n    ],\n  );\n\n  return (\n    <AccordionContext.Provider value={accordionContext}>\n      <BaseBox\n        {...metaAttribute({ name: MetaConstants.Accordion, testID })}\n        {...getStyledProps(styledProps)}\n      >\n        <BaseBox\n          {...getVariantStyles(variant)}\n          minWidth={MIN_WIDTH}\n          maxWidth={maxWidth ?? MAX_WIDTH}\n          width=\"100%\"\n        >\n          {Children.map(children, (child, index) =>\n            cloneElement(child, { _index: index, key: index }),\n          )}\n        </BaseBox>\n      </BaseBox>\n    </AccordionContext.Provider>\n  );\n};\n\nexport { Accordion };\n"],"names":["MIN_WIDTH","s","makeSize","sizeTokens","m","l","getVariantStyles","variant","backgroundColor","borderRadius","borderWidth","borderColor","Accordion","_ref","defaultExpandedIndex","expandedIndex","onExpandChange","_ref$showNumberPrefix","showNumberPrefix","children","_ref$variant","_ref$size","size","maxWidth","testID","styledProps","_objectWithoutProperties","_excluded","_useState","useState","_useState2","_slicedToArray","expandedAccordionItemIndex","setExpandedAccordionItemIndex","numberOfItems","Children","count","handleExpandChange","useCallback","nextExpandedIndex","accordionContext","useMemo","_jsx","AccordionContext","Provider","value","BaseBox","_objectSpread","metaAttribute","name","MetaConstants","getStyledProps","minWidth","MAX_WIDTH","width","map","child","index","cloneElement","_index","key"],"mappings":"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"}
+{"version":3,"file":"Accordion.js","sources":["../../../../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport { useCallback, useMemo, useState, cloneElement, Children } from 'react';\nimport type { AccordionContextState } from './AccordionContext';\nimport { AccordionContext } from './AccordionContext';\nimport { MAX_WIDTH } from './styles';\nimport type { AccordionProps } from './types';\nimport { BaseBox } from '~components/Box/BaseBox';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport type { BoxProps } from '~components/Box';\nimport { size as sizeTokens } from '~tokens/global';\nimport { makeSize } from '~utils';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\n\nconst MIN_WIDTH: BoxProps['minWidth'] = {\n  s: makeSize(sizeTokens[200]),\n  m: makeSize(sizeTokens[360]),\n  l: makeSize(sizeTokens[360]),\n};\n\nconst getVariantStyles = (variant: AccordionProps['variant']): BoxProps => {\n  if (variant === 'transparent') {\n    return {};\n  }\n\n  return {\n    backgroundColor: 'surface.background.gray.intense',\n    borderRadius: 'medium',\n    borderWidth: 'thinner',\n    borderColor: 'surface.border.gray.subtle',\n  };\n};\n\n/**\n * # Accordion\n *\n * An accordion is used to allow users to toggle between different content sections in a compact vertical stack.\n *\n * ## Usage\n *\n * ```jsx\n * <Accordion>\n *  <AccordionItem>\n *    <AccordionItemHeader title=\"Title\" />\n *    <AccordionItemBody>\n *      <Text color=\"surface.text.gray.subtle\">\n *        Hello this is accordion body content\n *        </Text>\n *     </AccordionItemBody>\n *  </AccordionItem>\n *  <AccordionItem>\n *    <AccordionItemHeader title=\"Title\" />\n *    <AccordionItemBody>\n *      <Text color=\"surface.text.gray.subtle\">\n *         Hello this is accordion body content\n *      </Text>\n *    </AccordionItemBody>\n *  </AccordionItem>\n * </Accordion>\n * ```\n *\n * Checkout https://blade.razorpay.com/?path=/docs/components-accordion--docs\n *\n */\nconst Accordion = ({\n  defaultExpandedIndex,\n  expandedIndex,\n  onExpandChange,\n  showNumberPrefix = false,\n  children,\n  variant = 'transparent',\n  size = 'large',\n  maxWidth,\n  testID,\n  ...rest\n}: AccordionProps): ReactElement => {\n  const [expandedAccordionItemIndex, setExpandedAccordionItemIndex] = useState<number | undefined>(\n    defaultExpandedIndex,\n  );\n\n  const numberOfItems = Children.count(children);\n\n  const handleExpandChange = useCallback(\n    (nextExpandedIndex: number) => {\n      if (typeof expandedIndex !== 'undefined') {\n        // controlled\n        onExpandChange?.({ expandedIndex: nextExpandedIndex });\n      } else {\n        // uncontrolled\n        setExpandedAccordionItemIndex(nextExpandedIndex);\n        onExpandChange?.({ expandedIndex: nextExpandedIndex });\n      }\n    },\n    [onExpandChange, expandedIndex],\n  );\n\n  const accordionContext = useMemo<AccordionContextState>(\n    () => ({\n      expandedIndex: expandedIndex ?? expandedAccordionItemIndex,\n      defaultExpandedIndex,\n      onExpandChange: handleExpandChange,\n      showNumberPrefix,\n      variant,\n      numberOfItems,\n      size,\n    }),\n    [\n      expandedAccordionItemIndex,\n      handleExpandChange,\n      expandedIndex,\n      showNumberPrefix,\n      defaultExpandedIndex,\n      variant,\n      numberOfItems,\n      size,\n    ],\n  );\n\n  return (\n    <AccordionContext.Provider value={accordionContext}>\n      <BaseBox\n        {...metaAttribute({ name: MetaConstants.Accordion, testID })}\n        {...getStyledProps(rest)}\n        {...makeAnalyticsAttribute(rest)}\n      >\n        <BaseBox\n          {...getVariantStyles(variant)}\n          minWidth={MIN_WIDTH}\n          maxWidth={maxWidth ?? MAX_WIDTH}\n          width=\"100%\"\n        >\n          {Children.map(children, (child, index) =>\n            cloneElement(child, { _index: index, key: index }),\n          )}\n        </BaseBox>\n      </BaseBox>\n    </AccordionContext.Provider>\n  );\n};\n\nexport { Accordion };\n"],"names":["MIN_WIDTH","s","makeSize","sizeTokens","m","l","getVariantStyles","variant","backgroundColor","borderRadius","borderWidth","borderColor","Accordion","_ref","defaultExpandedIndex","expandedIndex","onExpandChange","_ref$showNumberPrefix","showNumberPrefix","children","_ref$variant","_ref$size","size","maxWidth","testID","rest","_objectWithoutProperties","_excluded","_useState","useState","_useState2","_slicedToArray","expandedAccordionItemIndex","setExpandedAccordionItemIndex","numberOfItems","Children","count","handleExpandChange","useCallback","nextExpandedIndex","accordionContext","useMemo","_jsx","AccordionContext","Provider","value","BaseBox","_objectSpread","metaAttribute","name","MetaConstants","getStyledProps","makeAnalyticsAttribute","minWidth","MAX_WIDTH","width","map","child","index","cloneElement","_index","key"],"mappings":"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"}

package/build/lib/web/development/components/Accordion/AccordionButton.web.js

@@ -1,4 +1,5 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { StyledAccordionButton } from './StyledAccordionButton.web.js';
 import { useAccordion } from './AccordionContext.js';
 import { AccordionItemHeader } from './AccordionItemHeader.js';
@@ -9,15 +10,18 @@ import { useCollapsible } from '../Collapsible/CollapsibleContext.js';
 import '../../utils/makeAccessible/index.js';
 import '../../utils/assignWithoutSideEffects/index.js';
 import '../../utils/logger/index.js';
+import '../../utils/makeAnalyticsAttribute/index.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { Text } from '../Typography/Text/Text.js';
 import { throwBladeError } from '../../utils/logger/logger.js';
 import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
 import { makeAccessible } from '../../utils/makeAccessible/makeAccessible.web.js';
+import { makeAnalyticsAttribute } from '../../utils/makeAnalyticsAttribute/makeAnalyticsAttribute.js';
 import { metaAttribute } from '../../utils/metaAttribute/metaAttribute.web.js';
 import { MetaConstants } from '../../utils/metaAttribute/metaConstants.js';
 import { assignWithoutSideEffects } from '../../utils/assignWithoutSideEffects/assignWithoutSideEffects.js';
 
+var _excluded = ["index", "icon", "title", "isDeprecatedAPI", "header", "isDisabled"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var _AccordionButton = function _AccordionButton(_ref) {
@@ -26,7 +30,8 @@ var _AccordionButton = function _AccordionButton(_ref) {
     title = _ref.title,
     isDeprecatedAPI = _ref.isDeprecatedAPI,
     header = _ref.header,
-    isDisabled = _ref.isDisabled;
+    isDisabled = _ref.isDisabled,
+    rest = _objectWithoutProperties(_ref, _excluded);
   var _useCollapsible = useCollapsible(),
     onExpandChange = _useCollapsible.onExpandChange,
     isExpanded = _useCollapsible.isExpanded,
@@ -67,10 +72,10 @@ var _AccordionButton = function _AccordionButton(_ref) {
   var isItemExpanded = expandedIndex === index;
   return /*#__PURE__*/jsx(BaseBox
   // a11y guidelines suggest having an apt heading surround a button but heading level is hardcoded here
-  , _objectSpread(_objectSpread({}, makeAccessible({
+  , _objectSpread(_objectSpread(_objectSpread({}, makeAccessible({
     role: 'heading',
     level: 3
-  })), {}, {
+  })), makeAnalyticsAttribute(rest)), {}, {
     width: "100%",
     children: /*#__PURE__*/jsx(StyledAccordionButton, _objectSpread(_objectSpread(_objectSpread({
       type: "button",

package/build/lib/web/development/components/Accordion/AccordionButton.web.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionButton.web.js","sources":["../../../../../../src/components/Accordion/AccordionButton.web.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport { StyledAccordionButton } from './StyledAccordionButton';\nimport type { AccordionButtonProps } from './types';\nimport { useAccordion } from './AccordionContext';\nimport { AccordionItemHeader } from './AccordionItemHeader';\nimport { BaseBox } from '~components/Box/BaseBox';\nimport { MetaConstants, metaAttribute } from '~utils/metaAttribute';\nimport { Text } from '~components/Typography';\nimport { useCollapsible } from '~components/Collapsible/CollapsibleContext';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { throwBladeError } from '~utils/logger';\n\nconst _AccordionButton = ({\n  index,\n  icon: Icon,\n  title,\n  isDeprecatedAPI,\n  header,\n  isDisabled,\n}: AccordionButtonProps): ReactElement => {\n  const { onExpandChange, isExpanded, collapsibleBodyId } = useCollapsible();\n  const { showNumberPrefix, expandedIndex, size } = useAccordion();\n\n  const toggleCollapse = (): void => onExpandChange(!isExpanded);\n  const onClick = (): void => toggleCollapse();\n\n  const _index =\n    typeof index === 'number' && showNumberPrefix ? (\n      // we have to add -2px margin to align the number with title of BaseHeader\n      <Text size={size} weight=\"semibold\" marginTop=\"-2px\" as=\"span\">\n        {index + 1}.\n      </Text>\n    ) : null;\n\n  const _icon = Icon && <Icon size={size} color=\"surface.icon.gray.normal\" marginY=\"spacing.2\" />;\n\n  if (__DEV__) {\n    if (_index && _icon) {\n      throwBladeError({\n        message: \"showNumberPrefix and icon shouldn't be used together\",\n        moduleName: 'Accordion',\n      });\n    }\n  }\n\n  const isItemExpanded = expandedIndex === index;\n\n  return (\n    <BaseBox\n      // a11y guidelines suggest having an apt heading surround a button but heading level is hardcoded here\n      {...makeAccessible({ role: 'heading', level: 3 })}\n      width=\"100%\"\n    >\n      <StyledAccordionButton\n        type=\"button\"\n        isExpanded={isItemExpanded}\n        disabled={isDisabled}\n        onClick={onClick}\n        {...makeAccessible({ expanded: isItemExpanded, controls: collapsibleBodyId })}\n        {...metaAttribute({ name: MetaConstants.AccordionButton })}\n      >\n        {isDeprecatedAPI ? <AccordionItemHeader title={title} leading={_icon ?? _index} /> : header}\n      </StyledAccordionButton>\n    </BaseBox>\n  );\n};\n\nconst AccordionButton = assignWithoutSideEffects(_AccordionButton, {\n  componentId: MetaConstants.AccordionButton,\n});\n\nexport type { AccordionButtonProps };\nexport { AccordionButton };\n"],"names":["_AccordionButton","_ref","index","Icon","icon","title","isDeprecatedAPI","header","isDisabled","_useCollapsible","useCollapsible","onExpandChange","isExpanded","collapsibleBodyId","_useAccordion","useAccordion","showNumberPrefix","expandedIndex","size","toggleCollapse","onClick","_index","_jsxs","Text","weight","marginTop","as","children","_icon","_jsx","color","marginY","throwBladeError","message","moduleName","isItemExpanded","BaseBox","_objectSpread","makeAccessible","role","level","width","StyledAccordionButton","type","disabled","expanded","controls","metaAttribute","name","MetaConstants","AccordionButton","AccordionItemHeader","leading","assignWithoutSideEffects","componentId"],"mappings":"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"}
+{"version":3,"file":"AccordionButton.web.js","sources":["../../../../../../src/components/Accordion/AccordionButton.web.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport { StyledAccordionButton } from './StyledAccordionButton';\nimport type { AccordionButtonProps } from './types';\nimport { useAccordion } from './AccordionContext';\nimport { AccordionItemHeader } from './AccordionItemHeader';\nimport { BaseBox } from '~components/Box/BaseBox';\nimport { MetaConstants, metaAttribute } from '~utils/metaAttribute';\nimport { Text } from '~components/Typography';\nimport { useCollapsible } from '~components/Collapsible/CollapsibleContext';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { throwBladeError } from '~utils/logger';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\n\nconst _AccordionButton = ({\n  index,\n  icon: Icon,\n  title,\n  isDeprecatedAPI,\n  header,\n  isDisabled,\n  ...rest\n}: AccordionButtonProps): ReactElement => {\n  const { onExpandChange, isExpanded, collapsibleBodyId } = useCollapsible();\n  const { showNumberPrefix, expandedIndex, size } = useAccordion();\n\n  const toggleCollapse = (): void => onExpandChange(!isExpanded);\n  const onClick = (): void => toggleCollapse();\n\n  const _index =\n    typeof index === 'number' && showNumberPrefix ? (\n      // we have to add -2px margin to align the number with title of BaseHeader\n      <Text size={size} weight=\"semibold\" marginTop=\"-2px\" as=\"span\">\n        {index + 1}.\n      </Text>\n    ) : null;\n\n  const _icon = Icon && <Icon size={size} color=\"surface.icon.gray.normal\" marginY=\"spacing.2\" />;\n\n  if (__DEV__) {\n    if (_index && _icon) {\n      throwBladeError({\n        message: \"showNumberPrefix and icon shouldn't be used together\",\n        moduleName: 'Accordion',\n      });\n    }\n  }\n\n  const isItemExpanded = expandedIndex === index;\n\n  return (\n    <BaseBox\n      // a11y guidelines suggest having an apt heading surround a button but heading level is hardcoded here\n      {...makeAccessible({ role: 'heading', level: 3 })}\n      {...makeAnalyticsAttribute(rest)}\n      width=\"100%\"\n    >\n      <StyledAccordionButton\n        type=\"button\"\n        isExpanded={isItemExpanded}\n        disabled={isDisabled}\n        onClick={onClick}\n        {...makeAccessible({ expanded: isItemExpanded, controls: collapsibleBodyId })}\n        {...metaAttribute({ name: MetaConstants.AccordionButton })}\n      >\n        {isDeprecatedAPI ? <AccordionItemHeader title={title} leading={_icon ?? _index} /> : header}\n      </StyledAccordionButton>\n    </BaseBox>\n  );\n};\n\nconst AccordionButton = assignWithoutSideEffects(_AccordionButton, {\n  componentId: MetaConstants.AccordionButton,\n});\n\nexport type { AccordionButtonProps };\nexport { AccordionButton };\n"],"names":["_AccordionButton","_ref","index","Icon","icon","title","isDeprecatedAPI","header","isDisabled","rest","_objectWithoutProperties","_excluded","_useCollapsible","useCollapsible","onExpandChange","isExpanded","collapsibleBodyId","_useAccordion","useAccordion","showNumberPrefix","expandedIndex","size","toggleCollapse","onClick","_index","_jsxs","Text","weight","marginTop","as","children","_icon","_jsx","color","marginY","throwBladeError","message","moduleName","isItemExpanded","BaseBox","_objectSpread","makeAccessible","role","level","makeAnalyticsAttribute","width","StyledAccordionButton","type","disabled","expanded","controls","metaAttribute","name","MetaConstants","AccordionButton","AccordionItemHeader","leading","assignWithoutSideEffects","componentId"],"mappings":"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"}

package/build/lib/web/development/components/Accordion/AccordionItem.js

@@ -1,5 +1,6 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import React__default from 'react';
 import { AccordionButton } from './AccordionButton.web.js';
 import { useAccordion, AccordionItemContext } from './AccordionContext.js';
@@ -13,16 +14,19 @@ import { Collapsible } from '../Collapsible/Collapsible.js';
 import '../Collapsible/index.js';
 import '../../utils/isValidAllowedChildren/index.js';
 import '../../utils/logger/index.js';
+import '../../utils/makeAnalyticsAttribute/index.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { getComponentId } from '../../utils/isValidAllowedChildren/isValidAllowedChildren.js';
 import { throwBladeError } from '../../utils/logger/logger.js';
 import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
 import { metaAttribute } from '../../utils/metaAttribute/metaAttribute.web.js';
 import { MetaConstants } from '../../utils/metaAttribute/metaConstants.js';
+import { makeAnalyticsAttribute } from '../../utils/makeAnalyticsAttribute/makeAnalyticsAttribute.js';
 import { CollapsibleBody } from '../Collapsible/CollapsibleBody.js';
 import { isReactNative } from '../../utils/platform/isReactNative.js';
 import { Divider } from '../Divider/Divider.js';
 
+var _excluded = ["title", "description", "icon", "children", "isDisabled", "_index", "testID"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var AccordionItem = function AccordionItem(_ref) {
@@ -32,7 +36,8 @@ var AccordionItem = function AccordionItem(_ref) {
     children = _ref.children,
     isDisabled = _ref.isDisabled,
     _index = _ref._index,
-    testID = _ref.testID;
+    testID = _ref.testID,
+    rest = _objectWithoutProperties(_ref, _excluded);
   var _useAccordion = useAccordion(),
     expandedIndex = _useAccordion.expandedIndex,
     onExpandChange = _useAccordion.onExpandChange,
@@ -71,10 +76,10 @@ var AccordionItem = function AccordionItem(_ref) {
       index: _index,
       isDisabled: isDisabled
     },
-    children: /*#__PURE__*/jsxs(BaseBox, _objectSpread(_objectSpread({}, metaAttribute({
+    children: /*#__PURE__*/jsxs(BaseBox, _objectSpread(_objectSpread(_objectSpread({}, metaAttribute({
       name: MetaConstants.AccordionItem,
       testID: testID
-    })), {}, {
+    })), makeAnalyticsAttribute(rest)), {}, {
       children: [/*#__PURE__*/jsxs(Collapsible, {
         isExpanded: isExpanded,
         defaultIsExpanded: isDefaultExpanded,

package/build/lib/web/development/components/Accordion/AccordionItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionItem.js","sources":["../../../../../../src/components/Accordion/AccordionItem.tsx"],"sourcesContent":["import type { ReactElement, ReactNode } from 'react';\nimport React from 'react';\nimport { AccordionButton } from './AccordionButton';\nimport { AccordionItemContext, useAccordion } from './AccordionContext';\nimport { AccordionItemBody } from './AccordionItemBody';\nimport { componentIds } from './componentIds';\nimport { Divider } from '~components/Divider';\nimport { BaseBox } from '~components/Box/BaseBox';\nimport type { IconComponent } from '~components/Icons';\nimport { MetaConstants, metaAttribute } from '~utils/metaAttribute';\nimport { isReactNative } from '~utils';\nimport { Collapsible } from '~components/Collapsible/Collapsible';\nimport { CollapsibleBody } from '~components/Collapsible';\nimport type { TestID } from '~utils/types';\nimport { getComponentId } from '~utils/isValidAllowedChildren';\nimport { throwBladeError } from '~utils/logger';\n\ntype AccordionItemProps = {\n  /**\n   * Title text content\n   *\n   * @deprecated Use AccordionItemHeader and AccordionItemBody\n   *\n   * Checkout https://blade.razorpay.com/?path=/docs/components-accordion--docs for new API\n   */\n  title?: string;\n\n  /**\n   * Body text content\n   *\n   *  @deprecated Use AccordionItemHeader and AccordionItemBody\n   *\n   * Checkout https://blade.razorpay.com/?path=/docs/components-accordion--docs for new API\n   */\n  description?: string;\n\n  /**\n   * Renders a Blade icon as title prefix (requires `showNumberPrefix={false}`)\n   *\n   * @deprecated Use `leading={<StarIcon size=\"large\" />}` on AccordionItemHeader instead\n   *\n   * Checkout https://blade.razorpay.com/?path=/docs/components-accordion--docs for new API\n   */\n  icon?: IconComponent;\n\n  /**\n   * Slot, renders any custom content\n   */\n  children?: ReactNode | ReactNode[];\n\n  /**\n   * Disabled state of the item\n   *\n   * @default false\n   */\n  isDisabled?: boolean;\n\n  /**\n   * **Internal:** used for determining numbering, you don't need to pass this,\n   * instead pass `showNumberPrefix` to root `Accordion`\n   */\n  _index?: number;\n} & TestID;\n\nconst AccordionItem = ({\n  title,\n  description,\n  icon,\n  children,\n  isDisabled,\n  _index,\n  testID,\n}: AccordionItemProps): ReactElement => {\n  const {\n    expandedIndex,\n    onExpandChange,\n    defaultExpandedIndex,\n    variant,\n    numberOfItems,\n  } = useAccordion();\n  const isExpanded = expandedIndex === _index;\n  const isDefaultExpanded = defaultExpandedIndex === _index;\n  const isDeprecatedAPI = Boolean(title) || Boolean(description) || Boolean(icon);\n  const [header, body] = React.Children.toArray(children);\n\n  if (!isDeprecatedAPI) {\n    // Only doing validation in new API. Deprecated API allows everything as AccordionItem children\n    const headerComponentId = getComponentId(header);\n    const bodyComponentId = getComponentId(body);\n\n    if (\n      headerComponentId !== componentIds.AccordionItemHeader &&\n      bodyComponentId !== componentIds.AccordionItemBody\n    ) {\n      throwBladeError({\n        message:\n          'AccordionItem only allows AccordionItemHeader as first component and AccordionItemBody as second. Check Accordion documentation',\n        moduleName: 'AccordionItem',\n      });\n    }\n  }\n\n  const isLastItem = _index !== undefined && _index < numberOfItems - 1;\n\n  const handleExpandChange = ({ isExpanded }: { isExpanded: boolean }): void => {\n    if (isExpanded && typeof _index !== 'undefined') {\n      onExpandChange(_index);\n    } else {\n      onExpandChange(-1);\n    }\n  };\n\n  return (\n    <AccordionItemContext.Provider\n      value={{\n        index: _index,\n        isDisabled,\n      }}\n    >\n      <BaseBox {...metaAttribute({ name: MetaConstants.AccordionItem, testID })}>\n        <Collapsible\n          isExpanded={isExpanded}\n          defaultIsExpanded={isDefaultExpanded}\n          onExpandChange={handleExpandChange}\n          // Accordion has its own width restrictions\n          _shouldApplyWidthRestrictions={false}\n          _dangerouslyDisableValidations={true}\n        >\n          <AccordionButton\n            index={_index}\n            icon={icon}\n            title={title}\n            header={header}\n            isDisabled={isDisabled}\n            isDeprecatedAPI={isDeprecatedAPI}\n          />\n          <CollapsibleBody\n            // Just React Native things, need this 100% so collapsed content flows correctly inside Accordion\n            // In new API, AccordionItemBody takes 100% width to avoid issues like this - https://github.com/razorpay/blade/pull/1814\n            width={isReactNative() || !isDeprecatedAPI ? '100%' : undefined}\n          >\n            {isDeprecatedAPI ? (\n              <AccordionItemBody _description={description}>{children}</AccordionItemBody>\n            ) : (\n              body\n            )}\n          </CollapsibleBody>\n        </Collapsible>\n        {isLastItem || variant === 'transparent' ? <Divider /> : null}\n      </BaseBox>\n    </AccordionItemContext.Provider>\n  );\n};\n\nexport type { AccordionItemProps };\nexport { AccordionItem };\n"],"names":["AccordionItem","_ref","title","description","icon","children","isDisabled","_index","testID","_useAccordion","useAccordion","expandedIndex","onExpandChange","defaultExpandedIndex","variant","numberOfItems","isExpanded","isDefaultExpanded","isDeprecatedAPI","Boolean","_React$Children$toArr","React","Children","toArray","_React$Children$toArr2","_slicedToArray","header","body","headerComponentId","getComponentId","bodyComponentId","componentIds","AccordionItemHeader","AccordionItemBody","throwBladeError","message","moduleName","isLastItem","undefined","handleExpandChange","_ref2","_jsx","AccordionItemContext","Provider","value","index","_jsxs","BaseBox","_objectSpread","metaAttribute","name","MetaConstants","Collapsible","defaultIsExpanded","_shouldApplyWidthRestrictions","_dangerouslyDisableValidations","AccordionButton","CollapsibleBody","width","isReactNative","_description","Divider"],"mappings":"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"}
+{"version":3,"file":"AccordionItem.js","sources":["../../../../../../src/components/Accordion/AccordionItem.tsx"],"sourcesContent":["import type { ReactElement, ReactNode } from 'react';\nimport React from 'react';\nimport { AccordionButton } from './AccordionButton';\nimport { AccordionItemContext, useAccordion } from './AccordionContext';\nimport { AccordionItemBody } from './AccordionItemBody';\nimport { componentIds } from './componentIds';\nimport { Divider } from '~components/Divider';\nimport { BaseBox } from '~components/Box/BaseBox';\nimport type { IconComponent } from '~components/Icons';\nimport { MetaConstants, metaAttribute } from '~utils/metaAttribute';\nimport { isReactNative } from '~utils';\nimport { Collapsible } from '~components/Collapsible/Collapsible';\nimport { CollapsibleBody } from '~components/Collapsible';\nimport type { TestID, DataAnalyticsAttribute } from '~utils/types';\nimport { getComponentId } from '~utils/isValidAllowedChildren';\nimport { throwBladeError } from '~utils/logger';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\n\ntype AccordionItemProps = {\n  /**\n   * Title text content\n   *\n   * @deprecated Use AccordionItemHeader and AccordionItemBody\n   *\n   * Checkout https://blade.razorpay.com/?path=/docs/components-accordion--docs for new API\n   */\n  title?: string;\n\n  /**\n   * Body text content\n   *\n   *  @deprecated Use AccordionItemHeader and AccordionItemBody\n   *\n   * Checkout https://blade.razorpay.com/?path=/docs/components-accordion--docs for new API\n   */\n  description?: string;\n\n  /**\n   * Renders a Blade icon as title prefix (requires `showNumberPrefix={false}`)\n   *\n   * @deprecated Use `leading={<StarIcon size=\"large\" />}` on AccordionItemHeader instead\n   *\n   * Checkout https://blade.razorpay.com/?path=/docs/components-accordion--docs for new API\n   */\n  icon?: IconComponent;\n\n  /**\n   * Slot, renders any custom content\n   */\n  children?: ReactNode | ReactNode[];\n\n  /**\n   * Disabled state of the item\n   *\n   * @default false\n   */\n  isDisabled?: boolean;\n\n  /**\n   * **Internal:** used for determining numbering, you don't need to pass this,\n   * instead pass `showNumberPrefix` to root `Accordion`\n   */\n  _index?: number;\n} & TestID &\n  DataAnalyticsAttribute;\n\nconst AccordionItem = ({\n  title,\n  description,\n  icon,\n  children,\n  isDisabled,\n  _index,\n  testID,\n  ...rest\n}: AccordionItemProps): ReactElement => {\n  const {\n    expandedIndex,\n    onExpandChange,\n    defaultExpandedIndex,\n    variant,\n    numberOfItems,\n  } = useAccordion();\n  const isExpanded = expandedIndex === _index;\n  const isDefaultExpanded = defaultExpandedIndex === _index;\n  const isDeprecatedAPI = Boolean(title) || Boolean(description) || Boolean(icon);\n  const [header, body] = React.Children.toArray(children);\n\n  if (!isDeprecatedAPI) {\n    // Only doing validation in new API. Deprecated API allows everything as AccordionItem children\n    const headerComponentId = getComponentId(header);\n    const bodyComponentId = getComponentId(body);\n\n    if (\n      headerComponentId !== componentIds.AccordionItemHeader &&\n      bodyComponentId !== componentIds.AccordionItemBody\n    ) {\n      throwBladeError({\n        message:\n          'AccordionItem only allows AccordionItemHeader as first component and AccordionItemBody as second. Check Accordion documentation',\n        moduleName: 'AccordionItem',\n      });\n    }\n  }\n\n  const isLastItem = _index !== undefined && _index < numberOfItems - 1;\n\n  const handleExpandChange = ({ isExpanded }: { isExpanded: boolean }): void => {\n    if (isExpanded && typeof _index !== 'undefined') {\n      onExpandChange(_index);\n    } else {\n      onExpandChange(-1);\n    }\n  };\n\n  return (\n    <AccordionItemContext.Provider\n      value={{\n        index: _index,\n        isDisabled,\n      }}\n    >\n      <BaseBox\n        {...metaAttribute({ name: MetaConstants.AccordionItem, testID })}\n        {...makeAnalyticsAttribute(rest)}\n      >\n        <Collapsible\n          isExpanded={isExpanded}\n          defaultIsExpanded={isDefaultExpanded}\n          onExpandChange={handleExpandChange}\n          // Accordion has its own width restrictions\n          _shouldApplyWidthRestrictions={false}\n          _dangerouslyDisableValidations={true}\n        >\n          <AccordionButton\n            index={_index}\n            icon={icon}\n            title={title}\n            header={header}\n            isDisabled={isDisabled}\n            isDeprecatedAPI={isDeprecatedAPI}\n          />\n          <CollapsibleBody\n            // Just React Native things, need this 100% so collapsed content flows correctly inside Accordion\n            // In new API, AccordionItemBody takes 100% width to avoid issues like this - https://github.com/razorpay/blade/pull/1814\n            width={isReactNative() || !isDeprecatedAPI ? '100%' : undefined}\n          >\n            {isDeprecatedAPI ? (\n              <AccordionItemBody _description={description}>{children}</AccordionItemBody>\n            ) : (\n              body\n            )}\n          </CollapsibleBody>\n        </Collapsible>\n        {isLastItem || variant === 'transparent' ? <Divider /> : null}\n      </BaseBox>\n    </AccordionItemContext.Provider>\n  );\n};\n\nexport type { AccordionItemProps };\nexport { AccordionItem };\n"],"names":["AccordionItem","_ref","title","description","icon","children","isDisabled","_index","testID","rest","_objectWithoutProperties","_excluded","_useAccordion","useAccordion","expandedIndex","onExpandChange","defaultExpandedIndex","variant","numberOfItems","isExpanded","isDefaultExpanded","isDeprecatedAPI","Boolean","_React$Children$toArr","React","Children","toArray","_React$Children$toArr2","_slicedToArray","header","body","headerComponentId","getComponentId","bodyComponentId","componentIds","AccordionItemHeader","AccordionItemBody","throwBladeError","message","moduleName","isLastItem","undefined","handleExpandChange","_ref2","_jsx","AccordionItemContext","Provider","value","index","_jsxs","BaseBox","_objectSpread","metaAttribute","name","MetaConstants","makeAnalyticsAttribute","Collapsible","defaultIsExpanded","_shouldApplyWidthRestrictions","_dangerouslyDisableValidations","AccordionButton","CollapsibleBody","width","isReactNative","_description","Divider"],"mappings":"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"}