@razorpay/blade 11.8.2 → 11.9.1

package/build/lib/web/development/components/Input/TextInput/TextInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextInput.js","sources":["../../../../../../../src/components/Input/TextInput/TextInput.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport type { ReactElement, ReactNode } from 'react';\nimport type { TextInput as TextInputReactNative } from 'react-native';\nimport type { BaseInputProps } from '../BaseInput';\nimport { BaseInput } from '../BaseInput';\nimport isEmpty from '~utils/lodashButBetter/isEmpty';\nimport type { IconComponent } from '~components/Icons';\nimport { CloseIcon } from '~components/Icons';\nimport { IconButton } from '~components/Button/IconButton';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport { MetaConstants } from '~utils/metaAttribute';\nimport { CharacterCounter } from '~components/Form/CharacterCounter';\nimport BaseBox from '~components/Box/BaseBox';\nimport { Spinner } from '~components/Spinner';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { getPlatformType } from '~utils';\nimport { useMergeRefs } from '~utils/useMergeRefs';\nimport type { BladeElementRef } from '~utils/types';\n\n// Users should use PasswordInput for input type password\ntype Type = Exclude<BaseInputProps['type'], 'password'>;\n\ntype TextInputCommonProps = Pick<\n  BaseInputProps,\n  | 'label'\n  | 'accessibilityLabel'\n  | 'labelPosition'\n  | 'necessityIndicator'\n  | 'validationState'\n  | 'helpText'\n  | 'errorText'\n  | 'successText'\n  | 'placeholder'\n  | 'defaultValue'\n  | 'name'\n  | 'onChange'\n  | 'onFocus'\n  | 'onBlur'\n  | 'value'\n  | 'isDisabled'\n  | 'isRequired'\n  | 'prefix'\n  | 'suffix'\n  | 'maxCharacters'\n  | 'autoFocus'\n  | 'keyboardReturnKeyType'\n  | 'autoCompleteSuggestionType'\n  | 'onSubmit'\n  | 'autoCapitalize'\n  | 'testID'\n  | 'onClick'\n> & {\n  /**\n   * Decides whether to render a clear icon button\n   */\n  showClearButton?: boolean;\n\n  /**\n   * Event handler to handle the onClick event for clear button. Used when `showClearButton` is `true`\n   */\n  onClearButtonClick?: () => void;\n\n  /**\n   * Decides whether to show a loading spinner for the input field.\n   */\n  isLoading?: boolean;\n\n  /**\n   * Icon that will be rendered at the beginning of the input field\n   */\n  icon?: IconComponent;\n\n  /**\n   * Type of Input Field to be rendered. Use `PasswordInput` for type `password`\n   *\n   *\n   * **Note on number type**\n   *\n   * `type=\"number\"` internally uses `inputMode=\"numeric\"` instead of HTML's `type=\"number\"` which also allows text characters.\n   * If you have a usecase where you only want to support number input, you can handle it on validations end.\n   *\n   * Check out [Why the GOV.UK Design System team changed the input type for numbers](https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/) for reasoning\n   *\n   * @default text\n   */\n  type?: Type;\n} & StyledPropsBlade;\n\ntype TextInputKeyboardAndAutoComplete = Pick<\n  BaseInputProps,\n  'keyboardType' | 'keyboardReturnKeyType' | 'autoCompleteSuggestionType' | 'autoCapitalize'\n> & {\n  type: Type;\n};\n\n/*\n  Mandatory accessibilityLabel prop when label is not provided\n*/\ntype TextInputPropsWithA11yLabel = {\n  /**\n   * Label to be shown for the input field\n   */\n  label?: undefined;\n  /**\n   * Accessibility label for the input\n   */\n  accessibilityLabel: string;\n};\n\n/*\n  Optional accessibilityLabel prop when label is provided\n*/\ntype TextInputPropsWithLabel = {\n  /**\n   * Label to be shown for the input field\n   */\n  label: string;\n  /**\n   * Accessibility label for the input\n   */\n  accessibilityLabel?: string;\n};\n\ntype TextInputProps = (TextInputPropsWithA11yLabel | TextInputPropsWithLabel) &\n  TextInputCommonProps;\n\nconst getKeyboardAndAutocompleteProps = ({\n  type = 'text',\n  keyboardReturnKeyType,\n  autoCompleteSuggestionType,\n  autoCapitalize,\n}: TextInputKeyboardAndAutoComplete): TextInputKeyboardAndAutoComplete => {\n  const keyboardAndAutocompleteProps: TextInputKeyboardAndAutoComplete = {\n    type,\n    keyboardType: 'text',\n    keyboardReturnKeyType: 'default',\n    autoCompleteSuggestionType: 'none',\n    autoCapitalize,\n  };\n\n  const keyboardConfigMap = {\n    text: {\n      keyboardType: 'text',\n      keyboardReturnKeyType: 'default',\n      autoCompleteSuggestionType: 'none',\n      autoCapitalize: undefined,\n    },\n    telephone: {\n      keyboardType: 'telephone',\n      keyboardReturnKeyType: 'done',\n      autoCompleteSuggestionType: 'telephone',\n      autoCapitalize: undefined,\n    },\n    email: {\n      keyboardType: 'email',\n      keyboardReturnKeyType: 'done',\n      autoCompleteSuggestionType: 'email',\n      autoCapitalize: 'none',\n    },\n    url: {\n      keyboardType: 'url',\n      keyboardReturnKeyType: 'go',\n      autoCompleteSuggestionType: 'none',\n      autoCapitalize: 'none',\n    },\n    number: {\n      keyboardType: 'decimal',\n      keyboardReturnKeyType: 'done',\n      autoCompleteSuggestionType: 'none',\n      autoCapitalize: undefined,\n    },\n    search: {\n      keyboardType: 'search',\n      keyboardReturnKeyType: 'search',\n      autoCompleteSuggestionType: 'none',\n      autoCapitalize: undefined,\n    },\n  } as const;\n\n  const keyboardConfig = keyboardConfigMap[type];\n\n  keyboardAndAutocompleteProps.keyboardType = keyboardConfig.keyboardType;\n\n  keyboardAndAutocompleteProps.keyboardReturnKeyType =\n    keyboardReturnKeyType ?? keyboardConfig.keyboardReturnKeyType;\n\n  keyboardAndAutocompleteProps.autoCompleteSuggestionType =\n    autoCompleteSuggestionType ?? keyboardConfig.autoCompleteSuggestionType;\n\n  keyboardAndAutocompleteProps.autoCapitalize = keyboardConfig.autoCapitalize;\n\n  if (type === 'number') {\n    /* the default keyboardType:numeric shows alphanumeric keyboard on iOS but number pad on android. making it type:text and keyboardType:decimal fixes this on all platforms.\n     * source: https://css-tricks.com/everything-you-ever-wanted-to-know-about-keyboardType/#aa-decimal\n     */\n    keyboardAndAutocompleteProps.type = 'text';\n  }\n\n  if (type === 'search') {\n    /* when input type:search is provided at that time browser adds a weird close button which collides with our clear button and then we have 2 clear buttons\n     * source: https://github.com/razorpay/blade/issues/857#issue-1457367160\n     */\n    keyboardAndAutocompleteProps.type = 'text';\n  }\n\n  return keyboardAndAutocompleteProps;\n};\n\n// need to do this to tell TS to infer type as TextInput of React Native and make it believe that `ref.current.clear()` exists\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst isReactNative = (_textInputRef: any): _textInputRef is TextInputReactNative => {\n  return getPlatformType() === 'react-native';\n};\n\nconst _TextInput: React.ForwardRefRenderFunction<BladeElementRef, TextInputProps> = (\n  {\n    label,\n    accessibilityLabel,\n    labelPosition = 'top',\n    placeholder,\n    type = 'text',\n    defaultValue,\n    name,\n    value,\n    maxCharacters,\n    onChange,\n    onClick,\n    onFocus,\n    onBlur,\n    onSubmit,\n    isDisabled,\n    necessityIndicator,\n    validationState,\n    errorText,\n    helpText,\n    successText,\n    isRequired,\n    icon,\n    prefix,\n    showClearButton,\n    onClearButtonClick,\n    isLoading,\n    suffix,\n    autoFocus,\n    keyboardReturnKeyType,\n    autoCompleteSuggestionType,\n    autoCapitalize,\n    testID,\n    ...styledProps\n  },\n  ref,\n): ReactElement => {\n  const textInputRef = React.useRef<BladeElementRef>(null);\n  const mergedRef = useMergeRefs(ref, textInputRef);\n  const [shouldShowClearButton, setShouldShowClearButton] = useState(false);\n\n  React.useEffect(() => {\n    setShouldShowClearButton(Boolean(showClearButton && (defaultValue ?? value)));\n  }, [showClearButton, defaultValue, value]);\n\n  const renderInteractionElement = (): ReactNode => {\n    if (isLoading) {\n      return <Spinner accessibilityLabel=\"Loading Content\" />;\n    }\n\n    if (shouldShowClearButton) {\n      return (\n        <IconButton\n          size=\"medium\"\n          icon={CloseIcon}\n          onClick={() => {\n            if (isEmpty(value) && textInputRef.current) {\n              // when the input field is uncontrolled take the ref and clear the input and then call the onClearButtonClick function\n              if (isReactNative(textInputRef.current)) {\n                textInputRef.current.clear();\n                textInputRef.current.focus();\n              } else if (textInputRef.current instanceof HTMLInputElement) {\n                textInputRef.current.value = '';\n                textInputRef.current.focus();\n              }\n            }\n            // if the input field is controlled just call the click handler and the value change shall be left upto the consumer\n            onClearButtonClick?.();\n            textInputRef?.current?.focus();\n            setShouldShowClearButton(false);\n          }}\n          accessibilityLabel=\"Clear Input Content\"\n        />\n      );\n    }\n\n    return null;\n  };\n\n  return (\n    <BaseInput\n      id=\"textinput\"\n      componentName={MetaConstants.TextInput}\n      ref={mergedRef}\n      label={label as string}\n      accessibilityLabel={accessibilityLabel}\n      hideLabelText={!Boolean(label)}\n      labelPosition={labelPosition}\n      placeholder={placeholder}\n      defaultValue={defaultValue}\n      value={value}\n      name={name}\n      maxCharacters={maxCharacters}\n      onChange={({ name, value }) => {\n        if (showClearButton && value?.length) {\n          // show the clear button when the user starts typing in\n          setShouldShowClearButton(true);\n        }\n\n        if (shouldShowClearButton && !value?.length) {\n          // hide the clear button when the input field is empty\n          setShouldShowClearButton(false);\n        }\n\n        onChange?.({ name, value });\n      }}\n      onClick={onClick}\n      onFocus={onFocus}\n      onBlur={onBlur}\n      onSubmit={onSubmit}\n      isDisabled={isDisabled}\n      necessityIndicator={necessityIndicator}\n      isRequired={isRequired}\n      leadingIcon={icon}\n      prefix={prefix}\n      interactionElement={renderInteractionElement()}\n      suffix={suffix}\n      validationState={validationState}\n      errorText={errorText}\n      helpText={helpText}\n      successText={successText}\n      trailingFooterSlot={(value) => {\n        return maxCharacters ? (\n          <BaseBox marginTop=\"spacing.2\" marginRight=\"spacing.1\">\n            <CharacterCounter currentCount={value?.length ?? 0} maxCount={maxCharacters} />\n          </BaseBox>\n        ) : null;\n      }}\n      // eslint-disable-next-line jsx-a11y/no-autofocus\n      autoFocus={autoFocus}\n      testID={testID}\n      {...getKeyboardAndAutocompleteProps({\n        type,\n        keyboardReturnKeyType,\n        autoCompleteSuggestionType,\n        autoCapitalize,\n      })}\n      {...styledProps}\n    />\n  );\n};\n\nconst TextInput = assignWithoutSideEffects(React.forwardRef(_TextInput), {\n  displayName: 'TextInput',\n});\n\nexport type { TextInputProps };\nexport { TextInput };\n"],"names":["getKeyboardAndAutocompleteProps","_ref","_ref$type","type","keyboardReturnKeyType","autoCompleteSuggestionType","autoCapitalize","keyboardAndAutocompleteProps","keyboardType","keyboardConfigMap","text","undefined","telephone","email","url","number","search","keyboardConfig","isReactNative","_textInputRef","getPlatformType","_TextInput","_ref2","ref","label","accessibilityLabel","_ref2$labelPosition","labelPosition","placeholder","_ref2$type","defaultValue","name","value","maxCharacters","onChange","onClick","onFocus","onBlur","onSubmit","isDisabled","necessityIndicator","validationState","errorText","helpText","successText","isRequired","icon","prefix","showClearButton","onClearButtonClick","isLoading","suffix","autoFocus","testID","styledProps","_objectWithoutProperties","_excluded","textInputRef","React","useRef","mergedRef","useMergeRefs","_useState","useState","_useState2","_slicedToArray","shouldShowClearButton","setShouldShowClearButton","useEffect","Boolean","renderInteractionElement","_jsx","Spinner","IconButton","size","CloseIcon","_textInputRef$current","isEmpty","current","clear","focus","HTMLInputElement","BaseInput","_objectSpread","id","componentName","MetaConstants","TextInput","hideLabelText","_ref3","length","leadingIcon","interactionElement","trailingFooterSlot","_value$length","BaseBox","marginTop","marginRight","children","CharacterCounter","currentCount","maxCount","assignWithoutSideEffects","forwardRef","displayName"],"mappings":"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"}
+{"version":3,"file":"TextInput.js","sources":["../../../../../../../src/components/Input/TextInput/TextInput.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport type { ReactElement, ReactNode } from 'react';\nimport type { TextInput as TextInputReactNative } from 'react-native';\nimport type { BaseInputProps } from '../BaseInput';\nimport { BaseInput } from '../BaseInput';\nimport isEmpty from '~utils/lodashButBetter/isEmpty';\nimport type { IconComponent } from '~components/Icons';\nimport { CloseIcon } from '~components/Icons';\nimport { IconButton } from '~components/Button/IconButton';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport { MetaConstants } from '~utils/metaAttribute';\nimport { CharacterCounter } from '~components/Form/CharacterCounter';\nimport BaseBox from '~components/Box/BaseBox';\nimport { Spinner } from '~components/Spinner';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { getPlatformType } from '~utils';\nimport { useMergeRefs } from '~utils/useMergeRefs';\nimport type { BladeElementRef } from '~utils/types';\nimport { hintMarginTop } from '~components/Form/formTokens';\n\n// Users should use PasswordInput for input type password\ntype Type = Exclude<BaseInputProps['type'], 'password'>;\n\ntype TextInputCommonProps = Pick<\n  BaseInputProps,\n  | 'label'\n  | 'accessibilityLabel'\n  | 'labelPosition'\n  | 'necessityIndicator'\n  | 'validationState'\n  | 'helpText'\n  | 'errorText'\n  | 'successText'\n  | 'placeholder'\n  | 'defaultValue'\n  | 'name'\n  | 'onChange'\n  | 'onFocus'\n  | 'onBlur'\n  | 'value'\n  | 'isDisabled'\n  | 'isRequired'\n  | 'prefix'\n  | 'suffix'\n  | 'maxCharacters'\n  | 'autoFocus'\n  | 'keyboardReturnKeyType'\n  | 'autoCompleteSuggestionType'\n  | 'onSubmit'\n  | 'autoCapitalize'\n  | 'testID'\n  | 'onClick'\n  | 'size'\n  | 'leadingIcon'\n  | 'trailingButton'\n  | 'trailingIcon'\n> & {\n  /**\n   * Decides whether to render a clear icon button\n   */\n  showClearButton?: boolean;\n\n  /**\n   * Event handler to handle the onClick event for clear button. Used when `showClearButton` is `true`\n   */\n  onClearButtonClick?: () => void;\n\n  /**\n   * Decides whether to show a loading spinner for the input field.\n   */\n  isLoading?: boolean;\n\n  /**\n   * Icon that will be rendered at the beginning of the input field\n   * @deprecated Use `leadingIcon` instead. This prop will be removed in the next major version.\n   */\n  icon?: IconComponent;\n  /**\n   * Type of Input Field to be rendered. Use `PasswordInput` for type `password`\n   *\n   *\n   * **Note on number type**\n   *\n   * `type=\"number\"` internally uses `inputMode=\"numeric\"` instead of HTML's `type=\"number\"` which also allows text characters.\n   * If you have a usecase where you only want to support number input, you can handle it on validations end.\n   *\n   * Check out [Why the GOV.UK Design System team changed the input type for numbers](https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/) for reasoning\n   *\n   * @default text\n   */\n  type?: Type;\n} & StyledPropsBlade;\n\ntype TextInputKeyboardAndAutoComplete = Pick<\n  BaseInputProps,\n  'keyboardType' | 'keyboardReturnKeyType' | 'autoCompleteSuggestionType' | 'autoCapitalize'\n> & {\n  type: Type;\n};\n\n/*\n  Mandatory accessibilityLabel prop when label is not provided\n*/\ntype TextInputPropsWithA11yLabel = {\n  /**\n   * Label to be shown for the input field\n   */\n  label?: undefined;\n  /**\n   * Accessibility label for the input\n   */\n  accessibilityLabel: string;\n};\n\n/*\n  Optional accessibilityLabel prop when label is provided\n*/\ntype TextInputPropsWithLabel = {\n  /**\n   * Label to be shown for the input field\n   */\n  label: string;\n  /**\n   * Accessibility label for the input\n   */\n  accessibilityLabel?: string;\n};\n\ntype TextInputProps = (TextInputPropsWithA11yLabel | TextInputPropsWithLabel) &\n  TextInputCommonProps;\n\nconst getKeyboardAndAutocompleteProps = ({\n  type = 'text',\n  keyboardReturnKeyType,\n  autoCompleteSuggestionType,\n  autoCapitalize,\n}: TextInputKeyboardAndAutoComplete): TextInputKeyboardAndAutoComplete => {\n  const keyboardAndAutocompleteProps: TextInputKeyboardAndAutoComplete = {\n    type,\n    keyboardType: 'text',\n    keyboardReturnKeyType: 'default',\n    autoCompleteSuggestionType: 'none',\n    autoCapitalize,\n  };\n\n  const keyboardConfigMap = {\n    text: {\n      keyboardType: 'text',\n      keyboardReturnKeyType: 'default',\n      autoCompleteSuggestionType: 'none',\n      autoCapitalize: undefined,\n    },\n    telephone: {\n      keyboardType: 'telephone',\n      keyboardReturnKeyType: 'done',\n      autoCompleteSuggestionType: 'telephone',\n      autoCapitalize: undefined,\n    },\n    email: {\n      keyboardType: 'email',\n      keyboardReturnKeyType: 'done',\n      autoCompleteSuggestionType: 'email',\n      autoCapitalize: 'none',\n    },\n    url: {\n      keyboardType: 'url',\n      keyboardReturnKeyType: 'go',\n      autoCompleteSuggestionType: 'none',\n      autoCapitalize: 'none',\n    },\n    number: {\n      keyboardType: 'decimal',\n      keyboardReturnKeyType: 'done',\n      autoCompleteSuggestionType: 'none',\n      autoCapitalize: undefined,\n    },\n    search: {\n      keyboardType: 'search',\n      keyboardReturnKeyType: 'search',\n      autoCompleteSuggestionType: 'none',\n      autoCapitalize: undefined,\n    },\n  } as const;\n\n  const keyboardConfig = keyboardConfigMap[type];\n\n  keyboardAndAutocompleteProps.keyboardType = keyboardConfig.keyboardType;\n\n  keyboardAndAutocompleteProps.keyboardReturnKeyType =\n    keyboardReturnKeyType ?? keyboardConfig.keyboardReturnKeyType;\n\n  keyboardAndAutocompleteProps.autoCompleteSuggestionType =\n    autoCompleteSuggestionType ?? keyboardConfig.autoCompleteSuggestionType;\n\n  keyboardAndAutocompleteProps.autoCapitalize = keyboardConfig.autoCapitalize;\n\n  if (type === 'number') {\n    /* the default keyboardType:numeric shows alphanumeric keyboard on iOS but number pad on android. making it type:text and keyboardType:decimal fixes this on all platforms.\n     * source: https://css-tricks.com/everything-you-ever-wanted-to-know-about-keyboardType/#aa-decimal\n     */\n    keyboardAndAutocompleteProps.type = 'text';\n  }\n\n  if (type === 'search') {\n    /* when input type:search is provided at that time browser adds a weird close button which collides with our clear button and then we have 2 clear buttons\n     * source: https://github.com/razorpay/blade/issues/857#issue-1457367160\n     */\n    keyboardAndAutocompleteProps.type = 'text';\n  }\n\n  return keyboardAndAutocompleteProps;\n};\n\n// need to do this to tell TS to infer type as TextInput of React Native and make it believe that `ref.current.clear()` exists\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst isReactNative = (_textInputRef: any): _textInputRef is TextInputReactNative => {\n  return getPlatformType() === 'react-native';\n};\n\nconst _TextInput: React.ForwardRefRenderFunction<BladeElementRef, TextInputProps> = (\n  {\n    label,\n    accessibilityLabel,\n    labelPosition = 'top',\n    placeholder,\n    type = 'text',\n    defaultValue,\n    name,\n    value,\n    maxCharacters,\n    onChange,\n    onClick,\n    onFocus,\n    onBlur,\n    onSubmit,\n    isDisabled,\n    necessityIndicator,\n    validationState,\n    errorText,\n    helpText,\n    successText,\n    isRequired,\n    icon,\n    prefix,\n    showClearButton,\n    onClearButtonClick,\n    isLoading,\n    suffix,\n    autoFocus,\n    keyboardReturnKeyType,\n    autoCompleteSuggestionType,\n    autoCapitalize,\n    testID,\n    size = 'medium',\n    leadingIcon,\n    trailingIcon,\n    ...styledProps\n  },\n  ref,\n): ReactElement => {\n  const textInputRef = React.useRef<BladeElementRef>(null);\n  const mergedRef = useMergeRefs(ref, textInputRef);\n  const [shouldShowClearButton, setShouldShowClearButton] = useState(false);\n\n  React.useEffect(() => {\n    setShouldShowClearButton(Boolean(showClearButton && (defaultValue ?? value)));\n  }, [showClearButton, defaultValue, value]);\n\n  const renderInteractionElement = (): ReactNode => {\n    if (isLoading) {\n      return <Spinner accessibilityLabel=\"Loading Content\" color=\"primary\" />;\n    }\n\n    if (shouldShowClearButton) {\n      return (\n        <IconButton\n          size=\"medium\"\n          icon={CloseIcon}\n          onClick={() => {\n            if (isEmpty(value) && textInputRef.current) {\n              // when the input field is uncontrolled take the ref and clear the input and then call the onClearButtonClick function\n              if (isReactNative(textInputRef.current)) {\n                textInputRef.current.clear();\n                textInputRef.current.focus();\n              } else if (textInputRef.current instanceof HTMLInputElement) {\n                textInputRef.current.value = '';\n                textInputRef.current.focus();\n              }\n            }\n            // if the input field is controlled just call the click handler and the value change shall be left upto the consumer\n            onClearButtonClick?.();\n            textInputRef?.current?.focus();\n            setShouldShowClearButton(false);\n          }}\n          isDisabled={isDisabled}\n          accessibilityLabel=\"Clear Input Content\"\n        />\n      );\n    }\n\n    return null;\n  };\n\n  return (\n    <BaseInput\n      id=\"textinput\"\n      componentName={MetaConstants.TextInput}\n      ref={mergedRef}\n      label={label as string}\n      accessibilityLabel={accessibilityLabel}\n      hideLabelText={!Boolean(label)}\n      labelPosition={labelPosition}\n      placeholder={placeholder}\n      defaultValue={defaultValue}\n      value={value}\n      name={name}\n      maxCharacters={maxCharacters}\n      onChange={({ name, value }) => {\n        if (showClearButton && value?.length) {\n          // show the clear button when the user starts typing in\n          setShouldShowClearButton(true);\n        }\n\n        if (shouldShowClearButton && !value?.length) {\n          // hide the clear button when the input field is empty\n          setShouldShowClearButton(false);\n        }\n\n        onChange?.({ name, value });\n      }}\n      onClick={onClick}\n      onFocus={onFocus}\n      onBlur={onBlur}\n      onSubmit={onSubmit}\n      isDisabled={isDisabled}\n      necessityIndicator={necessityIndicator}\n      isRequired={isRequired}\n      leadingIcon={leadingIcon ?? icon}\n      prefix={prefix}\n      interactionElement={renderInteractionElement()}\n      trailingIcon={trailingIcon}\n      suffix={suffix}\n      validationState={validationState}\n      errorText={errorText}\n      helpText={helpText}\n      successText={successText}\n      trailingFooterSlot={(value) => {\n        return maxCharacters ? (\n          <BaseBox marginTop={hintMarginTop[size]} marginRight=\"spacing.1\">\n            <CharacterCounter\n              currentCount={value?.length ?? 0}\n              maxCount={maxCharacters}\n              size={size}\n            />\n          </BaseBox>\n        ) : null;\n      }}\n      // eslint-disable-next-line jsx-a11y/no-autofocus\n      autoFocus={autoFocus}\n      testID={testID}\n      {...getKeyboardAndAutocompleteProps({\n        type,\n        keyboardReturnKeyType,\n        autoCompleteSuggestionType,\n        autoCapitalize,\n      })}\n      size={size}\n      {...styledProps}\n    />\n  );\n};\n\nconst TextInput = assignWithoutSideEffects(React.forwardRef(_TextInput), {\n  displayName: 'TextInput',\n});\n\nexport type { TextInputProps };\nexport { TextInput };\n"],"names":["getKeyboardAndAutocompleteProps","_ref","_ref$type","type","keyboardReturnKeyType","autoCompleteSuggestionType","autoCapitalize","keyboardAndAutocompleteProps","keyboardType","keyboardConfigMap","text","undefined","telephone","email","url","number","search","keyboardConfig","isReactNative","_textInputRef","getPlatformType","_TextInput","_ref2","ref","label","accessibilityLabel","_ref2$labelPosition","labelPosition","placeholder","_ref2$type","defaultValue","name","value","maxCharacters","onChange","onClick","onFocus","onBlur","onSubmit","isDisabled","necessityIndicator","validationState","errorText","helpText","successText","isRequired","icon","prefix","showClearButton","onClearButtonClick","isLoading","suffix","autoFocus","testID","_ref2$size","size","leadingIcon","trailingIcon","styledProps","_objectWithoutProperties","_excluded","textInputRef","React","useRef","mergedRef","useMergeRefs","_useState","useState","_useState2","_slicedToArray","shouldShowClearButton","setShouldShowClearButton","useEffect","Boolean","renderInteractionElement","_jsx","Spinner","color","IconButton","CloseIcon","_textInputRef$current","isEmpty","current","clear","focus","HTMLInputElement","BaseInput","_objectSpread","id","componentName","MetaConstants","TextInput","hideLabelText","_ref3","length","interactionElement","trailingFooterSlot","_value$length","BaseBox","marginTop","hintMarginTop","marginRight","children","CharacterCounter","currentCount","maxCount","assignWithoutSideEffects","forwardRef","displayName"],"mappings":"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"}

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

