@razorpay/blade 11.8.1 → 11.9.0

package/build/types/tokens/index.native.d.ts

@@ -773,6 +773,8 @@ declare const size: {
     readonly 140: 140;
     /** 160 px */
     readonly 160: 160;
+    /** 176 px */
+    readonly 176: 176;
     /** 200 px */
     readonly 200: 200;
     /** 240 px */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@razorpay/blade",
   "description": "The Design System that powers Razorpay",
-  "version": "11.8.1",
+  "version": "11.9.0",
   "license": "MIT",
   "engines": {
     "node": ">=18.12.1"

package/build/lib/native/components/Input/BaseInput/BaseInputAnimatedBorder.native.js

@@ -1,16 +0,0 @@
-import styled from 'styled-components/native';
-import Animated, { useSharedValue, useAnimatedStyle, interpolate, withTiming } from 'react-native-reanimated';
-import { useEffect } from 'react';
-import '@gorhom/portal';
-import 'react-native-gesture-handler';
-import useTheme from '../../BladeProvider/useTheme.js';
-import 'react-native';
-import '@babel/runtime/helpers/slicedToArray';
-import { makeBorderSize } from '../../../utils/makeBorderSize/makeBorderSize.js';
-import '../../BottomSheet/BottomSheetStack.js';
-import { jsx } from 'react/jsx-runtime';
-
-var BaseInputStyledAnimatedBorder=styled(Animated.View)(function(_ref){var theme=_ref.theme;return {position:'absolute',bottom:0,left:0,right:0,opacity:1,backgroundColor:theme.colors.interactive.background.primary.default,height:makeBorderSize(theme.border.width.thin)};});var BaseInputAnimatedBorder=function BaseInputAnimatedBorder(_ref2){var currentInteraction=_ref2.currentInteraction,validationState=_ref2.validationState;var _useTheme=useTheme(),theme=_useTheme.theme;var borderAnimationEasing=theme.motion.easing.standard.effective;var widthTrigger=useSharedValue(0);var opacityTrigger=useSharedValue(1);var animatedStyle=useAnimatedStyle(function(){return {width:`${interpolate(widthTrigger.value,[0,1],[0,100])}%`,opacity:interpolate(opacityTrigger.value,[0,1],[0,1])};});useEffect(function(){if(currentInteraction=='focus'&&validationState!=='error'&&validationState!=='success'){widthTrigger.value=0;opacityTrigger.value=1;widthTrigger.value=withTiming(1,{duration:theme.motion.duration.moderate,easing:borderAnimationEasing});}else if(currentInteraction==='default'){opacityTrigger.value=withTiming(0,{duration:theme.motion.duration.xquick,easing:borderAnimationEasing});}},[currentInteraction,opacityTrigger,widthTrigger,theme.motion.duration,borderAnimationEasing,validationState]);return jsx(BaseInputStyledAnimatedBorder,{style:animatedStyle});};
-
-export { BaseInputAnimatedBorder };
-//# sourceMappingURL=BaseInputAnimatedBorder.native.js.map

package/build/lib/native/components/Input/BaseInput/BaseInputAnimatedBorder.native.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"BaseInputAnimatedBorder.native.js","sources":["../../../../../../src/components/Input/BaseInput/BaseInputAnimatedBorder.native.tsx"],"sourcesContent":["import styled from 'styled-components/native';\nimport type { EasingFn } from 'react-native-reanimated';\nimport Animated, {\n  useAnimatedStyle,\n  useSharedValue,\n  interpolate,\n  withTiming,\n} from 'react-native-reanimated';\nimport type { ReactElement } from 'react';\nimport { useEffect } from 'react';\nimport type { ActionStates } from '../../../utils/useInteraction';\nimport type { BaseInputProps } from './BaseInput';\nimport { useTheme } from '~components/BladeProvider';\nimport { makeBorderSize } from '~utils/makeBorderSize';\n\nconst BaseInputStyledAnimatedBorder = styled(Animated.View)(({ theme }) => ({\n  position: 'absolute',\n  bottom: 0,\n  left: 0,\n  right: 0,\n  opacity: 1,\n  backgroundColor: theme.colors.interactive.background.primary.default,\n  height: makeBorderSize(theme.border.width.thin),\n}));\n\nexport const BaseInputAnimatedBorder = ({\n  currentInteraction,\n  validationState,\n}: {\n  currentInteraction: ActionStates;\n  validationState: BaseInputProps['validationState'];\n}): ReactElement => {\n  const { theme } = useTheme();\n  const borderAnimationEasing = (theme.motion.easing.standard.effective as unknown) as EasingFn;\n\n  const widthTrigger = useSharedValue(0);\n  const opacityTrigger = useSharedValue(1);\n\n  const animatedStyle = useAnimatedStyle(() => {\n    return {\n      width: `${interpolate(widthTrigger.value, [0, 1], [0, 100])}%`,\n      opacity: interpolate(opacityTrigger.value, [0, 1], [0, 1]),\n    };\n  });\n\n  useEffect(() => {\n    if (\n      currentInteraction == 'focus' &&\n      validationState !== 'error' &&\n      validationState !== 'success'\n    ) {\n      widthTrigger.value = 0;\n      opacityTrigger.value = 1;\n      widthTrigger.value = withTiming(1, {\n        duration: theme.motion.duration.moderate,\n        easing: borderAnimationEasing,\n      });\n    } else if (currentInteraction === 'default') {\n      opacityTrigger.value = withTiming(0, {\n        duration: theme.motion.duration.xquick,\n        easing: borderAnimationEasing,\n      });\n    }\n  }, [\n    currentInteraction,\n    opacityTrigger,\n    widthTrigger,\n    theme.motion.duration,\n    borderAnimationEasing,\n    validationState,\n  ]);\n\n  return <BaseInputStyledAnimatedBorder style={animatedStyle} />;\n};\n"],"names":["BaseInputStyledAnimatedBorder","styled","Animated","View","_ref","theme","position","bottom","left","right","opacity","backgroundColor","colors","interactive","background","primary","default","height","makeBorderSize","border","width","thin","BaseInputAnimatedBorder","_ref2","currentInteraction","validationState","_useTheme","useTheme","borderAnimationEasing","motion","easing","standard","effective","widthTrigger","useSharedValue","opacityTrigger","animatedStyle","useAnimatedStyle","interpolate","value","useEffect","withTiming","duration","moderate","xquick","_jsx","style"],"mappings":";;;;;;;;;;;;AAeA,IAAMA,6BAA6B,CAAGC,MAAM,CAACC,QAAQ,CAACC,IAAI,CAAC,CAAC,SAAAC,IAAA,MAAGC,KAAK,CAAAD,IAAA,CAALC,KAAK,CAAA,OAAQ,CAC1EC,QAAQ,CAAE,UAAU,CACpBC,MAAM,CAAE,CAAC,CACTC,IAAI,CAAE,CAAC,CACPC,KAAK,CAAE,CAAC,CACRC,OAAO,CAAE,CAAC,CACVC,eAAe,CAAEN,KAAK,CAACO,MAAM,CAACC,WAAW,CAACC,UAAU,CAACC,OAAO,CAACC,OAAO,CACpEC,MAAM,CAAEC,cAAc,CAACb,KAAK,CAACc,MAAM,CAACC,KAAK,CAACC,IAAI,CAChD,CAAC,EAAC,CAAC,CAEU,IAAAC,uBAAuB,CAAG,SAA1BA,uBAAuBA,CAAAC,KAAA,CAMhB,KALlBC,kBAAkB,CAAAD,KAAA,CAAlBC,kBAAkB,CAClBC,eAAe,CAAAF,KAAA,CAAfE,eAAe,CAKf,IAAAC,SAAA,CAAkBC,QAAQ,EAAE,CAApBtB,KAAK,CAAAqB,SAAA,CAALrB,KAAK,CACb,IAAMuB,qBAAqB,CAAIvB,KAAK,CAACwB,MAAM,CAACC,MAAM,CAACC,QAAQ,CAACC,SAAiC,CAE7F,IAAMC,YAAY,CAAGC,cAAc,CAAC,CAAC,CAAC,CACtC,IAAMC,cAAc,CAAGD,cAAc,CAAC,CAAC,CAAC,CAExC,IAAME,aAAa,CAAGC,gBAAgB,CAAC,UAAM,CAC3C,OAAO,CACLjB,KAAK,CAAG,CAAEkB,EAAAA,WAAW,CAACL,YAAY,CAACM,KAAK,CAAE,CAAC,CAAC,CAAE,CAAC,CAAC,CAAE,CAAC,CAAC,CAAE,GAAG,CAAC,CAAE,GAAE,CAC9D7B,OAAO,CAAE4B,WAAW,CAACH,cAAc,CAACI,KAAK,CAAE,CAAC,CAAC,CAAE,CAAC,CAAC,CAAE,CAAC,CAAC,CAAE,CAAC,CAAC,CAC3D,CAAC,CACH,CAAC,CAAC,CAEFC,SAAS,CAAC,UAAM,CACd,GACEhB,kBAAkB,EAAI,OAAO,EAC7BC,eAAe,GAAK,OAAO,EAC3BA,eAAe,GAAK,SAAS,CAC7B,CACAQ,YAAY,CAACM,KAAK,CAAG,CAAC,CACtBJ,cAAc,CAACI,KAAK,CAAG,CAAC,CACxBN,YAAY,CAACM,KAAK,CAAGE,UAAU,CAAC,CAAC,CAAE,CACjCC,QAAQ,CAAErC,KAAK,CAACwB,MAAM,CAACa,QAAQ,CAACC,QAAQ,CACxCb,MAAM,CAAEF,qBACV,CAAC,CAAC,CACJ,CAAC,QAAUJ,kBAAkB,GAAK,SAAS,CAAE,CAC3CW,cAAc,CAACI,KAAK,CAAGE,UAAU,CAAC,CAAC,CAAE,CACnCC,QAAQ,CAAErC,KAAK,CAACwB,MAAM,CAACa,QAAQ,CAACE,MAAM,CACtCd,MAAM,CAAEF,qBACV,CAAC,CAAC,CACJ,CACF,CAAC,CAAE,CACDJ,kBAAkB,CAClBW,cAAc,CACdF,YAAY,CACZ5B,KAAK,CAACwB,MAAM,CAACa,QAAQ,CACrBd,qBAAqB,CACrBH,eAAe,CAChB,CAAC,CAEF,OAAOoB,GAAA,CAAC7C,6BAA6B,EAAC8C,KAAK,CAAEV,aAAc,CAAE,CAAC,CAChE;;;;"}

package/build/lib/native/components/Input/BaseInput/baseInputConfig.js

@@ -1,8 +0,0 @@
-import '../../../tokens/global/typography.js';
-import '../../../tokens/global/motion.js';
-import { size } from '../../../tokens/global/size.js';
-
-var BASEINPUT_BOTTOM_LINE_HEIGHT=size['1'];var BASEINPUT_MAX_ROWS=4;var BASEINPUT_DEFAULT_HEIGHT=size['36'];var BASEINPUT_WRAPPER_MIN_HEIGHT=BASEINPUT_DEFAULT_HEIGHT+BASEINPUT_BOTTOM_LINE_HEIGHT;var BASEINPUT_WRAPPER_MAX_HEIGHT=size['36']*BASEINPUT_MAX_ROWS+BASEINPUT_BOTTOM_LINE_HEIGHT;
-
-export { BASEINPUT_DEFAULT_HEIGHT, BASEINPUT_MAX_ROWS, BASEINPUT_WRAPPER_MAX_HEIGHT, BASEINPUT_WRAPPER_MIN_HEIGHT };
-//# sourceMappingURL=baseInputConfig.js.map

package/build/lib/native/components/Input/BaseInput/baseInputConfig.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"baseInputConfig.js","sources":["../../../../../../src/components/Input/BaseInput/baseInputConfig.ts"],"sourcesContent":["import { size, spacing } from '~tokens/global';\n\nconst BASEINPUT_BOTTOM_LINE_HEIGHT: number = size['1'];\nexport const BASEINPUT_MAX_ROWS = 4;\n\nexport const TAG_HEIGHT = size['20'];\nexport const TAG_GAP = spacing['3'];\n\n/**\n * 36px\n */\nexport const BASEINPUT_DEFAULT_HEIGHT: number = size['36'];\n\n/**\n * 37px (36px height + 1px bottom line height)\n */\nexport const BASEINPUT_WRAPPER_MIN_HEIGHT = BASEINPUT_DEFAULT_HEIGHT + BASEINPUT_BOTTOM_LINE_HEIGHT;\n\n/**\n * 145px (36px height * 4 rows + 1px bottom line height)\n */\nexport const BASEINPUT_WRAPPER_MAX_HEIGHT =\n  size['36'] * BASEINPUT_MAX_ROWS + BASEINPUT_BOTTOM_LINE_HEIGHT; // we don't want exact number but rough number to be able to animate correctly in height.\n"],"names":["BASEINPUT_BOTTOM_LINE_HEIGHT","size","BASEINPUT_MAX_ROWS","BASEINPUT_DEFAULT_HEIGHT","BASEINPUT_WRAPPER_MIN_HEIGHT","BASEINPUT_WRAPPER_MAX_HEIGHT"],"mappings":";;;;AAEA,IAAMA,4BAAoC,CAAGC,IAAI,CAAC,GAAG,CAAC,CACzC,IAAAC,kBAAkB,CAAG,EAQrB,IAAAC,wBAAgC,CAAGF,IAAI,CAAC,IAAI,EAK5C,IAAAG,4BAA4B,CAAGD,wBAAwB,CAAGH,6BAK1D,IAAAK,4BAA4B,CACvCJ,IAAI,CAAC,IAAI,CAAC,CAAGC,kBAAkB,CAAGF;;;;"}

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

