@razorpay/blade 11.8.2 → 11.9.1

package/build/lib/web/production/components/Checkbox/CheckboxIcon/CheckboxIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxIcon.js","sources":["../../../../../../../src/components/Checkbox/CheckboxIcon/CheckboxIcon.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/prefer-nullish-coalescing */\n/* eslint-disable @typescript-eslint/explicit-function-return-type */\n/* eslint-disable @typescript-eslint/explicit-module-boundary-types */\nimport React from 'react';\nimport { CheckboxIconWrapper } from './CheckboxIconWrapper';\nimport { Fade } from './Fade';\nimport getIn from '~utils/lodashButBetter/get';\nimport { useTheme } from '~components/BladeProvider';\nimport Svg, { Path } from '~components/Icons/_Svg';\nimport { makeSpace } from '~utils/makeSpace';\nimport { metaAttribute } from '~utils/metaAttribute';\nimport { size } from '~tokens/global';\n\nconst svgSize = {\n  small: {\n    width: size[8],\n    height: size[8],\n  },\n  medium: {\n    width: size[12],\n    height: size[12],\n  },\n};\n\nconst CheckedIcon = ({ color, size }: { color: string; size: 'small' | 'medium' }) => {\n  const width = makeSpace(svgSize[size].width);\n  const height = makeSpace(svgSize[size].height);\n\n  return (\n    <Svg width={width} height={height} viewBox=\"0 0 8 8\" fill=\"none\">\n      <Path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M6.90237 1.76413C7.03254 1.89431 7.03254 2.10536 6.90237 2.23554L3.2357 5.90221C3.10553 6.03238 2.89447 6.03238 2.7643 5.90221L1.09763 4.23554C0.967456 4.10536 0.967456 3.89431 1.09763 3.76414C1.22781 3.63396 1.43886 3.63396 1.56904 3.76414L3 5.1951L6.43096 1.76413C6.56114 1.63396 6.77219 1.63396 6.90237 1.76413Z\"\n        fill={color}\n        stroke={color}\n        strokeWidth=\"0.5\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    </Svg>\n  );\n};\n\nconst IndeterminateIcon = ({ color, size }: { color: string; size: 'small' | 'medium' }) => {\n  const width = makeSpace(svgSize[size].width);\n  const height = makeSpace(svgSize[size].height);\n\n  return (\n    <Svg width={width} height={height} viewBox=\"0 0 8 8\" fill=\"none\">\n      <Path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M1.3335 3.99984C1.3335 3.81574 1.48273 3.6665 1.66683 3.6665H6.3335C6.51759 3.6665 6.66683 3.81574 6.66683 3.99984C6.66683 4.18393 6.51759 4.33317 6.3335 4.33317H1.66683C1.48273 4.33317 1.3335 4.18393 1.3335 3.99984Z\"\n        fill={color}\n        stroke={color}\n        strokeWidth=\"0.5\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    </Svg>\n  );\n};\n\nexport type CheckboxIconProps = {\n  isDisabled?: boolean;\n  isNegative?: boolean;\n  isChecked?: boolean;\n  isIndeterminate?: boolean;\n  size: 'small' | 'medium';\n};\n\nconst CheckboxIcon = ({\n  isChecked,\n  isIndeterminate,\n  isDisabled,\n  isNegative,\n  size,\n}: CheckboxIconProps) => {\n  const { theme } = useTheme();\n  const iconColor = getIn(theme, 'colors.interactive.icon.onPrimary.normal');\n  return (\n    <CheckboxIconWrapper\n      size={size}\n      isIndeterminate={isIndeterminate}\n      isDisabled={isDisabled}\n      isNegative={isNegative}\n      isChecked={!!(isChecked || isIndeterminate)}\n      {...metaAttribute({ name: 'checkbox-icon-wrapper' })}\n    >\n      <Fade show={isIndeterminate} styles={{ position: 'absolute', display: 'flex' }}>\n        <IndeterminateIcon size={size} color={iconColor} />\n      </Fade>\n      <Fade\n        show={Boolean(isChecked) && !isIndeterminate}\n        styles={{ position: 'absolute', display: 'flex' }}\n      >\n        {isChecked ? <CheckedIcon size={size} color={iconColor} /> : null}\n      </Fade>\n    </CheckboxIconWrapper>\n  );\n};\n\nexport { CheckboxIcon };\n"],"names":["svgSize","small","width","size","height","medium","CheckedIcon","_ref","color","makeSpace","_jsx","Svg","viewBox","fill","children","Path","fillRule","clipRule","d","stroke","strokeWidth","strokeLinecap","strokeLinejoin","IndeterminateIcon","_ref2","CheckboxIcon","_ref3","isChecked","isIndeterminate","isDisabled","isNegative","_useTheme","useTheme","theme","iconColor","getIn","_jsxs","CheckboxIconWrapper","_objectSpread","metaAttribute","name","Fade","show","styles","position","display","Boolean"],"mappings":"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"}
+{"version":3,"file":"CheckboxIcon.js","sources":["../../../../../../../src/components/Checkbox/CheckboxIcon/CheckboxIcon.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/prefer-nullish-coalescing */\n/* eslint-disable @typescript-eslint/explicit-function-return-type */\n/* eslint-disable @typescript-eslint/explicit-module-boundary-types */\nimport React from 'react';\nimport { CheckboxIconWrapper } from './CheckboxIconWrapper';\nimport { Fade } from './Fade';\nimport getIn from '~utils/lodashButBetter/get';\nimport { useTheme } from '~components/BladeProvider';\nimport Svg, { Path } from '~components/Icons/_Svg';\nimport { makeSpace } from '~utils/makeSpace';\nimport { metaAttribute } from '~utils/metaAttribute';\nimport { size } from '~tokens/global';\n\nconst svgSize = {\n  small: {\n    width: size[8],\n    height: size[8],\n  },\n  medium: {\n    width: size[12],\n    height: size[12],\n  },\n  large: {\n    width: size[16],\n    height: size[16],\n  },\n};\n\nconst CheckedIcon = ({ color, size }: { color: string; size: 'small' | 'medium' | 'large' }) => {\n  const width = makeSpace(svgSize[size].width);\n  const height = makeSpace(svgSize[size].height);\n\n  return (\n    <Svg width={width} height={height} viewBox=\"0 0 8 8\" fill=\"none\">\n      <Path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M6.90237 1.76413C7.03254 1.89431 7.03254 2.10536 6.90237 2.23554L3.2357 5.90221C3.10553 6.03238 2.89447 6.03238 2.7643 5.90221L1.09763 4.23554C0.967456 4.10536 0.967456 3.89431 1.09763 3.76414C1.22781 3.63396 1.43886 3.63396 1.56904 3.76414L3 5.1951L6.43096 1.76413C6.56114 1.63396 6.77219 1.63396 6.90237 1.76413Z\"\n        fill={color}\n        stroke={color}\n        strokeWidth=\"0.5\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    </Svg>\n  );\n};\n\nconst IndeterminateIcon = ({\n  color,\n  size,\n}: {\n  color: string;\n  size: 'small' | 'medium' | 'large';\n}) => {\n  const width = makeSpace(svgSize[size].width);\n  const height = makeSpace(svgSize[size].height);\n\n  return (\n    <Svg width={width} height={height} viewBox=\"0 0 8 8\" fill=\"none\">\n      <Path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M1.3335 3.99984C1.3335 3.81574 1.48273 3.6665 1.66683 3.6665H6.3335C6.51759 3.6665 6.66683 3.81574 6.66683 3.99984C6.66683 4.18393 6.51759 4.33317 6.3335 4.33317H1.66683C1.48273 4.33317 1.3335 4.18393 1.3335 3.99984Z\"\n        fill={color}\n        stroke={color}\n        strokeWidth=\"0.5\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    </Svg>\n  );\n};\n\nexport type CheckboxIconProps = {\n  isDisabled?: boolean;\n  isNegative?: boolean;\n  isChecked?: boolean;\n  isIndeterminate?: boolean;\n  size: 'small' | 'medium' | 'large';\n};\n\nconst CheckboxIcon = ({\n  isChecked,\n  isIndeterminate,\n  isDisabled,\n  isNegative,\n  size,\n}: CheckboxIconProps) => {\n  const { theme } = useTheme();\n  const iconColor = getIn(theme, 'colors.interactive.icon.onPrimary.normal');\n  return (\n    <CheckboxIconWrapper\n      size={size}\n      isIndeterminate={isIndeterminate}\n      isDisabled={isDisabled}\n      isNegative={isNegative}\n      isChecked={!!(isChecked || isIndeterminate)}\n      {...metaAttribute({ name: 'checkbox-icon-wrapper' })}\n    >\n      <Fade show={isIndeterminate} styles={{ position: 'absolute', display: 'flex' }}>\n        <IndeterminateIcon size={size} color={iconColor} />\n      </Fade>\n      <Fade\n        show={Boolean(isChecked) && !isIndeterminate}\n        styles={{ position: 'absolute', display: 'flex' }}\n      >\n        {isChecked ? <CheckedIcon size={size} color={iconColor} /> : null}\n      </Fade>\n    </CheckboxIconWrapper>\n  );\n};\n\nexport { CheckboxIcon };\n"],"names":["svgSize","small","width","size","height","medium","large","CheckedIcon","_ref","color","makeSpace","_jsx","Svg","viewBox","fill","children","Path","fillRule","clipRule","d","stroke","strokeWidth","strokeLinecap","strokeLinejoin","IndeterminateIcon","_ref2","CheckboxIcon","_ref3","isChecked","isIndeterminate","isDisabled","isNegative","_useTheme","useTheme","theme","iconColor","getIn","_jsxs","CheckboxIconWrapper","_objectSpread","metaAttribute","name","Fade","show","styles","position","display","Boolean"],"mappings":";;;;;;;;;;;;;;;;;;;;AAaA,IAAMA,OAAO,GAAG;AACdC,EAAAA,KAAK,EAAE;AACLC,IAAAA,KAAK,EAAEC,IAAI,CAAC,CAAC,CAAC;IACdC,MAAM,EAAED,IAAI,CAAC,CAAC,CAAA;GACf;AACDE,EAAAA,MAAM,EAAE;AACNH,IAAAA,KAAK,EAAEC,IAAI,CAAC,EAAE,CAAC;IACfC,MAAM,EAAED,IAAI,CAAC,EAAE,CAAA;GAChB;AACDG,EAAAA,KAAK,EAAE;AACLJ,IAAAA,KAAK,EAAEC,IAAI,CAAC,EAAE,CAAC;IACfC,MAAM,EAAED,IAAI,CAAC,EAAE,CAAA;AACjB,GAAA;AACF,CAAC,CAAA;AAED,IAAMI,WAAW,GAAG,SAAdA,WAAWA,CAAAC,IAAA,EAA+E;AAAA,EAAA,IAAzEC,KAAK,GAAAD,IAAA,CAALC,KAAK;IAAEN,IAAI,GAAAK,IAAA,CAAJL,IAAI,CAAA;EAChC,IAAMD,KAAK,GAAGQ,SAAS,CAACV,OAAO,CAACG,IAAI,CAAC,CAACD,KAAK,CAAC,CAAA;EAC5C,IAAME,MAAM,GAAGM,SAAS,CAACV,OAAO,CAACG,IAAI,CAAC,CAACC,MAAM,CAAC,CAAA;EAE9C,oBACEO,GAAA,CAACC,GAAG,EAAA;AAACV,IAAAA,KAAK,EAAEA,KAAM;AAACE,IAAAA,MAAM,EAAEA,MAAO;AAACS,IAAAA,OAAO,EAAC,SAAS;AAACC,IAAAA,IAAI,EAAC,MAAM;IAAAC,QAAA,eAC9DJ,GAAA,CAACK,IAAI,EAAA;AACHC,MAAAA,QAAQ,EAAC,SAAS;AAClBC,MAAAA,QAAQ,EAAC,SAAS;AAClBC,MAAAA,CAAC,EAAC,4TAA4T;AAC9TL,MAAAA,IAAI,EAAEL,KAAM;AACZW,MAAAA,MAAM,EAAEX,KAAM;AACdY,MAAAA,WAAW,EAAC,KAAK;AACjBC,MAAAA,aAAa,EAAC,OAAO;AACrBC,MAAAA,cAAc,EAAC,OAAA;KAChB,CAAA;AAAC,GACC,CAAC,CAAA;AAEV,CAAC,CAAA;AAED,IAAMC,iBAAiB,GAAG,SAApBA,iBAAiBA,CAAAC,KAAA,EAMjB;AAAA,EAAA,IALJhB,KAAK,GAAAgB,KAAA,CAALhB,KAAK;IACLN,IAAI,GAAAsB,KAAA,CAAJtB,IAAI,CAAA;EAKJ,IAAMD,KAAK,GAAGQ,SAAS,CAACV,OAAO,CAACG,IAAI,CAAC,CAACD,KAAK,CAAC,CAAA;EAC5C,IAAME,MAAM,GAAGM,SAAS,CAACV,OAAO,CAACG,IAAI,CAAC,CAACC,MAAM,CAAC,CAAA;EAE9C,oBACEO,GAAA,CAACC,GAAG,EAAA;AAACV,IAAAA,KAAK,EAAEA,KAAM;AAACE,IAAAA,MAAM,EAAEA,MAAO;AAACS,IAAAA,OAAO,EAAC,SAAS;AAACC,IAAAA,IAAI,EAAC,MAAM;IAAAC,QAAA,eAC9DJ,GAAA,CAACK,IAAI,EAAA;AACHC,MAAAA,QAAQ,EAAC,SAAS;AAClBC,MAAAA,QAAQ,EAAC,SAAS;AAClBC,MAAAA,CAAC,EAAC,0NAA0N;AAC5NL,MAAAA,IAAI,EAAEL,KAAM;AACZW,MAAAA,MAAM,EAAEX,KAAM;AACdY,MAAAA,WAAW,EAAC,KAAK;AACjBC,MAAAA,aAAa,EAAC,OAAO;AACrBC,MAAAA,cAAc,EAAC,OAAA;KAChB,CAAA;AAAC,GACC,CAAC,CAAA;AAEV,CAAC,CAAA;AAUD,IAAMG,YAAY,GAAG,SAAfA,YAAYA,CAAAC,KAAA,EAMO;AAAA,EAAA,IALvBC,SAAS,GAAAD,KAAA,CAATC,SAAS;IACTC,eAAe,GAAAF,KAAA,CAAfE,eAAe;IACfC,UAAU,GAAAH,KAAA,CAAVG,UAAU;IACVC,UAAU,GAAAJ,KAAA,CAAVI,UAAU;IACV5B,IAAI,GAAAwB,KAAA,CAAJxB,IAAI,CAAA;AAEJ,EAAA,IAAA6B,SAAA,GAAkBC,QAAQ,EAAE;IAApBC,KAAK,GAAAF,SAAA,CAALE,KAAK,CAAA;AACb,EAAA,IAAMC,SAAS,GAAGC,KAAK,CAACF,KAAK,EAAE,0CAA0C,CAAC,CAAA;AAC1E,EAAA,oBACEG,IAAA,CAACC,mBAAmB,EAAAC,aAAA,CAAAA,aAAA,CAAA;AAClBpC,IAAAA,IAAI,EAAEA,IAAK;AACX0B,IAAAA,eAAe,EAAEA,eAAgB;AACjCC,IAAAA,UAAU,EAAEA,UAAW;AACvBC,IAAAA,UAAU,EAAEA,UAAW;AACvBH,IAAAA,SAAS,EAAE,CAAC,EAAEA,SAAS,IAAIC,eAAe,CAAA;AAAE,GAAA,EACxCW,aAAa,CAAC;AAAEC,IAAAA,IAAI,EAAE,uBAAA;AAAwB,GAAC,CAAC,CAAA,EAAA,EAAA,EAAA;IAAA1B,QAAA,EAAA,cAEpDJ,GAAA,CAAC+B,IAAI,EAAA;AAACC,MAAAA,IAAI,EAAEd,eAAgB;AAACe,MAAAA,MAAM,EAAE;AAAEC,QAAAA,QAAQ,EAAE,UAAU;AAAEC,QAAAA,OAAO,EAAE,MAAA;OAAS;MAAA/B,QAAA,eAC7EJ,GAAA,CAACa,iBAAiB,EAAA;AAACrB,QAAAA,IAAI,EAAEA,IAAK;AAACM,QAAAA,KAAK,EAAE0B,SAAAA;OAAY,CAAA;AAAC,KAC/C,CAAC,eACPxB,GAAA,CAAC+B,IAAI,EAAA;AACHC,MAAAA,IAAI,EAAEI,OAAO,CAACnB,SAAS,CAAC,IAAI,CAACC,eAAgB;AAC7Ce,MAAAA,MAAM,EAAE;AAAEC,QAAAA,QAAQ,EAAE,UAAU;AAAEC,QAAAA,OAAO,EAAE,MAAA;OAAS;AAAA/B,MAAAA,QAAA,EAEjDa,SAAS,gBAAGjB,GAAA,CAACJ,WAAW,EAAA;AAACJ,QAAAA,IAAI,EAAEA,IAAK;AAACM,QAAAA,KAAK,EAAE0B,SAAAA;AAAU,OAAE,CAAC,GAAG,IAAA;AAAI,KAC7D,CAAC,CAAA;AAAA,GAAA,CACY,CAAC,CAAA;AAE1B;;;;"}

