@razorpay/blade 11.8.2 → 11.9.0

package/build/lib/web/development/components/Form/FormLabel.js

@@ -1,5 +1,6 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import 'react';
+import { labelOptionalIndicatorTextSize, labelTextSize, labelWidth, labelLeftMarginRight, labelMarginBottom } from './formTokens.js';
 import '../VisuallyHidden/index.web.js';
 import '../Typography/index.js';
 import '../../utils/index.js';
@@ -7,8 +8,8 @@ import '../../utils/metaAttribute/index.js';
 import '../Box/BaseBox/index.js';
 import '../BladeProvider/index.js';
 import '../../utils/makeSpace/index.js';
-import '../../utils/makeSize/index.js';
 import '../../tokens/global/index.js';
+import getIn from '../../utils/lodashButBetter/get.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import useTheme from '../BladeProvider/useTheme.js';
 import { useBreakpoint } from '../../utils/useBreakpoint/useBreakpoint.js';
@@ -34,7 +35,9 @@ var FormLabel = function FormLabel(_ref) {
     accessibilityText = _ref.accessibilityText,
     children = _ref.children,
     id = _ref.id,
-    htmlFor = _ref.htmlFor;
+    htmlFor = _ref.htmlFor,
+    _ref$size = _ref.size,
+    size$1 = _ref$size === void 0 ? 'medium' : _ref$size;
   var _useTheme = useTheme(),
     theme = _useTheme.theme;
   var _useBreakpoint = useBreakpoint({
@@ -48,7 +51,7 @@ var FormLabel = function FormLabel(_ref) {
   if (necessityIndicator === 'optional') {
     necessityLabel = /*#__PURE__*/jsx(Text, {
       variant: "caption",
-      size: "small",
+      size: labelOptionalIndicatorTextSize[size$1],
       color: "surface.text.gray.muted",
       children: "(optional)"
     });
@@ -77,7 +80,7 @@ var FormLabel = function FormLabel(_ref) {
     maxHeight: makeSpace(size[36]),
     children: [/*#__PURE__*/jsx(Text, {
       variant: "body",
-      size: isLabelLeftPositioned ? 'medium' : 'small',
+      size: labelTextSize[isLabelLeftPositioned ? 'left' : 'top'][size$1],
       color: "surface.text.gray.subtle",
       truncateAfterLines: 2,
       weight: "semibold",
@@ -96,20 +99,20 @@ var FormLabel = function FormLabel(_ref) {
   }
   var Component = as;
   // only set 120px label when device is desktop
-  var width = isLabelLeftPositioned && isDesktop ? makeSize(size[120]) : 'auto';
+  var width = isLabelLeftPositioned && isDesktop ? makeSize(labelWidth[size$1]) : 'auto';
   return /*#__PURE__*/jsx(Component, _objectSpread(_objectSpread({
     htmlFor: htmlFor,
     style: {
       width: width,
       flexShrink: 0,
-      marginRight: makeSpace(theme.spacing[5])
+      marginRight: isLabelLeftPositioned ? makeSpace(getIn(theme, labelLeftMarginRight[size$1])) : makeSpace(getIn(theme, 'spacing.0'))
     },
     id: id
   }, metaAttribute({
     name: MetaConstants.FormLabel
   })), {}, {
     children: /*#__PURE__*/jsx(BaseBox, {
-      marginBottom: isLabelLeftPositioned ? 'spacing.0' : 'spacing.2',
+      marginBottom: isLabelLeftPositioned ? 'spacing.0' : labelMarginBottom[size$1],
       children: textNode
     })
   }));

package/build/lib/web/development/components/Form/FormLabel.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormLabel.js","sources":["../../../../../../src/components/Form/FormLabel.tsx"],"sourcesContent":["import React from 'react';\nimport { VisuallyHidden } from '~components/VisuallyHidden';\nimport { Text } from '~components/Typography';\nimport { getPlatformType, useBreakpoint } from '~utils';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport BaseBox from '~components/Box/BaseBox';\nimport { useTheme } from '~components/BladeProvider';\nimport { makeSpace } from '~utils/makeSpace';\nimport { makeSize } from '~utils/makeSize';\nimport { size } from '~tokens/global';\n\ntype CommonProps = {\n  as: 'span' | 'label';\n  position?: 'top' | 'left';\n  necessityIndicator?: 'required' | 'optional' | 'none';\n  accessibilityText?: string;\n  children: string | undefined;\n  id?: string;\n};\n\ntype LabelProps = CommonProps & {\n  htmlFor: string;\n  as: 'label';\n};\n\ntype SpanProps = CommonProps & {\n  as: 'span';\n  htmlFor?: undefined;\n};\n\ntype FormLabelProps = LabelProps | SpanProps;\n\nexport type FormInputLabelProps = {\n  /**\n   * Label to be shown for the input field\n   */\n  label?: string;\n  /**\n   * Desktop only prop. Default value on mobile will be `top`\n   */\n  labelPosition?: 'left' | 'top';\n  /**\n   * Displays `(optional)` when `optional` is passed or `*` when `required` is passed\n   */\n  necessityIndicator?: 'required' | 'optional' | 'none';\n};\n\nconst FormLabel = ({\n  as = 'span',\n  position = 'top',\n  necessityIndicator = 'none',\n  accessibilityText,\n  children,\n  id,\n  htmlFor,\n}: FormLabelProps): React.ReactElement => {\n  const { theme } = useTheme();\n  const { matchedDeviceType } = useBreakpoint({ breakpoints: theme.breakpoints });\n  const isDesktop = matchedDeviceType === 'desktop';\n  const isReactNative = getPlatformType() === 'react-native';\n\n  let necessityLabel: React.ReactNode = null;\n\n  const isLabelLeftPositioned = position === 'left' && isDesktop;\n\n  if (necessityIndicator === 'optional') {\n    necessityLabel = (\n      <Text variant=\"caption\" size=\"small\" color=\"surface.text.gray.muted\">\n        (optional)\n      </Text>\n    );\n  }\n  if (necessityIndicator === 'required') {\n    necessityLabel = (\n      <Text\n        variant=\"body\"\n        size={isLabelLeftPositioned ? 'medium' : 'small'}\n        color=\"feedback.text.negative.intense\"\n      >\n        *\n      </Text>\n    );\n  }\n\n  const computedAccessibilityNode = (\n    <VisuallyHidden>\n      {necessityIndicator !== 'none' && <Text>{necessityIndicator}</Text>}\n      <Text>{accessibilityText}</Text>\n    </VisuallyHidden>\n  );\n\n  const textNode = (\n    <BaseBox\n      gap={necessityIndicator === 'optional' ? 'spacing.2' : 'spacing.0'}\n      display=\"flex\"\n      flexDirection=\"row\"\n      alignItems=\"center\"\n      flexWrap=\"wrap\"\n      maxHeight={makeSpace(size[36])}\n    >\n      <Text\n        variant=\"body\"\n        size={isLabelLeftPositioned ? 'medium' : 'small'}\n        color=\"surface.text.gray.subtle\"\n        truncateAfterLines={2}\n        weight=\"semibold\"\n        wordBreak={isLabelLeftPositioned ? 'break-word' : undefined}\n      >\n        {children}\n      </Text>\n      {computedAccessibilityNode}\n      {/* TODO: Hide from screen readers to prevent double announcement */}\n      {necessityLabel}\n    </BaseBox>\n  );\n\n  // What harm can it do?\n  if (isReactNative) {\n    return (\n      <BaseBox marginRight=\"spacing.5\" marginBottom=\"spacing.2\">\n        {textNode}\n      </BaseBox>\n    );\n  }\n\n  const Component = as;\n  // only set 120px label when device is desktop\n  const width = isLabelLeftPositioned && isDesktop ? makeSize(size[120]) : 'auto';\n\n  return (\n    <Component\n      htmlFor={htmlFor}\n      style={{\n        width,\n        flexShrink: 0,\n        marginRight: makeSpace(theme.spacing[5]),\n      }}\n      id={id}\n      {...metaAttribute({ name: MetaConstants.FormLabel })}\n    >\n      <BaseBox marginBottom={isLabelLeftPositioned ? 'spacing.0' : 'spacing.2'}>{textNode}</BaseBox>\n    </Component>\n  );\n};\n\nexport { FormLabel };\n"],"names":["FormLabel","_ref","_ref$as","as","_ref$position","position","_ref$necessityIndicat","necessityIndicator","accessibilityText","children","id","htmlFor","_useTheme","useTheme","theme","_useBreakpoint","useBreakpoint","breakpoints","matchedDeviceType","isDesktop","isReactNative","getPlatformType","necessityLabel","isLabelLeftPositioned","_jsx","Text","variant","size","color","computedAccessibilityNode","_jsxs","VisuallyHidden","textNode","BaseBox","gap","display","flexDirection","alignItems","flexWrap","maxHeight","makeSpace","truncateAfterLines","weight","wordBreak","undefined","marginRight","marginBottom","Component","width","makeSize","_objectSpread","style","flexShrink","spacing","metaAttribute","name","MetaConstants"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AA+CA,IAAMA,SAAS,GAAG,SAAZA,SAASA,CAAAC,IAAA,EAQ2B;AAAA,EAAA,IAAAC,OAAA,GAAAD,IAAA,CAPxCE,EAAE;AAAFA,IAAAA,EAAE,GAAAD,OAAA,KAAG,KAAA,CAAA,GAAA,MAAM,GAAAA,OAAA;IAAAE,aAAA,GAAAH,IAAA,CACXI,QAAQ;AAARA,IAAAA,QAAQ,GAAAD,aAAA,KAAG,KAAA,CAAA,GAAA,KAAK,GAAAA,aAAA;IAAAE,qBAAA,GAAAL,IAAA,CAChBM,kBAAkB;AAAlBA,IAAAA,kBAAkB,GAAAD,qBAAA,KAAG,KAAA,CAAA,GAAA,MAAM,GAAAA,qBAAA;IAC3BE,iBAAiB,GAAAP,IAAA,CAAjBO,iBAAiB;IACjBC,QAAQ,GAAAR,IAAA,CAARQ,QAAQ;IACRC,EAAE,GAAAT,IAAA,CAAFS,EAAE;IACFC,OAAO,GAAAV,IAAA,CAAPU,OAAO,CAAA;AAEP,EAAA,IAAAC,SAAA,GAAkBC,QAAQ,EAAE;IAApBC,KAAK,GAAAF,SAAA,CAALE,KAAK,CAAA;EACb,IAAAC,cAAA,GAA8BC,aAAa,CAAC;MAAEC,WAAW,EAAEH,KAAK,CAACG,WAAAA;AAAY,KAAC,CAAC;IAAvEC,iBAAiB,GAAAH,cAAA,CAAjBG,iBAAiB,CAAA;AACzB,EAAA,IAAMC,SAAS,GAAGD,iBAAiB,KAAK,SAAS,CAAA;AACjD,EAAA,IAAME,aAAa,GAAGC,eAAe,EAAE,KAAK,cAAc,CAAA;EAE1D,IAAIC,cAA+B,GAAG,IAAI,CAAA;AAE1C,EAAA,IAAMC,qBAAqB,GAAGlB,QAAQ,KAAK,MAAM,IAAIc,SAAS,CAAA;EAE9D,IAAIZ,kBAAkB,KAAK,UAAU,EAAE;IACrCe,cAAc,gBACZE,GAAA,CAACC,IAAI,EAAA;AAACC,MAAAA,OAAO,EAAC,SAAS;AAACC,MAAAA,IAAI,EAAC,OAAO;AAACC,MAAAA,KAAK,EAAC,yBAAyB;AAAAnB,MAAAA,QAAA,EAAC,YAAA;AAErE,KAAM,CACP,CAAA;AACH,GAAA;EACA,IAAIF,kBAAkB,KAAK,UAAU,EAAE;IACrCe,cAAc,gBACZE,GAAA,CAACC,IAAI,EAAA;AACHC,MAAAA,OAAO,EAAC,MAAM;AACdC,MAAAA,IAAI,EAAEJ,qBAAqB,GAAG,QAAQ,GAAG,OAAQ;AACjDK,MAAAA,KAAK,EAAC,gCAAgC;AAAAnB,MAAAA,QAAA,EACvC,GAAA;AAED,KAAM,CACP,CAAA;AACH,GAAA;AAEA,EAAA,IAAMoB,yBAAyB,gBAC7BC,IAAA,CAACC,cAAc,EAAA;AAAAtB,IAAAA,QAAA,GACZF,kBAAkB,KAAK,MAAM,iBAAIiB,GAAA,CAACC,IAAI,EAAA;AAAAhB,MAAAA,QAAA,EAAEF,kBAAAA;AAAkB,KAAO,CAAC,eACnEiB,GAAA,CAACC,IAAI,EAAA;AAAAhB,MAAAA,QAAA,EAAED,iBAAAA;AAAiB,KAAO,CAAC,CAAA;AAAA,GAClB,CACjB,CAAA;AAED,EAAA,IAAMwB,QAAQ,gBACZF,IAAA,CAACG,OAAO,EAAA;AACNC,IAAAA,GAAG,EAAE3B,kBAAkB,KAAK,UAAU,GAAG,WAAW,GAAG,WAAY;AACnE4B,IAAAA,OAAO,EAAC,MAAM;AACdC,IAAAA,aAAa,EAAC,KAAK;AACnBC,IAAAA,UAAU,EAAC,QAAQ;AACnBC,IAAAA,QAAQ,EAAC,MAAM;AACfC,IAAAA,SAAS,EAAEC,SAAS,CAACb,IAAI,CAAC,EAAE,CAAC,CAAE;IAAAlB,QAAA,EAAA,cAE/Be,GAAA,CAACC,IAAI,EAAA;AACHC,MAAAA,OAAO,EAAC,MAAM;AACdC,MAAAA,IAAI,EAAEJ,qBAAqB,GAAG,QAAQ,GAAG,OAAQ;AACjDK,MAAAA,KAAK,EAAC,0BAA0B;AAChCa,MAAAA,kBAAkB,EAAE,CAAE;AACtBC,MAAAA,MAAM,EAAC,UAAU;AACjBC,MAAAA,SAAS,EAAEpB,qBAAqB,GAAG,YAAY,GAAGqB,SAAU;AAAAnC,MAAAA,QAAA,EAE3DA,QAAAA;AAAQ,KACL,CAAC,EACNoB,yBAAyB,EAEzBP,cAAc,CAAA;AAAA,GACR,CACV,CAAA;;AAED;AACA,EAAA,IAAIF,aAAa,EAAE;IACjB,oBACEI,GAAA,CAACS,OAAO,EAAA;AAACY,MAAAA,WAAW,EAAC,WAAW;AAACC,MAAAA,YAAY,EAAC,WAAW;AAAArC,MAAAA,QAAA,EACtDuB,QAAAA;AAAQ,KACF,CAAC,CAAA;AAEd,GAAA;EAEA,IAAMe,SAAS,GAAG5C,EAAE,CAAA;AACpB;AACA,EAAA,IAAM6C,KAAK,GAAGzB,qBAAqB,IAAIJ,SAAS,GAAG8B,QAAQ,CAACtB,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,MAAM,CAAA;AAE/E,EAAA,oBACEH,GAAA,CAACuB,SAAS,EAAAG,aAAA,CAAAA,aAAA,CAAA;AACRvC,IAAAA,OAAO,EAAEA,OAAQ;AACjBwC,IAAAA,KAAK,EAAE;AACLH,MAAAA,KAAK,EAALA,KAAK;AACLI,MAAAA,UAAU,EAAE,CAAC;MACbP,WAAW,EAAEL,SAAS,CAAC1B,KAAK,CAACuC,OAAO,CAAC,CAAC,CAAC,CAAA;KACvC;AACF3C,IAAAA,EAAE,EAAEA,EAAAA;AAAG,GAAA,EACH4C,aAAa,CAAC;IAAEC,IAAI,EAAEC,aAAa,CAACxD,SAAAA;AAAU,GAAC,CAAC,CAAA,EAAA,EAAA,EAAA;IAAAS,QAAA,eAEpDe,GAAA,CAACS,OAAO,EAAA;AAACa,MAAAA,YAAY,EAAEvB,qBAAqB,GAAG,WAAW,GAAG,WAAY;AAAAd,MAAAA,QAAA,EAAEuB,QAAAA;KAAkB,CAAA;AAAC,GAAA,CACrF,CAAC,CAAA;AAEhB;;;;"}
+{"version":3,"file":"FormLabel.js","sources":["../../../../../../src/components/Form/FormLabel.tsx"],"sourcesContent":["import React from 'react';\nimport {\n  labelLeftMarginRight,\n  labelMarginBottom,\n  labelOptionalIndicatorTextSize,\n  labelTextSize,\n  labelWidth,\n} from './formTokens';\nimport { VisuallyHidden } from '~components/VisuallyHidden';\nimport { Text } from '~components/Typography';\nimport { getPlatformType, makeSize, useBreakpoint } from '~utils';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport BaseBox from '~components/Box/BaseBox';\nimport { useTheme } from '~components/BladeProvider';\nimport { makeSpace } from '~utils/makeSpace';\nimport { size as sizeToken } from '~tokens/global';\nimport getIn from '~utils/lodashButBetter/get';\n\ntype CommonProps = {\n  as: 'span' | 'label';\n  position?: 'top' | 'left';\n  necessityIndicator?: 'required' | 'optional' | 'none';\n  accessibilityText?: string;\n  children: string | undefined;\n  id?: string;\n  /**\n   * Sets the size of the label\n   * @default medium\n   */\n  size?: 'small' | 'medium' | 'large';\n};\n\ntype LabelProps = CommonProps & {\n  htmlFor: string;\n  as: 'label';\n};\n\ntype SpanProps = CommonProps & {\n  as: 'span';\n  htmlFor?: undefined;\n};\n\ntype FormLabelProps = LabelProps | SpanProps;\n\nexport type FormInputLabelProps = {\n  /**\n   * Label to be shown for the input field\n   */\n  label?: string;\n  /**\n   * Desktop only prop. Default value on mobile will be `top`\n   */\n  labelPosition?: 'left' | 'top';\n  /**\n   * Displays `(optional)` when `optional` is passed or `*` when `required` is passed\n   */\n  necessityIndicator?: 'required' | 'optional' | 'none';\n};\n\nconst FormLabel = ({\n  as = 'span',\n  position = 'top',\n  necessityIndicator = 'none',\n  accessibilityText,\n  children,\n  id,\n  htmlFor,\n  size = 'medium',\n}: FormLabelProps): React.ReactElement => {\n  const { theme } = useTheme();\n  const { matchedDeviceType } = useBreakpoint({ breakpoints: theme.breakpoints });\n  const isDesktop = matchedDeviceType === 'desktop';\n  const isReactNative = getPlatformType() === 'react-native';\n\n  let necessityLabel: React.ReactNode = null;\n\n  const isLabelLeftPositioned = position === 'left' && isDesktop;\n\n  if (necessityIndicator === 'optional') {\n    necessityLabel = (\n      <Text\n        variant=\"caption\"\n        size={labelOptionalIndicatorTextSize[size]}\n        color=\"surface.text.gray.muted\"\n      >\n        (optional)\n      </Text>\n    );\n  }\n  if (necessityIndicator === 'required') {\n    necessityLabel = (\n      <Text\n        variant=\"body\"\n        size={isLabelLeftPositioned ? 'medium' : 'small'}\n        color=\"feedback.text.negative.intense\"\n      >\n        *\n      </Text>\n    );\n  }\n\n  const computedAccessibilityNode = (\n    <VisuallyHidden>\n      {necessityIndicator !== 'none' && <Text>{necessityIndicator}</Text>}\n      <Text>{accessibilityText}</Text>\n    </VisuallyHidden>\n  );\n\n  const textNode = (\n    <BaseBox\n      gap={necessityIndicator === 'optional' ? 'spacing.2' : 'spacing.0'}\n      display=\"flex\"\n      flexDirection=\"row\"\n      alignItems=\"center\"\n      flexWrap=\"wrap\"\n      maxHeight={makeSpace(sizeToken[36])}\n    >\n      <Text\n        variant=\"body\"\n        size={labelTextSize[isLabelLeftPositioned ? 'left' : 'top'][size]}\n        color=\"surface.text.gray.subtle\"\n        truncateAfterLines={2}\n        weight=\"semibold\"\n        wordBreak={isLabelLeftPositioned ? 'break-word' : undefined}\n      >\n        {children}\n      </Text>\n      {computedAccessibilityNode}\n      {/* TODO: Hide from screen readers to prevent double announcement */}\n      {necessityLabel}\n    </BaseBox>\n  );\n\n  // What harm can it do?\n  if (isReactNative) {\n    return (\n      <BaseBox marginRight=\"spacing.5\" marginBottom=\"spacing.2\">\n        {textNode}\n      </BaseBox>\n    );\n  }\n\n  const Component = as;\n  // only set 120px label when device is desktop\n  const width = isLabelLeftPositioned && isDesktop ? makeSize(labelWidth[size]) : 'auto';\n\n  return (\n    <Component\n      htmlFor={htmlFor}\n      style={{\n        width,\n        flexShrink: 0,\n        marginRight: isLabelLeftPositioned\n          ? makeSpace(getIn(theme, labelLeftMarginRight[size]))\n          : makeSpace(getIn(theme, 'spacing.0')),\n      }}\n      id={id}\n      {...metaAttribute({ name: MetaConstants.FormLabel })}\n    >\n      <BaseBox marginBottom={isLabelLeftPositioned ? 'spacing.0' : labelMarginBottom[size]}>\n        {textNode}\n      </BaseBox>\n    </Component>\n  );\n};\n\nexport { FormLabel };\n"],"names":["FormLabel","_ref","_ref$as","as","_ref$position","position","_ref$necessityIndicat","necessityIndicator","accessibilityText","children","id","htmlFor","_ref$size","size","_useTheme","useTheme","theme","_useBreakpoint","useBreakpoint","breakpoints","matchedDeviceType","isDesktop","isReactNative","getPlatformType","necessityLabel","isLabelLeftPositioned","_jsx","Text","variant","labelOptionalIndicatorTextSize","color","computedAccessibilityNode","_jsxs","VisuallyHidden","textNode","BaseBox","gap","display","flexDirection","alignItems","flexWrap","maxHeight","makeSpace","sizeToken","labelTextSize","truncateAfterLines","weight","wordBreak","undefined","marginRight","marginBottom","Component","width","makeSize","labelWidth","_objectSpread","style","flexShrink","getIn","labelLeftMarginRight","metaAttribute","name","MetaConstants","labelMarginBottom"],"mappings":"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"}

package/build/lib/web/development/components/Form/Selector/SelectorSupportText.js

@@ -10,14 +10,20 @@ import { Text } from '../../Typography/Text/Text.js';
 var SelectorSupportText = function SelectorSupportText(_ref) {
   var children = _ref.children,
     id = _ref.id,
-    isNegative = _ref.isNegative;
+    isNegative = _ref.isNegative,
+    size = _ref.size;
   var isReactNative = getPlatformType() === 'react-native';
+  var sizeMapping = {
+    small: 'small',
+    medium: 'small',
+    large: 'medium'
+  };
   return /*#__PURE__*/jsx(Box, {
     id: id,
     display: isReactNative ? undefined : castWebType('contents'),
     children: /*#__PURE__*/jsx(Text, {
       variant: "caption",
-      size: "small",
+      size: sizeMapping[size],
       as: isReactNative ? undefined : 'span',
       color: isNegative ? 'feedback.text.negative.intense' : 'surface.text.gray.muted',
       children: children

package/build/lib/web/development/components/Form/Selector/SelectorSupportText.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectorSupportText.js","sources":["../../../../../../../src/components/Form/Selector/SelectorSupportText.tsx"],"sourcesContent":["import { Box } from '~components/Box';\nimport { Text } from '~components/Typography/Text';\nimport { castWebType, getPlatformType } from '~utils';\n\nconst SelectorSupportText = ({\n  children,\n  id,\n  isNegative,\n}: {\n  children: React.ReactNode;\n  id?: string;\n  isNegative?: boolean;\n}): React.ReactElement => {\n  const isReactNative = getPlatformType() === 'react-native';\n\n  return (\n    <Box id={id} display={isReactNative ? undefined : castWebType('contents')}>\n      <Text\n        variant=\"caption\"\n        size=\"small\"\n        as={isReactNative ? undefined : 'span'}\n        color={isNegative ? 'feedback.text.negative.intense' : 'surface.text.gray.muted'}\n      >\n        {children}\n      </Text>\n    </Box>\n  );\n};\n\nexport { SelectorSupportText };\n"],"names":["SelectorSupportText","_ref","children","id","isNegative","isReactNative","getPlatformType","_jsx","Box","display","undefined","castWebType","Text","variant","size","as","color"],"mappings":";;;;;;;;;AAIA,IAAMA,mBAAmB,GAAG,SAAtBA,mBAAmBA,CAAAC,IAAA,EAQC;AAAA,EAAA,IAPxBC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IACRC,EAAE,GAAAF,IAAA,CAAFE,EAAE;IACFC,UAAU,GAAAH,IAAA,CAAVG,UAAU,CAAA;AAMV,EAAA,IAAMC,aAAa,GAAGC,eAAe,EAAE,KAAK,cAAc,CAAA;EAE1D,oBACEC,GAAA,CAACC,GAAG,EAAA;AAACL,IAAAA,EAAE,EAAEA,EAAG;IAACM,OAAO,EAAEJ,aAAa,GAAGK,SAAS,GAAGC,WAAW,CAAC,UAAU,CAAE;IAAAT,QAAA,eACxEK,GAAA,CAACK,IAAI,EAAA;AACHC,MAAAA,OAAO,EAAC,SAAS;AACjBC,MAAAA,IAAI,EAAC,OAAO;AACZC,MAAAA,EAAE,EAAEV,aAAa,GAAGK,SAAS,GAAG,MAAO;AACvCM,MAAAA,KAAK,EAAEZ,UAAU,GAAG,gCAAgC,GAAG,yBAA0B;AAAAF,MAAAA,QAAA,EAEhFA,QAAAA;KACG,CAAA;AAAC,GACJ,CAAC,CAAA;AAEV;;;;"}
+{"version":3,"file":"SelectorSupportText.js","sources":["../../../../../../../src/components/Form/Selector/SelectorSupportText.tsx"],"sourcesContent":["import { Box } from '~components/Box';\nimport { Text } from '~components/Typography/Text';\nimport { castWebType, getPlatformType } from '~utils';\n\nconst SelectorSupportText = ({\n  children,\n  id,\n  isNegative,\n  size,\n}: {\n  children: React.ReactNode;\n  id?: string;\n  isNegative?: boolean;\n  size: 'small' | 'medium' | 'large';\n}): React.ReactElement => {\n  const isReactNative = getPlatformType() === 'react-native';\n  const sizeMapping = {\n    small: 'small',\n    medium: 'small',\n    large: 'medium',\n  } as const;\n\n  return (\n    <Box id={id} display={isReactNative ? undefined : castWebType('contents')}>\n      <Text\n        variant=\"caption\"\n        size={sizeMapping[size]}\n        as={isReactNative ? undefined : 'span'}\n        color={isNegative ? 'feedback.text.negative.intense' : 'surface.text.gray.muted'}\n      >\n        {children}\n      </Text>\n    </Box>\n  );\n};\n\nexport { SelectorSupportText };\n"],"names":["SelectorSupportText","_ref","children","id","isNegative","size","isReactNative","getPlatformType","sizeMapping","small","medium","large","_jsx","Box","display","undefined","castWebType","Text","variant","as","color"],"mappings":";;;;;;;;;AAIA,IAAMA,mBAAmB,GAAG,SAAtBA,mBAAmBA,CAAAC,IAAA,EAUC;AAAA,EAAA,IATxBC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IACRC,EAAE,GAAAF,IAAA,CAAFE,EAAE;IACFC,UAAU,GAAAH,IAAA,CAAVG,UAAU;IACVC,IAAI,GAAAJ,IAAA,CAAJI,IAAI,CAAA;AAOJ,EAAA,IAAMC,aAAa,GAAGC,eAAe,EAAE,KAAK,cAAc,CAAA;AAC1D,EAAA,IAAMC,WAAW,GAAG;AAClBC,IAAAA,KAAK,EAAE,OAAO;AACdC,IAAAA,MAAM,EAAE,OAAO;AACfC,IAAAA,KAAK,EAAE,QAAA;GACC,CAAA;EAEV,oBACEC,GAAA,CAACC,GAAG,EAAA;AAACV,IAAAA,EAAE,EAAEA,EAAG;IAACW,OAAO,EAAER,aAAa,GAAGS,SAAS,GAAGC,WAAW,CAAC,UAAU,CAAE;IAAAd,QAAA,eACxEU,GAAA,CAACK,IAAI,EAAA;AACHC,MAAAA,OAAO,EAAC,SAAS;AACjBb,MAAAA,IAAI,EAAEG,WAAW,CAACH,IAAI,CAAE;AACxBc,MAAAA,EAAE,EAAEb,aAAa,GAAGS,SAAS,GAAG,MAAO;AACvCK,MAAAA,KAAK,EAAEhB,UAAU,GAAG,gCAAgC,GAAG,yBAA0B;AAAAF,MAAAA,QAAA,EAEhFA,QAAAA;KACG,CAAA;AAAC,GACJ,CAAC,CAAA;AAEV;;;;"}

package/build/lib/web/development/components/Form/Selector/SelectorTitle.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectorTitle.js","sources":["../../../../../../../src/components/Form/Selector/SelectorTitle.tsx"],"sourcesContent":["import BaseBox from '~components/Box/BaseBox';\nimport { Text } from '~components/Typography/Text';\n\nconst SelectorTitle = ({\n  children,\n  isDisabled,\n  size = 'medium',\n}: {\n  children: React.ReactNode;\n  isDisabled?: boolean;\n  size: 'small' | 'medium';\n}): React.ReactElement => {\n  return (\n    <>\n      <BaseBox marginLeft=\"spacing.2\" />\n      <Text\n        size={size}\n        color={isDisabled ? 'surface.text.gray.disabled' : 'surface.text.gray.subtle'}\n      >\n        {children}\n      </Text>\n    </>\n  );\n};\n\nexport { SelectorTitle };\n"],"names":["SelectorTitle","_ref","children","isDisabled","_ref$size","size","_jsxs","_Fragment","_jsx","BaseBox","marginLeft","Text","color"],"mappings":";;;;;;AAGA,IAAMA,aAAa,GAAG,SAAhBA,aAAaA,CAAAC,IAAA,EAQO;AAAA,EAAA,IAPxBC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IACRC,UAAU,GAAAF,IAAA,CAAVE,UAAU;IAAAC,SAAA,GAAAH,IAAA,CACVI,IAAI;AAAJA,IAAAA,IAAI,GAAAD,SAAA,KAAG,KAAA,CAAA,GAAA,QAAQ,GAAAA,SAAA,CAAA;EAMf,oBACEE,IAAA,CAAAC,QAAA,EAAA;IAAAL,QAAA,EAAA,cACEM,GAAA,CAACC,OAAO,EAAA;AAACC,MAAAA,UAAU,EAAC,WAAA;AAAW,KAAE,CAAC,eAClCF,GAAA,CAACG,IAAI,EAAA;AACHN,MAAAA,IAAI,EAAEA,IAAK;AACXO,MAAAA,KAAK,EAAET,UAAU,GAAG,4BAA4B,GAAG,0BAA2B;AAAAD,MAAAA,QAAA,EAE7EA,QAAAA;AAAQ,KACL,CAAC,CAAA;AAAA,GACP,CAAC,CAAA;AAEP;;;;"}
+{"version":3,"file":"SelectorTitle.js","sources":["../../../../../../../src/components/Form/Selector/SelectorTitle.tsx"],"sourcesContent":["import BaseBox from '~components/Box/BaseBox';\nimport { Text } from '~components/Typography/Text';\n\nconst SelectorTitle = ({\n  children,\n  isDisabled,\n  size = 'medium',\n}: {\n  children: React.ReactNode;\n  isDisabled?: boolean;\n  size: 'small' | 'medium' | 'large';\n}): React.ReactElement => {\n  return (\n    <>\n      <BaseBox marginLeft=\"spacing.2\" />\n      <Text\n        size={size}\n        color={isDisabled ? 'surface.text.gray.disabled' : 'surface.text.gray.subtle'}\n      >\n        {children}\n      </Text>\n    </>\n  );\n};\n\nexport { SelectorTitle };\n"],"names":["SelectorTitle","_ref","children","isDisabled","_ref$size","size","_jsxs","_Fragment","_jsx","BaseBox","marginLeft","Text","color"],"mappings":";;;;;;AAGA,IAAMA,aAAa,GAAG,SAAhBA,aAAaA,CAAAC,IAAA,EAQO;AAAA,EAAA,IAPxBC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IACRC,UAAU,GAAAF,IAAA,CAAVE,UAAU;IAAAC,SAAA,GAAAH,IAAA,CACVI,IAAI;AAAJA,IAAAA,IAAI,GAAAD,SAAA,KAAG,KAAA,CAAA,GAAA,QAAQ,GAAAA,SAAA,CAAA;EAMf,oBACEE,IAAA,CAAAC,QAAA,EAAA;IAAAL,QAAA,EAAA,cACEM,GAAA,CAACC,OAAO,EAAA;AAACC,MAAAA,UAAU,EAAC,WAAA;AAAW,KAAE,CAAC,eAClCF,GAAA,CAACG,IAAI,EAAA;AACHN,MAAAA,IAAI,EAAEA,IAAK;AACXO,MAAAA,KAAK,EAAET,UAAU,GAAG,4BAA4B,GAAG,0BAA2B;AAAAD,MAAAA,QAAA,EAE7EA,QAAAA;AAAQ,KACL,CAAC,CAAA;AAAA,GACP,CAAC,CAAA;AAEP;;;;"}

package/build/lib/web/development/components/Form/formTokens.js

@@ -0,0 +1,53 @@
+import '../../tokens/global/index.js';
+import { size } from '../../tokens/global/size.js';
+
+var labelTextSize = {
+  top: {
+    small: 'small',
+    medium: 'small',
+    large: 'medium'
+  },
+  left: {
+    small: 'small',
+    medium: 'medium',
+    large: 'large'
+  }
+};
+var labelOptionalIndicatorTextSize = {
+  small: 'small',
+  medium: 'small',
+  large: 'medium'
+};
+var hintTextSize = {
+  small: 'small',
+  medium: 'small',
+  large: 'medium'
+};
+var hintIconSize = {
+  small: 'small',
+  medium: 'small',
+  large: 'medium'
+};
+var hintMarginTop = {
+  small: 'spacing.2',
+  medium: 'spacing.2',
+  large: 'spacing.3'
+};
+var labelMarginBottom = {
+  small: 'spacing.2',
+  medium: 'spacing.2',
+  large: 'spacing.3'
+};
+var labelWidth = {
+  small: size[120],
+  medium: size[120],
+  large: size[176]
+};
+var labelLeftMarginRight = {
+  small: 'spacing.3',
+  medium: 'spacing.4',
+  large: 'spacing.5'
+};
+
+export { hintIconSize, hintMarginTop, hintTextSize, labelLeftMarginRight, labelMarginBottom, labelOptionalIndicatorTextSize, labelTextSize, labelWidth };
+//# sourceMappingURL=formTokens.js.map

package/build/lib/web/development/components/Form/formTokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"formTokens.js","sources":["../../../../../../src/components/Form/formTokens.ts"],"sourcesContent":["import { size } from '~tokens/global';\n\nconst labelTextSize = {\n  top: {\n    small: 'small',\n    medium: 'small',\n    large: 'medium',\n  },\n  left: {\n    small: 'small',\n    medium: 'medium',\n    large: 'large',\n  },\n} as const;\n\nconst labelOptionalIndicatorTextSize = {\n  small: 'small',\n  medium: 'small',\n  large: 'medium',\n} as const;\n\nconst hintTextSize = {\n  small: 'small',\n  medium: 'small',\n  large: 'medium',\n} as const;\n\nconst hintIconSize = {\n  small: 'small',\n  medium: 'small',\n  large: 'medium',\n} as const;\n\nconst hintMarginTop = {\n  small: 'spacing.2',\n  medium: 'spacing.2',\n  large: 'spacing.3',\n} as const;\n\nconst labelMarginBottom = {\n  small: 'spacing.2',\n  medium: 'spacing.2',\n  large: 'spacing.3',\n} as const;\n\nconst labelWidth = {\n  small: size[120],\n  medium: size[120],\n  large: size[176],\n} as const;\n\nconst labelLeftMarginRight = {\n  small: 'spacing.3',\n  medium: 'spacing.4',\n  large: 'spacing.5',\n} as const;\n\nexport {\n  labelTextSize,\n  labelOptionalIndicatorTextSize,\n  hintTextSize,\n  hintIconSize,\n  hintMarginTop,\n  labelMarginBottom,\n  labelWidth,\n  labelLeftMarginRight,\n};\n"],"names":["labelTextSize","top","small","medium","large","left","labelOptionalIndicatorTextSize","hintTextSize","hintIconSize","hintMarginTop","labelMarginBottom","labelWidth","size","labelLeftMarginRight"],"mappings":";;;AAEA,IAAMA,aAAa,GAAG;AACpBC,EAAAA,GAAG,EAAE;AACHC,IAAAA,KAAK,EAAE,OAAO;AACdC,IAAAA,MAAM,EAAE,OAAO;AACfC,IAAAA,KAAK,EAAE,QAAA;GACR;AACDC,EAAAA,IAAI,EAAE;AACJH,IAAAA,KAAK,EAAE,OAAO;AACdC,IAAAA,MAAM,EAAE,QAAQ;AAChBC,IAAAA,KAAK,EAAE,OAAA;AACT,GAAA;AACF,EAAU;AAEV,IAAME,8BAA8B,GAAG;AACrCJ,EAAAA,KAAK,EAAE,OAAO;AACdC,EAAAA,MAAM,EAAE,OAAO;AACfC,EAAAA,KAAK,EAAE,QAAA;AACT,EAAU;AAEV,IAAMG,YAAY,GAAG;AACnBL,EAAAA,KAAK,EAAE,OAAO;AACdC,EAAAA,MAAM,EAAE,OAAO;AACfC,EAAAA,KAAK,EAAE,QAAA;AACT,EAAU;AAEV,IAAMI,YAAY,GAAG;AACnBN,EAAAA,KAAK,EAAE,OAAO;AACdC,EAAAA,MAAM,EAAE,OAAO;AACfC,EAAAA,KAAK,EAAE,QAAA;AACT,EAAU;AAEV,IAAMK,aAAa,GAAG;AACpBP,EAAAA,KAAK,EAAE,WAAW;AAClBC,EAAAA,MAAM,EAAE,WAAW;AACnBC,EAAAA,KAAK,EAAE,WAAA;AACT,EAAU;AAEV,IAAMM,iBAAiB,GAAG;AACxBR,EAAAA,KAAK,EAAE,WAAW;AAClBC,EAAAA,MAAM,EAAE,WAAW;AACnBC,EAAAA,KAAK,EAAE,WAAA;AACT,EAAU;AAEV,IAAMO,UAAU,GAAG;AACjBT,EAAAA,KAAK,EAAEU,IAAI,CAAC,GAAG,CAAC;AAChBT,EAAAA,MAAM,EAAES,IAAI,CAAC,GAAG,CAAC;EACjBR,KAAK,EAAEQ,IAAI,CAAC,GAAG,CAAA;AACjB,EAAU;AAEV,IAAMC,oBAAoB,GAAG;AAC3BX,EAAAA,KAAK,EAAE,WAAW;AAClBC,EAAAA,MAAM,EAAE,WAAW;AACnBC,EAAAA,KAAK,EAAE,WAAA;AACT;;;;"}

package/build/lib/web/development/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/development/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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"}