@razorpay/blade 11.8.2 → 11.9.1

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

@@ -1,28 +1,22 @@
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import React__default from 'react';
-import styled, { keyframes, css } from 'styled-components';
-import { getInputBackgroundAndBorderStyles } from './baseInputStyles.js';
-import { BASEINPUT_WRAPPER_MIN_HEIGHT, BASEINPUT_WRAPPER_MAX_HEIGHT } from './baseInputConfig.js';
+import styled, { css, keyframes } from 'styled-components';
+import { getInputBackgroundAndBorderStyles, getAnimatedBaseInputWrapperMaxHeight } from './baseInputStyles.js';
+import { baseInputHeight, baseInputWrapperMaxHeight } from './baseInputTokens.js';
 import '../../Box/BaseBox/index.js';
 import '../../../tokens/global/index.js';
 import '../../../utils/index.js';
 import { jsx } from 'react/jsx-runtime';
-import { makeSize } from '../../../utils/makeSize/makeSize.js';
-import { makeMotionTime } from '../../../utils/makeMotionTime/makeMotionTime.web.js';
-import { motion } from '../../../tokens/global/motion.js';
 import { BaseBox } from '../../Box/BaseBox/BaseBox.web.js';
 import { castWebType } from '../../../utils/platform/castUtils.js';
+import { makeMotionTime } from '../../../utils/makeMotionTime/makeMotionTime.web.js';
+import { makeSize } from '../../../utils/makeSize/makeSize.js';
+import { motion } from '../../../tokens/global/motion.js';
 
 var _excluded = ["showAllTags", "setShowAllTagsWithAnimation", "maxTagRows", "isDropdownTrigger"];
 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; }
-// Define the animation keyframes
-var expandAnimation = /*#__PURE__*/keyframes(["from{max-height:", ";}to{max-height:", ";}"], makeSize(BASEINPUT_WRAPPER_MIN_HEIGHT), makeSize(BASEINPUT_WRAPPER_MAX_HEIGHT));
-var collapseAnimation = /*#__PURE__*/keyframes(["from{max-height:", ";}to{max-height:", ";}"], makeSize(BASEINPUT_WRAPPER_MAX_HEIGHT), makeSize(BASEINPUT_WRAPPER_MIN_HEIGHT));
-var expandTransition = /*#__PURE__*/css(["animation:", " ", " ", ";"], expandAnimation, makeMotionTime(motion.duration.quick), String(motion.easing.entrance.effective));
-var collapseTransition = /*#__PURE__*/css(["animation:", " ", " ", ";"], collapseAnimation, makeMotionTime(motion.duration.quick), String(motion.easing.exit.effective));
-var noTransition = /*#__PURE__*/css(["animation:none;"]);
 var StyledBaseInputWrapper = /*#__PURE__*/styled(BaseBox).withConfig({
   displayName: "AnimatedBaseInputWrapperweb__StyledBaseInputWrapper",
   componentId: "e1vobd-0"
@@ -56,36 +50,30 @@ var StyledBaseInputWrapper = /*#__PURE__*/styled(BaseBox).withConfig({
     }))
   });
 });
