@razorpay/blade 10.23.5 → 11.0.0

package/build/lib/web/production/components/Indicator/Indicator.js

@@ -26,7 +26,7 @@ import Svg from '../Icons/_Svg/Svg/Svg.web.js';
 import Circle from '../Icons/_Svg/Circle/Circle.web.js';
 import { Text } from '../Typography/Text/Text.js';
 
-var _excluded = ["accessibilityLabel", "children", "size", "intent", "testID"];
+var _excluded = ["accessibilityLabel", "children", "size", "color", "testID"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var Indicator = function Indicator(_ref) {
@@ -34,15 +34,14 @@ var Indicator = function Indicator(_ref) {
     children = _ref.children,
     _ref$size = _ref.size,
     size$1 = _ref$size === void 0 ? 'medium' : _ref$size,
-    _ref$intent = _ref.intent,
-    intent = _ref$intent === void 0 ? 'neutral' : _ref$intent,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? 'neutral' : _ref$color,
     testID = _ref.testID,
     styledProps = _objectWithoutProperties(_ref, _excluded);
   var _useTheme = useTheme(),
     theme = _useTheme.theme;
   var childrenString = getStringFromReactText(children);
-  var fillColor = theme.colors.feedback.background[intent].highContrast;
-  var strokeColor = theme.colors.brand.gray.a100.highContrast;
+  var fillColor = theme.colors.feedback.background[color].intense;
   var getDimension = useCallback(function () {
     switch (size$1) {
       case 'small':
@@ -79,29 +78,23 @@ var Indicator = function Indicator(_ref) {
       display: "flex",
       flexDirection: "row",
       alignItems: "center",
-      children: [/*#__PURE__*/jsxs(Svg, {
+      children: [/*#__PURE__*/jsx(Svg, {
         width: String(dimensions.svgSize),
         height: String(dimensions.svgSize),
         viewBox: "0 0 10 10",
         fill: "none",
-        children: [/*#__PURE__*/jsx(Circle, {
+        children: /*#__PURE__*/jsx(Circle, {
           cx: "5",
           cy: "5",
           r: "5",
           fill: fillColor
-        }), /*#__PURE__*/jsx(Circle, {
-          cx: "5",
-          cy: "5",
-          r: "4.75",
-          stroke: strokeColor,
-          strokeWidth: "0.5"
-        })]
+        })
       }), /*#__PURE__*/jsx(BaseBox, {
         marginLeft: "spacing.2",
         children: /*#__PURE__*/jsx(Text, {
+          weight: "medium",
+          color: "surface.text.gray.subtle",
           textAlign: "left",
-          contrast: "low",
-          type: "subtle",
           size: dimensions.textSize,
           children: children
         })

package/build/lib/web/production/components/Indicator/Indicator.js.map

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

package/build/lib/web/production/components/Input/BaseInput/AnimatedBaseInputWrapper.web.js

@@ -29,7 +29,7 @@ var StyledBaseInputWrapper = /*#__PURE__*/styled(BaseBox).withConfig({
 })(function (props) {
   return _objectSpread(_objectSpread({}, getInputBackgroundAndBorderStyles({
     theme: props.theme,
-    isFocused: props.currentInteraction === 'active',
+    isFocused: props.currentInteraction === 'focus',
     isDisabled: props.isDisabled,
     validationState: props.validationState,
     isTextArea: props.isTextArea,
@@ -38,7 +38,7 @@ var StyledBaseInputWrapper = /*#__PURE__*/styled(BaseBox).withConfig({
     '&:hover': _objectSpread(_objectSpread({}, getInputBackgroundAndBorderStyles({
       theme: props.theme,
       isHovered: true,
-      isFocused: props.currentInteraction === 'active',
+      isFocused: props.currentInteraction === 'focus',
       isDisabled: props.isDisabled,
       validationState: props.validationState,
       isDropdownTrigger: props.isDropdownTrigger
@@ -49,7 +49,7 @@ var StyledBaseInputWrapper = /*#__PURE__*/styled(BaseBox).withConfig({
     }),
     ':focus-within': _objectSpread({}, getInputBackgroundAndBorderStyles({
       theme: props.theme,
-      isFocused: props.currentInteraction === 'active',
+      isFocused: props.currentInteraction === 'focus',
       isDisabled: props.isDisabled,
       validationState: props.validationState,
       isDropdownTrigger: props.isDropdownTrigger

package/build/lib/web/production/components/Input/BaseInput/AnimatedBaseInputWrapper.web.js.map

@@ -1 +1 @@
-{"version":3,"file":"AnimatedBaseInputWrapper.web.js","sources":["../../../../../../../src/components/Input/BaseInput/AnimatedBaseInputWrapper.web.tsx"],"sourcesContent":["import React from 'react';\nimport type { FlattenSimpleInterpolation } from 'styled-components';\nimport styled, { css, keyframes } from 'styled-components';\nimport type { BaseInputWrapperProps } from './types';\nimport { getInputBackgroundAndBorderStyles } from './baseInputStyles';\nimport { BASEINPUT_WRAPPER_MIN_HEIGHT, BASEINPUT_WRAPPER_MAX_HEIGHT } from './baseInputConfig';\nimport BaseBox from '~components/Box/BaseBox';\nimport { motion } from '~tokens/global';\nimport { castWebType, makeMotionTime, makeSize } from '~utils';\nimport type { BladeElementRef } from '~utils/types';\n\n// Define the animation keyframes\nconst expandAnimation = keyframes`\n  from {\n    max-height: ${makeSize(BASEINPUT_WRAPPER_MIN_HEIGHT)};\n  }\n  to {\n    max-height: ${makeSize(BASEINPUT_WRAPPER_MAX_HEIGHT)};\n  }\n`;\n\nconst collapseAnimation = keyframes`\n  from {\n    max-height: ${makeSize(BASEINPUT_WRAPPER_MAX_HEIGHT)};\n  }\n  to {\n    max-height: ${makeSize(BASEINPUT_WRAPPER_MIN_HEIGHT)};\n  }\n`;\n\nconst expandTransition = css`\n  animation: ${expandAnimation} ${makeMotionTime(motion.duration.quick)}\n    ${String(motion.easing.entrance.effective)};\n`;\n\nconst collapseTransition = css`\n  animation: ${collapseAnimation} ${makeMotionTime(motion.duration.quick)}\n    ${String(motion.easing.exit.effective)};\n`;\n\nconst noTransition = css`\n  animation: none;\n`;\n\nconst StyledBaseInputWrapper = styled(BaseBox)<\n  Pick<\n    BaseInputWrapperProps,\n    'currentInteraction' | 'isDisabled' | 'validationState' | 'isTextArea' | 'isDropdownTrigger'\n  >\n>((props) => ({\n  ...getInputBackgroundAndBorderStyles({\n    theme: props.theme,\n    isFocused: props.currentInteraction === 'active',\n    isDisabled: props.isDisabled,\n    validationState: props.validationState,\n    isTextArea: props.isTextArea,\n    isDropdownTrigger: props.isDropdownTrigger,\n  }),\n  '&:hover': {\n    ...getInputBackgroundAndBorderStyles({\n      theme: props.theme,\n      isHovered: true,\n      isFocused: props.currentInteraction === 'active',\n      isDisabled: props.isDisabled,\n      validationState: props.validationState,\n      isDropdownTrigger: props.isDropdownTrigger,\n    }),\n    transitionProperty: 'background-color',\n    transitionDuration: castWebType(makeMotionTime(props.theme.motion.duration.xquick)),\n    transitionTimingFunction: castWebType(props.theme.motion.easing.standard.effective),\n  },\n  ':focus-within': {\n    ...getInputBackgroundAndBorderStyles({\n      theme: props.theme,\n      isFocused: props.currentInteraction === 'active',\n      isDisabled: props.isDisabled,\n      validationState: props.validationState,\n      isDropdownTrigger: props.isDropdownTrigger,\n    }),\n  },\n}));\n\nconst getMaxHeight = ({\n  maxTagRows,\n  showAllTags,\n}: Pick<BaseInputWrapperProps, 'maxTagRows' | 'showAllTags'>): number => {\n  if (maxTagRows === 'single') {\n    return BASEINPUT_WRAPPER_MIN_HEIGHT;\n  }\n\n  if (maxTagRows === 'multiple') {\n    return BASEINPUT_WRAPPER_MAX_HEIGHT;\n  }\n\n  // In expandable, max-height depends on the state\n  return showAllTags ? BASEINPUT_WRAPPER_MAX_HEIGHT : BASEINPUT_WRAPPER_MIN_HEIGHT;\n};\n\n// Styled component with animation\nconst StyledAnimatedBaseInputWrapper = styled(StyledBaseInputWrapper)<{\n  transition?: FlattenSimpleInterpolation;\n  maxTagRows: BaseInputWrapperProps['maxTagRows'];\n  showAllTags: BaseInputWrapperProps['showAllTags'];\n  isDropdownTrigger: BaseInputWrapperProps['isDropdownTrigger'];\n}>((props) =>\n  props.isDropdownTrigger\n    ? css`\n        ${props.transition};\n        max-height: ${makeSize(\n          getMaxHeight({ maxTagRows: props.maxTagRows, showAllTags: props.showAllTags }),\n        )};\n      `\n    : undefined,\n);\n\nconst _AnimatedBaseInputWrapper: React.ForwardRefRenderFunction<\n  BladeElementRef,\n  BaseInputWrapperProps & {\n    showAllTags?: boolean;\n  }\n> = (\n  { showAllTags, setShowAllTagsWithAnimation, maxTagRows, isDropdownTrigger, ...rest },\n  ref,\n): React.ReactElement => {\n  return (\n    <StyledAnimatedBaseInputWrapper\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      ref={ref as any}\n      {...rest}\n      transition={\n        maxTagRows !== 'expandable'\n          ? noTransition\n          : showAllTags\n          ? expandTransition\n          : collapseTransition\n      }\n      isDropdownTrigger={isDropdownTrigger}\n      showAllTags={showAllTags}\n      maxTagRows={maxTagRows}\n      onAnimationEnd={(e) => {\n        if (!showAllTags && e.animationName === collapseAnimation.getName()) {\n          setShowAllTagsWithAnimation?.(false);\n        }\n\n        if (maxTagRows !== 'expandable' && !showAllTags) {\n          setShowAllTagsWithAnimation?.(false);\n        }\n      }}\n    />\n  );\n};\n\nconst AnimatedBaseInputWrapper = React.forwardRef(_AnimatedBaseInputWrapper);\n\nexport { AnimatedBaseInputWrapper, expandAnimation, collapseAnimation };\n"],"names":["expandAnimation","keyframes","makeSize","BASEINPUT_WRAPPER_MIN_HEIGHT","BASEINPUT_WRAPPER_MAX_HEIGHT","collapseAnimation","expandTransition","css","makeMotionTime","motion","duration","quick","String","easing","entrance","effective","collapseTransition","exit","noTransition","StyledBaseInputWrapper","styled","BaseBox","withConfig","displayName","componentId","props","_objectSpread","getInputBackgroundAndBorderStyles","theme","isFocused","currentInteraction","isDisabled","validationState","isTextArea","isDropdownTrigger","isHovered","transitionProperty","transitionDuration","castWebType","xquick","transitionTimingFunction","standard","getMaxHeight","_ref","maxTagRows","showAllTags","StyledAnimatedBaseInputWrapper","transition","undefined","_AnimatedBaseInputWrapper","_ref2","ref","setShowAllTagsWithAnimation","rest","_objectWithoutProperties","_excluded","_jsx","onAnimationEnd","e","animationName","getName","AnimatedBaseInputWrapper","React","forwardRef"],"mappings":"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"}
+{"version":3,"file":"AnimatedBaseInputWrapper.web.js","sources":["../../../../../../../src/components/Input/BaseInput/AnimatedBaseInputWrapper.web.tsx"],"sourcesContent":["import React from 'react';\nimport type { FlattenSimpleInterpolation } from 'styled-components';\nimport styled, { css, keyframes } from 'styled-components';\nimport type { BaseInputWrapperProps } from './types';\nimport { getInputBackgroundAndBorderStyles } from './baseInputStyles';\nimport { BASEINPUT_WRAPPER_MIN_HEIGHT, BASEINPUT_WRAPPER_MAX_HEIGHT } from './baseInputConfig';\nimport BaseBox from '~components/Box/BaseBox';\nimport { motion } from '~tokens/global';\nimport { castWebType, makeMotionTime, makeSize } from '~utils';\nimport type { BladeElementRef } from '~utils/types';\n\n// Define the animation keyframes\nconst expandAnimation = keyframes`\n  from {\n    max-height: ${makeSize(BASEINPUT_WRAPPER_MIN_HEIGHT)};\n  }\n  to {\n    max-height: ${makeSize(BASEINPUT_WRAPPER_MAX_HEIGHT)};\n  }\n`;\n\nconst collapseAnimation = keyframes`\n  from {\n    max-height: ${makeSize(BASEINPUT_WRAPPER_MAX_HEIGHT)};\n  }\n  to {\n    max-height: ${makeSize(BASEINPUT_WRAPPER_MIN_HEIGHT)};\n  }\n`;\n\nconst expandTransition = css`\n  animation: ${expandAnimation} ${makeMotionTime(motion.duration.quick)}\n    ${String(motion.easing.entrance.effective)};\n`;\n\nconst collapseTransition = css`\n  animation: ${collapseAnimation} ${makeMotionTime(motion.duration.quick)}\n    ${String(motion.easing.exit.effective)};\n`;\n\nconst noTransition = css`\n  animation: none;\n`;\n\nconst StyledBaseInputWrapper = styled(BaseBox)<\n  Pick<\n    BaseInputWrapperProps,\n    'currentInteraction' | 'isDisabled' | 'validationState' | 'isTextArea' | 'isDropdownTrigger'\n  >\n>((props) => ({\n  ...getInputBackgroundAndBorderStyles({\n    theme: props.theme,\n    isFocused: props.currentInteraction === 'focus',\n    isDisabled: props.isDisabled,\n    validationState: props.validationState,\n    isTextArea: props.isTextArea,\n    isDropdownTrigger: props.isDropdownTrigger,\n  }),\n  '&:hover': {\n    ...getInputBackgroundAndBorderStyles({\n      theme: props.theme,\n      isHovered: true,\n      isFocused: props.currentInteraction === 'focus',\n      isDisabled: props.isDisabled,\n      validationState: props.validationState,\n      isDropdownTrigger: props.isDropdownTrigger,\n    }),\n    transitionProperty: 'background-color',\n    transitionDuration: castWebType(makeMotionTime(props.theme.motion.duration.xquick)),\n    transitionTimingFunction: castWebType(props.theme.motion.easing.standard.effective),\n  },\n  ':focus-within': {\n    ...getInputBackgroundAndBorderStyles({\n      theme: props.theme,\n      isFocused: props.currentInteraction === 'focus',\n      isDisabled: props.isDisabled,\n      validationState: props.validationState,\n      isDropdownTrigger: props.isDropdownTrigger,\n    }),\n  },\n}));\n\nconst getMaxHeight = ({\n  maxTagRows,\n  showAllTags,\n}: Pick<BaseInputWrapperProps, 'maxTagRows' | 'showAllTags'>): number => {\n  if (maxTagRows === 'single') {\n    return BASEINPUT_WRAPPER_MIN_HEIGHT;\n  }\n\n  if (maxTagRows === 'multiple') {\n    return BASEINPUT_WRAPPER_MAX_HEIGHT;\n  }\n\n  // In expandable, max-height depends on the state\n  return showAllTags ? BASEINPUT_WRAPPER_MAX_HEIGHT : BASEINPUT_WRAPPER_MIN_HEIGHT;\n};\n\n// Styled component with animation\nconst StyledAnimatedBaseInputWrapper = styled(StyledBaseInputWrapper)<{\n  transition?: FlattenSimpleInterpolation;\n  maxTagRows: BaseInputWrapperProps['maxTagRows'];\n  showAllTags: BaseInputWrapperProps['showAllTags'];\n  isDropdownTrigger: BaseInputWrapperProps['isDropdownTrigger'];\n}>((props) =>\n  props.isDropdownTrigger\n    ? css`\n        ${props.transition};\n        max-height: ${makeSize(\n          getMaxHeight({ maxTagRows: props.maxTagRows, showAllTags: props.showAllTags }),\n        )};\n      `\n    : undefined,\n);\n\nconst _AnimatedBaseInputWrapper: React.ForwardRefRenderFunction<\n  BladeElementRef,\n  BaseInputWrapperProps & {\n    showAllTags?: boolean;\n  }\n> = (\n  { showAllTags, setShowAllTagsWithAnimation, maxTagRows, isDropdownTrigger, ...rest },\n  ref,\n): React.ReactElement => {\n  return (\n    <StyledAnimatedBaseInputWrapper\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      ref={ref as any}\n      {...rest}\n      transition={\n        maxTagRows !== 'expandable'\n          ? noTransition\n          : showAllTags\n          ? expandTransition\n          : collapseTransition\n      }\n      isDropdownTrigger={isDropdownTrigger}\n      showAllTags={showAllTags}\n      maxTagRows={maxTagRows}\n      onAnimationEnd={(e) => {\n        if (!showAllTags && e.animationName === collapseAnimation.getName()) {\n          setShowAllTagsWithAnimation?.(false);\n        }\n\n        if (maxTagRows !== 'expandable' && !showAllTags) {\n          setShowAllTagsWithAnimation?.(false);\n        }\n      }}\n    />\n  );\n};\n\nconst AnimatedBaseInputWrapper = React.forwardRef(_AnimatedBaseInputWrapper);\n\nexport { AnimatedBaseInputWrapper, expandAnimation, collapseAnimation };\n"],"names":["expandAnimation","keyframes","makeSize","BASEINPUT_WRAPPER_MIN_HEIGHT","BASEINPUT_WRAPPER_MAX_HEIGHT","collapseAnimation","expandTransition","css","makeMotionTime","motion","duration","quick","String","easing","entrance","effective","collapseTransition","exit","noTransition","StyledBaseInputWrapper","styled","BaseBox","withConfig","displayName","componentId","props","_objectSpread","getInputBackgroundAndBorderStyles","theme","isFocused","currentInteraction","isDisabled","validationState","isTextArea","isDropdownTrigger","isHovered","transitionProperty","transitionDuration","castWebType","xquick","transitionTimingFunction","standard","getMaxHeight","_ref","maxTagRows","showAllTags","StyledAnimatedBaseInputWrapper","transition","undefined","_AnimatedBaseInputWrapper","_ref2","ref","setShowAllTagsWithAnimation","rest","_objectWithoutProperties","_excluded","_jsx","onAnimationEnd","e","animationName","getName","AnimatedBaseInputWrapper","React","forwardRef"],"mappings":"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"}

package/build/lib/web/production/components/Input/BaseInput/BaseInputAnimatedBorder.web.js

@@ -18,7 +18,7 @@ var BaseInputStyledAnimatedBorder = /*#__PURE__*/styled(BaseBox).withConfig({
 })(function (_ref) {
   var theme = _ref.theme,
     animation = _ref.animation;
-  return css(["position:absolute;bottom:0;left:0;right:0;opacity:0;background-color:", ";border-width:", ";height:", ";", ""], theme.colors.brand.primary[500], makeBorderSize(theme.border.width.thin), makeBorderSize(theme.border.width.thin), animation);
+  return css(["position:absolute;bottom:0;left:0;right:0;opacity:0;background-color:", ";border-width:", ";height:", ";", ""], theme.colors.interactive.background.primary["default"], makeBorderSize(theme.border.width.thin), makeBorderSize(theme.border.width.thin), animation);
 });
 var BaseInputAnimatedBorder = function BaseInputAnimatedBorder(_ref2) {
   var currentInteraction = _ref2.currentInteraction,
@@ -29,7 +29,7 @@ var BaseInputAnimatedBorder = function BaseInputAnimatedBorder(_ref2) {
   var borderAnimationOnBlur = /*#__PURE__*/css(["animation:", " ", " ", " forwards;"], fadeOutBorder, makeMotionTime(theme.motion.duration.xquick), theme.motion.easing.standard.effective);
   // need ref because we don't have `blur` as an interaction which means the exit animation would run on default as well as blur event
   var borderAnimation = React__default.useRef();
-  if (currentInteraction === 'active' && validationState !== 'error' && validationState !== 'success') {
+  if (currentInteraction === 'focus' && validationState !== 'error' && validationState !== 'success') {
     borderAnimation.current = borderAnimationOnFocus;
   } else if (borderAnimation.current && currentInteraction === 'default') {
     borderAnimation.current = borderAnimationOnBlur;

package/build/lib/web/production/components/Input/BaseInput/BaseInputAnimatedBorder.web.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseInputAnimatedBorder.web.js","sources":["../../../../../../../src/components/Input/BaseInput/BaseInputAnimatedBorder.web.tsx"],"sourcesContent":["import React from 'react';\nimport type { FlattenSimpleInterpolation } from 'styled-components';\nimport type { ReactElement } from 'react';\nimport styled, { css, keyframes } from 'styled-components';\nimport type { BaseInputProps } from './BaseInput';\nimport BaseBox from '~components/Box/BaseBox';\nimport { makeMotionTime } from '~utils/makeMotionTime';\nimport type { Theme } from '~components/BladeProvider';\nimport { useTheme } from '~components/BladeProvider';\nimport type { ActionStates } from '~tokens/theme/theme';\nimport { makeBorderSize } from '~utils/makeBorderSize';\n\nconst scaleBorder = keyframes`\nfrom {\n  transform: scaleX(0);\n  transform-origin: left;\n  opacity: 0;\n}\nto {\n  transform: scaleX(1);\n  transform-origin: left;\n  opacity: 1;\n}\n`;\n\nconst fadeOutBorder = keyframes`\nfrom {\n  opacity: 1\n}\nto {\n  opacity: 0\n}\n`;\n\nconst BaseInputStyledAnimatedBorder = styled(BaseBox)(\n  ({ theme, animation }: { theme: Theme; animation?: FlattenSimpleInterpolation }) => css`\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    opacity: 0;\n    background-color: ${theme.colors.brand.primary[500]};\n    border-width: ${makeBorderSize(theme.border.width.thin)};\n    height: ${makeBorderSize(theme.border.width.thin)};\n    ${animation}\n  `,\n);\n\nexport const BaseInputAnimatedBorder = ({\n  currentInteraction,\n  validationState,\n}: {\n  currentInteraction: keyof ActionStates;\n  validationState: BaseInputProps['validationState'];\n}): ReactElement => {\n  const { theme } = useTheme();\n\n  const borderAnimationOnFocus = css`\n    animation: ${scaleBorder} ${makeMotionTime(theme.motion.duration.moderate)}\n      ${theme.motion.easing.standard.effective as string} forwards;\n  `;\n\n  const borderAnimationOnBlur = css`\n    animation: ${fadeOutBorder} ${makeMotionTime(theme.motion.duration.xquick)}\n      ${theme.motion.easing.standard.effective as string} forwards;\n  `;\n  // need ref because we don't have `blur` as an interaction which means the exit animation would run on default as well as blur event\n  const borderAnimation = React.useRef<FlattenSimpleInterpolation>();\n  if (\n    currentInteraction === 'active' &&\n    validationState !== 'error' &&\n    validationState !== 'success'\n  ) {\n    borderAnimation.current = borderAnimationOnFocus;\n  } else if (borderAnimation.current && currentInteraction === 'default') {\n    borderAnimation.current = borderAnimationOnBlur;\n  }\n\n  return <BaseInputStyledAnimatedBorder animation={borderAnimation.current} />;\n};\n"],"names":["scaleBorder","keyframes","fadeOutBorder","BaseInputStyledAnimatedBorder","styled","BaseBox","withConfig","displayName","componentId","_ref","theme","animation","css","colors","brand","primary","makeBorderSize","border","width","thin","BaseInputAnimatedBorder","_ref2","currentInteraction","validationState","_useTheme","useTheme","borderAnimationOnFocus","makeMotionTime","motion","duration","moderate","easing","standard","effective","borderAnimationOnBlur","xquick","borderAnimation","React","useRef","current","_jsx"],"mappings":";;;;;;;;;;;;AAYA,IAAMA,WAAW,gBAAGC,SAAS,CAW5B,CAAA,oHAAA,CAAA,CAAA,CAAA;AAED,IAAMC,aAAa,gBAAGD,SAAS,CAO9B,CAAA,8BAAA,CAAA,CAAA,CAAA;AAED,IAAME,6BAA6B,gBAAGC,MAAM,CAACC,OAAO,CAAC,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,2DAAA;EAAAC,WAAA,EAAA,aAAA;AAAA,CAAA,CAAA,CACnD,UAAAC,IAAA,EAAA;AAAA,EAAA,IAAGC,KAAK,GAAAD,IAAA,CAALC,KAAK;IAAEC,SAAS,GAAAF,IAAA,CAATE,SAAS,CAAA;AAAA,EAAA,OAAiEC,GAAG,CAAA,CAAA,uEAAA,EAAA,gBAAA,EAAA,UAAA,EAAA,GAAA,EAAA,EAAA,CAAA,EAMjEF,KAAK,CAACG,MAAM,CAACC,KAAK,CAACC,OAAO,CAAC,GAAG,CAAC,EACnCC,cAAc,CAACN,KAAK,CAACO,MAAM,CAACC,KAAK,CAACC,IAAI,CAAC,EAC7CH,cAAc,CAACN,KAAK,CAACO,MAAM,CAACC,KAAK,CAACC,IAAI,CAAC,EAC/CR,SAAS,CAAA,CAAA;AAAA,CACZ,CACF,CAAA;IAEYS,uBAAuB,GAAG,SAA1BA,uBAAuBA,CAAAC,KAAA,EAMhB;AAAA,EAAA,IALlBC,kBAAkB,GAAAD,KAAA,CAAlBC,kBAAkB;IAClBC,eAAe,GAAAF,KAAA,CAAfE,eAAe,CAAA;AAKf,EAAA,IAAAC,SAAA,GAAkBC,QAAQ,EAAE;IAApBf,KAAK,GAAAc,SAAA,CAALd,KAAK,CAAA;EAEb,IAAMgB,sBAAsB,gBAAGd,GAAG,CACnBZ,CAAAA,YAAAA,EAAAA,GAAAA,EAAAA,GAAAA,EAAAA,YAAAA,CAAAA,EAAAA,WAAW,EAAI2B,cAAc,CAACjB,KAAK,CAACkB,MAAM,CAACC,QAAQ,CAACC,QAAQ,CAAC,EACtEpB,KAAK,CAACkB,MAAM,CAACG,MAAM,CAACC,QAAQ,CAACC,SAAS,CAC3C,CAAA;EAED,IAAMC,qBAAqB,gBAAGtB,GAAG,CAClBV,CAAAA,YAAAA,EAAAA,GAAAA,EAAAA,GAAAA,EAAAA,YAAAA,CAAAA,EAAAA,aAAa,EAAIyB,cAAc,CAACjB,KAAK,CAACkB,MAAM,CAACC,QAAQ,CAACM,MAAM,CAAC,EACtEzB,KAAK,CAACkB,MAAM,CAACG,MAAM,CAACC,QAAQ,CAACC,SAAS,CAC3C,CAAA;AACD;AACA,EAAA,IAAMG,eAAe,GAAGC,cAAK,CAACC,MAAM,EAA8B,CAAA;EAClE,IACEhB,kBAAkB,KAAK,QAAQ,IAC/BC,eAAe,KAAK,OAAO,IAC3BA,eAAe,KAAK,SAAS,EAC7B;IACAa,eAAe,CAACG,OAAO,GAAGb,sBAAsB,CAAA;GACjD,MAAM,IAAIU,eAAe,CAACG,OAAO,IAAIjB,kBAAkB,KAAK,SAAS,EAAE;IACtEc,eAAe,CAACG,OAAO,GAAGL,qBAAqB,CAAA;AACjD,GAAA;EAEA,oBAAOM,GAAA,CAACrC,6BAA6B,EAAA;IAACQ,SAAS,EAAEyB,eAAe,CAACG,OAAAA;AAAQ,GAAE,CAAC,CAAA;AAC9E;;;;"}
+{"version":3,"file":"BaseInputAnimatedBorder.web.js","sources":["../../../../../../../src/components/Input/BaseInput/BaseInputAnimatedBorder.web.tsx"],"sourcesContent":["import React from 'react';\nimport type { FlattenSimpleInterpolation } from 'styled-components';\nimport type { ReactElement } from 'react';\nimport styled, { css, keyframes } from 'styled-components';\nimport type { BaseInputProps } from './BaseInput';\nimport BaseBox from '~components/Box/BaseBox';\nimport { makeMotionTime } from '~utils/makeMotionTime';\nimport type { Theme } from '~components/BladeProvider';\nimport { useTheme } from '~components/BladeProvider';\nimport { makeBorderSize } from '~utils/makeBorderSize';\nimport type { ActionStates } from '~utils/useInteraction';\n\nconst scaleBorder = keyframes`\nfrom {\n  transform: scaleX(0);\n  transform-origin: left;\n  opacity: 0;\n}\nto {\n  transform: scaleX(1);\n  transform-origin: left;\n  opacity: 1;\n}\n`;\n\nconst fadeOutBorder = keyframes`\nfrom {\n  opacity: 1\n}\nto {\n  opacity: 0\n}\n`;\n\nconst BaseInputStyledAnimatedBorder = styled(BaseBox)(\n  ({ theme, animation }: { theme: Theme; animation?: FlattenSimpleInterpolation }) => css`\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    opacity: 0;\n    background-color: ${theme.colors.interactive.background.primary.default};\n    border-width: ${makeBorderSize(theme.border.width.thin)};\n    height: ${makeBorderSize(theme.border.width.thin)};\n    ${animation}\n  `,\n);\n\nexport const BaseInputAnimatedBorder = ({\n  currentInteraction,\n  validationState,\n}: {\n  currentInteraction: ActionStates;\n  validationState: BaseInputProps['validationState'];\n}): ReactElement => {\n  const { theme } = useTheme();\n\n  const borderAnimationOnFocus = css`\n    animation: ${scaleBorder} ${makeMotionTime(theme.motion.duration.moderate)}\n      ${theme.motion.easing.standard.effective as string} forwards;\n  `;\n\n  const borderAnimationOnBlur = css`\n    animation: ${fadeOutBorder} ${makeMotionTime(theme.motion.duration.xquick)}\n      ${theme.motion.easing.standard.effective as string} forwards;\n  `;\n  // need ref because we don't have `blur` as an interaction which means the exit animation would run on default as well as blur event\n  const borderAnimation = React.useRef<FlattenSimpleInterpolation>();\n  if (\n    currentInteraction === 'focus' &&\n    validationState !== 'error' &&\n    validationState !== 'success'\n  ) {\n    borderAnimation.current = borderAnimationOnFocus;\n  } else if (borderAnimation.current && currentInteraction === 'default') {\n    borderAnimation.current = borderAnimationOnBlur;\n  }\n\n  return <BaseInputStyledAnimatedBorder animation={borderAnimation.current} />;\n};\n"],"names":["scaleBorder","keyframes","fadeOutBorder","BaseInputStyledAnimatedBorder","styled","BaseBox","withConfig","displayName","componentId","_ref","theme","animation","css","colors","interactive","background","primary","makeBorderSize","border","width","thin","BaseInputAnimatedBorder","_ref2","currentInteraction","validationState","_useTheme","useTheme","borderAnimationOnFocus","makeMotionTime","motion","duration","moderate","easing","standard","effective","borderAnimationOnBlur","xquick","borderAnimation","React","useRef","current","_jsx"],"mappings":";;;;;;;;;;;;AAYA,IAAMA,WAAW,gBAAGC,SAAS,CAW5B,CAAA,oHAAA,CAAA,CAAA,CAAA;AAED,IAAMC,aAAa,gBAAGD,SAAS,CAO9B,CAAA,8BAAA,CAAA,CAAA,CAAA;AAED,IAAME,6BAA6B,gBAAGC,MAAM,CAACC,OAAO,CAAC,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,2DAAA;EAAAC,WAAA,EAAA,aAAA;AAAA,CAAA,CAAA,CACnD,UAAAC,IAAA,EAAA;AAAA,EAAA,IAAGC,KAAK,GAAAD,IAAA,CAALC,KAAK;IAAEC,SAAS,GAAAF,IAAA,CAATE,SAAS,CAAA;AAAA,EAAA,OAAiEC,GAAG,CAAA,CAAA,uEAAA,EAAA,gBAAA,EAAA,UAAA,EAAA,GAAA,EAAA,EAAA,CAAA,EAMjEF,KAAK,CAACG,MAAM,CAACC,WAAW,CAACC,UAAU,CAACC,OAAO,CAAA,SAAA,CAAQ,EACvDC,cAAc,CAACP,KAAK,CAACQ,MAAM,CAACC,KAAK,CAACC,IAAI,CAAC,EAC7CH,cAAc,CAACP,KAAK,CAACQ,MAAM,CAACC,KAAK,CAACC,IAAI,CAAC,EAC/CT,SAAS,CAAA,CAAA;AAAA,CACZ,CACF,CAAA;IAEYU,uBAAuB,GAAG,SAA1BA,uBAAuBA,CAAAC,KAAA,EAMhB;AAAA,EAAA,IALlBC,kBAAkB,GAAAD,KAAA,CAAlBC,kBAAkB;IAClBC,eAAe,GAAAF,KAAA,CAAfE,eAAe,CAAA;AAKf,EAAA,IAAAC,SAAA,GAAkBC,QAAQ,EAAE;IAApBhB,KAAK,GAAAe,SAAA,CAALf,KAAK,CAAA;EAEb,IAAMiB,sBAAsB,gBAAGf,GAAG,CACnBZ,CAAAA,YAAAA,EAAAA,GAAAA,EAAAA,GAAAA,EAAAA,YAAAA,CAAAA,EAAAA,WAAW,EAAI4B,cAAc,CAAClB,KAAK,CAACmB,MAAM,CAACC,QAAQ,CAACC,QAAQ,CAAC,EACtErB,KAAK,CAACmB,MAAM,CAACG,MAAM,CAACC,QAAQ,CAACC,SAAS,CAC3C,CAAA;EAED,IAAMC,qBAAqB,gBAAGvB,GAAG,CAClBV,CAAAA,YAAAA,EAAAA,GAAAA,EAAAA,GAAAA,EAAAA,YAAAA,CAAAA,EAAAA,aAAa,EAAI0B,cAAc,CAAClB,KAAK,CAACmB,MAAM,CAACC,QAAQ,CAACM,MAAM,CAAC,EACtE1B,KAAK,CAACmB,MAAM,CAACG,MAAM,CAACC,QAAQ,CAACC,SAAS,CAC3C,CAAA;AACD;AACA,EAAA,IAAMG,eAAe,GAAGC,cAAK,CAACC,MAAM,EAA8B,CAAA;EAClE,IACEhB,kBAAkB,KAAK,OAAO,IAC9BC,eAAe,KAAK,OAAO,IAC3BA,eAAe,KAAK,SAAS,EAC7B;IACAa,eAAe,CAACG,OAAO,GAAGb,sBAAsB,CAAA;GACjD,MAAM,IAAIU,eAAe,CAACG,OAAO,IAAIjB,kBAAkB,KAAK,SAAS,EAAE;IACtEc,eAAe,CAACG,OAAO,GAAGL,qBAAqB,CAAA;AACjD,GAAA;EAEA,oBAAOM,GAAA,CAACtC,6BAA6B,EAAA;IAACQ,SAAS,EAAE0B,eAAe,CAACG,OAAAA;AAAQ,GAAE,CAAC,CAAA;AAC9E;;;;"}

package/build/lib/web/production/components/Input/BaseInput/BaseInputTagSlot.web.js

@@ -171,10 +171,13 @@ var BaseInputTagSlot = function BaseInputTagSlot(_ref3) {
       setShouldIgnoreBlurAnimation === null || setShouldIgnoreBlurAnimation === void 0 ? void 0 : setShouldIgnoreBlurAnimation(false);
     },
     children: [visibleTags, tags && !showAllTags && invisibleTagsCount ? /*#__PURE__*/jsx(Text, {
-      type: isDisabled ? 'placeholder' : 'normal',
+      color: isDisabled ? 'surface.text.gray.disabled' : 'surface.text.gray.subtle',
       alignSelf: "center",
       marginY: "spacing.2",
       marginRight: "spacing.4",
+      variant: "body",
+      size: "small",
+      weight: "regular",
       children: /*#__PURE__*/jsx(BaseBox, {
         as: "span",
         whiteSpace: "nowrap",

package/build/lib/web/production/components/Input/BaseInput/BaseInputTagSlot.web.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseInputTagSlot.web.js","sources":["../../../../../../../src/components/Input/BaseInput/BaseInputTagSlot.web.tsx"],"sourcesContent":["import React from 'react';\nimport type { BaseInputTagSlotProps } from './types';\nimport { BASEINPUT_DEFAULT_HEIGHT } from './baseInputConfig';\nimport BaseBox from '~components/Box/BaseBox';\nimport { Text } from '~components/Typography';\nimport { castWebType, makeSize } from '~utils';\nimport { useIsomorphicLayoutEffect } from '~utils/useIsomorphicLayoutEffect';\nimport { useIsMobile } from '~utils/useIsMobile';\nimport { MetaConstants } from '~utils/metaAttribute';\nimport { size } from '~tokens/global';\n\nconst MINUMUM_INPUT_SPACE = 30;\nconst PLUS_X_MORE_TEXT_WIDTH = 60;\nconst TAG_MAX_WIDTH: number = size['140'];\n\nconst useVisibleTagsCount = ({\n  slotRef,\n  tags,\n  maxTagRows,\n  visibleTagsCountRef,\n  showAllTags,\n  labelPrefix,\n}: {\n  slotRef: React.RefObject<HTMLDivElement>;\n  tags: BaseInputTagSlotProps['tags'];\n  maxTagRows: BaseInputTagSlotProps['maxTagRows'];\n  visibleTagsCountRef: BaseInputTagSlotProps['visibleTagsCountRef'];\n  showAllTags: BaseInputTagSlotProps['showAllTags'];\n  labelPrefix: BaseInputTagSlotProps['labelPrefix'];\n}): number => {\n  const [visibleTagsCount, setVisibleTagsCount] = React.useState(0);\n  const visibleTagsCountStateRef = React.useRef<number>(0);\n\n  useIsomorphicLayoutEffect(() => {\n    if (!tags || labelPrefix) {\n      setVisibleTagsCount(0);\n      return;\n    }\n\n    if (maxTagRows === 'multiple' || showAllTags) {\n      visibleTagsCountRef.current = tags.length;\n      setVisibleTagsCount(tags.length);\n      return;\n    }\n\n    const inputTagsSlotWidth = slotRef.current?.clientWidth;\n    visibleTagsCountStateRef.current = 0;\n    let totalTagsWidth = 0;\n\n    if (!inputTagsSlotWidth) {\n      return;\n    }\n\n    const allTagsEl = slotRef.current?.querySelectorAll(\n      `[data-blade-component=\"${MetaConstants.Tag}\"]`,\n    );\n\n    const totalAvailableSpaceForTags =\n      inputTagsSlotWidth - (MINUMUM_INPUT_SPACE + PLUS_X_MORE_TEXT_WIDTH);\n\n    if (allTagsEl.length !== tags.length) {\n      // some weird edge cases in controlled select where tags are not rendered in children\n      // we assume 140px (max-width of tag as width of all tags)\n      const tagsCount = Math.floor((totalAvailableSpaceForTags / TAG_MAX_WIDTH) * tags.length);\n      visibleTagsCountRef.current = tagsCount;\n      setVisibleTagsCount(tagsCount);\n      return;\n    }\n\n    for (const tagEl of allTagsEl) {\n      totalTagsWidth += tagEl.clientWidth;\n      if (totalTagsWidth >= totalAvailableSpaceForTags) {\n        break;\n      } else {\n        visibleTagsCountStateRef.current++;\n      }\n    }\n\n    visibleTagsCountRef.current = visibleTagsCountStateRef.current;\n    setVisibleTagsCount(visibleTagsCountStateRef.current);\n  }, [tags?.length, showAllTags]);\n\n  return visibleTagsCount;\n};\n\nconst getSelectedTextWithoutTags = ({\n  items,\n  labelPrefix,\n}: {\n  items: number;\n  labelPrefix?: string;\n}): string => {\n  if (labelPrefix) {\n    return `${labelPrefix} (${items} Selected)`;\n  }\n\n  return `${items} Selected`;\n};\n\nconst BaseInputTagSlot = ({\n  renderAs,\n  children,\n  tags,\n  maxTagRows,\n  showAllTags,\n  setShouldIgnoreBlurAnimation,\n  handleOnInputClick,\n  isDropdownTrigger,\n  visibleTagsCountRef,\n  labelPrefix,\n  isDisabled,\n}: BaseInputTagSlotProps): React.ReactElement => {\n  const hasTags = tags && tags.length > 0;\n  const slotRef = React.useRef<HTMLDivElement>(null);\n  const visibleTagsCount = useVisibleTagsCount({\n    slotRef,\n    tags,\n    maxTagRows,\n    visibleTagsCountRef,\n    showAllTags,\n    labelPrefix,\n  });\n\n  React.useEffect(() => {\n    slotRef.current?.scrollTo?.({\n      top:\n        maxTagRows === 'multiple' || maxTagRows === 'expandable' ? slotRef.current.scrollHeight : 0,\n      left: maxTagRows === 'single' ? slotRef.current.scrollWidth : 0,\n      behavior: 'smooth',\n    });\n  }, [tags?.length, maxTagRows]);\n\n  React.useEffect(() => {\n    if (!showAllTags) {\n      slotRef.current?.scrollTo?.({\n        top: 0,\n        left: 0,\n        behavior: 'smooth',\n      });\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [showAllTags]);\n\n  const visibleTags = React.useMemo(() => {\n    return showAllTags ? tags : tags?.slice(0, visibleTagsCount);\n  }, [showAllTags, tags, visibleTagsCount]);\n\n  const invisibleTagsCount = React.useMemo(() => {\n    if (tags && visibleTags) {\n      return tags.length - visibleTags.length;\n    }\n\n    return 0;\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [tags?.length, visibleTags?.length]);\n\n  const isMobile = useIsMobile();\n\n  if (!isDropdownTrigger) {\n    // If its not dropdown trigger, we don't need to render tag containers\n    return children;\n  }\n\n  // tag height changes in mobile and desktop so we keep different paddings to make it look as expected\n  const paddingYWithTags = isMobile ? 'spacing.1' : 'spacing.2';\n\n  return (\n    <BaseBox\n      ref={slotRef}\n      className=\"tags-slot\"\n      paddingY={paddingYWithTags}\n      paddingLeft=\"spacing.4\"\n      display=\"flex\"\n      flex=\"1\"\n      flexWrap={maxTagRows === 'single' ? 'nowrap' : 'wrap'}\n      overflowX=\"auto\"\n      overflowY={showAllTags || maxTagRows === 'multiple' ? 'auto' : 'hidden'}\n      minHeight={makeSize(BASEINPUT_DEFAULT_HEIGHT)}\n      onMouseDown={() => {\n        setShouldIgnoreBlurAnimation?.(true);\n      }}\n      onClick={(e) => {\n        handleOnInputClick(castWebType(e));\n      }}\n      onMouseUp={() => {\n        setShouldIgnoreBlurAnimation?.(false);\n      }}\n    >\n      {visibleTags}\n      {tags && !showAllTags && invisibleTagsCount ? (\n        <Text\n          type={isDisabled ? 'placeholder' : 'normal'}\n          alignSelf=\"center\"\n          marginY=\"spacing.2\"\n          marginRight=\"spacing.4\"\n        >\n          <BaseBox as=\"span\" whiteSpace=\"nowrap\">\n            {visibleTags?.length === 0\n              ? getSelectedTextWithoutTags({\n                  items: invisibleTagsCount,\n                  labelPrefix,\n                })\n              : `+${invisibleTagsCount} More`}\n          </BaseBox>\n        </Text>\n      ) : null}\n      <BaseBox\n        marginTop=\"-4px\"\n        minWidth={hasTags && renderAs === 'button' ? undefined : makeSize(MINUMUM_INPUT_SPACE)}\n        width={hasTags && renderAs === 'button' ? makeSize(size['1']) : '100%'}\n      >\n        {children}\n      </BaseBox>\n    </BaseBox>\n  );\n};\n\nexport { BaseInputTagSlot };\n"],"names":["MINUMUM_INPUT_SPACE","PLUS_X_MORE_TEXT_WIDTH","TAG_MAX_WIDTH","size","useVisibleTagsCount","_ref","slotRef","tags","maxTagRows","visibleTagsCountRef","showAllTags","labelPrefix","_React$useState","React","useState","_React$useState2","_slicedToArray","visibleTagsCount","setVisibleTagsCount","visibleTagsCountStateRef","useRef","useIsomorphicLayoutEffect","_slotRef$current","_slotRef$current2","current","length","inputTagsSlotWidth","clientWidth","totalTagsWidth","allTagsEl","querySelectorAll","concat","MetaConstants","Tag","totalAvailableSpaceForTags","tagsCount","Math","floor","_iterator","_createForOfIteratorHelper","_step","s","n","done","tagEl","value","err","e","f","getSelectedTextWithoutTags","_ref2","items","BaseInputTagSlot","_ref3","renderAs","children","setShouldIgnoreBlurAnimation","handleOnInputClick","isDropdownTrigger","isDisabled","hasTags","useEffect","_slotRef$current3","_slotRef$current3$scr","scrollTo","call","top","scrollHeight","left","scrollWidth","behavior","_slotRef$current4","_slotRef$current4$scr","visibleTags","useMemo","slice","invisibleTagsCount","isMobile","useIsMobile","paddingYWithTags","_jsxs","BaseBox","ref","className","paddingY","paddingLeft","display","flex","flexWrap","overflowX","overflowY","minHeight","makeSize","BASEINPUT_DEFAULT_HEIGHT","onMouseDown","onClick","castWebType","onMouseUp","_jsx","Text","type","alignSelf","marginY","marginRight","as","whiteSpace","marginTop","minWidth","undefined","width"],"mappings":"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"}
+{"version":3,"file":"BaseInputTagSlot.web.js","sources":["../../../../../../../src/components/Input/BaseInput/BaseInputTagSlot.web.tsx"],"sourcesContent":["import React from 'react';\nimport type { BaseInputTagSlotProps } from './types';\nimport { BASEINPUT_DEFAULT_HEIGHT } from './baseInputConfig';\nimport BaseBox from '~components/Box/BaseBox';\nimport { Text } from '~components/Typography';\nimport { castWebType, makeSize } from '~utils';\nimport { useIsomorphicLayoutEffect } from '~utils/useIsomorphicLayoutEffect';\nimport { useIsMobile } from '~utils/useIsMobile';\nimport { MetaConstants } from '~utils/metaAttribute';\nimport { size } from '~tokens/global';\n\nconst MINUMUM_INPUT_SPACE = 30;\nconst PLUS_X_MORE_TEXT_WIDTH = 60;\nconst TAG_MAX_WIDTH: number = size['140'];\n\nconst useVisibleTagsCount = ({\n  slotRef,\n  tags,\n  maxTagRows,\n  visibleTagsCountRef,\n  showAllTags,\n  labelPrefix,\n}: {\n  slotRef: React.RefObject<HTMLDivElement>;\n  tags: BaseInputTagSlotProps['tags'];\n  maxTagRows: BaseInputTagSlotProps['maxTagRows'];\n  visibleTagsCountRef: BaseInputTagSlotProps['visibleTagsCountRef'];\n  showAllTags: BaseInputTagSlotProps['showAllTags'];\n  labelPrefix: BaseInputTagSlotProps['labelPrefix'];\n}): number => {\n  const [visibleTagsCount, setVisibleTagsCount] = React.useState(0);\n  const visibleTagsCountStateRef = React.useRef<number>(0);\n\n  useIsomorphicLayoutEffect(() => {\n    if (!tags || labelPrefix) {\n      setVisibleTagsCount(0);\n      return;\n    }\n\n    if (maxTagRows === 'multiple' || showAllTags) {\n      visibleTagsCountRef.current = tags.length;\n      setVisibleTagsCount(tags.length);\n      return;\n    }\n\n    const inputTagsSlotWidth = slotRef.current?.clientWidth;\n    visibleTagsCountStateRef.current = 0;\n    let totalTagsWidth = 0;\n\n    if (!inputTagsSlotWidth) {\n      return;\n    }\n\n    const allTagsEl = slotRef.current?.querySelectorAll(\n      `[data-blade-component=\"${MetaConstants.Tag}\"]`,\n    );\n\n    const totalAvailableSpaceForTags =\n      inputTagsSlotWidth - (MINUMUM_INPUT_SPACE + PLUS_X_MORE_TEXT_WIDTH);\n\n    if (allTagsEl.length !== tags.length) {\n      // some weird edge cases in controlled select where tags are not rendered in children\n      // we assume 140px (max-width of tag as width of all tags)\n      const tagsCount = Math.floor((totalAvailableSpaceForTags / TAG_MAX_WIDTH) * tags.length);\n      visibleTagsCountRef.current = tagsCount;\n      setVisibleTagsCount(tagsCount);\n      return;\n    }\n\n    for (const tagEl of allTagsEl) {\n      totalTagsWidth += tagEl.clientWidth;\n      if (totalTagsWidth >= totalAvailableSpaceForTags) {\n        break;\n      } else {\n        visibleTagsCountStateRef.current++;\n      }\n    }\n\n    visibleTagsCountRef.current = visibleTagsCountStateRef.current;\n    setVisibleTagsCount(visibleTagsCountStateRef.current);\n  }, [tags?.length, showAllTags]);\n\n  return visibleTagsCount;\n};\n\nconst getSelectedTextWithoutTags = ({\n  items,\n  labelPrefix,\n}: {\n  items: number;\n  labelPrefix?: string;\n}): string => {\n  if (labelPrefix) {\n    return `${labelPrefix} (${items} Selected)`;\n  }\n\n  return `${items} Selected`;\n};\n\nconst BaseInputTagSlot = ({\n  renderAs,\n  children,\n  tags,\n  maxTagRows,\n  showAllTags,\n  setShouldIgnoreBlurAnimation,\n  handleOnInputClick,\n  isDropdownTrigger,\n  visibleTagsCountRef,\n  labelPrefix,\n  isDisabled,\n}: BaseInputTagSlotProps): React.ReactElement => {\n  const hasTags = tags && tags.length > 0;\n  const slotRef = React.useRef<HTMLDivElement>(null);\n  const visibleTagsCount = useVisibleTagsCount({\n    slotRef,\n    tags,\n    maxTagRows,\n    visibleTagsCountRef,\n    showAllTags,\n    labelPrefix,\n  });\n\n  React.useEffect(() => {\n    slotRef.current?.scrollTo?.({\n      top:\n        maxTagRows === 'multiple' || maxTagRows === 'expandable' ? slotRef.current.scrollHeight : 0,\n      left: maxTagRows === 'single' ? slotRef.current.scrollWidth : 0,\n      behavior: 'smooth',\n    });\n  }, [tags?.length, maxTagRows]);\n\n  React.useEffect(() => {\n    if (!showAllTags) {\n      slotRef.current?.scrollTo?.({\n        top: 0,\n        left: 0,\n        behavior: 'smooth',\n      });\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [showAllTags]);\n\n  const visibleTags = React.useMemo(() => {\n    return showAllTags ? tags : tags?.slice(0, visibleTagsCount);\n  }, [showAllTags, tags, visibleTagsCount]);\n\n  const invisibleTagsCount = React.useMemo(() => {\n    if (tags && visibleTags) {\n      return tags.length - visibleTags.length;\n    }\n\n    return 0;\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [tags?.length, visibleTags?.length]);\n\n  const isMobile = useIsMobile();\n\n  if (!isDropdownTrigger) {\n    // If its not dropdown trigger, we don't need to render tag containers\n    return children;\n  }\n\n  // tag height changes in mobile and desktop so we keep different paddings to make it look as expected\n  const paddingYWithTags = isMobile ? 'spacing.1' : 'spacing.2';\n\n  return (\n    <BaseBox\n      ref={slotRef}\n      className=\"tags-slot\"\n      paddingY={paddingYWithTags}\n      paddingLeft=\"spacing.4\"\n      display=\"flex\"\n      flex=\"1\"\n      flexWrap={maxTagRows === 'single' ? 'nowrap' : 'wrap'}\n      overflowX=\"auto\"\n      overflowY={showAllTags || maxTagRows === 'multiple' ? 'auto' : 'hidden'}\n      minHeight={makeSize(BASEINPUT_DEFAULT_HEIGHT)}\n      onMouseDown={() => {\n        setShouldIgnoreBlurAnimation?.(true);\n      }}\n      onClick={(e) => {\n        handleOnInputClick(castWebType(e));\n      }}\n      onMouseUp={() => {\n        setShouldIgnoreBlurAnimation?.(false);\n      }}\n    >\n      {visibleTags}\n      {tags && !showAllTags && invisibleTagsCount ? (\n        <Text\n          color={isDisabled ? 'surface.text.gray.disabled' : 'surface.text.gray.subtle'}\n          alignSelf=\"center\"\n          marginY=\"spacing.2\"\n          marginRight=\"spacing.4\"\n          variant=\"body\"\n          size=\"small\"\n          weight=\"regular\"\n        >\n          <BaseBox as=\"span\" whiteSpace=\"nowrap\">\n            {visibleTags?.length === 0\n              ? getSelectedTextWithoutTags({\n                  items: invisibleTagsCount,\n                  labelPrefix,\n                })\n              : `+${invisibleTagsCount} More`}\n          </BaseBox>\n        </Text>\n      ) : null}\n      <BaseBox\n        marginTop=\"-4px\"\n        minWidth={hasTags && renderAs === 'button' ? undefined : makeSize(MINUMUM_INPUT_SPACE)}\n        width={hasTags && renderAs === 'button' ? makeSize(size['1']) : '100%'}\n      >\n        {children}\n      </BaseBox>\n    </BaseBox>\n  );\n};\n\nexport { BaseInputTagSlot };\n"],"names":["MINUMUM_INPUT_SPACE","PLUS_X_MORE_TEXT_WIDTH","TAG_MAX_WIDTH","size","useVisibleTagsCount","_ref","slotRef","tags","maxTagRows","visibleTagsCountRef","showAllTags","labelPrefix","_React$useState","React","useState","_React$useState2","_slicedToArray","visibleTagsCount","setVisibleTagsCount","visibleTagsCountStateRef","useRef","useIsomorphicLayoutEffect","_slotRef$current","_slotRef$current2","current","length","inputTagsSlotWidth","clientWidth","totalTagsWidth","allTagsEl","querySelectorAll","concat","MetaConstants","Tag","totalAvailableSpaceForTags","tagsCount","Math","floor","_iterator","_createForOfIteratorHelper","_step","s","n","done","tagEl","value","err","e","f","getSelectedTextWithoutTags","_ref2","items","BaseInputTagSlot","_ref3","renderAs","children","setShouldIgnoreBlurAnimation","handleOnInputClick","isDropdownTrigger","isDisabled","hasTags","useEffect","_slotRef$current3","_slotRef$current3$scr","scrollTo","call","top","scrollHeight","left","scrollWidth","behavior","_slotRef$current4","_slotRef$current4$scr","visibleTags","useMemo","slice","invisibleTagsCount","isMobile","useIsMobile","paddingYWithTags","_jsxs","BaseBox","ref","className","paddingY","paddingLeft","display","flex","flexWrap","overflowX","overflowY","minHeight","makeSize","BASEINPUT_DEFAULT_HEIGHT","onMouseDown","onClick","castWebType","onMouseUp","_jsx","Text","color","alignSelf","marginY","marginRight","variant","weight","as","whiteSpace","marginTop","minWidth","undefined","width"],"mappings":"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"}

package/build/lib/web/production/components/Input/BaseInput/BaseInputVisuals.js

@@ -109,7 +109,7 @@ var BaseInputVisuals = function BaseInputVisuals(_ref5) {
         display: "flex",
         children: /*#__PURE__*/jsx(LeadingIcon, {
           size: "medium",
-          color: isDisabled ? 'surface.text.placeholder.lowContrast' : 'surface.text.subtle.lowContrast'
+          color: isDisabled ? 'surface.icon.gray.disabled' : 'surface.icon.gray.subtle'
         })
       }) : null, hasPrefix ? /*#__PURE__*/jsx(BaseBox, _objectSpread(_objectSpread({}, getPrefixStyles({
         hasLeadingIcon: hasLeadingIcon,
@@ -119,8 +119,7 @@ var BaseInputVisuals = function BaseInputVisuals(_ref5) {
           size: "medium",
           variant: "body",
           weight: "regular",
-          contrast: "low",
-          type: isDisabled ? 'placeholder' : 'subtle',
+          color: isDisabled ? 'surface.text.gray.disabled' : 'surface.text.gray.subtle',
           children: prefix
         })
       })) : null]
@@ -148,8 +147,7 @@ var BaseInputVisuals = function BaseInputVisuals(_ref5) {
           size: "medium",
           variant: "body",
           weight: "regular",
-          contrast: "low",
-          type: isDisabled ? 'placeholder' : 'subtle',
+          color: isDisabled ? 'surface.text.gray.disabled' : 'surface.text.gray.subtle',
           children: suffix
         })
       })) : null, TrailingIcon ? /*#__PURE__*/jsx(BaseBox, {
@@ -157,7 +155,7 @@ var BaseInputVisuals = function BaseInputVisuals(_ref5) {
         display: "flex",
         children: /*#__PURE__*/jsx(TrailingIcon, {
           size: "medium",
-          color: isDisabled ? 'surface.text.placeholder.lowContrast' : 'surface.text.subtle.lowContrast'
+          color: isDisabled ? 'interactive.icon.gray.disabled' : 'interactive.icon.gray.muted'
         })
       }) : null]
     }));

package/build/lib/web/production/components/Input/BaseInput/BaseInputVisuals.js.map

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

package/build/lib/web/production/components/Input/BaseInput/BaseInputWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseInputWrapper.js","sources":["../../../../../../../src/components/Input/BaseInput/BaseInputWrapper.tsx"],"sourcesContent":["import type { ReactElement, ReactNode } from 'react';\nimport React from 'react';\nimport type { BaseInputProps } from './BaseInput';\nimport { BaseInputAnimatedBorder } from './BaseInputAnimatedBorder';\nimport { AnimatedBaseInputWrapper } from './AnimatedBaseInputWrapper';\nimport type { ActionStates } from '~tokens/theme/theme';\nimport type { ContainerElementType } from '~utils/types';\n\ntype BaseInputWrapperProps = Pick<\n  BaseInputProps,\n  | 'isDisabled'\n  | 'validationState'\n  | 'showAllTags'\n  | 'maxTagRows'\n  | 'setInputWrapperRef'\n  | 'isDropdownTrigger'\n> & {\n  isFocused?: boolean;\n  isLabelLeftPositioned?: boolean;\n  currentInteraction: keyof ActionStates;\n  isTextArea?: boolean;\n  setShowAllTagsWithAnimation: (showAllTagsWithAnimation: boolean) => void;\n  children: React.ReactNode;\n};\n\nconst _BaseInputWrapper: React.ForwardRefRenderFunction<\n  ContainerElementType,\n  BaseInputWrapperProps & {\n    children: ReactNode;\n  }\n> = (\n  {\n    children,\n    validationState,\n    currentInteraction,\n    isLabelLeftPositioned,\n    isTextArea,\n    showAllTags,\n    setShowAllTagsWithAnimation,\n    maxTagRows,\n    ...props\n  },\n  ref,\n): ReactElement => {\n  return (\n    <AnimatedBaseInputWrapper\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unnecessary-type-assertion\n      ref={ref as any}\n      isTextArea={isTextArea}\n      validationState={validationState}\n      currentInteraction={currentInteraction}\n      showAllTags={showAllTags}\n      maxTagRows={maxTagRows}\n      setShowAllTagsWithAnimation={setShowAllTagsWithAnimation}\n      {...props}\n    >\n      {children}\n      <BaseInputAnimatedBorder\n        currentInteraction={currentInteraction}\n        validationState={validationState}\n      />\n    </AnimatedBaseInputWrapper>\n  );\n};\n\nexport const BaseInputWrapper = React.forwardRef(_BaseInputWrapper);\n"],"names":["_BaseInputWrapper","_ref","ref","children","validationState","currentInteraction","isLabelLeftPositioned","isTextArea","showAllTags","setShowAllTagsWithAnimation","maxTagRows","props","_objectWithoutProperties","_excluded","_jsxs","AnimatedBaseInputWrapper","_objectSpread","_jsx","BaseInputAnimatedBorder","BaseInputWrapper","React","forwardRef"],"mappings":";;;;;;;;;;AAyBA,IAAMA,iBAKL,GAAG,SALEA,iBAKLA,CAAAC,IAAA,EAYCC,GAAG,EACc;AAAA,EAAA,IAXfC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;IACRC,eAAe,GAAAH,IAAA,CAAfG,eAAe;IACfC,kBAAkB,GAAAJ,IAAA,CAAlBI,kBAAkB;IAClBC,qBAAqB,GAAAL,IAAA,CAArBK,qBAAqB;IACrBC,UAAU,GAAAN,IAAA,CAAVM,UAAU;IACVC,WAAW,GAAAP,IAAA,CAAXO,WAAW;IACXC,2BAA2B,GAAAR,IAAA,CAA3BQ,2BAA2B;IAC3BC,UAAU,GAAAT,IAAA,CAAVS,UAAU;AACPC,IAAAA,KAAK,GAAAC,wBAAA,CAAAX,IAAA,EAAAY,SAAA,CAAA,CAAA;AAIV,EAAA,oBACEC,IAAA,CAACC,wBAAAA;AACC;IAAAC,aAAA,CAAAA,aAAA,CAAA;AACAd,IAAAA,GAAG,EAAEA,GAAW;AAChBK,IAAAA,UAAU,EAAEA,UAAW;AACvBH,IAAAA,eAAe,EAAEA,eAAgB;AACjCC,IAAAA,kBAAkB,EAAEA,kBAAmB;AACvCG,IAAAA,WAAW,EAAEA,WAAY;AACzBE,IAAAA,UAAU,EAAEA,UAAW;AACvBD,IAAAA,2BAA2B,EAAEA,2BAAAA;AAA4B,GAAA,EACrDE,KAAK,CAAA,EAAA,EAAA,EAAA;AAAAR,IAAAA,QAAA,EAERA,CAAAA,QAAQ,eACTc,GAAA,CAACC,uBAAuB,EAAA;AACtBb,MAAAA,kBAAkB,EAAEA,kBAAmB;AACvCD,MAAAA,eAAe,EAAEA,eAAAA;AAAgB,KAClC,CAAC,CAAA;AAAA,GAAA,CACsB,CAAC,CAAA;AAE/B,CAAC,CAAA;AAEM,IAAMe,gBAAgB,gBAAGC,cAAK,CAACC,UAAU,CAACrB,iBAAiB;;;;"}
+{"version":3,"file":"BaseInputWrapper.js","sources":["../../../../../../../src/components/Input/BaseInput/BaseInputWrapper.tsx"],"sourcesContent":["import type { ReactElement, ReactNode } from 'react';\nimport React from 'react';\nimport type { BaseInputProps } from './BaseInput';\nimport { BaseInputAnimatedBorder } from './BaseInputAnimatedBorder';\nimport { AnimatedBaseInputWrapper } from './AnimatedBaseInputWrapper';\nimport type { ContainerElementType } from '~utils/types';\nimport type { ActionStates } from '~utils/useInteraction';\n\ntype BaseInputWrapperProps = Pick<\n  BaseInputProps,\n  | 'isDisabled'\n  | 'validationState'\n  | 'showAllTags'\n  | 'maxTagRows'\n  | 'setInputWrapperRef'\n  | 'isDropdownTrigger'\n> & {\n  isFocused?: boolean;\n  isLabelLeftPositioned?: boolean;\n  currentInteraction: ActionStates;\n  isTextArea?: boolean;\n  setShowAllTagsWithAnimation: (showAllTagsWithAnimation: boolean) => void;\n  children: React.ReactNode;\n};\n\nconst _BaseInputWrapper: React.ForwardRefRenderFunction<\n  ContainerElementType,\n  BaseInputWrapperProps & {\n    children: ReactNode;\n  }\n> = (\n  {\n    children,\n    validationState,\n    currentInteraction,\n    isLabelLeftPositioned,\n    isTextArea,\n    showAllTags,\n    setShowAllTagsWithAnimation,\n    maxTagRows,\n    ...props\n  },\n  ref,\n): ReactElement => {\n  return (\n    <AnimatedBaseInputWrapper\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unnecessary-type-assertion\n      ref={ref as any}\n      isTextArea={isTextArea}\n      validationState={validationState}\n      currentInteraction={currentInteraction}\n      showAllTags={showAllTags}\n      maxTagRows={maxTagRows}\n      setShowAllTagsWithAnimation={setShowAllTagsWithAnimation}\n      {...props}\n    >\n      {children}\n      <BaseInputAnimatedBorder\n        currentInteraction={currentInteraction}\n        validationState={validationState}\n      />\n    </AnimatedBaseInputWrapper>\n  );\n};\n\nexport const BaseInputWrapper = React.forwardRef(_BaseInputWrapper);\n"],"names":["_BaseInputWrapper","_ref","ref","children","validationState","currentInteraction","isLabelLeftPositioned","isTextArea","showAllTags","setShowAllTagsWithAnimation","maxTagRows","props","_objectWithoutProperties","_excluded","_jsxs","AnimatedBaseInputWrapper","_objectSpread","_jsx","BaseInputAnimatedBorder","BaseInputWrapper","React","forwardRef"],"mappings":";;;;;;;;;;AAyBA,IAAMA,iBAKL,GAAG,SALEA,iBAKLA,CAAAC,IAAA,EAYCC,GAAG,EACc;AAAA,EAAA,IAXfC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;IACRC,eAAe,GAAAH,IAAA,CAAfG,eAAe;IACfC,kBAAkB,GAAAJ,IAAA,CAAlBI,kBAAkB;IAClBC,qBAAqB,GAAAL,IAAA,CAArBK,qBAAqB;IACrBC,UAAU,GAAAN,IAAA,CAAVM,UAAU;IACVC,WAAW,GAAAP,IAAA,CAAXO,WAAW;IACXC,2BAA2B,GAAAR,IAAA,CAA3BQ,2BAA2B;IAC3BC,UAAU,GAAAT,IAAA,CAAVS,UAAU;AACPC,IAAAA,KAAK,GAAAC,wBAAA,CAAAX,IAAA,EAAAY,SAAA,CAAA,CAAA;AAIV,EAAA,oBACEC,IAAA,CAACC,wBAAAA;AACC;IAAAC,aAAA,CAAAA,aAAA,CAAA;AACAd,IAAAA,GAAG,EAAEA,GAAW;AAChBK,IAAAA,UAAU,EAAEA,UAAW;AACvBH,IAAAA,eAAe,EAAEA,eAAgB;AACjCC,IAAAA,kBAAkB,EAAEA,kBAAmB;AACvCG,IAAAA,WAAW,EAAEA,WAAY;AACzBE,IAAAA,UAAU,EAAEA,UAAW;AACvBD,IAAAA,2BAA2B,EAAEA,2BAAAA;AAA4B,GAAA,EACrDE,KAAK,CAAA,EAAA,EAAA,EAAA;AAAAR,IAAAA,QAAA,EAERA,CAAAA,QAAQ,eACTc,GAAA,CAACC,uBAAuB,EAAA;AACtBb,MAAAA,kBAAkB,EAAEA,kBAAmB;AACvCD,MAAAA,eAAe,EAAEA,eAAAA;AAAgB,KAClC,CAAC,CAAA;AAAA,GAAA,CACsB,CAAC,CAAA;AAE/B,CAAC,CAAA;AAEM,IAAMe,gBAAgB,gBAAGC,cAAK,CAACC,UAAU,CAACrB,iBAAiB;;;;"}

package/build/lib/web/production/components/Input/BaseInput/StyledBaseInput.web.js

@@ -33,9 +33,8 @@ var getWebInputStyles = function getWebInputStyles(props) {
     '::placeholder': _objectSpread(_objectSpread({}, getTextStyles({
       size: 'medium',
       variant: 'body',
-      type: 'placeholder',
       weight: 'regular',
-      contrast: 'low',
+      color: 'surface.text.gray.disabled',
       theme: props.theme
     })), {}, {
       textAlign: props.textAlign
@@ -109,7 +108,7 @@ var _StyledBaseInput = function _StyledBaseInput(_ref, ref) {
       });
     },
     onFocus: function onFocus(event) {
-      setCurrentInteraction('active');
+      setCurrentInteraction('focus');
       handleOnFocus === null || handleOnFocus === void 0 ? void 0 : handleOnFocus({
         name: name,
         value: event
@@ -142,7 +141,7 @@ var _StyledBaseInput = function _StyledBaseInput(_ref, ref) {
   }, commonProps), props), accessibilityProps), {}, {
     value: props.value,
     children: /*#__PURE__*/jsx(Text, {
-      type: props.value && !isDisabled ? 'subtle' : 'placeholder',
+      color: props.value && !isDisabled ? 'surface.text.gray.subtle' : 'surface.text.gray.disabled',
       truncateAfterLines: 1,
       textAlign: props.textAlign,
       children: props.value ? props.value : props.placeholder

package/build/lib/web/production/components/Input/BaseInput/StyledBaseInput.web.js.map

@@ -1 +1 @@
-{"version":3,"file":"StyledBaseInput.web.js","sources":["../../../../../../../src/components/Input/BaseInput/StyledBaseInput.web.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport type { CSSObject, DefaultTheme, ThemeProps } from 'styled-components';\nimport { getBaseInputStyles } from './baseInputStyles';\n\nimport type { StyledBaseInputProps } from './types';\nimport getTextStyles from '~components/Typography/Text/getTextStyles';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { Text } from '~components/Typography';\n\nconst getWebInputStyles = (\n  props: Omit<StyledBaseInputProps, 'accessibilityProps' | 'setCurrentInteraction' | 'type'> &\n    ThemeProps<DefaultTheme> &\n    (React.InputHTMLAttributes<HTMLInputElement> | React.ButtonHTMLAttributes<HTMLButtonElement>),\n): CSSObject => {\n  return {\n    ...getBaseInputStyles({\n      isDisabled: props.disabled,\n      theme: props.theme,\n      validationState: props.validationState,\n      leadingIcon: props.leadingIcon,\n      prefix: props.prefix,\n      interactionElement: props.interactionElement,\n      suffix: props.suffix,\n      trailingIcon: props.trailingIcon,\n      textAlign: props.textAlign,\n      isTextArea: props.isTextArea,\n      hasTags: props.hasTags,\n      isDropdownTrigger: props.isDropdownTrigger,\n    }),\n    outline: 'none',\n    border: 'none',\n    '::placeholder': {\n      ...getTextStyles({\n        size: 'medium',\n        variant: 'body',\n        type: 'placeholder',\n        weight: 'regular',\n        contrast: 'low',\n        theme: props.theme,\n      }),\n      textAlign: props.textAlign,\n    },\n    ':focus': {\n      outline: 'none',\n    },\n    cursor: props.disabled ? 'not-allowed' : 'auto',\n  };\n};\n\nconst StyledBaseNativeInput = styled.input<\n  Omit<StyledBaseInputProps, 'accessibilityProps' | 'setCurrentInteraction' | 'type'>\n>(getWebInputStyles);\n\nconst StyledBaseNativeButton = styled.button<\n  Omit<StyledBaseInputProps, 'accessibilityProps' | 'setCurrentInteraction' | 'type'>\n>((props) => ({\n  ...getWebInputStyles(props),\n}));\n\nconst autoCompleteSuggestionTypeMap = {\n  none: 'off',\n  on: 'on',\n  name: 'name',\n  email: 'email',\n  username: 'username',\n  password: 'current-password',\n  newPassword: 'new-password',\n  oneTimeCode: 'one-time-code',\n  telephone: 'tel',\n  postalCode: 'postal-code',\n  countryName: 'country',\n  creditCardNumber: 'cc-number',\n  creditCardCSC: 'cc-csc',\n  creditCardExpiry: 'cc-exp',\n  creditCardExpiryMonth: 'cc-exp-month',\n  creditCardExpiryYear: 'cc-exp-year',\n};\n\nconst _StyledBaseInput: React.ForwardRefRenderFunction<\n  HTMLInputElement | HTMLButtonElement,\n  StyledBaseInputProps\n> = (\n  {\n    name,\n    isDisabled,\n    isRequired,\n    maxCharacters,\n    handleOnFocus,\n    handleOnChange,\n    handleOnBlur,\n    handleOnInput,\n    handleOnKeyDown,\n    handleOnClick,\n    keyboardType,\n    keyboardReturnKeyType,\n    autoCompleteSuggestionType,\n    accessibilityProps,\n    setCurrentInteraction,\n    numberOfLines,\n    type,\n    hasPopup,\n    shouldIgnoreBlurAnimation,\n    autoCapitalize,\n    ...props\n  },\n  ref,\n) => {\n  const commonProps = {\n    onBlur: (event: React.ChangeEvent<HTMLInputElement>): void => {\n      // In certain cases like SelectInput, we want to ignore the blur animation when option item is clicked.\n      // The selectinput should always look like it is in focus otherwise it triggers blur + focus again which can cause flicker\n      if (!shouldIgnoreBlurAnimation) {\n        setCurrentInteraction('default');\n      }\n      handleOnBlur?.({ name, value: event });\n    },\n    onFocus: (event: React.ChangeEvent<HTMLInputElement>): void => {\n      setCurrentInteraction('active');\n      handleOnFocus?.({ name, value: event });\n    },\n    onKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => {\n      handleOnKeyDown?.({ name, key: event.key, code: event.code, event });\n    },\n    disabled: isDisabled,\n    enterKeyHint: keyboardReturnKeyType === 'default' ? 'enter' : keyboardReturnKeyType,\n    autoComplete: autoCompleteSuggestionType\n      ? autoCompleteSuggestionTypeMap[autoCompleteSuggestionType]\n      : undefined,\n  };\n\n  return props.as === 'button' ? (\n    <StyledBaseNativeButton\n      // @ts-expect-error: TS doesnt understand that this will always be `button`\n      ref={ref}\n      name={name}\n      type=\"button\"\n      onClick={(event: React.MouseEvent<HTMLInputElement>): void => {\n        handleOnClick?.({ name, value: event });\n      }}\n      {...commonProps}\n      {...props}\n      {...accessibilityProps}\n      value={props.value}\n    >\n      <Text\n        type={props.value && !isDisabled ? 'subtle' : 'placeholder'}\n        truncateAfterLines={1}\n        textAlign={props.textAlign}\n      >\n        {props.value ? props.value : props.placeholder}\n      </Text>\n    </StyledBaseNativeButton>\n  ) : (\n    <StyledBaseNativeInput\n      // @ts-expect-error: TS doesnt understand that this will always be `input`\n      ref={ref}\n      name={name}\n      type={type === 'telephone' ? 'tel' : type}\n      required={isRequired}\n      maxLength={maxCharacters}\n      rows={numberOfLines}\n      inputMode={keyboardType === 'telephone' ? 'tel' : keyboardType}\n      onChange={(event: React.ChangeEvent<HTMLInputElement>): void =>\n        handleOnChange?.({ name, value: event })\n      }\n      onInput={(event: React.ChangeEvent<HTMLInputElement>) => {\n        handleOnInput?.({ name, value: event });\n      }}\n      onClick={(event) => {\n        handleOnClick?.({ name, value: event });\n      }}\n      autoCapitalize={autoCapitalize}\n      {...commonProps}\n      {...props}\n      {...accessibilityProps}\n    />\n  );\n};\n\nconst StyledBaseInput = assignWithoutSideEffects(React.forwardRef(_StyledBaseInput), {\n  displayName: 'StyledBaseInput',\n});\n\nexport { StyledBaseInput };\n"],"names":["getWebInputStyles","props","_objectSpread","getBaseInputStyles","isDisabled","disabled","theme","validationState","leadingIcon","prefix","interactionElement","suffix","trailingIcon","textAlign","isTextArea","hasTags","isDropdownTrigger","outline","border","getTextStyles","size","variant","type","weight","contrast","cursor","StyledBaseNativeInput","styled","input","withConfig","displayName","componentId","StyledBaseNativeButton","button","autoCompleteSuggestionTypeMap","none","on","name","email","username","password","newPassword","oneTimeCode","telephone","postalCode","countryName","creditCardNumber","creditCardCSC","creditCardExpiry","creditCardExpiryMonth","creditCardExpiryYear","_StyledBaseInput","_ref","ref","isRequired","maxCharacters","handleOnFocus","handleOnChange","handleOnBlur","handleOnInput","handleOnKeyDown","handleOnClick","keyboardType","keyboardReturnKeyType","autoCompleteSuggestionType","accessibilityProps","setCurrentInteraction","numberOfLines","hasPopup","shouldIgnoreBlurAnimation","autoCapitalize","_objectWithoutProperties","_excluded","commonProps","onBlur","event","value","onFocus","onKeyDown","key","code","enterKeyHint","autoComplete","undefined","as","_jsx","onClick","children","Text","truncateAfterLines","placeholder","required","maxLength","rows","inputMode","onChange","onInput","StyledBaseInput","assignWithoutSideEffects","React","forwardRef"],"mappings":"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"}
+{"version":3,"file":"StyledBaseInput.web.js","sources":["../../../../../../../src/components/Input/BaseInput/StyledBaseInput.web.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport type { CSSObject, DefaultTheme, ThemeProps } from 'styled-components';\nimport { getBaseInputStyles } from './baseInputStyles';\n\nimport type { StyledBaseInputProps } from './types';\nimport getTextStyles from '~components/Typography/Text/getTextStyles';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { Text } from '~components/Typography';\n\nconst getWebInputStyles = (\n  props: Omit<StyledBaseInputProps, 'accessibilityProps' | 'setCurrentInteraction' | 'type'> &\n    ThemeProps<DefaultTheme> &\n    (React.InputHTMLAttributes<HTMLInputElement> | React.ButtonHTMLAttributes<HTMLButtonElement>),\n): CSSObject => {\n  return {\n    ...getBaseInputStyles({\n      isDisabled: props.disabled,\n      theme: props.theme,\n      validationState: props.validationState,\n      leadingIcon: props.leadingIcon,\n      prefix: props.prefix,\n      interactionElement: props.interactionElement,\n      suffix: props.suffix,\n      trailingIcon: props.trailingIcon,\n      textAlign: props.textAlign,\n      isTextArea: props.isTextArea,\n      hasTags: props.hasTags,\n      isDropdownTrigger: props.isDropdownTrigger,\n    }),\n    outline: 'none',\n    border: 'none',\n    '::placeholder': {\n      ...getTextStyles({\n        size: 'medium',\n        variant: 'body',\n        weight: 'regular',\n        color: 'surface.text.gray.disabled',\n        theme: props.theme,\n      }),\n      textAlign: props.textAlign,\n    },\n    ':focus': {\n      outline: 'none',\n    },\n    cursor: props.disabled ? 'not-allowed' : 'auto',\n  };\n};\n\nconst StyledBaseNativeInput = styled.input<\n  Omit<StyledBaseInputProps, 'accessibilityProps' | 'setCurrentInteraction' | 'type'>\n>(getWebInputStyles);\n\nconst StyledBaseNativeButton = styled.button<\n  Omit<StyledBaseInputProps, 'accessibilityProps' | 'setCurrentInteraction' | 'type'>\n>((props) => ({\n  ...getWebInputStyles(props),\n}));\n\nconst autoCompleteSuggestionTypeMap = {\n  none: 'off',\n  on: 'on',\n  name: 'name',\n  email: 'email',\n  username: 'username',\n  password: 'current-password',\n  newPassword: 'new-password',\n  oneTimeCode: 'one-time-code',\n  telephone: 'tel',\n  postalCode: 'postal-code',\n  countryName: 'country',\n  creditCardNumber: 'cc-number',\n  creditCardCSC: 'cc-csc',\n  creditCardExpiry: 'cc-exp',\n  creditCardExpiryMonth: 'cc-exp-month',\n  creditCardExpiryYear: 'cc-exp-year',\n};\n\nconst _StyledBaseInput: React.ForwardRefRenderFunction<\n  HTMLInputElement | HTMLButtonElement,\n  StyledBaseInputProps\n> = (\n  {\n    name,\n    isDisabled,\n    isRequired,\n    maxCharacters,\n    handleOnFocus,\n    handleOnChange,\n    handleOnBlur,\n    handleOnInput,\n    handleOnKeyDown,\n    handleOnClick,\n    keyboardType,\n    keyboardReturnKeyType,\n    autoCompleteSuggestionType,\n    accessibilityProps,\n    setCurrentInteraction,\n    numberOfLines,\n    type,\n    hasPopup,\n    shouldIgnoreBlurAnimation,\n    autoCapitalize,\n    ...props\n  },\n  ref,\n) => {\n  const commonProps = {\n    onBlur: (event: React.ChangeEvent<HTMLInputElement>): void => {\n      // In certain cases like SelectInput, we want to ignore the blur animation when option item is clicked.\n      // The selectinput should always look like it is in focus otherwise it triggers blur + focus again which can cause flicker\n      if (!shouldIgnoreBlurAnimation) {\n        setCurrentInteraction('default');\n      }\n      handleOnBlur?.({ name, value: event });\n    },\n    onFocus: (event: React.ChangeEvent<HTMLInputElement>): void => {\n      setCurrentInteraction('focus');\n      handleOnFocus?.({ name, value: event });\n    },\n    onKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => {\n      handleOnKeyDown?.({ name, key: event.key, code: event.code, event });\n    },\n    disabled: isDisabled,\n    enterKeyHint: keyboardReturnKeyType === 'default' ? 'enter' : keyboardReturnKeyType,\n    autoComplete: autoCompleteSuggestionType\n      ? autoCompleteSuggestionTypeMap[autoCompleteSuggestionType]\n      : undefined,\n  };\n\n  return props.as === 'button' ? (\n    <StyledBaseNativeButton\n      // @ts-expect-error: TS doesnt understand that this will always be `button`\n      ref={ref}\n      name={name}\n      type=\"button\"\n      onClick={(event: React.MouseEvent<HTMLInputElement>): void => {\n        handleOnClick?.({ name, value: event });\n      }}\n      {...commonProps}\n      {...props}\n      {...accessibilityProps}\n      value={props.value}\n    >\n      <Text\n        color={\n          props.value && !isDisabled ? 'surface.text.gray.subtle' : 'surface.text.gray.disabled'\n        }\n        truncateAfterLines={1}\n        textAlign={props.textAlign}\n      >\n        {props.value ? props.value : props.placeholder}\n      </Text>\n    </StyledBaseNativeButton>\n  ) : (\n    <StyledBaseNativeInput\n      // @ts-expect-error: TS doesnt understand that this will always be `input`\n      ref={ref}\n      name={name}\n      type={type === 'telephone' ? 'tel' : type}\n      required={isRequired}\n      maxLength={maxCharacters}\n      rows={numberOfLines}\n      inputMode={keyboardType === 'telephone' ? 'tel' : keyboardType}\n      onChange={(event: React.ChangeEvent<HTMLInputElement>): void =>\n        handleOnChange?.({ name, value: event })\n      }\n      onInput={(event: React.ChangeEvent<HTMLInputElement>) => {\n        handleOnInput?.({ name, value: event });\n      }}\n      onClick={(event) => {\n        handleOnClick?.({ name, value: event });\n      }}\n      autoCapitalize={autoCapitalize}\n      {...commonProps}\n      {...props}\n      {...accessibilityProps}\n    />\n  );\n};\n\nconst StyledBaseInput = assignWithoutSideEffects(React.forwardRef(_StyledBaseInput), {\n  displayName: 'StyledBaseInput',\n});\n\nexport { StyledBaseInput };\n"],"names":["getWebInputStyles","props","_objectSpread","getBaseInputStyles","isDisabled","disabled","theme","validationState","leadingIcon","prefix","interactionElement","suffix","trailingIcon","textAlign","isTextArea","hasTags","isDropdownTrigger","outline","border","getTextStyles","size","variant","weight","color","cursor","StyledBaseNativeInput","styled","input","withConfig","displayName","componentId","StyledBaseNativeButton","button","autoCompleteSuggestionTypeMap","none","on","name","email","username","password","newPassword","oneTimeCode","telephone","postalCode","countryName","creditCardNumber","creditCardCSC","creditCardExpiry","creditCardExpiryMonth","creditCardExpiryYear","_StyledBaseInput","_ref","ref","isRequired","maxCharacters","handleOnFocus","handleOnChange","handleOnBlur","handleOnInput","handleOnKeyDown","handleOnClick","keyboardType","keyboardReturnKeyType","autoCompleteSuggestionType","accessibilityProps","setCurrentInteraction","numberOfLines","type","hasPopup","shouldIgnoreBlurAnimation","autoCapitalize","_objectWithoutProperties","_excluded","commonProps","onBlur","event","value","onFocus","onKeyDown","key","code","enterKeyHint","autoComplete","undefined","as","_jsx","onClick","children","Text","truncateAfterLines","placeholder","required","maxLength","rows","inputMode","onChange","onInput","StyledBaseInput","assignWithoutSideEffects","React","forwardRef"],"mappings":"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"}