@@ -1,43 +0,0 @@
-import React__default from 'react';
-import styled, { keyframes, css } from 'styled-components';
-import '../../Box/BaseBox/index.js';
-import '../../../utils/makeMotionTime/index.web.js';
-import '../../BladeProvider/index.js';
-import '../../../utils/makeBorderSize/index.js';
-import { jsx } from 'react/jsx-runtime';
-import { BaseBox } from '../../Box/BaseBox/BaseBox.web.js';
-import { makeBorderSize } from '../../../utils/makeBorderSize/makeBorderSize.js';
-import useTheme from '../../BladeProvider/useTheme.js';
-import { makeMotionTime } from '../../../utils/makeMotionTime/makeMotionTime.web.js';
-
-var scaleBorder = /*#__PURE__*/keyframes(["from{transform:scaleX(0);transform-origin:left;opacity:0;}to{transform:scaleX(1);transform-origin:left;opacity:1;}"]);
-var fadeOutBorder = /*#__PURE__*/keyframes(["from{opacity:1}to{opacity:0}"]);
-var BaseInputStyledAnimatedBorder = /*#__PURE__*/styled(BaseBox).withConfig({
-  displayName: "BaseInputAnimatedBorderweb__BaseInputStyledAnimatedBorder",
-  componentId: "sc-2cepod-0"
-})(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.interactive.background.primary["default"], makeBorderSize(theme.border.width.thin), makeBorderSize(theme.border.width.thin), animation);
-});
-var BaseInputAnimatedBorder = function BaseInputAnimatedBorder(_ref2) {
-  var currentInteraction = _ref2.currentInteraction,
-    validationState = _ref2.validationState;
-  var _useTheme = useTheme(),
-    theme = _useTheme.theme;
-  var borderAnimationOnFocus = /*#__PURE__*/css(["animation:", " ", " ", " forwards;"], scaleBorder, makeMotionTime(theme.motion.duration.moderate), theme.motion.easing.standard.effective);
-  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 === 'focus' && validationState !== 'error' && validationState !== 'success') {
-    borderAnimation.current = borderAnimationOnFocus;
-  } else if (borderAnimation.current && currentInteraction === 'default') {
-    borderAnimation.current = borderAnimationOnBlur;
-  }
-  return /*#__PURE__*/jsx(BaseInputStyledAnimatedBorder, {
-    animation: borderAnimation.current
-  });
-};
-
-export { BaseInputAnimatedBorder };
-//# sourceMappingURL=BaseInputAnimatedBorder.web.js.map

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

