@razorpay/blade 11.39.0 → 12.0.0

package/build/lib/web/production/components/Form/Selector/SelectorInput.web.js

@@ -37,7 +37,7 @@ var getHoverStyles = function getHoverStyles(_ref) {
   return {
     borderColor: borderColor ? getIn(theme, borderColor) : undefined,
     backgroundColor: getIn(theme, backgroundColor),
-    transitionTimingFunction: theme.motion.easing.standard.effective,
+    transitionTimingFunction: theme.motion.easing.standard,
     transitionDuration: castWebType(makeMotionTime(theme.motion.duration['2xquick']))
   };
 };

package/build/lib/web/production/components/Form/Selector/SelectorInput.web.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectorInput.web.js","sources":["../../../../../../../src/components/Form/Selector/SelectorInput.web.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\n/* eslint-disable @typescript-eslint/ban-types */\nimport type { CSSObject } from 'styled-components';\nimport React from 'react';\nimport styled from 'styled-components';\nimport type { HoverProps, SelectorInputProps } from './types';\nimport getIn from '~utils/lodashButBetter/get';\nimport type { Theme } from '~components/BladeProvider';\nimport { castWebType } from '~utils';\nimport { screenReaderStyles } from '~components/VisuallyHidden';\nimport type { BladeElementRef } from '~utils/types';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { makeMotionTime } from '~utils/makeMotionTime';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport { useMergeRefs } from '~utils/useMergeRefs';\nimport { getFocusRingStyles } from '~utils/getFocusRingStyles';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\n\nconst getHoverStyles = ({\n  theme,\n  isDisabled,\n  hasError,\n  isChecked,\n  hoverTokens,\n}: { theme: Theme } & HoverProps): CSSObject => {\n  if (isDisabled || hasError) return {};\n\n  const checked = isChecked ? 'checked' : 'unchecked';\n  const backgroundColor = hoverTokens.default.background[checked];\n  const borderColor = hoverTokens.default.border?.[checked];\n\n  return {\n    borderColor: borderColor ? getIn(theme, borderColor) : undefined,\n    backgroundColor: getIn(theme, backgroundColor),\n    transitionTimingFunction: theme.motion.easing.standard.effective as string,\n    transitionDuration: castWebType(makeMotionTime(theme.motion.duration['2xquick'])),\n  };\n};\n\nconst StyledInput = styled.input<HoverProps>(\n  ({ theme, isChecked, isDisabled, hasError, hoverTokens }) => ({\n    ...screenReaderStyles,\n    '&:focus-visible + div': {\n      ...getFocusRingStyles({ theme }),\n    },\n    '&:hover + div': {\n      ...getHoverStyles({ theme, isChecked, isDisabled, hasError, hoverTokens }),\n    },\n  }),\n);\n\nconst _SelectorInput: React.ForwardRefRenderFunction<BladeElementRef, SelectorInputProps> = (\n  {\n    id,\n    inputProps,\n    isChecked,\n    isDisabled,\n    hasError,\n    hoverTokens,\n    tabIndex,\n    accessibilityLabel,\n    ...rest\n  },\n  ref,\n) => {\n  // merging both refs because inputProps.ref needs to have access to indeterminate state\n  // to be able to set the mixed value via setMixed() function\n  // TODO: replace with a generic `mergeRefs()` util if we do this in other places\n  const mergedRef = useMergeRefs(ref, inputProps.ref);\n\n  return (\n    <StyledInput\n      id={id}\n      isChecked={isChecked}\n      isDisabled={isDisabled}\n      hasError={hasError}\n      tabIndex={tabIndex}\n      hoverTokens={hoverTokens}\n      {...inputProps}\n      {...makeAccessible({ label: accessibilityLabel })}\n      {...makeAnalyticsAttribute(rest)}\n      ref={mergedRef}\n    />\n  );\n};\n\nconst SelectorInput = assignWithoutSideEffects(React.forwardRef(_SelectorInput), {\n  displayName: 'SelectorInput',\n});\n\nexport { SelectorInput };\n"],"names":["getHoverStyles","_ref","_hoverTokens$default$","theme","isDisabled","hasError","isChecked","hoverTokens","checked","backgroundColor","background","borderColor","border","getIn","undefined","transitionTimingFunction","motion","easing","standard","effective","transitionDuration","castWebType","makeMotionTime","duration","StyledInput","styled","input","withConfig","displayName","componentId","_ref2","_objectSpread","screenReaderStyles","getFocusRingStyles","_SelectorInput","_ref3","ref","id","inputProps","tabIndex","accessibilityLabel","rest","_objectWithoutProperties","_excluded","mergedRef","useMergeRefs","_jsx","makeAccessible","label","makeAnalyticsAttribute","SelectorInput","assignWithoutSideEffects","React","forwardRef"],"mappings":"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"}
+{"version":3,"file":"SelectorInput.web.js","sources":["../../../../../../../src/components/Form/Selector/SelectorInput.web.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\n/* eslint-disable @typescript-eslint/ban-types */\nimport type { CSSObject } from 'styled-components';\nimport React from 'react';\nimport styled from 'styled-components';\nimport type { HoverProps, SelectorInputProps } from './types';\nimport getIn from '~utils/lodashButBetter/get';\nimport type { Theme } from '~components/BladeProvider';\nimport { castWebType } from '~utils';\nimport { screenReaderStyles } from '~components/VisuallyHidden';\nimport type { BladeElementRef } from '~utils/types';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { makeMotionTime } from '~utils/makeMotionTime';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport { useMergeRefs } from '~utils/useMergeRefs';\nimport { getFocusRingStyles } from '~utils/getFocusRingStyles';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\n\nconst getHoverStyles = ({\n  theme,\n  isDisabled,\n  hasError,\n  isChecked,\n  hoverTokens,\n}: { theme: Theme } & HoverProps): CSSObject => {\n  if (isDisabled || hasError) return {};\n\n  const checked = isChecked ? 'checked' : 'unchecked';\n  const backgroundColor = hoverTokens.default.background[checked];\n  const borderColor = hoverTokens.default.border?.[checked];\n\n  return {\n    borderColor: borderColor ? getIn(theme, borderColor) : undefined,\n    backgroundColor: getIn(theme, backgroundColor),\n    transitionTimingFunction: theme.motion.easing.standard as string,\n    transitionDuration: castWebType(makeMotionTime(theme.motion.duration['2xquick'])),\n  };\n};\n\nconst StyledInput = styled.input<HoverProps>(\n  ({ theme, isChecked, isDisabled, hasError, hoverTokens }) => ({\n    ...screenReaderStyles,\n    '&:focus-visible + div': {\n      ...getFocusRingStyles({ theme }),\n    },\n    '&:hover + div': {\n      ...getHoverStyles({ theme, isChecked, isDisabled, hasError, hoverTokens }),\n    },\n  }),\n);\n\nconst _SelectorInput: React.ForwardRefRenderFunction<BladeElementRef, SelectorInputProps> = (\n  {\n    id,\n    inputProps,\n    isChecked,\n    isDisabled,\n    hasError,\n    hoverTokens,\n    tabIndex,\n    accessibilityLabel,\n    ...rest\n  },\n  ref,\n) => {\n  // merging both refs because inputProps.ref needs to have access to indeterminate state\n  // to be able to set the mixed value via setMixed() function\n  // TODO: replace with a generic `mergeRefs()` util if we do this in other places\n  const mergedRef = useMergeRefs(ref, inputProps.ref);\n\n  return (\n    <StyledInput\n      id={id}\n      isChecked={isChecked}\n      isDisabled={isDisabled}\n      hasError={hasError}\n      tabIndex={tabIndex}\n      hoverTokens={hoverTokens}\n      {...inputProps}\n      {...makeAccessible({ label: accessibilityLabel })}\n      {...makeAnalyticsAttribute(rest)}\n      ref={mergedRef}\n    />\n  );\n};\n\nconst SelectorInput = assignWithoutSideEffects(React.forwardRef(_SelectorInput), {\n  displayName: 'SelectorInput',\n});\n\nexport { SelectorInput };\n"],"names":["getHoverStyles","_ref","_hoverTokens$default$","theme","isDisabled","hasError","isChecked","hoverTokens","checked","backgroundColor","background","borderColor","border","getIn","undefined","transitionTimingFunction","motion","easing","standard","transitionDuration","castWebType","makeMotionTime","duration","StyledInput","styled","input","withConfig","displayName","componentId","_ref2","_objectSpread","screenReaderStyles","getFocusRingStyles","_SelectorInput","_ref3","ref","id","inputProps","tabIndex","accessibilityLabel","rest","_objectWithoutProperties","_excluded","mergedRef","useMergeRefs","_jsx","makeAccessible","label","makeAnalyticsAttribute","SelectorInput","assignWithoutSideEffects","React","forwardRef"],"mappings":"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"}

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

@@ -1,5 +1,6 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import React__default from 'react';
 import { indicatorDotSizes, textSizeMapping } from './indicatorTokens.js';
 import '../BladeProvider/index.js';
 import '../Box/BaseBox/index.js';
@@ -31,7 +32,7 @@ import { assignWithoutSideEffects } from '../../utils/assignWithoutSideEffects/a
 var _excluded = ["accessibilityLabel", "children", "size", "color", "emphasis", "testID"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var _Indicator = function _Indicator(_ref) {
+var _Indicator = function _Indicator(_ref, ref) {
   var accessibilityLabel = _ref.accessibilityLabel,
     children = _ref.children,
     _ref$size = _ref.size,
@@ -57,6 +58,7 @@ var _Indicator = function _Indicator(_ref) {
   }));
   var svgSize = isIntense ? indicatorDotSizes[emphasis][size].outer : indicatorDotSizes[emphasis][size].inner;
   return /*#__PURE__*/jsx(BaseBox, _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
+    ref: ref,
     display: isWeb ? 'inline-flex' : 'flex'
   }, a11yProps), metaAttribute({
     name: MetaConstants.Indicator,
@@ -102,7 +104,7 @@ var _Indicator = function _Indicator(_ref) {
     })
   }));
 };