-var getMaxHeight = function getMaxHeight(_ref) {
-  var maxTagRows = _ref.maxTagRows,
-    showAllTags = _ref.showAllTags;
-  if (maxTagRows === 'single') {
-    return BASEINPUT_WRAPPER_MIN_HEIGHT;
-  }
-  if (maxTagRows === 'multiple') {
-    return BASEINPUT_WRAPPER_MAX_HEIGHT;
-  }
-
-  // In expandable, max-height depends on the state
-  return showAllTags ? BASEINPUT_WRAPPER_MAX_HEIGHT : BASEINPUT_WRAPPER_MIN_HEIGHT;
-};
 
 // Styled component with animation
 var StyledAnimatedBaseInputWrapper = /*#__PURE__*/styled(StyledBaseInputWrapper).withConfig({
   displayName: "AnimatedBaseInputWrapperweb__StyledAnimatedBaseInputWrapper",
   componentId: "e1vobd-1"
 })(function (props) {
-  return props.isDropdownTrigger ? css(["", ";max-height:", ";"], props.transition, makeSize(getMaxHeight({
+  return props.isDropdownTrigger ? css(["", ";max-height:", ";"], props.transition, makeSize(getAnimatedBaseInputWrapperMaxHeight({
     maxTagRows: props.maxTagRows,
-    showAllTags: props.showAllTags
+    showAllTags: props.showAllTags,
+    size: props.size
   }))) : undefined;
 });
-var _AnimatedBaseInputWrapper = function _AnimatedBaseInputWrapper(_ref2, ref) {
-  var showAllTags = _ref2.showAllTags,
-    setShowAllTagsWithAnimation = _ref2.setShowAllTagsWithAnimation,
-    maxTagRows = _ref2.maxTagRows,
-    isDropdownTrigger = _ref2.isDropdownTrigger,
-    rest = _objectWithoutProperties(_ref2, _excluded);
+var _AnimatedBaseInputWrapper = function _AnimatedBaseInputWrapper(_ref, ref) {
+  var showAllTags = _ref.showAllTags,
+    setShowAllTagsWithAnimation = _ref.setShowAllTagsWithAnimation,
+    maxTagRows = _ref.maxTagRows,
+    isDropdownTrigger = _ref.isDropdownTrigger,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  // Define the animation keyframes
+  var expandAnimation = /*#__PURE__*/keyframes(["from{max-height:", ";}to{max-height:", ";}"], makeSize(baseInputHeight[rest.size]), makeSize(baseInputWrapperMaxHeight[rest.size]));
+  var collapseAnimation = /*#__PURE__*/keyframes(["from{max-height:", ";}to{max-height:", ";}"], makeSize(baseInputWrapperMaxHeight[rest.size]), makeSize(baseInputHeight[rest.size]));
+  var expandTransition = /*#__PURE__*/css(["animation:", " ", " ", ";"], expandAnimation, makeMotionTime(motion.duration.quick), String(motion.easing.entrance.effective));
+  var collapseTransition = /*#__PURE__*/css(["animation:", " ", " ", ";"], collapseAnimation, makeMotionTime(motion.duration.quick), String(motion.easing.exit.effective));
+  var noTransition = /*#__PURE__*/css(["animation:none;"]);
   return /*#__PURE__*/jsx(StyledAnimatedBaseInputWrapper
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   , _objectSpread(_objectSpread({
@@ -97,9 +85,7 @@ var _AnimatedBaseInputWrapper = function _AnimatedBaseInputWrapper(_ref2, ref) {
     maxTagRows: maxTagRows,
     onAnimationEnd: function onAnimationEnd(e) {
       if (!showAllTags && e.animationName === collapseAnimation.getName()) {
-        setShowAllTagsWithAnimation === null || setShowAllTagsWithAnimation === void 0 ? void 0 : setShowAllTagsWithAnimation(false);
-      }
-      if (maxTagRows !== 'expandable' && !showAllTags) {
+        // Triggered for the collapse animation
         setShowAllTagsWithAnimation === null || setShowAllTagsWithAnimation === void 0 ? void 0 : setShowAllTagsWithAnimation(false);
       }
     }
@@ -107,5 +93,5 @@ var _AnimatedBaseInputWrapper = function _AnimatedBaseInputWrapper(_ref2, ref) {
 };
 var AnimatedBaseInputWrapper = /*#__PURE__*/React__default.forwardRef(_AnimatedBaseInputWrapper);
 
-export { AnimatedBaseInputWrapper, collapseAnimation, expandAnimation };
+export { AnimatedBaseInputWrapper };
 //# sourceMappingURL=AnimatedBaseInputWrapper.web.js.map

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 === '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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"}
+{"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 {\n  getAnimatedBaseInputWrapperMaxHeight,\n  getInputBackgroundAndBorderStyles,\n} from './baseInputStyles';\nimport { baseInputHeight, baseInputWrapperMaxHeight } from './baseInputTokens';\nimport BaseBox from '~components/Box/BaseBox';\nimport { motion } from '~tokens/global';\nimport { castWebType, makeMotionTime, makeSize } from '~utils';\nimport type { BladeElementRef } from '~utils/types';\n\nconst StyledBaseInputWrapper = styled(BaseBox)<\n  Pick<\n    BaseInputWrapperProps,\n    | 'currentInteraction'\n    | 'isDisabled'\n    | 'validationState'\n    | 'isTextArea'\n    | 'isDropdownTrigger'\n    | 'maxTagRows'\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\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  size: NonNullable<BaseInputWrapperProps['size']>;\n}>((props) =>\n  props.isDropdownTrigger\n    ? css`\n        ${props.transition};\n        max-height: ${makeSize(\n          getAnimatedBaseInputWrapperMaxHeight({\n            maxTagRows: props.maxTagRows,\n            showAllTags: props.showAllTags,\n            size: props.size,\n          }),\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  // Define the animation keyframes\n  const expandAnimation = keyframes`\nfrom {\n  max-height: ${makeSize(baseInputHeight[rest.size])};\n}\nto {\n  max-height: ${makeSize(baseInputWrapperMaxHeight[rest.size])};\n}\n`;\n\n  const collapseAnimation = keyframes`\nfrom {\n  max-height: ${makeSize(baseInputWrapperMaxHeight[rest.size])};\n}\nto {\n  max-height: ${makeSize(baseInputHeight[rest.size])};\n}\n`;\n\n  const expandTransition = css`\n    animation: ${expandAnimation} ${makeMotionTime(motion.duration.quick)}\n      ${String(motion.easing.entrance.effective)};\n  `;\n\n  const collapseTransition = css`\n    animation: ${collapseAnimation} ${makeMotionTime(motion.duration.quick)}\n      ${String(motion.easing.exit.effective)};\n  `;\n\n  const noTransition = css`\n    animation: none;\n  `;\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          // Triggered for the collapse animation\n          setShowAllTagsWithAnimation?.(false);\n        }\n      }}\n    />\n  );\n};\n\nconst AnimatedBaseInputWrapper = React.forwardRef(_AnimatedBaseInputWrapper);\n\nexport { AnimatedBaseInputWrapper };\n"],"names":["StyledBaseInputWrapper","styled","BaseBox","withConfig","displayName","componentId","props","_objectSpread","getInputBackgroundAndBorderStyles","theme","isFocused","currentInteraction","isDisabled","validationState","isTextArea","isDropdownTrigger","isHovered","transitionProperty","transitionDuration","castWebType","makeMotionTime","motion","duration","xquick","transitionTimingFunction","easing","standard","effective","StyledAnimatedBaseInputWrapper","css","transition","makeSize","getAnimatedBaseInputWrapperMaxHeight","maxTagRows","showAllTags","size","undefined","_AnimatedBaseInputWrapper","_ref","ref","setShowAllTagsWithAnimation","rest","_objectWithoutProperties","_excluded","expandAnimation","keyframes","baseInputHeight","baseInputWrapperMaxHeight","collapseAnimation","expandTransition","quick","String","entrance","collapseTransition","exit","noTransition","_jsx","onAnimationEnd","e","animationName","getName","AnimatedBaseInputWrapper","React","forwardRef"],"mappings":"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"}

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

@@ -1,11 +1,13 @@
-import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import React__default from 'react';
+import styled from 'styled-components';
 import { StyledBaseInput } from './StyledBaseInput.web.js';
 import { BaseInputVisuals } from './BaseInputVisuals.js';
 import { BaseInputWrapper } from './BaseInputWrapper.js';
 import { BaseInputTagSlot } from './BaseInputTagSlot.web.js';
+import { baseInputBorderBackgroundMotion, formHintLeftLabelMarginLeft } from './baseInputTokens.js';
 import '../../Form/index.js';
 import '../../Box/BaseBox/index.js';
 import '../../Box/styledProps/index.js';
@@ -19,14 +21,20 @@ import '../../../utils/makeAccessible/index.js';
 import '../../../utils/logger/index.js';
 import { announce } from '../../LiveAnnouncer/LiveAnnouncer.web.js';
 import '../../../utils/assignWithoutSideEffects/index.js';
+import '../../../utils/getFocusRingStyles/index.js';
+import getIn from '../../../utils/lodashButBetter/get.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { throwBladeError } from '../../../utils/logger/logger.js';
 import { getPlatformType } from '../../../utils/getPlatformType/getPlatformType.js';
 import { isReactNative } from '../../../utils/platform/isReactNative.js';
+import { BaseBox } from '../../Box/BaseBox/BaseBox.web.js';
+import { makeBorderSize } from '../../../utils/makeBorderSize/makeBorderSize.js';
+import { getFocusRingStyles } from '../../../utils/getFocusRingStyles/getFocusRingStyles.web.js';
+import { castWebType } from '../../../utils/platform/castUtils.js';
+import { makeMotionTime } from '../../../utils/makeMotionTime/makeMotionTime.web.js';
 import useTheme from '../../BladeProvider/useTheme.js';
 import { useBreakpoint } from '../../../utils/useBreakpoint/useBreakpoint.js';
 import { makeAccessible } from '../../../utils/makeAccessible/makeAccessible.web.js';
-import { BaseBox } from '../../Box/BaseBox/BaseBox.web.js';
 import { metaAttribute } from '../../../utils/metaAttribute/metaAttribute.web.js';
 import { getStyledProps } from '../../Box/styledProps/getStyledProps.js';
 import { FormLabel } from '../../Form/FormLabel.js';
@@ -35,7 +43,7 @@ import { makeSize } from '../../../utils/makeSize/makeSize.js';
 import { FormHint } from '../../Form/FormHint.js';
 import { assignWithoutSideEffects } from '../../../utils/assignWithoutSideEffects/assignWithoutSideEffects.js';
 
-var _excluded = ["as", "label", "labelPosition", "placeholder", "type", "defaultValue", "tags", "showAllTags", "activeTagIndex", "setActiveTagIndex", "name", "value", "onFocus", "onChange", "onInput", "onBlur", "onSubmit", "onClick", "onKeyDown", "isDisabled", "necessityIndicator", "validationState", "errorText", "helpText", "successText", "isRequired", "leadingIcon", "prefix", "interactionElement", "suffix", "trailingIcon", "maxCharacters", "textAlign", "autoFocus", "keyboardReturnKeyType", "keyboardType", "autoCompleteSuggestionType", "trailingHeaderSlot", "trailingFooterSlot", "numberOfLines", "id", "componentName", "accessibilityLabel", "labelId", "activeDescendant", "hideLabelText", "hideFormHint", "hasPopup", "popupId", "isPopupExpanded", "maxTagRows", "shouldIgnoreBlurAnimation", "setShouldIgnoreBlurAnimation", "autoCapitalize", "setInputWrapperRef", "testID", "isDropdownTrigger", "isLabelInsideInput"];
+var _excluded = ["as", "label", "labelPosition", "placeholder", "type", "defaultValue", "tags", "showAllTags", "activeTagIndex", "setActiveTagIndex", "name", "value", "onFocus", "onChange", "onInput", "onBlur", "onSubmit", "onClick", "onKeyDown", "isDisabled", "necessityIndicator", "validationState", "errorText", "helpText", "successText", "isRequired", "leadingIcon", "prefix", "interactionElement", "suffix", "trailingIcon", "maxCharacters", "textAlign", "autoFocus", "keyboardReturnKeyType", "keyboardType", "autoCompleteSuggestionType", "trailingHeaderSlot", "trailingFooterSlot", "numberOfLines", "id", "componentName", "accessibilityLabel", "labelId", "activeDescendant", "hideLabelText", "hideFormHint", "hasPopup", "popupId", "isPopupExpanded", "maxTagRows", "shouldIgnoreBlurAnimation", "setShouldIgnoreBlurAnimation", "autoCapitalize", "setInputWrapperRef", "testID", "isDropdownTrigger", "isLabelInsideInput", "size", "trailingButton", "valueComponentType"];
 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 autoCompleteSuggestionTypeValues = ['none', 'on', 'name', 'email', 'username', 'password', 'newPassword', 'oneTimeCode', 'telephone', 'postalCode', 'countryName', 'creditCardNumber', 'creditCardCSC', 'creditCardExpiry', 'creditCardExpiryMonth', 'creditCardExpiryYear'];
@@ -272,71 +280,93 @@ var getDescribedByElementId = function getDescribedByElementId(_ref10) {
   }
   return '';
 };
-var _BaseInput = function _BaseInput(_ref11, ref) {
-  var _ref11$as = _ref11.as,
-    as = _ref11$as === void 0 ? 'input' : _ref11$as,
-    label = _ref11.label,
-    _ref11$labelPosition = _ref11.labelPosition,
-    labelPosition = _ref11$labelPosition === void 0 ? 'top' : _ref11$labelPosition,
-    placeholder = _ref11.placeholder,
-    _ref11$type = _ref11.type,
-    type = _ref11$type === void 0 ? 'text' : _ref11$type,
-    defaultValue = _ref11.defaultValue,
-    tags = _ref11.tags,
-    _ref11$showAllTags = _ref11.showAllTags,
-    showAllTags = _ref11$showAllTags === void 0 ? false : _ref11$showAllTags,
-    _ref11$activeTagIndex = _ref11.activeTagIndex,
-    activeTagIndex = _ref11$activeTagIndex === void 0 ? -1 : _ref11$activeTagIndex,
-    setActiveTagIndex = _ref11.setActiveTagIndex,
-    name = _ref11.name,
-    value = _ref11.value,
-    onFocus = _ref11.onFocus,
-    onChange = _ref11.onChange,
-    onInput = _ref11.onInput,
-    onBlur = _ref11.onBlur,
-    onSubmit = _ref11.onSubmit,
-    onClick = _ref11.onClick,
-    onKeyDown = _ref11.onKeyDown,
-    isDisabled = _ref11.isDisabled,
-    necessityIndicator = _ref11.necessityIndicator,
-    validationState = _ref11.validationState,
-    errorText = _ref11.errorText,
-    helpText = _ref11.helpText,
-    successText = _ref11.successText,
-    isRequired = _ref11.isRequired,
-    leadingIcon = _ref11.leadingIcon,
-    prefix = _ref11.prefix,
-    interactionElement = _ref11.interactionElement,
-    suffix = _ref11.suffix,
-    trailingIcon = _ref11.trailingIcon,
-    maxCharacters = _ref11.maxCharacters,
-    textAlign = _ref11.textAlign,
-    autoFocus = _ref11.autoFocus,
-    keyboardReturnKeyType = _ref11.keyboardReturnKeyType,
-    keyboardType = _ref11.keyboardType,
-    autoCompleteSuggestionType = _ref11.autoCompleteSuggestionType,
-    trailingHeaderSlot = _ref11.trailingHeaderSlot,
-    trailingFooterSlot = _ref11.trailingFooterSlot,
-    numberOfLines = _ref11.numberOfLines,
-    id = _ref11.id,
-    componentName = _ref11.componentName,
-    accessibilityLabel = _ref11.accessibilityLabel,
-    labelId = _ref11.labelId,
-    activeDescendant = _ref11.activeDescendant,
-    hideLabelText = _ref11.hideLabelText,
-    hideFormHint = _ref11.hideFormHint,
-    hasPopup = _ref11.hasPopup,
-    popupId = _ref11.popupId,
-    isPopupExpanded = _ref11.isPopupExpanded,
-    maxTagRows = _ref11.maxTagRows,
-    shouldIgnoreBlurAnimation = _ref11.shouldIgnoreBlurAnimation,
-    setShouldIgnoreBlurAnimation = _ref11.setShouldIgnoreBlurAnimation,
-    autoCapitalize = _ref11.autoCapitalize,
-    setInputWrapperRef = _ref11.setInputWrapperRef,
-    testID = _ref11.testID,
-    isDropdownTrigger = _ref11.isDropdownTrigger,
-    isLabelInsideInput = _ref11.isLabelInsideInput,
-    styledProps = _objectWithoutProperties(_ref11, _excluded);
+var FocusRingWrapper = /*#__PURE__*/styled(BaseBox).withConfig({
+  displayName: "BaseInput__FocusRingWrapper",
+  componentId: "sc-177qd3e-0"
+})(function (_ref11) {
+  var theme = _ref11.theme,
+    currentInteraction = _ref11.currentInteraction;
+  return {
+    borderRadius: makeBorderSize(theme.border.radius.medium),
+    width: '100%',
+    '&:focus-within': _objectSpread(_objectSpread({}, getFocusRingStyles({
+      theme: theme
+    })), {}, {
+      transitionDuration: castWebType(makeMotionTime(getIn(theme.motion.duration, baseInputBorderBackgroundMotion[currentInteraction === 'focus' ? 'enter' : 'exit'].duration))),
+      transitionTimingFunction: castWebType(getIn(theme.motion.easing, baseInputBorderBackgroundMotion[currentInteraction === 'focus' ? 'enter' : 'exit'].easing))
+    })
+  };
+});
+var _BaseInput = function _BaseInput(_ref12, ref) {
+  var _ref12$as = _ref12.as,
+    as = _ref12$as === void 0 ? 'input' : _ref12$as,
+    label = _ref12.label,
+    _ref12$labelPosition = _ref12.labelPosition,
+    labelPosition = _ref12$labelPosition === void 0 ? 'top' : _ref12$labelPosition,
+    placeholder = _ref12.placeholder,
+    _ref12$type = _ref12.type,
+    type = _ref12$type === void 0 ? 'text' : _ref12$type,
+    defaultValue = _ref12.defaultValue,
+    tags = _ref12.tags,
+    _ref12$showAllTags = _ref12.showAllTags,
+    showAllTags = _ref12$showAllTags === void 0 ? false : _ref12$showAllTags,
+    _ref12$activeTagIndex = _ref12.activeTagIndex,
+    activeTagIndex = _ref12$activeTagIndex === void 0 ? -1 : _ref12$activeTagIndex,
+    setActiveTagIndex = _ref12.setActiveTagIndex,
+    name = _ref12.name,
+    value = _ref12.value,
+    onFocus = _ref12.onFocus,
+    onChange = _ref12.onChange,
+    onInput = _ref12.onInput,
+    onBlur = _ref12.onBlur,
+    onSubmit = _ref12.onSubmit,
+    onClick = _ref12.onClick,
+    onKeyDown = _ref12.onKeyDown,
+    isDisabled = _ref12.isDisabled,
+    necessityIndicator = _ref12.necessityIndicator,
+    validationState = _ref12.validationState,
+    errorText = _ref12.errorText,
+    helpText = _ref12.helpText,
+    successText = _ref12.successText,
+    isRequired = _ref12.isRequired,
+    leadingIcon = _ref12.leadingIcon,
+    prefix = _ref12.prefix,
+    interactionElement = _ref12.interactionElement,
+    suffix = _ref12.suffix,
+    trailingIcon = _ref12.trailingIcon,
+    maxCharacters = _ref12.maxCharacters,
+    textAlign = _ref12.textAlign,
+    autoFocus = _ref12.autoFocus,
+    keyboardReturnKeyType = _ref12.keyboardReturnKeyType,
+    keyboardType = _ref12.keyboardType,
+    autoCompleteSuggestionType = _ref12.autoCompleteSuggestionType,
+    trailingHeaderSlot = _ref12.trailingHeaderSlot,
+    trailingFooterSlot = _ref12.trailingFooterSlot,
+    numberOfLines = _ref12.numberOfLines,
+    id = _ref12.id,
+    componentName = _ref12.componentName,
+    accessibilityLabel = _ref12.accessibilityLabel,
+    labelId = _ref12.labelId,
+    activeDescendant = _ref12.activeDescendant,
+    hideLabelText = _ref12.hideLabelText,
+    hideFormHint = _ref12.hideFormHint,
+    hasPopup = _ref12.hasPopup,
+    popupId = _ref12.popupId,
+    isPopupExpanded = _ref12.isPopupExpanded,
+    maxTagRows = _ref12.maxTagRows,
+    shouldIgnoreBlurAnimation = _ref12.shouldIgnoreBlurAnimation,
+    setShouldIgnoreBlurAnimation = _ref12.setShouldIgnoreBlurAnimation,
+    autoCapitalize = _ref12.autoCapitalize,
+    setInputWrapperRef = _ref12.setInputWrapperRef,
+    testID = _ref12.testID,
+    isDropdownTrigger = _ref12.isDropdownTrigger,
+    isLabelInsideInput = _ref12.isLabelInsideInput,
+    _ref12$size = _ref12.size,
+    size = _ref12$size === void 0 ? 'medium' : _ref12$size,
+    trailingButton = _ref12.trailingButton,
+    _ref12$valueComponent = _ref12.valueComponentType,
+    valueComponentType = _ref12$valueComponent === void 0 ? 'text' : _ref12$valueComponent,
+    styledProps = _objectWithoutProperties(_ref12, _excluded);
   var _useTheme = useTheme(),
     theme = _useTheme.theme;
   var inputWrapperRef = React__default.useRef(null);
@@ -351,8 +381,10 @@ var _BaseInput = function _BaseInput(_ref11, ref) {
   React__default.useEffect(function () {
     if (showAllTags) {
       setShowAllTagsWithAnimation(true);
+    } else if (maxTagRows !== 'expandable') {
+      setShowAllTagsWithAnimation(false);
     }
-  }, [showAllTags]);
+  }, [showAllTags, maxTagRows]);
   var _useInput = useInput({
       defaultValue: defaultValue,
       value: value,
@@ -440,105 +472,117 @@ var _BaseInput = function _BaseInput(_ref11, ref) {
           position: labelPosition,
           id: labelId,
           htmlFor: inputId,
+          size: size,
           children: label
         }), trailingHeaderSlot === null || trailingHeaderSlot === void 0 ? void 0 : trailingHeaderSlot(value !== null && value !== void 0 ? value : inputValue)]
-      }), /*#__PURE__*/jsxs(BaseInputWrapper, {
-        isDropdownTrigger: isDropdownTrigger,
-        isTextArea: isTextArea,
-        isDisabled: isDisabled,
-        validationState: validationState,
+      }), /*#__PURE__*/jsx(FocusRingWrapper, {
         currentInteraction: currentInteraction,
-        isLabelLeftPositioned: isLabelLeftPositioned,
-        showAllTags: showAllTags,
-        setShowAllTagsWithAnimation: setShowAllTagsWithAnimation,
-        ref: function ref(refNode) {
-          if (refNode) {
-            setInputWrapperRef === null || setInputWrapperRef === void 0 ? void 0 : setInputWrapperRef(refNode);
-            inputWrapperRef.current = refNode;
-          }
-        },
-        maxTagRows: maxTagRows,
-        children: [/*#__PURE__*/jsx(BaseInputVisuals, {
-          leadingIcon: leadingIcon,
-          prefix: prefix,
-          isDisabled: isDisabled
-        }), /*#__PURE__*/jsx(BaseInputTagSlot, {
-          renderAs: as,
-          tags: tags,
+        children: /*#__PURE__*/jsxs(BaseInputWrapper, {
+          isDropdownTrigger: isDropdownTrigger,
+          isTextArea: isTextArea,
           isDisabled: isDisabled,
-          showAllTags: showAllTagsWithAnimation,
-          setFocusOnInput: function setFocusOnInput() {
-            if (ref && !isReactNative && 'current' in ref) {
-              var _ref$current;
-              (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.focus();
+          validationState: validationState,
+          currentInteraction: currentInteraction,
+          isLabelLeftPositioned: isLabelLeftPositioned,
+          showAllTags: showAllTags,
+          setShowAllTagsWithAnimation: setShowAllTagsWithAnimation,
+          ref: function ref(refNode) {
+            if (refNode) {
+              setInputWrapperRef === null || setInputWrapperRef === void 0 ? void 0 : setInputWrapperRef(refNode);
+              inputWrapperRef.current = refNode;
             }
           },
-          labelPrefix: isLabelInsideInput ? label : undefined,
-          isDropdownTrigger: isDropdownTrigger,
-          visibleTagsCountRef: visibleTagsCountRef,
-          handleOnInputClick: function handleOnInputClick(e) {
-            handleOnClick({
-              name: name,
-              value: isReactNative ? value : e
-            });
-          },
-          setShouldIgnoreBlurAnimation: setShouldIgnoreBlurAnimation,
           maxTagRows: maxTagRows,
-          inputWrapperRef: inputWrapperRef,
-          children: /*#__PURE__*/jsx(StyledBaseInput, _objectSpread({
-            as: as,
-            id: inputId,
-            ref: ref,
-            name: name,
-            type: type,
-            defaultValue: defaultValue,
-            value: value,
-            placeholder: placeholder,
-            isDisabled: isDisabled,
-            validationState: validationState,
-            isRequired: _isRequired,
-            handleOnFocus: handleOnFocus,
-            handleOnChange: handleOnChange,
-            handleOnBlur: handleOnBlur,
-            handleOnSubmit: handleOnSubmit,
-            handleOnInput: handleOnInput,
-            handleOnKeyDown: handleOnKeyDown,
-            handleOnClick: handleOnClick,
+          size: size,
+          children: [/*#__PURE__*/jsx(BaseInputVisuals, {
+            size: size,
             leadingIcon: leadingIcon,
             prefix: prefix,
+            isDisabled: isDisabled
+          }), /*#__PURE__*/jsx(BaseInputTagSlot, {
+            renderAs: as,
+            tags: tags,
+            isDisabled: isDisabled,
+            showAllTags: showAllTagsWithAnimation,
+            setFocusOnInput: function setFocusOnInput() {
+              if (ref && !isReactNative && 'current' in ref) {
+                var _ref$current;
+                (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.focus();
+              }
+            },
+            labelPrefix: isLabelInsideInput ? label : undefined,
+            isDropdownTrigger: isDropdownTrigger,
+            visibleTagsCountRef: visibleTagsCountRef,
+            handleOnInputClick: function handleOnInputClick(e) {
+              handleOnClick({
+                name: name,
+                value: isReactNative ? value : e
+              });
+            },
+            setShouldIgnoreBlurAnimation: setShouldIgnoreBlurAnimation,
+            maxTagRows: maxTagRows,
+            inputWrapperRef: inputWrapperRef,
+            size: size,
+            children: /*#__PURE__*/jsx(StyledBaseInput, _objectSpread({
+              as: as,
+              id: inputId,
+              ref: ref,
+              name: name,
+              type: type,
+              defaultValue: defaultValue,
+              value: value,
+              placeholder: placeholder,
+              isDisabled: isDisabled,
+              validationState: validationState,
+              isRequired: _isRequired,
+              handleOnFocus: handleOnFocus,
+              handleOnChange: handleOnChange,
+              handleOnBlur: handleOnBlur,
+              handleOnSubmit: handleOnSubmit,
+              handleOnInput: handleOnInput,
+              handleOnKeyDown: handleOnKeyDown,
+              handleOnClick: handleOnClick,
+              leadingIcon: leadingIcon,
+              prefix: prefix,
+              interactionElement: interactionElement,
+              suffix: suffix,
+              trailingIcon: trailingIcon,
+              maxCharacters: maxCharacters,
+              textAlign: textAlign
+              // eslint-disable-next-line jsx-a11y/no-autofocus
+              ,
+              autoFocus: autoFocus,
+              keyboardReturnKeyType: keyboardReturnKeyType,
+              keyboardType: keyboardType,
+              autoCompleteSuggestionType: autoCompleteSuggestionType,
+              accessibilityProps: accessibilityProps,
+              currentInteraction: currentInteraction,
+              setCurrentInteraction: setCurrentInteraction,
+              numberOfLines: numberOfLines,
+              isTextArea: isTextArea || maxTagRows === 'multiple' || maxTagRows === 'expandable',
+              hasPopup: hasPopup,
+              hasTags: !!(tags && tags.length > 0),
+              shouldIgnoreBlurAnimation: shouldIgnoreBlurAnimation,
+              autoCapitalize: autoCapitalize,
+              isDropdownTrigger: isDropdownTrigger,
+              $size: size,
+              valueComponentType: valueComponentType
+            }, metaAttribute({
+              name: MetaConstants.StyledBaseInput
+            })))
+          }), /*#__PURE__*/jsx(BaseInputVisuals, {
             interactionElement: interactionElement,
             suffix: suffix,
             trailingIcon: trailingIcon,
-            maxCharacters: maxCharacters,
-            textAlign: textAlign
-            // eslint-disable-next-line jsx-a11y/no-autofocus
-            ,
-            autoFocus: autoFocus,
-            keyboardReturnKeyType: keyboardReturnKeyType,
-            keyboardType: keyboardType,
-            autoCompleteSuggestionType: autoCompleteSuggestionType,
-            accessibilityProps: accessibilityProps,
-            currentInteraction: currentInteraction,
-            setCurrentInteraction: setCurrentInteraction,
-            numberOfLines: numberOfLines,
-            isTextArea: isTextArea || maxTagRows === 'multiple' || maxTagRows === 'expandable',
-            hasPopup: hasPopup,
-            hasTags: !!(tags && tags.length > 0),
-            shouldIgnoreBlurAnimation: shouldIgnoreBlurAnimation,
-            autoCapitalize: autoCapitalize,
-            isDropdownTrigger: isDropdownTrigger
-          }, metaAttribute({
-            name: MetaConstants.StyledBaseInput
-          })))
-        }), /*#__PURE__*/jsx(BaseInputVisuals, {
-          interactionElement: interactionElement,
-          suffix: suffix,
-          trailingIcon: trailingIcon,
-          isDisabled: isDisabled
-        })]
+            isDisabled: isDisabled,
+            validationState: validationState,
+            trailingButton: trailingButton,
+            size: size
+          })]
+        })
       })]
     }), !hideFormHint && /*#__PURE__*/jsx(BaseBox, {
-      marginLeft: makeSize(isLabelLeftPositioned && !hideLabelText ? 136 : 0),
+      marginLeft: makeSize(isLabelLeftPositioned && !hideLabelText ? formHintLeftLabelMarginLeft[size] : 0),
       children: /*#__PURE__*/jsxs(BaseBox, {
         display: "flex",
         flexDirection: "row",
@@ -553,7 +597,8 @@ var _BaseInput = function _BaseInput(_ref11, ref) {
           successText: successText,
           helpTextId: helpTextId,
           errorTextId: errorTextId,
-          successTextId: successTextId
+          successTextId: successTextId,
+          size: size
         }), trailingFooterSlot === null || trailingFooterSlot === void 0 ? void 0 : trailingFooterSlot(value !== null && value !== void 0 ? value : inputValue)]
       })
     })]