@@ -1 +0,0 @@
-{"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/development/components/Input/BaseInput/baseInputConfig.js

@@ -1,26 +0,0 @@
-import '../../../tokens/global/index.js';
-import { size } from '../../../tokens/global/size.js';
-import { spacing } from '../../../tokens/global/spacing.js';
-
-var BASEINPUT_BOTTOM_LINE_HEIGHT = size['1'];
-var BASEINPUT_MAX_ROWS = 4;
-var TAG_HEIGHT = size['20'];
-var TAG_GAP = spacing['3'];
-
-/**
- * 36px
- */
-var BASEINPUT_DEFAULT_HEIGHT = size['36'];
-
-/**
- * 37px (36px height + 1px bottom line height)
- */
-var BASEINPUT_WRAPPER_MIN_HEIGHT = BASEINPUT_DEFAULT_HEIGHT + BASEINPUT_BOTTOM_LINE_HEIGHT;
-
-/**
- * 145px (36px height * 4 rows + 1px bottom line height)
- */
-var BASEINPUT_WRAPPER_MAX_HEIGHT = size['36'] * BASEINPUT_MAX_ROWS + BASEINPUT_BOTTOM_LINE_HEIGHT; // we don't want exact number but rough number to be able to animate correctly in height.
-
-export { BASEINPUT_DEFAULT_HEIGHT, BASEINPUT_MAX_ROWS, BASEINPUT_WRAPPER_MAX_HEIGHT, BASEINPUT_WRAPPER_MIN_HEIGHT, TAG_GAP, TAG_HEIGHT };
-//# sourceMappingURL=baseInputConfig.js.map

package/build/lib/web/development/components/Input/BaseInput/baseInputConfig.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"baseInputConfig.js","sources":["../../../../../../../src/components/Input/BaseInput/baseInputConfig.ts"],"sourcesContent":["import { size, spacing } from '~tokens/global';\n\nconst BASEINPUT_BOTTOM_LINE_HEIGHT: number = size['1'];\nexport const BASEINPUT_MAX_ROWS = 4;\n\nexport const TAG_HEIGHT = size['20'];\nexport const TAG_GAP = spacing['3'];\n\n/**\n * 36px\n */\nexport const BASEINPUT_DEFAULT_HEIGHT: number = size['36'];\n\n/**\n * 37px (36px height + 1px bottom line height)\n */\nexport const BASEINPUT_WRAPPER_MIN_HEIGHT = BASEINPUT_DEFAULT_HEIGHT + BASEINPUT_BOTTOM_LINE_HEIGHT;\n\n/**\n * 145px (36px height * 4 rows + 1px bottom line height)\n */\nexport const BASEINPUT_WRAPPER_MAX_HEIGHT =\n  size['36'] * BASEINPUT_MAX_ROWS + BASEINPUT_BOTTOM_LINE_HEIGHT; // we don't want exact number but rough number to be able to animate correctly in height.\n"],"names":["BASEINPUT_BOTTOM_LINE_HEIGHT","size","BASEINPUT_MAX_ROWS","TAG_HEIGHT","TAG_GAP","spacing","BASEINPUT_DEFAULT_HEIGHT","BASEINPUT_WRAPPER_MIN_HEIGHT","BASEINPUT_WRAPPER_MAX_HEIGHT"],"mappings":";;;;AAEA,IAAMA,4BAAoC,GAAGC,IAAI,CAAC,GAAG,CAAC,CAAA;AAC/C,IAAMC,kBAAkB,GAAG,EAAC;IAEtBC,UAAU,GAAGF,IAAI,CAAC,IAAI,EAAC;IACvBG,OAAO,GAAGC,OAAO,CAAC,GAAG,EAAC;;AAEnC;AACA;AACA;IACaC,wBAAgC,GAAGL,IAAI,CAAC,IAAI,EAAC;;AAE1D;AACA;AACA;AACaM,IAAAA,4BAA4B,GAAGD,wBAAwB,GAAGN,6BAA4B;;AAEnG;AACA;AACA;AACaQ,IAAAA,4BAA4B,GACvCP,IAAI,CAAC,IAAI,CAAC,GAAGC,kBAAkB,GAAGF,6BAA6B;;;;"}

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