-var Indicator = /*#__PURE__*/assignWithoutSideEffects(_Indicator, {
+var Indicator = /*#__PURE__*/assignWithoutSideEffects( /*#__PURE__*/React__default.forwardRef(_Indicator), {
   componentId: 'Indicator'
 });
 

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 { indicatorDotSizes, textSizeMapping } from './indicatorTokens';\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 { getStringFromReactText } from '~src/utils/getStringChildren';\nimport type { DataAnalyticsAttribute, 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';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\n\ntype IndicatorProps = {\n  /**\n   * Sets the color tone\n   *\n   * @default neutral\n   */\n  color?: FeedbackColors | 'primary';\n\n  /**\n   * Sets the emphasis of the indicator\n   *\n   * If set to intense it will show a background circle\n   *\n   * @default subtle\n   */\n  emphasis?: 'subtle' | 'intense';\n\n  /**\n   * Size of the indicator\n   *\n   * @default medium\n   */\n  size?: 'small' | 'medium' | 'large';\n  /**\n   * A text label to show alongside the indicator dot\n   */\n  children?: StringChildrenType;\n  /**\n   * a11y label for screen readers\n   */\n  accessibilityLabel?: string;\n} & TestID &\n  DataAnalyticsAttribute &\n  StyledPropsBlade;\n\nconst _Indicator = ({\n  accessibilityLabel,\n  children,\n  size = 'medium',\n  color = 'neutral',\n  emphasis = 'subtle',\n  testID,\n  ...rest\n}: IndicatorProps): ReactElement => {\n  const { theme } = useTheme();\n  const childrenString = getStringFromReactText(children);\n  const isIntense = emphasis === 'intense';\n  const isPrimary = color === 'primary';\n\n  const fillColorOuter = isPrimary\n    ? theme.colors.surface.background.primary.subtle\n    : theme.colors.feedback.background[color].subtle;\n  const fillColorInner = isPrimary\n    ? theme.colors.surface.icon.primary.normal\n    : theme.colors.feedback.icon[color].intense;\n\n  const isWeb = !isReactNative();\n  const a11yProps = makeAccessible({\n    label: accessibilityLabel ?? childrenString,\n    ...(isWeb && { role: 'status' }),\n  });\n\n  const svgSize = isIntense\n    ? indicatorDotSizes[emphasis][size].outer\n    : indicatorDotSizes[emphasis][size].inner;\n\n  return (\n    <BaseBox\n      display={(isWeb ? 'inline-flex' : 'flex') as never}\n      {...a11yProps}\n      {...metaAttribute({ name: MetaConstants.Indicator, testID })}\n      {...getStyledProps(rest)}\n      {...makeAnalyticsAttribute(rest)}\n    >\n      <BaseBox display=\"flex\" flexDirection=\"row\" alignItems=\"center\">\n        <Svg width={String(svgSize)} height={String(svgSize)} viewBox=\"0 0 10 10\" fill=\"none\">\n          {isIntense ? (\n            <>\n              <Circle cx=\"5\" cy=\"5\" r=\"5\" fill={fillColorOuter} />\n              <Circle cx=\"5\" cy=\"5\" r=\"2.5\" fill={fillColorInner} />\n            </>\n          ) : (\n            <Circle cx=\"5\" cy=\"5\" r=\"5\" fill={fillColorInner} />\n          )}\n        </Svg>\n        <BaseBox marginLeft={childrenString ? 'spacing.2' : 'spacing.0'}>\n          <Text\n            weight=\"medium\"\n            color=\"surface.text.gray.subtle\"\n            textAlign=\"left\"\n            size={textSizeMapping[size]}\n          >\n            {children}\n          </Text>\n        </BaseBox>\n      </BaseBox>\n    </BaseBox>\n  );\n};\n\nconst Indicator = assignWithoutSideEffects(_Indicator, {\n  componentId: 'Indicator',\n});\n\nexport type { IndicatorProps };\nexport { Indicator };\n"],"names":["_Indicator","_ref","accessibilityLabel","children","_ref$size","size","_ref$color","color","_ref$emphasis","emphasis","testID","rest","_objectWithoutProperties","_excluded","_useTheme","useTheme","theme","childrenString","getStringFromReactText","isIntense","isPrimary","fillColorOuter","colors","surface","background","primary","subtle","feedback","fillColorInner","icon","normal","intense","isWeb","isReactNative","a11yProps","makeAccessible","_objectSpread","label","role","svgSize","indicatorDotSizes","outer","inner","_jsx","BaseBox","display","metaAttribute","name","MetaConstants","Indicator","getStyledProps","makeAnalyticsAttribute","_jsxs","flexDirection","alignItems","Svg","width","String","height","viewBox","fill","_Fragment","Circle","cx","cy","r","marginLeft","Text","weight","textAlign","textSizeMapping","assignWithoutSideEffects","componentId"],"mappings":"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"}
+{"version":3,"file":"Indicator.js","sources":["../../../../../../src/components/Indicator/Indicator.tsx"],"sourcesContent":["import React from 'react';\nimport type { ReactElement, Ref } from 'react';\nimport { indicatorDotSizes, textSizeMapping } from './indicatorTokens';\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 { getStringFromReactText } from '~src/utils/getStringChildren';\nimport type {\n  DataAnalyticsAttribute,\n  BladeElementRef,\n  StringChildrenType,\n  TestID,\n} 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';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\n\ntype IndicatorProps = {\n  /**\n   * Sets the color tone\n   *\n   * @default neutral\n   */\n  color?: FeedbackColors | 'primary';\n\n  /**\n   * Sets the emphasis of the indicator\n   *\n   * If set to intense it will show a background circle\n   *\n   * @default subtle\n   */\n  emphasis?: 'subtle' | 'intense';\n\n  /**\n   * Size of the indicator\n   *\n   * @default medium\n   */\n  size?: 'small' | 'medium' | 'large';\n  /**\n   * A text label to show alongside the indicator dot\n   */\n  children?: StringChildrenType;\n  /**\n   * a11y label for screen readers\n   */\n  accessibilityLabel?: string;\n} & TestID &\n  DataAnalyticsAttribute &\n  StyledPropsBlade;\n\nconst _Indicator = (\n  {\n    accessibilityLabel,\n    children,\n    size = 'medium',\n    color = 'neutral',\n    emphasis = 'subtle',\n    testID,\n    ...rest\n  }: IndicatorProps,\n  ref: Ref<BladeElementRef>,\n): ReactElement => {\n  const { theme } = useTheme();\n  const childrenString = getStringFromReactText(children);\n  const isIntense = emphasis === 'intense';\n  const isPrimary = color === 'primary';\n\n  const fillColorOuter = isPrimary\n    ? theme.colors.surface.background.primary.subtle\n    : theme.colors.feedback.background[color].subtle;\n  const fillColorInner = isPrimary\n    ? theme.colors.surface.icon.primary.normal\n    : theme.colors.feedback.icon[color].intense;\n\n  const isWeb = !isReactNative();\n  const a11yProps = makeAccessible({\n    label: accessibilityLabel ?? childrenString,\n    ...(isWeb && { role: 'status' }),\n  });\n\n  const svgSize = isIntense\n    ? indicatorDotSizes[emphasis][size].outer\n    : indicatorDotSizes[emphasis][size].inner;\n\n  return (\n    <BaseBox\n      ref={ref as never}\n      display={(isWeb ? 'inline-flex' : 'flex') as never}\n      {...a11yProps}\n      {...metaAttribute({ name: MetaConstants.Indicator, testID })}\n      {...getStyledProps(rest)}\n      {...makeAnalyticsAttribute(rest)}\n    >\n      <BaseBox display=\"flex\" flexDirection=\"row\" alignItems=\"center\">\n        <Svg width={String(svgSize)} height={String(svgSize)} viewBox=\"0 0 10 10\" fill=\"none\">\n          {isIntense ? (\n            <>\n              <Circle cx=\"5\" cy=\"5\" r=\"5\" fill={fillColorOuter} />\n              <Circle cx=\"5\" cy=\"5\" r=\"2.5\" fill={fillColorInner} />\n            </>\n          ) : (\n            <Circle cx=\"5\" cy=\"5\" r=\"5\" fill={fillColorInner} />\n          )}\n        </Svg>\n        <BaseBox marginLeft={childrenString ? 'spacing.2' : 'spacing.0'}>\n          <Text\n            weight=\"medium\"\n            color=\"surface.text.gray.subtle\"\n            textAlign=\"left\"\n            size={textSizeMapping[size]}\n          >\n            {children}\n          </Text>\n        </BaseBox>\n      </BaseBox>\n    </BaseBox>\n  );\n};\n\nconst Indicator = assignWithoutSideEffects(React.forwardRef(_Indicator), {\n  componentId: 'Indicator',\n});\n\nexport type { IndicatorProps };\nexport { Indicator };\n"],"names":["_Indicator","_ref","ref","accessibilityLabel","children","_ref$size","size","_ref$color","color","_ref$emphasis","emphasis","testID","rest","_objectWithoutProperties","_excluded","_useTheme","useTheme","theme","childrenString","getStringFromReactText","isIntense","isPrimary","fillColorOuter","colors","surface","background","primary","subtle","feedback","fillColorInner","icon","normal","intense","isWeb","isReactNative","a11yProps","makeAccessible","_objectSpread","label","role","svgSize","indicatorDotSizes","outer","inner","_jsx","BaseBox","display","metaAttribute","name","MetaConstants","Indicator","getStyledProps","makeAnalyticsAttribute","_jsxs","flexDirection","alignItems","Svg","width","String","height","viewBox","fill","_Fragment","Circle","cx","cy","r","marginLeft","Text","weight","textAlign","textSizeMapping","assignWithoutSideEffects","React","forwardRef","componentId"],"mappings":"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"}

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

@@ -43,7 +43,7 @@ var StyledBaseInputWrapper = /*#__PURE__*/styled(BaseBox).withConfig({
     })), {}, {
       transitionProperty: 'background-color',
       transitionDuration: castWebType(makeMotionTime(props.theme.motion.duration.xquick)),
-      transitionTimingFunction: castWebType(props.theme.motion.easing.standard.effective)
+      transitionTimingFunction: castWebType(props.theme.motion.easing.standard)
     }),
     ':focus-within': _objectSpread({}, getInputBackgroundAndBorderStyles({
       theme: props.theme,
@@ -78,8 +78,8 @@ var _AnimatedBaseInputWrapper = function _AnimatedBaseInputWrapper(_ref, ref) {
   // 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 expandTransition = /*#__PURE__*/css(["animation:", " ", " ", ";"], expandAnimation, makeMotionTime(motion.duration.quick), String(motion.easing.entrance));
+  var collapseTransition = /*#__PURE__*/css(["animation:", " ", " ", ";"], collapseAnimation, makeMotionTime(motion.duration.quick), String(motion.easing.exit));
   var noTransition = /*#__PURE__*/css(["animation:none;"]);
   return /*#__PURE__*/jsx(StyledAnimatedBaseInputWrapper
   // eslint-disable-next-line @typescript-eslint/no-explicit-any

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 {\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, makeSpace } 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    | 'isTableInputCell'\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    isTableInputCell: props.isTableInputCell,\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      isTextArea: props.isTextArea,\n      isTableInputCell: props.isTableInputCell,\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      isTextArea: props.isTextArea,\n      isTableInputCell: props.isTableInputCell,\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 && !props.isTableInputCell\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      height={\n        rest.isTextArea && isDropdownTrigger\n          ? makeSpace((rest.numberOfLines ?? 0) * baseInputHeight[rest.size])\n          : undefined\n      }\n      cursor={rest.isTextArea && isDropdownTrigger ? 'text' : undefined}\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      isTableInputCell={rest.isTableInputCell}\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","isTableInputCell","isHovered","transitionProperty","transitionDuration","castWebType","makeMotionTime","motion","duration","xquick","transitionTimingFunction","easing","standard","effective","StyledAnimatedBaseInputWrapper","css","transition","makeSize","getAnimatedBaseInputWrapperMaxHeight","maxTagRows","showAllTags","size","undefined","_AnimatedBaseInputWrapper","_ref","ref","_rest$numberOfLines","setShowAllTagsWithAnimation","rest","_objectWithoutProperties","_excluded","expandAnimation","keyframes","baseInputHeight","baseInputWrapperMaxHeight","collapseAnimation","expandTransition","quick","String","entrance","collapseTransition","exit","noTransition","_jsx","height","makeSpace","numberOfLines","cursor","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, makeSpace } 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    | 'isTableInputCell'\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    isTableInputCell: props.isTableInputCell,\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      isTextArea: props.isTextArea,\n      isTableInputCell: props.isTableInputCell,\n    }),\n    transitionProperty: 'background-color',\n    transitionDuration: castWebType(makeMotionTime(props.theme.motion.duration.xquick)),\n    transitionTimingFunction: castWebType(props.theme.motion.easing.standard),\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      isTextArea: props.isTextArea,\n      isTableInputCell: props.isTableInputCell,\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 && !props.isTableInputCell\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)};\n  `;\n\n  const collapseTransition = css`\n    animation: ${collapseAnimation} ${makeMotionTime(motion.duration.quick)}\n      ${String(motion.easing.exit)};\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      height={\n        rest.isTextArea && isDropdownTrigger\n          ? makeSpace((rest.numberOfLines ?? 0) * baseInputHeight[rest.size])\n          : undefined\n      }\n      cursor={rest.isTextArea && isDropdownTrigger ? 'text' : undefined}\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      isTableInputCell={rest.isTableInputCell}\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","isTableInputCell","isHovered","transitionProperty","transitionDuration","castWebType","makeMotionTime","motion","duration","xquick","transitionTimingFunction","easing","standard","StyledAnimatedBaseInputWrapper","css","transition","makeSize","getAnimatedBaseInputWrapperMaxHeight","maxTagRows","showAllTags","size","undefined","_AnimatedBaseInputWrapper","_ref","ref","_rest$numberOfLines","setShowAllTagsWithAnimation","rest","_objectWithoutProperties","_excluded","expandAnimation","keyframes","baseInputHeight","baseInputWrapperMaxHeight","collapseAnimation","expandTransition","quick","String","entrance","collapseTransition","exit","noTransition","_jsx","height","makeSpace","numberOfLines","cursor","onAnimationEnd","e","animationName","getName","AnimatedBaseInputWrapper","React","forwardRef"],"mappings":";;;;;;;;;;;;;;;;;;;;AAcA,IAAMA,sBAAsB,gBAAGC,MAAM,CAACC,OAAO,CAAC,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,qDAAA;EAAAC,WAAA,EAAA,UAAA;AAAA,CAAA,CAAA,CAW5C,UAACC,KAAK,EAAA;AAAA,EAAA,OAAAC,aAAA,CAAAA,aAAA,CAAA,EAAA,EACHC,iCAAiC,CAAC;IACnCC,KAAK,EAAEH,KAAK,CAACG,KAAK;AAClBC,IAAAA,SAAS,EAAEJ,KAAK,CAACK,kBAAkB,KAAK,OAAO;IAC/CC,UAAU,EAAEN,KAAK,CAACM,UAAU;IAC5BC,eAAe,EAAEP,KAAK,CAACO,eAAe;IACtCC,UAAU,EAAER,KAAK,CAACQ,UAAU;IAC5BC,iBAAiB,EAAET,KAAK,CAACS,iBAAiB;IAC1CC,gBAAgB,EAAEV,KAAK,CAACU,gBAAAA;AAC1B,GAAC,CAAC,CAAA,EAAA,EAAA,EAAA;AACF,IAAA,SAAS,EAAAT,aAAA,CAAAA,aAAA,CAAA,EAAA,EACJC,iCAAiC,CAAC;MACnCC,KAAK,EAAEH,KAAK,CAACG,KAAK;AAClBQ,MAAAA,SAAS,EAAE,IAAI;AACfP,MAAAA,SAAS,EAAEJ,KAAK,CAACK,kBAAkB,KAAK,OAAO;MAC/CC,UAAU,EAAEN,KAAK,CAACM,UAAU;MAC5BC,eAAe,EAAEP,KAAK,CAACO,eAAe;MACtCE,iBAAiB,EAAET,KAAK,CAACS,iBAAiB;MAC1CD,UAAU,EAAER,KAAK,CAACQ,UAAU;MAC5BE,gBAAgB,EAAEV,KAAK,CAACU,gBAAAA;AAC1B,KAAC,CAAC,CAAA,EAAA,EAAA,EAAA;AACFE,MAAAA,kBAAkB,EAAE,kBAAkB;AACtCC,MAAAA,kBAAkB,EAAEC,WAAW,CAACC,cAAc,CAACf,KAAK,CAACG,KAAK,CAACa,MAAM,CAACC,QAAQ,CAACC,MAAM,CAAC,CAAC;MACnFC,wBAAwB,EAAEL,WAAW,CAACd,KAAK,CAACG,KAAK,CAACa,MAAM,CAACI,MAAM,CAACC,QAAQ,CAAA;KACzE,CAAA;AACD,IAAA,eAAe,EAAApB,aAAA,CACVC,EAAAA,EAAAA,iCAAiC,CAAC;MACnCC,KAAK,EAAEH,KAAK,CAACG,KAAK;AAClBC,MAAAA,SAAS,EAAEJ,KAAK,CAACK,kBAAkB,KAAK,OAAO;MAC/CC,UAAU,EAAEN,KAAK,CAACM,UAAU;MAC5BC,eAAe,EAAEP,KAAK,CAACO,eAAe;MACtCE,iBAAiB,EAAET,KAAK,CAACS,iBAAiB;MAC1CD,UAAU,EAAER,KAAK,CAACQ,UAAU;MAC5BE,gBAAgB,EAAEV,KAAK,CAACU,gBAAAA;AAC1B,KAAC,CAAC,CAAA;AACH,GAAA,CAAA,CAAA;AAAA,CACD,CAAC,CAAA;;AAEH;AACA,IAAMY,8BAA8B,gBAAG3B,MAAM,CAACD,sBAAsB,CAAC,CAAAG,UAAA,CAAA;EAAAC,WAAA,EAAA,6DAAA;EAAAC,WAAA,EAAA,UAAA;AAAA,CAAA,CAAA,CAMlE,UAACC,KAAK,EAAA;AAAA,EAAA,OACPA,KAAK,CAACS,iBAAiB,IAAI,CAACT,KAAK,CAACU,gBAAgB,GAC9Ca,GAAG,CAAA,CAAA,EAAA,EAAA,cAAA,EAAA,GAAA,CAAA,EACCvB,KAAK,CAACwB,UAAU,EACJC,QAAQ,CACpBC,oCAAoC,CAAC;IACnCC,UAAU,EAAE3B,KAAK,CAAC2B,UAAU;IAC5BC,WAAW,EAAE5B,KAAK,CAAC4B,WAAW;IAC9BC,IAAI,EAAE7B,KAAK,CAAC6B,IAAAA;GACb,CACH,CAAC,CAAA,GAEHC,SAAS,CAAA;AAAA,CACd,CAAA,CAAA;AAED,IAAMC,yBAKL,GAAG,SALEA,yBAKLA,CAAAC,IAAA,EAECC,GAAG,EACoB;AAAA,EAAA,IAAAC,mBAAA,CAAA;AAAA,EAAA,IAFrBN,WAAW,GAAAI,IAAA,CAAXJ,WAAW;IAAEO,2BAA2B,GAAAH,IAAA,CAA3BG,2BAA2B;IAAER,UAAU,GAAAK,IAAA,CAAVL,UAAU;IAAElB,iBAAiB,GAAAuB,IAAA,CAAjBvB,iBAAiB;AAAK2B,IAAAA,IAAI,GAAAC,wBAAA,CAAAL,IAAA,EAAAM,SAAA,CAAA,CAAA;AAGlF;EACA,IAAMC,eAAe,gBAAGC,SAAS,CAAA,CAAA,kBAAA,EAAA,kBAAA,EAAA,IAAA,CAAA,EAEnBf,QAAQ,CAACgB,eAAe,CAACL,IAAI,CAACP,IAAI,CAAC,CAAC,EAGpCJ,QAAQ,CAACiB,yBAAyB,CAACN,IAAI,CAACP,IAAI,CAAC,CAAC,CAE7D,CAAA;EAEC,IAAMc,iBAAiB,gBAAGH,SAAS,CAAA,CAAA,kBAAA,EAAA,kBAAA,EAAA,IAAA,CAAA,EAErBf,QAAQ,CAACiB,yBAAyB,CAACN,IAAI,CAACP,IAAI,CAAC,CAAC,EAG9CJ,QAAQ,CAACgB,eAAe,CAACL,IAAI,CAACP,IAAI,CAAC,CAAC,CAEnD,CAAA;EAEC,IAAMe,gBAAgB,gBAAGrB,GAAG,CAAA,CAAA,YAAA,EAAA,GAAA,EAAA,GAAA,EAAA,GAAA,CAAA,EACbgB,eAAe,EAAIxB,cAAc,CAACC,MAAM,CAACC,QAAQ,CAAC4B,KAAK,CAAC,EACjEC,MAAM,CAAC9B,MAAM,CAACI,MAAM,CAAC2B,QAAQ,CAAC,CACnC,CAAA;EAED,IAAMC,kBAAkB,gBAAGzB,GAAG,CAAA,CAAA,YAAA,EAAA,GAAA,EAAA,GAAA,EAAA,GAAA,CAAA,EACfoB,iBAAiB,EAAI5B,cAAc,CAACC,MAAM,CAACC,QAAQ,CAAC4B,KAAK,CAAC,EACnEC,MAAM,CAAC9B,MAAM,CAACI,MAAM,CAAC6B,IAAI,CAAC,CAC/B,CAAA;EAED,IAAMC,YAAY,gBAAG3B,GAAG,CAEvB,CAAA,iBAAA,CAAA,CAAA,CAAA;AACD,EAAA,oBACE4B,GAAA,CAAC7B,8BAAAA;AACC;IAAArB,aAAA,CAAAA,aAAA,CAAA;AACAgC,IAAAA,GAAG,EAAEA,GAAAA;AAAW,GAAA,EACZG,IAAI,CAAA,EAAA,EAAA,EAAA;IACRZ,UAAU,EACRG,UAAU,KAAK,YAAY,GACvBuB,YAAY,GACZtB,WAAW,GACXgB,gBAAgB,GAChBI,kBACL;AACDI,IAAAA,MAAM,EACJhB,IAAI,CAAC5B,UAAU,IAAIC,iBAAiB,GAChC4C,SAAS,CAAC,CAAA,CAAAnB,mBAAA,GAACE,IAAI,CAACkB,aAAa,MAAApB,IAAAA,IAAAA,mBAAA,KAAAA,KAAAA,CAAAA,GAAAA,mBAAA,GAAI,CAAC,IAAIO,eAAe,CAACL,IAAI,CAACP,IAAI,CAAC,CAAC,GACjEC,SACL;IACDyB,MAAM,EAAEnB,IAAI,CAAC5B,UAAU,IAAIC,iBAAiB,GAAG,MAAM,GAAGqB,SAAU;AAClErB,IAAAA,iBAAiB,EAAEA,iBAAkB;AACrCmB,IAAAA,WAAW,EAAEA,WAAY;AACzBD,IAAAA,UAAU,EAAEA,UAAW;AACvB6B,IAAAA,cAAc,EAAE,SAAAA,cAACC,CAAAA,CAAC,EAAK;AACrB,MAAA,IAAI,CAAC7B,WAAW,IAAI6B,CAAC,CAACC,aAAa,KAAKf,iBAAiB,CAACgB,OAAO,EAAE,EAAE;AACnE;AACAxB,QAAAA,2BAA2B,aAA3BA,2BAA2B,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAA3BA,2BAA2B,CAAG,KAAK,CAAC,CAAA;AACtC,OAAA;KACA;IACFzB,gBAAgB,EAAE0B,IAAI,CAAC1B,gBAAAA;AAAiB,GAAA,CACzC,CAAC,CAAA;AAEN,CAAC,CAAA;AAED,IAAMkD,wBAAwB,gBAAGC,cAAK,CAACC,UAAU,CAAC/B,yBAAyB;;;;"}

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

@@ -24,6 +24,7 @@ import '../../../utils/assignWithoutSideEffects/index.js';
 import '../../../utils/getFocusRingStyles/index.js';
 import getIn from '../../../utils/lodashButBetter/get.js';
 import { useMergeRefs } from '../../../utils/useMergeRefs.js';
+import { getOuterMotionRef, getInnerMotionRef } from '../../../utils/getMotionRefs.js';
 import '../../../utils/makeAnalyticsAttribute/index.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { throwBladeError } from '../../../utils/logger/logger.js';
@@ -46,7 +47,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", "trailingInteractionElement", "onTrailingInteractionElementClick", "leadingInteractionElement", "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", "isTableInputCell", "showHintsAsTooltip"];
+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", "trailingInteractionElement", "onTrailingInteractionElementClick", "leadingInteractionElement", "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", "isTableInputCell", "showHintsAsTooltip", "_motionMeta"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var autoCompleteSuggestionTypeValues = ['none', 'on', 'name', 'email', 'username', 'password', 'newPassword', 'oneTimeCode', 'telephone', 'postalCode', 'countryName', 'creditCardNumber', 'creditCardCSC', 'creditCardExpiry', 'creditCardExpiryMonth', 'creditCardExpiryYear'];
@@ -297,7 +298,7 @@ var FocusRingWrapper = /*#__PURE__*/styled(BaseBox).withConfig({
       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))
+      transitionTimingFunction: castWebType(theme.motion.easing[baseInputBorderBackgroundMotion[currentInteraction === 'focus' ? 'enter' : 'exit'].easing])
     }) : {}
   };
 });
