npm - @razorpay/blade - Versions diffs - 11.8.1 → 11.9.0 - Mend

@razorpay/blade 11.8.1 → 11.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (230) hide show

package/build/lib/web/production/components/Form/CharacterCounter/CharacterCounter.js CHANGED Viewed

@@ -1,12 +1,16 @@
+import { hintTextSize } from '../formTokens.js';
 import '../../Typography/index.js';
 import { jsxs } from 'react/jsx-runtime';
 import { Text } from '../../Typography/Text/Text.js';
 var CharacterCounter = function CharacterCounter(_ref) {
   var currentCount = _ref.currentCount,
-    maxCount = _ref.maxCount;
+    maxCount = _ref.maxCount,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'medium' : _ref$size;
   return /*#__PURE__*/jsxs(Text, {
     variant: "caption",
+    size: hintTextSize[size],
     weight: "regular",
     color: "surface.text.gray.muted",
     children: [currentCount, "/", maxCount]

package/build/lib/web/production/components/Form/CharacterCounter/CharacterCounter.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CharacterCounter.js","sources":["../../../../../../../src/components/Form/CharacterCounter/CharacterCounter.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport { Text } from '~components/Typography';\n\ntype CharacterCounterProps = {\n currentCount: number;\n maxCount: number;\n};\n\nexport const CharacterCounter = ({\n currentCount,\n maxCount,\n}: CharacterCounterProps): ReactElement => (\n <Text variant=\"caption\" weight=\"regular\" color=\"surface.text.gray.muted\">\n {currentCount}/{maxCount}\n </Text>\n);\n"],"names":["CharacterCounter","_ref","currentCount","maxCount","_jsxs","Text","variant","weight","color","children"],"mappings":"~~;;;;IAQaA~~,gBAAgB,GAAG,SAAnBA,gBAAgBA,CAAAC,IAAA,EAAA;AAAA,EAAA,IAC3BC,YAAY,GAAAD,IAAA,CAAZC,YAAY;IACZC,QAAQ,GAAAF,IAAA,CAARE,QAAQ,CAAA;EAAA,~~oBAERC~~,IAAA,CAACC,IAAI,EAAA;~~AAACC~~,IAAAA,OAAO,EAAC,SAAS;~~AAACC~~,IAAAA,MAAM,EAAC,SAAS;~~AAACC~~,IAAAA,KAAK,EAAC,yBAAyB;AAAAC,IAAAA,QAAA,~~EACrEP~~,CAAAA,YAAY,EAAC,GAAC,EAACC,QAAQ,CAAA;AAAA,GACpB,CAAC,CAAA;AAAA;;;;"}
1	+ {"version":3,"file":"CharacterCounter.js","sources":["../../../../../../../src/components/Form/CharacterCounter/CharacterCounter.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport { hintTextSize } from '../formTokens';\nimport { Text } from '~components/Typography';\n\ntype CharacterCounterProps = {\n currentCount: number;\n maxCount: number;\n size?: 'medium' \| 'large';\n};\n\nexport const CharacterCounter = ({\n currentCount,\n maxCount,\n size = 'medium',\n}: CharacterCounterProps): ReactElement => (\n <Text\n variant=\"caption\"\n size={hintTextSize[size]}\n weight=\"regular\"\n color=\"surface.text.gray.muted\"\n >\n {currentCount}/{maxCount}\n </Text>\n);\n"],"names":["CharacterCounter","_ref","currentCount","maxCount","_ref$size","size","_jsxs","Text","variant","hintTextSize","weight","color","children"],"mappings":";;;;;IAUaA,gBAAgB,GAAG,SAAnBA,gBAAgBA,CAAAC,IAAA,EAAA;AAAA,EAAA,IAC3BC,YAAY,GAAAD,IAAA,CAAZC,YAAY;IACZC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;IAAAC,SAAA,GAAAH,IAAA,CACRI,IAAI;AAAJA,IAAAA,IAAI,GAAAD,SAAA,KAAG,KAAA,CAAA,GAAA,QAAQ,GAAAA,SAAA,CAAA;EAAA,oBAEfE,IAAA,CAACC,IAAI,EAAA;AACHC,IAAAA,OAAO,EAAC,SAAS;AACjBH,IAAAA,IAAI,EAAEI,YAAY,CAACJ,IAAI,CAAE;AACzBK,IAAAA,MAAM,EAAC,SAAS;AAChBC,IAAAA,KAAK,EAAC,yBAAyB;AAAAC,IAAAA,QAAA,EAE9BV,CAAAA,YAAY,EAAC,GAAC,EAACC,QAAQ,CAAA;AAAA,GACpB,CAAC,CAAA;AAAA;;;;"}

package/build/lib/web/production/components/Form/FormHint.js CHANGED Viewed

@@ -1,5 +1,6 @@
 import 'react';
 import { FormHintWrapper } from './FormHintWrapper.web.js';
+import { hintMarginTop, hintTextSize, hintIconSize } from './formTokens.js';
 import '../Typography/Text/index.js';
 import '../Box/BaseBox/index.js';
 import '../Icons/index.js';
@@ -17,16 +18,17 @@ var HintText = function HintText(_ref) {
   var Icon = _ref.icon,
     children = _ref.children,
     id = _ref.id,
-    color = _ref.color;
+    color = _ref.color,
+    size = _ref.size;
   var isReactNative = getPlatformType() === 'react-native';
   return /*#__PURE__*/jsx(BaseBox, {
-    marginTop: "spacing.2",
+    marginTop: hintMarginTop[size],
     id: id,
     children: /*#__PURE__*/jsxs(FormHintWrapper, {
       children: [Icon ? /*#__PURE__*/jsx(Icon, {}) : null, /*#__PURE__*/jsx(Text, {
         as: isReactNative ? undefined : 'span',
         color: color,
-        size: "small",
+        size: hintTextSize[size],
         variant: "caption",
         children: children
       })]
@@ -34,35 +36,39 @@ var HintText = function HintText(_ref) {
   });
 };
 var Icons = {
-  error: function error() {
+  error: function error(_ref2) {
+    var size = _ref2.size;
     return /*#__PURE__*/jsxs(Fragment, {
       children: [/*#__PURE__*/jsx(InfoIcon, {
         color: "feedback.icon.negative.intense",
-        size: "small"
+        size: hintIconSize[size]
       }), /*#__PURE__*/jsx(BaseBox, {
         marginRight: "spacing.2"
       })]
     });
   },
-  success: function success() {
+  success: function success(_ref3) {
+    var size = _ref3.size;
     return /*#__PURE__*/jsxs(Fragment, {
       children: [/*#__PURE__*/jsx(CheckIcon, {
         color: "feedback.icon.positive.intense",
-        size: "small"
+        size: hintIconSize[size]
       }), /*#__PURE__*/jsx(BaseBox, {
         marginRight: "spacing.2"
       })]
     });
   }
 };
-var FormHint = function FormHint(_ref2) {
-  var type = _ref2.type,
-    helpText = _ref2.helpText,
-    errorText = _ref2.errorText,
-    successText = _ref2.successText,
-    helpTextId = _ref2.helpTextId,
-    errorTextId = _ref2.errorTextId,
-    successTextId = _ref2.successTextId;
+var FormHint = function FormHint(_ref4) {
+  var type = _ref4.type,
+    helpText = _ref4.helpText,
+    errorText = _ref4.errorText,
+    successText = _ref4.successText,
+    helpTextId = _ref4.helpTextId,
+    errorTextId = _ref4.errorTextId,
+    successTextId = _ref4.successTextId,
+    _ref4$size = _ref4.size,
+    size = _ref4$size === void 0 ? 'medium' : _ref4$size;
   var colors = {
     help: 'surface.text.gray.muted',
     error: 'feedback.text.negative.intense',
@@ -73,17 +79,28 @@ var FormHint = function FormHint(_ref2) {
   var showHelp = !showError && !showSuccess && helpText;
   return /*#__PURE__*/jsxs(Fragment, {
     children: [showHelp && /*#__PURE__*/jsx(HintText, {
+      size: size,
       id: helpTextId,
       color: colors.help,
       children: helpText
     }), showError && /*#__PURE__*/jsx(HintText, {
+      size: size,
       id: errorTextId,
-      icon: Icons.error,
+      icon: function icon() {
+        return Icons.error({
+          size: size
+        });
+      },
       color: colors.error,
       children: errorText
     }), showSuccess && /*#__PURE__*/jsx(HintText, {
+      size: size,
       id: successTextId,
-      icon: Icons.success,
+      icon: function icon() {
+        return Icons.success({
+          size: size
+        });
+      },
       color: colors.success,
       children: successText
     })]

package/build/lib/web/production/components/Form/FormHint.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FormHint.js","sources":["../../../../../../src/components/Form/FormHint.tsx"],"sourcesContent":["/* eslint-disable react/display-name /\nimport type { ReactElement } from 'react';\nimport React from 'react';\nimport { FormHintWrapper } from './FormHintWrapper';\nimport type { TextProps } from '~components/Typography/Text';\nimport { Text } from '~components/Typography/Text';\nimport BaseBox from '~components/Box/BaseBox';\nimport { CheckIcon, InfoIcon } from '~components/Icons';\nimport { getPlatformType } from '~utils/getPlatformType';\n\ntype HintTextProps = {\n icon?: React.ElementType;\n children: string;\n id?: string;\n color: TextProps<{ variant: 'caption' }>['color'];\n};\n\nconst HintText = ({ icon: Icon, children, id, color }: HintTextProps): ReactElement => {\n const isReactNative = getPlatformType() === 'react-native';\n\n return (\n <BaseBox marginTop~~=\"spacing.2\"~~ id={id}>\n <FormHintWrapper>\n {Icon ? <Icon /> : null}\n <Text as={isReactNative ? undefined : 'span'} color={color} size~~=\"small~~\" variant=\"caption\">\n {children}\n </Text>\n </FormHintWrapper>\n </BaseBox>\n );\n};\n\nexport type FormHintProps = {\n type: 'help' \| 'error' \| 'success';\n /\n Help text for the group\n /\n helpText?: string;\n /\n Error text for the group\n \n Renders when `state` is set to 'error'\n /\n errorText?: string;\n /\n Success text for the group\n \n Renders when `state` is set to 'success'\n /\n successText?: string;\n /\n Sets the id on errorText.\n * Needed for accessibility reasons.\n /\n errorTextId?: string;\n /\n Sets the id on helpText.\n * Needed for accessibility reasons.\n /\n helpTextId?: string;\n /\n Sets the id on successText.\n * Needed for accessibility reasons.\n */\n successTextId?: string;\n};\n\nconst Icons = {\n error: (): ReactElement => (\n <>\n <InfoIcon color=\"feedback.icon.negative.intense\" size~~=\"small\"~~ />\n <BaseBox marginRight=\"spacing.2\" />\n </>\n ),\n success: (): ReactElement => (\n <>\n <CheckIcon color=\"feedback.icon.positive.intense\" size~~=\"small\"~~ />\n <BaseBox marginRight=\"spacing.2\" />\n </>\n ),\n};\n\nconst FormHint = ({\n type,\n helpText,\n errorText,\n successText,\n helpTextId,\n errorTextId,\n successTextId,\n}: FormHintProps): React.ReactElement => {\n const colors: Record<string, TextProps<{ variant: 'caption' }>['color']> = {\n help: 'surface.text.gray.muted',\n error: 'feedback.text.negative.intense',\n success: 'feedback.text.positive.intense',\n };\n\n const showError = type === 'error' && errorText;\n const showSuccess = type === 'success' && successText;\n const showHelp = !showError && !showSuccess && helpText;\n\n return (\n <>\n {showHelp && (\n <HintText id={helpTextId} color={colors.help}>\n {helpText}\n </HintText>\n )}\n\n {showError && (\n <HintText id={errorTextId} icon={Icons.error} color={colors.error}>\n {errorText}\n </HintText>\n )}\n\n {showSuccess && (\n <HintText id={successTextId} icon={Icons.success} color={colors.success}>\n {successText}\n </HintText>\n )}\n </>\n );\n};\n\nexport { FormHint };\n"],"names":["HintText","_ref","Icon","icon","children","id","color","isReactNative","getPlatformType","_jsx","BaseBox","marginTop","_jsxs","FormHintWrapper","Text","as","undefined","~~size~~","variant","Icons","error","_Fragment","InfoIcon","marginRight","success","CheckIcon","FormHint","~~_ref2~~","type","helpText","errorText","successText","helpTextId","errorTextId","successTextId","colors","help","showError","showSuccess","showHelp"],"mappings":"~~;;;;;;;;;;;;;~~AAAA;;~~AAiBA~~,IAAMA,QAAQ,GAAG,SAAXA,QAAQA,CAAAC,IAAA,~~EAAyE~~;AAAA,EAAA,~~IAA7DC~~,IAAI,GAAAD,IAAA,CAAVE,IAAI;IAAQC,QAAQ,GAAAH,IAAA,CAARG,QAAQ;IAAEC,EAAE,GAAAJ,IAAA,CAAFI,EAAE;IAAEC,KAAK,GAAAL,IAAA,CAALK,KAAK,CAAA;~~AACjD~~,EAAA,IAAMC,aAAa,GAAGC,eAAe,EAAE,KAAK,cAAc,CAAA;EAE1D,oBACEC,GAAA,CAACC,OAAO,EAAA;AAACC,IAAAA,SAAS,~~EAAC~~,~~WAAW~~;~~AAACN~~,IAAAA,EAAE,EAAEA,EAAG;IAAAD,QAAA,~~eACpCQ~~,IAAA,CAACC,eAAe,EAAA;~~AAAAT~~,MAAAA,QAAA,EACbF,CAAAA,IAAI,~~gBAAGO~~,GAAA,~~CAACP~~,IAAI,EAAE,EAAA,CAAC,GAAG,IAAI,~~eACvBO~~,GAAA,~~CAACK~~,IAAI,EAAA;~~AAACC~~,QAAAA,EAAE,~~EAAER~~,aAAa,~~GAAGS~~,SAAS,GAAG,MAAO;~~AAACV~~,QAAAA,KAAK,EAAEA,KAAM;~~AAACW~~,QAAAA,IAAI,~~EAAC~~,~~OAAO~~;~~AAACC~~,QAAAA,OAAO,EAAC,SAAS;~~AAAAd~~,QAAAA,QAAA,~~EACvFA~~,QAAAA;AAAQ,OACL,CAAC,CAAA;KACQ,CAAA;AAAC,GACX,CAAC,CAAA;AAEd,CAAC,CAAA;~~AAqCD~~,~~IAAMe~~,KAAK,GAAG;EACZC,KAAK,EAAE,SAAAA,KAAA,~~GAAA~~;IAAA,~~oBACLR~~,IAAA,~~CAAAS~~,QAAA,EAAA;~~MAAAjB~~,QAAA,EAAA,~~cACEK~~,GAAA,~~CAACa~~,QAAQ,EAAA;~~AAAChB~~,QAAAA,KAAK,EAAC,gCAAgC;~~AAACW~~,~~QAAAA~~,IAAI,~~EAAC,OAAA~~;~~AAAO~~,OAAE,CAAC,~~eAChER~~,GAAA,CAACC,OAAO,EAAA;~~AAACa~~,QAAAA,WAAW,EAAC,WAAA;AAAW,OAAE,CAAC,CAAA;AAAA,KACnC,CAAC,CAAA;GACJ;EACDC,OAAO,EAAE,SAAAA,~~OAAA~~,~~GAAA~~;IAAA,~~oBACPZ~~,IAAA,~~CAAAS~~,QAAA,EAAA;~~MAAAjB~~,QAAA,EAAA,~~cACEK~~,GAAA,~~CAACgB~~,SAAS,EAAA;~~AAACnB~~,QAAAA,KAAK,EAAC,gCAAgC;~~AAACW~~,~~QAAAA~~,IAAI,~~EAAC,OAAA~~;~~AAAO~~,OAAE,CAAC,~~eACjER~~,GAAA,CAACC,OAAO,EAAA;~~AAACa~~,QAAAA,WAAW,EAAC,WAAA;AAAW,OAAE,CAAC,CAAA;AAAA,KACnC,CAAC,CAAA;AAAA,GAAA;AAEP,CAAC,CAAA;AAED,~~IAAMG~~,QAAQ,GAAG,SAAXA,QAAQA,CAAAC,KAAA,~~EAQ2B~~;AAAA,EAAA,~~IAPvCC~~,IAAI,GAAAD,KAAA,CAAJC,IAAI;IACJC,QAAQ,GAAAF,KAAA,CAARE,QAAQ;IACRC,SAAS,GAAAH,KAAA,CAATG,SAAS;IACTC,WAAW,GAAAJ,KAAA,CAAXI,WAAW;IACXC,UAAU,GAAAL,KAAA,CAAVK,UAAU;IACVC,WAAW,GAAAN,KAAA,CAAXM,WAAW;IACXC,aAAa,GAAAP,KAAA,CAAbO,aAAa,CAAA;~~AAEb~~,EAAA,IAAMC,MAAkE,GAAG;AACzEC,IAAAA,IAAI,EAAE,yBAAyB;AAC/~~BhB~~,IAAAA,KAAK,EAAE,gCAAgC;~~AACvCI~~,IAAAA,OAAO,EAAE,gCAAA;GACV,CAAA;AAED,EAAA,~~IAAMa~~,SAAS,~~GAAGT~~,IAAI,KAAK,OAAO,IAAIE,SAAS,CAAA;AAC/C,EAAA,~~IAAMQ~~,WAAW,~~GAAGV~~,IAAI,KAAK,SAAS,IAAIG,WAAW,CAAA;EACrD,~~IAAMQ~~,QAAQ,GAAG,CAACF,SAAS,IAAI,CAACC,WAAW,~~IAAIT~~,QAAQ,CAAA;EAEvD,~~oBACEjB~~,IAAA,~~CAAAS~~,QAAA,EAAA;~~AAAAjB~~,IAAAA,QAAA,~~EACGmC~~,CAAAA,QAAQ,~~iBACP9B~~,GAAA,~~CAACT~~,QAAQ,EAAA;~~AAACK~~,MAAAA,EAAE,~~EAAE2B~~,UAAW;~~MAAC1B~~,KAAK,~~EAAE6B~~,MAAM,CAACC,IAAK;~~AAAAhC~~,MAAAA,QAAA,~~EAC1CyB~~,QAAAA;AAAQ,KACD,CACX,~~EAEAQ~~,SAAS,~~iBACR5B~~,GAAA,~~CAACT~~,QAAQ,EAAA;~~AAACK~~,MAAAA,EAAE,~~EAAE4B~~,WAAY;~~MAAC9B~~,IAAI,~~EAAEgB~~,KAAK,CAACC,~~KAAM~~;~~MAACd~~,KAAK,~~EAAE6B~~,MAAM,~~CAACf~~,KAAM;~~AAAAhB~~,MAAAA,QAAA,~~EAC/D0B~~,SAAAA;AAAS,KACF,CACX,~~EAEAQ~~,WAAW,~~iBACV7B~~,GAAA,~~CAACT~~,QAAQ,EAAA;~~AAACK~~,MAAAA,EAAE,~~EAAE6B~~,aAAc;~~MAAC/B~~,IAAI,~~EAAEgB~~,KAAK,~~CAACK~~,~~OAAQ~~;~~MAAClB~~,KAAK,~~EAAE6B~~,MAAM,~~CAACX~~,OAAQ;~~AAAApB~~,MAAAA,QAAA,~~EACrE2B~~,WAAAA;AAAW,KACJ,CACX,CAAA;AAAA,GACD,CAAC,CAAA;AAEP;;;;"}
1	+ {"version":3,"file":"FormHint.js","sources":["../../../../../../src/components/Form/FormHint.tsx"],"sourcesContent":["/* eslint-disable react/display-name /\nimport type { ReactElement } from 'react';\nimport React from 'react';\nimport { FormHintWrapper } from './FormHintWrapper';\nimport { hintIconSize, hintMarginTop, hintTextSize } from './formTokens';\nimport type { TextProps } from '~components/Typography/Text';\nimport { Text } from '~components/Typography/Text';\nimport BaseBox from '~components/Box/BaseBox';\nimport { CheckIcon, InfoIcon } from '~components/Icons';\nimport { getPlatformType } from '~utils/getPlatformType';\n\ntype HintTextProps = {\n icon?: React.ElementType;\n children: string;\n id?: string;\n color: TextProps<{ variant: 'caption' }>['color'];\n size: 'small' \| 'medium' \| 'large';\n};\n\nconst HintText = ({ icon: Icon, children, id, color, size }: HintTextProps): ReactElement => {\n const isReactNative = getPlatformType() === 'react-native';\n\n return (\n <BaseBox marginTop={hintMarginTop[size]} id={id}>\n <FormHintWrapper>\n {Icon ? <Icon /> : null}\n <Text\n as={isReactNative ? undefined : 'span'}\n color={color}\n size={hintTextSize[size]}\n variant=\"caption\"\n >\n {children}\n </Text>\n </FormHintWrapper>\n </BaseBox>\n );\n};\n\nexport type FormHintProps = {\n type: 'help' \| 'error' \| 'success';\n /\n Help text for the group\n /\n helpText?: string;\n /\n Error text for the group\n \n Renders when `state` is set to 'error'\n /\n errorText?: string;\n /\n Success text for the group\n \n Renders when `state` is set to 'success'\n /\n successText?: string;\n /\n Sets the id on errorText.\n * Needed for accessibility reasons.\n /\n errorTextId?: string;\n /\n Sets the id on helpText.\n * Needed for accessibility reasons.\n /\n helpTextId?: string;\n /\n Sets the id on successText.\n * Needed for accessibility reasons.\n /\n successTextId?: string;\n /\n Sets the size of the hint\n * @default medium\n */\n size?: 'small' \| 'medium' \| 'large';\n};\n\nconst Icons = {\n error: ({ size }: { size: 'small' \| 'medium' \| 'large' }): ReactElement => (\n <>\n <InfoIcon color=\"feedback.icon.negative.intense\" size={hintIconSize[size]} />\n <BaseBox marginRight=\"spacing.2\" />\n </>\n ),\n success: ({ size }: { size: 'small' \| 'medium' \| 'large' }): ReactElement => (\n <>\n <CheckIcon color=\"feedback.icon.positive.intense\" size={hintIconSize[size]} />\n <BaseBox marginRight=\"spacing.2\" />\n </>\n ),\n};\n\nconst FormHint = ({\n type,\n helpText,\n errorText,\n successText,\n helpTextId,\n errorTextId,\n successTextId,\n size = 'medium',\n}: FormHintProps): React.ReactElement => {\n const colors: Record<string, TextProps<{ variant: 'caption' }>['color']> = {\n help: 'surface.text.gray.muted',\n error: 'feedback.text.negative.intense',\n success: 'feedback.text.positive.intense',\n };\n\n const showError = type === 'error' && errorText;\n const showSuccess = type === 'success' && successText;\n const showHelp = !showError && !showSuccess && helpText;\n\n return (\n <>\n {showHelp && (\n <HintText size={size} id={helpTextId} color={colors.help}>\n {helpText}\n </HintText>\n )}\n\n {showError && (\n <HintText\n size={size}\n id={errorTextId}\n icon={() => Icons.error({ size })}\n color={colors.error}\n >\n {errorText}\n </HintText>\n )}\n\n {showSuccess && (\n <HintText\n size={size}\n id={successTextId}\n icon={() => Icons.success({ size })}\n color={colors.success}\n >\n {successText}\n </HintText>\n )}\n </>\n );\n};\n\nexport { FormHint };\n"],"names":["HintText","_ref","Icon","icon","children","id","color","size","isReactNative","getPlatformType","_jsx","BaseBox","marginTop","hintMarginTop","_jsxs","FormHintWrapper","Text","as","undefined","hintTextSize","variant","Icons","error","_ref2","_Fragment","InfoIcon","hintIconSize","marginRight","success","_ref3","CheckIcon","FormHint","_ref4","type","helpText","errorText","successText","helpTextId","errorTextId","successTextId","_ref4$size","colors","help","showError","showSuccess","showHelp"],"mappings":"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"}

package/build/lib/web/production/components/Form/FormLabel.js CHANGED Viewed

@@ -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/production/components/Form/FormLabel.js.map CHANGED Viewed

	@@ -1 +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;;;;"}
1	+ {"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/production/components/Form/Selector/SelectorSupportText.js CHANGED Viewed

@@ -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/production/components/Form/Selector/SelectorSupportText.js.map CHANGED Viewed

	@@ -1 +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;;;;"}
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 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/production/components/Form/Selector/SelectorTitle.js.map CHANGED Viewed

	@@ -1 +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;;;;"}
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' \| '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/production/components/Form/formTokens.js ADDED Viewed

@@ -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/production/components/Form/formTokens.js.map ADDED Viewed

@@ -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/production/components/Input/BaseInput/AnimatedBaseInputWrapper.web.js CHANGED Viewed

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

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

	@@ -1 +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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"}
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 } 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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"}