@@ -4,7 +4,7 @@ import React__default from 'react';
 import { useRadio } from './useRadio.js';
 import { RadioIcon } from './RadioIcon/RadioIcon.js';
 import { useRadioGroupContext } from './RadioGroup/RadioContext.js';
-import { radioHoverTokens } from './radioTokens.js';
+import { radioSizes, radioHoverTokens } from './radioTokens.js';
 import isEmpty from '../../utils/lodashButBetter/isEmpty.js';
 import { SelectorLabel } from '../Form/Selector/SelectorLabel.web.js';
 import '../Box/BaseBox/index.js';
@@ -17,8 +17,10 @@ import '../../utils/index.js';
 import '../../utils/metaAttribute/index.js';
 import '../../utils/logger/index.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
+import useTheme from '../BladeProvider/useTheme.js';
 import { throwBladeError } from '../../utils/logger/logger.js';
 import { getPlatformType } from '../../utils/getPlatformType/getPlatformType.js';
+import { makeSize } from '../../utils/makeSize/makeSize.js';
 import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
 import { getStyledProps } from '../Box/styledProps/getStyledProps.js';
 import { MetaConstants } from '../../utils/metaAttribute/metaConstants.js';
@@ -37,6 +39,8 @@ var _Radio = function _Radio(_ref, ref) {
     size = _ref$size === void 0 ? 'medium' : _ref$size,
     testID = _ref.testID,
     styledProps = _objectWithoutProperties(_ref, _excluded);
+  var _useTheme = useTheme(),
+    theme = _useTheme.theme;
   var groupProps = useRadioGroupContext();
   var isInsideGroup = !isEmpty(groupProps);
   if (true) {
@@ -57,7 +61,6 @@ var _Radio = function _Radio(_ref, ref) {
   var showHelpText = !hasError && helpText;
   var isReactNative = getPlatformType() === 'react-native';
   var _size = (_groupProps$size = groupProps.size) !== null && _groupProps$size !== void 0 ? _groupProps$size : size;
-  var isSmall = _size === 'small';
   var handleChange = function handleChange(_ref2) {
     var isChecked = _ref2.isChecked,
       value = _ref2.value;
@@ -82,6 +85,9 @@ var _Radio = function _Radio(_ref, ref) {
     state = _useRadio.state,
     ids = _useRadio.ids,
     inputProps = _useRadio.inputProps;
+
+  // radio icon's size & margin + margin-left of SelectorTitle which is 2
+  var helpTextLeftSpacing = makeSize(radioSizes.icon[size].width + theme.spacing[3]);
   return /*#__PURE__*/jsx(BaseBox, _objectSpread(_objectSpread({}, getStyledProps(styledProps)), {}, {
     children: /*#__PURE__*/jsx(SelectorLabel, {
       componentName: MetaConstants.RadioLabel,
@@ -112,8 +118,9 @@ var _Radio = function _Radio(_ref, ref) {
             children: children
           }) : null]
         }), showHelpText && /*#__PURE__*/jsx(BaseBox, {
-          marginLeft: isSmall ? 'spacing.6' : 'spacing.7',
+          marginLeft: helpTextLeftSpacing,
           children: /*#__PURE__*/jsx(SelectorSupportText, {
+            size: _size,
             isNegative: true,
             id: ids === null || ids === void 0 ? void 0 : ids.helpTextId,
             children: helpText

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

@@ -1 +1 @@
-{"version":3,"file":"Radio.js","sources":["../../../../../../src/components/Radio/Radio.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-shadow */\nimport React from 'react';\nimport type { OnChange } from './useRadio';\nimport { useRadio } from './useRadio';\nimport { RadioIcon } from './RadioIcon/RadioIcon';\nimport { useRadioGroupContext } from './RadioGroup/RadioContext';\nimport { radioHoverTokens } from './radioTokens';\nimport isEmpty from '~utils/lodashButBetter/isEmpty';\nimport { SelectorLabel } from '~components/Form/Selector/SelectorLabel';\nimport BaseBox from '~components/Box/BaseBox';\nimport { SelectorTitle } from '~components/Form/Selector/SelectorTitle';\nimport { SelectorSupportText } from '~components/Form/Selector/SelectorSupportText';\nimport { SelectorInput } from '~components/Form/Selector/SelectorInput';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport type { BladeElementRef, StringChildrenType, TestID } from '~utils/types';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { getPlatformType } from '~utils';\nimport { MetaConstants } from '~utils/metaAttribute';\nimport { throwBladeError } from '~utils/logger';\n\ntype RadioProps = {\n  /**\n   * Sets the label text of the Radio\n   */\n  children?: StringChildrenType;\n  /**\n   * Help text for the Radio\n   */\n  helpText?: string;\n  /**\n   * The value to be used in the Radio input.\n   * This is the value that will be returned on form submission.\n   */\n  value: string;\n  /**\n   * If `true`, the Radio will be disabled\n   *\n   * @default false\n   */\n  isDisabled?: boolean;\n  /**\n   * Size of the radios\n   *\n   * @default \"medium\"\n   */\n  size?: 'small' | 'medium';\n} & TestID &\n  StyledPropsBlade;\n\nconst _Radio: React.ForwardRefRenderFunction<BladeElementRef, RadioProps> = (\n  { value, children, helpText, isDisabled, size = 'medium', testID, ...styledProps },\n  ref,\n) => {\n  const groupProps = useRadioGroupContext();\n  const isInsideGroup = !isEmpty(groupProps);\n\n  if (__DEV__) {\n    if (!isInsideGroup) {\n      throwBladeError({\n        moduleName: 'Radio',\n        message: 'Cannot use <Radio /> outside of <RadioGroup />',\n      });\n    }\n  }\n\n  const isChecked = groupProps?.state?.isChecked(value);\n  const defaultChecked =\n    groupProps?.defaultValue === undefined ? undefined : groupProps?.defaultValue === value;\n  const validationState = groupProps?.validationState;\n  const hasError = validationState === 'error';\n  const _isDisabled = isDisabled ?? groupProps?.isDisabled;\n  const _isRequired = groupProps?.isRequired || groupProps?.necessityIndicator === 'required';\n  const name = groupProps?.name;\n  const showHelpText = !hasError && helpText;\n  const isReactNative = getPlatformType() === 'react-native';\n  const _size = groupProps.size ?? size;\n  const isSmall = _size === 'small';\n\n  const handleChange: OnChange = ({ isChecked, value }) => {\n    if (isChecked) {\n      groupProps?.state?.setValue(value!);\n    } else {\n      groupProps?.state?.removeValue();\n    }\n  };\n\n  const { state, ids, inputProps } = useRadio({\n    defaultChecked,\n    isChecked,\n    hasError,\n    isDisabled: _isDisabled,\n    isRequired: _isRequired,\n    name,\n    value,\n    onChange: handleChange,\n  });\n\n  return (\n    <BaseBox {...getStyledProps(styledProps)}>\n      <SelectorLabel\n        componentName={MetaConstants.RadioLabel}\n        inputProps={isReactNative ? inputProps : {}}\n        testID={testID}\n      >\n        <BaseBox display=\"flex\" flexDirection=\"column\">\n          <BaseBox display=\"flex\" alignItems=\"center\" flexDirection=\"row\">\n            <SelectorInput\n              hoverTokens={radioHoverTokens}\n              isChecked={state.isChecked}\n              isDisabled={_isDisabled}\n              hasError={hasError}\n              inputProps={inputProps}\n              ref={ref}\n            />\n            <RadioIcon\n              size={_size}\n              isChecked={state.isChecked}\n              isDisabled={_isDisabled}\n              isNegative={hasError}\n            />\n            {children ? (\n              <SelectorTitle size={_size} isDisabled={_isDisabled}>\n                {children}\n              </SelectorTitle>\n            ) : null}\n          </BaseBox>\n          {showHelpText && (\n            <BaseBox marginLeft={isSmall ? 'spacing.6' : 'spacing.7'}>\n              <SelectorSupportText isNegative={true} id={ids?.helpTextId}>\n                {helpText}\n              </SelectorSupportText>\n            </BaseBox>\n          )}\n        </BaseBox>\n      </SelectorLabel>\n    </BaseBox>\n  );\n};\n\nconst Radio = assignWithoutSideEffects(React.forwardRef(_Radio), { displayName: 'Radio' });\n\nexport type { RadioProps };\nexport { Radio };\n"],"names":["_Radio","_ref","ref","_groupProps$state","_groupProps$size","value","children","helpText","isDisabled","_ref$size","size","testID","styledProps","_objectWithoutProperties","_excluded","groupProps","useRadioGroupContext","isInsideGroup","isEmpty","throwBladeError","moduleName","message","isChecked","state","defaultChecked","defaultValue","undefined","validationState","hasError","_isDisabled","_isRequired","isRequired","necessityIndicator","name","showHelpText","isReactNative","getPlatformType","_size","isSmall","handleChange","_ref2","_groupProps$state2","setValue","_groupProps$state3","removeValue","_useRadio","useRadio","onChange","ids","inputProps","_jsx","BaseBox","_objectSpread","getStyledProps","SelectorLabel","componentName","MetaConstants","RadioLabel","_jsxs","display","flexDirection","alignItems","SelectorInput","hoverTokens","radioHoverTokens","RadioIcon","isNegative","SelectorTitle","marginLeft","SelectorSupportText","id","helpTextId","Radio","assignWithoutSideEffects","React","forwardRef","displayName"],"mappings":"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"}
+{"version":3,"file":"Radio.js","sources":["../../../../../../src/components/Radio/Radio.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/restrict-plus-operands */\n/* eslint-disable @typescript-eslint/no-shadow */\nimport React from 'react';\nimport type { OnChange } from './useRadio';\nimport { useRadio } from './useRadio';\nimport { RadioIcon } from './RadioIcon/RadioIcon';\nimport { useRadioGroupContext } from './RadioGroup/RadioContext';\nimport { radioHoverTokens, radioSizes } from './radioTokens';\nimport isEmpty from '~utils/lodashButBetter/isEmpty';\nimport { SelectorLabel } from '~components/Form/Selector/SelectorLabel';\nimport BaseBox from '~components/Box/BaseBox';\nimport { SelectorTitle } from '~components/Form/Selector/SelectorTitle';\nimport { SelectorSupportText } from '~components/Form/Selector/SelectorSupportText';\nimport { SelectorInput } from '~components/Form/Selector/SelectorInput';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport type { BladeElementRef, StringChildrenType, TestID } from '~utils/types';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { getPlatformType, makeSize, useTheme } from '~utils';\nimport { MetaConstants } from '~utils/metaAttribute';\nimport { throwBladeError } from '~utils/logger';\n\ntype RadioProps = {\n  /**\n   * Sets the label text of the Radio\n   */\n  children?: StringChildrenType;\n  /**\n   * Help text for the Radio\n   */\n  helpText?: string;\n  /**\n   * The value to be used in the Radio input.\n   * This is the value that will be returned on form submission.\n   */\n  value: string;\n  /**\n   * If `true`, the Radio will be disabled\n   *\n   * @default false\n   */\n  isDisabled?: boolean;\n  /**\n   * Size of the radios\n   *\n   * @default \"medium\"\n   */\n  size?: 'small' | 'medium' | 'large';\n} & TestID &\n  StyledPropsBlade;\n\nconst _Radio: React.ForwardRefRenderFunction<BladeElementRef, RadioProps> = (\n  { value, children, helpText, isDisabled, size = 'medium', testID, ...styledProps },\n  ref,\n) => {\n  const { theme } = useTheme();\n  const groupProps = useRadioGroupContext();\n  const isInsideGroup = !isEmpty(groupProps);\n\n  if (__DEV__) {\n    if (!isInsideGroup) {\n      throwBladeError({\n        moduleName: 'Radio',\n        message: 'Cannot use <Radio /> outside of <RadioGroup />',\n      });\n    }\n  }\n\n  const isChecked = groupProps?.state?.isChecked(value);\n  const defaultChecked =\n    groupProps?.defaultValue === undefined ? undefined : groupProps?.defaultValue === value;\n  const validationState = groupProps?.validationState;\n  const hasError = validationState === 'error';\n  const _isDisabled = isDisabled ?? groupProps?.isDisabled;\n  const _isRequired = groupProps?.isRequired || groupProps?.necessityIndicator === 'required';\n  const name = groupProps?.name;\n  const showHelpText = !hasError && helpText;\n  const isReactNative = getPlatformType() === 'react-native';\n  const _size = groupProps.size ?? size;\n\n  const handleChange: OnChange = ({ isChecked, value }) => {\n    if (isChecked) {\n      groupProps?.state?.setValue(value!);\n    } else {\n      groupProps?.state?.removeValue();\n    }\n  };\n\n  const { state, ids, inputProps } = useRadio({\n    defaultChecked,\n    isChecked,\n    hasError,\n    isDisabled: _isDisabled,\n    isRequired: _isRequired,\n    name,\n    value,\n    onChange: handleChange,\n  });\n\n  // radio icon's size & margin + margin-left of SelectorTitle which is 2\n  const helpTextLeftSpacing = makeSize(radioSizes.icon[size].width + theme.spacing[3]);\n\n  return (\n    <BaseBox {...getStyledProps(styledProps)}>\n      <SelectorLabel\n        componentName={MetaConstants.RadioLabel}\n        inputProps={isReactNative ? inputProps : {}}\n        testID={testID}\n      >\n        <BaseBox display=\"flex\" flexDirection=\"column\">\n          <BaseBox display=\"flex\" alignItems=\"center\" flexDirection=\"row\">\n            <SelectorInput\n              hoverTokens={radioHoverTokens}\n              isChecked={state.isChecked}\n              isDisabled={_isDisabled}\n              hasError={hasError}\n              inputProps={inputProps}\n              ref={ref}\n            />\n            <RadioIcon\n              size={_size}\n              isChecked={state.isChecked}\n              isDisabled={_isDisabled}\n              isNegative={hasError}\n            />\n            {children ? (\n              <SelectorTitle size={_size} isDisabled={_isDisabled}>\n                {children}\n              </SelectorTitle>\n            ) : null}\n          </BaseBox>\n          {showHelpText && (\n            <BaseBox marginLeft={helpTextLeftSpacing}>\n              <SelectorSupportText size={_size} isNegative={true} id={ids?.helpTextId}>\n                {helpText}\n              </SelectorSupportText>\n            </BaseBox>\n          )}\n        </BaseBox>\n      </SelectorLabel>\n    </BaseBox>\n  );\n};\n\nconst Radio = assignWithoutSideEffects(React.forwardRef(_Radio), { displayName: 'Radio' });\n\nexport type { RadioProps };\nexport { Radio };\n"],"names":["_Radio","_ref","ref","_groupProps$state","_groupProps$size","value","children","helpText","isDisabled","_ref$size","size","testID","styledProps","_objectWithoutProperties","_excluded","_useTheme","useTheme","theme","groupProps","useRadioGroupContext","isInsideGroup","isEmpty","throwBladeError","moduleName","message","isChecked","state","defaultChecked","defaultValue","undefined","validationState","hasError","_isDisabled","_isRequired","isRequired","necessityIndicator","name","showHelpText","isReactNative","getPlatformType","_size","handleChange","_ref2","_groupProps$state2","setValue","_groupProps$state3","removeValue","_useRadio","useRadio","onChange","ids","inputProps","helpTextLeftSpacing","makeSize","radioSizes","icon","width","spacing","_jsx","BaseBox","_objectSpread","getStyledProps","SelectorLabel","componentName","MetaConstants","RadioLabel","_jsxs","display","flexDirection","alignItems","SelectorInput","hoverTokens","radioHoverTokens","RadioIcon","isNegative","SelectorTitle","marginLeft","SelectorSupportText","id","helpTextId","Radio","assignWithoutSideEffects","React","forwardRef","displayName"],"mappings":"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"}

package/build/lib/web/development/components/Radio/RadioGroup/RadioGroup.js

@@ -86,6 +86,7 @@ var RadioGroup = function RadioGroup(_ref) {
           position: labelPosition,
           id: ids.labelId,
           accessibilityText: accessibilityText && ",".concat(accessibilityText),
+          size: size,
           children: label
         }) : null, /*#__PURE__*/jsxs(BaseBox, {
           children: [/*#__PURE__*/jsx(BaseBox, {
@@ -98,6 +99,7 @@ var RadioGroup = function RadioGroup(_ref) {
               }, index);
             })
           }), /*#__PURE__*/jsx(FormHint, {
+            size: size,
             type: validationState === 'error' ? 'error' : 'help',
             errorText: errorText,
             helpText: helpText

package/build/lib/web/development/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';\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            >\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              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","concat","trim","gap","radioSizes","group","childCount","React","Children","count","_jsx","RadioGroupProvider","BaseBox","_objectSpread","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 { 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","concat","trim","gap","radioSizes","group","childCount","React","Children","count","_jsx","RadioGroupProvider","BaseBox","_objectSpread","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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"}

package/build/lib/web/development/components/Radio/radioTokens.js

@@ -5,12 +5,16 @@ var radioSizes = {
   group: {
     gap: {
       small: {
-        mobile: 'spacing.2',
-        desktop: 'spacing.0'
-      },
-      medium: {
         mobile: 'spacing.3',
         desktop: 'spacing.2'
+      },
+      medium: {
+        mobile: 'spacing.4',
+        desktop: 'spacing.3'
+      },
+      large: {
+        mobile: 'spacing.5',
+        desktop: 'spacing.4'
       }
     }
   },
@@ -24,6 +28,11 @@ var radioSizes = {
       width: size[16],
       height: size[16],
       dotRadius: size[3]
+    },
+    large: {
+      width: size[20],
+      height: size[20],
+      dotRadius: size[4]
     }
   }
 };

package/build/lib/web/development/components/Radio/radioTokens.js.map

@@ -1 +1 @@
-{"version":3,"file":"radioTokens.js","sources":["../../../../../../src/components/Radio/radioTokens.ts"],"sourcesContent":["import type { Theme } from '~components/BladeProvider';\nimport type { SelectorInputHoverTokens } from '~components/Form/Selector/types';\nimport type { DotNotationToken } from '~utils/lodashButBetter/get';\nimport { size } from '~tokens/global';\n\nconst radioSizes = {\n  group: {\n    gap: {\n      small: {\n        mobile: 'spacing.2',\n        desktop: 'spacing.0',\n      },\n      medium: {\n        mobile: 'spacing.3',\n        desktop: 'spacing.2',\n      },\n    },\n  },\n  icon: {\n    small: {\n      width: size[12],\n      height: size[12],\n      dotRadius: size[2],\n    },\n    medium: {\n      width: size[16],\n      height: size[16],\n      dotRadius: size[3],\n    },\n  },\n} as const;\n\ntype ColorTokens = `colors.${DotNotationToken<Theme['colors']>}`;\ntype Variant = {\n  dot: {\n    checked: ColorTokens;\n    unchecked: ColorTokens;\n  };\n  border: {\n    checked: ColorTokens;\n    unchecked: ColorTokens;\n  };\n  background: {\n    checked: ColorTokens;\n    unchecked: ColorTokens;\n  };\n};\n\ntype RadioIconColors = {\n  variants: {\n    default: Variant;\n    disabled: Variant;\n    negative: Variant;\n  };\n};\n\nconst radioIconColors: RadioIconColors = {\n  variants: {\n    default: {\n      dot: {\n        checked: 'colors.interactive.icon.onPrimary.normal',\n        unchecked: 'colors.transparent',\n      },\n      border: {\n        checked: 'colors.interactive.border.primary.default',\n        unchecked: 'colors.interactive.border.gray.default',\n      },\n      background: {\n        checked: 'colors.interactive.background.primary.default',\n        unchecked: 'colors.transparent',\n      },\n    },\n    disabled: {\n      dot: {\n        checked: 'colors.interactive.icon.onPrimary.normal',\n        unchecked: 'colors.interactive.icon.onPrimary.normal',\n      },\n      border: {\n        checked: 'colors.transparent',\n        unchecked: 'colors.interactive.border.gray.disabled',\n      },\n      background: {\n        checked: 'colors.interactive.background.primary.disabled',\n        unchecked: 'colors.transparent',\n      },\n    },\n    negative: {\n      dot: {\n        checked: 'colors.interactive.icon.onPrimary.normal',\n        unchecked: 'colors.transparent',\n      },\n      border: {\n        checked: 'colors.interactive.border.negative.default',\n        unchecked: 'colors.interactive.border.negative.default',\n      },\n      background: {\n        checked: 'colors.interactive.background.negative.default',\n        unchecked: 'colors.transparent',\n      },\n    },\n  },\n} as const;\n\nconst radioHoverTokens: SelectorInputHoverTokens = {\n  default: {\n    background: {\n      checked: 'colors.interactive.background.primary.highlighted',\n      unchecked: 'colors.interactive.background.gray.faded',\n    },\n    border: {\n      checked: 'colors.interactive.background.primary.highlighted', // Intentionally not using border tokens here since we want to match the background color\n      unchecked: 'colors.interactive.border.gray.default',\n    },\n  },\n};\n\nexport { radioSizes, radioIconColors, radioHoverTokens };\n"],"names":["radioSizes","group","gap","small","mobile","desktop","medium","icon","width","size","height","dotRadius","radioIconColors","variants","dot","checked","unchecked","border","background","disabled","negative","radioHoverTokens"],"mappings":";;;AAKA,IAAMA,UAAU,GAAG;AACjBC,EAAAA,KAAK,EAAE;AACLC,IAAAA,GAAG,EAAE;AACHC,MAAAA,KAAK,EAAE;AACLC,QAAAA,MAAM,EAAE,WAAW;AACnBC,QAAAA,OAAO,EAAE,WAAA;OACV;AACDC,MAAAA,MAAM,EAAE;AACNF,QAAAA,MAAM,EAAE,WAAW;AACnBC,QAAAA,OAAO,EAAE,WAAA;AACX,OAAA;AACF,KAAA;GACD;AACDE,EAAAA,IAAI,EAAE;AACJJ,IAAAA,KAAK,EAAE;AACLK,MAAAA,KAAK,EAAEC,IAAI,CAAC,EAAE,CAAC;AACfC,MAAAA,MAAM,EAAED,IAAI,CAAC,EAAE,CAAC;MAChBE,SAAS,EAAEF,IAAI,CAAC,CAAC,CAAA;KAClB;AACDH,IAAAA,MAAM,EAAE;AACNE,MAAAA,KAAK,EAAEC,IAAI,CAAC,EAAE,CAAC;AACfC,MAAAA,MAAM,EAAED,IAAI,CAAC,EAAE,CAAC;MAChBE,SAAS,EAAEF,IAAI,CAAC,CAAC,CAAA;AACnB,KAAA;AACF,GAAA;AACF,EAAU;AA0BV,IAAMG,eAAgC,GAAG;AACvCC,EAAAA,QAAQ,EAAE;IACR,SAAS,EAAA;AACPC,MAAAA,GAAG,EAAE;AACHC,QAAAA,OAAO,EAAE,0CAA0C;AACnDC,QAAAA,SAAS,EAAE,oBAAA;OACZ;AACDC,MAAAA,MAAM,EAAE;AACNF,QAAAA,OAAO,EAAE,2CAA2C;AACpDC,QAAAA,SAAS,EAAE,wCAAA;OACZ;AACDE,MAAAA,UAAU,EAAE;AACVH,QAAAA,OAAO,EAAE,+CAA+C;AACxDC,QAAAA,SAAS,EAAE,oBAAA;AACb,OAAA;KACD;AACDG,IAAAA,QAAQ,EAAE;AACRL,MAAAA,GAAG,EAAE;AACHC,QAAAA,OAAO,EAAE,0CAA0C;AACnDC,QAAAA,SAAS,EAAE,0CAAA;OACZ;AACDC,MAAAA,MAAM,EAAE;AACNF,QAAAA,OAAO,EAAE,oBAAoB;AAC7BC,QAAAA,SAAS,EAAE,yCAAA;OACZ;AACDE,MAAAA,UAAU,EAAE;AACVH,QAAAA,OAAO,EAAE,gDAAgD;AACzDC,QAAAA,SAAS,EAAE,oBAAA;AACb,OAAA;KACD;AACDI,IAAAA,QAAQ,EAAE;AACRN,MAAAA,GAAG,EAAE;AACHC,QAAAA,OAAO,EAAE,0CAA0C;AACnDC,QAAAA,SAAS,EAAE,oBAAA;OACZ;AACDC,MAAAA,MAAM,EAAE;AACNF,QAAAA,OAAO,EAAE,4CAA4C;AACrDC,QAAAA,SAAS,EAAE,4CAAA;OACZ;AACDE,MAAAA,UAAU,EAAE;AACVH,QAAAA,OAAO,EAAE,gDAAgD;AACzDC,QAAAA,SAAS,EAAE,oBAAA;AACb,OAAA;AACF,KAAA;AACF,GAAA;AACF,EAAU;AAEV,IAAMK,gBAA0C,GAAG;EACjD,SAAS,EAAA;AACPH,IAAAA,UAAU,EAAE;AACVH,MAAAA,OAAO,EAAE,mDAAmD;AAC5DC,MAAAA,SAAS,EAAE,0CAAA;KACZ;AACDC,IAAAA,MAAM,EAAE;AACNF,MAAAA,OAAO,EAAE,mDAAmD;AAAE;AAC9DC,MAAAA,SAAS,EAAE,wCAAA;AACb,KAAA;AACF,GAAA;AACF;;;;"}
+{"version":3,"file":"radioTokens.js","sources":["../../../../../../src/components/Radio/radioTokens.ts"],"sourcesContent":["import type { Theme } from '~components/BladeProvider';\nimport type { SelectorInputHoverTokens } from '~components/Form/Selector/types';\nimport type { DotNotationToken } from '~utils/lodashButBetter/get';\nimport { size } from '~tokens/global';\n\nconst radioSizes = {\n  group: {\n    gap: {\n      small: {\n        mobile: 'spacing.3',\n        desktop: 'spacing.2',\n      },\n      medium: {\n        mobile: 'spacing.4',\n        desktop: 'spacing.3',\n      },\n      large: {\n        mobile: 'spacing.5',\n        desktop: 'spacing.4',\n      },\n    },\n  },\n  icon: {\n    small: {\n      width: size[12],\n      height: size[12],\n      dotRadius: size[2],\n    },\n    medium: {\n      width: size[16],\n      height: size[16],\n      dotRadius: size[3],\n    },\n    large: {\n      width: size[20],\n      height: size[20],\n      dotRadius: size[4],\n    },\n  },\n} as const;\n\ntype ColorTokens = `colors.${DotNotationToken<Theme['colors']>}`;\ntype Variant = {\n  dot: {\n    checked: ColorTokens;\n    unchecked: ColorTokens;\n  };\n  border: {\n    checked: ColorTokens;\n    unchecked: ColorTokens;\n  };\n  background: {\n    checked: ColorTokens;\n    unchecked: ColorTokens;\n  };\n};\n\ntype RadioIconColors = {\n  variants: {\n    default: Variant;\n    disabled: Variant;\n    negative: Variant;\n  };\n};\n\nconst radioIconColors: RadioIconColors = {\n  variants: {\n    default: {\n      dot: {\n        checked: 'colors.interactive.icon.onPrimary.normal',\n        unchecked: 'colors.transparent',\n      },\n      border: {\n        checked: 'colors.interactive.border.primary.default',\n        unchecked: 'colors.interactive.border.gray.default',\n      },\n      background: {\n        checked: 'colors.interactive.background.primary.default',\n        unchecked: 'colors.transparent',\n      },\n    },\n    disabled: {\n      dot: {\n        checked: 'colors.interactive.icon.onPrimary.normal',\n        unchecked: 'colors.interactive.icon.onPrimary.normal',\n      },\n      border: {\n        checked: 'colors.transparent',\n        unchecked: 'colors.interactive.border.gray.disabled',\n      },\n      background: {\n        checked: 'colors.interactive.background.primary.disabled',\n        unchecked: 'colors.transparent',\n      },\n    },\n    negative: {\n      dot: {\n        checked: 'colors.interactive.icon.onPrimary.normal',\n        unchecked: 'colors.transparent',\n      },\n      border: {\n        checked: 'colors.interactive.border.negative.default',\n        unchecked: 'colors.interactive.border.negative.default',\n      },\n      background: {\n        checked: 'colors.interactive.background.negative.default',\n        unchecked: 'colors.transparent',\n      },\n    },\n  },\n} as const;\n\nconst radioHoverTokens: SelectorInputHoverTokens = {\n  default: {\n    background: {\n      checked: 'colors.interactive.background.primary.highlighted',\n      unchecked: 'colors.interactive.background.gray.faded',\n    },\n    border: {\n      checked: 'colors.interactive.background.primary.highlighted', // Intentionally not using border tokens here since we want to match the background color\n      unchecked: 'colors.interactive.border.gray.default',\n    },\n  },\n};\n\nexport { radioSizes, radioIconColors, radioHoverTokens };\n"],"names":["radioSizes","group","gap","small","mobile","desktop","medium","large","icon","width","size","height","dotRadius","radioIconColors","variants","dot","checked","unchecked","border","background","disabled","negative","radioHoverTokens"],"mappings":"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"}

package/build/lib/web/development/components/Table/TableBody.web.js

@@ -228,6 +228,9 @@ var TableCheckboxCell = function TableCheckboxCell(_ref6) {
       justifyContent: "center",
       flex: 1,
       width: makeSize(checkboxCellWidth),
+      onClick: function onClick(e) {
+        return e.stopPropagation();
+      },
       children: /*#__PURE__*/jsx(Checkbox, {
         isDisabled: isDisabled,
         isChecked: isChecked,

package/build/lib/web/development/components/Table/TableBody.web.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableBody.web.js","sources":["../../../../../../src/components/Table/TableBody.web.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\nimport { Body, Row, Cell } from '@table-library/react-table-library/table';\nimport styled from 'styled-components';\nimport { useTableContext } from './TableContext';\nimport { checkboxCellWidth, tableRow } from './tokens';\nimport { ComponentIds } from './componentIds';\nimport type {\n  TableProps,\n  TableBodyProps,\n  TableRowProps,\n  TableCellProps,\n  TableBackgroundColors,\n} from './types';\nimport getIn from '~utils/lodashButBetter/get';\nimport { Text } from '~components/Typography';\nimport type { CheckboxProps } from '~components/Checkbox';\nimport { Checkbox } from '~components/Checkbox';\nimport { makeMotionTime, makeSize, makeSpace } from '~utils';\nimport BaseBox from '~components/Box/BaseBox';\nimport { MetaConstants, metaAttribute } from '~utils/metaAttribute';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { getFocusRingStyles } from '~utils/getFocusRingStyles';\n\nconst StyledBody = styled(Body)<{ $isSelectable: boolean; $showStripedRows: boolean }>(\n  ({ theme, $showStripedRows, $isSelectable }) => {\n    const rowBackgroundTransition = `background-color ${makeMotionTime(\n      getIn(theme.motion, tableRow.backgroundColorMotionDuration),\n    )} ${getIn(theme.motion, tableRow.backgroundColorMotionEasing)}`;\n\n    return {\n      '&&&': {\n        border: 'none',\n        transition: rowBackgroundTransition,\n        '& tr:last-child .cell-wrapper': {\n          borderBottom: 'none',\n        },\n\n        '& .row-select-single-selected .cell-wrapper-base, .row-select-selected .cell-wrapper-base': {\n          backgroundColor: getIn(theme.colors, tableRow.nonStripe.backgroundColorSelected),\n        },\n        '& .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base, .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base': {\n          backgroundColor: getIn(theme.colors, tableRow.nonStripe.backgroundColorSelectedHover),\n        },\n        '& .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base, .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base': {\n          backgroundColor: getIn(theme.colors, tableRow.nonStripe.backgroundColorSelectedFocus),\n        },\n        '& .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base, .row-select-selected:active:not(.disabled-row) .cell-wrapper-base': {\n          backgroundColor: getIn(theme.colors, tableRow.nonStripe.backgroundColorSelectedActive),\n        },\n\n        ...($isSelectable && {\n          '& tr:active:not(.disabled-row) .cell-wrapper': {\n            backgroundColor: getIn(theme.colors, tableRow.nonStripeWrapper.backgroundColorActive),\n          },\n        }),\n\n        ...($showStripedRows && {\n          '& tr:nth-child(even) .cell-wrapper': {\n            backgroundColor: getIn(theme.colors, tableRow.stripeWrapper.backgroundColor),\n          },\n          '& tr:nth-child(even) .cell-wrapper-base': {\n            backgroundColor: tableRow.stripe.backgroundColor,\n          },\n        }),\n\n        ...($showStripedRows &&\n          $isSelectable && {\n            '& tr:nth-child(even):hover:not(.disabled-row) .cell-wrapper': {\n              backgroundColor: getIn(theme.colors, tableRow.stripeWrapper.backgroundColorHover),\n            },\n            '& tr:nth-child(even):focus:not(.disabled-row) .cell-wrapper': {\n              backgroundColor: getIn(theme.colors, tableRow.stripeWrapper.backgroundColorFocus),\n            },\n            '& tr:nth-child(even):active:not(.disabled-row) .cell-wrapper': {\n              backgroundColor: getIn(theme.colors, tableRow.stripeWrapper.backgroundColorActive),\n            },\n            '& .row-select-single-selected:nth-child(even) .cell-wrapper, .row-select-selected:nth-child(even) .cell-wrapper': {\n              backgroundColor: getIn(theme.colors, tableRow.stripeWrapper.backgroundColorSelected),\n            },\n            '& .row-select-single-selected:nth-child(even):hover:not(.disabled-row) .cell-wrapper, .row-select-selected:nth-child(even):hover:not(.disabled-row) .cell-wrapper': {\n              backgroundColor: getIn(\n                theme.colors,\n                tableRow.stripeWrapper.backgroundColorSelectedHover,\n              ),\n            },\n            '& .row-select-single-selected:nth-child(even):focus:not(.disabled-row) .cell-wrapper, .row-select-selected:nth-child(even):focus:not(.disabled-row) .cell-wrapper': {\n              backgroundColor: getIn(\n                theme.colors,\n                tableRow.stripeWrapper.backgroundColorSelectedFocus,\n              ),\n            },\n            '& .row-select-single-selected:nth-child(even):active:not(.disabled-row) .cell-wrapper, .row-select-selected:nth-child(even):active:not(.disabled-row) .cell-wrapper': {\n              backgroundColor: getIn(\n                theme.colors,\n                tableRow.stripeWrapper.backgroundColorSelectedActive,\n              ),\n            },\n\n            '& tr:nth-child(even):hover:not(.disabled-row) .cell-wrapper-base': {\n              backgroundColor: getIn(theme.colors, tableRow.stripe.backgroundColorHover),\n            },\n            '& tr:nth-child(even):focus:not(.disabled-row) .cell-wrapper-base': {\n              backgroundColor: getIn(theme.colors, tableRow.stripe.backgroundColorFocus),\n            },\n            '& tr:nth-child(even):active:not(.disabled-row) .cell-wrapper-base': {\n              backgroundColor: getIn(theme.colors, tableRow.stripe.backgroundColorActive),\n            },\n\n            '& .row-select-single-selected:nth-child(even) .cell-wrapper-base, .row-select-selected:nth-child(even) .cell-wrapper-base ': {\n              backgroundColor: getIn(theme.colors, tableRow.stripe.backgroundColorSelected),\n            },\n            '& .row-select-single-selected:nth-child(even):hover:not(.disabled-row) .cell-wrapper-base, .row-select-selected:nth-child(even):hover:not(.disabled-row) .cell-wrapper-base ': {\n              backgroundColor: getIn(theme.colors, tableRow.stripe.backgroundColorSelectedHover),\n            },\n            '& .row-select-single-selected:nth-child(even):focus:not(.disabled-row) .cell-wrapper-base, .row-select-selected:nth-child(even):focus:not(.disabled-row) .cell-wrapper-base ': {\n              backgroundColor: getIn(theme.colors, tableRow.stripe.backgroundColorSelectedFocus),\n            },\n            '& .row-select-single-selected:nth-child(even):active:not(.disabled-row) .cell-wrapper-base, .row-select-selected:nth-child(even):active:not(.disabled-row) .cell-wrapper-base ': {\n              backgroundColor: getIn(theme.colors, tableRow.stripe.backgroundColorSelectedActive),\n            },\n          }),\n      },\n    };\n  },\n);\n\nconst _TableBody = ({ children }: TableBodyProps): React.ReactElement => {\n  const { showStripedRows, selectionType } = useTableContext();\n  const isSelectable = selectionType !== 'none';\n\n  return (\n    <StyledBody\n      $isSelectable={isSelectable}\n      $showStripedRows={showStripedRows}\n      {...metaAttribute({ name: MetaConstants.TableBody })}\n    >\n      {children}\n    </StyledBody>\n  );\n};\n\nconst TableBody = assignWithoutSideEffects(_TableBody, {\n  componentId: ComponentIds.TableBody,\n});\n\nconst StyledCell = styled(Cell)<{\n  $backgroundColor: TableBackgroundColors;\n}>(({ theme, $backgroundColor }) => ({\n  '&&&': {\n    height: '100%',\n    backgroundColor: getIn(theme.colors, $backgroundColor),\n    '& > div:first-child': {\n      alignSelf: 'stretch',\n    },\n    '&:focus-visible': getFocusRingStyles({ theme, negativeOffset: true }),\n  },\n}));\n\nconst CellWrapper = styled(BaseBox)<{\n  rowDensity: NonNullable<TableProps<unknown>['rowDensity']>;\n  showStripedRows?: boolean;\n}>(({ theme, rowDensity, showStripedRows }) => {\n  const rowBackgroundTransition = `background-color ${makeMotionTime(\n    getIn(theme.motion, tableRow.backgroundColorMotionDuration),\n  )} ${getIn(theme.motion, tableRow.backgroundColorMotionEasing)}`;\n\n  return {\n    '&&&': {\n      transition: rowBackgroundTransition,\n      backgroundColor: tableRow.nonStripeWrapper.backgroundColor,\n      paddingTop: makeSpace(getIn(theme, tableRow.paddingTop[rowDensity])),\n      paddingBottom: makeSpace(getIn(theme, tableRow.paddingBottom[rowDensity])),\n      paddingLeft: makeSpace(getIn(theme, tableRow.paddingLeft[rowDensity])),\n      paddingRight: makeSpace(getIn(theme, tableRow.paddingRight[rowDensity])),\n      height: '100%',\n      ...(!showStripedRows && {\n        borderBottomWidth: makeSpace(getIn(theme.border.width, tableRow.borderBottomWidth)),\n        borderBottomColor: getIn(theme.colors, tableRow.borderBottomColor),\n        borderBottomStyle: 'solid',\n      }),\n    },\n  };\n});\n\nconst _TableCell = ({ children }: TableCellProps): React.ReactElement => {\n  const isChildrenString = typeof children === 'string';\n  const { selectionType, rowDensity, showStripedRows, backgroundColor } = useTableContext();\n  const isSelectable = selectionType !== 'none';\n\n  return (\n    <StyledCell\n      tabIndex={0}\n      role=\"cell\"\n      $backgroundColor={backgroundColor}\n      {...metaAttribute({ name: MetaConstants.TableCell })}\n    >\n      <BaseBox className=\"cell-wrapper-base\" display=\"flex\" alignItems=\"center\" height=\"100%\">\n        <CellWrapper\n          className=\"cell-wrapper\"\n          rowDensity={rowDensity}\n          showStripedRows={showStripedRows}\n          display=\"flex\"\n          alignItems=\"center\"\n          flex={1}\n          // when a direct string child is passed we want to disable pointer events\n          // for custom cells components, consumers can handle pointer events themselves\n          pointerEvents={isChildrenString && isSelectable ? 'none' : 'auto'}\n        >\n          {isChildrenString ? <Text size=\"medium\">{children}</Text> : children}\n        </CellWrapper>\n      </BaseBox>\n    </StyledCell>\n  );\n};\n\nconst TableCell = assignWithoutSideEffects(_TableCell, {\n  componentId: ComponentIds.TableCell,\n});\n\nconst TableCheckboxCell = ({\n  isChecked,\n  onChange,\n  isDisabled,\n}: {\n  isChecked: CheckboxProps['isChecked'];\n  onChange: CheckboxProps['onChange'];\n  isDisabled?: boolean;\n}): React.ReactElement => {\n  return (\n    <TableCell>\n      <BaseBox\n        display=\"flex\"\n        alignItems=\"center\"\n        justifyContent=\"center\"\n        flex={1}\n        width={makeSize(checkboxCellWidth)}\n      >\n        <Checkbox isDisabled={isDisabled} isChecked={isChecked} onChange={onChange} />\n      </BaseBox>\n    </TableCell>\n  );\n};\n\nconst StyledRow = styled(Row)<{ $isSelectable: boolean; $isHoverable: boolean }>(\n  ({ theme, $isSelectable, $isHoverable }) => {\n    const rowBackgroundTransition = `background-color ${makeMotionTime(\n      getIn(theme.motion, tableRow.backgroundColorMotionDuration),\n    )} ${getIn(theme.motion, tableRow.backgroundColorMotionEasing)}`;\n\n    return {\n      '&&&': {\n        backgroundColor: 'transparent',\n        ...(($isHoverable || $isSelectable) && {\n          '&:hover:not(.disabled-row) .cell-wrapper-base': {\n            transition: rowBackgroundTransition,\n            cursor: 'pointer',\n            backgroundColor: getIn(theme.colors, tableRow.nonStripe.backgroundColorHover),\n          },\n        }),\n        ...($isSelectable && {\n          '&:focus:not(.disabled-row) .cell-wrapper-base': {\n            transition: rowBackgroundTransition,\n            backgroundColor: getIn(theme.colors, tableRow.nonStripe.backgroundColorFocus),\n            cursor: 'pointer',\n          },\n          '&:active:not(.disabled-row) .cell-wrapper-base': {\n            transition: rowBackgroundTransition,\n            backgroundColor: getIn(theme.colors, tableRow.nonStripe.backgroundColorActive),\n            cursor: 'pointer',\n          },\n        }),\n        '&:focus': getFocusRingStyles({ theme, negativeOffset: true }),\n      },\n    };\n  },\n);\n\nconst _TableRow = <Item,>({\n  children,\n  item,\n  isDisabled,\n  onHover,\n  onClick,\n}: TableRowProps<Item>): React.ReactElement => {\n  const {\n    selectionType,\n    selectedRows,\n    toggleRowSelectionById,\n    setDisabledRows,\n  } = useTableContext();\n  const isSelectable = selectionType !== 'none';\n  const isMultiSelect = selectionType === 'multiple';\n  const isSelected = selectedRows?.includes(item.id);\n  useEffect(() => {\n    if (isDisabled) {\n      setDisabledRows((prev) => [...prev, item.id]);\n    }\n  }, [isDisabled, item.id, setDisabledRows]);\n\n  return (\n    <StyledRow\n      disabled={isDisabled}\n      $isSelectable={isDisabled ? false : isSelectable}\n      $isHoverable={isDisabled ? false : Boolean(onHover) || Boolean(onClick)}\n      item={item}\n      className={isDisabled ? 'disabled-row' : ''}\n      onMouseEnter={() => onHover?.({ item })}\n      onClick={() => onClick?.({ item })}\n      {...metaAttribute({ name: MetaConstants.TableRow })}\n    >\n      {isMultiSelect && (\n        <TableCheckboxCell\n          isChecked={isSelected}\n          onChange={() => !isDisabled && toggleRowSelectionById(item.id)}\n          isDisabled={isDisabled}\n        />\n      )}\n      {children}\n    </StyledRow>\n  );\n};\n\nconst TableRow = assignWithoutSideEffects(_TableRow, {\n  componentId: ComponentIds.TableRow,\n});\n\nexport { TableBody, TableRow, TableCell };\n"],"names":["StyledBody","styled","Body","withConfig","displayName","componentId","_ref","theme","$showStripedRows","$isSelectable","rowBackgroundTransition","concat","makeMotionTime","getIn","motion","tableRow","backgroundColorMotionDuration","backgroundColorMotionEasing","_objectSpread","border","transition","borderBottom","backgroundColor","colors","nonStripe","backgroundColorSelected","backgroundColorSelectedHover","backgroundColorSelectedFocus","backgroundColorSelectedActive","nonStripeWrapper","backgroundColorActive","stripeWrapper","stripe","backgroundColorHover","backgroundColorFocus","_TableBody","_ref2","children","_useTableContext","useTableContext","showStripedRows","selectionType","isSelectable","_jsx","metaAttribute","name","MetaConstants","TableBody","assignWithoutSideEffects","ComponentIds","StyledCell","Cell","_ref3","$backgroundColor","height","alignSelf","getFocusRingStyles","negativeOffset","CellWrapper","BaseBox","_ref4","rowDensity","paddingTop","makeSpace","paddingBottom","paddingLeft","paddingRight","borderBottomWidth","width","borderBottomColor","borderBottomStyle","_TableCell","_ref5","isChildrenString","_useTableContext2","tabIndex","role","TableCell","className","display","alignItems","flex","pointerEvents","Text","size","TableCheckboxCell","_ref6","isChecked","onChange","isDisabled","justifyContent","makeSize","checkboxCellWidth","Checkbox","StyledRow","Row","_ref7","$isHoverable","cursor","_TableRow","_ref8","item","onHover","onClick","_useTableContext3","selectedRows","toggleRowSelectionById","setDisabledRows","isMultiSelect","isSelected","includes","id","useEffect","prev","_toConsumableArray","_jsxs","disabled","Boolean","onMouseEnter","TableRow"],"mappings":"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"}
+{"version":3,"file":"TableBody.web.js","sources":["../../../../../../src/components/Table/TableBody.web.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\nimport { Body, Row, Cell } from '@table-library/react-table-library/table';\nimport styled from 'styled-components';\nimport { useTableContext } from './TableContext';\nimport { checkboxCellWidth, tableRow } from './tokens';\nimport { ComponentIds } from './componentIds';\nimport type {\n  TableProps,\n  TableBodyProps,\n  TableRowProps,\n  TableCellProps,\n  TableBackgroundColors,\n} from './types';\nimport getIn from '~utils/lodashButBetter/get';\nimport { Text } from '~components/Typography';\nimport type { CheckboxProps } from '~components/Checkbox';\nimport { Checkbox } from '~components/Checkbox';\nimport { makeMotionTime, makeSize, makeSpace } from '~utils';\nimport BaseBox from '~components/Box/BaseBox';\nimport { MetaConstants, metaAttribute } from '~utils/metaAttribute';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { getFocusRingStyles } from '~utils/getFocusRingStyles';\n\nconst StyledBody = styled(Body)<{ $isSelectable: boolean; $showStripedRows: boolean }>(\n  ({ theme, $showStripedRows, $isSelectable }) => {\n    const rowBackgroundTransition = `background-color ${makeMotionTime(\n      getIn(theme.motion, tableRow.backgroundColorMotionDuration),\n    )} ${getIn(theme.motion, tableRow.backgroundColorMotionEasing)}`;\n\n    return {\n      '&&&': {\n        border: 'none',\n        transition: rowBackgroundTransition,\n        '& tr:last-child .cell-wrapper': {\n          borderBottom: 'none',\n        },\n\n        '& .row-select-single-selected .cell-wrapper-base, .row-select-selected .cell-wrapper-base': {\n          backgroundColor: getIn(theme.colors, tableRow.nonStripe.backgroundColorSelected),\n        },\n        '& .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base, .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base': {\n          backgroundColor: getIn(theme.colors, tableRow.nonStripe.backgroundColorSelectedHover),\n        },\n        '& .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base, .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base': {\n          backgroundColor: getIn(theme.colors, tableRow.nonStripe.backgroundColorSelectedFocus),\n        },\n        '& .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base, .row-select-selected:active:not(.disabled-row) .cell-wrapper-base': {\n          backgroundColor: getIn(theme.colors, tableRow.nonStripe.backgroundColorSelectedActive),\n        },\n\n        ...($isSelectable && {\n          '& tr:active:not(.disabled-row) .cell-wrapper': {\n            backgroundColor: getIn(theme.colors, tableRow.nonStripeWrapper.backgroundColorActive),\n          },\n        }),\n\n        ...($showStripedRows && {\n          '& tr:nth-child(even) .cell-wrapper': {\n            backgroundColor: getIn(theme.colors, tableRow.stripeWrapper.backgroundColor),\n          },\n          '& tr:nth-child(even) .cell-wrapper-base': {\n            backgroundColor: tableRow.stripe.backgroundColor,\n          },\n        }),\n\n        ...($showStripedRows &&\n          $isSelectable && {\n            '& tr:nth-child(even):hover:not(.disabled-row) .cell-wrapper': {\n              backgroundColor: getIn(theme.colors, tableRow.stripeWrapper.backgroundColorHover),\n            },\n            '& tr:nth-child(even):focus:not(.disabled-row) .cell-wrapper': {\n              backgroundColor: getIn(theme.colors, tableRow.stripeWrapper.backgroundColorFocus),\n            },\n            '& tr:nth-child(even):active:not(.disabled-row) .cell-wrapper': {\n              backgroundColor: getIn(theme.colors, tableRow.stripeWrapper.backgroundColorActive),\n            },\n            '& .row-select-single-selected:nth-child(even) .cell-wrapper, .row-select-selected:nth-child(even) .cell-wrapper': {\n              backgroundColor: getIn(theme.colors, tableRow.stripeWrapper.backgroundColorSelected),\n            },\n            '& .row-select-single-selected:nth-child(even):hover:not(.disabled-row) .cell-wrapper, .row-select-selected:nth-child(even):hover:not(.disabled-row) .cell-wrapper': {\n              backgroundColor: getIn(\n                theme.colors,\n                tableRow.stripeWrapper.backgroundColorSelectedHover,\n              ),\n            },\n            '& .row-select-single-selected:nth-child(even):focus:not(.disabled-row) .cell-wrapper, .row-select-selected:nth-child(even):focus:not(.disabled-row) .cell-wrapper': {\n              backgroundColor: getIn(\n                theme.colors,\n                tableRow.stripeWrapper.backgroundColorSelectedFocus,\n              ),\n            },\n            '& .row-select-single-selected:nth-child(even):active:not(.disabled-row) .cell-wrapper, .row-select-selected:nth-child(even):active:not(.disabled-row) .cell-wrapper': {\n              backgroundColor: getIn(\n                theme.colors,\n                tableRow.stripeWrapper.backgroundColorSelectedActive,\n              ),\n            },\n\n            '& tr:nth-child(even):hover:not(.disabled-row) .cell-wrapper-base': {\n              backgroundColor: getIn(theme.colors, tableRow.stripe.backgroundColorHover),\n            },\n            '& tr:nth-child(even):focus:not(.disabled-row) .cell-wrapper-base': {\n              backgroundColor: getIn(theme.colors, tableRow.stripe.backgroundColorFocus),\n            },\n            '& tr:nth-child(even):active:not(.disabled-row) .cell-wrapper-base': {\n              backgroundColor: getIn(theme.colors, tableRow.stripe.backgroundColorActive),\n            },\n\n            '& .row-select-single-selected:nth-child(even) .cell-wrapper-base, .row-select-selected:nth-child(even) .cell-wrapper-base ': {\n              backgroundColor: getIn(theme.colors, tableRow.stripe.backgroundColorSelected),\n            },\n            '& .row-select-single-selected:nth-child(even):hover:not(.disabled-row) .cell-wrapper-base, .row-select-selected:nth-child(even):hover:not(.disabled-row) .cell-wrapper-base ': {\n              backgroundColor: getIn(theme.colors, tableRow.stripe.backgroundColorSelectedHover),\n            },\n            '& .row-select-single-selected:nth-child(even):focus:not(.disabled-row) .cell-wrapper-base, .row-select-selected:nth-child(even):focus:not(.disabled-row) .cell-wrapper-base ': {\n              backgroundColor: getIn(theme.colors, tableRow.stripe.backgroundColorSelectedFocus),\n            },\n            '& .row-select-single-selected:nth-child(even):active:not(.disabled-row) .cell-wrapper-base, .row-select-selected:nth-child(even):active:not(.disabled-row) .cell-wrapper-base ': {\n              backgroundColor: getIn(theme.colors, tableRow.stripe.backgroundColorSelectedActive),\n            },\n          }),\n      },\n    };\n  },\n);\n\nconst _TableBody = ({ children }: TableBodyProps): React.ReactElement => {\n  const { showStripedRows, selectionType } = useTableContext();\n  const isSelectable = selectionType !== 'none';\n\n  return (\n    <StyledBody\n      $isSelectable={isSelectable}\n      $showStripedRows={showStripedRows}\n      {...metaAttribute({ name: MetaConstants.TableBody })}\n    >\n      {children}\n    </StyledBody>\n  );\n};\n\nconst TableBody = assignWithoutSideEffects(_TableBody, {\n  componentId: ComponentIds.TableBody,\n});\n\nconst StyledCell = styled(Cell)<{\n  $backgroundColor: TableBackgroundColors;\n}>(({ theme, $backgroundColor }) => ({\n  '&&&': {\n    height: '100%',\n    backgroundColor: getIn(theme.colors, $backgroundColor),\n    '& > div:first-child': {\n      alignSelf: 'stretch',\n    },\n    '&:focus-visible': getFocusRingStyles({ theme, negativeOffset: true }),\n  },\n}));\n\nconst CellWrapper = styled(BaseBox)<{\n  rowDensity: NonNullable<TableProps<unknown>['rowDensity']>;\n  showStripedRows?: boolean;\n}>(({ theme, rowDensity, showStripedRows }) => {\n  const rowBackgroundTransition = `background-color ${makeMotionTime(\n    getIn(theme.motion, tableRow.backgroundColorMotionDuration),\n  )} ${getIn(theme.motion, tableRow.backgroundColorMotionEasing)}`;\n\n  return {\n    '&&&': {\n      transition: rowBackgroundTransition,\n      backgroundColor: tableRow.nonStripeWrapper.backgroundColor,\n      paddingTop: makeSpace(getIn(theme, tableRow.paddingTop[rowDensity])),\n      paddingBottom: makeSpace(getIn(theme, tableRow.paddingBottom[rowDensity])),\n      paddingLeft: makeSpace(getIn(theme, tableRow.paddingLeft[rowDensity])),\n      paddingRight: makeSpace(getIn(theme, tableRow.paddingRight[rowDensity])),\n      height: '100%',\n      ...(!showStripedRows && {\n        borderBottomWidth: makeSpace(getIn(theme.border.width, tableRow.borderBottomWidth)),\n        borderBottomColor: getIn(theme.colors, tableRow.borderBottomColor),\n        borderBottomStyle: 'solid',\n      }),\n    },\n  };\n});\n\nconst _TableCell = ({ children }: TableCellProps): React.ReactElement => {\n  const isChildrenString = typeof children === 'string';\n  const { selectionType, rowDensity, showStripedRows, backgroundColor } = useTableContext();\n  const isSelectable = selectionType !== 'none';\n\n  return (\n    <StyledCell\n      tabIndex={0}\n      role=\"cell\"\n      $backgroundColor={backgroundColor}\n      {...metaAttribute({ name: MetaConstants.TableCell })}\n    >\n      <BaseBox className=\"cell-wrapper-base\" display=\"flex\" alignItems=\"center\" height=\"100%\">\n        <CellWrapper\n          className=\"cell-wrapper\"\n          rowDensity={rowDensity}\n          showStripedRows={showStripedRows}\n          display=\"flex\"\n          alignItems=\"center\"\n          flex={1}\n          // when a direct string child is passed we want to disable pointer events\n          // for custom cells components, consumers can handle pointer events themselves\n          pointerEvents={isChildrenString && isSelectable ? 'none' : 'auto'}\n        >\n          {isChildrenString ? <Text size=\"medium\">{children}</Text> : children}\n        </CellWrapper>\n      </BaseBox>\n    </StyledCell>\n  );\n};\n\nconst TableCell = assignWithoutSideEffects(_TableCell, {\n  componentId: ComponentIds.TableCell,\n});\n\nconst TableCheckboxCell = ({\n  isChecked,\n  onChange,\n  isDisabled,\n}: {\n  isChecked: CheckboxProps['isChecked'];\n  onChange: CheckboxProps['onChange'];\n  isDisabled?: boolean;\n}): React.ReactElement => {\n  return (\n    <TableCell>\n      <BaseBox\n        display=\"flex\"\n        alignItems=\"center\"\n        justifyContent=\"center\"\n        flex={1}\n        width={makeSize(checkboxCellWidth)}\n        onClick={(e) => e.stopPropagation()}\n      >\n        <Checkbox isDisabled={isDisabled} isChecked={isChecked} onChange={onChange} />\n      </BaseBox>\n    </TableCell>\n  );\n};\n\nconst StyledRow = styled(Row)<{ $isSelectable: boolean; $isHoverable: boolean }>(\n  ({ theme, $isSelectable, $isHoverable }) => {\n    const rowBackgroundTransition = `background-color ${makeMotionTime(\n      getIn(theme.motion, tableRow.backgroundColorMotionDuration),\n    )} ${getIn(theme.motion, tableRow.backgroundColorMotionEasing)}`;\n\n    return {\n      '&&&': {\n        backgroundColor: 'transparent',\n        ...(($isHoverable || $isSelectable) && {\n          '&:hover:not(.disabled-row) .cell-wrapper-base': {\n            transition: rowBackgroundTransition,\n            cursor: 'pointer',\n            backgroundColor: getIn(theme.colors, tableRow.nonStripe.backgroundColorHover),\n          },\n        }),\n        ...($isSelectable && {\n          '&:focus:not(.disabled-row) .cell-wrapper-base': {\n            transition: rowBackgroundTransition,\n            backgroundColor: getIn(theme.colors, tableRow.nonStripe.backgroundColorFocus),\n            cursor: 'pointer',\n          },\n          '&:active:not(.disabled-row) .cell-wrapper-base': {\n            transition: rowBackgroundTransition,\n            backgroundColor: getIn(theme.colors, tableRow.nonStripe.backgroundColorActive),\n            cursor: 'pointer',\n          },\n        }),\n        '&:focus': getFocusRingStyles({ theme, negativeOffset: true }),\n      },\n    };\n  },\n);\n\nconst _TableRow = <Item,>({\n  children,\n  item,\n  isDisabled,\n  onHover,\n  onClick,\n}: TableRowProps<Item>): React.ReactElement => {\n  const {\n    selectionType,\n    selectedRows,\n    toggleRowSelectionById,\n    setDisabledRows,\n  } = useTableContext();\n  const isSelectable = selectionType !== 'none';\n  const isMultiSelect = selectionType === 'multiple';\n  const isSelected = selectedRows?.includes(item.id);\n  useEffect(() => {\n    if (isDisabled) {\n      setDisabledRows((prev) => [...prev, item.id]);\n    }\n  }, [isDisabled, item.id, setDisabledRows]);\n\n  return (\n    <StyledRow\n      disabled={isDisabled}\n      $isSelectable={isDisabled ? false : isSelectable}\n      $isHoverable={isDisabled ? false : Boolean(onHover) || Boolean(onClick)}\n      item={item}\n      className={isDisabled ? 'disabled-row' : ''}\n      onMouseEnter={() => onHover?.({ item })}\n      onClick={() => onClick?.({ item })}\n      {...metaAttribute({ name: MetaConstants.TableRow })}\n    >\n      {isMultiSelect && (\n        <TableCheckboxCell\n          isChecked={isSelected}\n          onChange={() => !isDisabled && toggleRowSelectionById(item.id)}\n          isDisabled={isDisabled}\n        />\n      )}\n      {children}\n    </StyledRow>\n  );\n};\n\nconst TableRow = assignWithoutSideEffects(_TableRow, {\n  componentId: ComponentIds.TableRow,\n});\n\nexport { TableBody, TableRow, TableCell };\n"],"names":["StyledBody","styled","Body","withConfig","displayName","componentId","_ref","theme","$showStripedRows","$isSelectable","rowBackgroundTransition","concat","makeMotionTime","getIn","motion","tableRow","backgroundColorMotionDuration","backgroundColorMotionEasing","_objectSpread","border","transition","borderBottom","backgroundColor","colors","nonStripe","backgroundColorSelected","backgroundColorSelectedHover","backgroundColorSelectedFocus","backgroundColorSelectedActive","nonStripeWrapper","backgroundColorActive","stripeWrapper","stripe","backgroundColorHover","backgroundColorFocus","_TableBody","_ref2","children","_useTableContext","useTableContext","showStripedRows","selectionType","isSelectable","_jsx","metaAttribute","name","MetaConstants","TableBody","assignWithoutSideEffects","ComponentIds","StyledCell","Cell","_ref3","$backgroundColor","height","alignSelf","getFocusRingStyles","negativeOffset","CellWrapper","BaseBox","_ref4","rowDensity","paddingTop","makeSpace","paddingBottom","paddingLeft","paddingRight","borderBottomWidth","width","borderBottomColor","borderBottomStyle","_TableCell","_ref5","isChildrenString","_useTableContext2","tabIndex","role","TableCell","className","display","alignItems","flex","pointerEvents","Text","size","TableCheckboxCell","_ref6","isChecked","onChange","isDisabled","justifyContent","makeSize","checkboxCellWidth","onClick","e","stopPropagation","Checkbox","StyledRow","Row","_ref7","$isHoverable","cursor","_TableRow","_ref8","item","onHover","_useTableContext3","selectedRows","toggleRowSelectionById","setDisabledRows","isMultiSelect","isSelected","includes","id","useEffect","prev","_toConsumableArray","_jsxs","disabled","Boolean","onMouseEnter","TableRow"],"mappings":"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"}

package/build/lib/web/development/components/Tag/AnimatedTag.web.js

@@ -25,7 +25,9 @@ var AnimatedTag = function AnimatedTag(_ref) {
     currentTagIndex = _ref.currentTagIndex,
     isDisabled = _ref.isDisabled,
     activeTagIndex = _ref.activeTagIndex,
-    onDismiss = _ref.onDismiss;
+    onDismiss = _ref.onDismiss,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'medium' : _ref$size;
   var _React$useState = React__default.useState(true),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     isTagVisible = _React$useState2[0],
@@ -54,6 +56,7 @@ var AnimatedTag = function AnimatedTag(_ref) {
       marginRight: "spacing.3",
       marginY: "spacing.2",
       isDisabled: isDisabled,
+      size: size,
       children: children
     })
   });

package/build/lib/web/development/components/Tag/AnimatedTag.web.js.map

@@ -1 +1 @@
-{"version":3,"file":"AnimatedTag.web.js","sources":["../../../../../../src/components/Tag/AnimatedTag.web.tsx"],"sourcesContent":["import React from 'react';\nimport type { FlattenSimpleInterpolation } from 'styled-components';\nimport styled, { css, keyframes } from 'styled-components';\nimport { Tag } from './Tag';\nimport type { AnimatedTagProps } from './types';\nimport {\n  TAG_MAX_WIDTH_END,\n  TAG_MAX_WIDTH_START,\n  TAG_OPACITY_END,\n  TAG_OPACITY_START,\n} from './tagAnimationConfig';\nimport BaseBox from '~components/Box/BaseBox';\nimport { useTheme } from '~components/BladeProvider';\nimport { makeMotionTime, makeSize } from '~utils';\n\nconst tagDissappearKeyframe = keyframes`\n  0% {\n    opacity: ${TAG_OPACITY_START};\n    max-width: ${makeSize(TAG_MAX_WIDTH_START)};\n  }\n\n  100% {\n    opacity: ${TAG_OPACITY_END};\n    max-width: ${makeSize(TAG_MAX_WIDTH_END)};\n  }\n`;\n\nconst tagShowKeyframe = keyframes`\n  0% {\n    opacity: ${TAG_OPACITY_END};\n  }\n\n  100% {\n    opacity: ${TAG_OPACITY_START};\n  }\n`;\n\nconst AnimatedTagContainer = styled(BaseBox)<{\n  transition: FlattenSimpleInterpolation;\n  isVisible: boolean;\n}>(\n  (props) => css`\n    ${props.transition};\n    display: inline-block;\n    opacity: ${props.isVisible ? TAG_OPACITY_START : TAG_OPACITY_END};\n    max-width: ${makeSize(props.isVisible ? TAG_MAX_WIDTH_START : TAG_MAX_WIDTH_END)};\n    flex-shrink: 0;\n  `,\n);\n\nconst AnimatedTag = ({\n  children,\n  currentTagIndex,\n  isDisabled,\n  activeTagIndex,\n  onDismiss,\n}: AnimatedTagProps): React.ReactElement => {\n  const [isTagVisible, setIsTagVisible] = React.useState(true);\n  const { theme } = useTheme();\n\n  const hideTagTransition = css`\n    animation: ${tagDissappearKeyframe} ${makeMotionTime(theme.motion.duration.xquick)}\n      ${String(theme.motion.easing.exit.effective)};\n  `;\n\n  const showTagTransition = css`\n    animation: ${tagShowKeyframe} ${makeMotionTime(theme.motion.duration.xquick)}\n      ${String(theme.motion.easing.entrance.effective)};\n  `;\n\n  return (\n    <AnimatedTagContainer\n      isVisible={isTagVisible}\n      onAnimationEnd={() => {\n        if (!isTagVisible) {\n          onDismiss({ tagIndex: currentTagIndex, tagName: children });\n        }\n      }}\n      transition={isTagVisible ? showTagTransition : hideTagTransition}\n    >\n      <Tag\n        _isVirtuallyFocused={currentTagIndex === activeTagIndex}\n        _isTagInsideInput={true}\n        onDismiss={() => {\n          setIsTagVisible(false);\n        }}\n        marginRight=\"spacing.3\"\n        marginY=\"spacing.2\"\n        isDisabled={isDisabled}\n      >\n        {children}\n      </Tag>\n    </AnimatedTagContainer>\n  );\n};\n\nexport { AnimatedTag };\n"],"names":["tagDissappearKeyframe","keyframes","TAG_OPACITY_START","makeSize","TAG_MAX_WIDTH_START","TAG_OPACITY_END","TAG_MAX_WIDTH_END","tagShowKeyframe","AnimatedTagContainer","styled","BaseBox","withConfig","displayName","componentId","props","css","transition","isVisible","AnimatedTag","_ref","children","currentTagIndex","isDisabled","activeTagIndex","onDismiss","_React$useState","React","useState","_React$useState2","_slicedToArray","isTagVisible","setIsTagVisible","_useTheme","useTheme","theme","hideTagTransition","makeMotionTime","motion","duration","xquick","String","easing","exit","effective","showTagTransition","entrance","_jsx","onAnimationEnd","tagIndex","tagName","Tag","_isVirtuallyFocused","_isTagInsideInput","marginRight","marginY"],"mappings":"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"}
+{"version":3,"file":"AnimatedTag.web.js","sources":["../../../../../../src/components/Tag/AnimatedTag.web.tsx"],"sourcesContent":["import React from 'react';\nimport type { FlattenSimpleInterpolation } from 'styled-components';\nimport styled, { css, keyframes } from 'styled-components';\nimport { Tag } from './Tag';\nimport type { AnimatedTagProps } from './types';\nimport {\n  TAG_MAX_WIDTH_END,\n  TAG_MAX_WIDTH_START,\n  TAG_OPACITY_END,\n  TAG_OPACITY_START,\n} from './tagAnimationConfig';\nimport BaseBox from '~components/Box/BaseBox';\nimport { useTheme } from '~components/BladeProvider';\nimport { makeMotionTime, makeSize } from '~utils';\n\nconst tagDissappearKeyframe = keyframes`\n  0% {\n    opacity: ${TAG_OPACITY_START};\n    max-width: ${makeSize(TAG_MAX_WIDTH_START)};\n  }\n\n  100% {\n    opacity: ${TAG_OPACITY_END};\n    max-width: ${makeSize(TAG_MAX_WIDTH_END)};\n  }\n`;\n\nconst tagShowKeyframe = keyframes`\n  0% {\n    opacity: ${TAG_OPACITY_END};\n  }\n\n  100% {\n    opacity: ${TAG_OPACITY_START};\n  }\n`;\n\nconst AnimatedTagContainer = styled(BaseBox)<{\n  transition: FlattenSimpleInterpolation;\n  isVisible: boolean;\n}>(\n  (props) => css`\n    ${props.transition};\n    display: inline-block;\n    opacity: ${props.isVisible ? TAG_OPACITY_START : TAG_OPACITY_END};\n    max-width: ${makeSize(props.isVisible ? TAG_MAX_WIDTH_START : TAG_MAX_WIDTH_END)};\n    flex-shrink: 0;\n  `,\n);\n\nconst AnimatedTag = ({\n  children,\n  currentTagIndex,\n  isDisabled,\n  activeTagIndex,\n  onDismiss,\n  size = 'medium',\n}: AnimatedTagProps): React.ReactElement => {\n  const [isTagVisible, setIsTagVisible] = React.useState(true);\n  const { theme } = useTheme();\n\n  const hideTagTransition = css`\n    animation: ${tagDissappearKeyframe} ${makeMotionTime(theme.motion.duration.xquick)}\n      ${String(theme.motion.easing.exit.effective)};\n  `;\n\n  const showTagTransition = css`\n    animation: ${tagShowKeyframe} ${makeMotionTime(theme.motion.duration.xquick)}\n      ${String(theme.motion.easing.entrance.effective)};\n  `;\n\n  return (\n    <AnimatedTagContainer\n      isVisible={isTagVisible}\n      onAnimationEnd={() => {\n        if (!isTagVisible) {\n          onDismiss({ tagIndex: currentTagIndex, tagName: children });\n        }\n      }}\n      transition={isTagVisible ? showTagTransition : hideTagTransition}\n    >\n      <Tag\n        _isVirtuallyFocused={currentTagIndex === activeTagIndex}\n        _isTagInsideInput={true}\n        onDismiss={() => {\n          setIsTagVisible(false);\n        }}\n        marginRight=\"spacing.3\"\n        marginY=\"spacing.2\"\n        isDisabled={isDisabled}\n        size={size}\n      >\n        {children}\n      </Tag>\n    </AnimatedTagContainer>\n  );\n};\n\nexport { AnimatedTag };\n"],"names":["tagDissappearKeyframe","keyframes","TAG_OPACITY_START","makeSize","TAG_MAX_WIDTH_START","TAG_OPACITY_END","TAG_MAX_WIDTH_END","tagShowKeyframe","AnimatedTagContainer","styled","BaseBox","withConfig","displayName","componentId","props","css","transition","isVisible","AnimatedTag","_ref","children","currentTagIndex","isDisabled","activeTagIndex","onDismiss","_ref$size","size","_React$useState","React","useState","_React$useState2","_slicedToArray","isTagVisible","setIsTagVisible","_useTheme","useTheme","theme","hideTagTransition","makeMotionTime","motion","duration","xquick","String","easing","exit","effective","showTagTransition","entrance","_jsx","onAnimationEnd","tagIndex","tagName","Tag","_isVirtuallyFocused","_isTagInsideInput","marginRight","marginY"],"mappings":"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"}

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

@@ -125,13 +125,13 @@ var Tag = function Tag(_ref) {
       }) : null, /*#__PURE__*/jsx(Box, {
         display: "flex",
         flexDirection: "row",
-        alignItems: "center",
         maxWidth: makeSize(size['100']),
         children: /*#__PURE__*/jsx(Text, {
+          textAlign: "center",
           truncateAfterLines: 1,
           marginRight: "spacing.2",
           color: textColor,
-          size: assetSize,
+          size: 'small',
           children: children
         })
       }), /*#__PURE__*/jsx(Box, {