package/build/lib/web/production/components/Checkbox/checkboxTokens.js

@@ -5,12 +5,16 @@ var checkboxSizes = {
   group: {
     gap: {
       small: {
-        mobile: 'spacing.2',
-        desktop: 'spacing.0'
-      },
-      medium: {
         mobile: 'spacing.3',
         desktop: 'spacing.2'
+      },
+      medium: {
+        mobile: 'spacing.4',
+        desktop: 'spacing.3'
+      },
+      large: {
+        mobile: 'spacing.5',
+        desktop: 'spacing.4'
       }
     }
   },
@@ -22,6 +26,10 @@ var checkboxSizes = {
     medium: {
       width: size[16],
       height: size[16]
+    },
+    large: {
+      width: size[20],
+      height: size[20]
     }
   }
 };

package/build/lib/web/production/components/Checkbox/checkboxTokens.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkboxTokens.js","sources":["../../../../../../src/components/Checkbox/checkboxTokens.ts"],"sourcesContent":["import type { DotNotationToken } from '../../utils/lodashButBetter/get';\nimport type { Theme } from '~components/BladeProvider';\nimport type { SelectorInputHoverTokens } from '~components/Form/Selector/types';\nimport { size } from '~tokens/global';\n\nconst checkboxSizes = {\n  group: {\n    gap: {\n      small: {\n        mobile: 'spacing.2',\n        desktop: 'spacing.0',\n      },\n      medium: {\n        mobile: 'spacing.3',\n        desktop: 'spacing.2',\n      },\n    },\n  },\n  icon: {\n    small: {\n      width: size[12],\n      height: size[12],\n    },\n    medium: {\n      width: size[16],\n      height: size[16],\n    },\n  },\n} as const;\n\ntype ColorTokens = `colors.${DotNotationToken<Theme['colors']>}`;\ntype Variant = {\n  border: {\n    checked: ColorTokens;\n    unchecked: ColorTokens;\n  };\n  background: {\n    checked: ColorTokens;\n    unchecked: ColorTokens;\n  };\n};\n\ntype CheckboxIconColors = {\n  variants: {\n    default: Variant;\n    disabled: Variant;\n    negative: Variant;\n  };\n};\n\nconst checkboxIconColors: CheckboxIconColors = {\n  variants: {\n    default: {\n      border: {\n        checked: 'colors.interactive.border.primary.default',\n        unchecked: 'colors.interactive.border.gray.default',\n      },\n      background: {\n        checked: 'colors.interactive.background.primary.default',\n        unchecked: 'colors.transparent',\n      },\n    },\n    disabled: {\n      border: {\n        checked: 'colors.interactive.border.primary.disabled',\n        unchecked: 'colors.interactive.border.gray.disabled',\n      },\n      background: {\n        checked: 'colors.interactive.background.primary.disabled',\n        unchecked: 'colors.transparent',\n      },\n    },\n    negative: {\n      border: {\n        checked: 'colors.interactive.border.negative.default',\n        unchecked: 'colors.interactive.border.negative.default',\n      },\n      background: {\n        checked: 'colors.interactive.background.negative.default',\n        unchecked: 'colors.transparent',\n      },\n    },\n  },\n} as const;\n\nconst checkboxHoverTokens: SelectorInputHoverTokens = {\n  default: {\n    background: {\n      checked: 'colors.interactive.background.primary.highlighted',\n      unchecked: 'colors.interactive.background.gray.faded',\n    },\n    border: {\n      checked: 'colors.interactive.background.primary.highlighted', // Intentionally not using border tokens here since we want to match the background color\n      unchecked: 'colors.interactive.border.gray.default',\n    },\n  },\n};\n\nexport { checkboxSizes, checkboxIconColors, checkboxHoverTokens };\n"],"names":["checkboxSizes","group","gap","small","mobile","desktop","medium","icon","width","size","height","checkboxIconColors","variants","border","checked","unchecked","background","disabled","negative","checkboxHoverTokens"],"mappings":";;;AAKA,IAAMA,aAAa,GAAG;AACpBC,EAAAA,KAAK,EAAE;AACLC,IAAAA,GAAG,EAAE;AACHC,MAAAA,KAAK,EAAE;AACLC,QAAAA,MAAM,EAAE,WAAW;AACnBC,QAAAA,OAAO,EAAE,WAAA;OACV;AACDC,MAAAA,MAAM,EAAE;AACNF,QAAAA,MAAM,EAAE,WAAW;AACnBC,QAAAA,OAAO,EAAE,WAAA;AACX,OAAA;AACF,KAAA;GACD;AACDE,EAAAA,IAAI,EAAE;AACJJ,IAAAA,KAAK,EAAE;AACLK,MAAAA,KAAK,EAAEC,IAAI,CAAC,EAAE,CAAC;MACfC,MAAM,EAAED,IAAI,CAAC,EAAE,CAAA;KAChB;AACDH,IAAAA,MAAM,EAAE;AACNE,MAAAA,KAAK,EAAEC,IAAI,CAAC,EAAE,CAAC;MACfC,MAAM,EAAED,IAAI,CAAC,EAAE,CAAA;AACjB,KAAA;AACF,GAAA;AACF,EAAU;AAsBV,IAAME,kBAAsC,GAAG;AAC7CC,EAAAA,QAAQ,EAAE;IACR,SAAS,EAAA;AACPC,MAAAA,MAAM,EAAE;AACNC,QAAAA,OAAO,EAAE,2CAA2C;AACpDC,QAAAA,SAAS,EAAE,wCAAA;OACZ;AACDC,MAAAA,UAAU,EAAE;AACVF,QAAAA,OAAO,EAAE,+CAA+C;AACxDC,QAAAA,SAAS,EAAE,oBAAA;AACb,OAAA;KACD;AACDE,IAAAA,QAAQ,EAAE;AACRJ,MAAAA,MAAM,EAAE;AACNC,QAAAA,OAAO,EAAE,4CAA4C;AACrDC,QAAAA,SAAS,EAAE,yCAAA;OACZ;AACDC,MAAAA,UAAU,EAAE;AACVF,QAAAA,OAAO,EAAE,gDAAgD;AACzDC,QAAAA,SAAS,EAAE,oBAAA;AACb,OAAA;KACD;AACDG,IAAAA,QAAQ,EAAE;AACRL,MAAAA,MAAM,EAAE;AACNC,QAAAA,OAAO,EAAE,4CAA4C;AACrDC,QAAAA,SAAS,EAAE,4CAAA;OACZ;AACDC,MAAAA,UAAU,EAAE;AACVF,QAAAA,OAAO,EAAE,gDAAgD;AACzDC,QAAAA,SAAS,EAAE,oBAAA;AACb,OAAA;AACF,KAAA;AACF,GAAA;AACF,EAAU;AAEV,IAAMI,mBAA6C,GAAG;EACpD,SAAS,EAAA;AACPH,IAAAA,UAAU,EAAE;AACVF,MAAAA,OAAO,EAAE,mDAAmD;AAC5DC,MAAAA,SAAS,EAAE,0CAAA;KACZ;AACDF,IAAAA,MAAM,EAAE;AACNC,MAAAA,OAAO,EAAE,mDAAmD;AAAE;AAC9DC,MAAAA,SAAS,EAAE,wCAAA;AACb,KAAA;AACF,GAAA;AACF;;;;"}
+{"version":3,"file":"checkboxTokens.js","sources":["../../../../../../src/components/Checkbox/checkboxTokens.ts"],"sourcesContent":["import type { DotNotationToken } from '../../utils/lodashButBetter/get';\nimport type { Theme } from '~components/BladeProvider';\nimport type { SelectorInputHoverTokens } from '~components/Form/Selector/types';\nimport { size } from '~tokens/global';\n\nconst checkboxSizes = {\n  group: {\n    gap: {\n      small: {\n        mobile: 'spacing.3',\n        desktop: 'spacing.2',\n      },\n      medium: {\n        mobile: 'spacing.4',\n        desktop: 'spacing.3',\n      },\n      large: {\n        mobile: 'spacing.5',\n        desktop: 'spacing.4',\n      },\n    },\n  },\n  icon: {\n    small: {\n      width: size[12],\n      height: size[12],\n    },\n    medium: {\n      width: size[16],\n      height: size[16],\n    },\n    large: {\n      width: size[20],\n      height: size[20],\n    },\n  },\n} as const;\n\ntype ColorTokens = `colors.${DotNotationToken<Theme['colors']>}`;\ntype Variant = {\n  border: {\n    checked: ColorTokens;\n    unchecked: ColorTokens;\n  };\n  background: {\n    checked: ColorTokens;\n    unchecked: ColorTokens;\n  };\n};\n\ntype CheckboxIconColors = {\n  variants: {\n    default: Variant;\n    disabled: Variant;\n    negative: Variant;\n  };\n};\n\nconst checkboxIconColors: CheckboxIconColors = {\n  variants: {\n    default: {\n      border: {\n        checked: 'colors.interactive.border.primary.default',\n        unchecked: 'colors.interactive.border.gray.default',\n      },\n      background: {\n        checked: 'colors.interactive.background.primary.default',\n        unchecked: 'colors.transparent',\n      },\n    },\n    disabled: {\n      border: {\n        checked: 'colors.interactive.border.primary.disabled',\n        unchecked: 'colors.interactive.border.gray.disabled',\n      },\n      background: {\n        checked: 'colors.interactive.background.primary.disabled',\n        unchecked: 'colors.transparent',\n      },\n    },\n    negative: {\n      border: {\n        checked: 'colors.interactive.border.negative.default',\n        unchecked: 'colors.interactive.border.negative.default',\n      },\n      background: {\n        checked: 'colors.interactive.background.negative.default',\n        unchecked: 'colors.transparent',\n      },\n    },\n  },\n} as const;\n\nconst checkboxHoverTokens: SelectorInputHoverTokens = {\n  default: {\n    background: {\n      checked: 'colors.interactive.background.primary.highlighted',\n      unchecked: 'colors.interactive.background.gray.faded',\n    },\n    border: {\n      checked: 'colors.interactive.background.primary.highlighted', // Intentionally not using border tokens here since we want to match the background color\n      unchecked: 'colors.interactive.border.gray.default',\n    },\n  },\n};\n\nexport { checkboxSizes, checkboxIconColors, checkboxHoverTokens };\n"],"names":["checkboxSizes","group","gap","small","mobile","desktop","medium","large","icon","width","size","height","checkboxIconColors","variants","border","checked","unchecked","background","disabled","negative","checkboxHoverTokens"],"mappings":";;;AAKA,IAAMA,aAAa,GAAG;AACpBC,EAAAA,KAAK,EAAE;AACLC,IAAAA,GAAG,EAAE;AACHC,MAAAA,KAAK,EAAE;AACLC,QAAAA,MAAM,EAAE,WAAW;AACnBC,QAAAA,OAAO,EAAE,WAAA;OACV;AACDC,MAAAA,MAAM,EAAE;AACNF,QAAAA,MAAM,EAAE,WAAW;AACnBC,QAAAA,OAAO,EAAE,WAAA;OACV;AACDE,MAAAA,KAAK,EAAE;AACLH,QAAAA,MAAM,EAAE,WAAW;AACnBC,QAAAA,OAAO,EAAE,WAAA;AACX,OAAA;AACF,KAAA;GACD;AACDG,EAAAA,IAAI,EAAE;AACJL,IAAAA,KAAK,EAAE;AACLM,MAAAA,KAAK,EAAEC,IAAI,CAAC,EAAE,CAAC;MACfC,MAAM,EAAED,IAAI,CAAC,EAAE,CAAA;KAChB;AACDJ,IAAAA,MAAM,EAAE;AACNG,MAAAA,KAAK,EAAEC,IAAI,CAAC,EAAE,CAAC;MACfC,MAAM,EAAED,IAAI,CAAC,EAAE,CAAA;KAChB;AACDH,IAAAA,KAAK,EAAE;AACLE,MAAAA,KAAK,EAAEC,IAAI,CAAC,EAAE,CAAC;MACfC,MAAM,EAAED,IAAI,CAAC,EAAE,CAAA;AACjB,KAAA;AACF,GAAA;AACF,EAAU;AAsBV,IAAME,kBAAsC,GAAG;AAC7CC,EAAAA,QAAQ,EAAE;IACR,SAAS,EAAA;AACPC,MAAAA,MAAM,EAAE;AACNC,QAAAA,OAAO,EAAE,2CAA2C;AACpDC,QAAAA,SAAS,EAAE,wCAAA;OACZ;AACDC,MAAAA,UAAU,EAAE;AACVF,QAAAA,OAAO,EAAE,+CAA+C;AACxDC,QAAAA,SAAS,EAAE,oBAAA;AACb,OAAA;KACD;AACDE,IAAAA,QAAQ,EAAE;AACRJ,MAAAA,MAAM,EAAE;AACNC,QAAAA,OAAO,EAAE,4CAA4C;AACrDC,QAAAA,SAAS,EAAE,yCAAA;OACZ;AACDC,MAAAA,UAAU,EAAE;AACVF,QAAAA,OAAO,EAAE,gDAAgD;AACzDC,QAAAA,SAAS,EAAE,oBAAA;AACb,OAAA;KACD;AACDG,IAAAA,QAAQ,EAAE;AACRL,MAAAA,MAAM,EAAE;AACNC,QAAAA,OAAO,EAAE,4CAA4C;AACrDC,QAAAA,SAAS,EAAE,4CAAA;OACZ;AACDC,MAAAA,UAAU,EAAE;AACVF,QAAAA,OAAO,EAAE,gDAAgD;AACzDC,QAAAA,SAAS,EAAE,oBAAA;AACb,OAAA;AACF,KAAA;AACF,GAAA;AACF,EAAU;AAEV,IAAMI,mBAA6C,GAAG;EACpD,SAAS,EAAA;AACPH,IAAAA,UAAU,EAAE;AACVF,MAAAA,OAAO,EAAE,mDAAmD;AAC5DC,MAAAA,SAAS,EAAE,0CAAA;KACZ;AACDF,IAAAA,MAAM,EAAE;AACNC,MAAAA,OAAO,EAAE,mDAAmD;AAAE;AAC9DC,MAAAA,SAAS,EAAE,wCAAA;AACb,KAAA;AACF,GAAA;AACF;;;;"}

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

@@ -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

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

@@ -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

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

@@ -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

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

@@ -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

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

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

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

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

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

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

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