@@ -1,43 +0,0 @@
-import React__default from 'react';
-import styled, { keyframes, css } from 'styled-components';
-import '../../Box/BaseBox/index.js';
-import '../../../utils/makeMotionTime/index.web.js';
-import '../../BladeProvider/index.js';
-import '../../../utils/makeBorderSize/index.js';
-import { jsx } from 'react/jsx-runtime';
-import { BaseBox } from '../../Box/BaseBox/BaseBox.web.js';
-import { makeBorderSize } from '../../../utils/makeBorderSize/makeBorderSize.js';
-import useTheme from '../../BladeProvider/useTheme.js';
-import { makeMotionTime } from '../../../utils/makeMotionTime/makeMotionTime.web.js';
-
-var scaleBorder = /*#__PURE__*/keyframes(["from{transform:scaleX(0);transform-origin:left;opacity:0;}to{transform:scaleX(1);transform-origin:left;opacity:1;}"]);
-var fadeOutBorder = /*#__PURE__*/keyframes(["from{opacity:1}to{opacity:0}"]);
-var BaseInputStyledAnimatedBorder = /*#__PURE__*/styled(BaseBox).withConfig({
-  displayName: "BaseInputAnimatedBorderweb__BaseInputStyledAnimatedBorder",
-  componentId: "sc-2cepod-0"
-})(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.interactive.background.primary["default"], makeBorderSize(theme.border.width.thin), makeBorderSize(theme.border.width.thin), animation);
-});
-var BaseInputAnimatedBorder = function BaseInputAnimatedBorder(_ref2) {
-  var currentInteraction = _ref2.currentInteraction,
-    validationState = _ref2.validationState;
-  var _useTheme = useTheme(),
-    theme = _useTheme.theme;
-  var borderAnimationOnFocus = /*#__PURE__*/css(["animation:", " ", " ", " forwards;"], scaleBorder, makeMotionTime(theme.motion.duration.moderate), theme.motion.easing.standard.effective);
-  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 === 'focus' && validationState !== 'error' && validationState !== 'success') {
-    borderAnimation.current = borderAnimationOnFocus;
-  } else if (borderAnimation.current && currentInteraction === 'default') {
-    borderAnimation.current = borderAnimationOnBlur;
-  }
-  return /*#__PURE__*/jsx(BaseInputStyledAnimatedBorder, {
-    animation: borderAnimation.current
-  });
-};
-
-export { BaseInputAnimatedBorder };
-//# sourceMappingURL=BaseInputAnimatedBorder.web.js.map

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

