@razorpay/blade 12.98.1 → 12.111.0

package/build/lib/web/development/components/FilterChip/BaseFilterChip.web.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseFilterChip.web.js","sources":["../../../../../../src/components/FilterChip/BaseFilterChip.web.tsx"],"sourcesContent":["import React from 'react';\nimport type { CSSObject } from 'styled-components';\nimport styled from 'styled-components';\nimport { FILTER_CHIP_HEIGHT } from './tokens';\nimport type { BaseFilterChipProps } from './types';\nimport { makeBorderSize, makeSpace } from '~utils';\nimport type { Theme } from '~components/BladeProvider';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport type { BladeElementRef } from '~utils/types';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\nimport { Box } from '~components/Box';\nimport BaseBox from '~components/Box/BaseBox';\nimport { Counter } from '~components/Counter';\nimport { Divider } from '~components/Divider';\nimport { ChevronDownIcon, CloseIcon } from '~components/Icons';\nimport { Text } from '~components/Typography';\nimport { getFocusRingStyles } from '~utils/getFocusRingStyles';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\n\nconst getInteractiveFilterItemStyles = ({ theme }: { theme: Theme }): CSSObject => {\n  return {\n    display: 'flex',\n    height: '100%',\n    alignItems: 'center',\n    border: 'none',\n    cursor: 'pointer',\n    color: 'currentcolor',\n    '&:not([disabled]):hover': {\n      backgroundColor: theme.colors.interactive.background.gray.faded,\n    },\n    '&[disabled]': {\n      cursor: 'not-allowed',\n    },\n    '&:focus-visible': {\n      ...getFocusRingStyles({ theme }),\n      outlineOffset: makeSpace(theme.spacing[1]),\n    },\n  };\n};\n\nconst StyledFilterChip = styled(BaseBox)<{ $isSelected?: boolean; $isDisabled?: boolean }>(\n  ({ theme, $isDisabled, $isSelected }) => {\n    return {\n      borderWidth: makeBorderSize(theme.border.width.thin),\n      borderColor: theme.colors.interactive.border.gray[$isDisabled ? 'disabled' : 'faded'],\n      height: FILTER_CHIP_HEIGHT,\n      borderRadius: theme.border.radius.small,\n      display: 'flex',\n      borderStyle: $isSelected ? 'solid' : 'dashed',\n      backgroundColor: theme.colors.surface.background.gray.intense,\n      color: theme.colors.interactive.text.gray[$isDisabled ? 'disabled' : 'muted'],\n      width: 'fit-content',\n    };\n  },\n);\n\nconst StyledFilterTrigger = styled.button<{ $isSelected?: boolean }>(({ theme, $isSelected }) => {\n  const { spacing } = theme;\n  return {\n    backgroundColor: theme.colors.transparent,\n    borderRadius: $isSelected ? theme.border.radius.none : theme.border.radius.small,\n    borderTopLeftRadius: theme.border.radius.small,\n    borderBottomLeftRadius: theme.border.radius.small,\n    paddingLeft: makeSpace(spacing[4]),\n    paddingRight: $isSelected ? makeSpace(spacing[2]) : makeSpace(spacing[3]),\n    gap: makeSpace(spacing[2]),\n    ...getInteractiveFilterItemStyles({ theme }),\n  };\n});\n\nconst StyledFilterCloseButton = styled.button(({ theme }) => {\n  return {\n    backgroundColor: theme.colors.transparent,\n    borderTopRightRadius: theme.border.radius.small,\n    borderBottomRightRadius: theme.border.radius.small,\n    paddingLeft: makeSpace(theme.spacing[2] + theme.spacing[1]),\n    paddingRight: makeSpace(theme.spacing[2] + theme.spacing[1]),\n    justifyContent: 'center',\n    alignItems: 'center',\n    ...getInteractiveFilterItemStyles({ theme }),\n  };\n});\n\nconst renderValue = (\n  selectionType: BaseFilterChipProps['selectionType'],\n  value: BaseFilterChipProps['value'],\n  isDisabled?: boolean,\n): React.ReactElement => {\n  if (selectionType === 'multiple' && Array.isArray(value)) {\n    return (\n      <Box display=\"flex\" alignItems=\"center\">\n        <Counter value={value.length} color=\"neutral\" size=\"small\" />\n      </Box>\n    );\n  }\n\n  return (\n    <Text\n      as=\"span\"\n      size=\"small\"\n      weight=\"medium\"\n      color={isDisabled ? 'interactive.text.gray.disabled' : 'interactive.text.gray.normal'}\n    >\n      {value}\n    </Text>\n  );\n};\n\nconst _BaseFilterChip: React.ForwardRefRenderFunction<BladeElementRef, BaseFilterChipProps> = (\n  {\n    value,\n    onClearButtonClick,\n    label,\n    isDisabled,\n    selectionType = 'single',\n    onClick,\n    onKeyDown,\n    accessibilityProps,\n    id,\n    ...rest\n  }: BaseFilterChipProps,\n  ref: React.Ref<BladeElementRef>,\n): React.ReactElement => {\n  const isSelected =\n    selectionType === 'multiple' ? Array.isArray(value) && value.length > 0 : !!value;\n\n  return (\n    <StyledFilterChip\n      $isDisabled={isDisabled}\n      $isSelected={isSelected}\n      ref={ref as React.Ref<HTMLDivElement>}\n    >\n      <StyledFilterTrigger\n        $isSelected={isSelected}\n        disabled={isDisabled}\n        id={id}\n        onClick={(e) => {\n          // eslint-disable-next-line @typescript-eslint/no-explicit-any\n          onClick?.(e as any);\n        }}\n        onKeyDown={(e) => {\n          // eslint-disable-next-line @typescript-eslint/no-explicit-any\n          onKeyDown?.(e as any);\n        }}\n        {...makeAccessible({\n          ...accessibilityProps,\n          role: accessibilityProps?.role ?? 'button',\n        })}\n        {...getStyledProps(rest)}\n        {...makeAnalyticsAttribute(rest)}\n        {...metaAttribute({ name: 'filter-chip-trigger', testID: rest.testID })}\n      >\n        <Box display=\"flex\" gap=\"spacing.2\" whiteSpace=\"nowrap\" alignItems=\"center\">\n          <Text\n            size=\"small\"\n            weight=\"medium\"\n            color=\"interactive.text.gray.subtle\"\n            truncateAfterLines={1}\n          >\n            {label}\n            {isSelected ? ':' : null}\n          </Text>\n          {isSelected ? renderValue(selectionType, value, isDisabled) : null}\n        </Box>\n        <Box display=\"flex\" alignItems=\"center\" paddingRight=\"spacing.1\">\n          <ChevronDownIcon size=\"small\" color=\"interactive.icon.gray.muted\" />\n        </Box>\n      </StyledFilterTrigger>\n      {isSelected ? (\n        <>\n          <Divider orientation=\"vertical\" variant={isDisabled ? 'muted' : 'subtle'} />\n          <StyledFilterCloseButton\n            aria-label={`Clear ${label} value`}\n            // value can never be undefined because when it's undefined the button itself doesn't render/\n            onClick={() => onClearButtonClick?.({ value: value ?? '' })}\n            disabled={isDisabled}\n            {...metaAttribute({ name: 'filter-chip-close-button' })}\n          >\n            <CloseIcon size=\"small\" color=\"interactive.icon.gray.muted\" />\n          </StyledFilterCloseButton>\n        </>\n      ) : null}\n    </StyledFilterChip>\n  );\n};\n\nconst BaseFilterChip = assignWithoutSideEffects(React.forwardRef(_BaseFilterChip), {\n  componentId: MetaConstants.BaseFilterChip,\n});\n\nexport { BaseFilterChip };\n"],"names":["getInteractiveFilterItemStyles","_ref","theme","display","height","alignItems","border","cursor","color","backgroundColor","colors","interactive","background","gray","faded","_objectSpread","getFocusRingStyles","outlineOffset","makeSpace","spacing","StyledFilterChip","styled","BaseBox","withConfig","displayName","componentId","_ref2","$isDisabled","$isSelected","borderWidth","makeBorderSize","width","thin","borderColor","FILTER_CHIP_HEIGHT","borderRadius","radius","small","borderStyle","surface","intense","text","StyledFilterTrigger","button","_ref3","transparent","none","borderTopLeftRadius","borderBottomLeftRadius","paddingLeft","paddingRight","gap","StyledFilterCloseButton","_ref4","borderTopRightRadius","borderBottomRightRadius","justifyContent","renderValue","selectionType","value","isDisabled","Array","isArray","_jsx","Box","children","Counter","length","size","Text","as","weight","_BaseFilterChip","_ref5","ref","_accessibilityProps$r","onClearButtonClick","label","_ref5$selectionType","onClick","onKeyDown","accessibilityProps","id","rest","_objectWithoutProperties","_excluded","isSelected","_jsxs","disabled","e","makeAccessible","role","getStyledProps","makeAnalyticsAttribute","metaAttribute","name","testID","whiteSpace","truncateAfterLines","ChevronDownIcon","_Fragment","Divider","orientation","variant","concat","CloseIcon","BaseFilterChip","assignWithoutSideEffects","React","forwardRef","MetaConstants"],"mappings":"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"}
+{"version":3,"file":"BaseFilterChip.web.js","sources":["../../../../../../src/components/FilterChip/BaseFilterChip.web.tsx"],"sourcesContent":["import React from 'react';\nimport type { CSSObject } from 'styled-components';\nimport styled from 'styled-components';\nimport { FILTER_CHIP_HEIGHT } from './tokens';\nimport type { BaseFilterChipProps } from './types';\nimport { makeBorderSize, makeSpace } from '~utils';\nimport type { Theme } from '~components/BladeProvider';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport type { BladeElementRef } from '~utils/types';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\nimport { Box } from '~components/Box';\nimport BaseBox from '~components/Box/BaseBox';\nimport { Counter } from '~components/Counter';\nimport { Divider } from '~components/Divider';\nimport { ChevronDownIcon, CloseIcon } from '~components/Icons';\nimport { Text } from '~components/Typography';\nimport { getFocusRingStyles } from '~utils/getFocusRingStyles';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\n\nconst getInteractiveFilterItemStyles = ({ theme }: { theme: Theme }): CSSObject => {\n  return {\n    display: 'flex',\n    height: '100%',\n    alignItems: 'center',\n    border: 'none',\n    cursor: 'pointer',\n    color: 'currentcolor',\n    '&:not([disabled]):hover': {\n      backgroundColor: theme.colors.interactive.background.gray.faded,\n    },\n    '&[disabled]': {\n      cursor: 'not-allowed',\n    },\n    '&:focus-visible': {\n      ...getFocusRingStyles({ theme }),\n      outlineOffset: makeSpace(theme.spacing[1]),\n    },\n  };\n};\n\nconst StyledFilterChip = styled(BaseBox)<{ $isSelected?: boolean; $isDisabled?: boolean }>(\n  ({ theme, $isDisabled, $isSelected }) => {\n    return {\n      borderWidth: makeBorderSize(theme.border.width.thin),\n      borderColor: theme.colors.interactive.border.gray[$isDisabled ? 'disabled' : 'faded'],\n      height: FILTER_CHIP_HEIGHT,\n      borderRadius: theme.border.radius.small,\n      display: 'flex',\n      borderStyle: $isSelected ? 'solid' : 'dashed',\n      backgroundColor: theme.colors.surface.background.gray.intense,\n      color: theme.colors.interactive.text.gray[$isDisabled ? 'disabled' : 'muted'],\n      width: 'fit-content',\n    };\n  },\n);\n\nconst StyledFilterTrigger = styled.button<{ $hasClearButton?: boolean }>(\n  ({ theme, $hasClearButton }) => {\n    const { spacing } = theme;\n    return {\n      backgroundColor: theme.colors.transparent,\n      // When a clear button follows the trigger its right corners butt against the divider,\n      // so they're squared off. Without a clear button the trigger is a self-contained pill.\n      borderRadius: $hasClearButton ? theme.border.radius.none : theme.border.radius.small,\n      borderTopLeftRadius: theme.border.radius.small,\n      borderBottomLeftRadius: theme.border.radius.small,\n      paddingLeft: makeSpace(spacing[4]),\n      paddingRight: $hasClearButton ? makeSpace(spacing[2]) : makeSpace(spacing[3]),\n      gap: makeSpace(spacing[2]),\n      ...getInteractiveFilterItemStyles({ theme }),\n    };\n  },\n);\n\nconst StyledFilterCloseButton = styled.button(({ theme }) => {\n  return {\n    backgroundColor: theme.colors.transparent,\n    borderTopRightRadius: theme.border.radius.small,\n    borderBottomRightRadius: theme.border.radius.small,\n    paddingLeft: makeSpace(theme.spacing[2] + theme.spacing[1]),\n    paddingRight: makeSpace(theme.spacing[2] + theme.spacing[1]),\n    justifyContent: 'center',\n    alignItems: 'center',\n    ...getInteractiveFilterItemStyles({ theme }),\n  };\n});\n\nconst renderValue = (\n  selectionType: BaseFilterChipProps['selectionType'],\n  value: BaseFilterChipProps['value'],\n  isDisabled?: boolean,\n): React.ReactElement => {\n  const valueColor = isDisabled ? 'interactive.text.gray.disabled' : 'interactive.text.gray.normal';\n\n  // For multiple selection: when a single option is selected we show its name (no redundant\n  // \"1\" counter); once more than one is selected we collapse to a compact counter.\n  // Use an explicit type guard so a non-array value (e.g. a plain string returned by\n  // getFilterChipDisplayValue) never enters the array branch where .length would be\n  // misinterpreted as character count.\n  if (selectionType === 'multiple') {\n    const valueArray = Array.isArray(value) ? value : value != null ? [value] : [];\n    if (valueArray.length === 1) {\n      return (\n        <Text as=\"span\" size=\"small\" weight=\"medium\" color={valueColor} truncateAfterLines={1}>\n          {String(valueArray[0] ?? '')}\n        </Text>\n      );\n    }\n    return (\n      <Box display=\"flex\" alignItems=\"center\">\n        <Counter value={valueArray.length} color=\"neutral\" size=\"small\" />\n      </Box>\n    );\n  }\n\n  return (\n    <Text as=\"span\" size=\"small\" weight=\"medium\" color={valueColor}>\n      {value != null ? String(value) : ''}\n    </Text>\n  );\n};\n\nconst _BaseFilterChip: React.ForwardRefRenderFunction<BladeElementRef, BaseFilterChipProps> = (\n  {\n    value,\n    onClearButtonClick,\n    label,\n    isDisabled,\n    selectionType = 'single',\n    showClearButton = true,\n    onClick,\n    onKeyDown,\n    accessibilityProps,\n    id,\n    ...rest\n  }: BaseFilterChipProps,\n  ref: React.Ref<BladeElementRef>,\n): React.ReactElement => {\n  const isSelected =\n    selectionType === 'multiple' ? Array.isArray(value) && value.length > 0 : !!value;\n  const shouldShowClearButton = isSelected && showClearButton;\n\n  return (\n    <StyledFilterChip\n      $isDisabled={isDisabled}\n      $isSelected={isSelected}\n      ref={ref as React.Ref<HTMLDivElement>}\n    >\n      <StyledFilterTrigger\n        $hasClearButton={shouldShowClearButton}\n        disabled={isDisabled}\n        id={id}\n        onClick={(e) => {\n          // eslint-disable-next-line @typescript-eslint/no-explicit-any\n          onClick?.(e as any);\n        }}\n        onKeyDown={(e) => {\n          // eslint-disable-next-line @typescript-eslint/no-explicit-any\n          onKeyDown?.(e as any);\n        }}\n        {...makeAccessible({\n          ...accessibilityProps,\n          role: accessibilityProps?.role ?? 'button',\n        })}\n        {...getStyledProps(rest)}\n        {...makeAnalyticsAttribute(rest)}\n        {...metaAttribute({ name: 'filter-chip-trigger', testID: rest.testID })}\n      >\n        <Box display=\"flex\" gap=\"spacing.2\" whiteSpace=\"nowrap\" alignItems=\"center\">\n          <Text\n            size=\"small\"\n            weight=\"medium\"\n            color=\"interactive.text.gray.subtle\"\n            truncateAfterLines={1}\n          >\n            {label}\n            {isSelected ? ':' : null}\n          </Text>\n          {isSelected ? renderValue(selectionType, value, isDisabled) : null}\n        </Box>\n        <Box display=\"flex\" alignItems=\"center\" paddingRight=\"spacing.1\">\n          <ChevronDownIcon size=\"small\" color=\"interactive.icon.gray.muted\" />\n        </Box>\n      </StyledFilterTrigger>\n      {shouldShowClearButton ? (\n        <>\n          <Divider orientation=\"vertical\" variant={isDisabled ? 'muted' : 'subtle'} />\n          <StyledFilterCloseButton\n            aria-label={`Clear ${label} value`}\n            // value can never be undefined because when it's undefined the button itself doesn't render/\n            onClick={() => onClearButtonClick?.({ value: value ?? '' })}\n            disabled={isDisabled}\n            {...metaAttribute({ name: 'filter-chip-close-button' })}\n          >\n            <CloseIcon size=\"small\" color=\"interactive.icon.gray.muted\" />\n          </StyledFilterCloseButton>\n        </>\n      ) : null}\n    </StyledFilterChip>\n  );\n};\n\nconst BaseFilterChip = assignWithoutSideEffects(React.forwardRef(_BaseFilterChip), {\n  componentId: MetaConstants.BaseFilterChip,\n});\n\nexport { BaseFilterChip };\n"],"names":["getInteractiveFilterItemStyles","_ref","theme","display","height","alignItems","border","cursor","color","backgroundColor","colors","interactive","background","gray","faded","_objectSpread","getFocusRingStyles","outlineOffset","makeSpace","spacing","StyledFilterChip","styled","BaseBox","withConfig","displayName","componentId","_ref2","$isDisabled","$isSelected","borderWidth","makeBorderSize","width","thin","borderColor","FILTER_CHIP_HEIGHT","borderRadius","radius","small","borderStyle","surface","intense","text","StyledFilterTrigger","button","_ref3","$hasClearButton","transparent","none","borderTopLeftRadius","borderBottomLeftRadius","paddingLeft","paddingRight","gap","StyledFilterCloseButton","_ref4","borderTopRightRadius","borderBottomRightRadius","justifyContent","renderValue","selectionType","value","isDisabled","valueColor","valueArray","Array","isArray","length","_valueArray$","_jsx","Text","as","size","weight","truncateAfterLines","children","String","Box","Counter","_BaseFilterChip","_ref5","ref","_accessibilityProps$r","onClearButtonClick","label","_ref5$selectionType","_ref5$showClearButton","showClearButton","onClick","onKeyDown","accessibilityProps","id","rest","_objectWithoutProperties","_excluded","isSelected","shouldShowClearButton","_jsxs","disabled","e","makeAccessible","role","getStyledProps","makeAnalyticsAttribute","metaAttribute","name","testID","whiteSpace","ChevronDownIcon","_Fragment","Divider","orientation","variant","concat","CloseIcon","BaseFilterChip","assignWithoutSideEffects","React","forwardRef","MetaConstants"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBA,IAAMA,8BAA8B,GAAG,SAAjCA,8BAA8BA,CAAAC,IAAA,EAA+C;AAAA,EAAA,IAAzCC,KAAK,GAAAD,IAAA,CAALC,KAAK,CAAA;EAC7C,OAAO;AACLC,IAAAA,OAAO,EAAE,MAAM;AACfC,IAAAA,MAAM,EAAE,MAAM;AACdC,IAAAA,UAAU,EAAE,QAAQ;AACpBC,IAAAA,MAAM,EAAE,MAAM;AACdC,IAAAA,MAAM,EAAE,SAAS;AACjBC,IAAAA,KAAK,EAAE,cAAc;AACrB,IAAA,yBAAyB,EAAE;MACzBC,eAAe,EAAEP,KAAK,CAACQ,MAAM,CAACC,WAAW,CAACC,UAAU,CAACC,IAAI,CAACC,KAAAA;KAC3D;AACD,IAAA,aAAa,EAAE;AACbP,MAAAA,MAAM,EAAE,aAAA;KACT;AACD,IAAA,iBAAiB,EAAAQ,aAAA,CAAAA,aAAA,CAAA,EAAA,EACZC,kBAAkB,CAAC;AAAEd,MAAAA,KAAK,EAALA,KAAAA;AAAM,KAAC,CAAC,CAAA,EAAA,EAAA,EAAA;MAChCe,aAAa,EAAEC,SAAS,CAAChB,KAAK,CAACiB,OAAO,CAAC,CAAC,CAAC,CAAA;AAAC,KAAA,CAAA;GAE7C,CAAA;AACH,CAAC,CAAA;AAED,IAAMC,gBAAgB,gBAAGC,MAAM,CAACC,OAAO,CAAC,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,qCAAA;EAAAC,WAAA,EAAA,aAAA;AAAA,CACtC,CAAA,CAAA,UAAAC,KAAA,EAAyC;AAAA,EAAA,IAAtCxB,KAAK,GAAAwB,KAAA,CAALxB,KAAK;IAAEyB,WAAW,GAAAD,KAAA,CAAXC,WAAW;IAAEC,WAAW,GAAAF,KAAA,CAAXE,WAAW,CAAA;EAChC,OAAO;IACLC,WAAW,EAAEC,cAAc,CAAC5B,KAAK,CAACI,MAAM,CAACyB,KAAK,CAACC,IAAI,CAAC;AACpDC,IAAAA,WAAW,EAAE/B,KAAK,CAACQ,MAAM,CAACC,WAAW,CAACL,MAAM,CAACO,IAAI,CAACc,WAAW,GAAG,UAAU,GAAG,OAAO,CAAC;AACrFvB,IAAAA,MAAM,EAAE8B,kBAAkB;AAC1BC,IAAAA,YAAY,EAAEjC,KAAK,CAACI,MAAM,CAAC8B,MAAM,CAACC,KAAK;AACvClC,IAAAA,OAAO,EAAE,MAAM;AACfmC,IAAAA,WAAW,EAAEV,WAAW,GAAG,OAAO,GAAG,QAAQ;IAC7CnB,eAAe,EAAEP,KAAK,CAACQ,MAAM,CAAC6B,OAAO,CAAC3B,UAAU,CAACC,IAAI,CAAC2B,OAAO;AAC7DhC,IAAAA,KAAK,EAAEN,KAAK,CAACQ,MAAM,CAACC,WAAW,CAAC8B,IAAI,CAAC5B,IAAI,CAACc,WAAW,GAAG,UAAU,GAAG,OAAO,CAAC;AAC7EI,IAAAA,KAAK,EAAE,aAAA;GACR,CAAA;AACH,CAAC,CACF,CAAA;AAED,IAAMW,mBAAmB,gBAAGrB,MAAM,CAACsB,MAAM,CAAApB,UAAA,CAAA;EAAAC,WAAA,EAAA,wCAAA;EAAAC,WAAA,EAAA,aAAA;AAAA,CACvC,CAAA,CAAA,UAAAmB,KAAA,EAAgC;AAAA,EAAA,IAA7B1C,KAAK,GAAA0C,KAAA,CAAL1C,KAAK;IAAE2C,eAAe,GAAAD,KAAA,CAAfC,eAAe,CAAA;AACvB,EAAA,IAAQ1B,OAAO,GAAKjB,KAAK,CAAjBiB,OAAO,CAAA;AACf,EAAA,OAAAJ,aAAA,CAAA;AACEN,IAAAA,eAAe,EAAEP,KAAK,CAACQ,MAAM,CAACoC,WAAW;AACzC;AACA;AACAX,IAAAA,YAAY,EAAEU,eAAe,GAAG3C,KAAK,CAACI,MAAM,CAAC8B,MAAM,CAACW,IAAI,GAAG7C,KAAK,CAACI,MAAM,CAAC8B,MAAM,CAACC,KAAK;AACpFW,IAAAA,mBAAmB,EAAE9C,KAAK,CAACI,MAAM,CAAC8B,MAAM,CAACC,KAAK;AAC9CY,IAAAA,sBAAsB,EAAE/C,KAAK,CAACI,MAAM,CAAC8B,MAAM,CAACC,KAAK;AACjDa,IAAAA,WAAW,EAAEhC,SAAS,CAACC,OAAO,CAAC,CAAC,CAAC,CAAC;AAClCgC,IAAAA,YAAY,EAAEN,eAAe,GAAG3B,SAAS,CAACC,OAAO,CAAC,CAAC,CAAC,CAAC,GAAGD,SAAS,CAACC,OAAO,CAAC,CAAC,CAAC,CAAC;AAC7EiC,IAAAA,GAAG,EAAElC,SAAS,CAACC,OAAO,CAAC,CAAC,CAAC,CAAA;AAAC,GAAA,EACvBnB,8BAA8B,CAAC;AAAEE,IAAAA,KAAK,EAALA,KAAAA;AAAM,GAAC,CAAC,CAAA,CAAA;AAEhD,CAAC,CACF,CAAA;AAED,IAAMmD,uBAAuB,gBAAGhC,MAAM,CAACsB,MAAM,CAAApB,UAAA,CAAA;EAAAC,WAAA,EAAA,4CAAA;EAAAC,WAAA,EAAA,aAAA;AAAA,CAAC,CAAA,CAAA,UAAA6B,KAAA,EAAe;AAAA,EAAA,IAAZpD,KAAK,GAAAoD,KAAA,CAALpD,KAAK,CAAA;AACpD,EAAA,OAAAa,aAAA,CAAA;AACEN,IAAAA,eAAe,EAAEP,KAAK,CAACQ,MAAM,CAACoC,WAAW;AACzCS,IAAAA,oBAAoB,EAAErD,KAAK,CAACI,MAAM,CAAC8B,MAAM,CAACC,KAAK;AAC/CmB,IAAAA,uBAAuB,EAAEtD,KAAK,CAACI,MAAM,CAAC8B,MAAM,CAACC,KAAK;AAClDa,IAAAA,WAAW,EAAEhC,SAAS,CAAChB,KAAK,CAACiB,OAAO,CAAC,CAAC,CAAC,GAAGjB,KAAK,CAACiB,OAAO,CAAC,CAAC,CAAC,CAAC;AAC3DgC,IAAAA,YAAY,EAAEjC,SAAS,CAAChB,KAAK,CAACiB,OAAO,CAAC,CAAC,CAAC,GAAGjB,KAAK,CAACiB,OAAO,CAAC,CAAC,CAAC,CAAC;AAC5DsC,IAAAA,cAAc,EAAE,QAAQ;AACxBpD,IAAAA,UAAU,EAAE,QAAA;AAAQ,GAAA,EACjBL,8BAA8B,CAAC;AAAEE,IAAAA,KAAK,EAALA,KAAAA;AAAM,GAAC,CAAC,CAAA,CAAA;AAEhD,CAAC,CAAC,CAAA;AAEF,IAAMwD,WAAW,GAAG,SAAdA,WAAWA,CACfC,aAAmD,EACnDC,KAAmC,EACnCC,UAAoB,EACG;AACvB,EAAA,IAAMC,UAAU,GAAGD,UAAU,GAAG,gCAAgC,GAAG,8BAA8B,CAAA;;AAEjG;AACA;AACA;AACA;AACA;EACA,IAAIF,aAAa,KAAK,UAAU,EAAE;AAChC,IAAA,IAAMI,UAAU,GAAGC,KAAK,CAACC,OAAO,CAACL,KAAK,CAAC,GAAGA,KAAK,GAAGA,KAAK,IAAI,IAAI,GAAG,CAACA,KAAK,CAAC,GAAG,EAAE,CAAA;AAC9E,IAAA,IAAIG,UAAU,CAACG,MAAM,KAAK,CAAC,EAAE;AAAA,MAAA,IAAAC,YAAA,CAAA;MAC3B,oBACEC,GAAA,CAACC,IAAI,EAAA;AAACC,QAAAA,EAAE,EAAC,MAAM;AAACC,QAAAA,IAAI,EAAC,OAAO;AAACC,QAAAA,MAAM,EAAC,QAAQ;AAAChE,QAAAA,KAAK,EAAEsD,UAAW;AAACW,QAAAA,kBAAkB,EAAE,CAAE;AAAAC,QAAAA,QAAA,EACnFC,MAAM,CAAAR,CAAAA,YAAA,GAACJ,UAAU,CAAC,CAAC,CAAC,MAAAI,IAAAA,IAAAA,YAAA,KAAAA,KAAAA,CAAAA,GAAAA,YAAA,GAAI,EAAE,CAAA;AAAC,OACxB,CAAC,CAAA;AAEX,KAAA;IACA,oBACEC,GAAA,CAACQ,GAAG,EAAA;AAACzE,MAAAA,OAAO,EAAC,MAAM;AAACE,MAAAA,UAAU,EAAC,QAAQ;MAAAqE,QAAA,eACrCN,GAAA,CAACS,OAAO,EAAA;QAACjB,KAAK,EAAEG,UAAU,CAACG,MAAO;AAAC1D,QAAAA,KAAK,EAAC,SAAS;AAAC+D,QAAAA,IAAI,EAAC,OAAA;OAAS,CAAA;AAAC,KAC/D,CAAC,CAAA;AAEV,GAAA;EAEA,oBACEH,GAAA,CAACC,IAAI,EAAA;AAACC,IAAAA,EAAE,EAAC,MAAM;AAACC,IAAAA,IAAI,EAAC,OAAO;AAACC,IAAAA,MAAM,EAAC,QAAQ;AAAChE,IAAAA,KAAK,EAAEsD,UAAW;IAAAY,QAAA,EAC5Dd,KAAK,IAAI,IAAI,GAAGe,MAAM,CAACf,KAAK,CAAC,GAAG,EAAA;AAAE,GAC/B,CAAC,CAAA;AAEX,CAAC,CAAA;AAED,IAAMkB,eAAqF,GAAG,SAAxFA,eAAqFA,CAAAC,KAAA,EAczFC,GAA+B,EACR;AAAA,EAAA,IAAAC,qBAAA,CAAA;AAAA,EAAA,IAbrBrB,KAAK,GAAAmB,KAAA,CAALnB,KAAK;IACLsB,kBAAkB,GAAAH,KAAA,CAAlBG,kBAAkB;IAClBC,KAAK,GAAAJ,KAAA,CAALI,KAAK;IACLtB,UAAU,GAAAkB,KAAA,CAAVlB,UAAU;IAAAuB,mBAAA,GAAAL,KAAA,CACVpB,aAAa;AAAbA,IAAAA,aAAa,GAAAyB,mBAAA,KAAG,KAAA,CAAA,GAAA,QAAQ,GAAAA,mBAAA;IAAAC,qBAAA,GAAAN,KAAA,CACxBO,eAAe;AAAfA,IAAAA,eAAe,GAAAD,qBAAA,KAAG,KAAA,CAAA,GAAA,IAAI,GAAAA,qBAAA;IACtBE,QAAO,GAAAR,KAAA,CAAPQ,OAAO;IACPC,UAAS,GAAAT,KAAA,CAATS,SAAS;IACTC,kBAAkB,GAAAV,KAAA,CAAlBU,kBAAkB;IAClBC,EAAE,GAAAX,KAAA,CAAFW,EAAE;AACCC,IAAAA,IAAI,GAAAC,wBAAA,CAAAb,KAAA,EAAAc,SAAA,CAAA,CAAA;EAIT,IAAMC,UAAU,GACdnC,aAAa,KAAK,UAAU,GAAGK,KAAK,CAACC,OAAO,CAACL,KAAK,CAAC,IAAIA,KAAK,CAACM,MAAM,GAAG,CAAC,GAAG,CAAC,CAACN,KAAK,CAAA;AACnF,EAAA,IAAMmC,qBAAqB,GAAGD,UAAU,IAAIR,eAAe,CAAA;EAE3D,oBACEU,IAAA,CAAC5E,gBAAgB,EAAA;AACfO,IAAAA,WAAW,EAAEkC,UAAW;AACxBjC,IAAAA,WAAW,EAAEkE,UAAW;AACxBd,IAAAA,GAAG,EAAEA,GAAiC;AAAAN,IAAAA,QAAA,EAEtCsB,cAAAA,IAAA,CAACtD,mBAAmB,EAAA3B,aAAA,CAAAA,aAAA,CAAAA,aAAA,CAAAA,aAAA,CAAAA,aAAA,CAAA;AAClB8B,MAAAA,eAAe,EAAEkD,qBAAsB;AACvCE,MAAAA,QAAQ,EAAEpC,UAAW;AACrB6B,MAAAA,EAAE,EAAEA,EAAG;AACPH,MAAAA,OAAO,EAAE,SAATA,OAAOA,CAAGW,CAAC,EAAK;AACd;AACAX,QAAAA,QAAO,aAAPA,QAAO,KAAA,KAAA,CAAA,IAAPA,QAAO,CAAGW,CAAQ,CAAC,CAAA;OACnB;AACFV,MAAAA,SAAS,EAAE,SAAXA,SAASA,CAAGU,CAAC,EAAK;AAChB;AACAV,QAAAA,UAAS,aAATA,UAAS,KAAA,KAAA,CAAA,IAATA,UAAS,CAAGU,CAAQ,CAAC,CAAA;AACvB,OAAA;AAAE,KAAA,EACEC,cAAc,CAAApF,aAAA,CAAAA,aAAA,KACb0E,kBAAkB,CAAA,EAAA,EAAA,EAAA;AACrBW,MAAAA,IAAI,EAAAnB,CAAAA,qBAAA,GAAEQ,kBAAkB,aAAlBA,kBAAkB,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAlBA,kBAAkB,CAAEW,IAAI,MAAA,IAAA,IAAAnB,qBAAA,KAAA,KAAA,CAAA,GAAAA,qBAAA,GAAI,QAAA;AAAQ,KAAA,CAC3C,CAAC,CAAA,EACEoB,cAAc,CAACV,IAAI,CAAC,CACpBW,EAAAA,sBAAsB,CAACX,IAAI,CAAC,CAAA,EAC5BY,aAAa,CAAC;AAAEC,MAAAA,IAAI,EAAE,qBAAqB;MAAEC,MAAM,EAAEd,IAAI,CAACc,MAAAA;AAAO,KAAC,CAAC,CAAA,EAAA,EAAA,EAAA;MAAA/B,QAAA,EAAA,cAEvEsB,IAAA,CAACpB,GAAG,EAAA;AAACzE,QAAAA,OAAO,EAAC,MAAM;AAACiD,QAAAA,GAAG,EAAC,WAAW;AAACsD,QAAAA,UAAU,EAAC,QAAQ;AAACrG,QAAAA,UAAU,EAAC,QAAQ;QAAAqE,QAAA,EAAA,cACzEsB,IAAA,CAAC3B,IAAI,EAAA;AACHE,UAAAA,IAAI,EAAC,OAAO;AACZC,UAAAA,MAAM,EAAC,QAAQ;AACfhE,UAAAA,KAAK,EAAC,8BAA8B;AACpCiE,UAAAA,kBAAkB,EAAE,CAAE;AAAAC,UAAAA,QAAA,GAErBS,KAAK,EACLW,UAAU,GAAG,GAAG,GAAG,IAAI,CAAA;AAAA,SACpB,CAAC,EACNA,UAAU,GAAGpC,WAAW,CAACC,aAAa,EAAEC,KAAK,EAAEC,UAAU,CAAC,GAAG,IAAI,CAAA;AAAA,OAC/D,CAAC,eACNO,GAAA,CAACQ,GAAG,EAAA;AAACzE,QAAAA,OAAO,EAAC,MAAM;AAACE,QAAAA,UAAU,EAAC,QAAQ;AAAC8C,QAAAA,YAAY,EAAC,WAAW;QAAAuB,QAAA,eAC9DN,GAAA,CAACuC,eAAe,EAAA;AAACpC,UAAAA,IAAI,EAAC,OAAO;AAAC/D,UAAAA,KAAK,EAAC,6BAAA;SAA+B,CAAA;AAAC,OACjE,CAAC,CAAA;AAAA,KAAA,CACa,CAAC,EACrBuF,qBAAqB,gBACpBC,IAAA,CAAAY,QAAA,EAAA;MAAAlC,QAAA,EAAA,cACEN,GAAA,CAACyC,OAAO,EAAA;AAACC,QAAAA,WAAW,EAAC,UAAU;AAACC,QAAAA,OAAO,EAAElD,UAAU,GAAG,OAAO,GAAG,QAAA;OAAW,CAAC,eAC5EO,GAAA,CAACf,uBAAuB,EAAAtC,aAAA,CAAAA,aAAA,CAAA;QACtB,YAAAiG,EAAAA,QAAAA,CAAAA,MAAA,CAAqB7B,KAAK,EAAA,QAAA,CAAA;AAC1B;AAAA;QACAI,OAAO,EAAE,SAATA,OAAOA,GAAA;AAAA,UAAA,OAAQL,kBAAkB,KAAA,IAAA,IAAlBA,kBAAkB,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAlBA,kBAAkB,CAAG;AAAEtB,YAAAA,KAAK,EAAEA,KAAK,KAAA,IAAA,IAALA,KAAK,KAAA,KAAA,CAAA,GAALA,KAAK,GAAI,EAAA;AAAG,WAAC,CAAC,CAAA;SAAC;AAC5DqC,QAAAA,QAAQ,EAAEpC,UAAAA;AAAW,OAAA,EACjB0C,aAAa,CAAC;AAAEC,QAAAA,IAAI,EAAE,0BAAA;AAA2B,OAAC,CAAC,CAAA,EAAA,EAAA,EAAA;QAAA9B,QAAA,eAEvDN,GAAA,CAAC6C,SAAS,EAAA;AAAC1C,UAAAA,IAAI,EAAC,OAAO;AAAC/D,UAAAA,KAAK,EAAC,6BAAA;SAA+B,CAAA;AAAC,OAAA,CACvC,CAAC,CAAA;KAC1B,CAAC,GACD,IAAI,CAAA;AAAA,GACQ,CAAC,CAAA;AAEvB,CAAC,CAAA;AAEK0G,IAAAA,cAAc,gBAAGC,wBAAwB,cAACC,cAAK,CAACC,UAAU,CAACvC,eAAe,CAAC,EAAE;EACjFrD,WAAW,EAAE6F,aAAa,CAACJ,cAAAA;AAC7B,CAAC;;;;"}

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

@@ -29,10 +29,10 @@ var HintText = function HintText(_ref) {
     children: /*#__PURE__*/jsxs(FormHintWrapper, {
       children: [Icon ?
       /*#__PURE__*/
-      // offset block element 2px down to align with text
+      // offset block element 2px down to align with text baseline on web only
       jsx(Box, {
         flexShrink: 0,
-        marginTop: "spacing.1",
+        marginTop: isReactNative ? 'spacing.0' : 'spacing.1',
         children: /*#__PURE__*/jsx(Icon, {})
       }) : null, /*#__PURE__*/jsx(Text, {
         as: isReactNative ? undefined : 'span',
@@ -40,7 +40,7 @@ var HintText = function HintText(_ref) {
         size: hintTextSize[size],
         variant: "caption",
         wordBreak: "break-word",
-        marginTop: size === 'large' && Icon ? 'spacing.1' : 'spacing.0',
+        marginTop: !isReactNative && size === 'large' && Icon ? 'spacing.1' : 'spacing.0',
         children: children
       })]
     })

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 { 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 type { IconComponent } from '~components/Icons';\nimport { CheckIcon, InfoIcon } from '~components/Icons';\nimport { getPlatformType } from '~utils/getPlatformType';\nimport { Box } from '~components/Box';\n\ntype HintTextProps = {\n  icon?: IconComponent;\n  children: string;\n  id?: string;\n  color: TextProps<{ variant: 'caption' }>['color'];\n  size: 'xsmall' | '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 ? (\n          // offset block element 2px down to align with text\n          <Box flexShrink={0} marginTop=\"spacing.1\">\n            <Icon />\n          </Box>\n        ) : null}\n        <Text\n          as={isReactNative ? undefined : 'span'}\n          color={color}\n          size={hintTextSize[size]}\n          variant=\"caption\"\n          wordBreak=\"break-word\"\n          marginTop={size === 'large' && Icon ? 'spacing.1' : 'spacing.0'}\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?: 'xsmall' | 'small' | 'medium' | 'large';\n};\n\nconst Icons = {\n  error: ({ size }: { size: 'xsmall' | 'small' | 'medium' | 'large' }): ReactElement => (\n    <InfoIcon\n      display={'block' as never}\n      color=\"feedback.icon.negative.intense\"\n      size={hintIconSize[size]}\n    />\n  ),\n  success: ({ size }: { size: 'xsmall' | 'small' | 'medium' | 'large' }): ReactElement => (\n    <CheckIcon\n      display={'block' as never}\n      color=\"feedback.icon.positive.intense\"\n      size={hintIconSize[size]}\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","Box","flexShrink","Text","as","undefined","hintTextSize","variant","wordBreak","Icons","error","_ref2","InfoIcon","display","hintIconSize","success","_ref3","CheckIcon","FormHint","_ref4","type","helpText","errorText","successText","helpTextId","errorTextId","successTextId","_ref4$size","colors","help","showError","showSuccess","showHelp","_Fragment"],"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 type { IconComponent } from '~components/Icons';\nimport { CheckIcon, InfoIcon } from '~components/Icons';\nimport { getPlatformType } from '~utils/getPlatformType';\nimport { Box } from '~components/Box';\n\ntype HintTextProps = {\n  icon?: IconComponent;\n  children: string;\n  id?: string;\n  color: TextProps<{ variant: 'caption' }>['color'];\n  size: 'xsmall' | '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 ? (\n          // offset block element 2px down to align with text baseline on web only\n          <Box flexShrink={0} marginTop={isReactNative ? 'spacing.0' : 'spacing.1'}>\n            <Icon />\n          </Box>\n        ) : null}\n        <Text\n          as={isReactNative ? undefined : 'span'}\n          color={color}\n          size={hintTextSize[size]}\n          variant=\"caption\"\n          wordBreak=\"break-word\"\n          marginTop={!isReactNative && size === 'large' && Icon ? 'spacing.1' : 'spacing.0'}\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?: 'xsmall' | 'small' | 'medium' | 'large';\n};\n\nconst Icons = {\n  error: ({ size }: { size: 'xsmall' | 'small' | 'medium' | 'large' }): ReactElement => (\n    <InfoIcon\n      display={'block' as never}\n      color=\"feedback.icon.negative.intense\"\n      size={hintIconSize[size]}\n    />\n  ),\n  success: ({ size }: { size: 'xsmall' | 'small' | 'medium' | 'large' }): ReactElement => (\n    <CheckIcon\n      display={'block' as never}\n      color=\"feedback.icon.positive.intense\"\n      size={hintIconSize[size]}\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","Box","flexShrink","Text","as","undefined","hintTextSize","variant","wordBreak","Icons","error","_ref2","InfoIcon","display","hintIconSize","success","_ref3","CheckIcon","FormHint","_ref4","type","helpText","errorText","successText","helpTextId","errorTextId","successTextId","_ref4$size","colors","help","showError","showSuccess","showHelp","_Fragment"],"mappings":"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"}

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

@@ -1,6 +1,6 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import 'react';
-import { labelOptionalIndicatorTextSize, labelTextSize, labelWidth, labelLeftMarginRight, labelMarginBottom } from './formTokens.js';
+import { labelOptionalIndicatorTextSize, labelTextSize, labelTextColor, labelWidth, labelLeftMarginRight, labelMarginBottom } from './formTokens.js';
 import '../VisuallyHidden/index.web.js';
 import '../Typography/index.js';
 import '../../utils/index.js';
@@ -85,7 +85,7 @@ var FormLabel = function FormLabel(_ref) {
     children: [/*#__PURE__*/jsx(Text, {
       variant: "body",
       size: labelTextSize[isLabelLeftPositioned ? 'left' : 'top'][size$1],
-      color: "surface.text.gray.subtle",
+      color: labelTextColor[size$1],
       truncateAfterLines: 2,
       weight: "medium",
       wordBreak: isLabelLeftPositioned ? 'break-word' : undefined,

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 {\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?: 'xsmall' | 'small' | 'medium' | 'large';\n  labelSuffix?: React.ReactNode;\n  labelTrailing?: React.ReactNode;\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  /**\n   * Suffix element to be shown for the input field\n   *\n   * @example\n   * ```jsx\n   * labelSuffix={\n   *  <Tooltip content=\"This is a tooltip\" placement=\"right\">\n   *    <TooltipInteractiveWrapper>\n   *        <InfoIcon size=\"small\" color=\"surface.icon.gray.subtle\" />\n   *    </TooltipInteractiveWrapper>\n   *  </Tooltip>\n   * }\n   * ```\n   */\n  labelSuffix?: React.ReactNode;\n\n  /**\n   * Trailing element to be shown for the input field\n   */\n  labelTrailing?: React.ReactNode;\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  labelSuffix,\n  labelTrailing,\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        alignSelf=\"flex-start\"\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=\"medium\"\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]) : '100%';\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\n        width=\"100%\"\n        display=\"flex\"\n        flexDirection={isLabelLeftPositioned ? 'column' : 'row'}\n        alignItems={isLabelLeftPositioned ? 'flex-start' : 'center'}\n        marginBottom={isLabelLeftPositioned ? 'spacing.0' : labelMarginBottom[size]}\n      >\n        <BaseBox display=\"flex\" flexDirection=\"row\" alignItems=\"center\" gap=\"spacing.2\">\n          <BaseBox>{textNode}</BaseBox>\n          {labelSuffix ? <BaseBox display=\"flex\">{labelSuffix}</BaseBox> : null}\n        </BaseBox>\n        {labelTrailing ? (\n          <BaseBox marginLeft={isLabelLeftPositioned ? 'spacing.0' : 'auto'}>\n            {labelTrailing}\n          </BaseBox>\n        ) : null}\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","labelSuffix","labelTrailing","_useTheme","useTheme","theme","_useBreakpoint","useBreakpoint","breakpoints","matchedDeviceType","isDesktop","isReactNative","getPlatformType","necessityLabel","isLabelLeftPositioned","_jsx","Text","variant","labelOptionalIndicatorTextSize","color","alignSelf","computedAccessibilityNode","_jsxs","VisuallyHidden","textNode","BaseBox","gap","display","flexDirection","alignItems","maxHeight","makeSpace","sizeToken","labelTextSize","truncateAfterLines","weight","wordBreak","undefined","marginRight","marginBottom","Component","width","makeSize","labelWidth","_objectSpread","style","flexShrink","getIn","labelLeftMarginRight","metaAttribute","name","MetaConstants","labelMarginBottom","marginLeft"],"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  labelTextColor,\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?: 'xsmall' | 'small' | 'medium' | 'large';\n  labelSuffix?: React.ReactNode;\n  labelTrailing?: React.ReactNode;\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  /**\n   * Suffix element to be shown for the input field\n   *\n   * @example\n   * ```jsx\n   * labelSuffix={\n   *  <Tooltip content=\"This is a tooltip\" placement=\"right\">\n   *    <TooltipInteractiveWrapper>\n   *        <InfoIcon size=\"small\" color=\"surface.icon.gray.subtle\" />\n   *    </TooltipInteractiveWrapper>\n   *  </Tooltip>\n   * }\n   * ```\n   */\n  labelSuffix?: React.ReactNode;\n\n  /**\n   * Trailing element to be shown for the input field\n   */\n  labelTrailing?: React.ReactNode;\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  labelSuffix,\n  labelTrailing,\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        alignSelf=\"flex-start\"\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={labelTextColor[size]}\n        truncateAfterLines={2}\n        weight=\"medium\"\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]) : '100%';\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\n        width=\"100%\"\n        display=\"flex\"\n        flexDirection={isLabelLeftPositioned ? 'column' : 'row'}\n        alignItems={isLabelLeftPositioned ? 'flex-start' : 'center'}\n        marginBottom={isLabelLeftPositioned ? 'spacing.0' : labelMarginBottom[size]}\n      >\n        <BaseBox display=\"flex\" flexDirection=\"row\" alignItems=\"center\" gap=\"spacing.2\">\n          <BaseBox>{textNode}</BaseBox>\n          {labelSuffix ? <BaseBox display=\"flex\">{labelSuffix}</BaseBox> : null}\n        </BaseBox>\n        {labelTrailing ? (\n          <BaseBox marginLeft={isLabelLeftPositioned ? 'spacing.0' : 'auto'}>\n            {labelTrailing}\n          </BaseBox>\n        ) : null}\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","labelSuffix","labelTrailing","_useTheme","useTheme","theme","_useBreakpoint","useBreakpoint","breakpoints","matchedDeviceType","isDesktop","isReactNative","getPlatformType","necessityLabel","isLabelLeftPositioned","_jsx","Text","variant","labelOptionalIndicatorTextSize","color","alignSelf","computedAccessibilityNode","_jsxs","VisuallyHidden","textNode","BaseBox","gap","display","flexDirection","alignItems","maxHeight","makeSpace","sizeToken","labelTextSize","labelTextColor","truncateAfterLines","weight","wordBreak","undefined","marginRight","marginBottom","Component","width","makeSize","labelWidth","_objectSpread","style","flexShrink","getIn","labelLeftMarginRight","metaAttribute","name","MetaConstants","labelMarginBottom","marginLeft"],"mappings":"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"}

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

@@ -51,6 +51,12 @@ var labelWidth = {
   medium: size[120],
   large: size[176]
 };
+var labelTextColor = {
+  xsmall: 'surface.text.gray.muted',
+  small: 'surface.text.gray.muted',
+  medium: 'surface.text.gray.subtle',
+  large: 'surface.text.gray.subtle'
+};
 var labelLeftMarginRight = {
   xsmall: 'spacing.3',
   small: 'spacing.3',
@@ -58,5 +64,5 @@ var labelLeftMarginRight = {
   large: 'spacing.5'
 };
 
-export { hintIconSize, hintMarginTop, hintTextSize, labelLeftMarginRight, labelMarginBottom, labelOptionalIndicatorTextSize, labelTextSize, labelWidth };
+export { hintIconSize, hintMarginTop, hintTextSize, labelLeftMarginRight, labelMarginBottom, labelOptionalIndicatorTextSize, labelTextColor, labelTextSize, labelWidth };
 //# sourceMappingURL=formTokens.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"formTokens.js","sources":["../../../../../../src/components/Form/formTokens.ts"],"sourcesContent":["import { size } from '~tokens/global';\n\nconst labelTextSize = {\n  top: {\n    xsmall: 'small',\n    small: 'small',\n    medium: 'small',\n    large: 'medium',\n  },\n  left: {\n    xsmall: 'small',\n    small: 'small',\n    medium: 'medium',\n    large: 'large',\n  },\n} as const;\n\nconst labelOptionalIndicatorTextSize = {\n  xsmall: 'small',\n  small: 'small',\n  medium: 'small',\n  large: 'medium',\n} as const;\n\nconst hintTextSize = {\n  xsmall: 'small',\n  small: 'small',\n  medium: 'small',\n  large: 'medium',\n} as const;\n\nconst hintIconSize = {\n  xsmall: 'small',\n  small: 'small',\n  medium: 'small',\n  large: 'medium',\n} as const;\n\nconst hintMarginTop = {\n  xsmall: 'spacing.2',\n  small: 'spacing.2',\n  medium: 'spacing.2',\n  large: 'spacing.3',\n} as const;\n\nconst labelMarginBottom = {\n  xsmall: 'spacing.2',\n  small: 'spacing.2',\n  medium: 'spacing.2',\n  large: 'spacing.3',\n} as const;\n\nconst labelWidth = {\n  xsmall: size[120],\n  small: size[120],\n  medium: size[120],\n  large: size[176],\n} as const;\n\nconst labelLeftMarginRight = {\n  xsmall: 'spacing.3',\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","xsmall","small","medium","large","left","labelOptionalIndicatorTextSize","hintTextSize","hintIconSize","hintMarginTop","labelMarginBottom","labelWidth","size","labelLeftMarginRight"],"mappings":";;;AAEA,IAAMA,aAAa,GAAG;AACpBC,EAAAA,GAAG,EAAE;AACHC,IAAAA,MAAM,EAAE,OAAO;AACfC,IAAAA,KAAK,EAAE,OAAO;AACdC,IAAAA,MAAM,EAAE,OAAO;AACfC,IAAAA,KAAK,EAAE,QAAA;GACR;AACDC,EAAAA,IAAI,EAAE;AACJJ,IAAAA,MAAM,EAAE,OAAO;AACfC,IAAAA,KAAK,EAAE,OAAO;AACdC,IAAAA,MAAM,EAAE,QAAQ;AAChBC,IAAAA,KAAK,EAAE,OAAA;AACT,GAAA;AACF,EAAU;AAEV,IAAME,8BAA8B,GAAG;AACrCL,EAAAA,MAAM,EAAE,OAAO;AACfC,EAAAA,KAAK,EAAE,OAAO;AACdC,EAAAA,MAAM,EAAE,OAAO;AACfC,EAAAA,KAAK,EAAE,QAAA;AACT,EAAU;AAEV,IAAMG,YAAY,GAAG;AACnBN,EAAAA,MAAM,EAAE,OAAO;AACfC,EAAAA,KAAK,EAAE,OAAO;AACdC,EAAAA,MAAM,EAAE,OAAO;AACfC,EAAAA,KAAK,EAAE,QAAA;AACT,EAAU;AAEV,IAAMI,YAAY,GAAG;AACnBP,EAAAA,MAAM,EAAE,OAAO;AACfC,EAAAA,KAAK,EAAE,OAAO;AACdC,EAAAA,MAAM,EAAE,OAAO;AACfC,EAAAA,KAAK,EAAE,QAAA;AACT,EAAU;AAEV,IAAMK,aAAa,GAAG;AACpBR,EAAAA,MAAM,EAAE,WAAW;AACnBC,EAAAA,KAAK,EAAE,WAAW;AAClBC,EAAAA,MAAM,EAAE,WAAW;AACnBC,EAAAA,KAAK,EAAE,WAAA;AACT,EAAU;AAEV,IAAMM,iBAAiB,GAAG;AACxBT,EAAAA,MAAM,EAAE,WAAW;AACnBC,EAAAA,KAAK,EAAE,WAAW;AAClBC,EAAAA,MAAM,EAAE,WAAW;AACnBC,EAAAA,KAAK,EAAE,WAAA;AACT,EAAU;AAEV,IAAMO,UAAU,GAAG;AACjBV,EAAAA,MAAM,EAAEW,IAAI,CAAC,GAAG,CAAC;AACjBV,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;AAC3BZ,EAAAA,MAAM,EAAE,WAAW;AACnBC,EAAAA,KAAK,EAAE,WAAW;AAClBC,EAAAA,MAAM,EAAE,WAAW;AACnBC,EAAAA,KAAK,EAAE,WAAA;AACT;;;;"}
+{"version":3,"file":"formTokens.js","sources":["../../../../../../src/components/Form/formTokens.ts"],"sourcesContent":["import { size } from '~tokens/global';\n\nconst labelTextSize = {\n  top: {\n    xsmall: 'small',\n    small: 'small',\n    medium: 'small',\n    large: 'medium',\n  },\n  left: {\n    xsmall: 'small',\n    small: 'small',\n    medium: 'medium',\n    large: 'large',\n  },\n} as const;\n\nconst labelOptionalIndicatorTextSize = {\n  xsmall: 'small',\n  small: 'small',\n  medium: 'small',\n  large: 'medium',\n} as const;\n\nconst hintTextSize = {\n  xsmall: 'small',\n  small: 'small',\n  medium: 'small',\n  large: 'medium',\n} as const;\n\nconst hintIconSize = {\n  xsmall: 'small',\n  small: 'small',\n  medium: 'small',\n  large: 'medium',\n} as const;\n\nconst hintMarginTop = {\n  xsmall: 'spacing.2',\n  small: 'spacing.2',\n  medium: 'spacing.2',\n  large: 'spacing.3',\n} as const;\n\nconst labelMarginBottom = {\n  xsmall: 'spacing.2',\n  small: 'spacing.2',\n  medium: 'spacing.2',\n  large: 'spacing.3',\n} as const;\n\nconst labelWidth = {\n  xsmall: size[120],\n  small: size[120],\n  medium: size[120],\n  large: size[176],\n} as const;\n\nconst labelTextColor = {\n  xsmall: 'surface.text.gray.muted',\n  small: 'surface.text.gray.muted',\n  medium: 'surface.text.gray.subtle',\n  large: 'surface.text.gray.subtle',\n} as const;\n\nconst labelLeftMarginRight = {\n  xsmall: 'spacing.3',\n  small: 'spacing.3',\n  medium: 'spacing.4',\n  large: 'spacing.5',\n} as const;\n\nexport {\n  labelTextSize,\n  labelTextColor,\n  labelOptionalIndicatorTextSize,\n  hintTextSize,\n  hintIconSize,\n  hintMarginTop,\n  labelMarginBottom,\n  labelWidth,\n  labelLeftMarginRight,\n};\n"],"names":["labelTextSize","top","xsmall","small","medium","large","left","labelOptionalIndicatorTextSize","hintTextSize","hintIconSize","hintMarginTop","labelMarginBottom","labelWidth","size","labelTextColor","labelLeftMarginRight"],"mappings":";;;AAEA,IAAMA,aAAa,GAAG;AACpBC,EAAAA,GAAG,EAAE;AACHC,IAAAA,MAAM,EAAE,OAAO;AACfC,IAAAA,KAAK,EAAE,OAAO;AACdC,IAAAA,MAAM,EAAE,OAAO;AACfC,IAAAA,KAAK,EAAE,QAAA;GACR;AACDC,EAAAA,IAAI,EAAE;AACJJ,IAAAA,MAAM,EAAE,OAAO;AACfC,IAAAA,KAAK,EAAE,OAAO;AACdC,IAAAA,MAAM,EAAE,QAAQ;AAChBC,IAAAA,KAAK,EAAE,OAAA;AACT,GAAA;AACF,EAAU;AAEV,IAAME,8BAA8B,GAAG;AACrCL,EAAAA,MAAM,EAAE,OAAO;AACfC,EAAAA,KAAK,EAAE,OAAO;AACdC,EAAAA,MAAM,EAAE,OAAO;AACfC,EAAAA,KAAK,EAAE,QAAA;AACT,EAAU;AAEV,IAAMG,YAAY,GAAG;AACnBN,EAAAA,MAAM,EAAE,OAAO;AACfC,EAAAA,KAAK,EAAE,OAAO;AACdC,EAAAA,MAAM,EAAE,OAAO;AACfC,EAAAA,KAAK,EAAE,QAAA;AACT,EAAU;AAEV,IAAMI,YAAY,GAAG;AACnBP,EAAAA,MAAM,EAAE,OAAO;AACfC,EAAAA,KAAK,EAAE,OAAO;AACdC,EAAAA,MAAM,EAAE,OAAO;AACfC,EAAAA,KAAK,EAAE,QAAA;AACT,EAAU;AAEV,IAAMK,aAAa,GAAG;AACpBR,EAAAA,MAAM,EAAE,WAAW;AACnBC,EAAAA,KAAK,EAAE,WAAW;AAClBC,EAAAA,MAAM,EAAE,WAAW;AACnBC,EAAAA,KAAK,EAAE,WAAA;AACT,EAAU;AAEV,IAAMM,iBAAiB,GAAG;AACxBT,EAAAA,MAAM,EAAE,WAAW;AACnBC,EAAAA,KAAK,EAAE,WAAW;AAClBC,EAAAA,MAAM,EAAE,WAAW;AACnBC,EAAAA,KAAK,EAAE,WAAA;AACT,EAAU;AAEV,IAAMO,UAAU,GAAG;AACjBV,EAAAA,MAAM,EAAEW,IAAI,CAAC,GAAG,CAAC;AACjBV,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,cAAc,GAAG;AACrBZ,EAAAA,MAAM,EAAE,yBAAyB;AACjCC,EAAAA,KAAK,EAAE,yBAAyB;AAChCC,EAAAA,MAAM,EAAE,0BAA0B;AAClCC,EAAAA,KAAK,EAAE,0BAAA;AACT,EAAU;AAEV,IAAMU,oBAAoB,GAAG;AAC3Bb,EAAAA,MAAM,EAAE,WAAW;AACnBC,EAAAA,KAAK,EAAE,WAAW;AAClBC,EAAAA,MAAM,EAAE,WAAW;AACnBC,EAAAA,KAAK,EAAE,WAAA;AACT;;;;"}