@razorpay/blade 10.23.5 → 11.0.0

package/build/lib/web/development/components/Dropdown/StyledDropdownOverlay.js

@@ -11,9 +11,9 @@ var StyledDropdownOverlay = /*#__PURE__*/styled(BaseBox).withConfig({
   var theme = props.theme,
     isInBottomSheet = props.isInBottomSheet;
   return {
-    backgroundColor: theme.colors.surface.popup.background,
+    backgroundColor: theme.colors.popup.background.subtle,
     borderWidth: isInBottomSheet ? undefined : theme.border.width.thin,
-    borderColor: theme.colors.surface.border.normal.lowContrast,
+    borderColor: theme.colors.interactive.border.gray.faded,
     borderStyle: isInBottomSheet ? undefined : 'solid',
     borderRadius: makeSize(theme.border.radius.medium)
   };

package/build/lib/web/development/components/Dropdown/StyledDropdownOverlay.js.map

@@ -1 +1 @@
-{"version":3,"file":"StyledDropdownOverlay.js","sources":["../../../../../../src/components/Dropdown/StyledDropdownOverlay.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport BaseBox from '~components/Box/BaseBox';\nimport { makeSize } from '~utils';\n\nconst StyledDropdownOverlay = styled(BaseBox)<{\n  isInBottomSheet?: boolean;\n}>((props) => {\n  const { theme, isInBottomSheet } = props;\n\n  return {\n    backgroundColor: theme.colors.surface.popup.background,\n    borderWidth: isInBottomSheet ? undefined : theme.border.width.thin,\n    borderColor: theme.colors.surface.border.normal.lowContrast,\n    borderStyle: isInBottomSheet ? undefined : 'solid',\n    borderRadius: makeSize(theme.border.radius.medium),\n  };\n});\n\nexport { StyledDropdownOverlay };\n"],"names":["StyledDropdownOverlay","styled","BaseBox","withConfig","displayName","componentId","props","theme","isInBottomSheet","backgroundColor","colors","surface","popup","background","borderWidth","undefined","border","width","thin","borderColor","normal","lowContrast","borderStyle","borderRadius","makeSize","radius","medium"],"mappings":";;;;;;AAIA,IAAMA,qBAAqB,gBAAGC,MAAM,CAACC,OAAO,CAAC,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,uBAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAE1C,CAAA,CAAA,UAACC,KAAK,EAAK;AACZ,EAAA,IAAQC,KAAK,GAAsBD,KAAK,CAAhCC,KAAK;IAAEC,eAAe,GAAKF,KAAK,CAAzBE,eAAe,CAAA;EAE9B,OAAO;IACLC,eAAe,EAAEF,KAAK,CAACG,MAAM,CAACC,OAAO,CAACC,KAAK,CAACC,UAAU;IACtDC,WAAW,EAAEN,eAAe,GAAGO,SAAS,GAAGR,KAAK,CAACS,MAAM,CAACC,KAAK,CAACC,IAAI;IAClEC,WAAW,EAAEZ,KAAK,CAACG,MAAM,CAACC,OAAO,CAACK,MAAM,CAACI,MAAM,CAACC,WAAW;AAC3DC,IAAAA,WAAW,EAAEd,eAAe,GAAGO,SAAS,GAAG,OAAO;IAClDQ,YAAY,EAAEC,QAAQ,CAACjB,KAAK,CAACS,MAAM,CAACS,MAAM,CAACC,MAAM,CAAA;GAClD,CAAA;AACH,CAAC;;;;"}
+{"version":3,"file":"StyledDropdownOverlay.js","sources":["../../../../../../src/components/Dropdown/StyledDropdownOverlay.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport BaseBox from '~components/Box/BaseBox';\nimport { makeSize } from '~utils';\n\nconst StyledDropdownOverlay = styled(BaseBox)<{\n  isInBottomSheet?: boolean;\n}>((props) => {\n  const { theme, isInBottomSheet } = props;\n\n  return {\n    backgroundColor: theme.colors.popup.background.subtle,\n    borderWidth: isInBottomSheet ? undefined : theme.border.width.thin,\n    borderColor: theme.colors.interactive.border.gray.faded,\n    borderStyle: isInBottomSheet ? undefined : 'solid',\n    borderRadius: makeSize(theme.border.radius.medium),\n  };\n});\n\nexport { StyledDropdownOverlay };\n"],"names":["StyledDropdownOverlay","styled","BaseBox","withConfig","displayName","componentId","props","theme","isInBottomSheet","backgroundColor","colors","popup","background","subtle","borderWidth","undefined","border","width","thin","borderColor","interactive","gray","faded","borderStyle","borderRadius","makeSize","radius","medium"],"mappings":";;;;;;AAIA,IAAMA,qBAAqB,gBAAGC,MAAM,CAACC,OAAO,CAAC,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,uBAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAE1C,CAAA,CAAA,UAACC,KAAK,EAAK;AACZ,EAAA,IAAQC,KAAK,GAAsBD,KAAK,CAAhCC,KAAK;IAAEC,eAAe,GAAKF,KAAK,CAAzBE,eAAe,CAAA;EAE9B,OAAO;IACLC,eAAe,EAAEF,KAAK,CAACG,MAAM,CAACC,KAAK,CAACC,UAAU,CAACC,MAAM;IACrDC,WAAW,EAAEN,eAAe,GAAGO,SAAS,GAAGR,KAAK,CAACS,MAAM,CAACC,KAAK,CAACC,IAAI;IAClEC,WAAW,EAAEZ,KAAK,CAACG,MAAM,CAACU,WAAW,CAACJ,MAAM,CAACK,IAAI,CAACC,KAAK;AACvDC,IAAAA,WAAW,EAAEf,eAAe,GAAGO,SAAS,GAAG,OAAO;IAClDS,YAAY,EAAEC,QAAQ,CAAClB,KAAK,CAACS,MAAM,CAACU,MAAM,CAACC,MAAM,CAAA;GAClD,CAAA;AACH,CAAC;;;;"}

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

@@ -8,7 +8,7 @@ var CharacterCounter = function CharacterCounter(_ref) {
   return /*#__PURE__*/jsxs(Text, {
     variant: "caption",
     weight: "regular",
-    type: "muted",
+    color: "surface.text.gray.muted",
     children: [currentCount, "/", maxCount]
   });
 };

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

@@ -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\" type=\"muted\">\n    {currentCount}/{maxCount}\n  </Text>\n);\n"],"names":["CharacterCounter","_ref","currentCount","maxCount","_jsxs","Text","variant","weight","type","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,IAAI,EAAC,OAAO;AAAAC,IAAAA,QAAA,EAClDP,CAAAA,YAAY,EAAC,GAAC,EAACC,QAAQ,CAAA;AAAA,GACpB,CAAC,CAAA;AAAA;;;;"}
+{"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;;;;"}

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

@@ -1,13 +1,13 @@
 import 'react';
 import { FormHintWrapper } from './FormHintWrapper.web.js';
-import '../Typography/BaseText/index.js';
+import '../Typography/Text/index.js';
 import '../Box/BaseBox/index.js';
 import '../Icons/index.js';
 import '../../utils/getPlatformType/index.js';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { getPlatformType } from '../../utils/getPlatformType/getPlatformType.js';
 import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
-import { BaseText } from '../Typography/BaseText/BaseText.web.js';
+import { Text } from '../Typography/Text/Text.js';
 import InfoIcon from '../Icons/InfoIcon/InfoIcon.js';
 import CheckIcon from '../Icons/CheckIcon/CheckIcon.js';
 
@@ -21,15 +21,13 @@ var HintText = function HintText(_ref) {
   var isReactNative = getPlatformType() === 'react-native';
   return /*#__PURE__*/jsx(BaseBox, {
     marginTop: "spacing.2",
+    id: id,
     children: /*#__PURE__*/jsxs(FormHintWrapper, {
-      children: [Icon ? /*#__PURE__*/jsx(Icon, {}) : null, /*#__PURE__*/jsx(BaseText, {
-        id: id,
+      children: [Icon ? /*#__PURE__*/jsx(Icon, {}) : null, /*#__PURE__*/jsx(Text, {
         as: isReactNative ? undefined : 'span',
         color: color,
-        fontSize: 50,
-        lineHeight: 50,
-        fontStyle: "italic",
-        fontFamily: "text",
+        size: "small",
+        variant: "caption",
         children: children
       })]
     })
@@ -39,7 +37,7 @@ var Icons = {
   error: function error() {
     return /*#__PURE__*/jsxs(Fragment, {
       children: [/*#__PURE__*/jsx(InfoIcon, {
-        color: "feedback.icon.negative.lowContrast",
+        color: "feedback.icon.negative.intense",
         size: "small"
       }), /*#__PURE__*/jsx(BaseBox, {
         marginRight: "spacing.2"
@@ -49,7 +47,7 @@ var Icons = {
   success: function success() {
     return /*#__PURE__*/jsxs(Fragment, {
       children: [/*#__PURE__*/jsx(CheckIcon, {
-        color: "feedback.icon.positive.lowContrast",
+        color: "feedback.icon.positive.intense",
         size: "small"
       }), /*#__PURE__*/jsx(BaseBox, {
         marginRight: "spacing.2"
@@ -66,9 +64,9 @@ var FormHint = function FormHint(_ref2) {
     errorTextId = _ref2.errorTextId,
     successTextId = _ref2.successTextId;
   var colors = {
-    help: 'surface.text.muted.lowContrast',
-    error: 'feedback.text.negative.lowContrast',
-    success: 'feedback.text.positive.lowContrast'
+    help: 'surface.text.gray.muted',
+    error: 'feedback.text.negative.intense',
+    success: 'feedback.text.positive.intense'
   };
   var showError = type === 'error' && errorText;
   var showSuccess = type === 'success' && successText;

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

@@ -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 { BaseText } from '~components/Typography/BaseText';\nimport BaseBox from '~components/Box/BaseBox';\nimport { CheckIcon, InfoIcon } from '~components/Icons';\nimport type { BaseTextProps } from '~components/Typography/BaseText/types';\nimport { getPlatformType } from '~utils/getPlatformType';\n\ntype HintTextProps = {\n  icon?: React.ElementType;\n  children: string;\n  id?: string;\n  color: BaseTextProps['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\">\n      <FormHintWrapper>\n        {Icon ? <Icon /> : null}\n        <BaseText\n          id={id}\n          as={isReactNative ? undefined : 'span'}\n          color={color}\n          fontSize={50}\n          lineHeight={50}\n          fontStyle=\"italic\"\n          fontFamily=\"text\"\n        >\n          {children}\n        </BaseText>\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.lowContrast\" size=\"small\" />\n      <BaseBox marginRight=\"spacing.2\" />\n    </>\n  ),\n  success: (): ReactElement => (\n    <>\n      <CheckIcon color=\"feedback.icon.positive.lowContrast\" 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 = {\n    help: 'surface.text.muted.lowContrast',\n    error: 'feedback.text.negative.lowContrast',\n    success: 'feedback.text.positive.lowContrast',\n  } as const;\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","BaseText","as","undefined","fontSize","lineHeight","fontStyle","fontFamily","Icons","error","_Fragment","InfoIcon","size","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;IAAAP,QAAA,eAC5BQ,IAAA,CAACC,eAAe,EAAA;AAAAT,MAAAA,QAAA,EACbF,CAAAA,IAAI,gBAAGO,GAAA,CAACP,IAAI,EAAE,EAAA,CAAC,GAAG,IAAI,eACvBO,GAAA,CAACK,QAAQ,EAAA;AACPT,QAAAA,EAAE,EAAEA,EAAG;AACPU,QAAAA,EAAE,EAAER,aAAa,GAAGS,SAAS,GAAG,MAAO;AACvCV,QAAAA,KAAK,EAAEA,KAAM;AACbW,QAAAA,QAAQ,EAAE,EAAG;AACbC,QAAAA,UAAU,EAAE,EAAG;AACfC,QAAAA,SAAS,EAAC,QAAQ;AAClBC,QAAAA,UAAU,EAAC,MAAM;AAAAhB,QAAAA,QAAA,EAEhBA,QAAAA;AAAQ,OACD,CAAC,CAAA;KACI,CAAA;AAAC,GACX,CAAC,CAAA;AAEd,CAAC,CAAA;AAqCD,IAAMiB,KAAK,GAAG;EACZC,KAAK,EAAE,SAAAA,KAAA,GAAA;IAAA,oBACLV,IAAA,CAAAW,QAAA,EAAA;MAAAnB,QAAA,EAAA,cACEK,GAAA,CAACe,QAAQ,EAAA;AAAClB,QAAAA,KAAK,EAAC,oCAAoC;AAACmB,QAAAA,IAAI,EAAC,OAAA;AAAO,OAAE,CAAC,eACpEhB,GAAA,CAACC,OAAO,EAAA;AAACgB,QAAAA,WAAW,EAAC,WAAA;AAAW,OAAE,CAAC,CAAA;AAAA,KACnC,CAAC,CAAA;GACJ;EACDC,OAAO,EAAE,SAAAA,OAAA,GAAA;IAAA,oBACPf,IAAA,CAAAW,QAAA,EAAA;MAAAnB,QAAA,EAAA,cACEK,GAAA,CAACmB,SAAS,EAAA;AAACtB,QAAAA,KAAK,EAAC,oCAAoC;AAACmB,QAAAA,IAAI,EAAC,OAAA;AAAO,OAAE,CAAC,eACrEhB,GAAA,CAACC,OAAO,EAAA;AAACgB,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,MAAM,GAAG;AACbC,IAAAA,IAAI,EAAE,gCAAgC;AACtCjB,IAAAA,KAAK,EAAE,oCAAoC;AAC3CK,IAAAA,OAAO,EAAE,oCAAA;GACD,CAAA;AAEV,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,oBACEpB,IAAA,CAAAW,QAAA,EAAA;AAAAnB,IAAAA,QAAA,EACGsC,CAAAA,QAAQ,iBACPjC,GAAA,CAACT,QAAQ,EAAA;AAACK,MAAAA,EAAE,EAAE8B,UAAW;MAAC7B,KAAK,EAAEgC,MAAM,CAACC,IAAK;AAAAnC,MAAAA,QAAA,EAC1C4B,QAAAA;AAAQ,KACD,CACX,EAEAQ,SAAS,iBACR/B,GAAA,CAACT,QAAQ,EAAA;AAACK,MAAAA,EAAE,EAAE+B,WAAY;MAACjC,IAAI,EAAEkB,KAAK,CAACC,KAAM;MAAChB,KAAK,EAAEgC,MAAM,CAAChB,KAAM;AAAAlB,MAAAA,QAAA,EAC/D6B,SAAAA;AAAS,KACF,CACX,EAEAQ,WAAW,iBACVhC,GAAA,CAACT,QAAQ,EAAA;AAACK,MAAAA,EAAE,EAAEgC,aAAc;MAAClC,IAAI,EAAEkB,KAAK,CAACM,OAAQ;MAACrB,KAAK,EAAEgC,MAAM,CAACX,OAAQ;AAAAvB,MAAAA,QAAA,EACrE8B,WAAAA;AAAW,KACJ,CACX,CAAA;AAAA,GACD,CAAC,CAAA;AAEP;;;;"}
+{"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":"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"}

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

@@ -2,7 +2,6 @@ import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import 'react';
 import '../VisuallyHidden/index.web.js';
 import '../Typography/index.js';
-import '../Typography/BaseText/index.js';
 import '../../utils/index.js';
 import '../../utils/metaAttribute/index.js';
 import '../Box/BaseBox/index.js';
@@ -15,7 +14,6 @@ import useTheme from '../BladeProvider/useTheme.js';
 import { useBreakpoint } from '../../utils/useBreakpoint/useBreakpoint.js';
 import { getPlatformType } from '../../utils/getPlatformType/getPlatformType.js';
 import { Text } from '../Typography/Text/Text.js';
-import { BaseText } from '../Typography/BaseText/BaseText.web.js';
 import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.web.js';
 import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
 import { makeSpace } from '../../utils/makeSpace/makeSpace.js';
@@ -36,9 +34,7 @@ var FormLabel = function FormLabel(_ref) {
     accessibilityText = _ref.accessibilityText,
     children = _ref.children,
     id = _ref.id,
-    htmlFor = _ref.htmlFor,
-    _ref$contrast = _ref.contrast,
-    contrast = _ref$contrast === void 0 ? 'low' : _ref$contrast;
+    htmlFor = _ref.htmlFor;
   var _useTheme = useTheme(),
     theme = _useTheme.theme;
   var _useBreakpoint = useBreakpoint({
@@ -52,19 +48,16 @@ var FormLabel = function FormLabel(_ref) {
   if (necessityIndicator === 'optional') {
     necessityLabel = /*#__PURE__*/jsx(Text, {
       variant: "caption",
-      weight: "regular",
-      type: "placeholder",
+      size: "small",
+      color: "surface.text.gray.muted",
       children: "(optional)"
     });
   }
   if (necessityIndicator === 'required') {
-    necessityLabel = /*#__PURE__*/jsx(BaseText, {
-      lineHeight: 100,
-      fontFamily: "text",
-      fontStyle: "normal",
-      fontSize: 75,
-      fontWeight: "bold",
-      color: "feedback.text.negative.lowContrast",
+    necessityLabel = /*#__PURE__*/jsx(Text, {
+      variant: "body",
+      size: isLabelLeftPositioned ? 'medium' : 'small',
+      color: "feedback.text.negative.intense",
       children: "*"
     });
   }
@@ -83,12 +76,11 @@ var FormLabel = function FormLabel(_ref) {
     flexWrap: "wrap",
     maxHeight: makeSpace(size[36]),
     children: [/*#__PURE__*/jsx(Text, {
-      type: "subdued",
       variant: "body",
-      contrast: contrast,
       size: isLabelLeftPositioned ? 'medium' : 'small',
+      color: "surface.text.gray.subtle",
       truncateAfterLines: 2,
-      weight: "bold",
+      weight: "semibold",
       wordBreak: isLabelLeftPositioned ? 'break-word' : undefined,
       children: children
     }), computedAccessibilityNode, necessityLabel]

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 { BaseText } from '~components/Typography/BaseText';\nimport { getPlatformType, useBreakpoint } from '~utils';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport BaseBox from '~components/Box/BaseBox';\nimport { useTheme } from '~components/BladeProvider';\nimport type { ColorContrastTypes } from '~tokens/theme/theme';\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  contrast?: ColorContrastTypes;\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  contrast = 'low',\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\" weight=\"regular\" type=\"placeholder\">\n        (optional)\n      </Text>\n    );\n  }\n  if (necessityIndicator === 'required') {\n    necessityLabel = (\n      <BaseText\n        lineHeight={100}\n        fontFamily=\"text\"\n        fontStyle=\"normal\"\n        fontSize={75}\n        fontWeight=\"bold\"\n        color=\"feedback.text.negative.lowContrast\"\n      >\n        *\n      </BaseText>\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        type=\"subdued\"\n        variant=\"body\"\n        contrast={contrast}\n        size={isLabelLeftPositioned ? 'medium' : 'small'}\n        truncateAfterLines={2}\n        weight=\"bold\"\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","_ref$contrast","contrast","_useTheme","useTheme","theme","_useBreakpoint","useBreakpoint","breakpoints","matchedDeviceType","isDesktop","isReactNative","getPlatformType","necessityLabel","isLabelLeftPositioned","_jsx","Text","variant","weight","type","BaseText","lineHeight","fontFamily","fontStyle","fontSize","fontWeight","color","computedAccessibilityNode","_jsxs","VisuallyHidden","textNode","BaseBox","gap","display","flexDirection","alignItems","flexWrap","maxHeight","makeSpace","size","truncateAfterLines","wordBreak","undefined","marginRight","marginBottom","Component","width","makeSize","_objectSpread","style","flexShrink","spacing","metaAttribute","name","MetaConstants"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkDA,IAAMA,SAAS,GAAG,SAAZA,SAASA,CAAAC,IAAA,EAS2B;AAAA,EAAA,IAAAC,OAAA,GAAAD,IAAA,CARxCE,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;IAAAC,aAAA,GAAAX,IAAA,CACPY,QAAQ;AAARA,IAAAA,QAAQ,GAAAD,aAAA,KAAG,KAAA,CAAA,GAAA,KAAK,GAAAA,aAAA,CAAA;AAEhB,EAAA,IAAAE,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,GAAGpB,QAAQ,KAAK,MAAM,IAAIgB,SAAS,CAAA;EAE9D,IAAId,kBAAkB,KAAK,UAAU,EAAE;IACrCiB,cAAc,gBACZE,GAAA,CAACC,IAAI,EAAA;AAACC,MAAAA,OAAO,EAAC,SAAS;AAACC,MAAAA,MAAM,EAAC,SAAS;AAACC,MAAAA,IAAI,EAAC,aAAa;AAAArB,MAAAA,QAAA,EAAC,YAAA;AAE5D,KAAM,CACP,CAAA;AACH,GAAA;EACA,IAAIF,kBAAkB,KAAK,UAAU,EAAE;IACrCiB,cAAc,gBACZE,GAAA,CAACK,QAAQ,EAAA;AACPC,MAAAA,UAAU,EAAE,GAAI;AAChBC,MAAAA,UAAU,EAAC,MAAM;AACjBC,MAAAA,SAAS,EAAC,QAAQ;AAClBC,MAAAA,QAAQ,EAAE,EAAG;AACbC,MAAAA,UAAU,EAAC,MAAM;AACjBC,MAAAA,KAAK,EAAC,oCAAoC;AAAA5B,MAAAA,QAAA,EAC3C,GAAA;AAED,KAAU,CACX,CAAA;AACH,GAAA;AAEA,EAAA,IAAM6B,yBAAyB,gBAC7BC,IAAA,CAACC,cAAc,EAAA;AAAA/B,IAAAA,QAAA,GACZF,kBAAkB,KAAK,MAAM,iBAAImB,GAAA,CAACC,IAAI,EAAA;AAAAlB,MAAAA,QAAA,EAAEF,kBAAAA;AAAkB,KAAO,CAAC,eACnEmB,GAAA,CAACC,IAAI,EAAA;AAAAlB,MAAAA,QAAA,EAAED,iBAAAA;AAAiB,KAAO,CAAC,CAAA;AAAA,GAClB,CACjB,CAAA;AAED,EAAA,IAAMiC,QAAQ,gBACZF,IAAA,CAACG,OAAO,EAAA;AACNC,IAAAA,GAAG,EAAEpC,kBAAkB,KAAK,UAAU,GAAG,WAAW,GAAG,WAAY;AACnEqC,IAAAA,OAAO,EAAC,MAAM;AACdC,IAAAA,aAAa,EAAC,KAAK;AACnBC,IAAAA,UAAU,EAAC,QAAQ;AACnBC,IAAAA,QAAQ,EAAC,MAAM;AACfC,IAAAA,SAAS,EAAEC,SAAS,CAACC,IAAI,CAAC,EAAE,CAAC,CAAE;IAAAzC,QAAA,EAAA,cAE/BiB,GAAA,CAACC,IAAI,EAAA;AACHG,MAAAA,IAAI,EAAC,SAAS;AACdF,MAAAA,OAAO,EAAC,MAAM;AACdf,MAAAA,QAAQ,EAAEA,QAAS;AACnBqC,MAAAA,IAAI,EAAEzB,qBAAqB,GAAG,QAAQ,GAAG,OAAQ;AACjD0B,MAAAA,kBAAkB,EAAE,CAAE;AACtBtB,MAAAA,MAAM,EAAC,MAAM;AACbuB,MAAAA,SAAS,EAAE3B,qBAAqB,GAAG,YAAY,GAAG4B,SAAU;AAAA5C,MAAAA,QAAA,EAE3DA,QAAAA;AAAQ,KACL,CAAC,EACN6B,yBAAyB,EAEzBd,cAAc,CAAA;AAAA,GACR,CACV,CAAA;;AAED;AACA,EAAA,IAAIF,aAAa,EAAE;IACjB,oBACEI,GAAA,CAACgB,OAAO,EAAA;AAACY,MAAAA,WAAW,EAAC,WAAW;AAACC,MAAAA,YAAY,EAAC,WAAW;AAAA9C,MAAAA,QAAA,EACtDgC,QAAAA;AAAQ,KACF,CAAC,CAAA;AAEd,GAAA;EAEA,IAAMe,SAAS,GAAGrD,EAAE,CAAA;AACpB;AACA,EAAA,IAAMsD,KAAK,GAAGhC,qBAAqB,IAAIJ,SAAS,GAAGqC,QAAQ,CAACR,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,MAAM,CAAA;AAE/E,EAAA,oBACExB,GAAA,CAAC8B,SAAS,EAAAG,aAAA,CAAAA,aAAA,CAAA;AACRhD,IAAAA,OAAO,EAAEA,OAAQ;AACjBiD,IAAAA,KAAK,EAAE;AACLH,MAAAA,KAAK,EAALA,KAAK;AACLI,MAAAA,UAAU,EAAE,CAAC;MACbP,WAAW,EAAEL,SAAS,CAACjC,KAAK,CAAC8C,OAAO,CAAC,CAAC,CAAC,CAAA;KACvC;AACFpD,IAAAA,EAAE,EAAEA,EAAAA;AAAG,GAAA,EACHqD,aAAa,CAAC;IAAEC,IAAI,EAAEC,aAAa,CAACjE,SAAAA;AAAU,GAAC,CAAC,CAAA,EAAA,EAAA,EAAA;IAAAS,QAAA,eAEpDiB,GAAA,CAACgB,OAAO,EAAA;AAACa,MAAAA,YAAY,EAAE9B,qBAAqB,GAAG,WAAW,GAAG,WAAY;AAAAhB,MAAAA,QAAA,EAAEgC,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 { 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":"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"}

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

@@ -8,10 +8,12 @@ import '../../../utils/assignWithoutSideEffects/index.js';
 import '../../../utils/makeMotionTime/index.web.js';
 import '../../../utils/makeAccessible/index.js';
 import { useMergeRefs } from '../../../utils/useMergeRefs.js';
+import '../../../utils/getFocusRingStyles/index.js';
 import { jsx } from 'react/jsx-runtime';
 import { castWebType } from '../../../utils/platform/castUtils.js';
 import { makeMotionTime } from '../../../utils/makeMotionTime/makeMotionTime.web.js';
 import { screenReaderStyles } from '../../VisuallyHidden/ScreenReaderStyles.js';
+import { getFocusRingStyles } from '../../../utils/getFocusRingStyles/getFocusRingStyles.web.js';
 import { makeAccessible } from '../../../utils/makeAccessible/makeAccessible.web.js';
 import { assignWithoutSideEffects } from '../../../utils/assignWithoutSideEffects/assignWithoutSideEffects.js';
 
@@ -45,11 +47,9 @@ var StyledInput = /*#__PURE__*/styled.input.withConfig({
     hasError = _ref2.hasError,
     hoverTokens = _ref2.hoverTokens;
   return _objectSpread(_objectSpread({}, screenReaderStyles), {}, {
-    '&:focus-visible + div': {
-      // TODO: Replace with focus outline token
-      outline: "1px solid ".concat(theme.colors.surface.background.level1.lowContrast),
-      boxShadow: "0px 0px 0px 4px ".concat(theme.colors.brand.primary[400])
-    },
+    '&:focus-visible + div': _objectSpread({}, getFocusRingStyles({
+      theme: theme
+    })),
     '&:hover + div': _objectSpread({}, getHoverStyles({
       theme: theme,
       isChecked: isChecked,

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

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

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

@@ -1,22 +1,27 @@
-import '../../Typography/BaseText/index.js';
+import '../../Box/index.js';
+import '../../Typography/Text/index.js';
 import '../../../utils/index.js';
 import { jsx } from 'react/jsx-runtime';
 import { getPlatformType } from '../../../utils/getPlatformType/getPlatformType.js';
-import { BaseText } from '../../Typography/BaseText/BaseText.web.js';
+import { Box } from '../../Box/Box.js';
+import { castWebType } from '../../../utils/platform/castUtils.js';
+import { Text } from '../../Typography/Text/Text.js';
 
 var SelectorSupportText = function SelectorSupportText(_ref) {
   var children = _ref.children,
-    id = _ref.id;
+    id = _ref.id,
+    isNegative = _ref.isNegative;
   var isReactNative = getPlatformType() === 'react-native';
-  return /*#__PURE__*/jsx(BaseText, {
+  return /*#__PURE__*/jsx(Box, {
     id: id,
-    as: isReactNative ? undefined : 'span',
-    color: "surface.text.muted.lowContrast",
-    fontSize: 50,
-    lineHeight: 50,
-    fontStyle: "italic",
-    fontFamily: "text",
-    children: children
+    display: isReactNative ? undefined : castWebType('contents'),
+    children: /*#__PURE__*/jsx(Text, {
+      variant: "caption",
+      size: "small",
+      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 { BaseText } from '~components/Typography/BaseText';\nimport { getPlatformType } from '~utils';\n\nconst SelectorSupportText = ({\n  children,\n  id,\n}: {\n  children: React.ReactNode;\n  id?: string;\n}): React.ReactElement => {\n  const isReactNative = getPlatformType() === 'react-native';\n\n  return (\n    <BaseText\n      id={id}\n      as={isReactNative ? undefined : 'span'}\n      color=\"surface.text.muted.lowContrast\"\n      fontSize={50}\n      lineHeight={50}\n      fontStyle=\"italic\"\n      fontFamily=\"text\"\n    >\n      {children}\n    </BaseText>\n  );\n};\n\nexport { SelectorSupportText };\n"],"names":["SelectorSupportText","_ref","children","id","isReactNative","getPlatformType","_jsx","BaseText","as","undefined","color","fontSize","lineHeight","fontStyle","fontFamily"],"mappings":";;;;;;AAGA,IAAMA,mBAAmB,GAAG,SAAtBA,mBAAmBA,CAAAC,IAAA,EAMC;AAAA,EAAA,IALxBC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IACRC,EAAE,GAAAF,IAAA,CAAFE,EAAE,CAAA;AAKF,EAAA,IAAMC,aAAa,GAAGC,eAAe,EAAE,KAAK,cAAc,CAAA;EAE1D,oBACEC,GAAA,CAACC,QAAQ,EAAA;AACPJ,IAAAA,EAAE,EAAEA,EAAG;AACPK,IAAAA,EAAE,EAAEJ,aAAa,GAAGK,SAAS,GAAG,MAAO;AACvCC,IAAAA,KAAK,EAAC,gCAAgC;AACtCC,IAAAA,QAAQ,EAAE,EAAG;AACbC,IAAAA,UAAU,EAAE,EAAG;AACfC,IAAAA,SAAS,EAAC,QAAQ;AAClBC,IAAAA,UAAU,EAAC,MAAM;AAAAZ,IAAAA,QAAA,EAEhBA,QAAAA;AAAQ,GACD,CAAC,CAAA;AAEf;;;;"}
+{"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;;;;"}

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

@@ -1,31 +1,20 @@
 import '../../Box/BaseBox/index.js';
-import '../../Typography/BaseText/index.js';
+import '../../Typography/Text/index.js';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { BaseBox } from '../../Box/BaseBox/BaseBox.web.js';
-import { BaseText } from '../../Typography/BaseText/BaseText.web.js';
+import { Text } from '../../Typography/Text/Text.js';
 
 var SelectorTitle = function SelectorTitle(_ref) {
   var children = _ref.children,
     isDisabled = _ref.isDisabled,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'medium' : _ref$size;
-  var lineHeight = {
-    small: 50,
-    medium: 100
-  };
-  var fontSize = {
-    small: 75,
-    medium: 100
-  };
   return /*#__PURE__*/jsxs(Fragment, {
     children: [/*#__PURE__*/jsx(BaseBox, {
       marginLeft: "spacing.2"
-    }), /*#__PURE__*/jsx(BaseText, {
-      lineHeight: lineHeight[size],
-      fontFamily: "text",
-      fontWeight: "regular",
-      fontSize: fontSize[size],
-      color: isDisabled ? 'surface.text.placeholder.lowContrast' : 'surface.text.subtle.lowContrast',
+    }), /*#__PURE__*/jsx(Text, {
+      size: size,
+      color: isDisabled ? 'surface.text.gray.disabled' : 'surface.text.gray.subtle',
       children: children
     })]
   });

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 { BaseText } from '~components/Typography/BaseText';\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  const lineHeight = {\n    small: 50,\n    medium: 100,\n  } as const;\n  const fontSize = {\n    small: 75,\n    medium: 100,\n  } as const;\n\n  return (\n    <>\n      <BaseBox marginLeft=\"spacing.2\" />\n      <BaseText\n        lineHeight={lineHeight[size]}\n        fontFamily=\"text\"\n        fontWeight=\"regular\"\n        fontSize={fontSize[size]}\n        color={\n          isDisabled ? 'surface.text.placeholder.lowContrast' : 'surface.text.subtle.lowContrast'\n        }\n      >\n        {children}\n      </BaseText>\n    </>\n  );\n};\n\nexport { SelectorTitle };\n"],"names":["SelectorTitle","_ref","children","isDisabled","_ref$size","size","lineHeight","small","medium","fontSize","_jsxs","_Fragment","_jsx","BaseBox","marginLeft","BaseText","fontFamily","fontWeight","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;AAMf,EAAA,IAAME,UAAU,GAAG;AACjBC,IAAAA,KAAK,EAAE,EAAE;AACTC,IAAAA,MAAM,EAAE,GAAA;GACA,CAAA;AACV,EAAA,IAAMC,QAAQ,GAAG;AACfF,IAAAA,KAAK,EAAE,EAAE;AACTC,IAAAA,MAAM,EAAE,GAAA;GACA,CAAA;EAEV,oBACEE,IAAA,CAAAC,QAAA,EAAA;IAAAT,QAAA,EAAA,cACEU,GAAA,CAACC,OAAO,EAAA;AAACC,MAAAA,UAAU,EAAC,WAAA;AAAW,KAAE,CAAC,eAClCF,GAAA,CAACG,QAAQ,EAAA;AACPT,MAAAA,UAAU,EAAEA,UAAU,CAACD,IAAI,CAAE;AAC7BW,MAAAA,UAAU,EAAC,MAAM;AACjBC,MAAAA,UAAU,EAAC,SAAS;AACpBR,MAAAA,QAAQ,EAAEA,QAAQ,CAACJ,IAAI,CAAE;AACzBa,MAAAA,KAAK,EACHf,UAAU,GAAG,sCAAsC,GAAG,iCACvD;AAAAD,MAAAA,QAAA,EAEAA,QAAAA;AAAQ,KACD,CAAC,CAAA;AAAA,GACX,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';\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/Icons/_Svg/Circle/Circle.web.js

@@ -13,7 +13,8 @@ var Circle = function Circle(_ref) {
     r = _ref.r,
     fill = _ref.fill,
     stroke = _ref.stroke,
-    strokeWidth = _ref.strokeWidth;
+    strokeWidth = _ref.strokeWidth,
+    fillOpacity = _ref.fillOpacity;
   return /*#__PURE__*/jsx("circle", _objectSpread({
     cx: cx,
     cy: cy,
@@ -22,7 +23,8 @@ var Circle = function Circle(_ref) {
     r: r,
     fill: fill,
     stroke: stroke,
-    strokeWidth: strokeWidth
+    strokeWidth: strokeWidth,
+    fillOpacity: fillOpacity
   }, metaAttribute({
     name: 'svg-circle'
   })));

package/build/lib/web/development/components/Icons/_Svg/Circle/Circle.web.js.map

@@ -1 +1 @@
-{"version":3,"file":"Circle.web.js","sources":["../../../../../../../../src/components/Icons/_Svg/Circle/Circle.web.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport type { CircleProps } from './types';\nimport { metaAttribute } from '~utils/metaAttribute';\n\nconst Circle = ({ cx, cy, x, y, r, fill, stroke, strokeWidth }: CircleProps): ReactElement => {\n  return (\n    <circle\n      cx={cx}\n      cy={cy}\n      x={x}\n      y={y}\n      r={r}\n      fill={fill}\n      stroke={stroke}\n      strokeWidth={strokeWidth}\n      {...metaAttribute({ name: 'svg-circle' })}\n    />\n  );\n};\n\nexport default Circle;\n"],"names":["Circle","_ref","cx","cy","x","y","r","fill","stroke","strokeWidth","_jsx","_objectSpread","metaAttribute","name"],"mappings":";;;;;;;AAIA,IAAMA,MAAM,GAAG,SAATA,MAAMA,CAAAC,IAAA,EAAkF;AAAA,EAAA,IAA5EC,EAAE,GAAAD,IAAA,CAAFC,EAAE;IAAEC,EAAE,GAAAF,IAAA,CAAFE,EAAE;IAAEC,CAAC,GAAAH,IAAA,CAADG,CAAC;IAAEC,CAAC,GAAAJ,IAAA,CAADI,CAAC;IAAEC,CAAC,GAAAL,IAAA,CAADK,CAAC;IAAEC,IAAI,GAAAN,IAAA,CAAJM,IAAI;IAAEC,MAAM,GAAAP,IAAA,CAANO,MAAM;IAAEC,WAAW,GAAAR,IAAA,CAAXQ,WAAW,CAAA;EAC1D,oBACEC,GAAA,WAAAC,aAAA,CAAA;AACET,IAAAA,EAAE,EAAEA,EAAG;AACPC,IAAAA,EAAE,EAAEA,EAAG;AACPC,IAAAA,CAAC,EAAEA,CAAE;AACLC,IAAAA,CAAC,EAAEA,CAAE;AACLC,IAAAA,CAAC,EAAEA,CAAE;AACLC,IAAAA,IAAI,EAAEA,IAAK;AACXC,IAAAA,MAAM,EAAEA,MAAO;AACfC,IAAAA,WAAW,EAAEA,WAAAA;AAAY,GAAA,EACrBG,aAAa,CAAC;AAAEC,IAAAA,IAAI,EAAE,YAAA;GAAc,CAAC,CAC1C,CAAC,CAAA;AAEN;;;;"}
+{"version":3,"file":"Circle.web.js","sources":["../../../../../../../../src/components/Icons/_Svg/Circle/Circle.web.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport type { CircleProps } from './types';\nimport { metaAttribute } from '~utils/metaAttribute';\n\nconst Circle = ({\n  cx,\n  cy,\n  x,\n  y,\n  r,\n  fill,\n  stroke,\n  strokeWidth,\n  fillOpacity,\n}: CircleProps): ReactElement => {\n  return (\n    <circle\n      cx={cx}\n      cy={cy}\n      x={x}\n      y={y}\n      r={r}\n      fill={fill}\n      stroke={stroke}\n      strokeWidth={strokeWidth}\n      fillOpacity={fillOpacity}\n      {...metaAttribute({ name: 'svg-circle' })}\n    />\n  );\n};\n\nexport default Circle;\n"],"names":["Circle","_ref","cx","cy","x","y","r","fill","stroke","strokeWidth","fillOpacity","_jsx","_objectSpread","metaAttribute","name"],"mappings":";;;;;;;AAIA,IAAMA,MAAM,GAAG,SAATA,MAAMA,CAAAC,IAAA,EAUqB;AAAA,EAAA,IAT/BC,EAAE,GAAAD,IAAA,CAAFC,EAAE;IACFC,EAAE,GAAAF,IAAA,CAAFE,EAAE;IACFC,CAAC,GAAAH,IAAA,CAADG,CAAC;IACDC,CAAC,GAAAJ,IAAA,CAADI,CAAC;IACDC,CAAC,GAAAL,IAAA,CAADK,CAAC;IACDC,IAAI,GAAAN,IAAA,CAAJM,IAAI;IACJC,MAAM,GAAAP,IAAA,CAANO,MAAM;IACNC,WAAW,GAAAR,IAAA,CAAXQ,WAAW;IACXC,WAAW,GAAAT,IAAA,CAAXS,WAAW,CAAA;EAEX,oBACEC,GAAA,WAAAC,aAAA,CAAA;AACEV,IAAAA,EAAE,EAAEA,EAAG;AACPC,IAAAA,EAAE,EAAEA,EAAG;AACPC,IAAAA,CAAC,EAAEA,CAAE;AACLC,IAAAA,CAAC,EAAEA,CAAE;AACLC,IAAAA,CAAC,EAAEA,CAAE;AACLC,IAAAA,IAAI,EAAEA,IAAK;AACXC,IAAAA,MAAM,EAAEA,MAAO;AACfC,IAAAA,WAAW,EAAEA,WAAY;AACzBC,IAAAA,WAAW,EAAEA,WAAAA;AAAY,GAAA,EACrBG,aAAa,CAAC;AAAEC,IAAAA,IAAI,EAAE,YAAA;GAAc,CAAC,CAC1C,CAAC,CAAA;AAEN;;;;"}

package/build/lib/web/development/components/Icons/_Svg/Rect/Rect.web.js

@@ -12,7 +12,8 @@ var Rect = function Rect(_ref) {
     ry = _ref.ry,
     x = _ref.x,
     y = _ref.y,
-    fill = _ref.fill;
+    fill = _ref.fill,
+    fillOpacity = _ref.fillOpacity;
   return /*#__PURE__*/jsx("rect", _objectSpread(_objectSpread({}, metaAttribute({
     name: 'svg-rect'
   })), {}, {
@@ -22,7 +23,8 @@ var Rect = function Rect(_ref) {
     ry: ry,
     x: x,
     y: y,
-    fill: fill
+    fill: fill,
+    fillOpacity: fillOpacity
   }));
 };
 

package/build/lib/web/development/components/Icons/_Svg/Rect/Rect.web.js.map

@@ -1 +1 @@
-{"version":3,"file":"Rect.web.js","sources":["../../../../../../../../src/components/Icons/_Svg/Rect/Rect.web.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport type { RectProps } from './types';\nimport { metaAttribute } from '~utils/metaAttribute';\n\nconst Rect = ({ height, width, rx, ry, x, y, fill }: RectProps): ReactElement => {\n  return (\n    <rect\n      {...metaAttribute({ name: 'svg-rect' })}\n      height={height}\n      width={width}\n      rx={rx}\n      ry={ry}\n      x={x}\n      y={y}\n      fill={fill}\n    />\n  );\n};\n\nexport default Rect;\n"],"names":["Rect","_ref","height","width","rx","ry","x","y","fill","_jsx","_objectSpread","metaAttribute","name"],"mappings":";;;;;;;AAIA,IAAMA,IAAI,GAAG,SAAPA,IAAIA,CAAAC,IAAA,EAAuE;AAAA,EAAA,IAAjEC,MAAM,GAAAD,IAAA,CAANC,MAAM;IAAEC,KAAK,GAAAF,IAAA,CAALE,KAAK;IAAEC,EAAE,GAAAH,IAAA,CAAFG,EAAE;IAAEC,EAAE,GAAAJ,IAAA,CAAFI,EAAE;IAAEC,CAAC,GAAAL,IAAA,CAADK,CAAC;IAAEC,CAAC,GAAAN,IAAA,CAADM,CAAC;IAAEC,IAAI,GAAAP,IAAA,CAAJO,IAAI,CAAA;AAC/C,EAAA,oBACEC,GAAA,CAAAC,MAAAA,EAAAA,aAAA,CAAAA,aAAA,CAAA,EAAA,EACMC,aAAa,CAAC;AAAEC,IAAAA,IAAI,EAAE,UAAA;AAAW,GAAC,CAAC,CAAA,EAAA,EAAA,EAAA;AACvCV,IAAAA,MAAM,EAAEA,MAAO;AACfC,IAAAA,KAAK,EAAEA,KAAM;AACbC,IAAAA,EAAE,EAAEA,EAAG;AACPC,IAAAA,EAAE,EAAEA,EAAG;AACPC,IAAAA,CAAC,EAAEA,CAAE;AACLC,IAAAA,CAAC,EAAEA,CAAE;AACLC,IAAAA,IAAI,EAAEA,IAAAA;AAAK,GAAA,CACZ,CAAC,CAAA;AAEN;;;;"}
+{"version":3,"file":"Rect.web.js","sources":["../../../../../../../../src/components/Icons/_Svg/Rect/Rect.web.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport type { RectProps } from './types';\nimport { metaAttribute } from '~utils/metaAttribute';\n\nconst Rect = ({ height, width, rx, ry, x, y, fill, fillOpacity }: RectProps): ReactElement => {\n  return (\n    <rect\n      {...metaAttribute({ name: 'svg-rect' })}\n      height={height}\n      width={width}\n      rx={rx}\n      ry={ry}\n      x={x}\n      y={y}\n      fill={fill}\n      fillOpacity={fillOpacity}\n    />\n  );\n};\n\nexport default Rect;\n"],"names":["Rect","_ref","height","width","rx","ry","x","y","fill","fillOpacity","_jsx","_objectSpread","metaAttribute","name"],"mappings":";;;;;;;AAIA,IAAMA,IAAI,GAAG,SAAPA,IAAIA,CAAAC,IAAA,EAAoF;AAAA,EAAA,IAA9EC,MAAM,GAAAD,IAAA,CAANC,MAAM;IAAEC,KAAK,GAAAF,IAAA,CAALE,KAAK;IAAEC,EAAE,GAAAH,IAAA,CAAFG,EAAE;IAAEC,EAAE,GAAAJ,IAAA,CAAFI,EAAE;IAAEC,CAAC,GAAAL,IAAA,CAADK,CAAC;IAAEC,CAAC,GAAAN,IAAA,CAADM,CAAC;IAAEC,IAAI,GAAAP,IAAA,CAAJO,IAAI;IAAEC,WAAW,GAAAR,IAAA,CAAXQ,WAAW,CAAA;AAC5D,EAAA,oBACEC,GAAA,CAAAC,MAAAA,EAAAA,aAAA,CAAAA,aAAA,CAAA,EAAA,EACMC,aAAa,CAAC;AAAEC,IAAAA,IAAI,EAAE,UAAA;AAAW,GAAC,CAAC,CAAA,EAAA,EAAA,EAAA;AACvCX,IAAAA,MAAM,EAAEA,MAAO;AACfC,IAAAA,KAAK,EAAEA,KAAM;AACbC,IAAAA,EAAE,EAAEA,EAAG;AACPC,IAAAA,EAAE,EAAEA,EAAG;AACPC,IAAAA,CAAC,EAAEA,CAAE;AACLC,IAAAA,CAAC,EAAEA,CAAE;AACLC,IAAAA,IAAI,EAAEA,IAAK;AACXC,IAAAA,WAAW,EAAEA,WAAAA;AAAY,GAAA,CAC1B,CAAC,CAAA;AAEN;;;;"}

package/build/lib/web/development/components/Icons/_Svg/Svg/Svg.web.js

@@ -11,7 +11,7 @@ import { metaAttribute } from '../../../../utils/metaAttribute/metaAttribute.web
 import { MetaConstants } from '../../../../utils/metaAttribute/metaConstants.js';
 
 var _excluded = ["styledDisplay"],
-  _excluded2 = ["children", "height", "viewBox", "width", "fill", "testID", "display"];
+  _excluded2 = ["children", "height", "viewBox", "width", "fill", "testID", "display", "fillOpacity"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var StyledSvg = /*#__PURE__*/styled.svg.withConfig({
@@ -33,6 +33,7 @@ var Svg = function Svg(_ref2) {
     fill = _ref2.fill,
     testID = _ref2.testID,
     display = _ref2.display,
+    fillOpacity = _ref2.fillOpacity,
     styledProps = _objectWithoutProperties(_ref2, _excluded2);
   return /*#__PURE__*/jsx(StyledSvg, _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, makeAccessible({
     hidden: true
@@ -46,7 +47,8 @@ var Svg = function Svg(_ref2) {
     fill: fill
     // svg has its own display prop, which conflicts with our styled display prop
     ,
-    styledDisplay: display
+    styledDisplay: display,
+    fillOpacity: fillOpacity
   }, styledProps), {}, {
     children: children
   }));

package/build/lib/web/development/components/Icons/_Svg/Svg/Svg.web.js.map

@@ -1 +1 @@
-{"version":3,"file":"Svg.web.js","sources":["../../../../../../../../src/components/Icons/_Svg/Svg/Svg.web.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport type { ReactElement } from 'react';\nimport type { SvgProps } from './types';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { useStyledProps } from '~components/Box/styledProps';\nimport { makeAccessible } from '~utils/makeAccessible';\n\nconst StyledSvg = styled.svg<SvgProps & { styledDisplay: SvgProps['display'] }>(\n  ({ styledDisplay, ...props }) => {\n    const styledPropsCSSObject = useStyledProps({ ...props, display: styledDisplay });\n    return styledPropsCSSObject;\n  },\n);\n\nconst Svg = ({\n  children,\n  height,\n  viewBox,\n  width,\n  fill,\n  testID,\n  display,\n  ...styledProps\n}: SvgProps): ReactElement => {\n  return (\n    <StyledSvg\n      {...makeAccessible({ hidden: true })}\n      {...metaAttribute({ name: MetaConstants.Icon, testID })}\n      height={height}\n      viewBox={viewBox}\n      width={width}\n      fill={fill}\n      // svg has its own display prop, which conflicts with our styled display prop\n      styledDisplay={display}\n      {...styledProps}\n    >\n      {children}\n    </StyledSvg>\n  );\n};\n\nexport default Svg;\n"],"names":["StyledSvg","styled","svg","withConfig","displayName","componentId","_ref","styledDisplay","props","_objectWithoutProperties","_excluded","styledPropsCSSObject","useStyledProps","_objectSpread","display","Svg","_ref2","children","height","viewBox","width","fill","testID","styledProps","_excluded2","_jsx","makeAccessible","hidden","metaAttribute","name","MetaConstants","Icon"],"mappings":";;;;;;;;;;;;;;;;AAOA,IAAMA,SAAS,gBAAGC,MAAM,CAACC,GAAG,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,mBAAA;EAAAC,WAAA,EAAA,UAAA;AAAA,CAC1B,CAAA,CAAA,UAAAC,IAAA,EAAiC;AAAA,EAAA,IAA9BC,aAAa,GAAAD,IAAA,CAAbC,aAAa;AAAKC,IAAAA,KAAK,GAAAC,wBAAA,CAAAH,IAAA,EAAAI,SAAA,CAAA,CAAA;EACxB,IAAMC,oBAAoB,GAAGC,cAAc,CAAAC,aAAA,CAAAA,aAAA,KAAML,KAAK,CAAA,EAAA,EAAA,EAAA;AAAEM,IAAAA,OAAO,EAAEP,aAAAA;AAAa,GAAA,CAAE,CAAC,CAAA;AACjF,EAAA,OAAOI,oBAAoB,CAAA;AAC7B,CAAC,CACF,CAAA;AAED,IAAMI,GAAG,GAAG,SAANA,GAAGA,CAAAC,KAAA,EASqB;AAAA,EAAA,IAR5BC,QAAQ,GAAAD,KAAA,CAARC,QAAQ;IACRC,MAAM,GAAAF,KAAA,CAANE,MAAM;IACNC,OAAO,GAAAH,KAAA,CAAPG,OAAO;IACPC,KAAK,GAAAJ,KAAA,CAALI,KAAK;IACLC,IAAI,GAAAL,KAAA,CAAJK,IAAI;IACJC,MAAM,GAAAN,KAAA,CAANM,MAAM;IACNR,OAAO,GAAAE,KAAA,CAAPF,OAAO;AACJS,IAAAA,WAAW,GAAAd,wBAAA,CAAAO,KAAA,EAAAQ,UAAA,CAAA,CAAA;AAEd,EAAA,oBACEC,GAAA,CAACzB,SAAS,EAAAa,aAAA,CAAAA,aAAA,CAAAA,aAAA,CAAAA,aAAA,CAAA,EAAA,EACJa,cAAc,CAAC;AAAEC,IAAAA,MAAM,EAAE,IAAA;GAAM,CAAC,CAChCC,EAAAA,aAAa,CAAC;IAAEC,IAAI,EAAEC,aAAa,CAACC,IAAI;AAAET,IAAAA,MAAM,EAANA,MAAAA;AAAO,GAAC,CAAC,CAAA,EAAA,EAAA,EAAA;AACvDJ,IAAAA,MAAM,EAAEA,MAAO;AACfC,IAAAA,OAAO,EAAEA,OAAQ;AACjBC,IAAAA,KAAK,EAAEA,KAAM;AACbC,IAAAA,IAAI,EAAEA,IAAAA;AACN;AAAA;AACAd,IAAAA,aAAa,EAAEO,OAAAA;AAAQ,GAAA,EACnBS,WAAW,CAAA,EAAA,EAAA,EAAA;AAAAN,IAAAA,QAAA,EAEdA,QAAAA;AAAQ,GAAA,CACA,CAAC,CAAA;AAEhB;;;;"}
+{"version":3,"file":"Svg.web.js","sources":["../../../../../../../../src/components/Icons/_Svg/Svg/Svg.web.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport type { ReactElement } from 'react';\nimport type { SvgProps } from './types';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { useStyledProps } from '~components/Box/styledProps';\nimport { makeAccessible } from '~utils/makeAccessible';\n\nconst StyledSvg = styled.svg<SvgProps & { styledDisplay: SvgProps['display'] }>(\n  ({ styledDisplay, ...props }) => {\n    const styledPropsCSSObject = useStyledProps({ ...props, display: styledDisplay });\n    return styledPropsCSSObject;\n  },\n);\n\nconst Svg = ({\n  children,\n  height,\n  viewBox,\n  width,\n  fill,\n  testID,\n  display,\n  fillOpacity,\n  ...styledProps\n}: SvgProps): ReactElement => {\n  return (\n    <StyledSvg\n      {...makeAccessible({ hidden: true })}\n      {...metaAttribute({ name: MetaConstants.Icon, testID })}\n      height={height}\n      viewBox={viewBox}\n      width={width}\n      fill={fill}\n      // svg has its own display prop, which conflicts with our styled display prop\n      styledDisplay={display}\n      fillOpacity={fillOpacity}\n      {...styledProps}\n    >\n      {children}\n    </StyledSvg>\n  );\n};\n\nexport default Svg;\n"],"names":["StyledSvg","styled","svg","withConfig","displayName","componentId","_ref","styledDisplay","props","_objectWithoutProperties","_excluded","styledPropsCSSObject","useStyledProps","_objectSpread","display","Svg","_ref2","children","height","viewBox","width","fill","testID","fillOpacity","styledProps","_excluded2","_jsx","makeAccessible","hidden","metaAttribute","name","MetaConstants","Icon"],"mappings":";;;;;;;;;;;;;;;;AAOA,IAAMA,SAAS,gBAAGC,MAAM,CAACC,GAAG,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,mBAAA;EAAAC,WAAA,EAAA,UAAA;AAAA,CAC1B,CAAA,CAAA,UAAAC,IAAA,EAAiC;AAAA,EAAA,IAA9BC,aAAa,GAAAD,IAAA,CAAbC,aAAa;AAAKC,IAAAA,KAAK,GAAAC,wBAAA,CAAAH,IAAA,EAAAI,SAAA,CAAA,CAAA;EACxB,IAAMC,oBAAoB,GAAGC,cAAc,CAAAC,aAAA,CAAAA,aAAA,KAAML,KAAK,CAAA,EAAA,EAAA,EAAA;AAAEM,IAAAA,OAAO,EAAEP,aAAAA;AAAa,GAAA,CAAE,CAAC,CAAA;AACjF,EAAA,OAAOI,oBAAoB,CAAA;AAC7B,CAAC,CACF,CAAA;AAED,IAAMI,GAAG,GAAG,SAANA,GAAGA,CAAAC,KAAA,EAUqB;AAAA,EAAA,IAT5BC,QAAQ,GAAAD,KAAA,CAARC,QAAQ;IACRC,MAAM,GAAAF,KAAA,CAANE,MAAM;IACNC,OAAO,GAAAH,KAAA,CAAPG,OAAO;IACPC,KAAK,GAAAJ,KAAA,CAALI,KAAK;IACLC,IAAI,GAAAL,KAAA,CAAJK,IAAI;IACJC,MAAM,GAAAN,KAAA,CAANM,MAAM;IACNR,OAAO,GAAAE,KAAA,CAAPF,OAAO;IACPS,WAAW,GAAAP,KAAA,CAAXO,WAAW;AACRC,IAAAA,WAAW,GAAAf,wBAAA,CAAAO,KAAA,EAAAS,UAAA,CAAA,CAAA;AAEd,EAAA,oBACEC,GAAA,CAAC1B,SAAS,EAAAa,aAAA,CAAAA,aAAA,CAAAA,aAAA,CAAAA,aAAA,CAAA,EAAA,EACJc,cAAc,CAAC;AAAEC,IAAAA,MAAM,EAAE,IAAA;GAAM,CAAC,CAChCC,EAAAA,aAAa,CAAC;IAAEC,IAAI,EAAEC,aAAa,CAACC,IAAI;AAAEV,IAAAA,MAAM,EAANA,MAAAA;AAAO,GAAC,CAAC,CAAA,EAAA,EAAA,EAAA;AACvDJ,IAAAA,MAAM,EAAEA,MAAO;AACfC,IAAAA,OAAO,EAAEA,OAAQ;AACjBC,IAAAA,KAAK,EAAEA,KAAM;AACbC,IAAAA,IAAI,EAAEA,IAAAA;AACN;AAAA;AACAd,IAAAA,aAAa,EAAEO,OAAQ;AACvBS,IAAAA,WAAW,EAAEA,WAAAA;AAAY,GAAA,EACrBC,WAAW,CAAA,EAAA,EAAA,EAAA;AAAAP,IAAAA,QAAA,EAEdA,QAAAA;AAAQ,GAAA,CACA,CAAC,CAAA;AAEhB;;;;"}

package/build/lib/web/development/components/Icons/useIconProps/useIconProps.js

@@ -18,7 +18,7 @@ function useIconProps(_ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'medium' : _ref$size,
     _ref$color = _ref.color,
-    color = _ref$color === void 0 ? 'surface.text.normal.lowContrast' : _ref$color;
+    color = _ref$color === void 0 ? 'surface.icon.gray.normal' : _ref$color;
   var _useTheme = useTheme(),
     theme = _useTheme.theme;
   var height = makeSize(iconSize[size]);

package/build/lib/web/development/components/Icons/useIconProps/useIconProps.js.map

@@ -1 +1 @@
-{"version":3,"file":"useIconProps.js","sources":["../../../../../../../src/components/Icons/useIconProps/useIconProps.tsx"],"sourcesContent":["import type { IconProps } from '..';\nimport get from '~utils/lodashButBetter/get';\nimport { useTheme } from '~components/BladeProvider';\nimport { size } from '~tokens/global';\nimport { makeSize } from '~utils/makeSize';\n\nconst iconSize = {\n  xsmall: size[8],\n  small: size[12],\n  medium: size[16],\n  large: size[20],\n  xlarge: size[24],\n  '2xlarge': size[32],\n} as const;\n\nfunction useIconProps({\n  size = 'medium',\n  color = 'surface.text.normal.lowContrast',\n}: IconProps): {\n  height: `${typeof iconSize[keyof typeof iconSize]}px`;\n  width: `${typeof iconSize[keyof typeof iconSize]}px`;\n  iconColor: string;\n} {\n  const { theme } = useTheme();\n  const height = makeSize(iconSize[size]);\n  const width = makeSize(iconSize[size]);\n  const iconColor = color === 'currentColor' ? 'currentColor' : get(theme.colors, color, '');\n\n  return { height, width, iconColor };\n}\n\nexport default useIconProps;\n"],"names":["iconSize","xsmall","size","small","medium","large","xlarge","useIconProps","_ref","_ref$size","_ref$color","color","_useTheme","useTheme","theme","height","makeSize","width","iconColor","get","colors"],"mappings":";;;;;;;;AAMA,IAAMA,QAAQ,GAAG;AACfC,EAAAA,MAAM,EAAEC,IAAI,CAAC,CAAC,CAAC;AACfC,EAAAA,KAAK,EAAED,IAAI,CAAC,EAAE,CAAC;AACfE,EAAAA,MAAM,EAAEF,IAAI,CAAC,EAAE,CAAC;AAChBG,EAAAA,KAAK,EAAEH,IAAI,CAAC,EAAE,CAAC;AACfI,EAAAA,MAAM,EAAEJ,IAAI,CAAC,EAAE,CAAC;EAChB,SAAS,EAAEA,IAAI,CAAC,EAAE,CAAA;AACpB,CAAU,CAAA;AAEV,SAASK,YAAYA,CAAAC,IAAA,EAOnB;AAAA,EAAA,IAAAC,SAAA,GAAAD,IAAA,CANAN,IAAI;AAAJA,IAAAA,IAAI,GAAAO,SAAA,KAAG,KAAA,CAAA,GAAA,QAAQ,GAAAA,SAAA;IAAAC,UAAA,GAAAF,IAAA,CACfG,KAAK;AAALA,IAAAA,KAAK,GAAAD,UAAA,KAAG,KAAA,CAAA,GAAA,iCAAiC,GAAAA,UAAA,CAAA;AAMzC,EAAA,IAAAE,SAAA,GAAkBC,QAAQ,EAAE;IAApBC,KAAK,GAAAF,SAAA,CAALE,KAAK,CAAA;EACb,IAAMC,MAAM,GAAGC,QAAQ,CAAChB,QAAQ,CAACE,IAAI,CAAC,CAAC,CAAA;EACvC,IAAMe,KAAK,GAAGD,QAAQ,CAAChB,QAAQ,CAACE,IAAI,CAAC,CAAC,CAAA;AACtC,EAAA,IAAMgB,SAAS,GAAGP,KAAK,KAAK,cAAc,GAAG,cAAc,GAAGQ,KAAG,CAACL,KAAK,CAACM,MAAM,EAAET,KAAK,EAAE,EAAE,CAAC,CAAA;EAE1F,OAAO;AAAEI,IAAAA,MAAM,EAANA,MAAM;AAAEE,IAAAA,KAAK,EAALA,KAAK;AAAEC,IAAAA,SAAS,EAATA,SAAAA;GAAW,CAAA;AACrC;;;;"}
+{"version":3,"file":"useIconProps.js","sources":["../../../../../../../src/components/Icons/useIconProps/useIconProps.tsx"],"sourcesContent":["import type { IconProps } from '..';\nimport get from '~utils/lodashButBetter/get';\nimport { useTheme } from '~components/BladeProvider';\nimport { size } from '~tokens/global';\nimport { makeSize } from '~utils/makeSize';\n\nconst iconSize = {\n  xsmall: size[8],\n  small: size[12],\n  medium: size[16],\n  large: size[20],\n  xlarge: size[24],\n  '2xlarge': size[32],\n} as const;\n\nfunction useIconProps({\n  size = 'medium',\n  color = 'surface.icon.gray.normal',\n}: IconProps): {\n  height: `${typeof iconSize[keyof typeof iconSize]}px`;\n  width: `${typeof iconSize[keyof typeof iconSize]}px`;\n  iconColor: string;\n} {\n  const { theme } = useTheme();\n  const height = makeSize(iconSize[size]);\n  const width = makeSize(iconSize[size]);\n  const iconColor = color === 'currentColor' ? 'currentColor' : get(theme.colors, color, '');\n\n  return { height, width, iconColor };\n}\n\nexport default useIconProps;\n"],"names":["iconSize","xsmall","size","small","medium","large","xlarge","useIconProps","_ref","_ref$size","_ref$color","color","_useTheme","useTheme","theme","height","makeSize","width","iconColor","get","colors"],"mappings":";;;;;;;;AAMA,IAAMA,QAAQ,GAAG;AACfC,EAAAA,MAAM,EAAEC,IAAI,CAAC,CAAC,CAAC;AACfC,EAAAA,KAAK,EAAED,IAAI,CAAC,EAAE,CAAC;AACfE,EAAAA,MAAM,EAAEF,IAAI,CAAC,EAAE,CAAC;AAChBG,EAAAA,KAAK,EAAEH,IAAI,CAAC,EAAE,CAAC;AACfI,EAAAA,MAAM,EAAEJ,IAAI,CAAC,EAAE,CAAC;EAChB,SAAS,EAAEA,IAAI,CAAC,EAAE,CAAA;AACpB,CAAU,CAAA;AAEV,SAASK,YAAYA,CAAAC,IAAA,EAOnB;AAAA,EAAA,IAAAC,SAAA,GAAAD,IAAA,CANAN,IAAI;AAAJA,IAAAA,IAAI,GAAAO,SAAA,KAAG,KAAA,CAAA,GAAA,QAAQ,GAAAA,SAAA;IAAAC,UAAA,GAAAF,IAAA,CACfG,KAAK;AAALA,IAAAA,KAAK,GAAAD,UAAA,KAAG,KAAA,CAAA,GAAA,0BAA0B,GAAAA,UAAA,CAAA;AAMlC,EAAA,IAAAE,SAAA,GAAkBC,QAAQ,EAAE;IAApBC,KAAK,GAAAF,SAAA,CAALE,KAAK,CAAA;EACb,IAAMC,MAAM,GAAGC,QAAQ,CAAChB,QAAQ,CAACE,IAAI,CAAC,CAAC,CAAA;EACvC,IAAMe,KAAK,GAAGD,QAAQ,CAAChB,QAAQ,CAACE,IAAI,CAAC,CAAC,CAAA;AACtC,EAAA,IAAMgB,SAAS,GAAGP,KAAK,KAAK,cAAc,GAAG,cAAc,GAAGQ,KAAG,CAACL,KAAK,CAACM,MAAM,EAAET,KAAK,EAAE,EAAE,CAAC,CAAA;EAE1F,OAAO;AAAEI,IAAAA,MAAM,EAANA,MAAM;AAAEE,IAAAA,KAAK,EAALA,KAAK;AAAEC,IAAAA,SAAS,EAATA,SAAAA;GAAW,CAAA;AACrC;;;;"}