@@ -376,6 +377,7 @@ var _BaseInput = function _BaseInput(_ref12, ref) {
     isTableInputCell = _ref12$isTableInputCe === void 0 ? false : _ref12$isTableInputCe,
     _ref12$showHintsAsToo = _ref12.showHintsAsTooltip,
     showHintsAsTooltip = _ref12$showHintsAsToo === void 0 ? false : _ref12$showHintsAsToo,
+    _motionMeta = _ref12._motionMeta,
     rest = _objectWithoutProperties(_ref12, _excluded);
   var _useTheme = useTheme(),
     theme = _useTheme.theme;
@@ -461,7 +463,12 @@ var _BaseInput = function _BaseInput(_ref12, ref) {
     }
   }
   var isTextArea = as === 'textarea';
-  return /*#__PURE__*/jsxs(BaseBox, _objectSpread(_objectSpread(_objectSpread({}, metaAttribute({
+  return /*#__PURE__*/jsxs(BaseBox, _objectSpread(_objectSpread(_objectSpread({
+    ref: getOuterMotionRef({
+      _motionMeta: _motionMeta,
+      ref: ref
+    })
+  }, metaAttribute({
     name: componentName,
     testID: testID
   })), getStyledProps(rest)), {}, {
@@ -527,9 +534,13 @@ var _BaseInput = function _BaseInput(_ref12, ref) {
             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();
+              var innerRef = getInnerMotionRef({
+                _motionMeta: _motionMeta,
+                ref: ref
+              });
+              if (innerRef && !isReactNative && 'current' in innerRef) {
+                var _innerRef$current;
+                (_innerRef$current = innerRef.current) === null || _innerRef$current === void 0 ? void 0 : _innerRef$current.focus();
               }
             },
             labelPrefix: isLabelInsideInput ? label : undefined,
@@ -550,7 +561,10 @@ var _BaseInput = function _BaseInput(_ref12, ref) {
             children: /*#__PURE__*/jsx(StyledBaseInput, _objectSpread(_objectSpread({
               as: as,
               id: inputId,
-              ref: mergedInputRef,
+              ref: getInnerMotionRef({
+                _motionMeta: _motionMeta,
+                ref: mergedInputRef
+              }),
               name: name,
               type: type,
               defaultValue: defaultValue,