@@ -1 +0,0 @@
-{"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/baseInputConfig.js

@@ -1,26 +0,0 @@
-import '../../../tokens/global/index.js';
-import { size } from '../../../tokens/global/size.js';
-import { spacing } from '../../../tokens/global/spacing.js';
-
-var BASEINPUT_BOTTOM_LINE_HEIGHT = size['1'];
-var BASEINPUT_MAX_ROWS = 4;
-var TAG_HEIGHT = size['20'];
-var TAG_GAP = spacing['3'];
-
-/**
- * 36px
- */
-var BASEINPUT_DEFAULT_HEIGHT = size['36'];
-
-/**
- * 37px (36px height + 1px bottom line height)
- */
-var BASEINPUT_WRAPPER_MIN_HEIGHT = BASEINPUT_DEFAULT_HEIGHT + BASEINPUT_BOTTOM_LINE_HEIGHT;
-
-/**
- * 145px (36px height * 4 rows + 1px bottom line height)
- */
-var BASEINPUT_WRAPPER_MAX_HEIGHT = size['36'] * BASEINPUT_MAX_ROWS + BASEINPUT_BOTTOM_LINE_HEIGHT; // we don't want exact number but rough number to be able to animate correctly in height.
-
-export { BASEINPUT_DEFAULT_HEIGHT, BASEINPUT_MAX_ROWS, BASEINPUT_WRAPPER_MAX_HEIGHT, BASEINPUT_WRAPPER_MIN_HEIGHT, TAG_GAP, TAG_HEIGHT };
-//# sourceMappingURL=baseInputConfig.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"baseInputConfig.js","sources":["../../../../../../../src/components/Input/BaseInput/baseInputConfig.ts"],"sourcesContent":["import { size, spacing } from '~tokens/global';\n\nconst BASEINPUT_BOTTOM_LINE_HEIGHT: number = size['1'];\nexport const BASEINPUT_MAX_ROWS = 4;\n\nexport const TAG_HEIGHT = size['20'];\nexport const TAG_GAP = spacing['3'];\n\n/**\n * 36px\n */\nexport const BASEINPUT_DEFAULT_HEIGHT: number = size['36'];\n\n/**\n * 37px (36px height + 1px bottom line height)\n */\nexport const BASEINPUT_WRAPPER_MIN_HEIGHT = BASEINPUT_DEFAULT_HEIGHT + BASEINPUT_BOTTOM_LINE_HEIGHT;\n\n/**\n * 145px (36px height * 4 rows + 1px bottom line height)\n */\nexport const BASEINPUT_WRAPPER_MAX_HEIGHT =\n  size['36'] * BASEINPUT_MAX_ROWS + BASEINPUT_BOTTOM_LINE_HEIGHT; // we don't want exact number but rough number to be able to animate correctly in height.\n"],"names":["BASEINPUT_BOTTOM_LINE_HEIGHT","size","BASEINPUT_MAX_ROWS","TAG_HEIGHT","TAG_GAP","spacing","BASEINPUT_DEFAULT_HEIGHT","BASEINPUT_WRAPPER_MIN_HEIGHT","BASEINPUT_WRAPPER_MAX_HEIGHT"],"mappings":";;;;AAEA,IAAMA,4BAAoC,GAAGC,IAAI,CAAC,GAAG,CAAC,CAAA;AAC/C,IAAMC,kBAAkB,GAAG,EAAC;IAEtBC,UAAU,GAAGF,IAAI,CAAC,IAAI,EAAC;IACvBG,OAAO,GAAGC,OAAO,CAAC,GAAG,EAAC;;AAEnC;AACA;AACA;IACaC,wBAAgC,GAAGL,IAAI,CAAC,IAAI,EAAC;;AAE1D;AACA;AACA;AACaM,IAAAA,4BAA4B,GAAGD,wBAAwB,GAAGN,6BAA4B;;AAEnG;AACA;AACA;AACaQ,IAAAA,4BAA4B,GACvCP,IAAI,CAAC,IAAI,CAAC,GAAGC,kBAAkB,GAAGF,6BAA6B;;;;"}